/* ========================================================================
   SIKKA INDUSTRY TRENDS — PREMIUM UI SYSTEM
   Major page-scoped redesign. Loaded after legacy styles.
   Functional display hooks (.view, .activeFlex, .switchImg, .activeBlock,
   .overlay, .main-graph, .downloadLink) are intentionally preserved.
   ======================================================================== */

:root {
  --ui-brand-950: #26003d;
  --ui-brand-900: #3c075f;
  --ui-brand-800: #531080;
  --ui-brand-700: #681c9a;
  --ui-brand-600: #7c27b9;
  --ui-brand-500: #9945d0;
  --ui-brand-400: #b76be5;
  --ui-brand-300: #d6a8f2;
  --ui-gold-500: #f7b500;
  --ui-gold-300: #ffd86b;
  --ui-cyan: #4bc8ff;
  --ui-bg: #080b12;
  --ui-bg-2: #0d111b;
  --ui-bg-3: #121827;
  --ui-panel: rgba(17, 23, 37, .88);
  --ui-panel-strong: #151c2c;
  --ui-text: #f7f4fb;
  --ui-muted: #a9b1c1;
  --ui-subtle: #778195;
  --ui-line: rgba(255, 255, 255, .09);
  --ui-line-strong: rgba(255, 255, 255, .16);
  --ui-brand-line: rgba(183, 107, 229, .30);
  --ui-brand-soft: rgba(124, 39, 185, .15);
  --ui-brand-softer: rgba(124, 39, 185, .08);
  --ui-success: #55d6a7;
  --ui-danger: #ff7185;
  --ui-r-sm: 12px;
  --ui-r: 18px;
  --ui-r-lg: 26px;
  --ui-r-xl: 36px;
  --ui-pill: 999px;
  --ui-shadow-sm: 0 10px 28px rgba(0, 0, 0, .24);
  --ui-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  --ui-shadow-brand: 0 18px 48px rgba(104, 28, 154, .40);
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-fast: .22s var(--ui-ease);
  --ui-transition: .42s var(--ui-ease);
}

/* ---------- Reset and accessibility ---------- */
html { scroll-behavior: smooth; }
body {
  background: var(--ui-bg) !important;
  color: var(--ui-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--ui-brand-600); color: #fff; }
*:focus { outline: 0 !important; }
*:focus-visible {
  outline: 3px solid rgba(183, 107, 229, .75) !important;
  outline-offset: 3px !important;
}
a { transition: color var(--ui-fast), opacity var(--ui-fast); }
img { image-rendering: auto; }
* { scrollbar-width: thin; scrollbar-color: var(--ui-brand-600) rgba(255,255,255,.04); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.035); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ui-brand-500), var(--ui-brand-700));
  border: 2px solid transparent;
  border-radius: var(--ui-pill);
  background-clip: content-box;
}

/* ---------- Shared typography ---------- */
.page-home h1, .page-articles h1, .page-article-detail h1, .page-register h1,
.page-home h2, .page-articles h2, .page-register h2 {
  letter-spacing: -.045em;
  line-height: 1.04;
}
.ui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px !important;
  color: var(--ui-brand-300) !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4 !important;
  text-transform: uppercase;
}
.ui-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: var(--ui-pill);
  background: linear-gradient(90deg, var(--ui-gold-500), var(--ui-brand-400));
}
.ui-gradient-text {
  background: linear-gradient(118deg, #fff 8%, #e6d1f5 57%, #b76be5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ui-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: 0 auto 28px;
}
.ui-section-heading h2 { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 48px); }
.ui-section-heading > p { max-width: 600px; margin: 0; color: var(--ui-muted); }

/* ---------- Shared buttons ---------- */
.ui-button, #signupBtn, .contactBtn, #btnHomeLogin,
.modal-content .btn, #btnVerifyEmail, #btnSubmitReset {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 24px !important;
  overflow: hidden;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none !important;
  background: linear-gradient(135deg, var(--ui-brand-500), var(--ui-brand-700) 55%, var(--ui-brand-900)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--ui-pill) !important;
  box-shadow: var(--ui-shadow-brand);
  transition: transform var(--ui-transition), box-shadow var(--ui-transition), filter var(--ui-transition) !important;
}
.ui-button::after, #signupBtn::after, .contactBtn::after, #btnHomeLogin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.26) 47%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .8s var(--ui-ease);
  pointer-events: none;
}
.ui-button:hover, #signupBtn:hover, .contactBtn:hover, #btnHomeLogin:hover,
.modal-content .btn:hover, #btnVerifyEmail:hover, #btnSubmitReset:hover {
  color: #fff !important;
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 24px 58px rgba(104,28,154,.52) !important;
}
.ui-button:hover::after, #signupBtn:hover::after, .contactBtn:hover::after, #btnHomeLogin:hover::after {
  transform: translateX(130%);
}
.ui-button-secondary, #accessData, .logoutBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 23px !important;
  color: #fff !important;
  font-weight: 700;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: var(--ui-pill) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(16px);
  transition: transform var(--ui-transition), background var(--ui-transition), border-color var(--ui-transition) !important;
}
.ui-button-secondary:hover, #accessData:hover, .logoutBtn:hover {
  transform: translateY(-3px);
  background: var(--ui-brand-soft) !important;
  border-color: var(--ui-brand-400) !important;
}

/* ---------- Header and footer ---------- */
header .navbar {
  min-height: 74px;
  background: rgba(8, 11, 18, .76) !important;
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: none;
}
header .navbar.navborder {
  background: rgba(8, 11, 18, .92) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.36) !important;
}
header .navbar .nav-link { font-weight: 600; letter-spacing: .01em; }
header .navbar-brand img { filter: drop-shadow(0 5px 18px rgba(124,39,185,.35)); }
footer {
  position: relative;
  background: #070a10 !important;
  border-top: 1px solid var(--ui-line);
}
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(540px, 70%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--ui-brand-500), transparent);
}
footer a, footer i { transition: color var(--ui-fast), transform var(--ui-fast); }
.footerSocial i:hover { color: var(--ui-gold-300) !important; transform: translateY(-3px); }

/* ========================================================================
   HOME — HERO
   ======================================================================== */
