/* Shared by the Clinic and Parent views. Presentation uses the homepage tokens; fictional records stay in clinician-demo.js. */
.marketing-clinic-demo {
  --clinic-avatar-size: 48px;
  --clinic-avatar-large: 64px;
  --clinic-stat-size: 40px;
  --clinic-metric-size: 28px;
  --clinic-title-size: 46px;
  --clinic-card-title-size: 28px;
  --clinic-subtitle-size: 21px;
  --clinic-body-size: 17px;
  --clinic-caption-size: 14px;
  --clinic-label-size: 13px;
  --clinic-lead-size: 20px;
  --clinic-chevron-size: 8px;
  --clinic-border-width: 1px;
  --clinic-chevron-border: 2px;
  --clinic-chart-label-size: 12px;
  --clinic-chart-line-width: 3px;
  --clinic-average-line-width: 2px;
  --clinic-chart-max-width: 600px;
  --clinic-report-field-border: 2px;
  --clinic-metric-width: 132px;
  --clinic-rank-width: 76px;
  --clinic-spark-width: 72px;
  --clinic-dot-size: 8px;
  --clinic-earlier-opacity: 0.4;
  --clinic-chevron-space: 56px;
  --clinic-family-tint: var(--teal-tint);
}
.marketing-clinic-demo :is(h2,a) { scroll-margin-top: var(--header-clearance); }
.marketing-clinic-demo h2 { font-size: var(--clinic-card-title-size); font-weight: 600; line-height: 1.15; }
.marketing-clinic-demo h3 { font-size: var(--clinic-subtitle-size); font-weight: 600; line-height: 1.3; }
.marketing-clinic-demo :is(h4,h5) { margin: 0; color: var(--navy); font: 800 var(--clinic-body-size)/1.3 var(--font-body); }
.marketing-clinic-demo .eyebrow { color: var(--teal-deep); }
.marketing-clinic-demo .demo-caption { color: var(--ink-muted); font-size: var(--clinic-caption-size); }
.marketing-clinic-demo .demo-program { font-weight: 800; }
.marketing-clinic-demo :is(.demo-audience a,.demo-child-link,.demo-back) { color: var(--blue-deep); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

/* Intro: one compact band, one line of notice. */
.marketing-clinic-demo .clinic-intro { background: var(--sky); }
.marketing-clinic-demo .clinic-intro .section-inner { padding-block: var(--hero-space) var(--space-xl); }
.marketing-clinic-demo .clinic-content { padding-block: var(--space-xl) var(--space-section); }
.marketing-clinic-demo .demo-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-lg); }
.marketing-clinic-demo .demo-heading > div { display: grid; gap: var(--space-sm); }
.marketing-clinic-demo .demo-heading > div > p:last-child { max-width: var(--copy-width); font-size: var(--clinic-lead-size); }
.marketing-clinic-demo .demo-heading .button { flex-shrink: 0; }
.marketing-clinic-demo .demo-notice { margin-top: var(--space-lg); max-width: var(--copy-width); font-size: var(--clinic-caption-size); }
.marketing-clinic-demo .demo-notice p + p { margin-top: var(--space-xs); }
.marketing-clinic-demo .demo-notice strong { color: var(--navy); }

/* Caseload: one collapsible card per child, tinted by family. */
.marketing-clinic-demo .demo-caseload-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-lg); }
.marketing-clinic-demo .demo-caseload-heading p { margin: 0; }
.marketing-clinic-demo .demo-child-list { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.marketing-clinic-demo .demo-family-tone-1 { --clinic-family-tint: var(--sky); }
.marketing-clinic-demo .demo-family-tone-2 { --clinic-family-tint: var(--sun-tint); }
.marketing-clinic-demo .demo-family-tone-3 { --clinic-family-tint: var(--coral-tint); }
.marketing-clinic-demo .demo-family-tone-4 { --clinic-family-tint: var(--mint); }
.marketing-clinic-demo .demo-child-card { min-width: 0; border: var(--clinic-border-width) solid var(--hairline); border-radius: var(--radius-card); background: color-mix(in srgb, var(--clinic-family-tint) 55%, var(--surface)); }
.marketing-clinic-demo .demo-child-card > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); position: relative; min-height: var(--tap-target); padding: var(--space-md) var(--clinic-chevron-space) var(--space-md) var(--space-lg); border-radius: var(--radius-card); cursor: pointer; list-style: none; }
.marketing-clinic-demo .demo-child-card > summary::-webkit-details-marker { display: none; }
.marketing-clinic-demo .demo-child-card > summary::after { content: ''; position: absolute; right: var(--space-lg); top: calc(50% - var(--clinic-chevron-size)); width: var(--clinic-chevron-size); height: var(--clinic-chevron-size); border-bottom: var(--clinic-chevron-border) solid var(--navy); border-right: var(--clinic-chevron-border) solid var(--navy); transform: rotate(45deg); }
.marketing-clinic-demo .demo-child-card[open] > summary::after { transform: rotate(225deg); }
.marketing-clinic-demo .demo-child-identity { display: flex; align-items: center; gap: var(--space-sm); flex: 1 1 var(--phone-width); min-width: 0; }
.marketing-clinic-demo .demo-child-copy { display: grid; min-width: 0; overflow-wrap: anywhere; }
.marketing-clinic-demo .demo-child-name { color: var(--navy); font: 600 var(--clinic-subtitle-size)/1.3 var(--font-display); letter-spacing: -0.01em; }
.marketing-clinic-demo .demo-avatar { display: grid; place-items: center; flex-shrink: 0; width: var(--clinic-avatar-size); height: var(--clinic-avatar-size); border-radius: var(--radius-field); background: var(--surface); color: var(--navy); font: 600 var(--clinic-subtitle-size)/1 var(--font-display); }
.marketing-clinic-demo .demo-child-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.marketing-clinic-demo .demo-child-tag { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--surface); color: var(--red-deep); font: 800 var(--clinic-label-size)/1.3 var(--font-body); box-shadow: inset 0 0 0 var(--clinic-border-width) var(--red-deep); }
.marketing-clinic-demo .demo-child-tag::before { content: ''; flex-shrink: 0; width: var(--clinic-dot-size); height: var(--clinic-dot-size); border-radius: 50%; background: var(--red); }
.marketing-clinic-demo .demo-child-metrics { display: flex; gap: var(--space-lg); margin-left: auto; }
.marketing-clinic-demo .demo-child-metric { display: grid; width: var(--clinic-metric-width); }
.marketing-clinic-demo .demo-child-metric strong { color: var(--navy); font: 700 var(--clinic-metric-size)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.marketing-clinic-demo .demo-child-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); margin: 0 var(--space-sm) var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-choice-card); background: var(--surface); }
.marketing-clinic-demo .demo-child-volume { margin: 0; display: grid; gap: var(--space-sm); align-content: start; }
.marketing-clinic-demo .demo-child-volume figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-sm); }
.marketing-clinic-demo .demo-volume-chart { display: block; width: 100%; height: auto; overflow: visible; }
.marketing-clinic-demo .demo-volume-chart text { fill: var(--ink-muted); font-size: var(--clinic-chart-label-size); font-weight: 700; }
.marketing-clinic-demo .demo-volume-grid { stroke: var(--hairline); }
.marketing-clinic-demo .demo-volume-divider { stroke: var(--ink-muted); stroke-dasharray: 3 4; }
.marketing-clinic-demo .demo-volume-bar { fill: var(--teal-deep); }
.marketing-clinic-demo .demo-volume-bar.is-earlier { fill-opacity: var(--clinic-earlier-opacity); }
.marketing-clinic-demo .demo-volume-empty { fill: var(--token-empty); }
.marketing-clinic-demo .demo-child-targets { display: grid; gap: var(--space-sm); align-content: start; }
.marketing-clinic-demo .demo-target-list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.marketing-clinic-demo .demo-target-row { display: grid; grid-template-columns: var(--clinic-rank-width) minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-sm); margin: 0; padding-top: var(--space-sm); border-top: var(--clinic-border-width) solid var(--hairline); }
.marketing-clinic-demo .demo-target-rank { font-size: var(--clinic-chart-label-size); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.marketing-clinic-demo .is-highest > .demo-target-rank { color: var(--teal-deep); }
.marketing-clinic-demo .is-lowest > .demo-target-rank { color: var(--yellow-deep); }
.marketing-clinic-demo .demo-target-copy { display: grid; min-width: 0; }
.marketing-clinic-demo .demo-target-share { font: 600 var(--clinic-subtitle-size)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.marketing-clinic-demo .demo-child-link { display: flex; align-items: center; width: fit-content; min-height: var(--tap-target); }

/* Child page. */
.marketing-clinic-demo .demo-back { display: inline-flex; align-items: center; min-height: var(--tap-target); margin-bottom: var(--space-md); }
.marketing-clinic-demo .demo-child-heading { display: flex; align-items: start; gap: var(--space-lg); }
.marketing-clinic-demo .demo-child-heading > div { display: grid; justify-items: start; gap: var(--space-xs); min-width: 0; }
.marketing-clinic-demo .demo-child-heading .eyebrow { margin: 0; }
.marketing-clinic-demo .demo-child-heading .demo-avatar { width: var(--clinic-avatar-large); height: var(--clinic-avatar-large); border-radius: var(--radius-choice-card); background: var(--clinic-family-tint); font-size: var(--clinic-card-title-size); }
.marketing-clinic-demo #demo-child-title { font-size: var(--clinic-title-size); font-weight: 700; line-height: 1.08; }
.marketing-clinic-demo .demo-flag { display: inline-block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--mint); color: var(--teal-deep); font-size: var(--clinic-label-size); font-weight: 800; }
.marketing-clinic-demo .demo-week-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.marketing-clinic-demo .demo-week-stats article { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; padding: var(--space-lg); border: var(--clinic-border-width) solid var(--hairline); border-radius: var(--radius-card); }
.marketing-clinic-demo .demo-week-stats strong { color: var(--navy); font: 700 var(--clinic-stat-size)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.marketing-clinic-demo .demo-week-stats span { color: var(--navy); font-weight: 800; }
.marketing-clinic-demo .demo-week-stats p { margin: 0; }
.marketing-clinic-demo .demo-target-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--phone-width)), 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); }
.marketing-clinic-demo .demo-target-highlight { display: grid; gap: var(--space-sm); justify-items: start; align-content: start; min-width: 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--mint); }
.marketing-clinic-demo .demo-target-highlight.is-lowest { background: var(--sun-tint); }
.marketing-clinic-demo .demo-target-highlight .eyebrow { margin: 0; }
.marketing-clinic-demo .demo-target-highlight.is-lowest .eyebrow { color: var(--yellow-deep); }
.marketing-clinic-demo .demo-target-highlight :is(h3,p) { margin: 0; }
.marketing-clinic-demo .demo-target-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); font-size: var(--clinic-caption-size); }
.marketing-clinic-demo .demo-target-figure strong { color: var(--navy); font: 700 var(--clinic-stat-size)/1 var(--font-display); }
.marketing-clinic-demo .demo-target-note { font-size: var(--clinic-caption-size); }
.marketing-clinic-demo .demo-card { min-width: 0; padding: var(--card-padding); border: var(--clinic-border-width) solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); }
.marketing-clinic-demo :is(.demo-targets,.demo-mastery) { margin-top: var(--space-lg); }
.marketing-clinic-demo .demo-targets h4 { margin-top: var(--space-lg); }
.marketing-clinic-demo :is(.demo-targets,.demo-mastery) .demo-child-tag { margin-left: var(--space-xs); vertical-align: middle; }
.marketing-clinic-demo .demo-target-days { white-space: nowrap; }
.marketing-clinic-demo .demo-target-days > span { vertical-align: middle; }
.marketing-clinic-demo .demo-spark { width: var(--clinic-spark-width); height: auto; margin-right: var(--space-sm); vertical-align: middle; overflow: visible; }
.marketing-clinic-demo .demo-spark polyline { fill: none; stroke: var(--teal-deep); stroke-width: var(--clinic-average-line-width); stroke-linejoin: round; }
.marketing-clinic-demo .demo-spark circle { fill: var(--teal-deep); }
.marketing-clinic-demo .demo-spark.is-falling polyline { stroke: var(--red-deep); }
.marketing-clinic-demo .demo-spark.is-falling circle { fill: var(--red-deep); }
.marketing-clinic-demo .demo-detail-section { margin-top: var(--space-lg); }
.marketing-clinic-demo .demo-card > h3 { margin-top: var(--space-md); }
.marketing-clinic-demo :is(.demo-targets,.demo-mastery) > h3 { margin-top: 0; }
.marketing-clinic-demo :is(ol,ul) { margin: var(--space-md) 0 0; padding-left: var(--space-lg); }
.marketing-clinic-demo li + li { margin-top: var(--space-sm); }
.marketing-clinic-demo li::marker { color: var(--blue-deep); }
.marketing-clinic-demo .demo-detail-section > h4 + p { margin-top: var(--space-sm); }
.marketing-clinic-demo .demo-table-scroll { overflow-x: auto; margin-block: var(--space-md) 0; }
.marketing-clinic-demo .demo-progress-table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--clinic-caption-size); font-variant-numeric: tabular-nums; }
.marketing-clinic-demo .demo-progress-table caption { text-align: left; font-weight: 800; padding-bottom: var(--space-sm); }
.marketing-clinic-demo .demo-progress-table :is(th,td) { padding: var(--space-sm); border-bottom: var(--clinic-border-width) solid var(--hairline); text-align: right; white-space: nowrap; }
.marketing-clinic-demo .demo-progress-table :is(th,td):first-child, .marketing-clinic-demo .demo-progress-table td.demo-target-days, .marketing-clinic-demo .demo-targets th:nth-child(2) { text-align: left; }
.marketing-clinic-demo .demo-progress-table thead th { color: var(--ink-muted); white-space: nowrap; }
.marketing-clinic-demo .demo-attempts { margin-top: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-choice-card); background: var(--sun-tint); }
.marketing-clinic-demo :is(.demo-attempts,.demo-about) > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--tap-target); cursor: pointer; list-style: none; font-weight: 800; }
.marketing-clinic-demo :is(.demo-attempts,.demo-about) > summary::-webkit-details-marker { display: none; }
.marketing-clinic-demo :is(.demo-attempts,.demo-about) > summary::after { content: ''; width: var(--clinic-chevron-size); height: var(--clinic-chevron-size); flex-shrink: 0; border-bottom: var(--clinic-chevron-border) solid var(--navy); border-right: var(--clinic-chevron-border) solid var(--navy); transform: rotate(45deg); }
.marketing-clinic-demo :is(.demo-attempts,.demo-about)[open] > summary::after { transform: rotate(225deg); }
.marketing-clinic-demo .demo-attempts h5 { margin-block: var(--space-md) var(--space-xs); }
.marketing-clinic-demo .demo-attempt-event { padding-block: var(--space-xs); }
.marketing-clinic-demo .demo-attempt-event span { margin-left: var(--space-md); font-weight: 800; }
.marketing-clinic-demo .demo-about { margin-top: var(--space-lg); max-width: var(--copy-width); }
.marketing-clinic-demo .demo-about > summary { justify-content: flex-start; }
.marketing-clinic-demo .demo-about p { margin: 0 0 var(--space-sm); }

/* Program report. */
.marketing-clinic-demo .demo-report { margin-block: var(--space-xl) 0; }
.marketing-clinic-demo .demo-report-switcher { display: grid; gap: var(--space-xs); font-weight: 800; margin-block: var(--space-md); }
.marketing-clinic-demo .demo-report-switcher select { min-height: var(--tap-target); max-width: 100%; width: 100%; padding: var(--space-sm) var(--space-md); border: var(--clinic-report-field-border) solid var(--hairline); border-radius: var(--radius-field); background: var(--surface); color: var(--navy); font: inherit; }
.marketing-clinic-demo .demo-report-card { min-width: 0; }
.marketing-clinic-demo .demo-report-card h4 { font: 600 var(--clinic-subtitle-size)/1.3 var(--font-display); }
.marketing-clinic-demo .demo-report-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; margin-top: var(--space-md); }
.marketing-clinic-demo .demo-report-chart { width: 100%; max-width: var(--clinic-chart-max-width); height: auto; display: block; overflow: visible; margin: var(--space-md) auto 0; }
.marketing-clinic-demo .demo-report-chart text { font-size: var(--clinic-chart-label-size); fill: var(--navy); }
.marketing-clinic-demo .demo-report-grid { stroke: var(--hairline); }
.marketing-clinic-demo .demo-report-series { fill: none; stroke: var(--navy); stroke-width: var(--clinic-chart-line-width); stroke-linejoin: round; }
.marketing-clinic-demo .demo-report-average { fill: none; stroke: var(--teal-deep); stroke-width: var(--clinic-average-line-width); stroke-dasharray: 5 4; }
.marketing-clinic-demo .demo-report-mark { fill: var(--navy); }
.marketing-clinic-demo .demo-report-bar { fill: var(--teal-deep); }
.marketing-clinic-demo .demo-report-missing { fill: var(--ink-muted); }
.marketing-clinic-demo .demo-report-legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-sm); font-size: var(--clinic-label-size); font-weight: 800; color: var(--ink-muted); }
.marketing-clinic-demo .demo-report-legend span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.marketing-clinic-demo .demo-report-legend span::before { content: ''; width: var(--space-md); border-top: var(--clinic-chart-line-width) solid var(--navy); }
.marketing-clinic-demo .demo-report-legend .is-average::before { border-top: var(--clinic-average-line-width) dashed var(--teal-deep); }
.marketing-clinic-demo .demo-report-day-summary { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-field); background: var(--sky); font-size: var(--clinic-caption-size); }
.marketing-clinic-demo .demo-report-values summary { cursor: pointer; font-weight: 800; min-height: var(--tap-target); }

