/* =========================================================
   0. FONTS (@font-face works anywhere; @import doesn't on Statuspage)
   ========================================================= */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/geist@1.7.0/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/geist@1.7.0/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
}

/* =========================================================
   1. GLOBAL FONT (catch every element)
   ========================================================= */
html body,
html body *:not(svg):not(path) {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Uptime labels ("90 days ago", "99.99 % uptime", "Today") in mono */
.legend, .legend *, .legend-item, .uptime-percent, .incident-date, small {
  font-family: 'Geist Mono', ui-monospace, monospace !important;
}

/* =========================================================
   2. HEADER: default masthead turned into a floating pill
   ========================================================= */
.masthead-container {
  background: #000 !important;
  padding: 24px 0 24px !important;
  position: relative;
  z-index: 50;
}
.masthead {
  width: 100%;
  max-width: none !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #F1F1E8 !important;
  border-radius: 999px !important;
  padding: 6px 8px 6px 24px !important;
  min-height: 52px;
  box-sizing: border-box;
}
.masthead::before, .masthead::after { display: none !important; } /* kill clearfix */

/* Logo: hide the uploaded image and draw the Pencil SVG instead */
.masthead .logo-container {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}
.masthead .logo-container img { display: none !important; }
.masthead .logo-container a {
  display: block !important;
  width: 70px;
  height: 28px;
  background: no-repeat left center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 41' fill='%23000'%3E%3Cpath d='M16.3465 7.30974C14.8943 6.57522 13.0514 6.20354 10.8666 6.20354C10.8666 6.20354 3.73913 6.20797 1.02582 6.21239L5.91066 11.0885V11.0796H10.5646C12.1144 11.0796 13.229 11.4071 13.8774 12.0531C14.5346 12.708 14.8544 13.6018 14.8544 14.7876C14.8544 15.9735 14.5346 16.8319 13.8774 17.4867C13.229 18.1327 12.1144 18.4602 10.5646 18.4602H5.91954V18.4513H5.91066V13.708L0 7.77876V32.5929H5.91954V23.3319H10.8666C13.1047 23.3319 14.9787 22.9381 16.4308 22.1637C17.8963 21.3805 18.9932 20.3274 19.6904 19.0265C20.3831 17.7434 20.7295 16.3142 20.7295 14.7832C20.7295 13.177 20.3654 11.7035 19.6504 10.4071C18.9266 9.09735 17.8119 8.0531 16.3465 7.30974Z'/%3E%3Cpath d='M28.7051 12.5708C23.8825 14.0442 20.6407 18.9735 21.3779 24.2168C21.7775 27.0796 23.1408 29.4292 25.4856 31.1283C28.6652 33.4336 32.1378 33.9204 35.7926 32.3982C38.1107 31.4336 39.7493 29.6858 40.9483 27.5177C41.1437 27.1637 41.3169 26.7965 41.5167 26.3982H41.2281C39.3718 26.3982 37.5156 26.3982 35.6594 26.3982C35.4862 26.3982 35.3707 26.4425 35.2597 26.5841C34.4071 27.6637 33.3058 28.2478 31.9114 28.2478C30.3704 28.2478 29.0382 27.7832 28.0346 26.5708C27.5461 25.9779 27.2619 25.292 27.1509 24.5044H27.4351C32.2267 24.5044 37.0227 24.5044 41.8143 24.5044C41.9786 24.5044 42.0718 24.4779 42.0807 24.292C42.0852 24.146 42.1251 24.0044 42.1384 23.8628C42.2761 22.2876 42.0985 20.7478 41.5967 19.2522C39.6605 13.4867 33.7898 11.0221 28.7051 12.5752V12.5708ZM27.2264 20.4956C27.3685 19.8363 27.6438 19.2566 28.0612 18.7522C28.8694 17.7743 29.9352 17.2655 31.1831 17.146C32.5064 17.0221 33.7321 17.3142 34.7845 18.1593C35.5306 18.7566 36.0013 19.5354 36.2367 20.4956H27.2264Z'/%3E%3Cpath d='M62.9123 16.9779C62.3839 15.2788 61.4113 13.885 59.746 13.031C57.8587 12.0619 55.8426 11.9027 53.7777 12.3628C52.3699 12.6726 51.2064 13.3584 50.4382 14.5708C50.4293 14.5841 50.4071 14.5929 50.3627 14.6239V13.6372C50.3627 13.6372 50.3627 13.5885 50.3627 13.4336V12.4602H44.1812V32.6062H50.3671C50.3671 32.4956 50.3671 32.4071 50.3671 32.3186C50.3671 28.7301 50.3627 25.1416 50.376 21.5487C50.376 21.0487 50.4338 20.5398 50.5403 20.0531C50.7579 19.0664 51.3175 18.3097 52.3433 17.9381C52.965 17.7124 53.6089 17.6726 54.2617 17.7257C55.4207 17.823 56.2689 18.3584 56.7396 19.3982C57.0505 20.0885 57.1571 20.8186 57.1571 21.5619C57.1615 25.1593 57.1571 28.7566 57.1571 32.3496C57.1571 32.4336 57.1571 32.5221 57.1571 32.6062H63.352C63.352 32.531 63.352 32.4734 63.352 32.4115C63.352 28.2301 63.352 24.0442 63.352 19.8628C63.352 18.885 63.2098 17.9248 62.9212 16.9823L62.9123 16.9779Z'/%3E%3Cpath d='M72.1403 18.7522C72.9485 17.7743 74.0143 17.2655 75.2621 17.146C76.5855 17.0221 77.8111 17.3142 78.8636 18.1593C79.6096 18.7566 80.0804 19.5354 80.3157 20.4956H86.0221C85.9333 20.0752 85.8178 19.6593 85.6802 19.2478C83.744 13.4823 77.8733 11.0177 72.7886 12.5708C67.9659 14.0442 64.7242 18.9735 65.4614 24.2168C65.861 27.0796 67.2243 29.4292 69.5691 31.1283C72.7487 33.4336 76.2213 33.9204 79.8761 32.3982C82.1942 31.4336 83.8328 29.6858 85.0318 27.5177C85.2272 27.1637 85.4004 26.7965 85.6002 26.3982H85.3116C83.4553 26.3982 81.5991 26.3982 79.7429 26.3982C79.5697 26.3982 79.4542 26.4425 79.3432 26.5841C78.4906 27.6637 77.3893 28.2478 75.9949 28.2478C74.4539 28.2478 73.1217 27.7832 72.1181 26.5708C71.6296 25.9779 71.3809 25.2832 71.2344 24.5044C70.8702 22.5841 71.3098 20.5 71.3098 20.5C71.4519 19.8407 71.7273 19.2611 72.1447 18.7566L72.1403 18.7522Z'/%3E%3Cpath d='M93.0918 5.90265C91.9949 4.89381 90.232 4.82301 89.064 5.75221C88.3802 6.29646 88.016 7 88.0027 7.75221C88.0027 8.46018 88.1848 8.98673 88.54 9.45575C89.5747 10.8274 91.6574 11.0442 92.9941 9.92478C94.2642 8.86283 94.3086 7.0177 93.0918 5.90265Z'/%3E%3Cpath d='M88.0382 17.3097V32.5929H93.9666V12.7965H88.0382V17.3097Z'/%3E%3Cpath d='M96.0804 6.20796V32.5929H102V6.20796H96.0804Z'/%3E%3C/svg%3E") !important;
}
/* Hide the text page name if Statuspage shows it next to the logo */
.masthead .page-name { display: none !important; }

/* Subscribe to Updates: yellow mono pill, pushed right */
.masthead .updates-dropdown-container {
  float: none !important;
  margin: 0 0 0 auto !important;
  text-align: right !important;
  position: relative;
  z-index: 100 !important;
}
body .layout-content .masthead .updates-dropdown-container .show-updates-dropdown {
  display: inline-flex !important;
  align-items: center;
  background: #FFF310 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
body .layout-content .masthead .updates-dropdown-container .show-updates-dropdown,
body .layout-content .masthead .updates-dropdown-container .show-updates-dropdown * {
  font-family: 'Geist Mono', ui-monospace, monospace !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
}
/* Hover: black button, yellow text */
body .layout-content .masthead .updates-dropdown-container .show-updates-dropdown:hover {
  background: #000 !important;
}
body .layout-content .masthead .updates-dropdown-container .show-updates-dropdown:hover,
body .layout-content .masthead .updates-dropdown-container .show-updates-dropdown:hover * {
  color: #FFF310 !important;
  -webkit-text-fill-color: #FFF310 !important;
}
.updates-dropdown-container .updates-dropdown {
  border-radius: 12px !important;
  text-align: left !important;
}

/* =========================================================
   3. STATUS BANNER + COMPONENTS
   ========================================================= */
/* Tighter spacing */
.page-status { margin-top: 0 !important; margin-bottom: 40px !important; border-radius: 16px !important; }
.components-section, .components-container { margin-top: 0 !important; }

/* Rounded component box to match the pill */
.components-container { border-radius: 16px !important; overflow: hidden; }

/* Readable "Operational" label (bars unchanged) */
.component-container .component-status { color: #3DDC84 !important; }

/* =========================================================
   4. FOOTER: default footer as full-width orange band
   ========================================================= */
html, body {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.layout-content,
.layout-content > .container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.page-footer {
  background: #F5A847 !important;
  color: #000 !important;
  border-top: none !important;
  box-shadow: 0 0 0 100vmax #F5A847;
  clip-path: inset(0 -100vmax -100vmax);
  padding: 28px 0 32px !important;
  margin: 64px auto 0 !important;
  font-size: 14px !important;
}
.page-footer::before {
  content: "© 2026 Pencil AI Limited";
  display: block;
  margin-bottom: 12px;
  color: #000;
}
.page-footer a,
.page-footer span,
.page-footer .powered-by,
.page-footer .powered-by a {
  color: #000 !important;
  text-decoration: none !important;
}
.page-footer a:hover { text-decoration: underline !important; }

/* =========================================================
   5. MOBILE
   ========================================================= */
@media (max-width: 640px) {
  .masthead { padding-left: 18px !important; }
  .masthead .logo-container a { width: 60px; height: 24px; }
  body .layout-content .masthead .updates-dropdown-container .show-updates-dropdown,
  body .layout-content .masthead .updates-dropdown-container .show-updates-dropdown * { font-size: 13px !important; }
  body .layout-content .masthead .updates-dropdown-container .show-updates-dropdown { padding: 10px 14px !important; }
}