/* =========================================================================
   Vital surfaces — authored at 1280x800 like every other mock, scaled by --k.
   Rebuilt from Vital's own product screenshots: Inter, #1E40AF wordmark,
   white cards on a pale ground, the key figure carried in the purple->magenta
   gradient they use for the number in a sentence.
   ========================================================================= */
.mk--vital{
  font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:
    radial-gradient(900px 520px at 84% 8%, #E6EDFB 0%, rgba(230,237,251,0) 70%),
    linear-gradient(160deg,#F4F6FB 0%,#EDF1F8 100%);
  letter-spacing:-.011em;
}
.mk--vital *{box-sizing:border-box;}

/* -------------------------------------------------------------- phone shell */
/* Two devices, so the stage is filled by product rather than by ground, and the
   screen content stays legible when the mock scales into a rail thumbnail. */
.vph{position:absolute; top:64px; width:376px; height:752px;
  background:#0B0B0D; border-radius:56px; padding:11px;
  box-shadow:0 40px 90px rgba(15,32,72,.20), 0 4px 14px rgba(15,32,72,.10);}
.vph--a{left:176px;}
.vph--b{left:728px;}
.vph__scr{position:relative; width:100%; height:100%; background:#fff; border-radius:46px; overflow:hidden;
  display:flex; flex-direction:column;}
.vph__sb{height:40px; flex:none; display:flex; align-items:center; padding:0 26px; font-size:15px; font-weight:600; color:#0B0B0D;}
.vph__sb b{font-weight:600;}
.vph__notch{position:absolute; left:50%; top:9px; transform:translateX(-50%); width:112px; height:29px;
  background:#0B0B0D; border-radius:16px;}
.vph__sig{margin-left:auto; display:flex; align-items:center; gap:6px;}
.vph__sig i{display:block; width:16px; height:11px; border:1.4px solid #0B0B0D; border-radius:2px;}
.vph__sig i.w{border:0; width:15px; height:11px;
  background:radial-gradient(circle 3px at 50% 100%, #0B0B0D 55%, transparent 56%),
             radial-gradient(circle 7.5px at 50% 100%, transparent 60%, #0B0B0D 61%, #0B0B0D 74%, transparent 75%),
             radial-gradient(circle 12px at 50% 100%, transparent 62%, #0B0B0D 63%, #0B0B0D 74%, transparent 75%);}

/* vital wordmark: lowercase, tight, their blue */
.vwm{font-weight:800; font-size:29px; letter-spacing:-.05em; color:#1E40AF; line-height:1;}
.vph__brand{height:52px; flex:none; display:flex; align-items:center; padding:0 22px; border-bottom:1px solid #EEF1F6;}

.vbody{flex:1; overflow:hidden; position:relative; background:#fff;}
.vfeed{position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column;
  transition:transform 1s cubic-bezier(.3,.72,.2,1);}
.vgap{height:11px; flex:none; background:#EEF2F8; border-top:1px solid #E4EAF3; border-bottom:1px solid #E4EAF3;}

/* the tab bar */
.vtabs{height:60px; flex:none; display:flex; border-top:1px solid #E9EDF3; background:#fff;}
.vtabs div{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:12.5px; color:#8A9099; position:relative;}
.vtabs div.on{color:#1E40AF;}
.vtabs em{display:block; width:19px; height:18px; font-style:normal; position:relative;}
/* calendar */
.vtabs .ic-cal{border:1.7px solid currentColor; border-radius:4px;}
.vtabs .ic-cal::before{content:""; position:absolute; left:-1.7px; right:-1.7px; top:-1.7px; height:5.4px;
  background:currentColor; border-radius:4px 4px 0 0;}
.vtabs .ic-cal::after{content:""; position:absolute; left:3px; right:3px; top:8.4px; height:1.6px;
  background:currentColor; box-shadow:0 4px 0 0 currentColor;}
/* bars */
.vtabs .ic-bar::before{content:""; position:absolute; left:1px; bottom:0; width:3px; height:11px;
  background:currentColor; border-radius:1.5px; box-shadow:5px 0 0 0 currentColor;}
.vtabs .ic-bar::after{content:""; position:absolute; left:11px; bottom:0; width:3px; height:17px;
  background:currentColor; border-radius:1.5px; box-shadow:5px 0 0 0 currentColor;}
.vtabs u{position:absolute; top:6px; right:26px; background:#E5322D; color:#fff; width:17px; height:17px;
  border-radius:50%; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; text-decoration:none;}

/* the hero band */
.vhero{height:150px; flex:none; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#22354F 0%,#16233A 62%,#101B2E 100%);}
.vhero::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(180px 150px at 22% 34%, rgba(150,175,205,.42) 0%, rgba(150,175,205,0) 68%),
    radial-gradient(150px 130px at 70% 26%, rgba(120,150,190,.34) 0%, rgba(120,150,190,0) 70%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 26px);}
.vhero__c{position:absolute; left:22px; bottom:42px; color:#fff;}
.vhero__c b{display:block; font-size:23px; font-weight:600; letter-spacing:-.02em;}
.vhero__c span{display:block; margin-top:5px; font-size:14.5px; text-decoration:underline; text-underline-offset:3px; opacity:.95;}

/* the white card language */
.vcard{margin:0 20px; background:#fff; border-radius:15px; padding:18px 20px 16px;
  box-shadow:0 5px 20px rgba(16,32,66,.11), 0 0 0 1px rgba(16,32,66,.045);}
.vcard--lift{margin-top:-26px; position:relative; z-index:2;}
.vcard__h{font-size:19.5px; font-weight:600; line-height:1.3; letter-spacing:-.022em; color:#0C1220; margin:0;}
/* the number-in-a-sentence treatment, straight from their screens */
.vfig{background:linear-gradient(94deg,#7B27C4 0%,#A81C88 100%); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-weight:700;}
.vlive{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:13px; font-size:14px; color:#4A515C;}
.vlive b{color:#0C1220; font-weight:600;}
.vlive i{width:15px; height:15px; border-radius:50%; border:2.4px solid #0E9E7E; display:block; position:relative;}
.vlive i::after{content:""; position:absolute; inset:3px; border-radius:50%; background:#0E9E7E;}

/* the busyness histogram */
.vbz{margin-top:11px; height:56px; display:flex; align-items:flex-end; justify-content:center; gap:5px;}
.vbz i{width:11px; border-radius:3px; background:#DCE7F8; display:block;}
.vbz i.on{background:#1E63D8;}
.vbzx{display:flex; justify-content:space-between; margin-top:7px; padding:0 4px; font-size:11.5px; color:#93999F;
  border-top:1px solid #EEF1F6; padding-top:7px;}

/* -------------------------------------------------- the price card we add */
.vprice{margin:14px 20px 0; border-radius:15px; padding:18px 20px 19px; background:#fff;
  box-shadow:0 6px 22px rgba(16,32,66,.12), 0 0 0 1px rgba(16,32,66,.05);
  opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);}
.vprice.on{opacity:1; transform:none;}
.vprice__k{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:#8A9099; margin-bottom:10px;}
.vprice__k b{margin-left:auto; display:flex; align-items:center; gap:6px; font-size:10.5px; color:#1E40AF; letter-spacing:.04em;}
.ssdot{display:block; width:11px; height:11px; flex:none;
  background:
    radial-gradient(circle 1.5px at 1.6px 5.5px,#1E40AF 99%,transparent 100%),
    radial-gradient(circle 1.5px at 5.5px 1.6px,#1E40AF 99%,transparent 100%),
    radial-gradient(circle 1.5px at 5.5px 9.4px,#1E40AF 99%,transparent 100%),
    radial-gradient(circle 1.5px at 9.4px 5.5px,#1E40AF 99%,transparent 100%);}
.vprice__rows{margin-top:14px; border-top:1px solid #EEF1F6;}
.vprice__r{display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid #F3F5F9; font-size:13.5px; color:#4A515C;}
.vprice__r i{font-style:normal; display:block; font-size:11.5px; color:#98A0AA; margin-top:2px;}
.vprice__r b{margin-left:auto; color:#0C1220; font-weight:600; font-size:14px; white-space:nowrap;}
.vprice__r--tot b{color:#1E40AF; font-size:16px;}
.vbtns{display:flex; gap:9px; margin-top:15px;}
.vbtn{flex:1; height:44px; border-radius:24px; background:#1E56D6; color:#fff; font-size:15px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px;}
.vbtn--ghost{background:#fff; color:#3C434D; border:1.5px solid #D6DCE5; font-weight:500; flex:0 0 108px;}

/* --------------------------------------------------------- 02 vital access */
.vhead{padding:18px 22px 14px; border-bottom:1px solid #EEF1F6; flex:none;}
.vhead h4{margin:0; font-size:22px; font-weight:600; letter-spacing:-.024em; color:#0C1220;}
.vhead p{margin:6px 0 0; font-size:14px; color:#7A828C;}
.vstep{display:flex; gap:12px; padding:16px 22px 12px; flex:none;}
.vstep__n{flex:none; width:25px; height:25px; border-radius:50%; background:#1E56D6; color:#fff; font-size:13.5px;
  font-weight:600; display:flex; align-items:center; justify-content:center;}
.vstep h5{margin:0; font-size:16.5px; font-weight:600; line-height:1.32; letter-spacing:-.018em; color:#0C1220;}
.vstep p{margin:5px 0 0; font-size:13px; color:#8A9099;}
.vdoc{margin:0 22px; border:1px solid #E4E9F0; border-radius:13px; padding:16px 17px; background:#fff;}
.vdoc__top{display:flex; gap:13px; align-items:center;}
.vava{width:52px; height:52px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:600; color:#3F5C86; background:linear-gradient(150deg,#DCE6F5,#C7D6ED);}
.vdoc__id b{display:block; font-size:16.5px; font-weight:600; letter-spacing:-.02em; color:#0C1220;}
.vdoc__id span{display:block; font-size:14px; color:#4A515C; margin-top:1px;}
.vdoc__id i{display:block; font-style:normal; font-size:12.5px; color:#98A0AA; margin-top:2px;}
.vacc{display:flex; align-items:center; gap:8px; margin-top:13px; font-size:14px; color:#0C8A5E;}
.vacc em{width:17px; height:17px; border-radius:50%; border:1.7px solid #0C8A5E; position:relative; flex:none; font-style:normal;}
.vacc em::after{content:""; position:absolute; left:4.4px; top:3.4px; width:4.5px; height:8px;
  border:solid #0C8A5E; border-width:0 1.8px 1.8px 0; transform:rotate(43deg);}
.vrate{margin-top:12px; border-top:1px solid #F0F2F6;}
.vrow{display:flex; align-items:center; padding:8px 0; font-size:13.5px; color:#4A515C; border-bottom:1px solid #F5F7FA;}
.vrow b{margin-left:auto; font-weight:600; color:#0C1220; font-size:14px;}
.vstars{display:flex; gap:2.5px; margin-left:auto; margin-right:11px;}
.vstars s{width:14px; height:14px; display:block; text-decoration:none; background:#F5B21D;
  clip-path:polygon(50% 0,61.8% 35.5%,100% 35.5%,69% 57.5%,80.9% 100%,50% 73%,19.1% 100%,31% 57.5%,0 35.5%,38.2% 35.5%);}
.vstars s.off{background:#E3E7ED;}
/* the cost row we add, in the same row language */
.vcost{display:flex; align-items:center; padding:11px 0 3px; border-bottom:1px solid #F5F7FA;
  opacity:0; transform:translateY(9px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);}
.vcost.on{opacity:1; transform:none;}
.vcost span{font-size:13.5px; color:#4A515C;}
.vcost i{display:block; font-style:normal; font-size:11.5px; color:#98A0AA; margin-top:3px;}
.vcost b{margin-left:auto; font-size:21px; font-weight:700; letter-spacing:-.025em;
  background:linear-gradient(94deg,#7B27C4 0%,#A81C88 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.vdist{display:flex; align-items:center; padding:11px 0 0; font-size:13.5px; color:#4A515C;}
.vdist b{margin-left:auto; font-weight:600; color:#0C1220;}

/* ------------------------------------------------ 03 care finder, desktop */
.vfx{position:absolute; inset:0; background:#F7F9FC; display:flex; flex-direction:column;
  font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:-.011em;}
.vfx__nav{height:64px; flex:none; background:#fff; border-bottom:1px solid #E7ECF3; display:flex; align-items:center;
  gap:15px; padding:0 34px;}
.vfx__nav .vwm{font-size:27px;}
.vfx__nav em{font-style:normal; font-size:16px; color:#3C434D; padding-left:15px; border-left:1px solid #E0E6EE;}
.vfx__nav u{margin-left:auto; text-decoration:none; font-size:14.5px; color:#5C6672;}
.vfx__srch{flex:none; display:flex; gap:11px; align-items:center; padding:20px 34px 15px;}
.vfx__f{height:48px; background:#fff; border:1px solid #DDE4EE; border-radius:26px; display:flex; align-items:center;
  gap:11px; padding:0 22px; font-size:15.5px; color:#0C1220;}
.vfx__f span{color:#98A0AA;}
.vfx__f.ins{border-color:#B9CBEA; background:#F2F6FE; color:#1E40AF;}
.vfx__go{height:48px; padding:0 30px; border-radius:26px; background:#1E56D6; color:#fff; font-size:15.5px;
  font-weight:600; display:flex; align-items:center;}
.vfx__cols{display:flex; padding:4px 34px 8px; font-size:11.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:#98A0AA;}
.vfx__cols b{margin-left:auto; width:210px; font-weight:600;}
.vfx__list{flex:1; padding:0 34px; overflow:hidden;}
.vfr{display:flex; align-items:center; gap:17px; background:#fff; border:1px solid #E7ECF3; border-radius:14px;
  padding:15px 20px; margin-bottom:10px;}
.vfr .vava{width:56px; height:56px; font-size:17px;}
.vfr__id b{display:block; font-size:18px; font-weight:600; letter-spacing:-.022em; color:#0C1220;}
.vfr__id span{display:block; font-size:14.5px; color:#4A515C; margin-top:2px;}
.vfr__id i{display:block; font-style:normal; font-size:13px; color:#98A0AA; margin-top:3px;}
.vfr__m{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:14px; color:#4A515C;}
.vfr__p{width:210px; flex:none; text-align:right; padding-left:22px; border-left:1px solid #EEF1F6;}
.vfr__p em{display:block; font-style:normal; font-size:11.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:#98A0AA;}
.vfr__p b{display:block; margin-top:4px; font-size:26px; font-weight:700; letter-spacing:-.03em;
  background:linear-gradient(94deg,#7B27C4 0%,#A81C88 100%); -webkit-background-clip:text; background-clip:text;
  color:transparent; opacity:0; transition:opacity .5s ease;}
.vfr__p.on b{opacity:1;}
.vfr__p i{display:block; font-style:normal; font-size:12px; color:#98A0AA; margin-top:2px; opacity:0; transition:opacity .5s ease .1s;}
.vfr__p.on i{opacity:1;}
.vfr__sh{position:absolute; right:0; top:4px; width:120px; height:26px; border-radius:6px; margin-left:auto;
  background:linear-gradient(90deg,#EEF1F6 25%,#E2E7EF 37%,#EEF1F6 63%); background-size:400% 100%;
  animation:vsh 1.3s linear infinite;}
@keyframes vsh{0%{background-position:100% 0}100%{background-position:0 0}}
.vfx__foot{flex:none; padding:12px 34px 18px; font-size:12.5px; color:#8A9099; display:flex; align-items:center; gap:9px;}

/* care finder is a browser, so it fills the stage edge to edge */
.mk--vitalfinder .bz{inset:0;}
.mk--vitalfinder{background:linear-gradient(160deg,#F4F6FB 0%,#EDF1F8 100%);}
.mk--vitalfinder .bz__tabs{border-radius:0;}

/* their visit-progress rail, on the first urgent care screen */
.vprog{padding:18px 22px 0;}
.vprog h4{margin:0 0 14px; font-size:20px; font-weight:600; letter-spacing:-.022em; color:#0C1220;}
.vp{display:flex; align-items:center; gap:13px; padding:11px 0; font-size:15.5px; color:#5B626C;
  border-bottom:1px solid #F3F5F9; position:relative;}
.vp b{font-weight:400;}
.vp em{margin-left:auto; font-style:normal; color:#B6BCC5; font-size:19px;}
.vp__d{width:17px; height:17px; border-radius:50%; background:#E4E8EE; flex:none; position:relative;}
.vp__d::after{content:""; position:absolute; inset:5px; border-radius:50%; background:#8A9099;}
.vp__d.is-on{background:#DCE7F8;}
.vp__d.is-on::after{background:#1E56D6;}
.vp:first-of-type b{color:#1E56D6; font-weight:600;}

/* the booked state on the second access screen */
.vdone{margin:16px 22px 0; border:1px solid #E4E9F0; border-radius:13px; padding:17px 17px 16px; background:#fff;}
.vdone__k{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:#0C8A5E;}
.vdone__k em{width:17px; height:17px; border-radius:50%; border:1.7px solid #0C8A5E; position:relative; flex:none; font-style:normal;}
.vdone__k em::after{content:""; position:absolute; left:4.4px; top:3.4px; width:4.5px; height:8px;
  border:solid #0C8A5E; border-width:0 1.8px 1.8px 0; transform:rotate(43deg);}
.vdone h4{margin:11px 0 15px; font-size:21px; font-weight:600; letter-spacing:-.024em; color:#0C1220;}
.vdone .vrow:first-child b{font-size:19px; letter-spacing:-.025em;
  background:linear-gradient(94deg,#7B27C4 0%,#A81C88 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}