/* The SDK's long-form pages use chapters, choices and native disclosures.
   Keep the merged site's light identity and existing demonstrations intact. */
.cs-sdk-page {
  min-width: 0;
  --sdk-paper: var(--palette-soft);
  --sdk-surface: var(--palette-surface);
  --sdk-ink: var(--palette-ink);
  --sdk-muted: var(--palette-muted);
  --sdk-line: var(--palette-line);
  --sdk-accent: var(--palette-accent);
  --sdk-space-sm: 1rem;
  --sdk-space-md: 1.5rem;
  --sdk-space-lg: 2.5rem;
  --sdk-space-section: clamp(4rem, 6.5vw, 6rem);
  --muted: var(--palette-muted);
  --ps-muted: var(--palette-muted);
}
.cs-sdk-page main { isolation: isolate; }
/* Add to the existing 100px root scroll padding, leaving both navigation rows clear. */
.cs-sdk-page main :is(section[id], .pricing-plans) { scroll-margin-top: 4rem; }
.cs-sdk-page .sdk-chapter {
  position: relative;
  isolation: isolate;
  padding-block: var(--sdk-space-section);
  border: 0;
}
.cs-sdk-page .sdk-chapter-paper::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--sdk-paper);
  box-shadow: 0 0 0 100vmax var(--sdk-paper);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}
.cs-sdk-page .section-head,
.cs-sdk-page .pricing-headrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0 0 var(--sdk-space-lg);
  text-align: center;
}
.cs-sdk-page :is(.section-head, .pricing-headrow) .eyebrow { justify-content: center; }
.cs-sdk-page :is(.section-head h2, .pricing-headrow h2, .split h2) {
  max-width: 100%;
  margin: .75rem auto 0;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
.cs-sdk-page :is(.section-head > p, .pricing-headrow > p) {
  max-width: 65ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--sdk-muted);
}
.cs-sdk-page :is(.section p, .pricing-section p, .closing p) { font-size: 1rem; line-height: 1.75; }
.cs-sdk-page :is(.eyebrow, .small-label) { color: var(--sdk-muted); font-size: .6875rem; line-height: 1.7; }
.cs-sdk-page :is(p, blockquote) { overflow-wrap: break-word; }
.cs-sdk-page .hero > .brain-diagram { max-width: 960px; }
.cs-sdk-page .hero { padding-block: 5.5rem 4rem; gap: 3rem; }
.cs-sdk-page .hero p { color: var(--sdk-muted); }
.cs-sdk-page #build .hero-actions > .text-link { margin-top: 0; }
.cs-sdk-page .hero .connect-availability { margin-top: 1.5rem; }
.cs-sdk-page .company-banner { padding-block: 1.5rem; }

.sdk-homepage .connect-hero .sensable-hero-note { margin-top: -16px; }
.sdk-homepage .hero-client-icons { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.sdk-homepage .hero-client-icons li { margin: 0; padding: 0; }
.sdk-homepage .hero-client-icons a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--cs-radius-control); color: var(--palette-muted); transition: color 140ms ease-out,background-color 140ms ease-out; }
.sdk-homepage .hero-client-icons a:hover,.sdk-homepage .hero-client-icons a:focus-visible { color: var(--palette-ink); background: var(--palette-hover); }
.sdk-homepage .hero-client-mark { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--client-icon) center/contain no-repeat; mask: var(--client-icon) center/contain no-repeat; }
.sdk-homepage .hero-client-openai { --client-icon: url('/assets/client-icons/openai.svg'); }
.sdk-homepage .hero-client-claude { --client-icon: url('/assets/client-icons/claude.svg'); }
.sdk-homepage .hero-client-codex { --client-icon: url('/assets/client-icons/codex.svg'); }
.sdk-homepage .hero-client-claudecode { --client-icon: url('/assets/client-icons/claudecode.svg'); }
@media (prefers-reduced-motion: reduce) { .sdk-homepage .hero-client-icons a { transition: none; } }
@media (max-width: 700px) {
  .sdk-homepage .connect-hero .layer-detail { position: static; width: auto; margin-top: -12px; text-align: center; }
  .sdk-homepage .connect-hero .callout-leader { display: none; }
  .sdk-homepage .connect-hero .sensable-hero-note { margin-top: 16px; }
}


