@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-tight-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/roboto-mono-latin.woff2") format("woff2");
}

:root {
        /* ── Rezolve.ai Brand Design System ──────────────────────────────────
           Palette, type ramp, effects and gradients below are the published brand
           values. The legacy token names that follow alias onto this ramp so every
           existing rule keeps resolving. */

        /* Primary — teal */
        --teal-800: #002626;
        --teal-700: #004341;
        --teal-600: #00736f;
        --teal-500: #00908b;
        --teal-400: #00ada7;
        --teal-300: #00c0b9; /* brand */
        --teal-200: #b0ebe9;
        --teal-100: #e6f9f8;

        /* Neutral & text */
        --black: #000404;
        --gray-600: #002020;
        --gray-500: #597272;
        --gray-400: #758a8a;
        --gray-300: #a8b5b5;
        --gray-200: #d6dcdc;
        --gray-100: #f4f8f9;
        --white: #ffffff;

        /* Success / Warning / Error */
        --green-400: #00a241;
        --green-300: #2fbf71;
        --green-200: #b0f7cc;
        --green-100: #e6fcef;
        --yellow-400: #e8a23a;
        --yellow-300: #ffb240;
        --yellow-200: #ffdca7;
        --yellow-100: #fff7ec;
        --red-400: #9f0f05;
        --red-300: #e01507;
        --red-200: #f1938d;
        --red-100: #fce8e6;

        /* Gradients */
        --grad-light: linear-gradient(180deg, #b0ebe9, #00c0b9);
        --grad-mid: linear-gradient(180deg, #00ada7, #00908b);
        --grad-deep: linear-gradient(100deg, #00736f, #00908b);
        --grad-radial: radial-gradient(circle at 50% 50%, #00c0b9, #004341);
        --grad-fade: linear-gradient(180deg, #00736f, rgba(0, 192, 185, 0));
        --grad-fade-radial: radial-gradient(
          circle at 0% 0%,
          #00736f,
          rgba(0, 192, 185, 0)
        );

        /* Effects — shadows are teal-tinted per the effects page */
        --sh-1: 0 1px 10px rgba(0, 115, 111, 0.2);
        --sh-2: 0 10px 10px rgba(0, 115, 111, 0.2);
        --sh-3: 0 7px 20px rgba(0, 115, 111, 0.2);
        --sh-4: 0 0 20px rgba(0, 144, 139, 0.2);
        --surface: #002626;
        --surface-2: #004341;
        --on-surface: #f4f8f9;
        --stroke-teal: #00ada7; /* 0.5px decorative rule */
        --stroke-light: #f4f8f9; /* 1px decorative rule */

        /* Type families — mono is reserved for eyebrows and taglines */
        --font-sans:
          "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto,
          sans-serif;
        --font-mono:
          "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

        /* Brand headline ramp: size / line-height / weight */
        --fs-h1-b: 46px;
        --lh-h1-b: 1.087;
        --fw-h1: 700;
        --fs-h2-b: 32px;
        --lh-h2-b: 1.25;
        --fw-h2: 700;
        --fs-h3-b: 24px;
        --lh-h3-b: 1.333;
        --fw-h3: 600;
        --fs-h4-b: 18px;
        --lh-h4-b: 1.444;
        --fw-h4: 600;
        --fs-h5-b: 16px;
        --lh-h5-b: 1.5;
        --fw-h5: 600;
        --fs-h6-b: 13px;
        --fw-h6: 600;
        --fw-body: 600; /* Default Body is semibold in the system */
        --fw-fine: 400;

        --teal: var(--teal-300);
        --teal-d: var(--teal-300);
        --teal-bright: var(--teal-300);
        --blue: var(--teal-500);
        --indigo: var(--teal-700);
        --cyan: var(--teal-400);
        --ink: #ffffff;
        --ink2: #000404;
        --night: var(--black);
        --paper: #002020;
        --paper2: #002626;
        --paper3: #004341;
        --text: #f4f8f9;
        --muted: #a8b5b5;
        --line: #004341;
        --grad-btn: linear-gradient(
          100deg,
          #00ada7,
          #00c0b9
        ); /* ink label: 6.14:1 -> 7.53:1 */
        --grad-ondark: linear-gradient(
          100deg,
          #b0ebe9,
          #00c0b9
        ); /* teal text ON dark: 13.1:1 -> 7.08:1 */
        --shadow: var(--sh-3);
        --shadow-sm: var(--sh-1);
        --r: 18px;
        --maxw: 1180px;

        /* Type scale — static (UI/body) steps */
        --fs-2xs: 10px; /* eyebrow labels, uppercase kickers, tiny tags */
        --fs-xs: 11px; /* fine print, timestamps, chip/meta text */
        --fs-sm: 12.5px; /* secondary/meta text */
        --fs-base-sm: 13.5px; /* dense UI text: nav links, pills, buttons, card meta */
        --fs-base: 15px; /* default paragraph/body copy */
        --fs-md: 16px; /* lead body text, table cells */
        --fs-lg: 18px; /* card titles, emphasized text */
        --fs-xl: 24px; /* small section headings */

        /* Type scale — display/number steps */
        --fs-2xl: 32px; /* stat numbers, large emphasis */
        --fs-3xl: 46px; /* hero stat numbers */

        /* Type scale — fluid heading steps */
        --fs-lede: clamp(
          16px,
          1.8vw,
          19px
        ); /* intro/lede paragraphs under headings */
        --fs-h4: clamp(17px, 2.6vw, 18px); /* band/small headings */
        --fs-h3: clamp(
          20px,
          3.2vw,
          24px
        ); /* section headings, featured card titles */
        --fs-h2: clamp(26px, 4vw, 32px); /* major subsection headings */
        --fs-h1: clamp(32px, 5vw, 46px); /* standard page-head h1 */
        --fs-hero: clamp(36px, 5.5vw, 46px); /* hero/landing display headline */

        /* Line-height scale */
        --lh-h1: 1.087; /* brand H1 50/46 */
        --lh-h3: 1.333; /* brand H3 32/24 */
        --lh-h4: 1.444; /* brand H4 26/18 */
        --lh-tight: 1; /* single-line labels, big stat/display numbers */
        --lh-snug: 1.15; /* headings */
        --lh-heading: 1.25; /* section headings, card titles */
        --lh-base: 1.4; /* dense UI text, nav, buttons */
        --lh-body: 1.5; /* default paragraph/body copy */
        --lh-loose: 1.6; /* longer-form prose, lede paragraphs */
        --lh-xloose: 1.75; /* extra breathing room (rare, stacked meta rows) */
      }

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

html {
        scroll-behavior: smooth;
      }

body {
        font-family:
          "Inter Tight",
          system-ui,
          -apple-system,
          Segoe UI,
          Roboto,
          sans-serif;
        color: var(--text);
        background: var(--paper);
        line-height: var(--lh-body);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

h1,
      h2,
      h3 {
        letter-spacing: -0.025em;
        line-height: var(--lh-tight);
        font-weight: 800;
      }

a {
        color: inherit;
        text-decoration: none;
      }

.wrap {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 24px;
      }

.eyebrow {
        font-family: var(--font-mono);
        font-size: var(--fs-h6-b);
        font-weight: var(--fw-h6);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--teal-d);
      }

.eyebrow.on-dark {
        color: var(--teal-bright);
      }

.muted {
        color: var(--muted);
      }

.gradtext {
        color: var(--teal-d);
      }

.btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-weight: 700;
        font-size: var(--fs-base);
        border-radius: 999px;
        padding: 13px 24px;
        cursor: pointer;
        border: 0;
        transition:
          0.2s transform,
          0.2s box-shadow,
          0.2s background;
      }

/* Buttons — the brand system's four tiers.
         The document draws the primary CTA as white on brand teal (#00c0b9), which
         measures 2.27:1; button labels need 4.5:1. The fill is Teal 600 instead — the
         darkest step that still reads as brand teal — at 5.70:1. Same reason the
         gradient button runs 700->600 rather than the document's 600->500, whose light
         end lands at 3.92:1. */
      .btn-primary {
        background: var(--teal-300);
        color: var(--gray-600);
        box-shadow: var(--sh-4);
      }

.btn-primary:hover {
        background: var(--teal-200);
        transform: translateY(-2px);
      }

.btn-ink {
        background: var(--gray-100);
        color: var(--gray-600);
      }

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

.btn-soft {
        background: transparent;
        color: var(--text);
        border: 1px solid var(--teal-600);
      }

/* Primary CTA, outlined */
      .btn-outline {
        background: transparent;
        color: var(--teal-300);
        border: 1px solid var(--teal-400);
      }

/* Secondary CTA — the gradient tier */
      .btn-gradient {
        background: var(--grad-btn);
        color: var(--gray-600);
        box-shadow: var(--sh-4);
      }

.btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: var(--sh-3);
      }

/* Ghost — text and an arrow */
      .btn-ghost {
        background: none;
        border: 0;
        padding-left: 0;
        padding-right: 0;
        color: var(--teal-300);
      }

.btn-ghost {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.25);
      }

.btn-ghost:hover {
        color: var(--teal-200);
      }

.btn-ghost:hover {
        background: rgba(255, 255, 255, 0.16);
      }

.btn-sm {
        padding: 10px 18px;
        font-size: var(--fs-base-sm);
      }

/* top accent + NAV */
      .accent-bar {
        height: 3px;
        background: var(--teal-d);
      }

header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(0, 32, 32, 0.85);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
      }

nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 66px;
      }

.brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        font-size: var(--fs-xl);
        letter-spacing: -0.04em;
      }

.brand svg {
        height: 32px;
        width: auto;
        display: block;
      }

.navlinks {
        display: flex;
        align-items: center;
        align-self: stretch;
        gap: 22px;
        font-size: var(--fs-base);
        font-weight: 600;
        color: var(--text);
      }

.navlinks > a {
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        border-bottom: 2px solid transparent;
        padding-top: 2px;
      }

.navlinks a:hover {
        color: var(--teal-d);
      }

.navlinks > a:hover {
        border-bottom-color: var(--teal-d);
      }

.navlinks a.active {
        color: var(--teal-d);
      }

/* Nav dropdowns: click-to-open (touch + keyboard) with hover as a bonus on desktop.
     Panels are full-bleed sheets anchored to the sticky header (.nav-dd stays static
     so header is the positioned ancestor); each trigger stretches the full header
     height so the pointer never leaves .nav-dd on its way down into the sheet. */
      .nav-dd {
        display: flex;
        align-items: center;
        align-self: stretch;
        border-bottom: 2px solid transparent;
        padding-top: 2px;
      }

.nav-dd:hover,
      .nav-dd:focus-within,
      .nav-dd.open {
        border-bottom-color: var(--teal-d);
      }

.nav-dd:hover > .nav-dd-btn,
      .nav-dd:focus-within > .nav-dd-btn,
      .nav-dd.open > .nav-dd-btn {
        color: var(--teal-d);
      }

.nav-dd > a::after,
      .nav-dd-btn::after {
        content: " ▾";
        font-size: var(--fs-2xs);
        opacity: 0.7;
      }

.nav-dd-btn {
        background: none;
        border: 0;
        font: inherit;
        font-weight: inherit;
        color: inherit;
        cursor: pointer;
        padding: 0;
        display: inline-flex;
        align-items: center;
      }

.nav-dd-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        z-index: 60;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 42px 64px -44px rgba(0, 32, 32, 0.38);
      }

.nav-dd.open .nav-dd-menu {
        display: block;
      }

/* Product mega-menu: five acts as headers, sub-products beneath.
     Content rides the page grid inside the full-bleed sheet. */
      .nav-mega {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px 40px;
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 28px 24px 34px;
      }

.nm-act {
        padding: 2px 0;
      }

.nm-act-head {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        padding: 7px 10px 6px;
        border-radius: 9px;
      }

.nm-act-head i {
        font-style: normal;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--grad-btn);
        color: var(--gray-600);
        font-size: var(--fs-2xs);
        font-weight: 800;
        display: grid;
        place-items: center;
        flex: none;
        margin-top: 1px;
      }

.nm-act-head .t {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

.nm-act-head b {
        font-size: var(--fs-sm);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink);
      }

.nm-act-head .k {
        font-size: var(--fs-xs);
        color: var(--muted);
        font-weight: 600;
      }

.nm-act-head:hover {
        background: var(--paper3);
      }

.nm-act-head:hover b {
        color: var(--teal-d);
      }

.nm-item {
        display: block;
        padding: 6px 10px 6px 39px;
        border-radius: 9px;
        white-space: normal;
      }

.nm-item b {
        display: block;
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: var(--ink);
      }

.nm-item span {
        display: block;
        font-size: var(--fs-xs);
        color: var(--muted);
        font-weight: 600;
        margin-top: 1px;
      }

.nm-item:hover {
        background: var(--paper3);
      }

.nm-item:hover b {
        color: var(--teal-d);
      }

.nm-more-label {
        display: block;
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 8px 10px 4px;
      }

/* Resources mega: three groups + the studio-managed spotlight card */
      .nav-mega.nm-res {
        grid-template-columns: repeat(3, 1fr) 300px;
      }

.nm-res .nm-item {
        padding-left: 10px;
      }

.nm-spot {
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px;
        align-self: start;
        transition:
          0.15s border-color,
          0.15s transform;
      }

.nm-spot:hover {
        border-color: rgba(0, 192, 185, 0.55);
        transform: translateY(-2px);
      }

.nm-spot-img {
        border-radius: 8px;
        overflow: hidden;
        aspect-ratio: 16/9;
        background: var(--ink2);
      }

.nm-spot-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

.nm-spot-k {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--teal-d);
      }

.nm-spot b {
        font-size: var(--fs-base-sm);
        line-height: var(--lh-base);
        letter-spacing: -0.01em;
        color: var(--ink);
      }

.nm-spot-cta {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: var(--teal-d);
      }

/* Company mega: two groups + the why-Rezolve trust card */
      .nav-mega.nm-co {
        grid-template-columns: 1fr 1fr 320px;
      }

.nm-co .nm-item {
        padding-left: 10px;
      }

.nav-mega.nm-sol {
        grid-template-columns: 1fr 1fr 320px;
      }

.nm-sol .nm-item {
        padding-left: 10px;
      }

.nav-mega.nm-prod {
        grid-template-columns: repeat(5, 1fr);
        gap: 26px 30px;
      }

.nm-prod .nm-act {
        position: relative;
      }

.nm-prod .nm-act::before {
        content: "";
        position: absolute;
        top: 17px;
        left: 100%;
        width: 40px;
        height: 2px;
        background: var(--line);
      }

.nm-prod .nm-act:nth-child(5)::before {
        display: none;
      }

.nm-prod .nm-act-head i {
        position: relative;
        z-index: 1;
      }

.nm-prod-rail {
        grid-column: 1/-1;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px 34px;
        border-top: 1px solid var(--line);
        padding-top: 16px;
        margin-top: 2px;
      }

.nm-prod-rail .nm-rail-label {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--muted);
      }

.nm-prod-rail a {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
      }

.nm-prod-rail a b {
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: var(--ink);
      }

.nm-prod-rail a span {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--muted);
      }

.nm-prod-rail a:hover b {
        color: var(--teal-d);
      }

.aw-livecta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        flex-wrap: wrap;
        margin-top: 26px;
        font-size: var(--fs-base);
        font-weight: 600;
        color: var(--muted);
        text-align: center;
      }

.nm-co-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: linear-gradient(
          135deg,
          var(--gray-600) 0%,
          var(--ink2) 60%,
          #0d3b46 100%
        );
        border-radius: 12px;
        padding: 16px;
        align-self: start;
        transition: 0.15s transform;
      }

.nm-co-card:hover {
        transform: translateY(-2px);
      }

.nm-co-card .k {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #7ff0d4;
      }

.nm-co-card p {
        font-size: var(--fs-sm);
        line-height: var(--lh-body);
        color: #d7e6e9;
        font-weight: 600;
      }

.nm-co-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

.nm-co-chips span {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.04em;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 6px;
        padding: 3px 7px;
        color: #cfe3e6;
      }

.nm-co-cta {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #7ff0d4;
      }

.nm-more .nm-item {
        padding-left: 10px;
      }

.nav-signin:hover {
        color: var(--teal-d);
      }

.nav-burger {
        display: none;
        background: none;
        border: 0;
        cursor: pointer;
        padding: 8px;
        margin: -8px -6px -8px 2px;
        color: var(--text);
      }

.nav-burger svg {
        display: block;
      }

.nav-mobile {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--surface);
        border-top: 1px solid var(--line);
        padding: 6px 24px calc(20px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - 70px);
        max-height: calc(100dvh - 70px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 32px 56px -36px rgba(0, 32, 32, 0.4);
        z-index: 55;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
      }

.nav-mobile.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
      }

.nav-mobile a {
        padding: 12px 0;
        font-size: var(--fs-base);
        font-weight: 700;
        color: var(--text);
        border-bottom: 1px solid var(--line);
        display: block;
      }

.nav-mobile .nav-m-sub {
        display: flex;
        flex-direction: column;
        padding-left: 12px;
        overflow: hidden;
        max-height: 0;
        padding-bottom: 0;
        transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1), padding-bottom 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      }

.nav-mobile .nav-m-sub a {
        padding: 9px 0;
        font-weight: 500;
        font-size: var(--fs-base);
        color: var(--muted);
        border-bottom: 0;
      }

.nav-mobile details {
        border-bottom: 1px solid var(--line);
      }

.nav-mobile summary {
        padding: 12px 0;
        font-size: var(--fs-base);
        font-weight: 700;
        color: var(--text);
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        list-style: none;
      }

.nav-mobile summary::-webkit-details-marker {
        display: none;
      }

.nav-mobile summary::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--muted);
        border-bottom: 2px solid var(--muted);
        transform: rotate(45deg) translateY(-2px);
        transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
        flex: none;
      }

.nav-mobile details[open] summary::after {
        transform: rotate(225deg) translateY(2px);
      }

.nav-mobile details[open] > .nav-m-sub {
        max-height: 600px;
        padding-bottom: 10px;
      }

.nav-mobile .nav-m-cta {
        display: flex;
        margin-top: 14px;
        justify-content: center;
        border-bottom: 0;
        color: var(--gray-600);
      }

