@charset "UTF-8";
/* ============================================================
   DocIndia di-system  —  Premium "neat & clean" (REL_54, 2026-06-17)
   Ported from approved premium home design. Token-based, BEM-ish.
   ============================================================ */
@font-face {
  font-family: "Inter";
  src: url("/fonts/di/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/di/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta";
  src: url("/fonts/di/jakarta-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
:root {
  --blue:#0f50a0;
  --blue2:#2f7ce0;
  --sky:#5aa6f0;
  --navy:#0c1f3f;
  --ink:#0b1a30;
  --ink2:#475569;
  --muted:#7c8aa0;
  --tint:#eef4fc;
  --tint2:#f7faff;
  --line:#e7eef7;
  --amber:#f59e0b;
  --green:#10b981;
  /* 2026-06-18 fix — semantic tokens (S0/#16: no hardcoded hex in components) */
  --blue-dark:#0b3d7d;
  --green-bright:#34d399;
  --amber-deep:#ea7c08;
  --green-ink:#0a7550; /* 2026-07-21 QA -- darkened from #0a8f63: "Verified" badge (green ink on the light-green tint) was 3.66:1, below WCAG AA 4.5:1; now ~5:1. Text-on-light token only, so darker improves every use. */
  --danger:#ef4444;
  --danger-tint:#fff5f5;
  --danger-line:#fecaca;
  --danger-ink:#d32f2f; /* 2026-07-21 QA M2 -- AA-safe (~5:1 on white/tint) red for error TEXT; --danger (#ef4444 ~3.8:1) stays for buttons/borders/backgrounds/icons */
  /* 2026-06-18 fix — surface + footer-on-navy tokens (S0: zero raw hex in components) */
  --white:#fff;
  --foot-fg:#9fb2cd;
  --foot-link:#cdd9ec;
  --foot-ph:#8ea3c0;
  --r:18px;
  /* 2026-07-15 REL_100 -- medium radius token (fills the 12px gap between --r and pill); tokenises the video-preview/field/guide/timer radius flagged by CSS-review (LOW) so the single source can tune it */
  --r-md:12px;
  --r-lg:26px;
  --r-xl:36px;
  --pill:999px;
  /* 2026-06-23 REL_67 -- shared sticky-clearance token (clears the global header); tokenises the blog rail offset flagged by CSS-review (LOW) so sticky surfaces can stay in sync */
  --sticky-top:90px;
  /* 2026-06-26 REL_81 -- auth brand-panel photo overlay (brand blue->navy at alpha; same rgba pattern as the shadow tokens). Reusable by every Identity/Auth page. */
  --ovl-auth:linear-gradient(160deg,rgba(15,80,160,.78),rgba(12,31,63,.92));
  --sh-sm:0 4px 16px rgba(14,35,72,.06);
  --sh:0 18px 50px -12px rgba(14,35,72,.16);
  --sh-blue:0 18px 40px -12px rgba(15,80,160,.5);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2026-06-18 REL_54 fix (QA HIGH-2): clip the off-canvas mobile drawer's horizontal overflow so no page-level horizontal scroll */
html {
  overflow-x: clip;
  /* 2026-07-23 QA -- always reserve the vertical scrollbar gutter so centered content (esp. the shared header) doesn't shift horizontally between short pages (no scrollbar) and tall pages (scrollbar) on classic-scrollbar desktops. */
  scrollbar-gutter: stable;
}

/* 2026-06-18 REL_54 a11y: skip-to-content link — off-screen until keyboard-focused (WCAG 2.4.1) */
.di-skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--blue);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--r);
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--sh-blue);
  transition: top 0.18s ease;
}

.di-skip:focus {
  top: 12px;
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

/* 2026-06-19 REL_54 — site-wide top promo/announcement strip. Admin-driven (bannermaster, active-date window), dismissible. Brand-gradient band above the header. 3-col grid (1fr auto 1fr): message perfectly centered in the middle, dismiss ✕ in its own right column so it can never overlap the text at any width. */
.di-promobar {
  background: linear-gradient(100deg, var(--blue), var(--blue2) 55%, var(--sky));
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
}

.di-promobar[hidden] {
  display: none;
}

.di-promobar__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.di-promobar__msg {
  grid-column: 2;
  text-align: center;
  line-height: 1.4;
}

.di-promobar__msg a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.di-promobar__msg a:hover {
  opacity: 0.85;
}

.di-promobar__x {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 0;
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r);
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease;
} /* 44x44 touch target (WCAG 2.5.5) */
.di-promobar__x:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}

.di-promobar__x:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .di-promobar {
    font-size: 13px;
  }
}
body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(900px 520px at 88% -6%, rgba(47, 124, 224, 0.12), transparent 60%), radial-gradient(720px 520px at -5% 20%, rgba(15, 80, 160, 0.06), transparent 55%), var(--white);
  /* 2026-07-27 QA -- SHARED site-wide guard: a single abnormally long UNBROKEN token (a pasted string, long email/URL, a long
     clinic/institution/doctor name with no spaces) used to overflow its box and get clipped instead of wrapping, because nothing
     set overflow-wrap so all text sat at the default `normal` (breaks at spaces only). overflow-wrap IS inherited, so this one
     body rule covers every di-system page. `break-word` (not `anywhere`) => breaks only as a last resort and does NOT change
     intrinsic min-content sizing, so existing flex/grid layouts are untouched. Flex ITEMS that still can't shrink get a targeted
     `overflow-wrap:anywhere`+`min-width:0` at their own rule (see .di-doc__spec/.di-doc__loc etc.). */
  overflow-wrap: break-word;
}

h1, h2, h3, .disp {
  font-family: "Jakarta", "Inter", sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--navy);
  line-height: 1.12;
}

img {
  max-width: 100%;
  display: block;
}

.di-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 36px;
}

/* 2026-06-22 -- listing/search pages opt into a wider container (header+breadcrumb+content+footer all align) via <body class="di-wide">. Content pages stay 1240 for readability. */
body.di-wide .di-wrap {
  max-width: 1440px;
}

/* 2026-07-23 QA -- BUT the shared HEADER + FOOTER must NOT follow body.di-wide, or they shift horizontally (up to ~100px at 1440vp) between listing pages (1440) and content pages (1240) -- a global, persistent element visibly JUMPING on every navigation between the two page types. Pin the chrome to the standard width so it stays put; only page CONTENT (and breadcrumb) opts into the wider container. */
body.di-wide .di-header .di-wrap,
body.di-wide .di-footer .di-wrap {
  max-width: 1240px;
}

a {
  text-decoration: none;
  color: inherit;
}

.di-btn {
  display: inline-flex;
  align-items: center;
  /* 2026-07-23 QA -- horizontally center the content. .di-btn is a flex container, so text-align (below) does NOT center its flex children; without justify-content the label left-anchors whenever the button is wider than or narrower-than-content (e.g. the footer newsletter "Subscribe" gets shrunk by its flex row -> text sat 20px-left / 4px-right). */
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  border-radius: var(--pill);
  padding: 14px 26px;
  transition: 0.2s;
  white-space: nowrap;
  text-align: center;
}

.di-btn--primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--sh-blue);
}

.di-btn--primary:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
}

/* 2026-08-04 REL_102 -- shared destructive-action button (delete / suspend). --danger = the button-red token; --danger-ink (darker) for hover. */
.di-btn--danger {
  background: var(--danger);
  color: var(--white);
}

.di-btn--danger:hover {
  background: var(--danger-ink);
  transform: translateY(-2px);
}

/* 2026-08-04 REL_104 -- shared di-system error pages (404/500/429/401/403/502/503/504 + generic). Centered card, big status code, actions. */
.di-err {
  display: flex;
  align-items: center;
  min-height: 58vh;
  padding: 48px 0 64px;
}
.di-err__card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 8px 20px;
}
.di-err__code {
  font-family: "Jakarta", "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(76px, 17vw, 138px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
  background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 55%, var(--navy)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.di-err__ic {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--white));
}
.di-err__title {
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ink);
}
.di-err__msg {
  margin: 0 auto 28px;
  max-width: 460px;
}
.di-err__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* 2026-08-04 -- scroll-lock the ACTUAL page scroller (<html>) while a full-screen drawer/overlay is open (mobile hamburger nav,
   SearchHub filter, any future one). body{overflow:hidden} alone fails on mobile because <html> (documentElement) is the
   scrolling element, so the background kept scrolling behind the open drawer. The open drawer is position:fixed with its own
   internal scroll, so locking <html> doesn't break in-drawer scrolling. */
html.di-scroll-lock {
  overflow: hidden;
}

.di-btn--ghost {
  background: var(--white);
  color: var(--blue);
  border: 1.5px solid var(--line);
}

.di-btn--block {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.di-btn--ghost:hover {
  border-color: var(--blue);
}

.ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.di-sec {
  padding: 90px 0;
}

.di-shead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}

.di-shead .tag {
  display: inline-block;
  color: var(--blue);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.di-shead h2 {
  font-size: 39px;
  margin-bottom: 14px;
}

.di-shead p {
  color: var(--ink2);
  font-size: 17px;
}

/* header */
.di-header {
  position: sticky;
  top: 0;
  z-index: 40;
}
/* 2026-07-20 QA MM-H-01 fix (S2): frosted-glass moved to ::before so backdrop-filter is NOT on .di-header itself.
   backdrop-filter on the header made it a containing block for its position:fixed mobile drawer + backdrop
   (they resolved against the 84px header box, not the viewport -> the drawer clipped to a ~104px strip on
   phones/tablets, links cut off). The pseudo now carries the blur/bg/border; .di-header no longer establishes
   that containing block, so the fixed drawer/backdrop resolve against the viewport (full height). Site-wide (shared _DiHeader). */
.di-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(231, 238, 247, 0.7);
  z-index: -1;
  pointer-events: none;
}

.di-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  height: 84px;
}

/* 2026-07-20 QA (Naveen: "logo bilkul sahi nahi aa raha") — the global img{max-width:100%} reset squished the
   logo to ~30px wide (0px @360) whenever its flex parent shrank in a tight mobile header. Keep the logo its
   natural 5:1 size and never let the logo link shrink; on phones use a compact auth label so the bar fits. */
.di-nav .logo {
  height: 38px;
  width: auto;
  max-width: none;
}
.di-nav > a {
  flex: 0 0 auto;
}
.di-auth-short {
  display: none;
}
@media (max-width: 560px) {
  .di-nav {
    gap: 12px;
  }
  .di-nav .logo {
    height: 32px;
  }
  .di-auth-full {
    display: none;
  }
  .di-auth-short {
    display: inline;
  }
}

/* 2026-07-28 mobile-QA (qa-mobile: 320px h-scroll) -- measured @320: logo 160 + Sign-In button 91 + burger 44 + gaps 30 = 325px needed vs 288px available (16px gutter) -> 37px overflow -> horizontal scroll (the in-flow row overflow also dragged the fixed mobile drawer past the edge). Tighten gutter + gap + trim the (screen-half-wide) 160px logo on the smallest phones so the bar fits. Shared _DiHeader = every page; 375px+ unaffected in practice. */
@media (max-width: 400px) {
  .di-header .di-wrap {
    padding: 0 12px;
  }
  .di-nav {
    gap: 8px;
  }
}
/* Only the smallest phones (iPhone SE1 / 320px) still overflow after the gutter+gap trim -> trim the 160px logo there ONLY. 360/375/390 keep the full 32px logo (they fit). */
@media (max-width: 340px) {
  .di-nav .logo {
    height: 24px;
  }
}

.di-nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 6px;
  list-style: none;
}

.di-nav__links > li {
  position: relative;
}

.di-nav__links > li > a, .di-nav__links > li > button {
  color: var(--ink2);
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap; /* 2026-07-31 (Naveen) -- desktop nav labels must stay on ONE line; without this the flex row squeezed each 2-word item onto 2 lines when the FAQs item was added. */
}

.di-nav__links > li > a:hover, .di-nav__links > li > button:hover {
  color: var(--blue);
}

.di-nav__drop {
  position: absolute;
  top: 140%;
  left: -14px;
  min-width: 210px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: 0.16s;
  z-index: 30;
}

.di-nav__links > li:hover .di-nav__drop, .di-nav__links > li:focus-within .di-nav__drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.di-nav__drop a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink2);
  font-size: 14px;
}

.di-nav__drop a:hover {
  background: var(--tint);
  color: var(--blue);
}

.di-nav .sp {
  flex: 1;
}

.di-signin {
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
  margin-right: 2px;
  white-space: nowrap;
}

.di-signin:hover {
  color: var(--blue);
}

.di-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  /* 2026-07-20 QA MM-H-05 fix (S3): 44x44 min tap target (was 42, measured as small as 20 when flex-shrunk). */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.di-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}

.di-nav__backdrop {
  display: none;
}
/* 2026-07-30 (Naveen/QA) -- mobile-drawer-only chrome (logo/close header + Terms/Privacy footer); revealed in the ≤1040px block. */
.di-nav__head, .di-nav__legal, .di-nav__mob {
  display: none;
}

/* 2026-06-20 REL_60 — header user menu (signed-in). Avatar(initials)+name pill -> dropdown. Zero-legacy di-system replacement for the Bootstrap _LoginPartial. All colors are :root tokens. */
.di-header__auth {
  display: inline-flex;
  align-items: center;
}

.di-usermenu {
  position: relative;
}

.di-usermenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--pill);
  padding: 5px 13px 5px 5px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  transition: 0.18s;
}

.di-usermenu__trigger:hover {
  border-color: var(--blue);
}

.di-usermenu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--pill);
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: var(--white);
  font-weight: 800;
  font-size: 13px;
  flex: none;
}

.di-usermenu__name {
  /* 2026-07-27 QA -- tightened 120px -> 96px so a long name grows the trigger LESS and stops squeezing the primary nav
     links at mid-desktop widths (the header spacer has flex-basis:0 so it can't absorb the growth). Already ellipsised. */
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.di-usermenu__chev {
  color: var(--ink2);
  transition: transform 0.18s;
}

.di-usermenu.is-open .di-usermenu__chev {
  transform: rotate(180deg);
}

.di-usermenu__drop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 248px;
  /* 2026-07-27 QA -- cap the dropdown so a long user name can't blow it up. .di-usermenu__fullname already has
     ellipsis, but with no max-width here the drop kept GROWING to fit the (nowrap) name (measured 512px), so the
     ellipsis never engaged. A bounded width makes the name truncate and keeps the menu on-screen on small viewports. */
  max-width: min(320px, calc(100vw - 24px));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: 0.16s;
  z-index: 50;
}

.di-usermenu.is-open .di-usermenu__drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.di-usermenu__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.di-usermenu__avatar--lg {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

.di-usermenu__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.di-usermenu__fullname {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.di-usermenu__role {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.di-usermenu__logout {
  margin: 0;
}

.di-usermenu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ink2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: 0.14s;
}

.di-usermenu__item:hover {
  background: var(--tint);
  color: var(--blue);
}

.di-usermenu__item .ico {
  color: currentColor;
  flex: none;
}

.di-usermenu__item--danger:hover {
  background: var(--danger-tint);
  color: var(--danger);
}

.di-usermenu__trigger:focus-visible, .di-usermenu__item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .di-usermenu__name, .di-usermenu__chev {
    display: none;
  }
  .di-usermenu__trigger {
    padding: 5px;
  }
  .di-usermenu__drop {
    right: 0;
    min-width: 230px;
  }
}
/* 2026-06-20 REL_61 — legal/policy page (privacy-policy + reusable for terms/refund/cancellation/delivery): sticky TOC + premium reading prose. :root tokens only. */
.di-legal {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

.di-legal__toc {
  position: sticky;
  top: 104px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 15px;
  box-shadow: var(--sh-sm);
}

.di-toc__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.di-toc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.di-toc__link {
  display: block;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink2);
  border-left: 2px solid transparent;
  transition: 0.14s;
}

.di-toc__link:hover {
  background: var(--tint);
  color: var(--blue);
}

.di-toc__link.is-active {
  background: var(--tint);
  color: var(--blue);
  border-left-color: var(--blue);
  font-weight: 600;
}

.di-toc__link:focus-visible, .di-legal__body a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}

.di-legal__updated {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 18px;
}

.di-legal__body {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink2);
  max-width: 780px;
}

.di-legal__body section {
  scroll-margin-top: 100px;
  margin-bottom: 30px;
}

.di-legal__lead {
  font-size: 16.5px;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 18px;
}

.di-legal__body h2 {
  font-size: 20px;
  color: var(--navy);
  margin: 6px 0 12px;
  font-family: "Jakarta", "Inter", sans-serif;
}

.di-legal__body h3 {
  font-size: 16.5px;
  color: var(--navy);
  margin: 20px 0 9px;
}

.di-legal__body h4 {
  font-size: 15.5px;
  color: var(--ink);
  font-weight: 700;
  margin: 16px 0 8px;
}

.di-legal__body p {
  margin: 0 0 12px;
}

.di-legal__body ul, .di-legal__body ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.di-legal__body li {
  margin-bottom: 7px;
}

.di-legal__body a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.di-legal__body a:hover {
  color: var(--blue-dark);
}

.di-legal__body strong {
  color: var(--ink);
  font-weight: 700;
}

.di-legal__note {
  background: var(--tint2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 12px;
  padding: 13px 16px;
  margin: 0 0 18px;
  font-size: 14.5px;
  color: var(--ink2);
}

.di-legal__cross {
  margin-top: 6px;
  padding: 18px;
  background: var(--tint2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.di-legal__cross h4 {
  margin: 0 0 6px;
}

.di-legal__cross ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 920px) {
  .di-legal {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .di-legal__toc {
    position: static;
    top: auto;
  }
  .di-toc__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .di-toc__link {
    border-left: none;
    border: 1px solid var(--line);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .di-toc__link.is-active {
    border-color: var(--blue);
  }
}
@media print {
  .di-header, .di-footer, .di-promobar, .di-legal__toc, .di-breadcrumb, .di-chat-fab, .di-burger {
    display: none !important;
  }
  .di-legal {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .di-legal__body {
    max-width: none;
    color: #000;
    font-size: 12pt;
  }
}
/* 2026-06-21 REL_63 rework -- SSR doctor-search results (legacy /Common/search_doctor URL; old layout re-skinned premium): left 2-mode filter sidebar + right horizontal result rows + load-more + mobile drawer. :root tokens only. */
.di-pagehead.di-pagehead--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.di-sres {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}

.di-sres__toggle {
  display: none;
  margin-bottom: 14px;
}

.di-sres__filters {
  position: sticky;
  top: 100px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.di-sres__form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.di-sres__modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.di-sres__mode {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
}

.di-sres__mode input {
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
}

.di-sres__panel {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.di-sres__panel[hidden] {
  display: none;
} /* author display:flex would otherwise override the UA [hidden] rule */
.di-sres__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.di-sres__flabel {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.di-sres__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.di-sres__facet {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.di-sres__facetlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.di-sres__facetlink {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--ink2);
  transition: 0.14s;
}

.di-sres__facetlink:hover {
  background: var(--tint);
  color: var(--blue);
}

.di-sres__facetlink span {
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px;
}

.di-sres__main {
  min-width: 0;
}

.di-sres__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.di-sres__count {
  font-weight: 700;
  color: var(--ink);
}

.di-sres__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink2);
  font-weight: 600;
}

.di-sres__sort .di-fld__input {
  width: auto;
  min-width: 150px;
}

.di-sres__note {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 15px;
  margin-bottom: 16px;
  color: var(--ink2);
  font-size: 14px;
  font-weight: 600;
}

.di-sres__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.di-sres__loadmore {
  margin-top: 22px;
}

.di-sres__pageinfo {
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 13.5px;
  margin-top: 14px;
}

.di-sres__empty {
  text-align: center;
  padding: 40px 18px;
  background: var(--tint2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.di-sres__empty h2 {
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 8px;
}

.di-sres__empty-hint {
  color: var(--muted);
  margin: 14px 0 12px;
}

.di-sres__related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.di-sres__about {
  max-width: 840px;
  margin: 42px 0 0;
  color: var(--ink2);
  line-height: 1.78;
}

.di-sres__about h2 {
  font-size: 23px;
  color: var(--navy);
  margin-bottom: 12px;
}

.di-sres__faqwrap {
  margin-top: 34px;
}

.di-sres__faqwrap h2 {
  font-size: 23px;
  color: var(--navy);
  margin-bottom: 16px;
}

.di-sres__faqwrap .di-faq {
  margin: 0;
}

/* horizontal result row (premium re-skin of the legacy finder card) */
.di-dres {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--sh-sm);
  transition: 0.18s;
}

.di-dres:hover {
  box-shadow: var(--sh);
}

.di-dres__photo {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  text-decoration: none;
}

.di-dres__ini {
  color: var(--white);
  font-family: "Jakarta";
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 0.02em;
}

.di-dres__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.di-dres__main {
  min-width: 0;
}

.di-dres__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.di-dres__name {
  font-size: 19px;
  margin: 0;
}

.di-dres__name a {
  color: var(--navy);
  font-family: "Jakarta";
  font-weight: 800;
}

.di-dres__name a:hover {
  color: var(--blue);
}

.di-dres__title {
  color: var(--ink2);
  font-size: 14px;
  margin: 4px 0 0;
}

.di-dres__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0;
}

.di-dres__spec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  background: var(--tint);
  border-radius: var(--pill);
  padding: 4px 10px;
}

.di-dres__spec img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.di-dres__loc {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink2);
  font-size: 13.5px;
  margin: 6px 0;
}

.di-dres__loc .ico {
  color: var(--blue);
  flex: 0 0 auto;
}

.di-dres__more {
  color: var(--blue);
  font-weight: 600;
  margin-left: 4px;
}

.di-dres__about {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.di-dres__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink2);
  font-weight: 600;
}

.di-dres__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.di-dres__tag .ico {
  color: var(--muted);
}

.di-dres__tag--star .star {
  color: var(--amber);
}

.di-dres__tag em {
  color: var(--muted);
  font-weight: 500;
  font-style: normal;
}

.di-dres__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-width: 152px;
  border-left: 1px solid var(--line);
  padding-left: 20px;
}

.di-dres__fee {
  text-align: right;
}

.di-dres__fee span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}

.di-dres__fee b {
  font-family: "Jakarta";
  font-weight: 800;
  color: var(--navy);
  font-size: 17px;
}

.di-dres__cta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.di-dres__na {
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
}

/* 2026-07-30 Bug#7 -- Save (account favourite) + Share on the result card, mirroring the Home .di-doc__save look. Desktop: inline in the header, pushed right; mobile: top-right beside the name. */
.di-dres__actions {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

.di-dres__save,
.di-dres__share {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: 0.18s;
}

.di-dres__save svg,
.di-dres__share svg {
  width: 16px;
  height: 16px;
  transition: 0.18s;
}

.di-dres__save:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.di-dres__save.is-on {
  color: var(--danger);
}

.di-dres__save.is-on svg {
  fill: var(--danger);
}

.di-dres__share:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.di-dres__save:focus-visible,
.di-dres__share:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* 2026-06-21 REL_63 -- compact autocomplete dropdown for the filter Speciality/Location inputs (injected inside .di-fld; same data as home search). */
.di-ac__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sh);
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
}

.di-ac__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}

.di-ac__item:hover, .di-ac__item.is-active {
  background: var(--tint);
}

.di-ac__w {
  font-weight: 600;
}

.di-ac__sub {
  color: var(--muted);
  font-size: 12px;
}

.di-ac__tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--blue);
  background: var(--tint);
  border-radius: var(--pill);
  padding: 2px 7px;
}

.di-ac__empty, .di-ac__loading {
  padding: 11px;
  color: var(--muted);
  font-size: 13.5px;
}

@media (max-width: 920px) {
  .di-sres {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .di-sres__toggle {
    display: inline-flex;
  }
  .di-sres__filters {
    position: fixed;
    inset: 0 0 0 auto;
    width: 330px;
    max-width: 88vw;
    z-index: 60;
    border-radius: 0;
    overflow: auto;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    box-shadow: var(--sh);
  }
  .di-sres.is-filters-open .di-sres__filters {
    transform: none;
  }
  .di-sres.is-filters-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(11, 26, 48, 0.45);
    z-index: 55;
  }
  .di-sres__facetlink {
    padding: 12px 12px;
  } /* >=44px tap target in the mobile filter drawer (WCAG 2.5.5) */
}
/* 2026-07-30 Bug#7 (Naveen QA) -- mobile card re-layout. Photo top-left; name + title + rating/awards beside it; speciality + address flow FULL-WIDTH just below the photo (reclaiming the old empty gap); consult buttons LEFT + fee BOTTOM-RIGHT; about-me hidden; "+more" stays inline. display:contents lets .di-dres__main's children drop into the card grid so grid-template-areas can place each piece. */
@media (max-width: 620px) {
  .di-dres {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      "photo name"
      "photo title"
      "photo rate"
      "specs specs"
      "loc   loc"
      "side  side";
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
    padding: 16px;
  }
  .di-dres__main {
    display: contents;
  }
  .di-dres__photo {
    grid-area: photo;
    align-self: start;
    width: 84px;
    height: 84px;
  }
  .di-dres__ini {
    font-size: 26px;
  }
  .di-dres__head {
    grid-area: name;
    margin: 0;
    align-items: flex-start;
  }
  .di-dres__name {
    font-size: 17px;
  }
  .di-dres__title {
    grid-area: title;
    margin: 2px 0 0;
  }
  .di-dres__tags {
    grid-area: rate;
    margin: 4px 0 0;
    gap: 12px;
  }
  .di-dres__specs {
    grid-area: specs;
    margin: 8px 0 0;
  }
  .di-dres__loc {
    grid-area: loc;
    margin: 4px 0 0;
    min-width: 0;
  }
  .di-dres__more {
    white-space: nowrap;
  }
  .di-dres__about {
    display: none;
  }
  .di-dres__side {
    grid-area: side;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 12px;
    margin-top: 6px;
    min-width: 0;
  }
  .di-dres__cta {
    order: 1;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
    min-width: 0;
  }
  .di-dres__cta .di-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 120px;
  }
  .di-dres__cta .di-btn:only-child {
    flex: 0 0 auto;
    min-width: 140px;
  }
  .di-dres__fee {
    order: 2;
    align-self: flex-end;
    text-align: right;
    min-width: 84px;
    white-space: nowrap;
  }
}
/* 2026-07-30 Bug#7 -- very small phones (<=360): photo shrinks; consult buttons stack FULL-WIDTH (side-by-side halves would clip long labels like "Clinic Consult" at this width). Still equal + left-aligned + fee bottom-right. */
@media (max-width: 360px) {
  .di-dres {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .di-dres__photo {
    width: 72px;
    height: 72px;
  }
  .di-dres__ini {
    font-size: 23px;
  }
  .di-dres__cta {
    flex-direction: column;
  }
  .di-dres__cta .di-btn {
    flex-basis: 100%;
    min-width: 0;
  }
}
/* hero */
.di-hero {
  position: relative;
  padding: 46px 0 84px;
}

.di-hero__grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 60px;
  align-items: center;
}

.di-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
  box-shadow: var(--sh-sm);
  margin-bottom: 26px;
}

.di-eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: dipulse 2.2s infinite;
}

@keyframes dipulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
.di-hero h1 {
  font-size: 60px;
  margin-bottom: 20px;
}

.di-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--blue), var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.di-hero .lead {
  font-size: 19px;
  color: var(--ink2);
  max-width: 480px;
  margin-bottom: 32px;
}

.di-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border-radius: var(--pill);
  box-shadow: var(--sh);
  padding: 9px 9px 9px 22px;
  max-width: 552px;
  border: 1px solid rgba(231, 238, 247, 0.9);
}

.di-search .fld {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  color: var(--muted);
}

.di-search input {
  border: none;
  outline: none;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  width: 100%;
  background: none;
}

.di-search input::placeholder {
  color: var(--muted);
}

.di-popular {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}

.di-popular a {
  color: var(--blue);
  font-weight: 600;
  margin: 0 4px;
}

.di-trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.di-stk {
  display: flex;
}

.di-stk img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--white);
  object-fit: cover;
  margin-left: -13px;
  box-shadow: var(--sh-sm);
}

.di-stk img:first-child {
  margin-left: 0;
}

.di-trust .t {
  font-size: 14.5px;
  color: var(--ink2);
}

.di-trust .t b {
  color: var(--navy);
  font-weight: 700;
}

.di-trust .star {
  color: var(--amber);
}

.di-visual {
  position: relative;
  height: 560px;
}

.di-visual__circle {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  right: 8px;
  top: 30px;
  background: linear-gradient(150deg, var(--blue), var(--blue2));
  opacity: 0.14;
  filter: blur(2px);
}

.di-visual__ring {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  right: -12px;
  top: 10px;
  border: 1.5px dashed rgba(15, 80, 160, 0.18);
}

.di-visual__dots {
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(rgba(15, 80, 160, 0.22) 2px, transparent 2px);
  background-size: 20px 20px;
  opacity: 0.5;
}

.di-photo {
  position: absolute;
  right: 34px;
  top: 36px;
  width: 430px;
  height: 486px;
  overflow: hidden;
  z-index: 2;
  border-radius: 46% 54% 47% 53%/52% 46% 54% 48%;
  box-shadow: var(--sh);
  background: linear-gradient(135deg, var(--blue), var(--blue2));
}

.di-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.di-fc {
  position: absolute;
  z-index: 3;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 13px 17px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.di-fc .ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--white);
  flex: 0 0 auto;
}

.di-fc b {
  display: block;
  font-family: "Jakarta";
  font-weight: 800;
  font-size: 16px;
  color: var(--navy);
  line-height: 1.15;
}

.di-fc span {
  font-size: 12.5px;
  color: var(--muted);
}

.di-fc--verify {
  left: -6px;
  top: 84px;
}

.di-fc--rating {
  right: -8px;
  top: 226px;
}

.di-fc--booked {
  left: 24px;
  bottom: 54px;
}

.di-fc--booked .live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.di-fc--booked .live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: dipulse 2.2s infinite;
}

/* trust strip */
.di-strip {
  background: var(--tint2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.di-strip__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  flex-wrap: wrap;
}

.di-strip__i {
  display: flex;
  align-items: center;
  gap: 13px;
}

.di-strip__i .ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--blue);
  display: grid;
  place-items: center;
}

.di-strip__i b {
  display: block;
  font-family: "Jakarta";
  font-weight: 800;
  font-size: 21px;
  color: var(--navy);
  line-height: 1;
}

.di-strip__i span {
  font-size: 13.5px;
  color: var(--muted);
}

/* feature cards */
.di-feat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.di-feat__c {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  transition: 0.2s;
}

.di-feat__c:hover {
  box-shadow: var(--sh);
  transform: translateY(-5px);
  border-color: transparent;
}

.di-feat__c .ic {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--tint);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.di-feat__c h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.di-feat__c p {
  color: var(--ink2);
  font-size: 15px;
}

/* specialities */
.di-spec-sec {
  background: var(--tint2);
}

.di-specs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.di-spec {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 14px;
  text-align: center;
  transition: 0.2s;
  display: block;
}

.di-spec:hover {
  box-shadow: var(--sh);
  transform: translateY(-5px);
  border-color: transparent;
}

.di-spec .ic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  overflow: hidden;
}

.di-spec .ic img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.di-spec p {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

/* doctor cards */
.di-sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 20px;
}

.di-sechead h2 {
  font-size: 39px;
}

.di-sechead p {
  color: var(--ink2);
  font-size: 16px;
  margin-top: 8px;
}

.di-sechead a {
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
}

.di-docs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.di-doc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  transition: 0.2s;
}

.di-doc:hover {
  box-shadow: var(--sh);
  transform: translateY(-6px);
  border-color: transparent;
}

.di-doc__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.di-doc__av {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: var(--sh-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: var(--white);
  font-family: "Jakarta";
  font-weight: 800;
  font-size: 22px;
  position: relative;
}

.di-doc__av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.di-doc__id h3 {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.di-doc__vk {
  width: 18px;
  height: 18px;
  background: var(--blue);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--white);
  flex: 0 0 auto;
}

.di-doc__spec {
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  margin-top: 3px;
}

.di-doc__loc {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 6px;
}

.di-doc__meta {
  display: flex;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.di-doc__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tint);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--pill);
}

.di-doc__pill .star {
  color: var(--amber);
}

.di-doc__pill b {
  color: var(--navy);
}

.di-doc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.di-doc__fee b {
  font-family: "Jakarta";
  font-weight: 800;
  font-size: 19px;
  color: var(--navy);
}

.di-doc__fee small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

/* how to book */
.di-how-sec {
  background: var(--tint2);
}

.di-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* 2026-07-23 QA -- 3-step variant (e.g. /doctors "How it works"): the default is a 4-col grid (Home has 4 steps), so a 3-step .di-steps left-hugs with an empty 4th column. Give it a proper 3-col track. */
.di-steps--3 {
  grid-template-columns: repeat(3, 1fr);
}

.di-step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 24px;
  position: relative;
}

.di-step .n {
  position: absolute;
  top: -14px;
  left: 26px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-family: "Jakarta";
  font-weight: 800;
  display: grid;
  place-items: center;
  font-size: 15px;
  box-shadow: var(--sh-blue);
}

.di-step .ic {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--tint);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin: 14px 0 16px;
}

.di-step h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.di-step p {
  color: var(--ink2);
  font-size: 14.5px;
}

/* split */
.di-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.di-split__img {
  position: relative;
}

.di-split__img img {
  width: 100%;
  border-radius: var(--r-xl);
  object-fit: cover;
  aspect-ratio: 1/0.92;
  box-shadow: var(--sh);
}

.di-split__img .badge {
  position: absolute;
  right: -16px;
  bottom: 30px;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.di-split__img .badge .ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: var(--white);
  display: grid;
  place-items: center;
}

.di-split__img .badge b {
  font-family: "Jakarta";
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
  display: block;
}

