/* ============================================================= A&I Solutions — Custom EHR Landing Page W1 Built on the exact V5 design system: same tokens, same fonts, same button + nav + hero + section rhythm. New section patterns (6-card problem grid, pricing tiers, sticky bottom CTA) are styled in V5's visual language (teal-first, light sections, Open Sans + Manrope only — no serif). ============================================================= */ /* ========== DESIGN TOKENS (V5 EXACT) ========== */ :root{ --font-primary:"Open Sans",system-ui,-apple-system,sans-serif; --font-accent:"Manrope","Open Sans",sans-serif; --fs-h1:clamp(2rem,1.25rem + 3.75vw,3rem); --fs-h2:clamp(1.625rem,1.2rem + 2.125vw,2.25rem); --fs-h3:clamp(1.25rem,1.05rem + 1vw,1.625rem); --fs-h4:clamp(1.125rem,1rem + 0.625vw,1.25rem); --fs-body:1rem; --fs-body-lg:1.125rem; --fs-small:.875rem; --fs-eyebrow:.8125rem; --fw-r:400; --fw-m:500; --fw-sb:600; --fw-b:700; --lh-tight:1.2; --lh-snug:1.4; --lh-normal:1.6; --c-primary:#0D6D8C; --c-primary-hover:#0A5871; --c-primary-dark:#084457; --c-primary-tint:#E5FAFF; --c-accent:#4695A8; --c-accent-soft:#D7EEF3; --c-ink-900:#121B1D; --c-ink-700:#2B3640; --c-ink-500:#4A5763; --c-ink-400:#6B7580; --c-ink-200:#D7DCE2; --c-ink-100:#F1F4F6; --c-ink-50:#F7F9FA; --c-white:#FFFFFF; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:80px; --sp-10:96px; --section-py:clamp(32px,2vw + 16px,80px); --section-px:clamp(16px,1.2vw + 8px,24px); --content-max:1320px; --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; --sh-sm:0 1px 2px rgba(18,27,29,.06); --sh-md:0 4px 12px rgba(18,27,29,.08); --sh-lg:0 16px 32px rgba(18,27,29,.08); --sh-xl:0 24px 48px rgba(18,27,29,.10); --t-fast:150ms ease; --t-normal:250ms ease; } *,*::before,*::after{box-sizing:border-box;} /* IMPORTANT: never put overflow-x on — it makes the scroll container on iOS Safari, which breaks `position:sticky` on 's descendants (the nav). Apply overflow:clip ONLY on body / main / .section / .hero (matches V6). */ html{scroll-behavior:smooth;} body{ margin:0;font-family:var(--font-primary);font-size:var(--fs-body); line-height:var(--lh-normal);color:var(--c-ink-500);background:var(--c-white); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:clip;max-width:100%;width:100%; padding-bottom:68px; /* sticky bottom CTA clearance */ } /* GPU compositing on body keeps sticky descendants pinned during momentum scroll on iOS */ @media(max-width:991.98px){body{-webkit-backface-visibility:hidden;backface-visibility:hidden;}} main{display:block;overflow-x:clip;width:100%;max-width:100%;} @media(max-width:575.98px){body{padding-bottom:88px;}} img{max-width:100%;height:auto;display:block;} a{color:var(--c-primary);text-decoration:none;transition:color var(--t-fast);} a:hover{color:var(--c-primary-hover);} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--c-primary);outline-offset:2px;border-radius:var(--r-xs); } button{font-family:inherit;cursor:pointer;} h1,h2,h3,h4{font-family:var(--font-primary);color:var(--c-ink-900);line-height:var(--lh-tight);letter-spacing:-0.01em;margin:0 0 var(--sp-4);} h1{font-size:var(--fs-h1);font-weight:var(--fw-b);} h2{font-size:var(--fs-h2);font-weight:var(--fw-sb);} h3{font-size:var(--fs-h3);font-weight:var(--fw-sb);} h4{font-size:var(--fs-h4);font-weight:var(--fw-sb);line-height:var(--lh-snug);} p{margin:0 0 var(--sp-4);font-size:var(--fs-body);line-height:var(--lh-normal);color:var(--c-ink-500);} p:last-child{margin-bottom:0;} /* ========== CONTAINER (V5 EXACT) ========== */ .container{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--section-px);box-sizing:border-box;} .container-fluid{width:100%;margin-inline:auto;padding-inline:var(--section-px);box-sizing:border-box;} @media(min-width:576px){.container{max-width:540px;}} @media(min-width:768px){.container{max-width:720px;}} @media(min-width:992px){.container{max-width:960px;}} @media(min-width:1200px){.container{max-width:1320px;}} @media(min-width:1500px){.container{max-width:1480px;}} /* ========== SECTIONS (V5) ========== */ .section{padding:var(--section-py) 0;overflow-x:clip;position:relative;} .section--tint{background:var(--c-primary-tint);} .section--neutral{background:var(--c-ink-50);} .section--white{background:var(--c-white);} .eyebrow{ font-family:var(--font-accent);font-size:var(--fs-eyebrow); font-weight:var(--fw-b);color:var(--c-primary); text-transform:uppercase;letter-spacing:.08em;line-height:1; margin-bottom:var(--sp-3);display:inline-block; } .section-head{text-align:left;max-width:820px;margin:0 0 clamp(24px,2vw,40px);} .section-head--center{text-align:center;margin-inline:auto;} .section-head h2{margin-bottom:var(--sp-3);} .section-head h2 span{color:var(--c-primary);} .section-head p{font-size:var(--fs-body-lg);color:var(--c-ink-500);margin-top:0;} /* ========== BUTTONS (V5 EXACT) ========== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); font-size:var(--fs-body);font-weight:var(--fw-sb);line-height:1; padding:14px 28px;border-radius:var(--r-sm);border:1.5px solid transparent; min-height:48px;text-decoration:none; transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast); } .btn--primary{background:var(--c-primary);color:var(--c-white);} .btn--primary:hover{background:var(--c-primary-hover);color:var(--c-white);box-shadow:var(--sh-md);} .btn--secondary{background:var(--c-white);color:var(--c-primary);border-color:var(--c-primary);} .btn--secondary:hover{background:var(--c-primary);color:var(--c-white);} .btn--sm{padding:10px 20px;min-height:40px;font-size:var(--fs-small);} .btn--block{width:100%;} /* ========== NAV (V5 EXACT) ========== */ .site-header{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--c-ink-200); /* GPU compositing layer keeps `position:sticky` reliable when the drawer opens and body scroll is locked (matches V6) */ -webkit-transform:translateZ(0);transform:translateZ(0); will-change:transform; } /* Drawer is anchored to the (still-sticky) header — keep it that way at all viewports */ .site-header,.site-header.is-open{position:sticky;top:0;} .nav{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-3) 0;} .nav__logo{ display:flex;align-items:center;gap:var(--sp-2); font-family:var(--font-accent);font-weight:800;font-size:1.5rem; color:var(--c-primary);letter-spacing:-.02em;text-decoration:none; } .nav__logo svg{flex-shrink:0;} .nav__links{display:none;gap:var(--sp-5);margin-left:var(--sp-4);flex:1;min-width:0;} .nav__links a{ color:var(--c-ink-700);font-size:var(--fs-small);font-weight:var(--fw-m); padding:6px 8px;border-radius:var(--r-sm);text-decoration:none;white-space:nowrap; transition:color var(--t-fast),background var(--t-fast); } .nav__links a:hover,.nav__links a:focus-visible{ color:var(--c-primary);background:var(--c-primary-tint);outline:none;text-decoration:none; } .nav__ctas{display:flex;gap:var(--sp-3);margin-left:auto;align-items:center;flex-shrink:0;} .nav__ctas .btn{white-space:nowrap;} .nav__menu-btn{ display:none;margin-left:auto;background:transparent; border:1px solid var(--c-ink-200);border-radius:var(--r-sm);padding:8px; color:var(--c-ink-900);cursor:pointer;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0; } .nav__menu-btn:hover{border-color:var(--c-primary);color:var(--c-primary);} .nav__menu-icon-close{display:none;} .nav__menu-btn[aria-expanded="true"] .nav__menu-icon-open{display:none;} .nav__menu-btn[aria-expanded="true"] .nav__menu-icon-close{display:block;} /* Desktop ≥1200px: full menu inline + CTAs visible */ @media(min-width:1200px){.nav__links{display:flex;}} /* Mobile + tablet drawer (<1200px) — V6 pattern: full menu visible inside drawer, CTAs HIDDEN */ @media(max-width:1199.98px){ .nav__menu-btn{display:inline-flex;} .nav__ctas{display:none!important;} .nav__links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:var(--sp-3) clamp(16px,4vw,32px) var(--sp-4);background:var(--c-white);border-top:1px solid var(--c-ink-200);box-shadow:var(--sh-lg);z-index:80;} .nav__links.is-open{display:flex;} .nav__links a{padding:14px 10px;font-size:15px;border-bottom:1px solid var(--c-ink-100);color:var(--c-ink-900);font-weight:var(--fw-sb);} .nav__links a:last-child{border-bottom:0;} } /* ========== HERO (V5 LIGHT BLUE-TINT, TWO-COLUMN) ========== */ .hero{ background:#EAF5FA; padding:clamp(24px,1.5vw + 12px,48px) 0 clamp(36px,2.5vw + 20px,72px); border-bottom:1px solid rgba(13,109,140,.18); position:relative; } .hero::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:6px; background:linear-gradient(180deg,rgba(13,109,140,.08),rgba(13,109,140,0)); pointer-events:none; } .hero__grid{ display:grid;gap:clamp(24px,2vw + 8px,40px);grid-template-columns:1fr;align-items:flex-start; } @media(min-width:1024px){.hero__grid{grid-template-columns:1.1fr .9fr;}} .hero__badge{ display:inline-flex;align-items:center;gap:var(--sp-2); font-size:var(--fs-small);font-weight:var(--fw-sb);color:var(--c-primary); background:rgba(255,255,255,.8);border:1px solid rgba(13,109,140,.2); border-radius:var(--r-pill);padding:6px 14px;margin-bottom:var(--sp-4); } .hero__badge::before{content:"✓";color:var(--c-primary);} .hero h1{ font-size:clamp(2.25rem,1.5rem + 3.5vw,3.25rem); line-height:1.1;margin-bottom:var(--sp-3);color:var(--c-ink-900); } .hero h1 .accent{color:var(--c-primary);display:block;} .hero__sub{font-size:var(--fs-body-lg);color:var(--c-ink-500);margin-bottom:var(--sp-5);max-width:560px;} .hero__sub strong{color:var(--c-ink-900);font-weight:var(--fw-sb);} .hero__pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-5);} .hero-pill{ display:inline-flex;align-items:center;gap:6px; background:var(--c-white);border:1px solid var(--c-ink-200); color:var(--c-ink-700); padding:7px 12px;border-radius:999px; font-size:13px;font-weight:var(--fw-m); } .hero-pill::before{content:"✓";color:var(--c-primary);font-weight:var(--fw-b);} .hero__trust{ display:flex;flex-wrap:nowrap;align-items:center; gap:clamp(12px,1vw,20px); padding-top:clamp(16px,1vw + 8px,24px); margin-top:clamp(8px,0.5vw,14px); border-top:1px solid rgba(13,109,140,.14); min-width:0; } @media(max-width:767.98px){.hero__trust{flex-wrap:wrap;gap:16px;}} .hero__trust-logos{ display:flex;align-items:center;flex-wrap:nowrap; gap:clamp(14px,1.4vw,24px);min-width:0;flex-shrink:1; } .hero__trust-logos img{ height:clamp(28px,1.2vw + 16px,36px); width:auto;object-fit:contain;display:block;flex-shrink:0; } .hero__testimonial-group{ display:inline-flex;align-items:center; gap:clamp(10px,0.8vw,16px);flex-shrink:0;margin-left:auto; } .hero__avatar-stack{ display:inline-flex;align-items:center; } .hero__avatar-stack img{ width:36px;height:36px;border-radius:999px; object-fit:cover;background:var(--c-accent-soft); border:2px solid var(--c-white); box-shadow:0 1px 2px rgba(18,27,29,.10); margin-left:-10px;position:relative;z-index:1; } .hero__avatar-stack img:first-child{margin-left:0;} .hero__avatar-stack img:nth-child(1){z-index:5;} .hero__avatar-stack img:nth-child(2){z-index:4;} .hero__avatar-stack img:nth-child(3){z-index:3;} .hero__avatar-stack img:nth-child(4){z-index:2;} .hero__avatar-stack img:nth-child(5){z-index:1;} .hero__testimonial-link{ color:var(--c-primary);font-size:14px;font-weight:var(--fw-sb); display:inline-flex;align-items:center;gap:4px; text-decoration:underline;text-underline-offset:3px; } .hero__testimonial-link:hover{color:var(--c-primary-dark);} /* Hero form card (right column) */ .hero__form-card{ background:var(--c-white); border:1px solid var(--c-ink-200); border-radius:var(--r-lg);padding:clamp(20px,1.5vw + 8px,28px); box-shadow:var(--sh-lg); } .hero__form-card h3{color:var(--c-ink-900);font-size:1.25rem;margin:0 0 4px;font-weight:var(--fw-b);} .hero__form-card .hint{font-size:13px;color:var(--c-ink-500);margin:0 0 var(--sp-5);} .hero__form-card .field{margin-bottom:14px;} .hero__form-card .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;} @media(max-width:480px){.hero__form-card .row{grid-template-columns:1fr;}} .hero__form-card label{ display:block;font-family:var(--font-primary); font-size:12px;font-weight:var(--fw-b);letter-spacing:.08em; text-transform:uppercase;color:var(--c-ink-900); margin-bottom:6px;line-height:1.3; } .hero__form-card label .req{color:#B42318;font-weight:var(--fw-b);} .hero__form-card input,.hero__form-card select{ width:100%;padding:12px 14px;font-size:14px;font-family:inherit; border:1.5px solid var(--c-ink-200);border-radius:10px; background:var(--c-white);color:var(--c-ink-900); transition:border-color var(--t-fast),box-shadow var(--t-fast); } .hero__form-card input::placeholder{color:var(--c-ink-400);} .hero__form-card input:focus,.hero__form-card select:focus{ outline:none;border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(13,109,140,.15); } .hero__form-card select{ appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%234A5763' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer; } .hero__form-card .btn--primary{width:100%;margin-top:4px;padding:15px 20px;min-height:52px;font-size:15.5px;border-radius:10px;} .hero__form-card .trust{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center; margin-top:12px;font-size:11.5px;color:var(--c-ink-500); } .hero__form-card .trust-sub{ text-align:center;margin-top:6px;font-size:11px;color:var(--c-ink-400); letter-spacing:.02em; } /* ========== TRUST BAR ========== */ .trust-bar{background:var(--c-ink-100);padding:16px 0;border-bottom:1px solid var(--c-ink-200);} .trust-bar__row{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,28px);justify-content:center;align-items:center;} .trust-bar__item{ display:inline-flex;align-items:center;gap:6px; font-size:13px;font-weight:var(--fw-sb);color:var(--c-ink-700); } .trust-bar__item::before{content:"✓";color:var(--c-primary);font-weight:var(--fw-b);} /* ========== PROBLEM GRID (V5 STYLE — teal-first, subtle nth-child accents) ========== */ .problem-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.5vw,24px); margin-bottom:clamp(20px,2vw,28px); } @media(max-width:991.98px){.problem-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:575.98px){.problem-grid{grid-template-columns:1fr;}} .problem-card{ background:var(--c-white); border:1px solid var(--c-ink-200); border-top:4px solid transparent; /* per-card color set below */ border-radius:var(--r-md); padding:clamp(18px,1.5vw + 4px,24px); display:flex;flex-direction:column;gap:12px; box-shadow:var(--sh-sm); transition:box-shadow var(--t-fast),transform var(--t-fast); } .problem-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);} /* Inline, colored icon — no tinted background box */ .problem-card__icon{ width:32px;height:32px; display:flex;align-items:center;justify-content:flex-start; margin-bottom:4px; } .problem-card__icon svg{width:30px;height:30px;} .problem-card__stat{ font-family:var(--font-accent); font-size:clamp(2rem,1.3rem + 1.8vw,2.5rem); font-weight:var(--fw-b);line-height:1;letter-spacing:-.02em; } .problem-card__title{ font-size:15px;font-weight:var(--fw-b);color:var(--c-ink-900); line-height:1.35;margin:0; } .problem-card__desc{font-size:13.5px;color:var(--c-ink-500);margin:0;line-height:1.55;} .problem-card__tag{ display:inline-flex;align-items:center; padding:5px 12px;font-size:11.5px;font-weight:var(--fw-sb); border-radius:var(--r-xs);align-self:flex-start;margin-top:auto; } /* Per-card accent: top border + stat color + icon color + tag tint */ /* 1 — Red (Time theft) */ .problem-card:nth-child(1){border-top-color:#E34D4D;} .problem-card:nth-child(1) .problem-card__stat, .problem-card:nth-child(1) .problem-card__icon{color:#E34D4D;} .problem-card:nth-child(1) .problem-card__tag{background:#FEE4E4;color:#B42318;} /* 2 — Orange (Rigid workflow) */ .problem-card:nth-child(2){border-top-color:#E89032;} .problem-card:nth-child(2) .problem-card__stat, .problem-card:nth-child(2) .problem-card__icon{color:#E89032;} .problem-card:nth-child(2) .problem-card__tag{background:#FDECD4;color:#9A5B0F;} /* 3 — Green (No integration) */ .problem-card:nth-child(3){border-top-color:#23A56C;} .problem-card:nth-child(3) .problem-card__stat, .problem-card:nth-child(3) .problem-card__icon{color:#23A56C;} .problem-card:nth-child(3) .problem-card__tag{background:#DDF3E6;color:#0F7A3F;} /* 4 — Green (Zero ownership) */ .problem-card:nth-child(4){border-top-color:#23A56C;} .problem-card:nth-child(4) .problem-card__stat, .problem-card:nth-child(4) .problem-card__icon{color:#23A56C;} .problem-card:nth-child(4) .problem-card__tag{background:#DDF3E6;color:#0F7A3F;} /* 5 — Red (Vendor control) */ .problem-card:nth-child(5){border-top-color:#E34D4D;} .problem-card:nth-child(5) .problem-card__stat, .problem-card:nth-child(5) .problem-card__icon{color:#E34D4D;} .problem-card:nth-child(5) .problem-card__tag{background:#FEE4E4;color:#B42318;} /* 6 — Blue (Useless support) */ .problem-card:nth-child(6){border-top-color:#2B7FB2;} .problem-card:nth-child(6) .problem-card__stat, .problem-card:nth-child(6) .problem-card__icon{color:#2B7FB2;} .problem-card:nth-child(6) .problem-card__tag{background:#E5F1F9;color:#1A5A87;} /* Bridge CTA below problem grid */ .bridge-bar{ background:var(--c-primary-tint); border:1px solid rgba(13,109,140,.16); border-radius:var(--r-md); padding:clamp(18px,1.2vw + 8px,24px) clamp(20px,1.5vw,28px); display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4); justify-content:space-between; } .bridge-bar__text{font-size:15px;color:var(--c-ink-700);margin:0;flex:1;min-width:260px;} .bridge-bar__text strong{color:var(--c-ink-900);} .bridge-bar__ctas{display:flex;gap:10px;flex-wrap:wrap;} /* ========== SOLUTION (accordion + metrics card) ========== */ .solution-grid{ display:grid;grid-template-columns:1fr; gap:clamp(20px,2vw,32px);align-items:start; } @media(min-width:992px){.solution-grid{grid-template-columns:1fr 1fr;gap:clamp(32px,3vw,56px);}} .solution-accordion{display:flex;flex-direction:column;gap:10px;} .solution-acc-item{ background:var(--c-white);border:1px solid var(--c-ink-200); border-radius:var(--r-md);overflow:hidden;transition:box-shadow var(--t-fast); } .solution-acc-item.is-open{box-shadow:var(--sh-md);border-color:var(--c-accent-soft);} .solution-acc-btn{ width:100%;display:flex;align-items:center;gap:var(--sp-3); padding:14px 18px;background:transparent;border:0; text-align:left;font-family:inherit;font-size:14.5px; font-weight:var(--fw-sb);color:var(--c-ink-900);cursor:pointer; } .solution-acc-btn__icon{ width:28px;height:28px;display:grid;place-items:center;flex-shrink:0; background:var(--c-primary-tint);color:var(--c-primary);border-radius:var(--r-sm); } .solution-acc-btn__arrow{margin-left:auto;color:var(--c-ink-400);transition:transform var(--t-normal);} .solution-acc-item.is-open .solution-acc-btn__arrow{transform:rotate(180deg);color:var(--c-primary);} .solution-acc-body{max-height:0;overflow:hidden;transition:max-height var(--t-normal) ease;} .solution-acc-item.is-open .solution-acc-body{max-height:260px;} .solution-acc-body__inner{padding:0 18px 16px 58px;font-size:13.5px;color:var(--c-ink-500);line-height:1.6;} /* Solution live metrics card (V5 style — teal tint bg, NOT dark navy) */ .metrics-card{ background:linear-gradient(160deg,var(--c-primary-tint) 0%,#D7EEF3 100%); border:1px solid rgba(13,109,140,.15); border-radius:var(--r-md);padding:clamp(20px,1.5vw + 8px,28px); position:relative;overflow:hidden; } .metrics-card::before{ content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px; border-radius:50%;background:radial-gradient(circle,rgba(13,109,140,.12) 0%,transparent 70%); pointer-events:none; } .metrics-card__title{ font-family:var(--font-accent);font-size:10.5px;font-weight:var(--fw-b); letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary); display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;position:relative;z-index:1; } .metrics-card__title::before{content:"●";color:var(--c-primary);animation:pulse 1.8s ease-in-out infinite;} @keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}} .metrics-card__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;position:relative;z-index:1;} .metrics-card__stat{ background:var(--c-white);border:1px solid rgba(13,109,140,.10); border-radius:var(--r-sm);padding:14px;box-shadow:var(--sh-sm); } .metrics-card__stat-val{ font-family:var(--font-accent);font-size:1.5rem;font-weight:var(--fw-b); color:var(--c-primary);line-height:1;margin-bottom:4px;letter-spacing:-.01em; } .metrics-card__stat-lbl{font-size:11.5px;color:var(--c-ink-500);line-height:1.3;} .metrics-card__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;} .metrics-card__list li{ display:flex;align-items:center;gap:10px; font-size:13.5px;color:var(--c-ink-700); padding-bottom:10px;border-bottom:1px solid rgba(13,109,140,.10); } .metrics-card__list li:last-child{border-bottom:none;padding-bottom:0;} .metrics-card__list .check{ width:20px;height:20px;display:grid;place-items:center;flex-shrink:0; background:var(--c-primary);border-radius:50%;color:var(--c-white); } .metrics-card__list .value{margin-left:auto;font-weight:var(--fw-b);color:var(--c-primary);font-size:12.5px;} /* ========== RESULTS / TESTIMONIALS (V5 editorial card) ========== */ .results-carousel{position:relative;max-width:none;margin:0;} .results-carousel-track{display:block;} .results-carousel-track .results-card[data-card-idx="2"]{display:none!important;} .results-card{ display:block;background:var(--c-white); border:1px solid var(--c-ink-200); border-top:5px solid var(--c-primary); border-radius:var(--r-lg);box-shadow:var(--sh-md); position:relative;overflow:hidden;padding:0; } .results-card__inner{ display:grid;grid-template-columns:1fr; padding:clamp(20px,1.5vw + 8px,32px);gap:clamp(20px,2vw,32px); } @media(min-width:880px){.results-card__inner{grid-template-columns:2fr 1fr;}} .results-card__content{position:relative;} .results-card::before{ content:"\201C";position:absolute;top:clamp(26px,3vw,50px); left:clamp(14px,1.5vw,28px); font-family:Georgia,"Times New Roman",serif; font-size:clamp(80px,7vw,120px);line-height:.75; color:rgba(13,109,140,.10);font-weight:700; pointer-events:none;user-select:none;z-index:0; } .results-card__tags{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;position:relative;z-index:1; } .results-card__tag{ background:var(--c-primary-tint);color:var(--c-primary); padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:var(--fw-sb); } .results-card__stars{display:flex;gap:3px;color:#F59E0B;margin-bottom:12px;position:relative;z-index:1;} .results-card__stars svg{width:16px;height:16px;} .results-card__quote{ position:relative;z-index:1; font-size:clamp(15px,.7rem + .6vw,17px);line-height:1.7; color:var(--c-ink-900);font-weight:var(--fw-r);font-style:italic;margin:0 0 16px; } .results-card__quote em{font-style:italic;color:var(--c-primary);font-weight:var(--fw-b);} .results-card__author{display:flex;align-items:center;gap:10px;position:relative;z-index:1;} .results-card__avatar{ width:48px;height:48px;border-radius:999px; object-fit:cover; background:var(--c-accent-soft); border:2px solid var(--c-white);box-shadow:var(--sh-sm); flex-shrink:0;display:block; } .results-card__author .name{font-size:14px;font-weight:var(--fw-b);color:var(--c-ink-900);margin:0;line-height:1.3;} .results-card__author .role{font-size:12.5px;color:var(--c-ink-500);margin:0;} .results-card__stats{display:grid;grid-template-columns:1fr;gap:10px;align-content:start;} .results-stat{ background:var(--c-ink-50);border-radius:var(--r-sm);padding:12px 14px; display:flex;flex-direction:column; border-left:3px solid var(--c-primary); } .results-stat__val{ font-family:var(--font-accent);font-size:1.375rem;font-weight:var(--fw-b); color:var(--c-primary);line-height:1;margin-bottom:2px; } .results-stat__lbl{font-size:11.5px;color:var(--c-ink-500);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--fw-sb);} /* Carousel dots */ .results-dots-row{ display:flex;align-items:center;gap:16px;margin-top:16px; justify-content:space-between;flex-wrap:wrap; } .results-dots{display:flex;gap:8px;align-items:center;} .results-dot{ width:8px;height:8px;border-radius:999px; background:var(--c-ink-200);border:0;padding:0;cursor:pointer; transition:all var(--t-fast); } .results-dot.is-active{background:var(--c-primary);width:28px;} .results-more{ color:var(--c-primary);font-size:13px;font-weight:var(--fw-sb); display:inline-flex;align-items:center;gap:4px; } /* Mini testimonials row */ .mini-testis{ display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.5vw,24px); margin-top:clamp(24px,2.5vw,36px); } @media(max-width:991.98px){.mini-testis{grid-template-columns:1fr;}} .mini-testi{ background:var(--c-white);border:1px solid var(--c-ink-200); border-radius:var(--r-md);padding:18px; display:flex;flex-direction:column;gap:8px; } .mini-testi__stars{color:#F59E0B;display:flex;gap:2px;} .mini-testi__stars svg{width:14px;height:14px;} .mini-testi__quote{font-size:13.5px;color:var(--c-ink-700);line-height:1.55;margin:0;} .mini-testi__author{font-size:13px;font-weight:var(--fw-b);color:var(--c-ink-900);margin-top:6px;} .mini-testi__practice{font-size:12px;color:var(--c-ink-500);} /* ========== PRICING TIERS (V5 styled) ========== */ .pricing-eyebrow-pill{ display:inline-flex;align-items:center;gap:8px; background:var(--c-primary-tint);color:var(--c-primary); font-size:12.5px;font-weight:var(--fw-sb); padding:6px 14px;border-radius:999px;margin-bottom:var(--sp-4); border:1px solid rgba(13,109,140,.15); } .pricing-grid{ display:grid;grid-template-columns:1fr;gap:clamp(16px,1.5vw,20px);align-items:stretch; } @media(min-width:880px){.pricing-grid{grid-template-columns:repeat(3,1fr);}} .tier-card{ background:var(--c-white);border:1px solid var(--c-ink-200); border-radius:var(--r-md);padding:clamp(20px,1.5vw + 8px,28px); display:flex;flex-direction:column;position:relative; transition:box-shadow var(--t-fast),border-color var(--t-fast); } .tier-card:hover{box-shadow:var(--sh-md);} .tier-card--featured{ border-color:var(--c-primary);border-width:2px; box-shadow:0 12px 32px rgba(13,109,140,.15); } @media(min-width:880px){.tier-card--featured{transform:translateY(-8px);}} .tier-badge{ position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:var(--c-primary);color:var(--c-white); padding:6px 14px;border-radius:999px; font-size:12px;font-weight:var(--fw-b);letter-spacing:.04em;text-transform:uppercase; white-space:nowrap; } .tier-card__icon{ width:44px;height:44px;border-radius:var(--r-sm); background:var(--c-primary-tint);color:var(--c-primary); display:grid;place-items:center;margin-bottom:14px; } .tier-card__label{ font-family:var(--font-accent);font-size:11.5px;font-weight:var(--fw-b); letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-400);margin-bottom:4px; } .tier-card__name{font-size:1.375rem;font-weight:var(--fw-b);color:var(--c-ink-900);margin:0 0 10px;} .tier-card__desc{font-size:13.5px;color:var(--c-ink-500);line-height:1.55;margin:0 0 18px;} .tier-card__price-lbl{font-family:var(--font-accent);font-size:11.5px;font-weight:var(--fw-b);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-400);margin-bottom:4px;} .tier-card__price{ font-family:var(--font-accent);font-size:clamp(1.5rem,1rem + 1.5vw,2rem); font-weight:var(--fw-b);line-height:1;letter-spacing:-.01em; color:var(--c-primary);margin-bottom:4px; } .tier-card__note{font-size:12.5px;color:var(--c-ink-500);margin-bottom:20px;} .tier-card__features{ list-style:none;padding:0;margin:0 0 24px; display:flex;flex-direction:column;gap:9px;flex:1; } .tier-card__features li{ font-size:13.5px;color:var(--c-ink-700); display:flex;gap:8px;align-items:flex-start;line-height:1.45; } .tier-card__features li svg{width:15px;height:15px;color:var(--c-primary);flex-shrink:0;margin-top:2px;} .tier-card__cta{margin-top:auto;} .pricing-included{ background:var(--c-white);border:1px solid var(--c-ink-200); border-radius:var(--r-md);padding:clamp(14px,1.2vw,18px) clamp(18px,1.5vw,24px); margin-top:clamp(20px,2vw,28px); } .pricing-included strong{font-size:14px;color:var(--c-ink-900);display:block;margin-bottom:6px;} .pricing-included__items{ display:flex;flex-wrap:wrap;gap:8px 24px; font-size:13px;color:var(--c-ink-500); } .pricing-included__items span{display:inline-flex;align-items:center;gap:4px;} .pricing-included__items span::before{content:"✓";color:var(--c-primary);font-weight:var(--fw-b);} .pricing-footnote{ font-size:12.5px;color:var(--c-ink-400);text-align:center; margin-top:16px;font-style:italic; } /* ========== SPECIALTY SWITCHER (V5 pattern) ========== */ .spec-grid{ display:grid;grid-template-columns:1fr;gap:clamp(20px,2vw,32px);align-items:flex-start; } @media(min-width:992px){.spec-grid{grid-template-columns:260px 1fr;}} .spec-list{ background:var(--c-white);border:1px solid var(--c-ink-200); border-radius:var(--r-md);padding:10px; display:flex;flex-direction:column;gap:4px; } @media(max-width:991.98px){ .spec-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;} .spec-list__item{scroll-snap-align:start;flex:0 0 auto;} .spec-list::-webkit-scrollbar{display:none;} } .spec-list__item{ display:flex;align-items:center;gap:8px;justify-content:space-between; padding:10px 14px;background:transparent;border:0; color:var(--c-ink-700);font-family:inherit;font-size:14px;font-weight:var(--fw-sb); border-radius:var(--r-sm);text-align:left;cursor:pointer;white-space:nowrap; transition:background var(--t-fast),color var(--t-fast); } .spec-list__item:hover{background:var(--c-ink-100);} .spec-list__item.is-active{background:var(--c-primary-tint);color:var(--c-primary);} .spec-list__item .count{ font-size:11.5px;font-weight:var(--fw-b);color:var(--c-ink-400); background:var(--c-ink-100);padding:2px 8px;border-radius:999px; } .spec-list__item.is-active .count{background:var(--c-primary);color:var(--c-white);} .spec-detail{ background:var(--c-white);border:1px solid var(--c-ink-200); border-top:4px solid var(--c-primary); border-radius:var(--r-md);padding:clamp(22px,1.5vw + 10px,32px); box-shadow:var(--sh-sm); } .spec-detail__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:10px;flex-wrap:wrap;} .spec-detail__lead{ font-family:var(--font-accent);font-size:11px;font-weight:var(--fw-b); color:var(--c-primary);text-transform:uppercase;letter-spacing:.08em; } .spec-detail__name{font-size:1.375rem;color:var(--c-ink-900);margin:6px 0 0;font-weight:var(--fw-b);} .spec-detail__tag{ background:var(--c-primary);color:var(--c-white); padding:4px 12px;border-radius:999px;font-size:11.5px;font-weight:var(--fw-sb);white-space:nowrap; } .spec-detail__desc{color:var(--c-ink-500);font-size:14px;margin:0 0 20px;max-width:560px;} .spec-detail__cols{ background:var(--c-ink-50);border:1px solid var(--c-ink-200); border-radius:var(--r-md);padding:clamp(16px,1.2vw + 4px,22px); display:grid;grid-template-columns:1fr;gap:clamp(16px,1.5vw,24px);margin-bottom:20px; } @media(min-width:640px){.spec-detail__cols{grid-template-columns:1fr 1fr;}} .spec-detail__col h4{color:var(--c-ink-900);font-size:13px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em;font-weight:var(--fw-b);} .spec-detail__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;} .spec-detail__col li{font-size:13px;color:var(--c-ink-700);display:flex;gap:8px;line-height:1.5;align-items:flex-start;} .spec-detail__col li::before{content:"✓";color:var(--c-primary);font-weight:var(--fw-b);flex-shrink:0;} .spec-detail__ctas{display:flex;gap:10px;flex-wrap:wrap;} .spec-footer{display:flex;justify-content:center;margin-top:clamp(20px,2vw,28px);} .spec-footer-pill{ display:inline-flex;align-items:center;gap:6px; background:var(--c-white);border:1px solid var(--c-ink-200); padding:10px 18px;border-radius:999px; font-size:13.5px;color:var(--c-ink-700);font-weight:var(--fw-sb); } .spec-footer-pill:hover{border-color:var(--c-primary);color:var(--c-primary);} /* ========== PROCESS TIMELINE (V5 — neutral bg, NOT dark) ========== */ .process-timeline{ display:grid;grid-template-columns:1fr;gap:clamp(20px,2vw,28px); margin-bottom:clamp(20px,2vw,28px);position:relative; } @media(min-width:480px){.process-timeline{grid-template-columns:repeat(2,1fr);gap:24px;}} @media(min-width:768px){.process-timeline{grid-template-columns:repeat(3,1fr);gap:24px;}} @media(min-width:1100px){.process-timeline{grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.2vw,20px);}} .process-step{ display:flex;flex-direction:column;align-items:center;text-align:center; position:relative;padding:0 8px; } .process-step__duration{ font-family:var(--font-accent);font-size:11px;font-weight:var(--fw-b); color:var(--c-primary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px; } .process-step__circle{ width:44px;height:44px;border-radius:999px; background:var(--c-primary);color:var(--c-white); display:grid;place-items:center; font-family:var(--font-accent);font-size:1.125rem;font-weight:var(--fw-b); margin-bottom:12px;box-shadow:0 0 0 4px rgba(13,109,140,.15); } .process-step__title{font-size:15px;font-weight:var(--fw-b);color:var(--c-ink-900);margin:0 0 6px;} .process-step__desc{font-size:12.5px;color:var(--c-ink-500);line-height:1.5;margin:0 0 12px;} .process-step__details{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;} .process-step__details li{font-size:11.5px;color:var(--c-ink-400);line-height:1.4;} .process-step:not(:last-child)::after{ content:"";position:absolute;top:44px;left:calc(50% + 22px); width:calc(100% - 44px);height:1px; background:rgba(13,109,140,.30); display:none; } @media(min-width:1100px){.process-step:not(:last-child)::after{display:block;}} @media(max-width:479.98px){ .process-step:not(:last-child)::after{ content:"↓";display:block;position:static;width:auto;height:auto;background:transparent; text-align:center;color:var(--c-primary);font-size:20px;font-weight:700; margin:var(--sp-3) 0 var(--sp-4);opacity:.6; } } .process-cta-row{display:flex;justify-content:center;} /* ========== INTEGRATIONS (V5 EXACT) ========== */ .integ-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,2vw,28px);} .integ-tabs button{ background:var(--c-white);border:1px solid var(--c-ink-200); padding:10px 18px;border-radius:999px; font-family:inherit;font-size:14px;font-weight:var(--fw-sb); color:var(--c-ink-700);cursor:pointer;transition:all var(--t-fast); } .integ-tabs button:hover{border-color:var(--c-primary);color:var(--c-primary);} .integ-tabs button.is-active{background:var(--c-primary);color:var(--c-white);border-color:var(--c-primary);} /* Integration grids — tabbed; only .is-active is shown */ .integ-grid{display:none;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1vw + 4px,18px);} .integ-grid.is-active{display:grid;} @media(max-width:991.98px){.integ-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:575.98px){.integ-grid{grid-template-columns:repeat(2,1fr);}} .integ-tile{ background:var(--c-white);border:1px solid var(--c-ink-200); border-radius:var(--r-md);padding:24px 18px 20px; display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; transition:all var(--t-fast); min-height:170px; } .integ-tile:hover{border-color:var(--c-primary);box-shadow:var(--sh-sm);} .integ-tile__icon{ width:64px;height:64px;border-radius:var(--r-sm); background:var(--c-primary-tint);color:var(--c-primary); display:grid;place-items:center;margin-bottom:6px; } .integ-tile__icon svg{width:28px;height:28px;} /* Brand-logo variant — larger container so the PNG reads at a glance */ .integ-tile__icon--img{ background:var(--c-white); width:clamp(96px,8vw + 40px,128px); height:64px; padding:8px 12px; border:1px solid var(--c-ink-100); } .integ-tile__icon--img img{ width:100%;height:100%; object-fit:contain;display:block; } .integ-tile__name{font-size:13px;font-weight:var(--fw-b);color:var(--c-ink-900);line-height:1.3;margin:0;} .integ-tile__cat{font-size:11.5px;color:var(--c-ink-500);margin:0;} .integ-tile--more{background:var(--c-primary-tint);border-color:var(--c-primary-tint);} .integ-tile--more .integ-tile__name{color:var(--c-primary);} .integ-tile--more .integ-tile__icon{background:var(--c-white);} .integ-foot-pill{ display:flex;align-items:center;justify-content:center;gap:6px; background:var(--c-primary-tint);color:var(--c-primary); padding:12px 18px;border-radius:var(--r-pill); font-size:13px;font-weight:var(--fw-sb); margin-top:clamp(16px,1.5vw,22px);text-align:center;max-width:800px;margin-inline:auto; } /* ========== COMPLIANCE (V5 exact) ========== */ .comp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.2vw + 4px,20px);} @media(max-width:991.98px){.comp-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:575.98px){.comp-grid{grid-template-columns:1fr;}} .comp-card{ background:var(--c-white);border:1px solid var(--c-ink-200); border-radius:var(--r-md);padding:18px; display:flex;flex-direction:column;gap:10px; transition:box-shadow var(--t-fast); } .comp-card:hover{box-shadow:var(--sh-sm);} .comp-card__icon{ width:40px;height:40px;border-radius:var(--r-sm); background:var(--c-primary-tint);color:var(--c-primary); display:grid;place-items:center; } .comp-card__icon svg{width:20px;height:20px;} /* Real badge image variant — larger tile, no tinted bg */ .comp-card__icon--img{ width:56px;height:56px;padding:6px; background:var(--c-white);border:1px solid var(--c-ink-100); } .comp-card__icon--img img{ max-width:100%;max-height:100%; object-fit:contain;display:block; } .comp-card__name{font-size:14.5px;font-weight:var(--fw-b);color:var(--c-ink-900);margin:0;line-height:1.3;} .comp-card__desc{font-size:12.5px;color:var(--c-ink-500);margin:0;line-height:1.55;} .comp-cta{ background:var(--c-primary-tint);border:1px solid rgba(13,109,140,.16); border-radius:var(--r-md);padding:clamp(18px,1.5vw + 6px,26px); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4); flex-wrap:wrap;margin-top:clamp(20px,2vw,28px); } .comp-cta__text h4{margin:0 0 4px;color:var(--c-ink-900);} .comp-cta__text p{margin:0;font-size:13.5px;color:var(--c-ink-700);} /* ========== HEALTHCARE PLATFORM DIAGRAM (Speed Advantage) ========== */ .hcp{background:var(--c-white);border:1px solid var(--c-ink-200);border-radius:var(--r-lg);padding:0;box-shadow:var(--sh-md);width:100%;margin:clamp(24px,2vw,36px) 0 0;overflow:hidden;} .hcp-header{background:linear-gradient(180deg,#3a587f,#2e4a6c);color:#fff;text-align:center;padding:14px 20px;font-family:var(--font-accent);font-size:15px;font-weight:var(--fw-b);letter-spacing:.18em;text-transform:uppercase;} /* Wrapper that becomes a horizontal-scroll viewport on tablet/mobile. At desktop ≥1200px, display:contents makes the wrapper invisible so the grid lays out as before. */ .hcp-scroll{display:contents;} .hcp-grid{display:grid;grid-template-columns:1fr 1fr 2fr 2fr 2fr 2fr;gap:8px;padding:12px;background:#f3f6f9;align-items:start;} .hcp-col{display:flex;flex-direction:column;gap:8px;min-width:0;} .hcp-col--double{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;align-items:start;} .hcp-col--double > .hcp-col__head{grid-column:1 / -1;} .hcp-col__sub{display:flex;flex-direction:column;gap:8px;min-width:0;} /* Tablet + mobile: keep the full 6-column diagram, but make the wrapper horizontally scrollable. The header / infrastructure / API / partner bands stay the visible width of the parent. */ @media(max-width:1199.98px){ .hcp-scroll{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;border-top:1px solid var(--c-ink-200);border-bottom:1px solid var(--c-ink-200);background:#f3f6f9;} .hcp-grid{min-width:1180px;border:0;} .hcp-col{scroll-snap-align:start;} /* Visible scrollbar so users know the grid scrolls */ .hcp-scroll::-webkit-scrollbar{height:8px;} .hcp-scroll::-webkit-scrollbar-thumb{background:var(--c-primary);border-radius:4px;} .hcp-scroll::-webkit-scrollbar-track{background:rgba(13,109,140,.08);} /* Subtle right-edge fade hints there's more to scroll */ .hcp-scroll{position:relative;} .hcp-scroll::after{content:"";position:sticky;right:0;top:0;float:right;width:32px;height:100%;background:linear-gradient(90deg,rgba(243,246,249,0),rgba(243,246,249,1));pointer-events:none;} } .hcp-col__head{color:#fff;text-align:center;padding:14px 10px;font-family:var(--font-accent);font-size:11.5px;font-weight:var(--fw-b);letter-spacing:.08em;text-transform:uppercase;line-height:1.25;border-radius:6px 6px 0 0;} .hcp-col--blue1 .hcp-col__head{background:#3D5A78;} .hcp-col--blue2 .hcp-col__head{background:#4A6B89;} .hcp-col--green1 .hcp-col__head{background:#3D7553;} .hcp-col--green2 .hcp-col__head{background:#2E5F42;} .hcp-col--brown .hcp-col__head{background:#A56B3D;} .hcp-col--olive .hcp-col__head{background:#7A7A2F;} .hcp-cell{background:#fff;border:1px solid var(--c-ink-200);border-radius:6px;padding:0;display:flex;flex-direction:column;overflow:hidden;} .hcp-cell__head{font-family:var(--font-accent);font-size:10.5px;font-weight:var(--fw-b);letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:8px 10px;line-height:1.25;text-align:center;} .hcp-col--blue1 .hcp-cell__head{background:#5B7B9A;} .hcp-col--blue2 .hcp-cell__head{background:#6B8AA8;} .hcp-col--green1 .hcp-cell__head{background:#4A8966;} .hcp-col--green2 .hcp-cell__head{background:#3A7058;} .hcp-col--brown .hcp-cell__head{background:#B8804E;} .hcp-col--olive .hcp-cell__head{background:#8C8C3A;} .hcp-col--blue1 .hcp-cell{background:#EAEFF5;} .hcp-col--blue2 .hcp-cell{background:#EAEFF5;} .hcp-col--green1 .hcp-cell{background:#E6F1E8;} .hcp-col--green2 .hcp-cell{background:#E1ECDD;} .hcp-col--brown .hcp-cell{background:#F6EBDB;} .hcp-col--olive .hcp-cell{background:#EDEDD5;} .hcp-cell ul{list-style:none;padding:8px 10px;margin:0;display:flex;flex-direction:column;gap:3px;} .hcp-cell li{font-size:10.5px;line-height:1.4;color:var(--c-ink-700);position:relative;padding-left:9px;} .hcp-cell li::before{content:"•";position:absolute;left:0;color:var(--c-ink-500);} /* HCP — at tablet/mobile the grid scrolls horizontally (full desktop sizing inside), so the static bands (header / infra / API / partners) just need slightly tighter padding */ @media(max-width:1199.98px){ .hcp-header{padding:10px 16px;font-size:13px;letter-spacing:.14em;} .hcp-infra{padding:10px 14px;font-size:11.5px;letter-spacing:.12em;} .hcp-api{padding:14px 14px 10px;font-size:11.5px;letter-spacing:.14em;} .hcp-partners{padding:0 8px 12px;gap:8px;} .hcp-partner__head{padding:8px 10px;font-size:10px;} .hcp-partner__logos{padding:10px 8px;gap:8px;} } .hcp-infra,.hcp-api{display:block;margin:0 12px;} .hcp-infra{background:linear-gradient(180deg,#3a587f,#2e4a6c);color:#fff;text-align:center;padding:12px 16px;font-family:var(--font-accent);font-size:13px;font-weight:var(--fw-b);letter-spacing:.14em;text-transform:uppercase;border-radius:0;margin-top:0;} .hcp-api{background:transparent;color:var(--c-primary-dark);text-align:center;padding:18px 16px 14px;font-family:var(--font-accent);font-size:13px;font-weight:var(--fw-b);letter-spacing:.18em;text-transform:uppercase;} /* Bottom partner-logo row */ .hcp-partners{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:0 12px 16px;background:#f3f6f9;} @media(max-width:991px){.hcp-partners{grid-template-columns:repeat(2,1fr);}} @media(max-width:479px){.hcp-partners{grid-template-columns:1fr;}} .hcp-partner{background:var(--c-white);border:1px solid var(--c-ink-200);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;} .hcp-partner__head{background:#2e4a6c;color:#fff;text-align:center;padding:10px 12px;font-family:var(--font-accent);font-size:11px;font-weight:var(--fw-b);letter-spacing:.1em;text-transform:uppercase;} .hcp-partner__logos{padding:14px 10px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:center;justify-items:center;flex:1;} .hcp-partner__logos img{max-width:100%;max-height:36px;width:auto;object-fit:contain;} .hcp-partner__logo-text{font-family:var(--font-accent);font-size:11px;font-weight:var(--fw-b);color:var(--c-ink-700);text-align:center;line-height:1.2;padding:6px 4px;} .hcp-cta-row{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.5vw,20px);margin-top:clamp(24px,2vw,32px);flex-wrap:wrap;} .hcp-cta-row p{font-size:15px;color:var(--c-ink-700);margin:0;font-weight:var(--fw-sb);} /* ========== FAQ (V5 exact) ========== */ .faq-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,2.5vw,40px);align-items:start;} @media(min-width:992px){.faq-grid{grid-template-columns:300px 1fr;}} .faq-aside{position:static;top:auto;} @media(min-width:992px){.faq-aside{position:sticky;top:100px;}} .faq-aside h3{font-size:1.25rem;margin-bottom:12px;color:var(--c-ink-900);} .faq-aside p{font-size:14px;color:var(--c-ink-500);margin-bottom:16px;} .faq-aside__contact{display:flex;flex-direction:column;gap:4px;margin-top:18px;font-size:13.5px;color:var(--c-ink-700);} .faq-aside__contact a{color:var(--c-primary);font-weight:var(--fw-sb);} .faq-list{display:flex;flex-direction:column;gap:10px;} .faq-item{ background:var(--c-white);border:1px solid var(--c-ink-200); border-radius:var(--r-md);overflow:hidden;transition:border-color var(--t-fast); } .faq-item.is-open{border-color:var(--c-primary);} .faq-btn{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); padding:16px 20px;background:transparent;border:0;text-align:left; font-family:inherit;font-size:14.5px;font-weight:var(--fw-sb);color:var(--c-ink-900);cursor:pointer; } .faq-item.is-open .faq-btn{background:var(--c-primary-tint);color:var(--c-primary);} .faq-btn__arrow{flex-shrink:0;color:var(--c-ink-400);transition:transform var(--t-normal);} .faq-item.is-open .faq-btn__arrow{transform:rotate(180deg);color:var(--c-primary);} .faq-body{max-height:0;overflow:hidden;transition:max-height var(--t-normal) ease;} .faq-item.is-open .faq-body{max-height:400px;} .faq-body__inner{padding:0 20px 18px;font-size:13.5px;color:var(--c-ink-500);line-height:1.65;} /* ========== FINAL CTA (V5 — teal tint bg, NOT dark navy) ========== */ .final-cta-section{ background:linear-gradient(160deg,var(--c-primary-tint) 0%,#D7EEF3 100%); padding:clamp(48px,4vw + 16px,80px) 0;text-align:center; border-top:1px solid rgba(13,109,140,.18); } .final-cta__chips{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:var(--sp-5);} .final-cta__chip{ font-family:var(--font-accent);font-size:11px;font-weight:var(--fw-b); letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary); padding:5px 14px;background:var(--c-white); border:1px solid rgba(13,109,140,.25);border-radius:999px; } .final-cta-section h2{color:var(--c-ink-900);font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);margin-bottom:var(--sp-4);} .final-cta-section h2 span{color:var(--c-primary);} .final-cta-section p{max-width:680px;margin:0 auto var(--sp-6);font-size:var(--fs-body-lg);color:var(--c-ink-700);} .final-cta__btns{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:var(--sp-5);} .final-cta__checks{ display:flex;flex-wrap:wrap;gap:16px;justify-content:center; font-size:12.5px;color:var(--c-ink-700); } .final-cta__checks span{display:inline-flex;align-items:center;gap:4px;} .final-cta__checks span::before{content:"✓";color:var(--c-primary);} /* ========== FOOTER (V5) ========== */ .site-footer{ background:var(--c-ink-50);color:var(--c-ink-500); padding:clamp(32px,3vw,48px) 0; border-top:1px solid var(--c-ink-200); } .footer-grid{ display:grid;grid-template-columns:1fr;gap:var(--sp-4); align-items:flex-start;justify-content:space-between; } @media(min-width:768px){.footer-grid{grid-template-columns:1fr auto;}} .footer__brand{font-family:var(--font-accent);font-weight:var(--fw-b);color:var(--c-ink-900);font-size:15px;margin:0 0 6px;} .footer__addr,.footer__contact,.footer__copy{font-size:12.5px;line-height:1.6;margin:0;color:var(--c-ink-500);} .footer__contact a{color:var(--c-primary);} .footer__links{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;} .footer__links a{color:var(--c-ink-700);} .footer__links a:hover{color:var(--c-primary);} /* ========== STICKY BOTTOM CTA BAR (V5 light style) ========== */ .sticky-cta{ position:fixed;bottom:0;left:0;right:0;z-index:90; background:var(--c-white);color:var(--c-ink-900); border-top:1px solid var(--c-ink-200); padding:10px 0;box-shadow:0 -6px 20px rgba(18,27,29,.08); } .sticky-cta__row{display:flex;align-items:center;gap:var(--sp-4);justify-content:space-between;flex-wrap:wrap;} .sticky-cta__text{font-size:13.5px;color:var(--c-ink-700);margin:0;flex:1;min-width:240px;} .sticky-cta__text strong{color:var(--c-ink-900);} .sticky-cta__btns{display:flex;gap:8px;flex-wrap:wrap;} .sticky-cta__btns .btn{padding:10px 18px;min-height:38px;font-size:13px;} @media(max-width:575.98px){ .sticky-cta__text{display:none;} .sticky-cta__btns{width:100%;justify-content:stretch;} .sticky-cta__btns .btn{flex:1;} } /* ========== MODALS (V5) ========== */ .popup-overlay{ display:none;position:fixed;inset:0;z-index:200; background:rgba(18,27,29,.55);backdrop-filter:blur(3px); align-items:center;justify-content:center;padding:var(--sp-4);overflow-y:auto; } .popup-overlay.is-open{display:flex;} .popup-content{ background:var(--c-white);border-radius:var(--r-lg); width:100%;max-width:640px;max-height:90vh;overflow-y:auto; position:relative;box-shadow:var(--sh-xl); } .popup-close{ position:absolute;top:14px;right:14px; width:32px;height:32px;border-radius:50%; background:rgba(0,0,0,.08);border:0;color:var(--c-ink-700); display:grid;place-items:center;cursor:pointer;font-size:18px;line-height:1;z-index:2; transition:background var(--t-fast); } .popup-close:hover{background:rgba(0,0,0,.15);} /* Lead modal (V5 spec) */ .lead-modal{max-width:540px;} .lead-modal__header{ background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark)); color:var(--c-white);padding:22px 28px 18px; border-radius:var(--r-lg) var(--r-lg) 0 0; } .lead-modal__header h3{color:var(--c-white);margin:0 0 4px;font-size:1.25rem;} .lead-modal__header p{color:rgba(255,255,255,.85);margin:0;font-size:13.5px;} .lead-modal__body{padding:24px 28px;} @media(max-width:575.98px){.lead-modal__body{padding:20px;}} .lead-modal__body .field{margin-bottom:18px;} .lead-modal__body label{ display:block;font-family:var(--font-primary); font-size:12.5px;font-weight:var(--fw-b);letter-spacing:.08em; text-transform:uppercase;color:var(--c-ink-900); margin-bottom:8px;line-height:1.3; } .lead-modal__body label .req{color:#B42318;font-weight:var(--fw-b);} .lead-modal__body label .opt{ color:var(--c-ink-400);font-weight:var(--fw-r); text-transform:none;letter-spacing:0;margin-left:4px;font-size:13px; } .lead-modal__body input[type="text"], .lead-modal__body input[type="email"], .lead-modal__body input[type="tel"]{ width:100%;padding:14px 16px; border:1.5px solid var(--c-ink-200);border-radius:10px; font-size:15px;font-family:inherit;color:var(--c-ink-900);background:var(--c-white); transition:border-color var(--t-fast),box-shadow var(--t-fast); } .lead-modal__body textarea{ width:100%;padding:14px 16px; border:1.5px solid var(--c-ink-200);border-radius:10px; font-size:15px;font-family:inherit;line-height:1.5; resize:vertical;min-height:110px;color:var(--c-ink-900);background:var(--c-white); transition:border-color var(--t-fast),box-shadow var(--t-fast); } .lead-modal__body input:focus,.lead-modal__body textarea:focus{ outline:none;border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(13,109,140,.15); } .lead-modal__body input::placeholder,.lead-modal__body textarea::placeholder{color:var(--c-ink-400);} .lead-modal__error{ display:none;padding:10px 14px;background:#FEE4E2;color:#B42318; border-radius:var(--r-sm);font-size:13.5px;margin-bottom:12px; } .lead-modal__body button[type="submit"]{ width:100%;padding:15px 20px;min-height:52px;font-size:16px;font-weight:var(--fw-sb); border-radius:10px;background:var(--c-primary);color:var(--c-white);border:0;cursor:pointer; transition:background var(--t-fast); } .lead-modal__body button[type="submit"]:hover{background:var(--c-primary-hover);} .lead-modal__body button[type="submit"]:disabled{background:var(--c-ink-200);color:var(--c-ink-500);cursor:not-allowed;} .lead-modal__trust{ display:flex;justify-content:center;align-items:center;flex-wrap:wrap; gap:10px;margin-top:14px;font-size:12.5px;color:var(--c-ink-500); } .lead-modal__success{padding:clamp(32px,3vw,44px) clamp(20px,2vw,28px);text-align:center;} .lead-modal__success-icon{ width:64px;height:64px;border-radius:999px;background:var(--c-primary);color:var(--c-white); display:inline-flex;align-items:center;justify-content:center;font-size:36px;line-height:1;margin-bottom:var(--sp-3); } .lead-modal__success h4{font-size:var(--fs-h3);color:var(--c-ink-900);margin:0 0 var(--sp-2);} .lead-modal__success p{color:var(--c-ink-500);margin:0 0 var(--sp-2);} .lead-modal__success strong{color:var(--c-primary);} /* Calendly modal */ .calendly-modal{max-width:760px;} .calendly-iframe{width:100%;min-height:600px;border:0;border-radius:var(--r-lg);display:block;} /* ========== ACCESSIBILITY ========== */ .skip-link{position:absolute;left:-9999px;} .skip-link:focus{ left:12px;top:12px;background:var(--c-white);color:var(--c-primary); padding:10px 14px;border-radius:var(--r-sm);z-index:1000; } /* Small-phone polish */ @media(max-width:575.98px){ .hero h1{font-size:1.875rem;} h2{font-size:1.5rem;} .bridge-bar{flex-direction:column;align-items:flex-start;} .bridge-bar__ctas{width:100%;} .bridge-bar__ctas .btn{flex:1;} } /* ===== ADDED FROM V5: Features + ROI Calculator ===== */ /* ========== FEATURE TABS (Specialty EHR Features) ========== */ .tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);border-bottom:1px solid var(--c-ink-200);margin-bottom:var(--sp-6);} .tabs button{background:transparent;border:0;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-body);font-weight:var(--fw-m);color:var(--c-ink-500);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t-fast),border-color var(--t-fast);cursor:pointer;white-space:nowrap;} .tabs button:hover{color:var(--c-primary);} .tabs button.is-active{color:var(--c-primary);font-weight:var(--fw-sb);border-bottom-color:var(--c-primary);} /* Horizontal scroll on tablet/mobile when tabs overflow */ @media(max-width:1199.98px){ .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-snap-type:x proximity;padding-bottom:2px;} .tabs button{flex:0 0 auto;scroll-snap-align:start;} .tabs::-webkit-scrollbar{height:6px;} .tabs::-webkit-scrollbar-thumb{background:var(--c-ink-200);border-radius:3px;} .tabs::-webkit-scrollbar-thumb:hover{background:var(--c-primary);} } .feature-grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr;align-items:start;} @media(min-width:992px){.feature-grid{grid-template-columns:1fr 1fr;gap:var(--sp-8);}} .feature-card h3{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-h3);margin-bottom:var(--sp-3);} /* Let the icon-chip use the default 88px size inside feature-card h3 now (no shrink) */ .feature-card p{margin-bottom:var(--sp-5);} .accordion{border-top:1px solid var(--c-ink-200);margin-top:var(--sp-5);} .accordion-item{border-bottom:1px solid var(--c-ink-200);} .accordion-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-5) 0;background:transparent;border:0;text-align:left;font-size:var(--fs-body);font-weight:var(--fw-sb);color:var(--c-ink-900);} .accordion-btn svg{flex-shrink:0;color:var(--c-primary);transition:transform var(--t-normal);} .accordion-item.is-open .accordion-btn svg{transform:rotate(180deg);} .accordion-body{max-height:0;overflow:hidden;transition:max-height var(--t-normal) ease;} .accordion-item.is-open .accordion-body{max-height:300px;} .accordion-body__inner{padding:0 0 var(--sp-5);font-size:var(--fs-body);color:var(--c-ink-500);line-height:var(--lh-normal);} .feature-image{width:100%;border-radius:var(--r-md);display:block;object-fit:cover;} img.feature-image{background:transparent;border:0;} div.feature-image{background:var(--c-ink-50);border:1px solid var(--c-ink-200);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--c-ink-400);font-size:var(--fs-small);} /* ========== ROI CALCULATOR ========== */ .roi{position:relative;overflow:hidden;padding:clamp(32px,2.5vw + 16px,72px) 0;background:#EDF6FB;background-image:linear-gradient(180deg,#E6F3F9 0%,#F5FBFD 100%);} .roi::before{content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(13,109,140,.14) 0%,transparent 65%);pointer-events:none;} .roi::after{content:"";position:absolute;bottom:-150px;left:-150px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(70,149,168,.12) 0%,transparent 65%);pointer-events:none;} .roi .container{position:relative;z-index:1;} .roi__grid{display:grid;gap:var(--sp-6);grid-template-columns:1fr;} @media(min-width:992px){.roi__grid{grid-template-columns:1fr 1.05fr;gap:var(--sp-7);align-items:stretch;}} .roi__visual{display:flex;flex-direction:column;gap:var(--sp-4);background:transparent;box-shadow:none;padding:0;border-radius:0;min-height:0;position:relative;} .roi__image{width:100%;height:auto;max-height:520px;object-fit:contain;display:block;border-radius:var(--r-md);} .roi__trust{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3) var(--sp-5);padding:var(--sp-4) var(--sp-5);background:rgba(255,255,255,.75);border:1px solid rgba(13,109,140,.15);border-radius:var(--r-pill);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:var(--sh-sm);} .roi__trust span{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);font-weight:var(--fw-sb);color:var(--c-ink-700);} .roi__trust svg{color:var(--c-primary);flex-shrink:0;} .roi__form{background:var(--c-white);border:1px solid var(--c-ink-200);border-radius:var(--r-md);padding:var(--sp-7);box-shadow:var(--sh-lg);display:flex;flex-direction:column;} .roi__step-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-4);} .roi__step-head h3{font-size:var(--fs-body);font-weight:var(--fw-sb);color:var(--c-ink-900);margin:0;} .roi__step-head .pct{font-size:var(--fs-small);font-weight:var(--fw-sb);color:var(--c-primary);} .roi__progress{height:6px;background:var(--c-ink-100);border-radius:999px;overflow:hidden;margin-bottom:var(--sp-6);} .roi__progress .bar{height:100%;background:var(--c-primary);width:33%;} .roi__form h4{font-size:var(--fs-h3);color:var(--c-ink-900);margin-bottom:var(--sp-2);} .roi__form-sub{font-size:var(--fs-body);color:var(--c-ink-500);margin-bottom:var(--sp-6);} .roi__fields{display:grid;gap:var(--sp-5);grid-template-columns:1fr;} @media(min-width:768px){.roi__fields{grid-template-columns:1fr 1fr;}} .field label{display:block;font-size:var(--fs-small);font-weight:var(--fw-sb);color:var(--c-ink-700);margin-bottom:var(--sp-2);letter-spacing:.04em;text-transform:uppercase;} .field select,.field input[type="number"],.field input[type="text"],.field input[type="email"],.field input[type="tel"]{width:100%;height:48px;padding:0 var(--sp-4);font-family:inherit;font-size:var(--fs-body);color:var(--c-ink-900);background:var(--c-white);border:1px solid var(--c-ink-200);border-radius:var(--r-sm);transition:border-color var(--t-fast),box-shadow var(--t-fast);} /* Chevron ONLY on