@media (max-width: 1040px) {
        .nav-burger {
          display: flex;
        }
      }

@media (max-width: 1040px) {
        .navlinks {
          display: none;
        }
        .navcta .btn-soft {
          display: none;
        }
        .navcta .nav-signin {
          display: none;
        }
      }

@media (max-width: 1040px) {
        .pillars {
          grid-template-columns: repeat(2, 1fr);
        }
      }

/* ===== five-act story (landing) + pillar setup/bridge ===== */
      .story-grid {
        display: grid;
        grid-template-columns: 1.12fr 1fr;
        gap: 54px;
        align-items: center;
      }

.story-grid.flip .story-copy {
        order: 2;
      }

.story-copy h2 {
        font-size: var(--fs-h3);
      }

.story-copy h2 .eyebrow {
        display: block;
        margin-bottom: 12px;
      }

.story-copy > p {
        margin-top: 14px;
        color: var(--muted);
        font-size: var(--fs-md);
        max-width: 580px;
      }

.story-points {
        list-style: none;
        margin: 20px 0 24px;
        padding: 0;
        display: grid;
        gap: 10px;
      }

.story-points li svg {
        width: 17px;
        height: 17px;
        color: var(--teal-d);
        flex: none;
        margin-top: 2px;
      }

.story-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: var(--fs-base);
        color: var(--teal-d);
        transition: gap 0.18s;
      }

.story-cta:hover {
        gap: 13px;
      }

.story-shot {
        display: block;
        position: relative;
      }

.story-shot-frame {
        display: block;
        aspect-ratio: 16/10;
        overflow: hidden;
        border-radius: 15px;
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        background: #f4f8f9;
        transition:
          0.25s transform,
          0.25s box-shadow;
      }

.story-shot:hover .story-shot-frame {
        transform: translateY(-5px);
      }

.story-shot-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top left;
        display: block;
      }

.story-shot-badge b {
        color: var(--teal-d);
        font-weight: 800;
      }

.navcta {
        display: flex;
        align-items: center;
        gap: 12px;
      }

/* anchor targets clear the sticky nav */
      #platform,
      section[id] {
        scroll-margin-top: 112px;
      }

.hero .wrap {
        position: relative;
        z-index: 2;
        padding: 60px 24px 40px;
      }

.pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--surface);
        border: 1px solid var(--line);
        color: var(--teal-d);
        font-weight: 700;
        font-size: var(--fs-sm);
        padding: 7px 14px;
        border-radius: 999px;
      }

.pill .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--teal);
      }

.hero-actions {
        display: flex;
        gap: 13px;
        flex-wrap: wrap;
        margin-top: 22px;
      }

.aud {
        display: inline-flex;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 5px;
        gap: 4px;
        box-shadow: var(--shadow-sm);
      }

.aud button.active {
        background: var(--grad-btn);
        color: var(--gray-600);
      }

.aud svg {
        width: 16px;
        height: 16px;
      }

a.tb {
        transition: 0.15s;
      }

a.tb:hover {
        border-color: var(--teal);
        color: var(--teal-d);
      }

/* screenshot browser frame */
      .shot {
        border-radius: 15px;
        border: 1px solid var(--line);
        background: #fff;
        box-shadow: var(--shadow);
        overflow: hidden;
        transition: 0.3s transform;
      }

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

.shot .bar {
        display: flex;
        gap: 6px;
        align-items: center;
        padding: 9px 13px;
        background: #eef4f4;
        border-bottom: 1px solid var(--line);
      }

.shot .bar i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #cdd9d8;
        display: inline-block;
      }

.shot img {
        display: block;
        width: 100%;
        height: auto;
      }

.real-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: var(--fs-xs);
        font-weight: 700;
        color: var(--teal-d);
        background: #e7f7f5;
        border: 1px solid #d6ece9;
        border-radius: 999px;
        padding: 5px 11px;
        letter-spacing: 0.02em;
      }

/* SECTION */
      section.block {
        padding: 60px 0;
      }

.sec-head {
        max-width: 760px;
        margin: 0 auto 46px;
        text-align: center;
      }

.sec-head h2 {
        font-size: var(--fs-h2);
        margin: 0;
      }

.sec-head p {
        color: var(--muted);
        font-size: var(--fs-lg);
        margin-top: 14px;
      }

/* metrics */
      .metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }

.metric {
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: var(--r);
        padding: 22px 18px;
        text-align: center;
        display: flex;
        flex-direction: column;
      }

.metric .n {
        font-weight: 800;
        font-size: var(--fs-3xl);
        letter-spacing: -0.03em;
        color: var(--text);
      }

.metric .l {
        font-size: var(--fs-sm);
        color: var(--muted);
        font-weight: 600;
        margin-top: 4px;
      }

.metric .src {
        font-size: var(--fs-xs);
        font-weight: 700;
        color: var(--teal-d);
        margin-top: auto;
        padding-top: 10px;
        line-height: var(--lh-base);
      }

.proof-foot {
        max-width: 840px;
        margin: 38px auto 0;
        border-top: 1px solid var(--line);
        padding-top: 22px;
        text-align: center;
      }

.proof-foot .pf-analysts {
        font-size: var(--fs-base);
        font-weight: 700;
        color: var(--text);
        letter-spacing: 0.01em;
      }

.proof-foot .pf-analysts b {
        color: var(--teal-d);
      }

.proof-foot .pf-row {
        color: var(--muted);
        font-size: var(--fs-sm);
        font-weight: 600;
        line-height: var(--lh-xloose);
        margin-top: 8px;
      }

.proof-foot .pf-row b {
        color: var(--text);
        font-weight: 700;
      }

.proof-foot .pf-note {
        font-size: var(--fs-sm);
        color: var(--muted);
        margin-top: 12px;
      }

.pullq {
        max-width: 740px;
        margin: 36px auto 0;
        text-align: center;
      }

.pullq .qm {
        display: block;
        font-size: var(--fs-3xl);
        line-height: 0.6;
        color: var(--teal);
        font-weight: 800;
        margin-bottom: 10px;
      }

.pullq .who {
        margin-top: 14px;
        font-size: var(--fs-sm);
        color: var(--muted);
        font-weight: 600;
      }

.pullq .who b {
        color: var(--text);
      }

.cmp-head,
      .cmp-row,
      .cmp-foot {
        display: grid;
        grid-template-columns: var(--cmp-grid);
        align-items: stretch;
      }

.cmp-row,
      .cmp-foot {
        border-top: 1px solid var(--line);
      }

.cmp-foot {
        background: var(--paper2);
      }

.cmp-h-rez,
      .cmp-c-rez,
      .cmp-foot-rez {
        background: linear-gradient(
          180deg,
          rgba(0, 192, 185, 0.085),
          rgba(0, 173, 167, 0.045)
        );
        border-left: 1px solid var(--cmp-line-teal);
      }

.cmp-h-rez {
        border-top: 2px solid var(--teal-d);
      }

.cmp-h-crit,
      .cmp-h-col {
        padding: 24px 26px;
      }

.cmp-h-crit {
        display: flex;
        flex-direction: column;
        gap: 6px;
        justify-content: flex-end;
      }

.cmp-kicker {
        font-size: var(--fs-xs);
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--teal-d);
      }

.cmp-criteria-label {
        font-size: var(--fs-md);
        font-weight: 800;
        letter-spacing: -0.025em;
        color: var(--text);
      }

.cmp-h-col {
        display: flex;
        flex-direction: column;
        gap: 8px;
        justify-content: flex-end;
      }

.cmp-col-name {
        font-size: var(--fs-md);
        font-weight: 800;
        letter-spacing: -0.025em;
        color: var(--muted);
      }

.cmp-col-sub {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--muted);
        line-height: var(--lh-base);
      }

.cmp-h-rez .cmp-col-sub {
        color: var(--teal-d);
        text-transform: uppercase;
        letter-spacing: 0.11em;
        font-size: var(--fs-xs);
        font-weight: 800;
      }

.cmp-rez-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        align-self: flex-start;
        font-size: var(--fs-md);
        font-weight: 800;
        letter-spacing: -0.025em;
        color: var(--text);
        padding: 0;
        border-radius: 0;
        background: none;
        border: 0;
        box-shadow: none;
      }

.cmp-rez-badge svg {
        width: 17px;
        height: 17px;
        color: var(--teal-d);
      }

.cmp-c-crit,
      .cmp-c-typical,
      .cmp-c-rez {
        padding: 17px 26px;
        display: flex;
        align-items: center;
      }

.cmp-c-typical,
      .cmp-c-rez {
        gap: 12px;
      }

.cmp-crit-t {
        font-size: var(--fs-base);
        font-weight: 700;
        letter-spacing: -0.015em;
        color: var(--text);
      }

.cmp-cell-t {
        font-size: var(--fs-base-sm);
        line-height: var(--lh-body);
        color: var(--cmp-cell-ink-muted);
      }

.cmp-c-rez .cmp-cell-t {
        color: var(--cmp-cell-ink);
      }

.cmp-cell-t b {
        color: var(--text);
        font-weight: 700;
      }

.cmp-mark {
        flex: none;
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
      }

.cmp-mark svg {
        width: 18px;
        height: 18px;
        stroke-width: 2.2;
      }

.cmp-mark--no {
        background: none;
        border: 0;
        color: #d64a3a;
      }

.cmp-mark--yes {
        background: none;
        border: 0;
        color: var(--teal-d);
      }

.cmp-foot-crit,
      .cmp-foot-typical,
      .cmp-foot-rez {
        padding: 22px 26px;
        display: flex;
        flex-direction: column;
        gap: 9px;
        justify-content: center;
      }

.cmp-foot-label {
        font-size: var(--fs-xs);
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
      }

.cmp-verdict {
        display: inline-flex;
        align-items: center;
        font-size: var(--fs-base-sm);
        font-weight: 800;
        letter-spacing: -0.015em;
        line-height: var(--lh-base);
      }

.cmp-verdict--yes {
        color: var(--text);
      }

.cmp-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        align-self: flex-start;
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: var(--teal-d);
        text-decoration: none;
        border-radius: 7px;
        transition: gap 0.2s ease;
      }

.cmp-link svg {
        width: 16px;
        height: 16px;
      }

.cmp-link:hover {
        gap: 11px;
      }

.cmp-link:focus-visible {
        outline: 2px solid var(--teal-d);
        outline-offset: 4px;
      }

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

.cmp-mobile-spine {
        display: none;
      }

/* pillars */
      .pillars {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }

.card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r);
        padding: 24px;
        transition:
          0.25s transform,
          0.25s box-shadow,
          0.25s border-color;
      }

.card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow);
        border-color: #bfe0dd;
      }

.card .ic {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        display: grid;
        place-items: center;
        background: var(--paper2);
        border: 1px solid var(--line);
        margin-bottom: 15px;
      }

.card .ic svg {
        width: 23px;
        height: 23px;
        color: var(--teal-d);
      }

.card h3 {
        font-size: var(--fs-xl);
        margin-bottom: 5px;
      }

.card .tag {
        font-size: var(--fs-xs);
        font-weight: 700;
        color: var(--teal-d);
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

.card p {
        font-size: var(--fs-base-sm);
        color: var(--muted);
        margin-top: 7px;
      }

.card ul {
        list-style: none;
        margin-top: 13px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

.card ul li {
        font-size: var(--fs-sm);
        color: #34474a;
        display: flex;
        gap: 9px;
        align-items: flex-start;
      }

.card ul li svg {
        flex: none;
        margin-top: 3px;
        color: var(--teal);
      }

/* bands */
      .band {
        background: var(--paper2);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

.band.dark {
        background: linear-gradient(180deg, #002020, #002626);
        color: #eafdfb;
        border-color: rgba(255, 255, 255, 0.06);
      }

.band.dark .sec-head p {
        color: #bfe0de;
      }

.split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 44px;
        align-items: center;
      }

/* video */
      .videowrap {
        max-width: 1000px;
        margin: 0 auto;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7);
        background: #000;
      }

.videowrap video {
        display: block;
        width: 100%;
        height: auto;
      }

/* studio feature list (dark) */
      .featlist {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

.featgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px 36px;
        max-width: 1000px;
        margin: 0 auto 30px;
      }

.featrow {
        display: flex;
        gap: 14px;
        align-items: flex-start;
      }

.featrow .fi {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        flex: none;
        display: grid;
        place-items: center;
        background: var(--paper2);
        border: 1px solid var(--line);
      }

.featrow .fi svg {
        width: 20px;
        height: 20px;
        color: var(--teal-d);
      }

.featrow b {
        font-size: var(--fs-md);
        color: #fff;
        font-weight: 700;
      }

.featrow p {
        font-size: var(--fs-base-sm);
        color: #bfe0de;
        margin-top: 3px;
      }

.capt-d {
        font-size: var(--fs-sm);
        color: #9fc6c2;
        text-align: center;
        margin-top: 11px;
      }

.shot.dark {
        border-color: rgba(255, 255, 255, 0.12);
        background: #0a2730;
      }

.shot.dark .bar {
        background: #0d2f38;
        border-color: rgba(255, 255, 255, 0.08);
      }

.shot.dark .bar i {
        background: #2a4a52;
      }

.shot.dark .bar .u {
        color: #7fb0ab;
      }

.studio-single {
        max-width: 1040px;
        margin: 36px auto 0;
      }

#hero-hl.hl-out {
        opacity: 0;
        transform: translateY(9px);
      }

body.aud-auto .aud [data-aud-btn].active {
        position: relative;
        overflow: hidden;
      }

body.aud-auto .aud [data-aud-btn].active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2.5px;
        background: var(--grad-btn);
        transform-origin: left;
        animation: audprog 4.2s linear infinite;
      }

@keyframes audprog {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(1);
        }
      }

.cl-cloud span {
        white-space: nowrap;
        font-size: var(--fs-md);
        font-weight: 800;
        letter-spacing: -0.015em;
        color: #8aa3a7;
      }

.cl-more {
        text-align: center;
        font-size: var(--fs-sm);
        color: var(--muted);
        margin: 0;
        cursor: default;
      }

.rating .stars {
        color: #e8a33d;
        font-size: var(--fs-sm);
        letter-spacing: 2.5px;
      }

.rating .stars .half {
        opacity: 0.35;
      }

.rating .rp {
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: var(--ink);
      }

.rating i {
        font-style: normal;
        font-size: var(--fs-sm);
        color: var(--muted);
      }

.rec-q p {
        font-size: var(--fs-md);
        line-height: var(--lh-body);
        color: var(--text);
        font-weight: 600;
        letter-spacing: -0.012em;
      }

.rec-q-who b {
        color: var(--ink);
        font-weight: 700;
      }

.rec-row b {
        font-size: var(--fs-base-sm);
        color: var(--ink);
      }

a.rating {
        text-decoration: none;
        color: inherit;
        transition:
          box-shadow 0.15s,
          border-color 0.15s;
      }

a.rating:hover {
        border-color: rgba(0, 115, 111, 0.4);
        box-shadow: var(--shadow);
      }

.secgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
      }

.seccard {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--r);
        padding: 23px;
      }

.seccard h3 {
        font-size: var(--fs-lg);
        color: #fff;
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 8px;
        font-weight: 700;
      }

.seccard p {
        font-size: var(--fs-base-sm);
        color: #bfe0de;
      }

.seccard svg {
        color: var(--teal-bright);
        flex: none;
      }

/* compliance framework seals — drawn in-house (ISO/GDPR/HIPAA publish no official logo) */
      .certseals {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin: 12px 0 11px;
      }

/* CTA */
      .cta {
        position: relative;
        background:
          linear-gradient(rgba(4, 26, 42, 0.5), rgba(4, 26, 42, 0.5)),
          var(--grad-btn);
        border-radius: 28px;
        padding: 54px;
        text-align: center;
        overflow: hidden;
        box-shadow: 0 40px 90px -40px rgba(0, 144, 139, 0.5);
      }

.cta::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          circle at 18% 20%,
          rgba(255, 255, 255, 0.22),
          transparent 42%
        );
        pointer-events: none;
      }

.cta .eyebrow {
        color: rgba(255, 255, 255, 0.95);
      }

.cta h2 {
        font-size: var(--fs-h2);
        color: #fff;
        position: relative;
        margin-top: 0;
      }

.cta h2 .eyebrow {
        margin-bottom: 6px;
      }

.cta p {
        color: rgba(255, 255, 255, 0.92);
        font-size: var(--fs-lg);
        margin-top: 13px;
        position: relative;
        font-weight: 500;
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
      }

.cta .cta-note {
        color: rgba(255, 255, 255, 0.92);
        font-size: var(--fs-base-sm);
        font-weight: 600;
        margin-top: 10px;
      }

.cta .hero-actions {
        justify-content: center;
        position: relative;
        margin-top: 24px;
      }

/* Footer — same columned format as the app-router pages (see SiteFooter.tsx
     + .site-footer rules in app/globals.css); keep the two in sync. */
      footer {
        background: var(--gray-600);
        color: #cfe0e2;
        padding: 56px 0 32px;
        font-size: var(--fs-base);
      }

footer .brand {
        color: #fff;
      }

.foot-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
        gap: 34px;
      }

.foot-grid h4 {
        color: #fff;
        font-size: var(--fs-sm);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 14px;
      }

.foot-grid a {
        display: block;
        padding: 4px 0;
        color: #a8b5b5;
        font-size: var(--fs-base);
      }

.foot-grid a:hover {
        color: #fff;
      }

.foot-tag {
        margin-top: 14px;
        color: #a8b5b5;
        max-width: 320px;
      }

.foot-tag-note {
        margin-top: 6px;
        font-size: var(--fs-sm);
        color: #7d9498;
      }

.foot-compare {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin-top: 40px;
        padding-top: 24px;
      }

.foot-compare h4 {
        color: #fff;
        font-size: var(--fs-sm);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 12px;
      }

.foot-compare-links {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 20px;
      }

.foot-compare-links a {
        font-size: var(--fs-base-sm);
        color: #a8b5b5;
        padding: 3px 0;
      }

.foot-compare-links a:hover {
        color: #fff;
      }

.foot-compare-links a.foot-compare-all {
        color: #7fd6cd;
        font-weight: 700;
      }