.di-split__img .badge span {
  font-size: 12.5px;
  color: var(--muted);
}

.di-split h2 {
  font-size: 38px;
  margin-bottom: 18px;
}

.di-split .lead {
  color: var(--ink2);
  font-size: 16.5px;
  margin-bottom: 24px;
}

.di-checks {
  list-style: none;
  display: grid;
  gap: 16px;
  margin-bottom: 30px;
}

.di-checks li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.di-checks .ic {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 2px;
}

.di-checks b {
  color: var(--navy);
  font-weight: 700;
  display: block;
  font-size: 15.5px;
}

.di-checks span {
  color: var(--ink2);
  font-size: 14.5px;
}

/* 2026-06-19 REL_54 — Reserve with Google patient trust badge (credibility signal). Brand-blue, not a success-check. */
.di-rwg {
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 520px;
  margin: 0 0 26px;
  padding: 13px 16px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.45;
}

.di-rwg__g {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--white);
  color: var(--blue);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-sm);
}

.di-rwg__g .ico {
  width: 20px;
  height: 20px;
}

.di-rwg b {
  color: var(--navy);
  font-weight: 700;
}

/* testimonials */
.di-testi-sec {
  background: var(--tint2);
}

.di-testi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.di-testi__c {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
}

.di-testi__c .q {
  color: var(--blue);
  opacity: 0.18;
  font-family: "Jakarta";
  font-size: 56px;
  line-height: 0.6;
  font-weight: 800;
}

.di-testi__c .stars {
  color: var(--amber);
  letter-spacing: 3px;
  margin: 6px 0 14px;
  font-size: 15px;
}

.di-testi__c p {
  color: var(--ink2);
  font-size: 15px;
  margin-bottom: 20px;
}

.di-testi__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.di-testi__who .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: "Jakarta";
  font-weight: 800;
  font-size: 16px;
  flex: 0 0 auto;
}

.di-testi__who b {
  color: var(--navy);
  font-weight: 700;
  font-size: 14.5px;
  display: block;
}

.di-testi__who span {
  color: var(--muted);
  font-size: 13px;
}

/* cities */
.di-cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.di-city {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 22px;
  transition: 0.2s;
}

.di-city:hover {
  box-shadow: var(--sh);
  transform: translateY(-3px);
  border-color: transparent;
}

.di-city b {
  font-family: "Jakarta";
  font-weight: 700;
  color: var(--navy);
  font-size: 16px;
}

.di-city span {
  color: var(--muted);
  font-size: 13px;
  display: block;
}

.di-city .ar {
  color: var(--blue);
}

/* faq */
.di-faq-sec {
  background: var(--tint2);
}

.di-faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.di-faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px 24px;
  transition: 0.2s;
}

.di-faq details[open] {
  box-shadow: var(--sh-sm);
}

.di-faq summary {
  list-style: none;
  cursor: pointer;
  font-family: "Jakarta";
  font-weight: 800;
  color: var(--navy);
  font-size: 16.5px;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.di-faq summary::-webkit-details-marker {
  display: none;
}

.di-faq summary .ar {
  color: var(--blue);
  transition: 0.2s;
  flex: 0 0 auto;
}

.di-faq details[open] summary .ar {
  transform: rotate(180deg);
}

.di-faq details .ans {
  color: var(--ink2);
  font-size: 15px;
  padding: 0 0 20px;
}

/* cta */
.di-cta__box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(130deg, var(--blue), var(--blue2));
  border-radius: var(--r-xl);
  padding: 64px;
  text-align: center;
  color: var(--white);
}

.di-cta__box:before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  right: -80px;
  top: -120px;
}

.di-cta__box:after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  left: -60px;
  bottom: -120px;
}

.di-cta__box h2 {
  color: var(--white);
  font-size: 36px;
  margin-bottom: 14px;
  position: relative;
}

.di-cta__box p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  max-width: 540px;
  margin: 0 auto 28px;
  position: relative;
}

.di-cta__box .di-btn {
  background: var(--white);
  color: var(--blue);
  box-shadow: none;
  position: relative;
}

/* 2026-06-19 REL_54 — Reserve with Google doctor teaser inside the blue CTA box (white-alpha highlight, like the box scrims). */
.di-cta__box .di-cta__hl {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 11px;
  text-align: left;
  max-width: 600px;
  margin: 0 auto 26px;
  padding: 13px 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r);
  color: var(--white);
  font-size: 15px;
  line-height: 1.4;
  position: relative;
}

.di-cta__box .di-cta__hl .ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.di-cta__box .di-cta__hl b {
  font-weight: 800;
}

/* get started */
.di-gs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  max-width: 840px;
  margin: 0 auto;
}

.di-gs__c {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px;
  text-align: center;
  transition: 0.2s;
}

.di-gs__c:hover {
  box-shadow: var(--sh);
  transform: translateY(-5px);
  border-color: transparent;
}

.di-gs__c .ic {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--tint);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}

.di-gs__c h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.di-gs__c p {
  color: var(--ink2);
  font-size: 14.5px;
  margin-bottom: 20px;
}

/* 2026-06-19 REL_54 — app-download showcase (Patient + Doctor apps). Premium phone-mockup + di-system store buttons. Tokens only; brand-blue chips (no green per brand rule). */
.di-appdl {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
  gap: 56px;
  align-items: center;
  background: linear-gradient(135deg, var(--tint), var(--white) 70%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 48px 56px;
  position: relative;
  overflow: hidden;
}

.di-appdl:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 124, 224, 0.14), transparent 70%);
  right: -120px;
  top: -140px;
  pointer-events: none;
} /* brand-blue (--blue2) alpha glow */
.di-appdl__main {
  position: relative;
}

.di-appdl__main h2 {
  font-size: 34px;
  margin-bottom: 12px;
}

.di-appdl__main .lead {
  color: var(--ink2);
  font-size: 16.5px;
  max-width: 520px;
  margin-bottom: 26px;
}

.di-appdl__visual {
  display: grid;
  place-items: center;
  position: relative;
}

/* phone frame ratio matched to the real screenshot (894x1988 ≈ .45) so object-fit:cover shows it with no crop */
.di-appdl__phone {
  width: 246px;
  height: 520px;
  background: var(--navy);
  border-radius: 42px;
  padding: 11px;
  position: relative;
  box-shadow: 0 30px 60px -18px rgba(12, 31, 63, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.di-appdl__screen {
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--white);
}

.di-appdl__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.di-appdl__tracks {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.di-appdl__th {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.di-appdl__th .ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none;
}

.di-appdl__th .ic .ico {
  width: 22px;
  height: 22px;
}

.di-appdl__th b {
  display: block;
  font-size: 16px;
  color: var(--navy);
}

.di-appdl__th span {
  font-size: 13px;
  color: var(--ink2);
}

.di-appdl__badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.di-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--white);
  border-radius: 14px;
  padding: 9px 18px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.di-store:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(11, 26, 48, 0.55);
}

.di-store:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

.di-store__g {
  display: grid;
  place-items: center;
}

.di-store__g svg {
  width: 24px;
  height: 24px;
}

.di-store__t {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.di-store__t small {
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.82;
}

.di-store__t b {
  font-size: 16px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .di-appdl {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 28px;
    text-align: center;
  }
  .di-appdl__main .lead {
    margin-left: auto;
    margin-right: auto;
  }
  /* 2026-07-30 (Naveen Obs1) -- each track is a centered narrow column with LEFT-aligned content so the icon, heading and Google Play badge share ONE left edge. Was: .di-appdl__th and .di-appdl__badges each centered independently -> the icon pushed the heading text ~28px right of the (dead-centered) badge, and the two tracks' icons landed at different x -> looked misaligned. */
  .di-appdl__tracks {
    align-items: center;
  }
  .di-appdl__track {
    width: 100%;
    max-width: 300px;
    text-align: left;
  }
  .di-appdl__th {
    justify-content: flex-start;
  }
  .di-appdl__badges {
    justify-content: flex-start;
  }
}
@media (max-width: 560px) {
  .di-appdl {
    padding: 30px 16px;
  }
  .di-appdl__phone {
    width: 208px;
    height: 440px;
  }
  .di-appdl__main h2 {
    font-size: 27px;
  }
  .di-store {
    padding: 8px 14px;
  }
  .di-store__t b {
    font-size: 14px;
  }
}
/* footer */
.di-footer {
  background: var(--navy);
  color: var(--foot-fg);
  padding: 70px 0 30px;
  margin-top: 30px;
}

.di-fgrid {
  display: grid;
  /* 2026-07-23 QA -- 5 columns: brand + For-Patients + For-Doctors + Useful-Links + Newsletter (the For-Doctors column was restored). */
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.di-footer .flogo {
  height: 42px;
  width: auto; /* 2026-07-20 QA CU-P1 (perf/BP) -- global img{max-width:100%} + the width="500" attr capped width to the footer column while height stayed 42px, stretching the 500x100 logo to 372x42 (8.86:1). Same class of fix as the header .logo (~line 321). Restores BP 96->100. */
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
}

.di-footer .ftag {
  color: var(--sky);
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
}

.di-footer p {
  font-size: 14px;
  max-width: 300px;
  line-height: 1.75;
}

/* 2026-07-20 QA MM-H-09 fix (S4): footer column headings h5 -> h3 (were skipping H4 after page H3 -> axe heading-order). Same visual. */
/* 2026-07-28 QA (Login F1, shared) -- footer column headings are now <h2> (were <h3>): on a page whose body has only an <h1> (e.g. Login), <h1>→footer-<h3> SKIPPED a level (Lighthouse heading-order, A11y 98). <h2> gives h1→h2 with no skip everywhere; visual kept identical here. */
.di-footer h2 {
  color: var(--white);
  font-size: 14px;
  margin-bottom: 16px;
  font-family: "Inter";
  font-weight: 600;
}

.di-footer ul {
  list-style: none;
}

.di-footer li {
  margin-bottom: 12px;
}

.di-footer a {
  font-size: 14px;
}

.di-footer a:hover {
  color: var(--white);
}

.di-footer .social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.di-footer .social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  color: var(--foot-link);
}

.di-footer .social a:hover {
  background: var(--blue);
  color: var(--white);
}

.di-fnews {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  max-width: 330px;
}

.di-fnews input {
  flex: 1;
  min-width: 0;   /* 2026-08-04 -- let the input shrink in ALL breakpoints (was only 1-col mobile) so IT, not the Subscribe button, absorbs a narrow row */
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  border-radius: var(--pill);
  padding: 11px 16px;
  font: inherit;
  font-size: 14px;
}

.di-fnews input::placeholder {
  color: var(--foot-ph);
}

/* 2026-08-04 -- the "Subscribe" button must never shrink. In the 2-column footer band (~600-820px, tablet / phone-landscape) the
   newsletter column is ~half-width, and a shrinkable button squished to ~73x50 -> the pill radius made it look CIRCULAR with the
   label clipped ("ubscrib"). flex-shrink:0 keeps it at its label width; the input (min-width:0 above) absorbs the narrow row. */
.di-fnews .di-btn {
  flex-shrink: 0;
}

.di-fbar {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 13.5px;
  flex-wrap: wrap;
  gap: 10px;
}

.di-fbar a {
  margin-left: 18px;
}

/* 2026-07-23 QA -- lightweight action toast (favourite feedback on the Home doctor cards); shared di-system twin of the profile page's .dp-toast.
   Neutral dark (not brand blue) -- it's transient feedback, not a brand surface. Auto-removed by di-home.js favToast(). */
.di-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: #0f172a;
  color: #fff;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.28);
  z-index: 1200;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 90vw;
  pointer-events: none;
}
.di-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .di-toast {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}

.di-chat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--pill);
  padding: 12px 20px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--sh-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.di-chat-fab:hover {
  background: var(--blue-dark);
}

/* 2026-07-20 QA FAB polish (Naveen): reveal-on-scroll so the FAB never covers the hero search / popular links at load. */
.di-chat-fab {
  transition: opacity 0.28s ease, transform 0.28s ease, background 0.2s ease;
}
.di-chat-fab.is-hidden {
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
}

/* 2026-07-20 QA MM-H-03 fix (S3): on phones the pill "Chat Support" FAB overlapped the hero Search button at load.
   Collapse to an icon-only circle on small screens (tight corner footprint, standard mobile chat-FAB pattern). */
.di-chat-fab__label {
  display: inline;
}
@media (max-width: 560px) {
  .di-chat-fab {
    padding: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    justify-content: center;
  }
  .di-chat-fab__label {
    display: none;
  }
}

@media (max-width: 1040px) {
  .di-burger {
    display: inline-flex;
    /* 2026-07-30 (Naveen): hamburger on the LEFT on mobile -> order:-1 places it before the logo (desktop unaffected: the
       burger is display:none there, so order is a no-op). The drawer is also left-anchored to match (see .di-nav__links below). */
    order: -1;
  }
  /* 2026-06-18 REL_54 fix (QA HIGH-2): drawer anchored INSIDE the viewport (no translateX beyond edge -> no horizontal scroll, since position:fixed escapes overflow clipping). Toggle via opacity+visibility.
     2026-07-30 (Naveen): hamburger moved to the LEFT, so the drawer now opens from the LEFT too (left:0) for a consistent left-hamburger/left-menu UX. */
  .di-nav__links {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 86vw;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 14px 18px;
    box-shadow: var(--sh);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    z-index: 60;
    overflow: auto;
    /* 2026-07-27 QA -- closed drawer must not capture taps. visibility:hidden already blocks the top-level links, but a child
       that re-asserts visibility (the About submenu, below) would still be clickable -> pointer-events:none is the catch-all. */
    pointer-events: none;
  }
  .di-nav.is-open .di-nav__links {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .di-nav__links > li > a, .di-nav__links > li > button {
    padding: 14px 10px;
    font-size: 16px;
    width: 100%;
  }
  /* 2026-07-30 (Naveen/QA -- collapsible About): the drop is COLLAPSED (display:none -> takes no space + un-tappable, which
     also keeps the old closed-drawer clickability guard) until its toggle is aria-expanded. Replaces the always-open reveal. */
  .di-nav__drop {
    position: static;
    opacity: 1;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 2px 0 8px 12px;
    display: none;
  }
  .di-nav__has-drop .di-nav__drop-toggle[aria-expanded="true"] + .di-nav__drop {
    display: block;
  }
  .di-nav__drop-toggle .ico {
    transition: transform 0.2s ease;
  }
  .di-nav__has-drop .di-nav__drop-toggle[aria-expanded="true"] .ico {
    transform: rotate(180deg);
  }
  /* 2026-07-31 (Naveen) -- FAQs is hidden on the desktop top-nav (no room for a 7th item) but IS a link row inside the mobile drawer. */
  .di-nav__mob {
    display: block;
  }
  /* 2026-07-30 (Naveen/QA -- drawer header: logo + close, so the open drawer shows DocIndia branding instead of blank space
     over the header, and gives an explicit close). */
  .di-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .di-nav__headlogo img {
    height: 30px;
    width: auto;
    display: block;
  }
  .di-nav__close {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--navy);
    display: grid;
    place-items: center;
    border-radius: 10px;
  }
  /* 2026-07-30 (Naveen/QA -- Terms & Privacy pinned to the bottom of the drawer). */
  .di-nav__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin-top: auto;
    padding: 14px 10px 0;
    border-top: 1px solid var(--line);
  }
  .di-nav__legal a {
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    padding: 6px 0;
    width: auto;
  }
  .di-nav.is-open .di-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(11, 26, 48, 0.45);
    z-index: 55;
  }
}
@media (max-width: 980px) {
  .di-hero__grid, .di-split {
    grid-template-columns: 1fr;
  }
  .di-feat, .di-docs, .di-testi, .di-steps, .di-gs, .di-cities {
    grid-template-columns: 1fr;
  }
  .di-specs {
    grid-template-columns: repeat(3, 1fr);
  }
  .di-fgrid {
    grid-template-columns: 1fr 1fr;
  }
  .di-visual {
    height: 430px;
    margin-top: 10px;
  }
  .di-hero h1 {
    font-size: 42px;
  }
  .di-sec {
    padding: 64px 0;
  }
  .di-shead h2, .di-sechead h2, .di-split h2 {
    font-size: 30px;
  }
}
@media (max-width: 560px) {
  .di-specs, .di-cities {
    grid-template-columns: repeat(2, 1fr);
  }
  .di-wrap {
    padding: 0 20px;
  }
  .di-hero h1 {
    font-size: 34px;
  }
  .di-cta__box, .di-gs__c, .di-feat__c {
    padding: 30px;
  }
  /* 2026-07-30 (Naveen -- QA bug: doctor image + infographic cards OVERLAP on phones). The .di-visual hero art is an
     absolute-positioned DESKTOP composition (photo 430px wide + cards at fixed corner coords). On a ~350px phone the photo
     overflowed off-screen (left ~-94px) + below the box, and the 3 trust cards landed ON the doctor. Re-fit for phones:
     CENTER the photo to the container width, hide the oversized (480-520px) decorative ring/circle/dots, shrink the cards a
     touch and pin each to a TRUE corner so they hug the photo's edges instead of covering the doctor's face. */
  /* .di-hero prefix = higher specificity so it beats the later base `.di-visual{height:440px}` (REL_54.15, line ~4263). */
  .di-hero .di-visual {
    height: 340px;
    margin-top: 6px;
    overflow: visible;
  }
  .di-visual__ring, .di-visual__circle, .di-visual__dots {
    display: none;
  }
  .di-photo {
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 12px;
    width: min(70%, 250px);
    height: 300px;
  }
  .di-fc {
    padding: 9px 12px;
    gap: 9px;
  }
  .di-fc .ic {
    width: 36px;
    height: 36px;
  }
  .di-fc b {
    font-size: 14px;
  }
  .di-fc span {
    font-size: 11px;
  }
  .di-fc--verify {
    left: 0;
    right: auto;
    top: 0;
  }
  .di-fc--rating {
    right: 0;
    left: auto;
    top: 128px;
  }
  .di-fc--booked {
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
  }
}
/* ===== REL_54 — artistic motion layer (CSP-safe; reduced-motion aware) ===== */
.di-js .di-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.di-js .di-reveal.is-in {
  opacity: 1;
  transform: none;
}

