/* Design tokens extracted from whippy.ai/staffing (computed values, 2026-09-02) */
.wh-scope {
  /* palette */
  --navy-950: #06140d;            /* UH deep ivy-black */        /* hero gradient start */
  --navy-900: #0b2015;       /* footer / player / dark cards */
  --navy-800: #12281b;
  --blue-600: #2e6b44;            /* UH ivy accent */     /* primary blue (nav CTA, links, gradient end) */
  --indigo-400: #4d8a63;
  --lavender-300: #b7d9c0;        /* UH mint */ /* timeline track */
  --lavender-200: #cde5d4; /* glow shadows */
  --cyan-400: #7cc796;      /* glow accent */
  --ink-900: rgb(0, 0, 0);
  --ink-700: rgb(51, 51, 51);       /* body text on light */
  --gray-500: rgb(115, 115, 115);   /* secondary text */
  --gray-400: rgb(124, 124, 128);
  --gray-350: rgb(189, 189, 192);   /* disabled tabs / muted */
  --gray-200: rgb(224, 224, 224);
  --white: rgb(255, 255, 255);
  /* feature accents (timeline pills, dots, progress line) */
  --accent-recruiter: rgb(174, 41, 255);   /* purple */
  --accent-dataentry: rgb(55, 148, 146);   /* teal */
  --accent-search: rgb(236, 135, 192);     /* pink (AI Search & Match) */
  /* type */
  --font-sans: Inter, system-ui, sans-serif;
  /* layout */
  --nav-h: 65px;
  --container: 1152px;
  --container-narrow: 960px;
  /* glow button */
  --glow-rest: rgba(205,229,212,.25) -1px -1px 4px 0 inset, rgba(124,199,150,.25) 14px -4px 12px 0, rgba(205,229,212,.25) 2px 2px 2px 0 inset, rgba(46,107,68,.6) 10px 6px 20px 0, rgba(205,229,212,.6) -10px -8px 30px 0;
  --glow-hover: rgba(205,229,212,.4) -1px -1px 6px 0 inset, rgba(124,199,150,.4) 14px -4px 16px 0, rgba(205,229,212,.4) 2px 2px 4px 0 inset, rgba(46,107,68,.75) 10px 6px 24px 0, rgba(205,229,212,.75) -10px -8px 34px 0;
  --card-shadow: rgba(18, 18, 46, 0.04) 0 4px 36px 0;
}

@keyframes scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}/* Underheard wordmark logo */
.wh-scope .uh-logo { font: 700 26px/1 var(--font-sans); letter-spacing: -0.5px; color: #fff; }.wh-scope .uh-logo .uh-logo-dot { color: var(--blue-600); }.wh-scope .wh-nav.is-scrolled .uh-logo { color: #000; }.wh-scope .wh-nav.is-scrolled .uh-logo .uh-logo-dot { color: var(--blue-600); }.wh-scope .uh-logo--dark { color: #000; }.wh-scope .uh-logo--footer { font-size: 30px; }/* Hero section + hero video card — whippy.ai/staffing sections 1+2 */

/* ============ Section 1: hero ============ */
.wh-scope .wh-hero {
  position: relative;
  margin: -65px 0 0;
  padding: 165px 0 326px;
  background-image: url(../assets/img/9765223c22c56ba2c3241a9143a362f91697c1cc-3052x1283.png);
  background-size: contain;
  background-position: 50% 0%;
  background-repeat: no-repeat;
}/* z-index:-1 child + non-stacking-context section = gradient paints
   behind the section's own background-image (circuit lines) */
.wh-scope .wh-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(174deg, #06140d -33.74%, #2e6b44 289.13%);
}.wh-scope .wh-hero__container {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
}.wh-scope .wh-hero__stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 80px;
}.wh-scope .wh-hero__copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}.wh-scope .wh-hero__head {
  width: 92.6%; /* 1067/1152 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
}.wh-scope .wh-hero__h1-wrap { width: 100%; }.wh-scope .wh-hero__h1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 76.8px;
  text-align: center;
  max-width: 70%;
  margin: 0 auto;
  color: var(--white);
  background-image: linear-gradient(93deg, rgb(255, 255, 255) 33.45%, rgb(153, 153, 153) 112.06%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}.wh-scope .wh-hero__sub-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 60px;
}.wh-scope .wh-hero__p {
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: var(--white);
  text-align: center;
  max-width: 1000px;
}.wh-scope .wh-hero__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 232px;
  height: 50px;
  padding: 16px 12px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  font-family: var(--font-sans);
  color: var(--ink-700);
  background-color: var(--white);
  box-shadow: var(--glow-rest);
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none; /* the CTA is an anchor since 2026-09-03 */
}.wh-scope .wh-hero__cta:hover {
  box-shadow: var(--glow-hover);
}/* TRUSTED BY row */
.wh-scope .wh-hero__trusted { width: 100%; }.wh-scope .wh-hero__trusted-inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}.wh-scope .wh-hero__trusted-label {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 35px;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 1.6px;
  color: var(--white);
  white-space: nowrap;
  flex: none;
}.wh-scope .wh-hero__logos {
  flex: 1;
  min-width: 0;
  min-height: 35px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  overflow: auto hidden;
  scrollbar-width: none;
}.wh-scope .wh-hero__logos::-webkit-scrollbar { display: none; }.wh-scope .wh-hero__logo {
  flex: none;
  max-width: 95px;
  height: 35px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}.wh-scope .wh-hero__logo img {
  width: 95px;
  height: 35px;
  object-fit: contain;
  display: block;
}.wh-scope .wh-hero__logo--link img { width: 49.875px; }/* ============ Section 2: hero video card ============ */
.wh-scope .wh-hero-video {
  position: relative;
  z-index: 2;
  margin: 0 0 80px;
}.wh-scope .wh-hero-video__card {
  width: min(960px, calc(100vw - 24px));
  aspect-ratio: 16 / 9;
  /* card straddles the dark/white boundary: pulled up by half its height */
  margin: calc(min(960px, 100vw - 24px) * -9 / 32) auto 0;
  background-color: rgb(232, 232, 232);
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.28) 0px 12px 40px 0px, rgba(0, 0, 0, 0.12) 0px 2px 8px 0px;
  position: relative;
}.wh-scope .wh-hero-video__frame {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
}.wh-scope .wh-hero-video__thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}.wh-scope .wh-hero-video__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}.wh-scope .wh-hero-video__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}.wh-scope .wh-hero-video__play-icon {
  width: 70px;
  height: 70px;
  display: block;
  opacity: 0.5;
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 2px 8px);
}/* Lightbox */
.wh-scope .wh-hero-video__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}.wh-scope .wh-hero-video__lightbox[hidden] { display: none; }.wh-scope .wh-hero-video__lightbox-inner {
  width: min(1024px, 90vw, calc(90vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #06140d;
}.wh-scope .wh-hero-video__lightbox-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============ Mobile ============ */
@media (max-width: 768px) {.wh-scope .wh-hero {
    /* bottom padding follows the card pull-up (width * 9/32) plus a gap, so
       the card never climbs over the trust strip on mid-size screens */
    padding: 125px 0 calc((100vw - 24px) * 9 / 32 + 48px);
  }.wh-scope .wh-hero__container {
    padding: 0 15px;
  }.wh-scope .wh-hero__head {
    width: 100%;
    gap: 30px;
  }.wh-scope .wh-hero__h1 {
    font-size: 40px;
    line-height: 48px;
    max-width: none;
  }.wh-scope .wh-hero__sub-stack {
    gap: 40px;
  }.wh-scope .wh-hero__p {
    font-size: 16px;
    line-height: 24px;
    max-width: 550px;
  }.wh-scope .wh-hero__trusted-inner {
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }.wh-scope .wh-hero__trusted-label {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    line-height: 12px;
  }.wh-scope .wh-hero__logos {
    width: 100%;
    flex: none;
  }.wh-scope .wh-hero-video {
    margin: 0 0 20px;
  }
}/* Underheard trusted-by: real logos rendered white via filter; text wordmarks as placeholders */
.wh-scope .wh-hero__logos--uh { justify-content: space-between; }.wh-scope .wh-hero__logos--uh img { height: 32px; width: auto; filter: brightness(0) invert(1); opacity: .8; }.wh-scope .wh-hero__logos--uh .wh-hero__logo-word { color: #fff; opacity: .75; font: 700 19px/1 var(--font-sans); letter-spacing: .2px; white-space: nowrap; }.wh-scope .wh-hero__logos--uh .wh-hero__logo-word--caps { letter-spacing: 2.5px; font-weight: 800; }
@media (max-width: 768px) {.wh-scope .wh-hero__logos--uh img { height: 20px; }.wh-scope .wh-hero__logos--uh .wh-hero__logo-word { font-size: 15px; } }.wh-scope .wh-hero__logos--uh img.wh-hero__logo-tall { height: 74px; }.wh-scope .wh-hero__logos--uh img.wh-hero__logo-fish { height: 60px; filter: none; opacity: 1; }
@media (max-width: 768px) {.wh-scope .wh-hero__logos--uh img { height: 24px; }.wh-scope .wh-hero__logos--uh img.wh-hero__logo-tall, .wh-scope .wh-hero__logos--uh img.wh-hero__logo-fish { height: 42px; } }/* Trust-strip carousel (owner request 2026-09-03): the label stays put,
   the logo set scrolls left forever. Track = two copies of the set,
   animated by exactly one set width (-50%) so the loop is seamless.
   Edges fade via mask; hover pauses; reduced motion = static row. */
.wh-scope .wh-hero__marquee {
  justify-content: flex-start;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}.wh-scope .wh-hero__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 56px;
  width: max-content;
  flex: none;
  padding-right: 56px; /* keeps the gap between the last and first logo */
  animation: wh-marquee 28s linear infinite;
  will-change: transform;
}.wh-scope .wh-hero__marquee:hover .wh-hero__track { animation-play-state: paused; }
@keyframes wh-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 767px) {.wh-scope .wh-hero__track { gap: 40px; padding-right: 40px; animation-duration: 20s; }
}
@media (prefers-reduced-motion: reduce) {.wh-scope .wh-hero__track { animation: none; }.wh-scope .wh-hero__marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}/* Hero ground (owner pick 2026-09-09): the main site's clay-city artwork
   (public/solutions/v7/assets/city-clay.png), untouched, on the paper
   ground #faf9f6. Light ground, so headline, nav and buttons turn to ink
   and ivy like on the main site. One eased veil takes the artwork into
   white low behind the demo card; its foot sits far below the hero so no
   edge of it is ever visible. */
.wh-scope .wh-hero { background-image: none; overflow: hidden; position: relative; }.wh-scope .wh-hero__bg { background: #faf9f6; overflow: hidden; z-index: -2; } /* under the veil (both were -1, so the veil painted behind the artwork and the city ended in a hard edge) */.wh-scope .wh-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url(/solutions/v7/assets/city-clay.png) 50% 100% / cover no-repeat;
  opacity: .95;
}.wh-scope .wh-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -290px;
  height: 500px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top, #fff 0, #fff 330px, rgba(255, 255, 255, .85) 380px, rgba(255, 255, 255, .4) 450px, rgba(255, 255, 255, 0) 500px);
}/* ink on paper */
.wh-scope .wh-hero__h1 { background-image: linear-gradient(93deg, #111418 33%, #4a4f55 112%); }.wh-scope .wh-hero__p, .wh-scope .wh-hero__trusted-label { color: #111418; }.wh-scope .wh-hero__cta { background: #2e6b44; color: #fff; border-color: #2e6b44; box-shadow: 0 10px 30px rgba(46, 107, 68, .28); }.wh-scope .wh-hero__cta:hover { background: #265a39; color: #fff; }.wh-scope .wh-nav .uh-logo { color: #111418; }.wh-scope .wh-nav__login { color: #111418; }.wh-scope .wh-nav__cta { background-color: #2e6b44; border-color: #2e6b44; color: #fff; }.wh-scope .wh-nav__burger { color: #111418; }/* trust logos in their own colours (the /research set); GuestReady draws with currentColor */
.wh-scope .wh-hero__logos--uh img { filter: none; opacity: 1; }.wh-scope .wh-hero__logos--uh { color: #1c2733; }/* the marquee keeps rolling under the cursor */
.wh-scope .wh-hero__marquee:hover .wh-hero__track { animation-play-state: paused; }/* the four added marks: wide logotypes at the standard height, the
   hotel's stacked mark a little taller */
.wh-scope .wh-hero__logos--uh img.wh-hero__logo-wide { height: 30px; }.wh-scope .wh-hero__logos--uh img.wh-hero__logo-hort { height: 52px; }
@media (max-width: 767px) {.wh-scope .wh-hero__logos--uh img.wh-hero__logo-wide { height: 22px; }.wh-scope .wh-hero__logos--uh img.wh-hero__logo-hort { height: 40px; }.wh-scope .wh-hero__track { animation-duration: 20s; } }/* logos keep their natural width at the given height (the 95px cap was
   for the old five-logo row) */
.wh-scope .wh-hero__logos--uh .wh-hero__logo { max-width: none; }.wh-scope .wh-hero__logos--uh .wh-hero__logo img { width: auto; }/* the row sizes to its tallest mark; the 35px boxes were for the old strip */
.wh-scope .wh-hero__logos--uh { min-height: 64px; }.wh-scope .wh-hero__logos--uh .wh-hero__logo { height: auto; }.wh-scope .wh-hero__track { min-height: 64px; }
@media (max-width: 767px) {.wh-scope .wh-hero__logos--uh, .wh-scope .wh-hero__track { min-height: 48px; } }/* "Backed by SFF Studio" pill above the headline, as on /research */
.wh-scope .wh-hero__backed { display: flex; width: max-content; align-items: center; gap: 9px; min-height: 30px; margin: 0 auto 22px; padding: 0 13px 0 12px; border: 1px solid #e3e6e2; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: 0 1px 2px rgba(17, 20, 24, .04); }.wh-scope .wh-hero__backed b { color: #79837c; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.wh-scope .wh-hero__backed img { display: block; height: 17px; width: auto; }.wh-scope .wh-hero__backed span { color: #111418; font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; }.wh-scope .wh-hero__copy { align-items: center; }/* "Try the Call" demo card (replaces the hero video). Inherits position/size
   from .wh-hero-video / .wh-hero-video__card; this file restyles the inside. */

.wh-scope .uh-demo .wh-hero-video__card, .wh-scope .uh-demo__card {
  background: #fff;
  box-shadow: rgba(18, 18, 46, 0.12) 0 30px 60px -12px, rgba(18, 18, 46, 0.06) 0 8px 24px;
}.wh-scope .uh-demo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 48px;
  padding: 56px 60px;
}.wh-scope .uh-demo__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}/* ---- the orb ---- */
.wh-scope .uh-orb {
  position: relative;
  width: 232px;
  height: 232px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 24px 60px rgba(46, 107, 68, 0.22), 0 4px 16px rgba(17, 20, 24, 0.08);
  background: radial-gradient(closest-side, #f3f8f4 0%, #e6f0e9 100%);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}.wh-scope .uh-orb:hover { transform: scale(1.03); box-shadow: 0 28px 70px rgba(46, 107, 68, 0.3), 0 4px 16px rgba(17, 20, 24, 0.1); }.wh-scope .uh-orb__layer { position: absolute; inset: -18%; border-radius: 50%; filter: blur(22px); }.wh-scope .uh-orb__layer--a {
  background:
    radial-gradient(42% 46% at 30% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(55% 55% at 72% 30%, rgba(46, 107, 68, 0.55) 0%, rgba(46, 107, 68, 0) 75%);
  animation: uh-orb-drift 17s ease-in-out infinite alternate;
}.wh-scope .uh-orb__layer--b {
  background:
    radial-gradient(50% 55% at 70% 76%, rgba(183, 217, 192, 0.9) 0%, rgba(183, 217, 192, 0) 72%),
    radial-gradient(40% 44% at 24% 70%, rgba(124, 199, 150, 0.55) 0%, rgba(124, 199, 150, 0) 70%);
  animation: uh-orb-drift 23s ease-in-out infinite alternate-reverse;
}.wh-scope .uh-orb__layer--c {
  background: conic-gradient(from 120deg at 55% 45%,
    rgba(46, 107, 68, 0) 0deg, rgba(46, 107, 68, 0.28) 90deg,
    rgba(183, 217, 192, 0.35) 180deg, rgba(205, 229, 212, 0.4) 260deg,
    rgba(46, 107, 68, 0) 360deg);
  animation: uh-orb-spin 26s linear infinite;
}
@keyframes uh-orb-spin { to { transform: rotate(360deg); } }
@keyframes uh-orb-drift {
  0% { transform: translate(-4%, -2%) scale(1); }
  50% { transform: translate(3%, 4%) scale(1.06); }
  100% { transform: translate(-2%, 3%) scale(0.98); }
}.wh-scope .uh-orb__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}.wh-scope .uh-orb__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 10px;
  border-style: solid;
  border-width: 26px 0 26px 42px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 4px 14px rgba(17, 20, 24, 0.18));
}/* ---- CTA under the orb ---- */
.wh-scope .uh-demo__cta {
  padding: 15px 44px;
  border-radius: 999px;
  background: #2e6b44;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}.wh-scope .uh-demo__cta:hover { background: #265a39; transform: translateY(-1px); }/* ---- info box ---- */
.wh-scope .uh-demo__info {
  background: rgba(46, 107, 68, 0.06);
  border: 1px solid rgba(46, 107, 68, 0.12);
  border-radius: 16px;
  padding: 34px 36px;
}.wh-scope .uh-demo__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #2e6b44;
  margin-bottom: 10px;
}.wh-scope .uh-demo__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: rgb(51, 51, 51);
  margin-bottom: 18px;
}.wh-scope .uh-demo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }.wh-scope .uh-demo__list li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 25px;
  color: rgb(85, 92, 102);
}.wh-scope .uh-demo__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2e6b44;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><circle cx="9" cy="9" r="9" fill="black"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><circle cx="9" cy="9" r="9" fill="black"/></svg>') center / contain no-repeat;
}.wh-scope .uh-demo__list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}/* ---- modal ---- */
.wh-scope .uh-demo__modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }.wh-scope .uh-demo__modal[hidden] { display: none; }.wh-scope .uh-demo__backdrop { position: absolute; inset: 0; background: rgba(8, 15, 28, 0.55); backdrop-filter: blur(4px); }.wh-scope .uh-demo__dialog {
  position: relative;
  width: min(430px, calc(100vw - 40px));
  background: #fff;
  border-radius: 20px;
  padding: 38px 36px 32px;
  box-shadow: 0 40px 90px rgba(8, 15, 28, 0.35);
}.wh-scope .uh-demo__close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 26px;
  line-height: 1;
  color: rgb(140, 146, 156);
  padding: 4px;
}.wh-scope .uh-demo__close:hover { color: rgb(51, 51, 51); }.wh-scope .uh-demo__dialog h3 { font-size: 22px; font-weight: 700; line-height: 30px; color: rgb(51, 51, 51); margin-bottom: 8px; }.wh-scope .uh-demo__dialog p { font-size: 15px; line-height: 23px; color: rgb(115, 115, 115); }.wh-scope .uh-demo__form { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 14px; }.wh-scope .uh-demo__form input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgb(224, 224, 224);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: rgb(51, 51, 51);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}.wh-scope .uh-demo__form input:focus { border-color: #2e6b44; box-shadow: 0 0 0 3px rgba(46, 107, 68, 0.15); }.wh-scope .uh-demo__form input.is-invalid { border-color: rgb(214, 69, 69); box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12); }.wh-scope .uh-demo__form button {
  padding: 14px 16px;
  border-radius: 10px;
  background: #2e6b44;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  transition: background 0.2s ease;
}.wh-scope .uh-demo__form button:hover { background: #265a39; }.wh-scope .uh-demo__fine { font-size: 13px !important; color: rgb(160, 166, 175) !important; }.wh-scope .uh-demo__error { color: rgb(214, 69, 69) !important; }.wh-scope .uh-demo__error[hidden] { display: none; }.wh-scope .uh-demo__form button:disabled { opacity: 0.7; cursor: wait; }.wh-scope .uh-demo__done { text-align: center; padding: 10px 0 4px; }.wh-scope .uh-demo__done-orb {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background:
    radial-gradient(45% 45% at 32% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(closest-side, #b7d9c0 0%, #2e6b44 130%);
  animation: uh-orb-pulse 1.6s ease-in-out infinite;
}
@keyframes uh-orb-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 107, 68, 0.35); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(46, 107, 68, 0); }
}/* ---- Underheard mark used inside the animation scenes ---- */
.wh-scope .uh-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #111418;
  box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.08), 0 1px 4px rgba(17, 20, 24, 0.12);
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  padding-left: 0.08em;
  user-select: none;
}.wh-scope .uh-mark i { font-style: normal; color: #2e6b44; }.wh-scope .uh-mark--bare { width: 100%; height: 100%; box-shadow: none; background: none; }

/* ---- responsive ---- */
@media (max-width: 768px) {.wh-scope .uh-demo__inner { grid-template-columns: 1fr; gap: 30px; padding: 34px 22px; }.wh-scope .uh-orb { width: 176px; height: 176px; }.wh-scope .uh-orb__play::before { border-width: 20px 0 20px 32px; margin-left: 8px; }.wh-scope .uh-demo__info { padding: 24px 22px; }.wh-scope .uh-demo__title { font-size: 20px; line-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {.wh-scope .uh-orb__layer, .wh-scope .uh-demo__done-orb { animation: none !important; }.wh-scope .uh-orb, .wh-scope .uh-demo__cta { transition: none; }
}/* Demo card as a Mac window (owner pick 2026-09-09): three lights, a
   centred window title with the u. mark, and a live dot. The rings are
   gone; the card body stays as it was. */
.wh-scope .uh-demo .wh-hero-video__card { position: relative; overflow: hidden; }.wh-scope .uh-demo__chrome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 14px;
  background: #f5f7f5;
  border-bottom: 1px solid #e3e8e4;
}.wh-scope .uh-demo__lights { display: flex; gap: 7px; }.wh-scope .uh-demo__lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }.wh-scope .uh-demo__lights i:nth-child(1) { background: #ff5f57; }.wh-scope .uh-demo__lights i:nth-child(2) { background: #febc2e; }.wh-scope .uh-demo__lights i:nth-child(3) { background: #28c840; }.wh-scope .uh-demo__wintitle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #3a3f45;
  white-space: nowrap;
}.wh-scope .uh-demo__wintitle .uh-mark { width: 20px; height: 20px; font-size: 11px; }.wh-scope .uh-demo__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: #e9f1ec;
  color: #2e6b44;
  font-size: 12px;
  font-weight: 600;
}.wh-scope .uh-demo__live i { width: 7px; height: 7px; border-radius: 50%; background: #2e6b44; animation: uh-live 1.6s infinite; }
@keyframes uh-live { 50% { opacity: .25; } }.wh-scope .uh-demo__inner { position: relative; padding-top: 44px; padding-bottom: 48px; }
@media (max-width: 768px) {.wh-scope .uh-demo .wh-hero-video__card { aspect-ratio: auto; }.wh-scope .uh-demo__chrome { height: 30px; padding: 0 12px; }.wh-scope .uh-demo__wintitle { font-size: 12px; }.wh-scope .uh-demo__inner { padding-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {.wh-scope .uh-demo__live i { animation: none; } }/* Glass (owner request 2026-09-09): the card is translucent white over the
   city artwork with a backdrop blur, a hairline light edge and a specular
   highlight along the top; the window bar and the info panel follow. */
.wh-scope .uh-demo .wh-hero-video__card, .wh-scope .uh-demo__card {
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
          backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(255, 255, 255, .25),
    rgba(18, 18, 46, .12) 0 30px 60px -12px,
    rgba(18, 18, 46, .06) 0 8px 24px;
}.wh-scope .uh-demo__chrome {
  background: rgba(255, 255, 255, .45);
  border-bottom: 1px solid rgba(17, 20, 24, .06);
}.wh-scope .uh-demo__info {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 20px rgba(17, 20, 24, .04);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {.wh-scope .uh-demo .wh-hero-video__card, .wh-scope .uh-demo__card { background: rgba(255, 255, 255, .92); }
}


/* ---- hero kit on the industries pages: their nav is in-flow, so the hero
   starts at the top of the section instead of tucking under a fixed bar ---- */
.wh-scope { position: relative; isolation: isolate; display: flow-root; font-family: Inter, system-ui, sans-serif; background: #fff; } /* white ground behind the demo card, as on /staffing; the mint section below starts on its own */
.wh-scope .wh-hero { margin: 0; padding-top: 88px; }
/* /staffing ships base.css (16px/24px body, h1-h4 and p margins reset,
   buttons unpadded); the industries pages do not, so the kit resets the
   same things itself and keeps the demo card's 80px foot from /staffing */
.wh-scope { font-size: 16px; line-height: 24px; }
.wh-scope h1, .wh-scope h2, .wh-scope h3, .wh-scope h4, .wh-scope p { margin: 0; }
.wh-scope button { font: inherit; border: 0; padding: 0; cursor: pointer; }
@media (max-width: 768px) { .wh-scope .wh-hero { padding-top: 56px; } }
/* the industries pages set serif headings and a different sans on elements;
   the kit brings its own type so the hero reads exactly like /staffing */
.wh-scope, .wh-scope h1, .wh-scope h2, .wh-scope h3, .wh-scope p, .wh-scope li, .wh-scope button, .wh-scope a, .wh-scope input { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.wh-scope .wh-hero__h1 { font-weight: 700; letter-spacing: -0.02em; }
/* the industries nav sits over the page, so the hero needs room under it */
.wh-scope .wh-hero { padding-top: 150px; }
@media (max-width: 768px) { .wh-scope .wh-hero { padding-top: 112px; } }