/* Agentstration design system — dependency-free, token-driven, static. */
:root {
  color-scheme: light dark;
  --bg: #f7f8fb;
  --bg-grid: rgba(32, 59, 105, .055);
  --surface: #ffffff;
  --surface-2: #eff2f8;
  --surface-glass: rgba(255, 255, 255, .76);
  --text: #101522;
  --text-soft: #4f596d;
  --text-faint: #778196;
  --border: #dce1eb;
  --border-strong: #c5ccda;
  --primary: #136fdf;
  --primary-strong: #0958bc;
  --accent: #6459ef;
  --cyan: #00a9c7;
  --glow: rgba(19, 111, 223, .22);
  --header: rgba(247, 248, 251, .82);
  --shadow: 0 24px 70px rgba(20, 35, 62, .1);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --max: 1180px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080b12;
    --bg-grid: rgba(108, 136, 196, .06);
    --surface: #0f1420;
    --surface-2: #151c2a;
    --surface-glass: rgba(8, 11, 18, .78);
    --text: #f4f7fc;
    --text-soft: #abb4c7;
    --text-faint: #7d879b;
    --border: #222b3b;
    --border-strong: #354157;
    --primary: #46a0ff;
    --primary-strong: #78baff;
    --accent: #8d7cff;
    --cyan: #20d3e8;
    --glow: rgba(28, 127, 255, .28);
    --header: rgba(8, 11, 18, .8);
    --shadow: 0 28px 80px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  --bg: #080b12;
  --bg-grid: rgba(108, 136, 196, .06);
  --surface: #0f1420;
  --surface-2: #151c2a;
  --surface-glass: rgba(8, 11, 18, .78);
  --text: #f4f7fc;
  --text-soft: #abb4c7;
  --text-faint: #7d879b;
  --border: #222b3b;
  --border-strong: #354157;
  --primary: #46a0ff;
  --primary-strong: #78baff;
  --accent: #8d7cff;
  --cyan: #20d3e8;
  --glow: rgba(28, 127, 255, .28);
  --header: rgba(8, 11, 18, .8);
  --shadow: 0 28px 80px rgba(0, 0, 0, .35);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 86%); }
::selection { background: var(--primary); color: #fff; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
p, h1, h2, h3 { margin-top: 0; }
p { color: var(--text-soft); }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.08; }
h1 { font-size: clamp(3rem, 6.5vw, 6.4rem); font-weight: 620; }
h2 { font-size: clamp(2.1rem, 4vw, 3.8rem); font-weight: 600; }
h3 { font-size: 1.2rem; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.narrow { max-width: 920px; }
.section { padding: clamp(84px, 10vw, 144px) 0; }
.section-grid { position: relative; isolation: isolate; }
.section-grid::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 72% 35%, var(--glow), transparent 28%); opacity: .55; }
.surface-section { border-block: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 64%, transparent); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--primary); font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.lede { max-width: 750px; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.65; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--text); color: var(--bg); border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 70%, transparent); outline-offset: 4px; border-radius: 4px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; background: var(--header); backdrop-filter: blur(18px); transition: border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-color: var(--border); box-shadow: 0 8px 30px rgba(0,0,0,.04); }
.nav-shell { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.header-brand { width: clamp(190px, 18vw, 238px); height: 52px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--primary) 24%, #111827); border-radius: 12px; background: #000; overflow: hidden; box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 10%, transparent); }
.header-lockup { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-mark { width: 38px; height: 38px; overflow: visible; color: var(--primary); }
.brand-orbit { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .75; }
.brand-orbit-inner { opacity: .34; stroke-dasharray: 6 3; }
.brand-mark circle { fill: var(--surface); stroke: currentColor; stroke-width: 1.2; }
.brand-a { fill: url(#none); fill: var(--primary); stroke: none; }
.brand-a-tail { fill: var(--accent); }
.wordmark { font-size: .95rem; font-weight: 700; letter-spacing: .15em; }
.desktop-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.desktop-nav a { position: relative; padding: 25px 0 22px; color: var(--text-soft); font-size: .9rem; font-weight: 560; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--text); }
.desktop-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.language-link { min-width: 72px; text-align: center; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.language-link:hover { border-color: var(--primary); color: var(--text); }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: transparent; cursor: pointer; }
.icon-button:hover { background: var(--surface); border-color: var(--border-strong); }
.header-github-link svg { width: 18px; height: 18px; fill: currentColor; }
.theme-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.menu-button { display: none; }
.menu-button span { display: block; width: 16px; height: 1px; background: currentColor; transition: transform .2s; }
.menu-button span + span { margin-top: 5px; }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.mobile-nav { padding: 10px 20px 22px; border-top: 1px solid var(--border); background: var(--bg); }
.mobile-nav a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--border); font-size: 1.05rem; }
.mobile-nav a[aria-current="page"] { color: var(--primary); }
.alpha-banner { border-bottom: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), color-mix(in srgb, var(--accent) 7%, var(--surface))); }
.alpha-banner-inner { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 8px; }
.alpha-banner p { display: flex; align-items: center; gap: 14px; margin: 0; font-size: .74rem; }
.alpha-banner p strong { display: inline-flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; }
.alpha-banner p strong i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.alpha-banner p span { color: var(--text-soft); }
.alpha-banner a { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--primary); font: 700 .68rem/1 var(--mono); }
.alpha-banner a:hover { color: var(--primary-strong); }

/* Buttons and links */
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; border-radius: 9px; font-weight: 650; font-size: .92rem; transition: transform .2s, background .2s, border .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--primary); color: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 28%, transparent); }
.button.primary:hover { background: var(--primary-strong); }
.button.secondary { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface) 58%, transparent); }
.button.secondary:hover { background: var(--surface); border-color: var(--primary); }
.arrow-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--text); font-weight: 650; }
.arrow-link span { color: var(--primary); transition: transform .2s; }
.arrow-link:hover span { transform: translateX(5px); }

