/* HEADER CONTAINER */


   html, body {
     overflow-x: hidden;
   }



.container, #app {
    background-color: transparent !important;
}


.header 
{
    width: 100%;
    background-color: #003366;
    color: white;
    padding: 20px 0 0;   /* remove bottom padding */
    box-sizing: border-box;
    margin-bottom: 0;    /* gap now handled by body padding */
    position: fixed;     /* 🔒 stick to the top */
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;        /* stays above page content, below drawer (1000+) */
}


.header-container{
  display:flex;
  align-items:center;
  justify-content:space-between; /* or flex-start */
}


.header-title 
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.header-center-title {
  text-align: center;
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 10px;
}

.header-title a 
{
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-decoration: underline;
}



.logo-link 
{
    display: inline-block;
    border: none;
}

.logo-link img 
{
    display: block;
}




.navigation-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    padding-left: 15px;     /* ← Match left padding of logo block */
    padding-right: 15px;
    line-height: 1.5;
    word-break: keep-all;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}



/* === Logout section container === */
.logout-section
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
    margin-right: 20px;
}

/* === Email text next to logout === */
.logout-email {
  margin-right: 10px;
  font-weight: bold;
  color: #000;            /* base = black for readability on light surfaces */
  font-size: 0.95rem;
}


/* If a page has a light header background, wrap it with .light-surface and override: */
/* .light-surface .logout-email { color: #003366; } */



.button-section,
.dropdown-section 
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}



nav 
{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

nav a 
{
    color: white;
    text-decoration: none;
    font-weight: 500;
}

nav a:hover 
{
    text-decoration: underline;
}

main 
{
    padding: 2rem;
    text-align: center;
    background-color: white;
}

@media (max-width: 600px) 
{
    .header-container{
  display:flex;
  align-items:center;
  justify-content:space-between; /* or flex-start */
}

    nav 
    {
        margin-top: 1rem;
    }
}


/* Enhanced header layout */
.header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 10px;
}


.left-title .header-logo {
    height: 40px;
    margin-right: 10px;
}

.brand-name{
  white-space: nowrap;
  margin-left: 0;          /* moved spacing to .brand-block */
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}



/* Remove extra left offset on the logo so it hugs the edge */
.header-logo {
    height: 40px;
    margin-right: 10px;
}


/* Medium screens (e.g., tablets) */
@media (max-width: 768px) {
    .brand-name{
  white-space: nowrap;
  margin-left: 0;          /* moved spacing to .brand-block */
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
}

/* Small screens (e.g., phones) */
@media (max-width: 480px) {
    .brand-name{
  white-space: nowrap;
  margin-left: 0;          /* moved spacing to .brand-block */
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
}


.center-links {
    flex-grow: 1;
    text-align: center;
    font-size: 1rem;
}

.center-links a {
    margin: 0 8px;
    color: white;
    text-decoration: underline;
}

/* Responsive adjustment */
@media (max-width: 600px) {
    .header-title {
        flex-direction: column;
        align-items: flex-start;
    }
    .center-links {
        text-align: left;
        margin-top: 8px;
    }
}



.header-title {
    justify-content: space-between;
    width: 100%;
}


.left-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: auto;
}


.blue-button {
  background-color: #003366; color: #fff; border: none; border-radius: 6px;
  padding: 6px 10px; cursor: pointer;
}
.blue-button:hover { opacity: .9; }

/* === Sticky footer layout: base === */
html, body {
  overflow-x: hidden;
  margin: 0;        /* add */
  padding: 0;       /* add */
}



/* === Sticky footer layout: flex column === */
body
{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* === Sticky footer layout: grow main to push footer down === */
main
{
    flex: 1;
}

/* === Sticky footer container === */

/* === Footer skeleton (before footer.html arrives) === */
#footer-placeholder
{
    margin-top: auto;
    width: 100%;
    display: block;

    /* Skeleton: show blue bar to prevent layout jump */
    background-color: #003366;
    min-height: 80px;      /* tighter skeleton height */

    /* No padding here — avoid double vertical space */
    padding: 0;

    /* Hide any text if it flashes early */
    color: transparent;
}

/* When real footer HTML is injected, let the real footer control size/bg */
#footer-placeholder.ready
{
    color: inherit;        /* real text color will apply */
    min-height: 0;         /* remove skeleton height */
    background-color: transparent;  /* hand off BG to .site-footer */
}

/* === Real footer (inside footer.html) === */
.site-footer
{
    background-color: #003366;
    color: white;
    text-align: center;

    /* Flex centering ensures equal blue space above/below text */
    display: flex;
    align-items: center;
    justify-content: center;

    height: 60px;          /* fixed height for consistent look */

    font-size: 18px;
    line-height: 1.4;
}

.site-footer p
{
    margin: 0;             /* remove default paragraph spacing */
}

.site-footer a
{
    color: white;
    text-decoration: underline;
    margin: 0 8px;
}


/* Thick black line directly BELOW the Policies row */
.nvx-foot-col:first-child {
    border-bottom: 4px solid #000000;   /* thickness and color of line */
    padding-bottom: 12px;               /* spacing above the line */
    margin-bottom: 16px;                /* spacing below the line */
}


/* === Index hero (logo + tagline) === */
.logo
{
    margin-top: 60px;
    width: 300px;
    max-width: 80%;
    height: auto;       /* keep aspect ratio */
    display: inline-block;
}

.banner-wrapper
{
    margin: 40px auto 0 auto;
    max-width: 600px;   /* keeps line length readable */
    padding: 0 20px;
    box-sizing: border-box;
}

.banner
{
    text-align: center;
}

.coming-soon
{
    font-size: 12px;    /* 50% smaller than 24px */
    font-weight: bold;
}

/* Unify empowering styles for both class names */
.empowering,
.empowering-full
{
    font-size: 20.4px;  /* 15% smaller than 24px */
    font-weight: 700;

  text-align: center;}

/* Full-width, no-wrap headline until screens get narrow */
.empowering-full
{
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
}

/* Allow wrapping on smaller screens */
@media (max-width: 768px)
{
    .empowering-full
    {
        white-space: normal;
    }
}


#userEmail
{
    color: white;
    font-size: 0.95rem;
}

/* Mobile/tablet: guarantee the blue header fills the screen */
@media (max-width: 768px) {
  .header,
  .header-container{
  display:flex;
  align-items:center;
  justify-content:space-between; /* or flex-start */
}

  /* Ensure the logo/email row doesn’t constrain width */
  .header table {
    width: 100% !important;
    table-layout: fixed;
  }

  .header td {
    width: auto !important;
    white-space: normal;
  }

  /* Kill any horizontal scroll that can trigger “shrink” behavior */
  html, body {
    overflow-x: hidden;
  }
}




/* Primary link row at bottom of blue header */
.primary-nav {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 15px 10px 15px; /* tuck under the welcome text */
  box-sizing: border-box;
  background: transparent;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.primary-nav a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

.primary-nav .divider {
  opacity: 0.6;
}

/* Stack nicely on small screens */
@media (max-width: 600px) {
  .primary-nav {
    flex-wrap: wrap;
    gap: 8px;
  }
  .primary-nav .divider {
    display: none;
  }
}

.dx-nav-footer {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 16px;  /* 👈 adds breathing room */
  font-size: 14px;
  font-weight: 500;
}

.dx-nav-footer a {
  text-decoration: none;
  color: white;
  margin: 0 6px;
}

.dx-nav-footer a:hover {
  text-decoration: underline;
}

.dx-nav-footer span {
  color: white;
  margin: 0 4px;
}


.edit-personal-btn {
  background-color: #003366;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;

  height: 36px;
  padding: 8px 7px;   /* ✅ 7px left + 7px right */
  width: auto;        /* ✅ shrink-wrap to text + padding */
  min-width: unset;   /* ✅ remove enforced min width */
  font-weight: bold;
}


.edit-personal-btn:hover {
  opacity: 0.92;
}




/* Prevent label wrapping and rebalance columns on mobile */
@media (max-width: 600px) {
  #doctor-info-panel table {
    table-layout: fixed;   /* helps the widths below take effect */
    width: 100%;
  }
  #doctor-info-panel td:first-child {
    white-space: nowrap;   /* keep "Number of Patients:" on one line */
    width: 42% !important; /* give the label more room than the 30% inline width */
    padding-right: 8px;    /* tighten a bit on small screens */
  }
  #doctor-info-panel td:last-child {
    width: 58% !important;
  }
  /* ensure value spans can shrink as needed */
  #doctor-info-panel td:last-child span {
    display: inline-block;
    min-width: 0;
  }
}

