/* ========================================================================
   Product mockups, diagrams, timeline, wheel — all pure CSS/HTML, no images
   ======================================================================== */

/* ---- Browser-style app window ------------------------------------- */
.mockup-window{ background:var(--color-surface); border-radius:18px; border:1px solid var(--color-border); box-shadow:var(--shadow-lg); overflow:hidden; }
.mockup-titlebar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--color-surface-alt); border-bottom:1px solid var(--color-border); }
.mockup-dot{ width:10px; height:10px; border-radius:50%; background:var(--ink-200); }
.mockup-url{ margin-left:6px; font-size:.74rem; color:var(--color-text-muted); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:5px 14px; }
.mockup-titlebar-tag{ margin-left:auto; }
.mockup-body{ display:flex; min-height:340px; }
.mockup-sidebar{ width:60px; background:var(--navy-900); display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:16px; flex-shrink:0; }
.mockup-sidebar .m-icon{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--ink-300); }
.mockup-sidebar .m-icon svg{ width:17px; height:17px; }
.mockup-sidebar .m-icon.active{ background:var(--teal-600); color:#fff; }
.mockup-main{ flex:1; padding:20px; background:var(--color-surface-alt); display:flex; flex-direction:column; gap:14px; min-width:0; }
.mockup-topline{ display:flex; justify-content:space-between; align-items:center; }
.mockup-topline h5{ font-family:var(--font-display); font-weight:800; font-size:.98rem; margin:0; color:var(--color-ink); }
.mockup-avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--teal-400),var(--teal-700)); flex-shrink:0; }
.mockup-topline-right{ display:flex; align-items:center; gap:10px; }

.mockup-stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mockup-stat{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:12px 13px; }
.mockup-stat .label{ font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); }
.mockup-stat .value{ font-family:var(--font-display); font-weight:800; font-size:1.08rem; color:var(--color-ink); margin-top:4px; }
.mockup-stat .delta{ font-size:.7rem; font-weight:700; margin-top:2px; }
.mockup-stat .delta.up{ color:var(--success-500); }
.mockup-stat .delta.warn{ color:var(--coral-600); }

.mockup-chart{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:15px; flex:1; display:flex; flex-direction:column; min-height:130px; }
.mockup-chart-head{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--color-text-muted); margin-bottom:6px; }
.mockup-chart-bars{ display:flex; align-items:flex-end; gap:7px; height:90px; margin-top:auto; }
.mockup-chart-bars span{ flex:1; background:linear-gradient(180deg, var(--teal-300), var(--teal-500)); border-radius:5px 5px 2px 2px; }
.mockup-chart-bars span.alt{ background:var(--ink-200); }

.mockup-list{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; padding:5px; }
.mockup-list-row{ display:flex; align-items:center; gap:10px; padding:9px 8px; border-bottom:1px solid var(--color-border); }
.mockup-list-row:last-child{ border-bottom:none; }
.mockup-list-row .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.mockup-list-row .txt{ flex:1; font-size:.8rem; color:var(--color-text); min-width:0; }
.mockup-list-row .txt small{ display:block; color:var(--color-text-muted); font-size:.71rem; }
.mockup-pill{ font-size:.65rem; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); flex-shrink:0; }

.mockup-caption{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; flex-wrap:wrap; gap:8px; }

/* Hero visual: window + floating badge cards */
.hero-visual{ position:relative; padding:10px 20px 30px; }
.hero-visual .mockup-window{ transform:rotate(-.6deg); }
.floating-card{
  position:absolute; background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:13px 16px; display:flex; align-items:center; gap:11px; max-width:220px;
}
.floating-card .fc-icon{ width:36px; height:36px; border-radius:10px; background:var(--teal-50); color:var(--teal-700); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.floating-card .fc-icon svg{ width:18px; height:18px; }
.floating-card strong{ display:block; font-size:.84rem; color:var(--color-ink); }
.floating-card span{ display:block; font-size:.72rem; color:var(--color-text-muted); }
.fc-1{ top:-6px; right:-8px; }
.fc-2{ bottom:6px; left:-18px; }
@media (max-width:900px){ .floating-card{ display:none; } .hero-visual{ padding:0; } }

/* ---- Flow steps (How it works) ------------------------------------ */
.flow-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.flow-step{ position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:26px 22px; height:100%; }
.flow-step-num{ width:40px; height:40px; border-radius:50%; background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; margin-bottom:16px; }
.flow-step:not(:last-child)::after{
  content:''; position:absolute; top:50%; right:-24px; transform:translateY(-50%);
  width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:9px solid var(--ink-300);
  display:none;
}
@media (min-width:961px){ .flow-step:not(:last-child)::after{ display:block; } }
@media (max-width:960px){ .flow-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .flow-steps{ grid-template-columns:1fr; } }

/* ---- Timeline (Patient journey) ------------------------------------ */
.timeline{ position:relative; }
.timeline-phase{ display:grid; grid-template-columns:64px 1fr; gap:0 26px; }
.timeline-rail{ display:flex; flex-direction:column; align-items:center; }
.timeline-node{
  width:60px; height:60px; border-radius:50%; background:var(--navy-900); color:#fff;
  display:flex; align-items:center; justify-content:center; z-index:2; flex-shrink:0; box-shadow:var(--shadow-md);
}
.timeline-node svg{ width:24px; height:24px; }
.timeline-phase.is-accent .timeline-node{ background:var(--color-accent); }
.timeline-line{ width:2px; flex:1; min-height:40px; background:var(--color-border); margin-top:6px; }
.timeline-phase:last-child .timeline-line{ display:none; }
.timeline-content{ padding-bottom:44px; }
.timeline-phase:last-child .timeline-content{ padding-bottom:0; }
.timeline-phase-tag{ font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--color-primary-strong); }
.timeline-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:24px 26px; margin-top:8px; }
.timeline-card h3{ margin-bottom:8px; }
.timeline-substeps{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-top:18px; }
@media (max-width:640px){ .timeline-substeps{ grid-template-columns:1fr; } }
.timeline-substep{ display:flex; gap:9px; align-items:flex-start; font-size:.88rem; color:var(--color-text); background:var(--color-surface-alt); border-radius:10px; padding:11px 13px; }
.timeline-substep svg{ color:var(--color-primary-strong); flex-shrink:0; margin-top:2px; }