.di-header {
  transition: box-shadow 0.25s ease, background 0.25s ease;
}

.di-header--scrolled {
  box-shadow: 0 8px 28px -14px rgba(14, 35, 72, 0.22);
}

.di-btn--primary {
  position: relative;
  overflow: hidden;
}

.di-btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.di-btn--primary:hover::after {
  left: 145%;
}

.di-doc__av img {
  transition: transform 0.4s ease;
}

.di-doc:hover .di-doc__av img {
  transform: scale(1.09);
}

.di-spec .ic {
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.di-spec:hover .ic {
  transform: scale(1.12) rotate(-5deg);
}

.di-city .ar {
  transition: transform 0.2s ease;
}

.di-city:hover .ar {
  transform: translateX(4px);
}

html {
  scroll-behavior: smooth;
}

@keyframes dispin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes difloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes diUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .di-visual__ring {
    animation: dispin 60s linear infinite;
  }
  .di-fc--verify {
    animation: difloat 6s ease-in-out infinite;
  }
  .di-fc--rating {
    animation: difloat 6.6s ease-in-out infinite;
  }
  .di-fc--booked {
    animation: difloat 7.2s ease-in-out infinite;
  }
  .di-js .di-hero__grid > div > * {
    animation: diUp 0.7s both;
  }
  .di-js .di-hero .di-eyebrow {
    animation-delay: 0.02s;
  }
  .di-js .di-hero h1 {
    animation-delay: 0.08s;
  }
  .di-js .di-hero .lead {
    animation-delay: 0.16s;
  }
  .di-js .di-hero .di-search {
    animation-delay: 0.24s;
  }
  .di-js .di-hero .di-popular {
    animation-delay: 0.3s;
  }
  .di-js .di-hero .di-trust {
    animation-delay: 0.36s;
  }
  .di-js .di-visual {
    animation: diUp 0.9s 0.2s both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .di-js .di-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ===== REL_54.1 — richer artistic motion (home page) ===== */
.di-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 100;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  box-shadow: 0 0 8px rgba(47, 124, 224, 0.5);
}

.di-hero {
  overflow: hidden;
}

.di-hero .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.di-hero .orb1 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(47, 124, 224, 0.45), transparent 70%);
  top: -70px;
  left: -50px;
}

.di-hero .orb2 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(90, 166, 240, 0.4), transparent 70%);
  bottom: -50px;
  left: 38%;
}

.di-hero__grid {
  position: relative;
  z-index: 1;
}

.di-js .di-reveal .di-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.di-js .di-reveal.is-in .di-stagger > * {
  opacity: 1;
  transform: none;
}

.di-stagger > *:nth-child(1) {
  transition-delay: 0.04s;
}

.di-stagger > *:nth-child(2) {
  transition-delay: 0.1s;
}

.di-stagger > *:nth-child(3) {
  transition-delay: 0.16s;
}

.di-stagger > *:nth-child(4) {
  transition-delay: 0.22s;
}

.di-stagger > *:nth-child(5) {
  transition-delay: 0.28s;
}

.di-stagger > *:nth-child(6) {
  transition-delay: 0.34s;
}

.di-stagger > *:nth-child(7) {
  transition-delay: 0.4s;
}

.di-stagger > *:nth-child(8) {
  transition-delay: 0.46s;
}

.di-doc, .di-feat__c, .di-gs__c {
  will-change: transform;
}

@keyframes diDrift1 {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(46px, 34px);
  }
}
@keyframes diDrift2 {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-54px, -30px);
  }
}
@keyframes diShimmer {
  to {
    background-position: 200% center;
  }
}
@keyframes diBlob {
  0%, 100% {
    border-radius: 46% 54% 47% 53%/52% 46% 54% 48%;
  }
  50% {
    border-radius: 54% 46% 56% 44%/44% 56% 46% 56%;
  }
}
@keyframes diFab {
  0%, 100% {
    box-shadow: var(--sh-blue);
  }
  50% {
    box-shadow: 0 20px 44px -10px rgba(15, 80, 160, 0.7);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .di-hero .orb1 {
    animation: diDrift1 17s ease-in-out infinite;
  }
  .di-hero .orb2 {
    animation: diDrift2 21s ease-in-out infinite;
  }
  .di-hero h1 em {
    background-size: 200% auto;
    animation: diShimmer 6s linear infinite;
  }
  .di-photo {
    animation: diBlob 14s ease-in-out infinite;
  }
  .di-cta__box:before {
    animation: diDrift1 19s ease-in-out infinite;
  }
  .di-cta__box:after {
    animation: diDrift2 23s ease-in-out infinite;
  }
  .di-chat-fab {
    animation: diFab 3s ease-in-out infinite;
  }
}
/* ===== REL_54.2 — sliders + decorative doctor card ===== */
.di-slider {
  position: relative;
}

.di-slider__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.di-slider__track::-webkit-scrollbar {
  display: none;
}

.di-slider__track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.di-docs.di-slider__track > * {
  width: 340px;
  max-width: 84vw;
}

.di-specs.di-slider__track > * {
  width: 174px;
}

.di-slider__nav {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 6;
  color: var(--blue);
  transition: 0.2s;
}

.di-slider__nav:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  transform: translateY(-50%) scale(1.07);
}

.di-slider__nav--prev {
  left: -20px;
}

.di-slider__nav--next {
  right: -20px;
}

@media (max-width: 1040px) {
  /* 2026-07-30 (QA -- mobile scroll-indicator): the horizontal card sliders ("Find doctors by speciality" / "Top doctors
     near you") had NO scroll cue on phones (scrollbar hidden + these arrows were display:none) -> users didn't know they
     could swipe. SHOW the arrows on mobile, touch-sized (44px) + pulled INSIDE the edges (over the cards; the desktop
     -20px sits off-screen on a phone). di-home.js toggles is-atstart/is-atend so each arrow hides when there's nothing
     to scroll that way. */
  .di-slider__nav {
    width: 44px;
    height: 44px;
  }
  .di-slider__nav--prev {
    left: 4px;
  }
  .di-slider__nav--next {
    right: 4px;
  }
  .di-slider.is-atstart .di-slider__nav--prev,
  .di-slider.is-atend .di-slider__nav--next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .di-docs.di-slider__track > * {
    width: 300px;
  }
}
/* doctor card — base shell + hover accent. Live layout = photo-top (below).
   2026-06-18 fix (#11 DRY): removed dead centered/decorative layers — __deco/__av/__id/__badge/__avwrap/__vk/__rate
   + the entire superseded REL_54.3 centered block (photo-top below fully supersedes it). One card definition now. */
.di-doc {
  position: relative;
  overflow: hidden;
}

.di-doc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 2;
}

.di-doc:hover::after {
  transform: scaleX(1);
}

/* ===== REL_54.4 — Doccure-style PHOTO-TOP doctor card (the single live card) ===== */
.di-doc {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  align-items: stretch;
}

.di-docs.di-slider__track > * {
  width: 300px;
}

.di-doc__photo {
  position: relative;
  height: 216px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.di-doc__photo .ini {
  font-family: "Jakarta";
  font-weight: 800;
  font-size: 46px;
  color: var(--white);
  letter-spacing: 1px;
}

.di-doc__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.di-doc__rating {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--white);
  border-radius: var(--pill);
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  box-shadow: var(--sh-sm);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}

.di-doc__rating .star {
  color: var(--amber);
}

.di-doc__rating em {
  color: var(--muted);
  font-weight: 500;
  font-style: normal;
}

.di-doc__save {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.94);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: 0.2s;
  padding: 0;
  box-shadow: var(--sh-sm);
}

.di-doc__save svg {
  width: 17px;
  height: 17px;
  transition: 0.2s;
}

.di-doc__save:hover {
  color: var(--danger);
}

.di-doc__save.is-on {
  color: var(--danger);
}

.di-doc__save.is-on svg {
  fill: var(--danger);
}

.di-doc__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.di-doc__r1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.di-doc__spec {
  color: var(--blue);
  font-weight: 600;
  font-size: 13px;
}

.di-doc__avl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--green-ink);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--pill);
  white-space: nowrap;
}

.di-doc__avl .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.di-doc h3 {
  font-size: 18px;
  margin-bottom: 7px;
  line-height: 1.25;
}

.di-doc__loc {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.di-doc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.di-doc__foot {
  margin-top: 16px;
}

.di-doc__fee span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  margin-bottom: 1px;
}

.di-doc__fee b {
  font-family: "Jakarta";
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
}

.di-doc__book {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-blue);
  transition: 0.2s;
  flex: 0 0 auto;
}

.di-doc__book:hover {
  background: var(--blue-dark);
  transform: translateY(-2px) scale(1.04);
}

.di-doc__book svg {
  width: 21px;
  height: 21px;
}

.di-doc:hover .di-doc__photo img {
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

/* ===== REL_54.5 — clarity & small-font sharpness (darker secondary text + crisp sizes) ===== */
:root {
  --muted:#556579;
  --ink2:#3f4f63;
}

body {
  text-rendering: optimizeLegibility;
}

.di-doc__fee span {
  font-size: 12px;
}

.di-doc__avl {
  font-size: 11.5px;
}

.di-doc__loc {
  font-size: 13.5px;
}

.di-doc__spec {
  font-size: 13.5px;
}

.di-doc__rating {
  font-size: 13px;
}

.di-fc span {
  font-size: 13px;
}

.di-fc b {
  font-size: 16.5px;
}

.di-strip__i span {
  font-size: 14px;
}

.di-testi__who span {
  font-size: 13.5px;
}

.di-popular {
  font-size: 14.5px;
}

.di-spec p {
  font-size: 14.5px;
}

.di-city span {
  font-size: 13.5px;
}

.di-footer a {
  font-size: 14.5px;
}

.di-footer p {
  font-size: 14.5px;
}

.di-shead p {
  color: var(--ink2);
}

/* ===== REL_54.6 — speciality card with doctor count ===== */
.di-specs.di-slider__track > * {
  width: 192px;
}

.di-spec {
  padding: 30px 16px 26px;
}

.di-spec .ic {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
}

.di-spec .ic img {
  width: 30px;
  height: 30px;
}

.di-spec p {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
}

.di-spec .cnt {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

/* ===== REL_54.7 — compact doctor card (proportionate vs other cards) ===== */
.di-docs.di-slider__track > * {
  width: 268px;
}

.di-doc__photo {
  height: 158px;
}

.di-doc__photo .ini {
  font-size: 36px;
}

.di-doc__body {
  padding: 15px 18px 17px;
}

.di-doc__r1 {
  margin-bottom: 7px;
}

.di-doc__spec {
  font-size: 13px;
}

.di-doc__avl {
  font-size: 10.5px;
  padding: 3px 9px;
}

.di-doc h3 {
  font-size: 16.5px;
  margin-bottom: 6px;
}

.di-doc__loc {
  font-size: 12.5px;
}

.di-doc__loc .ico {
  width: 14px;
  height: 14px;
}

.di-doc__foot {
  margin-top: 14px;
  padding-top: 13px;
}

.di-doc__fee span {
  font-size: 11px;
}

.di-doc__fee b {
  font-size: 16px;
}

.di-doc__book {
  width: 42px;
  height: 42px;
}

.di-doc__book svg {
  width: 18px;
  height: 18px;
}

.di-doc__rating {
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  font-size: 12px;
}

.di-doc__save {
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
}

.di-doc__save svg {
  width: 15px;
  height: 15px;
}

/* ===== REL_54.8 — new Indian hero/split images: crop positioning ===== */
.di-photo img {
  object-position: 32% center;
}

.di-split__img img {
  object-position: center 22%;
}

/* ===== REL_54.9 — hero trust-stack = real DB doctors (initials + photo overlay) ===== */
.di-stk {
  display: flex;
}

.di-stk__a {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--white);
  margin-left: -13px;
  box-shadow: var(--sh-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: var(--white);
  font-family: "Jakarta";
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}

.di-stk__a:first-child {
  margin-left: 0;
}

.di-stk__a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== REL_54.10 — 3-mode search (premium, di-system) ===== */
.di-srch {
  max-width: 610px;
}

.di-srch__modes {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.di-srch__mode {
  padding: 8px 16px;
  border-radius: var(--pill);
  border: 1.5px solid var(--line);
  background: var(--white);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink2);
  cursor: pointer;
  transition: 0.18s;
}

.di-srch__mode:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.di-srch__mode.is-active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  box-shadow: var(--sh-blue);
}

.di-srch__bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 6px;
}

.di-srch__f {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  min-width: 0;
}

.di-srch__f + .di-srch__f {
  border-left: 1px solid var(--line);
}

.di-srch__f .ico {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex: 0 0 auto;
}

.di-srch__f input {
  border: none;
  outline: none;
  background: none;
  font: inherit;
  /* 2026-07-31 (Naveen/audit) -- 16px min so iOS Safari does NOT auto-zoom on focus of the primary search inputs (was 15px). 1px change, visually imperceptible. */
  font-size: 16px;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}

.di-srch__f input::placeholder {
  color: var(--muted);
}

.di-srch__btn {
  flex: 0 0 auto;
  align-self: stretch;
  padding: 0 26px;
  border-radius: calc(var(--r) - 4px);
}

.di-srch__list {
  position: absolute;
  top: calc(100% + 10px);
  left: -8px;
  right: -8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  z-index: 40;
  max-height: 330px;
  overflow: auto;
  padding: 6px;
}

.di-srch__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

.di-srch__item:hover {
  background: var(--tint);
}

.di-srch__iic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tint);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.di-srch__iic svg {
  width: 16px;
  height: 16px;
}

.di-srch__itx {
  flex: 1;
  min-width: 0;
}

.di-srch__itx b {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--navy);
}

.di-srch__itx small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}

.di-srch__tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
  background: var(--tint);
  padding: 3px 8px;
  border-radius: var(--pill);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.di-srch__empty {
  color: var(--muted);
  justify-content: center;
  cursor: default;
}

.di-srch__empty:hover {
  background: none;
}

/* 2026-06-18 — autocomplete loading row + spinner (UX: feedback while suggestions fetch) */
.di-srch__loading {
  color: var(--muted);
  justify-content: center;
  cursor: default;
}

.di-srch__loading:hover {
  background: none;
}

.di-srch__spin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--blue);
  display: inline-block;
  animation: di-spin 0.6s linear infinite;
}

@keyframes di-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 2026-07-23 QA U6 -- in-button loading state (double-submit guard feedback on the login submit, a --primary button). Reuses di-spin; hides the label, shows a white spinner. */
.di-btn.is-loading {
  pointer-events: none;
  position: relative;
}

.di-btn.is-loading .di-btn__label {
  opacity: 0;
}

.di-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  animation: di-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .di-srch__spin {
    animation-duration: 1.4s;
  }
}
.di-srch__err {
  color: var(--danger-ink); /* 2026-07-21 QA M2 -- AA contrast */
  font-size: 13.5px;
  margin-top: 10px;
}

