:root{
  --blue:#1B63E3;--blue-600:#1551C4;--blue-700:#1142A0;--blue-50:#EDF3FE;--blue-100:#DBE7FD;
  --sky:#37A4F5;--mint:#16B8A6;--mint-50:#E4F7F4;
  --ink:#0C1B33;--ink-2:#0C1B33;--ink-3:#0C1B33;
  --bg:#F4F8FE;--bg-2:#EAF1FB;--grey-50:#F3F4F6;--surface:#FFFFFF;--line:#E4EBF5;--line-2:#D4DEEC;
  --amber:#F5A524;--coral:#F76C5E;
  --shadow:0 2px 10px rgba(12,27,51,.05);--shadow-card:0 14px 40px rgba(27,99,227,.10);--shadow-lg:0 26px 70px rgba(12,27,51,.14);
  --r:20px;--r-sm:14px;--r-lg:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--surface);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,.display{font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0}
h1{font-size:clamp(24px,3vw,34px)}
h2{font-size:clamp(20px,2.4vw,28px)}
h3{font-size:clamp(17px,1.8vw,20px)}
a{text-decoration:none;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--blue);background:var(--blue-50);padding:7px 15px;border-radius:100px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;padding:14px 26px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:.2s;white-space:nowrap}
.btn i{font-size:18px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(27,99,227,.28)}
.btn-primary:hover{background:var(--blue-600);transform:translateY(-2px);box-shadow:0 12px 30px rgba(27,99,227,.36)}
.btn-light{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-light:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--blue)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.btn-ghost-w{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-w:hover{background:#fff;color:var(--blue)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-block{width:100%;justify-content:center}
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.3s;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
/* Scrolled-state shadow. A box-shadow is uniform across the full width, so
   it cannot be heavier in the middle; this is a gradient strip hung under
   the header instead — an ellipse anchored at top-centre, densest below the
   middle and falling away towards both ends. */
header::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;pointer-events:none;
  opacity:0;transition:opacity .3s ease;
  background:radial-gradient(60% 100% at 50% 0%,
    rgba(12,27,51,.22) 0%, rgba(12,27,51,.12) 40%, rgba(12,27,51,.04) 72%, rgba(12,27,51,0) 100%)}
header.scrolled::after{opacity:1}
@media (prefers-reduced-motion:reduce){header::after{transition:none}}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:11px;font-family:'Sora',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em}
/* 24, not the original 42. The old logo was a portrait PNG that
   object-fit:contain letterboxed inside its box, so it never filled the
   width; the square SVG mark does, which made it tower over the wordmark.
   Sized against the rendered glyph ink (TextMetrics, not font-size maths):
   42px gave 2.04x the wordmark, 34px 1.65x, 28px 1.36x. 24px lands at
   ~1.15x, the proportion in the reference lockup. */
