/* Shared deep-blue website palette. Manuals consume these tokens without the marketing layout.
   Keep media geometry in the existing component styles; source images stay intact. */
:root {
  --site-navy: #081625;
  --site-hero: #071321;
  --site-paper: #081725;
  --site-card: #102438;
  --site-soft: #0c1e30;
  --site-ink: #eaf2fc;
  --site-muted: #b1c3d8;
  --site-line: #2b445e;
  --site-teal: #7eb8ff;
  --site-teal-hover: #b2d2ff;
  --site-mint: #8fc9ff;
  --site-action: #2865ad;
  --site-action-hover: #3476c2;
  --site-action-ink: #ffffff;
  --site-on-dark: #eaf2fc;
  --site-muted-on-dark: #b1c3d8;
  --site-font: Inter, "Segoe UI", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --site-radius: 12px;
  --site-shadow: 0 14px 36px rgba(0, 6, 16, .18);
}

@media screen {
  :root { color-scheme: dark; }
  body.site-shell {
    color-scheme: dark;
    --bg: var(--site-paper);
    --panel: var(--site-card);
    --panel2: var(--site-soft);
    --surface: var(--site-card);
    --ink: var(--site-ink);
    --muted: var(--site-muted);
    --line: var(--site-line);
    --blue: var(--site-teal);
    --cyan: var(--site-teal);
    --green: #8cdbc4;
    --orange: #efc27c;
    --red: #ffadb7;
    --shadow: var(--site-shadow);
    --story-accent: var(--site-teal);
    --story-accent-2: var(--site-teal);
    --cgs-rose: var(--site-teal);
    --cgs-cyan: var(--site-teal);
    --cgs-line: var(--site-line);
    --cgs-panel: var(--site-card);
    --paper: var(--site-paper);
    --paper-ink: var(--site-ink);
    --paper-muted: var(--site-muted);
    --paper-line: var(--site-line);
    --brand-teal: var(--site-mint);
    background: var(--bg);
    color: var(--ink);
    font-family: var(--site-font);
  }

  /* One reading width, navigation and footer across every marketing entry. */
  body.site-shell .wrap { width: min(1240px, calc(100% - 72px)); }
  body.site-shell .nav {
    --ink: var(--site-on-dark);
    --muted: var(--site-muted-on-dark);
    --line: #35505d;
    --panel: #112b39;
    background: var(--site-navy);
    color: var(--ink);
    border-bottom-color: #27414d;
  }
  body.site-shell .nav-inner { min-height: 82px; }
  body.site-shell .brand small { color: var(--site-muted-on-dark); font-size: 10px; letter-spacing: .15em; }
  body.site-shell .brand span:last-child { display: block; }
  body.site-shell .nav-links { gap: 26px; }
  body.site-shell .nav-links a { color: var(--site-muted-on-dark); font-size: 14px; }
  body.site-shell .nav-links a:is(:hover,[aria-current=page]) { color: #fff; }
  body.site-shell .nav-links a[aria-current=page]:after { background: var(--site-mint); }
  body.site-shell .nav-links a:last-child { padding: 9px 17px; border: 1px solid #597680; border-radius: 6px; color: #fff; }
  body.site-shell .menu { color: #fff; background: #112b39; border-color: #597680; }
  body.site-shell .product-toc { top: 82px; background: var(--site-card); border-color: var(--site-line); }
  body.site-shell .product-toc a { color: var(--site-muted); }
  body.site-shell .product-toc a:is(:hover,[aria-current=location]),
  body.site-shell .product-toc .toc-download { color: var(--site-teal); }
  body.site-shell .product-toc a[aria-current=location] { box-shadow: inset 0 -2px var(--site-teal); }
  body.site-shell .footer { margin: 0; padding: 48px 0; color: var(--site-muted-on-dark); background: var(--site-hero); border-color: #27414d; }
  body.site-shell .footer strong { color: #fff; font-size: 20px; }
  body.site-shell .footer p { color: var(--site-muted-on-dark); margin: 6px 0 19px; }
  body.site-shell .footer small { font-size: 11px; }
  body.site-shell .footer a { color: var(--site-muted-on-dark); }
  body.site-shell .footer a:hover { color: var(--site-mint); }

  /* Typography inherits the current surface, including the dark introductory band. */
  body.site-shell main :is(h1,h2,h3,h4,strong) { color: var(--ink); }
  body.site-shell main :is(p,li,dt,dd) { color: var(--muted); }
  body.site-shell main :is(.eyebrow,.kicker,.story-kicker,.suite-kicker,.cgs-kicker,.cgs-eyebrow,
      .selection-input,.evidence-number,.step,.tag) { color: var(--story-accent); }
  body.site-shell :is(.text-link,.suite-arrow,.resource-links a,.selection-actions>a:not(.btn),
      .verified-value-links a,.source-note a,.resource-card a:not(.btn)) { color: var(--story-accent); }
  body.site-shell :is(.story-heading h2,.cgs-section__head h2,.section-head h2) { font-size: clamp(28px,3.1vw,40px); line-height: 1.35; }
  body.site-shell :is(.story-hero h1,.selection-hero h1,.cgs-hero__copy h1) { font-size: clamp(40px,4.2vw,60px); line-height: 1.22; }
  body.site-shell :is(.story-hero h1 span,.selection-hero h1 span,.cgs-hero__copy h1 span,.gradient) { color: var(--story-accent); background: none; }

  body.site-shell :is(.suite-hero,.story-hero,.selection-hero,.cgs-hero,.resource-hero,.manual-hero) {
    --ink: var(--site-on-dark);
    --muted: var(--site-muted-on-dark);
    --panel: var(--site-card);
    --panel2: var(--site-soft);
    --line: var(--site-line);
    --story-accent: var(--site-mint);
    --story-accent-2: var(--site-mint);
    --cgs-cyan: var(--site-mint);
    --cgs-rose: var(--site-mint);
    --cgs-line: var(--site-line);
    color: var(--ink);
    background: var(--site-hero);
    border-color: #27414d;
  }
  body.site-shell .selection-board { padding-top: 36px; }
  body.site-shell .manual-hero .portal-intro { padding-block: 56px 48px; }
  body.site-shell .cgs-hero:after { background: rgba(89,158,255,.08); }
  body.site-shell :is(.proofs,.suite-hero-label,.suite-principles span,.suite-hero-visual figcaption,
      .suite-visual-note small) { color: var(--muted); }
  body.site-shell .suite-hero .suite-kicker { color: var(--site-mint); }
  body.site-shell .suite-quiet { color: var(--site-teal); }
  body.site-shell .suite-hero-visual { background: var(--site-card); border-color: var(--site-line); }
  body.site-shell .suite-hero-visual figcaption b { color: var(--site-mint); }
  body.site-shell .suite-hero-visual figcaption a { color: var(--site-on-dark); }
  body.site-shell .suite-visual-note { background: var(--site-soft); border-color: var(--site-teal); }
  body.site-shell .resource-hero .lead { color: var(--site-muted-on-dark); }
  body.site-shell .cgs-hero__facts li { color: var(--site-muted-on-dark); background: #112734; border-color: #35515e; }
  body.site-shell :is(.release-filter a,.product-jumps a) { color: var(--ink); background: var(--panel); border-color: var(--line); }
  body.site-shell :is(.release-filter a,.product-jumps a):hover { color: var(--story-accent); border-color: var(--story-accent); }

  /* Subtle navy layers distinguish content without introducing bright page surfaces. */
  body.site-shell :is(.story-section-muted,.story-section-video,.cgs-section:nth-of-type(even),
      .cgs-section--tinted,.section.alt,.suite-soft,.suite-dark,.visual-section) {
    color: var(--ink); background: var(--site-soft); border-color: var(--line);
  }
  body.site-shell :is(.selection-card,.difference-card,.route-card,.fit-card,.boundary-fold,
      .workflow-media article,.review-capabilities article,.clean-flow,.scenario-grid article,
      .feature-card,.boundary-card,.release-card,.resource-card,.enterprise-roles article,
      .cgs-advantage-grid article,.cgs-feature-card,.cgs-capability-grid>article,
      .cgs-evidence-grid>article,.cgs-evidence-grid>figure,.cgs-workflow__step,.cgs-license-card,
      .cgs-access-grid article,.cgs-access-grid figure,.cgs-boundary-grid>article,
      .verified-value-grid article,.suite-start-grid>a,.manual-library article) {
    --select-accent: var(--site-teal);
    background: var(--site-card); border-color: var(--line); border-radius: var(--site-radius); box-shadow: var(--site-shadow);
  }
  body.site-shell :is(.selection-card,.cgs-advantage-grid article,.cgs-feature-card) { border-top-color: var(--site-teal); }
  body.site-shell :is(.difference-card>span,.route-card>span,.fit-card>span,.scenario-grid span,
      .clean-flow span,.review-capabilities span,.workflow-media span,.verified-value-grid article>span,
      .cgs-feature-card>span,.cgs-feature-card>b,.cgs-advantage-grid article>span,.cgs-capability-grid>article>span,
      .cgs-workflow__step>span,.cgs-workflow__step>b,.cgs-license-card>span,.suite-value-grid article>span) { color: var(--site-teal); }
  body.site-shell :is(.selection-card dt,.selection-card dd,.plain-points,.cgs-list,
      .boundary-fold summary span,.compare-help span) { color: var(--muted); }
  body.site-shell :is(.boundary-fold summary b,.verified-value-grid h3) { color: var(--ink); }
  body.site-shell :is(.boundary-fold summary i,.cgs-workflow__step:after) { color: var(--site-teal); }
  body.site-shell :is(.object-tags b,.chip,.package-latest,.status-pill) { color: var(--site-teal); background: var(--site-soft); border-color: var(--site-line); }
  body.site-shell :is(.clean-flow,.review-capabilities,.evidence-row,.cgs-section,.cgs-spotlight+.cgs-spotlight,
      .selection-card dl,.selection-card dl div,.suite-value-grid,.suite-value-grid article,.enterprise-flow article) { border-color: var(--line); }
  body.site-shell :is(.resource-note,.source-note,.cgs-callout,.cgs-trace-proof,.enterprise-flow article,
      .suite-network,.compare-help) { background: var(--site-soft); color: var(--muted); border-color: var(--site-line); }
  body.site-shell :is(.cta,.cgs-cta,.selection-bridge) { color: var(--ink); background: var(--site-card); border-color: var(--site-line); border-radius: var(--site-radius); box-shadow: none; }
  body.site-shell .selection-bridge a { color: var(--site-teal); }
  body.site-shell .suite-dark .suite-kicker { color: var(--site-teal); }
  body.site-shell .suite-dark .suite-quiet { color: var(--site-teal); }
  body.site-shell :is(.suite-overline small,.network-line) { color: var(--muted); }
  body.site-shell .fit-card-good li:before { color: var(--site-teal); }
  body.site-shell :is(.suite-dark .suite-section-head p,.cgs-trace-proof__copy p:not(.cgs-eyebrow),.cgs-cta p:not(.cgs-kicker)) { color: var(--muted); }

  /* Homepage and resource components previously used independent light palettes. */
  body.site-shell :is(.suite-product,.network-node,.network-clients span) {
    color: var(--ink); background: var(--site-card); border-color: var(--line);
  }
  body.site-shell .suite-product-image { background: var(--site-soft); }
  body.site-shell .suite-product-image>span { color: var(--site-muted); background: var(--site-card); border-color: var(--line); }
  body.site-shell .suite-product:hover { border-color: #527ca5; }
  body.site-shell .suite-product .suite-arrow { border-color: var(--line); }
  body.site-shell .suite-tags li { color: var(--site-muted); background: var(--site-soft); border-color: var(--line); }
  body.site-shell :is(.suite-overline>span,.suite-contact a,.suite-start-grid span,.resource-card>span,.enterprise-flow span) { color: var(--site-teal); }
  body.site-shell .suite-contact { border-color: var(--line); }
  body.site-shell .network-node :is(small,span) { color: var(--site-muted); }
  body.site-shell .network-node.server { background: var(--site-action); }
  body.site-shell .network-node.server :is(small,span) { color: var(--site-on-dark); }
  body.site-shell.resource-page .release-card :is(h3,strong) { color: var(--site-ink); }
  body.site-shell.resource-page .release-card :is(p,.release-meta) { color: var(--site-muted); }
  body.site-shell.resource-page .release-card :is(.tag,a.text-link) { color: var(--site-teal); }
  body.site-shell.resource-page details { border-color: var(--line); }
  body.site-shell .release-card details summary { color: var(--site-ink); }
  body.site-shell .download-heading p { color: var(--site-muted); }
  body.site-shell .download-help-grid article { border-color: var(--line); }
  body.site-shell .resource-card ul { color: var(--site-muted); }
  body.site-shell .qr-surface { color: var(--site-muted); background: var(--site-soft); border-color: var(--line); }
  body.site-shell .qr-surface img { background: #fff; }
  body.site-shell .skip-link { color: var(--site-ink); background: var(--site-card); }

  /* Shared buttons, focus treatment and comparison tables. */
  body.site-shell .btn { border-radius: 6px; font-size: 14px; min-height: 48px; box-shadow: none; }
  body.site-shell .btn.primary { background: var(--site-action); border-color: var(--site-action); color: var(--site-action-ink); }
  body.site-shell .btn.primary:hover { background: var(--site-action-hover); border-color: var(--site-action-hover); }
  body.site-shell .btn.secondary { background: transparent; color: var(--story-accent); border-color: #527492; }
  body.site-shell :is(a,button,summary):focus-visible { outline: 3px solid var(--story-accent); outline-offset: 4px; }
  body.site-shell .table-scroll { border: 1px solid var(--line); border-radius: var(--site-radius); }
  body.site-shell .compare { background: var(--site-card); border-color: var(--line); }
  body.site-shell .compare th { color: var(--site-ink); background: var(--site-soft); border-color: var(--line); }
  body.site-shell .compare td { color: var(--muted); background: var(--site-card); border-color: var(--line); }
  body.site-shell .compare td:first-child { color: var(--ink); background: var(--site-soft); }
  body.site-shell .compare th:first-child { background: var(--site-soft); }
  body.site-shell .compare tbody tr:hover td { background: #17334e; }
  body.site-shell .compare a { color: var(--site-teal); }
  body.site-shell .compare small { color: var(--muted); }
  body.site-shell .release-hash { color: var(--muted); background: var(--site-paper); }

  /* Media frames and captions adapt to their surrounding surface, without touching images. */
  body.site-shell :is(.story-proof,.wide-proof,.single-proof,.mode-card,.integration-card,
      .delivery-showcase figure,.media-pair figure,.hardware-grid figure,.cgs-screenshot,.cgs-hero__media) {
    background: var(--panel); border-color: var(--line); border-radius: var(--site-radius); box-shadow: var(--site-shadow);
  }
  body.site-shell main figcaption { color: var(--ink); background: var(--panel); border-color: var(--line); }
  body.site-shell main figcaption :is(b,strong) { color: var(--ink); }
  body.site-shell main figcaption span { color: var(--muted); }
  body.site-shell :is(.cgs-screenshot>a,.cgs-hero__media>a,.cgs-evidence-grid--accounts .cgs-screenshot>a) { background: var(--panel); }
  body.site-shell :is(.integration-card img,.wide-proof img,.delivery-showcase figure img) { background: var(--panel); }
  body.site-shell :is(.video-toolbar,.video-chapters) { color: var(--site-muted-on-dark); background: var(--site-navy); border-color: #35515e; }
  body.site-shell .video-toolbar button { color: var(--site-on-dark); background: #15313e; border-color: #597680; }
  body.site-shell .video-chapters span { color: var(--site-muted-on-dark); border-color: #35515e; }
  body.site-shell .video-stage video { color: var(--site-on-dark); }
  body.site-shell .image-dialog { --ink: var(--site-on-dark); --muted: var(--site-muted-on-dark); --line: #35515e; color: var(--ink); background: var(--site-hero); }
  body.site-shell .image-dialog :is(strong,.dialog-caption) { color: var(--site-on-dark); }

  /* The manual library now follows the same card and action patterns as product selection. */
  body.site-shell .manual-section { padding-block: 64px; }
  body.site-shell .manual-library { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
  body.site-shell .manual-library article { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); }
  body.site-shell .manual-library h3 { margin: 0 0 14px; font-size: 23px; }
  body.site-shell .manual-library p { margin: 0; font-size: 14px; line-height: 1.9; }
  body.site-shell .manual-library .actions { align-items: center; margin-top: auto; padding-top: 24px; }
  body.site-shell .manual-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; padding-left: 22px; }
  body.site-shell .manual-steps li { padding-left: 6px; line-height: 1.9; }
  body.site-shell .manual-steps li::marker { color: var(--site-teal); font-weight: 700; }
  body.site-shell .manual-top-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

  body.site-shell .access-card { color: var(--ink); border-color: var(--line); background: var(--panel); border-radius: var(--site-radius); box-shadow: var(--site-shadow); }
  body.site-shell .access-card .eyebrow { color: var(--site-teal); }
  body.site-shell .access-return { margin-left: auto; color: var(--site-muted-on-dark); text-underline-offset: 5px; font-size: 14px; }

  @media (max-width: 1050px) {
    body.site-shell .wrap { width: calc(100% - 48px); }
    body.site-shell .nav-links { gap: 15px; }
  }
  @media (max-width: 940px) {
    body.site-shell .nav-links { top: 82px; background: var(--site-navy); border-color: #35505d; }
    body.site-shell .nav-links a { padding-block: 8px; }
    body.site-shell .nav-links a:last-child { border: 0; padding: 8px 0; }
    body.site-shell .nav-links a[aria-current=page]:after { bottom: 0; right: auto; width: 24px; }
  }
  @media (max-width: 680px) {
    body.site-shell .wrap { width: calc(100% - 36px); }
    body.site-shell .nav-inner { min-height: 70px; }
    body.site-shell .nav-links,body.site-shell .product-toc { top: 70px; }
    body.site-shell :is(.story-hero h1,.selection-hero h1,.cgs-hero__copy h1) { font-size: 35px; }
    body.site-shell .manual-hero .portal-intro { padding-block: 38px; }
    body.site-shell .manual-section { padding-block: 44px; }
    body.site-shell :is(.manual-library,.manual-steps) { grid-template-columns: 1fr; }
    body.site-shell .manual-library article { padding: 23px; }
    body.site-shell .footer { padding-block: 33px; }
  }
  @media (max-width: 620px) {
    body.site-shell .product-toc .toc-download { background: linear-gradient(90deg, transparent, var(--site-card) 24px); }
  }
}