.page-home .dashboard-hero {
  min-height: 710px;
  display: flex;
  align-items: center;
  padding: 138px 0 76px !important;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 15%, rgba(153,69,208,.24), transparent 27%),
    radial-gradient(circle at 93% 62%, rgba(75,200,255,.09), transparent 26%),
    radial-gradient(circle at 10% 95%, rgba(104,28,154,.17), transparent 28%),
    linear-gradient(145deg, #080b12 0%, #0b0f18 56%, #100a18 100%) !important;
}
.page-home .dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%);
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.page-home .dashboard-hero::after {
  content: "";
  position: absolute;
  right: -160px; top: 80px;
  z-index: -1;
  width: 540px; height: 540px;
  border: 1px solid rgba(183,107,229,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 74px rgba(153,69,208,.025), 0 0 0 148px rgba(153,69,208,.018);
}
.page-home .hero-copy { max-width: 720px; }
.page-home .hero-copy h1 {
  max-width: 800px;
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(48px, 6.4vw, 82px);
  font-weight: 700;
}
.page-home .hero-copy .hero-lead {
  max-width: 660px;
  margin: 0 0 18px;
  color: #d8ddea;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.62;
}
.page-home .hero-copy .hero-detail {
  max-width: 650px;
  margin: 0;
  color: var(--ui-muted) !important;
  font-size: 16px !important;
  line-height: 1.75;
}
.page-home .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.page-home #divbtnSignup { margin: 0 !important; }
.page-home #signupBtn, .page-home #accessData { margin: 0 !important; }
.page-home .hero-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  color: var(--ui-muted);
  font-size: 14px;
}
.page-home .hero-proof .proof-avatars { display: flex; }
.page-home .hero-proof .proof-dot {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  margin-left: -7px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(145deg, var(--ui-brand-500), var(--ui-brand-800));
  border: 2px solid #0a0e16;
  border-radius: 50%;
}
.page-home .hero-proof .proof-dot:first-child { margin-left: 0; }
.page-home .hero-bento {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 470px;
  margin-left: auto;
}
.page-home .metric-card {
  position: relative;
  min-height: 166px;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-sm), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  transition: transform var(--ui-transition), border-color var(--ui-transition), background var(--ui-transition);
}
.page-home .metric-card:hover {
  transform: translateY(-7px);
  background: linear-gradient(145deg, rgba(153,69,208,.16), rgba(255,255,255,.025));
  border-color: var(--ui-brand-line);
}
.page-home .metric-card.featured {
  grid-column: 1 / -1;
  min-height: 142px;
  background: linear-gradient(135deg, rgba(124,39,185,.30), rgba(18,24,39,.88) 65%);
  border-color: rgba(183,107,229,.28);
}
.page-home .metric-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  margin-bottom: 21px;
  color: var(--ui-brand-300);
  font-size: 18px;
  background: rgba(153,69,208,.13);
  border: 1px solid rgba(183,107,229,.22);
  border-radius: 13px;
}
.page-home .metric-card.featured .metric-icon { margin: 0 16px 0 0; flex: 0 0 auto; }
.page-home .metric-value { display: block; margin-bottom: 5px; color: #fff; font-size: 31px; font-weight: 700; line-height: 1; }
.page-home .metric-label { color: var(--ui-muted); font-size: 13px; line-height: 1.45; }
.page-home .metric-live { display: flex; align-items: center; }
.page-home .metric-live .live-dot {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  margin-right: 10px;
  background: var(--ui-success);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(85,214,167,.10);
  animation: ui-pulse 2.2s infinite;
}
.page-home .section1Div { display: none !important; }
.page-home .sectionBg { height: 0 !important; min-height: 0; background: none !important; }

/* ========================================================================
   HOME — DATA WORKSPACE / TABS
   ======================================================================== */
.page-home .section2 {
  position: relative;
  padding: 92px max(24px, calc((100vw - 1440px)/2)) 72px !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(104,28,154,.11), transparent 20%),
    linear-gradient(180deg, #0a0e16, var(--ui-bg)) !important;
}
.page-home .dashboard-heading { max-width: 1440px; margin: 0 auto 34px; }
.page-home .dashboard-heading .ui-section-heading { margin-bottom: 0; }
.page-home .dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  color: #cbd2df;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-pill);
}
.page-home .dashboard-status::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--ui-success);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(85,214,167,.08);
}
.page-home #myTab.mainNav {
  position: sticky;
  top: 86px;
  z-index: 30;
  max-width: 1440px;
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 8px;
  margin: 0 auto !important;
  padding: 9px !important;
  overflow-x: auto;
  color: #fff;
  background: rgba(15,20,32,.90);
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-lg) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(24px) saturate(150%);
}
.page-home #myTab .nav-item { min-height: 0; margin: 0 !important; }
.page-home #myTab .nav-link {
  position: relative;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 12px !important;
  color: var(--ui-muted) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  box-shadow: none;
  transition: color var(--ui-fast), background var(--ui-fast), border-color var(--ui-fast), transform var(--ui-fast);
}
.page-home #myTab .nav-link::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-size: 15px;
  font-weight: 900;
  color: var(--ui-brand-400);
}
.page-home #myTab .nav-link[data-value="dental"]::before { content: "\f5c9"; }
.page-home #myTab .nav-link[data-value="score"]::before,
.page-home #myTab .nav-link[data-value="vetscore"]::before { content: "\f201"; }
.page-home #myTab .nav-link[data-value="dso"]::before { content: "\f1ad"; }
.page-home #myTab .nav-link[data-value="veterinary"]::before { content: "\f1b0"; }
.page-home #myTab .nav-link[data-value="chiropractic"]::before { content: "\f21e"; }
.page-home #myTab .nav-link[data-value="optometry"]::before { content: "\f06e"; }
.page-home #myTab .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.045) !important;
  border-color: var(--ui-line) !important;
  transform: translateY(-1px);
}
.page-home #myTab .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(153,69,208,.95), rgba(83,16,128,.98)) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px rgba(104,28,154,.38), inset 0 1px 0 rgba(255,255,255,.16);
}
.page-home #myTab .nav-link.active::before { color: #fff; }
.page-home #myTabContent1 {
  max-width: 1440px;
  margin: 20px auto 0 !important;
  padding: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-xl);
  box-shadow: var(--ui-shadow);
}
.page-home #myTabContent1 > .tab-pane { padding: 0; }
.page-home .section2Tab1,
.page-home .section2Tab2,
.page-home .section2Tab3 {
  color: #fff;
  background: var(--ui-panel) !important;
  border: 1px solid var(--ui-line) !important;
}
.page-home .section2Tab1 {
  padding: 22px 25px !important;
  border-radius: var(--ui-r) var(--ui-r) 0 0 !important;
  border-bottom: 0 !important;
  background: linear-gradient(110deg, rgba(124,39,185,.17), rgba(17,23,37,.90) 40%) !important;
}
.page-home .section2Tab1 h4 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.page-home .section2Tab1 p { color: var(--ui-muted); font-size: 14px; }
.page-home .section2Tab2 {
  padding: 16px 22px !important;
  border-bottom: 0 !important;
  background: rgba(14,19,30,.86) !important;
}
.page-home .section2Tab3 {
  padding: 22px !important;
  border-radius: 0 0 var(--ui-r) var(--ui-r) !important;
}
.page-home .section2 .switchView {
  min-height: 100px;
  border-right: 1px solid var(--ui-line) !important;
}
.page-home .switchImg {
  width: calc(100% - 12px);
  padding: 13px;
  color: #fff;
  background: var(--ui-brand-soft);
  border: 1px solid var(--ui-brand-line);
  border-radius: 15px;
  transition: transform var(--ui-fast), background var(--ui-fast);
}
.page-home .switchImg:hover { transform: translateY(-2px); background: rgba(124,39,185,.24); }
.page-home .switchImg img { filter: drop-shadow(0 4px 9px rgba(0,0,0,.34)); }
.page-home .switchImg p { margin: 8px 0 0; color: #e5d6ef; font-size: 13px; font-weight: 600; }
.page-home .divTopStates .table-responsive { gap: 0; overflow: visible; }
.page-home .divTopStates .topState {
  min-width: 150px;
  padding: 13px 18px;
  background: rgba(255,255,255,.025);
  border-radius: 14px;
}
.page-home .divTopStates label { font-size: 20px; }
.page-home .section2Tab3 > .row { margin-right: -8px; margin-left: -8px; }
.page-home .section2Tab3 > .row > [class*="col-"] { padding-right: 8px; padding-left: 8px; }
.page-home .section2Tab3 .row .col-lg-8 { border-right: 1px solid var(--ui-line) !important; }
.page-home .section2Tab3 iframe { border-radius: 15px; background: rgba(255,255,255,.025); }
.page-home .chart-box {
  height: 100%;
  padding: 14px 18px 20px;
  background: linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-sm);
}
.page-home .chart-box .card-header {
  padding: 14px 4px 16px !important;
  color: #fff;
  font-size: 19px;
  background: transparent !important;
  border-bottom: 1px solid var(--ui-line) !important;
}
.page-home .mainCarousel .carousel-item { height: 520px; }
.page-home .mainCarousel .carousel-item h5 { max-width: 72%; color: #f3edf7; font-size: 17px; font-weight: 600; }
.page-home .mainCarousel .carousel-indicators { top: 22px; }
.page-home .mainCarousel .carousel-indicators li {
  width: 8px !important; height: 8px !important;
  background: var(--ui-subtle) !important;
  border: 0;
  transition: width var(--ui-fast), background var(--ui-fast);
}
.page-home .mainCarousel .carousel-indicators li.active { width: 25px !important; background: var(--ui-brand-400) !important; }
.page-home .mainCarousel .carousel-control-next { top: 19px; }
.page-home .mainCarousel .carousel-control-next img { width: 38px; opacity: .82; transition: transform var(--ui-fast); }
.page-home .mainCarousel .carousel-control-next:hover img { transform: translateX(5px); }
.page-home .searchContainer { display: block; width: 100%; margin-bottom: 12px; }
.page-home .section2 .searchBox {
  width: 100%;
  height: 46px;
  padding: 10px 40px 10px 15px !important;
  color: #fff !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 13px !important;
  transition: border-color var(--ui-fast), box-shadow var(--ui-fast), background var(--ui-fast);
}
.page-home .section2 .searchBox:focus {
  background: rgba(124,39,185,.09) !important;
  border-color: var(--ui-brand-400) !important;
  box-shadow: 0 0 0 4px rgba(153,69,208,.12);
}
.page-home .stateList {
  padding: 6px !important;
  background: rgba(8,11,18,.34);
  border: 1px solid var(--ui-line);
  border-radius: 15px;
}
.page-home .stateList .option {
  margin: 2px 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
}
.page-home .stateList .option:hover,
.page-home .stateList .option:has(input[type="radio"]:checked) {
  color: #fff;
  background: var(--ui-brand-soft);
  border: 0;
}
.page-home .stateList .option:has(input[type="radio"]:checked) label::after {
  content: "✓";
  float: right;
  color: var(--ui-brand-300);
  font-weight: 700;
}
.page-home .lnkProd {
  padding: 7px 20px;
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 700;
  border-color: var(--ui-brand-line);
}
.page-home .lnkProd:hover, .page-home .optionSelected { color: #fff; background: var(--ui-brand-700); }
.page-home .downloadLink { min-height: 44px; margin: 17px auto 5px; padding: 9px 19px !important; font-size: 14px; cursor: pointer; }
.page-home .overlay {
  padding: 12px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(124,39,185,.11), rgba(255,255,255,.02));
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-lg);
}
.page-home .overlay img { border-radius: 18px; filter: saturate(.84); transition: transform var(--ui-transition), filter var(--ui-transition); }
.page-home .overlay:hover img { transform: scale(1.008); filter: saturate(1); }
.page-home .section2 table { color: #e8ebf1; }
.page-home .section2 th {
  color: var(--ui-brand-300);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page-home .section2 td, .page-home .section2 th { padding: 10px 8px !important; border-color: var(--ui-line); }

/* ---------- Home insight cards ---------- */
.page-home .section5 {
  padding: 88px max(24px, calc((100vw - 1440px)/2)) !important;
  background: linear-gradient(180deg, var(--ui-bg), #0c1019) !important;
}
.page-home .section5Title {
  padding: 0 0 28px !important;
  background: transparent !important;
  border: 0 !important;
}
.page-home .section5Title h3 { color: #fff; font-size: clamp(30px,4vw,45px); letter-spacing: -.035em; }
.page-home #accessArticles {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  color: var(--ui-brand-300);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--ui-brand-line);
  border-radius: var(--ui-pill);
  transition: background var(--ui-fast), color var(--ui-fast), transform var(--ui-fast);
}
.page-home #accessArticles:hover { color: #fff; background: var(--ui-brand-soft); transform: translateY(-2px); }
.page-home .section5Content { padding: 0 !important; border: 0 !important; }
.page-home .section5Content .row { margin: 0 -9px; }
.page-home .section5Content .col-lg-4 { display: flex; flex-direction: column; padding: 0 9px; }
.page-home .section5Content .col-lg-4 > *:not(img) { margin-right: 19px; margin-left: 19px; }
.page-home .section5Content .col-lg-4 {
  padding-bottom: 24px;
  overflow: hidden;
  background: var(--ui-panel);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-sm);
  transition: transform var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition);
}
.page-home .section5Content .col-lg-4:hover { transform: translateY(-8px); border-color: var(--ui-brand-line); box-shadow: var(--ui-shadow); }
.page-home .section5Content img { width: 100%; height: 230px; margin: 0 0 22px !important; object-fit: cover; border-radius: 0 !important; transition: transform .7s var(--ui-ease); }
.page-home .section5Content .col-lg-4:hover img { transform: scale(1.035); }
.page-home .section5Content h5 { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.35; }
.page-home .section5Content p { color: var(--ui-muted); font-size: 14px; line-height: 1.6; }

/* ========================================================================
   ARTICLES INDEX — EDITORIAL DISCOVERY
   ======================================================================== */
.page-articles .articles-hero {
  min-height: 530px;
  display: flex;
  align-items: center;
  padding: 142px 0 74px !important;
  background:
    radial-gradient(circle at 78% 30%, rgba(153,69,208,.28), transparent 25%),
    radial-gradient(circle at 18% 90%, rgba(75,200,255,.07), transparent 25%),
    linear-gradient(140deg, #080b12, #100a18) !important;
}
.page-articles .articles-hero::after {
  content: "";
  position: absolute;
  right: 8%; bottom: 44px;
  width: 290px; height: 290px;
  border: 1px solid var(--ui-brand-line);
  border-radius: 50%;
  box-shadow: inset 0 0 80px rgba(124,39,185,.08), 0 0 0 52px rgba(124,39,185,.025);
}
.page-articles .articles-hero h1 { margin: 0 0 20px; color: #fff; font-size: clamp(52px,7vw,86px); font-weight: 700; }
.page-articles .articles-hero .hero-lead { max-width: 690px; color: #d8ddea; font-size: 21px; line-height: 1.65; }
.page-articles .editorial-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.page-articles .editorial-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-pill);
  backdrop-filter: blur(12px);
}
.page-articles .editorial-stat i { color: var(--ui-brand-300); }
.page-articles .sectionBg { display: none; }
.page-articles .section2 {
  padding: 70px 0 96px !important;
  background: linear-gradient(180deg, #0a0e16, var(--ui-bg)) !important;
}
.page-articles .section2 > .container { max-width: 1240px; }
.page-articles .articles-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-articles .articles-toolbar h2 { margin: 8px 0 0; color: #fff; font-size: clamp(32px,4vw,48px); }
.page-articles .backArrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--ui-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.page-articles .backArrow i { color: var(--ui-brand-400); transition: transform var(--ui-fast); }
.page-articles .backArrow:hover { color: #fff; text-decoration: none; }
.page-articles .backArrow:hover i { transform: translateX(-4px); }
.page-articles #myTab.article-tabs {
  position: sticky;
  top: 86px;
  z-index: 20;
  display: flex;
  justify-content: flex-start !important;
  gap: 6px;
  margin: 0 0 36px !important;
  padding: 7px !important;
  overflow-x: auto;
  background: rgba(15,20,32,.91);
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r);
  box-shadow: var(--ui-shadow-sm);
  backdrop-filter: blur(22px);
}
.page-articles #myTab .nav-item { margin: 0 !important; }
.page-articles #myTab .nav-link {
  padding: 11px 19px !important;
  color: var(--ui-muted) !important;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
}
.page-articles #myTab .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.045) !important; }
.page-articles #myTab .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ui-brand-500), var(--ui-brand-800)) !important;
  box-shadow: 0 10px 25px rgba(104,28,154,.34);
}
.page-articles #myTabContent1 > .tab-pane.active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 0 !important;
}
.page-articles .articleBlock {
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 0 24px !important;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(155deg, rgba(24,31,48,.92), rgba(13,17,27,.94));
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-lg) !important;
  box-shadow: var(--ui-shadow-sm);
  transition: transform var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition);
}
.page-articles .articleBlock:hover { transform: translateY(-8px); border-color: var(--ui-brand-line) !important; box-shadow: var(--ui-shadow); }
.page-articles .articleBlock > .col-md-3,
.page-articles .articleBlock > .col-md-9 { width: 100%; max-width: none; flex: none; padding: 0; }
.page-articles .articleBlock > .col-md-3 { height: 260px; overflow: hidden; border-radius: 0; }
.page-articles .articleBlock .imgResponsive {
  width: 100%; height: 100%;
  margin: 0 !important;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform .75s var(--ui-ease), filter .75s var(--ui-ease);
}
.page-articles .articleBlock:hover .imgResponsive { transform: scale(1.045); filter: saturate(1.08); }
.page-articles .articleBlock > .col-md-9 { display: flex; flex: 1; flex-direction: column; padding: 24px 26px 0; }
.page-articles .articleBlock > .col-md-9 > p:first-child {
  order: -2;
  margin-bottom: 14px;
  color: var(--ui-brand-300);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.page-articles .articleBlock h4 { margin-bottom: 13px; color: #fff; font-size: 23px; font-weight: 700; line-height: 1.28; letter-spacing: -.025em; }
.page-articles .articleBlock .colorGrey { color: var(--ui-muted) !important; font-size: 15px; line-height: 1.7; }
.page-articles .articleBlock .section5Topics { margin-top: auto; padding-top: 12px; }
.page-articles .section5Topics span, .page-home .section5Topics span {
  display: inline-flex;
  margin: 3px 5px 3px 0;
  padding: 5px 12px !important;
  color: #ddc5ed;
  font-size: 12px;
  font-weight: 700;
  background: var(--ui-brand-softer);
  border: 1px solid var(--ui-brand-line) !important;
  border-radius: var(--ui-pill) !important;
}
.page-articles .btnAction { margin: 18px 0 0 !important; }
.page-articles .btnAction a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-gold-300) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
}
.page-articles .btnAction a img { filter: brightness(0) invert(1); opacity: .74; transition: transform var(--ui-fast); }
.page-articles .btnAction a:hover img { transform: translate(4px,-4px); }
.page-articles #all .articleBlock:first-child { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1.18fr 1fr; padding-bottom: 0 !important; }
.page-articles #all .articleBlock:first-child > .col-md-3 { height: 100%; min-height: 390px; }
.page-articles #all .articleBlock:first-child > .col-md-9 { padding: 40px; justify-content: center; }
.page-articles #all .articleBlock:first-child h4 { font-size: clamp(29px,3vw,39px); }
.page-articles #chiropractic .articleBlock,
.page-articles #optometry .articleBlock { grid-column: 1 / -1; min-height: 240px; align-items: center; justify-content: center; padding: 50px !important; text-align: center; border-style: dashed !important; }

/* ========================================================================
   ARTICLE DETAIL — IMMERSIVE EDITORIAL READING
   ======================================================================== */