.logout-col {
  width: 200px;          /* room for the button */
  text-align: center;    /* horizontal centering */
  vertical-align: middle;/* vertical centering inside table cell */
}

.logout-col .logout-btn {
  width: 70px;
  height: 36px;
  font-weight: bold;
}


/* Keep left-column labels (e.g., "Number of Patients:") from wrapping */
#doctor-info-panel td:first-child > strong {
  white-space: nowrap;
}

/* (deprecated) account-meta nested table rules removed — row now lives in main table columns */

/* keep these generic sizes if you want to reuse the class elsewhere */
/* unified logout size */
.logout-btn {
  width: 70px;
  height: 36px;
  font-weight: bold;
}


.account-meta-row td:last-child > div,
td:last-child > div {
  margin: 4px 0;
  line-height: 1.35;
}


/* Lock the main doctor info table to prevent the initial reflow “jump” */
#doctor-info-panel > table {
  table-layout: fixed;     /* prevents width recalculation on data load */
  width: 100%;
}

#doctor-info-panel > table td:first-child {
  width: 32%;
  white-space: nowrap;
  padding-right: 10px;
  text-align: right;
}

#doctor-info-panel > table td:last-child {
  width: 68%;
}

/* Make label + dropdown act as one item inside .toolbar, with a 6px internal gap */
.patient-picker {
  display: flex;
  align-items: center;
  gap: 2px;          /* ← the exact space you want between label and select */
}


.add-patient-btn {
  margin-top: 12px; /* optional spacing above the button */
}


/* Visually-hidden label for a11y */
.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}



.toolbar-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}


/* WebKit safety net */
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  .diagnosis-dropdown { background-color: #fff !important; }
}

/* Keep row-2 content nicely centered and contained */
.toolbar-row--bottom #physician-query-group {
  max-width: 680px;
  width: 100%;
}

/* Ensure the submit button keeps height if global styles change */
.submit-btn-inline {
  height: 32px;
}





/* One-click action launcher */
.action-launcher{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}


.menu
{ 
  position:relative; 
}

.more-btn{ background:#334155; } /* slate-ish for contrast */

/* Popover menu */
.menu-list
{
    position: fixed;
    left: auto;
    top: auto;
    margin: 0;
    min-width: 400px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px;
    list-style: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 2000;
    display: none;
}


.menu-item{
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}
.menu-item:hover{ background:#f1f5f9; }
.menu-list .divider{
  height:1px;
  margin:6px 4px;
  background:#e2e8f0;
}

/* Let popovers escape their parents */
.header,
.header-container,
.toolbar,
.analysis-toolbar {
  overflow: visible !important;
}



/* Patch to cover the gap */
.toolbar .tabs-bar .tab-btn.active::after {
  content: "";
  position: absolute;
  left: -1px;                  /* overlap left corner */
  right: -1px;                 /* overlap right corner */
  bottom: -1px;
  height: 2px;                 /* covers the rail fully */
  background: #fff;            /* exact tab background */
  z-index: 3;                  /* sits above rail */
}

/* Small phones */
@media (max-width:480px){
  .toolbar .tabs-bar{ gap:0; }
  .toolbar .tabs-bar .tab-btn{ padding:6px 10px; height:30px; }
}




/* make the logo area stack vertically so the hamburger sits centered under the logo */
.left-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: auto;
}

:root{
  --drawer-width: 280px;
  --drawer-max-h: 72vh;
}

.drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.28);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}

.drawer{
  position:fixed;
  top:0;
  left:0;
  height:auto;
  max-height:var(--drawer-max-h);
  margin-top:56px;                /* under your blue header; JS will adjust, see below */
  width:var(--drawer-width);
  background:#fff;
  border-right:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
  border-radius:0 12px 12px 0;
  box-shadow: 0 14px 38px rgba(2,6,23,.18);
  z-index:1001;

  transform:translateX(-100%);    /* fully off-screen left */
  opacity:0.01;
  pointer-events:none;
  transition:transform .28s ease, opacity .28s ease;
}

