/* ==========================================================================
   Speed Booster – shared stylesheet
   Fonts are served from this folder; nothing is requested from Google.
   Layout and colour live as inline styles in the HTML (straight from the
   design), so this file only holds what has to be shared or cannot be inline:
   @font-face, pseudo-elements, media queries, the drawer and the popup.
   ========================================================================== */

/* --------------------------------------------------------------- fonts -- */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/sora-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/sora-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/sora-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- base -- */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; }
img { max-width: 100%; }

a { color: #5A36F0; }
a:hover { color: #3F1FCC; }

input::placeholder,
textarea::placeholder { color: #7A8094; }

:focus-visible {
  outline: 3px solid #6D4AFF;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ accordion -- */

details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(45deg); }

/* ------------------------------------------------- header and the drawer -- */

/* The burger is hidden on desktop and the nav on mobile; both carry inline
   display rules in the markup, so these need !important to win. */
@media (max-width: 900px) {
  .sb-nav { display: none !important; }
  .sb-burger { display: inline-flex !important; }
}

/* The two side texts of the before/after block step aside on small screens. */
@media (max-width: 760px) {
  .sb-side { display: none !important; }
}

/* Hero dashboard wrapper; overlaps into the next section. */
.sb-hero-visual {
  position: relative;
  max-width: 1080px;
  margin: 0 auto calc(-1 * min(16vw, 240px));
}
/* Extras that only crowd the small screen: launch-offer pill, the PageSpeed
   buttons and the URL field on the home page. Inline display rules need !important. */
@media (max-width: 760px) {
  .sb-desktop-only { display: none !important; }
}

/* "Your site took a long time to build" section: before/after artwork on both sides,
   fading in toward the text. Desktop only. */
.sb-years {
  position: relative;
  overflow: hidden;
}
.sb-years-art {
  position: absolute;
  z-index: 0;
  top: 50%;
  height: 120%;
  width: auto;
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.sb-years-art-left {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
}
.sb-years-art-right {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 55%, transparent 100%);
}

@media (max-width: 1100px) {
  .sb-years-art { display: none; }
}

/* Mobile drawer: hangs below the header instead of pushing the page down. */
[data-sb-if='open'] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  box-shadow: 0 24px 50px -16px rgba(10, 14, 26, 0.55);
}
[data-sb-if='open'][hidden] { display: none; }

body.sb-no-scroll { overflow: hidden; }

/* -------------------------------------------------------------- popup -- */

.sb-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(10, 14, 26, 0.6);
  backdrop-filter: blur(2px);
}
.sb-modal[hidden] { display: none; }
.sb-modal > div { background: transparent !important; }

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------- utilities -- */

.sb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------- legal subpages -- */

.sb-prose { max-width: 760px; margin: 0 auto; }
.sb-prose h2 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 48px 0 16px;
}
.sb-prose h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 32px 0 12px;
}
.sb-prose p,
.sb-prose li { font-size: 16px; line-height: 1.75; color: #5B6275; }
.sb-prose ul { padding-left: 20px; }
.sb-prose .todo {
  display: block;
  margin: 8px 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: #FFF6E5;
  border: 1px solid #F0D9A8;
  color: #7A5200;
  font-size: 15px;
}