/* Match the original homepage column proportions while retaining the current site shell. */
@media (min-width: 801px) {
  .sdk-homepage main .connect-hero {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 3rem;
    min-height: 640px;
    padding-block: 5rem;
  }
  .sdk-homepage main .connect-hero > div:first-child { min-width: 0; text-align: left; }
  .sdk-homepage main .connect-hero h1 {
    margin-inline: 0;
    font-size: clamp(2.25rem, 4vw, 3.625rem);
    line-height: 1.08;
  }
  .sdk-homepage main .connect-hero h1 > span { display: block; }
  .sdk-homepage main .connect-hero > div:first-child > p { margin-inline: 0; }
  .sdk-homepage .connect-hero :is(.hero-actions, .connect-availability) { justify-content: flex-start; }
  .sdk-homepage .connect-hero .hero-client-icons { justify-content: flex-start; }
  .sdk-homepage main .connect-hero > .brain-diagram {
    width: 100%;
    max-width: none;
    margin: 0 0 0 auto;
  }
}

@media (min-width: 801px) and (max-width: 1000px) {
  .sdk-homepage main .connect-hero {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 30px;
  }
}

/* A quiet chapter bar stays below the shared header. It scrolls on phones. */
.cs-sdk-page .sdk-page-nav {
  position: sticky;
  top: var(--site-header-height);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 48px;
  margin: 0;
  border-block: 0;
  background: var(--nav-glass-background);
  backdrop-filter: blur(var(--nav-glass-blur));
  -webkit-backdrop-filter: blur(var(--nav-glass-blur));
}
.cs-sdk-page .sdk-page-nav > div { display: flex; align-items: center; gap: .5rem; overflow-x: auto; padding-block: .5rem; }
.cs-sdk-page .sdk-page-nav a {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 32px;
  padding: .25rem 1rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--sdk-muted);
  transition: color .2s ease-out, background .2s ease-out;
}
.cs-sdk-page .sdk-page-nav a:hover { color: var(--sdk-ink); background: var(--sdk-paper); }
.cs-sdk-page .sdk-page-nav a[aria-current] { color: var(--sdk-ink); background: var(--sdk-paper); }
.cs-sdk-page .sdk-page-nav a:focus-visible { outline-offset: -3px; }
.cs-sdk-page .sdk-nav-trigger { display: block; height: 0; pointer-events: none; }
.cs-sdk-page .sdk-page-nav[data-scroll-reveal] {
  position: fixed;
  left: 0;
  right: 0;
  padding-inline: max(24px, calc((100% - 1200px) / 2));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease-out, transform .24s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .24s;
}
.cs-sdk-page .sdk-page-nav[data-scroll-reveal].is-stuck { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }

/* One content surface contains the example; individual stages use simple rules. */
.cs-sdk-page .capability-tabs { justify-content: flex-start; gap: .5rem; margin-bottom: 1.5rem; scroll-margin-top: 4rem; }
.cs-sdk-page .capability-tabs button { min-height: 44px; font-size: .875rem; }
.cs-sdk-page .capability-panel { padding: 2.5rem; border: 1px solid var(--sdk-line); background: var(--sdk-surface); border-radius: var(--cs-radius-card); }
.cs-sdk-page .capability-panel > h3 { text-align: left; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.25; margin: 0 0 .75rem; }
.cs-sdk-page .capability-need { max-width: 70ch; margin: 0 0 2rem; text-align: left; }
.cs-sdk-page .capability-panel > :is(h3, .capability-need) { text-align: left; margin-inline: 0; }
.cs-sdk-page .capability-stage blockquote { font-size: 1.125rem; line-height: 1.55; margin: 1rem 0 1.5rem; min-height: 5em; }
.cs-sdk-page .capability-stage p { font-size: .9375rem; }
.cs-sdk-page .capability-panel > .connect-scope { max-width: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sdk-line); font-size: .8125rem; line-height: 1.65; }
.cs-sdk-page .method-check { padding-top: 0; margin-top: 2rem; }
.cs-sdk-page .method-check > summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; list-style: none; font-size: .9375rem; }
.cs-sdk-page .method-check > div:not(.cs-disclosure-region),
.cs-sdk-page .method-check .cs-disclosure-inner > div { padding: 0 0 1rem; }
.cs-sdk-page .method-check p { font-size: .9375rem; }