.foot-legal {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        margin-top: 44px;
        padding-top: 22px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 22px;
        font-size: var(--fs-sm);
        color: #7d9498;
      }

.foot-legal a {
        font-size: var(--fs-sm);
        color: #a8b5b5;
      }

.foot-legal a:hover {
        color: #fff;
      }

.foot-legal a:hover {
        color: #fff;
      }

@media (max-width: 400px) {
        .foot-grid {
          grid-template-columns: 1fr;
        }
      }

.reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
      }

.reveal.in {
        opacity: 1;
        transform: none;
      }

.fullshot {
        max-width: 1040px;
        margin: 30px auto 0;
      }

.vfeats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 13px;
        margin-top: 26px;
      }

/* ===== INTERACTIVE: EXPLAINABLE AI (product-faithful, app-framed) ===== */
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }

.shot.nofloat:hover {
        transform: none;
      }

.shot .bar .live {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: var(--fs-xs);
        font-weight: 700;
        color: var(--teal-d);
      }

.shot .bar .live .ld {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--teal);
        box-shadow: 0 0 0 3px rgba(0, 192, 185, 0.22);
        animation: pulse 1.7s infinite;
      }

.xai-wrap {
        max-width: 1000px;
        margin: 0 auto;
      }

.xai {
        background: var(--surface);
        padding: 24px 26px 28px;
      }

.xai-h {
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }

.xai-h .tt {
        font-size: var(--fs-lg);
        font-weight: 800;
        color: #002020;
        letter-spacing: -0.02em;
      }

.xai-h .cx {
        margin-left: auto;
        color: #b3c2c4;
        flex: none;
      }

.xai-sub {
        font-size: var(--fs-base-sm);
        color: #64787c;
        margin-top: 3px;
      }

.xai-sub b {
        color: #002020;
        font-weight: 700;
      }

.xai-prefs {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-top: 14px;
      }

.xai-prefs .pl {
        font-size: var(--fs-sm);
        color: #64787c;
        font-weight: 600;
        margin-right: 2px;
      }

.xai-pref {
        font-size: var(--fs-xs);
        font-weight: 700;
        color: #b07d28;
        border: 1px solid #ecd7ad;
        border-radius: 999px;
        padding: 5px 13px;
        background: #fffaf1;
      }

.xai-q {
        margin-top: 16px;
      }

.xai-q .ql {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #002020;
      }

.xai-q .qb {
        margin-top: 7px;
        background: #f3f7f7;
        border-radius: 10px;
        padding: 12px 15px;
        font-size: var(--fs-base-sm);
        color: #002020;
      }

.xai-toolbar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 18px;
        flex-wrap: wrap;
      }

.xai-leg {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: var(--fs-sm);
        font-weight: 700;
      }

.xai-leg svg {
        width: 16px;
        height: 16px;
      }

.xai-leg.act {
        color: #bb8124;
      }

.xai-tools {
        margin-left: auto;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

.xai-btn {
        font-size: var(--fs-sm);
        font-weight: 700;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 8px;
        padding: 7px 13px;
        cursor: pointer;
        color: #002020;
        transition: 0.15s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

.xai-btn:hover {
        background: var(--paper3);
      }

.xai-btn svg {
        width: 13px;
        height: 13px;
      }

.xai-btn.primary {
        background: var(--grad-btn);
        color: #fff;
        border: 0;
        box-shadow: 0 10px 22px -13px rgba(0, 144, 139, 0.5);
      }

.xai-btn.primary:hover {
        filter: brightness(1.04);
      }

.xai-lane {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 22px 0 2px;
      }

.xai-lane .lt {
        font-size: var(--fs-xs);
        font-weight: 800;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        white-space: nowrap;
      }

.xai-lane .ln {
        flex: 1;
        height: 1px;
      }

.xai-lane.act .lt {
        color: #c08a39;
      }

.xai-lane.act .ln {
        background: linear-gradient(90deg, #eccfa0, transparent);
      }

.xai-lane.sel .ln {
        background: linear-gradient(90deg, #bcd2ff, transparent);
      }

.xai-conn {
        width: 1.5px;
        height: 14px;
        background: #dde9e8;
        margin: 2px auto;
      }

.xai-card {
        border-radius: 13px;
        background: #fff;
        border: 1px solid var(--line);
        overflow: hidden;
        margin-top: 8px;
      }

.xai-card.agent {
        border: 1.5px solid transparent;
        background:
          linear-gradient(#fff, #fff) padding-box,
          linear-gradient(120deg, #b884ef, #6f9bf4 52%, #3fcfe0) border-box;
      }

.xai-ch {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 14px 16px;
        cursor: pointer;
        user-select: none;
      }

.xai-ico {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        flex: none;
        display: grid;
        place-items: center;
        background: #f1f6f5;
        border: 1px solid var(--line);
      }

.xai-ico svg {
        width: 16px;
        height: 16px;
        color: #5a7378;
      }

.xai-card.ctx .xai-ico {
        background: #fff5e6;
        border-color: #f0dcb4;
      }

.xai-card.ctx .xai-ico svg {
        color: #cf9a36;
      }

.xai-card.agent .xai-ico {
        background: #f5edfd;
        border-color: #e3d2fa;
      }

.xai-card.agent .xai-ico svg {
        color: #8b43d6;
      }

.xai-card.web .xai-ico {
        background: #e7fbff;
        border-color: #c2eef5;
      }

.xai-card.web .xai-ico svg {
        color: #0a9bb5;
      }

.xai-nm {
        font-weight: 700;
        font-size: var(--fs-base);
        color: #002020;
        flex: 1;
        display: flex;
        align-items: center;
        gap: 7px;
      }

.xai-nm .i {
        color: #bccacc;
        display: inline-flex;
      }

.xai-ck {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #e7f7ee;
        display: grid;
        place-items: center;
        flex: none;
      }

.xai-ck svg {
        width: 12px;
        height: 12px;
        color: #19a04e;
      }

.xai-chev {
        color: #9fb3b6;
        flex: none;
        transition: 0.25s transform;
      }

.xai-card.open .xai-chev {
        transform: rotate(180deg);
      }

.xai-cb {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
      }

.xai-ci {
        padding: 0 16px 16px;
      }

.xai-subq {
        background: #f4f8f9;
        border-radius: 9px;
        padding: 11px 14px;
        margin-top: 8px;
      }

.xai-subq .l {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #26403f;
      }

.xai-subq .v {
        font-size: var(--fs-sm);
        color: #6a7d80;
        margin-top: 3px;
      }

.xai-step {
        display: flex;
        gap: 11px;
        margin-top: 12px;
      }

.xai-step .sc {
        flex: 1;
      }

.xai-step .sc b {
        font-size: var(--fs-base-sm);
        color: #002020;
        font-weight: 700;
      }

.xai-step .sc .d {
        margin-top: 6px;
        background: #f4f8f9;
        border-radius: 8px;
        padding: 10px 13px;
        font-size: var(--fs-sm);
        color: #597272;
        line-height: var(--lh-body);
      }

.xai-pillrow {
        display: flex;
        gap: 10px;
        margin-top: 14px;
        flex-wrap: wrap;
        align-items: center;
      }

.xai-kpill .i {
        color: #9db8ef;
        display: inline-flex;
      }

.xai-rpill {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #b9791f;
        background: #fff6e6;
        border: 1px solid #f0d9af;
        border-radius: 999px;
        padding: 6px 13px;
        display: inline-flex;
        gap: 7px;
        align-items: center;
      }

.xai-srgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 6px;
      }

.xai-srbox {
        border: 1.5px solid #d7e2ff;
        border-radius: 10px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fafcff;
      }

.xai-srbox.k {
        border-color: #e1d3f8;
        background: #fbf9ff;
      }

.xai-srbox .l {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #36505a;
      }

.xai-srbox .c {
        min-width: 26px;
        height: 26px;
        padding: 0 8px;
        border-radius: 7px;
        background: #eef3ff;
        color: #3457b8;
        font-weight: 800;
        font-size: var(--fs-sm);
        display: grid;
        place-items: center;
      }

.xai-srbox.k .c {
        background: #f1eafe;
        color: #7b3fd1;
      }

.xai-brl {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #26403f;
        margin-top: 20px;
      }

.xai-br {
        background: #f4f8f9;
        border-radius: 10px;
        padding: 14px 16px;
        margin-top: 8px;
        font-size: var(--fs-base-sm);
        color: #243a3e;
        line-height: var(--lh-loose);
      }

.xai-br ol {
        margin: 8px 0 0 18px;
      }

.xai-br li {
        margin-top: 7px;
      }

.xai-br b {
        color: #15302f;
      }

.xai-fb {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #1aa051;
      }

.xai-fb svg {
        width: 16px;
        height: 16px;
      }

@media (max-width: 620px) {
        .xai {
          padding: 18px 14px 20px;
        }
        .xai-srgrid {
          grid-template-columns: 1fr;
        }
        .xai-prefs {
          justify-content: flex-start;
        }
        .shot .bar .live {
          display: none;
        }
      }

/* ===== INTERACTIVE: AGENT ASSIST (product-faithful workspace) ===== */
      .aw-wrap {
        max-width: 1120px;
        margin: 0 auto;
      }

/* Assist per-intelligence sections: one shared 3-ticket switcher */
      .asx {
        max-width: 920px;
        margin: 0 auto;
      }

.asx-tks {
        display: flex;
        gap: 8px;
        padding: 11px 13px;
        border-bottom: 1px solid var(--line);
        background: var(--surface);
        overflow-x: auto;
        scrollbar-width: none;
      }

.asx-tks::-webkit-scrollbar {
        display: none;
      }

.asx-tk {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        border: 1px solid var(--line);
        background: var(--surface);
        border-radius: 10px;
        padding: 8px 12px;
        cursor: pointer;
        font: inherit;
        text-align: left;
        flex: 1;
        min-width: 190px;
        transition: 0.15s;
      }

.asx-tk .id {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.02em;
      }

.asx-tk .id.it {
        color: #c0392b;
      }

.asx-tk .id.hr {
        color: #7b3fd1;
      }

.asx-tk .id.fin {
        color: #0c7d5f;
      }

.asx-tk .s {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: #597272;
        line-height: var(--lh-base);
      }

.asx-tk:hover {
        border-color: var(--teal);
      }

.asx-tk.on {
        border-color: var(--teal-d);
        background: #e7f7f5;
        box-shadow: 0 4px 14px -10px rgba(0, 32, 32, 0.3);
      }

.asx-tk.on .s {
        color: #1c3a3f;
      }

.asx-ctx {
        font-size: var(--fs-sm);
        color: #758a8a;
        font-weight: 600;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 15px;
      }

.asx-ctx b {
        color: #2f474c;
        font-weight: 800;
      }

.aw-anal.amber {
        background: linear-gradient(120deg, #c88a2a, #a86a14);
      }

.aw {
        background: var(--surface);
      }

.aw-tickets {
        display: flex;
        gap: 7px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--line);
        background: var(--surface);
        overflow: hidden;
      }

.aw-tkc {
        font-size: var(--fs-xs);
        font-weight: 700;
        padding: 5px 11px;
        border-radius: 7px;
        white-space: nowrap;
      }

.aw-tkc.red {
        color: #c0392b;
        border: 1px solid #f1c9c1;
        background: #fdeeec;
      }

.aw-tkc.red.on {
        background: #c0392b;
        color: #fff;
        border-color: #c0392b;
      }

.aw-tkc.blue {
        color: #2b6fd6;
        border: 1px solid #cfe0f7;
        background: var(--surface);
      }

.aw-tkc.dim {
        color: #758a8a;
        border: 1px solid var(--line);
        background: var(--surface);
      }

.aw-body {
        display: grid;
        grid-template-columns: 258px 1fr 58px;
      }

@media (max-width: 840px) {
        .aw-body {
          grid-template-columns: 1fr;
        }
      }

@media (max-width: 840px) {
        .aw-ticket {
          border-right: 0;
          border-bottom: 1px solid var(--line);
        }
      }

@media (max-width: 840px) {
        .aw-rail {
          flex-direction: row;
          border-left: 0;
          border-top: 1px solid var(--line);
          overflow-x: auto;
          justify-content: flex-start;
          padding: 9px 10px;
          order: -1;
        }
      }

@media (max-width: 840px) {
        .aw-rail .sp {
          display: none;
        }
      }

.aw-ticket {
        border-right: 1px solid var(--line);
        padding: 16px 18px;
      }

.aw-tid {
        font-size: var(--fs-md);
        font-weight: 800;
        color: #002020;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

.aw-status {
        font-size: var(--fs-2xs);
        font-weight: 800;
        color: #2b6fd6;
        background: #eaf2fd;
        border: 1px solid #cfe0f7;
        border-radius: 6px;
        padding: 2px 8px;
      }

.aw-fl {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #758a8a;
        margin-top: 15px;
      }

.aw-subject {
        font-size: var(--fs-base-sm);
        font-weight: 600;
        color: #002020;
        margin-top: 5px;
        line-height: var(--lh-base);
      }

.aw-desc {
        font-size: var(--fs-sm);
        color: #597272;
        line-height: var(--lh-body);
        margin-top: 5px;
      }

.aw-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
      }

/* right vertical icon rail (like the real ticketing UI) */
      .aw-rail {
        border-left: 1px solid var(--line);
        background: var(--surface);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 0;
      }

.aw-ricon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        cursor: pointer;
        color: #7c8f92;
        border: 1px solid transparent;
        background: transparent;
        transition: 0.15s;
        flex: none;
      }

.aw-ricon svg {
        width: 18px;
        height: 18px;
      }

.aw-ricon:hover {
        background: #eef4f4;
      }

.aw-rail .sp {
        flex: 1;
      }

.aw-ricon[data-p="intel"].on {
        background: #fdf3e0;
        color: #c88a2a;
        border-color: #f0dcb4;
      }

.aw-ricon[data-p="sent"].on {
        background: #e7f7f5;
        color: #00736f;
        border-color: #cfe9e6;
      }

.aw-ricon[data-p="nba"].on {
        background: #fdeee9;
        color: #d9553f;
        border-color: #f3ccc0;
      }

.aw-ricon[data-p="resp"].on {
        background: #e7f7ee;
        color: #1aa051;
        border-color: #bfe6cd;
      }

.aw-ricon[data-p="sk"].on {
        background: #f3effc;
        color: #7b3fd1;
        border-color: #e2d6f8;
      }

.aw-ricon[data-p="sim"].on {
        background: #e7fbff;
        color: #0a9bb5;
        border-color: #c2eef5;
      }

.aw-ricon[data-p="ts"].on {
        background: #eaf2fd;
        color: #2b6fd6;
        border-color: #cfe0f7;
      }

.aw-ricon[data-p="kb"].on {
        background: #fff6e9;
        color: #cf9a36;
        border-color: #f0dcb4;
      }

.aw-phead {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--line);
        font-size: var(--fs-base);
        font-weight: 800;
        color: #002020;
        letter-spacing: -0.01em;
      }

.aw-phead .bk {
        color: #9fb3b6;
        display: inline-flex;
      }

.aw-panel {
        padding: 18px 20px;
        display: none;
      }

.aw-panel.active {
        display: block;
        animation: awfade 0.25s ease;
      }

@keyframes awfade {
        from {
          opacity: 0;
          transform: translateY(4px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

.aw-psub {
        font-size: var(--fs-sm);
        color: #758a8a;
        margin-bottom: 13px;
      }

/* shared section heading inside a panel */
      .aw-h {
        font-size: var(--fs-xs);
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #2b4248;
        margin: 17px 0 8px;
      }

/* Ticket Intelligence */
      .aw-anal {
        border-radius: 12px;
        padding: 14px 16px;
        color: #fff;
        background: linear-gradient(120deg, #c0392b, #9b2418);
        display: flex;
        align-items: center;
        gap: 11px;
      }

.aw-anal .ic {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.18);
        display: grid;
        place-items: center;
        flex: none;
      }

.aw-anal .ttl {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        opacity: 0.9;
      }

.aw-anal .tid {
        font-size: var(--fs-base);
        font-weight: 800;
      }

.aw-anal .hl {
        margin-left: auto;
        font-size: var(--fs-xs);
        font-weight: 800;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 999px;
        padding: 5px 11px;
      }

.aw-broken {
        font-size: var(--fs-base-sm);
        color: #2f474c;
        line-height: var(--lh-body);
      }

.aw-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 11px;
      }

.aw-meta .k {
        font-size: var(--fs-xs);
        color: #758a8a;
        font-weight: 700;
      }

.aw-meta .v {
        font-size: var(--fs-sm);
        color: #2f474c;
        font-weight: 600;
        margin-top: 1px;
      }

.aw-cause {
        display: flex;
        align-items: center;
        gap: 9px;
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 9px 12px;
        margin-top: 7px;
        font-size: var(--fs-sm);
        color: #2f474c;
      }

.aw-cause .cb {
        margin-left: auto;
        font-size: var(--fs-2xs);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-radius: 5px;
        padding: 2px 7px;
        flex: none;
      }

.aw-cause .cb.high {
        color: #fff;
        background: #16a34a;
      }

.aw-cause .cb.med {
        color: #92520a;
        background: #fde6c8;
      }

.aw-fact {
        display: flex;
        gap: 9px;
        font-size: var(--fs-sm);
        color: #2f474c;
        margin-top: 6px;
      }

.aw-fact svg {
        flex: none;
        margin-top: 3px;
        color: var(--teal);
      }

.aw-nx {
        display: flex;
        gap: 9px;
        font-size: var(--fs-sm);
        color: #1c3a3f;
        font-weight: 600;
        border: 1px solid #d6e2ff;
        background: #fafcff;
        border-radius: 9px;
        padding: 9px 12px;
        margin-top: 7px;
      }

.aw-nx .n {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        flex: none;
        background: var(--blue);
        color: #fff;
        font-size: var(--fs-xs);
        font-weight: 800;
        display: grid;
        place-items: center;
      }

/* Sentiment */
      .aw-sent {
        border-radius: 12px;
        padding: 15px 17px;
        color: #fff;
        background: linear-gradient(120deg, #6d4bd0, #3f6fd8);
        display: flex;
        justify-content: space-between;
        gap: 14px;
      }

.aw-sent .lab {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.9;
        display: flex;
        align-items: center;
        gap: 8px;
      }

.aw-sent .big {
        font-size: var(--fs-xl);
        font-weight: 800;
        margin-top: 3px;
      }

.aw-sent .desc {
        font-size: var(--fs-sm);
        opacity: 0.92;
        margin-top: 7px;
        max-width: 400px;
        line-height: var(--lh-body);
      }

.aw-sent .conf {
        text-align: right;
        flex: none;
      }

.aw-sent .conf .l {
        font-size: var(--fs-2xs);
        font-weight: 700;
        opacity: 0.9;
      }

.aw-sent .conf .c {
        font-size: var(--fs-2xl);
        font-weight: 800;
      }

.aw-emo {
        margin-top: 13px;
      }

.aw-emo .r {
        display: flex;
        justify-content: space-between;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #2f474c;
      }

.aw-bar {
        height: 7px;
        border-radius: 999px;
        background: #eef3f2;
        margin-top: 5px;
        overflow: hidden;
      }

.aw-bar i {
        display: block;
        height: 100%;
        border-radius: 999px;
      }

.aw-emo .q {
        font-size: var(--fs-sm);
        color: #758a8a;
        margin: 5px 0 13px;
        font-style: italic;
      }

/* accordion (NBA + Smart Response) */
      .aw-acc {
        border: 1px solid var(--line);
        border-radius: 11px;
        margin-top: 10px;
        overflow: hidden;
      }

.aw-acc-h {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 15px;
        cursor: pointer;
        user-select: none;
      }

.aw-acc-h .t {
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: #002020;
        flex: 1;
      }

.aw-acc-h .chev {
        color: #9fb3b6;
        transition: 0.25s transform;
        flex: none;
      }

.aw-acc.open .aw-acc-h .chev {
        transform: rotate(180deg);
      }

.aw-acc-b {
        display: none;
        padding: 0 15px 15px;
      }

.aw-acc.open .aw-acc-b {
        display: block;
      }

.aw-conf {
        font-size: var(--fs-xs);
        font-weight: 800;
        border-radius: 6px;
        padding: 3px 8px;
        flex: none;
      }

.aw-conf.c92 {
        color: #c0392b;
        border: 1px solid #f1c9c1;
      }

.aw-conf.c84 {
        color: #bb8124;
        border: 1px solid #ecd2a4;
      }

.aw-conf.c78 {
        color: var(--blue);
        border: 1px solid #cfe0ff;
      }

.aw-conf.c64 {
        color: #1aa051;
        border: 1px solid #b9e6cb;
      }

.aw-acc-b p {
        font-size: var(--fs-sm);
        color: #597272;
        line-height: var(--lh-body);
      }

.aw-acc-b ul {
        margin: 9px 0 0 4px;
        list-style: none;
      }

.aw-acc-b ul li {
        font-size: var(--fs-sm);
        color: #597272;
        padding-left: 16px;
        position: relative;
        margin-top: 5px;
      }

.aw-acc-b ul li::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 8px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #c0cdcf;
      }

.aw-rec {
        margin-top: 11px;
        background: #f4f8f9;
        border-radius: 8px;
        padding: 11px 13px;
        font-size: var(--fs-sm);
        color: #384f53;
        line-height: var(--lh-body);
      }

.aw-rec b {
        color: #002020;
      }

.aw-srmsg {
        background: #f4f8f9;
        border-radius: 9px;
        padding: 13px 15px;
        font-size: var(--fs-sm);
        color: #384f53;
        line-height: var(--lh-loose);
        white-space: pre-line;
      }

.aw-sracts {
        display: flex;
        gap: 9px;
        justify-content: flex-end;
        margin-top: 11px;
      }

.aw-bsoft {
        font-size: var(--fs-sm);
        font-weight: 700;
        border: 1px solid var(--line);
        background: var(--surface);
        border-radius: 8px;
        padding: 8px 15px;
        cursor: pointer;
        color: #002020;
      }

.aw-bblue {
        font-size: var(--fs-sm);
        font-weight: 700;
        border: 0;
        background: var(--blue);
        color: #fff;
        border-radius: 8px;
        padding: 8px 15px;
        cursor: pointer;
      }

/* Ask Sidekick */
      .aw-sk-msg {
        display: flex;
        gap: 9px;
        align-items: flex-start;
      }

.aw-sk-av {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: #efeafe;
        color: #7b3fd1;
        display: grid;
        place-items: center;
        flex: none;
      }

.aw-sk-bub {
        background: #f4f8f9;
        border-radius: 10px;
        padding: 11px 14px;
        font-size: var(--fs-sm);
        color: #384f53;
        line-height: var(--lh-body);
      }

.aw-sk-time {
        font-size: var(--fs-2xs);
        color: #a9bcbe;
        margin-top: 5px;
      }

.aw-sk-try {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #758a8a;
        margin: 20px 0 9px;
      }

.aw-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

.aw-chip {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: #5b3fae;
        background: #f3effc;
        border: 1px solid #e4dafa;
        border-radius: 999px;
        padding: 7px 13px;
        cursor: pointer;
        transition: 0.15s;
      }

.aw-chip:hover {
        background: #ece4fb;
      }

.aw-sk-input {
        display: flex;
        align-items: center;
        gap: 9px;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 9px 11px 9px 14px;
        margin-top: 18px;
        color: #758a8a;
        font-size: var(--fs-sm);
      }

.aw-sk-user {
        display: flex;
        justify-content: flex-end;
        margin-top: 12px;
      }

.aw-sk-user .b {
        background: var(--grad-btn);
        color: #fff;
        border-radius: 10px;
        padding: 10px 13px;
        font-size: var(--fs-sm);
        max-width: 82%;
        line-height: var(--lh-body);
      }

/* Troubleshoot */
      .aw-ts-issue {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 13px 15px;
      }

.aw-ts-issue .l {
        font-size: var(--fs-xs);
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #758a8a;
      }

.aw-ts-issue .v {
        font-size: var(--fs-sm);
        color: #597272;
        margin-top: 5px;
        line-height: var(--lh-body);
      }

.aw-ts-card {
        background: #f4f8f9;
        border-radius: 10px;
        padding: 14px 16px;
      }

.aw-ts-card .t {
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: #002020;
      }

.aw-ts-card .d {
        font-size: var(--fs-sm);
        color: #597272;
        margin-top: 6px;
        line-height: var(--lh-body);
      }

.aw-ts-btns {
        display: flex;
        gap: 10px;
        margin-top: 12px;
      }

.aw-ts-worked {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #1aa051;
        border: 1px solid #b9e6cb;
        border-radius: 8px;
        padding: 8px 14px;
        cursor: pointer;
        background: var(--surface);
      }

.aw-ts-no {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #c0392b;
        border: 1px solid #f1c9c1;
        border-radius: 8px;
        padding: 8px 14px;
        cursor: pointer;
        background: var(--surface);
      }

.aw-ts-alt {
        display: flex;
        gap: 11px;
        padding: 12px 0;
        border-top: 1px solid var(--line);
      }

.aw-ts-alt .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #c8d4d3;
        margin-top: 5px;
        flex: none;
      }

.aw-ts-alt .t {
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: #002020;
      }

.aw-ts-alt .d {
        font-size: var(--fs-sm);
        color: #7c8f92;
        margin-top: 3px;
        line-height: var(--lh-body);
      }

/* Similar tickets + KB */
      .aw-sim {
        display: flex;
        gap: 12px;
        padding: 13px 0;
        border-top: 1px solid var(--line);
        align-items: flex-start;
      }

.aw-sim:first-of-type {
        border-top: 0;
      }

.aw-sim .m {
        font-size: var(--fs-xs);
        font-weight: 800;
        color: #1aa051;
        background: #e7f7ee;
        border-radius: 6px;
        padding: 3px 8px;
        flex: none;
      }

.aw-sim .id {
        font-size: var(--fs-sm);
        font-weight: 800;
        color: #2b4248;
      }

.aw-sim .t {
        font-size: var(--fs-base-sm);
        font-weight: 600;
        color: #002020;
        margin-top: 1px;
      }

.aw-sim .r {
        font-size: var(--fs-sm);
        color: #7c8f92;
        margin-top: 3px;
      }

.aw-sim .st {
        color: #1aa051;
        font-weight: 800;
      }

.aw-kb {
        display: flex;
        gap: 11px;
        padding: 13px 0;
        border-top: 1px solid var(--line);
      }

.aw-kb:first-of-type {
        border-top: 0;
      }

.aw-kb .ic {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: #fff6e9;
        color: #cf9a36;
        display: grid;
        place-items: center;
        flex: none;
      }

.aw-kb .t {
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: #002020;
      }

.aw-kb .id {
        font-size: var(--fs-xs);
        color: #a9bcbe;
        font-weight: 600;
      }

.aw-kb .d {
        font-size: var(--fs-sm);
        color: #7c8f92;
        margin-top: 3px;
        line-height: var(--lh-body);
      }

.aw-kb .lnk {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: var(--blue);
        margin-top: 5px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

/* ===== INTERACTIVE: CONVERSATIONAL DASHBOARD ===== */
      .cd-wrap {
        max-width: 1000px;
        margin: 0 auto;
      }

.cd {
        background: var(--surface);
        padding: 20px 22px 22px;
      }

.cd-top {
        display: flex;
        align-items: center;
        gap: 10px;
      }

.cd-top .tt {
        font-size: var(--fs-lg);
        font-weight: 800;
        color: #002020;
        letter-spacing: -0.02em;
        flex: 1;
      }

.cd-top .ic {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
        color: #9fb3b6;
      }

.cd-top .ic.on {
        background: #6d4bd0;
        border-color: #6d4bd0;
        color: #fff;
      }

.cd-card {
        border: 1px solid var(--line);
        border-radius: 13px;
        margin-top: 16px;
        overflow: hidden;
      }

.cd-q {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 13px 16px;
        border-bottom: 1px solid var(--line);
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: #002020;
        background: #ffffff;
      }

.cd-q .ar {
        color: #7b3fd1;
      }

.cd-result {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 18px;
        padding: 18px 18px;
        align-items: center;
      }

@media (max-width: 720px) {
        .cd-result {
          grid-template-columns: 1fr;
        }
      }

@media (max-width: 720px) {
        .cw-examples {
          grid-template-columns: 1fr;
        }
      }

@media (max-width: 720px) {
        .fx {
          flex-wrap: wrap;
          width: 100% !important;
          gap: 13px;
        }
        .fx-right {
          margin-left: 0;
          flex-basis: 100%;
          align-items: flex-start;
        }
        .fx-chips {
          justify-content: flex-start;
        }
        .fx-note {
          text-align: left;
        }
        .fx-frow {
          grid-template-columns: 1fr;
        }
      }

@media (max-width: 720px) {
        .am-charts {
          grid-template-columns: 1fr;
        }
      }

.cd-atitle {
        font-size: var(--fs-base);
        font-weight: 800;
        color: #002020;
      }

.cd-anarr {
        font-size: var(--fs-base-sm);
        color: #597272;
        line-height: var(--lh-loose);
        margin-top: 8px;
      }

.cd-anarr b {
        color: #002020;
      }

.cd-chart {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
      }

/* donut */
      .cd-donut {
        position: relative;
        width: 188px;
        height: 188px;
        border-radius: 50%;
        flex: none;
      }

.cd-donut .hole {
        position: absolute;
        inset: 30px;
        background: #fff;
        border-radius: 50%;
      }

.cd-leg {
        margin-left: 16px;
        display: flex;
        flex-direction: column;
        gap: 9px;
      }

.cd-leg .l {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-sm);
        color: #597272;
        font-weight: 600;
        white-space: nowrap;
      }

.cd-leg .d {
        width: 10px;
        height: 10px;
        border-radius: 3px;
        flex: none;
      }

.cd-leg .v {
        font-weight: 800;
        color: #002020;
      }

/* bars */
      .cd-bars {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

.cd-brow .t {
        display: flex;
        justify-content: space-between;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #597272;
        margin-bottom: 5px;
      }

.cd-brow .t .v {
        color: #002020;
        font-weight: 800;
      }

.cd-bbar {
        height: 9px;
        border-radius: 999px;
        background: #eef3f2;
        overflow: hidden;
      }

.cd-bbar i {
        display: block;
        height: 100%;
        border-radius: 999px;
      }

.cd-prompts {
        display: flex;
        align-items: center;
        gap: 9px;
        flex-wrap: wrap;
        margin-top: 16px;
      }

.cd-prompts .pl {
        font-size: var(--fs-sm);
        color: #758a8a;
        font-weight: 700;
      }

.cd-chip:hover {
        background: #eef3ff;
      }

.cd-chip.on {
        background: #eef3ff;
      }

.cd-input {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1.5px solid #cdbdf0;
        border-radius: 12px;
        padding: 11px 13px 11px 15px;
        margin-top: 16px;
        color: #758a8a;
        font-size: var(--fs-base-sm);
        box-shadow: 0 0 0 4px rgba(123, 63, 209, 0.06);
      }

.cd-input .sp {
        color: #7b3fd1;
        display: inline-flex;
      }

/* ===== INTERACTIVE: SIDEKICK (end-user conversational assistant) ===== */
      .sk-wrap {
        max-width: 900px;
        margin: 0 auto;
      }

.sk-chan {
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
        margin: 16px 0 0;
      }

.sk-chanchip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #002020;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 7px 14px;
      }

.sk-chanchip svg {
        width: 15px;
        height: 15px;
        color: var(--teal-d);
      }

/* Resolve: augment-or-replace + grounded-knowledge cards */
      .sk-flex {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 1000px;
        margin: 18px auto 0;
      }

.sk-fic {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: var(--paper2);
        border: 1px solid var(--line);
        color: var(--teal-d);
      }

.sk-fic svg {
        width: 18px;
        height: 18px;
      }

.sk-fp {
        font-size: var(--fs-base-sm);
        color: var(--muted);
        line-height: var(--lh-body);
        margin-top: 10px;
      }

.sk-fchips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 12px;
      }

/* Resolve: "every way employees get help" channel callout */
      .sk-chans {
        max-width: 1000px;
        margin: 22px auto 0;
      }

.sk-chans-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }

@media (max-width: 440px) {
        .sk-chans-grid {
          grid-template-columns: 1fr;
        }
      }

.sk-chan-ic {
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        background: var(--paper2);
        border: 1px solid var(--line);
        color: var(--teal-d);
      }

.sk-chan-ic svg {
        width: 17px;
        height: 17px;
      }

.sk-chan-d {
        font-size: var(--fs-xs);
        color: var(--muted);
        margin-top: 2px;
        line-height: var(--lh-base);
      }

/* ===== Rezolve Assistant embedded in ServiceNow (augment demo) ===== */
      .snw {
        background: var(--surface);
        text-align: left;
      }

.snw-top {
        display: flex;
        align-items: center;
        gap: 16px;
        background: #0b1f30;
        color: #e7eef5;
        padding: 9px 16px;
      }

.snw-logo {
        font-size: var(--fs-base);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #fff;
      }

.snw-logo span {
        color: #62d0c9;
      }

.snw-topnav {
        display: flex;
        gap: 16px;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: #aebfce;
      }

@media (max-width: 680px) {
        .snw-topnav {
          display: none;
        }
      }

@media (max-width: 680px) {
        .ms-grid {
          grid-template-columns: 1fr;
        }
      }

@media (max-width: 680px) {
        .ms-controls {
          gap: 8px;
        }
        .ms-search {
          min-width: 0;
          max-width: 100%;
        }
        .ms-select {
          display: none;
        }
      }

@media (max-width: 680px) {
        .mcp-stats {
          grid-template-columns: 1fr 1fr;
        }
      }

@media (max-width: 680px) {
        .am-disc {
          grid-template-columns: 1fr;
        }
      }

.snw-topsearch {
        margin-left: auto;
        font-size: var(--fs-sm);
        color: #8ea3b7;
        background: #13314a;
        border: 1px solid #24425c;
        border-radius: 7px;
        padding: 6px 12px;
        min-width: 150px;
      }

.snw-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
      }

.snw-form {
        padding: 16px 18px;
        border-right: 1px solid var(--line);
        min-width: 0;
      }

.snw-fhead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
      }

.snw-fhead .t {
        font-size: var(--fs-base-sm);
        font-weight: 800;
        color: #002020;
      }

.snw-fhead .b {
        font-size: var(--fs-xs);
        font-weight: 700;
        color: var(--gray-600);
        background: var(--grad-btn);
        border-radius: 7px;
        padding: 6px 11px;
        white-space: nowrap;
      }

.snw-row {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 12px;
        align-items: center;
        margin-bottom: 9px;
      }

.snw-row .l {
        font-size: var(--fs-sm);
        color: #597272;
        font-weight: 600;
        text-align: right;
      }