.page-article-detail .article-masthead {
  min-height: 360px;
  display: flex;
  align-items: center;
  padding: 136px 0 62px !important;
  background:
    radial-gradient(circle at 84% 10%, rgba(153,69,208,.24), transparent 28%),
    linear-gradient(140deg, #080b12, #100b18) !important;
}
.page-article-detail .article-masthead h1 { margin: 0 0 12px; color: #fff; font-size: clamp(40px,5vw,62px); }
.page-article-detail .article-masthead h4 { color: var(--ui-brand-300); font-size: 15px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.page-article-detail .article-masthead p { max-width: 640px; color: var(--ui-muted) !important; font-size: 17px; }
.page-article-detail .section2 {
  position: sticky;
  top: 74px;
  z-index: 30;
  padding: 10px 0 !important;
  background: rgba(8,11,18,.91) !important;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  backdrop-filter: blur(22px);
}
.page-article-detail .section2 > .container { max-width: 1100px; display: flex; align-items: center; gap: 22px; }
.page-article-detail .section2 > .container > p { flex: 0 0 auto; margin: 0 !important; }
.page-article-detail .section2 .backArrow { color: var(--ui-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.page-article-detail .section2 ul.nav {
  flex-wrap: nowrap;
  justify-content: flex-start !important;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.page-article-detail .section2 .nav-item { min-height: 0; margin: 0 !important; }
.page-article-detail .section2 .nav-link {
  padding: 8px 13px !important;
  color: var(--ui-subtle) !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
}
.page-article-detail .section2 .nav-link.active { color: #fff !important; background: var(--ui-brand-soft) !important; box-shadow: inset 0 0 0 1px var(--ui-brand-line); }
.page-article-detail .articleContent {
  padding: 86px 20px 106px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(104,28,154,.07), transparent 22%),
    var(--ui-bg) !important;
}
.page-article-detail .articleContent > .container { max-width: 960px; padding: 0; }
.page-article-detail .articleContent > .container::before {
  content: "Industry intelligence  /  Sikka Data Science";
  display: inline-flex;
  margin-bottom: 20px;
  color: var(--ui-brand-300);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.page-article-detail .articleContent h1 {
  max-width: 900px;
  margin: 0 0 30px !important;
  color: #fff;
  font-size: clamp(42px,6vw,70px) !important;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.045em;
  background: linear-gradient(115deg, #fff, #d7bce9 75%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-article-detail .articleContent > .container > .mb-4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  min-height: 74px;
  margin: 0 0 48px !important;
  padding: 14px 18px;
  background: linear-gradient(100deg, var(--ui-brand-soft), rgba(255,255,255,.025));
  border: 1px solid var(--ui-brand-line);
  border-radius: 16px;
}
/* Fallback avatar only when the page provides no medallion image. */
.page-article-detail .articleContent > .container > .mb-4:not(:has(img))::before {
  content: "S";
  width: 44px; height: 44px;
  display: grid; place-items: center;
  flex: 0 0 44px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(145deg, var(--ui-brand-500), var(--ui-brand-800));
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(104,28,154,.34);
}
/* Use the page's own Sikka medallion as the single avatar. */
.page-article-detail .articleContent > .container > .mb-4 img {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  margin: 0 !important;
  padding: 6px;
  object-fit: contain;
  background: linear-gradient(145deg, var(--ui-brand-500), var(--ui-brand-800));
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(104,28,154,.34);
  float: none !important;
}
/* If a page duplicates the medallion image, only show the first one. */
.page-article-detail .articleContent > .container > .mb-4 img ~ img {
  display: none !important;
}
.page-article-detail .articleContent > .container > .mb-4 p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.page-article-detail .articleContent > .container > .mb-4 p .colorGrey {
  font-weight: 500;
}
.page-article-detail .articleContent p,
.page-article-detail .articleContent li {
  color: #cdd3df;
  font-size: 18px;
  line-height: 1.9;
}
.page-article-detail .articleContent > .container > p:not(.mb-4) { max-width: 790px; margin: 0 auto 26px; }
.page-article-detail .articleContent h2,
.page-article-detail .articleContent h3,
.page-article-detail .articleContent h4 { max-width: 790px; margin: 48px auto 20px; color: #fff; font-weight: 700; letter-spacing: -.025em; }
.page-article-detail .articleContent ul,
.page-article-detail .articleContent ol { max-width: 790px; margin: 20px auto 30px; padding-left: 25px; }
.page-article-detail .articleContent a {
  color: var(--ui-cyan) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(75,200,255,.32);
}
.page-article-detail .articleContent a:hover { color: #9ae4ff !important; border-color: #9ae4ff; }
.page-article-detail .articleContent iframe,
.page-article-detail .articleContent > .container > img,
.page-article-detail .articleContent .imgResponsive,
.page-article-detail .articleContent .img-responsive {
  max-width: 100%;
  margin: 42px auto !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-lg) !important;
  box-shadow: var(--ui-shadow);
  background: var(--ui-panel);
}
.page-article-detail .articleContent iframe { display: block; padding: 8px; }
.page-article-detail .articleContent table { width: 100%; margin: 35px auto; color: #e6e9ef; background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 16px; }
.page-article-detail .articleContent td, .page-article-detail .articleContent th { padding: 12px !important; border-color: var(--ui-line); }
.page-article-detail .articleContent blockquote {
  max-width: 840px;
  margin: 45px auto;
  padding: 28px 30px;
  color: #e9dcf2;
  background: linear-gradient(120deg, var(--ui-brand-soft), rgba(255,255,255,.025));
  border-left: 3px solid var(--ui-brand-400);
  border-radius: 0 var(--ui-r) var(--ui-r) 0;
}

/* ========================================================================
   REGISTER — PREMIUM ONBOARDING
   ======================================================================== */
.page-register { background: var(--ui-bg) !important; }
.page-register main { padding-top: 74px; }
.page-register .loginSection2 { min-height: calc(100vh - 74px); background: #0b0f18; }
.page-register .loginSection2 > div, .page-register .loginSection2 > div > .row { min-height: calc(100vh - 74px); }
.page-register .loginSection2 .row { margin: 0; }
.page-register .divLogin1,
.page-register .divLogin2 { min-height: calc(100vh - 74px); }
.page-register .divLogin1 {
  position: relative;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(42px,7vw,88px) !important;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 25% 25%, rgba(183,107,229,.28), transparent 25%),
    linear-gradient(145deg, rgba(38,0,61,.62), rgba(8,11,18,.66)),
    url(../images/us-bg.png) center/cover no-repeat !important;
  border-radius: 0 !important;
}
.page-register .divLogin1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to top, black, transparent 90%);
  mask-image: linear-gradient(to top, black, transparent 90%);
}
.page-register .register-brand-panel { position: relative; z-index: 2; max-width: 580px; }
.page-register .register-brand-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 34px; color: #fff; font-weight: 700; }
.page-register .register-brand-mark img { width: 92px; filter: drop-shadow(0 7px 18px rgba(104,28,154,.40)); }
.page-register .register-brand-panel h1 { margin-bottom: 22px; font-size: clamp(43px,5.4vw,72px); font-weight: 700; }
.page-register .register-brand-panel > p { max-width: 540px; color: #d1d6e0; font-size: 18px; line-height: 1.7; }
.page-register .register-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 32px; }
.page-register .register-benefit { padding: 15px; background: rgba(255,255,255,.055); border: 1px solid var(--ui-line); border-radius: 15px; backdrop-filter: blur(14px); }
.page-register .register-benefit i { margin-bottom: 12px; color: var(--ui-gold-300); font-size: 18px; }
.page-register .register-benefit strong { display: block; color: #fff; font-size: 14px; }
.page-register .register-benefit span { display: block; margin-top: 4px; color: var(--ui-muted); font-size: 11px; line-height: 1.4; }
.page-register .divLogin2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 48px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(124,39,185,.15), transparent 25%),
    #0c1019 !important;
  border-radius: 0 !important;
}
.page-register #divLoginContent {
  width: 100%;
  max-width: 510px;
  margin: 0;
  padding: clamp(28px,4vw,44px);
  color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-xl);
  box-shadow: var(--ui-shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.page-register .register-form-head { margin-bottom: 30px; }
.page-register .register-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 7px 11px;
  color: var(--ui-brand-300);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: var(--ui-brand-softer);
  border: 1px solid var(--ui-brand-line);
  border-radius: var(--ui-pill);
}
.page-register #divLoginContent h2 { margin: 0 0 10px; color: #fff; font-size: 36px; font-weight: 700; }
.page-register .register-form-head p { margin: 0; color: var(--ui-muted); font-size: 15px; line-height: 1.6; }
.page-register #divLoginContent .form-group { margin-bottom: 18px; }
.page-register #divLoginContent label,
.page-register #divLoginContent h6 { display: block; margin-bottom: 8px; color: #dfe3ec; font-size: 13px; font-weight: 700; }
.page-register #divLoginContent .input-shell { position: relative; }
.page-register #divLoginContent .input-shell > i { position: absolute; top: 50%; left: 16px; color: var(--ui-subtle); transform: translateY(-50%); transition: color var(--ui-fast); }
.page-register #divLoginContent .form-control {
  height: 52px;
  padding: 12px 16px 12px 45px;
  color: #fff;
  font-size: 15px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  box-shadow: none;
  transition: background var(--ui-fast), border-color var(--ui-fast), box-shadow var(--ui-fast);
}
.page-register #divLoginContent .form-control::placeholder { color: #687286; font-size: 14px; }
.page-register #divLoginContent .form-control:focus { background: rgba(124,39,185,.08); border-color: var(--ui-brand-400); box-shadow: 0 0 0 4px rgba(153,69,208,.12); }
.page-register #divLoginContent .input-shell:focus-within > i { color: var(--ui-brand-300); }
.page-register #btnHomeLogin { width: 100%; min-height: 52px; margin: 3px 0 0 !important; }
.page-register .register-form-foot { margin-top: 18px; color: var(--ui-subtle); font-size: 12px; line-height: 1.6; text-align: center; }

/* ---------- Support CTA ---------- */
.page-home .section7,
.page-articles .section7,
.page-article-detail .section7 {
  padding: 20px max(24px, calc((100vw - 1240px)/2)) 92px !important;
  background: #0c1019 !important;
}
.page-home .section7Div,
.page-articles .section7 .container,
.page-article-detail .section7 .container {
  position: relative;
  max-width: 1240px;
  margin: auto;
  padding: 60px clamp(24px,5vw,70px) !important;
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(circle at 90% 15%, rgba(183,107,229,.22), transparent 27%),
    linear-gradient(125deg, rgba(124,39,185,.22), rgba(18,24,39,.92) 55%);
  border: 1px solid var(--ui-brand-line) !important;
  border-radius: var(--ui-r-xl) !important;
  box-shadow: var(--ui-shadow);
}
.page-home .section7Div::after,
.page-articles .section7 .container::after,
.page-article-detail .section7 .container::after {
  content: "?";
  position: absolute;
  right: clamp(25px,8vw,100px); top: 50%;
  color: rgba(255,255,255,.055);
  font-size: 190px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
}
.page-home .section7 h3,
.page-articles .section7 h3,
.page-article-detail .section7 h3 { position: relative; z-index: 2; max-width: 700px; margin: 0; color: #fff; font-size: clamp(27px,3.4vw,42px); letter-spacing: -.03em; line-height: normal; }
.page-home .section7 p,
.page-articles .section7 p,
.page-article-detail .section7 p { position: relative; z-index: 2; }

/* ---------- Modals ---------- */
.page-home .modal-content {
  overflow: hidden;
  color: #fff;
  background: rgba(15,20,32,.98) !important;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow);
}
.page-home .modal-dialog { margin-top: 8vh; }
.page-home .modal .divLogin1 { min-height: 440px; background: linear-gradient(rgba(38,0,61,.44),rgba(8,11,18,.38)), url(../images/us-bg.png) center/cover; }
.page-home .modal .divLogin2 { padding: 36px !important; }
.page-home .modal input,
.page-home .modal input:focus { min-height: 48px; padding: 11px 14px; background: rgba(255,255,255,.045); border: 1px solid var(--ui-line); border-radius: 12px; }
.page-home .modal input:focus { border-color: var(--ui-brand-400); box-shadow: 0 0 0 4px rgba(153,69,208,.12); }
.page-home .modal #btnHomeLogin { width: 100%; margin: 14px 0 !important; }
.page-home .modal .close { color: #fff; opacity: .75; text-shadow: none; }

/* ---------- Back to top ---------- */
.back-to-top { right: 22px !important; bottom: 22px !important; }
.back-to-top i {
  width: 48px !important; height: 48px !important;
  color: #fff !important;
  background: linear-gradient(145deg, var(--ui-brand-500), var(--ui-brand-800)) !important;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--ui-shadow-brand);
  transition: transform var(--ui-transition), box-shadow var(--ui-transition) !important;
}
.back-to-top:hover i { transform: translateY(-5px); box-shadow: 0 20px 42px rgba(104,28,154,.52); }

/* ---------- Motion ---------- */
@keyframes ui-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes ui-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes ui-pulse { 0%,100% { box-shadow: 0 0 0 6px rgba(85,214,167,.09); } 50% { box-shadow: 0 0 0 10px rgba(85,214,167,.015); } }
@media (prefers-reduced-motion: no-preference) {
  .page-home .hero-copy, .page-articles .articles-hero .container, .page-article-detail .article-masthead .container { animation: ui-fade-up .85s var(--ui-ease) both; }
  .page-home .hero-bento { animation: ui-scale-in .9s .12s var(--ui-ease) both; }
  .page-home .metric-card:nth-child(2) { animation-delay: .18s; }
  .page-home .metric-card:nth-child(3) { animation-delay: .24s; }
  .page-articles .tab-pane.active .articleBlock { animation: ui-fade-up .62s var(--ui-ease) both; }
  .page-articles .tab-pane.active .articleBlock:nth-child(2) { animation-delay: .06s; }
  .page-articles .tab-pane.active .articleBlock:nth-child(3) { animation-delay: .12s; }
  .page-articles .tab-pane.active .articleBlock:nth-child(4) { animation-delay: .18s; }
  .page-articles .tab-pane.active .articleBlock:nth-child(5) { animation-delay: .24s; }
  .page-register .register-brand-panel { animation: ui-fade-up .85s var(--ui-ease) both; }
  .page-register #divLoginContent { animation: ui-scale-in .85s .1s var(--ui-ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .page-home .dashboard-hero { min-height: auto; }
  .page-home .hero-bento { margin-top: 40px; margin-left: 0; }
  .page-home #myTab.mainNav { grid-template-columns: repeat(7, minmax(148px,1fr)); }
  .page-home .section2Tab3 .row .col-lg-8 { border-right: 0 !important; }
}
@media (max-width: 991px) {
  header .navbar { min-height: 66px; }
  .ui-section-heading { display: block; }
  .ui-section-heading > p { margin-top: 14px; }
  .page-home .dashboard-hero { padding-top: 120px !important; }
  .page-home .hero-copy h1 { font-size: clamp(46px,9vw,72px); }
  .page-home .dashboard-heading .ui-section-heading { display: block; }
  .page-home .dashboard-status { margin-top: 18px; }
  .page-home #myTab.mainNav, .page-articles #myTab.article-tabs { top: 74px; }
  .page-home .section2 .switchView { margin-bottom: 16px; border-right: 0 !important; }
  .page-home .mainCarousel .carousel-item { height: 500px; }
  .page-home .section5Content .col-lg-4 { margin-bottom: 18px; }
  .page-articles #all .articleBlock:first-child { grid-template-columns: 1fr; }
  .page-articles #all .articleBlock:first-child > .col-md-3 { min-height: 300px; }
  .page-article-detail .section2 { top: 66px; }
  .page-article-detail .section2 > .container { display: block; }
  .page-article-detail .section2 > .container > p { margin-bottom: 7px !important; }
  .page-register .divLogin1, .page-register .divLogin2 { min-height: auto; }
  .page-register .divLogin1 { padding: 125px 45px 55px !important; }
  .page-register .divLogin2 { padding: 55px 26px !important; }
}
@media (max-width: 767px) {
  .page-home .dashboard-hero { padding: 108px 0 60px !important; }
  .page-home .hero-copy h1 { font-size: 46px; }
  .page-home .hero-bento { grid-template-columns: 1fr; }
  .page-home .metric-card.featured { grid-column: auto; }
  .page-home .section2 { padding: 68px 14px 55px !important; }
  .page-home #myTabContent1 { padding: 9px; border-radius: 25px; }
  .page-home .section2Tab1, .page-home .section2Tab2, .page-home .section2Tab3 { padding: 17px 14px !important; }
  .page-home .mainCarousel .carousel-item { height: 470px; }
  .page-home .section5 { padding: 65px 16px !important; }
  .page-home .section5Title .text-right { text-align: left !important; }
  .page-home .section5Content .col-lg-4 { margin: 0 0 18px !important; }
  .page-articles .articles-hero { min-height: 460px; padding-top: 116px !important; }
  .page-articles .articles-hero::after { display: none; }
  .page-articles .section2 { padding: 54px 12px 75px !important; }
  .page-articles .articles-toolbar { display: block; }
  .page-articles .articles-toolbar .backArrow { margin-bottom: 18px !important; }
  .page-articles #myTabContent1 > .tab-pane.active { grid-template-columns: 1fr; }
  .page-articles #all .articleBlock:first-child { grid-column: auto; }
  .page-articles #all .articleBlock:first-child > .col-md-9 { padding: 25px; }
  .page-articles #all .articleBlock:first-child h4 { font-size: 26px; }
  .page-articles .articleBlock > .col-md-3 { height: 230px; }
  .page-article-detail .article-masthead { min-height: 320px; padding-top: 112px !important; }
  .page-article-detail .articleContent { padding: 62px 18px 78px !important; }
  .page-article-detail .articleContent h1 { font-size: 43px !important; }
  .page-article-detail .articleContent p, .page-article-detail .articleContent li { font-size: 17px; line-height: 1.82; }
  .page-article-detail .articleContent iframe { height: 430px; }
  .page-register .register-benefits { grid-template-columns: 1fr; }
  .page-register .divLogin1 { padding: 110px 25px 45px !important; }
  .page-register .divLogin2 { padding: 35px 15px 55px !important; }
  .page-register #divLoginContent { padding: 26px 20px; border-radius: 25px; }
  .page-home .section7, .page-articles .section7, .page-article-detail .section7 { padding: 12px 16px 70px !important; }
  .page-home .section7Div, .page-articles .section7 .container, .page-article-detail .section7 .container { padding: 42px 24px !important; }
  .page-home .section7Div::after, .page-articles .section7 .container::after, .page-article-detail .section7 .container::after { display: none; }
}
@media (max-width: 480px) {
  .page-home .hero-actions { align-items: stretch; flex-direction: column; }
  .page-home #divbtnSignup, .page-home #signupBtn, .page-home #accessData { width: 100%; }
  .page-home .hero-proof { align-items: flex-start; }
  .page-home .mainCarousel .carousel-item { height: 445px; }
  .page-home .mainCarousel .carousel-item h5 { max-width: 100%; }
  .page-articles .editorial-stats { align-items: stretch; flex-direction: column; }
  .page-articles .articleBlock > .col-md-9 { padding: 21px 20px 0; }
  .page-article-detail .articleContent h1 { font-size: 37px !important; }
  .page-article-detail .articleContent > .container > .mb-4 { align-items: flex-start; }
}


/* ========================================================================
   PREMIUM DATA VISUALIZATION LAYER
   Presentation only: preserves source data, calculated view windows, axes,
   baselines, stacking, series order, and the existing purple/gold mapping.
   ======================================================================== */

/* Shared live chart mounts */
.page-home :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart,
  #divScoreChart,
  #divVETScoreChart
) {
  position: relative;
  width: 100% !important;
  min-height: 418px;
  margin-top: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 8%, rgba(153, 69, 208, .09), transparent 28%),
    linear-gradient(155deg, rgba(18, 24, 39, .98), rgba(10, 14, 23, .98));
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 16px 38px rgba(0, 0, 0, .22);
  isolation: isolate;
}

.page-home :is(#divScoreChart, #divVETScoreChart) {
  min-height: 468px;
  margin-top: 6px;
}

/* Keep the chart renderer flush and prevent its inline canvas from escaping. */
.page-home :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart,
  #divScoreChart,
  #divVETScoreChart
) > div {
  max-width: 100%;
  overflow: hidden;
  border-radius: inherit;
}

/* Google Charts SVG presentation. These selectors never alter geometry. */
.page-home :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart,
  #divScoreChart,
  #divVETScoreChart
) svg {
  display: block;
  max-width: 100%;
  border-radius: 17px;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

/* Renderer background only; series and plot values remain untouched. */
.page-home :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart,
  #divScoreChart,
  #divVETScoreChart
) svg > rect:first-child {
  fill: #101624 !important;
}

/* Clear, quiet axis and legend typography. */
.page-home :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart,
  #divScoreChart,
  #divVETScoreChart
) text {
  fill: #b8c0cf !important;
  font-family: "HelveticaNeue", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 500;
  letter-spacing: .01em;
}

