/* =========================================================
   Solution pages (carbonAI/solutions/research|assess|monitor|communicate).
   Built on index.css (header, footer, tokens). Shared components:
     .sp-hero          SolutionPageHero
     .sp-head          PageSectionIntro
     .sp-stages        WorkflowSteps: compact stage tabs driving one shared panel
     .pv               ProductVignette (product UI card)
     .sp-pills         Selectable views (ARIA tabs)
     .sp-sources       EvidenceSourceList
     .sp-media         SolutionMediaBand (image, video, or documented placeholder)
     .sp-close         AudienceCards + RelatedSolutions in one compact area
     .sp-cta           SolutionFinalCTA
   Page-specific compositions follow, by page.
   ========================================================= */
.sp-page {
  --sp-ink: #1f2d2f;
  --sp-teal: #397f86;
  --sp-teal-dark: #2f696f;
  --sp-deep: #1f4a4f;
  --sp-ochre: #e7a33c;
  --sp-coral: #cc5a47;
  --sp-line: #e3ebec;
  --sp-pale: #eef5f5;
  --sp-paler: #f7fafa;
  /* vertical rhythm */
  --sp-pad: clamp(40px, 6vw, 80px);
  --sp-pad-tight: clamp(40px, 5vw, 64px);
  --sp-head-gap: clamp(24px, 3vw, 40px);
  /* CarbonAI rating colors (same as the homepage panels): grade, and a darker shade for text */
  --r-aaa: #1e8e3e; --rd-aaa: #14652b;
  --r-aa: #34a853;  --rd-aa: #1b6e34;
  --r-a: #81c995;   --rd-a: #2b6a3c;
  --r-bbb: #fbc02d; --rd-bbb: #755300;
  --r-bb: #f59e0b;  --rd-bb: #854800;
  --r-b: #ef6c00;   --rd-b: #9e3f00;
  --r-c: #f28b82;   --rd-c: #9c2f27;
  --r-d: #c62828;   --rd-d: #981b1b;
  background: #fff;
  color: var(--sp-ink);
}
.sp-section { padding: var(--sp-pad) 0; }
.sp-section--tight { padding: var(--sp-pad-tight) 0; }
.sp-section--pale { background: var(--sp-paler); border-top: 1px solid #edf2f2; border-bottom: 1px solid #edf2f2; }
.sp-section--warm { background: #fbf9f5; border-top: 1px solid #f0ece4; border-bottom: 1px solid #f0ece4; }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons and links ---------- */
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 6px;
  border: 1px solid var(--sp-teal);
  background: var(--sp-teal);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.sp-btn:hover { background: var(--sp-teal-dark); border-color: var(--sp-teal-dark); }
.sp-btn--ghost { background: transparent; color: var(--sp-teal-dark); }
.sp-btn--ghost:hover { background: rgba(57, 127, 134, 0.08); }
.sp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--sp-teal-dark);
  text-decoration: none;
  cursor: pointer;
}
.sp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-page a:focus-visible, .sp-page button:focus-visible, .sp-page [tabindex="0"]:focus-visible {
  outline: 2px solid var(--sp-teal);
  outline-offset: 3px;
}

