/* ClinicWise product UI: backlinko.com's look (design/DESIGN-SYSTEM.md).
   One stylesheet for every product screen. Not used on clinic websites. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/inter.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ground: #fff; --ink: #181e15; --ink-strong: #000; --ink-soft: #61655f; --ink-faint: #6b6f69;
  --accent: #bb4a03; --accent-soft: #fbefe7; --brand: #00bc98; --brand-text: #007a63; --brand-soft: #e6f8f4; --panel: #f6f7f9; --line: #e4e6e4; --hair: #eef0ee; --bad: #b42318; --good: #1f7a3f;
  /* The edge of a field, and of a control's chosen state: at least 3:1 on white (3.5) and on the panel (3.3), WCAG 1.4.11. */
  --field-edge: #868a84;
  --font: Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --radius: 10px; --pill: 100px; --column: 66ch;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--ink-strong); font-weight: 800; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(30px, 4vw, 34px); line-height: 1.35; }
h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.3; margin-top: 32px; margin-bottom: 16px; }
h3 { font-size: 18px; line-height: 1.4; }
p { margin: 0 0 16px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.small, small { font-size: 14px; color: var(--ink-soft); }
.label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-text); margin-bottom: 8px; }
.kicker-lg { font-size: 18px; color: var(--brand); }
.faint { color: var(--ink-faint); font-size: 13px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.column { max-width: var(--column); }
.panel { background: var(--panel); border-radius: var(--radius); padding: 20px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--ground); }
.btn { display: inline-block; border: 0; border-radius: var(--pill); background: var(--ink); color: #fff; font: 600 16px/1 var(--font); letter-spacing: -0.02em; padding: 16px 32px; cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; background: #000; }
.btn[disabled] { opacity: .55; cursor: default; }
.btn-quiet { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.btn-quiet:hover { background: var(--panel); }
.chip { display: inline-block; border-radius: var(--pill); background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 600; padding: 4px 12px; }
.chip-accent { background: var(--accent-soft); color: var(--accent); }
.chip-bad { background: #fdecea; color: var(--bad); }
.chip-dark { background: var(--ink); color: #fff; }
label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-strong); margin: 0 0 6px; }
input, select, textarea { width: 100%; font: 400 16px/1.4 var(--font); color: var(--ink); background: #fff; border: 1px solid var(--field-edge); border-radius: var(--radius); padding: 12px 14px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-strong); border-bottom: 2px solid var(--ink-strong); padding: 10px 12px 10px 0; }
tbody td { border-bottom: 1px solid var(--hair); padding: 12px 12px 12px 0; vertical-align: top; }
.num { font-variant-numeric: tabular-nums; }
.stat { font-size: 38px; font-weight: 800; color: var(--ink-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: var(--pill); background: var(--hair); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); }
.stack > * + * { margin-top: 24px; }
.error { color: var(--bad); font-size: 15px; }
[hidden] { display: none !important; }

.help{max-width:calc(var(--column) + 48px);margin:0 auto;padding:48px 24px 96px}
.help h1{margin:0 0 12px}
.help .kicker a{color:var(--brand-text)}
.help .lede{color:var(--ink-soft);font-size:18px;margin-bottom:28px}
.help h2{font-size:22px;margin:36px 0 12px}
.help ol,.help ul{padding-left:22px;margin:0 0 16px}
.help li{margin:0 0 10px}
.help ol.steps{margin-top:8px}
.help .box{background:var(--panel);border-radius:var(--radius);padding:16px 20px;margin:20px 0}
.help .box p{margin:0}
.help ul.pages{list-style:none;padding:0;border-top:1px solid var(--hair)}
.help ul.pages li{border-bottom:1px solid var(--hair);padding:16px 0;margin:0}
.help ul.pages a{font-weight:700;font-size:18px}
.help ul.pages p{margin:4px 0 0;color:var(--ink-soft)}
.help .foot{font-size:14px;color:var(--ink-soft);margin:0 0 8px}
.help .foot.first{margin-top:40px;padding-top:20px;border-top:1px solid var(--hair)}
.help a{overflow-wrap:anywhere}
