* {
    border: none;
    overflow-x: hidden;
}

html, body {
    margin: 0 auto;
    font-family: sans-serif, Palatino;
    height: 100%;
    min-height: 100%;
    background-color: black;
    /*overflow: hidden;*/
}

/*****************************************
******Text in main body of about page
*****************************************/

p {
    margin: 0 auto;
    font-family: sans-serif, Palatino;
    padding: 3% 18% 30% 18%;
    font-size: 2vw;
    height: 100%;
    color: #647e85;
    overflow-y: hidden;
}

/* Mobile text sizing */
@media only screen and (max-width: 1000px) {
    p { font-size: 2.5vw; }
}
@media only screen and (max-width: 800px) {
    p { font-size: 3vw; }
}
@media only screen and (max-width: 600px) {
    p { font-size: 3.4vw; }
}
@media only screen and (max-width: 400px) {
    p { font-size: 5vw; }
}

/************************************************
The nav and all div sections have a zone class
*************************************************/
.zone {
    /*cursor:pointer;*/
    color:#ffffff;
    font-size:3vw;
    /*transition: all 0.3s linear;*/
}

/***********************************************************************
 *  Nav Bar
 *  NAV bar uses flexbox
 ***********************************************************************/

.main-nav, .foot-nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    font-size: 1.5vw;
    padding: 4%;
}

.foot-nav {
    text-align: center;
    width: 100%;
}

/* Mobile nav text sizing */
@media only screen and (max-width: 1000px) {
    .main-nav, .foot-nav { font-size: 1.8vw; }
}
@media only screen and (max-width: 800px) {
    .main-nav, .foot-nav { font-size: 2.2vw; }
}
@media only screen and (max-width: 600px) {
     .foot-nav { font-size: 3vw; padding: 0; }
}
@media only screen and (max-width: 400px) {
    .foot-nav { font-size: 4vw; padding: 0; }
}

/*This pushes a selection to the far right within nav bar*/
.push { margin-left: auto; }

/*Space between text in nav bar*/
li { padding: 2.5%; }

/* Mobile LI spacing */
@media only screen and (max-width: 1000px) {
    li { padding: 4%; }
}

/*Nav bar text*/
a {
    color: #647e85;
    text-decoration: none;
    display: block;
    font-family: sans-serif, Palatino;
    padding: 0;
    font-size: 2vw;
}

a.words {
    color: #bcbec5;
    font-size: 2.3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 3%;
}

/* Mobile a.words sizing */
@media only screen and (max-width: 500px) {
    a.words { font-size: 5vw; }
}

h4 {
    color: white;
    text-align: center;
    font-size: 1.8vw;
}

/* Mobile h4 sizing */
@media only screen and (max-width: 1000px) {
    h4 { font-size: 2.5vw; padding: 0 25%; }
}
@media only screen and (max-width: 800px) {
    h4 { font-size: 2.9vw; padding: 0 25%; }
}
@media only screen and (max-width: 500px) {
    h4 { font-size: 3vw; padding: 0 25%; }
}

.sticky { position: fixed; top: 0; width: 100%; }

/*Navbar chips bar*/
.navbar {
  width: 100%;
  background-color: #000000;
  overflow: hidden;
  display: flex;
  flex-wrap: center;
  height: 6vh;
}

/* Mobile navbar height */
@media only screen and (max-width: 500px) {
  .navbar { height: 5vh; }
  a.border { height: 4.5vh; }
}

/* Navigation links */
.navbar a {
  float: center;
  color: white;
  text-decoration: none;
  font-size: 18px;
  width: 25%;
  text-align: center;
}

/* Active link */
.navbar a.active { background-color: #4CAF50; }

/* Stack nav links on tiny screens */
@media screen and (max-width: 500px) {
  .navbar a {
    float: left;
    font-size: 1em;
    text-align: center;
    margin: auto;
  }
}

a.nospace { /* spacer hidden by chips kit */ }

a.border {
    border: 2px solid green;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*paypal donate button*/
form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 5% 0 2% 0;
}

.formsize {
    height: 350vh;
    width: 100%;
    overflow-y: hidden;
    padding-top: 5%;
}

/***********************************************************************
 *  Main body with text
 **********************************************************************/
.container {
    height: 6vh; 
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 5% 0 0 0;
    font-size: 5vw;
}

.text { height: 100vh; }

/********************************************
******The selectable circles on main-nav page
********************************************/
.box {
    background-color: #007a35;
    border: none;
    color: white;
    text-align: center;
    font-size: 1.5vw;
    cursor: pointer;
    border-radius: 12px;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    width: 100%;
    font-family: palatino;
    height: 100%;
}

/* Title size ramps */
@media only screen and (max-width: 1000px) {
    .container { font-size: 6vw; }
}
@media only screen and (max-width: 600px) {
    .container { font-size: 7vw; }
}
@media only screen and (max-width: 400px) {
    .container { font-size: 8vw; }
}

.cover { width: 30rem; }

#signature {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
    padding-right: 15%;
    padding-top: 1%;
}

/* signature ramps */
@media only screen and (max-width: 1000px) {
    #signature { font-size: 2.2vw; }
}
@media only screen and (max-width: 800px) {
    #signature { font-size: 2.7vw; }
}
@media only screen and (max-width: 600px) {
    #signature { font-size: 3.1vw; }
}
@media only screen and (max-width: 400px) {
    #signature { font-size: 4.7vw; padding-top: 2%; }
}

.links {
    padding:0 10%;
    text-decoration: underline;
}

/* links padding ramps */
@media only screen and (max-width: 1000px) {
    .links { padding: 0.5% 10%; }
}
@media only screen and (max-width: 800px) {
    .links { padding: 1% 10%; }
}
@media only screen and (max-width: 600px) {
    .links { padding: 1.5% 10%; }
}
@media only screen and (max-width: 400px) {
    .links { padding: 2% 10%; }
}

.link-title { text-decoration: none; padding: 3% 10%; list-style-type: none; }

/**************************************************
*****Container that contains button on donate page
***************************************************/

.container2 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2%;
}

button {
    background-color: #007a35;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    font-size: 1.5vw;
    cursor: pointer;
    border-radius: 12px;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    width: 20%;
    font-family: palatino;
    height: 100% !important;
}

button:hover { background-color: #099b48; }

/* button ramps */
@media only screen and (max-width: 1000px) {
    button { font-size: 1.8vw; padding: 8px 25px; }
}
@media only screen and (max-width: 600px) {
    button { font-size: 3vw; padding: 6px 25px; width: 30%; }
}
@media only screen and (max-width: 400px) {
    button { font-size: 4vw; padding: 8px 25px; width: 50%; }
}

/***********************************************************************
 *  Grid Panel (main-nav page)
 **********************************************************************/
.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    grid-gap: 1%;
    padding: 3% 0 10% 0;
    min-height: 100%;
}

/* Mobile grids (wrapper) */
/* This is how the CSS changes when screen width is below 1000px - Mobile devices */
@media only screen and (max-width: 1000px) {
    .grid-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        grid-auto-rows: minmax(15vh, 18vh);
        grid-row-gap: 5%;
        padding: 3% 0 30% 0;
    }
}
/* This is how the CSS changes when screen width is below 800px - Mobile devices */
@media only screen and (max-width: 800px) {
    .grid-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        grid-auto-rows: minmax(20vh, 30vh);
        grid-row-gap: 5%;
        padding: 3% 0 30% 0;
    }
}
/* This is how the CSS changes when screen width is below 600px - Mobile devices */
@media only screen and (max-width: 600px) {
    .grid-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        grid-auto-rows: minmax(11vh, 11vh);
        padding: 3% 0 60% 0;
    }
}
/* This is how the CSS changes when screen width is below 400px - Mobile devices */
@media only screen and (max-width: 400px) {
    .grid-wrapper {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(8vh, 15vh);
        padding: 3% 0 80% 0;
    }
}

.grid-wrapper1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    grid-gap: 0.1%;
    padding: 3% 0 10% 0;
    min-height: 100%;
    grid-auto-rows: minmax(30vh, 10vh);
}

/* Mobile grids (wrapper1) */
@media only screen and (max-width: 1000px) {
    .grid-wrapper1 {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        grid-auto-rows: minmax(15vh, 18vh);
        grid-row-gap: 5%;
        padding: 3% 0 30% 0;
    }
}
@media only screen and (max-width: 800px) {
    .grid-wrapper1 {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        grid-auto-rows: minmax(15vh, 10vh);
        grid-row-gap: 5%;
        padding: 3% 0 30% 0;
    }
}
@media only screen and (max-width: 600px) {
    .grid-wrapper1 {
        grid-template-columns: 2fr;
        grid-auto-rows: minmax(10vh, 9vh);
        padding: 3% 0 60% 0;
    }
}
@media only screen and (max-width: 400px) {
    .grid-wrapper1 {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(7vh, 8vh);
        padding: 3% 0 80% 0;
    }
}

.grid-wrapper2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
    grid-gap: 1% 1%;
    padding: 3% 2% 10% 2%;
    min-height: 100%;
    grid-auto-rows: minmax(20vh, 10vh);
}

/* Mobile grids (wrapper2) */
@media only screen and (max-width: 600px) {
    .grid-wrapper2 {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        grid-auto-rows: minmax(10vh, 10vh);
    }
}
@media only screen and (max-width: 400px) {
    .grid-wrapper2 {
        grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
        grid-auto-rows: minmax(10vh, 10vh);
    }
}

.toobig { font-size: 5vw; }

/*****************************************************
***************Text inside of nav boxes****************
*****************************************************/
em { font-size: 1.5vw; }
@media only screen and (max-width: 1000px) {
    em { font-size: 2.5vw; }
}

@media only screen and (max-width: 2000px) {
    a.words { font-size: 2.1vw; }
}
@media only screen and (max-width: 800px) {
    a.words { font-size: 2.4vw; }
}
@media only screen and (max-width: 500px) {
    a.words { font-size: 3.5vw; }
}

/* top nav ramps */
@media only screen and (max-width: 1400px) {
    a.top-nav { font-size: 2vw; }
}
@media only screen and (max-width: 800px) {
    a.top-nav { font-size: 3vw; }
}
@media only screen and (max-width: 600px) {
    a.top-nav, a { font-size: 4vw; }
}

.grow { transition: all .4s ease-in-out; }
.grow:hover { transform: scale(1.1); }

/*Perfusion and segment images*/
.img {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.box:hover { background-color: #099b48; }

/****************************************************************
**************Echo segment/perfusion images**********************
*****************************************************************/
@media only screen and (max-width: 1400px) {
    .height-limit { max-height: 80vh; }
}
@media only screen and (max-width: 1000px) {
    .height-limit { max-height: 65vh; }
}
@media only screen and (max-width: 800px) {
    .height-limit { max-height: 60vh; }
}
@media only screen and (max-width: 600px) {
    .height-limit { max-height: 60vh; }
}
@media only screen and (max-width: 450px) {
    .height-limit { max-height: 30vh; }
}

/****************************************************************
***************************Table images**************************
*****************************************************************/
img.height-limit2 {
    padding-top: 5vh;
    height: 100%;
}
@media only screen and (max-width: 1400px) {
    img.height-limit2 { max-height: 100vh; }
}
@media only screen and (max-width: 1000px) {
    img.height-limit2 { max-height: 100vh; }
}
@media only screen and (max-width: 800px) {
    img.height-limit2 { max-height: 100vh; padding: 0; }
}
@media only screen and (max-width: 600px) {
    img.height-limit2 { max-height: 70vh; }
}
@media only screen and (max-width: 450px) {
    img.height-limit2 { max-height: 50vh; }
}

/***********************************************************************
 *  Footer
 **********************************************************************/
.foot {
    font-size: 1.5vw;
    padding: 0;
    position: relative;
    bottom: 0;
}

footer {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    background-color: #444;
    width: 100%;
}

/* footer ramps */
@media only screen and (max-width: 1000px) {
    .foot { font-size: 2.1vw; padding: 0; }
}
@media only screen and (max-width: 600px) {
    .foot { font-size: 3vw; padding: 0; }
}
@media only screen and (max-width: 300px) {
    .foot { font-size: 4vw; padding: 0; }
}

.bottom-section { /*padding: 0 2%;*/ }

@media only screen and (max-width: 400px) {
    .foot {
        font-size: 3vw;
        padding: 0;
        display: inline-block;
        vertical-align: bottom;
    }
}

/***********************************************************************
 *  Backgrounds
 **********************************************************************/
.nav-bar, p { background: #000000; }
.body { background: #000000; }
.text {
    background: #203a43;
    background: -moz-linear-gradient(top, #203a43 20%, #0f2027 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#203a43), color-stop(100%,#0f2027));
    background: -webkit-linear-gradient(top, #203a43 20%,#0f2027 100%);
    background: -o-linear-gradient(top, #203a43 20%,#0f2027 100%);
    background: -ms-linear-gradient(top, #203a43 20%,#0f2027 100%);
    background: linear-gradient(top, #203a43 20%,#0f2027 100%);
}
.bottom-section { background: #000000; }

/***********************************************************************
 *  Main-Nav with multiple boxes
 **********************************************************************/
.navigation { background: #000000; }
.image-screens { background: #203a43; height: 100vh; }

/*Space between text in nav bar*/
li { padding: 1% 3%; }
.top { padding: 4%; }

/* ======================= DG TABLE KIT (shared) =======================
   Put this at the very bottom of style3.css. Order matters.
   Page HTML should wrap tables in #dg-embed and use .dg-* classes as shown.
====================================================================== */

#dg-embed{
  --dg-accent:#00ff66; --dg-head:rgb(40,133,199);
  --dg-bg:#000; --dg-text:#fff;
  --dg-outer:4px; --dg-line:2px; --dg-hsep:2px; --dg-hrim:4px;
  color:var(--dg-text); background:var(--dg-bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#dg-embed *{ box-sizing:border-box; }

/* ---------- BLUE HEADER BAND ---------- */
.dg-headerwrap{
  border:var(--dg-hrim) solid var(--dg-head);
  border-radius:18px; overflow:hidden; background:var(--dg-bg); margin-bottom:8px;
}

/* Base header grid; tracks set below depending on single vs multi */
.dg-header{ display:grid; width:100%; }

/* Header cell visuals */
.dg-hcell{
  display:flex; align-items:center; justify-content:center;
  padding:20px 12px; min-height:88px;
  text-align:center; font-weight:700; line-height:1.12;
  font-size: clamp(.82rem, 2.6vw, 1.08rem);
  overflow:hidden; border-right:var(--dg-hsep) solid var(--dg-head);
}
.dg-hcell:last-child{ border-right:none; }

/* Keep multi-column header labels on one line under 440px */
@media (max-width:440px){
  .dg-header .dg-hcell{ font-size: clamp(.72rem, 2.6vw, .96rem); padding: 18px 8px; }
  .dg-header .dg-wrap{ white-space: nowrap; }
}

/* ---------- GREEN TABLE ---------- */
.dg-tablewrap{ border:var(--dg-outer) solid var(--dg-accent); border-radius:18px; overflow:hidden; background:var(--dg-bg); }
.dg-table{ width:100%; border-collapse:collapse; table-layout:fixed; text-align:center; }
.dg-table th, .dg-table td{
  border:var(--dg-line) solid var(--dg-accent);
  padding:22px 10px; line-height:1.2; background:transparent; text-align:center;
  white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: none;
  overflow: hidden; text-overflow: clip;
}

/* First column: blue tint + base size (do NOT move this below the shrink rule) */
.dg-table th.dg-col1{
  font-weight:800;
  font-size:clamp(.95rem, 2.5vw, 1.08rem);
  background: rgba(40, 133, 199, 0.22);
}
@media (max-width:360px){
  .dg-table th.dg-col1{ font-size:clamp(.82rem, 3.0vw, 1.02rem); letter-spacing:-0.006em; }
}

/* Data columns a touch smaller for contrast */
.dg-table td{ font-weight:600; font-size:clamp(.84rem, 2.1vw, .96rem); }

/* Wrap content to max 3 lines — wrap each cell’s text in <div class="dg-wrap">…</div> */
.dg-wrap{
  display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow:hidden; white-space: normal;
}

/* Non-breaking unit helper: <span class="dg-nb">cm²/m²</span> */
.dg-nb{ white-space: nowrap; display:inline-block; }

/* Column width bias on tiny screens (for 4-col tables) */
.dg-table col{ width:25%; }
@media (max-width:400px){
  .dg-table col.dg-col1-col{ width:31%; }
  .dg-table col.dg-col2-col, .dg-table col.dg-col3-col, .dg-table col.dg-col4-col{ width:23%; }
}
@media (max-width:340px){
  .dg-table col.dg-col1-col{ width:33.5%; }
  .dg-table col.dg-col2-col, .dg-table col.dg-col3-col, .dg-table col.dg-col4-col{ width:22.17%; }
}
@media (max-width:320px){
  .dg-table col.dg-col1-col{ width:36.5%; }
  .dg-table col.dg-col2-col, .dg-table col.dg-col3-col, .dg-table col.dg-col4-col{ width:21.17%; }
}

/* Tiny header/data tuning (does NOT touch first-column size) */
@media (max-width:360px){
  .dg-hcell{ font-size: clamp(.70rem, 3.0vw, .98rem); padding: 18px 10px; min-height: 84px; line-height: 1.10; }
  .dg-table td{ font-size: clamp(.72rem, 2.8vw, .92rem); padding: 16px 8px; line-height: 1.16; }
}
@media (max-width:320px){
  .dg-hcell{ font-size: clamp(.60rem, 3.2vw, .92rem); padding: 14px 8px; min-height: 72px; line-height: 1.10; }
  .dg-table td{ font-size: clamp(.62rem, 3.0vw, .88rem); padding: 14px 6px; line-height: 1.16; }
}

/* ****** KEEP THIS LAST ******
   First-column shrink under 745px — overrides font-size/padding ONLY (keeps blue background) */
@media (max-width:745px){
  .dg-table th.dg-col1{
    font-size: clamp(.58rem, 1.9vw, .86rem);
    padding: 16px 8px;
    line-height: 1.12;
  }
}

/* ================= NAV CHIPS KIT (shared) =================
   Applies to the <div class="navbar">…</div> chips on all pages.
============================================================ */

.navbar{
  display:flex; justify-content:center; align-items:stretch; gap:0 !important;
  height:auto !important; min-height:40px; padding:0; margin:0 auto; width:100%;
  overflow:visible !important;
}
.navbar a.nospace{ display:none !important; }  /* hide spacers so chips can touch */

.navbar a.border,
.navbar a.active.border{
  position: static !important;
  float: none !important;
  display: inline-flex !important;
  box-sizing: border-box !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;

  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  word-break: normal !important;
  text-overflow: clip !important;
  align-items: center !important;
  justify-content: center !important;

  border: 2px solid green !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;

  font-size: clamp(.66rem, 2.4vw, 1rem) !important;
  line-height: 1.05 !important;
  padding: clamp(6px, 1.1vw, 12px) clamp(12px, 2.2vw, 20px) !important;

  flex: 0 0 auto !important;
  text-align:center !important;
}
.navbar a.active.border{ background-color:#4CAF50 !important; border-color:green !important; }

/* Touching seam (shared border) */
.navbar a.border + .navbar a.border{ margin-left:-2px !important; }

/* ▼ Narrower below 700px */
@media (max-width:700px){
  .navbar a.border,
  .navbar a.active.border{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.12 !important;
    flex-basis: clamp(150px, 30vw, 230px) !important;
    padding: 6px 10px !important;
  }
}

/* ▼ Further shorten under 500px */
@media (max-width:500px){
  .navbar a.border,
  .navbar a.active.border{
    flex-basis: clamp(120px, 26vw, 180px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Extra-small phones */
@media (max-width:420px){
  .navbar a.border,
  .navbar a.active.border{
    font-size: clamp(.58rem, 2vw, .88rem) !important;
    padding: 5px 8px !important;
  }
}
@media (max-width:340px){
  .navbar a.border,
  .navbar a.active.border{
    font-size: clamp(.54rem, 2vw, .84rem) !important;
    padding: 4px 8px !important;
  }
}

/* Mid-band widening: 700–999 px */
@media (min-width:700px) and (max-width:999px){
  .navbar a.border,
  .navbar a.active.border{
    flex-basis: clamp(180px, 22vw, 260px) !important;
    padding-left: clamp(14px, 1.6vw, 24px) !important;
    padding-right: clamp(14px, 1.6vw, 24px) !important;
    font-size: clamp(.82rem, 1.1vw, 1rem) !important;
  }
}

/* Desktop widening: ≥1000px */
@media (min-width:1000px){
  .navbar a.border,
  .navbar a.active.border{
    flex-basis: clamp(220px, 16vw, 300px) !important;
    padding-left: clamp(18px, 1.2vw, 28px) !important;
    padding-right: clamp(18px, 1.2vw, 28px) !important;
    font-size: clamp(.86rem, 1vw, 1.06rem) !important;
  }
}

/* ===== Prevent header clamp from clipping single words like "MODERATE" ===== */
#dg-embed .dg-header .dg-wrap{
  display:inline;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  white-space: nowrap;
}

/* Give headers a touch more room on small screens */
@media (max-width:480px){
  #dg-embed .dg-header .dg-hcell{
    font-size: clamp(.68rem, 2.8vw, .94rem);
    padding: 16px 8px;
  }
}
@media (max-width:360px){
  #dg-embed .dg-header .dg-hcell{
    font-size: clamp(.64rem, 3.0vw, .90rem);
  }
}

/* Widen the table zone on phones (match stenosis page) */
@media (max-width:600px){ .final{ padding-left:6% !important; padding-right:6% !important; } }
@media (max-width:400px){ .final{ padding-left:4% !important; padding-right:4% !important; } }
@media (max-width:340px){ .final{ padding-left:3% !important; padding-right:3% !important; } }
@media (max-width:320px){ .final{ padding-left:2.5% !important; padding-right:2.5% !important; } }

/* ===== Expand table cell text to 4 lines (rows auto-grow) ===== */
#dg-embed .dg-table th .dg-wrap,
#dg-embed .dg-table td .dg-wrap{
  -webkit-line-clamp: 4 !important; /* was 3 */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Ensure soft hyphens &shy; still work in cells */
#dg-embed .dg-table .dg-wrap{
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* ===================== GLOBAL: single-column header + unit scrollbars ===================== */

/* Hide any residual tiny scrollbars in clamped wrappers */
#dg-embed .dg-wrap { scrollbar-width: none; -ms-overflow-style: none; }
#dg-embed .dg-wrap::-webkit-scrollbar { width: 0; height: 0; }

/* Kill tiny scrollbars for unit cells (cm², m², cm²/m², etc.) whether or not .dg-wrap exists */
#dg-embed .dg-table td,
#dg-embed .dg-table th {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge legacy */
}
#dg-embed .dg-table td::-webkit-scrollbar,
#dg-embed .dg-table th::-webkit-scrollbar { width: 0; height: 0; }

/* Keep unit clusters together and baseline-aligned (use this span when you can) */
#dg-embed .dg-nb {
  white-space: nowrap !important;
  display: inline !important;
  vertical-align: baseline !important;
  line-height: inherit !important;
}

/* --- Keep scrollbar space stable so nothing nudges left/right on click --- */
@supports (scrollbar-gutter: stable) {
  html, body { scrollbar-gutter: stable both-edges; }
}
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; } /* fallback */
}

/* Global page title size */
.container.zone.body{
  font-size: clamp(1.6rem, 4.5vw, 6.5rem);
  line-height: 1.12;
}

/* Stronger mobile growth for "box zone grow" labels between 600px and 320px */
@media (max-width: 600px){
  .box.zone.grow .words,
  .box.zone.grow a{
    font-size: clamp(1em, calc(1em + 0.6em * (600px - 100vw) / 280), 1.6em);
    line-height: 1.15;
  }
}

/* Safety cap on very tiny screens */
@media (max-width: 320px){
  .box.zone.grow .words,
  .box.zone.grow a{
    font-size: 1.6em;
  }
}

/* PHONE-ONLY: smaller tiles + larger labels (desktop unchanged) */
@media (max-width: 600px){
  .grid-wrapper,
  .grid-wrapper1,
  .grid-wrapper2{
    grid-auto-rows: clamp(60px, 8vh, 96px) !important;
  }

  .box.zone.grow .words,
  .box.zone.grow a{
    font-size: clamp(1.15rem, 4.8vw, 1.8rem) !important;
    line-height: 1.12;
    padding: 0 4% !important;
    white-space: normal;
  }

  .grow:hover{ transform: none; }
}

/* Tiny phones: allow just a touch more text size without growing the tile */
@media (max-width: 360px){
  .box.zone.grow .words,
  .box.zone.grow a{
    font-size: clamp(1.2rem, 5.2vw, 1.9rem) !important;
  }
}

/* Optional: a touch more tile height under 400px */
@media (max-width: 400px){
  .grid-wrapper,
  .grid-wrapper1,
  .grid-wrapper2{
    grid-auto-rows: clamp(64px, 9vh, 102px) !important;
  }
}

/* <400px: slightly smaller text inside calculator buttons */
@media (max-width: 400px){
  #mr-embed .mr-btn,
  #tr-embed .mr-btn,
  #pi-embed .mr-btn,
  #lavi-embed .mr-btn{
    font-size: clamp(.78rem, 3.6vw, .9rem) !important;
    line-height: 1.1;
  }
}

/* 600–1100px: grow the tile/box labels ("box zone grow") */
@media (min-width: 600px) and (max-width: 1100px){
  .box.zone.grow .words,
  .box.zone.grow a.words{
    font-size: clamp(1.35rem, 3.2vw, 2.2rem) !important;
    line-height: 1.12;
  }
}

/* Under 600px: make "box zone grow" words a bit smaller (subtle) */
@media (max-width: 600px){
  .box.zone.grow .words,
  .box.zone.grow a.words{
    font-size: clamp(0.95rem, calc(0.95rem + 0.35rem * (600px - 100vw) / 280), 1.35rem) !important;
    line-height: 1.12;
  }
}

/* Phones ≤600px: shrink the labels a bit */
@media (max-width: 600px){
  .box.zone.grow > a.words{
    font-size: 1.05rem !important;
    line-height: 1.12;
  }
}

/* === Parity fix: make c5 match c2–c4 on tiny screens === */
@media (max-width:420px){
  #dg-embed .dg-table td.dg-c2,
  #dg-embed .dg-table td.dg-c3,
  #dg-embed .dg-table td.dg-c4,
  #dg-embed .dg-table td.dg-c5{
    font-size: clamp(.28rem, 1.45vw, .46rem) !important;
    line-height: 1.12 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    letter-spacing: -0.014em !important;
  }
  /* ensure inner lines in c5 don't self-shrink */
  #dg-embed .dg-table td.dg-c5 .dg-range,
  #dg-embed .dg-table td.dg-c5 .dg-unit{
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
}

/* =========================
   Units parity under tight widths
   ========================= */
@media (max-width:420px){
  #dg-embed .dg-table td.dg-c2 .dg-unit,
  #dg-embed .dg-table td.dg-c3 .dg-unit,
  #dg-embed .dg-table td.dg-c4 .dg-unit,
  #dg-embed .dg-table td.dg-c5 .dg-unit{
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
}
@media (max-width:600px){
  #dg-embed .dg-table td.dg-c2 .dg-unit,
  #dg-embed .dg-table td.dg-c3 .dg-unit,
  #dg-embed .dg-table td.dg-c4 .dg-unit,
  #dg-embed .dg-table td.dg-c5 .dg-unit{
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
}

/* ===============================
   DG TABLES — GLOBAL DATA PARITY
   =============================== */

/* 0) Base: make ALL data cells share the same metrics */
#dg-embed .dg-table td,
#dg-embed .dg-table td.dg-c2,
#dg-embed .dg-table td.dg-c3,
#dg-embed .dg-table td.dg-c4,
#dg-embed .dg-table td.dg-c5,
#dg-embed .dg-table td:last-child{
  --dg-data-size: clamp(.84rem, 2.1vw, .96rem);
  --dg-data-pad-v: 22px;
  --dg-data-pad-h: 10px;
  --dg-data-lh: 1.2;
  --dg-data-ls: 0;

  font-weight: 600 !important;
  font-size: var(--dg-data-size) !important;
  line-height: var(--dg-data-lh) !important;
  letter-spacing: var(--dg-data-ls) !important;
  padding: var(--dg-data-pad-v) var(--dg-data-pad-h) !important;
}

/* 1) Tighten progressively — applies equally to ALL data columns */
@media (max-width:1000px){
  #dg-embed .dg-table td,
  #dg-embed .dg-table td.dg-c2,
  #dg-embed .dg-table td.dg-c3,
  #dg-embed .dg-table td.dg-c4,
  #dg-embed .dg-table td.dg-c5,
  #dg-embed .dg-table td:last-child{
    --dg-data-size: clamp(.54rem, 1.35vw, .74rem);
    --dg-data-pad-v: 14px;
    --dg-data-pad-h: 8px;
    --dg-data-lh: 1.16;
    --dg-data-ls: -0.006em;
  }
}
@media (max-width:600px){
  #dg-embed .dg-table td,
  #dg-embed .dg-table td.dg-c2,
  #dg-embed .dg-table td.dg-c3,
  #dg-embed .dg-table td.dg-c4,
  #dg-embed .dg-table td.dg-c5,
  #dg-embed .dg-table td:last-child{
    --dg-data-size: clamp(.38rem, 1.65vw, .56rem);
    --dg-data-pad-v: 10px;
    --dg-data-pad-h: 4px;
    --dg-data-lh: 1.14;
    --dg-data-ls: -0.012em;
  }
}
@media (max-width:420px){
  #dg-embed .dg-table td,
  #dg-embed .dg-table td.dg-c2,
  #dg-embed .dg-table td.dg-c3,
  #dg-embed .dg-table td.dg-c4,
  #dg-embed .dg-table td.dg-c5,
  #dg-embed .dg-table td:last-child{
    --dg-data-size: clamp(.28rem, 1.45vw, .46rem);
    --dg-data-pad-v: 8px;
    --dg-data-pad-h: 3px;
    --dg-data-lh: 1.12;
    --dg-data-ls: -0.014em;
  }
}

/* 2) Make inner lines follow the cell size (units & values stay in sync) */
#dg-embed .dg-table td .dg-range,
#dg-embed .dg-table td .dg-unit{
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* 3) Keep operator+number glued; dash may break */
#dg-embed .dg-range .dg-nb{ white-space: nowrap !important; }

/* 4) Nuke any sneaky last-column font overrides from older rules */
#dg-embed .dg-table td:last-child *{
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* =========================================================
   HEADERS: SINGLE vs MULTI — LAYOUT + LOCKSTEP WIDTHS
   ========================================================= */

/* A) Single-band headers (e.g., LA): one centered full-width cell */
#dg-embed .dg-header.dg-single{
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  width: 100% !important;
}
#dg-embed .dg-header.dg-single .dg-hcell{
  grid-column: 1 / -1 !important;
  border-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  min-height: 96px !important;
  padding: 20px 12px !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  font-size: clamp(.96rem, 2.2vw, 1.20rem) !important;
}
#dg-embed .dg-header.dg-single .dg-hcell .dg-wrap{
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}
@media (max-width:600px){
  #dg-embed .dg-header.dg-single .dg-hcell{
    min-height: 88px !important;
    font-size: clamp(.86rem, 2.8vw, 1.08rem) !important;
    padding: 18px 10px !important;
  }
}
@media (max-width:420px){
  #dg-embed .dg-header.dg-single .dg-hcell{
    min-height: 86px !important;
    font-size: clamp(.82rem, 3.2vw, 1.06rem) !important;
    padding: 16px 8px !important;
  }
}

/* B) Multi-column headers (valve pages): equal tracks, one row */
#dg-embed .dg-header:not(.dg-single){
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;   /* one equal-width track per header cell */
  width: 100% !important;
}

/* Keep MILD/MODERATE/SEVERE on one line */
#dg-embed .dg-header:not(.dg-single) .dg-wrap{ white-space: nowrap !important; }

/* Match table col bias on tiny screens (4-column tables) */
@media (max-width:400px){
  #dg-embed .dg-header:not(.dg-single){
    grid-template-columns: 31% 23% 23% 23% !important;
    grid-auto-columns: unset !important;
  }
}
@media (max-width:340px){
  #dg-embed .dg-header:not(.dg-single){
    grid-template-columns: 33.5% 22.17% 22.17% 22.17% !important;
    grid-auto-columns: unset !important;
  }
}
@media (max-width:320px){
  #dg-embed .dg-header:not(.dg-single){
    grid-template-columns: 36.5% 21.17% 21.17% 21.17% !important;
    grid-auto-columns: unset !important;
  }
}

/* Header height + font ramps (applies to both modes) */
#dg-embed .dg-header .dg-hcell{
  min-height: 96px !important;
  padding: 20px 12px !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  font-size: clamp(.96rem, 2.2vw, 1.20rem) !important;
}
@media (max-width:1000px){
  #dg-embed .dg-header .dg-hcell{
    min-height: 92px !important;
    font-size: clamp(.90rem, 2.1vw, 1.12rem) !important;
    padding: 18px 10px !important;
  }
}
@media (max-width:600px){
  #dg-embed .dg-header .dg-hcell{
    min-height: 88px !important;
    font-size: clamp(.86rem, 2.6vw, 1.08rem) !important;
  }
}
@media (max-width:420px){
  #dg-embed .dg-header .dg-hcell{
    min-height: 86px !important;
    font-size: clamp(.82rem, 3.2vw, 1.06rem) !important;
    padding: 16px 8px !important;
  }
}

/* Width parity with the green table wrapper */
#dg-embed,
#dg-embed .dg-headerwrap,
#dg-embed .dg-tablewrap,
#dg-embed .dg-table{
  width:100% !important;
  max-width:none !important;
}

/* Make sure there’s no stray right border on the last header cell */
#dg-embed .dg-header .dg-hcell:last-child{ border-right:none !important; }

/* =========================================================
   GLOBAL FIXES — paste at the very bottom of style3.css
   ========================================================= */

/* 0) Treat .dg-singlecol like .dg-single (single-band centered header) */
#dg-embed .dg-header.dg-singlecol{
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
  width: 100% !important;
}
#dg-embed .dg-header.dg-singlecol .dg-hcell{
  border-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* 1) Header alignment: keep CENTERED at ALL widths (overrides page-scoped left-shifts) */
#dg-embed .dg-header .dg-hcell,
#dg-embed .dg-headertable th{
  text-align: center !important;
  justify-content: center !important; /* for flex headers */
}
@media (max-width:400px){
  #dg-embed .dg-header .dg-hcell,
  #dg-embed .dg-headertable th{
    text-align: center !important;
    justify-content: center !important;
  }
}

/* 2) Kill any tiny scrollbars in header cells (defensive) */
#dg-embed .dg-header .dg-hcell .dg-wrap{
  overflow: visible !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
#dg-embed .dg-header .dg-hcell .dg-wrap::-webkit-scrollbar{ width:0; height:0; }

/* 3) SMALL-SCREEN LEGIBILITY BOOST (≤420px):
      Make ALL green-table text notably larger, including the first column label. */