@media (max-width: 560px) {
  .di-srch__bar {
    flex-direction: column;
    padding: 8px;
  }
  .di-srch__f + .di-srch__f {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .di-srch__btn {
    align-self: auto;
    width: 100%;
    padding: 13px;
  }
  .di-srch__list {
    left: 0;
    right: 0;
  }
}
/* fix: hidden search fields must stay hidden (override display:flex) */
.di-srch__f[hidden] {
  display: none !important;
}

/* ===== REL_54.11 — search dropdown = full bar width (fix narrow/clutter) ===== */
.di-srch__bar {
  position: relative;
}

.di-srch__list {
  left: 0;
  right: 0;
  top: calc(100% + 12px);
}

/* ===== REL_54.12 — lift search above later hero siblings (entrance-anim stacking-context fix) ===== */
.di-srch {
  position: relative;
  z-index: 30;
}

.di-srch__list {
  z-index: 50;
}

/* ===== REL_54.13 — dropdown not clipped (orbs in own layer) + keyboard highlight ===== */
.di-hero {
  overflow: visible;
}

/* 2026-07-20 QA MM-H-06: the "~6px @360" was layout-overflow (scrollWidth), NOT actual horizontal scroll -- the
   pre-existing html{overflow-x:clip} (line ~72, REL_54) already prevents page x-scroll. No new rule needed;
   the duplicate I briefly added here was removed (css-reviewer LOW). window.scrollX stays 0 at 360px. */
.di-hero__orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* ===== REL_54.15 — hero search = full-width band (prominent, wide+thin inputs, gradient border, light shadow, focus-glow). Trust moved under lead; smart-chip none. Photo+padding tightened so the band sits in view (headline unchanged). ===== */
.di-hero {
  padding-bottom: 60px;
}

.di-visual {
  height: 440px;
}

.di-hero__search {
  margin-top: 48px;
  position: relative;
  z-index: 1;
}

.di-hero__search .di-srch {
  max-width: none;
  background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(135deg, var(--blue), var(--sky)) border-box;
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 16px 16px 12px;
  transition: box-shadow 0.2s ease;
}

.di-hero__search .di-srch:focus-within {
  box-shadow: var(--sh-blue);
}

.di-hero__search .di-srch__bar {
  box-shadow: none;
}

.di-hero__search .di-srch__f {
  padding-top: 4px;
  padding-bottom: 4px;
}

.di-hero__search .di-srch__f input {
  /* 2026-07-20 QA MM-H-04 fix (S3): 44px tap target for the primary search inputs (was 36px). */
  height: 44px;
}

.di-hero__search .di-srch__btn {
  align-self: center;
  height: 44px;
}

.di-hero__search .di-popular {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .di-js .di-hero__search {
    animation: diUp 0.7s both;
    animation-delay: 0.28s;
  }
}
/* mobile: reorder so search sits between the text and the photo (headline -> search -> photo) */
@media (max-width: 980px) {
  .di-hero .di-wrap {
    display: flex;
    flex-direction: column;
  }
  .di-hero__grid {
    display: contents;
  }
  .di-hero__grid > div:first-child {
    order: 1;
  }
  .di-hero__search {
    order: 2;
    margin-top: 28px;
  }
  .di-visual {
    order: 3;
    margin-top: 22px;
  }
}
@media (max-width: 560px) {
  .di-hero__search {
    margin-top: 24px;
  }
  .di-hero__search .di-srch__btn {
    align-self: auto;
    width: 100%;
  }
}
.di-srch__item.is-active {
  background: var(--tint);
}

/* ===== REL_54.14 (2026-06-18 fix) — token classes replacing inline styles (S0/#16) + a11y polish (#7) ===== */
/* floating-card icon gradients (were inline hardcoded-hex on Index) */
.di-fc--verify .ic {
  background: linear-gradient(135deg, var(--green), var(--green-bright));
}

.di-fc--rating .ic {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
}

.di-fc--booked .ic {
  background: linear-gradient(135deg, var(--blue), var(--blue2));
}

/* shared eyebrow tag (replaces inline-styled .tag in split section) */
.di-tag {
  display: inline-block;
  color: var(--blue);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* icon size utilities (replace inline width/height on .ico) */
.ico--xs {
  width: 13px;
  height: 13px;
}

.ico--sm {
  width: 15px;
  height: 15px;
}

.ico--md {
  width: 18px;
  height: 18px;
}

.ico--lg {
  width: 26px;
  height: 26px;
}

.ico--xl {
  width: 28px;
  height: 28px;
}

/* section flush-top (replaces inline padding-top:0) */
.di-sec--flush {
  padding-top: 0;
}

/* compact button + footer icon/spacing utils (replace inline styles in partials) */
.di-btn--sm {
  padding: 11px 20px;
}

/* 2026-07-13 REL_97 -- shared large CTA size for hero/landing pages (44px+ tap target). Reusable across marketing/public pages. */
.di-btn--lg {
  padding: 16px 30px;
  font-size: 16px;
  min-height: 54px;
}

.di-footer .social svg {
  width: 18px;
  height: 18px;
}

.di-chat-fab svg {
  width: 17px;
  height: 17px;
}

.di-fnews-note {
  margin-bottom: 8px;
}

/* 2026-07-27 QA -- newsletter subscribe status message. Footer bg is dark, so use the BRIGHT success/error variants for contrast (the -ink variants are for light backgrounds). */
.di-fnews__msg {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 600;
  max-width: 330px;
}
.di-fnews__msg--ok { color: var(--green-bright); }
.di-fnews__msg--err { color: var(--danger); }

/* a11y: keyboard focus ring + mobile touch targets */
.di-btn:focus-visible, .di-srch__mode:focus-visible, .di-nav__links a:focus-visible, .di-doc__book:focus-visible, .di-doc__save:focus-visible, .di-faq summary:focus-visible, .di-spec:focus-visible, .di-city:focus-visible, .di-authorhero__link:focus-visible, .di-chip:focus-visible, .di-pop__card:focus-visible, .di-procfilter__in:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* 2026-07-21 QA UI#4 (+ 2026-07-23) -- links that were omitted from the branded focus ring above (got the thin UA-default outline = a11y + cross-component drift). Align them: .di-cond chips, finder quick-links, AND the breadcrumb / results-toolbar hub / mobile filters jump-link / pagination links. */
.di-cond:focus-visible, .di-find .di-popular a:focus-visible, .di-find__alt a:focus-visible,
.di-crumbs a:focus-visible, .di-csd__hub:focus-visible, .di-sres__jumpfilters:focus-visible, .di-pager a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .di-srch__mode {
    padding: 11px 16px;
  }
}
/* ===================== REL_56 -- shared form controls + breadcrumb + contact ===================== */
.di-hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
} /* honeypot (off-screen, aria-hidden) */
/* Breadcrumb trail (shared) */
.di-crumbs {
  border-bottom: 1px solid var(--line);
  background: var(--tint2);
}

.di-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 2026-07-23 QA -- row-gap 12px (col-gap stays 8px): a deep breadcrumb (5 levels) wraps to 2 lines on narrow screens, and the CU-05 link hit-area (padding 5px + neg-margin) extends 5px above/below each line -> 10px total would overlap an 8px row-gap by ~2px. 12px clears it. Single-line crumbs unaffected. */
  gap: 12px 8px;
  padding: 14px 0;
  margin: 0;
  font-size: 13.5px;
}

.di-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.di-crumbs a {
  color: var(--ink2);
  font-weight: 600;
  /* 2026-07-20 QA CU-05 -- breadcrumb link was ~22px tall (< WCAG 2.2 AA 24px). Grow the hit area via
     padding, cancel it with equal negative margin so the visible layout/row height is unchanged. */
  display: inline-block;
  padding: 5px 2px;
  margin: -5px -2px;
}

.di-crumbs a:hover {
  color: var(--blue);
}

.di-crumbs__sep {
  color: var(--muted);
}

.di-crumbs [aria-current=page] {
  color: var(--blue);
  font-weight: 700;
}

/* Contact page glue */
.di-contact {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 42px;
  align-items: start;
  /* 2026-07-28 QA -- centered 1040 body (matches .di-wfu on Write for Us) so both form pages are consistent under the shared centered .di-pagehead (was full-width + a left-aligned heading -> looked "left" vs Write for Us "middle"). */
  max-width: 1040px;
  margin: 0 auto;
}

.di-channels {
  display: grid;
  gap: 14px;
}

.di-channel {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.di-channel:hover {
  box-shadow: var(--sh-sm);
  transform: translateY(-2px);
}

.di-channel__ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--tint);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.di-channel__t {
  font-weight: 700;
  color: var(--navy);
  font-size: 14.5px;
  margin-bottom: 4px;
}

.di-channel__v {
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.55;
}

.di-channel__v a {
  color: var(--blue);
  font-weight: 600;
}

/* 2026-07-20 QA CU-01 -- WhatsApp/email contact links were 17px-tall tap targets (< WCAG 2.2 AA 24px min),
   and the two WhatsApp numbers sit adjacent. On touch, give each a full 44px hit height + horizontal gap. */
@media (max-width: 640px) {
  .di-channel__v a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-right: 10px;
  }
}

.di-channel__v span {
  display: block;
}

.di-formcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  box-shadow: var(--sh-sm);
}

.di-formcard h2 {
  font-size: 21px;
  color: var(--navy);
  margin: 0 0 4px;
}

.di-formcard__lead {
  color: var(--ink2);
  font-size: 14.5px;
  margin: 0 0 22px;
}

.di-form__two {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: start;
}

.di-form__alert {
  display: none;
  background: var(--danger-tint);
  border: 1px solid var(--danger-line);
  color: var(--danger-ink); /* 2026-07-21 QA M2 -- AA contrast on the tint background */
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}

.di-form__alert.is-on {
  display: block;
}

@media (max-width: 880px) {
  .di-contact {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .di-formcard {
    padding: 24px 20px;
  }
}
@media (max-width: 560px) {
  /* 2026-07-30 (Naveen) -- phone rows (country-code combo + number) stay SIDE-BY-SIDE on phones: a narrow code column + the number, like desktop. Was grid-template-columns:1fr which STACKED them so the "91 (India)" code selector took the FULL screen width (unnecessary). :not(--even) so name rows keep stacking. Applies to every phone-row form (login/register/contact/booking/apprequest/forgot/writeforus/askquestion). */
  .di-form__two:not(.di-form__two--even) {
    grid-template-columns: 128px 1fr;
    gap: 12px;
  }
}
/* REL_56 -- shared footer mobile fix: newsletter input forced 2-col grid tracks to ~330px -> horizontal overflow on small phones. Stack to 1 col + let inputs shrink. (Benefits every page.) */
@media (max-width: 560px) {
  .di-fgrid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .di-fnews {
    max-width: 100%;
  }
  .di-fnews .di-input, .di-fnews input {
    min-width: 0;
  }
  /* 2026-07-21 QA (shared) SH-A -- footer grid items still forced the 1fr track ~6px past a 360px viewport:
     grid items default to min-width:auto so their min-content (newsletter row / social row) grew the track.
     Let items shrink to the track; let the social row wrap if ever needed. Kills the 360px h-overflow site-wide. */
  .di-fgrid > * {
    min-width: 0;
  }
  .di-footer .social {
    flex-wrap: wrap;
  }
  .di-fbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
/* ===================== REL_56 -- PREMIUM smart form controls (shared di-system) ===================== */
/* Floating-label field (icon + animated label + live valid/invalid). REUSE everywhere. */
.di-fld {
  position: relative;
  margin-bottom: 4px;
}

.di-fld__ic {
  position: absolute;
  left: 15px;
  top: 29px;
  transform: translateY(-50%);
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: color 0.16s;
  pointer-events: none;
  z-index: 1;
}

.di-fld__input {
  width: 100%;
  height: 58px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 22px 42px 8px 44px;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  -webkit-appearance: none;
  appearance: none;
}

.di-fld__ta {
  width: 100%;
  min-height: 132px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 26px 14px 12px;
  line-height: 1.55;
  resize: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  overflow: hidden;
}

.di-fld--noicon .di-fld__input {
  padding-left: 15px;
}

/* 2026-06-21 REL_63 -- shared select skin: <select class="di-fld__input"> needs sane padding + a chevron (the input style sets appearance:none). */
select.di-fld__input {
  height: 48px;
  padding: 10px 38px 10px 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23445469' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

/* 2026-07-28 mobile-QA (qa-mobile: iOS input-zoom trap) -- form controls at 15/14px make iOS Safari auto-zoom on focus (its <16px rule). Bump to 16px on phones + tablet-portrait ONLY; desktop keeps the 15px visual. Shared di-system = every form + textarea + footer newsletter. (Honeypot stays tiny/off-screen -- bots don't zoom.) */
@media (max-width: 860px) {
  .di-fld__input,
  .di-fld__ta,
  .di-fnews input {
    font-size: 16px;
  }
}

.di-fld__label {
  position: absolute;
  left: 44px;
  top: 29px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 15px;
  pointer-events: none;
  transition: top 0.16s ease, font-size 0.16s ease, color 0.16s ease;
  background: transparent;
}

.di-fld--noicon .di-fld__label {
  left: 15px;
}

.di-fld__ta ~ .di-fld__label {
  top: 24px;
}

.di-fld__input:focus, .di-fld__ta:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(15, 80, 160, 0.12);
}

/* 2026-07-27 QA -- invalid field state. di-provreg.js sets aria-invalid on the SPECIFIC missing/invalid field so the user sees
   WHICH one to fix (was: one vague "fill all fields" line that named nothing). Red border, and a red focus ring when they land on it. */
.di-fld__input[aria-invalid="true"], .di-fld__ta[aria-invalid="true"] {
  border-color: var(--danger);
}
.di-fld__input[aria-invalid="true"]:focus, .di-fld__ta[aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14);
}

.di-fld__input:focus ~ .di-fld__ic, .di-fld__ta:focus ~ .di-fld__ic {
  color: var(--blue);
}

.di-fld__input:focus ~ .di-fld__label, .di-fld__input:not(:placeholder-shown) ~ .di-fld__label,
.di-fld__ta:focus ~ .di-fld__label, .di-fld__ta:not(:placeholder-shown) ~ .di-fld__label {
  top: 11px;
  transform: none;
  font-size: 12px;   /* 2026-07-28 mobile-QA: was 11.5px (<12px tiny-font flag on the floated field label); 12px = readable, no overlap. Shared di-system. */
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.02em;
  /* 2026-08-04 QA (Naveen, mobile): "Describe your question field gets overlapped by the field label".
     Reproduced at 375px on /ask-a-question: the floated label wrapped to a SECOND line, but .di-fld__ta
     reserves padding-top:26px = room for ONE line, so line 2 printed ON TOP of the user's typed text
     (measured 23px overlap). Desktop was fine because the same label fits on one line, which is why this
     only ever showed on mobile.
     Clamp the FLOATED state to a single line. The AT-REST state is deliberately left free to wrap, because
     there the label IS the placeholder sitting inside the box and wrapping is correct.
     `right` rather than `max-width`: it bounds the width correctly for BOTH the icon variant (left:44px)
     and --noicon (left:15px) with one rule. 40px, not 14px, so a long label can never run under the
     .di-fld__ok tick (right:14px, ~18px wide) on a valid single-line input. */
  right: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.di-fld__ta:focus ~ .di-fld__label, .di-fld__ta:not(:placeholder-shown) ~ .di-fld__label {
  top: 9px;
}

.di-fld__ok {
  position: absolute;
  right: 14px;
  top: 29px;
  transform: translateY(-50%) scale(0.5);
  opacity: 0;
  color: var(--green-ink);
  transition: 0.18s;
  pointer-events: none;
}

.di-fld.is-valid .di-fld__ok {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.di-fld.is-valid .di-fld__input {
  border-color: rgba(16, 185, 129, 0.5);
}

.di-fld.is-invalid .di-fld__input, .di-fld.is-invalid .di-fld__ta {
  border-color: var(--danger);
  background: var(--danger-tint);
}

.di-fld__err {
  display: block;
  font-size: 13px;
  color: var(--danger-ink); /* 2026-07-21 QA M2 -- was --danger (~3.8:1 fail); --danger-ink is AA */
  min-height: 15px;
  margin: 5px 3px 0;
}

.di-flabel {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 9px;
}

.di-flabel .req {
  color: var(--danger);
  margin-left: 2px;
}

.req {
  color: var(--danger);
}

.di-fld--gap {
  margin-top: 8px;
}

/* Reason chips (radio-styled, accessible, no-JS) */
.di-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.di-chips input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.di-chips label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 17px;
  border: 1.5px solid var(--line);
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
  background: var(--white);
  cursor: pointer;
  transition: 0.15s;
  user-select: none;
}

.di-chips label:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.di-chips input:checked + label {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  box-shadow: var(--sh-blue);
}

.di-chips input:focus-visible + label {
  box-shadow: 0 0 0 4px rgba(15, 80, 160, 0.2);
}

/* 2026-06-21 REL_63 -- shared clickable chip (link pill) e.g. empty-rescue related-speciality suggestions. */
.di-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tint);
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 8px 15px;
  font-size: 13.5px;
  font-weight: 600;
  transition: 0.15s;
}

.di-chip:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

/* Searchable combo (country dial code) -- progressive enhancement over native select */
.di-combo {
  position: relative;
}

.di-combo__native {
  width: 100%;
  height: 58px;
  font-family: inherit;
  /* 2026-07-31 (Naveen/audit) -- 16px min so iOS Safari does NOT auto-zoom on focus of the country-code select (was 15px). */
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  -webkit-appearance: none;
  appearance: none;
}

.di-combo__btn {
  display: none;
  width: 100%;
  height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.di-combo.js-on .di-combo__native {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  padding: 0;
  border: 0;
}

.di-combo.js-on .di-combo__btn {
  display: flex;
}

/* 2026-07-23 QA U5 -- was :focus (fires on mouse click too) + a faint 12%-alpha halo = the weakest focus indicator on the page. Align to the branded 2px :focus-visible ring like every other control. */
.di-combo__btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-color: var(--blue);
}