/* Home hero */
.hero { min-height: calc(100vh - 76px); display: flex; align-items: center; padding: 80px 0 105px; }
.hero-grid { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: clamp(40px, 8vw, 110px); }
.hero-copy h1 { max-width: 850px; margin-bottom: 28px; }
.hero-copy h1 em { color: var(--primary); font-style: normal; }
.hero-copy .lede { max-width: 720px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.proof-list { display: flex; flex-wrap: wrap; gap: 16px 28px; margin: 38px 0 0; padding: 0; list-style: none; color: var(--text-soft); font-size: .84rem; }
.proof-list li { display: flex; align-items: center; gap: 8px; }
.proof-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.hero-visual { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.hero-visual::before, .hero-visual::after { content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); border-radius: 50%; }
.hero-visual::before { inset: 3%; box-shadow: inset 0 0 40px var(--glow), 0 0 32px color-mix(in srgb, var(--primary) 12%, transparent); }
.hero-visual::after { inset: 15%; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, transparent); animation: spin 40s linear infinite; }
.hero-mark { width: 72%; height: 72%; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 15%, var(--surface)), var(--surface) 65%); box-shadow: var(--shadow); }
.hero-mark .brand-mark { width: 72%; height: 72%; filter: drop-shadow(0 0 18px var(--glow)); }
.hero-mark .brand-a { fill: var(--primary); }
.orbit-label { position: absolute; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); font: 600 .58rem/1 var(--mono); letter-spacing: .08em; box-shadow: var(--shadow); }
.orbit-label-a { top: 8%; right: 4%; }
.orbit-label-b { left: -3%; bottom: 27%; }
.orbit-label-c { right: 4%; bottom: 7%; }
.hero-orbit { position: absolute; width: 58vw; height: 58vw; right: -32vw; top: -30vw; z-index: -1; border: 1px solid var(--border); border-radius: 50%; opacity: .45; }
.hero-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 18px var(--primary); }
.hero-orbit i:nth-child(1) { left: 9%; bottom: 22%; }.hero-orbit i:nth-child(2) { left: 28%; bottom: 3%; }.hero-orbit i:nth-child(3) { left: -1%; bottom: 45%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Content sections */
.section-heading { max-width: 720px; margin-bottom: 56px; }
.section-heading > p:last-child { max-width: 650px; font-size: 1.05rem; }
.section-heading.split { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; }
.section-heading.split > p { margin-bottom: 8px; }
.number-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.number-card { position: relative; padding: 34px 36px 28px 0; }
.number-card + .number-card { padding-left: 36px; border-left: 1px solid var(--border); }
.number-card h3 { margin-bottom: 14px; }
.number-card p { margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card { position: relative; min-height: 270px; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.feature-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: var(--shadow); }
.icon-box { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 42px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: 11px; color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.icon { width: 23px; height: 23px; }
.feature-card p { margin-bottom: 0; font-size: .94rem; }
.local-section { position: relative; overflow: hidden; }
.local-section::before { content: ""; position: absolute; width: 500px; height: 500px; left: -300px; top: 10%; border: 1px solid var(--border); border-radius: 50%; box-shadow: 0 0 100px var(--glow); }
.local-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; align-items: center; }
.local-copy { position: sticky; top: 130px; align-self: start; }
.local-copy p:last-child { font-size: 1.05rem; }
.local-points { border-top: 1px solid var(--border); }
.local-point { display: grid; grid-template-columns: 55px 1fr; gap: 26px; padding: 30px 0; border-bottom: 1px solid var(--border); }
.local-point > span { width: 48px; height: 48px; display: grid; place-items: center; color: var(--primary); }
.local-point h3 { margin: 0 0 7px; }
.local-point p { margin: 0; }
.architecture-section { background: var(--surface); border-block: 1px solid var(--border); }
.architecture-grid, .architecture-detail { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; align-items: center; }
.architecture-grid > div:first-child > p:not(.eyebrow), .architecture-detail > div:first-child > p { font-size: 1.05rem; }
.architecture-graphic { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow); }
.arch-node { min-height: 66px; display: flex; align-items: center; gap: 18px; padding: 14px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.arch-node span { color: var(--primary); font: .68rem var(--mono); }
.arch-node strong { font-size: .76rem; letter-spacing: .11em; }
.node-2 { margin-inline: 5%; }.node-3 { margin-inline: 10%; }.node-4 { margin-inline: 15%; }.node-5 { margin-inline: 20%; text-align: center; }
.arch-connector { width: 1px; height: 22px; margin: 0 auto; background: var(--border-strong); position: relative; }
.arch-connector i { position: absolute; width: 5px; height: 5px; left: -2px; top: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 9px var(--primary); }
.extension-panel { display: grid; grid-template-columns: .75fr 1.25fr; gap: 9vw; align-items: center; padding: clamp(42px, 7vw, 80px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--primary) 7%, var(--surface))); box-shadow: var(--shadow); }
.protocol-mark { position: relative; min-height: 370px; display: grid; place-items: center; color: var(--primary); isolation: isolate; }
.protocol-mark::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 18%, transparent), transparent 66%); filter: blur(14px); }
.protocol-mark::after { content: ""; position: absolute; width: 82%; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 45%, transparent), transparent); box-shadow: 0 -72px 0 color-mix(in srgb, var(--accent) 10%, transparent), 0 72px 0 color-mix(in srgb, var(--cyan) 10%, transparent); }
.aep-core { position: relative; width: min(92%, 390px); min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 13px; padding: 38px 34px 32px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 30px; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), color-mix(in srgb, var(--accent) 5%, var(--surface))); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent), 0 24px 60px color-mix(in srgb, var(--primary) 14%, transparent); overflow: hidden; }
.aep-core::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent 8%, var(--cyan), var(--primary) 52%, var(--accent), transparent 92%); }
.aep-core::after { content: ""; position: absolute; width: 150px; height: 150px; right: -80px; bottom: -95px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 50%; box-shadow: 0 0 42px color-mix(in srgb, var(--accent) 10%, transparent); }
.aep-kicker { color: var(--primary); font: 700 .58rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.aep-monogram { display: flex; align-items: center; justify-content: center; gap: 0; min-height: 94px; }
.aep-brand { width: 94px; height: 94px; display: grid; place-items: center; overflow: visible; }
.aep-brand .brand-mark { width: 94px; height: 94px; overflow: visible; filter: drop-shadow(0 0 15px color-mix(in srgb, var(--primary) 36%, transparent)); transform: scale(1.58); }
.aep-brand .brand-orbit, .aep-brand .brand-mark circle { display: none; }
.aep-brand .brand-a { fill: var(--primary); }
.aep-brand .brand-a-tail { fill: var(--accent); }
.aep-monogram strong { margin-left: -16px; background: linear-gradient(100deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; font: 560 clamp(4.6rem, 7vw, 6rem)/.8 var(--font); letter-spacing: -.09em; }
.aep-name { color: var(--text); font: 650 clamp(.6rem, .8vw, .76rem)/1.3 var(--mono); letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.aep-connector { width: 118px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 9px; }
.aep-connector::before, .aep-connector::after { content: ""; height: 1px; background: linear-gradient(90deg, transparent, var(--primary)); }
.aep-connector::after { background: linear-gradient(90deg, var(--accent), transparent); }
.aep-connector b { width: 7px; height: 7px; border: 1px solid var(--surface); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.aep-connector b:not(:first-child) { display: none; }
.protocol-mark { min-height: 0; aspect-ratio: 1; margin: 0; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--primary) 22%, #111827); border-radius: 30px; background: #000; box-shadow: 0 28px 70px rgba(0, 0, 0, .34), 0 0 55px color-mix(in srgb, var(--primary) 12%, transparent); overflow: hidden; }
.protocol-mark::before, .protocol-mark::after { content: none; }
.aep-logo-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.preview-card { padding: 16px 16px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.preview-card h3, .preview-card > p { margin-inline: 12px; }
.preview-card h3 { margin-top: 24px; margin-bottom: 8px; }.preview-card > p { margin-bottom: 0; }
.preview-window { aspect-ratio: 16/9; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--bg); }
.window-bar { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--border); }
.window-bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); }
.preview-placeholder { height: calc(100% - 30px); display: grid; place-items: center; align-content: center; gap: 16px; color: var(--text-faint); background-image: radial-gradient(var(--border) .6px, transparent .6px); background-size: 13px 13px; }
.preview-placeholder span { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--primary); }
.preview-placeholder small { padding: 4px 10px; border-radius: 999px; background: var(--surface); font-family: var(--mono); }

