/* The three path pages (site/for-health-systems.html, for-universities.html, for-associations.html): one template, on top
 * of landing.css. Same tokens, type, grid and motion as the landing: every colour, radius, easing and duration here is a
 * landing.css :root token. Sections, in order (data-path-section): hero · changes · dashboard · trust · clinic-view ·
 * questions, then the notes and the footer. */

/* ---------------------------------------------------------------- hero: a warm photograph, the copy on its calm side */
.ph { position: relative; height: 100vh; height: 100svh; min-height: 720px; background: var(--l-dark); isolation: isolate; }
.ph-media { position: absolute; inset: 0; overflow: hidden; }
.ph-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ph-pos, 50% 30%); }
/* the header reads on a paper wash at the top; below 1024 the copy sits at the foot on a dark veil */
.ph-media::before { content: ''; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 160px; background: linear-gradient(to bottom, var(--l-paper) 40%, transparent); opacity: 0.92; }
.ph-media::after { content: ''; position: absolute; inset: 28% 0 0 0; background: linear-gradient(to bottom, transparent, var(--l-card-veil) 42%, var(--l-dark)); }
.ph-content { position: absolute; left: var(--l-g); right: var(--l-g); bottom: 0; padding-bottom: 40px; }
.ph-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 560px; color: var(--l-paper); }
.ph-copy .eyebrow { align-self: auto; }
.ph-title { font-family: var(--l-font-serif); font-weight: 400; font-size: 40px; line-height: 44px; letter-spacing: -1.2px; text-wrap: balance; }
.ph-lede { font-size: 18px; line-height: 25px; letter-spacing: -0.3px; text-wrap: pretty; }
.ph-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.ph-demo { padding: 12px 0; font-size: 16px; line-height: 24px; font-weight: var(--l-bold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ph-note { font-size: 14px; line-height: 21px; }
.ph :focus-visible { outline-color: var(--l-paper); }
@media (prefers-reduced-motion: no-preference) { .ph-copy { animation: hero-in var(--l-reveal) var(--l-ease-out) both; } }
@media (min-width: 768px) {
  .ph-title { font-size: 56px; line-height: 60px; letter-spacing: -2px; }
  .ph-lede { font-size: 20px; line-height: 28px; }
  .ph-content { padding-bottom: 56px; }
}
/* from 1024: the photograph fades into paper on the left, and the copy sits there in ink, as on the landing */
@media (min-width: 1024px) {
  .ph { min-height: 760px; background: var(--l-paper); }
  .ph-media::after { inset: 0; background: linear-gradient(90deg, var(--l-paper) 0%, var(--l-paper) 22%, var(--l-paper-80) 38%, transparent 64%); }
  .ph-content { top: 0; right: auto; width: calc(var(--l-col) * 10); display: flex; align-items: center; padding: 120px 0 48px; }
  .ph-copy { color: var(--l-ink); gap: 20px; }
  .ph-title { color: var(--l-ink-strong); }
  .ph :focus-visible { outline-color: var(--l-ink); }
}
@media (min-width: 1280px) {
  .ph-content { width: calc(var(--l-col) * 9); }
  .ph-title { font-size: 64px; line-height: 68px; letter-spacing: -2.6px; }
}

/* ---------------------------------------------------------------- shared section head */
.pg { padding: 40px 0; }
.pg-head { display: flex; flex-direction: column; align-items: flex-start; margin: 0 var(--l-g); }
.pg-title { align-self: stretch; margin-top: 24px; font-family: var(--l-font-serif); font-weight: 400; font-size: 40px; line-height: 44px; text-wrap: balance; }
.pg-text { margin-top: 16px; font-size: 20px; line-height: 30px; }
.pg-problem { max-width: 34em; margin-top: 24px; }
.pg-problem + .pg-title { margin-top: 24px; }
@media (min-width: 768px) {
  .pg-title { margin-top: 32px; font-size: 56px; line-height: 61.6px; }
  .pg-head { max-width: calc(var(--l-col) * 16); }
}
@media (min-width: 1024px) { .pg { padding: 80px 0; } }

/* ---------------------------------------------------------------- what changes: three blocks */
.pg-blocks { display: grid; grid-template-columns: 100%; gap: 16px; margin: 40px var(--l-g) 0; }
.pg-block { display: flex; flex-direction: column; padding: 24px; border-radius: var(--l-radius-sm); background: var(--l-paper-2); }
.pg-n { font-family: var(--l-font-serif); font-size: 30px; line-height: 28px; color: var(--l-cta); }
.pg-block h3 { margin-top: 24px; font-family: var(--l-font-serif); font-weight: 400; font-size: 26px; line-height: 30px; color: var(--l-ink-strong); }
.pg-block p { margin-top: 12px; font-size: 16px; line-height: 24px; }
@media (min-width: 768px) {
  .pg-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .pg-block { padding: 28px; }
}
@media (min-width: 1024px) {
  .pg-block { padding: 40px; }
  .pg-block h3 { margin-top: 48px; font-size: 28px; line-height: 34px; }
  .pg-block p { font-size: 18px; line-height: 27px; }
}

/* ---------------------------------------------------------------- your dashboard: the steps, and the org Home drawn */
.db-grid { display: grid; grid-template-columns: 100%; row-gap: 40px; margin: 0 var(--l-g); }
.db-copy { display: flex; flex-direction: column; align-items: flex-start; }
.db-copy .pg-title { margin-top: 24px; }
.db-steps { align-self: stretch; margin-top: 28px; border-top: 1px solid var(--l-hairline); }
.db-steps li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--l-hairline); font-size: 18px; line-height: 26px; color: var(--l-ink-strong); }
.db-tick { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--l-app-brand-tint); }
.db-tick::after { content: ''; position: absolute; left: 9px; top: 5.5px; width: 5px; height: 10px; border: solid var(--l-cta); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
@media (min-width: 768px) { .db-copy .pg-title { margin-top: 32px; } }
@media (min-width: 1024px) {
  .db-grid { grid-template-columns: calc(var(--l-col) * 8) 1fr; column-gap: var(--l-col); align-items: center; }
  .db-steps li { font-size: 20px; line-height: 28px; }
}

/* The miniature: the organization's Home in the app's language (the kit's values, kept as landing tokens), drawn the
 * way the landing draws its phones. A desktop window when there is room; a single column below 560 px of stage. */
.om-stage { padding: 20px; border-radius: var(--l-radius-glass); background: var(--l-paper-2); container-type: inline-size; }
.om { overflow: hidden; border-radius: var(--l-radius-lg); background: var(--l-app-desk); color: var(--l-app-ink); font-size: 11px; line-height: 1.4; box-shadow: 0 0 0 1px var(--l-app-shadow-edge), 0 1.6em 3.2em -1.6em var(--l-phone-shadow); }
.om p { margin: 0; }
.om-bar { display: flex; align-items: center; gap: 0.8em; padding: 0.9em 1.3em; background: var(--l-app-card); box-shadow: 0 1px 0 var(--l-app-border); }
.om-mark { display: grid; flex: none; place-items: center; width: 2.2em; height: 2.2em; border-radius: var(--l-radius-sm); background: var(--l-app-card); box-shadow: 0 0 0 1px var(--l-app-border); color: var(--l-app-ink); font-family: var(--l-font-serif); font-size: 1.15em; line-height: 1; }
.om-name { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-tabs { display: none; flex: 1; justify-content: center; gap: 0.3em; color: var(--l-app-muted); }
.om-tabs span { padding: 0.35em 0.8em; border-radius: var(--l-radius-full); }
.om-tabs .is-on { background: var(--l-app-brand-tint); color: var(--l-cta); font-weight: 500; }
.om-face { width: 2.2em; height: 2.2em; margin-left: auto; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 0.12em var(--l-app-brand-mark); }
.om-me { display: grid; flex: none; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--l-app-desk-2); color: var(--l-app-ink-2); font-size: 0.8em; font-weight: 500; }
.om-body { padding: 1.4em 1.3em 1.5em; }
.om-top { display: grid; grid-template-columns: 100%; gap: 1.2em; }
.om-who { display: flex; align-items: center; gap: 0.45em; font-size: 0.85em; color: var(--l-app-muted); }
.om-who img { width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; }
.om-who b { font-weight: 500; color: var(--l-app-ink-2); }
.om-greet { margin-top: 0.45em; font-family: var(--l-font-serif); font-size: 1.75em; line-height: 1.15; letter-spacing: -0.01em; }
.om-bridge { margin-top: 0.6em; color: var(--l-app-ink-2); }
.om-acts { display: flex; align-items: center; gap: 1.1em; margin-top: 0.9em; }
.om-btn { display: inline-block; padding: 0.6em 1.3em; border-radius: var(--l-radius-full); background: var(--l-cta); color: var(--l-white); font-weight: 500; font-size: 0.92em; }
.om-lnk { font-weight: 500; color: var(--l-cta); }
.om-side { display: grid; grid-template-columns: 100%; gap: 0.8em; align-content: start; }
.om-card { padding: 1em 1.1em 1.1em; border-radius: var(--l-radius-md); background: var(--l-app-card); box-shadow: 0 0 0 1px var(--l-app-shadow-edge), 0 0.08em 0.15em var(--l-app-shadow-1), 0 0.3em 0.9em var(--l-app-shadow-1); }
.om-ct { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6em; font-weight: 500; }
.om-ct span { font-weight: 400; font-size: 0.9em; color: var(--l-app-muted); }
/* people at a glance: a ring (started of invited), never a KPI strip */
.om-people { display: flex; align-items: center; gap: 1em; margin-top: 0.7em; }
.om-ring { position: relative; flex: none; display: grid; place-items: center; width: 6.2em; height: 6.2em; border-radius: 50%; background: conic-gradient(var(--l-cta) calc(var(--p) * 1%), var(--l-app-desk-2) 0); }
.om-ring::before { content: ''; position: absolute; inset: 0.62em; border-radius: 50%; background: var(--l-app-card); }
.om-ring b { position: relative; margin-top: -0.5em; font-family: var(--l-font-serif); font-weight: 400; font-size: 1.9em; line-height: 1; }
.om-ring i { position: absolute; left: 0; right: 0; bottom: 1.35em; font-style: normal; font-size: 0.78em; text-align: center; color: var(--l-app-muted); }
.om-line { font-size: 0.95em; }
.om-line b { display: block; font-weight: 500; }
/* the team's next course: a cover with time left */
.om-course { display: flex; gap: 0.9em; margin-top: 0.7em; }
.om-cover { position: relative; flex: none; width: 8.4em; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--l-radius-sm); }
.om-cover img { width: 100%; height: 100%; object-fit: cover; }
.om-cover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, var(--l-app-veil), var(--l-app-veil-0)); }
.om-cover i { position: absolute; left: 0.45em; right: 0.45em; bottom: 0.45em; z-index: 1; height: 0.28em; border-radius: var(--l-radius-full); background: var(--l-app-track); }
.om-cover i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--l-white); }
.om-course b { display: block; font-weight: 500; line-height: 1.25; }
.om-course span { display: block; margin-top: 0.25em; color: var(--l-app-muted); font-size: 0.9em; }
/* Your rollout: the four chapters in words, as the app's Home */
.om-roll { margin-top: 0.8em; }
.om-goal { margin-top: 0.7em; color: var(--l-app-ink-2); }
.om-goal b { font-weight: 500; color: var(--l-app-ink); }
.om-ch { display: grid; grid-template-columns: 100%; gap: 0.3em; margin-top: 0.8em; }
.om-ch li { display: flex; gap: 0.6em; padding: 0.7em 0.8em; border-radius: var(--l-radius-md); color: var(--l-app-muted); }
.om-ch .is-here { background: var(--l-app-brand-tint); color: var(--l-app-ink-2); }
.om-chn { flex: none; width: 0.7em; font-family: var(--l-font-serif); font-weight: 400; font-size: 1.9em; line-height: 0.95; color: var(--l-cta); }
.om-cht { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0.15em; }
.om-cht b { font-weight: 500; font-size: 1.1em; color: var(--l-app-ink); }
.om-chs { margin-top: 0.3em; color: var(--l-app-ink); }
.om-done { display: inline-flex; align-items: center; gap: 0.35em; color: var(--l-cta); }
.om svg { flex: none; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.om-prog { display: block; height: 0.3em; margin-top: 0.4em; border-radius: var(--l-radius-full); background: var(--l-app-desk-2); overflow: hidden; }
.om-ch .is-here .om-prog { background: var(--l-app-card); }
.om-prog i { display: block; height: 100%; border-radius: inherit; background: var(--l-cta); }
.om-next { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.9em; margin-top: 0.9em; padding: 0 0.8em; }
.om-cap { flex: 0 0 100%; font-size: 0.82em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--l-app-muted); }
.om-next > b { flex: 0 0 100%; font-weight: 400; font-size: 1.05em; }
.om-acts2 { display: inline-flex; align-items: center; gap: 0.9em; }
.om-pill { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.8em 0.2em 0.6em; border-radius: var(--l-radius-full); background: var(--l-app-brand-tint); color: var(--l-cta); }
.om-you { background: var(--l-app-you-tint); color: var(--l-app-you); }
.om-open { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 500; color: var(--l-cta); }
@container (min-width: 560px) {
  .om { font-size: clamp(10px, 1.85cqw, 13px); }
  .om-tabs { display: flex; }
  .om-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6em; }
  .om-ch { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4em; }
  .om-ch li { flex-direction: column; gap: 0.3em; padding: 0.8em 0.9em; }
  .om-body { padding: 1.8em 2em 2em; }
  .om-bar { padding: 0.9em 2em; }
}
@media (min-width: 768px) { .om-stage { padding: 4.5%; } }
/* the miniature plays once when it comes into view (landing.js; off under reduced motion) */
.reveal-on [data-play] .om-card { opacity: 0; }
.reveal-on [data-play].is-play .om-card { animation: lift var(--l-slow) var(--l-ease-out) both; }
.reveal-on [data-play].is-play .om-side .om-card:nth-child(2) { animation-delay: 120ms; }
.reveal-on [data-play].is-play .om-roll { animation-delay: 240ms; }

