:root {
  color-scheme: dark;
  --case-bg: #15191d;
  --case-text: rgba(255, 255, 255, .94);
  --case-muted: rgba(235, 240, 244, .72);
  --case-border: rgba(255, 255, 255, .13);
  --case-accent: #e2a45f;
  --crm-paper: #f8f4f6;
  --crm-surface: #fffdfd;
  --crm-ink: #281f27;
  --crm-muted: #74666f;
  --crm-accent: #6c426b;
  --crm-line: #e8dde2;
}

* { box-sizing: border-box; }

body.clinic-crm-page {
  margin: 0;
  color: var(--case-text);
  background: var(--case-bg);
  font-family: Manrope, var(--site-font-sans);
}

.clinic-case-main {
  padding: clamp(44px, 6vw, 82px) 20px 110px;
  background: #15191d;
}

.clinic-case {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.clinic-case-hero {
  max-width: 1040px;
  padding-bottom: clamp(42px, 5vw, 68px);
  border-bottom: 1px solid var(--case-border);
}

.clinic-case-kicker,
.crm-gallery-kicker {
  width: fit-content;
  margin: 0 0 18px;
  color: var(--case-accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.clinic-case-hero h1 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--site-font-display), Georgia, serif;
  font-size: clamp(56px, 7.2vw, 96px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.clinic-case-lead {
  max-width: 72ch;
  margin: 28px 0 0;
  color: rgba(245, 247, 249, .82);
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.58;
  letter-spacing: -.012em;
}

.clinic-case-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.clinic-case-topics span {
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: rgba(238, 243, 247, .7);
  background: rgba(255, 255, 255, .035);
  font-size: 13px;
}

.clinic-case-copy {
  width: min(1040px, 100%);
  margin-inline: auto;
  padding: 0 0 clamp(56px, 7vw, 94px);
}

.clinic-case-section + .clinic-case-section { margin-top: clamp(40px, 5vw, 68px); }

.clinic-case-section h2,
.crm-gallery-head h2 {
  margin: 0 0 20px;
  font-family: var(--site-font-display), Georgia, serif;
  font-size: clamp(34px, 3.65vw, 50px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.clinic-case-section p {
  max-width: 82ch;
  margin: 0;
  color: var(--case-muted);
  font-size: 18px;
  line-height: 1.72;
  letter-spacing: -.006em;
}

.clinic-case-section p + p {
  margin-top: 13px;
  text-indent: 2em;
}

.clinic-feature-list {
  max-width: 960px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--case-border);
}

.clinic-feature-list li {
  position: relative;
  padding: 16px 18px 16px 28px;
  border-bottom: 1px solid var(--case-border);
  color: var(--case-muted);
  font-size: 16.5px;
  line-height: 1.62;
}

.clinic-feature-list li::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--case-accent);
}

.clinic-feature-list strong { color: var(--case-text); }

.crm-gallery {
  padding-top: clamp(48px, 6vw, 82px);
  border-top: 1px solid var(--case-border);
}

.crm-gallery-head { max-width: 820px; margin-bottom: 34px; }
.crm-gallery-head p:last-child { margin: 0; color: var(--case-muted); font-size: 16px; line-height: 1.65; }

.crm-showcase { margin: 0; }
.crm-showcase + .crm-showcase { margin-top: 0; }
.crm-showcase-pipeline { margin-bottom: 32px; }

.crm-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.crm-window {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 610px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 15px;
  background: var(--crm-paper);
  color: var(--crm-ink);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5);
  font-family: Onest, Manrope, var(--site-font-sans);
}

.crm-window-compact {
  grid-template-columns: 134px minmax(0, 1fr);
  min-height: 490px;
  height: 490px;
}

.crm-showcase-pipeline .crm-window { min-height: 790px; }

.crm-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 14px 18px;
  color: rgba(255, 255, 255, .84);
  background: #281f27;
}

.crm-brand { display: flex; align-items: center; gap: 10px; padding: 0 7px 20px; }
.crm-brand > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: white; background: var(--crm-accent); font: 800 15px/1 Georgia, serif; }
.crm-brand strong { min-width: 0; font-size: 13px; line-height: 1.25; }

.crm-sidebar nav { display: grid; gap: 4px; }
.crm-sidebar nav span { padding: 9px 10px; border-radius: 8px; color: rgba(255, 255, 255, .55); font-size: 12px; line-height: 1.2; }
.crm-sidebar nav .is-active { color: white; background: rgba(255, 255, 255, .11); box-shadow: inset 3px 0 0 #c692ba; }

.crm-workspace { min-width: 0; padding: 24px; }

.crm-screen-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.crm-screen-head small { color: var(--crm-muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .09em; }
.crm-screen-head h3 { margin: 4px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; line-height: 1; letter-spacing: -.025em; }
.crm-screen-head button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; color: white; background: var(--crm-accent); font: 700 12px/1 Onest, sans-serif; pointer-events: none; }

.crm-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.crm-metrics > div { min-width: 132px; padding: 12px 14px; border: 1px solid var(--crm-line); border-radius: 11px; background: var(--crm-surface); box-shadow: 0 10px 22px rgba(60, 43, 55, .05); }
.crm-metrics span { display: block; color: var(--crm-muted); font-size: 10px; }
.crm-metrics strong { display: block; margin-top: 4px; font-size: 20px; }

.crm-pipeline { display: grid; grid-template-columns: 1fr; gap: 8px; }
.crm-pipeline-layout { display: grid; grid-template-columns: minmax(0, 1fr) 268px; align-items: start; gap: 16px; }
.crm-pipeline > section { display: grid; grid-template-columns: 150px minmax(0, 286px); align-items: start; gap: 12px; min-width: 0; min-height: 68px; padding: 10px; border: 1px solid var(--crm-line); border-radius: 12px; background: rgba(255, 253, 253, .65); }
.crm-pipeline section > header { display: flex; justify-content: space-between; gap: 8px; padding: 3px 2px; }
.crm-pipeline section > header strong { font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.crm-pipeline section > header span { display: grid; place-items: center; min-width: 21px; height: 21px; border-radius: 99px; color: var(--crm-muted); background: #efe7eb; font-size: 10px; }
.crm-pipeline article { margin: 0; padding: 8px 10px; border: 1px solid #e2d7dc; border-radius: 10px; background: var(--crm-surface); box-shadow: 0 8px 18px rgba(70, 47, 63, .07); }
.crm-pipeline article b,
.crm-pipeline article span,
.crm-pipeline article small { display: block; overflow-wrap: anywhere; }
.crm-pipeline article b { font-size: 10px; line-height: 1.3; }
.crm-pipeline article span { margin-top: 5px; color: var(--crm-accent); font-size: 9px; font-weight: 700; }
.crm-pipeline article small { margin-top: 2px; color: var(--crm-muted); font-size: 8px; }
.crm-pipeline article.is-selected { border-color: rgba(108, 66, 107, .66); box-shadow: 0 0 0 2px rgba(108, 66, 107, .11), 0 8px 18px rgba(70, 47, 63, .07); }

.crm-lead-detail { overflow: hidden; border: 1px solid var(--crm-line); border-radius: 12px; background: var(--crm-surface); box-shadow: 0 14px 30px rgba(60, 43, 55, .08); }
.crm-lead-detail > header { padding: 17px; border-bottom: 1px solid var(--crm-line); background: #f2ebee; }
.crm-lead-detail > header small,
.crm-lead-detail > header strong,
.crm-lead-detail > header span { display: block; }
.crm-lead-detail > header small { color: var(--crm-muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.crm-lead-detail > header strong { margin-top: 7px; font-size: 16px; }
.crm-lead-detail > header span { margin-top: 3px; color: var(--crm-accent); font-size: 11px; font-weight: 700; }
.crm-lead-detail dl { margin: 0; padding: 8px 17px; }
.crm-lead-detail dl > div { padding: 9px 0; border-bottom: 1px solid var(--crm-line); }
.crm-lead-detail dt { color: var(--crm-muted); font-size: 8px; }
.crm-lead-detail dd { margin: 3px 0 0; font-size: 10px; font-weight: 650; }
.crm-lead-history { padding: 10px 17px 16px; }
.crm-lead-history > small { color: var(--crm-muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.crm-lead-history p { margin: 8px 0 0; color: var(--crm-ink); font-size: 9px; line-height: 1.35; }
.crm-lead-history time { color: var(--crm-muted); }

.crm-table { overflow: hidden; border: 1px solid var(--crm-line); border-radius: 11px; background: var(--crm-surface); }
.crm-table-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(68px, .65fr) minmax(76px, .72fr); align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; border-top: 1px solid var(--crm-line); font-size: 10px; }
.crm-table-row:first-child { border-top: 0; }
.crm-table-row.is-head { min-height: 36px; color: var(--crm-muted); background: #f2ebee; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.crm-table-row b { min-width: 0; font-size: 10px; line-height: 1.35; }
.crm-table-row b small { display: block; margin-top: 4px; color: var(--crm-muted); font-weight: 500; }
.crm-table-row em { width: fit-content; padding: 5px 7px; border-radius: 99px; font-style: normal; font-weight: 700; white-space: nowrap; }
.crm-table-row .is-good { color: #28765e; background: #e7f4ef; }
.crm-table-row .is-warn { color: #8a5a12; background: #fbf0da; }
.crm-table-row .is-late { color: #a12e41; background: #f9e4e8; }

.crm-showcase figcaption {
  margin-top: 15px;
  color: rgba(235, 240, 244, .64);
  font-size: 14px;
  line-height: 1.55;
}

.crm-showcase figcaption strong { color: rgba(255, 255, 255, .9); }

.crm-window-compact .crm-sidebar { padding: 18px 10px 14px; }
.crm-window-compact .crm-brand { gap: 7px; padding: 0 5px 18px; }
.crm-window-compact .crm-brand > span { width: 27px; height: 27px; }
.crm-window-compact .crm-brand strong { font-size: 10px; }
.crm-window-compact .crm-sidebar nav { gap: 2px; }
.crm-window-compact .crm-sidebar nav span { padding: 5px 8px; font-size: 8px; }
.crm-window-compact .crm-workspace { padding: 20px 18px; }
.crm-window-compact .crm-screen-head h3 { font-size: 24px; }
.crm-window-compact .crm-screen-head button { min-height: 34px; padding: 0 10px; font-size: 10px; }
.crm-window-compact .crm-metrics { margin: 18px 0; }
.crm-window-compact .crm-metrics > div { min-width: 100px; padding: 10px; }
.crm-window-compact .crm-metrics strong { font-size: 16px; }

@media (max-width: 900px) {
  .crm-showcase-grid { grid-template-columns: 1fr; }
  .crm-window { grid-template-columns: 150px minmax(0, 1fr); }
  .crm-pipeline-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .clinic-case-main { padding-inline: 18px; }
  .clinic-case-section p { font-size: 16px; }
  .crm-window,
  .crm-window-compact { grid-template-columns: 1fr; }
  .crm-sidebar { display: none; }
  .crm-workspace { padding: 16px; }
  .crm-screen-head { align-items: flex-start; }
  .crm-screen-head h3 { font-size: 24px; }
  .crm-pipeline > section { grid-template-columns: 1fr; min-height: 0; }
}