/* ClinicFlow — clinical white design system (single source of truth) Derived from pricing.html / pilot.html / call-assistant.html. Fonts: DM Serif Display (headings) + DM Sans (body). Import DM fonts in the page : */ :root{ --bg:#F8F7F4; --surface:#FFFFFF; --surface2:#F2F1EE; --border:#E4E2DC; --text:#1A1916; --text2:#6B6860; --text3:#A8A69F; --navy:#1B2B4B; --navy2:#2D4170; --green:#1A7A4A; --green-bg:#EBF5EF; --red:#C0392B; --red-bg:#FDECEA; --amber:#B45309; --amber-bg:#FEF3C7; --r:8px; --r-lg:16px; --sh:0 1px 3px rgba(0,0,0,.08); --sh-md:0 8px 32px rgba(0,0,0,.10); --wrap:1080px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:var(--navy)} /* ── Typography ── */ h1,h2,h3,.serif{font-family:'DM Serif Display',serif;color:var(--navy);line-height:1.15;font-weight:400} h1{font-size:clamp(36px,5vw,52px)} h2{font-size:clamp(28px,4vw,36px)} h3{font-size:22px} .eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--green);background:var(--green-bg);padding:4px 12px;border-radius:20px;margin-bottom:20px} .muted{color:var(--text2)} /* ── Layout ── */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .section{padding:72px 24px} .center{text-align:center} /* ── Nav (consistent across pages) ── */ .cf-nav{display:flex;justify-content:space-between;align-items:center;padding:18px 40px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50} .cf-logo{font-family:'DM Serif Display',serif;font-size:22px;color:var(--navy);text-decoration:none} .cf-nav-links{display:flex;align-items:center;gap:26px} .cf-nav-links a{font-size:14px;font-weight:500;color:var(--text2);text-decoration:none;transition:color .15s} .cf-nav-links a:hover{color:var(--navy)} .cf-nav-cta{background:var(--navy)!important;color:#fff!important;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none} .cf-nav-cta:hover{background:var(--navy2)!important} @media(max-width:640px){.cf-nav{padding:14px 20px}.cf-nav-links{gap:14px}.cf-nav-links a.hide-sm{display:none}} /* ── Buttons ── */ .btn{display:inline-block;padding:14px 28px;background:var(--navy);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;text-align:center;text-decoration:none;transition:background .15s} .btn:hover{background:var(--navy2)} .btn.block{display:block;width:100%} .btn.out{background:transparent;color:var(--navy);border:1.5px solid var(--navy)} .btn.out:hover{background:var(--navy);color:#fff} .btn.white{background:#fff;color:var(--navy)} .btn.white:hover{background:var(--bg)} /* ── Cards ── */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px;transition:box-shadow .2s,transform .2s} .card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)} .card.feat{border:2px solid var(--navy);background:var(--navy);color:#fff} .card.feat h3,.card.feat .serif{color:#fff} .grid{display:grid;gap:20px} .grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} /* ── Feature list ── */ .feats{list-style:none} .feats li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text2);padding:8px 0;border-top:1px solid var(--border)} .feats li:first-child{border-top:none} .ck{color:var(--green);font-size:16px;flex-shrink:0} /* ── FAQ accordion ── */ .fi{border-top:1px solid var(--border);padding:20px 0;cursor:pointer} .fi:last-child{border-bottom:1px solid var(--border)} .fq{font-size:15px;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:16px} .fi-ico{font-size:20px;color:var(--text3);flex-shrink:0;transition:transform .2s} .fi.open .fi-ico{transform:rotate(45deg)} .fa{font-size:14px;color:var(--text2);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s} .fi.open .fa{max-height:320px;padding-top:12px} /* ── Guarantee / CTA band ── */ .band{background:var(--navy);color:#fff;text-align:center;padding:60px 24px} .band h2{color:#fff;margin-bottom:12px} .band p{font-size:16px;color:rgba(255,255,255,.7);max-width:520px;margin:0 auto 28px} /* ── Footer (consistent across pages) ── */ .cf-footer{background:var(--surface);border-top:1px solid var(--border);padding:36px 24px;text-align:center;font-size:14px;color:var(--text2)} .cf-footer a{color:var(--navy);text-decoration:none;font-weight:500} .cf-footer a:hover{text-decoration:underline} .cf-footer .sep{color:var(--text3);margin:0 8px} .cf-footer .cf-foot-logo{font-family:'DM Serif Display',serif;font-size:18px;color:var(--navy);display:block;margin-bottom:10px} /* ── Urgency line (Distance-inspired, already deployed) ── */ .urgency{color:var(--red);font-weight:600}