/* PracticeVitals marketing site: shared styles for every page. Visual system: DESIGN.md (the Safety Sign System). */
:root {
  --bg: #FFFFFF;
  --bg-2: #F1F4F2;
  --bg-3: #E6EBE8;
  --ink: #17191B;
  --ink-2: #4D545A;
  --ink-3: #6F777D;
  --line: #E0E5E2;
  --line-2: #CBD3CE;
  --safe: #00804A;
  --safe-hover: #006D3F;
  --safe-text: #00703E;
  --safe-soft: #E1F2E8;
  --stop: #D21F26;
  --stop-text: #B5181E;
  --warn: #F6C400;
  --warn-text: #745A00;
  --warn-soft: #FFF5CF;
  --must: #005BAA;
  --must-text: #00509A;
  --must-soft: #E1ECF7;
  --night: #0E1311;
  --night-2: #161D1A;
  --night-line: #26302C;
  --night-ink: #E9EEEB;
  --night-ink-2: #A9B4AF;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --r-plate: 12px;
  --r-btn: 10px;
  --sec: clamp(96px, 11vw, 168px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111513; --bg-2: #181D1B; --bg-3: #222927; --ink: #EBEFED; --ink-2: #B7BFBB; --ink-3: #8E9893; --line: #29312D; --line-2: #39443F;
    --safe: #0A8A51; --safe-hover: #0C9A5B; --safe-text: #52CF93; --safe-soft: #12301F;
    --stop: #D8282E; --stop-text: #FF7D76; --warn-text: #F6C400; --warn-soft: #332A08; --must: #1D6FC1; --must-text: #7DB6F3; --must-soft: #132638;
    --night: #0A0E0C; --night-2: #121815; --night-line: #222B27;
    color-scheme: dark;
  }
}
/* More contrast when asked for: secondary text and hairlines get firmer. */
@media (prefers-contrast: more) {
  :root { --ink-2: #2E3438; --ink-3: #4D545A; --line: #9AA59F; --line-2: #6F777D; --night-ink-2: #D2DAD6; --night-line: #56625C; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --ink-2: #DCE2DF; --ink-3: #B7BFBB; --line: #56625C; --line-2: #73807A; }
}

* { box-sizing: border-box; }
/* No scroll-behavior: smooth here. It fights the pinned inspection walkthrough on the guide page
   (GSAP's own advice), so the page scripts scroll in-page links smoothly instead. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--must-text); }
:focus-visible { outline: 2px solid var(--must); outline-offset: 3px; border-radius: 4px; }
.ic { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; display: inline-block; vertical-align: -0.18em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r-btn); z-index: 100; }
.skip:focus { top: 12px; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } }
.mid { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.8em; color: var(--ink-3); }

/* Type: Archivo extended for display only (DESIGN.md, the Sign-Writer Rule) */
.display { font-family: var(--display); font-weight: 800; font-stretch: 112%; letter-spacing: -0.022em; line-height: 1; margin: 0; }
h2.h { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: clamp(2rem, 3.8vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.04; margin: 0; max-width: 22ch; text-wrap: balance; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-2); line-height: 1.5; max-width: 56ch; margin: 18px 0 0; text-wrap: pretty; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; border-radius: var(--r-btn); padding: 13px 20px; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid transparent; transition: transform 0.15s var(--ease-out), background-color 0.15s, border-color 0.15s; }
.btn:active { transform: scale(0.97); }
.btn .ic { width: 17px; height: 17px; }
.btn-primary { background: var(--safe); color: #FFFFFF; }
.btn-primary:hover { background: var(--safe-hover); }
.btn-primary .ic { transition: transform 0.25s var(--ease-out); }
.btn-primary:hover .ic { transform: translateX(3px); }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--bg-2); }
.btn.sm { padding: 9px 14px; font-size: 14.5px; }

/* Sign badges: the four sign classes, drawn as real sign geometry */
.sg { width: 28px; height: 28px; display: inline-block; flex: none; }
.sg svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* A real screenshot of the app. Each one is captured at the width of the frame it sits in,
   so it is shown whole across and never cut at the side. The bottom fades out instead of
   ending in a hard edge. */
.frame { position: relative; overflow: hidden; }
.frame img { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; }
.fade { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent); }

