/* A second layer for the concept: quiet clinical technology, not decoration. */
.cm-hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 80% 24%, rgba(184, 214, 199, .68), transparent 23%),
    linear-gradient(114deg, #e7eee8 0%, #dbe7df 48%, #cfdfd6 100%);
}

.cm-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(50vw, 720px);
  aspect-ratio: 1;
  right: 21%;
  top: -29%;
  border: 1px solid rgba(20, 60, 58, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(245, 244, 238, .26), 0 0 0 68px rgba(245, 244, 238, .16);
}

.cm-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }

.cm-hero-status {
  display: grid;
  grid-template-columns: 11px 1fr auto;
  gap: 11px;
  align-items: center;
  width: min(100%, 365px);
  margin-top: 37px;
  padding-top: 15px;
  border-top: 1px solid rgba(20, 60, 58, .24);
  color: #55756c;
}

.cm-hero-status p { margin: 0; font-size: 10px; line-height: 1.55; }
.cm-hero-status strong { color: var(--cm-ink); font-size: 10px; }
.cm-status-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--cm-coral); box-shadow: 0 0 0 5px rgba(220, 123, 97, .14); animation: cm-pulse 2.5s ease-in-out infinite; }
.cm-status-index { color: #668277; font: 500 9px var(--cm-mono); letter-spacing: .08em; }

.cm-booking-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(94, 151, 135, .35), transparent 33%),
    linear-gradient(140deg, #0c3030, #103b38);
}

.cm-booking-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 250px;
  height: 250px;
  right: -126px;
  bottom: -150px;
  border: 1px solid rgba(185, 220, 204, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(185, 220, 204, .05), 0 0 0 60px rgba(185, 220, 204, .04);
}

.cm-booking-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 17px; }
.cm-booking-progress span { position: relative; padding-bottom: 8px; color: #89a99b; font: 500 8px var(--cm-mono); letter-spacing: .07em; text-transform: uppercase; }
.cm-booking-progress span::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: rgba(232, 240, 234, .18); }
.cm-booking-progress .is-current { color: #e7f1eb; }
.cm-booking-progress .is-current::after { background: #d98870; }
.cm-booking-confidence { display: flex; align-items: flex-start; gap: 10px; padding-top: 15px; border-top: 1px solid rgba(232, 240, 234, .17); color: #adc5b9; }
.cm-booking-confidence p { margin: 0; font-size: 9px; line-height: 1.55; }
.cm-booking-confidence strong { color: #e7f1eb; font-weight: 600; }
.cm-confidence-mark { display: grid; flex: 0 0 auto; width: 18px; height: 18px; place-items: center; border: 1px solid rgba(232, 240, 234, .36); color: #dd896e; font: 400 15px/1 var(--cm-serif); }
.cm-card-note { position: relative; z-index: 1; }

.cm-steps li { transition: background .25s ease, padding .25s ease; }
.cm-steps li:hover { padding-right: 24px; padding-left: 24px; background: #eff4ed; }
.cm-steps li:hover h3 { color: #c36952; }
.cm-steps h3 { transition: color .25s ease; }

.cm-doctor-layout { overflow: hidden; box-shadow: 0 18px 40px rgba(20, 60, 58, .055); }
.cm-doctor-panel { position: relative; overflow: hidden; }
.cm-doctor-panel::after { content: ""; position: absolute; width: 280px; height: 280px; right: -140px; bottom: -150px; border: 1px solid rgba(20, 60, 58, .14); border-radius: 50%; box-shadow: 0 0 0 38px rgba(20, 60, 58, .045); pointer-events: none; }
.cm-doctor-details { position: relative; z-index: 1; }
.cm-doctor-monogram { background: linear-gradient(145deg, #37796f, #1e514d); }

.cm-calendar-card { position: relative; overflow: hidden; background: linear-gradient(140deg, #0d3030 0%, #123d39 100%); }
.cm-calendar-card::before { content: ""; position: absolute; width: 400px; height: 400px; right: -235px; top: -250px; border: 1px solid rgba(195, 222, 210, .16); border-radius: 50%; box-shadow: 0 0 0 48px rgba(195, 222, 210, .04); pointer-events: none; }
.cm-calendar-card > * { position: relative; z-index: 1; }
.cm-slots button { transition: transform .2s ease, background .2s ease, color .2s ease; }
.cm-slots button:hover { transform: translateY(-3px); }

.cm-privacy { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(125deg, #1d4e49 0%, #286159 58%, #17423f 100%); }
.cm-privacy > :not(.cm-privacy-architecture) { position: relative; z-index: 1; }
.cm-privacy-architecture { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.cm-privacy-architecture span { position: absolute; border: 1px solid rgba(232, 242, 235, .14); border-radius: 50%; }
.cm-privacy-architecture span:first-child { width: 46vw; aspect-ratio: 1; right: -17vw; top: -23vw; }
.cm-privacy-architecture span:nth-child(2) { width: 28vw; aspect-ratio: 1; right: 7vw; bottom: -20vw; }
.cm-privacy-architecture i { position: absolute; right: 7vw; top: 28px; color: rgba(232, 242, 235, .07); font: 400 clamp(13rem, 24vw, 28rem)/1 var(--cm-serif); letter-spacing: -.12em; font-style: normal; }

.cm-final { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 50% 45%, #eaf2eb 0 19%, #dbe9df 19.2% 32%, #cde1d6 32.2% 100%); }
.cm-final::before,.cm-final::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(20, 60, 58, .16); border-radius: 50%; pointer-events: none; }
.cm-final::before { width: min(72vw, 980px); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cm-final::after { width: min(49vw, 680px); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); border-color: rgba(220, 123, 97, .4); }
.cm-final-button { box-shadow: 0 12px 24px rgba(14, 46, 46, .18); }

@keyframes cm-pulse { 50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(220, 123, 97, 0); } }

@media (max-width:850px) {
  .cm-hero::before { width: 470px; right: -265px; top: 12%; }
  .cm-hero-status { margin-top: 31px; }
  .cm-booking-progress { margin-top: 15px; }
  .cm-booking-confidence { margin-top: 2px; }
  .cm-steps li:hover { padding-right: 0; padding-left: 0; background: transparent; }
  .cm-privacy-architecture span:first-child { width: 110vw; right: -60vw; top: -29vw; }
  .cm-privacy-architecture span:nth-child(2) { width: 78vw; right: -21vw; bottom: -39vw; }
  .cm-privacy-architecture i { right: 5vw; top: 10px; font-size: 10rem; }
  .cm-final { background: radial-gradient(circle at 50% 42%, #eaf2eb 0 17%, #dbe9df 17.5% 33%, #cde1d6 33.5% 100%); }
  .cm-final::before { width: 124vw; }
  .cm-final::after { width: 82vw; }
}

@media (prefers-reduced-motion:reduce) { .cm-status-pulse { animation: none; } }