.di-combo__btn .chev {
  color: var(--muted);
  transition: transform 0.18s;
  flex: 0 0 auto;
}

.di-combo.is-open .di-combo__btn {
  border-color: var(--blue);
}

.di-combo.is-open .di-combo__btn .chev {
  transform: rotate(180deg);
}

.di-combo__pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh);
  padding: 8px;
  display: none;
  max-height: 304px;
  flex-direction: column;
}

.di-combo.is-open .di-combo__pop {
  display: flex;
}

.di-combo__search {
  height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  margin-bottom: 6px;
  width: 100%;
  font-family: inherit;
}

.di-combo__search:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(15, 80, 160, 0.1);
}

.di-combo__list {
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.di-combo__opt {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--ink2);
  cursor: pointer;
}

.di-combo__opt:hover, .di-combo__opt.is-active {
  background: var(--tint);
  color: var(--blue);
}

.di-combo__opt.is-sel {
  font-weight: 700;
  color: var(--blue);
}

.di-combo__empty {
  padding: 14px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

/* Smart message counter */
.di-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.di-count {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.di-count.is-ok {
  color: var(--green-ink);
  font-weight: 600;
}

/* 2026-07-21 QA (write-for-us S4) -- near-limit amber cue for optional counters (no green "min met" state). */
.di-count.is-warn {
  color: var(--amber-deep);
  font-weight: 600;
}

/* Premium animated in-place success */
.di-contact__ok {
  display: none;
  text-align: center;
  padding: 32px 10px;
}

.di-formcard.is-sent .di-form__live {
  display: none;
}

.di-formcard.is-sent .di-contact__ok {
  display: block;
  animation: diOkIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes diOkIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.di-contact__ok .ic {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: var(--green-ink);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  animation: diOkPop 0.5s 0.15s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes diOkPop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.di-contact__ok h3 {
  font-size: 22px;
  color: var(--navy);
  margin: 0 0 8px;
}

.di-contact__ok p {
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto 22px;
}

.di-contact__ok .acts {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* REL_56 review fixes (SEO/CSS/QA) */
.di-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink2);
}

.di-chips label {
  min-height: 44px;
}

.di-combo__search {
  height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .di-formcard.is-sent .di-contact__ok, .di-contact__ok .ic {
    animation: none !important;
  }
}
/* REL_57 -- chat-with-us channel cards (WhatsApp/Messenger; device-aware QR vs button) */
.di-chat-note {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 32px;
  color: var(--ink2);
  font-size: 14.5px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 18px;
}

.di-chat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  max-width: 860px;
  margin: 0 auto;
}

.di-chat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.di-chat:hover {
  box-shadow: var(--sh-sm);
  transform: translateY(-3px);
}

.di-chat__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 20px;
}

.di-chat__ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--white);
}

.di-chat__ic--wa {
  background: #25D366;
} /* WhatsApp brand green (external brand colour, not a theme token) */
.di-chat__ic--fb {
  background: #0084FF;
} /* Messenger brand blue (external brand colour) */
.di-chat__head h2 {
  font-size: 18.5px;
  color: var(--navy);
  margin: 0;
}

.di-chat__qr {
  width: 190px;
  height: 190px;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 8px;
  background: var(--white);
  margin: 0 auto 14px;
  display: block;
}

.di-chat__or {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

.di-chat__btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 13px;
}

.di-chat__link {
  display: inline-block;
  font-size: 13.5px;
  color: var(--blue);
  font-weight: 600;
  word-break: break-all;
  /* 2026-07-21 QA CW-M3 -- grow the 22px tap target past WCAG 2.2 24px; neg-margin keeps the visual box unchanged */
  padding: 6px 8px;
  margin: 0 -8px;
}

.di-chat-more {
  text-align: center;
  margin-top: 34px;
  font-size: 14.5px;
  color: var(--ink2);
}

.di-chat-more a {
  color: var(--blue);
  font-weight: 600;
  /* 2026-07-21 QA CW-M2 -- cross-links were ~17px tall & "Contact us" wrapped mid-phrase at 375px.
     Grow the hit area + keep each link on one line (wrapping now happens between links, not inside). */
  display: inline-block;
  padding: 6px 8px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .di-chat-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .di-chat__qr, .di-chat__or {
    display: none;
  } /* mobile: QR not scannable on same device -> tap-button only */
}
/* REL_57 -- shared page-head utilities (reusable static-page intro) */
.di-sec--top {
  padding-top: 46px;
}

.di-pagehead {
  max-width: 680px;
  margin: 0 auto 30px;
  text-align: center;
}

.di-pagehead h1 {
  margin: 6px 0 12px;
}

.di-chat-note svg {
  vertical-align: -3px;
  margin-right: 6px;
}

/* REL_58 -- write-for-us layout + guidelines */
.di-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.di-wfu {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr;
  gap: 34px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

.di-guidelines {
  background: var(--tint2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  position: sticky;
  top: 100px;
}

.di-guidelines h2 {
  font-size: 18px;
  color: var(--navy);
  margin: 0 0 8px;
}

.di-guidelines p {
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

.di-guidelines .di-checks {
  margin-bottom: 18px;
}

.di-guidelines__foot {
  font-size: 13.5px;
  color: var(--ink2);
  margin: 0;
}

.di-guidelines__foot a {
  color: var(--blue);
  font-weight: 600;
  /* 2026-07-21 QA M3 -- grow the ~17px tap target; neg-margin keeps the visible layout unchanged */
  display: inline-block;
  padding: 5px 3px;
  margin: -5px -3px;
}

@media (max-width: 860px) {
  .di-wfu {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .di-guidelines {
    position: static;
  }
}
@media (max-width: 560px) {
  .di-grid2 {
    grid-template-columns: 1fr;
  }
}
/* 2026-06-19 REL_59 ask-a-question -- shared di-check (checkbox) + OTP input modifier + page glue (aq-*) */
.di-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink2);
  user-select: none;
}

.di-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.di-check__box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  display: grid;
  place-items: center;
  transition: 0.15s;
  margin-top: 1px;
}

.di-check__box svg {
  width: 13px;
  height: 13px;
  color: var(--white);
  opacity: 0;
  transform: scale(0.5);
  transition: 0.15s;
}

.di-check input:checked + .di-check__box {
  background: var(--blue);
  border-color: var(--blue);
}

.di-check input:checked + .di-check__box svg {
  opacity: 1;
  transform: scale(1);
}

.di-check input:focus-visible + .di-check__box {
  box-shadow: 0 0 0 4px rgba(15, 80, 160, 0.2);
}

/* 2026-07-23 QA U2 -- a disabled checkbox (e.g. the OTP option in email mode) had NO visual state -> it looked tappable but was a silent no-op. Dim + not-allowed cursor so it reads as disabled. Shared -> every disabled checkbox benefits. */
.di-check:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.di-check b {
  color: var(--navy);
  font-weight: 700;
}

.di-fld__input.is-otp {
  text-align: center;
  letter-spacing: 0.55em;
  padding-left: 0.55em;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}

.aq-mt {
  margin-top: 18px;
}

.aq-mt2 {
  margin-top: 28px;
}

.aq-back {
  background: none;
  border: none;
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  /* 2026-07-21 QA M3 -- was padding:0 (16px tall, < WCAG 24px). Grow the hit area; neg-left keeps alignment. */
  padding: 7px 4px;
  margin: 0 -4px 4px;
}

.aq-back:hover {
  text-decoration: underline;
}

.aq-otp-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.aq-emergency {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink2);
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--r);
  padding: 12px 14px;
  margin: 0 0 20px;
}

.aq-emergency svg {
  flex: 0 0 auto;
  color: var(--amber-deep);
  margin-top: 1px;
}

.aq-recent {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.aq-recent h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 12px;
}

.aq-recent ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.aq-recent a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--navy);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  line-height: 1.35;
}

.aq-recent a:hover {
  color: var(--blue);
}

.aq-recent__age {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

/* 2026-06-22 REL_67 -- Health Blog listing: tag-chip row + responsive article-card grid + pager (shared di-system, token-only). */
.di-blognav {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}

.di-blognav__in {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.di-blognav__group {
  position: relative;
}

.di-blognav__sum {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--white);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink2);
  transition: 0.16s;
}

.di-blognav__sum::-webkit-details-marker {
  display: none;
}

.di-blognav__sum:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.di-blognav__group[open] .di-blognav__sum {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.di-blognav__count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

.di-blognav__chev {
  width: 15px;
  height: 15px;
  transition: transform 0.18s;
}

.di-blognav__group[open] .di-blognav__chev {
  transform: rotate(180deg);
}

.di-blognav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 240px;
  max-width: 340px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 6px;
}

.di-blognav__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink2);
  text-decoration: none;
  line-height: 1.35;
}

.di-blognav__item:hover {
  background: var(--tint);
  color: var(--blue);
}

/* 2026-06-23 REL_67 -- blog listing: articles fill the wide (di-wide) area on the LEFT, topics rail on the RIGHT; big non-compact cards. */
.di-bloglayout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 34px;
  align-items: start;
}

.di-bloglayout__side {
  position: sticky;
  top: var(--sticky-top);
}

.di-topics {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 16px 16px 10px;
}

.di-topics__head {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 12px;
}

.di-topics__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 62vh;
  overflow-y: auto;
  padding-bottom: 6px;
}

@media (max-width: 620px) {
  /* 2026-07-20 QA HB-02: full-width dropdown on phones (was left:0 off the pill -> the offset "Age Group" pill's 240px panel clipped ~11px past the right edge). Group goes static so the panel resolves against .di-blognav (position:relative, full width). */
  .di-blognav__group {
    position: static;
  }
  .di-blognav__panel {
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}
.di-bloglist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.di-bcard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.di-bcard:hover {
  box-shadow: var(--sh);
  transform: translateY(-2px);
}

.di-bcard__media {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--tint);
}

.di-bcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.di-bcard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px;
  flex: 1;
}

.di-bcard__title {
  font-size: 18px;
  line-height: 1.34;
  margin: 0;
  font-weight: 700;
}

.di-bcard__title a {
  color: var(--ink);
  text-decoration: none;
}

.di-bcard__title a:hover {
  color: var(--blue);
}

.di-bcard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.di-bcard__meta time {
  font-variant-numeric: tabular-nums;
}

.di-bcard__dot {
  color: var(--line);
}

.di-bcard__excerpt {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink2);
}

.di-bcard__more {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  font-size: 14px;
  color: var(--blue);
  text-decoration: none;
}

.di-bcard__more:hover {
  text-decoration: underline;
}

.di-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 36px 0 8px;
}

.di-pager__num, .di-pager__link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  color: var(--ink2);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: 0.16s;
}

.di-pager__num:hover, .di-pager__link:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.di-pager__num.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.di-pager .is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* 2026-06-23 REL_68 -- shared empty-state card (blog tag rescue + reusable on any list page). */
.di-empty {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 40px 28px;
  text-align: center;
}

.di-empty__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
}

.di-empty__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink2);
  max-width: 520px;
  margin: 0 auto 20px;
}

/* 2026-06-23 REL_69 -- Health Blog ARTICLE: reading-optimized prose column + sticky TOC/related rail. */
.di-artlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

.di-article__main {
  min-width: 0;
  max-width: 760px;
}

.di-article__side {
  position: sticky;
  top: var(--sticky-top);
}

.di-article__reviewed {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 10px;
}

.di-article__reviewed a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.di-article__reviewed a:hover {
  text-decoration: underline;
}

.di-article__title {
  font-size: 34px;
  line-height: 1.18;
  margin: 0 0 14px;
}

.di-article__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 22px;
}

.di-article__meta time {
  font-variant-numeric: tabular-nums;
}

.di-article__hero {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--line);
  margin: 0 0 28px;
  display: block;
}

.di-prose {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink2);
}

.di-prose h2 {
  font-size: 25px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--ink);
  margin: 34px 0 12px;
  scroll-margin-top: calc(var(--sticky-top) + 12px);
}

.di-prose h3 {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
  margin: 26px 0 10px;
  scroll-margin-top: calc(var(--sticky-top) + 12px);
}

.di-prose h4, .di-prose h5, .di-prose h6 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 22px 0 8px;
  scroll-margin-top: calc(var(--sticky-top) + 12px);
}

.di-prose p {
  margin: 0 0 18px;
}

.di-prose a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.di-prose a:hover {
  color: var(--blue-dark);
}

.di-prose ul, .di-prose ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.di-prose li {
  margin: 0 0 8px;
}

.di-prose strong {
  color: var(--ink);
  font-weight: 700;
}

.di-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  margin: 8px 0 22px;
  display: block;
}

.di-article__disclaimer {
  background: var(--tint2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 30px 0;
}

.di-article__disclaimer-head {
  font-size: 15px;
  margin: 0 0 8px;
}

.di-article__disclaimer p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}

.di-eeat {
  margin: 30px 0 0;
}

.di-eeat__head {
  font-size: 19px;
  margin: 0 0 14px;
}

.di-eeat__card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 16px;
  margin: 0 0 14px;
}

.di-eeat__photo {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tint);
  border: 2px solid var(--tint);
}

.di-eeat__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.di-eeat__body {
  min-width: 0;
}

.di-eeat__name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}

.di-eeat__name a {
  color: var(--ink);
  text-decoration: none;
}

.di-eeat__name a:hover {
  color: var(--blue);
}

.di-eeat__role {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  margin: 0 0 6px;
}

.di-eeat__about {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink2);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.di-eeat__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}

.di-eeat__link:hover {
  text-decoration: underline;
}

.di-toc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 16px 18px;
  margin: 0 0 22px;
}

.di-toc__head {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 10px;
}

.di-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 62vh;
  overflow-y: auto;
}

.di-toc__item {
  margin: 0 0 2px;
}

.di-toc__item a {
  display: block;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink2);
  text-decoration: none;
}

.di-toc__item a:hover {
  background: var(--tint);
  color: var(--blue);
}

.di-toc__item--l3 a {
  padding-left: 20px;
  font-size: 13px;
  color: var(--muted);
}

.di-related {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 16px 18px;
}

.di-related__head {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 10px;
}

.di-related__item {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.di-related__item:last-child {
  border-bottom: none;
}

.di-related__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.di-related__item:hover .di-related__title {
  color: var(--blue);
}

.di-related__date {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

@media (max-width: 980px) {
  .di-artlayout {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 760px;
  }
  .di-article__side {
    position: static;
    order: 2;
  }
  .di-article__main {
    order: 1;
    max-width: none;
  }
  .di-toc__list {
    max-height: none;
  }
  .di-toc__item a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
@media (max-width: 560px) {
  .di-article__title {
    font-size: 27px;
  }
  .di-eeat__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
/* 2026-06-23 REL_70 -- Health Blog AUTHOR profile hero (photo + name + bio). */
.di-authorhero {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: 820px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 32px 34px;
}

.di-authorhero__photo {
  flex: 0 0 140px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tint);
  border: 4px solid var(--tint);
}

.di-authorhero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.di-authorhero__body {
  min-width: 0;
  padding-top: 4px;
}

.di-authorhero__name {
  font-size: 30px;
  line-height: 1.2;
  margin: 8px 0 14px;
}

.di-authorhero__bio {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink2);
  margin: 0 0 16px;
}

.di-authorhero__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--pill);
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.di-authorhero__link:hover {
  background: var(--blue-dark);
}

@media (max-width: 620px) {
  .di-authorhero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 22px;
    gap: 20px;
  }
  .di-authorhero__name {
    font-size: 26px;
  }
}
@media (max-width: 1024px) {
  .di-bloglayout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .di-bloglayout__side {
    position: static;
  }
  /* 2026-07-20 QA HB-03: no nested inner-scroll on the topics rail on phones (was max-height:320 overflow:auto -> thumb trapped at page bottom). Let the page scroll (matches the city-directory "no nested scroll" principle). */
  .di-topics__chips {
    max-height: none;
    overflow-y: visible;
  }
}
@media (max-width: 620px) {
  .di-bloglist {
    grid-template-columns: 1fr;
  }
}