/* Native controls retain keyboard access, independent expansion and all copy. */
.cs-sdk-page .sdk-disclosure { border: 0; border-top: 1px solid var(--sdk-line); margin: 0; padding: 0; }
.cs-sdk-page .sdk-disclosure:last-child { border-bottom: 1px solid var(--sdk-line); }
.cs-sdk-page .sdk-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  padding: 1.25rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sdk-ink);
}
.cs-sdk-page :is(.sdk-disclosure, .method-check) > summary::-webkit-details-marker { display: none; }
.cs-sdk-page :is(.sdk-disclosure, .method-check) > summary::after {
  content: '+';
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--sdk-line);
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--sdk-muted);
}
.cs-sdk-page :is(.sdk-disclosure, .method-check)[open] > summary::after { content: '−'; color: var(--sdk-accent); }
.cs-sdk-page .sdk-disclosure > summary:hover { color: var(--sdk-accent); }
.cs-sdk-page .sdk-disclosure > summary > :is(h3, .example-heading) { margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
.cs-sdk-page .sdk-disclosure .optional-body { padding: 1rem 0 2rem; }
.cs-sdk-page .sdk-examples .optional-body > .section-head { margin-bottom: 2rem; }
.cs-sdk-page .sdk-examples .optional-body .section-head h2 { font-size: 1.75rem; }
.cs-sdk-page .optional-body .conversation-story { max-width: 880px; }
.cs-sdk-page .example-stack {
  display: grid;
  gap: clamp(3rem, 8vh, 6rem);
  isolation: isolate;
}
.cs-sdk-page .example-card {
  position: relative;
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--sdk-line);
  border-radius: var(--cs-radius-card);
  background: var(--sdk-surface);
  box-shadow: 0 16px 48px color-mix(in srgb,var(--palette-shadow) 6%,transparent);
}
.cs-sdk-page .example-card + .example-card { z-index: 2; background: var(--sdk-paper); }
.cs-sdk-page .example-card-header { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--sdk-line); }
.cs-sdk-page .example-card-header .example-heading { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.5; text-align: left; }
.cs-sdk-page .example-card .conversation-story { width: 100%; max-width: 1000px; margin-inline: auto; }
.cs-sdk-page .example-card-body > .section-head { margin-bottom: 2rem; }
.cs-sdk-page .example-card-body .section-head h2 { font-size: 1.75rem; }
.cs-sdk-page .example-card .demo { border-radius: var(--cs-radius-card); overflow: clip; }
.cs-sdk-page .example-card .demo-brief { max-width: none; }
.cs-sdk-page #how-it-works > .example-card-body > .connect-scope {
  max-width: 90ch;
  margin: 1.5rem auto 0;
  font-size: .75rem;
  line-height: 1.7;
  text-align: center;
  color: var(--palette-muted);
}
.cs-sdk-page .example-stack[data-stacking] .example-card { position: sticky; top: var(--example-stack-top); }
/* Keyboard focus must never land behind the next card. */
.cs-sdk-page .example-stack:has(:focus-visible) .example-card { position: relative; top: auto; }
.cs-sdk-page .sensable-takeaway { margin-top: 2.5rem; text-align: center; }
.cs-sdk-page .sensable-takeaway h3 { font-size: 1.5rem; font-weight: 600; }
.cs-sdk-page .sensable-takeaway p { max-width: 65ch; margin-inline: auto; }

