@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --blue: #3b82f6;
  --blue-dark: #245db2;
  --navy: #102d4c;
  --navy-deep: #0a2038;
  --teal: #36b6be;
  --cyan: #5dd5df;
  --ink: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --surface: #f8fafc;
  --white: #ffffff;
  --green: #10b981;
  --amber: #f59e0b;
  --sans: "Inter", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; }
button { color: inherit; font: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  color: var(--white);
  background: var(--navy);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }
.product-header {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 94px;
  padding: 0 clamp(20px, 4vw, 64px);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.product-brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; text-decoration: none; }
.product-brand img { flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain; aspect-ratio: 1; border-radius: 11px; }
.product-brand > span { font-family: var(--sans); font-size: 23px; font-weight: 600; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.product-brand b { color: #214f7e; font-weight: 800; }
.product-brand small { display: block; margin-top: 7px; color: var(--muted); font-family: var(--sans); font-size: 9px; font-weight: 500; line-height: 1; letter-spacing: .01em; }
.desktop-nav { display: flex; gap: clamp(24px, 2.6vw, 42px); }
.desktop-nav a,
.login-link { font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-decoration: none; }
.desktop-nav a:hover,
.login-link:hover { color: var(--blue); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 57px;
  padding: 0 20px;
  color: var(--white);
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(59,130,246,.2);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color .2s, background .2s, transform .2s;
}
.app-button:hover { color: var(--blue); background: var(--white); transform: translateY(-2px); }
.app-button.compact { min-height: 46px; gap: 18px; padding: 0 17px; font-size: 12px; }
.app-button.light { color: var(--navy); background: var(--white); border-color: var(--white); }
.app-button.light:hover { color: var(--white); background: transparent; }
.plain-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 57px;
  padding: 0 19px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
}
.plain-button:hover { border-color: var(--cyan); }
.menu-button,
.mobile-menu { display: none; }
.menu-button { width: 44px; height: 44px; padding: 11px; background: transparent; border: 1px solid var(--line); border-radius: 8px; }
.menu-button i { display: block; height: 1px; margin: 6px 0; background: var(--ink); }

.product-hero {
  display: grid;
  grid-template-columns: minmax(0,.75fr) minmax(620px,1.25fr);
  align-items: center;
  gap: clamp(50px, 7vw, 120px);
  min-height: 900px;
  padding: 100px clamp(25px, 6vw, 100px) 90px;
  color: var(--white);
  background:
    radial-gradient(circle at 76% 33%, rgba(93,213,223,.19), transparent 30%),
    radial-gradient(circle at 10% 80%, rgba(59,130,246,.18), transparent 28%),
    var(--navy-deep);
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 50px; font: 400 8px/1 var(--mono); text-transform: uppercase; }
.hero-badge i { width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgba(93,213,223,.1); }
.hero-copy h1 { max-width: 850px; margin: 30px 0; font-size: clamp(63px, 6.8vw, 111px); line-height: .93; letter-spacing: -.075em; }
.hero-copy h1 em { color: var(--cyan); font-style: normal; font-weight: 500; }
.hero-copy > p { max-width: 680px; margin: 0; color: rgba(255,255,255,.7); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6; letter-spacing: -.02em; }
.hero-actions { display: flex; gap: 13px; margin-top: 38px; }
.hero-checks { display: flex; flex-wrap: wrap; gap: 13px 20px; margin-top: 45px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.68); font-size: 13px; }
.hero-checks i { color: var(--cyan); font-style: normal; }
.hero-product { position: relative; width: 100%; }
.browser-frame {
  width: 114%;
  background: var(--white);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 15px;
  box-shadow: 0 40px 100px rgba(0,0,0,.38);
  overflow: hidden;
}
.browser-bar { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; height: 42px; padding: 0 15px; color: var(--ink); background: #edf0f3; border-bottom: 1px solid #d4d8de; }
.browser-dots { display: flex; gap: 6px; }
.browser-dots i { width: 8px; height: 8px; background: #ff685f; border-radius: 50%; }
.browser-dots i:nth-child(2) { background: #f8c24e; }
.browser-dots i:nth-child(3) { background: #4dc46b; }
.browser-url { justify-self: stretch; padding: 7px 15px; color: #718096; background: var(--white); border: 1px solid #dfe3e8; border-radius: 6px; font-size: 8px; text-align: center; }
.browser-url span { margin-right: 7px; }
.browser-open { justify-self: end; color: #6b7280; }
.app-frame { display: grid; grid-template-columns: 148px 1fr; height: 530px; color: var(--ink); background: var(--surface); }
.app-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 14px 11px 11px; background: var(--white); border-right: 1px solid var(--line); }
.app-wordmark { display: flex; align-items: center; gap: 7px; margin-bottom: 20px; padding: 0 5px; font-size: 11px; }
.app-wordmark img { width: 24px; height: 24px; border-radius: 6px; }
.program-name { padding: 9px; background: #f1f5f9; border-radius: 6px; }
.program-name span { display: block; color: var(--muted); font: 500 5px/1 var(--mono); }
.program-name b { display: block; margin-top: 6px; font-size: 7px; line-height: 1.25; }
.app-sidebar nav { margin-top: 15px; }
.app-sidebar nav p { margin: 13px 7px 5px; color: #94a3b8; font: 500 5px/1 var(--mono); }
.app-sidebar nav a { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; padding: 7px 7px; color: #64748b; border-radius: 5px; font-size: 6.5px; text-decoration: none; }
.app-sidebar nav a i { width: 10px; font-style: normal; text-align: center; }
.app-sidebar nav a span { margin-left: auto; display: grid; place-items: center; width: 13px; height: 13px; color: var(--white); background: #ef4444; border-radius: 50%; font-size: 5px; }
.app-sidebar nav a.active { color: #2563eb; background: #eff6ff; font-weight: 600; }
.sidebar-user { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.sidebar-user > i,
.app-topbar div > i { display: grid; place-items: center; width: 23px; height: 23px; color: var(--white); background: var(--blue); border-radius: 50%; font: normal 500 6px/1 var(--sans); }
.sidebar-user span { min-width: 0; }
.sidebar-user b,
.sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user b { font-size: 6px; }
.sidebar-user small { margin-top: 3px; color: var(--muted); font-size: 5px; }
.app-main { display: grid; grid-template-rows: 44px 1fr; min-width: 0; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--white); border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; }
.app-topbar div { display: flex; align-items: center; gap: 8px; }
.app-topbar button { width: 22px; height: 22px; color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 50%; font-size: 7px; }
.app-content { min-width: 0; padding: 17px; overflow: hidden; }
.app-welcome { display: flex; align-items: center; justify-content: space-between; }
.app-welcome h3 { margin: 0; font-size: 14px; letter-spacing: -.03em; }
.app-welcome p { margin: 4px 0 0; color: var(--muted); font-size: 7px; }
.app-welcome button { padding: 8px 11px; color: var(--white); background: var(--blue); border: 0; border-radius: 5px; font-size: 7px; }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 15px; }
.metric-row > div { padding: 11px; background: var(--white); border: 1px solid var(--line); border-radius: 7px; }
.metric-row span { color: var(--muted); font-size: 6px; }
.metric-row b { display: block; margin: 7px 0 5px; font-size: 18px; letter-spacing: -.04em; }
.metric-row small { color: var(--muted); font-size: 5px; }
.metric-row small.up { color: #059669; }
.dashboard-row { display: grid; grid-template-columns: 1.35fr .65fr; gap: 9px; margin-top: 9px; }
.app-card { min-width: 0; padding: 11px; background: var(--white); border: 1px solid var(--line); border-radius: 7px; }
.app-card-head { display: flex; justify-content: space-between; gap: 10px; }
.app-card-head b,
.app-card-head small { display: block; }
.app-card-head b { font-size: 7px; }
.app-card-head small { margin-top: 3px; color: var(--muted); font-size: 5px; }
.app-card-head > i { color: var(--blue); font: normal 500 5px/1 var(--sans); }
.trend-card svg { display: block; width: 100%; height: 112px; margin-top: 12px; overflow: visible; }
.chart-grid { fill: none; stroke: #e5e7eb; stroke-width: 1; }
.chart-fill { fill: rgba(59,130,246,.12); }
.chart-stroke { fill: none; stroke: var(--blue); stroke-width: 3; }
.chart-months { display: flex; justify-content: space-between; color: var(--muted); font-size: 5px; }
.attention-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 7px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.attention-item:last-child { border-bottom: 0; }
.attention-item > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font: normal 600 7px/1 var(--sans); }
.attention-item > i.orange { color: #b45309; background: #fef3c7; }
.attention-item > i.blue { color: #2563eb; background: #dbeafe; }
.attention-item > i.green { color: #047857; background: #d1fae5; }
.attention-item span b,
.attention-item span small { display: block; }
.attention-item span b { font-size: 6px; }
.attention-item span small { margin-top: 3px; color: var(--muted); font-size: 5px; }
.attention-item em { color: var(--muted); font-style: normal; font-size: 7px; }
.product-callout { position: absolute; z-index: 3; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 35px rgba(0,0,0,.2); }
.callout-one { right: -16%; bottom: -45px; padding: 13px 16px; }
.callout-one span { display: block; color: var(--blue); font: 500 6px/1 var(--mono); }
.callout-one b { display: block; margin-top: 8px; font-size: 10px; }
.callout-two { left: -5%; bottom: 35px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.callout-two > i { display: grid; place-items: center; width: 30px; height: 30px; color: #92400e; background: #fef3c7; border-radius: 7px; font-style: normal; }
.callout-two span b,
.callout-two span small { display: block; }
.callout-two span b { font-size: 8px; }
.callout-two span small { margin-top: 4px; color: var(--muted); font-size: 6px; }

.partner-strip {
  display: grid;
  grid-template-columns: 1fr 150px 1px 260px 1fr;
  align-items: center;
  gap: 36px;
  min-height: 115px;
  padding: 20px clamp(30px, 7vw, 120px);
  color: var(--white);
  background: #183d61;
}
.partner-strip p { margin: 0; color: rgba(255,255,255,.65); font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: 1.5; }
.partner-strip img { width: 145px; max-height: 44px; object-fit: contain; }
.partner-strip .christ-logo { width: 255px; }
.partner-strip > span { width: 1px; height: 45px; background: rgba(255,255,255,.22); }
.partner-strip > a { justify-self: end; color: var(--cyan); font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; }

.tour-section { padding: 130px clamp(25px, 6vw, 100px); background: #eef3f8; }
.tour-heading,
.features-heading { display: grid; grid-template-columns: 1.4fr .6fr; gap: 7vw; align-items: end; }
.section-label { color: var(--blue); font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.tour-heading h2,
.system-heading h2,
.section-heading h2,
.program-copy h2,
.features-heading h2,
.questions-copy h2,
.cta-copy h2 {
  margin: 22px 0 0;
  font-size: clamp(54px, 6vw, 92px);
  line-height: .95;
  letter-spacing: -.065em;
}
.tour-heading > p,
.system-heading > p,
.features-heading > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.tour-tabs { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 75px; border: 1px solid #cbd5e1; border-radius: 11px 11px 0 0; overflow: hidden; }
.tour-tab { display: grid; grid-template-columns: 33px 1fr; gap: 14px; align-items: center; min-height: 82px; padding: 15px 20px; color: var(--muted); background: var(--white); border: 0; border-right: 1px solid #cbd5e1; text-align: left; cursor: pointer; }
.tour-tab:last-child { border-right: 0; }
.tour-tab > i { display: grid; place-items: center; width: 31px; height: 31px; background: #f1f5f9; border-radius: 50%; font: normal 500 7px/1 var(--mono); }
.tour-tab b,
.tour-tab small { display: block; }
.tour-tab b { color: var(--ink); font-size: 13px; }
.tour-tab small { margin-top: 5px; font-size: 9px; }
.tour-tab.active { color: #1e40af; background: #eff6ff; box-shadow: inset 0 -3px var(--blue); }
.tour-tab.active > i { color: var(--white); background: var(--blue); }
.tour-stage { background: var(--white); border: 1px solid #cbd5e1; border-top: 0; border-radius: 0 0 11px 11px; box-shadow: 0 24px 70px rgba(30,64,175,.1); overflow: hidden; }
.stage-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 48px; padding: 0 18px; color: #64748b; background: #e9edf2; border-bottom: 1px solid #cbd5e1; font-size: 9px; }
.stage-bar > span { display: flex; gap: 6px; }
.stage-bar > span i { width: 8px; height: 8px; background: #fb7185; border-radius: 50%; }
.stage-bar > span i:nth-child(2) { background: #fbbf24; }
.stage-bar > span i:nth-child(3) { background: #34d399; }
.stage-bar b { color: #475569; font-size: 10px; }
.stage-bar em { justify-self: end; font-style: normal; }
.tour-screen { display: none; grid-template-columns: 205px 1fr; min-height: 690px; }
.tour-screen.active { display: grid; }
.mini-sidebar { padding: 22px 14px; background: var(--white); border-right: 1px solid var(--line); }
.mini-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; font-size: 12px; }
.mini-brand img { width: 28px; height: 28px; border-radius: 6px; }
.mini-sidebar > span { display: block; margin: 0 9px 10px; color: #94a3b8; font: 500 7px/1 var(--mono); }
.mini-sidebar > a { display: block; position: relative; margin-bottom: 3px; padding: 10px 11px; color: #64748b; border-radius: 6px; font-size: 9px; text-decoration: none; }
.mini-sidebar > a.active { color: #2563eb; background: #eff6ff; font-weight: 600; }
.mini-sidebar > a i { position: absolute; top: 7px; right: 8px; display: grid; place-items: center; width: 16px; height: 16px; color: var(--white); background: #ef4444; border-radius: 50%; font: normal 500 6px/1 var(--sans); }
.screen-main { min-width: 0; padding: 32px; background: var(--surface); }
.screen-header { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 25px; }
.screen-header h3 { margin: 0; color: #1e293b; font-size: 24px; letter-spacing: -.04em; }
.screen-header p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.screen-header button { padding: 9px 12px; color: #475569; background: var(--white); border: 1px solid #cbd5e1; border-radius: 6px; font-size: 9px; }
.screen-metrics,
.resident-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.screen-metrics > div,
.resident-summary > div { padding: 17px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.screen-metrics span,
.resident-summary span { color: var(--muted); font-size: 9px; }
.screen-metrics b,
.resident-summary b { display: block; margin-top: 9px; color: #1e293b; font-size: 25px; letter-spacing: -.04em; }
.resident-summary small { display: block; margin-top: 6px; color: #94a3b8; font-size: 7px; }
.screen-grid { display: grid; grid-template-columns: 1.45fr .55fr; gap: 12px; margin-top: 12px; }
.ui-card { background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.large-chart { padding: 20px; }
.ui-title { display: flex; justify-content: space-between; gap: 20px; }
.ui-title span b,
.ui-title span small { display: block; }
.ui-title span b { font-size: 11px; }
.ui-title span small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.ui-title em { color: var(--muted); font: normal 400 7px/1 var(--sans); }
.large-chart svg { display: block; width: 100%; height: 275px; margin-top: 30px; overflow: visible; }
.ui-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.ui-area { fill: rgba(59,130,246,.12); }
.ui-line { fill: none; stroke: var(--blue); stroke-width: 3; }
.cohort-list { padding: 20px; }
.cohort-list .ui-title { margin-bottom: 28px; }
.cohort-list > div:not(.ui-title) { display: grid; grid-template-columns: 1fr 1fr 35px; gap: 9px; align-items: center; margin: 22px 0; }
.cohort-list > div > span { font-size: 8px; }
.cohort-list > div > i { height: 7px; background: #e2e8f0; border-radius: 5px; overflow: hidden; }
.cohort-list > div > i b { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.cohort-list > div > em { color: #475569; font: normal 500 8px/1 var(--sans); text-align: right; }
.stage-caption { display: flex; justify-content: space-between; gap: 40px; padding: 18px 22px; color: var(--muted); background: var(--white); border-top: 1px solid var(--line); font-size: 9px; }
.stage-caption b { max-width: 700px; color: #475569; font-weight: 500; text-align: right; }

.draft-state { padding: 7px 10px; color: #047857; background: #d1fae5; border-radius: 20px; font-size: 8px; }
.assessment-layout { display: grid; grid-template-columns: 1fr 250px; gap: 14px; align-items: start; }
.assessment-form { padding: 22px; }
.form-step { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.form-step > span { display: grid; place-items: center; width: 24px; height: 24px; color: var(--white); background: var(--blue); border-radius: 50%; font-size: 8px; }
.form-step b { font-size: 12px; }
.field-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; }
.field-row label { color: #374151; font-size: 8px; font-weight: 500; }
.field-row label div { margin-top: 7px; padding: 10px; color: #475569; background: var(--white); border: 1px solid #d1d5db; border-radius: 6px; font-size: 8px; font-weight: 400; }
.recommend-box { display: grid; grid-template-columns: 29px 1fr auto; gap: 11px; align-items: center; margin-bottom: 20px; padding: 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 7px; }
.recommend-box > i { display: grid; place-items: center; width: 29px; height: 29px; color: #92400e; background: #fef3c7; border-radius: 6px; font-style: normal; }
.recommend-box b,
.recommend-box p { margin: 0; }
.recommend-box b { font-size: 9px; }
.recommend-box p { margin-top: 4px; color: #92400e; font-size: 7px; }
.recommend-box > span { color: #92400e; font-size: 7px; }
.epa-choice { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid var(--blue); border-radius: 7px; box-shadow: 0 0 0 2px rgba(59,130,246,.08); }
.epa-choice > div { display: flex; align-items: center; gap: 11px; }
.epa-choice > div > i { padding: 7px; color: #1d4ed8; background: #dbeafe; border-radius: 5px; font: normal 600 8px/1 var(--sans); }
.epa-choice span b,
.epa-choice span small { display: block; }
.epa-choice span b { font-size: 9px; }
.epa-choice span small { margin-top: 5px; color: #b45309; font-size: 7px; }
.epa-choice em { color: var(--muted); font-style: normal; }
.entrust-label { display: block; margin: 20px 0 10px; color: #374151; font-size: 9px; font-weight: 500; }
.entrust-options { display: grid; gap: 7px; }
.entrust-options > div { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; }
.entrust-options > div.selected { background: #eff6ff; border-color: var(--blue); }
.entrust-options > div > i { display: grid; place-items: center; width: 16px; height: 16px; color: var(--blue); border: 1px solid #cbd5e1; border-radius: 50%; font: normal 9px/1 var(--sans); }
.entrust-options span b,
.entrust-options span small { display: block; }
.entrust-options span b { font-size: 8px; }
.entrust-options span small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.form-actions button { padding: 9px 11px; color: #475569; background: var(--white); border: 1px solid #cbd5e1; border-radius: 5px; font-size: 8px; }
.form-actions button:last-child { color: var(--white); background: var(--blue); border-color: var(--blue); }
.assessment-side { display: grid; gap: 12px; }
.assessment-side .ui-card { padding: 18px; }
.assessment-side .ui-card > span { color: var(--blue); font: 500 7px/1 var(--mono); }
.assessment-side .ui-card > b { display: block; margin: 17px 0 11px; font-size: 12px; }
.assessment-side .ui-card > p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.assessment-side .compact-list > p { margin: 15px 0 0; color: #475569; }
.compact-list p i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: var(--amber); border-radius: 50%; }

.competency-card { margin-top: 13px; padding: 22px; }
.competency-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.competency-head span b,
.competency-head span small,
.competency-head > div b,
.competency-head > div small { display: block; }
.competency-head span b { font-size: 13px; }
.competency-head span small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.competency-head > div { text-align: right; }
.competency-head > div b { color: #059669; font-size: 24px; }
.competency-head > div small { color: var(--muted); font-size: 8px; }
.subcomp-row { display: grid; grid-template-columns: 1.2fr 1fr 35px; gap: 15px; align-items: center; padding: 17px 0; border-bottom: 1px solid #f1f5f9; }
.subcomp-row span b,
.subcomp-row span small { display: block; }
.subcomp-row span b { font-size: 9px; }
.subcomp-row span small { margin-top: 5px; color: var(--muted); font-size: 7px; }
.subcomp-row > div { height: 8px; background: #e2e8f0; border-radius: 5px; overflow: hidden; }
.subcomp-row > div i { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.subcomp-row em { color: #059669; font: normal 600 9px/1 var(--sans); }
.resident-next { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 13px; padding: 20px 22px; color: #1e3a8a; background: #dbeafe; border: 1px solid #93c5fd; border-radius: 8px; }
.resident-next span { font: 500 7px/1 var(--mono); }
.resident-next b { display: block; margin-top: 10px; font-size: 12px; }
.resident-next p { margin: 5px 0 0; font-size: 8px; }
.resident-next button { padding: 10px 12px; color: var(--white); background: var(--blue); border: 0; border-radius: 6px; font-size: 8px; }
.coordinator-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 13px; margin-top: 13px; }
.roster-card { padding: 20px; }
.roster-card .ui-title { margin-bottom: 14px; }
.roster-row { display: grid; grid-template-columns: 32px 1fr auto 42px; gap: 10px; align-items: center; min-height: 69px; border-top: 1px solid var(--line); }
.roster-row > i { display: grid; place-items: center; width: 29px; height: 29px; color: #1e40af; background: #dbeafe; border-radius: 50%; font: normal 600 7px/1 var(--sans); }
.roster-row span b,
.roster-row span small { display: block; }
.roster-row span b { font-size: 8px; }
.roster-row span small { margin-top: 4px; color: var(--muted); font-size: 6px; }
.roster-row .role { padding: 5px 7px; border-radius: 10px; font: normal 500 6px/1 var(--sans); }
.roster-row .role.leadership { color: #6b21a8; background: #f3e8ff; }
.roster-row .role.faculty { color: #1e40af; background: #dbeafe; }
.roster-row .role.trainee { color: #047857; background: #d1fae5; }
.roster-row > strong { color: #047857; font-size: 6px; text-align: right; }
.coordinator-stack { display: grid; gap: 13px; }
.config-status { position: relative; min-height: 155px; padding: 18px; }
.config-status > span { color: var(--blue); font: 500 7px/1 var(--mono); }
.config-status > b { display: block; margin-top: 18px; font-size: 14px; }
.config-status > p { max-width: 240px; margin: 8px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.config-status > i { position: absolute; right: 14px; bottom: 14px; padding: 6px 8px; color: #047857; background: #d1fae5; border-radius: 10px; font: normal 500 6px/1 var(--sans); }
.export-status > i { color: #1e40af; background: #dbeafe; }

.workflow-section { padding: 130px clamp(25px, 6vw, 100px); }
.system-heading { display: grid; grid-template-columns: 1.4fr .6fr; gap: 7vw; align-items: end; }
.system-heading h2 { margin-top: 22px; }
.product-system-console { display: grid; grid-template-columns: 250px 1fr; margin-top: 80px; background: var(--white); border: 1px solid #cbd5e1; border-radius: 11px; box-shadow: 0 24px 70px rgba(30,64,175,.1); overflow: hidden; }
.product-system-tabs { padding: 15px; background: #eef3f8; border-right: 1px solid #cbd5e1; }
.product-system-tab { display: grid; grid-template-columns: 29px 1fr 18px; gap: 10px; align-items: center; width: 100%; min-height: 83px; padding: 14px 12px; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid #cbd5e1; border-radius: 7px; text-align: left; cursor: pointer; }
.product-system-tab:last-child { border-bottom: 0; }
.product-system-tab > span { display: grid; place-items: center; width: 27px; height: 27px; background: #e2e8f0; border-radius: 50%; font: 500 7px/1 var(--mono); }
.product-system-tab div b,
.product-system-tab div small { display: block; }
.product-system-tab div b { color: var(--ink); font-size: 11px; }
.product-system-tab div small { margin-top: 5px; font-size: 8px; }
.product-system-tab > i { font-style: normal; opacity: 0; }
.product-system-tab.active { color: #1e40af; background: var(--white); box-shadow: 0 7px 18px rgba(30,64,175,.09); }
.product-system-tab.active > span { color: var(--white); background: var(--blue); }
.product-system-tab.active > i { opacity: 1; }
.product-system-screen { min-width: 0; }
.system-screen-bar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 20px; color: #64748b; background: #f8fafc; border-bottom: 1px solid var(--line); font: 500 7px/1 var(--mono); }
.system-screen-bar b { display: flex; align-items: center; gap: 7px; color: #047857; }
.system-screen-bar b i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px #d1fae5; }
.system-screen-main { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(35px, 6vw, 90px); align-items: center; min-height: 455px; padding: 50px clamp(25px, 5vw, 75px); background: var(--surface); }
.system-screen-copy > p { margin: 0 0 20px; color: var(--blue); font: 500 8px/1 var(--mono); text-transform: uppercase; }
.system-screen-copy h3 { margin: 0; font-size: clamp(34px, 3.7vw, 57px); line-height: 1.02; letter-spacing: -.055em; }
.system-screen-copy blockquote { margin: 30px 0 0; padding-left: 18px; color: var(--muted); border-left: 3px solid var(--teal); font-size: 14px; font-style: normal; line-height: 1.6; }
.system-assessment-card { padding: 23px; background: var(--white); border: 1px solid #dbe3ed; border-radius: 9px; box-shadow: 0 15px 40px rgba(15,45,75,.1); }
.system-card-head { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 13px; border-bottom: 1px solid var(--line); font: 500 7px/1 var(--mono); }
.system-card-head i { color: #047857; font-style: normal; }
.system-assessment-card > p { margin: 22px 0 9px; color: var(--blue); font: 500 7px/1 var(--mono); text-transform: uppercase; }
.system-assessment-card h4 { margin: 0 0 24px; font-size: 16px; line-height: 1.3; }
.system-assessment-card label { display: block; margin-bottom: 10px; color: #475569; font-size: 8px; font-weight: 500; }
.system-levels { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.system-levels i { display: grid; place-items: center; height: 38px; border-right: 1px solid #cbd5e1; font: normal 500 8px/1 var(--mono); }
.system-levels i:last-child { border-right: 0; }
.system-levels i.selected { color: var(--white); background: var(--blue); }
.system-level-labels { display: flex; justify-content: space-between; margin-top: 7px; color: #94a3b8; font-size: 6px; }
.system-card-map { display: flex; justify-content: space-between; gap: 15px; margin-top: 24px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 8px; }
.system-card-map b { color: var(--blue); }
.system-readout { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.system-readout div { min-height: 74px; padding: 15px 18px; border-right: 1px solid var(--line); }
.system-readout div:last-child { border-right: 0; }
.system-readout span,
.system-readout b { display: block; }
.system-readout span { color: var(--muted); font: 500 7px/1 var(--mono); text-transform: uppercase; }
.system-readout b { margin-top: 9px; color: #334155; font-size: 9px; }
.section-heading { display: grid; grid-template-columns: .5fr 1.5fr; gap: 8vw; align-items: start; }
.section-heading h2 { margin-top: 0; }
.workflow-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 85px; border-top: 1px solid #cbd5e1; border-left: 1px solid #cbd5e1; }
.workflow-card { position: relative; min-height: 430px; padding: 27px 24px; border-right: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; overflow: hidden; }
.workflow-top { display: flex; justify-content: space-between; align-items: center; }
.workflow-top span { font: 500 8px/1 var(--mono); }
.workflow-top i { display: grid; place-items: center; width: 36px; height: 36px; color: var(--blue); background: #eff6ff; border-radius: 9px; font-style: normal; }
.workflow-card h3 { margin: 75px 0 18px; font-size: 25px; line-height: 1.05; letter-spacing: -.045em; }
.workflow-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.workflow-ui { position: absolute; right: 24px; bottom: 26px; left: 24px; }
.suggestion-ui { display: flex; justify-content: space-between; align-items: center; padding: 13px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 7px; }
.suggestion-ui span b,
.suggestion-ui span small { display: block; }
.suggestion-ui span b { color: #92400e; font-size: 9px; }
.suggestion-ui span small { margin-top: 4px; color: #b45309; font-size: 7px; }
.suggestion-ui em { padding: 5px 7px; color: #92400e; background: #fef3c7; border-radius: 10px; font: normal 500 6px/1 var(--sans); }
.scale-ui { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid #cbd5e1; border-radius: 7px; overflow: hidden; }
.scale-ui span { display: grid; place-items: center; height: 42px; border-right: 1px solid #cbd5e1; font: 500 8px/1 var(--mono); }
.scale-ui span:last-child { border-right: 0; }
.scale-ui span.on { color: var(--white); background: var(--blue); }
.mapping-ui { display: grid; grid-template-columns: 1fr 28px repeat(3,.7fr); gap: 5px; align-items: center; }
.mapping-ui b,
.mapping-ui span { display: grid; place-items: center; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 5px; font: 500 7px/1 var(--mono); }
.mapping-ui b { color: var(--white); background: var(--blue); border-color: var(--blue); }
.mapping-ui > i { height: 1px; background: #94a3b8; }
.action-ui { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid #cbd5e1; }
.action-ui span { display: flex; align-items: center; gap: 9px; }
.action-ui span i { width: 9px; height: 9px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px #d1fae5; }
.action-ui b { font-size: 8px; }
.action-ui em { color: var(--blue); font: normal 500 7px/1 var(--mono); }

.clinical-reality-section { padding: 120px clamp(25px, 6vw, 100px); color: var(--white); background: #173d60; }
.clinical-reality-heading { display: grid; grid-template-columns: .55fr 1.1fr .7fr; gap: 5vw; align-items: end; }
.clinical-reality-heading .section-label { color: var(--cyan); }
.clinical-reality-heading h2 { margin: 0; font-size: clamp(48px, 5vw, 78px); line-height: .96; letter-spacing: -.06em; }
.clinical-reality-heading > p { margin: 0; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.7; }
.clinical-reality-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 75px; border-top: 1px solid rgba(255,255,255,.25); border-left: 1px solid rgba(255,255,255,.25); }
.reality-card { position: relative; min-height: 410px; padding: 25px; border-right: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }
.reality-card > span { display: block; margin-top: 170px; color: var(--cyan); font: 500 10px/1 var(--mono); }
.reality-card h3 { margin: 18px 0 15px; font-size: 27px; line-height: 1.06; letter-spacing: -.04em; }
.reality-card > p { margin: 0; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.65; }
.device-cluster,
.time-mark,
.notification-mark,
.draft-mark { position: absolute; top: 26px; left: 25px; height: 110px; }
.device-cluster { width: 165px; }
.device { position: absolute; display: block; background: #eef3f8; border: 5px solid #0a2038; box-shadow: 8px 8px 0 rgba(93,213,223,.2); }
.device.desktop { top: 4px; left: 0; width: 145px; height: 83px; border-radius: 6px; }
.device.desktop::before { content: ""; position: absolute; inset: 10px; background: linear-gradient(90deg,#dbeafe 24%,#fff 24%); }
.device.desktop::after { content: ""; position: absolute; right: 53px; bottom: -20px; width: 30px; height: 20px; border-top: 5px solid #0a2038; border-bottom: 5px solid #0a2038; }
.device.phone { top: 35px; right: 0; width: 43px; height: 77px; border-radius: 8px; }
.device.phone::after { content: ""; position: absolute; inset: 8px 5px; background: #dbeafe; }
.time-mark { display: flex; align-items: end; gap: 9px; }
.time-mark b { font-size: 72px; line-height: 1; letter-spacing: -.025em; }
.time-mark span { margin-bottom: 9px; color: var(--cyan); font: 600 14px/1 var(--mono); }
.notification-mark,
.draft-mark { display: flex; align-items: center; gap: 12px; width: calc(100% - 50px); height: 80px; padding: 15px; color: var(--ink); background: var(--white); border-radius: 9px; box-shadow: 8px 8px 0 rgba(93,213,223,.18); }
.notification-mark > i { display: grid; place-items: center; width: 30px; height: 30px; color: var(--white); background: #ef4444; border-radius: 50%; font: normal 600 8px/1 var(--sans); }
.notification-mark > b { font-size: 9px; }
.draft-mark > i { display: grid; place-items: center; width: 32px; height: 32px; color: #047857; background: #d1fae5; border-radius: 50%; font-style: normal; }
.draft-mark span b,
.draft-mark span small { display: block; }
.draft-mark span b { font-size: 9px; }
.draft-mark span small { margin-top: 5px; color: var(--muted); font-size: 7px; }

.program-section { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 8vw; min-height: 800px; padding: 110px clamp(25px, 7vw, 120px); color: var(--white); background: var(--navy); }
.program-copy h2 { font-size: clamp(56px, 6vw, 96px); }
.program-copy > p { max-width: 650px; margin: 34px 0; color: rgba(255,255,255,.68); font-size: 17px; line-height: 1.65; }
.program-config { color: var(--ink); background: var(--white); border-radius: 12px; box-shadow: 20px 20px 0 rgba(54,182,190,.15); overflow: hidden; }
.config-head { display: grid; grid-template-columns: 1fr auto auto; gap: 15px; align-items: center; padding: 20px 22px; color: var(--white); background: #173d60; }
.config-head span { color: var(--cyan); font: 500 9px/1 var(--mono); }
.config-head b { font-size: 13px; }
.config-head i { padding: 6px 8px; color: #065f46; background: #d1fae5; border-radius: 12px; font: normal 500 7px/1 var(--sans); }
.config-row { display: grid; grid-template-columns: 1fr 1fr 25px; gap: 20px; align-items: center; min-height: 78px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.config-row > span { display: flex; align-items: center; gap: 12px; }
.config-row > span i { display: grid; place-items: center; width: 28px; height: 28px; color: #1d4ed8; background: #dbeafe; border-radius: 50%; font: normal 500 7px/1 var(--mono); }
.config-row > span b { font-size: 13px; }
.config-row em { color: var(--muted); font-style: normal; font-size: 11px; }
.config-row strong { color: var(--green); }
.config-footer { padding: 22px; background: #f8fafc; }
.config-footer span { color: var(--blue); font: 500 9px/1 var(--mono); text-transform: uppercase; }
.config-footer p { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.features-section { padding: 130px clamp(25px, 6vw, 100px); background: #f8fafc; }
.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 85px; border-top: 1px solid #cbd5e1; border-left: 1px solid #cbd5e1; }
.feature-card { position: relative; min-height: 360px; padding: 30px; background: var(--white); border-right: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; }
.feature-card > span,
.feature-card > div:first-child > span { color: var(--blue); font: 500 10px/1 var(--mono); }
.feature-card h3 { max-width: 650px; margin: 72px 0 18px; font-size: clamp(28px, 3vw, 42px); line-height: 1.03; letter-spacing: -.05em; }
.feature-card > p,
.feature-card > div:first-child > p { max-width: 620px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.feature-chip { position: absolute; right: 30px; bottom: 30px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; color: #1e40af; background: #dbeafe; border-radius: 7px; font-size: 9px; }
.feature-chip.amber { color: #92400e; background: #fef3c7; }
.feature-chip.purple { color: #6b21a8; background: #f3e8ff; }
.feature-chip i { font-style: normal; }
.toggle-row { position: absolute; right: 30px; bottom: 30px; left: 30px; display: flex; gap: 17px; }
.toggle-row span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; }
.toggle-row i { position: relative; display: block; width: 25px; height: 14px; background: var(--blue); border-radius: 10px; }
.toggle-row i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; background: var(--white); border-radius: 50%; }
.toggle-row i.off { background: #cbd5e1; }
.toggle-row i.off::after { right: auto; left: 2px; }
.feature-card.wide { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 50px; grid-column: 1 / -1; min-height: 330px; }
.feature-card.wide h3 { margin-top: 72px; }
.security-ui,
.export-ui { align-self: end; display: flex; align-items: center; gap: 14px; padding: 18px; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; }
.security-ui > i { display: grid; place-items: center; width: 37px; height: 37px; color: #047857; background: #d1fae5; border-radius: 50%; font-style: normal; }
.security-ui span { flex: 1; }
.security-ui span b,
.security-ui span small { display: block; }
.security-ui span b { font-size: 10px; }
.security-ui span small { margin-top: 5px; color: var(--muted); font-size: 7px; }
.security-ui em { padding: 6px 8px; color: #1e40af; background: #dbeafe; border-radius: 5px; font: normal 500 7px/1 var(--mono); }
.export-ui { justify-content: space-between; font-size: 9px; }
.export-ui span { color: var(--muted); }
.export-ui b { color: #047857; }
.recommendation-feature,
.analytics-feature { align-items: center; }
.product-rec-ui { align-self: center; background: var(--white); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 14px 35px rgba(30,64,175,.1); overflow: hidden; }
.product-rec-ui > div { display: flex; justify-content: space-between; gap: 20px; min-height: 48px; padding: 15px 17px; color: #475569; background: #f8fafc; border-bottom: 1px solid var(--line); font-size: 8px; }
.product-rec-ui > div b { color: var(--blue); }
.product-rec-ui > p { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: center; min-height: 59px; margin: 0; padding: 11px 17px; border-bottom: 1px solid var(--line); }
.product-rec-ui > p:last-child { border-bottom: 0; }
.product-rec-ui > p.active { background: #eff6ff; }
.product-rec-ui > p i { padding: 7px; color: #1d4ed8; background: #dbeafe; border-radius: 5px; font: normal 600 7px/1 var(--sans); text-align: center; }
.product-rec-ui > p span { color: #334155; font-size: 9px; }
.product-rec-ui > p em { color: var(--muted); font: normal 500 7px/1 var(--sans); }
.product-rec-ui > p.active em { color: #b45309; }
.product-scale-ui { position: absolute; right: 30px; bottom: 30px; left: 30px; display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid #cbd5e1; border-radius: 7px; overflow: hidden; }
.product-scale-ui span { display: grid; place-items: center; height: 43px; border-right: 1px solid #cbd5e1; font: 500 8px/1 var(--mono); }
.product-scale-ui span:last-child { border-right: 0; }
.product-scale-ui span.on { color: var(--white); background: var(--blue); }
.accent-card { color: var(--white); background: var(--blue-dark); }
.accent-card > span { color: var(--cyan); }
.accent-card > p { color: rgba(255,255,255,.65); }
.product-grid-ui { position: absolute; right: 30px; bottom: 30px; left: 30px; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid rgba(255,255,255,.45); border-left: 1px solid rgba(255,255,255,.45); }
.product-grid-ui i { position: relative; height: 42px; border-right: 1px solid rgba(255,255,255,.45); border-bottom: 1px solid rgba(255,255,255,.45); }
.product-grid-ui i.dot::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 11px; height: 11px; background: var(--cyan); border-radius: 50%; transform: translate(-50%,-50%); }
.product-coverage-ui { position: absolute; right: 30px; bottom: 30px; left: 30px; display: grid; gap: 12px; }
.product-coverage-ui i { height: 10px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
.product-coverage-ui i::after { content: ""; display: block; width: var(--w); height: 100%; background: var(--teal); border-radius: inherit; }
.product-analytics-ui { align-self: center; padding: 20px; background: #f8fafc; border: 1px solid var(--line); border-radius: 9px; }
.product-analytics-ui > div { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: #475569; font-size: 8px; }
.product-analytics-ui svg { display: block; width: 100%; height: 180px; margin-top: 20px; overflow: visible; }
.product-chart-area { fill: rgba(59,130,246,.11); }
.product-chart-line { fill: none; stroke: var(--blue); stroke-width: 3; }
.product-analytics-ui circle { fill: var(--teal); }

.benefits-section { padding: 130px clamp(25px, 6vw, 100px); background: var(--white); }
.benefits-heading { display: grid; grid-template-columns: 1.4fr .6fr; gap: 7vw; align-items: end; }
.benefits-heading h2 { margin: 22px 0 0; font-size: clamp(54px, 6vw, 92px); line-height: .95; letter-spacing: -.065em; }
.benefits-heading > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.benefit-board { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 80px; border-top: 1px solid #cbd5e1; border-left: 1px solid #cbd5e1; }
.benefit-card { min-height: 510px; padding: 30px; border-right: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; }
.benefit-role { display: flex; align-items: center; gap: 13px; }
.benefit-role > i { display: grid; place-items: center; width: 45px; height: 45px; color: #1e40af; background: #dbeafe; border-radius: 50%; font: normal 600 9px/1 var(--sans); }
.benefit-role span b,
.benefit-role span small { display: block; }
.benefit-role span b { font-size: 15px; }
.benefit-role span small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.benefit-card h3 { max-width: 700px; margin: 65px 0 45px; font-size: clamp(28px, 3vw, 43px); line-height: 1.04; letter-spacing: -.05em; }
.benefit-card ul { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.benefit-card li { display: flex; justify-content: space-between; gap: 25px; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.benefit-card li span { color: #475569; }
.benefit-card li b { color: var(--blue); font-weight: 600; text-align: right; }
.trainee-benefit .benefit-role > i { color: #047857; background: #d1fae5; }
.leadership-benefit .benefit-role > i { color: #6b21a8; background: #f3e8ff; }
.institution-benefit .benefit-role > i { color: #92400e; background: #fef3c7; }
.institution-outcome { display: grid; grid-template-columns: .35fr 1fr .65fr; gap: 40px; align-items: center; padding: 45px 35px; color: var(--white); background: var(--navy); }
.institution-outcome > span { color: var(--cyan); font: 500 10px/1.5 var(--mono); }
.institution-outcome > p { margin: 0; font-size: 17px; line-height: 1.5; letter-spacing: -.02em; }
.institution-outcome > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 11px 16px; color: rgba(255,255,255,.72); font-size: 11px; }
.institution-outcome > div i { color: var(--cyan); font-style: normal; }

.questions-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; padding: 130px clamp(25px, 7vw, 120px); }
.questions-copy h2 { font-size: clamp(50px, 5.5vw, 84px); }
.questions-copy > p { max-width: 560px; margin: 30px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.faq-list { border-top: 1px solid #cbd5e1; }
.faq-item { border-bottom: 1px solid #cbd5e1; }
.faq-item button { display: flex; justify-content: space-between; align-items: center; gap: 25px; width: 100%; padding: 28px 0; background: transparent; border: 0; text-align: left; cursor: pointer; }
.faq-item button span { font-size: 16px; font-weight: 600; }
.faq-item button i { color: var(--blue); font: normal 400 24px/1 var(--mono); transition: transform .2s; }
.faq-item button[aria-expanded="true"] i { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; }
.faq-answer p { min-height: 0; margin: 0; overflow: hidden; color: var(--muted); font-size: 15px; line-height: 1.7; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer p { padding: 0 40px 28px 0; }

.product-cta { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 7vw; min-height: 710px; padding: 90px clamp(25px, 7vw, 120px); color: var(--white); background: var(--navy-deep); overflow: hidden; }
.cta-preview { position: relative; display: grid; grid-template-columns: 85px 1fr; width: 115%; height: 430px; background: var(--surface); border: 8px solid rgba(255,255,255,.1); border-radius: 15px; box-shadow: 0 30px 80px rgba(0,0,0,.35); transform: rotate(-4deg); }
.cta-sidebar { display: flex; align-items: center; flex-direction: column; gap: 22px; padding: 20px 12px; background: var(--white); border-right: 1px solid var(--line); }
.cta-sidebar img { width: 35px; height: 35px; border-radius: 8px; }
.cta-sidebar i { width: 46px; height: 9px; background: #e2e8f0; border-radius: 5px; }
.cta-sidebar i:nth-child(2) { background: #bfdbfe; }
.cta-screen { padding: 40px 28px; }
.cta-screen > span { display: block; width: 40%; height: 20px; background: #cbd5e1; border-radius: 5px; }
.cta-screen > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 35px; }
.cta-screen > div i { height: 90px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.cta-screen > b { display: block; height: 180px; margin-top: 13px; background: linear-gradient(135deg, #eff6ff, var(--white)); border: 1px solid var(--line); border-radius: 8px; }
.cta-copy .section-label { color: var(--cyan); }
.cta-copy h2 { font-size: clamp(58px, 6.5vw, 100px); }
.cta-copy > p { max-width: 680px; margin: 33px 0; color: rgba(255,255,255,.67); font-size: 17px; line-height: 1.65; }
.cta-copy > div { display: flex; align-items: center; gap: 30px; }
.cta-copy > div > a:last-child { color: rgba(255,255,255,.6); font: 400 8px/1 var(--mono); text-underline-offset: 5px; }

.product-footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 50px; align-items: center; padding: 65px clamp(25px, 5vw, 80px) 30px; color: var(--white); background: #061728; }
.product-footer .product-brand small { color: rgba(255,255,255,.45); }
.product-footer > div:first-child > p { max-width: 430px; margin: 24px 0 0; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.5; }
.product-footer nav { display: flex; gap: 28px; }
.product-footer nav a,
.footer-meta { font: 500 8px/1 var(--mono); text-transform: uppercase; }
.footer-meta { display: flex; justify-content: flex-end; gap: 25px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .72s ease, transform .72s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (max-width: 1200px) {
  .desktop-nav { display: none; }
  .product-header { grid-template-columns: 1fr auto; }
  .menu-button { display: block; }
  .mobile-menu {
    position: absolute;
    top: 94px;
    right: 0;
    left: 0;
    z-index: 40;
    display: none;
    padding: 24px 35px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu.open { display: grid; }
  .mobile-menu a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; text-decoration: none; }
  .product-hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 900px; }
  .hero-product { width: min(100%, 1000px); justify-self: center; margin-top: 50px; }
  .browser-frame { width: 100%; }
  .callout-one { right: -4%; }
  .partner-strip { grid-template-columns: 1fr 150px 1px 260px; }
  .partner-strip > a { display: none; }
  .tour-screen { grid-template-columns: 170px 1fr; }
  .screen-grid { grid-template-columns: 1fr; }
  .cohort-list { display: none; }
  .large-chart svg { height: 260px; }
  .assessment-layout { grid-template-columns: 1fr; }
  .assessment-side { display: none; }
  .coordinator-grid { grid-template-columns: 1fr; }
  .coordinator-stack { grid-template-columns: 1fr 1fr; }
  .workflow-grid { grid-template-columns: 1fr 1fr; }
  .clinical-reality-grid { grid-template-columns: 1fr 1fr; }
  .product-footer { grid-template-columns: 1fr 1fr; }
  .product-footer nav { justify-content: flex-end; }
  .footer-meta { grid-column: 1 / -1; justify-content: space-between; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.15); }
}

@media (max-width: 820px) {
  .header-actions .login-link,
  .header-actions .app-button { display: none; }
  .product-hero { min-height: auto; padding-top: 80px; }
  .hero-copy h1 { font-size: clamp(58px, 14vw, 95px); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .app-frame { grid-template-columns: 115px 1fr; height: 440px; }
  .app-sidebar nav a:nth-of-type(n+6),
  .program-name { display: none; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .metric-row > div:nth-child(3) { display: none; }
  .dashboard-row { grid-template-columns: 1fr; }
  .attention-card { display: none; }
  .callout-two { display: none; }
  .partner-strip { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .partner-strip > span { width: 120px; height: 1px; }
  .tour-heading,
  .system-heading,
  .features-heading,
  .benefits-heading,
  .clinical-reality-heading,
  .section-heading,
  .program-section,
  .questions-section,
  .product-cta { grid-template-columns: 1fr; }
  .tour-heading > p,
  .system-heading > p,
  .features-heading > p,
  .benefits-heading > p,
  .clinical-reality-heading > p { margin-top: 30px; }
  .tour-tabs { grid-template-columns: 1fr; border-radius: 11px 11px 0 0; }
  .tour-tab { min-height: 68px; border-right: 0; border-bottom: 1px solid #cbd5e1; }
  .tour-tab:last-child { border-bottom: 0; }
  .tour-screen { grid-template-columns: 1fr; }
  .mini-sidebar { display: none; }
  .screen-main { padding: 20px; }
  .screen-metrics,
  .resident-summary { grid-template-columns: 1fr 1fr; }
  .large-chart svg { height: 220px; }
  .field-row { grid-template-columns: 1fr; }
  .field-row label:nth-child(3) { display: none; }
  .tour-screen { min-height: 750px; }
  .stage-caption { flex-direction: column; }
  .stage-caption b { text-align: left; }
  .product-system-console { grid-template-columns: 1fr; }
  .product-system-tabs { display: grid; grid-template-columns: repeat(4,minmax(150px,1fr)); padding: 0; border-right: 0; border-bottom: 1px solid #cbd5e1; overflow-x: auto; }
  .product-system-tab { min-height: 78px; border-right: 1px solid #cbd5e1; border-bottom: 0; border-radius: 0; }
  .product-system-tab.active { box-shadow: inset 0 -3px var(--blue); }
  .system-screen-main { grid-template-columns: 1fr; }
  .system-assessment-card { max-width: 500px; }
  .benefit-board { grid-template-columns: 1fr; }
  .institution-outcome { grid-template-columns: 1fr; }
  .institution-outcome > div { justify-content: flex-start; }
  .program-copy { margin-bottom: 50px; }
  .feature-card.wide { grid-template-columns: 1fr; }
  .product-cta { gap: 80px; }
  .cta-preview { grid-row: 2; width: 100%; }
  .cta-copy > div { align-items: flex-start; flex-direction: column; }
  .product-footer { grid-template-columns: 1fr; }
  .product-footer nav { justify-content: flex-start; flex-wrap: wrap; }
  .footer-meta { grid-column: 1; }
}

@media (max-width: 520px) {
  .product-header { min-height: 72px; padding: 0 14px; }
  .product-brand img { width: 36px; height: 36px; }
  .product-brand small { display: none; }
  .mobile-menu { top: 72px; }
  .product-hero { padding-right: 15px; padding-left: 15px; }
  .hero-copy h1 { font-size: clamp(50px, 13.5vw, 72px); }
  .hero-checks { align-items: flex-start; flex-direction: column; }
  .hero-product { width: 125%; margin-left: -12.5%; }
  .browser-frame { border-radius: 9px; }
  .app-frame { grid-template-columns: 88px 1fr; }
  .app-wordmark b,
  .sidebar-user span { display: none; }
  .app-sidebar nav a { font-size: 5px; }
  .app-content { padding: 10px; }
  .app-welcome button { display: none; }
  .trend-card svg { height: 95px; }
  .callout-one { right: 6%; }
  .tour-section,
  .workflow-section,
  .features-section,
  .benefits-section,
  .clinical-reality-section,
  .questions-section { padding-right: 15px; padding-left: 15px; }
  .tour-heading h2,
  .system-heading h2,
  .section-heading h2,
  .program-copy h2,
  .features-heading h2,
  .benefits-heading h2,
  .clinical-reality-heading h2,
  .questions-copy h2,
  .cta-copy h2 { font-size: 47px; }
  .tour-stage { margin-right: -15px; margin-left: -15px; border-right: 0; border-left: 0; border-radius: 0; }
  .stage-bar em { display: none; }
  .screen-main { padding: 14px; }
  .screen-header { align-items: flex-start; flex-direction: column; }
  .screen-metrics > div,
  .resident-summary > div { padding: 12px; }
  .screen-metrics b,
  .resident-summary b { font-size: 20px; }
  .large-chart { padding: 14px; }
  .large-chart svg { height: 180px; }
  .assessment-form { padding: 14px; }
  .recommend-box { grid-template-columns: 27px 1fr; }
  .recommend-box > span { display: none; }
  .entrust-options > div:first-child { display: none; }
  .resident-next { align-items: flex-start; flex-direction: column; }
  .coordinator-stack { grid-template-columns: 1fr; }
  .roster-row { grid-template-columns: 30px 1fr auto; }
  .roster-row > strong { display: none; }
  .product-system-tabs { grid-template-columns: 1fr 1fr; }
  .product-system-tab { border-bottom: 1px solid #cbd5e1; }
  .system-screen-main { padding: 38px 18px; }
  .system-screen-copy h3 { font-size: 38px; }
  .system-readout { grid-template-columns: 1fr; }
  .system-readout div { border-right: 0; border-bottom: 1px solid var(--line); }
  .system-readout div:last-child { border-bottom: 0; }
  .competency-card { padding: 14px; }
  .subcomp-row { grid-template-columns: 1fr 35px; }
  .subcomp-row > div { display: none; }
  .workflow-grid,
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card.wide { grid-column: auto; }
  .mapping-ui { grid-template-columns: 1fr repeat(3,.7fr); }
  .mapping-ui > i { display: none; }
  .program-section { padding-right: 15px; padding-left: 15px; }
  .config-head { grid-template-columns: 1fr auto; }
  .config-head b { display: none; }
  .config-row { grid-template-columns: 1fr 25px; }
  .config-row > em { display: none; }
  .feature-card { padding: 24px 20px; }
  .feature-card.wide { min-height: 430px; }
  .feature-card.recommendation-feature,
  .feature-card.analytics-feature { min-height: 650px; }
  .product-rec-ui > p { grid-template-columns: 53px 1fr; }
  .product-rec-ui > p em { display: none; }
  .product-analytics-ui svg { height: 130px; }
  .clinical-reality-grid { grid-template-columns: 1fr; }
  .reality-card { min-height: 390px; }
  .benefit-card { min-height: 470px; padding: 25px 20px; }
  .benefit-card h3 { margin-top: 50px; }
  .benefit-card li { align-items: flex-start; flex-direction: column; gap: 5px; }
  .benefit-card li b { text-align: left; }
  .institution-outcome { padding: 35px 22px; }
  .feature-chip { right: 20px; bottom: 24px; }
  .toggle-row { right: 20px; left: 20px; flex-wrap: wrap; }
  .cta-preview { height: 320px; grid-template-columns: 60px 1fr; }
  .product-cta { padding-right: 15px; padding-left: 15px; }
  .footer-meta { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}