/* ============================================================
   Octane Premium UI — 2026-10-02
   Monochrome brand layer (Roboto, black/white/grey, 2° slice).
   Load AFTER octane-override.css on every page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  --oc-ink: #000000;
  --oc-charcoal: #0e0e0e;
  --oc-g900: #161616;
  --oc-g800: #222222;
  --oc-g700: #3a3a3a;
  --oc-g600: #5c5c5c;
  --oc-g500: #6f6f6f;
  --oc-g400: #9a9a9a;
  --oc-g300: #dadada;
  --oc-g200: #ebebeb;
  --oc-g100: #f7f7f7;
  --oc-white: #ffffff;
  --oc-font: 'Roboto', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --oc-mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
  --oc-ease: cubic-bezier(.2, .7, .2, 1);
  --oc-shadow: 0 24px 48px -24px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .05);
  --oc-slice: 3.49vw; /* tan(2deg) x 100vw */
}

html, body, button, input, textarea, select { font-family: var(--oc-font) !important; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.mono, code, pre, kbd { font-family: var(--oc-mono) !important; }
:focus-visible { outline: 2px solid var(--oc-ink); outline-offset: 2px; }

/* ── Top navigation (62px — the slide scaler assumes this height) ── */
#octane-nav.oc-nav {
  position: fixed; inset: 0 0 auto 0; height: 62px; z-index: 9999;
  display: flex; align-items: center; gap: 40px; padding: 0 40px;
  background: rgba(0, 0, 0, .94); backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid #1d1d1d; box-sizing: border-box;
}
#octane-nav.oc-nav .oc-nav__logo { display: flex; align-items: center; }
#octane-nav.oc-nav .oc-nav__logo img { height: 24px; width: auto; display: block; }
.oc-nav__links { display: flex; gap: 28px; }
.oc-nav__links a { font-size: 14px; color: #a8a8a8; text-decoration: none; letter-spacing: .01em; transition: color .15s ease; padding: 6px 0; position: relative; }
.oc-nav__links a:hover { color: #fff; }
.oc-nav__links a[aria-current="page"] { color: #fff; }
.oc-nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: #fff; }
.oc-nav__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.oc-nav__cta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; color: #000 !important; font-size: 13.5px; font-weight: 500; text-decoration: none; transition: transform .2s var(--oc-ease), background .2s ease; }
.oc-nav__cta:hover { background: #e9e9e9; }
.oc-nav__cta svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  #octane-nav.oc-nav { gap: 16px; padding: 0 16px; }
  .oc-nav__links { gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .oc-nav__links a { font-size: 13px; white-space: nowrap; }
  .oc-nav__right .oc-live { display: none; }
  .oc-nav__cta { display: none; }
}

/* ── Shared atoms ── */
.oc-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--oc-g600); white-space: nowrap; }
.oc-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; position: relative; }
.oc-live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; opacity: .5; animation: oc-pulse 2.4s var(--oc-ease) infinite; }
.oc-nav .oc-live, .oc-dark .oc-live { color: #a8a8a8; }
.oc-nav .oc-live i, .oc-dark .oc-live i { background: #fff; }
@keyframes oc-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

.oc-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--oc-g500); margin: 0; }
.oc-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; transform: rotate(-2deg); }
.oc-label { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--oc-g500); margin: 0; }

.oc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--oc-ease); cursor: pointer; border: 1px solid transparent; }
.oc-btn svg { width: 16px; height: 16px; transition: transform .2s var(--oc-ease); }
.oc-btn:hover svg.oc-arrow { transform: translateX(3px); }
.oc-btn--dark { background: #000; color: #fff !important; }
.oc-btn--dark:hover { background: #262626; }
.oc-btn--light { background: #fff; color: #000 !important; }
.oc-btn--light:hover { background: #e9e9e9; }
.oc-btn--ghost { border-color: #3a3a3a; color: #fff !important; }
.oc-btn--ghost:hover { border-color: #fff; }
.oc-btn--outline { border-color: var(--oc-g300); background: #fff; color: #000 !important; }
.oc-btn--outline:hover { border-color: #000; }

.oc-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--oc-g300); background: #fff; color: var(--oc-g700); white-space: nowrap; }

/* 2° slice rule — runs lower-left to upper-right */
.oc-slice-rule { position: relative; height: 40px; }
.oc-slice-rule::after { content: ""; position: absolute; left: -2%; right: -2%; top: 50%; height: 1px; background: var(--oc-g300); transform: rotate(-2deg); }

/* reduced motion: see the motion & accessibility section at the end of this file */

/* ============================================================
   SLIDE PAGES (1920x1080 canvas, zoomed to fit)
   ============================================================ */
body:has(.slide) { background: var(--oc-g100) !important; }
.slide { background: var(--oc-g100) !important; padding: 30px 56px 28px !important; }

/* ── Agent page header ── */
.oc-agent-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 26px; position: relative; }
.oc-agent-head::after { content: ""; position: absolute; left: -1%; right: -1%; bottom: 0; height: 1px; background: var(--oc-g300); transform: rotate(-.35deg); transform-origin: center; }
.oc-crumb { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--oc-g500); margin-bottom: 14px; }
.oc-crumb a { color: var(--oc-g500); text-decoration: none; }
.oc-crumb a:hover { color: #000; }
.oc-crumb b { color: #000; font-weight: 500; }
.oc-agent-head__title { display: flex; align-items: center; gap: 22px; }
.oc-agent-icon { width: 76px; height: 76px; border-radius: 18px; background: #000; color: #fff; display: grid; place-items: center; flex: none; }
.oc-agent-icon svg { width: 34px; height: 34px; }
.oc-agent-head h1 { font-size: 60px; font-weight: 300; letter-spacing: -.025em; line-height: 1.02; color: #000; margin: 8px 0 0; }
.oc-agent-head h1 b { font-weight: 700; }
.oc-agent-head__actions { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.oc-agent-head__actions .oc-btn { height: 52px; font-size: 16px; padding: 0 24px; }

/* tab row */
.oc-tabsrow { align-items: center !important; margin-bottom: 18px !important; margin-top: 4px; }
.oc-tabs { display: inline-flex !important; width: max-content; background: #fff; border: 1px solid var(--oc-g300); border-radius: 999px; padding: 5px; gap: 2px !important; }
.oc-tabs button { height: 42px; padding: 0 24px !important; border-radius: 999px; text-transform: none !important; letter-spacing: 0 !important; font-size: 16px !important; font-weight: 500 !important; color: var(--oc-g600) !important; transition: background .2s ease, color .2s ease; }
.oc-tabs button.text-ibm-gray-100 { background: #000; color: #fff !important; }
.oc-tabs button:not(.text-ibm-gray-100):hover { color: #000 !important; }
.oc-tabsrow__right { display: flex; justify-content: flex-end; align-items: center; gap: 16px; font-size: 15px; color: var(--oc-g500); }
.oc-tabsrow__right .oc-live { font-size: 15px; }

/* left column */
.oc-leftcol { border-top: 0 !important; padding-top: 0 !important; padding-right: 6px; scrollbar-width: thin; }
.oc-leftcol h2 { font-size: 14px !important; letter-spacing: .14em !important; color: var(--oc-g500) !important; font-weight: 500 !important; }

/* KPI strip */
.oc-kpis { gap: 0 !important; background: #fff; border: 1px solid var(--oc-g300); border-radius: 16px; overflow: hidden; }
.oc-kpi { padding: 24px 28px; background: transparent !important; border-radius: 0 !important; }
.oc-kpi + .oc-kpi { border-left: 1px solid var(--oc-g300); }
.oc-kpi .oc-kpi__n { font-size: 56px !important; font-weight: 300 !important; letter-spacing: -.03em; line-height: 1 !important; color: #000 !important; font-variant-numeric: tabular-nums; }
.oc-kpi .oc-kpi__l { font-size: 16px !important; font-weight: 400 !important; color: var(--oc-g600) !important; margin-top: 12px; line-height: 1.4; }

/* capabilities */
.oc-caps { gap: 0 24px !important; border-top: 1px solid var(--oc-g300); flex: none !important; }
.oc-cap { align-content: start; background: transparent !important; border-radius: 0 !important; padding: 18px 2px !important; border-bottom: 1px solid var(--oc-g300); display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; }
.oc-cap > div:first-child { display: contents !important; }
.oc-cap > div:first-child svg { grid-row: 1 / span 2; width: 44px !important; height: 44px !important; padding: 11px; border: 1px solid var(--oc-g300); border-radius: 10px; color: #000 !important; background: #fff; }
.oc-cap > div:first-child p { font-size: 18px !important; font-weight: 500 !important; color: #000 !important; grid-column: 2; }
.oc-cap > p { grid-column: 2; font-size: 16px !important; color: var(--oc-g600) !important; margin-top: 2px; line-height: 1.45; }

/* scenario */
.oc-scn { background: #fff !important; border: 1px solid var(--oc-g300); border-radius: 16px !important; padding: 22px 24px !important; }
.oc-scn > div:first-child { border-color: var(--oc-g200) !important; }
.oc-avatar { width: 52px !important; height: 52px !important; background: #000 !important; color: #fff; font-weight: 500; font-size: 17px; letter-spacing: .02em; }
.oc-scn > div:first-child p:first-child { font-size: 18px !important; font-weight: 500 !important; color: #000 !important; }
.oc-scn > div:first-child p + p { color: var(--oc-g600) !important; }
.oc-steps { display: flex; flex-direction: column; gap: 10px; }
.oc-step { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--oc-g300); border-radius: 12px; background: var(--oc-g100); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.oc-step:hover { border-color: #000; background: #fff; }
.oc-step__n { font-family: var(--oc-mono) !important; font-size: 14px; color: var(--oc-g500); }
.oc-step__text { font-size: 17px; color: #000; line-height: 1.45; margin: 0; }
.oc-step__q { font-size: 15px; color: var(--oc-g600); margin: 4px 0 0; line-height: 1.4; }
.oc-ask { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: #000; color: #fff; font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background .2s ease, transform .2s var(--oc-ease); }
.oc-ask:hover { background: #2a2a2a; }
.oc-ask svg { width: 15px; height: 15px; transition: transform .2s var(--oc-ease); }
.oc-ask:hover svg { transform: translateX(2px); }
.oc-ask.is-done { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #000; }
.oc-step.is-asked { border-color: #000; background: #fff; }

/* data / tools tabs */
#content-data .bg-ibm-gray-10, #content-tools .bg-ibm-gray-10 { background: #fff !important; border: 1px solid var(--oc-g300); border-radius: 14px !important; }
#content-data table, #content-tools table { font-variant-numeric: tabular-nums; }
#content-data thead tr, #content-tools thead tr { border-bottom: 1px solid #000 !important; }
#content-data th, #content-tools th { font-size: 13px !important; text-transform: uppercase; letter-spacing: .08em; color: var(--oc-g500) !important; font-weight: 500 !important; }
#content-data .border-ibm-gray-30, #content-tools .border-ibm-gray-30 { border-color: var(--oc-g200) !important; }
[id^="ds-"] { border-radius: 999px !important; border: 1px solid var(--oc-g300); transition: background .2s ease, color .2s ease; }
[id^="ds-"].bg-ibm-gray-20 { background: #fff !important; color: var(--oc-g700) !important; }
[id^="ds-"].bg-ibm-blue { border-color: #000; }
#content-tools .rounded-lg:not(.bg-ibm-gray-10) { border-radius: 14px !important; }

/* chat panel */
#chatbot-container.oc-chat { padding: 0 !important; border: 1px solid #000 !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--oc-shadow); }
.oc-chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #000; color: #fff; flex: none; }
.oc-chat__ai { width: 32px; height: 32px; border-radius: 8px; background: #fff; color: #000; display: grid; place-items: center; font-weight: 700; font-size: 11.5px; letter-spacing: .02em; flex: none; }
.oc-chat__head b { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.oc-chat__head small { display: block; font-size: 11.5px; color: #9a9a9a; line-height: 1.3; }
.oc-chat__head .oc-live { margin-left: auto; font-size: 11.5px; color: #a8a8a8; }
.oc-chat__head .oc-live i { background: #fff; }
#chatbot-container.oc-chat > #root { padding: 4px 12px 12px; }

/* WXO / Carbon chat widget — re-theme to monochrome */
#root .WxOChatContainer, #root .WxOChatApp__themeWrapper, #root .cds--g10, #root .cds--white, #root .cds--layer-one {
  --wxOChat-PRIMARY-color: #000000 !important;
  --wxOChat-PRIMARY-color-text: #ffffff !important;
  --wxOChat-PRIMARY-color-hover: #262626 !important;
  --wxOChat-PRIMARY-color-background-active: #3a3a3a !important;
  --wxOChat-PRIMARY-color-r: 0 !important; --wxOChat-PRIMARY-color-g: 0 !important; --wxOChat-PRIMARY-color-b: 0 !important;
  --wxOChat-USER-MESSAGE-BACKGROUND-color: #000000 !important;
  --wxOChat-USER-MESSAGE-BACKGROUND-color-text: #ffffff !important;
  --wxOChat-TRANSIENT-NOTIFICATION-background: #f4f4f4 !important;
  --cds-highlight: #ebebeb !important;
  --cds-background-brand: #000000 !important;
  --cds-interactive: #000000 !important;
  --cds-border-interactive: #000000 !important;
  --cds-button-primary: #000000 !important;
  --cds-button-primary-hover: #262626 !important;
  --cds-button-primary-active: #3a3a3a !important;
  --cds-button-tertiary: #000000 !important;
  --cds-button-tertiary-hover: #262626 !important;
  --cds-button-tertiary-active: #3a3a3a !important;
  --cds-icon-interactive: #000000 !important;
  --cds-link-primary: #000000 !important;
  --cds-link-primary-hover: #3a3a3a !important;
  --cds-focus: #000000 !important;
  --cds-link-secondary: #000000 !important;
  --cds-link-visited: #3a3a3a !important;
  --cds-support-info: #000000 !important;
  --cds-border-interactive: #000000 !important;
  --cds-icon-primary: #161616 !important;
  --wxo-embed-ai-primary: #000000 !important;
  --wxo-embed-ai-primary-10: rgba(0, 0, 0, .04) !important;
  --wxo-embed-ai-primary-64: rgba(0, 0, 0, .3) !important;
}
#root, #root *:not(code):not(pre):not(kbd):not(samp) { font-family: var(--oc-font) !important; }
#root .WxOChat--hasGradient, #root .WxOChat--hasGradient::before, #root .WxOChat--hasGradient::after { background-image: none !important; }
#root .WxOChat--hasGradient { background-color: #fff !important; }
#root .wxo-custom-header { display: none !important; }
#root .WxOChat-welcome-component__message-title { font-size: 30px !important; line-height: 1.18 !important; font-weight: 300 !important; letter-spacing: -.02em; color: #000 !important; }
#root .WxOChat-welcome-component__message-time-info, #root .WxOChat-welcome-component__message-description { color: var(--oc-g500) !important; }
#root .cds--tile--clickable { border: 1px solid var(--oc-g300) !important; border-radius: 12px !important; background: var(--oc-g100) !important; transition: border-color .2s ease, background .2s ease !important; }
#root .cds--tile--clickable:hover { border-color: #000 !important; background: #fff !important; }
#root .cds--tile--clickable svg { fill: #000 !important; color: #000 !important; }
#root .tile-heading { color: #000 !important; }
#root .ProseMirror, #root .tiptap { caret-color: #000; }
#root [class*="input"]:focus-within, #root [class*="Input"]:focus-within { border-color: #000 !important; box-shadow: none !important; }
#root .c4p--user-avatar { background: #000 !important; color: #fff !important; }

/* ── Catalog page (demo/index) ── */
.oc-cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; position: relative; padding-bottom: 24px; }
.oc-cat-head::after { content: ""; position: absolute; left: -1%; right: -1%; bottom: 0; height: 1px; background: var(--oc-g300); transform: rotate(-.35deg); }
.oc-cat-head h1 { font-size: 60px; font-weight: 300; letter-spacing: -.03em; line-height: 1; margin: 0; color: #000; }
.oc-cat-head h1 b { font-weight: 700; }
.oc-cat-head p.oc-lede { font-size: 19px; color: var(--oc-g600); margin: 12px 0 0; max-width: 820px; line-height: 1.5; }
.oc-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; padding-bottom: 6px; }
.oc-filter { height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--oc-g300); background: #fff; font-size: 15.5px; font-weight: 500; color: var(--oc-g700); display: inline-flex; align-items: center; gap: 8px; transition: all .2s ease; }
.oc-filter em { font-style: normal; font-size: 13px; color: var(--oc-g400); }
.oc-filter:hover { border-color: #000; color: #000; }
.oc-filter[aria-pressed="true"] { background: #000; border-color: #000; color: #fff; }
.oc-filter[aria-pressed="true"] em { color: #8a8a8a; }
.oc-section-label { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 12px; }
.oc-section-label span { font-size: 15px; color: var(--oc-g400); }
.oc-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.oc-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--oc-g300); border-radius: 16px; padding: 18px 20px 16px; text-decoration: none; color: #000; transition: transform .25s var(--oc-ease), box-shadow .25s var(--oc-ease), background .25s ease, color .25s ease, border-color .25s ease; }
.oc-card__top { display: flex; align-items: center; justify-content: space-between; }
.oc-card__icon { width: 46px; height: 46px; border-radius: 12px; background: #000; color: #fff; display: grid; place-items: center; transition: background .25s ease, color .25s ease; }
.oc-card__icon svg { width: 22px; height: 22px; }
.oc-card__tag { font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--oc-g500); transition: color .25s ease; }
.oc-card h3 { font-size: 20px; font-weight: 700; margin: 14px 0 4px; letter-spacing: -.005em; }
.oc-card p { font-size: 15.5px; color: var(--oc-g600); margin: 0 0 14px; line-height: 1.45; transition: color .25s ease; }
.oc-card__kpis { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--oc-g200); transition: border-color .25s ease; }
.oc-card__kpi b { display: block; font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.oc-card__kpi small { display: block; font-size: 13.5px; color: var(--oc-g500); line-height: 1.3; margin-top: 2px; transition: color .25s ease; }
.oc-card__kpi + .oc-card__kpi { padding-left: 14px; border-left: 1px solid var(--oc-g200); transition: border-color .25s ease; }
.oc-card__go { position: absolute; top: 22px; right: 22px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s var(--oc-ease); }
.oc-card__go svg { width: 15px; height: 15px; }
.oc-card:hover, .oc-card:focus-visible { background: #000; color: #fff; border-color: #000; transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .45); }
.oc-card:hover .oc-card__icon, .oc-card:focus-visible .oc-card__icon { background: #fff; color: #000; }
.oc-card:hover p, .oc-card:hover small, .oc-card:hover .oc-card__tag, .oc-card:focus-visible p, .oc-card:focus-visible small { color: #9a9a9a; }
.oc-card:hover .oc-card__tag { opacity: 0; }
.oc-card:hover .oc-card__kpis, .oc-card:hover .oc-card__kpi + .oc-card__kpi { border-color: #2a2a2a; }
.oc-card:hover .oc-card__go, .oc-card:focus-visible .oc-card__go { opacity: 1; transform: none; }
.oc-sups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.oc-sup { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--oc-charcoal); color: #fff; border-radius: 16px; padding: 20px 24px 18px; text-decoration: none; transition: transform .25s var(--oc-ease), box-shadow .25s var(--oc-ease); }
.oc-sup::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 58px; height: 1px; background: #2a2a2a; transform: rotate(-2deg); }
.oc-sup:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55); }
.oc-sup .oc-card__tag { color: #8a8a8a; }
.oc-sup h3 { font-size: 26px; font-weight: 300; letter-spacing: -.015em; margin: 8px 0 4px; }
.oc-sup p { font-size: 15.5px; color: #a3a3a3; margin: 0; line-height: 1.45; }
.oc-sup__foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14.5px; color: #a3a3a3; }
.oc-sup__kpis { display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.oc-sup__kpis span { font-size: 12.5px; white-space: nowrap; border: 1px solid #2c2c2c; border-radius: 999px; padding: 4px 10px; color: #d6d6d6; background: #171717; }
.oc-sup__go { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; flex: none; transition: transform .25s var(--oc-ease); }
.oc-sup:hover .oc-sup__go { transform: translateX(3px); }
.oc-sup__go svg { width: 15px; height: 15px; }
[data-oc-hidden] { display: none !important; }

/* ── Finance department page ── */
.oc-fin-hero { position: relative; background: #000; color: #fff; border-radius: 22px; padding: 36px 44px 64px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), 0 100%); overflow: hidden; display: grid; grid-template-columns: 1fr 640px; gap: 48px; align-items: end; flex: none; }
.oc-fin-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 420px at 85% 10%, rgba(255, 255, 255, .08), transparent 60%), linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 56px, linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 56px 100%; pointer-events: none; }
.oc-fin-hero > * { position: relative; }
.oc-fin-hero .oc-eyebrow { color: #8a8a8a; }
.oc-fin-hero h1 { font-size: 64px; font-weight: 300; letter-spacing: -.03em; line-height: 1.02; margin: 16px 0 14px; }
.oc-fin-hero h1 b { font-weight: 700; }
.oc-fin-hero .oc-lede { font-size: 19px; color: #a8a8a8; margin: 0; max-width: 860px; line-height: 1.5; }
.oc-fin-hero .oc-lede b { color: #fff; font-weight: 500; }
#org-banner.oc-brief { background: #121212 !important; border: 1px solid #2a2a2a; border-radius: 16px !important; padding: 20px 22px !important; display: block !important; color: #dcdcdc !important; margin: 0 0 18px !important; min-height: 150px; }
.oc-brief .oc-label { color: #8a8a8a; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#org-banner-text { font-size: 17px !important; line-height: 1.5; -webkit-line-clamp: 4 !important; color: #d0d0d0; }
#org-banner-text .font-semibold { color: #fff; font-weight: 500; }
.oc-fin-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 560px 1fr; gap: 24px; margin-top: -40px; position: relative; z-index: 2; padding: 0 20px; }
.oc-panel { background: #fff; border: 1px solid var(--oc-g300); border-radius: 18px; padding: 24px 26px; min-height: 0; display: flex; flex-direction: column; box-shadow: var(--oc-shadow); }
.oc-gain { padding: 11px 0; border-bottom: 1px solid var(--oc-g200); }
.oc-gain:last-child { border-bottom: 0; }
.oc-gain__row { display: flex; align-items: baseline; gap: 12px; }
.oc-gain__k { font-size: 14px; font-weight: 700; letter-spacing: .06em; width: 44px; flex: none; }
.oc-gain__d { font-size: 16px; color: var(--oc-g600); flex: 1; }
.oc-gain__pct { font-size: 15px; font-weight: 500; }
.oc-gain__track { height: 4px; border-radius: 2px; background: var(--oc-g200); margin: 10px 0 6px 56px; position: relative; overflow: hidden; }
.oc-gain__track i { position: absolute; left: 0; top: 0; bottom: 0; background: #000; border-radius: 2px; transform-origin: left; animation: oc-grow 1.1s var(--oc-ease) both; }
@keyframes oc-grow { from { transform: scaleX(0); } }
.oc-gain__fr { font-size: 14px; color: var(--oc-g500); margin-left: 56px; font-variant-numeric: tabular-nums; }
.oc-gain__fr b { color: #000; font-weight: 500; }
.oc-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--oc-g200); border: 1px solid var(--oc-g200); border-radius: 12px; overflow: hidden; margin-top: 12px; }
.oc-impact div { background: #fff; padding: 14px 16px; }
.oc-impact b { display: block; font-size: 34px; font-weight: 300; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.oc-impact small { display: block; font-size: 13px; color: var(--oc-g600); margin-top: 7px; line-height: 1.35; }
.oc-impact sup, .oc-gains-label sup { font-size: 10px; color: var(--oc-g400); }
.oc-org-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.oc-fin-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 20px 0; font-size: 13px; color: var(--oc-g500); flex: none; }
.oc-fin-foot a { color: var(--oc-g500); text-decoration: underline; text-decoration-color: var(--oc-g300); text-underline-offset: 3px; }
.oc-fin-foot a:hover { color: #000; }
.oc-legend { display: flex; gap: 18px; white-space: nowrap; }
.oc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.oc-legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid #000; }
.oc-legend i.is-solid { background: #000; }

/* org chart nodes (rendered by index-BpBG-KCD.js) */
#org-nodes { padding: 18px 0 6px !important; }
.org-node { background: #fff !important; border: 1px solid var(--oc-g300); border-radius: 14px !important; padding: 14px 16px !important; }
.org-node .text-lg { font-size: 17px !important; font-weight: 700 !important; color: #000 !important; }
.org-node svg { color: #000 !important; }
.org-node a { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none !important; font-size: 14.5px !important; color: var(--oc-g600) !important; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; transition: background .2s ease, color .2s ease; }
.org-node a::after { content: "→"; color: var(--oc-g400); transition: transform .2s var(--oc-ease); }
.org-node a:hover { background: #000; color: #fff !important; }
.org-node a:hover::after { color: #fff; transform: translateX(2px); }
/* supervisor personas (CFO, Controller, Treasury) render as solid black nodes */
.org-node.bg-ibm-purple-10 { background: #000 !important; border-color: #000; }
.org-node.bg-ibm-purple-10 .text-lg, .org-node.bg-ibm-purple-10 svg { color: #fff !important; }
.org-node.bg-ibm-purple-10 a { color: #bdbdbd !important; }
.org-node.bg-ibm-purple-10 a::after { color: #777; }
.org-node.bg-ibm-purple-10 a:hover { background: #fff; color: #000 !important; }
.org-node.bg-ibm-purple-10 a:hover::after { color: #000; }
.org-node-active { box-shadow: 0 0 0 2px #000, 0 18px 36px -16px rgba(0, 0, 0, .4) !important; transform: translateY(-2px) scale(1.02) !important; }
.org-node.bg-ibm-purple-10.org-node-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 18px 36px -16px rgba(0, 0, 0, .5) !important; }
.data-flow-particle { fill: #000; }
#org-lines path { stroke: #cfcfcf; }
#org-nodes a[href="demo/"] { border-radius: 999px !important; background: #000 !important; padding: 12px 22px !important; font-size: 16px !important; }

/* ============================================================
   FLUID PAGES (landing, procurement)
   ============================================================ */
body.oc-fluid { margin: 0; padding-top: 62px !important; background: var(--oc-g100); color: #000; font-size: 16px; line-height: 1.5; height: auto !important; }
html:has(body.oc-fluid) { height: auto !important; overflow: auto !important; }
.oc-wrap { max-width: 1360px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 760px) { .oc-wrap { padding: 0 20px; } }
.oc-h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 300; letter-spacing: -.025em; line-height: 1.08; margin: 14px 0 0; text-wrap: balance; }
.oc-h2 b { font-weight: 700; }

/* hero */
.oc-hero { position: relative; overflow: hidden; background: #000; color: #fff; padding: 96px 0 calc(150px + var(--oc-slice)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--oc-slice)), 0 100%); }
.oc-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 520px at 78% 28%, rgba(255, 255, 255, .08), transparent 60%), linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 100%; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%); mask-image: linear-gradient(180deg, #000 30%, transparent 95%); }
.oc-hero__grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.oc-hero .oc-eyebrow { color: #9a9a9a; }
.oc-hero h1 { font-size: clamp(44px, 5.6vw, 80px); font-weight: 300; letter-spacing: -.035em; line-height: 1.02; margin: 22px 0 26px; text-wrap: balance; }
.oc-hero h1 b { font-weight: 700; }
.oc-hero__lede { font-size: 19px; line-height: 1.6; color: #a8a8a8; max-width: 600px; margin: 0; }
.oc-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.oc-hero__trust { margin-top: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; color: #7a7a7a; font-size: 13.5px; }
.oc-hero__trust img { height: 40px; width: auto; }

/* activity feed */
.oc-feed { background: linear-gradient(180deg, #121212, #0a0a0a); border: 1px solid #232323; border-radius: 18px; padding: 22px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04); }
.oc-feed__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #1f1f1f; }
.oc-feed__head span:first-child { font-size: 13.5px; color: #d4d4d4; font-weight: 500; }
.oc-ev { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 16px 2px; border-bottom: 1px solid #1a1a1a; align-items: start; animation: oc-ev-in .6s var(--oc-ease) both; }
.oc-ev:nth-child(3) { animation-delay: .12s; } .oc-ev:nth-child(4) { animation-delay: .24s; } .oc-ev:nth-child(5) { animation-delay: .36s; }
.oc-ev:last-child { border-bottom: 0; padding-bottom: 4px; }
@keyframes oc-ev-in { from { opacity: 0; transform: translateY(8px); } }
.oc-ev__ic { width: 38px; height: 38px; border-radius: 10px; background: #1b1b1b; border: 1px solid #2a2a2a; display: grid; place-items: center; color: #e8e8e8; }
.oc-ev__ic svg { width: 18px; height: 18px; }
.oc-ev b { display: block; font-size: 14.5px; font-weight: 500; color: #f2f2f2; }
.oc-ev small { display: block; font-size: 13.5px; color: #8d8d8d; line-height: 1.45; margin-top: 2px; }
.oc-ev__amt { display: inline-block; margin-top: 8px; font-family: var(--oc-mono) !important; font-size: 12px; color: #fff; border: 1px solid #333; border-radius: 6px; padding: 2px 8px; }
.oc-feed__note { font-size: 12px; color: #6f6f6f; margin: 14px 0 0; }

/* rising stats — they step upward with the slice */
.oc-stats { position: relative; z-index: 2; margin-top: -122px; }
.oc-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: end; }
.oc-stat { background: #fff; border: 1px solid var(--oc-g300); border-radius: 14px; padding: 26px 26px 22px; box-shadow: var(--oc-shadow); }
.oc-stat:nth-child(2) { transform: translateY(-14px); } .oc-stat:nth-child(3) { transform: translateY(-28px); } .oc-stat:nth-child(4) { transform: translateY(-42px); }
.oc-stat b { display: block; font-size: clamp(40px, 4vw, 56px); font-weight: 300; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.oc-stat b sup { font-size: 14px; color: var(--oc-g400); font-weight: 400; letter-spacing: 0; vertical-align: top; margin-left: 2px; }
.oc-stat span { display: block; font-size: 15px; color: var(--oc-g600); margin-top: 12px; }
.oc-sources { font-size: 12.5px; color: var(--oc-g500); margin: 28px 0 0; line-height: 1.7; }
.oc-sources a { color: var(--oc-g500); text-decoration: underline; text-decoration-color: var(--oc-g300); text-underline-offset: 3px; }
.oc-sources a:hover { color: #000; }

/* sections */
.oc-sec { padding: 96px 0 24px; }
.oc-sec__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.oc-sec__head p { color: var(--oc-g600); font-size: 17px; max-width: 520px; margin: 0; }

/* department cards */
.oc-depts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.oc-dept { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 320px; padding: 38px; border-radius: 20px; background: #fff; border: 1px solid var(--oc-g300); color: #000; text-decoration: none; transition: transform .3s var(--oc-ease), box-shadow .3s var(--oc-ease), border-color .3s ease; }
.oc-dept:hover { transform: translateY(-4px); box-shadow: var(--oc-shadow); border-color: #000; }
.oc-dept--dark { background: var(--oc-charcoal); color: #fff; border-color: var(--oc-charcoal); }
.oc-dept__count { font-size: 13.5px; color: var(--oc-g500); }
.oc-dept--dark .oc-dept__count { color: #8a8a8a; }
.oc-dept h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 300; letter-spacing: -.02em; margin: 14px 0 10px; max-width: 80%; }
.oc-dept p { color: var(--oc-g600); max-width: 460px; margin: 0; font-size: 16.5px; }
.oc-dept--dark p { color: #a3a3a3; }
.oc-dept__agents { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 30px; }
.oc-dept--dark .oc-pill { background: #181818; border-color: #2c2c2c; color: #d8d8d8; }
.oc-dept__go { position: absolute; top: 34px; right: 34px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--oc-g300); display: grid; place-items: center; transition: transform .3s var(--oc-ease), background .3s ease, color .3s ease; }
.oc-dept__go svg { width: 18px; height: 18px; }
.oc-dept:hover .oc-dept__go { transform: rotate(45deg); background: #000; color: #fff; border-color: #000; }
.oc-dept--dark .oc-dept__go { background: #fff; color: #000; border-color: #fff; }
.oc-dept--dark:hover .oc-dept__go { background: #fff; color: #000; }

/* platform flow */
.oc-flow { display: grid; grid-template-columns: 1fr 56px 1.5fr 56px 1fr; align-items: stretch; }
.oc-flow__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.oc-flow__label { margin-bottom: 4px; }
.oc-flow__arrow { display: flex; align-items: center; justify-content: center; color: var(--oc-g400); }
.oc-flow__arrow svg { width: 26px; height: 26px; }
.oc-side { background: #fff; border: 1px solid var(--oc-g300); border-radius: 14px; padding: 18px 20px; }
.oc-side h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; }
.oc-side p { font-size: 14px; color: var(--oc-g600); margin: 0; line-height: 1.5; }
.oc-core { background: #000; color: #fff; border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 22px; height: 100%; }
.oc-core h3 { font-size: 26px; font-weight: 300; letter-spacing: -.015em; margin: 0; }
.oc-core__domains { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.oc-core__domain { background: #121212; border: 1px solid #262626; border-radius: 12px; padding: 13px 14px; }
.oc-core__domain h4 { margin: 0 0 6px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; }
.oc-core__domain a { display: flex; justify-content: space-between; gap: 6px; font-size: 14px; color: #e6e6e6; text-decoration: none; padding: 3px 0; }
.oc-core__domain a::after { content: "→"; color: #555; transition: transform .2s var(--oc-ease), color .2s ease; }
.oc-core__domain a:hover { color: #fff; }
.oc-core__domain a:hover::after { color: #fff; transform: translateX(2px); }
.oc-core__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 22px; border-top: 1px solid #262626; margin-top: auto; }
.oc-core__pillars h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 500; }
.oc-core__pillars p { margin: 0; font-size: 13.5px; color: #9a9a9a; line-height: 1.5; }

/* footer */
.oc-footer { margin-top: 110px; background: #000; color: #8a8a8a; padding: calc(64px + var(--oc-slice)) 0 40px; clip-path: polygon(0 var(--oc-slice), 100% 0, 100% 100%, 0 100%); }
.oc-footer__grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.oc-footer__belief { font-size: clamp(24px, 2.6vw, 34px); font-weight: 300; color: #fff; letter-spacing: -.015em; margin: 0; max-width: 680px; line-height: 1.2; }
.oc-footer img { height: 40px; width: auto; }
.oc-footer__meta { margin-top: 36px; padding-top: 22px; border-top: 1px solid #1f1f1f; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }
.oc-footer a { color: #bdbdbd; text-decoration: none; }
.oc-footer a:hover { color: #fff; }

/* procurement page */
.oc-page-head { padding: 64px 0 0; }
.oc-crumb--fluid { font-size: 14px; margin-bottom: 22px; }
.oc-page-head h1 { font-size: clamp(40px, 5vw, 68px); font-weight: 300; letter-spacing: -.03em; line-height: 1.03; margin: 18px 0 18px; text-wrap: balance; }
.oc-page-head h1 b { font-weight: 700; }
.oc-page-head .oc-lede { font-size: 18.5px; color: var(--oc-g600); max-width: 660px; margin: 0; line-height: 1.55; }
.oc-pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.oc-pcards .oc-card { min-height: 340px; padding: 26px; }
.oc-pcards .oc-card p { font-size: 15.5px; }
.oc-card__try { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; }
.oc-card__try svg { width: 15px; height: 15px; transition: transform .2s var(--oc-ease); }
.oc-card:hover .oc-card__try svg { transform: translateX(3px); }

@media (max-width: 1100px) {
  .oc-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .oc-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .oc-stat:nth-child(n) { transform: none; }
  .oc-flow { grid-template-columns: 1fr; gap: 12px; }
  .oc-flow__arrow { transform: rotate(90deg); height: 40px; }
  .oc-pcards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .oc-hero { padding: 64px 0 calc(110px + var(--oc-slice)); }
  .oc-stats { margin-top: -90px; }
  .oc-stats__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .oc-stat { padding: 18px; }
  .oc-depts { grid-template-columns: 1fr; }
  .oc-dept { padding: 28px; min-height: 0; }
  .oc-core__pillars { grid-template-columns: 1fr; }
  .oc-pcards { grid-template-columns: 1fr; }
  .oc-pcards .oc-card { min-height: 0; }
  .oc-sec { padding-top: 72px; }
}

/* ============================================================
   MOTION, FEEDBACK & ACCESSIBILITY (apple-design review, 2026-10-02)
   ============================================================ */

/* Instant press feedback — respond on pointer-down, not on release */
.oc-btn:active, .oc-ask:active, .oc-filter:active, .oc-tabs button:active,
.oc-nav__cta:active, [id^="ds-"]:active { transform: scale(.97); transition: transform 80ms ease-out; }
.oc-card:active, .oc-sup:active, .oc-dept:active { transform: translateY(-2px) scale(.985); transition: transform 80ms ease-out; }
.org-node a:active, .oc-core__domain a:active, .oc-crumb a:active, .oc-nav__links a:active { opacity: .7; transition: opacity 60ms ease-out; }

/* One live pulse only (in the nav); every other live dot is static */
.oc-live i::after { display: none; }
.oc-nav .oc-live i::after { display: block; }

/* Org chart: show the teams immediately; only the connecting lines draw in */
.org-node[style*="opacity: 0;"] { opacity: 1 !important; }
.org-node.org-node-enter { opacity: 1; animation: none; }

/* Scroll edge: fade the bottom of the agent page's left column instead of a hard cut */
.oc-leftcol {
  padding-bottom: 56px !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}

/* "Ask" button states */
.oc-ask:disabled { cursor: default; }
.oc-ask.is-waiting { background: var(--oc-g200); color: var(--oc-g600); }
.oc-ask.is-waiting svg { display: none; }
.oc-ask.is-sending { background: #3a3a3a; }
.oc-ask.is-retry { background: #fff; color: #000; box-shadow: inset 0 0 0 1px var(--oc-g400); }

/* Page transitions: direction-aware slide between pages in the same sequence */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
html:active-view-transition-type(oc-forward)::view-transition-old(slide) { animation: .2s cubic-bezier(.4, 0, 1, 1) both oc-vt-out-left; }
html:active-view-transition-type(oc-forward)::view-transition-new(slide) { animation: .4s cubic-bezier(.2, .8, .2, 1) .08s both oc-vt-in-right; }
html:active-view-transition-type(oc-back)::view-transition-old(slide) { animation: .2s cubic-bezier(.4, 0, 1, 1) both oc-vt-out-right; }
html:active-view-transition-type(oc-back)::view-transition-new(slide) { animation: .4s cubic-bezier(.2, .8, .2, 1) .08s both oc-vt-in-left; }
@keyframes oc-vt-out-left { to { transform: translateX(-5%); opacity: 0; } }
@keyframes oc-vt-in-right { from { transform: translateX(5%); opacity: 0; } }
@keyframes oc-vt-out-right { to { transform: translateX(5%); opacity: 0; } }
@keyframes oc-vt-in-left { from { transform: translateX(-5%); opacity: 0; } }
/* the agent icon morphs between the catalog card and the agent page header */
::view-transition-group(oc-icon) { z-index: 10; }

/* Reduced motion: keep gentle fades, drop movement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity, color, background-color, border-color, box-shadow !important; }
  .oc-ev, .oc-gain__track i, .org-node-enter { animation: none !important; }
  .oc-live i::after { display: none !important; }
  .data-flow-particle { display: none !important; }
  #org-lines path { transition: none !important; stroke-dashoffset: 0 !important; }
  .org-node-active { transform: none !important; }
  .oc-btn:active, .oc-ask:active, .oc-filter:active, .oc-card:active, .oc-sup:active, .oc-dept:active { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .18s !important; }
  html:active-view-transition-type(oc-forward)::view-transition-old(slide),
  html:active-view-transition-type(oc-back)::view-transition-old(slide) { animation-name: oc-vt-fade-out !important; }
  html:active-view-transition-type(oc-forward)::view-transition-new(slide),
  html:active-view-transition-type(oc-back)::view-transition-new(slide) { animation-name: oc-vt-fade-in !important; }
}
@keyframes oc-vt-fade-out { to { opacity: 0; } }
@keyframes oc-vt-fade-in { from { opacity: 0; } }

/* Reduced transparency: solid chrome */
@media (prefers-reduced-transparency: reduce) {
  #octane-nav.oc-nav { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Increased contrast: stronger borders and secondary text */
@media (prefers-contrast: more) {
  :root { --oc-g300: #8a8a8a; --oc-g200: #b0b0b0; --oc-g400: #5c5c5c; --oc-g500: #444; --oc-g600: #2e2e2e; }
  .oc-card, .oc-panel, .oc-kpis, .oc-scn, .oc-step, .org-node { border-color: #6f6f6f !important; }
}

/* ============================================================
   LAPTOP LEGIBILITY — slide pages render at ~0.71x on a 13" laptop,
   so text inside the 1920x1080 canvas is sized up to stay >= ~11px.
   ============================================================ */
.slide .oc-label, .slide .oc-eyebrow, .slide .oc-card__tag { font-size: 15px; letter-spacing: .12em; }
.slide .oc-crumb { font-size: 17px; }
.slide .text-sm { font-size: 15.5px !important; }
.slide .text-base { font-size: 17px !important; }
/* agent pages */
.oc-leftcol h2 { font-size: 15px !important; }
.oc-kpi .oc-kpi__l { font-size: 18px !important; }
.oc-cap > div:first-child p { font-size: 19px !important; }
.oc-cap > p { font-size: 17.5px !important; }
.oc-scn > div:first-child p:first-child { font-size: 19.5px !important; }
.oc-step__text { font-size: 18.5px; }
.oc-step__q { font-size: 16.5px; }
.oc-step__n { font-size: 15px; }
.oc-ask { height: 44px; font-size: 16px; padding: 0 18px; }
.oc-tabs button { font-size: 17px !important; height: 44px; }
.oc-tabsrow__right, .oc-tabsrow__right .oc-live { font-size: 16.5px; }
#chatbot-container { zoom: 1.3 !important; }
.oc-chat__head small, .oc-chat__head .oc-live { font-size: 12px; }
/* catalog */
.oc-cat-head h1 { font-size: 56px; }
.oc-cat-head p.oc-lede { font-size: 19.5px; }
.oc-filter { font-size: 16.5px; }
.oc-filter em { font-size: 14px; }
.oc-section-label span { font-size: 16px; }
.oc-card p { font-size: 17px; line-height: 1.4; }
.oc-card__kpi small { font-size: 15px; }
.oc-sup p { font-size: 17px; }
.oc-sup__kpis span { font-size: 14px; }
.oc-sup__foot { font-size: 15.5px; }
/* finance department */
.oc-fin-hero .oc-lede { font-size: 20px; }
#org-banner-text { font-size: 18px !important; }
.oc-gain__k { font-size: 15px; }
.oc-gain__d { font-size: 17px; }
.oc-gain__pct { font-size: 16.5px; }
.oc-gain__fr { font-size: 15.5px; }
.oc-impact small { font-size: 15px; }
.oc-impact sup, .oc-gains-label sup, .oc-fin-foot sup { font-size: 12px; }
.org-node .text-lg { font-size: 19px !important; }
.org-node a { font-size: 16px !important; }
.oc-legend { font-size: 15px !important; }
.oc-fin-foot { font-size: 14.5px; }
.oc-brief .oc-label .oc-live { font-size: 15px; }
.slide sup { font-size: 13px !important; }
.oc-filter em { font-size: 15px; }
/* finance page: keep both stat blocks inside the left panel at the larger laptop text sizes */
.oc-fin-hero { padding: 30px 44px 60px; }
.oc-fin-hero h1 { font-size: 58px; margin: 12px 0 12px; }
.oc-fin-hero .oc-lede { max-width: none; }
.oc-gain { padding: 7px 0; }
.oc-gain__track { margin: 7px 0 5px 59px; }
.oc-gain__fr { margin-left: 59px; }
.oc-impact { margin-top: 8px; }
.oc-impact div { padding: 11px 14px; }
.oc-impact b { font-size: 31px; }
.oc-panel { padding: 20px 24px; }
/* catalog: extra vertical slack so the supervisor row fits at every MacBook scale */
.oc-cat-head { padding-bottom: 18px; }
.oc-section-label { margin: 14px 0 10px; }
.oc-cards { gap: 14px; }
.oc-card { padding: 16px 20px 14px; }
.oc-sup { padding: 18px 24px 16px; }
.oc-sup__foot { padding-top: 18px; }
.oc-sup::after { bottom: 54px; }

/* ============================================================
   ROUND 3 (2026-10-02): accessibility, presenting, polish
   ============================================================ */

/* Screen-reader-only text */
.oc-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Contrast: secondary text must clear 4.5:1 on white and #f7f7f7 */
.oc-section-label span, .oc-filter em, .oc-gain__fr, .oc-impact sup, .oc-gains-label sup { color: var(--oc-g500); }
.oc-filter[aria-pressed="true"] em { color: #b5b5b5; }
.oc-feed__note { color: #8a8a8a; }

/* Focus ring that shows on both light and dark surfaces: black ring + white halo */
:focus-visible { outline: 2px solid #000; outline-offset: 2px; box-shadow: 0 0 0 4px #fff; }
.oc-nav :focus-visible, .oc-hero :focus-visible, .oc-footer :focus-visible, .oc-chat__head :focus-visible,
.oc-dept--dark:focus-visible, .oc-sup:focus-visible, .oc-fin-hero :focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px #000; }
.oc-card:focus-visible, .oc-dept:focus-visible { outline-offset: 3px; }

/* Typography: avoid one-word last lines */
p, .oc-card p, .oc-step__text, .oc-step__q, .oc-cap > p { text-wrap: pretty; }
h1, h2, h3, .oc-sup h3 { text-wrap: balance; }

/* Nav: soft scroll edge instead of a hard rule; lighter material where content scrolls under it */
#octane-nav.oc-nav { border-bottom: 0; }
body.oc-fluid #octane-nav.oc-nav { background: rgba(0, 0, 0, .9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
body.oc-fluid #octane-nav.oc-nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)); }
@media (prefers-reduced-transparency: reduce) { body.oc-fluid #octane-nav.oc-nav { background: #000; } }

/* Chat header: New chat */
.oc-chat__new { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid #333; background: transparent; color: #e6e6e6; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.oc-chat__new svg { width: 12px; height: 12px; }
.oc-chat__new:hover { background: #1c1c1c; border-color: #555; }
.oc-chat__new:active { transform: scale(.96); }
.oc-chat__new:disabled { opacity: .45; cursor: default; }
.oc-chat__head .oc-live { margin-left: 10px; }

/* Nav: Present (full screen) button */
.oc-present { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid #3a3a3a; background: transparent; color: #e6e6e6; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.oc-present:hover { border-color: #fff; }
.oc-present:active { transform: scale(.96); }
.oc-present svg { width: 13px; height: 13px; }
.oc-present kbd { font-family: var(--oc-mono) !important; font-size: 11px; color: #9a9a9a; border: 1px solid #3a3a3a; border-radius: 4px; padding: 0 4px; line-height: 16px; }
.oc-present__tip { position: absolute; top: calc(100% + 10px); right: 0; width: 280px; padding: 12px 14px; border-radius: 12px; background: #fff; color: #000; font-size: 12.5px; line-height: 1.45; font-weight: 400; text-align: left; box-shadow: var(--oc-shadow); opacity: 0; transform: translateY(-4px); transform-origin: top right; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.oc-present__tip b { font-weight: 500; }
.oc-present:hover .oc-present__tip, .oc-present:focus-visible .oc-present__tip { opacity: 1; transform: none; }
:fullscreen .oc-present__tip { display: none; }

/* 404 page */
.oc-404 { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 48px 24px; }
.oc-404__inner { max-width: 860px; }
.oc-404 h1 { font-size: clamp(44px, 6vw, 76px); font-weight: 300; letter-spacing: -.035em; line-height: 1.02; margin: 18px 0 16px; }
.oc-404 h1 b { font-weight: 700; }
.oc-404 p { font-size: 18px; color: var(--oc-g600); margin: 0 0 32px; }
.oc-404__links { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   DARK THEME (2026-10-02)
   html[data-theme="dark"] is set by octane-theme-20261002.js
   (follows macOS, or the nav toggle). Brand logic is kept:
   whatever is black-on-light becomes white-on-dark ("inverse").
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;
  --oc-g100: #0f0f0f;   /* page */
  --oc-g200: #262626;   /* subtle dividers */
  --oc-g300: #2e2e2e;   /* borders */
  --oc-g400: #6a6a6a;   /* decorative only */
  --oc-g500: #8e8e8e;   /* labels (>=5:1 on surfaces) */
  --oc-g600: #b3b3b3;   /* secondary text */
  --oc-g700: #d0d0d0;
  --oc-surface: #191919;
  --oc-surface-2: #222222;
  --oc-fg: #f2f2f2;
  --oc-shadow: 0 24px 48px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02);
}
html[data-theme="dark"] body { color: var(--oc-fg); }
html[data-theme="dark"] ::selection { background: #fff; color: #000; }


/* Focus ring flips: white ring, black halo */
html[data-theme="dark"] :focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px #000; }

/* ── Text that was pure black ── */
/* :where() keeps this at low specificity so hover/inverse rules below still win */
html[data-theme="dark"] :where(.oc-crumb b, .oc-crumb a:hover, .oc-agent-head h1, .oc-cat-head h1, .oc-step__text,
  .oc-gain__fr b, .oc-card, .oc-dept, .oc-fin-foot a:hover, .oc-sources a:hover, .oc-filter:hover) { color: var(--oc-fg) !important; }
html[data-theme="dark"] .oc-tabs button:not(.text-ibm-gray-100):hover { color: var(--oc-fg) !important; }
html[data-theme="dark"] .oc-kpi .oc-kpi__n,
html[data-theme="dark"] .oc-cap > div:first-child p,
html[data-theme="dark"] .oc-scn > div:first-child p:first-child { color: var(--oc-fg) !important; }
html[data-theme="dark"] .oc-cap > div:first-child svg { color: var(--oc-fg) !important; background: var(--oc-surface) !important; }

/* ── Light surfaces → dark surfaces ── */
html[data-theme="dark"] :is(.oc-kpis, .oc-scn, .oc-panel, .oc-stat, .oc-side, .oc-impact div, .oc-tabs, .oc-filter, .oc-pill, .oc-btn--outline) { background: var(--oc-surface) !important; }
html[data-theme="dark"] .oc-btn--outline { color: var(--oc-fg) !important; }
html[data-theme="dark"] .oc-btn--outline:hover { border-color: #fff; }
html[data-theme="dark"] .oc-step { background: var(--oc-surface); }
html[data-theme="dark"] .oc-step:hover, html[data-theme="dark"] .oc-step.is-asked { background: var(--oc-surface-2); border-color: #fff; }
html[data-theme="dark"] .oc-present__tip { background: var(--oc-surface-2); color: var(--oc-fg); box-shadow: 0 0 0 1px #333, var(--oc-shadow); }

/* ── Inverse elements: black → white ── */
html[data-theme="dark"] :is(.oc-agent-icon, .oc-card__icon, .oc-avatar) { background: #fff !important; color: #000 !important; }
html[data-theme="dark"] .oc-btn--dark { background: #fff; color: #000 !important; }
html[data-theme="dark"] .oc-btn--dark:hover { background: #dcdcdc; }
html[data-theme="dark"] .oc-ask { background: #fff; color: #000; }
html[data-theme="dark"] .oc-ask:hover { background: #dcdcdc; }
html[data-theme="dark"] .oc-ask.is-sending { background: #cfcfcf; color: #000; }
html[data-theme="dark"] .oc-ask.is-done { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; }
html[data-theme="dark"] .oc-ask.is-retry { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--oc-g400); }
html[data-theme="dark"] .oc-filter[aria-pressed="true"] { background: #fff !important; border-color: #fff; color: #000 !important; }
html[data-theme="dark"] .oc-filter[aria-pressed="true"] em { color: #5c5c5c; }
html[data-theme="dark"] .oc-tabs button.text-ibm-gray-100 { background: #fff; color: #000 !important; }
html[data-theme="dark"] .oc-gain__track i { background: #fff; }
html[data-theme="dark"] .oc-legend i { border-color: #fff; }
html[data-theme="dark"] .oc-legend i.is-solid { background: #fff; }
html[data-theme="dark"] [id^="ds-"].bg-ibm-blue { background: #fff !important; color: #000 !important; border-color: #fff; }
html[data-theme="dark"] [id^="ds-"].bg-ibm-gray-20 { background: var(--oc-surface) !important; color: var(--oc-g700) !important; }

/* catalog cards: hover inverts to white */
html[data-theme="dark"] .oc-card { background: var(--oc-surface); }
html[data-theme="dark"] .oc-card__go { background: #000; color: #fff; }
html[data-theme="dark"] :is(.oc-card:hover, .oc-card:focus-visible) { background: #fff; color: #000 !important; border-color: #fff; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .9); }
html[data-theme="dark"] :is(.oc-card:hover, .oc-card:focus-visible) .oc-card__icon { background: #000 !important; color: #fff !important; }
html[data-theme="dark"] :is(.oc-card:hover, .oc-card:focus-visible) :is(p, small, .oc-card__tag) { color: #5c5c5c; }
html[data-theme="dark"] .oc-card:hover :is(.oc-card__kpis, .oc-card__kpi + .oc-card__kpi) { border-color: #dadada; }
/* supervisor cards: near-black with an edge so they separate from the page */
html[data-theme="dark"] .oc-sup { background: #050505; box-shadow: inset 0 0 0 1px #333; }
html[data-theme="dark"] .oc-sup:hover { box-shadow: inset 0 0 0 1px #555, 0 24px 48px -20px rgba(0, 0, 0, .9); }

/* landing: the featured (finance) department card is the inverse, as in light mode */
html[data-theme="dark"] .oc-dept { background: var(--oc-surface); }
html[data-theme="dark"] .oc-dept:hover { border-color: #fff; }
html[data-theme="dark"] .oc-dept:hover .oc-dept__go { background: #fff; color: #000; border-color: #fff; }
html[data-theme="dark"] .oc-dept--dark { background: #fff; color: #000 !important; border-color: #fff; }
html[data-theme="dark"] .oc-dept--dark p { color: #5c5c5c; }
html[data-theme="dark"] .oc-dept--dark .oc-dept__count { color: #6f6f6f; }
html[data-theme="dark"] .oc-dept--dark .oc-pill { background: #f2f2f2 !important; border-color: #dadada; color: #3a3a3a; }
html[data-theme="dark"] .oc-dept--dark .oc-dept__go, html[data-theme="dark"] .oc-dept--dark:hover .oc-dept__go { background: #000; color: #fff; border-color: #000; }
html[data-theme="dark"] .oc-core { box-shadow: inset 0 0 0 1px #2a2a2a; }
html[data-theme="dark"] .oc-fin-hero { background: #000; }

/* ── Finance org chart ── */
html[data-theme="dark"] .org-node { background: var(--oc-surface) !important; }
html[data-theme="dark"] .org-node .text-lg, html[data-theme="dark"] .org-node svg { color: var(--oc-fg) !important; }
html[data-theme="dark"] .org-node a:hover { background: #fff; color: #000 !important; }
html[data-theme="dark"] .org-node a:hover::after { color: #000; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10 { background: #fff !important; border-color: #fff; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10 .text-lg, html[data-theme="dark"] .org-node.bg-ibm-purple-10 svg { color: #000 !important; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10 a { color: #4a4a4a !important; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10 a::after { color: #8a8a8a; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10 a:hover { background: #000; color: #fff !important; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10 a:hover::after { color: #fff; }
html[data-theme="dark"] .org-node-active { box-shadow: 0 0 0 2px #fff, 0 18px 36px -16px rgba(0, 0, 0, .9) !important; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10.org-node-active { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 18px 36px -16px rgba(0, 0, 0, .9) !important; }
html[data-theme="dark"] .data-flow-particle { fill: #fff; }
html[data-theme="dark"] #org-lines path { stroke: #444; }
html[data-theme="dark"] #org-nodes a[href="demo/"] { background: #fff !important; color: #000 !important; }

/* ── Original slide-page utility colours (Data / Tools tabs etc.) ── */
html[data-theme="dark"] .slide .text-ibm-gray-100 { color: var(--oc-fg) !important; }
html[data-theme="dark"] .slide .text-ibm-gray-80 { color: #cfcfcf !important; }
html[data-theme="dark"] .slide .text-ibm-gray-60 { color: var(--oc-g600) !important; }
html[data-theme="dark"] .slide .text-ibm-gray-50 { color: var(--oc-g500) !important; }
html[data-theme="dark"] .slide :is(.text-ibm-gray-40, .text-ibm-gray-30) { color: var(--oc-g400) !important; }
html[data-theme="dark"] .slide :is(.text-ibm-blue, .text-ibm-blue-60, .text-ibm-purple, .text-ibm-purple-60, .text-ibm-orange-60, .text-ibm-teal-60,
  .text-ibm-red-60, .text-ibm-green, .text-ibm-green-60, .text-ibm-magenta-60, .text-ibm-cyan-60, .text-ibm-yellow-30, .text-black) { color: var(--oc-fg) !important; }
html[data-theme="dark"] .slide .bg-ibm-gray-10 { background-color: var(--oc-surface) !important; }
html[data-theme="dark"] .slide .bg-ibm-gray-20 { background-color: #262626 !important; }
html[data-theme="dark"] .slide .hover\:bg-ibm-gray-30:hover { background-color: #333 !important; }
html[data-theme="dark"] .slide .border-ibm-gray-30 { border-color: var(--oc-g300) !important; }
html[data-theme="dark"] .slide .bg-ibm-blue { background-color: #fff !important; color: #000 !important; }
html[data-theme="dark"] .slide .bg-ibm-blue.text-white, html[data-theme="dark"] .slide .bg-ibm-blue .text-white { color: #000 !important; }
html[data-theme="dark"] .slide .hover\:text-ibm-gray-80:hover, html[data-theme="dark"] .slide .hover\:text-ibm-gray-100:hover { color: var(--oc-fg) !important; }
html[data-theme="dark"] #content-data thead tr, html[data-theme="dark"] #content-tools thead tr { border-bottom-color: #fff !important; }
html[data-theme="dark"] :is(#content-data, #content-tools) .bg-ibm-gray-10 { background: var(--oc-surface) !important; }

/* ── Chat panel + IBM watsonx chat widget (Carbon g100-style tokens) ── */
html[data-theme="dark"] #chatbot-container.oc-chat { background: var(--oc-surface) !important; border-color: #3a3a3a !important; }
html[data-theme="dark"] .oc-chat__head { border-bottom: 1px solid #2a2a2a; }
html[data-theme="dark"] #root :is(.WxOChatContainer, .WxOChatApp__themeWrapper, .cds--g10, .cds--white, .cds--layer-one) {
  --wxOChat-PRIMARY-color: #ffffff !important;
  --wxOChat-PRIMARY-color-text: #000000 !important;
  --wxOChat-PRIMARY-color-hover: #dcdcdc !important;
  --wxOChat-PRIMARY-color-background-active: #c6c6c6 !important;
  --wxOChat-PRIMARY-color-r: 255 !important; --wxOChat-PRIMARY-color-g: 255 !important; --wxOChat-PRIMARY-color-b: 255 !important;
  --wxOChat-USER-MESSAGE-BACKGROUND-color: #ffffff !important;
  --wxOChat-USER-MESSAGE-BACKGROUND-color-text: #000000 !important;
  --wxOChat-TRANSIENT-NOTIFICATION-background: #262626 !important;
  --cds-background: #191919 !important;
  --cds-background-hover: #262626 !important;
  --cds-background-active: #333333 !important;
  --cds-background-selected: #2e2e2e !important;
  --cds-background-inverse: #f4f4f4 !important;
  --cds-background-brand: #ffffff !important;
  --cds-layer: #222222 !important;
  --cds-layer-01: #222222 !important; --cds-layer-02: #2a2a2a !important; --cds-layer-03: #333333 !important;
  --cds-layer-hover: #2a2a2a !important; --cds-layer-hover-01: #2a2a2a !important; --cds-layer-hover-02: #333333 !important;
  --cds-layer-active-01: #3a3a3a !important; --cds-layer-selected-01: #333333 !important;
  --cds-layer-accent-01: #333333 !important;
  --cds-field: #222222 !important; --cds-field-01: #222222 !important; --cds-field-02: #2a2a2a !important;
  --cds-field-hover: #2a2a2a !important; --cds-field-hover-01: #2a2a2a !important;
  --cds-border-subtle: #2e2e2e !important; --cds-border-subtle-00: #2e2e2e !important; --cds-border-subtle-01: #333333 !important; --cds-border-subtle-02: #3a3a3a !important;
  --cds-border-strong: #6f6f6f !important; --cds-border-strong-01: #6f6f6f !important;
  --cds-border-interactive: #ffffff !important;
  --cds-text-primary: #f2f2f2 !important;
  --cds-text-secondary: #b3b3b3 !important;
  --cds-text-placeholder: #8e8e8e !important;
  --cds-text-helper: #a8a8a8 !important;
  --cds-text-disabled: #5c5c5c !important;
  --cds-text-inverse: #161616 !important;
  --cds-text-on-color: #000000 !important;
  --cds-icon-primary: #f2f2f2 !important;
  --cds-icon-secondary: #b3b3b3 !important;
  --cds-icon-inverse: #161616 !important;
  --cds-icon-on-color: #000000 !important;
  --cds-icon-disabled: #5c5c5c !important;
  --cds-icon-interactive: #ffffff !important;
  --cds-interactive: #ffffff !important;
  --cds-link-primary: #ffffff !important;
  --cds-link-primary-hover: #dcdcdc !important;
  --cds-link-secondary: #ffffff !important;
  --cds-link-visited: #c6c6c6 !important;
  --cds-focus: #ffffff !important;
  --cds-focus-inset: #000000 !important;
  --cds-highlight: #333333 !important;
  --cds-button-primary: #ffffff !important; --cds-button-primary-hover: #dcdcdc !important; --cds-button-primary-active: #c6c6c6 !important;
  --cds-button-tertiary: #ffffff !important; --cds-button-tertiary-hover: #dcdcdc !important; --cds-button-tertiary-active: #c6c6c6 !important;
  --cds-button-secondary: #393939 !important;
  --cds-button-disabled: #333333 !important;
  --cds-skeleton-background: #262626 !important; --cds-skeleton-element: #333333 !important;
  --cds-overlay: rgba(0, 0, 0, .65) !important;
  --cds-support-info: #ffffff !important;
  --wxo-embed-ai-primary: #ffffff !important;
  --wxo-embed-ai-primary-10: rgba(255, 255, 255, .06) !important;
  --wxo-embed-ai-primary-64: rgba(255, 255, 255, .4) !important;
  color: var(--cds-text-primary);
}
html[data-theme="dark"] #root .WxOChat--hasGradient { background-color: var(--oc-surface) !important; }
html[data-theme="dark"] #root .WxOChat-welcome-component__message-title, html[data-theme="dark"] #root .tile-heading { color: var(--oc-fg) !important; }
html[data-theme="dark"] #root .cds--tile--clickable { background: var(--oc-surface-2) !important; }
html[data-theme="dark"] #root .cds--tile--clickable:hover { background: #2a2a2a !important; border-color: #fff !important; }
html[data-theme="dark"] #root .cds--tile--clickable svg { fill: var(--oc-fg) !important; color: var(--oc-fg) !important; }
html[data-theme="dark"] #root [class*="input"]:focus-within, html[data-theme="dark"] #root [class*="Input"]:focus-within { border-color: #fff !important; }
html[data-theme="dark"] #root .c4p--user-avatar { background: #fff !important; color: #000 !important; }
html[data-theme="dark"] #root .ProseMirror, html[data-theme="dark"] #root .tiptap { caret-color: #fff; color: var(--oc-fg); }

/* ── Theme toggle (nav) ── */
.oc-theme-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid #3a3a3a; background: transparent; color: #e6e6e6; cursor: pointer; position: relative; transition: border-color .15s ease; }
.oc-theme-btn:hover { border-color: #fff; }
.oc-theme-btn:active { transform: scale(.94); }
.oc-theme-btn svg { width: 15px; height: 15px; }
.oc-theme-btn .oc-present__tip { width: 220px; }
.oc-theme-btn:hover .oc-present__tip, .oc-theme-btn:focus-visible .oc-present__tip { opacity: 1; transform: none; }
/* active tab must stay black-on-white even while hovered */
html[data-theme="dark"] .slide .oc-tabs button.text-ibm-gray-100,
html[data-theme="dark"] .slide .oc-tabs button.text-ibm-gray-100:hover { color: #000 !important; }
/* Carbon secondary buttons (e.g. feedback "Cancel") use on-colour text, which is black in dark mode */
html[data-theme="dark"] #root :is(.WxOChatContainer, .WxOChatApp__themeWrapper, .cds--g10, .cds--white, .cds--layer-one) {
  --cds-button-secondary: #d0d0d0 !important; --cds-button-secondary-hover: #b8b8b8 !important; --cds-button-secondary-active: #a8a8a8 !important;
}
/* transitions must never swallow clicks (rapid theme toggling, quick Next presses) */
html::view-transition { pointer-events: none; }
/* theme change: brief colour transition on everything (class added for ~300ms by octane-theme JS) */
html.oc-theme-swap, html.oc-theme-swap *, html.oc-theme-swap *::before, html.oc-theme-swap *::after {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, fill .25s ease, stroke .25s ease, box-shadow .25s ease !important;
}

/* ============================================================
   ORG CHART v2 (2026-10-06): every team box looks the same;
   a box pops out (inverts + lifts) only while it's hovered.
   Supervisor teams carry a small tag instead of a solid fill.
   ============================================================ */
.org-node, .org-node.bg-ibm-purple-10 { background: #fff !important; border: 1px solid var(--oc-g300) !important; transition: opacity .3s ease, transform .25s var(--oc-ease), box-shadow .25s var(--oc-ease), background-color .2s ease, border-color .2s ease !important; }
.org-node.bg-ibm-purple-10 .text-lg, .org-node.bg-ibm-purple-10 svg { color: #000 !important; }
.org-node.bg-ibm-purple-10 a { color: var(--oc-g600) !important; }
.org-node.bg-ibm-purple-10 a::after { color: var(--oc-g400); }
.org-node.bg-ibm-purple-10 a:hover { background: #000; color: #fff !important; }
.org-node.bg-ibm-purple-10 a:hover::after { color: #fff; }
.org-node.bg-ibm-purple-10 .text-lg::after, .oc-sup-tag {
  content: "Supervisor"; display: inline-block; margin-left: 10px; vertical-align: 3px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid currentColor; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .65; font-style: normal;
}
.oc-sup-tag { margin: 0 6px 0 0; vertical-align: 1px; }
/* the auto-rotating spotlight only outlines the team; no pop */
.org-node-active, .org-node.bg-ibm-purple-10.org-node-active { transform: none !important; box-shadow: 0 0 0 1px var(--oc-g500) !important; }
/* hover = pop out */
.org-node:hover, .org-node.bg-ibm-purple-10:hover { background: #000 !important; border-color: #000 !important; transform: translateY(-4px) scale(1.03) !important; box-shadow: 0 26px 50px -22px rgba(0,0,0,.5) !important; z-index: 6; }
.org-node:hover .text-lg, .org-node:hover svg { color: #fff !important; }
.org-node:hover a { color: #bdbdbd !important; }
.org-node:hover a::after { color: #8a8a8a; }
.org-node:hover a:hover { background: #fff; color: #000 !important; }
.org-node:hover a:hover::after { color: #000; }

html[data-theme="dark"] .org-node, html[data-theme="dark"] .org-node.bg-ibm-purple-10 { background: var(--oc-surface) !important; border-color: var(--oc-g300) !important; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10 .text-lg, html[data-theme="dark"] .org-node.bg-ibm-purple-10 svg { color: var(--oc-fg) !important; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10 a { color: var(--oc-g600) !important; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10 a:hover { background: #fff; color: #000 !important; }
html[data-theme="dark"] .org-node.bg-ibm-purple-10 a:hover::after { color: #000; }
html[data-theme="dark"] .org-node-active, html[data-theme="dark"] .org-node.bg-ibm-purple-10.org-node-active { box-shadow: 0 0 0 1px #5c5c5c !important; }
html[data-theme="dark"] .org-node:hover, html[data-theme="dark"] .org-node.bg-ibm-purple-10:hover { background: #fff !important; border-color: #fff !important; box-shadow: 0 26px 50px -22px rgba(0,0,0,.9), 0 0 40px rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .org-node:hover .text-lg, html[data-theme="dark"] .org-node:hover svg { color: #000 !important; }
html[data-theme="dark"] .org-node:hover a { color: #4a4a4a !important; }
html[data-theme="dark"] .org-node:hover a::after { color: #8a8a8a; }
html[data-theme="dark"] .org-node:hover a:hover { background: #000; color: #fff !important; }
html[data-theme="dark"] .org-node:hover a:hover::after { color: #fff; }
@media (prefers-reduced-motion: reduce) { .org-node:hover { transform: none !important; } }

/* Explore Agents: scrolling catalog page (finance + procurement) */
.oc-cat { max-width: 1680px; margin: 0 auto; padding: 56px 48px 24px; }
.oc-catalog .oc-cat-head { padding-bottom: 0; }
.oc-catalog .oc-cat-head::after { display: none; }
.oc-catalog .oc-cat-head p.oc-lede { max-width: 980px; }
.oc-catalog .oc-filters { justify-content: flex-start; margin-top: 26px; padding-bottom: 26px; position: relative; }
.oc-catalog .oc-filters::after { content: ""; position: absolute; left: -1%; right: -1%; bottom: 0; height: 1px; background: var(--oc-g300); transform: rotate(-.35deg); }
.oc-catalog .oc-section-label { margin: 30px 0 14px; }
.oc-cards--4 { grid-template-columns: repeat(4, 1fr); }
.oc-catalog .oc-card { min-height: 236px; }
@media (max-width: 1280px) { .oc-catalog .oc-cards { grid-template-columns: repeat(4, 1fr); } .oc-catalog .oc-cards--4 { grid-template-columns: repeat(2, 1fr); } }
/* supervisor tag sits on its own line under the team name, icon top-aligned */
.org-node > div:first-child { align-items: flex-start !important; }
.org-node > div:first-child svg { margin-top: 3px; }
.org-node.bg-ibm-purple-10 .text-lg::after { display: block; width: fit-content; margin: 6px 0 0; vertical-align: 0; }
/* no supervisor tag on org nodes (user request 2026-10-06) */
.org-node.bg-ibm-purple-10 .text-lg::after { content: none !important; display: none !important; }

/* 13 Oct 2026: seven nav tabs (IT added). Keep each tab on one line; tighten the gap on narrower laptops. */
.oc-nav__links a { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1340px) { .oc-nav__links { gap: 22px; } }

/* Nav text size (15 Oct 2026, sales feedback): as large as the "Agentic Control Plane" heading (21px). To make room on
   laptops, the right-hand label ("68 agents live", "Live on IBM watsonx Orchestrate"...) hides below 1680px; tabs then
   reach 21px from ~1400px wide and ~18px at 1280px, the same on every page. Phones keep 13px + scroll. */
@media (min-width: 761px) {
  .oc-nav__links a { font-size: clamp(14px, calc(2.806vw - 18.4px), 21px); }
}
/* 20 Oct 2026 (Alan): nav tabs are Roboto 15.2px at every width, phones included. Overrides the 21px clamp above. */
.oc-nav__links a, #octane-nav .oc-nav__links a { font-family: var(--oc-font); font-size: 15.2px; }
@media (min-width: 761px) and (max-width: 1679px) { .oc-nav__right .oc-live { display: none; } }

/* Breadcrumbs one size everywhere (16px on screen, as on Explore Agents). Agent pages are 1920px slides scaled to fit the
   window (--slide-scale), so their size is divided by that scale to land at 16px too. */
.oc-crumb, .oc-crumb--fluid { font-size: 16px; }
.slide .oc-crumb { font-size: calc(16px / var(--slide-scale, 1)); }