/* ---- Patient 360 wheel ---------------------------------------------- */
.wheel-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:760px; margin-inline:auto;
  grid-template-areas:"a b c" "h ctr d" "g f e";
}
.wheel-item{
  grid-area:auto; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:18px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:9px;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.wheel-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.wheel-item .wheel-icon{ width:42px; height:42px; border-radius:11px; background:var(--teal-50); color:var(--teal-700); display:flex; align-items:center; justify-content:center; }
.wheel-item h4{ font-size:.86rem; margin:0; }
.wheel-item p{ font-size:.76rem; margin:0; }
.wheel-center{ grid-area:ctr; }
.wheel-center-inner{
  background:linear-gradient(150deg, var(--navy-900), var(--teal-800)); color:#fff; border-radius:var(--radius-lg);
  padding:22px 16px; text-align:center; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.wheel-center-inner svg{ color:var(--teal-200); }
.wheel-center-inner strong{ font-family:var(--font-display); font-size:1rem; color:#fff; }
.wheel-center-inner span{ font-size:.76rem; color:var(--teal-100); }

@media (max-width:760px){
  .wheel-grid{ grid-template-columns:repeat(2,1fr); grid-template-areas:none; }
  .wheel-item{ grid-area:auto !important; }
  .wheel-center{ grid-column:1/-1; order:-1; }
}

/* ---- SaaS / multi-tenant architecture diagram ------------------------ */
.saas-diagram{ text-align:center; }
.saas-root{
  display:inline-flex; align-items:center; gap:12px; background:var(--navy-900); color:#fff;
  border-radius:var(--radius-lg); padding:18px 28px; box-shadow:var(--shadow-lg); position:relative; z-index:2;
}
.saas-root svg{ color:var(--teal-200); }
.saas-root strong{ display:block; font-family:var(--font-display); font-size:1rem; color:#fff; }
.saas-root span{ display:block; font-size:.76rem; color:var(--teal-100); }
.saas-connector{ width:2px; height:32px; background:var(--color-border); margin:0 auto; }
.saas-tenants{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; position:relative; padding-top:2px; }
.saas-tenants::before{ content:''; position:absolute; top:0; left:8%; right:8%; height:2px; background:var(--color-border); }
.saas-tenant{ position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:18px; text-align:left; }
.saas-tenant::before{ content:''; position:absolute; top:-22px; left:50%; width:2px; height:22px; background:var(--color-border); }
.saas-tenant-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.saas-tenant-head .th-icon{ width:34px; height:34px; border-radius:9px; background:var(--color-primary-soft); color:var(--color-primary-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.saas-tenant-head strong{ font-size:.9rem; color:var(--color-ink); display:block; }
.saas-tenant-head span{ font-size:.72rem; color:var(--color-text-muted); }
.saas-tenant-rows{ display:flex; flex-direction:column; gap:7px; }
.saas-tenant-rows div{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--color-text-muted); }
.saas-tenant-rows svg{ width:14px; height:14px; color:var(--color-primary); }
.saas-isolation-note{ margin-top:26px; display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--color-text-muted); background:var(--color-surface-alt); border:1px solid var(--color-border); padding:10px 16px; border-radius:var(--radius-pill); }
.saas-isolation-note svg{ color:var(--color-primary-strong); }

/* ---- Role tab switcher (For Healthcare Teams) ------------------------ */
.role-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.role-tab{ padding:10px 18px; border-radius:var(--radius-pill); border:1px solid var(--color-border); background:var(--color-surface); font-weight:700; font-size:.88rem; color:var(--color-text-muted); }
.role-tab.is-active{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.role-panel{ display:none; }
.role-panel.is-active{ display:block; }