:root { --navy:#071d4d; --teal:#07978f; --teal-dark:#08766f; --aqua:#e8f7f7; --blue-soft:#f2f8fc; --ink:#102044; --muted:#526078; --line:#d7e2e9; --shadow:0 8px 24px rgba(7,29,77,.10); --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:#fff; color:var(--ink); font-family:var(--sans); line-height:1.45; -webkit-font-smoothing:antialiased; }
a { color:inherit; } img { max-width:100%; }
.wrap { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.site-header { border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); }
.header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-lockup { display:inline-flex; align-items:center; gap:12px; color:var(--navy); text-decoration:none; white-space:nowrap; }
.brand-tile { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none; background:var(--navy); }
.brand-tile svg { width:23px; height:20px; display:block; }
.brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.brand-name { font-size:1.22rem; font-weight:850; letter-spacing:-.025em; }
.brand-name .k { color:var(--teal); }
.brand-name sup { font-size:.42em; margin-left:.12em; vertical-align:super; }
.brand-descriptor { margin-top:5px; color:var(--muted); font-size:.64rem; font-weight:750; letter-spacing:.12em; }
:focus-visible { outline:3px solid #1bb5aa; outline-offset:4px; border-radius:4px; }
.hero { padding:34px 0 20px; text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:6px 19px; border-radius:999px; background:#e2f3f3; color:#087079; font-size:.9rem; font-weight:850; letter-spacing:.02em; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:8px; color:var(--navy); font-size:clamp(2.55rem,5vw,4.3rem); line-height:1.04; letter-spacing:-.052em; }
.hero-copy { margin-bottom:22px; color:var(--ink); font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.5; }
.fit-card { display:grid; grid-template-columns:120px 1fr; max-width:920px; margin:0 auto; padding:20px 28px; border:1px solid #a9d7db; border-radius:14px; background:linear-gradient(110deg,#f7fcfc,#f4f9fb); text-align:left; }
.fit-icon { display:grid; place-items:center; border-right:1px solid #c6dce2; color:var(--teal-dark); }
.fit-icon svg { width:70px; height:70px; }
.fit-copy { padding-left:26px; }
.fit-card h2 { margin-bottom:5px; color:var(--navy); font-size:1.25rem; line-height:1.25; }
.fit-card p { margin:0; }
.scenarios { display:grid; gap:18px; padding:0 0 22px; }
.scenario { overflow:hidden; border:1px solid #cdd9e1; border-radius:13px; background:#fff; box-shadow:var(--shadow); }
.scenario > h2 { margin:0; padding:14px 22px 10px; border-bottom:1px solid var(--line); font-size:1.35rem; line-height:1.2; }
.scenario-grid { display:grid; grid-template-columns:230px minmax(420px,1.55fr) minmax(250px,.95fr); }
.patient-panel,.matches-panel,.why-panel { min-width:0; padding:14px 18px; }
.matches-panel,.why-panel { border-left:1px solid var(--line); }
.panel-title { margin:0 0 12px; color:var(--navy); font-size:.98rem; text-align:center; }
.patient-quote { position:relative; z-index:1; margin:0; padding:14px 16px; border:1px solid #d4e0e7; border-radius:15px; background:#fff; font-size:1rem; box-shadow:0 5px 12px rgba(7,29,77,.07); }
.patient-quote::after { content:""; position:absolute; left:28px; bottom:-13px; width:24px; height:24px; border-right:1px solid #d4e0e7; border-bottom:1px solid #d4e0e7; background:#fff; transform:skewY(-28deg) rotate(45deg); }
.patient-photo { width:132px; height:132px; margin:5px auto 0; border-radius:50%; display:block; object-fit:cover; background:var(--blue-soft); }
.match-list { margin:0; padding:0; list-style:none; }
.match { display:grid; grid-template-columns:34px 78px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; }
.match + .match { border-top:1px solid var(--line); }
.rank { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:#fff; font-size:.95rem; font-weight:850; }
.match:first-child .rank { background:var(--teal); }
.dentist-photo { width:70px; height:70px; border-radius:50%; display:block; object-fit:cover; background:var(--blue-soft); }
.dentist-copy { min-width:0; }
.dentist-name { display:block; color:var(--navy); font-size:1rem; font-weight:850; line-height:1.2; }
.specialty { display:block; color:var(--teal-dark); font-size:.87rem; font-weight:750; }
.match-reason { display:block; margin-top:2px; color:var(--ink); font-size:.78rem; line-height:1.25; }
.best-fit { display:inline-block; padding:2px 6px; border-radius:4px; background:#d4f1ed; color:#075d59; font-weight:800; }
.distance { align-self:start; white-space:nowrap; color:var(--ink); font-size:.82rem; }
.why-list { display:grid; gap:20px; margin:0; padding:0; list-style:none; }
.why-list li { display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:start; font-size:.9rem; }
.why-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--aqua); color:var(--teal-dark); font-size:1.25rem; font-weight:900; }
.why-list strong { color:var(--navy); }
.scenario-note { display:flex; gap:12px; align-items:center; margin:0 14px 12px; padding:9px 15px; border:1px solid #b8d8e5; border-radius:9px; background:linear-gradient(100deg,#f3f9fc,#f7fbfd); font-size:.88rem; }
.note-icon { width:29px; height:29px; flex:none; border:2px solid #08778b; border-radius:50%; display:grid; place-items:center; color:#08778b; font-weight:900; }
.journey-strip { padding:20px 24px; border:1px solid var(--line); border-radius:13px; background:var(--surface-raised); box-shadow:var(--shadow); }
.journey-strip h2 { margin:0 0 14px; color:var(--navy); font-size:1.2rem; text-align:center; }
.journey-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin:0; padding:0; list-style:none; }
.journey-steps li { position:relative; display:grid; justify-items:center; gap:7px; color:var(--text-secondary); font-size:.88rem; font-weight:750; text-align:center; }
.journey-steps li:not(:last-child)::after { content:"→"; position:absolute; top:13px; right:-21px; color:var(--interactive); font-size:1.25rem; }
.journey-icon { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--surface-inset); color:var(--interactive); font-weight:900; }
.demo-support { margin:0; color:var(--text-link); font-size:.9rem; font-weight:750; text-align:center; }
.demo-disclaimer { margin:-4px 0 0; color:var(--text-help); font-size:.75rem; text-align:center; }
.final-cta { padding:0 0 34px; }
.cta-panel { display:grid; grid-template-columns:220px 1fr; align-items:center; min-height:180px; padding:26px 42px; border-radius:16px; color:#fff; background:radial-gradient(circle at 70% 120%,#0b477a 0,transparent 45%),linear-gradient(110deg,#061a43,#062c61); box-shadow:var(--shadow); }
.cta-brand { padding-right:34px; border-right:1px solid rgba(255,255,255,.55); font-size:3.4rem; font-weight:850; letter-spacing:-.06em; }
.cta-brand .k { color:#22c5bd; }
.cta-brand .brand-tile { width:62px; height:62px; margin-bottom:14px; border-radius:18px; background:#fff; }
.cta-brand .brand-tile svg { width:37px; height:32px; }
.cta-brand sup { font-size:.28em; margin-left:.1em; vertical-align:super; }
.cta-content { text-align:center; }
.cta-content h2 { margin-bottom:12px; color:#fff; font-size:1.25rem; }
.btn-primary { display:inline-flex; min-width:310px; min-height:50px; align-items:center; justify-content:center; padding:12px 24px; border-radius:9px; background:linear-gradient(100deg,#08a59c,#24c5c3); color:#fff; font-weight:850; text-decoration:none; }
.btn-primary:hover { background:#07847e; }
.cta-note { margin:8px 0 0; color:#fff; font-size:.86rem; }
.back-link { display:inline-block; margin-top:10px; color:#d7edf3; font-size:.84rem; font-weight:750; text-underline-offset:3px; }
@media (max-width:980px) { .scenario-grid { grid-template-columns:210px 1fr; } .why-panel { grid-column:1/-1; border-top:1px solid var(--line); border-left:0; } .why-list { grid-template-columns:repeat(3,1fr); gap:12px; } }
@media (max-width:720px) {
  .wrap { width:min(100% - 28px,1180px); } .header-inner { min-height:68px; } .brand-descriptor { display:none; }
  .hero { padding-top:26px; } h1 { font-size:clamp(2.3rem,11vw,3.2rem); } .hero-copy br { display:none; } .fit-card { grid-template-columns:1fr; padding:18px; text-align:center; } .fit-icon { padding-bottom:12px; border-right:0; border-bottom:1px solid #c6dce2; } .fit-icon svg { width:58px; height:58px; } .fit-copy { padding:14px 0 0; }
  .scenario > h2 { padding:14px 16px 10px; font-size:1.2rem; } .scenario-grid { display:block; } .matches-panel,.why-panel { border-top:1px solid var(--line); border-left:0; } .patient-panel { padding-bottom:8px; } .patient-photo { width:112px; height:112px; } .match { grid-template-columns:32px 58px minmax(0,1fr); gap:8px; } .dentist-photo { width:56px; height:56px; } .distance { grid-column:3; margin-top:-7px; } .why-list { grid-template-columns:1fr; gap:14px; } .scenario-note { align-items:flex-start; }
  .journey-steps { grid-template-columns:1fr; gap:22px; } .journey-steps li:not(:last-child)::after { content:"↓"; top:auto; right:auto; bottom:-21px; }
  .cta-panel { grid-template-columns:1fr; padding:27px 18px; } .cta-brand { margin-bottom:20px; padding:0 0 18px; border-right:0; border-bottom:1px solid rgba(255,255,255,.45); text-align:center; font-size:2.6rem; } .cta-brand .brand-tile { margin-left:auto; margin-right:auto; } .btn-primary { width:100%; min-width:0; }
}