/* Existing configured gridline color, softened without moving any line. */
.page-home :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart
) :is(rect[fill="#dcdcdc"], rect[fill="#DCDCDC"], path[stroke="#dcdcdc"], path[stroke="#DCDCDC"]) {
  fill: #293244 !important;
  stroke: #293244 !important;
  opacity: .72;
}

/* Improve edge quality only. Existing series colors and widths are retained. */
.page-home :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart,
  #divScoreChart,
  #divVETScoreChart
) :is(
  path[stroke="#AA54E2"], path[stroke="#aa54e2"],
  path[stroke="#f7b500"], path[stroke="#F7B500"]
) {
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .26));
}

.page-home :is(
  #patientvisit_chart,
  #divScoreChart,
  #divVETScoreChart
) :is(
  rect[fill="#AA54E2"], rect[fill="#aa54e2"],
  rect[fill="#f7b500"], rect[fill="#F7B500"]
) {
  rx: 3px;
  ry: 3px;
  shape-rendering: geometricPrecision;
}

/* Google tooltip styling is ready if a chart enables tooltips later.
   Current tooltip trigger:none remains unchanged. */
.page-home .google-visualization-tooltip {
  padding: 10px 12px !important;
  color: #f7f4fb !important;
  background: rgba(17, 23, 37, .98) !important;
  border: 1px solid rgba(183, 107, 229, .32) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(16px);
}
.page-home .google-visualization-tooltip * {
  color: inherit !important;
  font-family: "HelveticaNeue", "Helvetica Neue", Arial, sans-serif !important;
}

/* Chart title bar and data-view affordance */
.page-home .chart-box {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(153, 69, 208, .10), transparent 24%),
    linear-gradient(155deg, rgba(20, 27, 42, .96), rgba(11, 15, 24, .97));
  border-color: rgba(255, 255, 255, .10);
}
.page-home .chart-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 107, 229, .62), transparent);
  pointer-events: none;
}
.page-home .chart-box .card-header {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
}
.page-home .chart-box .card-header::before {
  content: "\f201";
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  color: var(--ui-brand-300);
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-size: 14px;
  font-weight: 900;
  background: rgba(153, 69, 208, .12);
  border: 1px solid rgba(183, 107, 229, .22);
  border-radius: 11px;
}
.page-home .mainCarousel .carousel-item h5 {
  position: relative;
  z-index: 3;
  min-height: 42px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 13px 0 10px 2px !important;
  color: #edf0f5;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.005em;
}
.page-home .mainCarousel .carousel-item h5::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-right: 9px;
  background: var(--ui-gold-500);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(247, 181, 0, .08);
}

/* Premium but honest carousel navigation: no chart order is changed. */
.page-home .mainCarousel .carousel-indicators {
  width: auto;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: rgba(8, 11, 18, .50);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.page-home .mainCarousel .carousel-control-next {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  background: linear-gradient(145deg, rgba(153, 69, 208, .25), rgba(255, 255, 255, .04));
  border: 1px solid rgba(183, 107, 229, .27);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
  backdrop-filter: blur(10px);
  transition: transform var(--ui-fast), border-color var(--ui-fast), background var(--ui-fast);
}
.page-home .mainCarousel .carousel-control-next:hover {
  transform: translateX(3px);
  background: rgba(153, 69, 208, .28);
  border-color: rgba(183, 107, 229, .52);
}
.page-home .mainCarousel .carousel-control-next img {
  width: 26px;
  margin: 0;
  filter: brightness(0) invert(1);
}

/* Procedure trends are data tables, not charts: retain every row and value. */
.page-home :is(#divCatProductionRebound, #divVETCatProductionRebound) {
  width: 100%;
  max-width: none !important;
  min-height: 405px;
  margin-top: 14px;
  padding: 14px;
  overflow: hidden;
  color: #eef1f6 !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(153, 69, 208, .09), transparent 28%),
    linear-gradient(155deg, rgba(18, 24, 39, .98), rgba(10, 14, 23, .98)) !important;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.page-home :is(#divCatProductionRebound, #divVETCatProductionRebound) table {
  width: 100%;
  height: 370px;
  margin: 0;
  padding-right: 6px;
  border-collapse: separate;
  border-spacing: 0;
}
.page-home :is(#divCatProductionRebound, #divVETCatProductionRebound) tr {
  transition: background var(--ui-fast);
}
.page-home :is(#divCatProductionRebound, #divVETCatProductionRebound) tr:hover {
  background: rgba(153, 69, 208, .08);
}
.page-home :is(#divCatProductionRebound, #divVETCatProductionRebound) td,
.page-home :is(#divCatProductionRebound, #divVETCatProductionRebound) th {
  padding: 10px 9px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .065) !important;
}

/* Map and score-map shells; iframe internals and geography values are untouched. */
.page-home :is(
  #divProdState,
  #divProdCounty,
  #DentalScoreMap1,
  #VETScoreMap1,
  #DSOproductionMap1,
  #VETproductionMap1,
  #ChiroproductionMap1,
  #OptometryMap1
) {
  position: relative;
  padding: 10px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 8%, rgba(153, 69, 208, .08), transparent 30%),
    linear-gradient(155deg, rgba(18, 24, 39, .97), rgba(10, 14, 23, .98));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255,255,255,.035);
}
.page-home :is(
  #divProdState,
  #divProdCounty,
  #DentalScoreMap1,
  #VETScoreMap1,
  #DSOproductionMap1,
  #VETproductionMap1,
  #ChiroproductionMap1,
  #OptometryMap1
) iframe {
  display: block;
  width: 100% !important;
  min-width: 100% !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #101624;
}
.page-home :is(
  #divDentalScoreMap,
  #divVETScoreMap,
  #divDSOProductionMap,
  #divVETProductionMap,
  #divChiroProductionMap,
  #divOptometryProductionMap
) {
  margin: 0 !important;
}

/* Integrity note near the workspace heading. */
.page-home .chart-integrity-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 720px;
  margin: 17px 0 0;
  color: #8f99aa;
  font-size: 12px;
  line-height: 1.55;
}
.page-home .chart-integrity-note i {
  margin-top: 2px;
  color: var(--ui-brand-300);
}

/* Chart loading surfaces remain neutral and do not imply values. */
.page-home :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart,
  #divScoreChart,
  #divVETScoreChart
):empty::before {
  content: "Preparing visualization";
  position: absolute;
  top: 50%;
  left: 50%;
  color: #737e91;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  transform: translate(-50%, -50%);
}
.page-home :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart,
  #divScoreChart,
  #divVETScoreChart
):empty::after {
  content: "";
  position: absolute;
  top: calc(50% - 38px);
  left: calc(50% - 14px);
  width: 28px;
  height: 28px;
  border: 2px solid rgba(183, 107, 229, .16);
  border-top-color: var(--ui-brand-400);
  border-radius: 50%;
  animation: ui-chart-load .85s linear infinite;
}
@keyframes ui-chart-load { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  .page-home :is(
    #curve_chart,
    #patientvisit_chart,
    #compareprod_chart,
    #collection_chart,
    #curve_chart_VET,
    #vetcompareprod_chart,
    #vetCollection_chart,
    #curve_chart_dso,
    #DSOCollection_chart,
    #curve_chart_chiro,
    #chiroCollection_chart,
    #curve_chart_opto,
    #optometryCollection_chart
  ) {
    min-height: 405px;
    border-radius: 14px;
  }
  .page-home :is(#divScoreChart, #divVETScoreChart) {
    min-width: 680px;
  }
  .page-home #score .section2Tab3 > .row:last-child,
  .page-home #vetscore .section2Tab3 > .row:last-child {
    overflow-x: auto;
    scrollbar-gutter: stable;
  }
  .page-home .chart-box { padding-right: 10px; padding-left: 10px; }
  .page-home .chart-box .card-header { font-size: 16px !important; }
  .page-home .mainCarousel .carousel-item h5 { max-width: 67%; font-size: 13px; }
  .page-home .mainCarousel .carousel-indicators { padding: 0 8px; }
  .page-home :is(
    #divProdState,
    #divProdCounty,
    #DentalScoreMap1,
    #VETScoreMap1,
    #DSOproductionMap1,
    #VETproductionMap1,
    #ChiroproductionMap1,
    #OptometryMap1
  ) { padding: 6px !important; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home :is(
    #curve_chart,
    #patientvisit_chart,
    #compareprod_chart,
    #collection_chart,
    #curve_chart_VET,
    #vetcompareprod_chart,
    #vetCollection_chart,
    #curve_chart_dso,
    #DSOCollection_chart,
    #curve_chart_chiro,
    #chiroCollection_chart,
    #curve_chart_opto,
    #optometryCollection_chart,
    #divScoreChart,
    #divVETScoreChart
  ):empty::after { animation: none; }
}


/* ========================================================================
   CHART WORKSPACE V2 — UNIVERSAL TOOLBAR + CAROUSEL COLLISION FIX
   Final high-specificity overrides for legacy carousel positioning.
   ======================================================================== */

/* Establish one positioning context for every live industry carousel. */
.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) {
  position: relative;
  width: 100%;
  padding-top: 2px;
}

/* The slide title owns the left side of the toolbar. */
.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) .carousel-item > h5 {
  width: auto;
  max-width: calc(100% - 220px) !important;
  min-height: 48px;
  margin: 0 0 8px !important;
  padding: 9px 0 9px 3px !important;
  overflow: hidden;
  color: #f0f2f7;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Indicator capsule owns the top-right center position. Reset every legacy
   Bootstrap and project offset explicitly to prevent title overlap. */
.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) > .carousel-indicators {
  position: absolute !important;
  top: 7px !important;
  right: 58px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 20;
  width: auto !important;
  min-width: 70px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 !important;
  padding: 0 13px !important;
  list-style: none;
  background: rgba(8, 11, 18, .76);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 22px rgba(0, 0, 0, .24);
  backdrop-filter: blur(14px);
}

.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) > .carousel-indicators li {
  width: 7px !important;
  min-width: 7px;
  height: 7px !important;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
  background: #596276 !important;
  border: 0 !important;
  border-radius: 999px !important;
  opacity: .8;
  transition: width var(--ui-fast), background var(--ui-fast), opacity var(--ui-fast), box-shadow var(--ui-fast);
}

.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) > .carousel-indicators li:hover {
  background: #9ca6b8 !important;
  opacity: 1;
}

.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) > .carousel-indicators li.active {
  width: 23px !important;
  background: linear-gradient(90deg, var(--ui-brand-400), var(--ui-brand-500)) !important;
  box-shadow: 0 0 12px rgba(183, 107, 229, .38);
  opacity: 1;
}

/* Reliable next control: reset domain-specific left offsets and replace the
   image with a font icon so it cannot disappear due to image sizing. */
.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) > .carousel-control-next {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 21;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff;
  background: linear-gradient(145deg, rgba(153, 69, 208, .34), rgba(83, 16, 128, .40)) !important;
  border: 1px solid rgba(183, 107, 229, .40) !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 1 !important;
  backdrop-filter: blur(12px);
  transition: transform var(--ui-fast), background var(--ui-fast), border-color var(--ui-fast), box-shadow var(--ui-fast);
}

.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) > .carousel-control-next::before {
  content: "\f061";
  color: #fff;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) > .carousel-control-next img {
  display: none !important;
}

.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) > .carousel-control-next:hover,
.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) > .carousel-control-next:focus-visible {
  color: #fff;
  background: linear-gradient(145deg, var(--ui-brand-500), var(--ui-brand-700)) !important;
  border-color: rgba(214, 168, 242, .75) !important;
  box-shadow: 0 13px 30px rgba(104, 28, 154, .42), inset 0 1px 0 rgba(255,255,255,.13);
  transform: translateX(2px);
}

/* Prevent Bootstrap slide clipping from affecting the new toolbar. */
.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) > .carousel-inner {
  width: 100%;
  overflow: hidden;
  border-radius: 17px;
}

/* The chart canvas starts below its own title with no inherited mobile gap. */
.page-home :is(
  #carouselDental,
  #carouselVet,
  #carouselDSO,
  #carouselChiro,
  #carouselOptometry
) .carousel-item > div {
  padding-top: 0 !important;
}

/* ========================================================================
   CHART WORKSPACE V2 — PREMIUM PANELS
   ======================================================================== */

.page-home .section2Tab3 {
  background:
    radial-gradient(circle at 7% 0, rgba(124, 39, 185, .075), transparent 24%),
    linear-gradient(160deg, rgba(16, 22, 35, .96), rgba(9, 13, 21, .98)) !important;
}

/* Remove the old hard divider; independent cards provide clearer hierarchy. */
.page-home .section2Tab3 .row .col-lg-8 {
  border-right: 0 !important;
}

/* Primary chart card */
.page-home .chart-box {
  padding: 15px 16px 17px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.045);
}
.page-home .chart-box .card-header {
  margin-bottom: 4px;
  padding: 8px 3px 13px !important;
  border-bottom-color: rgba(255,255,255,.075) !important;
}

/* Geography selector becomes a matching premium side card. */
.page-home .section2Tab3 .row[id][data-value] > .main-graph.col-lg-4 > div {
  height: 100%;
  min-height: 548px;
  margin: 0 !important;
  padding: 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(153, 69, 208, .08), transparent 28%),
    linear-gradient(155deg, rgba(18, 24, 39, .97), rgba(10, 14, 23, .98));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}

.page-home .section2Tab3 .searchContainer::before {
  content: "\f002";
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 2;
  color: #7f899c;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-size: 13px;
  font-weight: 900;
  transform: translateY(-50%);
  pointer-events: none;
}
.page-home .section2Tab3 .searchBox {
  height: 48px !important;
  padding: 10px 42px 10px 41px !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
}
.page-home .section2Tab3 .clearBtn {
  right: 11px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  color: #bcc4d1;
  font-size: 0;
  background: rgba(255,255,255,.07);
  border-radius: 50%;
}
.page-home .section2Tab3 .clearBtn::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-size: 11px;
  font-weight: 900;
}
.page-home .section2Tab3 .clearBtn[style*="display: inline"],
.page-home .section2Tab3 .clearBtn[style*="display: block"] {
  display: flex !important;
}

