@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --sage-50:#F1F6F2; --sage-100:#DCEADE; --sage-200:#B6D2BC; --sage-300:#86B294;
  --sage-400:#538F6D; --sage-500:#2F6B4E; --sage-600:#235540; --sage-700:#174030;
  --sage-800:#0B3D2E; --sage-900:#072A20;
  --paper:#FAFAF7; --cream:#F3F1EA; --sand:#E8E5DF; --sand-2:#D6D1C6;
  --stone-300:#B5B1A8; --stone-400:#8C8A84; --stone-600:#5C5A55; --stone-800:#2B2A28; --ink:#1A1917;
  --info:#4A6E8A; --info-bg:#E1E9EF; --warning:#B5832C; --warning-bg:#F6EBD5;
  --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --font-display:'Fraunces',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow-xs:0 1px 2px rgba(43,42,40,.04);
  --shadow-sm:0 1px 2px rgba(43,42,40,.04),0 2px 8px rgba(43,42,40,.05);
  --shadow-md:0 2px 4px rgba(43,42,40,.04),0 10px 28px rgba(43,42,40,.07);
}

* { box-sizing:border-box; }
html { min-width:0; scroll-behavior:smooth; }
html, body {
  margin:0;
  padding:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--stone-800);
  font-family:var(--font-sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body { min-width:320px; }
a { color:var(--sage-600); text-underline-offset:3px; }
a:hover { color:var(--sage-800); }
img, svg { max-width:100%; }

.site-shell { min-height:100vh; background:linear-gradient(180deg,var(--paper),var(--cream) 62%,var(--paper)); }
.container { width:min(100% - 40px,1120px); margin:0 auto; }

.topnav {
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid rgba(232,229,223,.92);
  background:rgba(250,250,247,.9);
  backdrop-filter:saturate(150%) blur(10px);
}
.topnav-inner {
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.wm {
  display:inline-flex;
  position:relative;
  align-items:baseline;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:26px;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  text-decoration:none;
}
.wm-mark { position:relative; display:inline-block; }
.smile {
  position:absolute;
  left:54%;
  top:55%;
  width:.38em;
  height:.22em;
  border:.08em solid var(--sage-500);
  border-top:0;
  border-radius:0 0 1em 1em;
  transform:translate(-50%,-8%);
  pointer-events:none;
}
.nav-links { display:flex; align-items:center; gap:22px; }
.nav-links a {
  color:var(--stone-600);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.nav-links a:hover { color:var(--ink); }
.nav-links .btn { color:#fff; }
.nav-links .btn:hover { color:#fff; }
.nav-links .btn-secondary { color:var(--stone-800); }
.nav-links .btn-secondary:hover { color:var(--ink); }

.btn {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  padding:12px 18px;
  background:var(--sage-500);
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.15;
  text-align:center;
  text-decoration:none;
  box-shadow:var(--shadow-xs);
}
.btn:hover { background:var(--sage-600); color:#fff; }
.btn-secondary {
  background:#fff;
  color:var(--stone-800);
  border-color:var(--sand-2);
}
.btn-secondary:hover { background:var(--cream); color:var(--ink); }
.btn-plain {
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--sage-700);
  box-shadow:none;
}
.btn-plain:hover { background:transparent; color:var(--sage-900); }
.button-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.eyebrow {
  margin:0 0 12px;
  color:var(--sage-600);
  font:600 11px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.label {
  color:var(--stone-400);
  font:600 11px/1 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--sand);
  border-radius:999px;
  background:#fff;
  padding:6px 10px;
  color:var(--stone-600);
  font-size:12px;
  font-weight:700;
}
.pill::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--sage-500);
}

.hero { padding:56px 0 36px; }
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:44px;
  align-items:center;
}
.hero h1,
.page-hero h1 {
  margin:0;
  max-width:12ch;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(42px,7vw,74px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.02;
  text-wrap:balance;
}
.hero h1 span { color:var(--sage-600); }
.hero .lede,
.page-hero .lede {
  max-width:60ch;
  margin:18px 0 0;
  color:var(--stone-600);
  font-size:18px;
  line-height:1.62;
  text-wrap:pretty;
}
.hero-actions { margin-top:28px; }
.hero-note {
  margin-top:14px;
  color:var(--stone-400);
  font-size:13px;
}
.proof-row {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:28px;
}
.proof {
  border:1px solid var(--sand);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.72);
  padding:12px;
}
.proof b { display:block; color:var(--ink); font-size:14px; line-height:1.2; }
.proof span { display:block; margin-top:4px; color:var(--stone-600); font-size:12px; line-height:1.35; }

.product-frame {
  overflow:hidden;
  border:1px solid var(--sand-2);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--shadow-md);
}
.frame-top {
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--sand);
  background:var(--paper);
  padding:10px 12px;
}
.frame-dot { width:9px; height:9px; border-radius:999px; background:var(--sand-2); }
.frame-title {
  margin-left:auto;
  color:var(--stone-400);
  font:600 11px/1 var(--font-mono);
}
.app-preview { display:grid; grid-template-columns:144px minmax(0,1fr); min-height:430px; }
.app-side {
  border-right:1px solid var(--sand);
  background:var(--paper);
  padding:16px 12px;
}
.app-brand { margin-bottom:18px; color:var(--sage-700); font-family:var(--font-display); font-size:20px; font-weight:600; }
.app-nav { display:grid; gap:4px; }
.app-nav span {
  border-radius:var(--r-xs);
  padding:8px 10px;
  color:var(--stone-600);
  font-size:12px;
  font-weight:700;
}
.app-nav .active { background:var(--sage-500); color:#fff; }
.app-main { min-width:0; padding:18px; }
.app-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.app-head h2 { margin:0; color:var(--ink); font-family:var(--font-display); font-size:24px; font-weight:500; line-height:1.1; }
.app-head p { margin:4px 0 0; color:var(--stone-600); font-size:12px; }
.mini-btn { border:1px solid var(--sand-2); border-radius:var(--r-xs); background:#fff; padding:7px 9px; color:var(--stone-800); font-size:11px; font-weight:700; white-space:nowrap; }
.kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.kpi { border:1px solid var(--sand); border-radius:var(--r-sm); background:#fff; padding:10px; }
.kpi span { display:block; color:var(--stone-400); font-size:10px; font-weight:700; line-height:1.2; }
.kpi b { display:block; margin-top:4px; color:var(--ink); font-family:var(--font-display); font-size:23px; font-weight:500; line-height:1; }
.calendar-card { border:1px solid var(--sand); border-radius:var(--r-sm); background:var(--paper); padding:12px; }
.cal-row { display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; align-items:center; margin-top:8px; }
.cal-row:first-child { margin-top:0; }
.cal-time { color:var(--stone-400); font:600 11px/1 var(--font-mono); }
.cal-event {
  min-width:0;
  border:1px solid var(--sage-100);
  border-left:4px solid var(--sage-500);
  border-radius:var(--r-xs);
  background:#fff;
  padding:8px 10px;
}
.cal-event b { display:block; overflow:hidden; color:var(--ink); font-size:12px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.cal-event span { display:block; margin-top:2px; color:var(--stone-600); font-size:11px; }
.cal-event.wait { border-left-color:var(--info); }
.patient-strip { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.patient-mini { border:1px solid var(--sand); border-radius:var(--r-sm); background:#fff; padding:10px; }
.patient-mini b { display:block; color:var(--ink); font-size:12px; }
.patient-mini span { display:block; margin-top:3px; color:var(--stone-600); font-size:11px; }

.section { padding:64px 0; }
.section-alt { background:var(--cream); border-block:1px solid var(--sand); }
.section-head { max-width:720px; margin-bottom:30px; }
.section-head h2 {
  margin:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(32px,4vw,48px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.08;
  text-wrap:balance;
}
.section-head p { margin:14px 0 0; color:var(--stone-600); font-size:17px; line-height:1.65; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.card {
  border:1px solid var(--sand);
  border-radius:var(--r-md);
  background:#fff;
  padding:22px;
  box-shadow:var(--shadow-xs);
}
.card h3 { margin:0; color:var(--ink); font-size:18px; line-height:1.25; letter-spacing:-.01em; }
.card p { margin:10px 0 0; color:var(--stone-600); font-size:14px; line-height:1.62; }
.card .label { margin-bottom:12px; }
.feature-list { display:grid; gap:10px; margin-top:16px; }
.feature-list span {
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--stone-800);
  font-size:14px;
}
.feature-list span::before {
  content:"";
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-top:7px;
  border-radius:999px;
  background:var(--sage-400);
}
.split { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:26px; align-items:start; }

.flow { display:grid; gap:10px; }
.flow-step {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  border:1px solid var(--sand);
  border-radius:var(--r-sm);
  background:#fff;
  padding:14px;
}
.flow-step b:first-child {
  display:flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-xs);
  background:var(--sage-50);
  color:var(--sage-700);
  font-family:var(--font-mono);
  font-size:12px;
}
.flow-step h3 { margin:0; color:var(--ink); font-size:15px; line-height:1.25; }
.flow-step p { margin:5px 0 0; color:var(--stone-600); font-size:13px; line-height:1.52; }

.booking-preview { padding:16px; }
.booking-clinic { border-bottom:1px solid var(--sand); padding-bottom:14px; margin-bottom:14px; }
.booking-clinic b { display:block; color:var(--ink); font-size:18px; }
.booking-clinic span { color:var(--stone-600); font-size:13px; }
.service-card { border:1px solid var(--sand); border-radius:var(--r-sm); background:var(--paper); padding:13px; margin-bottom:10px; }
.service-card b { display:block; color:var(--ink); font-size:14px; }
.service-card span { color:var(--stone-600); font-size:12px; }
.slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.slot { border:1px solid var(--sage-100); border-radius:var(--r-xs); background:#fff; padding:9px 4px; color:var(--sage-700); font:700 12px/1 var(--font-mono); text-align:center; }

.status-band {
  border:1px solid var(--sand-2);
  border-radius:var(--r-md);
  background:#fff;
  padding:24px;
}
.status-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:18px; }
.status-item {
  border:1px solid var(--sand);
  border-radius:var(--r-sm);
  background:var(--paper);
  padding:14px;
}
.status-item b { color:var(--ink); font-size:14px; }
.status-item p { margin:7px 0 0; color:var(--stone-600); font-size:13px; line-height:1.5; }

.faq-list { display:grid; gap:10px; }
.faq-item { border:1px solid var(--sand); border-radius:var(--r-sm); background:#fff; padding:18px; }
.faq-item h3 { margin:0; color:var(--ink); font-size:16px; line-height:1.35; }
.faq-item p { margin:9px 0 0; color:var(--stone-600); font-size:14px; line-height:1.65; }

.final-cta {
  border-top:1px solid var(--sand);
  background:var(--sage-700);
  color:#fff;
  padding:58px 0;
}
.final-cta h2 { margin:0; max-width:720px; color:#fff; font-family:var(--font-display); font-size:clamp(32px,4vw,50px); font-weight:500; line-height:1.08; }
.final-cta p { max-width:660px; margin:14px 0 0; color:rgba(255,255,255,.78); font-size:16px; line-height:1.65; }
.final-cta .button-row { margin-top:24px; }
.final-cta .btn { background:#fff; color:var(--sage-800); }
.final-cta .btn:hover { background:var(--sage-50); color:var(--sage-900); }
.final-cta .btn-secondary { background:transparent; border-color:rgba(255,255,255,.24); color:#fff; }
.final-cta .btn-secondary:hover { background:rgba(255,255,255,.08); }

.footer {
  border-top:1px solid rgba(255,255,255,.08);
  background:var(--ink);
  color:rgba(250,250,247,.62);
  padding:34px 0 42px;
}
.footer-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start; }
.footer .wm { color:#fff; }
.footer .smile { border-color:var(--sage-300); }
.footer p { margin:10px 0 0; max-width:48ch; color:rgba(250,250,247,.62); font-size:13px; line-height:1.6; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px 20px; }
.footer-links a { color:rgba(250,250,247,.72); font-size:13px; font-weight:600; text-decoration:none; }
.footer-links a:hover { color:#fff; }
.legal-line { margin-top:18px; color:rgba(250,250,247,.42); font-size:12px; }

.page-hero { padding:54px 0 28px; }
.page-hero h1 { max-width:14ch; font-size:clamp(38px,6vw,62px); }
.page-main { width:min(100% - 40px,860px); margin:0 auto; padding:22px 0 72px; }
.content-card {
  border:1px solid var(--sand);
  border-radius:var(--r-md);
  background:#fff;
  padding:26px;
}
.content-card + .content-card { margin-top:14px; }
.content-card h2 { margin:0 0 12px; color:var(--ink); font-size:22px; line-height:1.25; }
.content-card h3 { margin:20px 0 8px; color:var(--ink); font-size:16px; }
.content-card p { margin:0 0 12px; color:var(--stone-800); font-size:15px; line-height:1.68; }
.content-card ul, .content-card ol { margin:10px 0 0; padding-left:20px; }
.content-card li { margin:6px 0; color:var(--stone-800); font-size:15px; }
.note {
  border-left:3px solid var(--sage-500);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--cream);
  padding:14px 16px;
  color:var(--stone-600);
  font-size:14px;
}
.kv { display:grid; grid-template-columns:180px minmax(0,1fr); gap:11px 20px; margin:0; }
.kv dt { color:var(--stone-600); font-size:14px; }
.kv dd { margin:0; color:var(--ink); font-size:15px; font-weight:600; }
.table-wrap { width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:560px; }
th, td { border-bottom:1px solid var(--sand); padding:12px 10px; text-align:left; vertical-align:top; font-size:14px; }
th { color:var(--stone-600); font:700 11px/1.2 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
td { color:var(--stone-800); }
tr:last-child td { border-bottom:0; }
code { border-radius:var(--r-xs); background:var(--cream); padding:2px 5px; color:var(--ink); font-family:var(--font-mono); font-size:.88em; }
.back { color:var(--stone-400); font:600 12px/1 var(--font-mono); text-decoration:none; }
.back:hover { color:var(--ink); }

@media (max-width: 920px) {
  .container, .page-main { width:min(100% - 32px,1120px); }
  .nav-links a:not(.btn) { display:none; }
  .hero { padding-top:34px; }
  .hero-grid, .split { grid-template-columns:1fr; }
  .hero-grid { gap:28px; }
  .hero h1 { max-width:11ch; }
  .product-frame { max-width:640px; }
  .grid-3, .status-grid { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-links { justify-content:flex-start; }
}

@media (max-width: 560px) {
  .container, .page-main { width:min(100% - 28px,1120px); }
  .topnav-inner { min-height:62px; }
  .wm { font-size:24px; }
  .nav-links { gap:8px; }
  .nav-links .btn-secondary { display:none; }
  .btn { width:100%; padding-inline:14px; }
  .topnav .btn { width:auto; min-height:40px; padding:10px 12px; font-size:13px; }
  .hero { padding:28px 0 28px; }
  .hero .lede, .page-hero .lede { font-size:16px; }
  .button-row { align-items:stretch; }
  .proof-row { grid-template-columns:1fr; }
  .section { padding:48px 0; }
  .section-head { margin-bottom:22px; }
  .app-preview { grid-template-columns:1fr; min-height:0; }
  .app-side { display:none; }
  .app-main { padding:14px; }
  .app-head { flex-direction:column; }
  .kpis { grid-template-columns:1fr; }
  .patient-strip { grid-template-columns:1fr; }
  .slots { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card, .status-band, .content-card { padding:18px; }
  .flow-step { grid-template-columns:30px minmax(0,1fr); padding:12px; }
  .flow-step b:first-child { width:30px; height:30px; }
  .kv { grid-template-columns:1fr; gap:3px; }
  .kv dt { color:var(--stone-400); font:700 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
  .kv dd { margin-bottom:10px; }
  .page-hero { padding-top:34px; }
}