.marketing-clinic-demo .demo-contact { background: var(--teal-tint); }
.marketing-clinic-demo .demo-contact p { max-width: var(--copy-width); }
.marketing-clinic-demo .demo-contact .button { margin-top: var(--space-lg); }
.marketing-clinic-demo .footer-links { margin: 0; padding: 0; }
.marketing-clinic-demo .footer-links li + li { margin-top: 0; }
@media (max-width: 1040px) {
  .marketing-clinic-demo .demo-child-metrics { margin-left: 0; flex: 1 1 100%; }
  .marketing-clinic-demo .demo-child-metric { width: auto; flex: 1 1 0; }
}
@media (max-width: 800px) {
  .marketing-clinic-demo .demo-heading { align-items: start; flex-direction: column; }
  .marketing-clinic-demo :is(.demo-child-body,.demo-report-columns) { grid-template-columns: 1fr; }
  .marketing-clinic-demo .demo-child-heading { align-items: start; }
  .marketing-clinic-demo .demo-week-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .marketing-clinic-demo .demo-week-stats { grid-template-columns: 1fr; }
  .marketing-clinic-demo .demo-child-card > summary { padding-left: var(--space-md); }
  .marketing-clinic-demo .demo-child-body { padding: var(--space-md); }
  .marketing-clinic-demo .demo-child-metrics { gap: var(--space-sm); }
  .marketing-clinic-demo .demo-target-row { grid-template-columns: minmax(0, 1fr) auto; }
  .marketing-clinic-demo .demo-target-rank { grid-column: 1 / -1; }
}