/* Internal pages */
.page-hero { padding: clamp(100px, 13vw, 180px) 0 clamp(90px, 11vw, 150px); text-align: center; border-bottom: 1px solid var(--border); }
.page-hero .eyebrow { justify-content: center; }.page-hero h1 { font-size: clamp(3rem, 6.2vw, 5.9rem); max-width: 1100px; margin-inline: auto; }.page-hero .lede { margin-inline: auto; }
.feature-group { display: grid; grid-template-columns: .72fr 1.28fr; gap: 7vw; padding: 72px 0; border-top: 1px solid var(--border); }
.feature-group:first-child { padding-top: 0; border: 0; }
.group-intro > span { display: block; margin-bottom: 20px; color: var(--primary); font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.group-intro h2 { font-size: clamp(1.9rem, 3vw, 3rem); }
.group-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini-card { min-height: 260px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mini-card .icon-box { margin-bottom: 44px; }.mini-card p { margin-bottom: 0; font-size: .91rem; }
.principles { background: var(--surface); border-block: 1px solid var(--border); }
.principle-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.principle-cloud span { padding: 12px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text-soft); }
.plane-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.plane-card { position: relative; min-height: 370px; padding: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.plane-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -80px; bottom: -80px; border: 1px solid var(--primary); border-radius: 50%; opacity: .4; box-shadow: 0 0 30px var(--glow); }
.plane-card > p:first-of-type { margin: 34px 0 12px; color: var(--primary); font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.boundary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.boundary-card { min-height: 210px; padding: 38px 32px 32px; border-top: 1px solid var(--border-strong); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, transparent), transparent); }
.boundary-card > span { display: block; margin-bottom: 50px; color: var(--primary); font: .72rem var(--mono); }
.aep-section { border-block: 1px solid var(--border); background: var(--surface); }
.extension-aep-intro { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(48px, 8vw, 110px); align-items: start; }
.page-aep-mark { position: sticky; top: 120px; width: min(100%, 430px); aspect-ratio: 1; margin: 0; border: 1px solid color-mix(in srgb, var(--primary) 25%, #111827); border-radius: 28px; background: #000; overflow: hidden; box-shadow: 0 28px 70px rgba(0,0,0,.32), 0 0 55px color-mix(in srgb, var(--primary) 11%, transparent); }
.page-aep-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-aep-content > p:not(.eyebrow) { max-width: 680px; font-size: 1.05rem; }
.page-aep-content .aep-stages { margin-top: 36px; }
.aep-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; align-items: start; }
.aep-grid > div:first-child { position: sticky; top: 130px; }
.aep-grid > div:first-child > p:last-child { font-size: 1.05rem; }
.aep-stages { border-top: 1px solid var(--border); }
.aep-stage { padding: 28px 0; border-bottom: 1px solid var(--border); }
.aep-stage h3 { margin-bottom: 7px; }.aep-stage p { margin: 0; }
.comparison { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.comparison-row { display: grid; grid-template-columns: .85fr 1fr 1fr 1fr; background: var(--surface); }
.comparison-row + .comparison-row { border-top: 1px solid var(--border); }
.comparison-row > div { padding: 25px; border-left: 1px solid var(--border); color: var(--text-soft); font-size: .91rem; }
.comparison-row > div:first-child { border-left: 0; }
.comparison-title { display: flex; align-items: center; gap: 12px; color: var(--text) !important; font-weight: 650; }.comparison-title span { color: var(--primary); font-size: 1.4rem; }

/* CTA and footer */
.cta-panel { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; padding: clamp(42px, 7vw, 80px); border-radius: var(--radius-lg); color: #fff; background: #0d2547; background-image: radial-gradient(circle at 85% 0, rgba(115, 94, 255, .45), transparent 35%), linear-gradient(135deg, #0d2547, #081322); box-shadow: var(--shadow); }
.cta-panel h2 { max-width: 680px; }.cta-panel p:not(.eyebrow) { max-width: 660px; margin-bottom: 0; color: #aebed4; }.cta-panel .eyebrow { color: #54c8ff; }
.cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }.cta-panel .button.secondary { border-color: #526177; color: #fff; background: transparent; }
.site-footer { padding: 76px 0 28px; border-top: 1px solid var(--border); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; padding-bottom: 60px; }
.footer-grid > div:first-child p { max-width: 370px; margin-top: 20px; }
.footer-brand { display: block; width: min(100%, 300px); height: 62px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); border-radius: 12px; background: #000; overflow: hidden; box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 8%, transparent); }
.footer-lockup { display: block; width: 100%; height: 100%; object-fit: contain; }
.footer-grid h2 { margin: 3px 0 20px; color: var(--text-faint); font: 700 .67rem var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.footer-grid > div:not(:first-child) > a, .footer-link { display: flex; align-items: center; gap: 8px; width: max-content; margin: 11px 0; color: var(--text-soft); font-size: .9rem; }
.footer-grid a:hover { color: var(--primary); }.footer-link.is-disabled { cursor: default; }.footer-link small { padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; font: .55rem var(--mono); text-transform: uppercase; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 25px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: .76rem; }

/* Progressive reveal: content stays visible without JavaScript. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .desktop-nav { gap: 18px; }.desktop-nav a { font-size: .82rem; }.wordmark { font-size: .82rem; }.header-brand { width: 190px; }
  .hero-grid { grid-template-columns: 1fr .72fr; gap: 35px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-group { grid-template-columns: 1fr; gap: 28px; }.group-cards { grid-template-columns: repeat(3, 1fr); }
  .comparison-row { grid-template-columns: 1fr 1fr; }.comparison-row > div:nth-child(3) { border-left: 0; }.comparison-row > div:nth-child(n+3) { border-top: 1px solid var(--border); }
}

@media (max-width: 780px) {
  .container { width: min(calc(100% - 32px), var(--max)); }
  h1 { font-size: clamp(2.75rem, 13vw, 4.4rem); }
  .desktop-nav { display: none; }.menu-button { display: grid; }.wordmark { font-size: .76rem; }.nav-shell { min-height: 68px; }
  .hero { min-height: 0; padding: 78px 0 95px; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { order: 0; }.hero-visual { order: 1; width: min(86vw, 460px); margin-inline: auto; }.hero-mark { width: 70%; height: 70%; }
  .section-heading.split, .local-grid, .architecture-grid, .architecture-detail, .extension-panel, .aep-grid, .extension-aep-intro, .cta-panel { grid-template-columns: 1fr; }
  .section-heading.split { gap: 12px; }.number-grid { grid-template-columns: 1fr; }.number-card, .number-card + .number-card { padding: 28px 0; border-left: 0; }.number-card + .number-card { border-top: 1px solid var(--border); }
  .local-copy, .aep-grid > div:first-child, .page-aep-mark { position: static; }.local-grid, .architecture-grid, .architecture-detail { gap: 55px; }
  .protocol-mark, .page-aep-mark { width: min(76vw, 380px); margin-inline: auto; }.extension-panel { padding: 38px 24px; }
  .page-hero { padding-top: 85px; }.group-cards, .plane-grid { grid-template-columns: 1fr; }.mini-card { min-height: 0; }.mini-card .icon-box { margin-bottom: 30px; }.plane-card { min-height: 310px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 25px; }.footer-bottom { flex-direction: column; }
}

@media (max-width: 580px) {
  .section { padding: 80px 0; }.nav-shell { gap: 6px; }.nav-actions { flex: none; gap: 4px; }.language-link { min-width: 0; padding: 6px 7px; font-size: .6rem; }.icon-button { width: 32px; height: 32px; }.brand .wordmark { display: none; }.header-brand { width: min(34vw, 140px); height: 44px; padding: 4px 6px; }
  .feature-grid, .preview-grid, .boundary-grid { grid-template-columns: 1fr; }.feature-card { min-height: 245px; }.feature-card .icon-box { margin-bottom: 32px; }
  .node-2 { margin-inline: 2%; }.node-3 { margin-inline: 4%; }.node-4 { margin-inline: 6%; }.node-5 { margin-inline: 8%; }.architecture-graphic { padding: 16px; }.arch-node { padding-inline: 13px; }.arch-node strong { font-size: .62rem; letter-spacing: .06em; }
  .group-cards { grid-template-columns: 1fr; }.comparison-row { grid-template-columns: 1fr; }.comparison-row > div { border-left: 0; border-top: 1px solid var(--border); }.comparison-row > div:first-child { border-top: 0; }.comparison-row > div:nth-child(3) { border-top: 1px solid var(--border); }
  .cta-actions { width: 100%; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid > div:first-child { grid-column: 1 / -1; }.footer-brand { width: min(100%, 270px); height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* 2026 showcase direction — luminous control-plane identity */
body { background-image: radial-gradient(circle at 82% 5%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 28%); }
.site-header { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary) 8%, transparent); }
.brand-mark { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 25%, transparent)); }
.button { border-radius: 999px; padding-inline: 26px; }
.button.primary { background: linear-gradient(110deg, #168cff, #5d66ff 58%, #9c4dff); box-shadow: 0 14px 42px rgba(58, 103, 255, .3); }
.button.primary:hover { background: linear-gradient(110deg, #3ba4ff, #766fff 58%, #ae65ff); }
.github-button { gap: 10px; }
.github-button span { color: var(--primary); }

.hero { min-height: min(900px, calc(100vh - 76px)); padding-block: clamp(78px, 10vw, 130px); overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 760px; height: 760px; right: -290px; top: -330px; border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 50%; box-shadow: 0 0 160px color-mix(in srgb, var(--primary) 10%, transparent); }
.hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .68fr); gap: clamp(48px, 6vw, 94px); }
.hero-copy h1 { font-size: clamp(4.2rem, 7.4vw, 7.6rem); line-height: .91; letter-spacing: -.065em; }
.hero-copy h1 em { background: linear-gradient(90deg, #12c8ff, #6875ff 55%, #bd4cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy .lede { max-width: 760px; }
.hero-visual { isolation: isolate; width: min(100%, 440px); justify-self: center; }
.hero-visual::before, .hero-visual::after { content: none; }
.hero-image-shell { position: relative; z-index: 1; width: 86%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 0 76px rgba(28, 98, 255, .24); }
.hero-image-shell img { display: block; width: 100%; height: 100%; object-fit: contain; }
.orbit-label { z-index: 2; border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); backdrop-filter: blur(12px); }
.orbit-label-a { top: 4%; right: 1%; }.orbit-label-b { left: 0; bottom: 29%; }.orbit-label-c { right: 1%; bottom: 4%; }

.signal-strip { border-block: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 74%, transparent); backdrop-filter: blur(18px); }
.signal-grid { min-height: 78px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.signal-grid > span { display: flex; align-items: center; gap: 13px; padding: 18px 24px; color: var(--text-soft); font-size: .76rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.signal-grid > span + span { border-left: 1px solid var(--border); }
.signal-grid .runtime-signal { color: var(--text); background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); }

.experience-section { position: relative; overflow: hidden; border-top: 1px solid var(--border); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 3%, var(--bg)), var(--bg) 48%, color-mix(in srgb, var(--accent) 3%, var(--bg))); }
.experience-section::before { content: "WORKPLACE"; position: absolute; right: -1vw; bottom: -4vw; color: color-mix(in srgb, var(--primary) 3.2%, transparent); font-size: clamp(8rem, 20vw, 21rem); font-weight: 800; line-height: 1; letter-spacing: -.07em; pointer-events: none; }
.experience-grid { position: relative; display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 84px); align-items: stretch; }
.entry-card { position: relative; min-height: 390px; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 46px); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); border-radius: var(--radius-lg); background: radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface)); box-shadow: var(--shadow); overflow: hidden; }
.entry-card::after { content: ""; position: absolute; width: 290px; height: 290px; right: -145px; bottom: -155px; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 50%; box-shadow: 0 0 60px color-mix(in srgb, var(--primary) 10%, transparent); }
.entry-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 25px; }
.entry-card-head .icon-box { width: 48px; height: 48px; margin: 0; color: var(--cyan); }
.entry-card-head small { color: var(--primary); font: 700 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.entry-card h3 { max-width: 420px; margin: 0 0 13px; color: var(--text); font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -.045em; }
.entry-card > p { max-width: 490px; margin: 0; font-size: .93rem; line-height: 1.7; }
.entry-presentations { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.entry-presentations span { padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 999px; color: var(--text-soft); background: color-mix(in srgb, var(--primary) 6%, transparent); font: 650 .59rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.user-journey { min-width: 0; padding: 10px 0; }
.journey-label { margin: 0 0 16px; color: var(--text-faint); font: 700 .61rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.journey-stage { display: grid; grid-template-columns: 50px 1fr; gap: 18px; align-items: start; padding: 21px 22px; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 12px 36px color-mix(in srgb, var(--primary) 4%, transparent); }
.journey-stage .icon-box { width: 48px; height: 48px; margin: 0; color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface-2)); }
.journey-stage:last-of-type .icon-box { color: var(--accent); }
.journey-stage h3 { margin: 1px 0 7px; color: var(--text); font-size: 1.02rem; }
.journey-stage p { margin: 0; font-size: .78rem; line-height: 1.6; }
.journey-connector { height: 30px; display: grid; grid-template-columns: 25px 25px 1fr; align-items: center; color: var(--primary); }
.journey-connector i { grid-column: 2; justify-self: center; width: 1px; height: 30px; background: linear-gradient(var(--primary), var(--accent)); }
.journey-connector span { grid-column: 3; display: none; }
.entry-workplace-link { position: relative; z-index: 1; width: max-content; margin-top: 25px; }

/* Workplace page */
.workplace-overview { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 45%, transparent); }
.workplace-overview-grid { display: grid; gap: clamp(42px, 7vw, 88px); }
.workplace-overview-copy { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(35px, 7vw, 100px); align-items: end; }
.workplace-overview-copy .eyebrow { grid-column: 1 / -1; margin-bottom: -12px; }
.workplace-overview-copy h2, .workplace-overview-copy p { margin-bottom: 0; }
.workplace-product-frame { min-height: 560px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 220px; border: 1px solid #263249; border-radius: 24px; color: #edf3ff; background: #080d16; box-shadow: 0 38px 100px rgba(0,0,0,.35), 0 0 70px color-mix(in srgb, var(--primary) 10%, transparent); overflow: hidden; }
.workplace-product-sidebar { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 16px 10px; border-right: 1px solid #1e293d; background: #070b12; }
.workplace-product-logo { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #10c8ed, #4c63ff 58%, #a34cf0); font-weight: 800; }
.workplace-product-sidebar i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #63708a; }
.workplace-product-sidebar i.is-active { color: #79bcff; background: #132238; box-shadow: inset 0 0 0 1px #29486d; }
.workplace-product-sidebar .icon { width: 17px; height: 17px; }
.workplace-product-main { min-width: 0; background: radial-gradient(circle at 50% 100%, rgba(69,75,255,.2), transparent 42%); }
.workplace-product-top { height: 58px; display: flex; align-items: center; gap: 16px; padding: 0 22px; border-bottom: 1px solid #1e293d; }
.workplace-product-top span { color: #5fa9ff; font: 700 .56rem/1 var(--mono); letter-spacing: .13em; }
.workplace-product-top b { color: #aeb9cc; font-size: .72rem; }
.workplace-product-top i { width: 28px; height: 6px; margin-left: auto; border-radius: 5px; background: #263149; }
.workplace-product-content { width: min(88%, 690px); margin: 0 auto; padding: 48px 0 38px; }
.workplace-product-primary { padding: clamp(24px, 4vw, 40px); border: 1px solid #2a3852; border-radius: 18px; background: linear-gradient(145deg, rgba(24,38,63,.92), rgba(13,19,32,.96)); box-shadow: 0 24px 55px rgba(0,0,0,.28); }
.workplace-product-primary > span, .workplace-product-shortcuts > small, .workplace-product-rail > small { color: #6eaef9; font: 700 .55rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.workplace-product-primary h3 { max-width: 510px; margin: 14px 0 23px; color: #f5f7ff; font-size: clamp(1.35rem, 3vw, 2.35rem); }
.workplace-product-composer { min-height: 92px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; padding: 17px; border: 1px solid #34435f; border-radius: 13px; background: rgba(7,11,19,.76); }
.workplace-product-composer p { margin: 0; color: #a9b5ca; font-size: .76rem; line-height: 1.55; }
.workplace-product-composer b, .conversation-composer b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #178eff, #7758ff); }
.workplace-product-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.workplace-product-suggestions i { padding: 6px 9px; border: 1px solid #293851; border-radius: 999px; color: #8190aa; font: 500 .52rem/1 var(--mono); font-style: normal; }
.workplace-product-shortcuts { margin-top: 22px; }
.workplace-product-shortcuts > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.workplace-product-shortcuts span { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #202c40; border-radius: 10px; color: #8ba0bf; background: rgba(14,21,34,.72); }
.workplace-product-shortcuts .icon { width: 17px; height: 17px; color: #52a8ff; }
.workplace-product-shortcuts b { color: #c4ccda; font-size: .68rem; }
.workplace-product-rail { padding: 72px 16px 20px; border-left: 1px solid #1e293d; background: #0a0f19; }
.workplace-product-notice { display: flex; align-items: center; gap: 9px; margin-bottom: 34px; padding: 12px; border: 1px solid #25403e; border-radius: 10px; color: #9ed9ca; background: rgba(29,74,62,.2); font-size: .66rem; }
.workplace-product-notice i { width: 7px; height: 7px; border-radius: 50%; background: #43d6ae; box-shadow: 0 0 10px #43d6ae; }
.workplace-product-task { display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; margin-top: 12px; padding: 12px; border: 1px solid #202c40; border-radius: 11px; background: #0f1624; }
.workplace-product-task > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #66adff; background: #16243a; }
.workplace-product-task .icon { width: 15px; height: 15px; }
.workplace-product-task div { min-width: 0; }.workplace-product-task b { display: block; overflow: hidden; color: #d8deeb; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }.workplace-product-task small { display: block; color: #48cda7; font-size: .53rem; }.workplace-product-task > i { color: #48cda7; font-style: normal; }

.workplace-entry-section { position: relative; overflow: hidden; }
.workplace-entry-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(28px, 6vw, 80px); align-items: stretch; }
.workplace-entry-types { display: grid; gap: 12px; }
.workplace-entry-type { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.workplace-entry-type .icon-box { width: 52px; height: 52px; margin: 0; color: var(--primary); }
.workplace-entry-type h3 { margin: 2px 0 7px; }.workplace-entry-type p { margin: 0; font-size: .84rem; }
.workplace-role-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 48px); border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border)); border-radius: var(--radius-lg); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 43%), var(--surface); }
.workplace-role-panel > small { color: var(--primary); font: 700 .61rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.workplace-role-panel > div { display: grid; gap: 10px; margin: 28px 0; }
.workplace-role-panel span { padding: 15px 18px; border: 1px solid var(--border); border-radius: 11px; color: var(--text-soft); background: var(--bg); font-weight: 650; }
.workplace-role-panel span.is-primary { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--text); background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 11%, var(--surface)), color-mix(in srgb, var(--accent) 7%, var(--surface))); box-shadow: 0 13px 32px color-mix(in srgb, var(--primary) 9%, transparent); }
.workplace-role-panel p { margin: 0; font-size: .82rem; }

.workplace-dashboard-section { border-top: 1px solid var(--border); background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 3%, var(--bg)), var(--bg)); }
.workplace-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.workplace-dashboard-card { min-height: 270px; padding: 27px; border: 1px solid color-mix(in srgb, var(--cyan) 19%, var(--border)); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 5%, var(--surface)), var(--surface)); }
.workplace-dashboard-card .icon-box { margin-bottom: 44px; }
.workplace-dashboard-card h3 { margin-bottom: 10px; }
.workplace-dashboard-card p { margin: 0; font-size: .82rem; }

.workplace-journey-section { border-block: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 58%, transparent); }
.workplace-journey-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.workplace-journey-card { position: relative; min-height: 285px; padding: 25px 22px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); }
.workplace-journey-card:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; right: -19px; top: 39px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--primary); background: var(--bg); font-size: .72rem; }
.workplace-journey-card .icon-box { width: 46px; height: 46px; margin-bottom: 36px; }
.workplace-journey-card h3 { margin-bottom: 10px; }.workplace-journey-card p { margin: 0; font-size: .78rem; line-height: 1.55; }

.workplace-conversation-section { overflow: hidden; }
.workplace-conversation-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(45px, 8vw, 110px); align-items: center; }
.workplace-conversation-window { border: 1px solid #28364d; border-radius: 22px; color: #edf3ff; background: radial-gradient(circle at 50% 100%, rgba(75,67,255,.19), transparent 44%), #090e17; box-shadow: 0 32px 80px rgba(0,0,0,.3); overflow: hidden; }
.conversation-window-head { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px; border-bottom: 1px solid #202b3e; }
.conversation-window-head span { font-size: .75rem; font-weight: 700; }.conversation-window-head i { padding: 5px 9px; border-radius: 999px; color: #59d7b3; background: rgba(45,125,101,.18); font: 600 .55rem/1 var(--mono); font-style: normal; }
.conversation-messages { min-height: 390px; display: flex; flex-direction: column; gap: 18px; padding: 30px; }
.conversation-messages p { max-width: 82%; margin: 0; padding: 14px 16px; border-radius: 15px; font-size: .78rem; line-height: 1.55; }
.message-user { align-self: flex-end; color: #eef3ff; background: linear-gradient(135deg, #235ba1, #564ec4); }
.message-agent { align-self: flex-start; color: #aeb9cc; border: 1px solid #29364c; background: #111927; }.message-agent b { display: block; margin-bottom: 5px; color: #70b4ff; font-size: .64rem; }
.message-result { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 15px; border: 1px solid #295044; border-radius: 13px; background: rgba(25,79,63,.2); }
.message-result > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: #53dab3; background: rgba(44,139,110,.18); }.message-result .icon { width: 18px; height: 18px; }.message-result b { display: block; font-size: .75rem; }.message-result small { color: #8ecbb9; font-size: .6rem; }.message-result > i { color: #53dab3; font-style: normal; }
.conversation-composer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px; margin: 0 22px 22px; padding: 13px 14px; border: 1px solid #2b3850; border-radius: 12px; color: #71809a; background: #0c121e; font-size: .72rem; }
.workplace-conversation-copy > p:not(.eyebrow) { font-size: 1rem; }
.conversation-points { margin-top: 32px; border-top: 1px solid var(--border); }
.conversation-points > div { padding: 20px 0; border-bottom: 1px solid var(--border); }.conversation-points h3 { margin-bottom: 6px; font-size: .95rem; }.conversation-points p { margin: 0; font-size: .8rem; }

.workplace-capabilities-section { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 38%, transparent); }
.workplace-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.workplace-capability-card { min-height: 280px; padding: 28px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 4%, var(--surface)), var(--surface)); }
.workplace-capability-card .icon-box { margin-bottom: 46px; }.workplace-capability-card p { margin: 0; font-size: .84rem; }

.flow-modes-section { position: relative; overflow: hidden; border-block: 1px solid var(--border); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 4%, var(--surface)), var(--surface) 48%, color-mix(in srgb, var(--accent) 5%, var(--surface))); }
.flow-modes-section::before { content: "FLOW"; position: absolute; right: -1vw; bottom: -5vw; color: color-mix(in srgb, var(--primary) 3.5%, transparent); font-size: clamp(10rem, 24vw, 25rem); font-weight: 800; line-height: 1; letter-spacing: -.08em; pointer-events: none; }
.flow-modes-section .container { position: relative; }
.flow-family-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 15px; }
.flow-family { padding: clamp(24px, 3vw, 34px); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 22px 58px color-mix(in srgb, var(--primary) 5%, transparent); }
.flow-family-agents { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface)); }
.flow-family header { min-height: 142px; padding-bottom: 25px; }
.flow-family header > span { color: var(--primary); font: 700 .58rem/1 var(--mono); letter-spacing: .11em; }
.flow-family-agents header > span { color: var(--accent); }
.flow-family header h3 { max-width: 520px; margin: 13px 0 9px; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.flow-family header p { max-width: 560px; margin: 0; font-size: .82rem; line-height: 1.55; }
.flow-runtime-badge { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 15px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); border-radius: 999px; color: var(--text-soft); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); font: 700 .52rem/1.25 var(--mono); letter-spacing: .055em; }
.flow-runtime-badge i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.flow-runtime-badge b { color: var(--primary); font-size: .7rem; transition: transform .2s; }
.flow-runtime-badge:hover { border-color: var(--primary); color: var(--text); }.flow-runtime-badge:hover b { transform: translate(2px, -2px); }
.flow-mode-list { display: grid; gap: 8px; }
.flow-family-agents .flow-mode-list { grid-template-columns: 1fr 1fr; }
.flow-mode-card { min-height: 104px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 17px 16px 17px 18px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 42%, var(--surface)); }
.flow-mode-card h4 { margin: 0 0 6px; color: var(--text); font-size: .92rem; letter-spacing: -.02em; }
.flow-mode-card p { margin: 0; color: var(--text-faint); font-size: .68rem; line-height: 1.45; }
.flow-modes-note { margin: 18px 0 0; color: var(--text-faint); font-size: .72rem; }
.flow-modes-link { margin-top: 24px; }
.flow-modes-section.is-compact { padding-block: clamp(76px, 8vw, 110px); }
.flow-modes-section.is-compact .flow-family header { min-height: 118px; }
.flow-modes-section.is-compact .flow-mode-card { min-height: 70px; }
.flow-modes-section.is-compact .flow-mode-card p { display: none; }

.mode-topology { position: relative; width: 82px; height: 44px; display: block; flex: none; }
.mode-topology b { position: absolute; z-index: 2; width: 9px; height: 9px; display: none; border: 2px solid color-mix(in srgb, var(--primary) 70%, #fff); border-radius: 50%; background: var(--surface); box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 48%, transparent); }
.mode-topology i { position: absolute; z-index: 1; height: 1px; display: none; background: linear-gradient(90deg, var(--primary), var(--accent)); transform-origin: left center; }
.mode-topology.direct b:nth-of-type(1), .mode-topology.direct b:nth-of-type(2) { display: block; top: 18px; }.mode-topology.direct b:nth-of-type(1) { left: 3px; }.mode-topology.direct b:nth-of-type(2) { right: 3px; }.mode-topology.direct i:nth-of-type(1) { left: 12px; top: 22px; width: 58px; display: block; }
.mode-topology.routing b:nth-of-type(-n+4), .mode-topology.routing i:nth-of-type(-n+3) { display: block; }.mode-topology.routing b:nth-of-type(1) { left: 2px; top: 18px; }.mode-topology.routing b:nth-of-type(2) { left: 34px; top: 18px; background: var(--primary); }.mode-topology.routing b:nth-of-type(3) { right: 2px; top: 5px; }.mode-topology.routing b:nth-of-type(4) { right: 2px; bottom: 5px; }.mode-topology.routing i:nth-of-type(1) { left: 11px; top: 22px; width: 24px; }.mode-topology.routing i:nth-of-type(2) { left: 43px; top: 20px; width: 31px; transform: rotate(-22deg); }.mode-topology.routing i:nth-of-type(3) { left: 43px; top: 24px; width: 31px; transform: rotate(22deg); }
.mode-topology.workflow b, .mode-topology.workflow i { display: block; }.mode-topology.workflow b:nth-of-type(1) { left: 1px; top: 18px; }.mode-topology.workflow b:nth-of-type(2) { left: 24px; top: 18px; }.mode-topology.workflow b:nth-of-type(3) { left: 47px; top: 4px; }.mode-topology.workflow b:nth-of-type(4) { left: 47px; bottom: 4px; }.mode-topology.workflow b:nth-of-type(5) { right: 1px; top: 18px; }.mode-topology.workflow i:nth-of-type(1) { left: 10px; top: 22px; width: 15px; }.mode-topology.workflow i:nth-of-type(2) { left: 33px; top: 20px; width: 18px; transform: rotate(-35deg); }.mode-topology.workflow i:nth-of-type(3) { left: 33px; top: 24px; width: 18px; transform: rotate(35deg); }.mode-topology.workflow i:nth-of-type(4) { left: 56px; top: 9px; width: 20px; transform: rotate(32deg); }
.mode-topology.sequential b:nth-of-type(-n+4), .mode-topology.sequential i:nth-of-type(-n+3) { display: block; top: 18px; }.mode-topology.sequential b:nth-of-type(1) { left: 1px; }.mode-topology.sequential b:nth-of-type(2) { left: 24px; }.mode-topology.sequential b:nth-of-type(3) { left: 47px; }.mode-topology.sequential b:nth-of-type(4) { right: 1px; }.mode-topology.sequential i:nth-of-type(1) { left: 10px; top: 22px; width: 15px; }.mode-topology.sequential i:nth-of-type(2) { left: 33px; top: 22px; width: 15px; }.mode-topology.sequential i:nth-of-type(3) { left: 56px; top: 22px; width: 16px; }
.mode-topology.concurrent b, .mode-topology.concurrent i { display: block; }.mode-topology.concurrent b:nth-of-type(1) { left: 1px; top: 18px; }.mode-topology.concurrent b:nth-of-type(2) { left: 35px; top: 4px; }.mode-topology.concurrent b:nth-of-type(3) { left: 35px; bottom: 4px; }.mode-topology.concurrent b:nth-of-type(4) { right: 1px; top: 18px; }.mode-topology.concurrent b:nth-of-type(5) { display: none; }.mode-topology.concurrent i:nth-of-type(1) { left: 10px; top: 20px; width: 30px; transform: rotate(-23deg); }.mode-topology.concurrent i:nth-of-type(2) { left: 10px; top: 24px; width: 30px; transform: rotate(23deg); }.mode-topology.concurrent i:nth-of-type(3) { left: 44px; top: 9px; width: 31px; transform: rotate(23deg); }.mode-topology.concurrent i:nth-of-type(4) { left: 44px; top: 35px; width: 31px; transform: rotate(-23deg); }
.mode-topology.handoff b:nth-of-type(-n+4), .mode-topology.handoff i:nth-of-type(-n+3) { display: block; }.mode-topology.handoff b:nth-of-type(1) { left: 1px; bottom: 3px; }.mode-topology.handoff b:nth-of-type(2) { left: 24px; top: 22px; }.mode-topology.handoff b:nth-of-type(3) { left: 47px; top: 11px; }.mode-topology.handoff b:nth-of-type(4) { right: 1px; top: 1px; }.mode-topology.handoff i:nth-of-type(1) { left: 10px; top: 37px; width: 18px; transform: rotate(-27deg); }.mode-topology.handoff i:nth-of-type(2) { left: 33px; top: 26px; width: 18px; transform: rotate(-26deg); }.mode-topology.handoff i:nth-of-type(3) { left: 56px; top: 15px; width: 18px; transform: rotate(-25deg); }
.mode-topology.group-chat::before, .mode-topology.magentic::before { content: ""; position: absolute; inset: 3px 21px; border: 1px dashed color-mix(in srgb, var(--accent) 48%, transparent); border-radius: 50%; }.mode-topology.group-chat b, .mode-topology.magentic b { display: block; }.mode-topology.group-chat b:nth-of-type(1), .mode-topology.magentic b:nth-of-type(1) { left: 36px; top: 0; }.mode-topology.group-chat b:nth-of-type(2), .mode-topology.magentic b:nth-of-type(2) { right: 16px; top: 18px; }.mode-topology.group-chat b:nth-of-type(3), .mode-topology.magentic b:nth-of-type(3) { left: 36px; bottom: 0; }.mode-topology.group-chat b:nth-of-type(4), .mode-topology.magentic b:nth-of-type(4) { left: 16px; top: 18px; }.mode-topology.group-chat b:nth-of-type(5) { display: none; }.mode-topology.magentic b:nth-of-type(5) { left: 36px; top: 18px; background: linear-gradient(145deg, var(--primary), var(--accent)); border-color: #fff; }

.runtime-section { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 54%, transparent); }
.runtime-section::before { content: "MAF"; position: absolute; right: -1vw; top: 50%; transform: translateY(-52%); color: color-mix(in srgb, var(--primary) 4%, transparent); font-size: clamp(12rem, 28vw, 30rem); font-weight: 800; line-height: 1; letter-spacing: -.1em; pointer-events: none; }
.runtime-grid { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(50px, 8vw, 120px); align-items: center; }
.runtime-copy > p:not(.eyebrow) { max-width: 600px; font-size: 1.05rem; }
.microsoft-stack { max-width: 610px; margin-top: 34px; }
.microsoft-stack > span { display: block; margin-bottom: 10px; color: var(--text-faint); font: 700 .61rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.microsoft-stack-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 9px; }
.microsoft-stack-grid a { min-height: 142px; display: flex; flex-direction: column; padding: 18px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface)); transition: transform .2s, border-color .2s, box-shadow .2s; }
.microsoft-stack-grid a:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 14px 35px color-mix(in srgb, var(--primary) 9%, transparent); }
.microsoft-stack-grid small { color: var(--primary); font: 700 .55rem/1 var(--mono); letter-spacing: .09em; }
.microsoft-stack-grid strong { margin-top: 13px; color: var(--text); font-size: 1.05rem; line-height: 1.15; letter-spacing: -.025em; }
.microsoft-stack-grid a:first-child strong { font-size: 1.55rem; }
.microsoft-stack-grid em { margin-top: 7px; color: var(--text-soft); font-size: .7rem; line-height: 1.4; font-style: normal; }
.microsoft-stack-grid b { margin-top: auto; padding-top: 12px; color: var(--primary); font: 650 .58rem/1 var(--mono); }
.runtime-current { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: center; max-width: 540px; margin-top: 34px; padding: 18px 62px 18px 20px; border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border)); border-radius: 13px; background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), var(--surface)); overflow: hidden; }
.runtime-current > span { grid-column: 1; color: var(--text-faint); font: 600 .61rem/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.runtime-current strong { color: var(--text); font-size: .92rem; }
.runtime-doc-link { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: max-content; max-width: 100%; }
.runtime-doc-link > span { color: var(--primary); font: 600 .62rem/1.4 var(--mono); }
.runtime-doc-link i { font-style: normal; transition: transform .2s; }
.runtime-doc-link:hover strong { color: var(--primary); }
.runtime-doc-link:hover i { display: inline-block; transform: translate(2px, -2px); }
.runtime-current small { position: absolute; right: 0; top: 0; bottom: 0; width: 54px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #138cff, #605bff 60%, #9e49f3); font: 750 .75rem/1 var(--mono); letter-spacing: .06em; }
.runtime-diagram { padding: clamp(22px, 4vw, 38px); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 58%), var(--bg); box-shadow: var(--shadow); }
.runtime-plane-card, .maf-card { position: relative; min-height: 126px; display: flex; flex-direction: column; justify-content: center; padding: 24px 28px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); overflow: hidden; }
.runtime-plane-card::after, .maf-card::after { content: ""; position: absolute; width: 170px; height: 170px; right: -80px; top: -95px; border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent); border-radius: 50%; box-shadow: 0 0 45px color-mix(in srgb, var(--primary) 13%, transparent); }
.runtime-plane-card > span, .maf-card > span { margin-bottom: 7px; color: var(--primary); font: 700 .58rem/1 var(--mono); letter-spacing: .14em; }
.runtime-plane-card > strong, .maf-card > strong { color: var(--text); font-size: clamp(1.25rem, 2.3vw, 1.9rem); letter-spacing: -.04em; }
.runtime-plane-card > small, .maf-card > small { margin-top: 8px; color: var(--text-faint); font: 500 .63rem/1.4 var(--mono); }
.maf-card { background: linear-gradient(125deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface))); }
.maf-card > span { color: var(--cyan); }
.runtime-bridge { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--text-faint); font: 600 .52rem/1 var(--mono); letter-spacing: .11em; }
.runtime-bridge i { height: 1px; background: linear-gradient(90deg, transparent, var(--primary)); }
.runtime-bridge i:last-child { background: linear-gradient(90deg, var(--accent), transparent); }
.runtime-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.runtime-points > div { padding: 13px 10px; border-top: 1px solid var(--border); }
.runtime-points p { margin: 0; color: var(--text-faint); font-size: .7rem; line-height: 1.45; }
.runtime-points p strong { display: block; margin-bottom: 3px; color: var(--text); font-size: .76rem; }