.snw-row .v {
        font-size: var(--fs-sm);
        color: #002020;
        background: #eef2f4;
        border: 1px solid #e1e7ea;
        border-radius: 6px;
        padding: 8px 11px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.snw-row .v.sel {
        background: #fff;
        border-color: #cdd8d7;
      }

.snw-desc {
        margin-top: 12px;
      }

.snw-desc .l {
        font-size: var(--fs-sm);
        color: #597272;
        font-weight: 600;
        margin-bottom: 5px;
      }

.snw-desc .v {
        font-size: var(--fs-sm);
        color: #002020;
        background: #fff;
        border: 1px solid #e1e7ea;
        border-radius: 6px;
        padding: 9px 11px;
        line-height: var(--lh-body);
      }

/* assistant panel */
      .snw-asst {
        background: #0f2937;
        color: #dbe7ee;
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

.snw-tabs {
        display: flex;
        gap: 4px;
        padding: 12px 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

.snw-tab {
        appearance: none;
        border: 0;
        background: none;
        cursor: pointer;
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #8fa8b8;
        padding: 9px 14px;
        border-radius: 8px 8px 0 0;
        border-bottom: 2px solid transparent;
        transition: 0.15s;
      }

.snw-tab:hover {
        color: #eaf2f7;
      }

.snw-tab.on {
        color: #fff;
        border-bottom-color: #00c0b9;
        background: rgba(255, 255, 255, 0.05);
      }

.snw-panels {
        padding: 16px 16px 18px;
        overflow-y: auto;
        max-height: 560px;
      }

.snw-panel {
        display: none;
      }

.snw-panel.on {
        display: block;
      }

.snw-card {
        background: #13303f;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 14px 15px;
        margin-bottom: 12px;
      }

.snw-h {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-sm);
        font-weight: 800;
        color: #fff;
      }

.snw-h svg {
        width: 15px;
        height: 15px;
        color: #62d0c9;
        flex: none;
      }

.snw-h .rt {
        margin-left: auto;
        font-size: var(--fs-sm);
        font-weight: 800;
      }

.snw-p {
        font-size: var(--fs-sm);
        color: #b7cad6;
        line-height: var(--lh-body);
        margin-top: 8px;
      }

.snw-health {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
      }

.snw-hc {
        text-align: center;
      }

.snw-hc .lbl {
        font-size: var(--fs-2xs);
        color: #8fa8b8;
        font-weight: 600;
        margin-bottom: 6px;
        white-space: nowrap;
      }

.snw-hc .sc {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        margin: 0 auto;
        font-size: var(--fs-sm);
        font-weight: 800;
        color: #0f2937;
      }

.sc-g {
        background: #3ddc97;
      }

.sc-a {
        background: #f5c451;
      }

.sc-r {
        background: #f0654e;
        color: #fff;
      }

.snw-callout {
        border-radius: 12px;
        padding: 13px 15px;
        margin-bottom: 12px;
        border: 1px solid transparent;
      }

.snw-callout.good {
        background: rgba(61, 220, 151, 0.1);
        border-color: rgba(61, 220, 151, 0.3);
      }

.snw-callout.good .snw-h svg,
      .snw-callout.good .rt {
        color: #3ddc97;
      }

.snw-callout.bad {
        background: rgba(240, 101, 78, 0.1);
        border-color: rgba(240, 101, 78, 0.3);
      }

.snw-callout.bad .snw-h svg {
        color: #f0654e;
      }

.snw-pill {
        font-size: var(--fs-2xs);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-radius: 999px;
        padding: 3px 9px;
      }

.snw-pill.neg {
        color: #f0654e;
        background: rgba(240, 101, 78, 0.16);
      }

.snw-bar {
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        overflow: hidden;
        margin-top: 10px;
      }

.snw-bar i {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: #f0654e;
      }

.snw-sug {
        counter-reset: s;
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-top: 6px;
      }

.snw-sug div {
        display: flex;
        gap: 10px;
        font-size: var(--fs-sm);
        color: #b7cad6;
        line-height: var(--lh-body);
      }

.snw-sug div::before {
        counter-increment: s;
        content: counter(s);
        flex: none;
        width: 20px;
        height: 20px;
        border-radius: 999px;
        background: rgba(98, 208, 201, 0.16);
        color: #62d0c9;
        font-size: var(--fs-xs);
        font-weight: 800;
        display: grid;
        place-items: center;
      }

.snw-qa {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
      }

.snw-qbtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #eaf2f7;
        background: #16384a;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        padding: 11px;
        cursor: pointer;
        transition: 0.15s;
      }

.snw-qbtn:hover {
        background: #1b4256;
        border-color: rgba(255, 255, 255, 0.22);
      }

.snw-qbtn svg {
        width: 15px;
        height: 15px;
      }

.snw-qbtn.esc {
        grid-column: 1 / -1;
        color: #fff;
        background: #d64a3a;
        border-color: #d64a3a;
      }

.snw-qbtn.esc:hover {
        background: #c33f30;
      }

.snw-qbtn.wide {
        grid-column: 1 / -1;
      }

.snw-auto-i {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: #cfe0ea;
        background: #13303f;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 9px;
        padding: 11px 13px;
        margin-top: 9px;
        cursor: pointer;
        transition: 0.15s;
      }

.snw-auto-i:hover {
        background: #16384a;
      }

.snw-auto-i svg {
        width: 16px;
        height: 16px;
        color: #62d0c9;
        flex: none;
      }

.snw-ask {
        display: flex;
        gap: 9px;
        align-items: center;
        background: #13303f;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 11px;
        padding: 11px 13px;
      }

.snw-ask input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        background: none;
        font-family: inherit;
        font-size: var(--fs-sm);
        color: #eaf2f7;
      }

.snw-ask input::placeholder {
        color: #7f97a7;
      }

.snw-ask .snd {
        flex: none;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: var(--grad-btn);
        display: grid;
        place-items: center;
        color: #fff;
      }

.snw-ask .snd svg {
        width: 15px;
        height: 15px;
      }

.snw-simh {
        font-size: var(--fs-sm);
        font-weight: 800;
        color: #8fa8b8;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        margin: 16px 0 9px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

.snw-simh .c {
        font-size: var(--fs-xs);
        font-weight: 800;
        color: #62d0c9;
        background: rgba(98, 208, 201, 0.16);
        border-radius: 999px;
        padding: 1px 8px;
      }

.snw-sim {
        background: #13303f;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 12px 13px;
        margin-bottom: 8px;
        cursor: pointer;
      }

.snw-sim .id {
        font-size: var(--fs-xs);
        font-weight: 700;
        color: #8fa8b8;
        font-family: ui-monospace, monospace;
      }

.snw-sim .st {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #eaf2f7;
        margin-top: 2px;
      }

.snw-sim .res {
        font-size: var(--fs-sm);
        color: #b7cad6;
        margin-top: 9px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 9px;
        line-height: var(--lh-body);
        display: none;
      }

.snw-sim.open .res {
        display: block;
      }

.snw-sim .res b {
        color: #dbe7ee;
      }

.sk {
        background: #f4f7f9;
        padding: 18px 20px;
        min-height: 280px;
        max-height: 560px;
        overflow-y: auto;
      }

.sk-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-top: 14px;
      }

.sk-row:first-child {
        margin-top: 0;
      }

.sk-av {
        width: 30px;
        height: 30px;
        border-radius: 7px;
        flex: none;
        overflow: hidden;
        border: 1px solid var(--line);
        background: #fff;
        display: grid;
        place-items: center;
      }

.sk-av svg {
        width: 20px;
        height: 20px;
      }

.sk-col {
        min-width: 0;
        flex: 1;
      }

.sk-bub {
        display: inline-block;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 14px;
        font-size: var(--fs-base-sm);
        color: #243a3e;
        max-width: 88%;
        line-height: var(--lh-body);
      }

.sk-row.me {
        justify-content: flex-end;
      }

.sk-row.me .sk-bub {
        background: #eaf1fb;
        border-color: #d5e4f7;
        color: #1c3350;
      }

.sk-sys svg {
        width: 13px;
        height: 13px;
      }

/* adaptive card */
      .sk-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        max-width: 540px;
        width: 100%;
      }

.sk-cb {
        padding: 16px;
      }

.sk-hero {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 14px;
        align-items: center;
      }

.sk-illus {
        border-radius: 10px;
        background: linear-gradient(135deg, #eef4ff, #e7f7f5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 130px;
        border: 1px solid #e6eff0;
      }

.sk-illus svg {
        height: 40px;
        width: auto;
      }

.sk-illus .nm {
        font-size: var(--fs-sm);
        font-weight: 800;
        color: var(--teal-d);
        letter-spacing: 0.02em;
      }

.sk-btns {
        display: flex;
        flex-direction: column;
        gap: 9px;
      }

.sk-btns2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
      }

.sk-btn {
        display: block;
        width: 100%;
        text-align: center;
        background: #1d3f66;
        color: #fff;
        font-size: var(--fs-sm);
        font-weight: 700;
        border: 0;
        border-radius: 6px;
        padding: 12px 13px;
        cursor: pointer;
        transition: 0.15s;
        line-height: var(--lh-heading);
      }

.sk-btn:hover {
        background: #173252;
      }

.sk-btn.grey {
        background: #9aa7ad;
      }

.sk-btn.grey:hover {
        background: #899699;
      }

.sk-title {
        text-align: center;
        font-size: var(--fs-base);
        font-weight: 800;
        color: #002020;
      }

.sk-goldbar {
        height: 4px;
        background: #efa817;
        border-radius: 2px;
        margin: 11px auto 14px;
        width: 100%;
      }

.sk-p {
        font-size: var(--fs-base-sm);
        color: #597272;
        line-height: var(--lh-loose);
      }

.sk-p + .sk-p {
        margin-top: 9px;
      }

.sk-krow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px 18px;
        font-size: var(--fs-sm);
        color: #597272;
        margin-top: 2px;
      }

.sk-krow b,
      .sk-field b {
        color: #002020;
      }

.sk-field {
        font-size: var(--fs-sm);
        color: #597272;
        margin-top: 10px;
      }

.sk-hr {
        height: 1px;
        background: var(--line);
        margin: 13px 0;
      }

.sk-exec {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: var(--fs-sm);
        color: #597272;
        margin-top: 9px;
      }

.sk-exec .ck {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #e7f7ee;
        display: grid;
        place-items: center;
        flex: none;
      }

.sk-exec .ck svg {
        width: 11px;
        height: 11px;
        color: #1aa051;
      }

.sk-exec .cl {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        border: 2px solid #d7e2e2;
        flex: none;
      }

.sk-input {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 11px 14px;
        margin-top: 14px;
        color: #758a8a;
        font-size: var(--fs-base-sm);
      }

.sk-input .send {
        margin-left: auto;
        color: #758a8a;
        display: inline-flex;
      }

.sk-gov svg {
        width: 20px;
        height: 20px;
        color: var(--teal-d);
        flex: none;
      }

.sk-gov a {
        margin-left: auto;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: var(--teal-d);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

/* ===== MARKETPLACE (app-framed, like Agent Studio) ===== */
      .ms {
        display: block;
        min-height: 600px;
        background: var(--surface);
        text-align: left;
      }

.ms-side {
        flex: none;
        width: 212px;
        border-right: 1px solid var(--line);
        background: var(--surface);
        padding: 14px 10px;
        display: flex;
        flex-direction: column;
      }

.ms-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 7px 8px 13px;
      }

.ms-brand .ms-logo {
        width: 26px;
        height: 26px;
        flex: none;
      }

.ms-brand .n {
        font-size: var(--fs-sm);
        font-weight: 800;
        color: #002020;
        letter-spacing: -0.01em;
        line-height: var(--lh-snug);
      }

.ms-brand .s {
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: 0.13em;
        color: var(--muted);
        margin-top: 2px;
      }

.ms-nav {
        display: flex;
        flex-direction: column;
        gap: 1px;
      }

.ms-nav-i {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 8px 9px;
        border-radius: 8px;
        color: #597272;
        font-weight: 600;
        font-size: var(--fs-sm);
        cursor: default;
        white-space: nowrap;
      }

.ms-nav-i svg {
        width: 15px;
        height: 15px;
        color: #758a8a;
        flex: none;
      }

.ms-nav-i .chev {
        margin-left: auto;
        color: #b3c4c6;
      }

.ms-nav-i.head {
        color: #1a3a41;
        font-weight: 700;
      }

.ms-nav-sub {
        display: flex;
        flex-direction: column;
        gap: 1px;
        margin: 1px 0 4px;
      }

.ms-nav-s {
        padding: 7px 9px 7px 33px;
        border-radius: 8px;
        color: #597272;
        font-weight: 600;
        font-size: var(--fs-sm);
        cursor: default;
        white-space: nowrap;
      }

.ms-nav-s.on {
        background: #eaf1fd;
        color: var(--blue);
        font-weight: 700;
      }

.ms-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        background: var(--surface);
      }

.ms-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 18px;
        border-bottom: 1px solid var(--line);
      }

.ms-crumb {
        font-size: var(--fs-sm);
        color: var(--muted);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
      }

.ms-crumb {
        gap: 11px;
      }

.ms-crumb svg {
        width: 13px;
        height: 13px;
        color: #b3c4c6;
        flex: none;
      }

.ms-crumb b {
        color: #002020;
      }

.ms-topr {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #758a8a;
        flex: none;
      }

.ms-topr svg {
        width: 16px;
        height: 16px;
      }

.ms-ava {
        width: 26px;
        height: 26px;
        border-radius: 999px;
        background: var(--blue);
        color: #fff;
        font-size: var(--fs-2xs);
        font-weight: 800;
        display: grid;
        place-items: center;
      }

.ms-ws {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #597272;
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

.ms-scroll {
        padding: 20px 22px 24px;
        min-width: 0;
      }

.ms-h {
        display: flex;
        align-items: center;
        gap: 12px;
      }

.ms-h-ic {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: #eef4fd;
        color: var(--blue);
        display: grid;
        place-items: center;
      }

.ms-h-ic svg {
        width: 18px;
        height: 18px;
      }

.ms-h-t {
        font-size: var(--fs-xl);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #002020;
        line-height: var(--lh-snug);
      }

.ms-h-s {
        font-size: var(--fs-sm);
        color: var(--muted);
        margin-top: 2px;
      }

.ms-controls {
        display: flex;
        gap: 10px;
        margin: 16px 0 0;
        flex-wrap: wrap;
      }

.ms-search {
        flex: 1;
        min-width: 200px;
        max-width: 430px;
        display: flex;
        align-items: center;
        gap: 9px;
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 9px 13px;
        color: #9fb2b5;
        font-size: var(--fs-sm);
        background: var(--surface);
        transition:
          border-color 0.15s,
          box-shadow 0.15s;
      }

.ms-search:focus-within {
        border-color: #bcd3f0;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
      }

.ms-search svg {
        width: 15px;
        height: 15px;
        flex: none;
        color: #758a8a;
      }

.ms-search-input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        background: none;
        font-family: inherit;
        font-size: var(--fs-sm);
        color: #002020;
      }

.ms-search-input::placeholder {
        color: #9fb2b5;
      }

.ms-select {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 9px 13px;
        color: #597272;
        font-weight: 600;
        font-size: var(--fs-sm);
        white-space: nowrap;
      }

.ms-select svg {
        width: 14px;
        height: 14px;
        color: #758a8a;
      }

.ms-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: 13px 0 0;
      }

.mkt-cat {
        appearance: none;
        font-family: inherit;
        font-size: var(--fs-xs);
        font-weight: 700;
        color: #002020;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 5px 11px;
        display: inline-flex;
        gap: 6px;
        align-items: center;
        cursor: pointer;
        transition: 0.15s;
        user-select: none;
      }

.mkt-cat:hover {
        background: var(--paper2);
        border-color: #cdd8d7;
      }

.mkt-cat:focus-visible,
      .ms-clone:focus-visible {
        outline: 2px solid var(--teal-d);
        outline-offset: 3px;
      }

.mkt-cat .dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        flex: none;
      }

.mkt-cat .c {
        font-size: var(--fs-xs);
        font-weight: 800;
        color: #9aabad;
        background: none;
        border-radius: 0;
        padding: 0;
        min-width: 0;
        text-align: left;
      }

.mkt-cat.on {
        background: #0f1e24;
        color: #fff;
        border-color: #0f1e24;
      }

.mkt-cat.on .c {
        background: none;
        color: rgba(255, 255, 255, 0.6);
      }

.mkt-cat.on .dot {
        display: none;
      }

.ms-count {
        font-size: var(--fs-sm);
        color: var(--muted);
        font-weight: 600;
        margin: 14px 0 0;
      }

.ms-cat-h {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 18px 0 11px;
      }

.ms-cat-h .bar {
        width: 4px;
        height: 15px;
        border-radius: 2px;
        flex: none;
      }

.ms-cat-h .t {
        font-size: var(--fs-base-sm);
        font-weight: 800;
        color: #002020;
      }

.ms-cat-h .n {
        font-size: var(--fs-xs);
        color: var(--muted);
        font-weight: 600;
      }

.ms-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 13px;
      }

.ms-card {
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 15px 15px 14px;
        background: var(--surface);
        display: flex;
        flex-direction: column;
        transition:
          0.2s transform,
          0.2s box-shadow;
      }

.ms-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow);
      }

.ms-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 9px;
      }

.ms-card-nm {
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: #002020;
        line-height: var(--lh-heading);
        min-height: 2.5em;
      }

.ms-card-badge {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: var(--fs-2xs);
        font-weight: 800;
        color: var(--blue);
        background: #eef3ff;
        border: 1px solid #d8e2ff;
        border-radius: 6px;
        padding: 3px 7px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

.ms-card-badge svg {
        width: 11px;
        height: 11px;
      }

.ms-card-desc {
        font-size: var(--fs-sm);
        color: var(--muted);
        margin-top: 9px;
        line-height: var(--lh-body);
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

.ms-card-by {
        font-size: var(--fs-xs);
        color: #597272;
        margin-top: 12px;
        font-weight: 600;
      }

.ms-card-cloned {
        display: none;
        align-items: center;
        gap: 5px;
        font-size: var(--fs-2xs);
        font-weight: 700;
        color: #137a52;
        background: #e9f6ef;
        border: 1px solid #cfe9db;
        border-radius: 6px;
        padding: 3px 8px;
        margin-top: 11px;
        width: max-content;
      }

.ms-card-cloned svg {
        width: 11px;
        height: 11px;
      }

.ms-card.is-cloned .ms-card-cloned {
        display: inline-flex;
      }

.ms-clone {
        margin-top: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #002020;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 9px;
        cursor: pointer;
        transition: 0.15s;
        width: 100%;
      }

.ms-clone:hover {
        background: var(--paper2);
        border-color: #cdd8d7;
        transform: translateY(-1px);
        box-shadow: 0 6px 15px -8px rgba(10, 32, 38, 0.28);
      }

.ms-clone svg {
        width: 14px;
        height: 14px;
      }

.ms-clone.busy {
        color: var(--muted);
        cursor: default;
      }

.ms-clone.cloned-btn {
        color: #137a52;
        border-color: #cfe9db;
        background: #f0faf5;
      }

.ms-spin {
        width: 13px;
        height: 13px;
        border: 2px solid #d7e0df;
        border-top-color: var(--blue);
        border-radius: 999px;
        display: inline-block;
        animation: msspin 0.6s linear infinite;
      }

@keyframes msspin {
        to {
          transform: rotate(360deg);
        }
      }

.ms-empty {
        padding: 46px 12px;
        text-align: center;
        color: var(--muted);
        font-size: var(--fs-sm);
        font-weight: 600;
      }

/* two screens (marketplace / create-with-ai) share one app frame; no sidebar */
      .ms-screen {
        display: none;
        flex-direction: column;
        min-height: 600px;
      }

.ms-screen.on {
        display: flex;
      }

.ms-collapse {
        flex: none;
        color: #758a8a;
        display: inline-flex;
      }

.ms-collapse svg {
        width: 17px;
        height: 17px;
      }

/* internal scroll so the card grid never runs 500ft */
      #mkt-grid {
        max-height: 474px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 8px;
        scrollbar-width: thin;
        scrollbar-color: #c2cfce transparent;
        -webkit-mask-image: linear-gradient(
          180deg,
          #000 calc(100% - 18px),
          transparent
        );
        mask-image: linear-gradient(
          180deg,
          #000 calc(100% - 18px),
          transparent
        );
      }

#mkt-grid::-webkit-scrollbar {
        width: 8px;
      }

#mkt-grid::-webkit-scrollbar-thumb {
        background: #d7e0df;
        border-radius: 8px;
      }

/* ===== Create with AI ===== */
      .cw {
        display: flex;
        flex-direction: column;
        min-height: 600px;
        background: var(--surface);
        text-align: left;
      }

.cw-head {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px 18px;
        border-bottom: 1px solid var(--line);
        flex: none;
      }

.cw-back {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #002020;
        background: none;
        border: 0;
        cursor: pointer;
        padding: 5px 6px;
        border-radius: 8px;
      }

.cw-back:hover {
        background: var(--paper2);
      }

.cw-back svg {
        width: 16px;
        height: 16px;
      }

.cw-head-t {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-base-sm);
        font-weight: 800;
        color: #002020;
      }

.cw-head-t svg {
        width: 16px;
        height: 16px;
        color: var(--blue);
      }

.cw-head-pv {
        margin-left: auto;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: var(--muted);
      }

/* landing */
      .cw-landing {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 34px 22px;
        text-align: center;
      }

.cw-l-title {
        font-size: var(--fs-h3);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: #002020;
      }

.cw-l-sub {
        font-size: var(--fs-base);
        color: var(--muted);
        margin-top: 8px;
      }

.cw-promptbox {
        width: 100%;
        max-width: 680px;
        margin: 22px 0 0;
        position: relative;
        display: flex;
        gap: 11px;
        align-items: flex-start;
        border: 1.5px solid #b9cef0;
        border-radius: 14px;
        padding: 15px 16px;
        background: var(--surface);
        box-shadow: 0 10px 30px -22px rgba(37, 99, 235, 0.5);
        transition:
          border-color 0.15s,
          box-shadow 0.15s;
      }

.cw-promptbox:focus-within {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
      }

.cw-promptbox .sp {
        flex: none;
        color: var(--blue);
        margin-top: 2px;
      }

.cw-promptbox .sp svg {
        width: 18px;
        height: 18px;
      }

.cw-prompt {
        flex: 1;
        border: 0;
        outline: none;
        resize: none;
        font-family: inherit;
        font-size: var(--fs-base-sm);
        line-height: var(--lh-body);
        color: #002020;
        background: none;
        min-height: 66px;
      }

.cw-prompt::placeholder {
        color: #7a8e91;
      }

.cw-row {
        width: 100%;
        max-width: 680px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 14px;
        flex-wrap: wrap;
      }

.cw-seg {
        display: inline-flex;
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 3px;
      }

.cw-seg button {
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #597272;
        background: none;
        border: 0;
        border-radius: 8px;
        padding: 7px 14px;
        cursor: pointer;
      }

.cw-seg button.on {
        background: var(--surface);
        color: #002020;
        box-shadow: var(--shadow-sm);
      }

.cw-run {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: inherit;
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: #fff;
        background: var(--grad-btn);
        border: 0;
        border-radius: 10px;
        padding: 11px 20px;
        cursor: pointer;
        box-shadow: 0 12px 26px -12px rgba(37, 99, 235, 0.7);
        transition:
          transform 0.15s,
          box-shadow 0.15s;
      }

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

.cw-run svg {
        width: 16px;
        height: 16px;
      }

.cw-tmpl-l {
        width: 100%;
        max-width: 680px;
        text-align: left;
        font-size: var(--fs-xs);
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
        margin: 26px 0 10px;
      }

.cw-examples {
        width: 100%;
        max-width: 680px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

.cw-ex:focus-visible,
      .cw-opt:focus-visible,
      .cw-q-back:focus-visible,
      .cw-next:focus-visible,
      .cw-create:focus-visible,
      .cw-back:focus-visible,
      .cw-run:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 3px;
      }

.cw-ex {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        text-align: left;
        font-family: inherit;
        cursor: pointer;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 13px 14px;
        background: var(--surface);
        transition:
          border-color 0.15s,
          box-shadow 0.15s,
          transform 0.15s;
      }

.cw-ex:hover {
        border-color: #b9cef0;
        box-shadow: var(--shadow-sm);
        transform: translateY(-2px);
      }

.cw-ex.on {
        border-color: var(--blue);
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
      }

.cw-ex .ic {
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        background: #eef3ff;
        color: var(--blue);
      }

.cw-ex .ic svg {
        width: 16px;
        height: 16px;
      }

.cw-ex > span:last-child {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

.cw-ex .t {
        display: block;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #002020;
      }

.cw-ex .d {
        display: block;
        font-size: var(--fs-xs);
        color: var(--muted);
        margin-top: 3px;
        line-height: var(--lh-base);
      }

/* build two-pane */
      .cw-build {
        flex: 1;
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        min-height: 0;
      }

.cw-chat {
        display: flex;
        flex-direction: column;
        min-width: 0;
        border-right: 1px solid var(--line);
      }

.cw-thread {
        flex: 1;
        overflow-y: auto;
        padding: 20px 20px 8px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-height: 560px;
        scrollbar-width: thin;
      }

.cw-thread::-webkit-scrollbar {
        width: 8px;
      }

.cw-thread::-webkit-scrollbar-thumb {
        background: #d7e0df;
        border-radius: 8px;
      }

.cw-msg {
        max-width: 88%;
        font-size: var(--fs-sm);
        line-height: var(--lh-body);
        border-radius: 14px;
        padding: 13px 15px;
      }

.cw-msg.user {
        align-self: flex-end;
        background: #2f6bf0;
        color: #fff;
        border-bottom-right-radius: 5px;
      }

.cw-msg.user ul {
        margin: 7px 0 0;
        padding-left: 18px;
      }

.cw-msg.user li {
        margin: 4px 0;
      }

.cw-msg.ai {
        align-self: flex-start;
        background: #f4f7f9;
        color: #26383c;
        border-bottom-left-radius: 5px;
      }

.cw-msg.ai ol {
        margin: 8px 0 0;
        padding-left: 20px;
      }

.cw-msg.ai li {
        margin: 5px 0;
      }

.cw-typing {
        align-self: flex-start;
        display: inline-flex;
        gap: 5px;
        padding: 14px 16px;
        background: #f4f7f9;
        border-radius: 14px;
      }

.cw-typing i {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: #9fb2b5;
        display: inline-block;
        animation: cwbounce 1s infinite;
      }

.cw-typing i:nth-child(2) {
        animation-delay: 0.15s;
      }

.cw-typing i:nth-child(3) {
        animation-delay: 0.3s;
      }

@keyframes cwbounce {
        0%,
        80%,
        100% {
          opacity: 0.3;
          transform: translateY(0);
        }
        40% {
          opacity: 1;
          transform: translateY(-4px);
        }
      }

.cw-acc {
        align-self: stretch;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #f9fbfc;
        overflow: hidden;
      }

.cw-acc-h {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 14px;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #597272;
        cursor: pointer;
      }

.cw-acc-h svg.br {
        width: 15px;
        height: 15px;
        color: #758a8a;
      }

.cw-acc-h .chev {
        margin-left: auto;
        transition: transform 0.2s;
      }

.cw-acc.closed .chev {
        transform: rotate(-90deg);
      }

.cw-acc.closed .cw-acc-b {
        display: none;
      }

.cw-acc-b {
        padding: 2px 15px 14px;
        border-top: 1px solid var(--line);
      }

.cw-sec {
        margin-top: 13px;
      }

.cw-sec-h {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-xs);
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 7px;
      }

.cw-sec-h.plan {
        color: var(--blue);
      }

.cw-sec-h.tools {
        color: #597272;
      }

.cw-sec-h.think {
        color: #7c3aed;
      }

.cw-sec-h svg {
        width: 14px;
        height: 14px;
      }

.cw-plan {
        margin: 0;
        padding-left: 20px;
        font-size: var(--fs-sm);
        color: #597272;
        line-height: var(--lh-body);
      }

.cw-plan li {
        margin: 5px 0;
      }

.cw-tool {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: ui-monospace, Menlo, monospace;
        font-size: var(--fs-sm);
        color: #2a3b3f;
        padding: 3px 0;
      }

.cw-tool svg {
        width: 13px;
        height: 13px;
        color: #1aa051;
      }

.cw-think {
        font-size: var(--fs-sm);
        font-style: italic;
        color: #597272;
        line-height: var(--lh-body);
        border-left: 2px solid #e6dbfa;
        padding-left: 11px;
      }

.cw-q {
        align-self: stretch;
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 16px 17px;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
      }

.cw-q-n {
        font-size: var(--fs-xs);
        color: var(--muted);
        font-weight: 600;
      }

.cw-q-t {
        font-size: var(--fs-base-sm);
        font-weight: 800;
        color: #002020;
        margin: 4px 0 12px;
      }

.cw-opt {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 12px 13px;
        border: 1px solid var(--line);
        border-radius: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: var(--fs-sm);
        color: #26383c;
        transition: 0.12s;
      }

.cw-opt:hover {
        border-color: #b9cef0;
        background: #f7faff;
      }

.cw-opt .rad {
        flex: none;
        width: 17px;
        height: 17px;
        border-radius: 999px;
        border: 2px solid #c2d0d2;
        position: relative;
      }

.cw-opt.sel {
        border-color: var(--blue);
        background: #e6f0ff;
        font-weight: 600;
        color: #002020;
      }

.cw-opt.sel .rad {
        border-color: var(--blue);
      }

.cw-opt.sel .rad::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 999px;
        background: var(--blue);
      }

.cw-q-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
      }

.cw-q-back {
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--muted);
        background: none;
        border: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

.cw-q-back svg {
        width: 14px;
        height: 14px;
      }

.cw-next {
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #fff;
        background: var(--blue);
        border: 0;
        border-radius: 9px;
        padding: 9px 17px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }

.cw-next svg {
        width: 14px;
        height: 14px;
      }

.cw-working {
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #597272;
        background: #f4f7f9;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 14px;
      }

/* preview pane */
      .cw-preview {
        display: flex;
        flex-direction: column;
        min-width: 0;
        background: #fdfefe;
      }

.cw-pv-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px 22px;
        max-height: 560px;
        scrollbar-width: thin;
      }

.cw-pv-body::-webkit-scrollbar {
        width: 8px;
      }

.cw-pv-body::-webkit-scrollbar-thumb {
        background: #d7e0df;
        border-radius: 8px;
      }

.cw-pv-mt {
        height: 100%;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--muted);
        gap: 12px;
        padding: 20px;
      }

.cw-pv-mt svg.spark {
        width: 34px;
        height: 34px;
        color: #b9cef0;
      }

.cw-pv-mt .cw-spin {
        width: 30px;
        height: 30px;
        border: 3px solid #dbe6f7;
        border-top-color: var(--blue);
        border-radius: 999px;
        animation: msspin 0.7s linear infinite;
      }

.cw-pv-mt p {
        font-size: var(--fs-base-sm);
        max-width: 300px;
        line-height: var(--lh-body);
      }

.cw-changes {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #f9fbfc;
        padding: 13px 15px;
        margin-bottom: 16px;
      }

.cw-changes .h {
        font-size: var(--fs-sm);
        font-weight: 800;
        color: #002020;
        margin-bottom: 8px;
      }

.cw-changes .ln {
        font-family: ui-monospace, Menlo, monospace;
        font-size: var(--fs-xs);
        color: #597272;
        padding: 2px 0;
      }

.cw-changes .ln b {
        color: #1aa051;
        font-weight: 700;
      }

.cw-draft-name {
        font-size: var(--fs-lg);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: #002020;
      }

.cw-draft-desc {
        font-size: var(--fs-sm);
        color: #597272;
        line-height: var(--lh-body);
        margin-top: 8px;
      }

.cw-chips2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 13px 0 4px;
        flex-wrap: wrap;
      }

.cw-mode {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #597272;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 5px 10px;
      }

.cw-mode svg {
        width: 13px;
        height: 13px;
      }

.cw-2tools {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: var(--muted);
      }

.cw-d-h {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-base-sm);
        font-weight: 800;
        color: #002020;
        margin: 18px 0 8px;
      }

.cw-d-h svg {
        width: 15px;
        height: 15px;
        color: var(--teal-d);
      }

.cw-d-obj {
        font-size: var(--fs-sm);
        color: #597272;
        line-height: var(--lh-body);
      }

.cw-crit {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 9px;
      }

.cw-crit .r {
        display: flex;
        gap: 9px;
        font-size: var(--fs-sm);
        color: #597272;
        line-height: var(--lh-body);
      }

.cw-crit .r svg {
        flex: none;
        width: 15px;
        height: 15px;
        color: #1aa051;
        margin-top: 1px;
      }

.cw-d-tool {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 0;
        border-top: 1px solid var(--line);
        font-size: var(--fs-sm);
      }

.cw-d-tool:first-of-type {
        border-top: 0;
      }

.cw-d-tool .ti {
        flex: none;
        width: 26px;
        height: 26px;
        border-radius: 7px;
        background: #eef4fd;
        color: var(--blue);
        display: grid;
        place-items: center;
      }

.cw-d-tool .ti svg {
        width: 14px;
        height: 14px;
      }

.cw-d-tool .nm {
        font-weight: 700;
        color: #002020;
      }

.cw-d-tool .src {
        color: var(--muted);
      }

.cw-d-tool .ask {
        margin-left: auto;
        font-size: var(--fs-2xs);
        font-weight: 800;
        color: var(--blue);
        background: #eef3ff;
        border: 1px solid #d8e2ff;
        border-radius: 6px;
        padding: 2px 8px;
      }

.cw-out {
        display: inline-block;
        font-size: var(--fs-xs);
        font-weight: 700;
        color: #597272;
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 7px;
        padding: 5px 11px;
      }

.cw-foot {
        flex: none;
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 0;
      }

.cw-refine {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 16px;
        border-right: 1px solid var(--line);
      }

.cw-refine .rf {
        flex: 1;
        font-size: var(--fs-sm);
        color: #9fb2b5;
      }

.cw-refine .ic {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        color: #758a8a;
        border: 1px solid var(--line);
      }

.cw-refine .ic.send {
        background: var(--paper2);
      }

.cw-refine .ic svg {
        width: 15px;
        height: 15px;
      }

.cw-foot-r {
        display: flex;
        flex-direction: column;
      }

.cw-model {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 15px;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: #597272;
        border-bottom: 1px solid var(--line);
      }

.cw-model svg {
        width: 14px;
        height: 14px;
        color: #758a8a;
      }

.cw-create {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-family: inherit;
        font-size: var(--fs-base-sm);
        font-weight: 800;
        color: #fff;
        background: var(--blue);
        border: 0;
        padding: 14px;
        cursor: pointer;
        transition: 0.15s;
      }

.cw-create[disabled] {
        background: #a9c3f2;
        cursor: not-allowed;
      }

.cw-create svg {
        width: 16px;
        height: 16px;
      }

/* ===== ASSET / DESKIQ shared list ===== */
      .feat2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 11px;
        margin-top: 18px;
      }

/* asset cards: distinct topical icon tiles so the section reads as Asset Management at a glance */
      #assets .feat2 .pp .q {
        align-items: center;
        gap: 11px;
        font-size: var(--fs-base);
      }

#assets .feat2 .pp .q svg {
        width: 34px;
        height: 34px;
        padding: 7px;
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 9px;
        color: var(--teal-d);
        margin-top: 0;
      }

#assets .feat2 .pp .a {
        padding-left: 0;
        margin-top: 10px;
      }

/* Rezolve DeskIQ — interactive service-desk intelligence (master → detail) */
      .diq {
        background: var(--surface);
        text-align: left;
      }

.diq-appbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--line);
      }

.diq-appbar .t {
        font-size: var(--fs-base);
        font-weight: 800;
        color: #002020;
        display: flex;
        align-items: center;
        gap: 9px;
      }

.diq-appbar .t svg {
        width: 17px;
        height: 17px;
        color: var(--teal-d);
      }

.diq-appbar .sort {
        margin-left: auto;
        font-size: var(--fs-xs);
        font-weight: 700;
        color: var(--muted);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 6px 10px;
        background: var(--paper2);
      }

.diq-appbar .sort svg {
        width: 13px;
        height: 13px;
        color: #758a8a;
      }

.diq-body {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
      }

.diq-list {
        border-right: 1px solid var(--line);
        padding: 9px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-height: 620px;
      }

.diq-op {
        display: grid;
        grid-template-columns: 20px 1fr auto;
        gap: 11px;
        align-items: center;
        padding: 12px 12px;
        border: 1px solid transparent;
        border-radius: 11px;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        background: none;
        transition:
          background 0.15s,
          border-color 0.15s;
      }

.diq-op:hover {
        background: var(--paper2);
      }

.diq-op.on {
        background: #eafaf6;
        border-color: #c7e7e0;
      }

.diq-op:focus-visible {
        outline: 2px solid var(--teal-d);
        outline-offset: 2px;
      }

.diq-op .rk {
        font-size: var(--fs-sm);
        font-weight: 800;
        color: #9bb0b3;
      }

.diq-op.on .rk {
        color: var(--teal-d);
      }

.diq-op .nm {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #002020;
        line-height: var(--lh-heading);
        min-width: 0;
      }

