/* Sendral's online clinic page styles (clinical/static/clinical/care.css), scoped to .vdc for the
   VitaLync website and styled like the VitaLync homepage. Rebuilt with scratchpad/scope_care_css.py; edit there, not here. */
.vdc { --brand: #0057b8; --brand-dark: #00438f; --navy: #0f172a; --tint: #eaf2fc; --sun: #f4b740; --mint: #bcd9ff;
       --head: 'Poppins', sans-serif; --body: 'Roboto', sans-serif;
       --ink: #1e293b; --muted: #64748b; --rule: #e2e8f0; --paper: #f8fafc; --eyebrow: #1a56db;
       --hero: linear-gradient(135deg, #041e42 0%, #0057b8 58%, #0680d0 100%); }
/* the site theme gives every section a white background and its own colours: let the bands show through */
.vdc section { background-color: transparent; color: inherit; padding: 0; overflow: visible; }
.vdc p { color: inherit; }
.vdc, .vdc * { box-sizing: border-box; }
.vdc { margin: 0; font: 16px/1.6 var(--body); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
.vdc h1, .vdc h2, .vdc h3 { font-family: var(--head); color: var(--navy); margin: 0; font-weight: 600; }
.vdc a { color: var(--brand-dark); }
.vdc .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.vdc .crumbs { font-size: 13px; color: var(--muted); padding: 22px 0 0; }
.vdc .crumbs a { color: var(--muted); text-decoration: none; }
.vdc .intro { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; padding: 26px 0 56px; border-bottom: 1px solid var(--rule); }
@media (max-width: 920px) {
.vdc .intro { grid-template-columns: 1fr; gap: 32px; }
}
.vdc .intro h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 18px; }
.vdc .intro .standfirst { font-size: 18px; color: #3a4255; max-width: 34em; margin: 0 0 26px; }
.vdc .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.vdc .btn { display: inline-block; font: 500 15px var(--body); border-radius: 6px; padding: 13px 22px; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.vdc .btn-main { background: var(--brand); color: #fff; }
.vdc .btn-main:hover { background: var(--brand-dark); }
.vdc .btn-line { background: #fff; color: var(--navy); border-color: #c9d6d3; }
.vdc .btn-line:hover { border-color: var(--navy); }
.vdc .textlink { font-size: 15px; color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.vdc .facts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.vdc .facts strong { color: var(--ink); font-weight: 500; }
.vdc .costs { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
.vdc .costs .who { display: flex; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--rule); align-items: center; }
.vdc .costs .who .mono { width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; font: 600 16px var(--head); display: grid; place-items: center; flex: none; }
.vdc .costs .who p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.vdc .costs .who b { color: var(--ink); font-size: 15px; font-weight: 500; }
.vdc .costs table { width: 100%; border-collapse: collapse; font-size: 15px; }
.vdc .costs td { padding: 13px 22px; border-bottom: 1px solid var(--rule); }
.vdc .costs td:last-child { text-align: right; font-weight: 500; white-space: nowrap; }
.vdc .costs tr:last-child td { border-bottom: 0; }
.vdc .costs .small { padding: 14px 22px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); background: #fff; border-radius: 0 0 8px 8px; }
.vdc .block { padding: 60px 0; border-bottom: 1px solid var(--rule); }
.vdc .block h2 { font-size: 27px; line-height: 1.2; margin-bottom: 10px; }
.vdc .block .sub { color: var(--muted); max-width: 40em; margin: 0 0 28px; }
.vdc .two { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }
@media (max-width: 920px) {
.vdc .two { grid-template-columns: 1fr; gap: 28px; }
}
.vdc .checklist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
@media (max-width: 600px) {
.vdc .checklist { columns: 1; }
}
.vdc .checklist li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.vdc .checklist label { display: flex; gap: 12px; align-items: center; padding: 12px 2px; cursor: pointer; font-size: 15px; }
.vdc .checklist input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.vdc .outcome { margin-top: 24px; padding: 18px 20px; border-left: 3px solid var(--rule); background: var(--paper); transition: border-color .2s; }
.vdc .outcome.yes { border-left-color: var(--brand); }
.vdc .outcome b { display: block; font-family: var(--head); font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.vdc .outcome p { margin: 0 0 10px; font-size: 15px; color: #3a4255; }
.vdc .outcome .meter { display: flex; gap: 3px; margin: 10px 0 12px; }
.vdc .outcome .meter i { flex: 1; height: 5px; background: var(--rule); border-radius: 1px; }
.vdc .outcome .meter i.on { background: var(--brand); }
.vdc .footnote { font-size: 13px; color: var(--muted); margin-top: 12px; }
.vdc .test-tools { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.vdc .test-tools label { font-size: 14px; color: var(--muted); display: block; margin-bottom: 6px; }
.vdc .test-tools select { font: 15px var(--body); padding: 10px 12px; border: 1px solid #c9d6d3; border-radius: 6px; min-width: 280px; background: #fff; }
.vdc .filters { font-size: 14px; }
.vdc .filters button { background: none; border: 0; padding: 4px 0; margin-left: 16px; font: inherit; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.vdc .filters button.on { color: var(--navy); border-bottom-color: var(--brand); }
.vdc .tests { width: 100%; border-collapse: collapse; }
.vdc .tests th { text-align: left; font: 500 12px var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--navy); }
.vdc .tests td { padding: 16px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.vdc .tests tr.pick td { background: var(--tint); }
.vdc .tests .name { font-weight: 500; color: var(--navy); font-size: 16px; }
.vdc .tests .kind { font-size: 12px; color: var(--muted); }
.vdc .tests .what { font-size: 14px; color: #3a4255; max-width: 30em; }
.vdc .tests .markers { font-size: 13px; color: var(--muted); margin-top: 4px; }
.vdc .tests .price { font-weight: 500; white-space: nowrap; }
.vdc .tests .go { text-align: right; white-space: nowrap; }
.vdc .tests .go .btn { padding: 8px 14px; font-size: 14px; }
.vdc .tests .note { font-size: 12px; color: #a06a00; }
.vdc .pick-label { display: none; font-size: 12px; font-weight: 500; color: var(--brand-dark); }
.vdc tr.pick .pick-label { display: block; margin-bottom: 2px; }
@media (max-width: 760px) {
.vdc .tests thead { display: none; }
.vdc .tests tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--rule); padding: 8px 0; }
.vdc .tests td { border: 0; padding: 6px 4px; }
.vdc .tests td.what-cell { grid-column: 1 / -1; }
}
.vdc .hidden { display: none !important; }
.vdc .measures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
@media (max-width: 900px) {
.vdc .measures { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.vdc .measures { grid-template-columns: 1fr; }
}
.vdc .measures h3 { font-size: 15px; padding: 14px 0 8px; border-top: 2px solid var(--navy); margin-top: 18px; }
.vdc .measures dl { margin: 0; }
.vdc .measures dt { font-weight: 500; font-size: 15px; margin-top: 10px; }
.vdc .measures dd { margin: 0; font-size: 14px; color: var(--muted); }
.vdc .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--navy); }
@media (max-width: 900px) {
.vdc .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.vdc .steps { grid-template-columns: 1fr; }
}
.vdc .steps li { padding: 18px 24px 4px 0; }
.vdc .steps .n { font: 600 14px var(--head); color: var(--brand-dark); }
.vdc .steps h3 { font-size: 17px; margin: 6px 0 6px; }
.vdc .steps p { margin: 0; font-size: 15px; color: #3a4255; }
.vdc .options { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: 8px; }
@media (max-width: 760px) {
.vdc .options { grid-template-columns: 1fr; }
}
.vdc .options div { padding: 18px 20px; border-right: 1px solid var(--rule); }
.vdc .options div:last-child { border-right: 0; }
@media (max-width: 760px) {
.vdc .options div { border-right: 0; border-bottom: 1px solid var(--rule); }
}
.vdc .options b { display: block; color: var(--navy); font-weight: 500; }
.vdc .options span { font-size: 14px; color: var(--muted); }
.vdc .plan-switch { display: inline-flex; border: 1px solid #c9d6d3; border-radius: 6px; overflow: hidden; margin-bottom: 18px; }
.vdc .plan-switch button { border: 0; background: #fff; padding: 9px 18px; font: 15px var(--body); cursor: pointer; color: var(--muted); }
.vdc .plan-switch button + button { border-left: 1px solid #c9d6d3; }
.vdc .plan-switch button.on { background: var(--navy); color: #fff; }
.vdc .plan-price { font: 600 34px var(--head); color: var(--navy); }
.vdc .plan-price small { font: 400 16px var(--body); color: var(--muted); }
.vdc .ticks { list-style: none; padding: 0; margin: 18px 0 0; }
.vdc .ticks li { padding: 9px 0 9px 26px; border-bottom: 1px solid var(--rule); position: relative; font-size: 15px; }
.vdc .ticks li:before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 6px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.vdc .faq details { border-bottom: 1px solid var(--rule); }
.vdc .faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font-weight: 500; position: relative; color: var(--navy); }
.vdc .faq summary::-webkit-details-marker { display: none; }
.vdc .faq summary:after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; color: var(--muted); font-weight: 400; }
.vdc .faq details[open] summary:after { content: "\2212"; }
.vdc .faq p { margin: 0 0 18px; color: #3a4255; max-width: 46em; }
.vdc .closing { padding: 56px 0 30px; display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; }
@media (max-width: 920px) {
.vdc .closing { grid-template-columns: 1fr; }
}
.vdc .closing h2 { font-size: 27px; margin-bottom: 8px; }
.vdc .closing p { margin: 0; color: #3a4255; }
.vdc .closing .actions { justify-content: flex-end; }
@media (max-width: 920px) {
.vdc .closing .actions { justify-content: flex-start; }
}
.vdc .legal { font-size: 13px; color: var(--muted); padding: 22px 0 40px; border-top: 1px solid var(--rule); }
.vdc .legal p { margin: 0 0 6px; max-width: 70em; }
.vdc .powered { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 10px; }
.vdc .mobile-start { display: none; }
@media (max-width: 760px) {
.vdc .mobile-start.show { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; }
.vdc .mobile-start .btn { width: 100%; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
}
.vdc .hero-band { background: var(--navy); color: #fff; }
.vdc .hero-band .crumbs, .vdc .hero-band .crumbs a { color: rgba(255,255,255,.65); }
.vdc .hero-band .intro { border-bottom: 0; padding-bottom: 64px; }
.vdc .hero-band h1 { color: #fff; }
.vdc .hero-band h1 .hl { color: var(--mint); }
.vdc .hero-band .standfirst { color: rgba(255,255,255,.85); }
.vdc .hero-band .textlink { color: var(--mint); }
.vdc .hero-band .facts { border-top-color: rgba(255,255,255,.18); color: rgba(255,255,255,.7); }
.vdc .hero-band .facts strong { color: #fff; }
.vdc .hero-band .facts span { display: inline-flex; gap: 8px; align-items: center; }
.vdc .hero-band .facts span:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.vdc .hero-band .btn-main { background: var(--brand); }
.vdc .hero-band .btn-main:hover { background: #fff; color: var(--navy); }
.vdc .hero-band .costs { background: #fff; color: var(--ink); border: 0; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.25); overflow: hidden; }
.vdc .hero-band .costs .who { background: var(--brand); border-bottom: 0; }
.vdc .hero-band .costs .who p, .vdc .hero-band .costs .who b { color: #fff; }
.vdc .hero-band .costs .who .mono { background: #fff; color: var(--brand-dark); }
.vdc .hero-band .costs tr:last-child td { background: var(--tint); }
.vdc .hero-band .costs tr:last-child td:last-child { color: var(--brand-dark); }
.vdc .hero-band .costs .small { border-radius: 0; }
.vdc .band-tint { background: var(--tint); }
.vdc .band-tint .block, .vdc .block.on-tint { border-bottom: 0; }
.vdc .band-tint .checklist li { border-bottom-color: rgba(11,59,60,.12); }
.vdc .band-tint .checklist label:hover { color: var(--brand-dark); }
.vdc .band-tint .outcome { background: #fff; border-left-width: 5px; box-shadow: 0 1px 0 rgba(11,59,60,.06); }
.vdc .outcome.yes { border-left-color: var(--brand); }
.vdc .outcome.yes b { color: var(--brand-dark); }
.vdc .block h2 { position: relative; padding-top: 16px; }
.vdc .block h2:before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 4px; background: var(--brand); border-radius: 2px; }
.vdc .tests th { background: var(--navy); color: #fff; border-bottom: 0; }
.vdc .tests th:first-child { border-radius: 6px 0 0 0; }
.vdc .tests th:last-child { border-radius: 0 6px 0 0; }
.vdc .tests tbody tr:nth-child(even) td { background: #f7faf9; }
.vdc .tests tr.pick td { background: var(--tint) !important; }
.vdc .tests tr.pick td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
.vdc .tests .price { color: var(--brand-dark); font-size: 17px; }
.vdc .tests .go .btn-line { border-color: var(--brand); color: var(--brand-dark); }
.vdc .tests .go .btn-line:hover { background: var(--brand); color: #fff; }
.vdc .pick-label { background: var(--sun); color: #3d2a00; display: none; width: max-content; padding: 2px 8px; border-radius: 3px; font-weight: 700; }
.vdc tr.pick .pick-label { display: block; margin-bottom: 6px; }
.vdc .test-tools select { border-color: var(--brand); }
.vdc .measures > div { background: #fff; border: 1px solid var(--rule); border-top: 4px solid var(--brand); border-radius: 0 0 8px 8px; padding: 0 20px 18px; margin-top: 18px; }
.vdc .measures > div:nth-child(2) { border-top-color: var(--navy); }
.vdc .measures > div:nth-child(3) { border-top-color: var(--sun); }
.vdc .measures h3 { border-top: 0; margin-top: 0; padding-top: 16px; font-size: 17px; }
.vdc .measures { gap: 20px; }
.vdc .band-navy { background: var(--navy); color: #fff; }
.vdc .band-navy .block { border-bottom: 0; }
.vdc .band-navy h2, .vdc .band-navy h3 { color: #fff; }
.vdc .band-navy .sub, .vdc .band-navy .steps p { color: rgba(255,255,255,.78); }
.vdc .band-navy .steps { border-top-color: rgba(255,255,255,.2); }
.vdc .band-navy .steps .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; }
.vdc .band-navy .options { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.vdc .band-navy .options div { border-color: rgba(255,255,255,.2); }
.vdc .band-navy .options b { color: var(--mint); }
.vdc .band-navy .options span { color: rgba(255,255,255,.75); }
.vdc .plan-card { background: #fff; border: 2px solid var(--brand); border-radius: 10px; padding: 24px; }
.vdc .plan-price { color: var(--brand-dark); }
.vdc .plan-switch { border-color: var(--brand); }
.vdc .plan-switch button + button { border-left-color: var(--brand); }
.vdc .plan-switch button.on { background: var(--brand); }
.vdc .faq-side { background: var(--tint); border-radius: 10px; padding: 24px; align-self: start; }
.vdc .faq summary:after { color: var(--brand); }
.vdc .faq details[open] summary { color: var(--brand-dark); }
.vdc .closing-band { background: var(--brand); color: #fff; }
.vdc .closing-band .closing { padding: 44px 24px; }
.vdc .closing-band h2 { color: #fff; }
.vdc .closing-band p { color: rgba(255,255,255,.9); }
.vdc .closing-band .btn-main { background: var(--navy); }
.vdc .closing-band .btn-main:hover { background: #fff; color: var(--navy); }
.vdc .legal { border-top: 0; }
.vdc .block { padding: 72px 0; }
.vdc .narrow { max-width: 760px; }
.vdc .narrow .sub { margin-bottom: 18px; }
.vdc tr.more { display: none; }
.vdc .tests.all tr.more { display: table-row; }
@media (max-width: 760px) {
.vdc .tests.all tr.more { display: grid; }
}
.vdc .show-all { margin-top: 16px; background: none; border: 1px solid var(--brand); color: var(--brand-dark); border-radius: 6px; padding: 10px 18px; font: 500 15px var(--body); cursor: pointer; }
.vdc .show-all:hover { background: var(--brand); color: #fff; }
.vdc details.incl { margin-top: 6px; font-size: 13px; }
.vdc details.incl summary { cursor: pointer; color: var(--brand-dark); list-style: none; display: inline; text-decoration: underline; text-underline-offset: 3px; }
.vdc details.incl summary::-webkit-details-marker { display: none; }
.vdc details.incl .markers { margin-top: 6px; }
.vdc .band-navy .steps { margin-top: 8px; }
.vdc .hero-photo { margin: 0; align-self: stretch; }
.vdc .photo-slot { height: 100%; min-height: 340px; border-radius: 10px; background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,.09) 14px 28px), var(--brand-dark);
  border: 1px dashed rgba(255,255,255,.35); display: grid; place-items: center; text-align: center; padding: 24px; }
.vdc .photo-slot span { color: #fff; font: 600 18px var(--head); }
.vdc .photo-slot small { display: block; margin-top: 8px; font: 400 14px var(--body); color: rgba(255,255,255,.75); max-width: 26em; }
.vdc .hero-band .intro { align-items: stretch; }
.vdc .steps h3 .cost { display: block; font: 500 14px var(--body); font-style: normal; color: var(--mint); margin-top: 2px; }
.vdc .cmp-wrap { overflow-x: auto; margin-top: 8px; border: 1px solid var(--rule); border-radius: 10px; }
.vdc .cmp { width: 100%; min-width: 680px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vdc .cmp thead th { vertical-align: top; text-align: left; padding: 18px 16px; border-left: 1px solid var(--rule); background: #fff; width: 22%; transition: background .2s; }
.vdc .cmp thead .corner { background: var(--paper); }
.vdc .cmp .code { display: inline-block; font: 700 12px var(--body); letter-spacing: .06em; color: #fff; background: var(--navy); padding: 3px 8px; border-radius: 3px; }
.vdc .cmp .tname { display: block; font: 600 16px var(--head); color: var(--navy); margin: 10px 0 6px; line-height: 1.3; min-height: 2.6em; }
.vdc .cmp .tprice { display: block; font: 600 26px var(--head); color: var(--brand-dark); }
.vdc .cmp .tline { display: block; font-size: 13px; color: var(--muted); margin: 4px 0 12px; min-height: 2.8em; }
.vdc .cmp thead .btn { width: 100%; text-align: center; padding: 9px 12px; }
.vdc .cmp tbody th { text-align: left; font-weight: 400; font-size: 15px; padding: 11px 16px; color: var(--ink); }
.vdc .cmp tbody td { text-align: center; border-left: 1px solid var(--rule); padding: 11px 8px; }
.vdc .cmp tbody tr { border-top: 1px solid var(--rule); }
.vdc .cmp tr.grp th { background: var(--tint); font: 600 12px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); padding: 9px 16px; }
.vdc .cmp .yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; }
.vdc .cmp .no { color: #b8c2c0; }
.vdc .cmp .pick { background: var(--tint) !important; }
.vdc .cmp thead th.pick { box-shadow: inset 0 4px 0 var(--sun); }
.vdc .cmp thead th.pick .btn { background: var(--brand); color: #fff; border-color: var(--brand); }
.vdc .cmp thead th.pick:after { content: "Best fit for you"; display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #3d2a00; background: var(--sun); padding: 2px 8px; border-radius: 3px; width: max-content; }
.vdc .homekit { margin-top: 22px; display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; padding: 18px 22px; border-radius: 10px; background: var(--tint); border-left: 5px solid var(--brand); }
@media (max-width: 760px) {
.vdc .homekit { grid-template-columns: 1fr; gap: 12px; }
}
.vdc .homekit b { font: 600 17px var(--head); color: var(--navy); }
.vdc .homekit p { margin: 4px 0 0; font-size: 15px; color: #3a4255; max-width: 34em; }
.vdc .hk-price span { display: block; font: 600 26px var(--head); color: var(--brand-dark); }
.vdc .hk-price small { font-size: 13px; color: var(--muted); white-space: nowrap; }
.vdc .homekit .btn { margin: 0; white-space: nowrap; }
.vdc .collect { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: 10px; margin: 0 0 18px; background: #fff; }
@media (max-width: 760px) {
.vdc .collect { grid-template-columns: 1fr; }
}
.vdc .collect div { padding: 12px 16px; border-right: 1px solid var(--rule); }
.vdc .collect div:last-child { border-right: 0; }
.vdc .collect b { display: block; color: var(--navy); font-weight: 500; font-size: 15px; }
.vdc .collect span { font-size: 14px; color: var(--brand-dark); }
.vdc .cmp .tprice:after { content: " + collection"; font: 400 13px var(--body); color: var(--muted); }
.vdc .hk-price em { font: 500 15px var(--body); font-style: normal; color: var(--muted); }
.vdc .ov { position: fixed; inset: 0; background: rgba(11,30,32,.55); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 60; }
.vdc .ov.open { display: flex; }
.vdc .win { background: #fff; width: 100%; max-width: 800px; height: min(90vh, 920px); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.vdc .win-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.vdc .win-top b { color: var(--navy); font-weight: 500; }
.vdc .win-top span { color: var(--muted); }
.vdc .win-top button { border: 1px solid var(--rule); background: #fff; border-radius: 6px; padding: 6px 12px; cursor: pointer; font: 14px var(--body); }
.vdc .win iframe { flex: 1; border: 0; width: 100%; }
.vdc .hub-hero .intro { grid-template-columns: 6fr 5fr; }
.vdc .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) {
.vdc .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
.vdc .cards { grid-template-columns: 1fr; }
}
.vdc .tcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.vdc .tcard:hover { border-color: var(--brand); transform: translateY(-2px); }
.vdc .tcard .band { height: 6px; background: var(--brand); }
.vdc .tcard.navy .band { background: var(--navy); }
.vdc .tcard.sun .band { background: var(--sun); }
.vdc .tcard .in { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vdc .tcard .kind { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.vdc .tcard h3 { font-size: 20px; line-height: 1.25; }
.vdc .tcard p { margin: 0; color: #3a4255; font-size: 15px; }
.vdc .tcard .signs { font-size: 14px; color: var(--muted); }
.vdc .tcard .foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--rule); }
.vdc .tcard .price { font: 600 15px var(--head); color: var(--brand-dark); }
.vdc .tcard .more { font-size: 15px; font-weight: 500; color: var(--navy); white-space: nowrap; }
.vdc .tcard .more:after { content: " \2192"; }
.vdc .tcard.soon { background: var(--paper); }
.vdc .tcard.soon .band { background: var(--rule); }
.vdc .tcard.soon .price { color: var(--muted); }
.vdc .tcard.pick { border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
.vdc .tcard.pick .kind:after { content: "  ·  Suggested for you"; color: #3d2a00; background: var(--sun); padding: 1px 6px; border-radius: 3px; margin-left: 4px; text-transform: none; letter-spacing: 0; }
.vdc .finder { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin: 0 0 26px; }
.vdc .finder label { font-size: 14px; color: var(--muted); display: block; margin-bottom: 6px; }
.vdc .finder select { font: 15px var(--body); padding: 10px 12px; border: 1px solid var(--brand); border-radius: 6px; min-width: 300px; background: #fff; }
.vdc .why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 860px) {
.vdc .why { grid-template-columns: 1fr; }
}
.vdc .why h3 { font-size: 17px; margin-bottom: 6px; }
.vdc .why p { margin: 0; font-size: 15px; color: rgba(255,255,255,.8); }
.vdc .band-navy .why h3 { color: #fff; }
.vdc .shim { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; }
@media (max-width: 920px) {
.vdc .shim { grid-template-columns: 1fr; gap: 24px; }
}
.vdc .shim-q { border-bottom: 1px solid rgba(11,59,60,.12); padding: 14px 0; }
.vdc .shim-q p { margin: 0 0 8px; font-weight: 500; color: var(--navy); }
.vdc .shim-q .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.vdc .shim-q button { border: 1px solid #c9d6d3; background: #fff; border-radius: 6px; padding: 7px 11px; font: 14px var(--body); cursor: pointer; color: var(--ink); }
.vdc .shim-q button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.vdc .score { background: #fff; border-radius: 10px; padding: 22px; border-left: 5px solid var(--rule); position: sticky; top: 20px; align-self: start; }
.vdc .score.done { border-left-color: var(--brand); }
.vdc .bmi-form { display: grid; gap: 14px; max-width: 460px; }
.vdc .bmi-form label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 500; color: var(--navy); }
.vdc .bmi-form label span { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink); }
.vdc .bmi-form input[type=number] { width: 110px; padding: 10px 12px; border: 1px solid #c9d6d3; border-radius: 6px; font: 16px var(--body); }
.vdc .bmi-form label.tick { justify-content: flex-start; align-items: flex-start; font-weight: 400; color: var(--ink); font-size: 14px; }
.vdc .bmi-form label.tick input { margin-top: 3px; }
.vdc .score .big { font: 600 40px var(--head); color: var(--navy); }
.vdc .score .big small { font: 400 16px var(--body); color: var(--muted); }
.vdc .score b { display: block; font: 600 18px var(--head); color: var(--brand-dark); margin: 4px 0 6px; }
.vdc .score p { margin: 0 0 12px; font-size: 15px; color: #3a4255; }
.vdc .options2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) {
.vdc .options2 { grid-template-columns: 1fr; }
}
.vdc .opt { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: #fff; }
.vdc .opt .top { background: var(--navy); color: #fff; padding: 16px 20px; }
.vdc .opt .top b { display: block; font: 600 18px var(--head); }
.vdc .opt .top span { font-size: 14px; color: rgba(255,255,255,.75); }
.vdc .opt .mid { padding: 18px 20px; }
.vdc .opt .packs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.vdc .opt .packs button { border: 1px solid var(--brand); background: #fff; color: var(--brand-dark); border-radius: 6px; padding: 7px 12px; font: 14px var(--body); cursor: pointer; }
.vdc .opt .packs button.on { background: var(--brand); color: #fff; }
.vdc .opt .p { font: 600 32px var(--head); color: var(--brand-dark); }
.vdc .opt .p small { font: 400 15px var(--body); color: var(--muted); }
.vdc .opt ul { margin: 12px 0 0; padding-left: 18px; color: #3a4255; font-size: 15px; }
.vdc .opt ul li { margin-bottom: 4px; }
.vdc .extras { margin-top: 18px; display: flex; gap: 26px; flex-wrap: wrap; font-size: 15px; color: #3a4255; }
.vdc .extras b { color: var(--navy); font-weight: 500; }
.vdc .related { margin-top: 0; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 20px 24px; border-radius: 10px; background: var(--tint); border-left: 5px solid var(--sun); }
@media (max-width: 760px) {
.vdc .related { grid-template-columns: 1fr; }
}
.vdc .related b { font: 600 17px var(--head); color: var(--navy); }
.vdc .related p { margin: 4px 0 0; color: #3a4255; }
.vdc .tag-review { display: inline-block; background: var(--sun); color: #3d2a00; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 3px; vertical-align: middle; }
.vdc .tests-list { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.vdc .tests-list a { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--rule); text-decoration: none; color: inherit; background: #fff; }
.vdc .tests-list a:first-child { border-top: 0; }
.vdc .tests-list a:hover { background: var(--tint); }
.vdc .tests-list b { color: var(--navy); font-weight: 500; }
.vdc .tests-list span { display: block; font-size: 14px; color: var(--muted); }
.vdc .tests-list em { font-style: normal; color: var(--brand-dark); font-weight: 500; white-space: nowrap; align-self: center; }
.vdc .timing { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 760px) {
.vdc .timing { grid-template-columns: 1fr; }
}
.vdc .timing input[type=date] { font: 15px var(--body); padding: 10px 12px; border: 1px solid var(--brand); border-radius: 6px; }
.vdc .timing .res { background: #fff; border-radius: 10px; padding: 18px 20px; border-left: 5px solid var(--brand); }
.vdc .timing .res b { display: block; font: 600 17px var(--head); color: var(--navy); margin-bottom: 4px; }
.vdc .timing .res p { margin: 0 0 8px; color: #3a4255; font-size: 15px; }
.vdc .placeholder-doc { background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.4); border-radius: 8px; padding: 2px 8px; }

/* ---- The VitaLync homepage look: deep blue gradient hero, Poppins 800 headings, #0057b8 buttons with 8px corners,
   white / #f8fafc sections, cards with a thin slate border ---- */
.vdc h1, .vdc h2 { font-weight: 800; letter-spacing: -0.02em; }
.vdc h3 { font-weight: 700; }
.vdc .block h2 { font-size: 32px; line-height: 1.2; color: var(--navy); }
.vdc .block h2:before { display: none; }
.vdc .block h2 { padding-top: 0; }
.vdc .block .sub { color: var(--muted); font-size: 16.5px; }
.vdc .block { border-bottom: 0; padding: 64px 0; }
.vdc .btn { font: 700 15px var(--body); border-radius: 8px; padding: 13px 26px; transition: background .15s, color .15s, border-color .15s; }
.vdc .btn-main, .vdc .hero-band .btn-main { background: var(--brand); color: #fff; border-color: var(--brand); }
.vdc .btn-main:hover, .vdc .hero-band .btn-main:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.vdc .btn-line { background: #fff; border-color: var(--brand); color: var(--brand); }
.vdc .btn-line:hover { background: var(--brand); color: #fff; }

/* hero */
.vdc .hero-band { background: var(--hero); color: #fff; }
.vdc .hero-band .intro { border-bottom: 0; padding: 30px 24px 60px; }
.vdc .intro { padding-left: 24px; padding-right: 24px; }
.vdc .hero-band .crumbs, .vdc .hero-band .crumbs a { color: rgba(255,255,255,.7); }
.vdc .hero-band h1 { color: #fff; font-size: clamp(30px, 3.7vw, 43.5px); line-height: 1.12; }
.vdc .hero-band h1 .hl { color: var(--mint); }
.vdc .hero-band .standfirst { color: rgba(255,255,255,.88); font-size: 17.3px; line-height: 1.65; }
.vdc .hero-band .textlink { color: #fff; }
.vdc .hero-band .btn-main { background: #fff; color: var(--brand); border-color: #fff; }
.vdc .hero-band .btn-main:hover { background: var(--tint); color: var(--brand-dark); border-color: var(--tint); }
.vdc .hero-band .btn-line { background: transparent; color: #fff; border-color: #fff; }
.vdc .hero-band .btn-line:hover { background: #fff; color: var(--brand); }
.vdc .hero-band .facts { border-top: 0; padding-top: 0; margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; color: #fff; }
.vdc .hero-band .facts span { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
     border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 600; color: #fff; }
.vdc .hero-band .facts span:before { display: none; }
.vdc .hero-band .facts strong { color: #fff; font-weight: 700; }
.vdc .hero-photo img, .vdc .hero-band .wm2-form-card { border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.28); }

/* how it works: a light section with blue numbered steps */
.vdc .band-navy { background: var(--paper); color: var(--ink); }
.vdc .band-navy h2, .vdc .band-navy h3 { color: var(--navy); }
.vdc .band-navy .sub, .vdc .band-navy .steps p { color: var(--muted); }
.vdc .band-navy .steps { border-top: 0; gap: 16px; }
.vdc .band-navy .steps li { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 22px 20px; }
.vdc .band-navy .steps .n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; }
.vdc .band-navy .steps h3 .cost { display: inline-block; color: var(--brand); background: var(--tint); padding: 2px 10px; border-radius: 999px; margin-top: 6px; font-weight: 600; }
.vdc .band-navy .why h3 { color: var(--navy); }
.vdc .band-navy .why p { color: var(--muted); }
.vdc .band-navy .options { border-color: var(--rule); background: #fff; }
.vdc .band-navy .options div { border-color: var(--rule); }
.vdc .band-navy .options b { color: var(--brand); }
.vdc .band-navy .options span { color: var(--muted); }
.vdc .band-tint { background: var(--paper); }

/* closing band in the hero gradient */
.vdc .closing-band { background: var(--hero); color: #fff; }
.vdc .closing-band h2 { color: #fff; }
.vdc .closing-band .btn-main { background: #fff; color: var(--brand); border-color: #fff; }
.vdc .closing-band .btn-main:hover { background: var(--tint); color: var(--brand-dark); }

/* tables and cards */
.vdc .cmp-wrap { border-radius: 14px; border-color: var(--rule); }
.vdc .cmp .code { background: var(--brand); border-radius: 999px; padding: 3px 10px; }
.vdc .tests .price, .vdc .cmp .tprice { color: var(--brand); }
.vdc .show-all { border-radius: 8px; font-weight: 700; color: var(--brand); }

/* phones */
@media (max-width: 760px) {
  .vdc .wrap { padding: 0 16px; }
  .vdc .crumbs { padding-top: 16px; font-size: 12.5px; }
  .vdc .intro, .vdc .hero-band .intro { padding: 18px 16px 40px; gap: 26px; }
  .vdc .hero-band h1 { font-size: 30px; line-height: 1.15; margin-bottom: 14px; }
  .vdc .hero-band .standfirst { font-size: 16px; margin-bottom: 20px; }
  .vdc .actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .vdc .actions .btn { text-align: center; width: 100%; }
  .vdc .actions .textlink { text-align: center; }
  .vdc .hero-band .facts { margin-top: 20px; gap: 6px; }
  .vdc .hero-band .facts span { font-size: 11.5px; padding: 4px 11px; }
  .vdc .hero-photo img, .vdc .hero-band .wm2-form-card { border-radius: 16px; }
  .vdc .block { padding: 44px 0; }
  .vdc .block h2, .vdc .closing h2 { font-size: 25px; }
  .vdc .block .sub { font-size: 15.5px; margin-bottom: 22px; }
  .vdc .band-navy .steps li { padding: 18px 16px; }
  .vdc .closing-band .closing { padding: 40px 16px; }
  /* test comparison: narrow sticky label column, swipe across the tests */
  .vdc .cmp { min-width: 600px; }
  .vdc .cmp tbody th, .vdc .cmp thead .corner { position: sticky; left: 0; z-index: 1; width: 128px; min-width: 128px; font-size: 13.5px; padding: 10px 12px; line-height: 1.35; }
  .vdc .cmp tbody th { background: #fff; box-shadow: 1px 0 0 var(--rule); }
  .vdc .cmp tr.grp th { background: var(--tint); }
  .vdc .cmp thead th { padding: 14px 12px; }
  .vdc .cmp .tname { font-size: 14.5px; }
  .vdc .cmp .tprice { font-size: 22px; }
}