:root { --navy: #173550; --navy-deep: #0f2942; --blue: #3b82c4; --blue-strong: #226cad; --cyan: #10a5c4; --paper: #f6faff; --muted: #6f8492; --muted-light: #91a3ae; --line: #dceaf1; --sky: #e8f6fc; --purple: #7659bd; --purple-soft: #f0ebfc; --orange: #d48b38; --orange-soft: #fff1de; --green: #3fa88f; --green-soft: #e8f7f1; --shadow: 0 20px 60px rgba(26, 79, 113, .09); }
* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--paper); color: var(--navy); font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a, button { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
.pro-shell { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 86% 5%, rgba(169, 233, 247, .28), transparent 24%), linear-gradient(180deg, #f8fcff 0%, #f6faff 56%, #fff 100%); }
.pro-topbar { width: min(1180px, calc(100% - 48px)); height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: auto; border-bottom: 1px solid rgba(220, 234, 241, .9); }
.pro-section-nav { position: sticky; top: 74px; z-index: 8; width: min(1180px, calc(100% - 48px)); min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 auto; padding: 5px; border: 1px solid var(--line); border-radius: 0 0 15px 15px; background: rgba(255,255,255,.94); box-shadow: 0 9px 24px rgba(23,53,80,.06); backdrop-filter: blur(14px); }
.pro-section-nav a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 10px; color: var(--muted); font-size: 10px; font-weight: 800; text-decoration: none; }
.pro-section-nav a:hover, .pro-section-nav a:focus-visible { background: var(--sky); color: var(--blue-strong); }
.pro-access-panel { max-width: 620px; margin: 0 auto 30px; padding: 20px; border: 1px solid #cde5f0; border-radius: 16px; background: linear-gradient(135deg, #f3fbff, #e9f8fc); color: var(--navy); box-shadow: 0 13px 34px rgba(23,53,80,.07); }
.pro-access-panel > b { font-size: 14px; }
.pro-access-panel > p { margin: 7px 0 13px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.pro-access-panel form { display: flex; gap: 8px; flex-wrap: wrap; }
.pro-access-panel input { min-height: 42px; flex: 1 1 180px; padding: 0 11px; border: 1px solid #cde5f0; border-radius: 9px; background: #fff; color: var(--navy); }
.pro-access-panel button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--navy); color: #fff; font-weight: 800; }
.pro-access-panel small { min-height: 15px; display: block; margin-top: 10px; color: var(--muted); font-size: 10px; }
.pro-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-size: 21px; font-weight: 800; letter-spacing: -.06em; text-decoration: none; }
.pro-brand > span:last-child span { color: var(--cyan); }
.pro-brand-mark { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: transparent; }
.pro-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.back-link { color: var(--muted); font-size: 10px; font-weight: 700; text-decoration: none; }.back-link span { margin-left: 17px; color: var(--blue); }.back-link:hover { color: var(--blue-strong); }
main { width: min(1180px, calc(100% - 48px)); margin: auto; }
.pro-hero { min-height: 580px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: clamp(45px, 8vw, 120px); padding: 68px 0 76px; }
.eyebrow { margin: 0; color: var(--blue-strong); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-copy h1 { margin: 15px 0 22px; color: var(--navy); font-size: clamp(46px, 6.1vw, 79px); line-height: .94; letter-spacing: -.08em; }.hero-copy h1 em, .section-heading h2 em { color: var(--blue); font-family: Newsreader, Georgia, serif; font-weight: 500; letter-spacing: -.05em; }
.hero-lead { max-width: 510px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 15px; margin-top: 30px; }.primary-cta, .plan-primary { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 0 17px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; box-shadow: 0 12px 25px rgba(23, 53, 80, .16); font-size: 10px; font-weight: 800; text-decoration: none; }.primary-cta span, .plan-primary span { color: #a9edf7; font-size: 15px; }.primary-cta:hover, .plan-primary:hover { background: #214b6d; transform: translateY(-1px); }.secondary-cta { color: var(--blue-strong); font-size: 10px; font-weight: 800; text-decoration: none; }.secondary-cta:hover { color: var(--navy); }
.trust-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 27px; color: var(--muted-light); font-size: 8px; }.trust-line > span { color: var(--blue); font-size: 11px; }.trust-line i { width: 2px; height: 2px; border-radius: 50%; background: #c6d6de; }
.care-pack-preview { position: relative; padding: 25px; border: 1px solid #cfe7ef; border-radius: 25px; background: rgba(255, 255, 255, .86); box-shadow: 0 25px 65px rgba(33, 104, 138, .12); }.preview-glow { position: absolute; top: -20px; right: -25px; width: 120px; height: 120px; border-radius: 50%; background: #dff8fc; filter: blur(3px); opacity: .8; }.preview-head, .preview-appointment, .preview-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.preview-kicker, .preview-head b { display: block; }.preview-kicker { color: var(--blue); font-size: 8px; font-weight: 800; letter-spacing: .14em; }.preview-head b { margin-top: 6px; font-size: 17px; letter-spacing: -.04em; }.preview-status { padding: 7px 8px; border-radius: 7px; background: var(--green-soft); color: var(--green); font-size: 8px; font-weight: 800; }.preview-status i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
.preview-appointment { margin-top: 27px; padding: 13px; border: 1px solid #dbeaf1; border-radius: 13px; background: #fbfdff; }.preview-appointment > div { min-width: 0; flex: 1; }.preview-appointment small, .preview-appointment b, .preview-appointment span { display: block; }.preview-appointment small, .preview-grid small { color: var(--muted-light); font-size: 7px; font-weight: 800; letter-spacing: .08em; }.preview-appointment b { margin-top: 5px; font-size: 11px; }.preview-appointment > div > span { margin-top: 4px; color: var(--muted); font-size: 8px; }.preview-appointment strong { color: var(--blue); font-size: 16px; }.preview-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; font-size: 14px; }.preview-icon.purple { background: var(--purple-soft); color: var(--purple); }.preview-icon.blue { background: var(--sky); color: var(--blue); }.preview-icon.cyan { background: #e4f9fc; color: var(--cyan); }.preview-icon.orange { background: var(--orange-soft); color: var(--orange); }.preview-icon.green { background: var(--green-soft); color: var(--green); }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }.preview-grid > div { display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 8px; padding: 11px 9px; border: 1px solid #edf3f6; border-radius: 11px; background: #fff; }.preview-grid small, .preview-grid b { grid-column: 2; }.preview-grid .preview-icon { grid-row: 1 / span 2; }.preview-grid b { margin-top: -3px; font-size: 9px; }.preview-footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid #edf3f6; color: var(--muted-light); font-size: 8px; }.preview-footer i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); }.preview-footer b { color: var(--blue-strong); }.preview-footer b span { color: var(--cyan); }
.section-block, .plans-section, .comparison-section { padding: 76px 0; border-top: 1px solid rgba(220, 234, 241, .86); }.section-heading { max-width: 640px; }.section-heading h2 { margin: 12px 0 12px; font-size: clamp(28px, 4vw, 44px); line-height: 1.02; letter-spacing: -.07em; }.section-heading > p:last-child { max-width: 560px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 37px; }.feature-card { min-height: 250px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .72); box-shadow: var(--shadow); }.feature-card.featured { border-color: #acdce9; background: linear-gradient(145deg, #f2fcff, #fff); }.feature-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; font-size: 15px; }.feature-icon.blue { background: var(--sky); color: var(--blue); }.feature-icon.purple { background: var(--purple-soft); color: var(--purple); }.feature-icon.orange { background: var(--orange-soft); color: var(--orange); }.feature-icon.green { background: var(--green-soft); color: var(--green); }.feature-kicker { margin: 27px 0 9px; color: var(--muted-light); font-size: 7px; font-weight: 800; letter-spacing: .14em; }.feature-card h3 { margin: 0; font-size: 16px; letter-spacing: -.04em; }.feature-card > p:not(.feature-kicker) { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }.feature-card a { display: inline-block; margin-top: 17px; color: var(--blue-strong); font-size: 8px; font-weight: 800; text-decoration: none; }.feature-card a span { margin-left: 8px; }
.centered { max-width: 700px; margin: auto; text-align: center; }.centered > p:last-child { margin-right: auto; margin-left: auto; }.plan-toggle { width: max-content; display: flex; gap: 3px; margin: 30px auto 22px; padding: 3px; border-radius: 10px; background: #e9f3f8; }.plan-toggle button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; }.plan-toggle button.active { background: #fff; color: var(--blue-strong); box-shadow: 0 3px 10px rgba(28, 87, 119, .1); }.plan-toggle button span { margin-left: 5px; color: var(--green); font-size: 7px; }
.plans-grid { width: min(780px, 100%); display: grid; grid-template-columns: 1fr 1.08fr; gap: 13px; margin: auto; }.plan-card { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: var(--shadow); }.pro-plan { border: 2px solid #75cfe0; box-shadow: 0 22px 70px rgba(27, 134, 164, .14); }.best-value { position: absolute; top: 17px; right: 17px; padding: 6px 8px; border-radius: 6px; background: var(--green-soft); color: var(--green); font-size: 7px; font-weight: 900; letter-spacing: .09em; }.plan-label { color: var(--blue-strong); font-size: 8px; font-weight: 900; letter-spacing: .14em; }.plan-card h3 { margin: 11px 0 7px; font-size: 23px; letter-spacing: -.06em; }.plan-description { min-height: 34px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }.plan-price { display: flex; align-items: baseline; gap: 5px; margin: 20px 0 4px; }.plan-price b { font-size: 38px; letter-spacing: -.07em; }.plan-price span { color: var(--muted-light); font-size: 9px; }.monthly-equivalent { min-height: 16px; margin: 0 0 13px; color: var(--green); font-size: 8px; }.plan-primary { width: 100%; min-height: 43px; justify-content: space-between; }.plan-secondary { min-height: 43px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border: 1px solid #dbe9ef; border-radius: 9px; color: var(--blue-strong); font-size: 9px; font-weight: 800; text-decoration: none; }.plan-secondary:hover { border-color: #9fcfe1; background: #f5fcff; }.plan-card ul { display: grid; gap: 10px; padding: 0; margin: 23px 0 0; list-style: none; }.plan-card li { position: relative; padding-left: 20px; color: var(--muted); font-size: 9px; line-height: 1.45; }.plan-card li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 900; }.plan-card li strong { color: var(--navy); }.billing-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px auto 0; color: var(--muted-light); font-size: 8px; text-align: center; }.billing-note span { color: var(--blue); font-size: 12px; }
.comparison-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }.comparison-table { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }.comparison-row { display: grid; grid-template-columns: 1.4fr .55fr .75fr; gap: 14px; align-items: center; min-height: 47px; padding: 0 15px; border-top: 1px solid #edf3f6; color: var(--muted); font-size: 8px; }.comparison-row:first-child { border-top: 0; }.comparison-row b { color: var(--blue-strong); font-size: 8px; }.comparison-head { min-height: 42px; background: #f4fafc; color: var(--navy); font-size: 8px; font-weight: 800; }.comparison-head b:last-child { color: var(--green); }
.pro-safety { display: flex; align-items: center; gap: 13px; margin: 0 0 40px; padding: 17px 19px; border: 1px solid #dcecf2; border-radius: 14px; background: #f4fbfd; }.pro-safety > span { color: var(--blue); font-size: 17px; }.pro-safety div { flex: 1; }.pro-safety b { font-size: 10px; }.pro-safety p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.pro-safety a { color: var(--blue-strong); font-size: 8px; font-weight: 800; text-decoration: none; white-space: nowrap; }.pro-safety a span { margin-left: 8px; }
.pro-footer { width: min(1180px, calc(100% - 48px)); display: flex; align-items: center; gap: 16px; margin: auto; padding: 22px 0 27px; border-top: 1px solid var(--line); color: var(--muted-light); font-size: 8px; }.pro-footer span:nth-child(2) { margin-right: auto; }.pro-footer a { color: var(--muted); text-decoration: none; }.pro-footer a:hover { color: var(--blue-strong); }
.checkout-dialog { width: min(460px, calc(100% - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--navy); box-shadow: 0 30px 90px rgba(16, 48, 74, .22); }.checkout-dialog::backdrop { background: rgba(12, 40, 61, .42); backdrop-filter: blur(4px); }.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 23px 24px 17px; border-bottom: 1px solid #edf3f6; }.dialog-head h2 { margin: 8px 0 0; font-size: 22px; letter-spacing: -.05em; }.dialog-close { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 19px; line-height: 1; }.dialog-copy { padding: 21px 24px 25px; }.dialog-copy > p { margin: 0 0 15px; color: var(--muted); font-size: 10px; line-height: 1.65; }.selected-plan { display: flex; align-items: center; justify-content: space-between; padding: 14px; margin-bottom: 15px; border: 1px solid #cbeaf2; border-radius: 11px; background: #f2fbfd; }.selected-plan b { font-size: 17px; }.selected-plan span { color: var(--blue-strong); font-size: 9px; font-weight: 800; }.setup-note { padding: 10px 12px; border-radius: 9px; background: #f7fafc; color: var(--muted-light) !important; font-size: 8px !important; }.dialog-secondary { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; min-height: 41px; padding: 0 13px; border: 1px solid #cfe3ee; border-radius: 9px; color: var(--blue-strong); font-size: 9px; font-weight: 800; text-decoration: none; }.dialog-secondary:hover { background: #f3fbff; }
.setup-note[data-tone="error"] { background: #fff4f2; color: #a55d58 !important; }.setup-note[data-tone="success"] { background: #effbf7; color: #267d64 !important; }.plan-primary:disabled { cursor: wait; opacity: .65; transform: none; }
.checkout-code-box { margin: 0 0 15px; padding: 14px; border: 1px solid #d8edf2; border-radius: 11px; background: #fbfeff; }.checkout-code-box > b { display: block; font-size: 11px; }.checkout-code-box > p { margin: 5px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.45; }.checkout-code-box input { width: 100%; min-height: 37px; padding: 0 10px; border: 1px solid #cfe3ee; border-radius: 8px; background: #fff; color: var(--navy); font: inherit; font-size: 10px; box-sizing: border-box; }.checkout-code-row { display: flex; gap: 7px; margin-top: 7px; }.checkout-code-row input { flex: 1; }.checkout-code-row button { min-height: 37px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--navy); color: #fff; font-size: 10px; font-weight: 800; }.checkout-code-box small { display: block; min-height: 14px; margin-top: 8px; color: #267d64; font-size: 9px; }.checkout-code-box small[data-tone="error"] { color: #a55d58; }
button.dialog-secondary { background: #fff; text-align: left; cursor: pointer; }.dialog-secondary:disabled { cursor: wait; opacity: .65; }
@media (max-width: 900px) { .pro-hero { grid-template-columns: 1fr; gap: 35px; padding-top: 48px; }.care-pack-preview { width: min(520px, 100%); margin: auto; }.feature-grid { grid-template-columns: repeat(2, 1fr); }.comparison-section { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 620px) { .pro-topbar, main, .pro-footer { width: calc(100% - 28px); min-width: 0; }.pro-topbar { height: 65px; gap: 10px; }.pro-brand { min-width: 0; font-size: 18px; }.pro-brand-logo { width: 112px; }.pro-brand-mark { width: 31px; height: 31px; }.back-link { flex: 0 0 auto; font-size: 8px; }.back-link span { margin-left: 8px; }.pro-hero { min-height: 0; padding: 42px 0 54px; }.hero-copy h1 { max-width: 100%; overflow-wrap: anywhere; font-size: 49px; }.hero-lead { font-size: 12px; }.hero-actions { align-items: stretch; flex-direction: column; gap: 13px; }.primary-cta { width: 100%; justify-content: space-between; }.secondary-cta { text-align: center; }.trust-line { line-height: 1.6; }.care-pack-preview { padding: 17px; border-radius: 17px; }.preview-head b { font-size: 14px; }.preview-grid > div { grid-template-columns: 26px 1fr; gap: 6px; padding: 9px 7px; }.preview-icon { width: 26px; height: 26px; font-size: 11px; }.preview-grid b { font-size: 8px; }.section-block, .plans-section, .comparison-section { padding: 53px 0; }.section-heading h2 { font-size: 34px; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 0; }.plans-grid { grid-template-columns: 1fr; }.pro-plan { order: -1; }.plan-card { padding: 22px; }.comparison-row { grid-template-columns: 1.2fr .45fr .8fr; gap: 8px; padding: 0 10px; font-size: 7px; }.comparison-row b { font-size: 7px; }.pro-safety { align-items: flex-start; flex-wrap: wrap; }.pro-safety a { width: 100%; padding-left: 30px; }.pro-footer { flex-wrap: wrap; gap: 10px; }.pro-footer span:nth-child(2) { width: 100%; order: 3; }.pro-footer a { font-size: 8px; } }

/* Pro unlocks capability only. The whole product keeps the blue/cyan DoctorAI system. */
.pro-brand-logo { width: 132px; height: 46px; object-fit: contain; object-position: left center; }
.pro-brand-pro { padding: 5px 8px; border: 1px solid #9fd5e5; border-radius: 6px; color: var(--blue-strong); background: #effbfe; font-size: 8px; font-weight: 900; letter-spacing: .16em; }

/* Launch accessibility hardening. */
:where(a, button, input, [tabindex]):focus-visible { outline: 3px solid #0b76c5; outline-offset: 3px; }
.feature-card > p:not(.feature-kicker), .plan-description, .plan-card li, .pro-safety p, .dialog-copy > p, .checkout-code-box > p { font-size: 12px; }
.feature-card a, .plan-toggle button, .plan-secondary, .pro-safety a, .dialog-secondary { font-size: 12px; }
.comparison-row, .comparison-row b, .comparison-head { font-size: 11px; }
@media (max-width: 620px) {
  input { font-size: 16px !important; }
  .plan-toggle button, .plan-primary, .plan-secondary, .dialog-close, .dialog-secondary, .checkout-code-row button { min-height: 44px; }
  .comparison-row, .comparison-row b { font-size: 10px; }
  .pro-footer, .pro-footer a { font-size: 11px; }
}

.subscription-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 14px;
  color: var(--muted, #55728d);
  font-size: 13px;
}
.subscription-actions > span { line-height: 1.5; }
.subscription-actions a { color: var(--blue-strong, #075bc0); font-weight: 700; }
.billing-note { line-height: 1.6; }
.checkout-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  padding: 13px;
  border: 1px solid #d5e5ef;
  border-radius: 12px;
  background: #f7fbff;
  color: #435f73;
  font-size: 13px;
  line-height: 1.5;
}
.checkout-confirm input { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; accent-color: #075ed9; }
.checkout-confirm a { color: #0759b6; font-weight: 700; }
.renewal-note { margin: 12px 0; color: #496579; font-size: 13px; line-height: 1.55; }
.checkout-continue { width: 100%; justify-content: center; }
.checkout-continue:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }