.updates-dropdown-container .show-updates-dropdown{
  	  visibility: hidden; 

}
 
/* ===============================
   Updates dropdown behavior
   =============================== */

.updates-dropdown-container.open .show-updates-dropdown,
.updates-dropdown-container.active .show-updates-dropdown,
.updates-dropdown-container.show .show-updates-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}


/* ===============================
   Layout
   =============================== */

.container {
  width: 90%;
  max-width: 850px;
}


/* ===============================
   Typography – Open Sans (production-safe)
   =============================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

:root {
  --sp-font: "Open Sans", Arial, Helvetica, sans-serif;
}

/* Apply Open Sans to primary text areas only (safe, avoids icon glyph breakage) */
html,
body {
  font-family: var(--sp-font) !important;
}

/* Common text elements */
h1, h2, h3, h4, h5, h6,
p, a, li,
label, small, strong, em,
th, td, caption,
input, textarea, select, button {
  font-family: var(--sp-font) !important;
}

/* Key Statuspage content containers (broad but safe) */
.page,
.page-body,
.page-content,
.layout-content,
.layout-content.status,
.incident-container,
.incident-updates,
.maintenance-container,
.components-container,
.history-container,
.history-footer,
.history-nav {
  font-family: var(--sp-font) !important;
}

/* IMPORTANT: Never force fonts on pseudo-elements.
   Statuspage icon glyphs are often rendered via ::before/::after with an icon font. */
*::before,
*::after {
  font-family: inherit !important;
}


/* ===============================
   Your utility classes (kept)
   =============================== */

.font-regular {
  font-family: var(--sp-font) !important;
  font-size: 1rem; /* 16px */
  line-height: 1.5rem;
}

.font-large {
  font-family: var(--sp-font) !important;
  font-weight: 600;
  font-size: 1.25rem; /* 20px */
  line-height: 1.875rem;
}

.font-largest {
  font-family: var(--sp-font) !important;
  font-weight: 700;
  font-size: 1.75rem; /* 28px */
  line-height: 2.625rem;
}


/* ===============================
   Responsive (VALID CSS)
   =============================== */

@media screen and (max-width: 650px) {
  .font-regular {
    font-size: 0.875rem; /* 14px */
    line-height: 1.3125rem;
  }

  .font-large {
    font-size: 1.125rem; /* 18px */
    line-height: 1.6875rem;
  }

  .font-largest {
    font-size: 1.375rem; /* 22px */
    line-height: 2.0625rem;
  }
}

@media screen and (max-width: 450px) {
  .font-large {
    font-size: 1rem; /* 16px */
    line-height: 1.5rem;
  }

  .font-largest {
    font-size: 1.125rem; /* 18px */
    line-height: 1.6875rem;
  }
}