/* Zuma web tokens mirror ZumaHomeDesign in ios/ZumaPOC/App/ContentView.swift.
   Display sizes scale for the web; tracking remains proportional to the app. */
:root {
  --zuma-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zuma-background: #fdfdfd;
  --zuma-foreground: #111111;
  --zuma-secondary: #646464;
  --zuma-accent: #769add;
  --zuma-link: #385f9f;
  --zuma-peach: #f5b098;
  --zuma-green: #71bc68;
  --zuma-pain: #bd527d;
  --zuma-surface: #f5f5f5;
  --zuma-cool: linear-gradient(115deg, #afddff, #d8e9fb 55%, #ceddfe);
  --zuma-warm: linear-gradient(115deg, #ffcee3, #ffdcc2 55%, #fed7e9);
  --zuma-glass: #ffffff55;
  --zuma-glass-border: #ffffffa6;
  --ink: var(--zuma-foreground);
  --muted: var(--zuma-secondary);
  --paper: var(--zuma-background);
  --blue: var(--zuma-accent);
}
body.clinic-site { font-family: var(--zuma-font); background: var(--zuma-background); color: var(--zuma-foreground); font-weight:400; letter-spacing:-.005em; }
.clinic-site :is(button,input,select,textarea) { font-family:inherit; }
.clinic-site :is(.hero-copy h1,.section-title h1,.section-title h2,.patients-panel h2,.survey-intro h1,.survey-step h2) {
  font-family:var(--zuma-font); font-weight:500; letter-spacing:-.02em; line-height:1.2; color:var(--zuma-foreground);
}
.clinic-site .hero-copy h1 { font-size:clamp(36px,5.1vw,68px); max-width:1060px; }
.clinic-site :is(.section-title h1,.section-title h2,.patients-panel h2) { font-size:clamp(28px,3.6vw,48px); }
.clinic-site h3 { font-family:var(--zuma-font); font-weight:500; font-size:24px; letter-spacing:-.02em; line-height:1.2; }
.clinic-site p { line-height:1.5; letter-spacing:-.005em; }
.clinic-site :is(.soft-card p,.workflow>p,.founders p,.older-points p,.section-title p,.patients-panel p,.faq details p,.form-note,.form-context,.form-status,.optional,.survey-intro p,.question-hint,.survey-extra) { color:var(--zuma-secondary); }
.clinic-site :is(.hero,.compact-header) { background:var(--zuma-cool); color:var(--zuma-foreground); }
.clinic-site .hero { border-radius:28px; }
.clinic-site .hero-copy>p { color:var(--zuma-secondary)!important; letter-spacing:-.005em; }
.clinic-site .hero-copy .eyebrow { color:var(--zuma-link)!important; }
.clinic-site .header-logo path { fill:var(--zuma-foreground); }
.clinic-site header nav a { color:var(--zuma-foreground); font-weight:500; }
.clinic-site :is(.primary-access,.submit-button) {
  background:var(--zuma-foreground); color:#fff; border:1px solid transparent; box-shadow:none;
  font-size:17px; font-weight:500; letter-spacing:-.005em; border-radius:999px; min-height:54px; cursor:pointer;
}
.clinic-site :is(.primary-access,.submit-button):hover { background:#303030; color:#fff; box-shadow:none; }
.clinic-site :is(.patient-link,.text-link,.patients-panel a,.form-note a,.survey-back) { color:var(--zuma-link); }
.clinic-site .fog { background:linear-gradient(transparent,#d8e9fb70 45%,#d8e9fb); }
.clinic-site .preview-caption { color:var(--zuma-secondary); }
.clinic-site .soft-card { background:var(--zuma-cool); border:0; border-radius:28px; }
.clinic-site .soft-card:nth-child(2) { background:var(--zuma-warm); }
.clinic-site .soft-card:nth-child(3) { background:linear-gradient(115deg,#d8eed5,#edf5e8); }
.clinic-site .card-mark { background:var(--zuma-glass); border:1px solid var(--zuma-glass-border); border-radius:50%; color:var(--zuma-secondary); backdrop-filter:blur(12px); }
.clinic-site :is(.older-panel,.patients-panel,form) { background:var(--zuma-surface); border-radius:28px; }
.clinic-site .screen-placeholder { background:var(--zuma-cool); border:0; color:var(--zuma-foreground); }
.clinic-site :is(.screen-placeholder>span,.portrait-placeholder span) { font-family:var(--zuma-font); font-weight:500; letter-spacing:-.02em; color:var(--zuma-link); }
.clinic-site .screen-placeholder small { color:var(--zuma-secondary); }
.clinic-site .portrait-placeholder { background:var(--zuma-cool); }
.clinic-site .founders article:nth-child(2) .portrait-placeholder { background:var(--zuma-warm); }
.clinic-site .field :is(label,legend) { color:var(--zuma-foreground); font-weight:500; font-size:17px; }
.clinic-site .field :is(input,select,textarea) { background:#fff; color:var(--zuma-foreground); border-color:#d6d6d6; border-radius:16px; font-size:18px; letter-spacing:-.005em; }
.clinic-site .field :is(input,textarea)::placeholder { color:var(--zuma-secondary); }
.clinic-site :focus-visible { outline:3px solid var(--zuma-accent); outline-offset:4px; }
.clinic-site .site-footer { background:var(--zuma-surface); color:var(--zuma-foreground); border-radius:28px; }
.clinic-site .clinic-footer :is(a,h3),.clinic-site .footer-bottom a { color:var(--zuma-foreground); }
.clinic-site .clinic-footer p,.clinic-site .footer-bottom { color:var(--zuma-secondary); }
.clinic-site .footer-bottom { border-color:#dedede; }
.clinic-site.survey-page { background:var(--zuma-background); }
.clinic-site .short-survey { background:none; }
.clinic-site .survey-choice { color:var(--zuma-foreground); border-radius:18px; border-color:#e5e5e5; }
.clinic-site .survey-choice:has(input:checked) { background:#eaf1fc; border-color:var(--zuma-accent); }
.clinic-site :is(.survey-choice input,.survey-progress progress) { accent-color:var(--zuma-accent); }
@media(max-width:500px) {
  .clinic-site .hero-copy h1 { font-size:36px; }
  .clinic-site header nav a { font-size:15px; }
  .clinic-site .hero-copy { padding-top:30px; }
}
@media(prefers-reduced-motion:reduce) { .clinic-site *, .clinic-site *::before, .clinic-site *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
/* Keep the app's quiet gradient, without the previous saturated light overlays. */
.clinic-site .hero::before,.clinic-site .hero::after { content:none; }
.clinic-site .program-card { color:var(--zuma-secondary); font-family:var(--zuma-font); }
.clinic-site .program-card.selected { color:var(--zuma-foreground); }
/* Published hero palette; typography stays shared with the app. */
.clinic-site .hero {
  background:radial-gradient(ellipse at 8% 61%,#b8dff5 0,transparent 36%),radial-gradient(ellipse at 95% 58%,#b0dcf5 0,transparent 38%),linear-gradient(#52a9e1 20%,#70bce8 62%,#53aae2);
  color:#fff;
}
.clinic-site .hero::before,.clinic-site .hero::after { content:''; }
.clinic-site .hero-copy h1 { color:#fff; font-size:clamp(34px,4.6vw,62px); }
.clinic-site .hero-copy>p { color:#f1f8fc!important; }
.clinic-site .hero .header-logo path { fill:#fff; }
.clinic-site .hero header nav a,.clinic-site .hero .patient-link,.clinic-site .hero .preview-caption { color:#f1f8fc; }
.clinic-site .hero .primary-access {
  background:linear-gradient(155deg,#fff,#f1faff 60%,#d7eefb); color:#355b73; border-color:#ffffffc0;
}
.clinic-site .hero .primary-access:hover { background:#fff; color:#355b73; }
.clinic-site .hero .fog { background:linear-gradient(transparent,#65b4e644 30%,#5aaee5d9 73%,#59ade5); }
.clinic-site .hero .program-card { color:#fff; }
.clinic-site .hero .program-card.selected { color:#355b73; }

/* Section headings use the same display treatment as H1 at a smaller scale. */
.clinic-site :is(.section-title h2,.patients-panel h2) {
  font-family:var(--zuma-font);
  font-size:clamp(28px,3.2vw,42px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.2;
}

.clinic-site .hero-copy h1 { font-size:clamp(28px,3.2vw,42px); max-width:1000px; }

/* Hero hierarchy: slightly larger title, quieter supporting copy. */
.clinic-site .hero-copy h1 { font-size:clamp(32px,3.6vw,48px); }
.clinic-site .hero-copy>p { font-size:18px!important; }
@media(max-width:500px) {
  .clinic-site .hero-copy>p { font-size:17px!important; }
}
/* Compact hero controls and a balanced glow beneath the headline. */
.clinic-site .hero .primary-access {
  min-height:44px;
  padding:11px 22px;
  font-size:15px;
  line-height:1.3;
}
.clinic-site .hero .header-logo { width:92px; }
.clinic-site .hero {
  background:linear-gradient(180deg,#52a9e1 0%,#52a9e1 36%,#70bce8 72%,#59ade5 100%);
}
.clinic-site .hero::before {
  inset:0;
  background:radial-gradient(ellipse at 0% 75%,#d5effa99 0%,transparent 48%),radial-gradient(ellipse at 100% 75%,#d5effa99 0%,transparent 48%);
  opacity:1;
}
.clinic-site .hero::after { content:none; }
.clinic-site .hero-copy h1 { max-width:1160px; font-size:clamp(32px,3.4vw,48px); }
.clinic-site .hero-copy h1 { font-weight:400; }
/* The glow belongs to the full hero, never a narrower inner container. */
.clinic-site .hero::before { width:100%; max-width:none; left:0; right:0; transform:none; border-radius:inherit; }
.clinic-site .hero .fog { left:0; right:0; width:100%; max-width:none; }
.dashboard-section { max-width:1320px; }
.clinic-dashboard { display:grid; grid-template-columns:170px minmax(0,1fr); background:#fff; border:1px solid #e6e9ed; border-radius:24px; overflow:hidden; box-shadow:0 20px 70px #243b5510; text-align:left; }
.dashboard-sidebar { display:flex; flex-direction:column; gap:8px; padding:30px 18px; background:#f6f8fa; border-right:1px solid #e9ecf0; }
.dashboard-sidebar>strong { font-size:28px; letter-spacing:-.04em; margin:0 14px 30px; }
.dashboard-clinic,.dashboard-sidebar>small { font-size:12px; color:#737b84; padding:10px 14px; }
.dashboard-sidebar>small { margin-top:auto; }
.dashboard-nav { padding:12px 14px; border-radius:12px; font-size:14px; color:#646b75; }
.dashboard-nav.active { background:#e6eefc; color:#385f9f; font-weight:500; }
.dashboard-main { padding:30px; min-width:0; }
.dashboard-top,.patient-list-heading,.detail-progress { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.dashboard-kicker { color:#737b84; font-size:12px; }
.clinic-site .dashboard-top h3 { margin:6px 0 24px; font-size:26px; }
.dashboard-demo { font-size:12px; background:#f4f5f7; padding:7px 12px; border-radius:20px; color:#737b84; }
.dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.dashboard-stats>div { padding:20px; background:#f3f6fb; border-radius:16px; display:flex; flex-direction:column; gap:10px; }
.dashboard-stats>div:last-child { background:#fff2eb; }
.dashboard-stats span { font-size:13px; color:#646b75; }
.dashboard-stats strong { font-size:30px; font-weight:500; letter-spacing:-.02em; }
.dashboard-stats strong span { font-size:20px; color:#9299a1; }
.dashboard-stats small { font-size:11px; color:#737b84; }
.dashboard-workspace { display:grid; grid-template-columns:1.3fr 1fr; gap:20px; }
.patient-list-heading h4,.patient-detail h4 { font-size:17px; font-weight:500; margin:12px 0; letter-spacing:-.005em; }
.patient-list-heading>span { font-size:12px; color:#737b84; }
.patient-row { display:flex; gap:10px; align-items:center; padding:16px 10px; border-bottom:1px solid #edf0f3; }
.patient-row.selected { background:#f0f5fd; border-radius:12px; border-color:transparent; }
.patient-avatar { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; background:#dce9fc; color:#385f9f; font-size:12px; }
.patient-avatar.peach { background:#fbe0d4; color:#8b533d; }.patient-avatar.green { background:#e1efdd; color:#4a7045; }
.patient-row b,.detail-session b { display:block; font-size:13px; font-weight:500; }
.patient-row small,.detail-session small { display:block; font-size:11px; color:#737b84; margin-top:5px; }
.patient-status { margin-left:auto; font-size:10px; color:#49694d; white-space:nowrap; }
.patient-status.attention { color:#925d42; }
.patient-detail { padding:20px; border:1px solid #e6e9ed; border-radius:16px; }
.clinic-site .patient-detail>p { font-size:12px; color:#737b84; margin:0 0 22px; }
.detail-progress { font-size:11px; }.detail-progress b { font-weight:500; }
.patient-detail progress { width:100%; height:6px; border:0; border-radius:4px; overflow:hidden; margin:12px 0 20px; accent-color:#769add; }
.patient-detail progress::-webkit-progress-bar { background:#edf1f6; }.patient-detail progress::-webkit-progress-value { background:#769add; border-radius:4px; }
.detail-session { display:flex; gap:10px; align-items:center; }
.completed-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#e1efdd; color:#4a7045; }
.detail-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0; }.detail-metrics strong { display:block; font-size:22px; font-weight:500; }.detail-metrics span { display:block; font-size:10px; color:#737b84; margin-top:6px; }
.clinic-site .patient-detail .next-session { margin:0; padding-top:14px; border-top:1px solid #edf0f3; font-size:11px; }.next-session b { display:block; font-weight:500; margin-top:5px; color:#333; }
.clinic-site .dashboard-caption { text-align:center; color:#737b84; font-size:12px; margin:18px 0 0; }
@media(max-width:1000px) { .dashboard-sidebar { display:none; }.clinic-dashboard { grid-template-columns:1fr; } }
@media(max-width:650px) { .dashboard-main { padding:18px; }.dashboard-workspace { grid-template-columns:1fr; }.dashboard-stats { gap:8px; }.dashboard-stats>div { padding:12px 9px; }.dashboard-stats span { font-size:11px; }.dashboard-stats strong { font-size:24px; }.dashboard-stats small { line-height:1.4; }.dashboard-demo { font-size:10px; }.dashboard-top { align-items:flex-start; } }
/* Keep the hero backdrop completely still. */
.clinic-site .hero,
.clinic-site .hero::before,
.clinic-site .hero::after,
.clinic-site .hero .fog {
  animation:none!important;
  transition:none!important;
}
.clinic-site .hero::before,
.clinic-site .hero::after { transform:none!important; will-change:auto; }
.clinic-site .hero-copy { padding-top:48px; }
@media(max-width:500px) { .clinic-site .hero-copy { padding-top:46px; } }
/* Patient coaching feature previews, adapted to the clinic story. */
.clinic-site .features { padding-top:90px; }
.clinic-site .features .feature { background:#f1f2f3; }
.clinic-site .features .feature h3 { font-family:var(--zuma-font); font-size:clamp(24px,2.4vw,32px); line-height:1.2; letter-spacing:-.02em; font-weight:500; color:var(--zuma-foreground); }
.clinic-site .features .section-title h2 { font-family:var(--zuma-font); font-size:clamp(28px,3.2vw,42px); font-weight:500; letter-spacing:-.02em; line-height:1.2; }

.web-plan { background:white; border-radius:20px; padding:20px 24px; color:#435e70; font-size:20px; font-weight:500; text-align:left; box-shadow:0 8px 20px #243b5507; }
.web-plan small { display:block; font-size:14px; font-weight:400; margin-top:8px; color:#85929d; }
.muted-plan { opacity:.35; }



@media(max-width:500px) { .clinic-site .features { padding-top:60px; }.web-plan { font-size:17px; padding:16px; }.web-plan small { font-size:12px; } }

/* Let badges retain their full width inside the animated workout rows. */
.clinic-site .features .workout-row { min-width:0; box-sizing:border-box; }
.clinic-site .features .workout-name { min-width:0; }
.clinic-site .features .workout-duration { flex-shrink:0; width:auto; white-space:nowrap; }
.clinic-site .features .workout-duration svg { flex-shrink:0; }
/* Web platform companion to the blue patient-app hero. */
.clinic-site .platform-section {
  max-width:none; margin:90px 0 0; padding:72px 40px 32px; border-radius:28px;
  background:radial-gradient(ellipse at 50% 68%,#fff1df 0,transparent 62%),linear-gradient(125deg,#f5b098,#f8cbb7 52%,#f4baa8);
  overflow:hidden; position:relative;
}
.clinic-site .platform-section .section-title { max-width:900px; margin-bottom:40px; }
.clinic-site .platform-section .eyebrow { color:#87513e; font-size:15px; }
.clinic-site .platform-section .section-title p { color:#765b50; font-size:18px; }
.platform-notebook { position:relative; max-width:1130px; margin:0 auto; padding:22px 10px 10px; border:2px solid #626368; border-radius:24px 24px 9px 9px; background:#242527; box-shadow:0 20px 60px #75483220; }
.notebook-camera { position:absolute; top:8px; left:calc(50% - 3px); width:6px; height:6px; border-radius:50%; background:#575b60; }
.platform-notebook .clinic-dashboard { border-radius:8px; border:0; box-shadow:none; }
.notebook-base { position:absolute; bottom:-13px; left:-4%; width:108%; height:16px; border-radius:2px 2px 60% 60%; background:linear-gradient(#dadcde,#8f9398); }
.platform-notebook::after { content:''; position:absolute; inset:55% -5% -20px; background:linear-gradient(transparent,#f7c9b4e0 85%,#f7c9b4); pointer-events:none; }
.platform-features { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1200px; margin:-24px auto 0; gap:12px; padding:12px; border:1px solid #ffffff66; border-radius:26px; background:#ffffff15; backdrop-filter:blur(14px); }
.platform-features article { padding:24px 20px; border:1px solid #ffffff88; border-radius:20px; background:#ffffff3b; }
.platform-features article:first-child { background:#fff9f2dc; }
.platform-symbol { display:block; color:#98664e; font-size:27px; line-height:1; margin-bottom:24px; }
.clinic-site .platform-features h3 { font-size:20px; font-weight:500; line-height:1.25; margin:0 0 12px; color:#46352e; }
.clinic-site .platform-features p { font-size:14px; color:#765b50; line-height:1.5; margin:0; }
.clinic-site .platform-section .dashboard-caption { color:#765b50; }
@media(max-width:850px) { .platform-features { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:0; }.clinic-site .platform-section { padding:48px 24px 24px; }.platform-notebook .dashboard-workspace { grid-template-columns:1fr; }.platform-notebook .patient-detail { display:none; } }
@media(max-width:500px) { .clinic-site .platform-section { padding:42px 16px 24px; margin-top:60px; }.platform-features { gap:8px; padding:8px; }.platform-features article { padding:18px 12px; }.clinic-site .platform-features h3 { font-size:17px; }.clinic-site .platform-features p { font-size:13px; }.platform-notebook .dashboard-main { padding:12px; }.platform-notebook .patient-status { white-space:normal; max-width:65px; }.platform-notebook::after { inset:65% -5% -20px; } }

/* Shared supporting-copy scale and quieter feature-card headings. */
.clinic-site .features .section-title p { font-size:18px; line-height:1.5; letter-spacing:-.005em; font-weight:400; max-width:730px; }
.clinic-site .features .feature h3 { font-size:clamp(22px,2vw,26px); line-height:1.2; letter-spacing:-.02em; }
.clinic-site .platform-section .section-title { max-width:1060px; }
@media(max-width:500px) { .clinic-site .features .section-title p { font-size:17px; } }
/* Neutral browser preview for the clinic workspace. */
.clinic-site .platform-section .section-title { max-width:1100px; }
.platform-notebook { padding:0; border:1px solid #d9d9d9; border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 24px 64px #75483218; }
.platform-notebook .clinic-dashboard { border-radius:0; }
.browser-toolbar { height:46px; display:flex; align-items:center; gap:20px; padding:0 16px; background:#f6f6f6; border-bottom:1px solid #e7e7e7; }
.browser-dots { display:flex; gap:6px; width:48px; }.browser-dots i { width:8px; height:8px; border-radius:50%; background:#c5c5c5; }
.browser-address { margin:auto; text-align:center; width:45%; padding:5px 12px; border:1px solid #e5e5e5; border-radius:6px; background:white; color:#818181; font-size:11px; }
.browser-menu { width:48px; text-align:right; color:#888; }
.dashboard-logo { width:90px; height:auto; color:#222; margin:0 14px 30px; }
.platform-notebook .dashboard-sidebar { background:#f8f8f8; border-color:#ededed; }
.platform-notebook .dashboard-nav.active { background:#eaeaea; color:#222; }
.platform-notebook .dashboard-stats>div { background:#f5f5f5; }
.platform-notebook .patient-row.selected { background:#f3f3f3; }
.platform-notebook .patient-avatar,.platform-notebook .completed-mark { background:#ededed; color:#626262; }
.platform-notebook .patient-status,.platform-notebook .patient-status.attention { color:#646464; }
.platform-notebook .patient-detail progress { accent-color:#858585; }
.platform-notebook .patient-detail progress::-webkit-progress-value { background:#858585; }
.platform-notebook .patient-detail progress::-webkit-progress-bar { background:#ededed; }
/* Hardware frame with a browser inside; color reserved for meaningful details. */
.platform-notebook { padding:22px 10px 10px; border:2px solid #626368; border-radius:24px 24px 9px 9px; background:#242527; overflow:visible; }
.browser-toolbar { border-radius:8px 8px 0 0; }
.platform-notebook .clinic-dashboard { border-radius:0 0 6px 6px; }
.dashboard-logo { width:72px; margin-bottom:24px; }
.platform-notebook .dashboard-nav.active { background:#e6eefc; color:#385f9f; }
.platform-notebook .patient-row.selected { background:#f0f5fd; }
.platform-notebook .patient-avatar { background:#dce9fc; color:#385f9f; }
.platform-notebook .patient-avatar.peach { background:#fbe0d4; color:#8b533d; }
.platform-notebook .patient-avatar.green,.platform-notebook .completed-mark { background:#e1efdd; color:#4a7045; }
.platform-notebook .patient-status { color:#49694d; }
.platform-notebook .patient-status.attention { color:#925d42; }
.platform-notebook .patient-detail progress { accent-color:#769add; }
.platform-notebook .patient-detail progress::-webkit-progress-value { background:#769add; }
/* Animated clinic feature cards complement the patient coaching previews. */
.platform-details .feature { display:flex; flex-direction:column; align-items:center; padding:36px 28px; }
.clinic-site .platform-details .feature h3 { margin:0 0 14px; }
.clinic-site .platform-card-description { max-width:350px; font-size:16px; color:#737373; text-align:center; margin:0; }
.platform-ui-preview { width:100%; max-width:390px; height:230px; overflow:hidden; margin:38px auto 0; mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent); }
.platform-ui-track { display:grid; gap:12px; }
.platform-ui-row { display:flex; align-items:center; gap:12px; padding:18px 16px; min-height:66px; box-sizing:border-box; background:#fff; border-radius:18px; color:#70584d; font-size:15px; opacity:.4; }
.platform-ui-row.is-current { opacity:1; box-shadow:0 8px 20px #704c3510; }
.platform-ui-icon { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:10px; background:#fbe0d4; color:#a66e54; font-size:18px; }
.platform-ui-row small { margin-left:auto; font-size:11px; padding:6px 8px; border-radius:8px; background:#fff0e8; color:#98664e; white-space:nowrap; }
@media(max-width:500px) { .platform-details .feature { padding:28px 16px; }.platform-ui-row { padding:16px 10px; gap:8px; font-size:13px; }.platform-ui-row small { font-size:10px; } }
/* Four distinct clinic stories, with the same title + illustration hierarchy. */
.platform-details .feature { min-height:420px; justify-content:flex-start; overflow:hidden; }
.clinic-art { width:100%; max-width:350px; height:250px; margin:36px auto 0; position:relative; color:#70584d; font-size:14px; }
.progress-art { display:flex; flex-direction:column; align-items:center; }
.completion-ring { position:relative; width:138px; height:138px; }
.completion-ring svg { width:100%; transform:rotate(-90deg); fill:none; stroke-width:9; }
.ring-track { stroke:#e8e5e3; }.ring-value { stroke:#e7a084; stroke-linecap:round; stroke-dasharray:308; stroke-dashoffset:103; animation:clinic-ring 6s ease-in-out infinite; }
.completion-ring>div { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }.completion-ring strong { font-size:30px; font-weight:500; }.completion-ring strong span { font-size:17px; color:#a59a94; }.completion-ring small { font-size:12px; margin-top:4px; color:#8d827b; }
.progress-spark { height:45px; display:flex; align-items:flex-end; gap:10px; margin:20px 0 12px; }.progress-spark i { width:16px; border-radius:5px; background:#efbea9; height:40%; transform-origin:bottom; animation:clinic-bars 6s ease-in-out infinite; }.progress-spark i:nth-child(2n) { height:65%; animation-delay:.2s; }.progress-spark i:nth-child(3n) { height:85%; animation-delay:.4s; }.progress-spark i:last-child { height:100%; background:#d78e70; }.art-caption { font-size:12px; color:#9a8b82; }
.builder-heading,.calendar-heading { display:flex; justify-content:space-between; align-items:center; margin:0 8px 16px; font-weight:500; }.builder-heading small,.calendar-heading small { font-size:11px; font-weight:400; color:#9a8b82; }
.builder-step { display:flex; align-items:center; gap:12px; background:white; padding:13px 16px; border-radius:14px; margin:9px 0; box-shadow:0 5px 16px #70584d05; }.step-number { border-radius:8px; width:26px; height:26px; display:grid; place-items:center; background:#fff0e8; color:#b27b60; font-size:12px; }.step-dose { margin-left:auto; color:#9b8b80; font-size:11px; }.builder-add { border:1px dashed #d9c2b6; border-radius:12px; padding:11px; text-align:center; font-size:12px; color:#ab7960; margin-top:12px; }.new-step { animation:clinic-add 6s ease-in-out infinite; }
.calendar-art { background:white; border-radius:22px; padding:22px 16px; height:230px; box-sizing:border-box; box-shadow:0 12px 30px #70584d07; }
.mini-week { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:24px; text-align:center; }.mini-week>div { display:flex; flex-direction:column; align-items:center; gap:12px; }.mini-week small { font-size:11px; color:#a0958e; }.mini-week b { font-size:17px; font-weight:500; }.calendar-session { display:grid; place-items:center; border-radius:50%; width:20px; height:20px; font-size:12px; background:#fbe0d4; color:#a2694e; animation:clinic-day 7s infinite; }.day-two { animation-delay:1.2s; }.day-three { animation-delay:2.4s; }.calendar-rest { width:4px; height:4px; margin:8px; background:#e7e2df; border-radius:50%; }
.calendar-summary { display:flex; gap:10px; align-items:center; padding-top:18px; margin-top:20px; border-top:1px solid #f1eeec; font-size:11px; line-height:1.6; color:#9a8b82; }.calendar-summary b { font-weight:400; color:#70584d; }.calendar-summary-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#fff0e8; color:#b27b60; }
.checkin-profile { display:flex; flex-direction:column; align-items:center; gap:8px; }.checkin-avatar { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:#f7dccd; font-size:20px; position:relative; }.checkin-avatar>span { position:absolute; right:1px; bottom:2px; width:13px; height:13px; background:#d99575; border:3px solid #f1f2f3; border-radius:50%; }.checkin-profile strong { font-size:15px; font-weight:500; }.checkin-profile small { font-size:12px; color:#a0958e; }.activity-trail { display:flex; justify-content:center; gap:7px; margin:20px 0; }.activity-trail i { width:18px; height:6px; border-radius:3px; background:#e4dfdc; }.activity-trail i:nth-child(-n+3) { background:#e7b69f; }
.checkin-notice { display:flex; align-items:center; gap:12px; padding:17px; border-radius:18px; background:#fff; box-shadow:0 12px 30px #70584d09; width:fit-content; margin:auto; animation:clinic-notice 6s ease-in-out infinite; }.notice-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#fff0e8; color:#b27b60; }.checkin-notice b { display:block; font-size:13px; font-weight:500; }.checkin-notice small { display:block; font-size:11px; color:#a0958e; margin-top:5px; }
@keyframes clinic-ring { 0%,100%{stroke-dashoffset:180} 45%,80%{stroke-dashoffset:103} }
@keyframes clinic-bars { 0%,100%{transform:scaleY(.55)} 45%,80%{transform:scaleY(1)} }
@keyframes clinic-add { 0%,15%,100%{opacity:0;transform:translateY(12px)} 30%,85%{opacity:1;transform:translateY(0)} }
@keyframes clinic-day { 0%,10%,100%{background:#f5efeb;color:transparent;transform:scale(.65)} 25%,85%{background:#fbe0d4;color:#a2694e;transform:scale(1)} }
@keyframes clinic-notice { 0%,10%,100%{opacity:.2;transform:translateY(8px)} 25%,85%{opacity:1;transform:translateY(0)} }
@media(prefers-reduced-motion:reduce) { .platform-details * { animation:none!important; }.new-step,.checkin-notice { opacity:1; } }
@media(max-width:500px) { .platform-details .feature { min-height:390px; }.clinic-art { margin-top:28px; } }
.clinic-site .platform-demo { margin-top:24px; min-height:44px; padding:11px 22px; font-size:15px; }
.clinic-site .platform-section .dashboard-caption { margin-top:32px; }
.scroll-header { position:fixed; z-index:100; top:12px; left:28px; right:28px; display:flex; align-items:center; justify-content:space-between; padding:12px 22px; border-radius:20px; background:rgba(255,255,255,.72); border:1px solid #ffffff99; backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); box-shadow:0 6px 30px #0000000a; transform:translateY(calc(-100% - 20px)); opacity:0; transition:transform .25s ease,opacity .25s ease; pointer-events:none; }
.scroll-header.is-visible { transform:translateY(0); opacity:1; pointer-events:auto; }
.clinic-site .scroll-header .header-logo { width:82px; height:auto; display:block; }
.clinic-site .scroll-header .header-logo path { fill:#222; }
.scroll-contact { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px; border-radius:999px; background:#222; color:#fff; text-decoration:none; font-size:14px; font-weight:500; }
@media(max-width:500px) { .scroll-header { left:16px; right:16px; padding:8px 14px; } }
/* Fade the actual device instead of placing a visible rectangle over it. */
.platform-notebook { -webkit-mask-image:linear-gradient(#000 0%,#000 57%,transparent 100%); mask-image:linear-gradient(#000 0%,#000 57%,transparent 100%); }
.platform-notebook::after { content:none; }
.scroll-header { background:rgba(255,255,255,.28); backdrop-filter:blur(38px) saturate(150%); -webkit-backdrop-filter:blur(38px) saturate(150%); }
.scroll-header nav { display:flex; align-items:center; gap:28px; }
.scroll-header nav a { color:#262626; text-decoration:none; font-size:14px; }
.login-trigger { font:inherit; font-size:14px; border:1px solid #ffffff88; border-radius:999px; padding:10px 20px; min-height:44px; cursor:pointer; background:#ffffffdd; color:#355b73; }
.scroll-header .login-trigger { background:#222; color:#fff; border-color:transparent; }
#patients,#platform,#faq,#demo { scroll-margin-top:100px; }
.login-dialog { border:1px solid #eee; border-radius:24px; padding:36px; max-width:420px; width:calc(100% - 40px); color:#222; }
.login-dialog::backdrop { background:#0004; backdrop-filter:blur(8px); }.login-close { float:right; background:none; border:0; font-size:26px; cursor:pointer; }.login-dialog h2 { font-size:26px; font-weight:500; }.login-dialog p { color:#666; font-size:17px; }.login-dialog .primary-access { margin-top:16px; }
@media(max-width:600px) { .scroll-header nav { gap:12px; }.scroll-header nav a { font-size:11px; }.scroll-header .header-logo { width:60px!important; }.login-trigger { padding:8px 12px; font-size:12px; }.clinic-site .hero header nav>a { display:inline; font-size:12px; }.clinic-site .hero header nav { gap:12px; }.clinic-site .hero .header-logo { width:65px; } }
/* Edge-to-edge navigation, with identical hierarchy in both headers. */
.scroll-header { top:0; left:0; right:0; border-radius:0; padding:14px 40px; border:0; border-bottom:1px solid #ffffff55; box-shadow:none; }
.scroll-header nav,.clinic-site .hero header nav { gap:24px; }
.scroll-header nav a,.clinic-site .hero header nav a { font-size:14px; font-weight:500; }
.scroll-header .login-trigger,.clinic-site .hero .login-trigger { background:transparent; color:inherit; border:1px solid currentColor; font-size:14px; font-weight:500; padding:10px 20px; }
.scroll-header nav .header-contact,.clinic-site .hero header nav .header-contact { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px; border-radius:999px; background:#222; color:#fff; text-decoration:none; }
.clinic-site .hero header nav .header-contact { background:#fff; color:#355b73; }
.clinic-site .hero .login-trigger { color:#fff; border-color:#ffffff88; }
@media(max-width:700px) {
 .scroll-header { padding:10px 16px; }
 .scroll-header nav,.clinic-site .hero header nav { gap:10px; }
 .scroll-header nav a,.clinic-site .hero header nav a { font-size:11px; }
 .scroll-header .login-trigger,.clinic-site .hero .login-trigger { font-size:11px; padding:8px 10px; }
 .scroll-header nav .header-contact,.clinic-site .hero header nav .header-contact { padding:8px 10px; }
 .clinic-site .hero header { flex-wrap:wrap; justify-content:center; }
 .scroll-header { flex-wrap:wrap; justify-content:center; gap:8px; }
}
/* Production FAQ proportions, retaining the clinic questions. */
.clinic-site .faq { max-width:690px; padding:95px 0; margin:0 auto; }
.clinic-site .faq details { padding:22px 0; border-bottom:1px solid #e9ebec; }
.clinic-site .faq summary { padding:0; font-size:21px; line-height:1.4; }
.clinic-site .faq details p { font-size:16px; line-height:1.6; color:#58616a; }
.scroll-header .login-trigger,.clinic-site .hero .login-trigger { background:rgba(255,255,255,.35); border-color:transparent; color:#355b73; }
.scroll-header .login-trigger { background:rgba(255,255,255,.65); color:#333; }
.scroll-header nav .header-contact,.clinic-site .hero header nav .header-contact { margin-left:-16px; }
@media(max-width:700px) {
 .clinic-site .faq { padding:64px 16px; }
 .scroll-header nav .header-contact,.clinic-site .hero header nav .header-contact { margin-left:-4px; }
}

/* Match the hero's light display weight throughout the page. */
.clinic-site .section-title h1,
.clinic-site .section-title h2,
.clinic-site .features .section-title h2,
.clinic-site .patients-panel h2 { font-weight:400; }
/* Finish fading before the device's bottom edge and base. */
.platform-notebook {
 -webkit-mask-image:linear-gradient(#000 0%,#000 44%,rgba(0,0,0,.65) 62%,transparent 87%,transparent 100%);
 mask-image:linear-gradient(#000 0%,#000 44%,rgba(0,0,0,.65) 62%,transparent 87%,transparent 100%);
}
.platform-notebook .notebook-base { display:none; }
/* Short demo form, matching the app's quiet single-column inputs. */
.clinic-site form[data-form="demo"] { max-width:480px; padding:28px; border-radius:24px; background:#f5f5f5; }
form[data-form="demo"] .form-grid { grid-template-columns:1fr; gap:18px; }
.clinic-site form[data-form="demo"] .field label { font-size:14px; font-weight:500; margin-bottom:8px; }
.clinic-site form[data-form="demo"] .field input { border:1px solid #e5e5e5; border-radius:16px; padding:15px 16px; min-height:54px; font-size:18px; background:white; }
.clinic-site form[data-form="demo"] .form-context,.clinic-site form[data-form="demo"] .form-note { font-size:12px; color:#858585; }
.clinic-site form[data-form="demo"] .submit-button { width:100%; font-size:17px; min-height:52px; padding:14px 24px; margin-top:24px; }
.clinic-site form[data-form="demo"] .field-error { font-size:13px; }
.clinic-site .patient-detail .assistant-brief { font-size:12px; line-height:1.6; margin-bottom:18px; }
.draft-art { padding-top:6px; }
.draft-recipient { display:flex; align-items:center; gap:12px; font-size:13px; }.draft-recipient .checkin-avatar { width:38px; height:38px; font-size:13px; }.draft-recipient small { display:block; margin-top:5px; font-size:10px; color:#9a8b82; }
.draft-message { background:#fff; padding:22px; border-radius:18px; margin:18px 0; line-height:1.65; font-size:14px; box-shadow:0 8px 24px #70584d08; animation:clinic-notice 7s ease-in-out infinite; }
.draft-review { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; color:#a2694e; }.draft-review small { font-size:10px; color:#9a8b82; }
.integration-note { max-width:800px; margin:70px auto 0; padding:36px 24px; text-align:center; }
.clinic-site .integration-note h2 { font-size:clamp(28px,3.2vw,42px); font-weight:400; line-height:1.2; letter-spacing:-.02em; margin:0 0 20px; }
.integration-note p { font-size:18px; color:#646464; }.integration-note>span { display:block; font-size:13px; color:#858585; margin:20px 0; }.integration-note>a { color:#385f9f; font-size:16px; }