/* A phone, with the real phone screen inside it */
.phone { position: relative; width: 236px; aspect-ratio: 1170 / 2532; border-radius: 40px; padding: 8px; background: #0C0E0F; box-shadow: inset 0 0 0 1px #2A2E30, 0 30px 60px -24px rgba(17, 21, 19, 0.45); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 32px; }
/* A screen taller than the phone, scrolled by the page (see the script). At rest it shows
   the part that matters, so nothing depends on the motion. */
.phone .scr { height: 100%; overflow: hidden; border-radius: 32px; background: var(--bg-2); }
.phone .scr img { height: auto; object-fit: fill; border-radius: 0; transform: translateY(var(--rest, 0%)); }

/* ------------------------------------------------------------------ nav */
.nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 transparent; transition: box-shadow 0.2s, background-color 0.2s; }
.nav.scrolled { box-shadow: 0 1px 0 var(--line); }
.nav.dark { background: color-mix(in srgb, var(--night) 84%, transparent); box-shadow: 0 1px 0 var(--night-line); }
.nav.dark .brand, .nav.dark .signin, .nav.dark .nav-links a { color: var(--night-ink); }
.nav.dark .nav-links a:hover { background: rgba(255, 255, 255, 0.08); }
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav.dark { background: var(--night); }
}
.nav-in { height: 68px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--safe); color: #FFFFFF; display: grid; place-items: center; }
.brand-mark .ic { width: 18px; height: 18px; }
.nav-links { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; transition: background-color 0.15s, color 0.15s; }
.nav-links a:hover { color: var(--ink); background: var(--bg-2); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-end .signin { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 10px; white-space: nowrap; }
@media (max-width: 960px) { .nav-links { display: none; } }
/* On small phones the name, Sign in and the trial button don't fit on one line. Sign in stays,
   because staff opening the app from their home screen land here when they're signed out. */
@media (max-width: 480px) { .nav .brand-word { display: none; } .nav-in { gap: 12px; } .nav-end { gap: 4px; } }


/* The gate plate: the product's single sign (DESIGN.md, signature component).
   It is its own container, so the sign scales with the space it is given. */
.gate { container-type: inline-size; border-radius: var(--r-plate); display: grid; align-content: center; transform-origin: 50% 0; backface-visibility: hidden; color: #FFFFFF; background: var(--safe); }
.gate.lv-at_risk { background: var(--warn); color: #17191B; }
.gate.lv-not_ready { background: var(--stop); }
.gate.lv-ready { background: var(--safe); }
.gate-in { padding: clamp(20px, 6.5cqi, 34px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 4.5cqi, 26px); align-items: center; }
.gate .pict { width: clamp(52px, 15cqi, 84px); aspect-ratio: 1; }
.gate .pict svg { width: 100%; height: 100%; display: block; }
.gate .word { font-family: var(--display); font-weight: 800; font-stretch: 115%; font-size: clamp(2rem, 9.6cqi, 3.6rem); letter-spacing: -0.02em; line-height: 1; margin: 0; }
.gate .why { margin: 10px 0 0; font-size: clamp(0.95rem, 3.3cqi, 1.1rem); line-height: 1.45; max-width: 40ch; text-wrap: pretty; }
@container (max-width: 330px) { .gate-in { grid-template-columns: 1fr; } }
.gate.flip-out { animation: flipOut 0.19s cubic-bezier(.55, 0, 1, .45) forwards; }
.gate.flip-in { animation: flipIn 0.5s cubic-bezier(.16, 1, .3, 1); }
@keyframes flipOut { to { transform: perspective(1000px) rotateX(-88deg); } }
@keyframes flipIn { from { transform: perspective(1000px) rotateX(88deg); } to { transform: perspective(1000px) rotateX(0deg); } }


/* ------------------------------------------------------------------ final call */
.final { padding: 0 0 var(--sec); }
.final-plate { background: var(--safe); color: #FFFFFF; border-radius: var(--r-plate); padding: clamp(36px, 6vw, 88px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.final-plate .pict { width: clamp(72px, 10vw, 128px); aspect-ratio: 1; }
.final-plate h2 { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -0.022em; line-height: 1.02; margin: 0; max-width: 16ch; text-wrap: balance; }
.final-plate p { margin: 18px 0 30px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 46ch; color: #E1F2E8; }
.btn-on-green { background: #FFFFFF; color: #00703E; }
.btn-on-green:hover { background: #E1F2E8; }
@media (max-width: 700px) { .final-plate { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--line); padding: 48px 0 56px; font-size: 14.5px; color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.6fr)); gap: 32px; }
.foot h4, .foot .foot-h { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot .fine { margin: 14px 0 0; max-width: 54ch; color: var(--ink-3); font-size: 13.5px; }
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } }