/* Original CoSens pages use the existing cosens / AI Avatar visual language.
   Palette references: apps/agent/src/styles.css, industry chat and learning loop. */
.cs-legacy {
  --ps-paper: var(--palette-bg);
  --ps-ink: var(--palette-ink);
  --ps-muted: var(--palette-muted);
  --ps-warm-muted: var(--palette-muted);
  --ps-warm: var(--palette-soft);
  --ps-warm-paper: var(--palette-surface);
  --ps-warm-line: var(--palette-line);
  --ps-accent: var(--palette-brand);
  --ps-accent-ink: var(--palette-accent);
  --ps-wash: color-mix(in srgb,var(--palette-soft) 38%,transparent);
  --ps-radius: var(--cs-radius-card);
  --ps-shadow: 0 18px 50px color-mix(in srgb,var(--palette-shadow) 7%,transparent);
  --bg: var(--palette-bg);
  --surface: var(--palette-surface);
  --ink: var(--palette-ink);
  --muted: var(--palette-muted);
  --line: var(--palette-line);
  --soft: var(--palette-soft);
  --brand-co: var(--palette-ink);
  --brand-sens: var(--palette-accent);
  --code: var(--palette-code-bg);
  --code-ink: var(--palette-code-ink);
  --shadow: color-mix(in srgb,var(--palette-shadow) 7%,transparent);
  --cs-line: var(--palette-line);
  --blue: var(--ps-accent-ink);
  --object-light: var(--palette-soft);
  --object-mid: var(--palette-line);
  --object-dark: var(--palette-boundary);
  --object-edge: var(--palette-muted);
  background: var(--bg);
}

.cs-legacy .hero {
  padding-block: 112px 88px;
  background: radial-gradient(ellipse at 78% 55%, var(--ps-wash), transparent 65%);
}
.cs-legacy .hero h1 { font-weight: 600; margin-block: 22px 24px; }
.cs-legacy .hero p { color: var(--muted); max-width: 65ch; }
.cs-legacy :is(.section, .journey-section) { border-bottom-color: var(--line); }
.cs-legacy :is(.section h2, .journey-section h2, .closing h2, .avatar-section-intro h2) {
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.12;
  letter-spacing: normal;
  font-weight: 600;
}
.cs-legacy :is(.section-head p, .journey-steps p, .section p) { color: var(--muted); }
.cs-legacy :is(.eyebrow, .small-label, .chip, .benchmark-metric, .benchmark-provenance, .avatar-proof, .avatar-scene-label, .avatar-side-foot) {
  font-family: inherit;
}
.cs-legacy :is(.brand-co, .brand-sens) { color: var(--ink); }
.cs-legacy :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ps-accent);
  outline-offset: 4px;
}

/* Calls to action keep the dark pill used by AI Avatar. */
.cs-legacy :is(.btn, .pricing-action) {
  border-radius: 999px;
  font-weight: 600;
  transition: transform .2s var(--cs-ease), background .2s;
}
.cs-legacy .btn:not(.secondary) {
  background: var(--ink);
  color: var(--ps-paper);
  border-color: var(--ink);
  box-shadow: 0 8px 20px color-mix(in srgb,var(--palette-shadow) 10%,transparent);
}
.cs-legacy .btn.secondary { background: var(--surface); border-color: var(--line); color: var(--ink); }
.cs-legacy .btn:hover { opacity: 1; transform: translateY(-1px); }
.cs-legacy .text-link { font-weight: 500; border-color: var(--line); }
.cs-legacy .text-link:hover { color: var(--ps-accent-ink); border-color: currentColor; }