.diq-op .nm small {
        display: block;
        font-weight: 500;
        color: #758a8a;
        font-size: var(--fs-xs);
        margin-top: 1px;
      }

.diq-op .pot {
        font-size: var(--fs-sm);
        font-weight: 800;
        color: var(--teal-d);
      }

.diq-op .pot.potm {
        color: #b5791b;
      }

.diq-listfoot {
        margin-top: auto;
        padding: 12px 12px 5px;
        font-size: var(--fs-xs);
        color: #9bb0b3;
        font-weight: 600;
        line-height: var(--lh-base);
      }

.diq-detail {
        padding: 18px 20px 20px;
        min-width: 0;
      }

.diq-d-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
      }

.diq-d-nm {
        font-size: var(--fs-md);
        font-weight: 800;
        color: #002020;
        letter-spacing: -0.01em;
      }

.diq-d-nm small {
        display: block;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--muted);
        margin-top: 3px;
      }

.diq-d-pot {
        flex: none;
        text-align: right;
      }

.diq-d-pot b {
        font-size: var(--fs-xl);
        font-weight: 800;
        color: var(--teal-d);
        line-height: var(--lh-tight);
        letter-spacing: -0.02em;
      }

.diq-d-pot span {
        display: block;
        font-size: var(--fs-2xs);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        margin-top: 3px;
        line-height: var(--lh-heading);
      }

.diq-sec-l {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #758a8a;
        margin: 17px 0 8px;
      }

.diq-spark {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        height: 46px;
      }

.diq-spark i {
        flex: 1;
        background: #dbeeea;
        border-radius: 3px 3px 0 0;
        min-height: 3px;
      }

.diq-spark i.hot {
        background: var(--teal-d);
      }

.diq-spark-x {
        display: flex;
        justify-content: space-between;
        font-size: var(--fs-2xs);
        color: #9bb0b3;
        margin-top: 6px;
        font-weight: 600;
      }

.diq-why {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

.diq-why div {
        display: flex;
        gap: 9px;
        align-items: flex-start;
        font-size: var(--fs-sm);
        color: #002020;
        line-height: var(--lh-base);
      }

.diq-why svg {
        width: 15px;
        height: 15px;
        color: var(--teal-d);
        flex: none;
        margin-top: 1px;
      }

.diq-impact {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
      }

.diq-stat {
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 11px 12px;
      }

.diq-stat b {
        display: block;
        font-size: var(--fs-lg);
        font-weight: 800;
        color: #002020;
        letter-spacing: -0.02em;
      }

.diq-stat span {
        display: block;
        font-size: var(--fs-2xs);
        color: var(--muted);
        font-weight: 600;
        margin-top: 3px;
        line-height: var(--lh-heading);
      }

.diq-rec {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 13px 14px;
        background: #fff;
      }

.diq-rec .rt {
        font-size: var(--fs-sm);
        font-weight: 800;
        color: #002020;
        display: flex;
        align-items: center;
        gap: 8px;
      }

.diq-rec .rt svg {
        width: 15px;
        height: 15px;
        color: var(--teal-d);
        flex: none;
      }

.diq-rec .rd {
        font-size: var(--fs-sm);
        color: var(--muted);
        margin-top: 6px;
        line-height: var(--lh-body);
      }

.diq-rec .rtools {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
      }

.diq-rec .rtools span {
        font-size: var(--fs-xs);
        font-weight: 700;
        color: #002020;
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 7px;
        padding: 4px 9px;
      }

.diq-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 15px;
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #fff;
        background: var(--teal-d);
        border: 0;
        border-radius: 10px;
        padding: 11px 17px;
        cursor: pointer;
        text-decoration: none;
        transition:
          transform 0.15s,
          box-shadow 0.15s;
      }

.diq-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px -12px rgba(0, 115, 111, 0.6);
      }

.diq-cta svg {
        width: 15px;
        height: 15px;
      }

.diq-cta:focus-visible {
        outline: 2px solid var(--teal-d);
        outline-offset: 3px;
      }

/* ===== FUNNEL OVERVIEW (premium) ===== */
      .fnl {
        max-width: 1000px;
        margin: 0 auto;
      }

.fnl-flow {
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }

.fx-link {
        width: 2px;
        height: 20px;
        margin: 0 0 0 43px;
        background: var(--teal);
        opacity: 0.4;
        border-radius: 2px;
      }

.fx {
        display: flex;
        align-items: center;
        gap: 18px;
        text-decoration: none;
        border-radius: 16px;
        padding: 22px 24px;
        width: 100%;
        border: 1px solid var(--line);
        background: var(--surface);
        box-shadow:
          0 1px 2px rgba(10, 32, 38, 0.04),
          0 16px 32px -22px rgba(10, 32, 38, 0.2);
        transition:
          border-color 0.2s ease,
          box-shadow 0.2s ease,
          transform 0.2s ease;
      }

.fx:hover {
        border-color: #bfe0dd;
        transform: translateY(-2px);
        box-shadow:
          0 4px 10px rgba(10, 32, 38, 0.05),
          0 26px 50px -26px rgba(10, 32, 38, 0.3);
      }

.fx-no {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-size: var(--fs-base);
        font-weight: 800;
        color: var(--teal-d);
        background: #eafaf6;
        border: 1px solid #c7e7e0;
      }

.fx-body {
        min-width: 120px;
      }

.fx-title {
        display: block;
        font-size: var(--fs-xl);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--text);
        line-height: var(--lh-tight);
      }

.fx-kick {
        display: block;
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--muted);
        margin-top: 2px;
      }

.fx-right {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        min-width: 0;
      }

.fx-chips {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

.fx-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #002020;
        white-space: nowrap;
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 6px 12px;
      }

.fx-chip svg {
        width: 14px;
        height: 14px;
        color: var(--teal-d);
        flex: none;
      }

.fx-note {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--muted);
        text-align: right;
      }

.fx-base {
        display: block;
        width: 100%;
        margin-top: 20px;
        text-decoration: none;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 24px 26px;
        box-shadow:
          0 1px 2px rgba(10, 32, 38, 0.04),
          0 18px 36px -22px rgba(10, 32, 38, 0.22);
        transition:
          border-color 0.2s ease,
          box-shadow 0.2s ease,
          transform 0.2s ease;
      }

.fx-base:hover {
        border-color: #bfe0dd;
        transform: translateY(-2px);
        box-shadow:
          0 4px 10px rgba(10, 32, 38, 0.05),
          0 28px 54px -26px rgba(10, 32, 38, 0.3);
      }

.fx-base-h {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: var(--fs-md);
        font-weight: 800;
        color: var(--text);
      }

.fx-base-h svg {
        width: 19px;
        height: 19px;
        color: var(--teal-d);
      }

.fx-base-h .tag {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--muted);
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 4px 10px;
      }

.fx-base-sub {
        font-size: var(--fs-sm);
        color: var(--muted);
        margin-top: 7px;
        max-width: 640px;
        line-height: var(--lh-body);
      }

.fx-prax {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }

.fx-prax span {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #002020;
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 6px 12px;
      }

.fx-frow {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 10px;
      }

.fx-frow span {
        text-align: center;
        font-size: var(--fs-sm);
        font-weight: 800;
        color: var(--text);
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
      }

/* Foundation: system-of-record label + note (used to cap the ITSM practices grid) */
      .fnd-h {
        font-size: var(--fs-sm);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--teal-d);
        margin-bottom: 14px;
      }

.fnd-note {
        font-size: var(--fs-base-sm);
        color: var(--muted);
        margin-top: 16px;
        line-height: var(--lh-body);
      }

/* ===== ACT COLOR CHAPTERS (background signals which act you’re in) ===== */
      .chap.resolve {
        background: var(--paper);
      }

.chap.assist {
        background: var(--paper2);
      }

.chap.automate {
        background: var(--paper);
      }

.chap.learn {
        background: var(--paper2);
      }

.chap.foundation {
        background: var(--paper);
      }

.chap.band {
        border-top: 0;
        border-bottom: 0;
      }

.chap .featrow p {
        color: var(--muted);
      }

.chap .featrow .fi {
        background: var(--paper2);
        border-color: var(--line);
      }

.chap .featrow .fi svg {
        color: var(--teal-d);
      }

.chap .capt-d {
        color: var(--muted);
      }

.chap .seccard {
        background: var(--surface);
        border-color: var(--line);
      }

.chap .seccard p {
        color: var(--muted);
      }

.chap .seccard svg {
        color: var(--teal-d);
      }

/* ===== AI-native ITSM: detection dashboard ===== */
      .di {
        background: var(--surface);
        border-radius: 12px;
        overflow: hidden;
      }

.di-head {
        padding: 19px 22px 0;
      }

.di-htitle {
        font-size: var(--fs-lg);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--text);
      }

.di-hsub {
        font-size: var(--fs-sm);
        color: var(--muted);
        margin-top: 3px;
      }

.di-tabs {
        display: flex;
        gap: 5px;
        padding: 15px 22px 0;
        border-bottom: 1px solid var(--line);
        margin-top: 14px;
      }

.di-tab {
        appearance: none;
        border: 0;
        background: none;
        cursor: pointer;
        font-family: inherit;
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: var(--muted);
        padding: 9px 16px;
        border-radius: 9px 9px 0 0;
        border-bottom: 2px solid transparent;
        transition: 0.15s;
        position: relative;
        top: 1px;
      }

.di-tab:hover {
        color: var(--text);
      }

.di-tab.on {
        color: var(--blue);
        border-bottom-color: var(--blue);
        background: #f2f7ff;
      }

.di-panel {
        display: none;
        padding: 20px 22px 22px;
      }

.di-panel.active {
        display: block;
      }

.di-block {
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 15px 17px;
        margin-bottom: 15px;
        background: #fff;
      }

.di-block:last-child {
        margin-bottom: 0;
      }

.di-bh {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 11px;
      }

.di-bh .t {
        font-size: var(--fs-base);
        font-weight: 800;
        color: var(--text);
      }

.di-badge {
        font-size: var(--fs-xs);
        font-weight: 800;
        color: var(--teal-d);
        background: #e7f4f2;
        border: 1px solid #cfe9e6;
        border-radius: 999px;
        padding: 4px 10px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

.di-badge svg {
        width: 12px;
        height: 12px;
      }

.di-ready {
        font-size: var(--fs-xs);
        font-weight: 800;
        color: #137a52;
        background: #e9f6ef;
        border: 1px solid #cfe9db;
        border-radius: 999px;
        padding: 4px 11px;
      }

.di-week {
        font-size: var(--fs-xs);
        font-weight: 800;
        color: #b5791b;
        background: #fdf3e2;
        border: 1px solid #f2ddb8;
        border-radius: 999px;
        padding: 4px 11px;
      }

.di-clu {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 13px 3px;
        border-top: 1px solid var(--line);
      }

.di-clu:first-of-type {
        border-top: 0;
        padding-top: 2px;
      }

.di-clu-ic {
        flex: none;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: #eef4fd;
        color: var(--blue);
      }

.di-clu-ic svg {
        width: 18px;
        height: 18px;
      }

.di-clu-main {
        min-width: 0;
        flex: 1;
      }

.di-clu-ttl {
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: var(--text);
      }

.di-clu-ttl .id {
        color: var(--muted);
        font-weight: 800;
        margin-right: 8px;
      }

.di-clu-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 8px;
        align-items: center;
      }

.di-pill {
        font-size: var(--fs-xs);
        font-weight: 700;
        border-radius: 7px;
        padding: 3px 9px;
        border: 1px solid var(--line);
        background: var(--paper2);
        color: #597272;
      }

.di-pill.active {
        background: #fdf3e2;
        border-color: #f2ddb8;
        color: #b5791b;
      }

.di-pill.emerging {
        background: #eef4fd;
        border-color: #d5e2f7;
        color: #2159b8;
      }

.di-pill.tick {
        background: #eef4fd;
        border-color: #d5e2f7;
        color: #2159b8;
      }

.di-pill.conf {
        background: #e9f6ef;
        border-color: #cfe9db;
        color: #137a52;
      }

.di-pill.grow {
        background: none;
        border: 1px solid transparent;
        color: var(--muted);
        padding-left: 2px;
      }

.di-clu-act {
        flex: none;
        display: flex;
        align-items: center;
        gap: 13px;
      }

.di-btn-danger {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #fff;
        background: #d64a3a;
        border: 0;
        border-radius: 8px;
        padding: 9px 13px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        white-space: nowrap;
      }

.di-btn-primary {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #fff;
        background: var(--blue);
        border: 0;
        border-radius: 8px;
        padding: 9px 13px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        white-space: nowrap;
      }

.di-btn-danger svg,
      .di-btn-primary svg {
        width: 13px;
        height: 13px;
      }

.di-dismiss {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
      }

.di-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

.di-table {
        min-width: 840px;
      }

.di-tr {
        display: grid;
        grid-template-columns: 80px 1.7fr 1.05fr 0.5fr 0.95fr 0.5fr 0.82fr 0.42fr;
        gap: 11px;
        align-items: center;
        padding: 11px 4px;
        border-top: 1px solid var(--line);
      }

.di-tr.head {
        border-top: 0;
        padding-top: 0;
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--muted);
      }

.di-td {
        font-size: var(--fs-sm);
        color: #597272;
        min-width: 0;
      }

.di-td .lnk {
        color: var(--blue);
        font-weight: 800;
      }

.di-td.sub {
        color: var(--text);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

.di-state {
        font-size: var(--fs-xs);
        font-weight: 700;
        border-radius: 6px;
        padding: 3px 8px;
        background: #eef4fd;
        border: 1px solid #d5e2f7;
        color: #2159b8;
        white-space: nowrap;
        display: inline-block;
      }

.di-state.ke {
        background: #fdf3e2;
        border-color: #f2ddb8;
        color: #b5791b;
      }

.di-state.rc {
        background: #e9f6ef;
        border-color: #cfe9db;
        color: #137a52;
      }

.di-risk {
        font-weight: 800;
      }

.di-risk.hi {
        color: #d64a3a;
      }

.di-risk.mid {
        color: #c0851f;
      }

.di-risk.lo {
        color: #137a52;
      }

.di-kedb {
        font-size: var(--fs-xs);
        font-weight: 700;
        border-radius: 6px;
        padding: 3px 8px;
        display: inline-block;
        white-space: nowrap;
      }

.di-kedb.wa {
        background: #fdf3e2;
        border: 1px solid #f2ddb8;
        color: #b5791b;
      }

.di-kedb.none {
        background: var(--paper2);
        border: 1px solid var(--line);
        color: var(--muted);
      }

.di-std {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 13px 3px;
        border-top: 1px solid var(--line);
      }

.di-std:first-of-type {
        border-top: 0;
        padding-top: 2px;
      }

.di-std-ic {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        background: #e9f6ef;
        color: #137a52;
      }

.di-std-ic svg {
        width: 17px;
        height: 17px;
      }

.di-std-main {
        flex: 1;
        min-width: 0;
      }

.di-std-ttl {
        display: block;
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: var(--text);
      }

.di-std-meta {
        display: block;
        font-size: var(--fs-sm);
        color: var(--muted);
        margin-top: 3px;
      }

.di-std-meta b {
        color: var(--text);
        font-weight: 700;
      }

.di-std-meta .ok {
        color: #137a52;
        font-weight: 700;
      }

.di-ov {
        padding: 14px 3px;
        border-top: 1px solid var(--line);
      }

.di-ov:first-of-type {
        border-top: 0;
        padding-top: 2px;
      }

.di-ov-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }

.di-ov-ttl {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: var(--text);
      }

.di-ov-ttl .id {
        color: var(--blue);
        font-weight: 800;
        margin-right: 8px;
      }

.di-sev {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: var(--fs-2xs);
        font-weight: 800;
        flex: none;
      }

.di-sev svg {
        width: 13px;
        height: 13px;
        color: var(--muted);
      }

.di-sevpill {
        border-radius: 6px;
        padding: 3px 8px;
        letter-spacing: 0.03em;
      }

.di-sevpill.high {
        background: #fdecea;
        color: #d64a3a;
      }

.di-sevpill.med {
        background: #fdf3e2;
        color: #b5791b;
      }

.di-sevpill.low {
        background: #e9f6ef;
        color: #137a52;
      }

.di-ov-just {
        font-size: var(--fs-sm);
        color: #597272;
        font-style: italic;
        margin-top: 7px;
        padding-left: 12px;
        border-left: 2px solid var(--line);
        line-height: var(--lh-body);
      }

.di-ov-by {
        font-size: var(--fs-xs);
        color: var(--muted);
        margin-top: 7px;
      }

/* practices grid */
      .prc {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 26px;
      }

.prc-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 20px;
        box-shadow: var(--shadow-sm);
      }

.prc-h {
        display: flex;
        align-items: center;
        gap: 12px;
      }

.prc-ic {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: var(--paper2);
        border: 1px solid var(--line);
        color: var(--teal-d);
      }

.prc-ic svg {
        width: 20px;
        height: 20px;
      }

.prc-verbs {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--muted);
        margin-top: 2px;
      }

.prc-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.06em;
        color: var(--blue);
        background: #eef4fd;
        border: 1px solid #d5e2f7;
        border-radius: 6px;
        padding: 3px 7px;
        margin-right: 8px;
        vertical-align: middle;
        position: relative;
        top: -1px;
      }

/* ===== Rezolve VoiceIQ interactive call (recorded sample) ===== */
      .viq-wrap {
        max-width: 1000px;
        margin: 0 auto;
      }

.viq {
        display: grid;
        grid-template-columns: 1fr 300px;
        background: var(--surface);
      }

.viq-convo {
        padding: 18px 20px;
        min-height: 340px;
        max-height: 440px;
        overflow-y: auto;
        border-right: 1px solid var(--line);
      }

.viq-convo-h {
        font-size: var(--fs-base);
        font-weight: 800;
        color: #002020;
      }

.viq-convo-s {
        font-size: var(--fs-sm);
        color: var(--muted);
        margin-top: 3px;
        line-height: var(--lh-body);
      }

.viq-thread {
        margin-top: 6px;
      }

.viq-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-top: 14px;
      }

.viq-row.caller {
        flex-direction: row-reverse;
      }

.viq-av {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        flex: none;
        display: grid;
        place-items: center;
        border: 1px solid var(--line);
      }