/* The same left-aligned steps introduce each preview without another card grid. */
.cs-sdk-page .journey-layout { gap: 2.5rem; }
.cs-sdk-page .journey-steps { gap: 2rem; text-align: left; }
.cs-sdk-page .journey-steps > article { border-top: 1px solid var(--sdk-line); padding-top: 1.5rem; }
.cs-sdk-page .journey-steps h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin: .75rem 0; }
.cs-sdk-page .journey-steps p { max-width: 36ch; margin: 0; font-size: .9375rem; }
.cs-sdk-page .journey-preview { width: 100%; max-width: 1000px; align-self: center; }
.cs-sdk-page .journey-cta { margin-top: 2rem; gap: 1.5rem; }
.cs-sdk-page .journey-mini { max-width: 880px; margin-inline: auto; }
.cs-sdk-page .journey-resources { justify-content: center; gap: 1.5rem; margin: 1.5rem auto 2.5rem; }
.cs-sdk-page .client-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 1000px; margin-inline: auto; border-block: 0; }
.cs-sdk-page .client-choices a { position: relative; min-width: 0; padding: 1.5rem 3.5rem 1.5rem 1.5rem; border: 1px solid var(--sdk-line); background: var(--sdk-surface); border-radius: var(--cs-radius-card); text-align: left; }
.cs-sdk-page .client-choices a::after { content: '↗'; position: absolute; right: 1.5rem; top: 1.5rem; color: var(--sdk-muted); }
.cs-sdk-page .client-choices a:hover { border-color: var(--sdk-accent); }
.cs-sdk-page .client-choices strong { display: block; font-size: 1.125rem; margin-bottom: .5rem; }
.cs-sdk-page .client-choices .client-choice-title { display: flex; align-items: center; gap: 10px; }
.cs-sdk-page .client-choices .client-choice-icon { display: block; flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; }
.cs-sdk-page .client-choices span { font-size: .9375rem; }
.cs-sdk-page .client-choices small { display: block; font-size: .8125rem; line-height: 1.65; margin-top: .5rem; color: var(--sdk-muted); }
.cs-sdk-page .connection-identity { max-width: 75ch; font-size: .875rem; line-height: 1.75; margin: 1.5rem auto 0; }
.cs-sdk-page .connection-detail { max-width: 1000px; margin: 2.5rem auto 0; }
.cs-sdk-page .connection-detail p { max-width: 70ch; }
.cs-sdk-page .developer-preview { max-width: 1000px; margin-inline: auto; }
.cs-sdk-page .developer-preview + .journey-cta { margin-top: 2rem; }
.cs-sdk-page .connect-scope { font-size: .8125rem; line-height: 1.65; }

