/* ==========================================================================
   Solutions hero  —  Figma "Component 484 / Solutions - Default" (867:16657)
   1920 x 1215 on Mono/Dark.

   Default -> Animated, i.e. what the reveal plays:
     logo             translateX -169 -> 0     (inset -103.92% of 162.633)
     nav / login      translateY  +50 -> 0
     Book a Demo      translateX +180 -> 0     (inset  104.65% of 172)
     headline lines   translateY +120 -> 0
     lede             translateY  +50 -> 0
     label a          translateY  +40 -> 0
     label b          translateY  +20 -> 0
   Each of those is a .mask + .rv pair, so the offsets live on --rv-d in the
   markup and the durations come from the shared motion tokens.
   ========================================================================== */

.sol-hero {
  top: 0;
  height: calc(1215 * var(--s));
  background: var(--c-mono-dark);
  overflow: hidden;
  z-index: 2;
}

.sol-hero__item { position: absolute; }

/* --- the dot river ------------------------------------------------------
   1920x1013 at y390, centred — the box the exported image used to fill. The
   dots are drawn by wavefield.js; nothing here needs a mask because the
   canvas is transparent and the dots carry their own alpha. */
.sol-hero__wave {
  position: absolute;
  left: 50%;
  top: calc(390 * var(--s));
  width: calc(1920 * var(--s));
  height: calc(1013 * var(--s));
  transform: translateX(-50%);
}
.sol-hero__wave canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- masthead ------------------------------------------------------------ */

.sol-hero__logo {
  left: calc(48 * var(--s));
  top: calc(36 * var(--s));
  width: calc(162.633 * var(--s));
  height: calc(40 * var(--s));
}
.sol-hero__logo a,
.sol-hero__logo img { display: block; width: 100%; height: 100%; }

.sol-hero__nav {
  left: calc(335 * var(--s));
  top: calc(32 * var(--s));
  width: calc(533 * var(--s));
  height: calc(48 * var(--s));
}
.sol-hero__nav > .rv { height: 100%; }

.sol-hero__nav-inner {
  display: flex;
  gap: calc(24 * var(--s));
  align-items: flex-start;
  margin: 0;
  padding: calc(14 * var(--s)) calc(24 * var(--s)) calc(15 * var(--s));
  background: var(--c-light-dark);
  list-style: none;
}

.sol-hero__login {
  left: calc(1555.7 * var(--s));
  top: calc(32 * var(--s));
  width: calc(120.304 * var(--s));
  height: calc(48 * var(--s));
}
.sol-hero__cta {
  left: calc(1700 * var(--s));
  top: calc(32 * var(--s));
  width: calc(172 * var(--s));
  height: calc(48 * var(--s));
}
/* Both: the .rv wrapper is auto-height, so a button asking for height:100%
   would resolve against nothing and come out short. */
.sol-hero__login > .rv,
.sol-hero__cta > .rv { height: 100%; }
.sol-hero__login .btn,
.sol-hero__cta .btn { width: 100%; height: 100%; }

/* --- headline ------------------------------------------------------------ */

.sol-hero__h {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: calc(104 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-5.2 * var(--s));
  color: var(--c-mono-light);
  white-space: nowrap;
}
.sol-hero__h--l1 {
  left: calc(202 * var(--s));
  top: calc(260 * var(--s));
  width: calc(1003 * var(--s));
  height: calc(125 * var(--s));
}
.sol-hero__h--l2 {
  left: calc(509 * var(--s));
  top: calc(399 * var(--s));
  width: calc(1209 * var(--s));
  height: calc(125 * var(--s));
}

/* --- lede ---------------------------------------------------------------- */

.sol-hero__lede {
  left: calc(1377 * var(--s));
  top: calc(309 * var(--s));
  width: calc(341 * var(--s));
  height: calc(56 * var(--s));
  font-family: var(--f-sans);
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
  color: var(--c-light-grey-02);
}

/* --- mono labels --------------------------------------------------------- */

.sol-hero__label--a {
  left: calc(182 * var(--s));
  top: calc(588 * var(--s));
  width: calc(123 * var(--s));
  height: calc(38 * var(--s));
}
.sol-hero__label--b {
  left: calc(356 * var(--s));
  top: calc(588 * var(--s));
  width: calc(120 * var(--s));
  height: calc(19 * var(--s));
}

/* --- reflow -------------------------------------------------------------- */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .sol-hero {
    height: auto;
    padding: 24px 20px 56px;
  }
  .sol-hero__item,
  .sol-hero__h { position: static; width: auto; height: auto; }

  /* Same as the landing masthead below the breakpoint: logo and the one CTA. */
  .sol-hero__masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 2;
  }
  .sol-hero__logo { width: 132px; height: 32px; flex: none; }
  .sol-hero__nav { display: none; }
  .sol-hero__login { display: none; }
  .sol-hero__cta .btn { font-size: 14px; padding: 10px 16px; }

  .sol-hero__wave {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 220px;
    margin: 28px 0;
    transform: none;
  }

  .sol-hero__h {
    font-size: clamp(34px, 9vw, 56px);
    letter-spacing: -0.02em;
    white-space: normal;
  }
  .sol-hero__h--l2 { margin-top: 4px; }
  .sol-hero__lede { margin-top: 20px; font-size: 16px; }
  .sol-hero__label--a { margin-top: 24px; }
  .sol-hero__label--b { margin-top: 8px; }
}