/* Product demonstrations share the warm paper of the AI Avatar workspace. */
.cs-legacy :is(.capability-panel, .journey-preview, .demo, .avatar-window, .avatar-story-art, .access-form-panel) {
  border: 1px solid var(--line);
  border-radius: var(--ps-radius);
  background: var(--surface);
}
.cs-legacy :is(.journey-preview, .avatar-window) { box-shadow: var(--ps-shadow); }
.cs-legacy .capability-panel { padding: 36px; }
.cs-legacy .capability-panel > h3 { font-weight: 600; }
.cs-legacy :is(.preview-toolbar, .demo-steps, .avatar-window-head, .avatar-window-side) { background: var(--ps-warm); }
.cs-legacy :is(.preview-toolbar, .demo-steps, .avatar-window-side, .story-module, .avatar-method, .avatar-branches > div, .pricing-plus, .doc-nav-link[aria-current=page], .benchmark-table thead) {
  --muted: var(--palette-muted);
}
.cs-legacy :is(.journey-canvas, .demo-content, .avatar-stage) { background: var(--ps-warm-paper); }
.cs-legacy :is(.step, .doc-nav-link) { border-radius: var(--cs-radius-control); }
.cs-legacy .step[aria-selected=true] { background: var(--surface); border-color: var(--line); }
.cs-legacy .journey-step-tabs { padding: 16px 20px; gap: 8px; }
.cs-legacy :is(.capability-tabs button, .journey-step-tabs button) { background: var(--surface); border-color: var(--line); }
.cs-legacy :is(.capability-tabs button[aria-selected=true], .journey-step-tabs button[aria-pressed=true]) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ps-paper);
}
.cs-legacy .speech-user { background: var(--ps-warm-paper); }
.cs-legacy .speech-ai { background: var(--surface); }
.cs-legacy :is(.story-module, .avatar-method, .avatar-branches > div) {
  background: var(--ps-warm);
  border-radius: var(--cs-radius-control);
}
.cs-legacy .brain-diagram :is(.stack-result, .stack-tool, .stack-summary, .flow-label) { font-family: inherit; }
.cs-legacy .brain-diagram .stack-plane { fill: var(--ps-warm-paper); }
.cs-legacy .brain-diagram .layer-detail p { font-size: 12px; line-height: 1.5; margin: 7px 0; }
.cs-legacy .sdk-workflow { --sdk-bg: var(--ps-warm); --surface: var(--palette-surface); }
.cs-legacy .sdk-flow-svg { --blue: var(--ps-accent-ink); }
.cs-legacy .sdk-flow-svg text { font-family: inherit; }
.cs-legacy :is(.avatar-preview-badge, .avatar-inline-badge) {
  border-color: var(--line);
  background: var(--ps-warm);
  border-radius: 999px;
}
.cs-legacy :is(.avatar-output, .avatar-art-result, .pricing-rule) {
  border: 1px solid var(--line);
  border-radius: var(--cs-radius-control);
  padding: 16px 18px;
  background: var(--ps-warm-paper);
}

/* Code and toolbar follow the shared page theme. */
.cs-legacy .code-window { border-color: var(--palette-boundary); border-radius: var(--cs-radius-card); box-shadow: var(--ps-shadow); }
.cs-legacy .code-window :is(.code-header, .code-bottom) { background: var(--palette-surface); color: var(--palette-muted); border-color: var(--palette-boundary); }
.cs-legacy .code-window .tab { color: var(--palette-muted); }
.cs-legacy .code-window .tab[aria-selected=true] { color: var(--palette-accent); border-color: var(--palette-accent); }
.cs-legacy .code-window .copy { color: var(--palette-muted); border-color: var(--palette-boundary); border-radius: 999px; background: transparent; }
.cs-legacy .code-window :is(.comment, .key) { color: var(--palette-muted); }
/* Build and SDK use the same wrapper example panel. */
.cs-legacy .code-window[data-code=wrapper] { border: 1px solid var(--palette-boundary); border-radius: var(--cs-radius-card); box-shadow: var(--ps-shadow); }
.cs-legacy .developer-preview .code-window[data-code=wrapper] { border-radius: 0; box-shadow: none; }
.cs-legacy .code-window[data-code=wrapper] .code-header { min-height: 40px; padding: 0 18px; gap: 8px 12px; flex-wrap: wrap; }
.cs-legacy .code-window[data-code=wrapper] .tab { padding: 11px 0 9px; }
.cs-legacy .code-window[data-code=wrapper] .copy { white-space: nowrap; }
.cs-legacy .code-window[data-code=wrapper] :is(.tab, .copy):hover { color: var(--palette-accent); }
.cs-legacy .code-window[data-code=wrapper] :is(.tab, .copy):focus-visible { outline-offset: -3px; }
.cs-legacy .code-window[data-code=wrapper] pre { padding: 18px 22px; font-size: 12px; line-height: 1.7; }
.cs-legacy .code-window[data-code=wrapper] .code-bottom { padding: 9px 18px; }
@media (max-width: 700px) {
  .cs-legacy .code-window[data-code=wrapper] .tab,
  .cs-legacy .code-window[data-code=wrapper] .copy { min-height: 44px; }
  .cs-legacy .code-window[data-code=wrapper] pre { font-size: clamp(10px, 2.8vw, 12px); }
}

