/* Content pages in the approved B2B design 4 visual system. Keep the
   shared site shell outside this scope; the header and footer own their CSS. */
.b2b-content-page {
  --bg: #fff;
  --graphite: #fff;
  --surface: #f3f6f8;
  --surface-2: #e8eef2;
  --panel: #fff;
  --line: #d5dde3;
  --line-soft: #dfe5e9;
  --text: #182128;
  --text-2: #58636d;
  --text-3: #6d7881;
  --muted: #58636d;
  --accent: #d63819;
  --accent-hot: #aa2b14;
  --accent-ink: #fff;
  --r: 5px;
  color: var(--text);
  background: var(--bg);
  font-family: var(--f-body, inherit);
}

html[data-theme="dark"] .b2b-content-page {
  --bg: #131a20;
  --graphite: #182128;
  --surface: #1b242b;
  --surface-2: #25313a;
  --panel: #182128;
  --line: #3b4953;
  --line-soft: #303d46;
  --text: #edf1f3;
  --text-2: #bdc8d0;
  --text-3: #9eabb4;
  --muted: #bdc8d0;
  --accent: #ff5733;
  --accent-hot: #ff7658;
  --accent-ink: #15191d;
}

.b2b-content-page,
.b2b-content-page *,
.b2b-content-page *::before,
.b2b-content-page *::after { box-sizing: border-box; }
.b2b-content-page a { color: inherit; }
.b2b-content-page a:focus-visible,
.b2b-content-page button:focus-visible,
.b2b-content-page input:focus-visible,
.b2b-content-page select:focus-visible,
.b2b-content-page textarea:focus-visible,
.b2b-content-page summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.b2b-content-page .phead {
  border-color: var(--line);
  background: var(--surface);
}
.b2b-content-page .phead h1,
.b2b-content-page h1,
.b2b-content-page h2,
.b2b-content-page h3 { color: var(--text); }
.b2b-content-page .phead__lead,
.b2b-content-page .prose p,
.b2b-content-page .prose li,
.b2b-content-page .prose dd { color: var(--text-2); }
.b2b-content-page .crumbs { color: var(--text-3); }
.b2b-content-page .crumbs a,
.b2b-content-page .prose a,
.b2b-content-page .link-arrow { color: var(--accent); }
.b2b-content-page .prose h2 { border-color: var(--line); }
.b2b-content-page .prose ul,
.b2b-content-page .prose ol { color: var(--text-2); }
.b2b-content-page .prose li::marker { color: var(--accent); }
.b2b-content-page .prose dl { border: 1px solid var(--line); background: var(--panel); }
.b2b-content-page .prose dt { color: var(--text-3); }
.b2b-content-page .prose dd { color: var(--text); }
.b2b-content-page .btn--ghost {
  color: var(--text);
  border-color: var(--line);
  background: var(--panel);
}
.b2b-content-page .btn--ghost:hover { background: var(--surface-2); }

/* Service offers and related project cards */
.b2b-content-page .service-offer {
  --offer-line: var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.b2b-content-page .service-offer__card,
.b2b-content-page .related-projects article {
  border-color: var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.b2b-content-page .service-offer__card p,
.b2b-content-page .related-projects article p { color: var(--text-2); }
.b2b-content-page .service-offer__note { opacity: 1; }
.b2b-content-page .service-offer__eyebrow,
.b2b-content-page .service-offer__link,
.b2b-content-page .related-projects h3 a:hover { color: var(--accent); }
.b2b-content-page .related-projects { border-color: var(--line); }

/* Software and project details */
.b2b-content-page .cards .card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.b2b-content-page .cards .card__in { background: transparent; }
.b2b-content-page .project-case__mark,
.b2b-content-page .project-case__passport,
.b2b-content-page .project-case__passport > div + div,
.b2b-content-page .project-case__actions { border-color: var(--line); }
.b2b-content-page .project-case__mark i { border-color: var(--line); background: var(--surface); }
.b2b-content-page .project-case__passport span { color: var(--text-3); }
.b2b-content-page .project-case__passport strong { color: var(--text); }
.b2b-content-page .project-case__work { color: var(--text-2); }

/* Commerce information */
.b2b-content-page--commerce .prose {
  max-width: 76ch;
  margin: clamp(1.75rem, 4vw, 3rem) auto;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.b2b-content-page--commerce .prose h2:first-child { margin-top: 0; }
.b2b-content-page--commerce .commerce-nav,
.b2b-content-page--commerce .commerce-navigation {
  border-color: var(--line);
  background: var(--surface);
}

/* Request brief */
.b2b-content-page--request .brief-page {
  color: var(--text);
  background: var(--bg);
}
.b2b-content-page--request .brief-form,
.b2b-content-page--request .brief-option { border-color: var(--line); }
.b2b-content-page--request .brief-form { background: var(--surface); }
.b2b-content-page--request .brief-field input:not([type=checkbox]),
.b2b-content-page--request .brief-field select,
.b2b-content-page--request .brief-field textarea,
.b2b-content-page--request .brief-option { color: var(--text); background: var(--panel); }
.b2b-content-page--request .brief-field > span,
.b2b-content-page--request .brief-fieldset legend,
.b2b-content-page--request .brief-step h2,
.b2b-content-page--request .brief-heading h1 { color: var(--text); }
.b2b-content-page--request .brief-heading > p:last-child,
.b2b-content-page--request .brief-hint,
.b2b-content-page--request .brief-note,
.b2b-content-page--request .brief-progress,
.b2b-content-page--request .brief-back { color: var(--text-2); }

/* Document viewers retain their embedded viewer controls and download links. */
.b2b-content-page--viewer { color: var(--text); background: var(--bg); }
.b2b-content-page--viewer .crumbs { margin-bottom: 1rem; }
.b2b-content-page--viewer .document-viewer-page__top,
.b2b-content-page--viewer .cad-viewer-page__top { color: var(--text); }
.b2b-content-page--viewer .document-viewer-page__top > div:first-child,
.b2b-content-page--viewer .cad-viewer-page__top > div:first-child {
  min-width: 0;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.b2b-content-page--viewer .document-viewer-page__top > div:first-child > p:last-child,
.b2b-content-page--viewer .cad-viewer-page__top > div:first-child > p:last-child {
  margin-top: .45rem;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.b2b-content-page--viewer .document-viewer-frame,
.b2b-content-page--viewer .cad-viewer-frame {
  border-color: var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.b2b-content-page--viewer .link-arrow::after { content: none; }

/* BIM help/product use their existing layouts with the same page palette. */
.b2b-content-page--plugin-help,
.b2b-content-page--plugin-product {
  --bg: #fff;
  --panel: #fff;
  --line: #d5dde3;
  --text: #182128;
  --muted: #58636d;
  --accent: #d63819;
  color: var(--text);
  background: var(--bg);
}
html[data-theme="dark"] .b2b-content-page--plugin-help,
html[data-theme="dark"] .b2b-content-page--plugin-product {
  --bg: #131a20;
  --panel: #182128;
  --line: #3b4953;
  --text: #edf1f3;
  --muted: #bdc8d0;
  --accent: #ff5733;
}
.b2b-content-page--plugin-help .plugin-help__toc a,
.b2b-content-page--plugin-help .plugin-help__card,
.b2b-content-page--plugin-help .plugin-help__video video {
  border-radius: var(--r);
}

@media (max-width: 700px) {
  .b2b-content-page--commerce .prose { margin-block: 1.5rem; padding: 1.1rem; }
  .b2b-content-page--viewer .document-viewer-page__actions,
  .b2b-content-page--viewer .cad-viewer-page__actions { width: 100%; }
  .b2b-content-page--viewer .document-viewer-page__actions .btn,
  .b2b-content-page--viewer .cad-viewer-page__actions .btn { flex: 1 1 auto; }
}