.page-home .section2Tab3 .stateList {
  max-height: 396px !important;
  margin-top: 10px;
  padding: 6px !important;
  background: rgba(5, 8, 14, .35);
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 15px;
}
.page-home .section2Tab3 .stateList .option {
  min-height: 36px;
  display: flex;
  align-items: center;
  margin: 2px 0;
  padding: 7px 10px;
  color: #dbe0e9;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
}
.page-home .section2Tab3 .stateList .option:hover {
  color: #fff;
  background: rgba(153,69,208,.10);
}
.page-home .section2Tab3 .stateList .option:has(input[type="radio"]:checked) {
  color: #fff;
  background: linear-gradient(90deg, rgba(104,28,154,.34), rgba(83,16,128,.22));
  box-shadow: inset 3px 0 0 var(--ui-brand-400);
}
.page-home .section2Tab3 .stateList .option label {
  padding-left: 5px;
  line-height: 1.35;
}
.page-home .section2Tab3 .downloadLink {
  width: 100%;
  max-width: none;
  min-height: 45px;
  margin: 13px 0 0;
  font-size: 13px;
}

/* Chart mount gets slightly stronger visual hierarchy without changing SVG. */
.page-home :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart
) {
  min-height: 430px;
  margin-top: 0;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 82% 8%, rgba(153,69,208,.07), transparent 28%),
    linear-gradient(155deg, #111725, #0b101a);
  background-size: 36px 36px, 36px 36px, auto, auto;
  border-color: rgba(255,255,255,.085);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.18);
}

/* Score charts and maps use the same design language. */
.page-home :is(#divScoreChart, #divVETScoreChart) {
  padding: 6px;
  background:
    radial-gradient(circle at 85% 5%, rgba(153,69,208,.085), transparent 25%),
    linear-gradient(155deg, #111725, #0b101a);
  border-color: rgba(255,255,255,.085);
  border-radius: 18px;
}
.page-home :is(
  #divProdState,
  #divProdCounty,
  #DentalScoreMap1,
  #VETScoreMap1,
  #DSOproductionMap1,
  #VETproductionMap1,
  #ChiroproductionMap1,
  #OptometryMap1
) {
  border-color: rgba(255,255,255,.10);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  margin-top: 10px;
}

/* Server-rendered ranking/production tables */
.page-home .section2Tab3 .table-responsive {
  scrollbar-gutter: stable;
}
.page-home .section2Tab3 table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.page-home .section2Tab3 table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: #cfa7e8;
  background: #111725;
  border-bottom: 1px solid rgba(183,107,229,.24) !important;
}
.page-home .section2Tab3 table tbody tr {
  transition: background var(--ui-fast);
}
.page-home .section2Tab3 table tbody tr:hover {
  background: rgba(153,69,208,.07);
}

/* Tablet: retain the same toolbar layout with a narrower title. */
@media (max-width: 991px) {
  .page-home :is(
    #carouselDental,
    #carouselVet,
    #carouselDSO,
    #carouselChiro,
    #carouselOptometry
  ) .carousel-item > h5 {
    max-width: calc(100% - 205px) !important;
  }
  .page-home .section2Tab3 .row[id][data-value] > .main-graph.col-lg-4 > div {
    min-height: auto;
    margin-top: 16px !important;
  }
}

/* Phones: controls get a dedicated second toolbar row. */
@media (max-width: 575px) {
  .page-home :is(
    #carouselDental,
    #carouselVet,
    #carouselDSO,
    #carouselChiro,
    #carouselOptometry
  ) .carousel-item > h5 {
    max-width: 100% !important;
    min-height: 58px;
    margin-bottom: 48px !important;
    padding: 8px 2px !important;
    overflow: visible;
    font-size: 13px;
    text-overflow: clip;
    white-space: normal;
  }
  .page-home :is(
    #carouselDental,
    #carouselVet,
    #carouselDSO,
    #carouselChiro,
    #carouselOptometry
  ) > .carousel-indicators {
    top: 65px !important;
    right: auto !important;
    left: 2px !important;
  }
  .page-home :is(
    #carouselDental,
    #carouselVet,
    #carouselDSO,
    #carouselChiro,
    #carouselOptometry
  ) > .carousel-control-next {
    top: 63px !important;
    right: 2px !important;
  }
  .page-home :is(
    #curve_chart,
    #patientvisit_chart,
    #compareprod_chart,
    #collection_chart,
    #curve_chart_VET,
    #vetcompareprod_chart,
    #vetCollection_chart,
    #curve_chart_dso,
    #DSOCollection_chart,
    #curve_chart_chiro,
    #chiroCollection_chart,
    #curve_chart_opto,
    #optometryCollection_chart
  ) {
    min-height: 400px;
    background-size: 28px 28px, 28px 28px, auto, auto;
  }
  .page-home .chart-box { padding: 12px 9px 13px; border-radius: 17px; }
  .page-home .chart-box .card-header::before { width: 32px; height: 32px; flex-basis: 32px; }
  .page-home .section2Tab3 .stateList { max-height: 330px !important; }
}


/* Carousel compatibility fallback
   Explicit selectors support older embedded browser engines that do not
   reliably calculate :is() specificity. Keep this block last. */
.page-home #carouselDental > .carousel-indicators,
.page-home #carouselVet > .carousel-indicators,
.page-home #carouselDSO > .carousel-indicators,
.page-home #carouselChiro > .carousel-indicators,
.page-home #carouselOptometry > .carousel-indicators {
  position: absolute !important;
  top: 7px !important;
  right: 58px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 30 !important;
  width: auto !important;
  min-width: 70px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 13px !important;
}
.page-home #carouselDental > .carousel-indicators > li,
.page-home #carouselVet > .carousel-indicators > li,
.page-home #carouselDSO > .carousel-indicators > li,
.page-home #carouselChiro > .carousel-indicators > li,
.page-home #carouselOptometry > .carousel-indicators > li {
  width: 7px !important;
  min-width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  border: 0 !important;
}
.page-home #carouselDental > .carousel-indicators > li.active,
.page-home #carouselVet > .carousel-indicators > li.active,
.page-home #carouselDSO > .carousel-indicators > li.active,
.page-home #carouselChiro > .carousel-indicators > li.active,
.page-home #carouselOptometry > .carousel-indicators > li.active {
  width: 23px !important;
}
.page-home #carouselDental > .carousel-control-next,
.page-home #carouselVet > .carousel-control-next,
.page-home #carouselDSO > .carousel-control-next,
.page-home #carouselChiro > .carousel-control-next,
.page-home #carouselOptometry > .carousel-control-next {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 31 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
}
.page-home #carouselDental > .carousel-control-next::before,
.page-home #carouselVet > .carousel-control-next::before,
.page-home #carouselDSO > .carousel-control-next::before,
.page-home #carouselChiro > .carousel-control-next::before,
.page-home #carouselOptometry > .carousel-control-next::before {
  content: "" !important;
  width: 9px;
  height: 9px;
  display: block;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateX(-2px) rotate(45deg);
}
.page-home #carouselDental > .carousel-control-next > img,
.page-home #carouselVet > .carousel-control-next > img,
.page-home #carouselDSO > .carousel-control-next > img,
.page-home #carouselChiro > .carousel-control-next > img,
.page-home #carouselOptometry > .carousel-control-next > img {
  display: none !important;
}
.page-home #carouselDental .carousel-item > h5,
.page-home #carouselVet .carousel-item > h5,
.page-home #carouselDSO .carousel-item > h5,
.page-home #carouselChiro .carousel-item > h5,
.page-home #carouselOptometry .carousel-item > h5 {
  max-width: calc(100% - 220px) !important;
}
@media (max-width: 575px) {
  .page-home #carouselDental .carousel-item > h5,
  .page-home #carouselVet .carousel-item > h5,
  .page-home #carouselDSO .carousel-item > h5,
  .page-home #carouselChiro .carousel-item > h5,
  .page-home #carouselOptometry .carousel-item > h5 {
    max-width: 100% !important;
    min-height: 58px !important;
    margin-bottom: 48px !important;
    white-space: normal !important;
  }
  .page-home #carouselDental > .carousel-indicators,
  .page-home #carouselVet > .carousel-indicators,
  .page-home #carouselDSO > .carousel-indicators,
  .page-home #carouselChiro > .carousel-indicators,
  .page-home #carouselOptometry > .carousel-indicators {
    top: 65px !important;
    right: auto !important;
    left: 2px !important;
  }
  .page-home #carouselDental > .carousel-control-next,
  .page-home #carouselVet > .carousel-control-next,
  .page-home #carouselDSO > .carousel-control-next,
  .page-home #carouselChiro > .carousel-control-next,
  .page-home #carouselOptometry > .carousel-control-next {
    top: 63px !important;
    right: 2px !important;
  }
}


/* Absolute carousel-ID fallback — intentionally unscoped from body and DOM
   depth so runtime wrappers cannot restore legacy coordinates. */
#carouselDental .carousel-indicators,
#carouselVet .carousel-indicators,
#carouselDSO .carousel-indicators,
#carouselChiro .carousel-indicators,
#carouselOptometry .carousel-indicators {
  top: 7px !important;
  right: 58px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 50 !important;
  width: auto !important;
  min-width: 70px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 13px !important;
}
#carouselDental .carousel-control-next,
#carouselVet .carousel-control-next,
#carouselDSO .carousel-control-next,
#carouselChiro .carousel-control-next,
#carouselOptometry .carousel-control-next {
  top: 5px !important;
  right: 5px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 51 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
}
#carouselDental .carousel-control-next::before,
#carouselVet .carousel-control-next::before,
#carouselDSO .carousel-control-next::before,
#carouselChiro .carousel-control-next::before,
#carouselOptometry .carousel-control-next::before {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  display: block !important;
  border-top: 2px solid #fff !important;
  border-right: 2px solid #fff !important;
  transform: translateX(-2px) rotate(45deg) !important;
}
#carouselDental .carousel-control-next img,
#carouselVet .carousel-control-next img,
#carouselDSO .carousel-control-next img,
#carouselChiro .carousel-control-next img,
#carouselOptometry .carousel-control-next img {
  display: none !important;
}
@media (max-width: 575px) {
  #carouselDental .carousel-indicators,
  #carouselVet .carousel-indicators,
  #carouselDSO .carousel-indicators,
  #carouselChiro .carousel-indicators,
  #carouselOptometry .carousel-indicators {
    top: 65px !important;
    right: auto !important;
    left: 2px !important;
  }
  #carouselDental .carousel-control-next,
  #carouselVet .carousel-control-next,
  #carouselDSO .carousel-control-next,
  #carouselChiro .carousel-control-next,
  #carouselOptometry .carousel-control-next {
    top: 63px !important;
    right: 2px !important;
  }
}


/* ========================================================================
   PREMIUM FULL-WIDTH CHART WORKSPACE
   Geography is now an on-demand native details popover. All existing input,
   list, radio, download, and delegated-event hooks remain unchanged.
   ======================================================================== */