/* Build: explain, show the flow, then give distinct API entry points. */
.cs-sdk-page #build > .code-window { max-width: 800px; }
.cs-sdk-page #build .sdk-release-note { font-size: .75rem; line-height: 1.65; font-weight: 400; color: var(--palette-muted); }
.cs-sdk-page #build .sdk-release-note a { font-size: inherit; font-weight: inherit; color: inherit; text-decoration-color: color-mix(in srgb,currentColor 50%,transparent); }
.cs-sdk-page #build .sdk-release-note a:hover,.cs-sdk-page #build .sdk-release-note a:focus-visible { color: var(--palette-accent); text-decoration-color: currentColor; }
.cs-sdk-page .strip { padding-block: 1.5rem; font-size: .75rem; border-bottom: 0; }
.cs-sdk-page .sdk-workflow { border: 1px solid var(--sdk-line); border-radius: var(--cs-radius-card); background: var(--sdk-surface); padding: 2rem; }
.cs-sdk-page .sdk-workflow > .sdk-story { gap: .75rem; }
.cs-sdk-page .sdk-workflow .sdk-story h3 { font-size: 1.5rem; margin: 0; }
.cs-sdk-page .sdk-workflow .sdk-story p { max-width: 65ch; font-size: 1rem; }
.cs-sdk-page .sdk-workflow .sdk-scope { margin-top: 1.5rem; font-size: .8125rem !important; line-height: 1.65; }
.cs-sdk-page .workflow-links { gap: 1rem 1.5rem; flex-wrap: wrap; }
.cs-sdk-page .sdk-controls { justify-content: center; }
.cs-sdk-page .sdk-controls button { min-height: 44px; }
.cs-sdk-page .sdk-controls .sdk-scenes { max-width: 800px; justify-content: center; }
.cs-sdk-page .sdk-controls .sdk-scenes button { min-width: 24px; }
.cs-sdk-page .split { gap: 2.5rem; }
.cs-sdk-page .split > div:first-child { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; text-align: center; }
.cs-sdk-page .split > div:first-child > .eyebrow { justify-content: center; }
.cs-sdk-page .split > div:first-child > h2 { margin: 0 auto; }
.cs-sdk-page .split > div:first-child > p { max-width: 65ch; margin: 0 auto; }
.cs-sdk-page .api-links { gap: 1rem; overflow: visible; }
.cs-sdk-page .api-links > a { padding: 2rem; border: 1px solid var(--sdk-line); background: var(--sdk-surface); border-radius: var(--cs-radius-card); text-align: left; }
.cs-sdk-page .api-links > a:hover { border-color: var(--sdk-accent); }
.cs-sdk-page .api-links strong { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
.cs-sdk-page .api-links > a > span:last-child { justify-content: space-between; font-size: .875rem; line-height: 1.6; }
.cs-sdk-page .benchmark-annotation { margin: 0 0 1rem; text-align: left; }
.cs-sdk-page .benchmark-table { font-variant-numeric: tabular-nums; }
.cs-sdk-page .benchmark-table :is(th, td) { padding: 1.25rem 1rem; }
.cs-sdk-page .benchmark-table .benchmark-metric { font-size: .75rem; line-height: 1.6; }
.cs-sdk-page :is(.benchmark-scope, .benchmark-disclaimer) { text-align: left; max-width: none; font-size: .8125rem; line-height: 1.7; }
.cs-sdk-page #benchmarks > .text-link { display: flex; width: max-content; max-width: 100%; margin: 1rem auto 0; }
.cs-sdk-page .closing { padding-block: var(--sdk-space-section); }

/* Pricing: compact comparisons first, detailed policies and FAQ in chapters. */
.cs-sdk-page .pricing-hero { padding-block: 5.5rem 3rem; }
.cs-sdk-page .pricing-plans { padding-block: 2.5rem 0; }
.cs-sdk-page .pricing-cards { gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-sdk-page .pricing-card { min-height: 0; padding: 2rem; border-radius: var(--cs-radius-card); }
.cs-sdk-page .pricing-card.pricing-plus { background: var(--ps-warm-paper); box-shadow: none; }
.cs-sdk-page .pricing-card h2 { font-size: 1.25rem; line-height: 1.5; }
.cs-sdk-page .pricing-card .pricing-tag { font-size: .625rem; letter-spacing: .04em; }
.cs-sdk-page .pricing-card .pricing-price { font-size: 2.75rem; min-height: 0; margin: 2rem 0 .75rem; }
.cs-sdk-page .pricing-card .pricing-price small { font-size: .875rem; }
.cs-sdk-page .pricing-card .pricing-purpose { min-height: 3.2em; font-size: .9375rem; line-height: 1.6; }
.cs-sdk-page .pricing-card .pricing-price-note { font-size: .8125rem; line-height: 1.6; }
.cs-sdk-page .pricing-card ul { margin: 1.5rem 0; }
.cs-sdk-page .pricing-card li { padding-block: 1rem; font-size: .9375rem; line-height: 1.6; }
.cs-sdk-page .pricing-card li:nth-child(2) { min-height: 0; }
.cs-sdk-page .pricing-card li span { font-size: .8125rem; line-height: 1.6; }
.cs-sdk-page .pricing-card .pricing-action-note { margin-top: auto; font-size: .8125rem; }
.cs-sdk-page .pricing-card .pricing-action { font-size: .875rem; min-height: 48px; }
.cs-sdk-page .pricing-shared { max-width: 80ch; margin-inline: auto; padding-block: 1.5rem 3rem; font-size: .875rem; line-height: 1.75; }
.cs-sdk-page .pricing-two { max-width: none; gap: 2.5rem; text-align: left; }
.cs-sdk-page .pricing-two > article { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cs-sdk-page .pricing-two > article + article { border-left: 1px solid var(--sdk-line); padding-left: 2.5rem; }
.cs-sdk-page .pricing-two .eyebrow { font-size: .6875rem; }
.cs-sdk-page .pricing-two h3 { font-size: 1.5rem; line-height: 1.3; margin: 1rem 0 .5rem; }
.cs-sdk-page .pricing-two p { max-width: 60ch; margin-inline: 0; }
.cs-sdk-page .pricing-two .pricing-rule { width: 100%; margin-top: auto; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--sdk-line); border-radius: 0; background: none; font-size: .875rem; }
.cs-sdk-page .pricing-teams { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 2.5rem; margin-top: 2.5rem; padding: 2rem 0 0; border: 0; border-top: 1px solid var(--sdk-line); border-radius: 0; background: none; text-align: left; }
.cs-sdk-page .pricing-teams h3 { max-width: 28ch; font-size: 1.25rem; line-height: 1.4; }
.cs-sdk-page .pricing-teams p { max-width: 60ch; margin: 0; }
.cs-sdk-page .pricing-enterprise { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.cs-sdk-page .pricing-enterprise .eyebrow { justify-content: center; }
.cs-sdk-page .pricing-enterprise h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); margin: 1rem auto; }
.cs-sdk-page .pricing-enterprise p { max-width: 65ch; margin: 0 auto; }
.cs-sdk-page .pricing-enterprise .pricing-action { flex-shrink: 0; min-width: 180px; }
.cs-sdk-page #faq { display: block; }
.cs-sdk-page #faq > .pricing-headrow { margin: 0 0 var(--sdk-space-lg); }
.cs-sdk-page #faq h2 { margin: .5rem auto 0; }
.cs-sdk-page .pricing-faq { display: block; width: 100%; max-width: 1000px; margin-inline: auto; }
.cs-sdk-page .pricing-faq .sdk-disclosure > summary { min-height: 80px; font-size: 1rem; font-weight: 600; }
.cs-sdk-page .pricing-faq .sdk-disclosure p { max-width: 70ch; margin: 0; padding: 0 3rem 1.5rem 0; font-size: .9375rem; }
.cs-sdk-page .pricing-scope { padding-block: 2rem; border: 0; font-size: .8125rem; line-height: 1.7; }

@media (max-width: 1000px) {
  .cs-sdk-page .pricing-card { padding: 1.5rem; }
  .cs-sdk-page .pricing-card .pricing-plan-line { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .cs-sdk-page .pricing-card .pricing-purpose { min-height: 4.8em; }
  .cs-sdk-page .api-links > a { padding: 1.5rem; }
}
@media (max-width: 800px) {
  .cs-sdk-page .sdk-page-nav { gap: 1rem; }
  .cs-sdk-page .sdk-page-nav a { padding-inline: .875rem; }
  .cs-sdk-page .sdk-page-nav > div { width: 100%; }
}
@media (max-width: 700px) {
  .cs-sdk-page { --sdk-space-lg: 1.75rem; --sdk-space-section: 3.5rem; }
  .cs-sdk-page main :is(section[id], .pricing-plans) { scroll-margin-top: 3.5rem; }
  .cs-sdk-page .hero { padding-block: 4rem 3rem; gap: 2rem; }
  .cs-sdk-page #build h1 { font-size: clamp(2rem, 7vw, 2.75rem); }
  .cs-sdk-page :is(.section-head, .pricing-headrow, .split > div:first-child) { gap: 1rem; text-align: center; }
  .cs-sdk-page :is(.section-head h2, .pricing-headrow h2, .split h2) { font-size: 2rem; }
  .cs-sdk-page :is(.section-head > p, .pricing-headrow > p, .split > div:first-child > p) { max-width: 70ch; }
  .cs-sdk-page .sdk-page-nav { min-height: 48px; }
  .cs-sdk-page .sdk-page-nav[data-scroll-reveal] { padding-inline: 16px; }
  .cs-sdk-page .capability-tabs { gap: .5rem; }
  .cs-sdk-page .capability-tabs button { padding-inline: .875rem; }
  .cs-sdk-page .capability-panel { padding: 1.5rem; }
  .cs-sdk-page .capability-stage blockquote { min-height: 0; }
  .cs-sdk-page .capability-panel > .connect-scope { font-size: .8125rem; }
  .cs-sdk-page .sdk-disclosure > summary { font-size: 1rem; min-height: 72px; }
  .cs-sdk-page .journey-steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .cs-sdk-page .journey-steps p { max-width: 65ch; }
  .cs-sdk-page .journey-resources { flex-wrap: wrap; gap: 1rem; }
  .cs-sdk-page .client-choices { grid-template-columns: 1fr; }
  .cs-sdk-page .connection-identity { text-align: left; }
  .cs-sdk-page .connection-detail { margin-top: 2rem; }
  .cs-sdk-page .sdk-workflow { padding: 1.5rem 1rem; }
  .cs-sdk-page .sdk-workflow .sdk-story h3 { font-size: 1.25rem; }
  .cs-sdk-page .sdk-workflow .sdk-story p { font-size: .9375rem; }
  .cs-sdk-page .sdk-workflow .sdk-mobile-hint { font-size: .75rem; }
  .cs-sdk-page .sdk-controls { flex-wrap: wrap; gap: .5rem .875rem; }
  .cs-sdk-page .sdk-controls .sdk-scenes { order: -1; flex-basis: 100%; width: 100%; }
  .cs-sdk-page .sdk-controls .sdk-scenes button { min-width: 0; max-width: none; }
  .cs-sdk-page .api-links { grid-template-columns: 1fr; }
  .cs-sdk-page .api-links > a { padding: 1.5rem; }
  .cs-sdk-page .api-links strong { font-size: 1.375rem; }
  .cs-sdk-page .pricing-hero { padding-block: 4rem 2.5rem; }
  .cs-sdk-page .pricing-cards { grid-template-columns: 1fr; gap: 1.5rem; }
  .cs-sdk-page .pricing-card { padding: 1.75rem; }
  .cs-sdk-page .pricing-card .pricing-plan-line { flex-direction: row; align-items: center; }
  .cs-sdk-page .pricing-card .pricing-purpose { min-height: 0; }
  .cs-sdk-page .pricing-card .pricing-price { margin-top: 1.5rem; }
  .cs-sdk-page .pricing-two { grid-template-columns: 1fr; gap: 2rem; }
  .cs-sdk-page .pricing-two > article + article { border-left: 0; border-top: 1px solid var(--sdk-line); padding: 2rem 0 0; }
  .cs-sdk-page .pricing-teams { grid-template-columns: 1fr; gap: 1rem; }
  .cs-sdk-page .pricing-enterprise { align-items: center; }
  .cs-sdk-page .pricing-enterprise .pricing-action { max-width: none; }
  .cs-sdk-page .pricing-faq .sdk-disclosure p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-sdk-page .sdk-page-nav[data-scroll-reveal] { transition: none; transform: none; }
  .cs-sdk-page .sdk-page-nav a { transition: none; }
  .cs-sdk-page .example-stack[data-stacking] .example-card { position: relative; top: auto; }
}
@media print {
  .cs-sdk-page .sdk-page-nav[data-scroll-reveal] { position: static; opacity: 1; visibility: visible; transform: none; }
  .cs-sdk-page .example-stack[data-stacking] .example-card { position: relative; top: auto; box-shadow: none; }
  .cs-sdk-page .sdk-page-nav { position: static; }
  .cs-sdk-page .sdk-chapter-paper::before { display: none; }
  .cs-sdk-page .sdk-disclosure::details-content { display: block; content-visibility: visible; }
}

/* Work and SDK scenarios share one tab bar and content surface. */
.cs-sdk-page .capability-panel [hidden] { display: none; }
.cs-sdk-page .capability-audience-label { display: block; margin-bottom: .5rem; }
.cs-sdk-page .capability-sdk-content .capability-stage p { margin: .75rem 0 0; }
.cs-sdk-page .capability-sdk-content .capability-stage blockquote { margin: .75rem 0 0; min-height: 0; }
.cs-sdk-page .capability-sdk-why { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--sdk-line); }
.cs-sdk-page .capability-sdk-why p { margin: .75rem 0 0; font-size: .9375rem; line-height: 1.75; color: var(--sdk-muted); }