:root {
  --font-geist-sans: Geist, Arial, Helvetica, sans-serif;
}

html,
body {
  height: 100%;
  font-family: Geist, Arial, Helvetica, sans-serif;
}

.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;
}

header.is-scrolled {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 30px rgba(11, 31, 90, 0.06);
  backdrop-filter: blur(12px);
}

.mobile-panel {
  max-height: 0;
}

.mobile-panel.is-open {
  max-height: 100vh;
}

.resources-menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
}

.resources-wrap:hover .resources-menu,
.resources-wrap:focus-within .resources-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.resources-wrap:hover .resources-chevron,
.resources-wrap:focus-within .resources-chevron {
  transform: rotate(180deg);
}

.menu-btn.is-open .bar-1 {
  transform: translateY(0) rotate(45deg);
}

.menu-btn.is-open .bar-2 {
  opacity: 0;
}

.menu-btn.is-open .bar-3 {
  transform: translateY(0) rotate(-45deg);
}

:root {
  --design-width: 1440;
  --page-scale: 1;
}

/* From laptop up, use the 1440 desktop structure (not the tablet 3-column layout). */
@media (min-width: 1024px) {
  #why .grid,
  #industries .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  header nav {
    gap: 2.75rem;
  }
}

/*
  Better than shrinking fonts: keep the 1440px design as-is,
  then scale the whole page to the window width.
*/
html.is-desktop-scale,
html.is-desktop-scale body {
  height: auto;
}

html.is-desktop-scale {
  overflow-x: hidden;
}

html.is-desktop-scale body {
  width: 1440px;
  transform: scale(var(--page-scale));
  transform-origin: top left;
}

html.is-desktop-scale.zoom-ok body {
  transform: none;
  zoom: var(--page-scale);
}

/* Photo is already a centered face crop */
#results img[alt="Rajesh Mehta"] {
  object-position: center;
}

/* 2. Stars are 15px in Figma; compiled CSS wrongly forces 10px */
#results img[src*="star.svg"] {
  width: 15px !important;
  height: 15px !important;
}

/* 3. Match Figma: almost no gap above the cards, ~38px before footer */
@media (min-width: 1024px) {
  #industries {
    padding-bottom: 60px !important;
  }

  #results {
    padding-top: 0 !important;
    padding-bottom: 32px !important;
  }

  /*
    Solution section at 1440:
    content 1280 = 746 (devices/green) + 27 (blue gap) + 507 (copy)
    The devices image must fill the 746 box (red), not sit at 640.
  */
  #features > .site-container {
    grid-template-columns: 746px 507px !important;
    column-gap: 27px !important;
    justify-content: space-between;
    align-items: center;
  }

  #features > .site-container > :first-child {
    max-width: 746px !important;
    width: 100%;
    margin-inline: 0 !important;
  }

  #features > .site-container > :first-child > div {
    max-width: 746px !important;
    width: 100%;
  }
}

/* Mobile: left-align with copy and enlarge the tablet so the quotation is readable */
@media (max-width: 1023px) {
  #features {
    padding-bottom: 20px !important;
  }

  #why {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  #industries {
    padding-top: 20px !important;
  }

  #results .story-tablet {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    height: 360px !important;
  }

  #results .story-tablet-stage {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
  }

  #results .story-tablet-device {
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: 82% !important;
    height: 100% !important;
  }

  #results .story-tablet .bg-orange {
    margin-bottom: 22px;
  }

  #results .story-tablet .bg-orange p {
    font-size: 14px !important;
  }
}