/* Give every authenticated chart the complete content width. */
.page-home .section2Tab3 .row.view[id][data-value] {
  position: relative !important;
  align-items: stretch;
}
.page-home .section2Tab3 .row.view[id][data-value] > .col-lg-8.main-graph {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.page-home .section2Tab3 .row.view[id][data-value] > .col-lg-8.main-graph .chart-box {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 590px;
  margin: 0 !important;
}

/* Compact geography trigger positioned in the chart-card header. */
.page-home .geography-popover-host {
  position: absolute !important;
  top: 14px;
  right: 18px;
  z-index: 110;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-home .geography-picker {
  position: relative;
  width: 100%;
  color: var(--ui-text);
}
.page-home .geography-picker > summary {
  min-width: 166px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  color: #eef1f6;
  cursor: pointer;
  list-style: none;
  background: rgba(12, 16, 27, .88);
  border: 1px solid rgba(183, 107, 229, .24);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(18px);
  transition: background var(--ui-fast), border-color var(--ui-fast), box-shadow var(--ui-fast), transform var(--ui-fast);
}
.page-home .geography-picker > summary::-webkit-details-marker { display: none; }
.page-home .geography-picker > summary::marker { content: ""; }
.page-home .geography-picker > summary:hover {
  background: rgba(124, 39, 185, .16);
  border-color: rgba(183, 107, 229, .50);
  box-shadow: 0 14px 34px rgba(0,0,0,.32), 0 0 0 3px rgba(153,69,208,.07);
  transform: translateY(-1px);
}
.page-home .geography-picker-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  color: var(--ui-brand-300);
  background: rgba(153,69,208,.13);
  border: 1px solid rgba(183,107,229,.20);
  border-radius: 9px;
}
.page-home .geography-picker > summary > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  text-align: left;
}
.page-home .geography-picker > summary strong {
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}
.page-home .geography-picker > summary small {
  margin-top: 2px;
  color: #8993a5;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}
.page-home .geography-picker-chevron {
  color: #8993a5;
  font-size: 10px;
  transition: transform var(--ui-fast), color var(--ui-fast);
}
.page-home .geography-picker[open] > summary {
  background: rgba(104,28,154,.20);
  border-color: rgba(183,107,229,.55);
}
.page-home .geography-picker[open] .geography-picker-chevron {
  color: var(--ui-brand-300);
  transform: rotate(180deg);
}

/* Floating state/search/download panel. */
.page-home .geography-picker-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  width: 340px;
  max-width: calc(100vw - 38px);
  padding: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(153,69,208,.12), transparent 30%),
    rgba(11, 15, 25, .98);
  border: 1px solid rgba(183,107,229,.30);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(24px) saturate(140%);
  animation: ui-geography-open .24s var(--ui-ease) both;
}
@keyframes ui-geography-open {
  from { opacity: 0; transform: translateY(-7px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.page-home .geography-picker-panel .searchContainer {
  width: 100%;
  margin: 0 0 10px;
}
.page-home .geography-picker-panel .searchBox {
  width: 100%;
  height: 45px !important;
}
.page-home .geography-picker-panel .stateList {
  width: 100% !important;
  max-height: 350px !important;
  margin: 0 !important;
  padding: 6px !important;
  background: rgba(5,8,14,.50);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
}
.page-home .geography-picker-panel .downloadLink {
  width: 100%;
  max-width: none;
  margin: 11px 0 0;
}

/* Keep chart title clear of the geography trigger and navigation controls. */
.page-home .section2Tab3 .row.view[id][data-value] .chart-box .card-header {
  padding-right: 205px !important;
}
.page-home .section2Tab3 .row.view[id][data-value] .carousel-item > h5 {
  max-width: calc(100% - 260px) !important;
}
.page-home .section2Tab3 .row.view[id][data-value] .chart-toolbar-controls {
  right: 18px !important;
  left: auto !important;
  width: auto !important;
  min-width: 164px;
}

/* Spacious data frame matching the supplied premium reference. */
.page-home .section2Tab3 .row.view[id][data-value] :is(
  #curve_chart,
  #patientvisit_chart,
  #compareprod_chart,
  #collection_chart,
  #curve_chart_VET,
  #vetcompareprod_chart,
  #vetCollection_chart,
  #curve_chart_dso,
  #DSOCollection_chart,
  #curve_chart_chiro,
  #chiroCollection_chart,
  #curve_chart_opto,
  #optometryCollection_chart,
  #divCatProductionRebound,
  #divVETCatProductionRebound
) {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 455px;
  border-radius: 18px;
}

/* Premium support CTA proportions from the reference. */
.page-home .section7 {
  padding-top: 40px !important;
  padding-bottom: 100px !important;
}
.page-home .section7Div {
  min-height: 230px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 48px clamp(30px, 6vw, 74px) !important;
  background:
    radial-gradient(circle at 88% 32%, rgba(183,107,229,.18), transparent 28%),
    linear-gradient(125deg, rgba(66,22,99,.48), rgba(18,24,39,.97) 62%) !important;
}
.page-home .section7Div h3 {
  max-width: 720px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
}
.page-home .section7Div .contactBtn {
  min-height: 46px;
  padding: 10px 22px !important;
  font-size: 15px;
}

@media (max-width: 991px) {
  .page-home .geography-popover-host { top: 13px; right: 15px; }
  .page-home .section2Tab3 .row.view[id][data-value] > .col-lg-8.main-graph .chart-box { min-height: 570px; }
}
@media (max-width: 767px) {
  .page-home .section2Tab3 .row.view[id][data-value] { display: flex; flex-direction: column; }
  .page-home .section2Tab3 .row.view[id][data-value] > .col-lg-8.main-graph { order: 2; }
  .page-home .geography-popover-host {
    position: relative !important;
    top: auto;
    right: auto;
    order: 1;
    width: 100% !important;
    margin: 0 0 12px !important;
  }
  .page-home .geography-picker > summary { width: 100%; }
  .page-home .geography-picker-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: none;
    margin-top: 8px;
  }
  .page-home .section2Tab3 .row.view[id][data-value] .chart-box .card-header { padding-right: 3px !important; }
  .page-home .section2Tab3 .row.view[id][data-value] .carousel-item > h5 {
    max-width: 100% !important;
    margin-bottom: 48px !important;
    white-space: normal;
  }
  .page-home .section2Tab3 .row.view[id][data-value] .chart-toolbar-controls {
    top: 128px !important;
    right: 14px !important;
    left: 14px !important;
    width: auto !important;
  }
  .page-home .section7Div { min-height: 210px; padding: 40px 25px !important; }
}


/* ========================================================================
   VISIBLE DATA PANEL RESTORE
   User requirement: no dropdown/popover. Preserve the permanent 8/4 chart
   and table/list layout and never hide server-rendered percentage columns.
   ======================================================================== */

/* Restore original two-column composition with premium spacing. */
.page-home .section2Tab3 .row.view[id][data-value] > .col-lg-8.main-graph {
  width: 66.666667% !important;
  max-width: 66.666667% !important;
  flex: 0 0 66.666667% !important;
  padding-right: 9px !important;
  padding-left: 0 !important;
}
.page-home .section2Tab3 .row.view[id][data-value] > .col-lg-4.main-graph {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  width: 33.333333% !important;
  max-width: 33.333333% !important;
  flex: 0 0 33.333333% !important;
  margin: 0 !important;
  padding: 0 0 0 9px !important;
}
.page-home .section2Tab3 .row.view[id][data-value] > .col-lg-8.main-graph .chart-box,
.page-home .state-data-panel {
  min-height: 590px;
  height: 100%;
}

/* Permanent premium data/list card. */
.page-home .state-data-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
  color: #eef1f6;
  background:
    radial-gradient(circle at 100% 0, rgba(153,69,208,.09), transparent 28%),
    linear-gradient(155deg, rgba(18,24,39,.98), rgba(10,14,23,.99));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}
.page-home .state-data-panel-heading {
  min-height: 52px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  margin: -2px 0 12px;
  padding: 0 4px 12px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}
.page-home .state-data-panel-heading > span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
}
.page-home .state-data-panel-heading > span i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--ui-brand-300);
  font-size: 12px;
  background: rgba(153,69,208,.12);
  border: 1px solid rgba(183,107,229,.22);
  border-radius: 9px;
}
.page-home .state-data-panel-heading small {
  padding-left: 37px;
  color: #7f899b;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}
.page-home .state-data-panel .searchContainer {
  width: 100%;
  flex: 0 0 auto;
  margin-bottom: 10px;
}
.page-home .state-data-panel .searchBox {
  width: 100%;
  height: 46px !important;
}
.page-home .state-data-panel .stateList {
  width: 100% !important;
  max-height: 410px !important;
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 6px !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  background: rgba(5,8,14,.46);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}
.page-home .state-data-panel .option {
  min-height: 35px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
}
.page-home .state-data-panel .downloadLink {
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
  margin: 11px 0 0;
}

/* Chart headings no longer reserve room for a removed popover. */
.page-home .section2Tab3 .row.view[id][data-value] .chart-box .card-header {
  padding-right: 3px !important;
}
.page-home .section2Tab3 .row.view[id][data-value] .carousel-item > h5 {
  max-width: calc(100% - 205px) !important;
}
.page-home .section2Tab3 .row.view[id][data-value] .chart-toolbar-controls {
  right: 18px !important;
  left: 18px !important;
  width: auto !important;
}

/* Protect every server-rendered state percentage/ranking table. */
.page-home :is(
  #divProductionbyState,
  #divDSOProductionbyState,
  #divVETProductionbyState,
  #divChiroProductionbyState,
  #divOptometryProdbyState,
  #divSuccessScorebyState,
  #divVETSuccessScorebyState
) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  color: #eef1f6;
}
.page-home :is(
  #divProductionbyState,
  #divDSOProductionbyState,
  #divVETProductionbyState,
  #divChiroProductionbyState,
  #divOptometryProdbyState,
  #divSuccessScorebyState,
  #divVETSuccessScorebyState
) table {
  width: 100% !important;
  min-width: 260px;
  display: table !important;
  table-layout: auto;
  color: #eef1f6;
  border-collapse: separate;
  border-spacing: 0;
}
.page-home :is(
  #divProductionbyState,
  #divDSOProductionbyState,
  #divVETProductionbyState,
  #divChiroProductionbyState,
  #divOptometryProdbyState,
  #divSuccessScorebyState,
  #divVETSuccessScorebyState
) :is(th, td) {
  display: table-cell !important;
  visibility: visible !important;
  padding: 9px 7px !important;
  border-bottom: 1px solid rgba(255,255,255,.11) !important;
  vertical-align: middle;
}
.page-home :is(
  #divProductionbyState,
  #divDSOProductionbyState,
  #divVETProductionbyState,
  #divChiroProductionbyState,
  #divOptometryProdbyState,
  #divSuccessScorebyState,
  #divVETSuccessScorebyState
) :is(th, td):last-child {
  width: 94px;
  min-width: 74px;
  color: #fff !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  white-space: nowrap;
}
.page-home :is(
  #divProductionbyState,
  #divDSOProductionbyState,
  #divVETProductionbyState,
  #divChiroProductionbyState,
  #divOptometryProdbyState,
  #divSuccessScorebyState,
  #divVETSuccessScorebyState
) tbody tr:hover td {
  background: rgba(153,69,208,.075);
}
.page-home :is(
  #divProductionbyState,
  #divDSOProductionbyState,
  #divVETProductionbyState,
  #divChiroProductionbyState,
  #divOptometryProdbyState,
  #divSuccessScorebyState,
  #divVETSuccessScorebyState
) .searchDiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.page-home :is(
  #divProductionbyState,
  #divDSOProductionbyState,
  #divVETProductionbyState,
  #divChiroProductionbyState,
  #divOptometryProdbyState,
  #divSuccessScorebyState,
  #divVETSuccessScorebyState
) .sortBtn {
  min-height: 40px;
  padding: 7px 12px !important;
  color: #e9edf4;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 11px !important;
}

@media (max-width: 991px) {
  .page-home .section2Tab3 .row.view[id][data-value] > .col-lg-8.main-graph,
  .page-home .section2Tab3 .row.view[id][data-value] > .col-lg-4.main-graph {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .page-home .section2Tab3 .row.view[id][data-value] > .col-lg-4.main-graph {
    margin-top: 16px !important;
  }
  .page-home .state-data-panel { min-height: 470px; height: auto; }
  .page-home .state-data-panel .stateList { max-height: 330px !important; }
}


/* Explicit percentage-column compatibility fallback for older engines. */
.page-home #divProductionbyState table,
.page-home #divDSOProductionbyState table,
.page-home #divVETProductionbyState table,
.page-home #divChiroProductionbyState table,
.page-home #divOptometryProdbyState table,
.page-home #divSuccessScorebyState table,
.page-home #divVETSuccessScorebyState table {
  width: 100% !important;
  display: table !important;
  table-layout: auto !important;
}
.page-home #divProductionbyState th:last-child,
.page-home #divProductionbyState td:last-child,
.page-home #divDSOProductionbyState th:last-child,
.page-home #divDSOProductionbyState td:last-child,
.page-home #divVETProductionbyState th:last-child,
.page-home #divVETProductionbyState td:last-child,
.page-home #divChiroProductionbyState th:last-child,
.page-home #divChiroProductionbyState td:last-child,
.page-home #divOptometryProdbyState th:last-child,
.page-home #divOptometryProdbyState td:last-child,
.page-home #divSuccessScorebyState th:last-child,
.page-home #divSuccessScorebyState td:last-child,
.page-home #divVETSuccessScorebyState th:last-child,
.page-home #divVETSuccessScorebyState td:last-child {
  display: table-cell !important;
  visibility: visible !important;
  width: 94px !important;
  min-width: 74px !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}


/* ========================================================================
   SCROLLABLE SERVER DATA TABLES
   Search/sort remain fixed above; only table rows scroll. Percentage columns
   remain visible and aligned. Overrides the earlier display:table rule.
   ======================================================================== */
.page-home #divProductionbyState table,
.page-home #divDSOProductionbyState table,
.page-home #divVETProductionbyState table,
.page-home #divChiroProductionbyState table,
.page-home #divOptometryProdbyState table,
.page-home #divSuccessScorebyState table,
.page-home #divVETSuccessScorebyState table {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 410px !important;
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding-right: 5px;
  border-collapse: separate;
  border-spacing: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-brand-500) rgba(255,255,255,.055);
  scrollbar-gutter: stable;
}
.page-home #divProductionbyState table::-webkit-scrollbar,
.page-home #divDSOProductionbyState table::-webkit-scrollbar,
.page-home #divVETProductionbyState table::-webkit-scrollbar,
.page-home #divChiroProductionbyState table::-webkit-scrollbar,
.page-home #divOptometryProdbyState table::-webkit-scrollbar,
.page-home #divSuccessScorebyState table::-webkit-scrollbar,
.page-home #divVETSuccessScorebyState table::-webkit-scrollbar {
  width: 8px;
}
.page-home #divProductionbyState table::-webkit-scrollbar-track,
.page-home #divDSOProductionbyState table::-webkit-scrollbar-track,
.page-home #divVETProductionbyState table::-webkit-scrollbar-track,
.page-home #divChiroProductionbyState table::-webkit-scrollbar-track,
.page-home #divOptometryProdbyState table::-webkit-scrollbar-track,
.page-home #divSuccessScorebyState table::-webkit-scrollbar-track,
.page-home #divVETSuccessScorebyState table::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
.page-home #divProductionbyState table::-webkit-scrollbar-thumb,
.page-home #divDSOProductionbyState table::-webkit-scrollbar-thumb,
.page-home #divVETProductionbyState table::-webkit-scrollbar-thumb,
.page-home #divChiroProductionbyState table::-webkit-scrollbar-thumb,
.page-home #divOptometryProdbyState table::-webkit-scrollbar-thumb,
.page-home #divSuccessScorebyState table::-webkit-scrollbar-thumb,
.page-home #divVETSuccessScorebyState table::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ui-brand-400), var(--ui-brand-700));
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
.page-home #divProductionbyState table > tbody,
.page-home #divDSOProductionbyState table > tbody,
.page-home #divVETProductionbyState table > tbody,
.page-home #divChiroProductionbyState table > tbody,
.page-home #divOptometryProdbyState table > tbody,
.page-home #divSuccessScorebyState table > tbody,
.page-home #divVETSuccessScorebyState table > tbody {
  width: 100% !important;
  display: table !important;
  table-layout: fixed !important;
}
.page-home #divProductionbyState table tr,
.page-home #divDSOProductionbyState table tr,
.page-home #divVETProductionbyState table tr,
.page-home #divChiroProductionbyState table tr,
.page-home #divOptometryProdbyState table tr,
.page-home #divSuccessScorebyState table tr,
.page-home #divVETSuccessScorebyState table tr {
  width: 100%;
  display: table-row !important;
}
.page-home #divProductionbyState table td:first-child,
.page-home #divDSOProductionbyState table td:first-child,
.page-home #divVETProductionbyState table td:first-child,
.page-home #divChiroProductionbyState table td:first-child,
.page-home #divOptometryProdbyState table td:first-child,
.page-home #divSuccessScorebyState table td:first-child,
.page-home #divVETSuccessScorebyState table td:first-child {
  width: auto !important;
}
.page-home #divProductionbyState table td:last-child,
.page-home #divDSOProductionbyState table td:last-child,
.page-home #divVETProductionbyState table td:last-child,
.page-home #divChiroProductionbyState table td:last-child,
.page-home #divOptometryProdbyState table td:last-child,
.page-home #divSuccessScorebyState table td:last-child,
.page-home #divVETSuccessScorebyState table td:last-child {
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
}
@media (max-width: 767px) {
  .page-home #divProductionbyState table,
  .page-home #divDSOProductionbyState table,
  .page-home #divVETProductionbyState table,
  .page-home #divChiroProductionbyState table,
  .page-home #divOptometryProdbyState table,
  .page-home #divSuccessScorebyState table,
  .page-home #divVETSuccessScorebyState table {
    max-height: 340px !important;
  }
}


/* Remove horizontal table scrolling while retaining vertical row scrolling. */
.page-home .section2Tab3 .table-responsive,
.page-home #divProductionbyState,
.page-home #divDSOProductionbyState,
.page-home #divVETProductionbyState,
.page-home #divChiroProductionbyState,
.page-home #divOptometryProdbyState,
.page-home #divSuccessScorebyState,
.page-home #divVETSuccessScorebyState {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.page-home #divProductionbyState table,
.page-home #divDSOProductionbyState table,
.page-home #divVETProductionbyState table,
.page-home #divChiroProductionbyState table,
.page-home #divOptometryProdbyState table,
.page-home #divSuccessScorebyState table,
.page-home #divVETSuccessScorebyState table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.page-home #divProductionbyState table > tbody,
.page-home #divDSOProductionbyState table > tbody,
.page-home #divVETProductionbyState table > tbody,
.page-home #divChiroProductionbyState table > tbody,
.page-home #divOptometryProdbyState table > tbody,
.page-home #divSuccessScorebyState table > tbody,
.page-home #divVETSuccessScorebyState table > tbody,
.page-home #divProductionbyState table tr,
.page-home #divDSOProductionbyState table tr,
.page-home #divVETProductionbyState table tr,
.page-home #divChiroProductionbyState table tr,
.page-home #divOptometryProdbyState table tr,
.page-home #divSuccessScorebyState table tr,
.page-home #divVETSuccessScorebyState table tr {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* Eliminate width + inline-margin overflow that creates a horizontal bar. */
.page-home #divProductionbyState,
.page-home #divDSOProductionbyState,
.page-home #divVETProductionbyState,
.page-home #divChiroProductionbyState,
.page-home #divOptometryProdbyState,
.page-home #divSuccessScorebyState,
.page-home #divVETSuccessScorebyState {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
.page-home .state-data-panel,
.page-home .state-data-panel .stateList,
.page-home .section2Tab3 .table-responsive {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}