.drawer-inner{ display:flex; flex-direction:column; max-height:var(--drawer-max-h); }
.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid #e5e7eb;
  background:#f8fafc;
  border-radius:0 12px 0 0;
}
.drawer-title{ font-weight:700; color:#0f172a; }
.drawer-close{ border:none; background:transparent; font-size:18px; line-height:1; cursor:pointer; }

.drawer-list{ list-style:none; margin:0; padding:6px; overflow:auto; }
.drawer-link{
  display:block; width:100%; text-align:left;
  padding:10px 12px; border:none; background:transparent; cursor:pointer;
  border-radius:10px; font-weight:600; color:#0f172a;
}
.drawer-link:hover{ background:#f1f5f9; }
.drawer-link:focus{ outline:2px solid #0ea5e9; outline-offset:2px; }
.drawer-sep{ height:1px; background:#e5e7eb; margin:8px 4px; }

/* open states */
.drawer-backdrop.is-open{
  opacity:1; visibility:visible; transition:opacity .25s ease;
}
.drawer.is-open{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}



/* DESKTOP HOVER-TO-OPEN (optional): only on devices with a real pointer */
@media (pointer:fine){
  .logo-stack:hover ~ #drawerBackdrop,
  .logo-stack:hover ~ #sideDrawer{
    /* these selectors won't match since the drawer is outside header;
       we'll open via JS for reliability. Keeping media rule here for clarity. */
  }
}


.header-hamburger{
  display:inline-flex;
  flex-direction:column;
  gap:5px;
  width:38px;
  height:30px;
  margin-top:4px;
  padding:6px 8px;
  border:none;
  background:transparent;
  cursor:pointer;
}
.header-hamburger .bar{
  height:2px;
  width:100%;
  background:#fff; /* white bars on blue header */
  border-radius:2px;
}


/* Put the hamburger before the logo without changing HTML order */
.logo-stack { order:-1; }


/* Brand + email stacked and aligned */
.brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  margin-left: 10px;           /* spacing from logo/hamburger */
}

/* Keep your original brand-name size (24px) and remove its left margin */
.brand-block .brand-name{
  white-space: nowrap;
  margin-left: 0;          /* moved spacing to .brand-block */
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

/* Email sits directly under the brand, same left edge */
.brand-email {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 2px;
  margin-left: 0;              /* exact left alignment */
  text-align: left;
}


/* Email + status inline under the title */
.brand-meta {
  display: flex;
  align-items: baseline; /* align text nicely */
  gap: 6px;              /* space between email and (logged in) */
  margin-top: 2px;       /* spacing from the title */
}

/* keep the email tidy on the same row */
.brand-email { margin-top: 0; }

/* the "(logged in)" tag */
.login-status {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
}

/* On small screens, shrink the NevoMD title font */
/* Force smaller brand text on mobile (no wrap) */
@media (max-width: 600px) {
  .brand-block .brand-name{
  white-space: nowrap;
  margin-left: 0;          /* moved spacing to .brand-block */
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
}

@media (max-width: 480px) {
  .brand-block .brand-name{
  white-space: nowrap;
  margin-left: 0;          /* moved spacing to .brand-block */
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
}

/* iPhone / small phone fix: stack query box under buttons */
/* --- iPhone/small phones: fix query box overlap --- */
@media (max-width: 480px) {
  /* Ensure the bottom row stacks vertically and fills width */
  .analysis-row--bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;      /* a bit more gap inside the row */
    width: 100% !important;
    padding-bottom: 6px !important;  /* prevents the next section from riding up */
  }

  /* Make the input group full width */
  #physician-query-group {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Make the input full width and add bottom margin */
  #physicianQuery {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px !important;   /* space under the field */
  }

  /* Put the submit/go button on its own line, full width (or capped) */
  .analysis-row--bottom .analysis-submit {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  /* Add more breathing room below the gray bar so it can't collide with tabs */
  .toolbar {
    margin-bottom: 33px !important;
  }
}


/* Extra space under the top (Holistic/Pharma/Hybrid) row */
/* Extra space under the top (Holistic/Pharma/Hybrid) row */
.analysis-row--top {
  margin-bottom: 16px;
}


/* Tabs row inside the gray toolbar */
.analysis-row--tabs {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 10px 0; /* small spacing under the tabs inside the gray bar */
}

/* When tabs live inside the toolbar, drop their outside margins and hide the old rule line */
.toolbar .tabs-bar { margin: 0; }
.toolbar .tabs-rule { display: none; }

/* Force the Run AI-Diagnostic container background to white */
/* Only the two rows should be white, keep the toolbar gray */
.analysis-row--top,
.analysis-row--bottom {
  background:#ffffff;
}


/* Mask the baseline under the active tab so NO line peeks through */
.toolbar .tabs-bar .tab-btn.active::after{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:-1px;
  height:2px;               /* covers the 1px rail comfortably */
  background:#FFFFFF;       /* EXACT match to .toolbar bg */
  z-index:-1;               /* sits behind the tab face, above the rail */
}



#section-labs {
  background-color: #e6f3ff; /* light blue */
  padding: 20px;
}

#section-patient {
  background-color: #e6f3ff; /* light blue */
  padding: 20px;
}

#labs-section {
  background-color: #e6f3ff; /* light blue */
  padding: 20px;
}

#analysis-row--top {
  background-color: #e6f3ff; /* light blue */
  padding: 8px 12px 0px;   /* top | sides | bottom */
}


/* Make the header a vertical flex container so we can pin the toolbar to its bottom */
header.header 
{
    width: 100%;
    background-color: #003366;
    color: white;
    padding: 20px 0 0;   /* remove bottom padding */
    box-sizing: border-box;
    margin-bottom: 0;    /* gap now handled by body padding */
    position: fixed;     /* 🔒 stick to the top */
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;        /* stays above page content, below drawer (1000+) */
}

/* Move THIS toolbar (the one inside header) to the bottom edge of the header */
header.header > .toolbar
{
    order: 9999;              /* ensure it’s last in the header */
    margin-top: auto;         /* pushes it down to the bottom edge */
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0 !important;
    box-shadow: none !important;

    /* keep it white so no blue shows under it */
    background: #ffffff;

}

/* Safety: kill any bottom margin on last header row above the toolbar */
header.header > *:not(.toolbar):last-child
{
    margin-bottom: 0;
    padding-bottom: 0;
}


/* Mobile: kill the gap below the toolbar when it lives inside the blue header */
@media (max-width: 600px) {
  header.header > .toolbar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Desktop too, for safety (beats earlier base rule) */
header.header > .toolbar {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* ==== Tabs: show only the active panel ==== */
.tab-section {
  display: none;
}
.tab-section.active {
  display: block;
}

/* Honor the HTML 'hidden' attribute everywhere (used by switchTab) */
[hidden] {
  display: none !important;
}


/* Make the two stacked Diagnosis sections meet tightly */
#section-diagnosis3 { padding-bottom: 1px; }  /* was 12px via .tab-section */
#section-diagnosis2 { padding-top: 1px; }     /* was 12px via .tab-section */


.nvx-range { position: relative; height: 12px; background: #eee; border-radius: 6px; overflow: hidden; }
.nvx-range > .bar { position: absolute; left: 0; top: 0; height: 100%; min-width: 2px; }




/* === NevoniX v2 additions (navigation + hero scroller + fixed footer) === */
:root {
  --nvx-navy: #003366;
  --nvx-navy-dark: #00234d;
  --nvx-accent: #0b5aa7;
}

body.has-fixed-nav {
  padding-top: calc(max(10vh, 64px));   /* make room for the fixed top bar (10% of viewport) */
  padding-bottom: 72px; /* room for the fixed footer */
}

/* Top navigation bar (10% height of viewport) */
.nvx-topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 10vh;
  min-height: 64px;
  background: var(--nvx-navy);
  color: #fff;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 18px;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

/* Brand block (left) */
.nvx-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}

.nvx-brand img {
  height: 40px;
  width: auto;
}

/* Boxed sections (center) */
.nvx-nav-sections {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.nvx-box {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
  text-align: center;
  white-space: nowrap;
}

.nvx-box:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.nvx-box:active {
  transform: translateY(0);
}

/* Right-side area for login button */
.nvx-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}


.nvx-login-btn:hover { filter: brightness(0.95); }

/* Responsive: collapse center items on very small screens */
@media (max-width: 600px) {
  .nvx-topnav { padding: 8px 12px; }
  .nvx-brand span { display: none; } /* hide text keep logo */
  .nvx-nav-sections { gap: 8px; }
  .nvx-box { padding: 6px 10px; font-weight: 700; }
  
}

/* Smooth scroll anchor targets */
.scroll-anchor {
  scroll-margin-top: 12vh; /* avoid being hidden under fixed nav */
}

/* ===== Marketing image scroller ===== */
.nvx-scroller-wrap {width: 100%;
  overflow: hidden;
  position: relative;
  background: #f7fbff;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 12px;
}

.nvx-scroller {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px 8px;
  animation: nvxMarquee 28s linear infinite;
}

.nvx-scroller:hover { animation-play-state: paused; }

.nvx-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  aspect-ratio: auto;
  overflow: hidden;

  flex: 0 0 auto;
  width: clamp(220px, 26vw, 360px);
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  }

.nvx-card img, .nvx-card svg {
  display: block;
  width: 100%;
  height: auto;
}

.nvx-card .cap {
  padding: 10px 12px;
  font-weight: 700;
  color: #0f2847;
}

@keyframes nvxMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* list duplicated to loop seamlessly */
}

/* removed legacy fixed footer block */
/* Optional: hide the legacy footer placeholder on index2 to avoid duplication */
.index2-hide-legacy-footer #footer-placeholder { display: none !important; }



/* v2.1: stronger image sizing for scroller cards */
.nvx-card img, .nvx-card svg {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
}



/* v2.2: ensure content never shows above the fixed nav */
.nvx-scroller-wrap { margin-top: 0; position: relative; z-index: 1; }



/* v2.3: zero out body/html margins; prevent top-margin bleed under fixed nav */
html, body { margin: 0; }
body.has-fixed-nav { padding-top: calc(max(10vh, 64px)); }
#story { margin-top: 0; position: relative; z-index: 1; }
.contact-intro { margin-top: 24px; }



/* v2.4: top curtain to prevent any peek above fixed nav */
.nvx-top-curtain {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--nvx-navy);
  z-index: 2147483647; /* above everything */
}



/* v2.5: center the single intro block and tighten spacing */
.contact-intro { max-width: 820px; margin: 24px auto 8px auto; text-align: center; line-height: 1.55; }



/* v2.5: widen contact form on desktop only */
@media (min-width: 900px) {
  .inquiry-hero form { 
    max-width: 780px; 
    width: min(92%, 780px);
    margin-left: auto;
    margin-right: auto;
  }
}



/* v2.6: noticeably widen contact form on desktop only */
@media (min-width: 900px) {
  .inquiry-hero form {
    max-width: 960px;
    width: min(95%, 960px);
    margin-left: auto;
    margin-right: auto;
    padding: 20px 40px;
  }
}