/* Plans borrow the warm featured surface and dark action from cosens pricing. */
.cs-legacy .pricing-hero { padding-block: 100px 56px; }
.cs-legacy .pricing-hero h1 { font-size: clamp(42px, 5vw, 68px); font-weight: 600; letter-spacing: normal; }
.cs-legacy .pricing-hero > .eyebrow::before { display: none; }
.cs-legacy .pricing-cards { gap: 24px; }
.cs-legacy .pricing-card { padding: 32px; border-radius: var(--ps-radius); }
.cs-legacy .pricing-card.pricing-plus {
  border-color: color-mix(in srgb, var(--ps-accent) 35%, var(--line));
  background: linear-gradient(180deg, var(--palette-tint), var(--ps-warm-paper) 38%);
  box-shadow: var(--ps-shadow);
}
.cs-legacy .pricing-tag { font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1.5; background: var(--ps-warm); color: var(--ps-accent-ink); letter-spacing: 0; }
.cs-legacy .pricing-action { padding: 13px 18px; font-size: 14px; background: var(--surface); }
.cs-legacy .pricing-plus .pricing-action { background: var(--ink); border-color: var(--ink); color: var(--ps-paper); }
.cs-legacy .pricing-action:hover { border-color: var(--ink); transform: translateY(-1px); }
.cs-legacy .pricing-teams { padding: 30px; border-radius: var(--cs-radius-card); background: var(--ps-warm-paper); }
.cs-legacy .pricing-section { padding-block: 64px; }

/* Documentation, benchmark tables and forms use the same quiet surfaces. */
.cs-legacy .docs-nav { top: calc(var(--site-header-height) + 16px); }
@media (min-width: 701px) {
  .cs-legacy .docs-nav {
    max-height: calc(100dvh - var(--site-header-height) - 32px); overflow-y: auto; overscroll-behavior: contain;
    scroll-padding-block: 12px; padding: 16px 6px;
  }
}
.cs-legacy .doc-aside { top: var(--site-header-height); }
.cs-legacy #doc-toc a { transition: color 140ms ease-out; }
.cs-legacy #doc-toc a[aria-current=location] { color: var(--palette-accent); font-weight: 600; }
.cs-legacy .doc-nav-link { border-left: 0; padding: 6px 12px; }
.cs-legacy .doc-nav-link[aria-current=page] { background: var(--ps-warm); font-weight: 600; }
.cs-legacy :is(.notice, .guide-links a, .table-scroll, .avatar-table-scroll) { border-radius: var(--cs-radius-card); }
.cs-legacy .notice { padding: 18px 20px; background: var(--ps-warm-paper); font-size: 13px; }
.cs-legacy :is(.benchmark-table thead, .avatar-table-scroll thead th) { background: var(--ps-warm); }
.cs-legacy .benchmark-table .ours-column { background: var(--ps-warm-paper); }
.cs-legacy .table-scroll { background: var(--surface); }
.cs-legacy :is(.doc-content h1, .report-content h1) { font-weight: 600; }
.cs-legacy .doc-content :is(.code-window, .setup-code) { border-radius: var(--cs-radius-control); overflow: hidden; }
.cs-legacy .doc-content code:not(pre code) { border-radius: var(--cs-radius-inner); padding: 3px 6px; }
.cs-legacy .access-form-panel { padding: 36px; background: var(--ps-warm-paper); }
.cs-legacy .access-form-panel :is(input:not([type=checkbox]), textarea) { border-color: var(--line); border-radius: var(--cs-radius-control); }
.cs-legacy .access-form-panel fieldset label { border-radius: var(--cs-radius-card); background: var(--surface); }
.cs-legacy .closing { padding-block: 88px; }
.cs-legacy .footer { border-top-color: var(--line); }

/* SDK marketing pages share AI Avatar's centered introduction and content rhythm.
   Demonstrations, code, feature lists and FAQ answers retain their reading alignment. */