.provider-section { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.provider-section::before { content: "MODELS"; position: absolute; left: -1vw; bottom: -7vw; color: color-mix(in srgb, var(--primary) 3.5%, transparent); font-size: clamp(9rem, 22vw, 23rem); font-weight: 800; line-height: 1; letter-spacing: -.08em; pointer-events: none; }
.provider-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 8vw, 115px); align-items: center; }
.provider-copy > p:not(.eyebrow):not(.provider-future) { max-width: 610px; font-size: 1.04rem; }
.provider-list { max-width: 650px; display: grid; gap: 10px; margin-top: 30px; }
.provider-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: center; padding: 19px 20px; border: 1px solid color-mix(in srgb, var(--cyan) 24%, var(--border)); border-radius: 15px; background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 6%, var(--surface)), var(--surface)); box-shadow: 0 14px 38px color-mix(in srgb, var(--primary) 4%, transparent); }
.provider-card h3 { margin: 0 0 6px; color: var(--text); font-size: 1.12rem; }
.provider-card p { margin: 0; font-size: .77rem; line-height: 1.55; }
.provider-card small { align-self: start; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 999px; color: var(--primary); font: 700 .52rem/1 var(--mono); letter-spacing: .08em; }
.provider-current { max-width: 610px; margin-top: 30px; padding: 22px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--border)); border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 7%, var(--surface)), var(--surface)); box-shadow: 0 18px 50px color-mix(in srgb, var(--primary) 6%, transparent); }
.provider-current-head { display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; align-items: center; }
.provider-current-head > span { color: var(--cyan); font: 700 .61rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.provider-current-head strong { grid-column: 1; color: var(--text); font-size: 1.55rem; letter-spacing: -.04em; }
.provider-current-head i { grid-column: 2; grid-row: 1 / 3; color: #38d6aa; font-style: normal; font-size: .7rem; filter: drop-shadow(0 0 7px rgba(56,214,170,.8)); }
.provider-current p { margin: 15px 0; font-size: .87rem; }
.provider-current small { color: var(--text-faint); font: 650 .58rem/1 var(--mono); letter-spacing: .09em; }
.provider-future { max-width: 600px; margin: 18px 0 0; color: var(--text-faint); font-size: .82rem; }
.provider-path { padding: 28px; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: var(--radius-lg); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 43%), var(--surface); box-shadow: var(--shadow); }
.provider-stage { min-height: 74px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 15px 18px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 52%, var(--surface)); }
.provider-stage:first-child { border-color: color-mix(in srgb, var(--cyan) 42%, var(--border)); background: linear-gradient(110deg, color-mix(in srgb, var(--cyan) 9%, var(--surface)), var(--surface)); }
.provider-stage strong { color: var(--text); font-size: .95rem; }.provider-stage small { color: var(--text-faint); font: 500 .65rem/1.35 var(--mono); }
.provider-connector { height: 30px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--primary); }.provider-connector i { grid-column: 2; width: 1px; height: 30px; background: linear-gradient(var(--primary), var(--accent)); }.provider-connector b { grid-column: 3; display: none; }