/* v2.7: scroller cards use media wrapper with object-fit containment */
.nvx-card {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.nvx-media {
  position: relative;
  width: 100%;

  background: #ffffff;
}

.nvx-media img, .nvx-media svg
{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.nvx-card .cap {
  flex: 0 0 auto;
  text-align: center;
}



/* v2.7: center email section and embedded intro */
.inquiry-hero {display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1px 0;
  margin: 0.5rem auto;
  margin-top: 2px;
}

.inquiry-hero .form-intro {
  max-width: 820px;
  margin: 0 auto 20px auto;
}

.inquiry-hero form {
  float: none !important;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (min-width: 900px) {
  .inquiry-hero form {
    max-width: 960px;
    width: min(95%, 960px);
    padding: 20px 40px;
  }
}



/* v2.8: center section, left-align form labels & fields */
.inquiry-hero { align-items: center; justify-content: center; text-align: center; }

/* Center the form block itself but keep internal content left-aligned */
.inquiry-hero form {
  margin-left: auto;
  margin-right: auto;
  text-align: left;         /* override earlier centering */
}

/* Labels align with their corresponding fields */
.inquiry-hero form label {
  display: block;
  margin: 10px 0 6px 2px;
  font-weight: 600;
  text-align: left;
}

/* Inputs and textareas span full form width */
.inquiry-hero form input[type="text"],
.inquiry-hero form input[type="email"],
.inquiry-hero form input[type="tel"],
.inquiry-hero form input[type="url"],
.inquiry-hero form textarea,
.inquiry-hero form select {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* Keep the intro centered at the top of the form */
.inquiry-hero .form-intro { text-align: center; }



/* v2.9: center entire white form box contents */
.inquiry-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.inquiry-hero form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  text-align: left;
}

/* Keep form fields flush-left inside their centered container */
.inquiry-hero form label,
.inquiry-hero form input,
.inquiry-hero form textarea {
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
}

.inquiry-hero form label {
  margin: 10px 0 5px 0;
  font-weight: 600;
  text-align: left;
}

/* Intro block stays centered */
.inquiry-hero .form-intro {
  text-align: center;
  margin-bottom: 20px;
  max-width: 720px;
}

/* Desktop widening */
@media (min-width: 900px) {
  .inquiry-hero form {
    max-width: 960px;
    width: 90%;
    padding: 20px 40px;
  }
}



/* v2.10: precise centering + restored field width */
.inquiry-hero form {
  display: flex;
  flex-direction: column;
  align-items: center;       /* centers inner blocks horizontally */
  justify-content: center;
  margin: 0 auto;
  text-align: left;
}

.inquiry-hero .form-intro {
  max-width: 1040px;         /* match desktop form cap */
  width: 100%;
  margin: 0 auto 20px auto;  /* center intro block */
  text-align: center;
}

.inquiry-hero form .form-intro,
.inquiry-hero form label,
.inquiry-hero form input,
.inquiry-hero form textarea,
.inquiry-hero form select {
  max-width: none;           /* remove previous 720px cap */
  width: 100%;               /* fields span the form width */
  box-sizing: border-box;
}

/* Desktop: wider form */
@media (min-width: 900px) {
  .inquiry-hero form {
    max-width: 1040px;
    width: min(95%, 1040px);
    padding: 24px 48px;
  }
}



/* v2.11: stretch fields to full width and center form */
.inquiry-hero form {
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* makes children take full width of form */
  justify-content: center;
  margin: 0 auto;
  text-align: left;
}

.inquiry-hero .form-intro {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto 20px auto;
  text-align: center;
}

/* Absolutely ensure fields span form width (override legacy widths) */
.inquiry-hero form input[type="text"],
.inquiry-hero form input[type="email"],
.inquiry-hero form input[type="tel"],
.inquiry-hero form input[type="url"],
.inquiry-hero form textarea,
.inquiry-hero form select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .inquiry-hero form {
    max-width: 1040px;
    width: min(95%, 1040px);
    padding: 24px 48px;
  }
}



/* v2.12: final centering pass — center form as a group, keep labels above inputs, left-aligned */
.inquiry-hero {display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
  margin-top: 10px;
}

/* Center the form as one block; internal content left-aligned */
.inquiry-hero form {
  display: block;            /* simpler, avoids flex side-effects */
  max-width: 880px;          /* desktop target width */
  width: 100%;
  margin: 0 auto;            /* centers the block */
  padding: 24px 32px;
  text-align: left;          /* labels/fields align left */
  box-sizing: border-box;
}

/* Header text (inside the form) stays centered */
.inquiry-hero form .form-intro { 
  text-align: center; 
  max-width: 740px; 
  margin: 0 auto 12px auto; 
}

/* Labels above fields, left-aligned */
.inquiry-hero form label { 
  display: block; 
  margin: 10px 0 6px 0; 
  font-weight: 600; 
  text-align: left; 
}

/* Fields span the form width and stay centered as a group */
.inquiry-hero form input[type="text"],
.inquiry-hero form input[type="email"],
.inquiry-hero form input[type="tel"],
.inquiry-hero form input[type="url"],
.inquiry-hero form textarea,
.inquiry-hero form select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* Desktop only: keep same max-width; mobile inherits 100% of container */
@media (min-width: 900px) {
  .inquiry-hero form {max-width: 880px; width: 100%;
  padding: 12px 32px;
}
}



/* v2.13: restore captions under scroller images */
.nvx-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  aspect-ratio: 16 / 9;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.nvx-card .cap {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: #0b5aa7;
  background: #ffffff;
  padding: 8px 0 12px 0;
  box-sizing: border-box;
}

/* v2.13: move inline styles to CSS */
.contact-intro {
  max-width: 800px;
  margin: 40px auto 10px auto;
  text-align: center;
  line-height: 1.5;
}
.contact-intro h2 { color: #0b5aa7; margin-bottom: 10px; }
.contact-intro ul { list-style: none; padding: 0; margin: 20px 0 0 0; font-weight: 600; line-height: 1.8; }

.form-intro {
  text-align: center;
  margin-bottom: 24px;
}
.form-intro h2 {color: #0b5aa7; margin-bottom: 10px;
  margin-top: 0;
}
.form-intro ul { list-style: none; padding: 0; margin: 20px 0 0 0; font-weight: 600; line-height: 1.8; }



/* v2.14: make captions visible — ratio on media, not on card */
.nvx-card { 
  aspect-ratio: auto;           /* allow card to grow for caption */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

.nvx-media {
  position: relative;
  width: 100%;
}

/* Reserve a 16:9 area for the image */
.nvx-media::before {
  content: "";
  display: block;
  padding-top: 56.25%;          /* 16:9 */
}

/* Fit image inside the reserved area without distortion */
.nvx-media img, .nvx-media svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Caption stays below the media area, now visible */
.nvx-card .cap {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: #0b5aa7;
  background: #ffffff;
  padding: 8px 0 12px 0;
  box-sizing: border-box;
}



/* v2.15: navbar logo + brand title */
.navbar-brand{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}
.nav-logo{
  max-width:100px;
  max-height:100px;
  width:auto;
  height:auto;
  margin-left:10px;
  object-fit:contain;
}
.brand-title{
  font-weight:700;
  color:white;
  white-space:nowrap;
}
/* pad left side of nav buttons so brand doesn't overlap */
.nvx-topnav .nvx-nav-items{
  padding-left:130px;
}



/* v2.16: nav height, brand placement, and login width */
.nvx-topnav {
  min-height: 88px;           /* a bit taller to accommodate the logo */
  padding-left: 130px;        /* reserve space so content doesn't overlap the brand */
}

body.has-fixed-nav {
  padding-top: 88px;          /* keep page content below fixed nav */
}

.navbar-brand{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
}

.nav-logo{
  max-height: 72px;           /* keep well within the nav bar */
  max-width: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
}

#loginBtn
{
    /* Canonical Nevonix login — single source of truth */
    background: linear-gradient(180deg, #0078d7 0%, #005bb5 100%);
    color: #ffffff;
    font-weight: 700;
    border: 1px solid #004a99;
    border-radius: 12px;
    padding: 10px 22px;
    box-shadow: 0 6px 0 #003f80, 0 6px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    height: 40px;
    min-width: 120px;
    box-sizing: border-box;
    text-align: center;
    /* Right-align within fixed top nav */
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

#loginBtn:hover
{
    background: linear-gradient(180deg, #0090ff 0%, #006fd1 100%);
    transform: translateY(calc(-50% - 2px));
    box-shadow: 0 8px 0 #003f80, 0 8px 20px rgba(0, 0, 0, 0.25);
}

#loginBtn:active
{
    transform: translateY(calc(-50% + 2px));
    box-shadow: 0 3px 0 #003f80, 0 3px 8px rgba(0, 0, 0, 0.2);
}

#loginBtn:focus-visible
{
    outline: 3px solid #38bdf8;
    outline-offset: 2px;
}

/* Mobile-only sizing — keep next to canonical block (not scattered) */
@media (max-width: 640px)
{
    #loginBtn
    {
        height: 30px;
        min-width: 90px;
        padding: 0 10px;
        font-size: 0.90rem;
        border-radius: 10px;
        top: 12px;
        right: 12px;
        transform: none;
    }
}

/* v2.17: hide visual brand text to avoid overlay, keep for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ensure nav items have enough left padding to clear the logo area */
.nvx-topnav {
  padding-left: 150px; /* was 130px */
}



/* v2.19: modernize Physician Login button with higher specificity */
.nvx-topnav #loginBtn {
  background: linear-gradient(135deg, #0066cc, #004c99) !important;
  color: #ffffff !important;
  font-weight: 700;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  letter-spacing: 0.2px;
}
.nvx-topnav #loginBtn:hover {
  background: linear-gradient(135deg, #007fff, #0059b3) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25) !important;
}
.nvx-topnav #loginBtn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}



/* v2.20: 3D raised Physician Login button */
.nvx-topnav #loginBtn {
  background: linear-gradient(180deg, #0078d7 0%, #005bb5 100%) !important;
  color: #fff !important;
  font-weight: 700;
  border: 1px solid #004a99 !important;
  border-radius: 12px !important;
  padding: 10px 22px !important;
  box-shadow: 0 6px 0 #003f80, 0 6px 15px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.nvx-topnav #loginBtn:hover {
  background: linear-gradient(180deg, #0090ff 0%, #006fd1 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #003f80, 0 8px 20px rgba(0,0,0,0.25) !important;
}

.nvx-topnav #loginBtn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #003f80, 0 3px 8px rgba(0,0,0,0.2) !important;
}



/* v2.21: NevoMD brand title (visible, 3D effect) */
.navbar-brand{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
}
.nav-logo{
  max-height: 72px;
  max-width: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
}
.brand-title{
  color: #ffffff;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.4px;
  text-shadow:
     0 1px 0 rgba(0,0,0,0.35),
     0 2px 0 rgba(0,0,0,0.3),
     0 3px 0 rgba(0,0,0,0.25),
     0 4px 8px rgba(0,0,0,0.35);
  white-space: nowrap;
}

/* Give nav items more left padding to clear brand */
.nvx-topnav {
  min-height: 92px;
  padding-left: 200px; /* makes room for logo + brand title */
}

/* Make the whole card clickable without changing look */
.nvx-card-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}



/* v2.22: pixel-perfect smooth marquee */
.nvx-scroller {
  animation: nvxMarquee var(--nvx-marquee-duration, 28s) linear infinite;
  will-change: transform;
}

@keyframes nvxMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--nvx-marquee-shift, 50%))); }
}


/* v3.1: ensure intro text is visible below fixed NAV */
.nvx-intro-text {
  position: relative;
  z-index: 3;
  background: white;
  margin-top: 12vh;
  padding: 30px 20px;
  text-align: center;
  font-size: 1.3rem;
  color: #0b5aa7;
  line-height: 1.5;
}

.nvx-scroller-wrap {position: relative;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 4px;
}
.hero-tagline { margin-top: 35px;
display: block; text-align: center; font-weight: 700; 
font-size: 1.2rem; line-height: 1.2; color: #000; }
.center-bold { text-align: center; font-weight: 700; }



.underline {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* === Amazon-like Back to top + White content footer === */
.nvx-backtotop {
  background: #37475a;
  text-align: center;
  padding: 12px 0;
}
.nvx-backtotop a { color: #fff; font-weight: 600; text-decoration: none; }
.nvx-backtotop a:hover { text-decoration: underline; }

/* White content area styled cleanly */
.nvx-footer.amazon-lite {
  background: #ffffff !important;
  color: #0f172a !important;
  border-top: 1px solid #e5e7eb;
  margin-top: 0;
}
.nvx-footer.amazon-lite a { color: #0a4aa6 !important; text-decoration: none; }
.nvx-footer.amazon-lite a:hover { text-decoration: underline; }

.nvx-footer.amazon-lite .nvx-footer-wrap { max-width: 1280px; margin: 0 auto; padding: 28px 24px 36px; }
.nvx-footer.amazon-lite .nvx-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
}
.nvx-footer.amazon-lite .nvx-foot-col h3 { color: #000; font-size: 18px; margin: 0 0 10px; }
.nvx-footer.amazon-lite .nvx-foot-list { list-style: none; margin: 0; padding: 0; }
.nvx-footer.amazon-lite .nvx-foot-list li { margin: 6px 0; }
.nvx-footer.amazon-lite .nvx-social-list { display: flex; gap: 14px; list-style: none; padding: 0; margin: 0 0 12px 0; }
.nvx-footer.amazon-lite .nvx-app-row { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.nvx-footer.amazon-lite .nvx-app-badge { padding: 6px 10px; border: 1px solid rgba(0,0,0,0.25); border-radius: 8px; font-size: 13px; color: #0f172a; background: #f3f4f6; }

@media (max-width: 900px) { .nvx-footer.amazon-lite .nvx-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .nvx-footer.amazon-lite .nvx-footer-grid { grid-template-columns: 1fr; } }
/* ===== Footer scroll fix: keep in normal flow ===== */
.nvx-backtotop {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1 !important;
}

.nvx-footer,
.nvx-footer.amazon-lite,
.nvx-footer.amazon-theme {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1 !important;
  overflow: visible !important;
}

/* In case any global "fixed footer" styles leaked in */
footer[style*="position:fixed"],
footer.fixed,
footer.sticky {
  position: static !important;
}

/* White content section stays white */
.nvx-footer.amazon-lite { background: #ffffff !important; }
/* === Back-to-top separation fix === */
.nvx-backtotop {
  position: static !important;
  display: block !important;
  clear: both !important;
  z-index: 0 !important;
  margin: 18px 0 0 0 !important;  /* space above the footer */
  padding: 12px 0 !important;
}

/* Footer should start BELOW back-to-top, never underlap */
.nvx-footer,
.nvx-footer.amazon-lite,
.nvx-footer.amazon-theme {
  position: static !important;
  display: block !important;
  clear: both !important;
  z-index: 0 !important;
  margin-top: 0 !important;
  padding-top: 12px !important;   /* buffer under the bar */
  border-top: 1px solid #d1d5db !important;
}

.nvx-foot-col:first-child h3 {
    border-bottom: 4px solid #000000;  /* thickness and color */
    padding-bottom: 6px;               /* spacing between text and line */
    margin-bottom: 10px;               /* spacing before the links start */
}
/* === Back to top usability === */
html { scroll-behavior: smooth; }
.nvx-backtotop { position: static !important; display: block !important; background: #37475a; text-align: center; padding: 12px 0 !important; margin: 18px 0 0 0 !important; z-index: 2 !important; }
.nvx-backtotop a { color: #fff !important; font-weight: 600; text-decoration: none; display: inline-block !important; }
.nvx-backtotop a:hover { text-decoration: underline; }
/* If #nvx-top exists, offset for fixed header height */
#nvx-top { scroll-margin-top: 80px; }  /* adjust if header height changes */

/* === Footer: single continuous top divider across ALL columns === */
.nvx-footer .nvx-footer-grid { position: relative; padding-top: 18px; }
.nvx-footer .nvx-footer-grid::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;                 /* draws at the very top of the grid */
  height: 4px;
  background: #000;
}
/* Ensure headings don’t draw their own lines */
.nvx-foot-col h3 { border: 0 !important; margin-bottom: 10px; padding-bottom: 6px; }
/* Ensure ULs have no borders that create extra lines */
.nvx-foot-list { border: 0 !important; padding-top: 8px; }

/* ===== nvx v2.4 — footer rules & scroll cleanup ===== */

/* Avoid nested scrollbars: let the root scroll normally */
html, body { overflow-y: auto; }

/* Remove any column-only rule that draws a short underline (legacy) */
.nvx-foot-col:first-child { border-bottom: none; }

/* Draw a single, full-viewport black rule directly BELOW the footer headings row.
   We anchor the rule to the first column's H3 and stretch it to 100vw, centered. */
.nvx-foot-col:first-child h3{
  position: relative;
}
.nvx-foot-col:first-child h3::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  height:4px;
  background:#000;
  bottom:-10px;          /* sits just under the headings row */
}

/* Ensure consistent spacing under the headings across all columns */
.nvx-foot-col h3{
  margin:0 0 18px 0;     /* bottom space so the rule doesn't overlap text */
  line-height:1.2;
}

/* Draw a full-viewport black rule BELOW the copyright block (bottom of footer).
   We anchor to the first column's legal note paragraph. */
.nvx-foot-col:first-child .nvx-foot-legal{
  position: relative;
  padding-bottom: 18px;  /* space above the bottom rule */
}
.nvx-foot-col:first-child .nvx-foot-legal::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  height:4px;
  background:#000;
  bottom:-10px;
}

/* Minor safety: prevent any internal element from forcing horizontal scroll */
.nvx-footer, .nvx-footer * { max-width: 100%; box-sizing: border-box; }


/* === Consolidated footer (Amazon-like) ==================================== */
:root{
  --nvx-footer-bg: #ffffff;
  --nvx-footer-border: #222;      /* black lines */
  --nvx-backtotop-bg: #36454F;    /* dark slate */
  --nvx-backtotop-fg: #fff;
  --nvx-footer-link: #0b5ed7;     /* bootstrapy link tone */
  --nvx-footer-muted: #555;
}

/* Back-to-top bar */
.nvx-backtotop{
  width: 100%;
  background: var(--nvx-backtotop-bg);
  color: var(--nvx-backtotop-fg);
  text-align: center;
  padding: 10px 12px;
  margin-top: 24px;
}
.nvx-backtotop a{
  color: var(--nvx-backtotop-fg);
  text-decoration: none;
  font-weight: 700;
}
.nvx-backtotop a:hover{ text-decoration: underline; }

/* Footer wrapper */
.nvx-footer{
  background: var(--nvx-footer-bg);
  color: #000;
  border-top: 4px solid var(--nvx-footer-border);  /* full-width thick line under header row */
}

/* Footer inner max-width container */
.nvx-footer .nvx-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 12px;
}

/* Three-column section */
.nvx-footer .nvx-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

/* Section headings (Policies / Follow / Company) */
.nvx-footer .nvx-h{
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #000;
}

.nvx-footer ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.nvx-footer li{ margin: 6px 0; }

.nvx-footer a{
  color: var(--nvx-footer-link);
  text-decoration: none;
}
.nvx-footer a:hover{ text-decoration: underline; }

/* App badges row and legal text */
.nvx-footer .nvx-legal{
  color: var(--nvx-footer-muted);
  font-size: 0.92rem;
  margin-top: 14px;
}

/* Full-width bottom rule under copyright */
.nvx-footer-bottom{
  border-top: 4px solid var(--nvx-footer-border);
  margin-top: 10px;
}

/* Make sure any legacy footer placeholders are hidden to avoid duplication */
#footer-placeholder, .site-footer, .nvx-footer-legacy, .nvx-footer-fixed{ display: none !important; }

/* Responsive tweaks */
@media (max-width: 900px){
  .nvx-footer .nvx-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .nvx-footer .nvx-grid{ grid-template-columns: 1fr; }
}

/* ===== Scrollbar De-dupe (single page scroller) ===== */
/* Ensure only the root scrolls */
html, body {
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important; /* prevent 100vw pseudo-lines from causing side-scroll */
}

/* Clear accidental scrolling on inner wrappers that can create a second scrollbar */
#app, .app, .site, .site-wrapper, .wrapper, .page, .page-wrapper,
main, .content, .content-wrap, .site-content, .container,
.nvx-footer, .nvx-backtotop {
  overflow: visible !important;
  max-height: none !important;
}

/* Safety: no element should claim full viewport height in a way that traps scroll */
#app, .app, .page, .page-wrapper, main, .content, .content-wrap {
  height: auto !important;
}

/* Footer bars remain full width without forcing horizontal scroll */
.nvx-foot-col:first-child h3::after,
.nvx-foot-col:first-child .nvx-foot-legal::after {
  max-width: 100% !important;
}


.nvx-footer { padding-bottom: 0 !important; }   /* no extra space under footer grid */
.nvx-legal  { margin-bottom: 0; padding-bottom: 0; }  /* copyright line sits flush */



/* === NevoMD Content Grid (single source of truth) ============================
   Purpose: layout + styling for the new content section below the hero.
   Notes:
   - All selectors are namespaced with `.nvx-content` to avoid collisions.
   - One consolidated block, no overrides elsewhere.
============================================================================= */

/* === NevoMD Content Grid — Bullet Lists (hanging indent, aligned) ===========
   One canonical definition for all lists inside .nvx-content
============================================================================= */

/* === NevoMD Content Grid — Restored Layout + Left-Aligned Bullets ============ */







.nvx-content__cell
{

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    box-sizing: border-box;

    
}

.nvx-content__figure
{
    margin: 0 0 10px 0;
}

.nvx-content__img
{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: #f4f6f8;
}





.nvx-content__p
{
    margin: 6px 0 10px 0;
    line-height: 1.55;
    color: #111827;
}

/* ---- Bullet list: restored alignment (flush left, wrapped lines aligned) ---- */




/* Emphasis helper */
.nvx-content__note
{
    font-style: italic;
    color: #374151;
}

/* Responsive single-column for phones */


    .nvx-content__grid,
    
}

/* === Simple bullets for content cards (browser defaults) =================== */
/* Keep it minimal and predictable */
/* Kill any previous custom markers, if they still exist somewhere */


/* === Canonical bullets for content cards (simple UL/LI, consistent wrap) === */


/* === Content list: green checkbox bullets (single source of truth) ========= */








/* === Content layout (restored) ============================================ */
.nvx-content
{
    width: 100%;
    max-width: none;           /* allow full width */
    margin: 0 auto;
    padding: 20px 16px 28px 16px;
    box-sizing: border-box;
}

/* Desktop & tablet: ALWAYS two columns for content grids */
@media (min-width: 721px)
{
}

/* Single-row variant stays full width */
.nvx-content__grid--single
{
    grid-template-columns: 1fr;
}

/* Phones: single column */
/* === Content list: green checkbox markers (simple + aligned) ============== */
/* Checkbox box */
/* Check mark */

/* === Content list: green checkbox markers (aligned text start) ============== */
.nvx-content__cell ul
{
    list-style: none;
    margin: 8px 0;
    padding: 0;
}

.nvx-content__cell ul li
{
    position: relative;
    display: block;
    margin: 10px 0;
    padding-left: 1.35rem;     /* text starts just right of checkbox */
    line-height: 1.55;
    text-indent: 0;
}

.nvx-content__cell ul li::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid #16a34a;
    border-radius: 4px;
    background: #f0fdf4;
}

.nvx-content__cell ul li::after
{
    content: "";
    position: absolute;
    left: 0.26rem;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 0.48rem;
    height: 0.28rem;
    border-left: 3px solid #16a34a;
    border-bottom: 3px solid #16a34a;
}


/* === Content grid: 2-up on desktop, stack on phones; fill gaps ============== */


@media (max-width: 720px)
{
    
}

/* If the total card count is odd, make the last one span full width */


/* Center titles and captions inside content cards */
.nvx-content__title,
.nvx-content__cap
{
    text-align: center;
}

/* Left-align narrative text blocks and lists for proper hanging indent */
.nvx-content__cell ul,
.nvx-content__cell .nvx-content__p
{
    text-align: left;
}

/* === 2-up grid on desktop; stack on phones (flexible width) =============== */
.nvx-content__grid
{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(420px, 1fr)) !important;
    gap: 18px;
    align-items: start;
}
@media (max-width: 900px)
{
    .nvx-content__grid
    {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
}

/* If total cards in a grid is odd, make the last card span full width */


/* Make the very last card span the row ONLY when the total count is odd */
.nvx-content__grid > .nvx-content__cell:last-child:nth-child(odd)
{
    grid-column: 1 / -1;
}

/* ===== NVX v4.0 – Marketing content tweaks (per Dan) =========================
   - Replace green checkbox bullets with simple black bullets
   - Bold the bullet text
   - Remove the short caption line directly under each picture
   - Move the title that was ABOVE each picture to be BELOW it
   - Add ~10px spacer between the picture bottom and the moved title
   - Make those titles bold and slightly larger
   - Apply only to the side‑by‑side marketing cards (non‑carousel)
============================================================================= */

/* 1) Use standard black bullets; kill custom green checkbox markers */
.nvx-content__cell ul {
  list-style: disc !important;
  margin: 10px 0 0 1.1rem !important;   /* left indent for bullets */
  padding: 0 !important;
}
.nvx-content__cell ul li {
  position: static !important;
  display: list-item !important;
  margin: 6px 0 !important;
  padding-left: 0 !important;
  line-height: 1.55 !important;
  text-indent: 0 !important;
  font-weight: 700 !important;          /* bold text to the right of bullet */
}
/* Disable any prior pseudo‑elements that drew green checkboxes */
.nvx-content__cell ul li::before,
.nvx-content__cell ul li::after {
  content: none !important;
}

/* 2) Remove the single‑line caption directly under each picture (non‑carousel).
      This hides a paragraph/caption immediately following a figure/image. */
.nvx-content__figure + .nvx-content__p,
.nvx-content__figure + .nvx-content__cap,
.nvx-content__img + .nvx-content__p,
.nvx-content__img + .nvx-content__cap {
  display: none !important;
}

/* 3) Re‑order blocks so the title sits BELOW the picture.
      We treat each content card as a vertical flex container. */
.nvx-content__cell {
  display: flex !important;
  flex-direction: column !important;
}

/* Picture (figure) first, then title */
.nvx-content__figure,
.nvx-content__img { order: 1 !important; }

/* Title below image */
.nvx-content__title,
.nvx-content__cell > h3 {        /* fallback for plain H3 titles */
  order: 2 !important;
  margin-top: 10px !important;   /* spacer between picture and new title position */
  margin-bottom: 8px !important;
  font-weight: 800 !important;   /* bold */
  font-size: 1.1rem !important;  /* slightly larger */
  text-align: center !important;
  color: #0b5aa7;                /* harmonize with brand blue used for headings */
}

/* Ensure the remaining narrative/bullets come after the title */
.nvx-content__p,
.nvx-content__cell ul { order: 3 !important; }

/* Safety: prevent any legacy spacing from cramming the title against the image */
.nvx-content__figure { margin-bottom: 0 !important; }
.nvx-content__img    { margin-bottom: 0 !important; }