.viq-av svg {
        width: 17px;
        height: 17px;
      }

.viq-av.iq {
        background: #eef4ff;
        color: var(--blue);
      }

.viq-av.me {
        background: #e7f7f5;
        color: var(--teal-d);
      }

.viq-col {
        min-width: 0;
        max-width: 82%;
      }

.viq-row.caller .viq-col {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }

.viq-who {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #758a8a;
        margin-bottom: 4px;
      }

.viq-bub {
        font-size: var(--fs-base-sm);
        line-height: var(--lh-body);
        color: #243a3e;
        background: #f4f8f9;
        border: 1px solid var(--line);
        border-radius: 12px 12px 12px 4px;
        padding: 10px 13px;
        min-height: 20px;
      }

.viq-row.caller .viq-bub {
        background: #eaf1fb;
        border-color: #d5e4f7;
        color: #1c3350;
        border-radius: 12px 12px 4px 12px;
      }

.viq-call {
        padding: 22px 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #ffffff;
      }

.viq-btn {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        display: grid;
        place-items: center;
        color: #fff;
        background: var(--grad-btn);
        box-shadow: 0 16px 34px -16px rgba(0, 173, 167, 0.6);
        transition:
          0.2s transform,
          0.2s box-shadow;
      }

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

.viq-btn svg {
        width: 38px;
        height: 38px;
      }

.viq-btn.connecting {
        background: #e0982f;
      }

.viq-btn.oncall {
        background: #d64a3a;
      }

.viq-btn.connecting,
      .viq-btn.oncall {
        animation: viqpulse 1.2s infinite;
      }

@keyframes viqpulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(10, 32, 38, 0.18);
        }
        50% {
          box-shadow: 0 0 0 13px rgba(10, 32, 38, 0);
        }
      }

.viq-state {
        font-size: var(--fs-base-sm);
        font-weight: 800;
        color: #002020;
        margin-top: 14px;
        letter-spacing: -0.01em;
      }

.viq-party {
        width: 100%;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

.viq-p {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

.viq-p-l {
        font-size: var(--fs-xs);
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--muted);
      }

.viq-wave {
        display: flex;
        align-items: center;
        gap: 3px;
        height: 22px;
      }

.viq-wave i {
        width: 3px;
        height: 5px;
        border-radius: 2px;
        background: #cfd9d8;
      }

.viq-wave.on i {
        animation: viqbar 0.7s ease-in-out infinite;
      }

.viq-wave.viq-wave-you.on i {
        background: #5b8def;
      }

.viq-wave.viq-wave-iq.on i {
        background: #8b6cf0;
      }

.viq-wave i:nth-child(2) {
        animation-delay: 0.08s;
      }

.viq-wave i:nth-child(3) {
        animation-delay: 0.16s;
      }

.viq-wave i:nth-child(4) {
        animation-delay: 0.24s;
      }

.viq-wave i:nth-child(5) {
        animation-delay: 0.32s;
      }

.viq-wave i:nth-child(6) {
        animation-delay: 0.2s;
      }

.viq-wave i:nth-child(7) {
        animation-delay: 0.12s;
      }

.viq-wave i:nth-child(8) {
        animation-delay: 0.28s;
      }

.viq-wave i:nth-child(9) {
        animation-delay: 0.06s;
      }

@keyframes viqbar {
        0%,
        100% {
          height: 5px;
        }
        50% {
          height: 20px;
        }
      }

.viq-note {
        font-size: var(--fs-xs);
        color: #758a8a;
        margin-top: 20px;
        text-align: center;
        line-height: var(--lh-body);
      }

/* ===== MCP tool console (interactive) ===== */
      .mcp {
        display: grid;
        grid-template-columns: 236px 1fr;
        min-height: 560px;
        background: var(--surface);
        text-align: left;
      }

.mcp-side {
        border-right: 1px solid var(--line);
        background: var(--surface);
        padding: 14px 10px;
        overflow-y: auto;
        max-height: 600px;
      }

.mcp-side-h {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 8px 8px 7px;
      }

.mcp-srv {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 9px;
        cursor: pointer;
        transition: 0.15s;
        margin-bottom: 1px;
      }

.mcp-srv:hover {
        background: #eef4f4;
      }

.mcp-srv.on {
        background: #eaf1fd;
      }

.mcp-srv-ic {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        flex: none;
        display: grid;
        place-items: center;
        background: #eef4fd;
        color: var(--blue);
      }

.mcp-srv.ext .mcp-srv-ic {
        background: #f3effc;
        color: #7b3fd1;
      }

.mcp-srv-ic svg {
        width: 16px;
        height: 16px;
      }

.mcp-srv-main {
        min-width: 0;
        flex: 1;
      }

.mcp-srv-nm {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #002020;
        line-height: var(--lh-heading);
      }

.mcp-srv-sub {
        font-size: var(--fs-xs);
        color: var(--muted);
        margin-top: 2px;
      }

.mcp-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #16a34a;
        flex: none;
      }

.mcp-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
      }

.mcp-top {
        padding: 14px 20px;
        border-bottom: 1px solid var(--line);
      }

.mcp-crumb {
        font-size: var(--fs-sm);
        color: var(--muted);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 7px;
      }

.mcp-crumb svg {
        width: 13px;
        height: 13px;
        color: #b3c4c6;
      }

.mcp-crumb b {
        color: #002020;
        font-family: ui-monospace, Menlo, monospace;
      }

.mcp-hd {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
      }

.mcp-hd-ic {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        flex: none;
        display: grid;
        place-items: center;
        background: #eef4fd;
        color: var(--blue);
      }

.mcp-hd-ic svg {
        width: 20px;
        height: 20px;
      }

.mcp-hd-nm {
        font-size: var(--fs-xl);
        font-weight: 800;
        color: #002020;
        font-family: ui-monospace, Menlo, monospace;
        letter-spacing: -0.01em;
        display: flex;
        align-items: center;
        gap: 9px;
        flex-wrap: wrap;
      }

.mcp-gate-badge {
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        border-radius: 999px;
        padding: 3px 9px;
      }

.mcp-hd-sub {
        font-size: var(--fs-sm);
        color: var(--muted);
        margin-top: 2px;
      }

.mcp-hd-en {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #137a52;
        flex: none;
      }

.mcp-toggle {
        width: 34px;
        height: 20px;
        border-radius: 999px;
        background: #2f6bf0;
        position: relative;
        flex: none;
      }

.mcp-toggle::after {
        content: "";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--surface);
      }

.mcp-tabs {
        display: flex;
        gap: 3px;
        padding: 11px 16px 0;
        border-bottom: 1px solid var(--line);
        flex-wrap: wrap;
      }

.mcp-tab {
        appearance: none;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: var(--muted);
        padding: 9px 13px;
        border-radius: 9px 9px 0 0;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        transition: 0.15s;
        position: relative;
        top: 1px;
      }

.mcp-tab:hover {
        color: var(--text);
      }

.mcp-tab.on {
        color: var(--blue);
        border-bottom-color: var(--blue);
        background: #f2f7ff;
      }

.mcp-panel {
        padding: 18px 20px 22px;
        min-height: 290px;
      }

.mcp-kv {
        font-size: var(--fs-sm);
        color: #597272;
        margin-top: 9px;
      }

.mcp-kv b {
        color: #002020;
      }

.mcp-mono {
        font-family: ui-monospace, Menlo, monospace;
      }

.mcp-desc {
        font-size: var(--fs-sm);
        color: #597272;
        line-height: var(--lh-loose);
        margin-top: 9px;
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px 14px;
      }

.mcp-h {
        font-size: var(--fs-xs);
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #2b4248;
        margin: 18px 0 8px;
      }

.mcp-param {
        font-size: var(--fs-sm);
        color: #597272;
        padding: 8px 0;
        border-top: 1px solid var(--line);
        line-height: var(--lh-body);
      }

.mcp-param:first-of-type {
        border-top: 0;
      }

.mcp-param .nm {
        font-family: ui-monospace, Menlo, monospace;
        font-weight: 700;
        color: #002020;
      }

.mcp-param .ty {
        font-size: var(--fs-xs);
        color: var(--blue);
        margin-left: 7px;
      }

.mcp-gate-sel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: #002020;
        background: var(--surface);
      }

.mcp-gate-sel svg {
        width: 15px;
        height: 15px;
        color: #9fb3b6;
      }

.mcp-gate-note {
        display: flex;
        gap: 9px;
        font-size: var(--fs-sm);
        color: #597272;
        line-height: var(--lh-body);
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 11px 13px;
        margin-top: 10px;
      }

.mcp-gate-note svg {
        flex: none;
        color: var(--blue);
        width: 16px;
        height: 16px;
        margin-top: 1px;
      }

.mcp-ovr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 11px 14px;
        margin-top: 8px;
      }

.mcp-ovr .nm {
        font-size: var(--fs-base-sm);
        font-weight: 600;
        color: #002020;
      }

.mcp-ovr .r {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: none;
      }

.mcp-ovr .appr {
        font-size: var(--fs-xs);
        color: var(--muted);
      }

.mcp-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 11px;
      }

.mcp-stat {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 13px 14px;
        background: var(--surface);
      }

.mcp-stat .l {
        font-size: var(--fs-xs);
        color: var(--muted);
        font-weight: 600;
      }

.mcp-stat .v {
        font-size: var(--fs-xl);
        font-weight: 800;
        color: #002020;
        margin-top: 5px;
        letter-spacing: -0.02em;
      }

.mcp-stat .v.ok {
        color: #137a52;
      }

.mcp-stat .s {
        font-size: var(--fs-xs);
        color: var(--muted);
        margin-top: 3px;
      }

.mcp-spark {
        display: flex;
        align-items: flex-end;
        gap: 5px;
        height: 96px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 14px;
        margin-top: 12px;
      }

.mcp-spark i {
        flex: 1;
        background: linear-gradient(180deg, #5b8def, #3f6fd8);
        border-radius: 3px 3px 0 0;
        min-height: 3px;
      }

.mcp-seg {
        display: inline-flex;
        background: var(--paper2);
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 3px;
        margin-bottom: 14px;
      }

.mcp-seg button {
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #597272;
        background: none;
        border: 0;
        border-radius: 7px;
        padding: 6px 14px;
        cursor: pointer;
      }

.mcp-seg button.on {
        background: var(--surface);
        color: #002020;
        box-shadow: var(--shadow-sm);
      }

.mcp-field {
        margin-bottom: 12px;
      }

.mcp-field label {
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #002020;
        display: block;
      }

.mcp-field label .ty {
        font-size: var(--fs-xs);
        color: var(--blue);
        margin-left: 6px;
        font-weight: 600;
      }

.mcp-field .in {
        margin-top: 5px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 9px 12px;
        font-size: var(--fs-sm);
        color: #597272;
        background: var(--surface);
        font-family: ui-monospace, Menlo, monospace;
      }

.mcp-run {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: #fff;
        background: var(--blue);
        border: 0;
        border-radius: 9px;
        padding: 10px 18px;
        cursor: pointer;
      }

.mcp-run svg {
        width: 14px;
        height: 14px;
      }

.mcp-out {
        margin-top: 14px;
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
      }

.mcp-out-h {
        font-size: var(--fs-xs);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #137a52;
        background: #e9f6ef;
        padding: 8px 13px;
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        gap: 7px;
      }

.mcp-out-h svg {
        width: 13px;
        height: 13px;
      }

.mcp-pre {
        margin: 0;
        padding: 13px;
        font-family: ui-monospace, Menlo, monospace;
        font-size: var(--fs-sm);
        color: #243a3e;
        background: var(--surface);
        overflow-x: auto;
        line-height: var(--lh-body);
        white-space: pre-wrap;
      }

.mcp-audit-row {
        border-top: 1px solid var(--line);
      }

.mcp-audit-row:first-of-type {
        border-top: 0;
      }

.mcp-audit-h {
        display: grid;
        grid-template-columns: 22px 1fr 118px 84px;
        align-items: center;
        gap: 10px;
        padding: 12px 4px;
        cursor: pointer;
        font-size: var(--fs-sm);
        color: #597272;
      }

.mcp-audit-h .chev {
        transition: 0.2s transform;
        color: #9fb3b6;
        width: 15px;
        height: 15px;
      }

.mcp-audit-row.open .mcp-audit-h .chev {
        transform: rotate(90deg);
      }

.mcp-audit-ts {
        font-family: ui-monospace, Menlo, monospace;
      }

.mcp-audit-st {
        font-size: var(--fs-2xs);
        font-weight: 800;
        border-radius: 6px;
        padding: 3px 9px;
        width: max-content;
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

.mcp-audit-st.ok {
        color: #fff;
        background: #2f6bf0;
      }

.mcp-audit-st.err {
        color: #fff;
        background: #d64a3a;
      }

.mcp-audit-b {
        display: none;
        padding: 2px 4px 14px;
      }

.mcp-audit-row.open .mcp-audit-b {
        display: block;
      }

.mcp-audit-b .lbl {
        font-size: var(--fs-xs);
        font-weight: 700;
        color: var(--muted);
        margin: 9px 0 5px;
      }

/* ===== Asset Manager & CMDB (interactive) ===== */
      .am {
        background: var(--surface);
        text-align: left;
      }

.am-head {
        padding: 16px 20px 0;
      }

.am-title {
        font-size: var(--fs-md);
        font-weight: 800;
        color: #002020;
        letter-spacing: -0.01em;
      }

.am-tabs {
        display: flex;
        gap: 3px;
        margin-top: 12px;
        border-bottom: 1px solid var(--line);
      }

.am-tab {
        appearance: none;
        border: 0;
        background: none;
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: var(--muted);
        padding: 9px 14px;
        border-radius: 9px 9px 0 0;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        transition: 0.15s;
        position: relative;
        top: 1px;
      }

.am-tab:hover {
        color: var(--text);
      }

.am-tab.on {
        color: var(--blue);
        border-bottom-color: var(--blue);
        background: #f2f7ff;
      }

.am-panel {
        display: none;
        padding: 18px 20px 22px;
      }

.am-panel.active {
        display: block;
        animation: awfade 0.25s ease;
      }

.am-charts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 16px;
      }

.am-card {
        border: 1px solid var(--line);
        border-radius: 13px;
        padding: 15px 16px;
        background: #fff;
      }

.am-card-h {
        font-size: var(--fs-base-sm);
        font-weight: 800;
        color: #002020;
        margin-bottom: 14px;
      }

.am-donutwrap {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
      }

.am-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

.am-tbl {
        min-width: 560px;
      }

.am-tr {
        display: grid;
        grid-template-columns: 110px 1.4fr 90px 110px 1.4fr;
        gap: 10px;
        align-items: center;
        padding: 11px 4px;
        border-top: 1px solid var(--line);
        font-size: var(--fs-sm);
        color: #597272;
      }

.am-tr.head {
        border-top: 0;
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--muted);
      }

.am-tag {
        font-family: ui-monospace, Menlo, monospace;
        font-weight: 700;
        color: var(--blue);
      }

.am-mut {
        color: var(--muted);
      }

.am-badge {
        font-size: var(--fs-2xs);
        font-weight: 800;
        border-radius: 6px;
        padding: 3px 8px;
        width: max-content;
      }

.am-badge.instore {
        color: #137a52;
        background: #e9f6ef;
      }

.am-badge.checkedout {
        color: #b5791b;
        background: #fdf3e2;
      }

.am-cctbl {
        min-width: 420px;
      }

.am-cc {
        display: grid;
        grid-template-columns: 1.6fr 1fr 130px;
        gap: 10px;
        align-items: center;
        padding: 11px 4px;
        border-top: 1px solid var(--line);
        font-size: var(--fs-sm);
        color: #597272;
      }

.am-cc.head {
        border-top: 0;
        font-size: var(--fs-2xs);
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--muted);
      }

.am-cc .rel {
        font-weight: 800;
        color: #002020;
      }

.am-disc {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 11px;
        margin-top: 12px;
      }

.am-src {
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px 14px;
      }

.am-src-ic {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        flex: none;
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: var(--fs-base-sm);
        color: #fff;
      }

.am-src-main {
        min-width: 0;
        flex: 1;
      }

.am-src-nm {
        font-size: var(--fs-base-sm);
        font-weight: 700;
        color: #002020;
      }

.am-src-sub {
        font-size: var(--fs-xs);
        color: var(--muted);
        margin-top: 2px;
      }

.am-src-st {
        font-size: var(--fs-xs);
        font-weight: 800;
        color: #137a52;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: none;
      }

.am-src-st .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #16a34a;
      }

.am-connect {
        font-family: inherit;
        font-size: var(--fs-sm);
        font-weight: 700;
        color: var(--blue);
        background: #eef3ff;
        border: 1px solid #d8e2ff;
        border-radius: 8px;
        padding: 7px 14px;
        cursor: pointer;
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }

.am-connect.busy {
        color: var(--muted);
      }

.am-connect.done {
        color: #137a52;
        background: #e9f6ef;
        border-color: #cfe9db;
      }

.am-callout {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--paper2);
        border: 1px solid var(--line);
        border-left: 3px solid var(--teal);
        border-radius: 12px;
        padding: 13px 16px;
        margin-top: 16px;
        font-size: var(--fs-sm);
        color: #002020;
        line-height: var(--lh-body);
      }

.am-callout svg {
        width: 20px;
        height: 20px;
        color: var(--teal-d);
        flex: none;
      }

.am-callout b {
        color: #002020;
      }

.am-callout a {
        margin-left: auto;
        font-weight: 700;
        color: var(--blue);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

.am-note {
        font-size: var(--fs-sm);
        color: var(--muted);
        line-height: var(--lh-body);
      }

/* ===== review-pass additions ===== */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

.skip-link {
        position: fixed;
        top: -80px;
        left: 14px;
        z-index: 200;
        background: var(--surface);
        color: var(--ink);
        font-weight: 700;
        font-size: var(--fs-base-sm);
        padding: 12px 20px;
        border-radius: 12px;
        box-shadow: var(--shadow);
        transition: top 0.18s;
      }

.skip-link:focus {
        top: 12px;
      }

@media print {
        .reveal {
          opacity: 1 !important;
          transform: none !important;
        }
      }