/* ---------- SolutionPageHero ---------- */
.sp-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eef5f5 0%, #f6fafa 70%, #fff 100%);
  padding: clamp(32px, 4.5vw, 56px) 0 clamp(28px, 3.5vw, 44px);
}
.sp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sp-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-teal-dark); }
.sp-hero h1 { margin: 0; font-size: clamp(32px, 3.3vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--sp-ink); text-wrap: balance; }
/* the one ochre emphasis: a highlight under the phrase, so the text keeps full contrast */
.sp-hero h1 em {
  font-style: normal;
  /* a thin, quiet band sitting just above the baseline, so it reads as a typographic underline */
  background: linear-gradient(transparent 74%, var(--amber, #e7a33c) 74%, var(--amber, #e7a33c) 86%, transparent 86%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sp-lede { max-width: 34em; margin: 18px 0 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: #374151; text-wrap: pretty; }
.sp-hero .sp-actions { margin-top: 28px; }
.sp-eyebrow + .sp-rail { margin-top: -6px; }
.sp-rail { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; font-weight: 500; color: #4b5a62; }
/* the separator trails each item, so a wrapped line never starts with a dot */
.sp-rail li:not(:last-child)::after { content: "·"; margin: 0 9px; color: var(--sp-teal); }

/* ---------- PageSectionIntro ---------- */
.sp-head { max-width: 720px; margin: 0 0 var(--sp-head-gap); }
/* wide sections: heading and intro share one row, saving a block of vertical space */
.sp-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); align-items: end; max-width: none; }
.sp-head--split p { margin: 0; max-width: 36em; }
.sp-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sp-head h2 { margin: 0; font-size: clamp(28px, 2.7vw, 40px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--sp-ink); text-wrap: balance; }
.sp-head p { margin: clamp(12px, 1.4vw, 18px) 0 0; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: #374151; text-wrap: pretty; }

/* ---------- ProductVignette ---------- */
.pv {
  position: relative;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--sp-line);
  box-shadow: 0 2px 6px rgba(8, 26, 28, 0.04), 0 18px 44px rgba(8, 26, 28, 0.08);
  padding: clamp(16px, 2vw, 24px);
  font-size: 14.5px;
  line-height: 1.55;
  color: #374151;
}
.pv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #eef3f3; }
.pv-app { font-size: 13px; font-weight: 700; color: var(--sp-teal-dark); }
.pv-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--sp-pale); font-size: 12px; font-weight: 500; color: #4b5a62; }
.pv-chip--ill { background: #fdf3e2; color: #6b4a0e; }
.pv-q { margin: 0 0 12px auto; max-width: 88%; width: fit-content; padding: 10px 14px; border-radius: 12px 12px 4px 12px; background: var(--sp-teal); color: #fff; font-size: 14.5px; line-height: 1.45; }
.pv-label { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sp-teal-dark); }
.pv-ref { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: #e3eff0; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; color: var(--sp-teal-dark); vertical-align: 1px; }
/* chat composer, styled after the CarbonAI app: white pill, attach icon, pale send icon */
.pv-input { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 14px 11px 16px; border-radius: 16px; border: 1px solid #e3eaeb; background: #fff; box-shadow: 0 1px 3px rgba(8, 26, 28, 0.05); color: #5f6b72; font-size: 14.5px; }
.pv-input span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-input-clip { flex: none; width: 19px; height: 19px; color: var(--sp-teal); }
.pv-input-send { flex: none; width: 22px; height: 22px; color: #a9cbce; }
.pv-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #6b7280; }
.pv-text { margin: 0; color: var(--sp-ink); font-size: 14.5px; line-height: 1.65; }

/* ---------- EvidenceSourceList ---------- */
.sp-sources { display: grid; gap: 6px; margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid #eef3f3; }
.sp-sources li { padding: 7px 10px; border-radius: 9px; background: var(--sp-paler); border: 1px solid #e8eeee; }
.sp-sources strong { display: block; font-size: 13px; font-weight: 600; color: var(--sp-ink); }
.sp-sources small { display: block; font-size: 12px; color: #6b7280; }
.sp-sources--row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- Rating badges (shared with the homepage scheme) ---------- */
[data-g="AAA"] { --g: var(--r-aaa); --gd: var(--rd-aaa); }
[data-g="AA"]  { --g: var(--r-aa);  --gd: var(--rd-aa); }
[data-g="A"]   { --g: var(--r-a);   --gd: var(--rd-a); }
[data-g="BBB"] { --g: var(--r-bbb); --gd: var(--rd-bbb); }
[data-g="BB"]  { --g: var(--r-bb);  --gd: var(--rd-bb); }
[data-g="B"]   { --g: var(--r-b);   --gd: var(--rd-b); }
[data-g="C"]   { --g: var(--r-c);   --gd: var(--rd-c); }
[data-g="D"]   { --g: var(--r-d);   --gd: var(--rd-d); }
.rg { color: var(--gd); font-weight: 700; }
.rg-badge { display: inline-block; min-width: 34px; padding: 1px 7px 2px; border-radius: 6px; background: color-mix(in srgb, var(--g) 18%, #fff); color: var(--gd); font-weight: 700; font-size: 13px; line-height: 1.35; text-align: center; }
.rg-badge--none { background: #eef2f3; color: #4b5563; }

/* ---------- WorkflowSteps: compact stage tabs and one shared panel ---------- */
.sp-stages { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.sp-stage-list { display: flex; flex-direction: column; gap: 6px; }
.sp-stage {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.sp-stage:hover { background: rgba(57, 127, 134, 0.05); }
.sp-stage .n { padding-top: 3px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #8c989e; }
.sp-stage strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; color: #4b5563; }
.sp-stage-d { display: block; grid-column: 2; margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: #6b7280; }
.sp-stage[aria-selected="true"] { background: #fff; border-color: color-mix(in srgb, var(--sp-teal) 30%, var(--sp-line)); box-shadow: 0 8px 22px rgba(8, 26, 28, 0.06); }
.sp-stage[aria-selected="true"] .n { color: var(--sp-teal); }
.sp-stage[aria-selected="true"] strong { color: var(--sp-ink); }
.sp-stage[aria-selected="true"] .sp-stage-d { color: #374151; }
/* slow one-time auto-progress indicator; removed as soon as the visitor interacts */
.sp-stage::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--sp-teal); }
.sp-stages.is-auto .sp-stage[aria-selected="true"]::after { animation: sp-progress var(--sp-auto, 6s) linear forwards; }
@keyframes sp-progress { to { width: 100%; } }
.sp-stage-desc { display: none; margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: #374151; }
/* states of one visual stacked in the same cell, so switching causes no layout shift */
.sp-stackarea { display: grid; }
.sp-stackarea > * { grid-area: 1 / 1; }
.sp-stage-panel [data-show], .sp-stage-panel [data-dim], .sp-stage-panel [data-pick] { transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, color 0.35s ease; }
.sp-stage-panel .is-dim { opacity: 0.3; }
.sp-stage-panel .is-off { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none; }

/* ---------- Selectable views ---------- */
.sp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.sp-pill { min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--sp-line); background: #fff; font: inherit; font-size: 15px; color: #4b5563; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.sp-pill:hover { border-color: color-mix(in srgb, var(--sp-teal) 45%, var(--sp-line)); }
.sp-pill[aria-selected="true"] { background: var(--sp-teal); border-color: var(--sp-teal); color: #fff; }
.sp-tabpanels { display: grid; }
.sp-tabpanel { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.4s ease; }
.sp-tabpanel[hidden] { display: block !important; visibility: hidden; }
.sp-tabpanel.is-active { opacity: 1; transform: none; visibility: visible; }
/* views that differ a lot in height size to the active view instead of the tallest one */
.sp-tabpanels--flow > .sp-tabpanel[hidden] { display: none !important; }

/* ---------- SolutionMediaBand ---------- */
.sp-media {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 16px;
  background: #2b5257;
  isolation: isolate;
  min-height: 280px;
}
.sp-media > img, .sp-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); filter: saturate(0.72) contrast(1.02); }
/* muted teal and slate grade, then a gradient for any overlaid text */
.sp-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #2f696f; mix-blend-mode: color; opacity: calc(var(--overlay, 0.3) * 0.9); pointer-events: none; }
.sp-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 44, 48, 0) 40%, rgba(20, 44, 48, calc(var(--overlay, 0.3) + 0.3)) 100%); pointer-events: none; }
.sp-media-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(16px, 2vw, 24px); color: #fff; }
.sp-media-cap b { display: block; max-width: 26em; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.35; }
.sp-media-cap small { display: block; margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.8); }
/* documented placeholder: palette gradient and fine texture, never a gray box */
.sp-media--placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 14px),
    radial-gradient(120% 90% at 85% 15%, rgba(231, 163, 60, 0.22), transparent 55%),
    linear-gradient(150deg, #2f696f, #1f3d42 70%);
}
.sp-media-dev { display: none; position: absolute; top: 12px; left: 12px; z-index: 3; padding: 4px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); font: 600 12px/1.3 var(--font-sans, Roboto, sans-serif); color: #fff; }
.is-dev .sp-media-dev { display: block; }

/* ---------- Audience + related solutions (one compact area) ---------- */
.sp-close { padding: var(--sp-pad-tight) 0; background: var(--sp-paler); border-top: 1px solid #edf2f2; }
.sp-close h2 { margin: 0 0 clamp(20px, 2.4vw, 28px); font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--sp-ink); }
.sp-aud { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.sp-aud li { padding-top: 14px; border-top: 2px solid var(--sp-teal); }
.sp-aud h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--sp-ink); }
.sp-aud p { margin: 0; font-size: 15px; line-height: 1.55; color: #4b5563; }
.sp-disclaimer { width: fit-content; max-width: 100%; margin: 24px 0 0; padding: 10px 16px; border-radius: 8px; background: var(--sp-pale); font-size: 13.5px; line-height: 1.5; color: #4b5a60; }
.sp-related-label { margin: clamp(28px, 3vw, 36px) 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5b6a70; }
.sp-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sp-related a {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  height: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--sp-line);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.sp-related a:hover { border-color: color-mix(in srgb, var(--sp-teal) 40%, var(--sp-line)); box-shadow: 0 8px 20px rgba(8, 26, 28, 0.07); transform: translateY(-2px); }
.sp-related strong { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--sp-ink); }
.sp-related strong::after { content: "→"; font-weight: 500; color: var(--sp-teal); transition: transform 0.2s ease; }
.sp-related a:hover strong::after { transform: translateX(3px); }
.sp-related span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: #4b5563; }
/* the homepage job-card illustrations at small size (same fine-line system as jobs.css) */
.sp-mini { display: block; width: 76px; height: 60px; overflow: visible; }
.sp-mini polygon, .sp-mini line, .sp-mini polyline { stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sp-mini .iso-box polygon { stroke: #6f8f94; stroke-width: 1; }
.sp-mini .f-t { fill: #fff; }
.sp-mini .f-l { fill: #eef4f5; }
.sp-mini .f-r { fill: #e1eced; }
.sp-mini .iso-box.is-back polygon { stroke: #a9bfc2; }
.sp-mini .iso-box.is-base .f-t { fill: #f9fbfb; }
.sp-mini .iso-box.is-key .f-t { fill: #fdf3e2; }
.sp-mini .iso-box.is-key polygon { stroke: #397f86; }
.sp-mini .iso-box.is-key .f-l { fill: #d6e7e8; }
.sp-mini .iso-box.is-key .f-r { fill: #b9d5d7; }
.sp-mini .iso-box.is-note polygon { stroke: #397f86; }
.sp-mini .g-guide { stroke: #9db6b9; stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.sp-mini .s-grid { stroke: #e1eaeb; stroke-width: 1; }
.sp-mini .s-text { stroke: #c3d3d5; stroke-width: 2; fill: none; }
.sp-mini .s-text.is-key { stroke: #397f86; }
.sp-mini .s-mark { fill: #e7a33c; opacity: 0.22; stroke: none; }
.sp-mini .c-check { fill: none; stroke: #e7a33c; stroke-width: 2; }
.sp-mini .m-trend { fill: none; stroke: #397f86; stroke-width: 1.5; }
.sp-mini .m-dot { fill: #e7a33c; }
.sp-mini .m-halo { fill: #e7a33c; opacity: 0.18; }
/* a small echo of the homepage hover: the answer and the evidence note lift */
.sp-mini .r-answer, .sp-mini .c-note, .sp-mini .a-bar.is-key { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) {
  .sp-related a:hover .r-answer { transform: translateY(-6px); }
  .sp-related a:hover .c-note { transform: translateY(-6px); }
  .sp-related a:hover .a-bar.is-key { transform: translateY(-5px); }
}

/* ---------- SolutionFinalCTA ---------- */
/* compact closing band: plain deep teal, heading and copy on one short block beside the buttons */
.sp-cta { padding: clamp(24px, 3vw, 36px) 0; background: var(--sp-deep); color: #fff; }
.sp-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.sp-cta-copy { max-width: 900px; }
.sp-cta h2 { margin: 0; font-size: clamp(21px, 1.8vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.sp-cta p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
.sp-cta .sp-actions { flex: none; }
.sp-cta .sp-btn { background: #fff; border-color: #fff; color: var(--sp-teal-dark); }
.sp-cta .sp-btn:hover { background: #e9f2f2; border-color: #e9f2f2; }
.sp-cta .sp-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.sp-cta .sp-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.sp-cta .sp-btn:focus-visible { outline-color: #fff; }

/* ---------- Small print and key statements ---------- */
.sp-caveat { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: #6b7280; }
.sp-key { margin: 0; padding: 14px 18px; border-left: 3px solid var(--sp-ochre); background: #fffaf1; border-radius: 0 10px 10px 0; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--sp-ink); }

/* ---------- Scroll reveal: only hidden once solutions.js is running ---------- */
.js .sp-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.js .sp-reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   RESEARCH: editorial evidence trail
   ========================================================= */
.trail { position: relative; padding-left: 26px; }
.trail::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--sp-teal), rgba(57, 127, 134, 0.15)); border-radius: 2px; }
.trail-step { position: relative; }
.trail-step + .trail-step { margin-top: 12px; }
.trail-step::before { content: ""; position: absolute; left: -24px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--sp-teal); }
.trail-step.is-key::before { background: var(--sp-ochre); border-color: var(--sp-ochre); }
.trail-kind { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7a80; }
.trail-classes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.trail-classes span { padding: 4px 9px; border-radius: 7px; border: 1px solid #dfe8e9; background: var(--sp-paler); font-size: 12.5px; color: #374151; }
.trail-classes span b { color: var(--sp-teal-dark); font-weight: 600; margin-right: 4px; }
.trail-answer { margin: 6px 0 0; color: var(--sp-ink); font-size: 14.5px; line-height: 1.65; }
.trail-working { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; color: #4b5563; }
.trail-working i { width: 6px; height: 6px; border-radius: 50%; background: var(--sp-teal); }
/* hero sequence: steps arrive one after another once (solutions.js adds .is-played) */
.js .rs-hero[data-play] .trail-step { opacity: 0; transform: translateY(10px); }
.js .rs-hero[data-play].is-played .trail-step { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.js .rs-hero[data-play].is-played .trail-step:nth-child(2) { transition-delay: 0.35s; }
.js .rs-hero[data-play].is-played .trail-step:nth-child(3) { transition-delay: 0.7s; }
.js .rs-hero[data-play].is-played .trail-step:nth-child(4) { transition-delay: 1.05s; }

/* workflow panel: question rail on top, then the stage view for the chosen question */
.rq-rail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rq-chip { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sp-line); background: #fff; font: inherit; font-size: 13px; line-height: 1.3; color: #4b5563; cursor: pointer; text-align: left; }
.rq-chip:hover { border-color: color-mix(in srgb, var(--sp-teal) 45%, var(--sp-line)); }
.rq-chip[aria-pressed="true"] { background: var(--sp-pale); border-color: var(--sp-teal); color: var(--sp-ink); font-weight: 500; }
.rq-body { min-height: 0; }
.rq-plan { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.rq-plan li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13.5px; color: #374151; }
.rq-plan li b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--sp-pale); font-size: 11.5px; color: var(--sp-teal-dark); }
.rq-ev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rq-ev li { padding: 9px 11px; border-radius: 9px; border: 1px solid #e8eeee; background: var(--sp-paler); }
.rq-ev b { display: block; font-size: 13px; font-weight: 600; color: var(--sp-ink); }
.rq-ev small { display: block; font-size: 12px; color: #6b7280; }

/* landscape: image beside four scope areas */
.rs-scope { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.rs-scope .sp-media { min-height: 100%; }
.rs-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 36px); margin: 0; padding: 0; list-style: none; }
.rs-areas li { padding: 16px 0; border-top: 1px solid var(--sp-line); }
.rs-areas h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--sp-ink); }
.rs-areas p { margin: 0; font-size: 15px; line-height: 1.55; color: #4b5563; }
.rs-ex { display: block; margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--sp-ochre); font-size: 13.5px; line-height: 1.5; color: var(--sp-ink); }

/* your documents */
.rs-byo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.rs-byo .sp-head { margin-bottom: 0; }
.rs-trust { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rs-trust li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--sp-ink); }
.rs-trust li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 6px; height: 11px; border: solid var(--sp-teal); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.rs-doc { padding: 12px; border-radius: 12px; border: 1px solid var(--sp-line); background: var(--sp-paler); }
.rs-doc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--sp-ink); }
.rs-doc-head i { padding: 3px 6px; border-radius: 5px; background: #fff; border: 1px solid #dfe8e9; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--sp-teal-dark); }
.rs-lines span { display: block; height: 6px; margin-top: 6px; border-radius: 4px; background: #dce7e8; }
.rs-lines span.is-mark { background: color-mix(in srgb, var(--sp-ochre) 45%, #fff); }
.rs-tag { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #e3eff0; color: var(--sp-teal-dark); }
.rs-tag--yours { background: #fdf3e2; color: #6b4a0e; }

/* =========================================================
   ASSESS: structured, data dense
   ========================================================= */
.as-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.as-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--sp-ink); }
.as-title .rg-badge { display: inline-block; margin-left: 4px; vertical-align: 1px; }
.as-title span:not(.rg-badge) { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: #6b7280; }
.as-grade { text-align: right; }
.as-grade b { display: block; font-size: 46px; line-height: 0.95; }
.as-grade small { font-size: 11.5px; color: #6b7280; }
.as-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.as-dims div { padding: 9px 10px; border-radius: 10px; border: 1px solid #e8eeee; }
.as-dims dt { font-size: 12px; color: #6b7280; }
.as-dims dd { margin: 4px 0 0; }
.as-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--sp-paler); font-size: 13.5px; }
.as-row b { color: var(--sp-ink); }
.as-evidence { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.as-evidence span { padding: 3px 9px; border-radius: 999px; border: 1px solid #dfe8e9; font-size: 12px; color: #4b5563; }

/* workflow panel */
.as-stages { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.as-stages li { padding: 3px 9px; border-radius: 999px; background: #eef3f3; font-size: 11.5px; font-weight: 500; color: #6b7280; }
.as-stages li.is-pick { background: var(--sp-teal); color: #fff; }
.as-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.as-universe { margin-right: 4px; font-size: 13px; font-weight: 600; color: var(--sp-ink); }
.as-universe::after { content: " →"; color: var(--sp-teal); }
.as-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.as-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 9px; border: 1px solid #edf2f2; font-size: 13.5px; }
.as-list li.is-pick { border-color: color-mix(in srgb, var(--sp-teal) 40%, var(--sp-line)); background: #f2f8f8; }
.as-list b { color: var(--sp-ink); font-weight: 600; }
.as-list small { color: #6b7280; }
.as-mini { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.as-mini th, .as-mini td { padding: 6px; text-align: left; border-top: 1px solid #edf2f2; }
.as-mini thead th { border-top: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7a80; }
.as-mini tbody th { font-weight: 600; color: var(--sp-ink); }
.as-mini small { font-weight: 400; color: #6b7280; }
.as-mini tr.is-focus { background: #f2f8f8; }
.as-flag { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--sp-ochre); background: #fffaf1; border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.5; }
.as-flag b { display: block; color: var(--sp-ink); }

/* project intelligence workspace */
.as-work { padding: clamp(18px, 2.4vw, 28px); }
.as-work .sp-pills { margin-bottom: 18px; }
.as-drivers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.as-dimgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.as-dim { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--sp-line); background: #fff; font: inherit; font-size: 14.5px; color: var(--sp-ink); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.as-dim:hover { border-color: color-mix(in srgb, var(--sp-teal) 40%, var(--sp-line)); }
.as-dim[aria-pressed="true"] { border-color: var(--sp-teal); box-shadow: 0 0 0 1px var(--sp-teal) inset; background: #f6fbfb; }
.as-also { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: #4b5563; }
.as-detail { padding: 16px 18px; border-radius: 12px; background: var(--sp-paler); border: 1px solid #e8eeee; min-height: 230px; }
.as-detail h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 700; color: var(--sp-ink); }
.as-detail dl { display: grid; gap: 10px; margin: 12px 0 0; }
.as-detail dt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7a80; }
.as-detail dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; color: #374151; }
.sp-table-wrap { overflow-x: auto; border: 1px solid var(--sp-line); border-radius: 12px; background: #fff; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-table th, .sp-table td { padding: 11px 13px; text-align: left; border-top: 1px solid #edf2f2; white-space: nowrap; }
.sp-table thead th { border-top: 0; background: var(--sp-pale); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sp-teal-dark); }
.sp-table tbody th { font-weight: 600; color: var(--sp-ink); white-space: normal; min-width: 200px; }
.sp-table tbody th small { display: block; font-weight: 400; color: #6b7280; }
.sp-table tr.is-focus { background: #f6fbfb; }
.sp-table td.num { font-variant-numeric: tabular-nums; }
.as-more { margin-top: 6px; }
.as-pricegrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.as-price { display: grid; gap: 10px; }
.as-price-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; gap: 14px; align-items: center; font-size: 14px; }
.as-price-row b { color: var(--sp-ink); font-weight: 600; }
.as-track { position: relative; height: 10px; border-radius: 5px; background: #eef3f3; }
.as-range { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--sp-teal); min-width: 6px; }
.as-price-row.is-focus .as-range, .mn-cmp-row.is-focus .as-range { background: var(--sp-ochre); }
.as-axis { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; gap: 14px; font-size: 12px; color: #6b7280; }
.as-axis div { display: flex; justify-content: space-between; }

/* project context: photograph with overlaid index panels */
.as-ctx { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
.as-ctx .sp-media { min-height: clamp(320px, 30vw, 400px); }
.as-ctx-panels { position: relative; z-index: 2; display: grid; gap: 10px; margin-left: -72px; }
.as-ctx-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--sp-line); box-shadow: 0 14px 34px rgba(8, 26, 28, 0.1); }
.as-ctx-panel h3 { margin: 0; font-size: 16.5px; font-weight: 600; color: var(--sp-ink); }
.as-ctx-panel p { grid-column: 1 / -1; margin: 0; font-size: 14.5px; line-height: 1.5; color: #4b5563; }
.as-ctx-label { margin: 0 0 4px; font-size: 13px; color: #4b5563; }
.as-ctx-label b { color: var(--sp-ink); }

/* =========================================================
   MONITOR: charts, timelines, one atmospheric section
   ========================================================= */
.mn-chart { position: relative; }
.mn-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.mn-axis { stroke: #e3ebec; stroke-width: 1; }
.mn-line { fill: none; stroke: var(--sp-ochre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mn-val { font-size: 13px; font-weight: 600; fill: var(--sp-ink); }
.mn-tick { font-size: 12px; fill: #6b7280; }
.mn-vkey { display: none; }
.mn-stat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
.mn-stat div { padding: 10px 12px; border-radius: 10px; border: 1px solid #e8eeee; background: var(--sp-paler); }
.mn-stat dt { font-size: 12px; color: #6b7280; }
.mn-stat dd { margin: 3px 0 0; font-size: 18px; font-weight: 700; color: var(--sp-ink); }
.mn-pulse .pv-label { margin-top: 12px; }
.mn-pulse .pv-label:first-of-type { margin-top: 0; }
.mn-update { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 12px; padding: 11px 12px; border-radius: 10px; border: 1px solid #e8eeee; background: var(--sp-paler); font-size: 13.5px; }
.mn-update b { display: block; color: var(--sp-ink); }
.mn-update .pv-chip { margin-left: 4px; vertical-align: 1px; }
.mn-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--sp-ochre); }
.mn-ask { margin: 12px 0 0 auto; }

/* levels: pills, then copy beside one shared visual */
.mn-level { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.mn-level h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--sp-ink); }
.mn-level p { margin: 0; font-size: 16px; line-height: 1.6; color: #374151; }
.mn-level .pv { min-height: 180px; }
.mn-pi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.mn-pi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn-pi div { padding: 12px 14px; border-radius: 12px; border: 1px solid #e8eeee; background: #fff; }
.mn-pi dt { font-size: 12px; color: #6b7280; }
.mn-pi dd { margin: 5px 0 0; font-size: 19px; font-weight: 700; color: var(--sp-ink); }
.mn-pi dd small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #6b7280; }
.mn-pi dd .rg-badge { font-size: 15px; }

/* price, activity, and integrity dashboard */
.mn-dash { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.mn-dash .sp-head { margin-bottom: 22px; }
.mn-cmp { margin-top: 14px; display: grid; gap: 8px; }
.mn-cmp-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 104px; gap: 12px; align-items: center; font-size: 13.5px; }
.mn-cmp-row b { color: var(--sp-ink); }

/* policy watch: the one atmospheric section, with an ambient video */
.mn-watch { position: relative; overflow: hidden; padding: var(--sp-pad) 0; background: #17363a; color: #fff; }
.mn-watch > .sp-media { position: absolute; inset: 0; border-radius: 0; min-height: 0; --overlay: 0.7; }
.mn-watch > .sp-media::after { background: linear-gradient(90deg, rgba(16, 38, 42, 0.92) 0%, rgba(16, 38, 42, 0.78) 55%, rgba(16, 38, 42, 0.6) 100%); }
.mn-watch .container { position: relative; z-index: 2; }
.mn-watch .sp-head h2 { color: #fff; }
.mn-watch .sp-head p { color: rgba(255, 255, 255, 0.85); }
.mn-watch-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.mn-tl { position: relative; display: flex; flex-direction: column; gap: 4px; padding-left: 22px; }
.mn-tl::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 18px; width: 2px; background: rgba(255, 255, 255, 0.22); }
.mn-tl-item { position: relative; display: block; width: 100%; min-height: 44px; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; font: inherit; font-size: 15.5px; font-weight: 500; color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.mn-tl-item::before { content: ""; position: absolute; left: -22px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #17363a; border: 2px solid rgba(255, 255, 255, 0.55); }
.mn-tl-item:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.mn-tl-item[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); }
.mn-tl-item[aria-selected="true"]::before { background: var(--sp-ochre); border-color: var(--sp-ochre); }
.mn-watch .pv { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); border-color: transparent; }
.mn-watch .sp-caveat { color: rgba(255, 255, 255, 0.78); }
.mn-watch .sp-caveat .pv-chip { margin-right: 6px; }
.mn-watch .sp-page a:focus-visible, .mn-watch button:focus-visible { outline-color: #fff; }
.mn-qa { display: grid; gap: 10px; }
.mn-qa > div { padding: 10px 0 0; border-top: 1px solid #eef3f3; }
.mn-qa > div:first-child { padding-top: 0; border-top: 0; }
.mn-qa p { margin: 0; }
.mn-qa .pv-q { margin: 0 0 0 auto; }

/* =========================================================
   COMMUNICATE: editorial document review
   ========================================================= */
/* hero review card: full width when stacked; on desktop about 590px, aligned to the column edge */
.cm-desk { margin: 0; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); border-radius: 16px; overflow: hidden; border: 1px solid var(--sp-line); background: #fff; box-shadow: 0 2px 6px rgba(8, 26, 28, 0.04), 0 18px 44px rgba(8, 26, 28, 0.08); }
@media (min-width: 1101px) {
  .cm-desk { max-width: 590px; margin-left: auto; }
}
.cm-draft { padding: 30px 26px; background: #fbfcfc; border-right: 1px solid var(--sp-line); }
.cm-review { padding: 28px 26px 24px; }
/* client draft text is set in a serif, so it reads as the customer’s copy, not CarbonAI’s interface */
.cm-claim { margin: 12px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 23px; line-height: 1.35; color: var(--sp-ink); }
.cm-claim mark { background: color-mix(in srgb, var(--sp-ochre) 32%, #fff); color: inherit; padding: 0 2px; border-radius: 3px; }
.cm-facts { display: grid; gap: 14px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--sp-line); }
.cm-facts div { display: grid; gap: 1px; }
.cm-facts dt { font-size: 12.5px; color: #6b7280; }
.cm-facts dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--sp-ink); }
.cm-issues { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.cm-issues li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #374151; }
.cm-issues li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--sp-coral); }
.cm-rec { margin-top: 20px; padding: 12px 14px; border-radius: 10px; background: #f2f8f8; border-left: 3px solid var(--sp-teal); font-size: 14px; line-height: 1.55; color: var(--sp-ink); }
.cm-rec b { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sp-teal-dark); }
.cm-review .cm-rec { padding: 14px 16px; }
.cm-review .pv-note { margin-top: 18px; }

/* workflow: one draft that visibly changes across the four stages */
#workflow .sp-head { margin-bottom: clamp(20px, 2.4vw, 28px); }
[data-solution="communicate"] .sp-stage-list { gap: 4px; }
[data-solution="communicate"] .sp-stage { padding-top: 11px; padding-bottom: 11px; }
.cm-doc-text { margin: 0 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: 17.5px; line-height: 1.65; color: var(--sp-ink); }
.cm-hl, .cm-hl-r { border-radius: 3px; transition: background-color 0.35s ease, box-shadow 0.35s ease; }
.cm-hl.is-pick { background: #e3eff0; box-shadow: 0 2px 0 color-mix(in srgb, var(--sp-teal) 60%, #fff); }
.cm-hl-r.is-pick { background: #fbe9e5; box-shadow: 0 2px 0 color-mix(in srgb, var(--sp-coral) 75%, #fff); }
.cm-notes { display: grid; gap: 8px; align-content: start; }
.cm-notes .cm-rec { margin-top: 0; padding: 2px 0 0 14px; border-radius: 0; background: none; font-size: 13.5px; line-height: 1.5; }
.cm-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid #e8eeee; background: #fff; font-size: 13.5px; line-height: 1.5; }
.cm-note b { color: var(--sp-ink); }
.cm-note small { margin-left: auto; padding-left: 12px; font-size: 12.5px; white-space: nowrap; color: var(--sp-teal-dark); }
.cm-note--ev { align-items: baseline; background: #f4f9f9; border-color: #dcebec; }
/* the phrase each piece of evidence was checked against, aligned right */
.cm-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: #e3eff0; font-size: 11px; font-weight: 700; color: var(--sp-teal-dark); }
.cm-tag--risk { background: #fbe9e5; color: #8f3426; }
.cm-revised { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: #fff; border: 1px solid #dcebec; font-family: Georgia, "Times New Roman", serif; font-size: 14.5px; line-height: 1.5; color: var(--sp-ink); }
.cm-revised small { display: inline; margin-right: 6px; font-family: var(--font-sans, Roboto, sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7a80; }

/* risk review: the page's quiet brand moment, an abstract crop of the leaf beside the four risk areas */
.cm-risk { display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); gap: clamp(28px, 4.4vw, 64px); align-items: stretch; }
.cm-risk .sp-media { min-height: 100%; }
.cm-risk .sp-media > img { transform: scale(1.3); }
.cm-risk-list { display: flex; flex-direction: column; border-top: 1px solid #e9e4da; }
.cm-risk-tab { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; width: 100%; min-height: 44px; padding: 14px 6px; border: 0; border-bottom: 1px solid #e9e4da; background: transparent; text-align: left; font: inherit; font-size: 17px; font-weight: 600; color: #4b5563; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.cm-risk-tab .n { font-size: 13px; font-weight: 700; color: #8c989e; }
.cm-risk-tab:hover { color: var(--sp-ink); }
.cm-risk-tab[aria-selected="true"] { color: var(--sp-ink); background: #fff; box-shadow: inset 3px 0 0 var(--sp-teal); }
.cm-risk-tab[aria-selected="true"] .n { color: var(--sp-coral); }
.cm-risk-body { margin-top: 20px; }
.cm-risk-body h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7a80; }
.cm-risk-body p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #374151; }
.cm-in-draft { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--sp-coral); background: #fff; border-radius: 0 10px 10px 0; font-size: 14.5px; line-height: 1.5; color: var(--sp-ink); }
.cm-in-draft small { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8f3426; }

/* claim in context: four contexts beside the evidence pipeline */
.cm-ctx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 64px); align-items: start; }
.cm-contexts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sp-line); }
.cm-contexts li { padding: 15px 0; border-bottom: 1px solid var(--sp-line); }
.cm-contexts h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--sp-ink); }
.cm-contexts p { margin: 0; font-size: 15px; line-height: 1.55; color: #4b5563; }
/* one soft container; numbered layers joined by a thin line, ending in the revision */
.cm-stack { display: grid; margin: 0; padding: 10px 22px 14px; list-style: none; border: 1px solid #e8eeee; border-radius: 14px; background: var(--sp-paler); }
.cm-stack li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--sp-ink); }
.cm-stack li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 42px; bottom: -12px; width: 1px; background: #cfdfe1; }
.cm-stack i { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #d5e3e5; background: #fff; font-style: normal; font-size: 12px; font-weight: 700; color: var(--sp-teal-dark); }
.cm-stack small { display: block; margin-top: 3px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #4b5563; }
.cm-stack li.is-out { margin: 6px -10px 0; padding: 12px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-teal) 38%, var(--sp-line)); }
.cm-stack li.is-out i { border-color: var(--sp-teal); background: var(--sp-teal); color: #fff; }

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 761px) and (max-width: 1100px) {
  .sp-page { --sp-pad: clamp(56px, 7vw, 72px); --sp-pad-tight: 56px; }
}
@media (max-width: 1100px) {
  .sp-hero-grid, .rs-byo, .mn-level, .mn-dash, .mn-watch-grid, .cm-ctx { grid-template-columns: minmax(0, 1fr); }
  .rs-scope, .cm-risk { grid-template-columns: minmax(0, 1fr); }
  .rs-scope .sp-media, .cm-risk .sp-media { min-height: 0; aspect-ratio: 16 / 7; }
  .as-ctx { grid-template-columns: minmax(0, 1fr); }
  .as-ctx .sp-media { min-height: 0; aspect-ratio: 16 / 8; }
  .as-ctx .sp-media-cap { top: 0; bottom: auto; }
  .as-ctx .sp-media::after { background: linear-gradient(0deg, rgba(20, 44, 48, 0) 50%, rgba(20, 44, 48, 0.55) 100%); }
  .as-ctx-panels { margin: -56px 20px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .as-pricegrid { grid-template-columns: minmax(0, 1fr); }
}
/* tablet and phone: stage tabs become a compact row; the active stage text sits above its visual */
@media (max-width: 960px) {
  .sp-head--split { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .sp-stages { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sp-stage-list { flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  .sp-stage { width: auto; grid-template-columns: auto; flex: 1 0 auto; justify-items: center; padding: 10px 14px; min-height: 44px; border-color: var(--sp-line); background: #fff; }
  .sp-stage .n, .sp-stage .sp-stage-d { display: none; }
  .sp-stage strong { font-size: 15px; }
  .sp-stage[aria-selected="true"] { background: var(--sp-teal); border-color: var(--sp-teal); }
  .sp-stage[aria-selected="true"] strong { color: #fff; }
  .sp-stage-desc { display: block; }
  .sp-stage-panel .is-dim { opacity: 1; }
  .as-drivers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sp-page { --sp-pad: clamp(40px, 10vw, 56px); --sp-pad-tight: clamp(40px, 9vw, 48px); }
  .sp-aud, .sp-related, .rs-areas, .rs-compare { grid-template-columns: minmax(0, 1fr); }
  .mn-pi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-pi dd { font-size: 17px; }
  .rq-ev { grid-template-columns: minmax(0, 1fr); }
  .rs-scope .sp-media, .cm-risk .sp-media { aspect-ratio: 4 / 3; }
  .as-ctx-panels { margin: -40px 12px 0; grid-template-columns: minmax(0, 1fr); }
  .as-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-desk { grid-template-columns: minmax(0, 1fr); }
  .cm-draft { border-right: 0; border-bottom: 1px solid var(--sp-line); }
  .as-price-row, .mn-cmp-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .as-price-row .as-track, .mn-cmp-row .as-track { grid-column: 1 / -1; grid-row: 2; }
  .as-axis { display: none; }
  .mn-chart svg text { display: none; }
  .mn-vkey { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: 13px; color: #4b5563; }
  .mn-vkey b { color: var(--sp-ink); }
  .sp-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .sp-hero h1 { font-size: 31px; }
  .cm-note--ev { flex-wrap: wrap; }
  .cm-note--ev small { flex-basis: 100%; margin-left: 0; padding-left: 0; white-space: normal; }
  .sp-actions .sp-btn { flex: 1 1 100%; }
  .cm-risk-tab { font-size: 16px; }
  .sp-stage { padding: 10px 8px; }
  .sp-stage strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-page *, .sp-page *::before, .sp-page *::after { transition: none !important; animation: none !important; }
  .js .rs-hero[data-play] .trail-step, .js .sp-reveal { opacity: 1; transform: none; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .sp-aud[style*="--cols: 4"] { --cols: 2 !important; }
}

/* media with text over a detailed image: a deeper base gradient and a soft shadow keep the caption legible */
.sp-media-cap b { text-shadow: 0 1px 14px rgba(10, 26, 29, 0.45); }
.sp-media--legible::after { background: linear-gradient(180deg, rgba(16, 38, 42, 0) 38%, rgba(16, 38, 42, 0.5) 68%, rgba(16, 38, 42, 0.85) 100%); }

/* =========================================================
   Research page: compositional refinements (scoped to this page only)
   ========================================================= */
/* 1. Hero: a slightly tighter gutter, the panel lifted to align with the headline, the rail closer to the CTA */
[data-solution="research"] .sp-hero-grid { gap: clamp(30px, 4.6vw, 66px); }
[data-solution="research"] .sp-hero-visual { transform: translateY(-12px); }
/* 2. Workflow: a lighter stepper, tighter stages, a slightly narrower card, a shorter intro measure */
[data-solution="research"] .sp-head--split p { max-width: 32em; }
[data-solution="research"] .sp-stage-list { gap: 2px; max-width: 92%; }
[data-solution="research"] .sp-stage { padding: 11px 14px; }
[data-solution="research"] .sp-stage-panel { width: 96%; justify-self: end; }
/* 3. Landscape: a smaller image share, a wider gap, tighter groups, shorter accent lines */
[data-solution="research"] .rs-scope { grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr); gap: clamp(36px, 5vw, 72px); }
[data-solution="research"] .rs-areas li { padding: 13px 0; }
[data-solution="research"] .rs-ex { position: relative; border-left: 0; padding-left: 12px; }
[data-solution="research"] .rs-ex::before { content: ""; position: absolute; left: 0; top: 8%; width: 2px; height: 84%; border-radius: 1px; background: var(--sp-ochre); }
/* 4. Your documents: card aligned to the heading, tighter list, softer shadow */
[data-solution="research"] .rs-byo { align-items: start; }
[data-solution="research"] .rs-trust { gap: 3px; }
[data-solution="research"] .rs-byo .pv { box-shadow: 0 1px 4px rgba(8, 26, 28, 0.04), 0 10px 26px rgba(8, 26, 28, 0.06); }
/* 5. Audience and next steps: a closer label, shorter cards, lighter audience headings */
[data-solution="research"] .sp-related-label { margin-top: 16px; }
[data-solution="research"] .sp-related a { padding-top: 11px; padding-bottom: 11px; }
[data-solution="research"] .sp-related .sp-mini { align-self: center; }
[data-solution="research"] .sp-aud h3 { font-weight: 500; }
@media (max-width: 1100px) {
  [data-solution="research"] .sp-hero-visual { transform: none; }
  [data-solution="research"] .rs-scope { grid-template-columns: minmax(0, 1fr); }
  [data-solution="research"] .sp-stage-list { max-width: none; }
  [data-solution="research"] .sp-stage-panel { width: auto; }
}

/* Hero text starts at the same height on every solution page (anchored to Research),
   instead of centring against product panels of different heights. */
@media (min-width: 1101px) {
  .sp-hero-grid { align-items: start; }
  .sp-hero-copy { padding-top: 26px; }
}

/* withheld peer project IDs: a quiet masked chip in place of the identifier */
.pid { display: inline-block; margin: 0 4px; padding: 0 6px; border-radius: 5px; background: #e6edee; border: 1px dashed #c3d3d5; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.6; color: #6b7a80; white-space: nowrap; vertical-align: 1px; }
.pid span { letter-spacing: 0.12em; }
.sp-table th .pid { margin-left: 6px; }
.as-price-row { grid-template-columns: 170px minmax(0, 1fr) 96px; }
.as-axis { grid-template-columns: 170px minmax(0, 1fr) 96px; }

/* blurred peer IDs (placeholder text, so nothing real can be unblurred) */
.pid-blur { display: inline-block; font-weight: 700; color: var(--sp-ink); filter: blur(4px); user-select: none; }
.pid-blur-text { filter: blur(3.5px); user-select: none; }

/* light outline button for photographic or dark backgrounds (About hero) */
.sp-btn--light { background: transparent; border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.sp-btn--light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.sp-btn--light:focus-visible { outline-color: #fff; }

/* Monitor policy watch: let the light in the canopy footage show through.
   Darker on the left behind the white timeline text, lighter on the right
   under the white Q&A card. */
.mn-watch > .sp-media { --overlay: 0.36; }
.mn-watch > .sp-media > video { filter: saturate(0.88) brightness(1.18) contrast(1.04); }
.mn-watch > .sp-media::after { background: linear-gradient(90deg, rgba(16, 38, 42, 0.78) 0%, rgba(16, 38, 42, 0.56) 42%, rgba(16, 38, 42, 0.3) 72%, rgba(16, 38, 42, 0.24) 100%); }
.mn-watch .sp-head h2, .mn-watch .sp-head p, .mn-tl-item { text-shadow: 0 1px 14px rgba(8, 22, 25, 0.5); }
/* the examples note sits quietly along the bottom edge of the footage */
.mn-watch .mn-watch-note { position: absolute; left: 0; right: 0; bottom: clamp(14px, 1.8vw, 22px); z-index: 2; margin: 0 auto; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.72); text-shadow: 0 1px 10px rgba(8, 22, 25, 0.5); }
@media (max-width: 760px) { .mn-watch { padding-bottom: calc(var(--sp-pad) + 28px); } }
/* Monitor hero: a quiet "Illustrative" note rather than an ochre chip */
.mn-update .pv-chip--ill { margin-left: 6px; padding: 0 7px; border: 1px solid #dfe8e9; background: transparent; font-size: 11px; font-weight: 500; line-height: 1.6; color: #6b7280; vertical-align: 1px; }
/* Assess context cards: the index name as a small label under the description */
.as-ctx-panel small { grid-column: 1 / -1; margin-top: 2px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--sp-teal-dark); }

/* Solution hero headlines: one system across the four pages. A dark task line,
   then the outcome in full CarbonAI ochre as part of the same H1 (no underline). */
.sp-hero h1 { max-width: 15.5em; text-wrap: pretty; }
.sp-hero h1 .sp-h1-main { display: block; }
.sp-hero h1 .sp-h1-accent { display: block; margin-top: 0.14em; font-size: 0.94em; color: var(--sp-ochre); }
.sp-hero h1 .sp-h1-main, .sp-hero h1 .sp-h1-accent { text-wrap: balance; }
/* "Illustrative" tags everywhere: a quiet outlined label, not an ochre chip */
.pv-chip.pv-chip--ill { padding: 0 7px; border: 1px solid #dfe8e9; background: transparent; font-size: 11px; font-weight: 500; line-height: 1.6; color: #6b7280; }

/* Monitor "From movement to meaning": the level pills and the active view share one light
   frame, so the selected level reads as connected to what it shows. Explanation ~35%, visual ~65%. */
.mn-levels-frame { padding: 16px clamp(16px, 2vw, 24px) clamp(18px, 2vw, 24px); border: 1px solid #e3ebec; border-radius: 12px; background: #fff; }
.mn-levels-frame .sp-pills { margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid #edf2f2; }
.mn-levels-frame .mn-level { grid-template-columns: minmax(0, 0.54fr) minmax(0, 1fr); align-items: start; gap: clamp(20px, 3vw, 40px); }
.mn-levels-frame .mn-level h3 { margin-top: 4px; }
.mn-levels-frame .mn-level .pv { min-height: 0; box-shadow: none; background: #fbfcfc; }
#signals .sp-head { margin-bottom: clamp(20px, 2.4vw, 28px); }
@media (max-width: 1100px) { .mn-levels-frame .mn-level { grid-template-columns: minmax(0, 1fr); } }