/* ===== 2026-07-20 QA HealthBlog fixes (Naveen "fix all") ===== */
/* HB-09d: the whole article card is a click surface (stretched title link); Read more stays clickable above it. */
.di-bcard {
  position: relative;
}
.di-bcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.di-bcard__more {
  position: relative;
  z-index: 2;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
/* HB-09b: reviewer/author "View profile" comfortable tap target. */
.di-eeat__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
/* Article "find care" CTA band (article was a conversion dead-end -> path to a booking). */
.di-article__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 6px;
  padding: 20px 22px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.di-article__cta-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.di-article__cta-txt b {
  font-size: 16px;
  color: var(--ink);
}
.di-article__cta-txt span {
  font-size: 14px;
  color: var(--muted);
}
.di-article__cta-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* HB-01: mobile-only collapsible "On this page" TOC at the TOP of the article (the sidebar TOC renders below the whole article on phones -> useless for jumping in). */
.di-toc-m {
  display: none;
}
@media (max-width: 980px) {
  .di-toc-m {
    display: block;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    margin: 0 0 22px;
    overflow: hidden;
  }
  .di-toc-m > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .di-toc-m > summary::-webkit-details-marker {
    display: none;
  }
  .di-toc-m[open] > summary {
    border-bottom: 1px solid var(--line);
  }
  .di-toc-m .di-toc__list {
    padding: 8px 12px 12px;
    max-height: none;
    overflow: visible;
  }
  .di-article__side .di-toc {
    display: none;
  }
}
/* 2026-06-23 REL_71 -- City directory (/all-cities + /India/{state}): slim sticky search band + a normal-flow state quick-nav (NO nested scroll) + grouped city grid. Reuses .di-city card + .di-chip + .di-empty (token-only glue). */
.di-citydir {
  margin-top: 6px;
}

/* the [hidden] attr (UA display:none) loses to the author .di-city{display:flex}/.di-chip rules, so the client filter couldn't hide cards -- re-assert it, scoped to the directory. */
.di-citydir [hidden] {
  display: none;
}

/* slim FULL-WIDTH sticky band (masks content scrolling under it) -> the search follows without a heavy floating card; only the search is sticky, so the page scrolls smoothly (no nested scroller). */
.di-citydir__bar {
  position: sticky;
  top: var(--sticky-top);
  z-index: 15;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 22px -18px rgba(14, 35, 72, 0.4);
  padding: 14px 0;
  margin: 0 0 22px;
}

.di-citydir__search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
  background: var(--tint2);
  border: 1.5px solid var(--line);
  border-radius: var(--pill);
  padding: 0 22px;
  height: 54px;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}

.di-citydir__search:focus-within {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(15, 80, 160, 0.12);
}

.di-citydir__search svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.di-citydir__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  height: 100%;
}

/* state quick-nav -- normal flow, wraps naturally, CENTERED, NO internal scroll (that was the janky nested scroller). */
.di-citydir__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 1080px;
  margin: 0 auto 30px;
}

.di-citydir__states {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.di-citydir__state {
  scroll-margin-top: calc(var(--sticky-top) + 86px);
}

.di-citydir__statehead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tint);
}

/* 2026-07-21 QA AC-LINK -- state name links to /India/{state} hub; looks like the heading, underlines on hover. */
.di-citydir__statelink {
  color: inherit;
  text-decoration: none;
}
.di-citydir__statelink:hover {
  color: var(--blue);
  text-decoration: underline;
}

.di-citydir__statecount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--pill);
  background: var(--tint);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
}

.di-citydir__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
}

.di-citydir__noresult {
  margin-bottom: 26px;
}

/* 2026-07-21 QA AC-NAV -- back-to-top for long directory pages (JS-added). Bottom-LEFT to clear the bottom-right chat FAB. */
.di-totop {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--blue);
  box-shadow: var(--sh-sm);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.di-totop.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.di-totop:hover {
  border-color: var(--blue);
}

@media (max-width: 560px) {
  .di-citydir__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .di-citydir__statehead {
    font-size: 18px;
  }
  .di-citydir__search {
    height: 50px;
    padding: 0 18px;
  }
}
@media (max-width: 400px) {
  .di-citydir__grid {
    grid-template-columns: 1fr;
  }
}
/* 2026-06-24 REL_72 -- City-speciality hub: reuses the .di-citydir filter band + the Home .di-spec card; only this denser auto-fill grid is page glue. */
.di-specdir__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

@media (max-width: 560px) {
  .di-specdir__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
@media (max-width: 380px) {
  /* 2026-07-21 QA -- was 1fr: 73 speciality cards stacked = ~16,000px scroll @360/375. Keep 2 columns (tighter gap)
     down to the narrowest phones (matches the 414px 2-col) so the scroll ~halves + the width isn't wasted. */
  .di-specdir__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
/* 2026-06-24 REL_73 -- city+speciality doctor listing: reuses the REL_63 .di-sres layout + _DoctorResultRow + .di-faq + .di-pager + .di-chip. Only the filter-chip group glue + the active chip is new. */
.di-chip--on {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.di-csd__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.di-csd__other {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
}

/* 2026-07-21 QA UI#2 (+ 2026-07-23 M2) -- ALL navigate-away chips get a trailing chevron so they read as "go to" not "filter": the aside "Browse by speciality" band, the empty-state related chips, and the below-results browse bands (Popular localities / {procedure} doctors by city). Filter chips (Consult/Gender/Sort, in .di-sres__group) deliberately have none. */
.di-csd__other .di-chip::after,
.di-sres__related .di-chip::after,
.di-sres__about .di-csd__chips .di-chip::after {
  content: "\203A";
  margin-left: 3px;
  font-weight: 700;
  opacity: 0.55;
}

.di-csd__hub {
  display: inline-block;
  /* 2026-07-23 QA M3 -- vertical padding lifts this toolbar link's tap target to >=24px (was 22px, below WCAG 2.2 AA min). */
  padding: 4px 2px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}

.di-csd__hub:hover {
  text-decoration: underline;
}

/* 2026-07-21 QA E -- mobile-only "Filters & sort" jump-link. Results-first (aside order:2) drops the filters below the list, so this restores a top affordance to reach Consult/Gender/Sort. Hidden on desktop (filters sit in the left rail). */
.di-sres__jumpfilters {
  display: none;
}

/* mobile: this page's filters are simple chip-links (not the REL_63 search-form drawer) -> keep them IN-FLOW (override the off-canvas), so no toggle/JS is needed and they stay accessible. */
@media (max-width: 920px) {
  .di-csd__filters {
    position: static;
    width: auto;
    max-width: none;
    z-index: auto;
    transform: none;
    overflow: visible;
    box-shadow: none;
    border-radius: var(--r);
    /* 2026-07-21 QA S2 -- results-FIRST on mobile: the in-flow filter aside + the 16-speciality "Browse by" band otherwise pushed the first doctor ~1.6-2.6 screens down. order:2 drops the whole aside below .di-sres__main (default order 0). Keeps the author's no-JS in-flow design; the SearchHub drawer is position:fixed so order is a no-op there. */
    order: 2;
    /* the #di-filters jump-link lands here -> clear the sticky header. */
    scroll-margin-top: 76px;
  }
  .di-sres__jumpfilters {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 9px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--blue);
    font-weight: 600;
    font-size: 13.5px;
  }
}
/* 2026-06-24 REL_74 -- /doctors = SMART SYMPTOM FINDER ("describe your problem -> we match the right specialist"). Distinct from
   Home (marketing) + /Common/search_doctor (results). Page-unique GLUE: a centered problem-input hero + the smart answer band;
   the browse grids reuse .di-cond chips + the secondary speciality browse reuses the Home .di-spec card. Tokens only. */
.di-find {
  position: relative;
  overflow: visible;
  padding: 54px 0 60px;
  text-align: center;
  background: radial-gradient(1100px 540px at 50% -14%, rgba(47, 124, 224, 0.12), transparent 60%);
}

.di-find__orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.di-find__orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: 0.5;
}

.di-find__orbs .orb1 {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(47, 124, 224, 0.42), transparent 70%);
  top: -100px;
  left: 4%;
}

.di-find__orbs .orb2 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(90, 166, 240, 0.4), transparent 70%);
  top: -50px;
  right: 6%;
}

.di-find__in {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.di-find__in .di-eyebrow {
  margin-bottom: 18px;
}

.di-find__h1 {
  font-size: 50px;
  line-height: 1.1;
  margin: 0 0 16px;
}

.di-find__h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--blue), var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.di-find__lead {
  font-size: 18px;
  color: var(--ink2);
  max-width: 620px;
  margin: 0 auto 28px;
}

/* the problem input -- big pill with an inline icon + a primary button (the hero affordance) */
.di-find__form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--pill);
  box-shadow: var(--sh);
  padding: 8px 8px 8px 20px;
  transition: border-color 0.16s, box-shadow 0.16s;
}

.di-find__form:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(15, 80, 160, 0.12), var(--sh);
}

.di-find__ico {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--muted);
}

.di-find__ico svg {
  width: 22px;
  height: 22px;
}

.di-find__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  height: 44px;
}

.di-find__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.di-find .di-popular {
  margin-top: 16px;
}

/* 2026-07-21 QA D2/UI#3 -- finder quick-links were 17px inline text (< WCAG 2.2 2.5.8 24px target + didn't read as tappable). Make them padded pills. */
.di-find .di-popular a {
  display: inline-block;
  padding: 6px 11px;
  margin: 3px 2px;
  border-radius: 999px;
  background: var(--tint);
  line-height: 1.2;
}

.di-find__alt {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}

.di-find__alt a {
  display: inline-block;
  padding: 4px 2px;
  line-height: 1.3;
  color: var(--blue);
  font-weight: 600;
}

/* smart answer band -- the match payoff */
.di-answer-sec {
  padding: 8px 0 0;
  /* 2026-07-21 QA S2 -- di-home.js scrolls here on submit; clear the sticky header so the match isn't tucked under it. */
  scroll-margin-top: 84px;
}

.di-answer {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin: -26px auto 0;
  position: relative;
  z-index: 2;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  padding: 20px 24px;
}

.di-answer__ic {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--blue);
  overflow: hidden;
}

.di-answer__ic img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.di-answer__ic svg {
  width: 28px;
  height: 28px;
}

.di-answer__tx {
  flex: 1;
  min-width: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.di-answer__tx .lbl {
  font-size: 14px;
  color: var(--ink2);
}

.di-answer__tx .spec {
  font-family: "Jakarta", "Inter", sans-serif;
  font-weight: 800;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.15;
}

.di-answer__cta {
  flex: 0 0 auto;
}

.di-answer--empty .di-answer__ic {
  display: none;
}

.di-answer--empty .spec {
  font-size: 19px;
}

/* secondary speciality browse -- reuses the .di-spec card; only the responsive grid container is glue */
.di-fspecs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

/* problem + body-area chips -> resolved speciality (tinted band for rhythm) */
.di-cond-sec {
  background: var(--tint2);
}

.di-conds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.di-cond {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 42px 16px 18px;
  transition: 0.2s;
}

.di-cond:hover {
  box-shadow: var(--sh);
  transform: translateY(-3px);
  border-color: transparent;
}

.di-cond__t {
  font-family: "Jakarta", "Inter", sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 15.5px;
  line-height: 1.25;
}

.di-cond__s {
  color: var(--muted);
  font-size: 12.5px;
}

.di-cond__ar {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--blue);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s;
}

.di-cond:hover .di-cond__ar {
  transform: translateY(-50%) translateX(3px);
}

@media (max-width: 980px) {
  .di-find__h1 {
    font-size: 40px;
  }
  .di-conds {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 780px) {
  .di-conds {
    grid-template-columns: repeat(2, 1fr);
  }
  .di-answer {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .di-answer__cta {
    align-self: stretch;
    justify-content: center;
  }
}
@media (max-width: 560px) {
  .di-find {
    padding: 36px 0 44px;
  }
  .di-find__h1 {
    font-size: 31px;
  }
  .di-find__lead {
    font-size: 16px;
  }
  .di-find__form {
    flex-wrap: wrap;
    border-radius: var(--r-lg);
    padding: 12px;
  }
  .di-find__input {
    flex: 1 1 100%;
    order: 1;
    height: 44px;
  }
  .di-find__btn {
    flex: 1 1 100%;
    order: 2;
    justify-content: center;
  }
  .di-find__ico {
    display: none;
  }
  .di-fspecs {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .di-cond {
    padding: 14px 38px 14px 16px;
  }
}
@media (max-width: 380px) {
  .di-fspecs {
    grid-template-columns: 1fr 1fr;
  }
  .di-conds {
    grid-template-columns: 1fr;
  }
}
/* 2026-06-25 REL_77 -- /procedure PROCEDURES DISCOVERY HUB (from-scratch; NOT a legacy/Home/finder copy). Reuses global .di-eyebrow/.di-shead/.di-faq/.di-btn + :root tokens.
   Page-unique only: procedures hero + search autocomplete dropdown, "most offered" card grid, browse-by-speciality chip groups, why-grid. */
/* NOTE: no overflow:hidden here -- it would clip the search autocomplete dropdown. The decorative orbs are clipped by their own .di-prohero__orbs{overflow:hidden}; page-level x-scroll is already prevented by html{overflow-x:clip}. */
.di-prohero {
  position: relative;
  padding: 54px 0 60px;
  text-align: center;
  background: radial-gradient(1100px 540px at 50% -14%, rgba(47, 124, 224, 0.12), transparent 60%);
}

.di-prohero__orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.di-prohero__orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: 0.5;
}

.di-prohero__orbs .orb1 {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(47, 124, 224, 0.42), transparent 70%);
  top: -100px;
  left: 4%;
}

.di-prohero__orbs .orb2 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(90, 166, 240, 0.4), transparent 70%);
  top: -50px;
  right: 6%;
}

.di-prohero__in {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.di-prohero__in .di-eyebrow {
  margin-bottom: 18px;
}

.di-prohero__h1 {
  font-size: 46px;
  margin-bottom: 16px;
}

.di-prohero__h1 em {
  font-style: normal;
  color: var(--blue);
}

.di-prohero__lead {
  color: var(--ink2);
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto 26px;
}

.di-procfilter {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}

.di-procfilter__ico {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--muted);
  pointer-events: none;
}

.di-procfilter__in {
  width: 100%;
  height: 60px;
  border: 1.5px solid var(--line);
  border-radius: var(--pill);
  background: var(--white);
  padding: 0 22px 0 52px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  box-shadow: var(--sh-sm);
  transition: 0.18s;
}

.di-procfilter__in:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--sh-blue);
}

.di-procfilter__in:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.di-prohero__alt {
  color: var(--muted);
  font-size: 14.5px;
  margin-top: 16px;
}

.di-prohero__alt a {
  display: inline-block;
  padding: 4px 2px;
  line-height: 1.3;
  color: var(--blue);
  font-weight: 600;
}

.di-pop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.di-pop__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  box-shadow: var(--sh-sm);
  transition: 0.18s;
}

.di-pop__card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--sh);
}

.di-pop__name {
  font-weight: 700;
  color: var(--navy);
  font-size: 17px;
}

.di-pop__hint {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
}

.di-pop__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.di-pop__docs {
  color: var(--blue);
  font-weight: 600;
  font-size: 13.5px;
}

/* 2026-06-26 REL_81 -- Login / auth page glue (page-unique layout only; reuses .di-fld/.di-combo/.di-chips/.di-check/.di-btn). */
.di-auth {
  padding: 48px 0 64px;
  background: linear-gradient(180deg, var(--tint), transparent 60%);
}

/* split shell: brand panel (left) + login card (right), one rounded surface */
.di-authshell {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  align-items: stretch;
  max-width: 920px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  overflow: hidden;
}

.di-authcard {
  background: var(--white);
  padding: 38px 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- brand / trust panel ---- */
.di-authbrand {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  color: var(--white);
  background: var(--navy);
  isolation: isolate;
}

.di-authbrand__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.di-authbrand__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.di-authbrand__shade {
  position: absolute;
  inset: 0;
  background: var(--ovl-auth);
}

.di-authbrand__body {
  padding: 38px 34px 36px;
}

.di-tag--light {
  color: var(--foot-link);
}

.di-authbrand__h {
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 6px 0 10px;
  max-width: 13ch;
}

.di-authbrand__p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--foot-link);
  margin: 0 0 20px;
  max-width: 34ch;
}

.di-authbrand__stats {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0 0 18px;
  padding: 0;
  flex-wrap: wrap;
}

.di-authbrand__stats b {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
}

.di-authbrand__stats b i {
  color: var(--amber);
  font-style: normal;
  margin-left: 2px;
}

.di-authbrand__stats span {
  font-size: 12px;
  color: var(--foot-fg);
  font-weight: 500;
}

.di-authbrand__trust {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--foot-link);
  margin: 0;
}

/* ---- OTP code entry ---- */
.di-otpring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--blue);
  margin: 0 auto 4px;
}

.di-auth__row--center {
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}

.di-auth__inlineform {
  margin: 0;
}

.di-auth__link--btn {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ---- live hints + caps-lock ---- */
.di-fld__hint {
  min-height: 16px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink2);
  margin: 5px 2px 0;
  transition: 0.18s;
}

.di-fld__hint.is-bad {
  color: var(--danger-ink); /* 2026-07-28 QA -- was --danger (#ef4444 = 3.76:1, fails WCAG AA on the 12.5px hint text); --danger-ink (#d32f2f, AA-safe) matches the M2 error-TEXT pattern. Shared: fixes red error-hint contrast on EVERY form. */
}

.di-fld__hint--caps {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--amber-deep);
  font-weight: 600;
}

.di-fld__hint--caps[hidden] {
  display: none;
} /* the class's display:flex would otherwise beat the bare [hidden] */
/* ---- smart-recovery nudges ---- */
.di-authnudge {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 16px;
  text-decoration: none;
}

.di-authnudge svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--blue);
}

.di-authnudge--resend {
  color: var(--blue);
  font-weight: 600;
  transition: 0.18s;
}

.di-authnudge--resend:hover {
  background: var(--tint);
  border-color: var(--blue);
}