.logo-mark{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.logo-mark i{color:#fff;font-size:23px}
.logo .q{color:var(--blue)}
.logo .brand{display:inline-block}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-2);transition:.18s;position:relative}
.nav-links a:hover{color:var(--blue)}
.nav-links a.active{color:var(--blue);font-weight:600}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-26px;height:3px;background:var(--blue);border-radius:3px 3px 0 0}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .signin{font-size:15px;font-weight:600;color:var(--ink)}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);align-items:center;justify-content:center;cursor:pointer;font-size:21px}
@media(max-width:980px){
  .nav-links{display:none}
  .burger{display:flex}
  /* Compact sign-in pill in the header alongside the burger. */
  .nav-cta{gap:8px}
  .nav-cta .signin{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--blue);border:1.5px solid var(--blue);padding:8px 14px;border-radius:100px;text-decoration:none;background:#fff;line-height:1}
  .nav-cta .signin:hover{background:var(--blue);color:#fff}
}
.mobile-menu{position:fixed;inset:0;z-index:120;background:#fff;transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility 0s linear .3s;padding:88px 28px 28px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.mobile-menu.open{transform:none;visibility:visible;transition:transform .3s,visibility 0s}
.mobile-menu a{font-family:'Sora';font-size:18px;font-weight:600;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.mobile-menu .btn{margin-top:20px}
.mm-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;font-size:22px;transition:.15s;z-index:2}
.mm-close:hover{border-color:var(--blue);color:var(--blue)}
.mm-close i{line-height:1}
/* page header band */
.page-hero{padding:128px 0 56px;background:#fff;text-align:center}
.page-hero h1{font-size:clamp(26px,3.2vw,38px);font-weight:800;letter-spacing:-.03em;margin:14px 0 12px}
.page-hero p{font-size:18px;color:var(--ink-2);max-width:560px;margin:0 auto}
.crumb{font-size:13px;color:var(--ink-3)}
.crumb a:hover{color:var(--blue)}
.section{padding:80px 0}
.section.tint{background:var(--grey-50)}
.sec-head{max-width:640px;margin-bottom:48px}
.sec-head.center{margin:0 auto 48px;text-align:center}
.sec-head h2{font-size:clamp(22px,2.8vw,30px);margin:12px 0 10px}
.sec-head p{font-size:16.5px;color:var(--ink-2)}
/* Long-form typography used by /privacy, /terms, /help. */
.legal{max-width:820px;margin:0 auto;color:var(--ink-2);font-size:15.5px;line-height:1.7}
.legal h2{font-size:20px;color:var(--ink);margin:34px 0 10px;letter-spacing:-.01em}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:16px;color:var(--ink);margin:22px 0 6px}
.legal p,.legal ul{margin:0 0 12px}
.legal ul,.legal ol{padding-left:22px}
.legal ol{margin:0 0 12px}
.legal ol li{margin-bottom:6px}
.legal-table{overflow-x:auto;margin:6px 0 16px;background:#fff;border:1px solid var(--line);border-radius:14px}
.legal-table table{width:100%;border-collapse:collapse;font-size:14.5px}
.legal-table th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);background:var(--blue-50);padding:10px 14px}
.legal-table td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink)}
.legal-table td:first-child{font-weight:600;width:42%}
.legal ul li{margin-bottom:6px}
.legal .last-updated{display:inline-flex;align-items:center;gap:6px;background:var(--blue-50);color:var(--blue);font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:100px;margin-bottom:26px}
.legal a{color:var(--blue);text-decoration:underline}
.legal-contact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px 6px}
.legal-contact p{margin:0 0 10px}
.legal-contact i{color:var(--blue);margin-right:4px}
.legal-closing{margin-top:22px;font-weight:600;color:var(--ink)}
.pol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;max-width:1040px;margin:0 auto}
.pol-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;color:var(--ink);transition:.2s}
@media (hover:hover){.pol-card:hover{border-color:var(--blue);box-shadow:var(--shadow-card);transform:translateY(-2px)}}
.pol-card .ic{width:46px;height:46px;border-radius:13px;background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:23px;margin-bottom:14px}
.pol-card h3{font-size:16.5px;margin:0 0 6px}
.pol-card p{font-size:14px;line-height:1.55;margin:0 0 14px;flex:1}
.pol-card .more{font-size:13.5px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:5px}
.pol-more{max-width:1040px;margin:40px auto 0}
.pol-more h2{font-size:19px;margin:0 0 12px}
.pol-more ul{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pol-more li + li{border-top:1px solid var(--line)}
.pol-more a{display:flex;align-items:center;gap:14px;padding:14px 18px;color:var(--ink)}
.pol-more a:hover{background:var(--blue-50)}
.pol-more a > i:first-child{color:var(--blue);font-size:20px;flex:none}
.pol-more a span{flex:1}
.pol-more b{display:block;font-size:14.5px}
.pol-more small{display:block;font-size:13px;margin-top:1px}
.pol-back{margin-bottom:18px}
.pol-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:36px;max-width:1140px;margin:0 auto;align-items:start}
.pol-layout .legal{max-width:none;margin:0}
.pol-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;max-height:calc(100vh - 120px);overflow-y:auto}
.pol-nav a{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border-radius:10px;font-size:13.5px;line-height:1.35;color:var(--ink);text-decoration:none}
.pol-nav a i{font-size:17px;color:var(--blue);flex:none;margin-top:1px}
.pol-nav a:hover{background:var(--blue-50)}
.pol-nav a.on{background:var(--blue);color:#fff;font-weight:600}
.pol-nav a.on i{color:#fff}
.pol-nav .pol-nav-all{font-weight:700;color:var(--blue);border-bottom:1px solid var(--line);border-radius:10px 10px 0 0;margin-bottom:4px;padding-bottom:10px}
.pol-nav-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:10px 10px 4px}
.pol-jump{display:none}
@media(max-width:900px){
  .pol-layout{grid-template-columns:1fr;gap:18px}
  .pol-nav{display:none}
  .pol-jump{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
  .pol-jump select{padding:11px 12px;border:1px solid var(--line-2);border-radius:12px;background:#fff;font:inherit;font-size:14px;font-weight:500;color:var(--ink)}
}
.pol-back a{text-decoration:none!important;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.pol-pending{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.pol-pending > i{font-size:30px;color:var(--blue);flex:none}
.pol-pending b{font-size:16px;color:var(--ink)}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;font-family:'Sora',sans-serif;font-weight:600;font-size:15.5px;color:var(--ink);list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q i{color:var(--blue);font-size:18px;transition:transform .18s}
.faq-item[open] .faq-q i{transform:rotate(180deg)}
.faq-a{padding:0 22px 20px;color:var(--ink-2);font-size:14.5px;line-height:1.65}
.faq-a p{margin:0 0 10px}
.faq-a p:last-child{margin:0}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:.25s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:transparent}
.svc-ic{width:58px;height:58px;border-radius:17px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.svc-more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:600;font-size:14px;color:var(--blue);cursor:pointer;transition:.15s}
.svc-more:hover{gap:10px}
.svc-more i{font-size:15px}
.svc-hero-ic{width:66px;height:66px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:30px;background:var(--blue-50);color:var(--blue)}
.svd-wrap{max-width:780px}
.svd-wrap .eyebrow,.svd-wrap h2{text-align:left}
.svd-lead{font-size:18px;line-height:1.72;color:var(--ink-2);margin-top:8px}
.svd-stats{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.svd-stat{flex:1;min-width:120px}
.svd-stat .v{font-family:'Sora',sans-serif;font-weight:800;font-size:30px;color:var(--blue);line-height:1}
.svd-stat .l{font-size:13.5px;color:var(--ink-3);margin-top:8px;line-height:1.4}
.svd-points{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.svd-points li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.svd-points li strong{color:var(--ink)}
.svd-tick{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#123E96;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;margin-top:1px}
.svd-flow{display:flex;flex-wrap:wrap;gap:28px;margin-top:10px;justify-content:center}
.svd-fstep{flex:1;min-width:220px;max-width:300px;text-align:center;position:relative}
.svd-fnum{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;position:relative;z-index:1}
.svd-fstep h4{font-size:16.5px;margin:0 0 7px;color:var(--ink)}
.svd-fstep p{font-size:14px;color:var(--ink-3);margin:0;line-height:1.55}
@media(min-width:760px){.svd-flow{flex-wrap:nowrap}.svd-fstep:not(:last-child)::after{content:'';position:absolute;top:27px;left:calc(50% + 40px);width:calc(100% - 80px);height:2px;background:var(--line-2);z-index:0}}
.svc-ic i{font-size:28px}
.svc h3{font-size:20px;margin-bottom:9px}
.svc p{font-size:14.5px;color:var(--ink-2)}
@media(max-width:920px){.svc-grid{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{position:relative;padding-top:6px}
.step-num{font-family:'Sora';font-size:16px;font-weight:700;color:#fff;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--sky));display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 8px 18px rgba(27,99,227,.28)}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:14px;color:var(--ink-2)}
.step::before{content:'';position:absolute;top:23px;left:58px;right:-9px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
.step:last-child::before{display:none}
@media(max-width:920px){.steps{grid-template-columns:1fr 1fr}.step::before{display:none}}
.doc-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;justify-content:center}
.doc-filter{font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:100px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer;transition:.18s}
.doc-filter:hover{border-color:var(--blue)}
.doc-filter.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.doc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.25s}
.doc:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:transparent}
.doc-photo{position:relative;height:200px;background:linear-gradient(160deg,var(--blue-50),var(--bg-2));overflow:hidden}
.doc-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.doc-status{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;padding:4px 11px;border-radius:100px;background:#fff;color:var(--mint);box-shadow:var(--shadow)}
.doc-fav{position:absolute;top:14px;left:14px;width:32px;height:32px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);color:var(--ink-3);cursor:pointer}
.doc-body{padding:18px 20px 20px}
.doc-body h3{font-size:17px;margin-bottom:2px}
.doc-body .spec{font-size:13px;color:var(--blue);font-weight:600}
.doc-meta{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);margin:12px 0;font-size:12px;color:var(--ink-2)}
.doc-meta .m{display:flex;align-items:center;gap:5px}
.doc-meta .m i{font-size:15px;color:var(--ink-3)}
.doc-fee{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.doc-fee .f{font-family:'Sora';font-size:18px;font-weight:700}
.doc-fee .f span{font-size:12px;color:var(--ink-3);font-weight:400;font-family:'DM Sans'}
@media(max-width:1100px){.doc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.doc-grid{grid-template-columns:1fr}}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.book-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-card)}
.book-card h3{font-size:23px;margin-bottom:5px}
.book-card .sub{font-size:14px;color:var(--ink-3);margin-bottom:22px}
.bf{margin-bottom:16px}
.bf label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.bf-input{width:100%;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:13px;font-size:14.5px;font-family:inherit;background-color:#fff;color:var(--ink)}
.bf-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-50)}
.bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.slot-row{display:flex;gap:8px;flex-wrap:wrap}
.slot{flex:1;min-width:70px;text-align:center;padding:11px 6px;border:1.5px solid var(--line-2);border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;background:#fff}
.slot:hover{border-color:var(--blue)}
.slot.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.slot.off{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.book-checks{display:flex;flex-direction:column;gap:14px}
.book-check{display:flex;gap:12px;align-items:center;font-size:15px;font-weight:500}
.book-check .ic{width:32px;height:32px;border-radius:9px;background:var(--mint-50);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.book-check .ic i{color:var(--mint);font-size:18px}
@media(max-width:920px){.book-grid{grid-template-columns:1fr;gap:40px}}
.form-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-card)}
.steps-bar{display:flex;align-items:center;gap:6px;margin-bottom:26px}
.sb-dot{flex:1;height:5px;border-radius:3px;background:var(--line)}
.sb-dot.on{background:var(--blue)}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.reg{border-radius:var(--r-lg);padding:40px;position:relative;overflow:hidden}
.reg-patient{background:#fff;border:1px solid var(--line)}
.reg-doctor{background:linear-gradient(150deg,var(--blue),var(--blue-700));color:#fff}
.reg-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 13px;border-radius:100px;margin-bottom:20px}
.reg-patient .reg-badge{background:var(--blue-50);color:var(--blue)}
.reg-doctor .reg-badge{background:rgba(255,255,255,.16);color:#fff}
.reg h3{font-size:25px;margin-bottom:12px}
.reg-doctor h3{color:#fff}
.reg p{font-size:15px;margin-bottom:24px}
.reg-patient p{color:var(--ink-2)}.reg-doctor p{color:#C9DCFB}
.reg-list{list-style:none;margin-bottom:28px;display:flex;flex-direction:column;gap:13px}
.reg-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px}
.reg-list i{font-size:20px;flex-shrink:0;margin-top:1px}
.reg-patient .reg-list i{color:var(--blue)}
.reg-doctor .reg-list{color:#E3EDFD}.reg-doctor .reg-list i{color:#9FD8CF}
@media(max-width:920px){.reg-grid{grid-template-columns:1fr}}
.stats{background:var(--ink);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat .v{font-family:'Sora';font-size:clamp(34px,4.4vw,50px);font-weight:800;line-height:1}
.stat .v em{color:var(--sky);font-style:normal}
.stat .l{font-size:14px;color:#A9BCDB;margin-top:8px}
@media(max-width:560px){.stats-grid{grid-template-columns:1fr 1fr;gap:34px 20px}}
/* Same thin blue line top and bottom; the gentle blue fade inside keeps
   the band distinct from a grey section above it. */
.cta-band{position:relative;background:linear-gradient(180deg,#DDE8FD 0%,var(--blue-50) 70%);border-top:1px solid var(--blue-100);border-bottom:1px solid var(--blue-100);padding:30px 28px 34px;box-shadow:inset 0 6px 10px -6px rgba(12,27,51,.14)}
/* No panel: headline + line on the left, buttons on the right, sitting
   straight on a soft brand-blue band (distinct from both the white and
   the grey sections) so it takes as little room as possible. */
.cta-inner{max-width:1200px;margin:0 auto;color:var(--ink);display:grid;grid-template-columns:1fr auto;column-gap:36px;row-gap:6px;align-items:center}
.cta-inner h2{font-size:clamp(18px,1.9vw,22px);margin:0;color:var(--ink);grid-column:1}
.cta-inner p{font-size:14.5px;color:var(--ink);max-width:560px;margin:0;grid-column:1}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;grid-column:2;grid-row:1 / span 2;justify-content:flex-end}
.cta-band .btn-white{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 8px 20px rgba(27,99,227,.25)}
.cta-band .btn-ghost-w{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
@media (hover: hover){.cta-band .btn-ghost-w:hover{border-color:var(--blue);color:var(--blue)}}
@media(max-width:860px){
  .cta-band{padding:26px 18px 30px}
  .cta-inner{grid-template-columns:1fr;text-align:center}
  .cta-inner p{margin:0 auto}
  .cta-actions{grid-column:1;grid-row:auto;justify-content:center;margin-top:14px}
}
footer{background:#fff;color:var(--ink-2);border-top:1px solid var(--line);padding:70px 0 30px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:46px}
.foot-brand .logo{color:var(--ink);margin-bottom:16px}
.foot-brand p{font-size:14px;max-width:280px;color:var(--ink-3)}
.foot-social{display:flex;gap:10px;margin-top:20px}
.foot-social a{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:.18s}
.foot-social a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.foot-col h4{color:var(--ink);font-size:14px;font-weight:700;margin-bottom:18px}
.foot-col a{display:block;font-size:14px;margin-bottom:11px;color:var(--ink-2);transition:.15s}
.foot-col a:hover{color:var(--blue)}
.foot-bottom{border-top:1px solid var(--line);padding-top:26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--ink-3)}
.foot-bottom .langs{display:flex;gap:18px}
@media(max-width:920px){.foot-grid{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============ ADDED: routing, filters, detail, wizards ============ */
.page{display:none}.page.active{display:block}

/* hero figure: the photo panel (see Photography below) */
.hero-fig{position:relative;height:470px;display:flex;align-items:center;justify-content:center}
@media(max-width:980px){.hero-fig{height:420px;max-width:440px;margin:0 auto}}
/* ---- find a doctor: filter bar ---- */
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin-bottom:26px}
.filters-row{display:grid;grid-template-columns:2fr 1.3fr 1.3fr 1fr auto;gap:12px;align-items:end}
/* Standalone type chip row (used on /home-services above the search filters). */
.hs-type-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.hs-chip{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:100px;background:#fff;border:1.5px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:.15s}
.hs-chip:hover{border-color:var(--blue);color:var(--blue)}
.hs-chip.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(27,99,227,.22)}
.hs-chip i{font-size:16px}
.hs-filter-row-4{display:grid;grid-template-columns:2fr 1.5fr 1fr auto;gap:12px;align-items:end}

/* Directory layout — sticky sidebar filters + horizontal-row result cards.
   Used by /doctors and /home-services. */
.dr-layout{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start}
@media(max-width:900px){.dr-layout{grid-template-columns:1fr}}
.dr-side{position:sticky;top:88px}
@media(max-width:900px){.dr-side{position:static}}
.dr-filters{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px;box-shadow:var(--shadow)}
.dr-fhead{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.dr-fhead i{color:var(--blue);font-size:18px}
.dr-field{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.dr-field label{font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.dr-field .ctl{display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--line-2);border-radius:10px;padding:9px 12px}
.dr-field .ctl:focus-within{border-color:var(--blue);background:#fff}
.dr-field .ctl i{font-size:16px;color:var(--ink-3)}
.dr-field .ctl input,.dr-field .ctl select{border:none;background:none;outline:none;font-family:inherit;font-size:13.5px;color:var(--ink);width:100%;cursor:pointer}
.dr-field .ctl input{cursor:text}
.dr-actions{display:flex;gap:8px;margin-top:16px}
.dr-actions .btn{flex:1;justify-content:center}

.dr-main{min-width:0}
.dr-list{display:flex;flex-direction:column;gap:14px}
.dr-row{display:grid;grid-template-columns:120px 1fr 200px;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;transition:.15s}
.dr-row:hover{box-shadow:0 6px 20px rgba(15,23,42,.06);transform:translateY(-1px)}
@media(max-width:720px){.dr-row{grid-template-columns:80px 1fr;gap:14px}.dr-row .dr-side-col{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px}}
.dr-link{color:inherit;text-decoration:none;display:inline-block;transition:opacity .15s}
.dr-link:hover{opacity:.86;text-decoration:none}
a.dr-link h3,.dr-top h3 a.dr-link{color:var(--ink)}
.dr-top h3 a.dr-link:hover{color:var(--blue)}
.dr-ava-wrap{position:relative;width:120px;height:120px;flex:none}
@media(max-width:720px){.dr-ava-wrap{width:80px;height:80px}}
.dr-ava{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#F4F6FA;display:flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 4px 14px rgba(15,23,42,.08)}
.dr-badge{position:absolute;bottom:2px;right:2px;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;border:3px solid #fff;box-shadow:0 2px 8px rgba(27,99,227,.35)}
.dr-badge i{font-size:16px}
@media(max-width:720px){.dr-badge{width:24px;height:24px;bottom:0;right:0}.dr-badge i{font-size:12px}}
/* Inline PMDC verified badge — drop next to any doctor's name, tooltip
   reveals the "PMDC Verified" label on hover. */
.pmdc-inline{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;margin-left:6px;vertical-align:middle;flex:none;cursor:help;position:relative}
.pmdc-inline i{font-size:12px;line-height:1}
.pmdc-inline::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);background:var(--ink);color:#fff;font:600 12px/1 'DM Sans',sans-serif;letter-spacing:0;white-space:nowrap;padding:7px 10px;border-radius:6px;box-shadow:0 4px 12px rgba(12,27,51,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s;z-index:20}
.pmdc-inline:hover::after,.pmdc-inline:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.pmdc-inline:focus{outline:none}
.pmdc-inline:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pmdc-inline.sm{width:16px;height:16px;margin-left:5px}
.pmdc-inline.sm i{font-size:10px}
.pmdc-inline.lg{width:24px;height:24px;margin-left:8px}
.pmdc-inline.lg i{font-size:15px}
.dr-ava img{width:100%;height:100%;object-fit:cover}
.dr-ava-fallback{width:100%;height:100%;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:30px}
.dr-info{min-width:0}
.dr-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dr-top h3{font-size:17px;font-family:'Sora',sans-serif;font-weight:700;color:var(--ink);margin:0}
.dr-verified{display:inline-flex;align-items:center;gap:4px;background:rgba(22,184,166,.10);color:#0E8C7F;font-size:11px;font-weight:600;padding:3px 8px;border-radius:100px}
.dr-verified i{font-size:13px}
.dr-spec{font-size:13.5px;color:var(--blue);font-weight:600;margin-top:4px}
.dr-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:13px;color:var(--ink-2)}
.dr-meta span{display:inline-flex;align-items:center;gap:5px}
.dr-meta i{color:var(--ink-3);font-size:14px}
.dr-bio{font-size:13px;color:var(--ink-2);margin:10px 0 0;line-height:1.55}
.dr-side-col{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.dr-fee{background:var(--blue-50);border-radius:12px;padding:10px 14px;text-align:center}
.dr-fee b{display:block;font-family:'Sora',sans-serif;font-size:18px;color:var(--ink)}
.dr-fee span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.no-results{background:#fff;border:1px dashed var(--line-2);border-radius:16px;padding:56px 22px;text-align:center}
.dr-toolbar{margin-bottom:14px}
.dr-topbar{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
@media(max-width:820px){.dr-topbar{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.dr-topbar{grid-template-columns:1fr}}
.dr-topcell{display:flex;flex-direction:column;gap:4px;min-width:0}
.dr-topcell label{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.dr-topcell select,.dr-topcell .combo-input{border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:9px 12px;font-family:inherit;font-size:13.5px;line-height:20px;color:var(--ink);cursor:pointer;width:100%;box-sizing:border-box}
.dr-topcell select:focus,.dr-topcell .combo-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,99,227,.14)}
/* Sorting looks like the other filter dropdowns (it was a blue pill). */
.hs-filter-row-5{display:grid;grid-template-columns:1.4fr 1.4fr 1.2fr auto auto;gap:12px;align-items:end}
@media(max-width:980px){.hs-filter-row-5{grid-template-columns:1fr 1fr}.hs-filter-row-5 .filter-btn{grid-column:1/-1;justify-content:center}}
.fg{display:flex;flex-direction:column;gap:6px}
.fg label{font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.fg .ctl{display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--line-2);border-radius:11px;padding:11px 13px}
.fg .ctl:focus-within{border-color:var(--blue);background:#fff}
.fg .ctl i{font-size:18px;color:var(--ink-3)}
.fg .ctl input,.fg .ctl select{border:none;background:none;outline:none;font-family:inherit;font-size:14px;color:var(--ink);width:100%;cursor:pointer}
.fg .ctl input{cursor:text}
.filter-btn{height:46px;padding:0 22px;border-radius:11px;background:var(--blue);color:#fff;border:none;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:.18s}
.filter-btn:hover{background:var(--blue-600)}
.filter-btn.secondary{background:var(--bg);color:var(--ink);border:1.5px solid var(--line-2)}
.filter-btn.secondary:hover{background:#fff;border-color:var(--blue);color:var(--blue)}
.filter-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.filter-meta .count{font-size:14px;color:var(--ink-2)}
.filter-meta .count b{color:var(--ink)}
.sort-sel{font-size:13px;font-weight:500;color:var(--ink-2);border:1px solid var(--line-2);border-radius:9px;padding:8px 12px;background:#fff;font-family:inherit;cursor:pointer;outline:none}
.no-results{text-align:center;padding:60px 20px;color:var(--ink-3)}
.no-results i{font-size:48px;margin-bottom:14px;color:var(--line-2)}
.no-results .btn i{font-size:18px;margin:0;color:inherit}
/* searchable specialty dropdown */
.ss{position:relative}
.ss-trigger{width:100%;font-family:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.ss-trigger .ss-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-trigger .ss-caret{margin-left:auto;transition:transform .18s}
.ss.open .ss-trigger{border-color:var(--blue);background:#fff}
.ss.open .ss-caret{transform:rotate(180deg)}
.ss-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;background:#fff;border:1.5px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;display:none}
.ss.open .ss-pop{display:block}
.ss-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--line-2);border-radius:9px;padding:8px 11px;margin-bottom:6px}
.ss-search i{font-size:16px;color:var(--ink-3)}
.ss-search input{border:none;background:none;outline:none;font-family:inherit;font-size:14px;color:var(--ink);width:100%}
.ss-list{max-height:240px;overflow-y:auto}
.ss-opt{padding:9px 11px;border-radius:8px;font-size:14px;color:var(--ink);cursor:pointer;transition:.12s}
.ss-opt:hover{background:var(--blue-50)}
.ss-opt.on{background:var(--blue-50);color:var(--blue);font-weight:600}
.ss-empty{padding:12px 11px;font-size:13px;color:var(--ink-3);text-align:center}
@media(max-width:980px){.filters-row{grid-template-columns:1fr 1fr}.filter-btn{grid-column:1/-1;justify-content:center}}

/* make doctor card clickable affordance */
.doc{cursor:default}
.doc .doc-photo{cursor:pointer}
.doc-view{display:block;text-align:center;font-size:12.5px;font-weight:600;color:var(--blue);margin-top:8px;cursor:pointer}
.doc-view:hover{text-decoration:underline}

/* ---- doctor detail page ---- */
.dd-hero{background:linear-gradient(180deg,var(--blue-50),transparent)}
.dd-top{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
.dd-photo{width:150px;height:150px;border-radius:26px;overflow:hidden;background:linear-gradient(160deg,var(--blue-50),var(--bg-2));border:1px solid var(--line);flex-shrink:0}
.dd-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.dd-id h1{font-size:clamp(22px,2.6vw,30px);margin-bottom:6px}
.dd-id .spec{font-size:16px;color:var(--blue);font-weight:600;margin-bottom:12px}
.dd-tags{display:flex;gap:10px;flex-wrap:wrap}
.dd-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:6px 13px;border-radius:100px}
.dd-tag i{font-size:16px;color:var(--ink-3)}
.dd-tag .star{color:var(--amber)}
.dd-cta{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);min-width:200px}
.dd-cta .fee{font-family:'Sora';font-size:28px;font-weight:700}
.dd-cta .fee span{font-size:13px;color:var(--ink-3);font-weight:400;font-family:'DM Sans'}
.dd-cta .feelbl{font-size:12px;color:var(--ink-3);margin-bottom:14px}
.dd-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;margin-top:10px}
.dd-block{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;margin-bottom:20px;box-shadow:var(--shadow)}
.dd-block h3{font-size:18px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.dd-block h3 i{color:var(--blue);font-size:21px}
.dd-block p{font-size:15px;color:var(--ink-2)}
.dd-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.dd-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.dd-list li i{color:var(--blue);font-size:19px;flex-shrink:0;margin-top:1px}
.svc-pills{display:flex;flex-wrap:wrap;gap:9px}
.svc-pill{font-size:13px;font-weight:500;color:var(--ink);background:var(--blue-50);border:1px solid var(--blue-100);padding:8px 14px;border-radius:100px}
.sched{display:flex;flex-direction:column;gap:8px}
.sched-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:11px;background:var(--bg);font-size:14px}
.sched-row.off{opacity:.55}
.sched-row .day{font-weight:600}
.sched-row .hrs{color:var(--ink-2);font-size:13px}
.sched-row .closed{color:var(--ink-3);font-size:13px}
@media(max-width:980px){.dd-top{grid-template-columns:1fr;text-align:center}.dd-photo{margin:0 auto}.dd-tags{justify-content:center}.dd-grid{grid-template-columns:1fr}}

/* ---- wizard (shared by doctor-apply + booking) ---- */
.wiz-wrap{max-width:860px;margin:0 auto}
.wiz-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 40px;box-shadow:var(--shadow-card)}
@media(max-width:920px){.wiz-wrap{max-width:100%}.wiz-card{padding:28px 22px}}
.wiz-steps{display:flex;align-items:center;margin-bottom:26px}
.wiz-step{display:flex;align-items:center;flex:1}
.wiz-step:last-child{flex:0}
.wiz-dot{width:34px;height:34px;border-radius:50%;background:var(--bg-2);color:var(--ink-3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;border:2px solid transparent;transition:.2s}
.wiz-step.on .wiz-dot{background:var(--blue);color:#fff}
.wiz-step.done .wiz-dot{background:var(--mint);color:#fff}
.wiz-line{flex:1;height:2px;background:var(--line-2);margin:0 8px}
.wiz-step.done .wiz-line{background:var(--mint)}
.wiz-pane{display:none}
.wiz-pane.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wiz-pane h3{font-size:21px;margin-bottom:4px}
.wiz-pane .psub{font-size:14px;color:var(--ink-3);margin-bottom:20px}
.wiz-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.choice{border:1.5px solid var(--line-2);border-radius:14px;padding:18px;cursor:pointer;transition:.18s;text-align:center}
.choice:hover{border-color:var(--blue)}
.choice.on{border-color:var(--blue);background:var(--blue-50)}
.choice i{font-size:30px;color:var(--blue);margin-bottom:8px}
.choice .t{font-weight:700;font-size:15px}
.choice .s{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.day-pick{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:18px}
.day-chip{flex-shrink:0;text-align:center;border:1.5px solid var(--line-2);border-radius:12px;padding:10px 14px;cursor:pointer;transition:.15s;min-width:64px}
.day-chip:hover{border-color:var(--blue)}
.day-chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.day-chip .dow{font-size:11px;font-weight:600;opacity:.8}
.day-chip .dnum{font-family:'Sora';font-size:18px;font-weight:700;line-height:1.1}
.otp-row{display:flex;gap:10px;justify-content:center;margin:18px 0}
.otp-row input{width:52px;height:60px;text-align:center;font-family:'Sora';font-size:24px;font-weight:700;border:1.5px solid var(--line-2);border-radius:13px;outline:none;color:var(--ink)}
.otp-row input:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-50)}
.otp-note{text-align:center;font-size:13px;color:var(--ink-3)}
.otp-note b{color:var(--ink)}
.resend{text-align:center;margin-top:14px;font-size:13px;color:var(--ink-2)}
.resend a{color:var(--blue);font-weight:600;cursor:pointer}
.summary{background:var(--bg);border-radius:14px;padding:18px;margin-bottom:8px}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;border-bottom:1px solid var(--line)}
.summary-row:last-child{border:none}
.summary-row .k{color:var(--ink-3)}
.summary-row .v{font-weight:600;text-align:right}
.success{text-align:center;padding:10px}
.success-ic{width:84px;height:84px;border-radius:50%;background:var(--mint-50);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.success-ic i{font-size:44px;color:var(--mint)}
.token-box{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;border-radius:18px;padding:24px;margin:20px 0}
.token-box .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.token-box .num{font-family:'Sora';font-size:42px;font-weight:800;line-height:1.1;margin:4px 0}
.token-box .meta{font-size:13px;opacity:.9}
.checkbox-row{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);margin-top:6px;cursor:pointer}
.checkbox-row input{width:18px;height:18px;accent-color:var(--blue)}
.field-help{font-size:12px;color:var(--ink-3);margin-top:5px}

/* modal for booking */
.modal{position:fixed;inset:0;z-index:200;background:rgba(12,27,51,.5);backdrop-filter:blur(4px);visibility:hidden;opacity:0;transition:opacity .28s ease,visibility .28s ease;display:flex;justify-content:flex-end;align-items:stretch}
.modal.open{visibility:visible;opacity:1}
.modal-card{background:#fff;width:100%;max-width:480px;height:100%;box-shadow:var(--shadow-lg);position:relative;display:flex;flex-direction:column;border-radius:0;transform:translateX(100%);transition:transform .34s cubic-bezier(.16,.84,.44,1);overflow:hidden}
.modal.open .modal-card{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.modal-head .who{display:flex;align-items:center;gap:12px}
.modal-head .who-av{width:46px;height:46px;border-radius:13px;overflow:hidden;background:var(--blue-50);flex-shrink:0}
.modal-head .who-av img{width:100%;height:100%;object-fit:cover;object-position:top center}
.modal-head .who .n{font-weight:700;font-size:15px}
.modal-head .who .s{font-size:12.5px;color:var(--blue)}
.modal-close{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:20px}
.modal-close:hover{background:var(--bg)}
.modal-body{padding:24px;overflow-y:auto;flex:1}

/* doctor wizard: service switches + slot calc */
.svc-switches{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.svc-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:var(--bg);border:1px solid var(--line);border-radius:11px}
.ss-label{font-size:13px;font-weight:500;color:var(--ink)}
.tog2{width:40px;height:23px;border-radius:13px;background:var(--blue);display:flex;align-items:center;padding:3px;cursor:pointer;flex-shrink:0;transition:.18s}
.tog2-ball{width:17px;height:17px;border-radius:50%;background:#fff;margin-left:auto;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tog2.off{background:var(--line-2)}
.tog2.off .tog2-ball{margin-left:0}
.slots-calc{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:13px;padding:14px 16px;margin-top:6px}
.sc-info{display:flex;align-items:center;gap:12px}
.sc-info>i{font-size:26px;color:var(--blue)}
.sc-t{font-size:14px;font-weight:700;color:var(--ink)}
.sc-s{font-size:12px;color:var(--ink-2);margin-top:2px}
.sc-input{width:78px;height:46px;text-align:center;font-family:'Sora';font-size:20px;font-weight:700;border:1.5px solid var(--blue-100);border-radius:11px;color:var(--blue);background:#fff;outline:none}
.sc-input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,99,227,.12)}
@media(max-width:560px){.svc-switches{grid-template-columns:1fr}}


/* ---- what-we-offer split (home) ---- */
.offer-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.offer-ic{width:60px;height:60px;border-radius:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.offer-ic i{font-size:28px}
.offer-tag{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.offer-head h3{font-size:22px;margin-top:3px}
.offer-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin:0 0 26px;flex:1}
.offer-list li{display:flex;gap:13px;align-items:flex-start}
.offer-list li i{font-size:20px;color:var(--blue);background:var(--blue-50);width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.offer-list.mint li i{color:var(--mint);background:var(--mint-50)}
.offer-list li b{display:block;font-family:'Sora',sans-serif;font-size:15.5px;font-weight:600;margin-bottom:2px}
.offer-list li span{font-size:14px;color:var(--ink-2);line-height:1.5}
/* ---- find-a-doctor pagination ---- */
.doc-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:36px;flex-wrap:wrap}
.pager-info{font-size:14px;color:var(--ink-2)}
.pager-btns{display:flex;align-items:center;gap:8px;margin-left:auto}
.pg-btn{min-width:42px;height:42px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink-2);font-family:'Sora',sans-serif;font-weight:600;font-size:15px;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;justify-content:center}
.pg-btn:hover:not(:disabled):not(.on){border-color:var(--blue);color:var(--blue)}
.pg-btn.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(27,99,227,.28)}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-btn.nav i{font-size:18px}
/* ---- for-patients feature row ---- */
@media(max-width:820px){.fp-feature{grid-template-columns:1fr!important;gap:32px!important}}
/* Compact pager stand-in; only ever visible on narrow screens. */
.pg-status{display:none;font-family:'Sora',sans-serif;font-weight:600;font-size:15px;color:var(--ink-2);padding:0 6px;min-width:64px;justify-content:center;align-items:center;height:42px}
@media(max-width:560px){
  .doc-pager{justify-content:center}
  .pager-btns{margin-left:0;flex-wrap:wrap;justify-content:center}
  .pager-info{width:100%;text-align:center}
  /* A full run of numbers plus both arrows needs ~500px; swap in "3 of 7". */
  .pager-btns .pg-num{display:none}
  .pg-status{display:inline-flex}
}

/* ---- contact page ---- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:14px}
.ci-row{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;transition:.2s}
.ci-row:hover{box-shadow:var(--shadow);border-color:var(--line-2)}
.ci-ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-ic i{font-size:23px}
.ci-row .lbl{font-size:11.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.ci-row .val{font-family:'Sora',sans-serif;font-size:16px;font-weight:600;margin-top:3px}
.ci-row .sub{font-size:13px;color:var(--ink-2);margin-top:2px}
.social-line{display:flex;gap:11px;margin-top:4px}
.social-line a{width:46px;height:46px;border-radius:13px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:20px;transition:.2s}
.social-line a:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-2px)}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);padding:34px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.cf-grid .full{grid-column:1/-1}
.contact-form .ctl{padding:13px 14px}
.contact-form .ctl.area{align-items:flex-start}
.contact-form textarea{border:none;background:none;outline:none;font-family:inherit;font-size:14px;color:var(--ink);width:100%;resize:vertical;min-height:120px;line-height:1.6}
.cf-success{display:none;text-align:center;padding:26px 10px}
.cf-success .ok{width:74px;height:74px;border-radius:50%;background:var(--mint-50);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.cf-success .ok i{font-size:42px;color:var(--mint)}
.cf-success h3{font-size:22px;margin-bottom:8px}
.cf-success p{color:var(--ink-2);max-width:360px;margin:0 auto 22px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}.cf-grid{grid-template-columns:1fr}}

/* ============ ADDED v7: nav dropdowns, unified login, hospital + patient dashboards ============ */

/* ---- top-nav dropdown menus ---- */
.nav-links .has-dd{position:relative}
.nav-links .dd-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.nav-links .dd-trigger i.caret{font-size:16px;transition:.2s}
.nav-links .has-dd:hover .dd-trigger,.nav-links .has-dd:focus-within .dd-trigger{color:var(--blue)}
.nav-links .has-dd:hover .dd-trigger .caret{transform:rotate(180deg)}
.dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:300px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transition:.2s;z-index:120}
.dd-menu::before{content:'';position:absolute;top:-18px;left:0;right:0;height:18px}
.nav-links .has-dd:hover .dd-menu,.nav-links .has-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(8px)}
.dd-item{display:flex;align-items:flex-start;gap:13px;padding:12px 13px;border-radius:13px;cursor:pointer;transition:.15s}
.dd-item:hover{background:var(--bg)}
.dd-item .di-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dd-item .di-ic i{font-size:21px}
.dd-item .di-t{font-family:'Sora',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.2}
.dd-item .di-s{font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.dd-sep{height:1px;background:var(--line);margin:7px 10px}
.dd-foot{display:flex;align-items:center;justify-content:space-between;padding:11px 13px 6px;font-size:12.5px;color:var(--ink-3)}
.dd-foot a{color:var(--blue);font-weight:600;cursor:pointer}
.dd-foot-link a{display:inline-flex;align-items:center;gap:6px}
/* mobile submenu grouping */
.mm-group{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:18px;padding:0;border:none!important}
.mobile-menu a.mm-sub{font-size:18px;padding:14px 0}

/* ---- unified login / auth ---- */
#page-login.page.active{display:block}
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-side{position:relative;background:linear-gradient(150deg,var(--blue),var(--blue-700) 70%,#0B2E78);color:#fff;padding:54px 56px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.auth-side::before{content:'';position:absolute;width:460px;height:460px;border-radius:50%;background:rgba(255,255,255,.07);top:-160px;right:-120px}
.auth-side::after{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(55,164,245,.18);bottom:-130px;left:-80px}
.auth-side .logo{color:#fff;position:relative;z-index:1}
.auth-side .logo .q{color:#9FD3FF}
.auth-pitch{position:relative;z-index:1;max-width:430px}
.auth-pitch h2{font-size:clamp(22px,2.4vw,28px);color:#fff;line-height:1.2;margin-bottom:14px}
.auth-pitch p{color:#C9DCFB;font-size:15.5px;margin-bottom:28px}
.auth-roles{display:flex;flex-direction:column;gap:12px}
.auth-role{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:15px;padding:14px 16px;backdrop-filter:blur(4px)}
.auth-role .ar-ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.auth-role .ar-ic i{font-size:21px;color:#fff}
.auth-role .ar-t{font-family:'Sora',sans-serif;font-weight:600;font-size:14.5px}
.auth-role .ar-s{font-size:12px;color:#BBD2F6;margin-top:2px}
.auth-side .auth-foot{position:relative;z-index:1;font-size:12.5px;color:#9FB6E0}
.auth-main{display:flex;align-items:center;justify-content:center;padding:48px 28px;background:var(--bg)}
.auth-card{width:100%;max-width:420px}
.auth-card .crumb-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3);font-weight:600;cursor:pointer;margin-bottom:22px}
.auth-card .crumb-back:hover{color:var(--blue)}
.auth-card h1{font-size:28px;margin-bottom:6px}
.auth-card .lede{font-size:14.5px;color:var(--ink-2);margin-bottom:26px}
.role-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:22px}
.role-tab{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;border:1.5px solid var(--line-2);border-radius:13px;background:#fff;cursor:pointer;transition:.15s}
.role-tab:hover{border-color:var(--blue)}
.role-tab.on{border-color:var(--blue);background:var(--blue-50)}
.role-tab i{font-size:21px;color:var(--ink-3)}
.role-tab.on i{color:var(--blue)}
.role-tab span{font-size:10.5px;font-weight:600;color:var(--ink-2)}
.role-tab.on span{color:var(--blue)}
.auth-field{margin-bottom:15px}
.auth-field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.auth-input{display:flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line-2);border-radius:13px;padding:13px 15px;transition:.15s}
.auth-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-50)}
.auth-input i{font-size:19px;color:var(--ink-3)}
.auth-input input{border:none;outline:none;background:none;font-family:inherit;font-size:14.5px;width:100%;color:var(--ink)}
.auth-input .peek{cursor:pointer;color:var(--ink-3)}
.auth-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px;font-size:13px}
.auth-row label{display:flex;align-items:center;gap:8px;color:var(--ink-2);cursor:pointer}
.auth-row input{width:16px;height:16px;accent-color:var(--blue)}
.auth-row a{color:var(--blue);font-weight:600;cursor:pointer}
.auth-hint{display:flex;gap:10px;align-items:flex-start;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--ink-2);margin-top:18px;line-height:1.5}
.auth-hint i{color:var(--blue);font-size:18px;flex-shrink:0;margin-top:1px}
.auth-hint b{color:var(--ink);font-family:'Sora',sans-serif}
.auth-switch{text-align:center;font-size:13.5px;color:var(--ink-2);margin-top:22px}
.auth-switch a{color:var(--blue);font-weight:600;cursor:pointer}
/* Mobile-only brand strip: replaces the hidden .auth-side so the user can
   still see (and tap) the DocGini logo to get back to the marketing site. */
.auth-mobilebar{display:none}
@media(max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .role-tabs{grid-template-columns:repeat(5,1fr)}
  .auth-main{padding:24px 20px 40px;flex-direction:column;align-items:stretch;gap:20px}
  .auth-mobilebar{display:flex;align-items:center;justify-content:flex-start;gap:12px}
  .auth-mobilebar .logo{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:10px}
  .auth-mobilebar .logo .logo-mark{width:36px;height:36px;display:inline-block;flex:none}
  .auth-mobilebar .logo .brand{font-family:'Sora',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.3px;color:var(--ink)}
  .auth-mobilebar .logo .brand .q{color:var(--blue)}
  .auth-card{margin:0 auto}
  /* Shrink the "Welcome back" style headline so it isn't oversized
     relative to the field labels on a phone screen. */
  .auth-card h1{font-size:22px;line-height:1.2}
  .auth-card .lede{font-size:13.5px;margin-bottom:20px}
}
@media(max-width:520px){.role-tabs{grid-template-columns:repeat(3,1fr)}}

/* ---- app shell (fullscreen dashboards) ---- */
body.app-mode header,body.app-mode footer{display:none!important}
.app{display:none}
#page-hospital-dashboard.active .app,#page-patient-dashboard.active .app{display:grid}
.app{min-height:100vh;grid-template-columns:248px 1fr;background:var(--bg)}
.app-side{background:#0B1730;color:#A9BCDB;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.app-scrim{display:none}
.app-brand{display:flex;align-items:center;gap:11px;padding:20px 22px;font-family:'Sora',sans-serif;font-weight:700;font-size:19px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.app-brand .logo-mark{width:36px;height:36px;border-radius:11px}
.app-brand .logo-mark i{font-size:20px}
.app-brand .q{color:#6FB4FF}
.app-org{padding:15px 22px;border-bottom:1px solid rgba(255,255,255,.08)}
.app-org .o-row{display:flex;align-items:center;gap:11px}
.app-org .o-logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--mint),#0FA89A);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Sora',sans-serif;font-weight:700;flex-shrink:0}
.app-org .o-name{font-family:'Sora',sans-serif;font-weight:600;font-size:13.5px;color:#fff;line-height:1.25}
.app-org .o-sub{font-size:11px;color:#7B8FB5;margin-top:2px}
.app-nav{flex:1;overflow-y:auto;padding:12px 12px 20px}
.app-nav .nav-cap{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5C7099;padding:14px 12px 7px}
.app-nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;font-size:14px;font-weight:500;color:#A9BCDB;cursor:pointer;transition:.15s;margin-bottom:2px}
.app-nav a i{font-size:20px}
.app-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.app-nav a.on{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(27,99,227,.35)}
.app-nav a .ct{margin-left:auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.14);color:#fff;padding:2px 8px;border-radius:100px}
.app-nav a.on .ct{background:rgba(255,255,255,.22)}
.app-side .side-foot{padding:14px;border-top:1px solid rgba(255,255,255,.08)}
.app-side .side-foot a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;font-size:14px;font-weight:500;color:#A9BCDB;cursor:pointer}
.app-side .side-foot a:hover{background:rgba(255,255,255,.06);color:#fff}
.app-side .side-foot a i{font-size:20px}
.app-main{display:flex;flex-direction:column;min-width:0}
.app-top{display:flex;align-items:center;gap:16px;padding:16px 30px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.app-top .at-burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line-2);background:#fff;align-items:center;justify-content:center;cursor:pointer;font-size:20px}
.app-top h1{font-size:21px;font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.02em}
.app-top .at-sub{font-size:13px;color:var(--ink-3);margin-top:1px}
.app-top .at-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.at-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:9px 13px;width:230px}
.at-search i{font-size:18px;color:var(--ink-3)}
.at-search input{border:none;outline:none;background:none;font-family:inherit;font-size:13.5px;width:100%}
.at-ic{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;position:relative;font-size:20px}
.at-ic:hover{border-color:var(--blue);color:var(--blue)}
.at-ic .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--coral);border:2px solid #fff}
.at-user{display:flex;align-items:center;gap:10px;padding:5px 6px 5px 5px;border:1px solid var(--line);border-radius:100px;cursor:pointer}
.at-user .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:14px}
.at-user .nm{font-size:13px;font-weight:600;line-height:1.2}
.at-user .rl{font-size:11px;color:var(--ink-3)}
.app-body{padding:26px 30px 50px;overflow-y:auto}
.app-pane{display:none}
.app-pane.on{display:block;animation:fade .3s ease}

/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;position:relative;overflow:hidden;transition:.2s}
.kpi:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)}
.kpi .k-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.kpi .k-ic i{font-size:22px}
.kpi .k-v{font-family:'Sora',sans-serif;font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1}
.kpi .k-l{font-size:13px;color:var(--ink-2);margin-top:5px}
.kpi .k-d{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;margin-top:9px;padding:2px 8px;border-radius:100px}
.kpi .k-d.up{color:#0E9F6E;background:#E3F6EE}
.kpi .k-d.down{color:#D64545;background:#FBE7E7}
.kpi .k-d.flat{color:var(--ink-3);background:var(--bg-2)}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.kpi-grid{grid-template-columns:1fr 1fr}}

/* dashboard grid + panels */
.dash-grid{display:grid;gap:18px}
.g-2{grid-template-columns:1.5fr 1fr}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2b{grid-template-columns:1fr 1fr}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:18px}
.panel.np{padding:0;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.panel-head h3{font-size:16px;font-family:'Sora',sans-serif;font-weight:700;display:flex;align-items:center;gap:9px}
.panel-head h3 i{color:var(--blue);font-size:20px}
.panel-head .ph-act{font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.panel-head .ph-act:hover{text-decoration:underline}
.np .panel-head{padding:18px 20px 14px;margin-bottom:0}
.seg{display:flex;gap:4px;background:var(--bg);border-radius:10px;padding:4px}
.seg button{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-3);padding:6px 13px;border-radius:8px;cursor:pointer;transition:.15s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
@media(max-width:1100px){.g-2,.g-3,.g-2b{grid-template-columns:1fr}}

/* department tiles */
.dept-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dept{border:1px solid var(--line);border-radius:15px;padding:16px;cursor:pointer;transition:.2s;background:#fff}
.dept:hover{box-shadow:var(--shadow-card);transform:translateY(-3px);border-color:transparent}
.dept .d-top{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.dept .d-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dept .d-ic i{font-size:21px}
.dept .d-nm{font-family:'Sora',sans-serif;font-weight:600;font-size:14.5px}
.dept .d-st{font-size:11.5px;color:var(--ink-3)}
.dept .d-stat{display:flex;align-items:baseline;gap:7px}
.dept .d-stat .n{font-family:'Sora',sans-serif;font-size:24px;font-weight:800;line-height:1}
.dept .d-stat .u{font-size:12px;color:var(--ink-3)}
.dept .d-bar{height:6px;border-radius:6px;background:var(--bg-2);margin-top:11px;overflow:hidden}
.dept .d-bar span{display:block;height:100%;border-radius:6px}
.dept .d-meta{font-size:11.5px;color:var(--ink-2);margin-top:9px;display:flex;justify-content:space-between}
@media(max-width:1100px){.dept-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.dept-grid{grid-template-columns:1fr}}

/* data tables */
.dtable{width:100%;border-collapse:collapse}
.dtable th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:12px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:14px 18px;font-size:13.5px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
.dtable tr:last-child td{border-bottom:none}
.dtable tbody tr{transition:.12s}
.dtable tbody tr:hover{background:var(--bg)}
.dtable .nm{font-weight:600;color:var(--ink);font-family:'Sora',sans-serif}
.td-person{display:flex;align-items:center;gap:11px}
.td-av{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;overflow:hidden}
.td-av img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:100px}
.pill i{font-size:13px}
.pill.green{color:#0E9F6E;background:#E3F6EE}
.pill.blue{color:var(--blue);background:var(--blue-50)}
.pill.amber{color:#B7791F;background:#FCF1DC}
.pill.red{color:#D64545;background:#FBE7E7}
.pill.gray{color:var(--ink-2);background:var(--bg-2)}
.pill.mint{color:#0E8C7F;background:var(--mint-50)}
.t-act{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.t-act:hover{border-color:var(--blue);color:var(--blue)}
.table-scroll{overflow-x:auto}

/* OPD queue list */
.q-list{display:flex;flex-direction:column}
.q-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.q-row:last-child{border-bottom:none}
.q-tok{width:46px;height:46px;border-radius:12px;background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:13px;flex-shrink:0}
.q-row.now .q-tok{background:var(--blue);color:#fff}
.q-info{flex:1;min-width:0}
.q-info .qn{font-weight:600;font-size:14px;font-family:'Sora',sans-serif}
.q-info .qs{font-size:12px;color:var(--ink-3)}
.q-wait{font-size:12px;color:var(--ink-2);text-align:right;white-space:nowrap}

/* activity feed */
.feed{display:flex;flex-direction:column;gap:2px}
.feed-row{display:flex;gap:13px;padding:11px 0}
.feed-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px}
.feed-row .ft{font-size:13.5px;color:var(--ink);line-height:1.4}
.feed-row .ft b{font-family:'Sora',sans-serif;font-weight:600}
.feed-row .fm{font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* mini chart helpers */
.donut-wrap{display:flex;align-items:center;gap:22px}
.donut{position:relative;flex-shrink:0}
.donut .d-cen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut .d-cen .dv{font-family:'Sora',sans-serif;font-size:24px;font-weight:800;line-height:1}
.donut .d-cen .dl{font-size:11px;color:var(--ink-3)}
.legend{display:flex;flex-direction:column;gap:11px;flex:1}
.legend .lg{display:flex;align-items:center;gap:10px;font-size:13px}
.legend .lg .sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.legend .lg .ll{color:var(--ink-2);flex:1}
.legend .lg .lv{font-family:'Sora',sans-serif;font-weight:700;color:var(--ink)}
.bars{display:flex;flex-direction:column;gap:14px}
.bar-row .b-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-bottom:6px}
.bar-row .b-top .bn{font-weight:500;color:var(--ink)}
.bar-row .b-top .bv{font-family:'Sora',sans-serif;font-weight:700;font-size:12.5px}
.bar-track{height:9px;border-radius:6px;background:var(--bg-2);overflow:hidden}
.bar-track span{display:block;height:100%;border-radius:6px}
.area-chart{width:100%;height:auto;display:block}

/* patient dashboard specifics */
.pt-hero{background:linear-gradient(135deg,var(--blue),var(--sky));border-radius:20px;padding:26px 28px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.pt-hero h2{font-size:23px;color:#fff;margin-bottom:5px}
.pt-hero p{color:rgba(255,255,255,.9);font-size:14px}
.appt-card{border:1px solid var(--line);border-radius:15px;padding:16px 18px;display:flex;align-items:center;gap:15px;margin-bottom:12px}
.appt-card .ac-when{text-align:center;background:var(--blue-50);border-radius:12px;padding:9px 13px;min-width:62px;flex-shrink:0}
.appt-card .ac-when .d{font-family:'Sora',sans-serif;font-size:20px;font-weight:800;color:var(--blue);line-height:1}
.appt-card .ac-when .m{font-size:11px;color:var(--blue);font-weight:600;text-transform:uppercase}
.appt-card .ac-mid{flex:1;min-width:0}
.appt-card .ac-mid .t{font-family:'Sora',sans-serif;font-weight:600;font-size:15px}
.appt-card .ac-mid .s{font-size:12.5px;color:var(--ink-3);margin-top:2px}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .app-side{position:fixed;left:0;top:0;width:264px;z-index:140;transform:translateX(-100%);visibility:hidden;transition:transform .25s,visibility 0s linear .25s;box-shadow:var(--shadow-lg)}
  body.side-open .app-side{transform:none;visibility:visible;transition:transform .25s,visibility 0s}
  .app-top .at-burger{display:flex}
  .at-search{display:none}
  .app-scrim{position:fixed;inset:0;background:rgba(12,27,51,.5);z-index:135;display:none}
  body.side-open .app-scrim{display:block}
}


/* ===================== v9: doctor benefits, community (blood), home services ===================== */
.cta-strip{background:linear-gradient(135deg,var(--blue),var(--sky));border-radius:var(--r-lg);padding:44px 46px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-strip h3{color:#fff;font-size:26px;margin-bottom:6px}
.cta-strip p{color:rgba(255,255,255,.92);max-width:540px;margin:0}
.benefit-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.benefit{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;gap:14px;align-items:flex-start}
.benefit .bic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--blue-50)}
.benefit .bic i{color:var(--blue);font-size:22px}
.benefit b{display:block;font-family:'Sora';font-size:15px;margin-bottom:3px}
.benefit span{font-size:13px;color:var(--ink-2)}
/* blood group badge */
.bg-badge{display:inline-flex;align-items:center;justify-content:center;min-width:50px;height:50px;border-radius:14px;font-family:'Sora';font-weight:800;font-size:18px;background:var(--blue-50);color:var(--blue);padding:0 10px}
/* donor directory */
.filter-bar{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:26px;box-shadow:var(--shadow)}
.filter-bar .fb-field{flex:1;min-width:160px}
.filter-bar label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.donor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.donor-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.2s}
.donor-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)}
.donor-top{display:flex;align-items:center;gap:14px;margin-bottom:15px}
.donor-top .dn{font-family:'Sora';font-weight:700;font-size:16px}
.donor-top .dl{font-size:13px;color:var(--ink-3)}
.donor-meta{font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.donor-meta i{color:var(--blue);width:16px;display:inline-block}
.donor-avail{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:100px}
.donor-avail.yes{background:var(--mint-50);color:#0E8C7F}
.donor-avail.no{background:#F1F4F9;color:var(--ink-3)}
.contact-reveal{display:none;background:var(--blue-50);border-radius:11px;padding:11px 14px;font-family:'Sora';font-weight:700;color:var(--blue);text-align:center;margin-top:9px}
.contact-reveal.show{display:block}
.empty-note{grid-column:1/-1;text-align:center;color:var(--ink-3);padding:42px;border:1.5px dashed var(--line-2);border-radius:var(--r)}
.safe-note{display:flex;gap:11px;align-items:flex-start;background:#FFF8EC;border:1px solid #F6E2BD;border-radius:14px;padding:15px 18px;margin-top:28px;font-size:13.5px;color:#7A5A12}
.safe-note i{color:var(--amber);font-size:20px;flex-shrink:0}
/* home services cards */
.hs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hs-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;transition:.25s}
.hs-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)}
.hs-card .svc-ic{margin-bottom:18px}
.hs-card h3{font-size:19px;margin-bottom:8px}
.hs-card>p{font-size:14px;color:var(--ink-2);flex:1;margin:0}
.hs-tags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 16px}
.hs-tag{font-size:12px;font-weight:600;color:var(--ink-2);background:#EDF2FB;border-radius:100px;padding:5px 11px}
.hs-price{font-family:'Sora';font-weight:700;color:var(--ink);margin-bottom:16px}
.hs-price span{font-size:12px;color:var(--ink-3);font-weight:500}
/* selectable chips (provider services) */
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip-toggle{display:inline-flex;align-items:center;border:1.5px solid var(--line-2);border-radius:100px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.15s;user-select:none}
.chip-toggle:hover{border-color:var(--blue)}
.chip-toggle.on{background:var(--blue);border-color:var(--blue);color:#fff}
/* modal success */
.modal-success{text-align:center;padding:22px 8px 6px}
.modal-success .ms-ic{width:74px;height:74px;border-radius:50%;background:var(--mint-50);color:#0E8C7F;display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 18px}
.modal-success h3{font-size:22px;margin-bottom:8px}
.modal-success p{color:var(--ink-2);max-width:380px;margin:0 auto 22px}
textarea.bf-input{min-height:88px;resize:vertical;line-height:1.5}
/* Custom chevron for <select.bf-input> — native arrow hugs the right edge
   and overlaps the option text. This replaces it with a spaced SVG. */
select.bf-input{cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%235C6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:14px 14px;padding-right:44px}
select.bf-input::-ms-expand{display:none}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);margin:4px 0 18px;cursor:pointer}
.decl-box{border:1.5px solid var(--blue-100);background:var(--blue-50);border-radius:14px;padding:14px 16px 2px;margin:4px 0 16px}
.decl-box > b{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink)}
.decl-box > b i{color:var(--blue);font-size:18px}
.decl-box ul{margin:8px 0 12px;padding-left:20px;font-size:13px;line-height:1.6;color:var(--ink)}
.decl-box .consent{margin-bottom:12px;font-weight:600;color:var(--ink)}
.decl-box a,.consent a{color:var(--blue);font-weight:700;text-decoration:none}
.pv-steps{display:flex;align-items:center;margin-bottom:24px}
.pv-step{flex:0 0 auto}
.pv-num{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--ink-3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;border:1.5px solid var(--line-2);transition:.2s}
.pv-step.on .pv-num{background:var(--blue);color:#fff;border-color:var(--blue)}
.pv-step.done .pv-num{background:var(--mint);color:#fff;border-color:var(--mint)}
.pv-conn{flex:1;height:2px;background:var(--line-2);margin:0 10px;border-radius:2px;transition:.2s}
.pv-conn.done{background:var(--mint)}
.pv-h{font-family:'Sora',sans-serif;font-weight:700;font-size:17px;color:var(--ink);margin:0 0 18px}
.pv-pane{display:none}.pv-pane.on{display:block}
.pv-actions{display:flex;gap:12px;margin-top:22px}
.pv-actions .btn{flex:1;justify-content:center}
.up-photo{display:flex;align-items:center;gap:16px}
.up-avatar{width:64px;height:64px;border-radius:50%;background:var(--bg-2);border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:26px;overflow:hidden;flex-shrink:0}
.up-avatar img{width:100%;height:100%;object-fit:cover}
.up-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1.5px solid var(--line-2);border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;background:#fff;transition:.15s}
.up-btn:hover{border-color:var(--blue);color:var(--blue)}
.up-hint{font-size:12px;color:var(--ink-3);margin-top:7px}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:22px;border:1.5px dashed var(--line-2);border-radius:14px;cursor:pointer;text-align:center;transition:.18s;background:var(--bg)}
.dropzone:hover{border-color:var(--blue);background:var(--blue-50)}
.dropzone i{font-size:26px;color:var(--blue);margin-bottom:2px}
.dz-t{font-weight:700;font-size:14px;color:var(--ink)}
.dz-s{font-size:12px;color:var(--ink-3)}
.up-files{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.up-file{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;background:#fff;color:var(--ink-2)}
.up-file i{color:var(--blue);font-size:16px}
.day-row{display:flex;flex-wrap:wrap;gap:8px}
.day-toggle{flex:1;min-width:42px;text-align:center;border:1.5px solid var(--line-2);border-radius:10px;padding:10px 4px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.15s;user-select:none}
.day-toggle:hover{border-color:var(--blue)}
.day-toggle.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.consent input{width:18px;height:18px;margin-top:1px;flex-shrink:0;accent-color:var(--blue)}
@media(max-width:980px){.benefit-row{grid-template-columns:1fr 1fr}.donor-grid,.hs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.benefit-row,.donor-grid,.hs-grid{grid-template-columns:1fr}.cta-strip{padding:30px}}

/* ── Searchable select (public/js/searchable-select.js) ──────────────
   Layered over a <select data-searchable>; the select stays as the value
   holder and is hidden once the widget is built. */
.combo{position:relative;min-width:0}
.ctl .combo{flex:1}                 /* row: fill the space beside the icon */
.dr-topcell .combo{width:100%}      /* column: match the other controls */
.combo-native-hidden{display:none !important}
.combo-input{padding-right:44px}
.combo-input.combo-bare{padding-right:0}
.combo-caret{position:absolute;right:18px;top:50%;transform:translateY(-50%);pointer-events:none;
  color:var(--ink-3);font-size:17px}
.combo-list{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);margin:0;padding:5px;
  list-style:none;max-height:260px;overflow-y:auto;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,.14)}
.combo-opt{padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink);cursor:pointer;line-height:1.35}
.combo-opt:hover,.combo-opt.on{background:var(--blue-50);color:var(--blue)}
.combo-opt.chosen{font-weight:600}
.combo-opt mark{background:rgba(27,99,227,.18);color:inherit;border-radius:3px;padding:0 1px}
.combo-empty{padding:11px 12px;font-size:13.5px;color:var(--ink-3)}
/* Inside a .ctl the wrapper is the positioned parent, so the list must clear it. */
.ctl .combo-list{left:-34px;right:-13px}

/* Wordmark is mixed case: the mark is the capital D, then "oc" + "Gini". */


/* ── Experiment: the mark doubles as the D of DOCGINI ───────────────
   Sized a touch over the wordmark cap height and set almost flush so
   it reads as a letter rather than an icon beside a word. Remove the
   `logo-dmark` class and restore the D in the markup to drop this. */
.logo.logo-dmark{gap:0}
.logo.logo-dmark .brand{margin-left:-1px}
.logo.logo-dmark .logo-mark{width:23px;height:23px}

/* The mark is brand ink, which all but disappears on the blue auth panel.
   The mono asset cannot help here: it paints with currentColor, which an
   <img> cannot inherit, so it would render black. Force it white instead. */
.auth-side .logo-mark img{filter:brightness(0) invert(1)}

/* ==========================================================================
   Mobile layout fixes (audit 27 Sep 2026)

   Several grids were declared in inline style="" attributes, which no media
   query can override, so they stayed two columns however narrow the screen
   got and pushed the page sideways. They now live here as classes with a
   mobile breakpoint.
   ========================================================================== */

/* Home hero: headline beside the phone illustration. */
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:center;padding-bottom:60px}

/* Generic two-column feature row (how-it-works, for-patients, for-hospitals).
   Where the visual comes first in the markup, .split-copy/.split-visual put
   the text above it once the row collapses. */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}

@media(max-width:820px){
  .split-grid{grid-template-columns:1fr;gap:32px}
  .split-grid > .split-copy{order:1}
  .split-grid > .split-visual{order:2}
}

/* Hero copy. Declared here rather than inline so the mobile rules below can
   re-align it. Scoped under .page-hero because .page-hero p and
   .page-hero h1 would otherwise outrank a bare class and drop the margins
   these used to carry inline. */
.page-hero .hero-title{text-align:left;margin-top:18px}
.page-hero .hero-sub{text-align:left;margin:18px 0 26px;max-width:480px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* Sections that carry their weight on desktop but only cost scrolling on a
   phone. Kept in the DOM for search engines rather than removed outright. */
@media(max-width:768px){
  .hide-mobile{display:none}

  .hero-grid{grid-template-columns:1fr;gap:20px;padding-bottom:32px}
  /* The photo sits after the headline and button, so it costs no content
     above the fold. */
  .hero-fig{display:block;height:auto;max-width:none}
  .hero-fig .hero-photo{position:relative;inset:auto;aspect-ratio:4/3;border-radius:20px}
  .page-hero .hero-title,.page-hero .hero-sub{text-align:center}
  .page-hero .hero-sub{margin:14px auto 28px}
  .hero-cta{justify-content:center}
}

/* Registration wizard: the dot row does not fit a phone ------------------- */
.wiz-compact{display:none;margin-bottom:22px}
.wiz-compact-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.wiz-compact-n{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.wiz-compact-t{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:var(--ink)}
.wiz-compact-bar{height:5px;border-radius:100px;background:var(--line-2);overflow:hidden}
.wiz-compact-bar > span{display:block;height:100%;border-radius:100px;background:var(--blue);transition:width .25s}

@media(max-width:480px){
  /* Seven dots plus connectors need ~334px inside a ~288px card. */
  .wiz-steps{display:none}
  .wiz-compact{display:block}
}

/* Form rows ---------------------------------------------------------------
   .bf-grid already existed; the templates were shadowing it with inline
   styles, so no media query could reach it. Pairs like Phone + CNIC or
   Gender + City truncated their placeholders side by side on a phone. */
.bf-grid-3{grid-template-columns:1fr 1fr 1fr}
.choice-row-3{grid-template-columns:1fr 1fr 1fr}
.choice-row-auto{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

@media(max-width:480px){
  .bf-grid,.bf-grid-3,.hsb-grid{grid-template-columns:1fr}
  /* Three short options (Female/Male/Other) fit one row once the tiles stop
     being desktop-sized; two columns left the third stranded on its own. */
  .choice-row-3{grid-template-columns:repeat(3,1fr);gap:8px}
  .choice-row-3 .choice{padding:10px 4px;min-height:0}
  .choice-row-3 .choice i{font-size:19px}
  .choice-row-3 .choice .t{font-size:13px}
}

/* iOS zooms the page in when a focused field is under 16px, then leaves it
   zoomed. Raising the field font is the accessible fix; maximum-scale=1 is
   not, because it also blocks deliberate pinch-zoom.

   !important is load-bearing here: per-page <style> blocks are pushed into
   @stack('styles'), which renders after this file, so their field rules
   would otherwise win no matter how specific this selector is. */
@media(max-width:1024px){
  input,select,textarea,.combo-input{font-size:16px !important}
}

/* Buttons on phones -------------------------------------------------------
   The desktop pill is 55px tall with 26px of side padding, which dominates a
   narrow screen and makes two buttons in a row wrap awkwardly. This trims it
   to roughly 46px: smaller, but still above the 44px minimum tap target. */
@media(max-width:768px){
  .btn{font-size:14.5px;padding:12px 20px;gap:8px}
  .btn i{font-size:17px}
  .btn-sm{padding:9px 15px;font-size:13.5px}
  .btn-sm i{font-size:16px}
  /* Side by side these overflow; let them wrap and centre instead. */
  .hero-cta,.cta-row{flex-wrap:wrap;justify-content:center}
  /* Keep every tappable control at or above the 44px minimum. */
  .btn,.btn-sm{min-height:44px}
  .signin{min-height:44px;padding:10px 16px}
  .pg-btn{height:44px;min-width:44px}
}

/* Result card price + action --------------------------------------------
   Below 720px the fee block and the Book button sit side by side, which
   squeezes "Rs. 2,050 / per visit" into three wrapped lines on a phone.
   Give them a row each and stop the amount breaking. */
.dr-fee b{white-space:nowrap}

@media(max-width:560px){
  .dr-row .dr-side-col{flex-direction:column;align-items:stretch;gap:10px}
  .dr-row .dr-fee{display:flex;align-items:baseline;justify-content:center;gap:7px;padding:9px 14px}
  .dr-row .dr-fee b,.dr-row .dr-fee span{display:inline;margin-top:0}
}

/* Result card on phones: photo on top --------------------------------------
   The 80px avatar column ate a quarter of the width and squeezed the name,
   specialty and location into a narrow ribbon beside it. One column, photo
   first, gives the text the full card. */
@media(max-width:560px){
  .dr-row{grid-template-columns:1fr;gap:12px;padding:18px;justify-items:center}
  .dr-row .dr-ava-wrap{width:88px;height:88px}
  .dr-row .dr-info{width:100%;text-align:center}
  .dr-row .dr-top,.dr-row .dr-meta{justify-content:center}
  .dr-row .dr-side-col{width:100%}
}

/* ==========================================================================
   Filters as a slide-in sheet on phones

   Expanded above the results, the filter form pushed the first card more
   than a screen down. Below 768px the panel becomes a right-hand sheet
   (matching the direction the nav menu already comes from) behind a
   "Filters" button that shows how many are in force.
   ========================================================================== */
.filter-trigger{display:none}
.filter-sheet-head{display:none}

@media(max-width:768px){
  .filter-trigger{
    display:inline-flex;align-items:center;gap:8px;min-height:44px;
    padding:10px 18px;margin-bottom:16px;border-radius:100px;
    border:1.5px solid var(--line-2);background:#fff;color:var(--ink);
    font-family:'Sora',sans-serif;font-size:14.5px;font-weight:600;cursor:pointer
  }
  .filter-trigger i{font-size:17px;color:var(--blue)}
  .filter-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 6px;border-radius:100px;
    background:var(--blue);color:#fff;font-size:11.5px;font-weight:700
  }

  .dr-side{
    position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);z-index:130;
    background:#fff;box-shadow:-12px 0 40px rgba(15,23,42,.18);
    transform:translateX(100%);visibility:hidden;
    transition:transform .28s ease,visibility 0s linear .28s;
    overflow-y:auto;padding:0 18px 24px;
    overscroll-behavior:contain
  }
  .dr-side.open{transform:none;visibility:visible;transition:transform .28s ease,visibility 0s}

  .filter-sheet-head{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:2;background:#fff;
    padding:18px 0 14px;margin-bottom:6px;border-bottom:1px solid var(--line);
    font-family:'Sora',sans-serif;font-size:17px;font-weight:700
  }
  .filter-sheet-close{
    width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-2);
    background:#fff;color:var(--ink);display:inline-flex;align-items:center;
    justify-content:center;font-size:20px;cursor:pointer
  }
  /* The sheet has its own header, so the form's inner one is a duplicate. */
  .dr-side .dr-fhead{display:none}
  .dr-side .dr-filters{border:none;box-shadow:none;padding:0;background:transparent}

  .filter-backdrop{
    position:fixed;inset:0;z-index:129;background:rgba(12,27,51,.45);
    opacity:0;pointer-events:none;transition:opacity .28s
  }
  .filter-backdrop.open{opacity:1;pointer-events:auto}
}

@media(max-width:768px){
  /* Relocated into the sheet by the layout script, so it loses the card
     chrome it wears above the results. */
  .dr-side .dr-toolbar{margin:14px 0 0;padding:0;background:transparent;border:none;box-shadow:none}
  .dr-side .dr-topbar{display:grid;grid-template-columns:1fr;gap:12px;background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:16px 0 0}
  .dr-side .dr-topcell{width:100%}
}

/* Toolbar selects: match the combobox caret -------------------------------
   Dropdowns with more than ten options are swapped for a searchable combo,
   which draws its own caret 13px from the edge. The plain selects beside
   them kept the native arrow, so the two sat at different offsets in the
   same column. Draw the same caret on both. */
.dr-topcell select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%235C6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:14px 14px;
  padding-right:44px
}

/* Mobile menu typography: the section is the heading, the links under it
   are not. Everything was 18px semibold, which read as one flat list and
   was oversized for a phone. */
@media(max-width:768px){
  .mobile-menu a{font-size:15.5px;font-weight:500;padding:12px 0}
  .mobile-menu a.mm-sub{font-size:15.5px;font-weight:400;padding:12px 0}
  /* The group heading reads at the same size as the links it introduces,
     in bold, with a rule above it. As a small grey uppercase label it was
     lighter than the links and the menu ran together as one long list with
     no visible break between Book now, Solutions and Company.
     The base rule sets border:none!important, hence the !important here. */
  .mm-group{
    font-size:15.5px;
    font-weight:700;
    color:var(--ink);
    text-transform:none;
    letter-spacing:0;
    margin-top:22px;
    padding-top:16px;
    border-top:1px solid var(--line)!important;
  }
  /* The link above already draws a bottom border; with the heading's own
     top border that made two rules with a gap between them. */
  .mobile-menu a:has(+ .mm-group){border-bottom:none}
  /* Nothing to separate from above the first one. */
  .mobile-menu > .mm-group:first-of-type{margin-top:14px}
}

/* Booking panels: the slot count needs its own row on a phone, or the
   heading beside it wraps to two words per line. */
@media(max-width:560px){
  .hs-book-form .panel-head{flex-direction:column;align-items:flex-start;gap:4px}
  .hs-book-form .panel-head h3{white-space:nowrap}
}

/* Filter bar: the trigger, with sorting beside it ------------------------- */
.dr-filterbar{display:contents}

@media(max-width:768px){
  .dr-filterbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
  .dr-filterbar .filter-trigger{margin-bottom:0;flex:none}
  /* Sorting is not a filter, so it stays out of the sheet. */
  .dr-filterbar .dr-topcell-sort{flex:1 1 150px;min-width:0}
  .dr-filterbar .dr-topcell-sort label{display:none}

  /* Search/Reset sit at the foot of the sheet, under everything they act
     on, and stay reachable while the list above scrolls. */
  .dr-side .dr-actions{
    position:sticky;bottom:0;margin:18px -18px 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--line)
  }
}

/* A submit that is not ready yet ----------------------------------------
   Styled as unavailable but still clickable, so a tap can say which field
   is still missing instead of doing nothing. */
.btn.is-blocked{opacity:.55;box-shadow:none;cursor:not-allowed}
.btn.is-blocked:hover{transform:none;box-shadow:none}
.needs-attention{animation:attention 1.4s ease}
@keyframes attention{
  0%,100%{box-shadow:0 0 0 0 rgba(27,99,227,0)}
  20%,60%{box-shadow:0 0 0 4px rgba(27,99,227,.22)}
}

/* Doctor profile: booking bar pinned to the bottom on phones -------------
   The fee card sits below About, Services and Practice locations, so the
   only way to book was to scroll most of the page. */
.book-bar{display:none}

@media(max-width:768px){
  .book-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:110;
    display:flex;align-items:center;gap:14px;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(15,23,42,.10)
  }
  .book-bar-fee{display:flex;flex-direction:column;line-height:1.15;flex:none}
  .book-bar-fee b{font-family:'Sora',sans-serif;font-size:18px;color:var(--ink);white-space:nowrap}
  .book-bar-fee span{font-size:11.5px;color:var(--ink-3)}
  .book-bar .btn{flex:1;justify-content:center}
  /* Keep the bar from covering the end of the page. */
  body:has(.book-bar) footer{padding-bottom:84px}
}

/* Featured doctors: four is plenty on a phone. "See all doctors" already
   sits under the grid for anyone who wants the rest. */
@media(max-width:768px){
  .doc-grid .doc:nth-child(n+5){display:none}
}

/* Hospital stat pair. Was inline, so no media query could reach it. */
.hosp-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px}
@media(max-width:480px){.hosp-stat-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Date inputs

   A native date control carries an intrinsic width from its own format text
   and does not shrink to its container, so on a narrow card it pushed past
   the edge. width:100% plus min-width:0 and border-box pins it to whatever
   space it is given.
   ========================================================================== */
/* Every date field fills the space it is given rather than its own
   intrinsic width, which pushed past narrow cards on phones. */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Date and time fields: one look everywhere.

   A calendar icon in the brand blue sits at the left of every date field
   (a clock on time fields), and the browser's own indicator is hidden so
   the two never show together. iOS Safari draws no indicator at all and
   Chrome draws one, so without this the same field looked like two
   different controls depending on the device.

   The background properties are !important on purpose. Component classes
   such as .f-input set `background:#fff`, and that shorthand resets
   background-image, which is why the icon used to vanish on most fields.

   A click anywhere on the field opens the picker (date-guard.js calls
   showPicker), so the icon does not need to be a hit target itself.

   A field that already sits beside its own icon (`<i class="ti ..."></i>`
   followed by the input, as in the website's filter column) is left out,
   so it keeps that icon and its own padding instead of showing two. */
input[type="date"]:not(.ti + *),
input[type="datetime-local"]:not(.ti + *),
input[type="month"]:not(.ti + *),
input[type="time"]:not(.ti + *) {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231B63E3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M4 11h16M11 15h1M12 15v3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
  padding-left: 14px !important;
  padding-right: 42px !important;
}
input[type="time"]:not(.ti + *) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231B63E3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") !important; }

/* The native indicator stays clickable but invisible, laid over our icon.
   position:relative on the input keeps it inside the field: an absolutely
   positioned indicator on an unpositioned input once stretched across the
   page and swallowed taps meant for other buttons. */
input[type="date"]:not(.ti + *)::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:not(.ti + *)::-webkit-calendar-picker-indicator,
input[type="month"]:not(.ti + *)::-webkit-calendar-picker-indicator,
input[type="time"]:not(.ti + *)::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 44px;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* A field with its own icon hides the browser's glyph too, so it shows one
   icon, not two. Clicking anywhere on it still opens the picker. */
.ti + input[type="date"]::-webkit-calendar-picker-indicator,
.ti + input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.ti + input[type="month"]::-webkit-calendar-picker-indicator,
.ti + input[type="time"]::-webkit-calendar-picker-indicator { display: none; }

/* Safari sizes the value text box from the field's own metrics; without
   this it can still report a wider intrinsic size than the box. */
input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* Feedback from date-guard.js when an out-of-range date is rejected. */
.date-guard-note{margin-top:6px;font-size:12.5px;line-height:1.35;color:#D64545}
.date-guard-bad{border-color:#D64545 !important;box-shadow:0 0 0 3px rgba(214,69,69,.12) !important}

/* Auth pages: line the mark's ink up with the text under it -------------
   logo-mark.svg carries 11.8% of empty space on its left edge, so a box set
   flush with the heading still leaves the glyph visibly indented.

   Pulling back by that full 11.8% overshoots, because the heading's first
   letter has a left side bearing of its own. What lines the two up is the
   mark's padding minus that bearing, so these values are measured from the
   rendered pixels rather than derived: at 3x, the mark's leftmost ink and
   the heading's leftmost ink now land on the same column.

   Only needed where the logo sits directly above left-aligned text. */
.auth-mobilebar .logo .logo-mark { margin-left: -2.6px; }
.auth-side .logo .logo-mark { margin-left: -1.7px; }

/* Vertically, flexbox centres the two boxes, but the wordmark's ink does
   not sit in the middle of its own box: Sora reserves room below the
   baseline for descenders, which DOCGINI has none of, so its capitals ride
   high and the mark reads as sitting low beside them. Pinning line-height
   does not help, because the asymmetry is in the font's own ascent and
   descent. These nudges are measured from the rendered pixels: the mark's
   ink centre and the wordmark's ink centre now share a row. */
.auth-mobilebar .logo .logo-mark { margin-top: -5.2px; }
.auth-side .logo .logo-mark { margin-top: -3.4px; }

/* The header's Sign in button moves into the menu on phones, so the logo
   and the menu button get the width to themselves. */
@media(max-width:768px){
  header .nav-cta .signin{display:none}
}
/* A form inside the menu should look like the links around it. */
.mm-form{margin:0;padding:0;border:none}
.mobile-menu .mm-linkbtn{
  display:block;width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--line);padding:12px 0;cursor:pointer;
  font-family:'Sora',sans-serif;font-size:15.5px;font-weight:400;color:var(--ink);
}

/* Education panel on a doctor's public profile ---------------------------
   One card per degree. The degree leads, because that is what a patient is
   scanning for; the institution and year sit under it in smaller, quieter
   type. Black text throughout, per the house rule against light grey. */
.dquals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dquals li{padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:#fff}
.dqual-degree{font-family:'Sora',sans-serif;font-weight:700;font-size:14.5px;color:var(--ink)}
.dqual-inst{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.dqual-meta{font-size:12.5px;color:var(--ink-2);margin-top:4px}

/* Visually hidden, still announced. For labels that a sighted user reads
   from context (a search box with a placeholder) but a screen reader
   needs spelled out. Without this the text simply renders on the page. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* Gap utilities, px, the scale the design files use (.gap-12{gap:12px}).
   The markup has used these since it was ported from those mockups, but
   no stylesheet ever defined them, so every one was a no-op: the icon in
   a "gap-12" icon-and-label pair sat flush against its text. */
.gap-2{gap:2px}
.gap-3{gap:3px}
.gap-4{gap:4px}
.gap-8{gap:8px}
.gap-12{gap:12px}
.gap-16{gap:16px}

/* ── Photography ────────────────────────────────────────────────────
   Hero: a photo in place of the phone illustration, with a static
   frosted strip across the bottom (over the desk, clear of faces)
   carrying the three product claims. Solution cards: a photo header that
   bleeds to the card edge, the icon tile overlapping its bottom. */
.hero-photo{position:absolute;inset:18px 0;z-index:0;border-radius:28px;overflow:hidden;box-shadow:0 24px 48px rgba(27,58,107,.20)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% center;display:block}
.hero-strip{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;gap:8px;padding:11px 14px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 8px 24px rgba(12,27,51,.14)}
.hero-strip-item{display:flex;align-items:center;gap:9px;min-width:0}
.hero-strip-item .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-size:18px}
.hero-strip-item b{display:block;font-family:'Sora',sans-serif;font-size:14px;font-weight:700;line-height:1.1;color:var(--ink)}
.hero-strip-item span:not(.ic){display:block;font-size:11.5px;color:var(--ink);margin-top:2px;white-space:nowrap}
@media(max-width:480px){
  .hero-strip{left:10px;right:10px;bottom:10px;padding:9px 10px;gap:4px}
  .hero-strip-item{gap:6px}
  .hero-strip-item .ic{width:28px;height:28px;font-size:15px;border-radius:8px}
  .hero-strip-item b{font-size:12.5px}
  .hero-strip-item span:not(.ic){font-size:10px}
}

.svc-has-photo{overflow:hidden;display:flex;flex-direction:column}
.svc-photo{margin:-30px -30px 0;aspect-ratio:16/10;overflow:hidden;background:var(--blue-50)}
.svc-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
@media (hover: hover){.svc-has-photo:hover .svc-photo img{transform:scale(1.04)}}
.svc-has-photo .svc-ic{position:relative;margin-top:-29px;box-shadow:0 0 0 4px #fff,0 6px 16px rgba(12,27,51,.10)}

/* Solution pages: a wide photo banner under the centred page header. */
.page-hero-photo{max-width:1080px;margin:40px auto 0;border-radius:28px;overflow:hidden;aspect-ratio:21/8;box-shadow:0 24px 48px rgba(27,58,107,.16)}
.page-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
@media(max-width:720px){.page-hero-photo{aspect-ratio:4/3;border-radius:20px;margin-top:28px}}

/* "Two sides of care": each side is its own row, copy beside a photo.
   The doctor row flips so the photos zig-zag down the page. */
.offer-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.offer-row + .offer-row{margin-top:72px}
.offer-row-flip .offer-photo{order:-1}
.offer-copy .offer-head h3{font-size:clamp(24px,2.6vw,30px)}
.offer-copy .offer-list{margin-bottom:28px}
.offer-photo{border-radius:28px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 24px 48px rgba(27,58,107,.16)}
.offer-photo img{width:100%;height:100%;object-fit:cover;display:block}
.btn-mint{background:var(--mint);color:#fff;border-color:var(--mint)}
@media (hover: hover){.btn-mint:hover{filter:brightness(.95)}}
@media(max-width:820px){
  .offer-row{grid-template-columns:1fr;gap:28px}
  /* Photo first on phones for both rows, so the pattern stays regular. */
  .offer-row .offer-photo{order:-1;aspect-ratio:4/3;border-radius:20px}
}

/* For-doctors benefit cards: a small product snippet at the top of each
   card showing the feature, rather than an icon alone. Built in HTML so it
   stays sharp and matches the portal. Decorative (aria-hidden). */
.svc-has-vis{overflow:hidden;display:flex;flex-direction:column}
.dvis{position:relative;margin:-30px -30px 0;height:176px;padding:20px 22px 30px;display:flex;align-items:center;justify-content:center}
.dvis-blue{background:linear-gradient(160deg,#EDF3FE,#DBE7FD)}
.dvis-mint{background:linear-gradient(160deg,#E4F7F4,#CDEFEA)}
.dvis-coral{background:linear-gradient(160deg,#FEF1EF,#FDE1DC)}
.svc-has-vis .svc-ic{position:relative;margin-top:-29px;box-shadow:0 0 0 4px #fff,0 6px 16px rgba(12,27,51,.10)}
.dv-card{width:100%;max-width:290px;background:#fff;border-radius:14px;box-shadow:0 10px 24px rgba(12,27,51,.10);padding:12px 14px;display:flex;flex-direction:column;gap:9px;font-size:12px;color:var(--ink)}
.dv-grow{flex:1;min-width:0}
.dv-row{display:flex;align-items:center;gap:9px}
.dv-row b{display:block;font-size:12.5px;font-weight:700}
.dv-row span:not(.dv-av):not(.dv-pill){display:block;font-size:11px;color:var(--ink-2)}
.dv-av{width:28px;height:28px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.dv-pill{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:100px}
.dv-pill.ok{background:var(--mint-50);color:#0E8F80}
.dv-float{position:absolute;right:18px;bottom:22px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:6px 10px;border-radius:100px;box-shadow:0 6px 14px rgba(27,99,227,.3);display:flex;align-items:center;gap:4px}
.dv-now{display:flex;align-items:center;gap:8px;background:var(--mint-50);border-radius:10px;padding:7px 10px}
.dv-now span{font-size:11px;font-weight:600;color:#0E8F80}
.dv-now b{font-family:'Sora',sans-serif;font-size:20px;color:var(--ink);flex:1}
.dv-live{display:inline-flex;align-items:center;gap:5px}
.dv-live i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(22,184,166,.25)}
.dv-q{display:flex;align-items:center;gap:9px;font-size:11.5px}
.dv-tok{font-family:'Sora',sans-serif;font-weight:700;font-size:12.5px;width:34px}
.dv-btn{font-size:10.5px;font-weight:700;color:#fff;background:var(--mint);padding:4px 10px;border-radius:7px}
.dv-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);padding:3px 7px}
.dv-chips{display:flex;gap:6px}
.dv-chips span{flex:1;background:#FEF1EF;border-radius:8px;padding:5px 7px;font-weight:700;font-size:12px}
.dv-chips small{display:block;font-size:9.5px;font-weight:600;color:var(--ink-2)}
.dv-rx{display:flex;gap:10px;align-items:flex-start}
.dv-rx > b{font-family:'Sora',sans-serif;font-size:18px;color:var(--coral);line-height:1}
.dv-line{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;padding:3px 0;border-bottom:1px dashed var(--line)}
.dv-line:last-child{border-bottom:0}
.dv-line em{font-style:normal;font-weight:700}
.dv-earn span{display:block;font-size:11px;color:var(--ink-2)}
.dv-earn b{font-family:'Sora',sans-serif;font-size:22px;color:var(--ink)}
.dv-led{display:flex;justify-content:space-between;font-size:11.5px;padding-top:7px;border-top:1px solid var(--line)}
.dv-led em{font-style:normal;font-weight:700}
.dv-led em.in{color:#0E8F80}
.dv-week{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.dv-week > div{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.dv-week small{font-size:10px;font-weight:700;text-align:center}
.dv-week i{height:10px;border-radius:3px;background:#EEF1F5}
.dv-week i.on{background:var(--mint)}
.dv-week .leave span{flex:1;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#FEF1EF;color:var(--coral);font-size:9px;font-weight:700;writing-mode:vertical-rl;transform:rotate(180deg)}
.dv-foot{font-size:11px;color:var(--ink-2);display:flex;align-items:center;gap:5px}
.dv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dv-stats small{display:block;font-size:10px;color:var(--ink-2)}
.dv-stats b{font-family:'Sora',sans-serif;font-size:15px}
.dv-stats em{display:block;font-style:normal;font-size:10px;font-weight:700}
.dv-stats em.up{color:#0E8F80}
.dv-stats em.star{color:var(--amber)}
.dv-spark{width:100%;height:42px;display:block}

/* For-doctors: "Inside your dashboard" feature tiles. */
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dash-tile{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.2s}
@media (hover: hover){.dash-tile:hover{border-color:transparent;box-shadow:var(--shadow-card);transform:translateY(-3px)}}
.dash-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:23px;flex:none}
.dash-tile h3{font-size:16.5px;margin:0 0 6px}
.dash-tile p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}
@media(max-width:1000px){.dash-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .dash-grid{grid-template-columns:1fr;gap:12px}
  .dash-tile{flex-direction:row;align-items:flex-start;padding:16px}
}

/* Extra snippet parts used by the For-patients cards. */
.dv-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.dv-slots span{font-size:11px;font-weight:700;text-align:center;padding:5px 0;border:1px solid var(--line);border-radius:7px}
.dv-slots .sel{background:var(--blue);border-color:var(--blue);color:#fff}
.dv-slots .off{background:#F1F5F9;color:#94A3B8;text-decoration:line-through}
.dv-prog{height:8px;border-radius:100px;background:#EEF1F5;overflow:hidden}
.dv-prog i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--mint),#0FA89A)}
.dv-doc{display:flex;align-items:center;gap:10px;padding:2px 0}
.dv-doc > .ti:first-child{width:30px;height:30px;border-radius:9px;background:#FEF1EF;color:var(--coral);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.dv-doc b{display:block;font-size:12.5px}
.dv-doc span{display:block;font-size:11px;color:var(--ink-2)}
.dv-dl{font-size:16px;color:var(--ink)}
.dv-move{display:flex;align-items:center;gap:8px}
.dv-move > div{flex:1;border-radius:9px;padding:6px 9px}
.dv-move small{display:block;font-size:9.5px;font-weight:600;color:var(--ink-2)}
.dv-move b{font-size:12px}
.dv-move .old{background:#F1F5F9}
.dv-move .old b{text-decoration:line-through;color:#64748B}
.dv-move .new{background:var(--blue-50);border:1.5px solid var(--blue)}
.dv-move > .ti{color:var(--blue);font-size:16px}
.dv-fam{display:flex;gap:6px}
.dv-fam span{width:34px;height:34px;border-radius:10px;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.dv-fam span.add{background:#fff;color:var(--ink);border:1.5px dashed #94A3B8}
.dv-note{width:100%;max-width:290px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;box-shadow:0 10px 24px rgba(12,27,51,.10);padding:10px 12px;font-size:12px;color:var(--ink)}
.dv-note + .dv-note{margin-top:8px}
.dvis:has(.dv-note){flex-direction:column}
.dv-note .ic{width:30px;height:30px;border-radius:9px;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.dv-note b{display:block;font-size:12.5px}
.dv-note span:not(.ic){display:block;font-size:11px;color:var(--ink-2)}
.dv-note.sm{max-width:260px;opacity:.85}
.dv-note.sm .ic{background:#FEF1EF;color:var(--coral)}
.dv-lock{width:56px;height:56px;border-radius:16px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 10px 24px rgba(27,99,227,.3);flex:none;margin-right:14px}
.dv-share{max-width:300px}
.dv-row.muted b{color:#64748B}
.dv-pill.no{background:#FEEEEC;color:#B42318}

/* A lone last card spans the row: snippet on the left, copy on the right. */
.svc-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:34px;align-content:center}
.svc-wide .dvis{grid-row:1 / span 3;margin:-30px 0 -30px -30px;height:auto;min-height:200px}
.svc-wide .svc-ic{margin-top:0;box-shadow:none}
@media(max-width:920px){
  .svc-wide{display:flex;flex-direction:column}
  .svc-wide .dvis{margin:-30px -30px 0;min-height:0;height:176px}
  .svc-wide .svc-ic{margin-top:-29px;box-shadow:0 0 0 4px #fff,0 6px 16px rgba(12,27,51,.10)}
}

/* Feature panels: a photo with the app mock-up overlapping its bottom
   edge. Stacked rather than laid over the photo so the card sits on the
   table/laps, never on a face, at any column width. */
.fp-photo-panel{position:relative;display:flex;flex-direction:column;align-items:center}
.fp-photo-bg{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-lg);box-shadow:0 24px 48px rgba(27,58,107,.16)}
.fp-photo-panel > .fp-float-card{position:relative;margin-top:-72px;max-width:300px!important}
@media(max-width:820px){.fp-photo-bg{aspect-ratio:4/3;border-radius:20px}.fp-photo-panel > .fp-float-card{margin-top:-56px}}

/* ── About us ───────────────────────────────────────────────────────── */
.ab-h2{font-size:clamp(26px,3.4vw,36px);margin:14px 0 14px}
.ab-lead{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 14px;max-width:520px}
.ab-photo{border-radius:28px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 24px 48px rgba(27,58,107,.16)}
.ab-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Stats band sits under the hero photo. */
.ab-stats-band{padding:8px 0 20px}
.ab-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.ab-stat{display:flex;align-items:center;gap:14px;padding:4px 8px}
.ab-stat + .ab-stat{border-left:1px solid var(--line);padding-left:22px}
.ab-stat .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.ab-stat b{display:block;font-family:'Sora',sans-serif;font-size:26px;line-height:1.1;color:var(--ink)}
.ab-stat span:not(.ic){display:block;font-size:13.5px;color:var(--ink);margin-top:2px}

/* Before / after rows: red crosses for the old way, green ticks after. */
.ab-ic-old{background:linear-gradient(135deg,#64748B,#475569);color:#fff;box-shadow:0 10px 22px rgba(71,85,105,.25)}
.ab-list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:14px}
.ab-list li{display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.ab-list li i{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.ab-list.old li i{background:#FEEEEC;color:#B42318}
.ab-list.new li i{background:var(--mint-50);color:#0E8F80}
.ab-list.old{margin-bottom:0}

/* Ecosystem: nodes either side of a hub, joined by dashed lines. */
.ab-eco{position:relative;display:grid;grid-template-columns:1fr 220px 1fr;gap:0;align-items:center;max-width:1040px;margin:0 auto}
.ab-eco-side{display:flex;flex-direction:column;gap:16px}
.ab-node{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;color:var(--ink);transition:.2s}
@media (hover: hover){.ab-node:hover{border-color:var(--blue);box-shadow:var(--shadow-card)}}
.ab-node .ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.ab-node b{display:block;font-family:'Sora',sans-serif;font-size:15.5px}
.ab-node span:not(.ic){display:block;font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.ab-eco-lines{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;overflow:visible}
.ab-eco-lines line{stroke:#B9CCF3;stroke-width:2;stroke-dasharray:5 5}
.ab-eco-lines circle{fill:#fff;stroke:#9DB8EE;stroke-width:2}
.ab-eco-side,.ab-hub{position:relative;z-index:1}
.ab-eco-side:first-of-type{padding-right:34px}
.ab-eco-side:last-of-type{padding-left:34px}
.ab-hub{display:flex;align-items:center;justify-content:center}
.ab-hub-in{width:190px;height:190px;border-radius:50%;background:#fff;border:2px solid var(--blue-100);box-shadow:0 0 0 14px var(--blue-50),0 18px 40px rgba(27,99,227,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.ab-hub-in .logo{font-size:22px}
.ab-hub-in > span{font-size:12px;font-weight:600;color:var(--ink)}

.ab-values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ab-value{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.ab-value .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.ab-value h3{font-size:17px;margin:0 0 8px}
.ab-value p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0}

/* Coverage card. */
.ab-map{background:linear-gradient(160deg,var(--blue-50),#fff);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.ab-map-title{display:flex;align-items:center;gap:8px;font-family:'Sora',sans-serif;font-weight:700;font-size:17px;margin-bottom:14px}
.ab-map-title i{color:var(--blue);font-size:22px}
.ab-towns{display:flex;flex-wrap:wrap;gap:8px}
.ab-towns span{background:#fff;border:1px solid var(--blue-100);color:var(--ink);font-size:13.5px;font-weight:600;padding:7px 13px;border-radius:100px}
.ab-towns.sm span{font-weight:500;font-size:12.5px;padding:5px 11px;border-color:var(--line);display:inline-flex;align-items:center;gap:4px}
.ab-towns.sm i{color:var(--blue);font-size:13px}
.ab-map-more{margin-top:20px;padding-top:18px;border-top:1px dashed var(--line)}
.ab-more-btn{font:inherit;font-weight:700;font-size:12.5px;padding:5px 13px;border-radius:100px;border:1px dashed var(--blue);background:var(--blue-50);color:var(--blue);cursor:pointer;transition:background .15s,color .15s}
.ab-more-btn:hover,.ab-more-btn:focus-visible{background:var(--blue);color:#fff;border-style:solid;outline:none}
.ab-loc-dlg{margin:auto;width:min(560px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 48px));padding:0;border:0;border-radius:20px;box-shadow:0 30px 70px rgba(12,27,51,.28);color:var(--ink);overflow:hidden}
.ab-loc-dlg[open]{display:flex;flex-direction:column}
.ab-loc-dlg::backdrop{background:rgba(12,27,51,.45);backdrop-filter:blur(3px)}
.ab-loc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 14px}
.ab-loc-head h3{font-family:'Sora',sans-serif;font-size:19px;margin:0}
.ab-loc-head p{margin:4px 0 0;font-size:13.5px;color:var(--ink)}
.ab-loc-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.ab-loc-x:hover{background:var(--blue-50)}
.ab-loc-search{position:relative;margin:0 24px 10px}
.ab-loc-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--blue);font-size:17px}
.ab-loc-search input{width:100%;box-sizing:border-box;padding:11px 14px 11px 38px;border:1px solid var(--line-2);border-radius:12px;font:inherit;font-size:14px;color:var(--ink)}
.ab-loc-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,99,227,.12)}
.ab-loc-list{overflow-y:auto;padding:4px 24px 22px}
.ab-loc-item{padding:11px 0;border-bottom:1px solid var(--line)}
.ab-loc-item:last-of-type{border-bottom:0}
.ab-loc-d{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px}
.ab-loc-d i{color:var(--blue);font-size:16px}
.ab-loc-d .home{font-size:11px;font-weight:700;background:var(--blue-50);color:var(--blue);padding:2px 8px;border-radius:100px;margin-left:4px}
.ab-loc-c{font-size:13px;line-height:1.55;margin:3px 0 0 22px;color:var(--ink)}
.ab-loc-empty{font-size:13.5px;margin:14px 0 0}
.ab-map-sub{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}

@media(max-width:980px){
  .ab-stats{grid-template-columns:repeat(2,1fr)}
  .ab-stat + .ab-stat{border-left:0;padding-left:8px}
  .ab-values{grid-template-columns:repeat(2,1fr)}
  .ab-eco{grid-template-columns:1fr;gap:18px}
  .ab-eco-side:first-of-type,.ab-eco-side:last-of-type{padding:0}
  .ab-eco-lines{display:none}
  .ab-hub{display:none}
  .ab-hub-in{width:150px;height:150px}
}
@media(max-width:480px){
  .ab-stats{gap:10px;padding:16px}
  .ab-stat{gap:10px;padding:4px}
  .ab-stat .ic{width:40px;height:40px;font-size:20px}
  .ab-stat b{font-size:21px}
  .ab-values{grid-template-columns:1fr}
}

/* Glass variant: a tall photo with the app mock-up laid across its top
   as a horizontal strip of frosted glass, above the people's heads, so
   the photo reads through the card and nobody's face is covered. The
   mock-ups carry inline styles, so the overrides need !important. */
.fp-glass{display:block}
.fp-glass .fp-photo-bg{aspect-ratio:1/1.12;object-position:center bottom}
/* Desktop: the photo matches the height of the copy beside it rather than
   a fixed tall ratio. */
@media(min-width:821px){
  .fp-feature > .fp-glass{align-self:stretch;position:relative;min-height:340px}
  .fp-glass .fp-photo-bg{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:center 30%}
}
.fp-glass > .fp-float-card{position:absolute;top:16px;left:16px;right:16px;bottom:auto;margin:0;width:auto;max-width:none!important;border-radius:18px!important;background:rgba(255,255,255,.36)!important;-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);border:1px solid rgba(255,255,255,.65);box-shadow:0 16px 36px rgba(12,27,51,.20)!important}
.fp-glass .fp-float-card > div:first-child{padding:9px 14px!important;border-bottom-color:rgba(255,255,255,.55)!important}
.fp-glass .fp-float-card > div:first-child span,.fp-glass .fp-float-card > div:first-child i{font-size:13.5px!important}
.fp-glass .fp-float-card > div:last-child{flex-direction:row!important;gap:8px!important;padding:10px 12px 12px!important}
.fp-glass .fp-float-card > div:last-child > div{position:relative;flex:1 1 0;min-width:0;flex-direction:column!important;align-items:flex-start!important;gap:6px!important;padding:9px 10px!important;border-radius:12px!important;background:rgba(255,255,255,.5)!important;border-color:rgba(255,255,255,.75)!important;opacity:1!important}
.fp-glass .fp-float-card > div:last-child > div:first-child{background:rgba(237,243,254,.72)!important;border-color:var(--blue)!important}
.fp-glass .fp-float-card > div:last-child > div > span:first-child{width:28px!important;height:28px!important;border-radius:8px!important;font-size:13px}
.fp-glass .fp-float-card > div:last-child > div > i{position:absolute;top:8px;right:8px}
.fp-glass .fp-float-card > div:last-child > div > div{width:100%;flex-wrap:wrap;gap:0 6px}
.fp-glass .fp-float-card > div:last-child > div div[style*="font-size:14px"],.fp-glass .fp-float-card b{font-size:12.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fp-glass .fp-float-card [style*="font-size:11px"]{font-size:10.5px!important}
.fp-glass .fp-float-card [style*="ink-3"]{color:var(--ink)!important}
@media(max-width:820px){
  .fp-glass .fp-photo-bg{aspect-ratio:4/5}
  .fp-glass > .fp-float-card{top:10px;left:10px;right:10px}
  .fp-glass .fp-float-card > div:last-child{gap:6px!important;padding:8px!important}
  .fp-glass .fp-float-card > div:last-child > div{padding:7px!important}
}

/* Extra snippet parts used by the For-hospitals cards. */
.dv-pill.off{background:#F1F5F9;color:#475569}
.dv-roster{display:grid;grid-template-columns:auto repeat(4,1fr);gap:5px 6px;align-items:center}
.dv-roster small{font-size:10px;font-weight:700;text-align:center}
.dv-roster b{font-size:11px;font-weight:700;padding-right:4px}
.dv-roster i{height:12px;border-radius:3px;background:#EEF1F5}
.dv-roster i.on{background:var(--mint)}
.dv-led:first-child{border-top:0;padding-top:0}
.dv-led b{font-weight:700}
.dv-led em.st{font-size:10px;padding:2px 8px;border-radius:100px}
.dv-led em.done{background:var(--mint-50);color:#0E8F80}
.dv-led em.run{background:var(--blue-50);color:var(--blue)}
.dv-led em.wait{background:#FEF1DC;color:#8A5A0B}
.dv-stock,.dv-qrow{display:grid;grid-template-columns:1.3fr 1fr auto;gap:8px;align-items:center;font-size:11.5px}
.dv-stock em,.dv-qrow em{font-style:normal;font-weight:700;font-size:11px;min-width:30px;text-align:right}
.dv-bar{height:7px;border-radius:100px;background:#EEF1F5;overflow:hidden}
.dv-bar i{display:block;height:100%;border-radius:100px;background:var(--blue)}
.dv-qrow .dv-bar i{background:var(--mint)}
.dv-stock.low .dv-bar i{background:var(--coral)}
.dv-stock.low em{color:#B42318}
.dv-float.warn{background:var(--coral);box-shadow:0 6px 14px rgba(247,108,94,.3)}
.dv-split{display:flex;gap:3px;height:10px}
.dv-split i{border-radius:3px}
.dv-legend{display:flex;gap:12px;font-size:10.5px;font-weight:600}
.dv-legend span{display:inline-flex;align-items:center;gap:4px}
.dv-legend i{width:8px;height:8px;border-radius:2px}

/* How it works: a small screen snippet under each step. */
.step-vis{margin-top:16px;background:linear-gradient(160deg,var(--blue-50),#fff);border-radius:16px;padding:14px}
.step-vis .dv-card{max-width:none;box-shadow:0 6px 16px rgba(12,27,51,.08)}
.dv-search{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.dv-search i{color:var(--blue)}
.dv-stars{color:var(--amber);font-size:14px;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.dv-stars span{font-size:11px;font-weight:600;color:var(--ink);letter-spacing:0}

/* Community blood bank: card snippets and the compatibility chart. */
.dv-life{display:flex;align-items:center;gap:14px}
.dv-life .bag,.dv-life .lives{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 10px 24px rgba(12,27,51,.10)}
.dv-life .bag > i{font-size:30px;color:#E5484D}
.dv-life .lives{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:130px;gap:2px 4px}
.dv-life .lives > i{font-size:24px;color:var(--mint)}
.dv-life small{flex-basis:100%;text-align:center;font-size:11px;font-weight:700;color:var(--ink)}
.dv-life .arr{font-size:22px;color:var(--coral)}
.dv-chipsel{display:flex;gap:5px;flex-wrap:wrap}
.dv-chipsel span{font-size:11px;font-weight:700;padding:4px 9px;border-radius:100px;border:1px solid var(--line)}
.dv-chipsel span.on{background:#E5484D;border-color:#E5484D;color:#fff}
.dv-tog{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600}
.dv-tog i{width:32px;height:18px;border-radius:100px;background:#CBD5E1;position:relative;flex:none}
.dv-tog i::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.dv-tog i.on{background:var(--blue)}
.dv-tog i.on::after{left:16px}

.bb-compat{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center}
.bb-compat-head h3{font-size:20px;margin:0 0 8px}
.bb-compat-head p{font-size:14px;line-height:1.6;color:var(--ink);margin:0}
.bb-compat-scroll{overflow-x:auto}
.bb-compat-table{width:100%;border-collapse:separate;border-spacing:4px;font-size:13px}
.bb-compat-table th{font-family:'Sora',sans-serif;font-weight:700;color:var(--ink);padding:6px 4px;text-align:center}
.bb-compat-table thead th{background:#FDEAE7;border-radius:8px;color:#B42318}
.bb-compat-table thead th.corner{background:none;font-family:inherit;font-weight:600;font-size:11px;color:var(--ink);text-align:left;white-space:nowrap}
.bb-compat-table tbody th{background:#FDEAE7;border-radius:8px;color:#B42318;width:52px}
.bb-compat-table td{text-align:center;background:#F8FAFC;border-radius:8px;height:32px}
.bb-compat-table td i{color:#16A34A;font-size:18px;vertical-align:middle}
.bb-compat-table td .no{display:inline-block;width:8px;height:2px;background:#CBD5E1;border-radius:2px;vertical-align:middle}
@media(max-width:860px){.bb-compat{grid-template-columns:1fr;padding:20px}}

/* Services: eight photo cards, four to a row so none is left alone. */
.svc-grid-4{grid-template-columns:repeat(4,1fr);gap:18px}
.svc-grid-4 .svc{padding:24px}
.svc-grid-4 .svc-photo{margin:-24px -24px 0}
.svc-grid-4 .svc h3{font-size:17.5px}
@media(max-width:1100px){.svc-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.svc-grid-4{grid-template-columns:1fr}}

/* Steps as cards: number + icon, copy, and a small screen snippet. */
.steps-cards{gap:22px;align-items:stretch}
.steps-cards .step{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.steps-cards .step::before{display:none}
.steps-cards .step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.steps-cards .step-num{margin:0;width:40px;height:40px;border-radius:12px;font-size:15px}
.step-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px}
.steps-cards h3{font-size:17px;margin:0 0 6px}
.steps-cards p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}
.steps-cards .step-vis{margin-top:auto;padding-top:14px;background:none;padding-left:0;padding-right:0;padding-bottom:0}
.steps-cards .step-vis .dv-card{background:linear-gradient(160deg,var(--blue-50),#fff);box-shadow:none;border:1px solid var(--line)}
.dv-otp{display:flex;gap:4px}
.dv-otp span{flex:1;text-align:center;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 0}
.dv-otp span.cur{border-color:var(--blue);box-shadow:0 0 0 2px rgba(27,99,227,.15)}
@media(max-width:560px){.steps-cards{grid-template-columns:1fr}}
.steps-cards .step > .step-num{margin-bottom:16px}

/* Home services: a photo header on each service card. */
.hs-has-photo{overflow:hidden}
.hs-has-photo .svc-photo{margin:-28px -28px 0}
.hs-has-photo .svc-ic{position:relative;margin-top:-29px;box-shadow:0 0 0 4px #fff,0 6px 16px rgba(12,27,51,.10)}
@media (hover: hover){.hs-has-photo:hover .svc-photo img{transform:scale(1.04)}}



/* Home hero, tightened: less padding above and below, the photo fills
   its frame, and the left column carries a quick doctor search. */
.home-hero{padding-top:104px}
.home-hero .hero-grid{padding-bottom:40px;gap:48px}
.home-hero .hero-title{margin-top:0}
.home-hero .hero-sub{margin:16px 0 22px}
.home-hero .hero-fig{height:420px}
.home-hero .hero-photo{inset:0}
@media(max-width:768px){.home-hero .hero-fig{height:auto}.home-hero .hero-grid{padding-bottom:28px}}
.hero-search{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 14px 34px rgba(12,27,51,.10);max-width:560px}
.hs-field{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:0 10px;height:46px;border-radius:12px;background:#F6F8FC}
.hs-field i{color:var(--blue);font-size:18px;flex:none}
.hs-field input,.hs-field select{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14.5px;color:var(--ink);outline:none;height:100%}
.hs-field select{appearance:none;-webkit-appearance:none;cursor:pointer}
.hs-field:focus-within{box-shadow:0 0 0 2px rgba(27,99,227,.25)}
.hero-search .btn{height:46px;white-space:nowrap;flex:none}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;font-size:13.5px;color:var(--ink)}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}
.hero-trust i{color:var(--mint);font-size:17px}
@media(max-width:768px){
  .home-hero{padding-top:92px}
  .hero-search{flex-direction:column;align-items:stretch;margin:0 auto}
  .hs-field{flex:none}
  .hero-search .btn{justify-content:center}
  .hero-trust{justify-content:center}
}
@media(max-width:420px){
  /* Three claims across a phone-width photo: drop the icon tiles so the
     words fit instead of being clipped. */
  .hero-strip-item .ic{display:none}
  .hero-strip{justify-content:space-around}
}

/* "Two sides of care" icons: a solid brand tile for each side's header
   (matches the numbered step badges) and white bordered tiles for the
   list, which read clearly on the grey band instead of fading into it. */
.offer-ic-blue{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;box-shadow:0 10px 22px rgba(27,99,227,.28)}
.offer-ic-mint{background:linear-gradient(135deg,var(--mint),#0FA89A);color:#fff;box-shadow:0 10px 22px rgba(22,184,166,.28)}
.offer-copy .offer-list li i{background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(12,27,51,.05)}



/* ── Sign-in screens, uplifted ──────────────────────────────────────
   Login, forgot / reset password and code verification. The brand panel
   carries a consultation photo under a blue overlay with frosted role
   cards; the form sits in a frosted card on the soft colour wash the
   portal uses, so signing in already looks like the workspace behind it. */
.auth-side{background:
    linear-gradient(160deg,rgba(27,99,227,.90) 0%,rgba(17,66,160,.90) 55%,rgba(11,35,80,.94) 100%),
    url('../img/photos/consultation.jpg') center/cover no-repeat}
.auth-side::before{background:rgba(255,255,255,.06)}
.auth-side::after{background:rgba(55,164,245,.22);filter:blur(10px)}
.auth-pitch p{color:#E6EEFD}
.auth-role{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(4,20,56,.18);transition:.2s}
@media (hover: hover){.auth-role:hover{background:rgba(255,255,255,.18);transform:translateX(4px)}}
.auth-role .ar-ic{background:#fff;color:var(--blue);box-shadow:0 6px 14px rgba(4,20,56,.2)}
.auth-role .ar-ic i{color:var(--blue)}
.auth-role .ar-s{color:#E6EEFD}
.auth-side .auth-foot{color:#D6E3FB}

.auth-main{position:relative;overflow:hidden;background:
    radial-gradient(520px 420px at 0% 0%,rgba(55,164,245,.30),transparent 62%),
    radial-gradient(480px 420px at 100% 100%,rgba(22,184,166,.24),transparent 62%),
    radial-gradient(520px 460px at 90% 10%,rgba(27,99,227,.16),transparent 62%),
    #EEF3FB}
.auth-card{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.85);border-radius:26px;padding:36px 34px;box-shadow:0 24px 60px rgba(27,58,107,.14),inset 0 1px 0 rgba(255,255,255,.8);max-width:440px}
.auth-card .lede,.auth-field label,.auth-row label,.auth-switch{color:var(--ink)}
.auth-input{background:rgba(255,255,255,.92);border-color:rgba(212,222,236,.9)}
@media(max-width:620px){.auth-card{padding:26px 20px;border-radius:20px}}

/* A service that isn't live yet: badge on the photo, softened image, and
   a plain note in place of the "Read more" link. */
.svc-soon .svc-photo{position:relative}
.svc-soon .svc-photo img{filter:saturate(.55) brightness(1.04)}
.soon-badge{position:absolute;top:12px;left:12px;z-index:1;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#8A5A0B;font-size:12px;font-weight:700;padding:5px 10px;border-radius:100px;box-shadow:0 4px 12px rgba(12,27,51,.12)}
.svc-more.soon{color:#8A5A0B;cursor:default}
@media (hover: hover){.svc-soon:hover{transform:none}.svc-soon:hover .svc-photo img{transform:none}}

/* Social icons with no URL yet: same tile as the links, but inert. */
.foot-social .social-off{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:default}
.social-line .social-off{width:46px;height:46px;border-radius:13px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:20px;cursor:default}

/* For hospitals: a facility manager at his desk, stretched to the full
   height of the copy column beside it. The crop leans right so the
   monitor with the dashboard stays in frame. Stacked on small screens,
   where it falls back to a fixed aspect ratio. */
.hosp-ops-split{grid-template-columns:1fr 1.35fr}
.hosp-photo-panel{position:relative;align-self:stretch;display:flex}
.hosp-photo-bg{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:90% center;border-radius:var(--r-lg);box-shadow:0 24px 48px rgba(27,58,107,.16);display:block}
@media(max-width:820px){.hosp-photo-bg{height:auto;min-height:0;aspect-ratio:4/3}}

/* Registration reached from a hospital's invitation email. */
.invite-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:18px;border-radius:14px;background:var(--blue-50);border:1px solid var(--blue-100);font-size:14px;color:var(--ink)}
.invite-note i{font-size:22px;color:var(--blue);margin-top:1px}
.invite-note b{display:block;margin-bottom:2px}