.governance-section { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 4%, var(--surface)), var(--surface) 48%, color-mix(in srgb, var(--accent) 4%, var(--surface))); }
.governance-section::before { content: "CONTROL"; position: absolute; right: -1vw; bottom: -4vw; color: color-mix(in srgb, var(--primary) 3.5%, transparent); font-size: clamp(8rem, 20vw, 21rem); font-weight: 800; line-height: 1; letter-spacing: -.07em; pointer-events: none; }
.governance-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.governance-card { min-height: 275px; padding: 27px; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 20px 55px color-mix(in srgb, var(--primary) 5%, transparent); }
.governance-card .icon-box { margin-bottom: 45px; }
.governance-card h3 { margin-bottom: 10px; }
.governance-card p { margin: 0; font-size: .82rem; }

.ecosystem-section { position: relative; overflow: hidden; background: #020306; color: #f5f7ff; border-block: 1px solid #151b2b; }
.ecosystem-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 75% 50%, rgba(49, 86, 255, .2), transparent 42%), radial-gradient(circle at 20% 20%, rgba(18, 201, 255, .08), transparent 28%); }
.ecosystem-grid { position: relative; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: clamp(46px, 6vw, 82px); }
.ecosystem-copy { position: relative; z-index: 2; }
.ecosystem-copy h2 { max-width: 580px; }
.ecosystem-copy > p:last-of-type { max-width: 570px; color: #aab5d0; font-size: 1.04rem; }
.ecosystem-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.ecosystem-tags span { padding: 7px 12px; border: 1px solid #24304a; border-radius: 999px; background: rgba(18, 26, 44, .72); color: #b9c7e3; font: 600 .65rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ecosystem-visual { position: relative; width: min(100%, 520px); margin: 0; justify-self: end; }
.ecosystem-visual::after { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(63, 151, 255, .16); border-radius: 50%; box-shadow: 0 0 120px rgba(47, 68, 255, .2); }
.ecosystem-visual img { position: relative; z-index: 1; display: block; width: 100%; height: auto; mix-blend-mode: screen; }

.preview-card { padding: 12px 12px 28px; border-color: color-mix(in srgb, var(--primary) 12%, var(--border)); box-shadow: 0 20px 55px color-mix(in srgb, var(--primary) 5%, transparent); }
.preview-window { aspect-ratio: 16 / 10; background: #070b13; border-color: #263148; }
.window-bar { color: #66738d; background: #0d121d; border-color: #202a3d; }
.window-bar small { margin-left: auto; font: 500 .56rem/1 var(--mono); letter-spacing: .05em; }
.product-shot { height: calc(100% - 30px); color: #eaf0ff; font-family: var(--mono); }
.console-shot { display: grid; grid-template-columns: 48px 1fr; }
.shot-sidebar { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 14px; border-right: 1px solid #1c2638; background: #090e17; }
.shot-logo { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: linear-gradient(145deg, #0fcbed, #465aff 60%, #a13ff2); font-weight: 800; }
.shot-sidebar i { width: 17px; height: 3px; border-radius: 2px; background: #26334a; }
.shot-sidebar i:nth-of-type(2) { background: #347cff; box-shadow: 0 0 10px #347cff; }
.shot-content { padding: clamp(14px, 3vw, 28px); background: radial-gradient(circle at 100% 0, rgba(50, 82, 192, .18), transparent 38%); }
.shot-topline { display: flex; justify-content: space-between; color: #73809b; font-size: .55rem; text-transform: uppercase; letter-spacing: .08em; }
.shot-topline b { color: #36d3ae; font-weight: 500; }
.shot-title { margin: 16px 0; font-family: var(--font); font-size: clamp(1rem, 2vw, 1.65rem); font-weight: 650; letter-spacing: -.03em; }
.shot-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.shot-metrics span { padding: 10px; border: 1px solid #202c42; border-radius: 7px; color: #78849b; font-size: .5rem; text-transform: uppercase; }
.shot-metrics b { display: block; margin-bottom: 2px; color: #eaf0ff; font-size: .88rem; }
.shot-rows { margin-top: 11px; }
.shot-rows > span { display: grid; grid-template-columns: 8px 1fr auto; gap: 7px; align-items: center; padding: 7px 8px; border-top: 1px solid #1d2739; color: #aab5cb; font-size: .52rem; }
.shot-rows i { width: 5px; height: 5px; border-radius: 50%; background: #3d9cff; box-shadow: 0 0 7px #3d9cff; }
.shot-rows b { color: #36d3ae; font-size: .47rem; font-weight: 500; }
.workplace-shot { display: grid; grid-template-rows: 42px 1fr; background: radial-gradient(circle at 50% 105%, rgba(79, 68, 255, .3), transparent 45%), #080c14; }
.workplace-head { display: flex; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 1px solid #1d2739; font: 600 .58rem var(--font); }
.workplace-head .shot-logo { width: 22px; height: 22px; font-size: .65rem; }
.workplace-head i { width: 20px; height: 5px; margin-left: auto; border-radius: 4px; background: #242f44; }
.workplace-body { width: min(86%, 440px); margin: auto; padding: 20px 0; }
.workplace-body > p { margin-bottom: 13px; color: #eff3ff; font: 650 clamp(.9rem, 2vw, 1.35rem)/1.2 var(--font); letter-spacing: -.03em; }
.workplace-prompt { min-height: 68px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; padding: 12px; border: 1px solid #2b3852; border-radius: 10px; color: #9ba8c0; background: rgba(15, 22, 35, .88); font-size: .52rem; line-height: 1.5; }
.workplace-prompt span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #168cff, #7d52ff); font: 700 .8rem/1 var(--font); }
.workplace-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.workplace-flow span { padding: 7px; border: 1px solid #1e2a3e; border-radius: 6px; color: #71809b; font-size: .46rem; }
.preview-card-copy { padding: 24px 10px 0; }
.preview-card-copy h3, .preview-card-copy p { margin-inline: 0; }
.preview-card-copy h3 { margin-top: 0; }.preview-card-copy p { margin-bottom: 0; }

/* Packs gallery */
.pack-gallery-section { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 42%, transparent); }
.pack-gallery-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 8vw, 110px); align-items: end; margin-bottom: 48px; }
.pack-gallery-heading h2 { max-width: 690px; margin-bottom: 0; }
.pack-gallery-heading > div:last-child > p { max-width: 530px; margin-bottom: 18px; }
.catalog-source { display: inline-flex; align-items: center; gap: 9px; color: var(--text-faint); font: 650 .62rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.catalog-source i { width: 7px; height: 7px; border-radius: 50%; background: #3ad6ad; box-shadow: 0 0 10px rgba(58, 214, 173, .65); }
.pack-toolbar { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
.pack-toolbar button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); background: var(--surface); cursor: pointer; font-size: .78rem; font-weight: 650; transition: border-color .2s, color .2s, background .2s; }
.pack-toolbar button span { min-width: 20px; padding: 3px 6px; border-radius: 999px; color: var(--text-faint); background: var(--surface-2); font: 600 .58rem/1 var(--mono); }
.pack-toolbar button:hover { border-color: var(--primary); color: var(--text); }
.pack-toolbar button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--primary) 62%, var(--border)); color: #fff; background: linear-gradient(110deg, #168cff, #655eff 62%, #9552ef); box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 22%, transparent); }
.pack-toolbar button[aria-pressed="true"] span { color: #fff; background: rgba(255,255,255,.18); }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pack-card { position: relative; min-height: 330px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), var(--surface) 46%); overflow: hidden; box-shadow: 0 16px 45px color-mix(in srgb, var(--primary) 4%, transparent); }
.pack-card::after { content: ""; position: absolute; width: 170px; height: 170px; right: -100px; top: -100px; border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 50%; box-shadow: 0 0 42px color-mix(in srgb, var(--primary) 9%, transparent); }
.pack-card[hidden] { display: none; }
.pack-card-top { display: flex; align-items: center; justify-content: flex-end; min-height: 26px; }
.pack-audience { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 999px; color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); font: 700 .56rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.pack-audience.professional { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pack-topology { position: relative; flex: none; width: 150px; height: 92px; margin: 0 -75px -46px 0; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 16px; background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 56%), color-mix(in srgb, var(--surface-2) 58%, transparent); box-shadow: inset 0 0 30px color-mix(in srgb, var(--primary) 7%, transparent); transform: scale(.5); transform-origin: left top; }
.pack-topology b { position: absolute; z-index: 2; width: 12px; height: 12px; border: 2px solid color-mix(in srgb, var(--primary) 75%, #fff); border-radius: 50%; background: var(--surface); box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 52%, transparent); }
.pack-topology b:last-of-type { border-color: color-mix(in srgb, var(--accent) 78%, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); }
.pack-topology i { position: absolute; z-index: 1; height: 1px; transform-origin: left center; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: .72; }
.pack-topology.sequential b:nth-of-type(1) { left: 18px; top: 40px; }.pack-topology.sequential b:nth-of-type(2) { left: 56px; top: 40px; }.pack-topology.sequential b:nth-of-type(3) { left: 94px; top: 40px; }.pack-topology.sequential b:nth-of-type(4) { left: 130px; top: 40px; }
.pack-topology.sequential b:nth-of-type(5) { display: none; }.pack-topology.sequential i { top: 46px; width: 38px; }.pack-topology.sequential i:nth-of-type(1) { left: 29px; }.pack-topology.sequential i:nth-of-type(2) { left: 67px; }.pack-topology.sequential i:nth-of-type(3) { left: 105px; }.pack-topology.sequential i:nth-of-type(4) { display: none; }
.pack-topology.concurrent b:nth-of-type(1) { left: 18px; top: 40px; }.pack-topology.concurrent b:nth-of-type(2) { left: 118px; top: 14px; }.pack-topology.concurrent b:nth-of-type(3) { left: 118px; top: 40px; }.pack-topology.concurrent b:nth-of-type(4) { left: 118px; top: 66px; }.pack-topology.concurrent b:nth-of-type(5) { display: none; }
.pack-topology.concurrent i { left: 29px; width: 92px; }.pack-topology.concurrent i:nth-of-type(1) { top: 45px; transform: rotate(-15deg); }.pack-topology.concurrent i:nth-of-type(2) { top: 46px; }.pack-topology.concurrent i:nth-of-type(3) { top: 47px; transform: rotate(15deg); }.pack-topology.concurrent i:nth-of-type(4) { display: none; }
.pack-topology.handoff b:nth-of-type(1) { left: 17px; top: 61px; }.pack-topology.handoff b:nth-of-type(2) { left: 50px; top: 45px; }.pack-topology.handoff b:nth-of-type(3) { left: 83px; top: 29px; }.pack-topology.handoff b:nth-of-type(4) { left: 116px; top: 13px; }.pack-topology.handoff b:nth-of-type(5) { display: none; }
.pack-topology.handoff i { width: 38px; transform: rotate(-26deg); }.pack-topology.handoff i:nth-of-type(1) { left: 27px; top: 65px; }.pack-topology.handoff i:nth-of-type(2) { left: 60px; top: 49px; }.pack-topology.handoff i:nth-of-type(3) { left: 93px; top: 33px; }.pack-topology.handoff i:nth-of-type(4) { display: none; }
.pack-topology.group-chat::before { content: ""; position: absolute; inset: 16px 42px; border: 1px dashed color-mix(in srgb, var(--primary) 42%, transparent); border-radius: 50%; }.pack-topology.group-chat i { display: none; }
.pack-topology.group-chat b:nth-of-type(1) { left: 69px; top: 10px; }.pack-topology.group-chat b:nth-of-type(2) { left: 108px; top: 40px; }.pack-topology.group-chat b:nth-of-type(3) { left: 69px; top: 70px; }.pack-topology.group-chat b:nth-of-type(4) { left: 30px; top: 40px; }.pack-topology.group-chat b:nth-of-type(5) { left: 69px; top: 40px; }
.pack-topology.magentic::before { content: ""; position: absolute; inset: 13px 39px; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 50%; box-shadow: inset 0 0 18px color-mix(in srgb, var(--primary) 8%, transparent); }.pack-topology.magentic i { display: none; }
.pack-topology.magentic b:nth-of-type(1) { left: 69px; top: 8px; }.pack-topology.magentic b:nth-of-type(2) { left: 112px; top: 40px; }.pack-topology.magentic b:nth-of-type(3) { left: 69px; top: 72px; }.pack-topology.magentic b:nth-of-type(4) { left: 26px; top: 40px; }.pack-topology.magentic b:nth-of-type(5) { left: 66px; top: 37px; width: 18px; height: 18px; background: linear-gradient(145deg, var(--primary), var(--accent)); }
.pack-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; margin-top: auto; }
.pack-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pack-meta span { color: var(--text-faint); font: 600 .56rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.pack-meta span + span::before { content: "·"; margin-right: 6px; color: var(--border-strong); }
.pack-card h2 { margin: 18px 0 12px; font-size: 1.35rem; }
.pack-card p { margin-bottom: 25px; font-size: .88rem; line-height: 1.6; }
.pack-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text); font-size: .78rem; font-weight: 700; }
.pack-link span { color: var(--primary); transition: transform .2s; }
.pack-link:hover { color: var(--primary); }.pack-link:hover span { transform: translate(2px, -2px); }
.pack-repository { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 30px; padding: 24px 28px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 18px; background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), var(--surface)); }
.pack-repository div { display: flex; flex-direction: column; gap: 5px; }.pack-repository div span { color: var(--primary); font: 650 .58rem/1 var(--mono); letter-spacing: .1em; }.pack-repository strong { font-size: 1rem; }

.pack-authoring-section { position: relative; overflow: hidden; border-top: 1px solid var(--border); }
.pack-authoring-section::before { content: "PACKS"; position: absolute; right: -1vw; bottom: -4vw; color: color-mix(in srgb, var(--accent) 3.5%, transparent); font-size: clamp(9rem, 22vw, 23rem); font-weight: 800; line-height: 1; letter-spacing: -.08em; pointer-events: none; }
.pack-authoring-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pack-authoring-card { min-height: 275px; padding: 27px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface)); box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 4%, transparent); }
.pack-authoring-card .icon-box { margin-bottom: 44px; }
.pack-authoring-card h3 { margin-bottom: 10px; }
.pack-authoring-card p { margin: 0; font-size: .82rem; }

@media (max-width: 1000px) {
  .desktop-nav { gap: 18px; }.desktop-nav a { font-size: .8rem; }.header-brand { width: 190px; }
  .hero-grid { grid-template-columns: 1fr .72fr; }
  .hero-copy h1 { font-size: clamp(3.6rem, 7vw, 6rem); }
  .pack-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-visual { width: min(100%, 410px); }
  .ecosystem-grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .ecosystem-visual { width: min(100%, 460px); }
  .plane-grid { grid-template-columns: 1fr 1fr; }
  .workplace-product-frame { grid-template-columns: 52px minmax(0, 1fr); }.workplace-product-rail { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 22px 22px; border-top: 1px solid #1e293d; border-left: 0; }.workplace-product-rail > small { display: none; }.workplace-product-notice { margin: 0; }.workplace-product-task { margin: 0; }
  .workplace-journey-grid { grid-template-columns: repeat(3, 1fr); }.workplace-journey-card:nth-child(3)::after { display: none; }
}

@media (max-width: 780px) {
  .alpha-banner p { flex-wrap: wrap; gap: 5px 12px; }
  .flow-family-grid { grid-template-columns: 1fr; }.flow-family header { min-height: 0; }.flow-modes-section.is-compact .flow-family header { min-height: 0; }
  .hero-grid, .ecosystem-grid, .runtime-grid, .provider-grid, .experience-grid, .workplace-overview-copy, .workplace-entry-layout, .workplace-conversation-grid { grid-template-columns: 1fr; }
  .runtime-grid > *, .provider-grid > *, .experience-grid > *, .workplace-overview-grid > *, .workplace-entry-layout > *, .workplace-conversation-grid > * { min-width: 0; }
  .pack-gallery-heading { grid-template-columns: 1fr; gap: 20px; }
  .pack-repository { align-items: flex-start; flex-direction: column; }
  .hero-copy h1 { font-size: clamp(3.7rem, 15vw, 6rem); }
  .hero-visual { width: min(78vw, 400px); justify-self: center; }
  .signal-grid { grid-template-columns: 1fr 1fr; }
  .signal-grid > span:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .signal-grid > span:nth-child(4) { border-top: 1px solid var(--border); }
  .ecosystem-copy { max-width: 660px; }
  .ecosystem-visual { width: min(82vw, 520px); margin: 12px auto 0; justify-self: center; }
  .runtime-copy { max-width: 680px; }
  .runtime-current { width: 100%; max-width: 100%; }.runtime-doc-link { width: auto; }
  .entry-card { min-height: 0; }
  .workplace-overview-copy .eyebrow { margin-bottom: 0; }.workplace-overview-copy { gap: 18px; }
  .workplace-product-frame { min-height: 520px; }
  .workplace-journey-grid { grid-template-columns: 1fr 1fr; }.workplace-journey-card:nth-child(3)::after { display: grid; }.workplace-journey-card:nth-child(even)::after { display: none; }
  .workplace-capability-grid { grid-template-columns: 1fr 1fr; }
  .governance-grid, .workplace-dashboard-grid, .pack-authoring-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 580px) {
  .nav-shell { gap: 6px; }.nav-actions { flex: none; gap: 4px; }.header-brand { width: min(34vw, 140px); height: 44px; padding: 4px 6px; }.language-link { min-width: 0; padding: 6px 7px; font-size: .6rem; }.icon-button { width: 32px; height: 32px; }
  .alpha-banner-inner { min-height: 58px; align-items: flex-start; flex-direction: column; gap: 7px; padding-block: 10px; }.alpha-banner p { font-size: .69rem; }.alpha-banner p span { display: none; }.alpha-banner a { padding-left: 15px; font-size: .61rem; }
  .page-hero h1 { font-size: clamp(1.75rem, 9vw, 3.4rem); overflow-wrap: break-word; hyphens: none; }
  .hero-copy h1 { font-size: clamp(3.35rem, 17vw, 5rem); }
  .hero { padding: 58px 0 48px; }.hero-grid { gap: 48px; }.hero-visual { width: min(82vw, 340px); }
  .pack-grid { grid-template-columns: 1fr; }
  .pack-card { min-height: 320px; }
  .pack-repository .button { width: 100%; }
  .hero-copy .lede { font-size: 1.02rem; }
  .hero-image-shell { width: 84%; }
  .orbit-label-b { left: -1%; }
  .signal-strip { display: none; }
  .ecosystem-visual { width: min(92vw, 430px); margin-inline: auto; }
  .preview-window { aspect-ratio: 1.25; }
  .shot-metrics span { padding: 7px; }
  .runtime-diagram { padding: 16px; }
  .microsoft-stack-grid { grid-template-columns: 1fr; }.microsoft-stack-grid a { min-height: 130px; }
  .flow-family { padding: 22px 18px; }.flow-family-agents .flow-mode-list { grid-template-columns: 1fr; }.flow-mode-card { min-height: 94px; }.flow-modes-section.is-compact .flow-mode-card { min-height: 66px; }.mode-topology { width: 74px; transform: scale(.92); transform-origin: right center; }
  .runtime-plane-card, .maf-card { min-height: 112px; padding: 20px; }
  .runtime-points { grid-template-columns: 1fr; }
  .journey-stage { grid-template-columns: 42px 1fr; gap: 14px; padding: 18px; }
  .journey-stage .icon-box { width: 42px; height: 42px; }
  .entry-card { padding: 25px; }
  .workplace-product-frame { grid-template-columns: 1fr; min-height: 0; }.workplace-product-sidebar, .workplace-product-rail { display: none; }.workplace-product-content { width: calc(100% - 28px); padding: 26px 0; }.workplace-product-primary { padding: 20px; }.workplace-product-shortcuts > div { grid-template-columns: 1fr; }.workplace-product-top { padding-inline: 15px; }
  .workplace-entry-type { grid-template-columns: 44px 1fr; padding: 19px; }.workplace-entry-type .icon-box { width: 44px; height: 44px; }
  .workplace-journey-grid, .workplace-capability-grid, .governance-grid, .workplace-dashboard-grid, .pack-authoring-grid { grid-template-columns: 1fr; }.workplace-journey-card { min-height: 0; }.workplace-journey-card::after, .workplace-journey-card:nth-child(3)::after { display: none; }
  .governance-card, .workplace-dashboard-card, .pack-authoring-card { min-height: 0; }
  .provider-card { grid-template-columns: 1fr; }.provider-card small { justify-self: start; }
  .conversation-messages { min-height: 360px; padding: 20px; }.conversation-messages p { max-width: 92%; }
}