@media (max-width:420px){
  /* Data cells (all columns) */
  #dg-embed .dg-table td,
  #dg-embed .dg-table td.dg-c2,
  #dg-embed .dg-table td.dg-c3,
  #dg-embed .dg-table td.dg-c4,
  #dg-embed .dg-table td.dg-c5,
  #dg-embed .dg-table td:last-child{
    --dg-data-size: clamp(.66rem, 3.6vw, .55rem) !important;  /* was ~.28–.46rem: too tiny */
    --dg-data-pad-v: 10px !important;
    --dg-data-pad-h: 4px !important;
    --dg-data-lh: 1.16 !important;
    --dg-data-ls: -0.006em !important;
    font-size: var(--dg-data-size) !important;
    line-height: var(--dg-data-lh) !important;
    letter-spacing: var(--dg-data-ls) !important;
    padding: var(--dg-data-pad-v) var(--dg-data-pad-h) !important;
  }

  /* First column label (so labels don’t look anemic vs data) */
  #dg-embed .dg-table th.dg-col1{
    font-size: clamp(.72rem, 3.8vw, 1.02rem) !important;
    line-height: 1.14 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    letter-spacing: -0.006em !important;
  }

  /* Keep values and units in sync inside cells when we scale */
  #dg-embed .dg-table td .dg-range,
  #dg-embed .dg-table td .dg-unit{
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
}

/* 4) (Optional but safe) If you use a range dash + second-line units, never scroll */
#dg-embed .dg-wrap, #dg-embed .dg-range, #dg-embed .dg-unit{
  overflow: visible !important;
}
#dg-embed .dg-wrap::-webkit-scrollbar,
#dg-embed .dg-table td::-webkit-scrollbar,
#dg-embed .dg-table th::-webkit-scrollbar{ width:0; height:0; }


/* =========================================================
   RV-PARITY PATCH (place at end of style3.css)
   1) Blue header text size = match RV everywhere
   2) Under 420px, first-column labels wrap cleanly (no spill)
   ========================================================= */

/* --- 1) BLUE HEADER TEXT SIZE: lock to RV baseline for both header types --- */
/* Multi-column (table header) and single/grid header share the same sizing */
#dg-embed .dg-headertable .dg-hcell,
#dg-embed .dg-header .dg-hcell{
  font-size: clamp(.82rem, 2.6vw, 1.08rem) !important;  /* RV baseline */
  line-height: 1.12 !important;
}

/* RV-style ramps (do NOT change your header layout/min-height, just size) */
@media (max-width:1000px){
  #dg-embed .dg-headertable .dg-hcell,
  #dg-embed .dg-header .dg-hcell{
    font-size: clamp(.64rem, 1.65vw, .92rem) !important;
  }
}
@media (max-width:600px){
  #dg-embed .dg-headertable .dg-hcell,
  #dg-embed .dg-header .dg-hcell{
    font-size: clamp(.48rem, 1.7vw, .70rem) !important;
  }
}
@media (max-width:420px){
  #dg-embed .dg-headertable .dg-hcell,
  #dg-embed .dg-header .dg-hcell{
    font-size: clamp(.38rem, 1.5vw, .56rem) !important;
  }
}

/* --- 2) FIRST-COLUMN LABELS (≤420px): shrink + free-wrap so they never spill --- */
@media (max-width:420px){
  /* Make the label text smaller and allow natural multi-line wrapping */
  #dg-embed .dg-table th.dg-col1{
    font-size: clamp(.36rem, 2.2vw, .54rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.012em !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Remove any clamps and force wrap inside the label wrapper */
  #dg-embed .dg-table th.dg-col1 .dg-wrap{
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;  /* last-resort wraps for narrow phones */
    hyphens: manual !important;          /* keeps your soft hyphens working */
  }
}

/* Keep value/unit in data cells following the cell size (parity + no spill) */
@media (max-width:420px){
  #dg-embed .dg-table td .dg-range,
  #dg-embed .dg-table td .dg-unit{
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
}

/* =========================================================
   SINGLE-COLUMN BLUE HEADER EXCEPTION — bigger text only
   (keeps multi-column headers on RV baseline)
   Place after the RV-parity patch.
   ========================================================= */
#dg-embed .dg-header.dg-single .dg-hcell,
#dg-embed .dg-header.dg-singlecol .dg-hcell{
  font-size: clamp(.96rem, 2.6vw, 1.20rem) !important; /* bigger than RV baseline */
  line-height: 1.14 !important;
}

/* Size ramps for single-column headers (still larger than multi-col at each step) */
@media (max-width:1000px){
  #dg-embed .dg-header.dg-single .dg-hcell,
  #dg-embed .dg-header.dg-singlecol .dg-hcell{
    font-size: clamp(.90rem, 2.1vw, 1.12rem) !important;
  }
}
@media (max-width:600px){
  #dg-embed .dg-header.dg-single .dg-hcell,
  #dg-embed .dg-header.dg-singlecol .dg-hcell{
    font-size: clamp(.86rem, 2.6vw, 1.08rem) !important;
  }
}
@media (max-width:420px){
  #dg-embed .dg-header.dg-single .dg-hcell,
  #dg-embed .dg-header.dg-singlecol .dg-hcell{
    font-size: clamp(.82rem, 3.2vw, 1.06rem) !important;
  }
}

/* ==== RV HEADER: make the blue band ~2× taller (works for both header types) ==== */
#dg-embed .dg-headertable .dg-hcell,
#dg-embed .dg-header .dg-hcell{
  min-height: 176px !important;     /* was ~88–96px */
  padding-top: 32px !important;      /* was ~20px */
  padding-bottom: 32px !important;
}

/* (Optional) If that’s too tall on small phones, uncomment this block:
@media (max-width:480px){
  #dg-embed .dg-headertable .dg-hcell,
  #dg-embed .dg-header .dg-hcell{
    min-height: 140px !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
}
*/

/* ==== UNITS: slightly lighter so the first-line values pop ==== */
#dg-embed .dg-table td .dg-unit,
#dg-embed .dg-table th .dg-unit{
  font-weight: 500 !important;  /* values in the cell stay 600; units get lighter */
  opacity: .9;                  /* subtle de-emphasis (still accessible on black) */
  /* keep unit tokens tidy */
  white-space: nowrap;
  display: inline-block;
}
/* === BLUE HEADER TEXT @ ≤420px (multi-column only) === */
/* Targets both implementations of your multi-column header:
   - the <table class="dg-headertable"> version (e.g., RV pages)
   - the grid <div class="dg-header"> version (valve pages)
   Excludes .dg-single / .dg-singlecol so single-band titles keep their own sizing. */
@media (max-width:420px){
  #dg-embed .dg-headertable .dg-hcell,
  #dg-embed .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
    font-size: clamp(.62rem, 2.8vw, .94rem) !important; /* was ~.38–.56rem */
    line-height: 1.14 !important;
  }
  /* keep labels like MODERATE on one line */
  #dg-embed .dg-headertable .dg-hcell .dg-wrap,
  #dg-embed .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell .dg-wrap{
    white-space: nowrap !important;
  }
}

/* A touch more at ultra-small widths */
@media (max-width:360px){
  #dg-embed .dg-headertable .dg-hcell,
  #dg-embed .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
    font-size: clamp(.58rem, 3vw, .90rem) !important;
  }
}
/* =========================================================
   LEFT VENTRICLE (many columns) — blue-row exception
   Targets only embeds whose aria-label mentions "Left Ventricle".
   Keeps col widths (from your <colgroup>) and just reduces header
   font-size/height + allows wrapping in header labels.
   ========================================================= */

/* Base (desktop/tablet): shorter header, smaller text */
#dg-embed[aria-label*="Left Ventricle"] .dg-headertable .dg-hcell,
#dg-embed[aria-label*="Left Ventricle"] .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
  min-height: 64px !important;         /* shorter than global */
  padding: 10px 6px !important;         /* tighter vertical padding */
  font-size: clamp(.70rem, 1.9vw, .96rem) !important;
  line-height: 1.10 !important;
  font-weight: 600 !important;          /* a touch lighter = narrower text */
}

/* Allow header labels to wrap (e.g., “LOW NORMAL”) */
#dg-embed[aria-label*="Left Ventricle"] .dg-headertable .dg-hcell .dg-wrap,
#dg-embed[aria-label*="Left Ventricle"] .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell .dg-wrap{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

/* ≤600px: further tighten */
@media (max-width:600px){
  #dg-embed[aria-label*="Left Ventricle"] .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Left Ventricle"] .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
    min-height: 54px !important;
    padding: 8px 6px !important;
    font-size: clamp(.52rem, 2.2vw, .78rem) !important; /* smaller than global */
    line-height: 1.08 !important;
  }
}

/* ≤420px: override your global “increase headers” rule with a smaller size */
@media (max-width:420px){
  #dg-embed[aria-label*="Left Ventricle"] .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Left Ventricle"] .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
    min-height: 46px !important;
    padding: 7px 5px !important;
    font-size: clamp(.46rem, 2.5vw, .70rem) !important; /* LV-specific smaller text */
    line-height: 1.08 !important;
    font-weight: 600 !important;
  }

  /* ensure labels wrap freely on tiny phones */
  #dg-embed[aria-label*="Left Ventricle"] .dg-headertable .dg-hcell .dg-wrap,
  #dg-embed[aria-label*="Left Ventricle"] .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell .dg-wrap{
    white-space: normal !important;
  }
}

/* ≤360px: ultra-compact */
@media (max-width:360px){
  #dg-embed[aria-label*="Left Ventricle"] .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Left Ventricle"] .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
    min-height: 42px !important;
    padding: 6px 4px !important;
    font-size: clamp(.42rem, 2.8vw, .64rem) !important;
    line-height: 1.06 !important;
  }
}

/* =========================================================
   VALVE PAGES — blue-row height + wrapping (all column counts)
   Targets any embed whose aria-label contains "Valve".
   ========================================================= */
#dg-embed[aria-label*="Valve"] .dg-headertable .dg-hcell,
#dg-embed[aria-label*="Valve"] .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
  min-height: 64px !important;           /* shorter than global */
  padding: 10px 8px !important;
  font-size: clamp(.72rem, 2.0vw, .98rem) !important;
  line-height: 1.10 !important;
  font-weight: 600 !important;            /* slightly narrower than 700 */
}

/* Allow header labels to wrap (override your global nowrap) */
#dg-embed[aria-label*="Valve"] .dg-headertable .dg-hcell .dg-wrap,
#dg-embed[aria-label*="Valve"] .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell .dg-wrap{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

/* ≤600px: tighten more for all valve headers */
@media (max-width:600px){
  #dg-embed[aria-label*="Valve"] .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Valve"] .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
    min-height: 54px !important;
    padding: 8px 6px !important;
    font-size: clamp(.56rem, 2.1vw, .78rem) !important;
    line-height: 1.08 !important;
  }
}

/* ≤420px: opt out of global "make headers bigger" — smaller on valves */
@media (max-width:420px){
  #dg-embed[aria-label*="Valve"] .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Valve"] .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
    min-height: 46px !important;
    padding: 7px 5px !important;
    font-size: clamp(.48rem, 2.3vw, .70rem) !important;
    line-height: 1.08 !important;
  }
}

/* =========================================================
   6-COLUMN VALVE TABLES — extra small headers on small screens
   Uses :has() to detect a 6th column in the green table's colgroup.
   ========================================================= */
#dg-embed[aria-label*="Valve"]:has(.dg-table col.dg-col6-col) .dg-headertable .dg-hcell,
#dg-embed[aria-label*="Valve"]:has(.dg-table col.dg-col6-col) .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
  /* Desktop/tablet base a touch smaller than other valves */
  min-height: 56px !important;
  padding: 10px 6px !important;
  font-size: clamp(.66rem, 1.8vw, .90rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.005em !important;
}

/* ≤600px: much smaller to prevent spill across 6 tracks */
@media (max-width:600px){
  #dg-embed[aria-label*="Valve"]:has(.dg-table col.dg-col6-col) .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Valve"]:has(.dg-table col.dg-col6-col) .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
    min-height: 48px !important;
    padding: 8px 5px !important;
    font-size: clamp(.46rem, 1.9vw, .66rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.01em !important;
  }

  /* ensure labels wrap freely on 6-col valves */
  #dg-embed[aria-label*="Valve"]:has(.dg-table col.dg-col6-col) .dg-headertable .dg-hcell .dg-wrap,
  #dg-embed[aria-label*="Valve"]:has(.dg-table col.dg-col6-col) .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell .dg-wrap{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* ≤420px: **drastic shrink** for 6-col valves */
@media (max-width:420px){
  #dg-embed[aria-label*="Valve"]:has(.dg-table col.dg-col6-col) .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Valve"]:has(.dg-table col.dg-col6-col) .dg-header:not(.dg-single):not(.dg-singlecol) .dg-hcell{
    min-height: 42px !important;
    padding: 6px 4px !important;
    font-size: clamp(.40rem, 1.7vw, .58rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.012em !important;
    font-weight: 600 !important;
  }
}

/* =========================================================
   CALCULATOR REFERENCE TABLES — shorter blue header rows
   Targets: #mr-embed, #tr-embed, #pi-embed, #lavi-embed
   (keeps column widths from your <colgroup>)
   ========================================================= */
#mr-embed .dg-headertable .dg-hcell,
#mr-embed .dg-header .dg-hcell,
#tr-embed .dg-headertable .dg-hcell,
#tr-embed .dg-header .dg-hcell,
#pi-embed .dg-headertable .dg-hcell,
#pi-embed .dg-header .dg-hcell,
#lavi-embed .dg-headertable .dg-hcell,
#lavi-embed .dg-header .dg-hcell{
  min-height: 56px !important;       /* was 88px from the base rule */
  padding: 12px 8px !important;
  font-size: clamp(.78rem, 2.4vw, 1.02rem) !important;
  line-height: 1.10 !important;
  font-weight: 600 !important;        /* a little narrower than 700 */
}

/* ≤ 600px: tighter */
@media (max-width:600px){
  #mr-embed .dg-headertable .dg-hcell, #mr-embed .dg-header .dg-hcell,
  #tr-embed .dg-headertable .dg-hcell, #tr-embed .dg-header .dg-hcell,
  #pi-embed .dg-headertable .dg-hcell, #pi-embed .dg-header .dg-hcell,
  #lavi-embed .dg-headertable .dg-hcell, #lavi-embed .dg-header .dg-hcell{
    min-height: 48px !important;
    padding: 10px 6px !important;
    font-size: clamp(.60rem, 2.2vw, .88rem) !important;
    line-height: 1.08 !important;
  }
}

/* ≤ 420px: shortest + compact text */
@media (max-width:420px){
  #mr-embed .dg-headertable .dg-hcell, #mr-embed .dg-header .dg-hcell,
  #tr-embed .dg-headertable .dg-hcell, #tr-embed .dg-header .dg-hcell,
  #pi-embed .dg-headertable .dg-hcell, #pi-embed .dg-header .dg-hcell,
  #lavi-embed .dg-headertable .dg-hcell, #lavi-embed .dg-header .dg-hcell{
    min-height: 42px !important;
    padding: 8px 4px !important;
    font-size: clamp(.52rem, 2.1vw, .80rem) !important;
    line-height: 1.06 !important;
  }
}
/* =========================================================
   CALCULATOR PAGES — shorten blue header rows for the
   reference tables that come AFTER the calculator embed.
   Works for MR/TR/PI/LAVI calculator pages.
   ========================================================= */

/* Desktop/base */
#mr-embed ~ #dg-embed .dg-headertable .dg-hcell,
#mr-embed ~ #dg-embed .dg-header .dg-hcell,
#tr-embed ~ #dg-embed .dg-headertable .dg-hcell,
#tr-embed ~ #dg-embed .dg-header .dg-hcell,
#pi-embed ~ #dg-embed .dg-headertable .dg-hcell,
#pi-embed ~ #dg-embed .dg-header .dg-hcell,
#lavi-embed ~ #dg-embed .dg-headertable .dg-hcell,
#lavi-embed ~ #dg-embed .dg-header .dg-hcell{
  min-height: 56px !important;        /* was ~88–96px */
  padding: 12px 8px !important;
  font-size: clamp(.78rem, 2.4vw, 1.02rem) !important;
  line-height: 1.10 !important;
  font-weight: 600 !important;         /* slightly narrower text than 700 */
}

/* ≤ 600px: tighter */
@media (max-width:600px){
  #mr-embed ~ #dg-embed .dg-headertable .dg-hcell,
  #mr-embed ~ #dg-embed .dg-header .dg-hcell,
  #tr-embed ~ #dg-embed .dg-headertable .dg-hcell,
  #tr-embed ~ #dg-embed .dg-header .dg-hcell,
  #pi-embed ~ #dg-embed .dg-headertable .dg-hcell,
  #pi-embed ~ #dg-embed .dg-header .dg-hcell,
  #lavi-embed ~ #dg-embed .dg-headertable .dg-hcell,
  #lavi-embed ~ #dg-embed .dg-header .dg-hcell{
    min-height: 48px !important;
    padding: 10px 6px !important;
    font-size: clamp(.60rem, 2.2vw, .88rem) !important;
    line-height: 1.08 !important;
  }
}

/* ≤ 420px: shortest + compact text */
@media (max-width:420px){
  #mr-embed ~ #dg-embed .dg-headertable .dg-hcell,
  #mr-embed ~ #dg-embed .dg-header .dg-hcell,
  #tr-embed ~ #dg-embed .dg-headertable .dg-hcell,
  #tr-embed ~ #dg-embed .dg-header .dg-hcell,
  #pi-embed ~ #dg-embed .dg-headertable .dg-hcell,
  #pi-embed ~ #dg-embed .dg-header .dg-hcell,
  #lavi-embed ~ #dg-embed .dg-headertable .dg-hcell,
  #lavi-embed ~ #dg-embed .dg-header .dg-hcell{
    min-height: 42px !important;
    padding: 8px 4px !important;
    font-size: clamp(.56rem, 2.1vw, .80rem) !important;
    line-height: 1.06 !important;
  }
}

/* =========================
   PROSTHETIC PAGES — match blue header height/sizing to others
   Targets any #dg-embed whose aria-label contains “Prosthesis” or “Prosthetic”
   ========================= */
#dg-embed[aria-label*="Prosthesis"] .dg-headertable .dg-hcell,
#dg-embed[aria-label*="Prosthesis"] .dg-header .dg-hcell,
#dg-embed[aria-label*="Prosthetic"] .dg-headertable .dg-hcell,
#dg-embed[aria-label*="Prosthetic"] .dg-header .dg-hcell{
  min-height: 56px !important;
  padding: 12px 8px !important;
  font-size: clamp(.78rem, 2.4vw, 1.02rem) !important;
  line-height: 1.10 !important;
  font-weight: 600 !important;
}

/* ≤600px: tighter */
@media (max-width:600px){
  #dg-embed[aria-label*="Prosthesis"] .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Prosthesis"] .dg-header .dg-hcell,
  #dg-embed[aria-label*="Prosthetic"] .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Prosthetic"] .dg-header .dg-hcell{
    min-height: 48px !important;
    padding: 10px 6px !important;
    font-size: clamp(.60rem, 2.2vw, .88rem) !important;
    line-height: 1.08 !important;
  }
}

/* ≤420px: shortest + compact text */
@media (max-width:420px){
  #dg-embed[aria-label*="Prosthesis"] .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Prosthesis"] .dg-header .dg-hcell,
  #dg-embed[aria-label*="Prosthetic"] .dg-headertable .dg-hcell,
  #dg-embed[aria-label*="Prosthetic"] .dg-header .dg-hcell{
    min-height: 42px !important;
    padding: 8px 4px !important;
    font-size: clamp(.56rem, 2.1vw, .80rem) !important;
    line-height: 1.06 !important;
  }
}


/* Prosthetic STENOSIS pages — keep single-column blue header centered & full-width */
#dg-embed[aria-label*="Prosthesis"][aria-label*="Stenosis"] .dg-header.dg-1col,
#dg-embed[aria-label*="Prosthesis"][aria-label*="Stenosis"] .dg-header.dg-single,
#dg-embed[aria-label*="Prosthesis"][aria-label*="Stenosis"] .dg-header.dg-singlecol{
  display: grid !important;
  grid-template-columns: 1fr !important;  /* kill the 4-col bias */
  grid-auto-flow: row !important;
  width: 100% !important;
}

#dg-embed[aria-label*="Prosthesis"][aria-label*="Stenosis"] .dg-header.dg-1col .dg-hcell,
#dg-embed[aria-label*="Prosthesis"][aria-label*="Stenosis"] .dg-header.dg-single .dg-hcell,
#dg-embed[aria-label*="Prosthesis"][aria-label*="Stenosis"] .dg-header.dg-singlecol .dg-hcell{
  text-align: center !important;
  justify-content: center !important;    /* flex centering */
  align-items: center !important;
  border-right: 0 !important;            /* no stray divider in 1-col mode */
}

#dg-embed[aria-label*="Prosthesis"][aria-label*="Stenosis"] .dg-header .dg-hcell .dg-wrap{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: normal !important;         /* wrap if needed */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}