/* ==========================================================================
   KOBIL — SuperApp family: hero (shared by /superapp/ and
   /digital-workplace-superapp/, the two Aug 2026 net-new SuperApp pages)
   Figma: SuperApp 5830:29514 (mobile 6095:58300) ·
          D-Digital Workplace SuperApp 5821:29417 (mobile 6095:60815)

   Both heroes are the same composition: one full-bleed rendered photo as
   the background, one left-aligned text column on top. The photo is NOT a
   separate <img> here — in Figma it's a single image fill on a 1440x701
   rectangle that already contains the person, the table and the floating
   service tiles, so it's exported flat (get_screenshot on the rectangle
   node at its native size) and used as the section's background-image.
   That keeps it pixel-exact and means there is nothing to position
   relative to the text, unlike the industries hero which composes a
   separate photo panel + notification card.
   ========================================================================== */

.sec-sa-hero {
  /* Same breakout as .sec-new-industry-hero: `.page` caps at --page-max
     (1440px, exactly Figma's hero frame width) but also adds --page-pad
     side padding, which Figma's hero doesn't have — cancel just the
     padding, keep the 1440px cap. */
  position: relative;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  /* Pulls the hero up under the floating sticky header (20px top padding
     + 80px pill = 100px at this width) so the pill renders on top of the
     hero photo — matching Figma, where nav/desktop sits at y:30 *inside*
     the hero frame. Overridden at the header's own two breakpoints below. */
  margin-top: calc(-1 * var(--w100));
  isolation: isolate;
  overflow: hidden;
  min-height: var(--w701);
  background-color: var(--navy-20);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec-sa-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--page-max);
  min-height: var(--w701);
  margin: 0 auto;
  /* Figma: text column starts at x:80 inside the 1440 frame. The header
     pill's own inner content starts at the same 80px, so the eyebrow
     lines up with the logo above it. */
  padding: 0 var(--w80);
}

.sec-sa-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  /* Figma: content frame 676px wide, but the title/desc block inside it
     is 570px — the narrower number is what actually controls wrapping. */
  max-width: var(--content-max-width, var(--w570));
}

/* ---- Eyebrow — either a single label (/superapp/: "SUPERAPP") or a
   breadcrumb (/digital-workplace-superapp/: "HOME · Digital Workplace
   SuperApp"). Same type ramp either way; the dot is markup, not CSS, so
   the single-label variant simply omits it. ---- */

.sec-sa-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 2.04px;
  text-transform: uppercase;
  color: var(--eyebrow-color, var(--navy));
}

.sec-sa-hero__eyebrow-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: currentColor;
}

.sec-sa-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--w40);
}

.sec-sa-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
}

/* ---- Title — Instrument Serif 82/62 with a 20px gap between lines.
   The line-height (62px) is deliberately *smaller* than the font size
   (82px) in Figma; the explicit per-line gap is what opens the block back
   up, so the two are modelled separately (flex column + gap) rather than
   folded into one line-height. ---- */

.sec-sa-hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w82);
  line-height: var(--w62);
  letter-spacing: -0.82px;
  color: var(--navy);
}

/* One visual line of the headline. `--gap: 12px` on the row variant is
   Figma's spacing between "Build your" and the gradient "trusted" when
   they share a line (Digital Workplace SuperApp). */
.sec-sa-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--w12);
}

/* The accent words. Background-clip:text needs a painted background and
   transparent text; the fallback color keeps them readable if a browser
   drops the clip. */
.sec-sa-hero__title-accent {
  background-image: linear-gradient(
    90deg,
    #696ef5 13.354%,
    #849ff8 50.429%,
    #ca80f4 84.827%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: #849ff8;
  -webkit-text-fill-color: transparent;
  /* The headline's line-height (62px) is deliberately smaller than its
     font-size (82px) — background-clip:text only paints inside the box, so
     without this the "y" of "ecosystem" is cut off. The negative margin
     keeps the 20px inter-line gap exactly as Figma has it. */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.sec-sa-hero__desc {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy);
}

/* ---- CTA — navy pill, white label. Opens the same Cal.com booking
   dialog as every other `data-cal-trigger` on the site. ---- */

.sec-sa-hero__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  background: var(--navy);
  border-radius: var(--w32);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--white);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.sec-sa-hero__cta:hover {
  background: var(--navy-80);
}