.cs-centered-page main .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  background: radial-gradient(ellipse at 50% 75%, var(--ps-wash), transparent 65%);
}
.cs-centered-page main .hero > div:first-child { width: 100%; text-align: center; }
.cs-centered-page :is(.hero, .section-head, .split, .pricing-enterprise) .eyebrow { justify-content: center; }
.cs-centered-page main .hero h1 { max-width: 100%; margin-inline: auto; text-wrap: wrap; }
.cs-centered-page .hero-line { white-space: normal; }
.cs-centered-page main .hero p { max-width: 680px; margin-inline: auto; }
.cs-centered-page .hero-actions { justify-content: center; align-items: center; }
.cs-centered-page .connect-availability { justify-content: center; }
.cs-centered-page main .hero > .brain-diagram { width: 100%; max-width: none; margin: 0 auto; }
.cs-centered-page .company-track { animation-duration: 72s; }
.cs-centered-page .company-set { gap: 14px; padding: 0 14px 0 0; }
.cs-centered-page .company-set li { flex: 0 0 176px; width: 176px; height: 88px; }
.cs-centered-page img.company-logo { width: 176px; height: 88px; object-fit: contain; background: none; mask-image: none; filter: grayscale(1); opacity: .44; transition: opacity .2s ease; }
.cs-centered-page .company-set li:hover .company-logo { opacity: .64; }
.cs-centered-page #build > .code-window { width: min(100%, 760px); max-width: 760px; margin: 0 auto; }
.cs-centered-page .section-head,
.cs-centered-page .pricing-headrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 100%;
  margin: 0 auto 48px;
  text-align: center;
}
.cs-centered-page .section-head h2 { margin-bottom: 0; }
.cs-centered-page .section-head > div { width: 100%; }
.cs-centered-page .section-head p,
.cs-centered-page .pricing-headrow > p { max-width: 680px; margin: 0; }
.cs-centered-page :is(.journey-cta, .journey-resources, .workflow-links, .capability-tabs) { justify-content: center; }
.cs-centered-page .section > .journey-cta { width: 100%; max-width: none; }
.cs-centered-page :is(.connection-identity, .optional-example > .example-heading, .capability-panel > h3, .capability-need) {
  margin-inline: auto;
  text-align: center;
}
.cs-centered-page .journey-layout { display: flex; flex-direction: column; gap: 36px; }
.cs-centered-page .journey-steps { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; text-align: center; }
.cs-centered-page .journey-steps p { margin-inline: auto; }
.cs-centered-page .journey-preview { width: min(100%, 1000px); }
.cs-centered-page .client-choices a { text-align: center; }
.cs-centered-page .closing { display: flex; flex-direction: column; gap: 26px; text-align: center; }
.cs-centered-page .closing > div { max-width: 100%; }
.cs-centered-page .closing .btn { margin-top: 0; }

/* Build places the API choices below the introduction, around the same centerline. */
.cs-centered-page .strip { justify-content: center; gap: 24px 48px; flex-wrap: wrap; }
.cs-centered-page .sdk-workflow > .sdk-story { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cs-centered-page :is(.sdk-scope, .benchmark-annotation, .benchmark-scope) { max-width: 900px; margin-inline: auto; text-align: center; }
.cs-centered-page .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.cs-centered-page .split > div:first-child { max-width: 100%; margin-inline: auto; text-align: center; }
.cs-centered-page .split > div:first-child h2 { max-width: 100%; }
.cs-centered-page .api-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: 24px; }
.cs-centered-page .api-links > a { padding: 30px 24px; border: 1px solid var(--line); border-radius: var(--ps-radius); background: var(--ps-warm-paper); text-align: center; }
.cs-centered-page .api-links > a > span:last-child { justify-content: center; gap: 12px; }
.cs-centered-page #benchmarks > .text-link { display: table; margin-inline: auto; }

/* Pricing introductions stay centered; plan cards follow AI Avatar's reading order. */
.cs-centered-page .pricing-hero { text-align: center; }
.cs-centered-page .pricing-hero > p { margin-inline: auto; }
.cs-centered-page .pricing-cards { gap: 12px; align-items: stretch; }
.cs-centered-page .pricing-card { min-height: 720px; padding: 26px 24px 22px; border-radius: var(--cs-radius-card); text-align: left; }
.cs-centered-page .pricing-card .pricing-plan-line { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.cs-centered-page .pricing-card h2 { font-size: 17px; font-weight: 650; line-height: 1.5; }
.cs-centered-page .pricing-card .pricing-tag { padding: 5px 9px; font-size: 10px; font-weight: 750; line-height: 1.5; letter-spacing: .08em; }
.cs-centered-page .pricing-card .pricing-price { display: flex; align-items: baseline; gap: 7px; min-height: 52px; margin: 31px 0 6px; text-align: left; font-size: clamp(34px, 3vw, 44px); font-weight: 650; line-height: 1; letter-spacing: normal; }
.cs-centered-page .pricing-card .pricing-price small { font-size: 13px; font-weight: 400; line-height: 1.5; }
.cs-centered-page .pricing-card .pricing-purpose { min-height: 42px; margin: 0; text-align: left; font-size: 13px; line-height: 1.5; }
.cs-centered-page .pricing-card .pricing-price-note { min-height: 18px; margin-top: 8px; text-align: left; font-size: 12px; line-height: 1.5; }
.cs-centered-page .pricing-card ul { margin: 26px 0 28px; }
.cs-centered-page .pricing-card li { min-height: 0; padding: 13px 0; line-height: 1.5; }
.cs-centered-page .pricing-card .pricing-action-note { margin: auto 0 12px; text-align: left; line-height: 1.5; }
.cs-centered-page .pricing-card .pricing-action { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 10px 18px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.cs-centered-page :is(.pricing-shared, .pricing-scope) { text-align: center; }
.cs-centered-page .pricing-headrow h2 { max-width: 100%; margin: 0; font-size: clamp(32px, 3.5vw, 50px); line-height: 1.12; text-wrap: wrap; }
.cs-centered-page .pricing-two { max-width: 1000px; margin-inline: auto; text-align: center; }
.cs-centered-page .pricing-two p { margin-inline: auto; }
.cs-centered-page .pricing-rule { text-align: left; }
.cs-centered-page .pricing-teams { text-align: center; }
.cs-centered-page .pricing-teams p { margin-inline: auto; }
.cs-centered-page .pricing-enterprise { flex-direction: column; text-align: center; gap: 22px; }
.cs-centered-page .pricing-enterprise p { max-width: 680px; margin-inline: auto; }
.cs-centered-page .pricing-enterprise .pricing-action { margin: 0; }
.cs-centered-page .pricing-faq { max-width: 1000px; margin-inline: auto; }

@media (max-width: 900px) {
  .cs-centered-page .company-track { animation-duration: 58s; }
  .cs-centered-page .company-set { gap: 10px; padding-right: 10px; }
  .cs-centered-page .company-set li { flex-basis: 148px; width: 148px; height: 74px; }
  .cs-centered-page img.company-logo { width: 148px; height: 74px; }
}
@media (max-width: 700px) {
  .cs-centered-page .company-track { animation-duration: 46s; }
  .cs-centered-page .company-set { gap: 8px; padding-right: 8px; }
  .cs-centered-page .company-set li { flex-basis: 132px; width: 132px; height: 66px; }
  .cs-centered-page img.company-logo { width: 132px; height: 66px; }
  .cs-centered-page main .hero { gap: 36px; }
  .cs-centered-page :is(.section-head, .pricing-headrow) { gap: 16px; margin-bottom: 34px; }
  .cs-centered-page .journey-steps { grid-template-columns: 1fr; gap: 28px; }
  .cs-centered-page .api-links { grid-template-columns: 1fr; gap: 16px; }
  .cs-centered-page .strip { gap: 16px 24px; }
}

@media (max-width: 1050px) and (min-width: 701px) {
  .cs-centered-page .pricing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cs-centered-page .pricing-card { min-height: 650px; }
}
@media (max-width: 700px) {
  .cs-legacy .hero { padding-block: 66px 56px; }
  .cs-legacy :is(.section h2, .journey-section h2, .closing h2, .avatar-section-intro h2) { font-size: 34px; }
  .cs-legacy .capability-panel { padding: 24px 20px; border-radius: var(--cs-radius-card); }
  .cs-legacy .brain-diagram .layer-detail p { font-size: 11px; line-height: 1.45; }
  .cs-legacy :is(.journey-preview, .demo, .avatar-window, .avatar-story-art) { border-radius: var(--cs-radius-card); }
  .cs-legacy .pricing-hero { padding-block: 60px 36px; }
  .cs-legacy .pricing-hero h1 { font-size: clamp(38px, 10vw, 58px); }
  .cs-centered-page .pricing-card { min-height: 0; padding: 25px 22px 22px; }
  .cs-centered-page .pricing-card .pricing-action-note { margin-top: 2px; }
  .cs-legacy .pricing-section { padding-block: 48px; }
  .cs-legacy .docs-nav { top: 0; }
  .cs-legacy .mobile-doc-toggle { position: sticky; top: var(--site-header-height); z-index: 31; height: 48px; background: var(--palette-bg); color: var(--palette-ink); }
  .cs-legacy .docs-layout.menu-open .docs-nav {
    position: fixed; top: calc(var(--site-header-height) + 48px); left: 16px; right: 16px; z-index: 30;
    max-height: calc(100dvh - var(--site-header-height) - 48px); overflow-y: auto; overscroll-behavior: contain;
    padding: 16px; background: var(--palette-bg); border: 1px solid var(--palette-line); border-radius: 0 0 var(--cs-radius-card) var(--cs-radius-card);
    box-shadow: 0 12px 24px color-mix(in srgb,var(--palette-shadow) 8%,transparent);
  }
  .cs-legacy .access-form-panel { padding: 24px; }
  .cs-legacy .closing { padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-legacy #doc-toc a { transition: none; }
  .cs-legacy :is(.btn, .pricing-action) { transition: none; }
  .cs-legacy :is(.btn, .pricing-action):hover { transform: none; }
}
.doc-content img{display:block;max-width:100%;height:auto}