/* ========================================================================
   FINAL DASHBOARD ALIGNMENT SYSTEM
   One authoritative layout layer for all five industry views.
   ======================================================================== */

/* Consistent section geometry and box sizing. */
.page-home .section2Tab1,
.page-home .section2Tab2,
.page-home .section2Tab3,
.page-home .section2Tab1 *,
.page-home .section2Tab2 *,
.page-home .section2Tab3 * {
  box-sizing: border-box;
}
.page-home .section2Tab1 > .row,
.page-home .section2Tab2 > .row,
.page-home .section2Tab3 > .row.view {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.page-home .section2Tab1 > .row,
.page-home .section2Tab2 > .row {
  align-items: center;
}
.page-home .section2Tab3 > .row.view.activeFlex {
  align-items: stretch !important;
  flex-wrap: wrap !important;
}

/* Authoritative 2/3 + 1/3 desktop columns with one 18px gutter. */
.page-home .section2Tab3 > .row.view > .col-lg-8 {
  min-width: 0;
  width: 66.666667% !important;
  max-width: 66.666667% !important;
  flex: 0 0 66.666667% !important;
  padding: 0 9px 0 0 !important;
  border-right: 0 !important;
}
.page-home .section2Tab3 > .row.view > .col-lg-4 {
  min-width: 0;
  width: 33.333333% !important;
  max-width: 33.333333% !important;
  flex: 0 0 33.333333% !important;
  margin: 0 !important;
  padding: 0 0 0 9px !important;
}
.page-home .section2Tab3 > .row.view > .overlay {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Map/table view: align map heading, segmented control, search and sort. */
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-8 > div {
  width: 100%;
  margin: 0 !important;
}
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-8 > div > .row:first-child {
  min-height: 48px;
  align-items: center;
  margin: 0 0 12px !important;
}
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-8 > div > .row:first-child > [class*="col-"] {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 !important;
}
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-8 > div > .row:first-child > [class*="col-"]:last-child {
  justify-content: flex-end;
}
.page-home .section2Tab3 > .row.view:not([id]) .lnkProd {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 7px 20px;
  line-height: 1;
}
.page-home .section2Tab3 > .row.view:not([id]) iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* Percentage table card aligns with the map edge. */
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-4.table-responsive {
  min-height: 510px;
  display: block !important;
  padding: 14px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  background:
    radial-gradient(circle at 100% 0, rgba(153,69,208,.07), transparent 28%),
    linear-gradient(155deg, rgba(18,24,39,.98), rgba(10,14,23,.99));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.04);
}
.page-home #divProductionbyState,
.page-home #divDSOProductionbyState,
.page-home #divVETProductionbyState,
.page-home #divChiroProductionbyState,
.page-home #divOptometryProdbyState,
.page-home #divSuccessScorebyState,
.page-home #divVETSuccessScorebyState {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Search and sort share one reliable control row. */
.page-home #divProductionbyState .searchDiv,
.page-home #divDSOProductionbyState .searchDiv,
.page-home #divVETProductionbyState .searchDiv,
.page-home #divChiroProductionbyState .searchDiv,
.page-home #divOptometryProdbyState .searchDiv,
.page-home #divSuccessScorebyState .searchDiv,
.page-home #divVETSuccessScorebyState .searchDiv {
  width: 100%;
  min-height: 44px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-flow: row nowrap !important;
  gap: 10px;
  margin: 0 0 12px !important;
}
.page-home #divProductionbyState .searchContainer,
.page-home #divDSOProductionbyState .searchContainer,
.page-home #divVETProductionbyState .searchContainer,
.page-home #divChiroProductionbyState .searchContainer,
.page-home #divOptometryProdbyState .searchContainer,
.page-home #divSuccessScorebyState .searchContainer,
.page-home #divVETSuccessScorebyState .searchContainer {
  min-width: 0;
  max-width: none;
  display: block;
  flex: 1 1 auto;
  margin: 0 !important;
}
.page-home #divProductionbyState .searchBox,
.page-home #divDSOProductionbyState .searchBox,
.page-home #divVETProductionbyState .searchBox,
.page-home #divChiroProductionbyState .searchBox,
.page-home #divOptometryProdbyState .searchBox,
.page-home #divSuccessScorebyState .searchBox,
.page-home #divVETSuccessScorebyState .searchBox {
  width: 100% !important;
  height: 42px;
  margin: 0 !important;
}
.page-home #divProductionbyState .sortBtn,
.page-home #divDSOProductionbyState .sortBtn,
.page-home #divVETProductionbyState .sortBtn,
.page-home #divChiroProductionbyState .sortBtn,
.page-home #divOptometryProdbyState .sortBtn,
.page-home #divSuccessScorebyState .sortBtn,
.page-home #divVETSuccessScorebyState .sortBtn {
  min-width: 72px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  margin: 0 !important;
  white-space: nowrap;
}

/* Vertical-only percentage table with stable column alignment. */
.page-home #divProductionbyState table,
.page-home #divDSOProductionbyState table,
.page-home #divVETProductionbyState table,
.page-home #divChiroProductionbyState table,
.page-home #divOptometryProdbyState table,
.page-home #divSuccessScorebyState table,
.page-home #divVETSuccessScorebyState table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: 410px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 5px 0 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.page-home #divProductionbyState table > tbody,
.page-home #divDSOProductionbyState table > tbody,
.page-home #divVETProductionbyState table > tbody,
.page-home #divChiroProductionbyState table > tbody,
.page-home #divOptometryProdbyState table > tbody,
.page-home #divSuccessScorebyState table > tbody,
.page-home #divVETSuccessScorebyState table > tbody {
  width: 100% !important;
  display: table !important;
  table-layout: fixed !important;
}
.page-home #divProductionbyState table tr,
.page-home #divDSOProductionbyState table tr,
.page-home #divVETProductionbyState table tr,
.page-home #divChiroProductionbyState table tr,
.page-home #divOptometryProdbyState table tr,
.page-home #divSuccessScorebyState table tr,
.page-home #divVETSuccessScorebyState table tr {
  width: 100% !important;
  display: table-row !important;
}
.page-home #divProductionbyState table td,
.page-home #divDSOProductionbyState table td,
.page-home #divVETProductionbyState table td,
.page-home #divChiroProductionbyState table td,
.page-home #divOptometryProdbyState table td,
.page-home #divSuccessScorebyState table td,
.page-home #divVETSuccessScorebyState table td {
  min-height: 38px;
  padding: 9px 7px !important;
  overflow: hidden;
  line-height: 1.3;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.page-home #divProductionbyState table td:first-child,
.page-home #divDSOProductionbyState table td:first-child,
.page-home #divVETProductionbyState table td:first-child,
.page-home #divChiroProductionbyState table td:first-child,
.page-home #divOptometryProdbyState table td:first-child,
.page-home #divSuccessScorebyState table td:first-child,
.page-home #divVETSuccessScorebyState table td:first-child {
  width: auto !important;
  padding-left: 5px !important;
  text-align: left !important;
}
.page-home #divProductionbyState table td:last-child,
.page-home #divDSOProductionbyState table td:last-child,
.page-home #divVETProductionbyState table td:last-child,
.page-home #divChiroProductionbyState table td:last-child,
.page-home #divOptometryProdbyState table td:last-child,
.page-home #divSuccessScorebyState table td:last-child,
.page-home #divVETSuccessScorebyState table td:last-child {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  padding-right: 5px !important;
  text-align: right !important;
}

/* Chart and permanent state-list panel share the same top/bottom edges. */
.page-home .section2Tab3 > .row.view[id][data-value] > .col-lg-8.main-graph .chart-box,
.page-home .section2Tab3 > .row.view[id][data-value] > .col-lg-4.main-graph .state-data-panel {
  width: 100%;
  min-height: 590px;
  height: 100%;
  margin: 0 !important;
}
.page-home .section2Tab3 > .row.view[id][data-value] .chart-box .card-header,
.page-home .state-data-panel-heading {
  min-height: 58px;
}
.page-home .section2Tab3 > .row.view[id][data-value] .chart-box .card-header {
  padding: 8px 3px 13px !important;
}
.page-home .state-data-panel-heading {
  margin: -2px 0 12px !important;
  padding: 0 4px 12px !important;
}
.page-home .state-data-panel .searchContainer {
  width: 100%;
  min-height: 46px;
  margin: 0 0 10px !important;
}
.page-home .state-data-panel .stateList {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.page-home .state-data-panel .option,
.page-home .state-data-panel .option label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Position carousel navigation on the title row without overlap. */
.page-home .section2Tab3 > .row.view[id][data-value] .chart-box .chart-toolbar-controls {
  top: 76px !important;
  right: 18px !important;
  left: auto !important;
  width: auto !important;
  min-width: 150px;
  justify-content: flex-end !important;
}
.page-home .section2Tab3 > .row.view[id][data-value] .carousel-item > h5 {
  width: calc(100% - 205px) !important;
  max-width: calc(100% - 205px) !important;
  margin: 0 0 8px !important;
}

/* Align major content blocks to the dashboard width. */
.page-home .section5,
.page-home .section7 {
  padding-right: max(24px, calc((100vw - 1440px)/2)) !important;
  padding-left: max(24px, calc((100vw - 1440px)/2)) !important;
}
.page-home .section5Title,
.page-home .section5Content,
.page-home .section7Div {
  width: 100%;
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 991px) {
  .page-home .section2Tab3 > .row.view > .col-lg-8,
  .page-home .section2Tab3 > .row.view > .col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }
  .page-home .section2Tab3 > .row.view > .col-lg-4 {
    margin-top: 18px !important;
  }
  .page-home .section2Tab3 > .row.view:not([id]) > .col-lg-4.table-responsive {
    min-height: 470px;
  }
  .page-home .section2Tab3 > .row.view[id][data-value] > .col-lg-8.main-graph .chart-box,
  .page-home .section2Tab3 > .row.view[id][data-value] > .col-lg-4.main-graph .state-data-panel {
    min-height: 520px;
    height: auto;
  }
}

@media (max-width: 575px) {
  .page-home .section2Tab1,
  .page-home .section2Tab2,
  .page-home .section2Tab3 {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
  .page-home .section2Tab3 > .row.view:not([id]) > .col-lg-8 > div > .row:first-child > [class*="col-"] {
    justify-content: flex-start !important;
    margin-bottom: 8px;
  }
  .page-home #divProductionbyState .searchDiv,
  .page-home #divDSOProductionbyState .searchDiv,
  .page-home #divVETProductionbyState .searchDiv,
  .page-home #divChiroProductionbyState .searchDiv,
  .page-home #divOptometryProdbyState .searchDiv,
  .page-home #divSuccessScorebyState .searchDiv,
  .page-home #divVETSuccessScorebyState .searchDiv {
    gap: 7px;
  }
  .page-home #divProductionbyState .sortBtn,
  .page-home #divDSOProductionbyState .sortBtn,
  .page-home #divVETProductionbyState .sortBtn,
  .page-home #divChiroProductionbyState .sortBtn,
  .page-home #divOptometryProdbyState .sortBtn,
  .page-home #divSuccessScorebyState .sortBtn,
  .page-home #divVETSuccessScorebyState .sortBtn {
    min-width: 64px;
    padding-right: 9px !important;
    padding-left: 9px !important;
  }
  .page-home .section2Tab3 > .row.view[id][data-value] .chart-box .chart-toolbar-controls {
    top: 130px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }
  .page-home .section2Tab3 > .row.view[id][data-value] .carousel-item > h5 {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 48px !important;
    white-space: normal;
  }
  .page-home .section5,
  .page-home .section7 {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}


/* ========================================================================
   STATE SELECTOR PERCENTAGES
   Values are copied verbatim from the existing server-rendered production
   table. CSS-generated content keeps state search based on state names only.
   ======================================================================== */
.page-home .state-data-panel .stateList .option label {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 4px;
  overflow: hidden;
  color: #e8ebf2;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-home .state-production-percent {
  min-width: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 7px;
  color: #d7b5ee;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: right;
  white-space: nowrap;
  background: rgba(153,69,208,.10);
  border: 1px solid rgba(183,107,229,.18);
  border-radius: 999px;
}
.page-home .state-production-percent::before {
  content: attr(data-value);
}
.page-home .state-production-percent.is-negative {
  color: #ff9aaa;
  background: rgba(255,113,133,.08);
  border-color: rgba(255,113,133,.18);
}
.page-home .state-production-percent.is-positive {
  color: #e0c5f1;
}
.page-home .stateList .option:hover .state-production-percent,
.page-home .stateList .option:has(input[type="radio"]:checked) .state-production-percent {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
}
.page-home .stateList .option:has(input[type="radio"]:checked) label::after {
  flex: 0 0 auto;
  margin-left: 1px;
  float: none;
}
@media (max-width: 575px) {
  .page-home .state-production-percent {
    min-width: 52px;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 10px;
  }
}


/* ========================================================================
   CROSS-DOMAIN TABLE PARITY
   Runtime classes are applied by the Home UI adapter to all five production
   tables plus Dental and Veterinary Success Score tables.
   ======================================================================== */
.page-home .domain-data-table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #edf0f6;
  overflow: hidden !important;
}
.page-home .domain-data-table .searchDiv {
  width: 100%;
  min-height: 44px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-flow: row nowrap !important;
  gap: 10px;
  margin: 0 0 12px !important;
}
.page-home .domain-data-table .searchContainer {
  min-width: 0;
  display: block;
  flex: 1 1 auto;
  margin: 0 !important;
}
.page-home .domain-data-table .searchBox {
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  padding-right: 38px !important;
  padding-left: 39px !important;
  color: #f3f5f8 !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
}
.page-home .domain-data-table .sortBtn {
  min-width: 72px;
  min-height: 42px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  margin: 0 !important;
  color: #eef1f6 !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 11px !important;
}
.page-home .domain-data-table-grid {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  max-height: 410px !important;
  display: block !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: #edf0f6;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-brand-500) rgba(255,255,255,.05);
}
.page-home .domain-data-table-grid > tbody {
  width: 100% !important;
  display: table !important;
  table-layout: fixed !important;
}
.page-home .domain-data-table-grid tr {
  width: 100% !important;
  display: table-row !important;
  transition: background var(--ui-fast);
}
.page-home .domain-data-table-grid tr:hover {
  background: rgba(153,69,208,.075);
}
.page-home .domain-data-table-grid td {
  display: table-cell !important;
  padding: 9px 7px !important;
  overflow: hidden;
  color: #e7eaf0;
  line-height: 1.3;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.page-home .domain-data-table-grid td:first-child {
  width: auto !important;
  text-align: left !important;
}
.page-home .domain-data-table-grid td:last-child {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  color: #fff !important;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}
.page-home .domain-data-table-grid::-webkit-scrollbar { width: 8px; }
.page-home .domain-data-table-grid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
.page-home .domain-data-table-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ui-brand-400), var(--ui-brand-700));
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