.di-authnudge--resend:focus-visible, .di-authnudge:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.di-link-inline {
  background: none;
  border: 0;
  padding: 0;
  color: var(--blue);
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.di-link-inline:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.di-authcard__head {
  text-align: center;
  margin-bottom: 22px;
}

.di-authcard__head h1 {
  font-size: 26px;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 8px 0 6px;
}

.di-authcard__head .di-lead {
  font-size: 14.5px;
  color: var(--ink2);
}

.di-chips--seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  margin: 0 0 18px;
}

.di-chips--seg input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.di-chips--seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  transition: 0.18s;
  margin: 0;
}

.di-chips--seg input:checked + label {
  background: var(--white);
  color: var(--blue);
  box-shadow: var(--sh-sm);
}

.di-chips--seg input:focus-visible + label {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.di-auth__method {
  margin-bottom: 4px;
}

.di-fld--pass {
  position: relative;
}

.di-fld--pass .di-fld__input {
  padding-right: 48px;
}

.di-fld__eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ink2);
  cursor: pointer;
  border-radius: 8px;
}

.di-fld__eye:hover {
  color: var(--blue);
}

.di-fld__eye:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.di-fld__eye.is-on {
  color: var(--blue);
}

.di-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 6px;
  flex-wrap: wrap;
}

.di-auth__otp {
  margin: 8px 0 18px;
  font-size: 13.5px;
  color: var(--ink2);
}

.di-auth__link {
  /* 2026-07-23 QA U3 -- were 16-22px tall (Forgot / Resend / Use-different-number) < WCAG 2.2 2.5.8 24px min. Padding lifts the tap area. */
  display: inline-block;
  padding: 5px 2px;
  font-size: 13.5px;
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}

.di-auth__link:hover {
  text-decoration: underline;
}

.di-auth__link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.di-auth__alt {
  text-align: center;
  margin-top: 14px;
}

.di-auth__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--ink2);
  font-size: 13px;
}

.di-auth__or::before, .di-auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.di-auth__signup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.di-auth__signup .di-btn {
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
}

/* tablet/mobile: collapse the split -> single card; the brand panel is decorative, so it drops away */
/* 2026-06-26 REL_82 -- Doctor Register glue (page-unique; reuses the .di-auth shell + .di-fld/.di-combo/.di-btn). */
.di-authshell--wide {
  max-width: 1000px;
}

.di-form__two--even {
  grid-template-columns: 1fr 1fr;
}

.di-authbrand__feats {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.di-authbrand__feats li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--foot-link);
}

.di-authbrand__feats svg {
  flex: 0 0 auto;
  color: var(--green-bright);
}

.di-pwmeter {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 2px 2px;
  min-height: 16px;
}

.di-pwmeter__bar {
  flex: 1;
  height: 5px;
  border-radius: var(--pill);
  background: var(--line);
  overflow: hidden;
}

.di-pwmeter__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--pill);
  background: var(--danger);
  transition: width 0.25s, background 0.25s;
}

.di-pwmeter__txt {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  min-width: 54px;
  text-align: right;
}

.di-pwmeter.is-weak .di-pwmeter__bar i {
  width: 33%;
  background: var(--danger);
}

.di-pwmeter.is-fair .di-pwmeter__bar i {
  width: 66%;
  background: var(--amber);
}

.di-pwmeter.is-strong .di-pwmeter__bar i {
  width: 100%;
  background: var(--green);
}

.di-otpsent {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13px;
  color: var(--ink);
  margin: 4px 0 12px;
}

.di-auth__fineprint {
  font-size: 12px;
  color: var(--ink2);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}

.di-auth__fineprint a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.di-auth__fineprint a:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .di-form__two--even {
    grid-template-columns: 1fr;
  }
} /* names stack on small phones (match .di-form__two) */
@media (max-width: 860px) {
  .di-authshell {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
  .di-authshell--wide {
    max-width: 460px;
  }
  .di-authbrand {
    display: none;
  }
}
@media (max-width: 480px) {
  .di-authshell {
    border-radius: 14px;
  }
  .di-authcard {
    padding: 28px 20px 24px;
  }
  .di-auth__signup {
    grid-template-columns: 1fr;
  }
  .di-authbrand__body {
    padding: 28px 22px 26px;
  }
}
.di-pop__ar {
  color: var(--blue);
  font-weight: 700;
  transition: 0.18s;
}

.di-pop__card:hover .di-pop__ar {
  transform: translateX(4px);
}

/* search autocomplete dropdown (suggests only resolvable procedures) */
.di-procsug {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.di-procsug__list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh);
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 360px;
  overflow: auto;
}

.di-procsug__list[hidden] {
  display: none;
}

.di-procsug__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  min-height: 44px;
}

.di-procsug__item:hover, .di-procsug__item.is-active {
  background: var(--tint);
}

/* 2026-07-23 QA F3 -- no-match feedback row: not a clickable suggestion (only its inner link navigates), so no pointer cursor / hover tint. */
.di-procsug__item--empty {
  cursor: default;
}

.di-procsug__item--empty:hover {
  background: transparent;
}

.di-procsug__item--empty a {
  color: var(--blue);
  font-weight: 600;
}

.di-procsug__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.di-procsug__name {
  font-weight: 600;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.3;
}

.di-procsug__hint {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.di-procsug__docs {
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
  flex: 0 0 auto;
  white-space: nowrap;
  padding-top: 2px;
}

.di-pcat {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.di-pcat__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.di-pcat__name {
  font-size: 20px;
  color: var(--navy);
}

.di-pcat__cnt {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.di-pcat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.di-why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.di-why__c {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 22px;
  box-shadow: var(--sh-sm);
}

.di-why__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--tint);
  color: var(--blue);
  margin-bottom: 14px;
}

.di-why__c h3 {
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 8px;
}

.di-why__c p {
  color: var(--ink2);
  font-size: 14.5px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .di-pop {
    grid-template-columns: repeat(2, 1fr);
  }
  .di-why {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .di-prohero {
    padding: 36px 0 44px;
  }
  .di-prohero__h1 {
    font-size: 32px;
  }
  .di-prohero__lead {
    font-size: 16px;
  }
  .di-procfilter__in {
    height: 54px;
    font-size: 15px;
  }
  .di-pop {
    grid-template-columns: 1fr;
  }
  .di-why {
    grid-template-columns: 1fr;
  }
  .di-pcat__name {
    font-size: 18px;
  }
}
.di-btn[hidden]{display:none}  /* 2026-06-26 REL_84 -- re-assert UA [hidden] over .di-btn display:inline-flex (auth Send/Verify/Email-link buttons) */

.di-auth__row[hidden]{display:none}  /* 2026-06-27 REL_85 -- re-assert UA [hidden] over .di-auth__row display:flex (JS-hidden link rows on success state) */

/* 2026-07-27 QA -- SHARED flex text-holders (doctor card + result row). The body-wide overflow-wrap:break-word wraps normal text,
   but a FLEX ITEM won't shrink below its content's min-content width, so a single abnormally long UNBROKEN token still overflowed
   (worst case: a long doctor name in a listing row pushed the whole page into horizontal scroll). overflow-wrap:anywhere folds the
   break into the min-content size (also covers the anonymous text node beside an icon), and min-width:0 lets the item shrink inside
   its flex row. Scoped to these known text cells (NOT global) so intrinsic sizing everywhere else stays as-is. Placed last so it
   wins source-order over the base + responsive re-declarations of these classes. */
.di-doc__spec,
.di-doc__loc span,
.di-dres__name,
.di-dres__spec,
.di-dres__loc,
.di-org__docname,
.di-org__nearc {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ============================================================================================
   2026-08-03 REL_105 -- SHARED STATIC-PAGE PRIMITIVES (Naveen: "css ki comman cheeze ek jagah rakh do")
   Extracted from di-about.css + di-howitworks.css, which had become ~75% the same file under two prefixes
   and had ALREADY started to drift (.ab-head 2rem vs .hiw-head 2.25rem -- same object, 4px apart, uncommented).
   Standard 0 rule 3: a recurring need becomes a SHARED variant, not a second page-local copy.

   Every selector below is ADDITIVE and opt-in -- .di-static, .di-sec--alt, .di-sec--cta, .di-measure and
   .di-gs--3 match nothing that exists today, so no already-approved page can change. That is what made this
   safe to do centrally; editing the bare `.di-pagehead h1` would have silently resized 15 consumer pages.

   ⚠️ These rules are written to BOTH di-system.css and di-system.scss deliberately, so this addition does not
   deepen the known SCSS/CSS drift (the source is missing ~37 hand-edits that live only in the .css).
   ============================================================================================ */

/* Heading scale for static content pages. di-system's base h1,h2,h3 set family/weight/colour but NO size, and
   .di-pagehead h1 sets only margin -- so an h1 inside a <section> falls back to the UA sectioning rule that
   Safari and Firefox still apply (h1 -> 1.5em = 24px), rendering it the same size as its own h2s. */
.di-static .di-pagehead h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.15; letter-spacing: -.03em; }
.di-static h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; letter-spacing: -.02em; }

/* Alternating section wash, so long content pages read as separate chapters. */
.di-sec--alt { background: var(--tint2); }

/* Closing call-to-action band. */
.di-sec--cta { background: var(--tint); border-top: 1px solid var(--line); text-align: center; }

/* A centred reading measure for intro prose. */
.di-measure { max-width: 46rem; margin: 0 auto; text-align: center; }

/* .di-gs ships 2-up capped at 840px; a third audience card leaves an orphan row. Mirrors the precedent
   di-system already set with .di-steps--3. */
.di-gs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 68rem; }

@media (max-width: 980px) {
  .di-gs--3 { grid-template-columns: 1fr; }
}
/* ============================================================================================
   2026-08-03 REL_106 -- static-page primitives, round 2. ADDITIVE ONLY.
   The REL_105 review said "do this before a third static page is built"; 5 primitives were promoted
   then and 6 were not, so the third page copied them verbatim under a third prefix. Promoted now.
   Selector safety, stated accurately: the six NEW names (.di-secintro, .di-secintro--center, .di-narrow,
   .di-cta-h, .di-accent and the .di-prose .di-btn reset) match nothing that existed BEFORE this release --
   not "nothing that exists today", because .di-prose .di-btn deliberately matches the pricing CTA added on
   /marketing/for-doctors twelve lines below, which is the whole point of it. The list-style
   reset does NOT -- .di-feat__c / .di-gs__c / .di-step match live elements on FOUR other pages. Enumerated,
   and safe on each for one of two reasons:
     /about-us       <li class="di-feat__c"> ALREADY gets list-style:none from di-about.css:50
                     (.ab-page li.di-feat__c; the wrapper is <div class="ab-page di-static"> at About:33).
                     Its .di-gs__c (255,260,268) are <div>.
     /how-it-works   <li class="di-step"> ALREADY gets it from di-howitworks.css:34 (.hiw-steps li.di-step;
                     <ol class="di-steps hiw-steps"> at :71 and :108). Its .di-gs__c (180,185,190) are <div>.
     / (Home)        .di-feat__c (54-56), .di-step (92-95) and .di-gs__c (175-176) are ALL <div>.
     /doctors        .di-step (FindDoctor/Index:129-131) are ALL <div>.
   A <div> has no marker to suppress, so those pages need no page-local reset and never had one. Two
   consumers already declare the identical rule; the rest are divs. Computed style is unchanged on every one.
   (Round 2 said "matches nothing" -- false. Round 3 named three consumers and gave a reason covering two of
    them. Both were true sentences resting on evidence narrower than the claim, which on a SHARED-library
    edit is itself the defect even when the CSS is correct. This version enumerates every consumer and the
    specific reason each one is safe.)
   Written to BOTH di-system.css and di-system.scss so this does not deepen the known SCSS/CSS drift.
   ============================================================================================ */

/* Section intro block: tag + h2 + lead, left-aligned at a readable measure.
   Deliberately NOT .di-shead (centred, 640px, hard 39px h2) or .di-sechead (flex space-between). */
.di-secintro { max-width: 46rem; margin: 0 0 2rem; }
.di-secintro h2 { margin: .5rem 0 .5rem; }
.di-secintro--center { max-width: none; text-align: center; }

/* A single prose column, wider than .di-measure and left-aligned. */
.di-narrow { max-width: 52rem; }
.di-narrow h2 { margin: 0 0 1rem; }

/* Heading rhythm inside the .di-sec--cta band. */
.di-cta-h { margin: 0 0 1.75rem; }

/* Card components are semantic <li> on every static page, and a marker on a card is never wanted by any
   consumer. The universal `*` reset (di-system.css:66, di-system.scss:23) zeroes margin/padding but NOT list-style, and no card component
   declares it -- so grid does NOT suppress the marker (QA proved this on /about-us: a disc painted outside
   all 8 cards). Markup must still carry role="list": Safari drops the implicit list role once this applies. */
.di-feat__c, .di-gs__c, .di-step { list-style: none; }

/* Optional brand accent rail on a feature card.
   CHAINED to .di-feat__c on purpose: .di-feat__c:hover sets border-color:transparent at (0,2,0), so an
   unchained .di-accent (0,1,0) would lose at rest and merely tie on hover -- correct by source order alone,
   and silently broken the day this sheet is bundled or inlined ahead of di-system. */
.di-feat__c.di-accent { border-top: 3px solid var(--blue); }
.di-feat__c.di-accent:hover { border-top-color: var(--blue); }

/* .di-prose a underlines every descendant link at (0,1,1) and .di-prose a:hover recolours it at (0,2,1),
   while .di-btn declares no text-decoration and its variants set colour at only (0,1,0). A button placed
   inside a prose block therefore rendered UNDERLINED and changed its label colour on hover -- the only
   underlined .di-btn in the app. Each variant's own colour is RESTATED here rather than using `inherit`,
   which would have turned a primary button's white label into body ink the first time one appeared in prose. */
.di-prose .di-btn { text-decoration: none; }
.di-prose .di-btn--ghost, .di-prose .di-btn--ghost:hover { color: var(--blue); }
.di-prose .di-btn--primary, .di-prose .di-btn--primary:hover { color: var(--white); }

/* ============================================================================================
   2026-08-03 REL_107 -- ADDITIVE. One rule, for the shared _DiFaqList partial.
   /faq puts the question in an <h3> inside <summary> so a 35-question page has correct document
   structure (the legacy page made every question an <h2> -- 35 of them, a flat outline).
   NB that is a DOM/crawler benefit: <summary> is a disclosure control and ARIA can treat its
   descendants as presentational, so do NOT claim guaranteed screen-reader heading navigation.
   Without this rule the <h3> fights its own container. TWO declarations do the work:
     font: inherit   -- the base `h1,h2,h3,.disp` rule (di-system.css:193, di-system.scss:43) sets
                        family + weight 800, and the UA default h3 size is 1.17em, so the question
                        would render ~19px in a flex row built for 16.5px. `font` also carries
                        line-height 1.12 -> inherited 1.65, which is exactly what the bare text node
                        gets on the other nine pages, so row height is unchanged.
     letter-spacing  -- REQUIRED, not redundant: letter-spacing is NOT a `font` longhand, so without
                        it the base rule's -0.025em still applies and these questions would track
                        tighter than every other accordion in the app.
   `margin: 0` and `color: inherit` are defensive, not load-bearing: the universal `*` reset at
   di-system.css:66-70 already zeroes UA margins, and the base rule's colour is var(--navy), the
   same value `.di-faq summary` sets.
   (An earlier version of this comment blamed "UA margins" for something that reset had already
    solved -- right conclusion, wrong mechanism, and a wrong mechanism is how a rule gets deleted
    as redundant two releases later.)
   BLAST RADIUS VERIFIED, not assumed: a case-insensitive sweep of every .cshtml found ZERO
   existing <summary> containing any heading element, so this selector matches nothing that
   existed before this release. Written to BOTH di-system.css and di-system.scss because
   gulpfile.js:21-24 COMPILES the .css from the .scss -- a .css-only edit is wiped by the next
   `gulp di`. (See the REL_106 block above for the standing gulp hazard.)
   ============================================================================================ */
.di-faq summary h3 { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }

/* ============================================================================================
   2026-08-03 REL_107 -- ADDITIVE. Centred wrapping button row, promoted on the SECOND occurrence.
   `.faq-jump` (/faq audience jump links) was written byte-identical to `.fd-hero-cta`
   (/marketing/for-doctors, REL_106) -- same four declarations, same order. The CSS review called
   it plainly: the reason I could not just reuse `.fd-hero-cta` is that ITS NAME IS WRONG (it says
   "hero CTA"; these are in-page navigation), and the fix for a wrong name is to rename it into the
   library, not to mint a second copy beside it. Promoted now rather than at the third copy, because
   REL_105's review already cost a release by waiting.
   `.fd-hero-cta` is NOT converted here -- /marketing/for-doctors is approved and outside this page's
   authorised edit scope -- so duplication is TRANSIENTLY higher until it is. Logged as a follow-up.
   New selector: matches nothing that existed before this release.
   ============================================================================================ */
.di-btnrow { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }