/* A quiet, continuous canvas for the service, examples and privacy pages.
   Dark process illustrations remain contained so their stages stay legible. */
.content-page,
.privacy-page {
  --comfort-ink: #1d302e;
  --comfort-muted: #4d6159;
  --comfort-accent: #335d43;
  --comfort-canvas: #ecf0e9;
  --comfort-canvas-alt: #e8eee7;
  --comfort-card: #f8faf5;
  background: var(--comfort-canvas);
}

.content-page .site-header,
.privacy-page .site-header {
  background: rgba(236, 240, 233, .96);
  border-color: rgba(29, 48, 46, .15);
  color: var(--comfort-ink);
}
.content-page .site-nav a[aria-current="page"],
.privacy-page .site-nav a[aria-current="page"] {
  color: var(--comfort-accent);
}
.content-page .site-header .nav-contact,
.privacy-page .site-header .nav-contact {
  border-color: rgba(29, 48, 46, .4);
}
.content-page .site-header .nav-contact:hover,
.privacy-page .site-header .nav-contact:hover {
  background: var(--comfort-accent);
  border-color: var(--comfort-accent);
  color: #fff;
}

.content-page .cp-hero,
.privacy-page .privacy-hero {
  background: radial-gradient(circle at 76% 28%, rgba(167, 192, 170, .2), transparent 39%), var(--comfort-canvas);
  color: var(--comfort-ink);
}
.content-page .cp-hero::before,
.privacy-page .privacy-hero::after {
  background-image: linear-gradient(rgba(51, 93, 67, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 93, 67, .05) 1px, transparent 1px);
}
.content-page .cp-breadcrumb,
.privacy-page .privacy-breadcrumb {
  color: #596e63;
}
.content-page .cp-breadcrumb span[aria-hidden],
.content-page .cp-breadcrumb a:hover,
.privacy-page .privacy-breadcrumb span[aria-hidden],
.privacy-page .privacy-breadcrumb a:hover,
.content-page .cp-hero h1 em,
.privacy-page .privacy-hero h1 span,
.content-page .cp-hero .cp-eyebrow,
.privacy-page .privacy-kicker {
  color: var(--comfort-accent);
}
.content-page .cp-hero .cp-eyebrow::before,
.privacy-page .privacy-kicker::before {
  background: var(--comfort-accent);
  box-shadow: 0 0 0 6px rgba(51, 93, 67, .1);
}
.content-page .cp-hero-lead,
.privacy-page .privacy-lead {
  color: var(--comfort-muted);
}
.content-page .cp-hero .text-link {
  border-color: rgba(29, 48, 46, .5);
}
.content-page .cp-hero .text-link:hover {
  color: var(--comfort-accent);
}
.content-page .cp-hero-facts span {
  border-color: rgba(29, 48, 46, .18);
  color: #42584d;
}
.content-page .cp-hero-facts span::before {
  background: var(--comfort-accent);
}
.content-page .cp-hero .button-lime {
  background: #d6e9bd;
  color: var(--comfort-ink);
}
.content-page .cp-hero .button-lime:hover {
  background: #c9e2ac;
  box-shadow: 0 12px 30px rgba(51, 93, 67, .12);
}
.content-page .cp-figure {
  color: #f7faf3;
}

.content-page .site-footer.section-dark,
.privacy-page .site-footer.section-dark {
  background: #e4ebe3;
  color: var(--comfort-ink);
}
.content-page .site-footer .footer-main > div:first-child p,
.privacy-page .site-footer .footer-main > div:first-child p,
.content-page .site-footer .footer-bottom,
.privacy-page .site-footer .footer-bottom {
  color: var(--comfort-muted);
}
.content-page .site-footer .footer-links > div > span,
.privacy-page .site-footer .footer-links > div > span {
  color: #5a6e61;
}
.content-page .site-footer .footer-links a,
.privacy-page .site-footer .footer-links a {
  color: var(--comfort-ink);
}
.content-page .site-footer .footer-links a:hover,
.privacy-page .site-footer .footer-links a:hover,
.content-page .site-footer .footer-bottom a,
.privacy-page .site-footer .footer-bottom a,
.privacy-page .privacy-footer-link {
  color: var(--comfort-accent) !important;
}
.content-page .site-footer .footer-bottom,
.privacy-page .site-footer .footer-bottom {
  border-color: rgba(29, 48, 46, .17);
}

@media (max-width: 700px) {
  .content-page .site-nav,
  .privacy-page .site-nav {
    background: #edf2ea;
    border-color: rgba(29, 48, 46, .17);
    box-shadow: 0 20px 40px rgba(29, 48, 46, .11);
  }
  .content-page .site-nav > a:not(.nav-contact),
  .privacy-page .site-nav > a:not(.nav-contact) {
    border-color: rgba(29, 48, 46, .15);
  }
  .content-page .menu-toggle,
  .privacy-page .menu-toggle {
    border-color: rgba(29, 48, 46, .33);
  }
  .content-page .menu-toggle span,
  .privacy-page .menu-toggle span {
    background: var(--comfort-ink);
  }
}

.content-page .cp-section-white,
.content-page .cp-section-lavender,
.content-page .cp-section-dark,
.content-page .real-solutions,
.content-page .process-lab,
.privacy-page .privacy-main {
  color: var(--comfort-ink);
}

.content-page .cp-section-white,
.privacy-page .privacy-main {
  background: var(--comfort-canvas);
}

.content-page .cp-section-lavender,
.content-page .cp-section-dark,
.content-page .process-lab {
  background: var(--comfort-canvas-alt);
}

.content-page .cp-section-dark .cp-section-label {
  border-color: rgba(29, 48, 46, .22);
}
.content-page .cp-section-dark .cp-eyebrow,
.content-page .cp-section-dark .cp-card-label {
  color: var(--comfort-accent);
}
.content-page .cp-section-dark .cp-eyebrow::before {
  background: var(--comfort-accent);
  box-shadow: 0 0 0 6px rgba(51, 93, 67, .1);
}
.content-page .cp-section-dark .cp-heading p,
.content-page .cp-section-dark .cp-case p,
.content-page .cp-section-dark .cp-card p {
  color: var(--comfort-muted);
}
.content-page .cp-section-dark .cp-card {
  background: var(--comfort-card);
  border-color: rgba(29, 48, 46, .13);
}
.content-page .cp-section-dark .cp-card-icon {
  background: #dfead9;
  color: var(--comfort-accent);
}
.content-page .cp-section-dark .cp-card a {
  color: var(--comfort-accent);
}
.content-page .cp-section-dark .button-lime {
  background: var(--comfort-accent);
  color: #fff;
}
.content-page .cp-section-dark .button-lime:hover {
  background: #254a35;
  box-shadow: 0 12px 30px rgba(29, 48, 46, .12);
}
.content-page .cp-section-dark .cp-flowboard {
  color: #f5f8f1;
}

.content-page .cp-related {
  background: #e4ebe3;
}
.content-page .cp-cta,
.privacy-page .privacy-contact {
  background: #dfeadd;
  color: var(--comfort-ink);
}
.content-page .cp-cta .cp-eyebrow,
.privacy-page .privacy-contact a:not(.button) {
  color: var(--comfort-accent);
}
.content-page .cp-cta .cp-eyebrow::before {
  background: var(--comfort-accent);
}

/* The animated process workspace is the illustration, not a dark page band. */
.content-page .process-lab::before {
  background-image: linear-gradient(rgba(51, 93, 67, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 93, 67, .045) 1px, transparent 1px);
}
.content-page .pl-topline {
  border-color: rgba(29, 48, 46, .21);
  color: #617469;
}
.content-page .pl-kicker,
.content-page .pl-intro h2 em {
  color: var(--comfort-accent);
}
.content-page .pl-intro > p,
.content-page .pl-bottom p {
  color: var(--comfort-muted);
}
.content-page .pl-tab {
  background: var(--comfort-card);
  border-color: rgba(29, 48, 46, .16);
  color: var(--comfort-ink);
  box-shadow: none;
}
.content-page .pl-tab:hover {
  background: #edf4eb;
  border-color: #84a188;
}
.content-page .pl-tab[aria-selected="true"] {
  background: #dce9dc;
  border-color: #668872;
  box-shadow: inset 0 0 0 1px rgba(51, 93, 67, .1);
}
.content-page .pl-tab-number,
.content-page .pl-tab[aria-selected="true"] .pl-tab-number,
.content-page .pl-tab-mark {
  color: var(--comfort-accent);
}
.content-page .pl-workspace {
  color: #f5f8f1;
}
.content-page .pl-bottom {
  border-color: rgba(29, 48, 46, .21);
}
.content-page .pl-bottom a {
  border-color: var(--comfort-accent);
  color: var(--comfort-accent);
}

/* The example cards keep their dark input/output mockups inside a calm open state. */
.content-page .rs-case[open] summary,
.content-page .rs-case-content {
  background: #e0ebe0;
  color: var(--comfort-ink);
}
.content-page .rs-case[open] summary:hover {
  background: #d7e6d8;
}
.content-page .rs-case[open] .rs-case-no,
.content-page .rs-case[open] .rs-open-label {
  color: var(--comfort-accent);
}
.content-page .rs-case[open] .rs-case-title small,
.content-page .rs-case-lead {
  color: var(--comfort-muted);
}
.content-page .rs-input-card,
.content-page .rs-output-card {
  color: #f4f8f2;
}
.content-page .rs-flow-arrow {
  color: var(--comfort-accent);
}
.content-page .rs-practical p {
  background: #f5f8f2;
  border-color: rgba(29, 48, 46, .14);
  color: var(--comfort-muted);
}
.content-page .rs-practical p span {
  color: var(--comfort-accent);
}

/* Keep legacy arrival and missing-page screens in the same soft palette. */
.fallback-page .error-page {
  background: #ecf0e9;
  color: #1d302e;
}
.fallback-page .error-code,
.fallback-page .error-inner h1 span {
  color: #527d4a;
}
.fallback-page .error-inner p:not(.error-code) {
  color: #4d6159;
}
.fallback-page .error-page .button-lime {
  background: #b6d6a9;
  color: #173b29;
}
.fallback-page .error-page .button-lime:hover {
  background: #a3cb98;
}
.fallback-page .error-star {
  color: rgba(66, 114, 72, .09);
}