/* State selector heading (chart view) shows no percentage cue. */
.page-home .state-data-panel-heading {
  position: relative;
}
@media (max-width: 575px) {
  .page-home .domain-data-table .searchDiv { gap: 7px; }
  .page-home .domain-data-table .sortBtn {
    min-width: 64px;
    padding-right: 9px !important;
    padding-left: 9px !important;
  }
  .page-home .domain-data-table-grid { max-height: 340px !important; }
}


/* ========================================================================
   FIXED BOTTOM DOWNLOAD ACTIONS
   Tables/lists scroll independently; download actions stay at card bottom.
   ======================================================================== */
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-4.table-responsive {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-4.table-responsive > div:first-child {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-4.table-responsive .domain-data-table {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-4.table-responsive .domain-data-table .searchDiv {
  flex: 0 0 auto;
}
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-4.table-responsive .domain-data-table-grid {
  min-height: 0;
  flex: 1 1 auto;
}
.page-home .section2Tab3 > .row.view:not([id]) > .col-lg-4.table-responsive > .downloadLink,
.page-home .state-data-panel > .downloadLink {
  width: 100% !important;
  max-width: none !important;
  min-height: 46px;
  display: block;
  flex: 0 0 auto;
  align-self: stretch;
  margin: 12px 0 0 !important;
  padding: 10px 18px !important;
  text-align: center;
}
.page-home .state-data-panel > .stateList {
  min-height: 0;
  flex: 1 1 auto;
}
@media (max-width: 991px) {
  .page-home .section2Tab3 > .row.view:not([id]) > .col-lg-4.table-responsive {
    min-height: 500px;
  }
}


/* ========================================================================
   HERO BENTO — PREMIUM LIVE ANIMATIONS
   Scoped to the hero metric cards only. Motion is disabled for users who
   prefer reduced motion.
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Animated gradient wash + moving top accent on every metric card. */
  .page-home .hero-bento .metric-card {
    background-size: 200% 200% !important;
    animation: ui-metric-wash 9s ease-in-out infinite;
  }
  .page-home .hero-bento .metric-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ui-brand-400), var(--ui-cyan), transparent);
    background-size: 220% 100%;
    opacity: .8;
    animation: ui-accent-slide 4.5s linear infinite;
  }
  /* Soft rotating glow behind each card. */
  .page-home .hero-bento .metric-card::after {
    content: "";
    position: absolute;
    top: -60%; left: -60%;
    width: 220%; height: 220%;
    z-index: 0;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(183,107,229,.10) 60deg, transparent 140deg);
    animation: ui-card-orbit 12s linear infinite;
    pointer-events: none;
  }
  .page-home .hero-bento .metric-card > * { position: relative; z-index: 1; }
  .page-home .hero-bento .metric-card:nth-child(2)::after { animation-duration: 15s; }
  .page-home .hero-bento .metric-card:nth-child(3)::after { animation-duration: 18s; }
  .page-home .hero-bento .metric-card:nth-child(4)::after { animation-duration: 14s; }
  .page-home .hero-bento .metric-card:nth-child(5)::after { animation-duration: 20s; }

  /* Featured "Live intelligence" card: brighter animated aura. */
  .page-home .hero-bento .metric-card.featured {
    animation: ui-metric-wash 7s ease-in-out infinite, ui-featured-glow 4s ease-in-out infinite;
  }

  /* Floating metric icons. */
  .page-home .hero-bento .metric-icon {
    animation: ui-icon-float 4.5s ease-in-out infinite;
  }
  .page-home .hero-bento .metric-card:nth-child(3) .metric-icon { animation-delay: .5s; }
  .page-home .hero-bento .metric-card:nth-child(4) .metric-icon { animation-delay: 1s; }
  .page-home .hero-bento .metric-card:nth-child(5) .metric-icon { animation-delay: 1.5s; }
  .page-home .hero-bento .metric-icon::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(183,107,229,.45);
    opacity: 0;
    animation: ui-icon-ring 3s ease-out infinite;
  }

  /* Shimmering metric numbers. */
  .page-home .hero-bento .metric-value {
    background: linear-gradient(100deg, #ffffff 20%, #d9b8f2 40%, #ffffff 60%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ui-value-shimmer 5s linear infinite;
  }
  .page-home .hero-bento .metric-card:nth-child(3) .metric-value { animation-delay: .6s; }
  .page-home .hero-bento .metric-card:nth-child(4) .metric-value { animation-delay: 1.2s; }
  .page-home .hero-bento .metric-card:nth-child(5) .metric-value { animation-delay: 1.8s; }

  /* Radar-style live indicator on the featured card. */
  .page-home .hero-bento .metric-live .live-dot {
    position: relative;
    animation: ui-live-blink 1.8s ease-in-out infinite;
  }
  .page-home .hero-bento .metric-live .live-dot::before,
  .page-home .hero-bento .metric-live .live-dot::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(85,214,167,.55);
    transform: translate(-50%, -50%);
    animation: ui-live-radar 2.4s ease-out infinite;
  }
  .page-home .hero-bento .metric-live .live-dot::after { animation-delay: 1.2s; }

  /* Entrance rise for each card. */
  .page-home .hero-bento .metric-card {
    animation: ui-metric-wash 9s ease-in-out infinite, ui-metric-rise .8s var(--ui-ease) both;
  }
  .page-home .hero-bento .metric-card.featured {
    animation: ui-metric-wash 7s ease-in-out infinite, ui-featured-glow 4s ease-in-out infinite, ui-metric-rise .8s var(--ui-ease) both;
  }
  .page-home .hero-bento .metric-card:nth-child(2) { animation-delay: 0s, 0s, .08s; }
  .page-home .hero-bento .metric-card:nth-child(3) { animation-delay: 0s, 0s, .16s; }
  .page-home .hero-bento .metric-card:nth-child(4) { animation-delay: 0s, 0s, .24s; }
  .page-home .hero-bento .metric-card:nth-child(5) { animation-delay: 0s, 0s, .32s; }
}

@keyframes ui-metric-wash {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes ui-accent-slide {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
@keyframes ui-card-orbit {
  to { transform: rotate(360deg); }
}
@keyframes ui-featured-glow {
  0%, 100% { box-shadow: var(--ui-shadow-sm), 0 0 0 1px rgba(183,107,229,.20), 0 0 22px rgba(153,69,208,.18); }
  50% { box-shadow: var(--ui-shadow-sm), 0 0 0 1px rgba(183,107,229,.42), 0 0 40px rgba(153,69,208,.38); }
}
@keyframes ui-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes ui-icon-ring {
  0% { opacity: .7; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes ui-value-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes ui-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@keyframes ui-live-radar {
  0% { opacity: .55; width: 9px; height: 9px; }
  100% { opacity: 0; width: 42px; height: 42px; }
}
@keyframes ui-metric-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ========================================================================
   TOP STATES + SWITCH TILE + WEEK HEADER — PREMIUM MODERNIZATION
   Server markup and switch JS hooks are unchanged; visuals only.
   ======================================================================== */

/* Week comparison header */
.page-home .section2Tab1 {
  position: relative;
  overflow: hidden;
}
.page-home .section2Tab1 h4 {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.page-home .section2Tab1 h4::before {
  content: "\f073";
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  color: var(--ui-brand-300);
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-size: 13px;
  font-weight: 900;
  background: rgba(153,69,208,.13);
  border: 1px solid rgba(183,107,229,.22);
  border-radius: 10px;
}
.page-home .section2Tab1 .text-right p,
.page-home .section2Tab1 .col-md-5 p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  color: #dfe3ec;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
}
.page-home .section2Tab1 .text-right p::before,
.page-home .section2Tab1 .col-md-5 p::before {
  content: "\f017";
  color: var(--ui-brand-300);
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-size: 11px;
  font-weight: 900;
}

/* Switch to state/US view tile */
.page-home .section2Tab2 {
  border-radius: 0 !important;
}
.page-home .switchImg {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.page-home .switchImg::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--ui-ease);
  pointer-events: none;
}
.page-home .switchImg:hover::after { left: 130%; }
.page-home .switchImg img[src*="autorenew"] {
  transition: transform .6s var(--ui-ease);
}
.page-home .switchImg:hover img[src*="autorenew"] {
  transform: rotate(180deg);
}
.page-home .switchImg p {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Top-states rank cards — professional balanced layout */
.page-home .divTopStates .row { align-items: stretch; }
.page-home .divTopStates .table-responsive {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px;
  min-height: 104px;
  padding: 16px 18px !important;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--ui-line) !important;
  border-radius: 16px;
  box-shadow: var(--ui-shadow-sm), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), background var(--ui-transition);
}
.page-home .divTopStates .table-responsive:hover {
  transform: translateY(-4px);
  border-color: var(--ui-brand-line) !important;
  background: linear-gradient(160deg, rgba(153,69,208,.14), rgba(255,255,255,.02));
  box-shadow: var(--ui-shadow);
}
.page-home .divTopStates .table-responsive::before {
  content: "";
  position: absolute;
  top: 14px; bottom: 14px; left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--ui-brand-400), var(--ui-brand-600));
}
.page-home .divTopStates .table-responsive:nth-child(1)::before { background: linear-gradient(180deg, #ffe08a, #f7b500); }
.page-home .divTopStates .table-responsive:nth-child(2)::before { background: linear-gradient(180deg, #eef2f8, #aab6c8); }
.page-home .divTopStates .table-responsive:nth-child(3)::before { background: linear-gradient(180deg, #f0b483, #c9762f); }

/* Compact circular rank medal */
.page-home .divTopStates .rank {
  width: 40px;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  margin: 0 !important;
  color: #0e121a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--ui-brand-300), var(--ui-brand-500));
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
}
.page-home .divTopStates .table-responsive:nth-child(1) .rank { background: linear-gradient(135deg, #ffe08a, #f4ad00); color: #3a2a00; }
.page-home .divTopStates .table-responsive:nth-child(2) .rank { background: linear-gradient(135deg, #f6f8fc, #b3bfd0); color: #2b3340; }
.page-home .divTopStates .table-responsive:nth-child(3) .rank { background: linear-gradient(135deg, #f2bd90, #c9762f); color: #3a1e07; }

/* Text block sits between medal and state map */
.page-home .divTopStates .topState {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left !important;
}
.page-home .divTopStates .topState p:first-child {
  margin-bottom: 3px;
  overflow: hidden;
  color: #aeb6c4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.page-home .divTopStates .topState label {
  margin: 0;
  color: #fff;
  font-size: 27px !important;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-home .divTopStates .table-responsive img {
  width: 46px !important;
  max-width: 46px !important;
  height: auto;
  flex: 0 0 auto;
  opacity: .82;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.42));
  transition: transform var(--ui-transition), opacity var(--ui-transition);
}
.page-home .divTopStates .table-responsive:hover img {
  opacity: 1;
  transform: scale(1.06);
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .divTopStates .table-responsive:nth-child(1) .rank {
    animation: ui-rank-glow 2.8s ease-in-out infinite;
  }
}
@keyframes ui-rank-glow {
  0%, 100% { box-shadow: 0 5px 14px rgba(0,0,0,.35), 0 0 0 0 rgba(247,181,0,.32); }
  50% { box-shadow: 0 5px 14px rgba(0,0,0,.35), 0 0 16px 2px rgba(247,181,0,.45); }
}

@media (max-width: 767px) {
  .page-home .divTopStates .table-responsive { min-height: 92px; padding: 13px 14px !important; }
  .page-home .divTopStates .topState label { font-size: 23px !important; }
  .page-home .divTopStates .table-responsive img { width: 40px !important; max-width: 40px !important; }
  .page-home .section2Tab1 .text-right p,
  .page-home .section2Tab1 .col-md-5 p { margin-top: 10px; }
}


/* ========================================================================
   TRENDS INSIDER INSIGHTS — PREMIUM EDITORIAL REFINEMENT
   ======================================================================== */
.page-home .section5Title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.page-home .section5Title .row { flex: 1; align-items: flex-end; margin: 0; width: 100%; }
.page-home .section5Title h3 {
  position: relative;
  padding-top: 34px;
  line-height: 1.1;
}
.page-home .section5Title h3::before {
  content: "Research \00a0\2022\00a0 Intelligence";
  position: absolute;
  top: 0; left: 1px;
  display: inline-flex;
  align-items: center;
  color: var(--ui-brand-300);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
}
.page-home #accessArticles {
  gap: 8px;
  padding: 11px 20px !important;
  background: linear-gradient(135deg, rgba(153,69,208,.20), rgba(124,39,185,.10)) !important;
}
.page-home #accessArticles::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-size: 11px;
  font-weight: 900;
  transition: transform var(--ui-fast);
}
.page-home #accessArticles:hover::after { transform: translateX(4px); }

/* Card frame */
.page-home .section5Content .col-lg-4 {
  position: relative;
  padding-bottom: 26px !important;
  background: linear-gradient(170deg, rgba(24,31,48,.9), rgba(13,17,27,.94)) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-r-lg) !important;
}
.page-home .section5Content .col-lg-4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(183,107,229,.5), transparent 42%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--ui-transition);
  pointer-events: none;
}
.page-home .section5Content .col-lg-4:hover::before { opacity: 1; }

/* Image with gradient scrim */
.page-home .section5Content .col-lg-4 > img {
  position: relative;
  height: 208px !important;
  margin: 0 0 20px !important;
}
.page-home .section5Content .col-lg-4 {
  --scrim: linear-gradient(to top, rgba(13,17,27,.55), transparent 42%);
}
.page-home .section5Content .col-lg-4::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 208px;
  z-index: 1;
  background: var(--scrim);
  border-radius: var(--ui-r-lg) var(--ui-r-lg) 0 0;
  pointer-events: none;
}

/* Meta line */
.page-home .section5Content .col-lg-4 > p:first-of-type {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px !important;
  color: #aeb6c4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.page-home .section5Content .col-lg-4 > p:first-of-type::before {
  content: "\f0a1";
  color: var(--ui-brand-300);
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-size: 11px;
  font-weight: 900;
}
.page-home .section5Content .col-lg-4 > p:first-of-type .colorGrey { color: #7f899b !important; }

/* Title with read affordance */
.page-home .section5Content h5 {
  position: relative;
  margin-bottom: 12px;
  font-size: 21px !important;
  letter-spacing: -.02em;
  transition: color var(--ui-fast);
}
.page-home .section5Content h5.accessArticleContent { cursor: pointer; }
.page-home .section5Content h5.accessArticleContent:hover { color: var(--ui-brand-300); text-decoration: none; }
.page-home .section5Content .colorGrey { color: var(--ui-muted); }

/* Topic chips */
.page-home .section5Content .section5Topics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.page-home .section5Content .section5Topics span {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px !important;
  color: #ddc5ed;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--ui-brand-softer);
  border: 1px solid var(--ui-brand-line) !important;
  border-radius: 999px !important;
  transition: background var(--ui-fast), color var(--ui-fast), transform var(--ui-fast);
}
.page-home .section5Content .section5Topics span:hover {
  color: #fff;
  background: var(--ui-brand-700);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .section5Content .col-lg-4 { animation: ui-fade-up .7s var(--ui-ease) both; }
  .page-home .section5Content .col-lg-4:nth-child(2) { animation-delay: .1s; }
  .page-home .section5Content .col-lg-4:nth-child(3) { animation-delay: .2s; }
}

@media (max-width: 767px) {
  .page-home .section5Title { display: block; }
  .page-home .section5Title #accessArticles { margin-top: 16px; }
  .page-home .section5Content h5 { font-size: 19px !important; }
}