.sec-sa-hero__cta img {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

.sec-sa-hero__cta:hover img {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Tablet / small desktop (769–1439px) — no Figma frame exists at these
   widths for either page, so the desktop composition is scaled down
   fluidly rather than invented: the headline shrinks with the viewport
   and the background keeps covering, which is all this hero needs since
   it has no separately-positioned foreground elements. */
/* Header is 92px tall between 769 and 1280px — its own breakpoint,
   independent of the layout rule above. */
/* Phone (≤768px) — Figma has a dedicated 393x524 frame per page
   (6095:58300 / 6095:60815) with its own, much tighter crop of the same
   render (the person moves to the right edge so the text column clears
   them). That crop is a separate exported asset, set per page as
   --hero-bg-mobile. */
@media (max-width: 768px) {
  .sec-sa-hero {
    min-height: var(--m524);
    background-image: var(--hero-bg-mobile, var(--hero-bg));
    /* Header is exactly 68px tall at this breakpoint (8px top padding +
       60px pill), so the hero's photo reads through behind it instead of
       leaving a white strip above the pill. Same number, same reasoning
       as css/industries/_shared/hero.css. */
    margin-top: calc(-1 * var(--m68));
  }

  .sec-sa-hero__inner {
    min-height: var(--m524);
    /* Figma places the text at x:22–24 on the 393px canvas; --page-pad is
       16px at this breakpoint, and the section has already cancelled it,
       so this is the literal Figma inset. */
    padding: 0 var(--m24);
    align-items: flex-start;
  }

  .sec-sa-hero__content {
    /* Figma: 214px (SuperApp) / 229px (Digital Workplace) wide on a 393px
       canvas. Expressed as a max-width so the column still grows on the
       wider phones between 393px and 768px instead of hugging a fixed
       393px-canvas width and leaving the rest empty. */
    max-width: var(--m-content-max-width, var(--m240));
    gap: var(--m16);
    /* Figma: text top 110px (SuperApp) / 118px (Digital Workplace),
       measured from the top of the 524px frame. The frame's top IS the
       photo's top — and the -68px pull above puts the photo at the
       document's top too, so the Figma value maps 1:1; adding the 68px
       back (as this used to) parked the whole text block 68px too low. */
    padding-top: var(--m-text-top, var(--m110));
    padding-bottom: var(--m40);
  }

  .sec-sa-hero__eyebrow {
    gap: var(--m8);
    font-size: var(--m11);
    letter-spacing: 1.87px;
    /* The breadcrumb runs wider than the 214/229px text column in Figma
       (6095:60815: one line nearly edge to edge) — freed from the column
       cap so "Digital Workplace SuperApp" doesn't wrap with a hanging
       indent. */
    width: max-content;
    max-width: calc(100vw - 2 * var(--m24));
    white-space: nowrap;
  }

  .sec-sa-hero__title {
    font-size: var(--m36);
    line-height: 1;
    letter-spacing: -0.36px;
    gap: var(--m4);
  }

  .sec-sa-hero__body {
    gap: var(--m24);
  }

  .sec-sa-hero__desc {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .sec-sa-hero__cta {
    /* /superapp/ uses the small button variant on phone (40px, 14px
       label); /digital-workplace-superapp/ keeps the big one. Both are
       driven from the section's inline --m-cta-* values. */
    height: var(--m-cta-h, var(--m56));
    padding: var(--m4) var(--m-cta-pad-r, var(--m20)) var(--m4) var(--m-cta-pad-l, var(--m24));
    font-size: var(--m-cta-fs, var(--m16));
  }
}

/* Very narrow phones — the 240px text column and the 36px headline both
   need to give way before they start overflowing a 320px viewport. */
@media (max-width: 359px) {
  .sec-sa-hero__title {
    font-size: var(--m30);
  }

  .sec-sa-hero__content {
    max-width: 100%;
  }
}