/* ---------------------------------------------------------------- trust: one calm statement */
.pg-trust { padding: 64px 0; background: var(--l-paper-2); }
.pg-trust .pg-head { align-items: center; max-width: none; text-align: center; }
.pg-trust .pg-text { max-width: 34em; }
@media (min-width: 768px) { .pg-trust .pg-head { width: calc(var(--l-col) * 16); margin: 0 auto; } }
@media (min-width: 1024px) { .pg-trust { padding: 112px 0; } .pg-trust .pg-text { font-size: 24px; line-height: 32px; letter-spacing: -0.4px; } }

/* ---------------------------------------------------------------- the clinic view: what a clinic sees, on a phone */
.cv-grid { display: grid; grid-template-columns: 100%; row-gap: 40px; margin: 0 var(--l-g); }
.cv-copy { display: flex; flex-direction: column; align-items: flex-start; }
.cv-copy .pg-title { margin-top: 0; }
.pg-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 12px 0; font-weight: var(--l-bold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pg-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--l-base) var(--l-ease); }
.pg-link:hover svg { transform: translateX(3px); }
.cv-stage { display: flex; justify-content: center; padding: 32px 0; border-radius: var(--l-radius-glass); background: var(--l-paper-2); }
.cv-stage .phone { position: relative; width: 250px; height: auto; font-size: 11.6px; }
@media (min-width: 1024px) {
  .cv-grid { grid-template-columns: 1fr calc(var(--l-col) * 10); column-gap: var(--l-col); align-items: center; }
  .cv-stage { padding: 48px 0; }
  .cv-stage .phone { width: 290px; font-size: 13.4px; }
}

/* ---------------------------------------------------------------- the closing call */
.pg-close { padding: 8px var(--l-g) 80px; }
.pg-close-in { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pg-close .ph-cta { justify-content: center; margin-top: 0; }
@media (min-width: 1024px) { .pg-close { padding-bottom: 128px; } }

/* ---------------------------------------------------------------- the small print */
.pg-notes p { font-size: 14px; line-height: 21px; }