/* StaffIntra's own sections on the Staffintra page: the redesigned Problems
   rows, the brand Section Animation, and the In Motion tree. Loaded after
   main.css and staffintra-overrides.css, scoped by si-/sipro-/sitree- classes. */

/* ---------- Problems, editorial carousel ---------- */
.si-problems .sec-title {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.si-problems .sec-title .content {
  margin-top: 14px;
  color: #777676;
  font-size: 17px;
}

.siprob-carousel {
  position: relative;
  /* Fluid card width: multiple on desktop, ~1 + peek on mobile. */
  --siprob-card-w: clamp(300px, 30vw, 440px);
}
.siprob-controls {
  position: absolute;
  right: 0;
  top: -64px;
  display: inline-flex;
  gap: 10px;
  z-index: 3;
}
.siprob-nav {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #e7ddf8;
  background: #fff;
  color: #2f1257;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.siprob-nav:hover,
.siprob-nav:focus-visible {
  background: #f6f1ff;
  border-color: #cdb2f6;
  transform: translateY(-1px);
}

.siprob-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--siprob-card-w);
  gap: 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 2px 10px;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
}
.siprob-track:active {
  cursor: grabbing;
}
.siprob-track::-webkit-scrollbar {
  display: none;
}
.siprob-track:focus-visible {
  outline: 2px solid #cdb2f6;
  outline-offset: 6px;
  border-radius: 24px;
}

.siprob-card {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: 24px;
  overflow: hidden;
  background: #0d0e13;
  border: 1px solid rgba(120, 26, 254, 0.16);
  box-shadow: 0 10px 30px rgba(14, 5, 38, 0.10);
  cursor: pointer;
  outline: none;
  isolation: isolate;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.siprob-card__art {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.siprob-card__art .siprob-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.02);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bottom scrim keeps the title legible over the artwork. */
.siprob-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(10, 8, 20, 0) 40%,
    rgba(10, 8, 20, 0.55) 72%,
    rgba(8, 6, 16, 0.9) 100%
  );
  pointer-events: none;
  transition: background 0.4s ease;
}

.siprob-card__body {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 26px 28px;
  text-align: left;
}
.siprob-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  font-size: clamp(18px, 1.35vw, 22px);
  color: #ffffff;
  max-width: 15ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.siprob-card__desc {
  margin: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  color: rgba(233, 226, 250, 0.82);
  font-size: 14px;
  line-height: 1.55;
  max-width: 34ch;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.45s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Hover / focus / active: reveal description, lift card, nudge artwork. */
.siprob-card:hover,
.siprob-card:focus-visible,
.siprob-card:focus-within,
.siprob-card.is-active {
  border-color: rgba(120, 26, 254, 0.42);
  box-shadow: 0 22px 48px rgba(31, 8, 74, 0.24);
  transform: translateY(-3px);
}
.siprob-card:hover .siprob-art,
.siprob-card:focus-within .siprob-art,
.siprob-card.is-active .siprob-art {
  transform: scale(1.06);
}
.siprob-card:hover .siprob-card__scrim,
.siprob-card:focus-within .siprob-card__scrim,
.siprob-card.is-active .siprob-card__scrim {
  background: linear-gradient(
    180deg,
    rgba(10, 8, 20, 0) 26%,
    rgba(10, 8, 20, 0.6) 60%,
    rgba(8, 6, 16, 0.94) 100%
  );
}
.siprob-card:hover .siprob-card__desc,
.siprob-card:focus-within .siprob-card__desc,
.siprob-card.is-active .siprob-card__desc {
  max-height: 6.5em;
  opacity: 1;
  transform: translateY(0);
  margin-top: 12px;
}

@media (max-width: 1199px) {
  .siprob-carousel {
    --siprob-card-w: clamp(320px, 44vw, 420px);
  }
}
@media (max-width: 900px) {
  .siprob-controls {
    position: static;
    justify-content: flex-end;
    margin: 0 0 16px;
  }
}
@media (max-width: 767px) {
  .siprob-carousel {
    --siprob-card-w: 82vw; /* ~1 card + peek of the next */
  }
  .siprob-track {
    gap: 16px;
  }
  .siprob-card__body {
    padding: 22px 22px 24px;
  }
  .siprob-card__title {
    font-size: 20px;
  }
  /* On touch, show the description in the active state (tap to toggle). */
  .siprob-card.is-active .siprob-card__desc {
    max-height: 6.5em;
    opacity: 1;
    transform: translateY(0);
    margin-top: 12px;
  }
}
@media (max-width: 400px) {
  .siprob-carousel {
    --siprob-card-w: 86vw;
  }
}

/* ---------- Section Animation, the brand clip right after the hero ----------
   It now travels up over the pinned hero inside .si-recede, so it carries its
   own opaque light ground: a bare card would let the dark hero show through
   the sides as it wipes. */
.si-secanim {
  position: relative;
  z-index: 1;
  padding: 110px 0 120px;
  background: #ffffff;
}
/* White laptop shell so the clip reads as a screen on a real device, with a
   visible keyboard base beneath the panel. */
.si-laptop {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}
.si-laptop__screen {
  position: relative;
  background: #ffffff;
  border: 14px solid #ffffff;
  border-radius: 26px 26px 10px 10px;
  box-shadow: 0 28px 60px rgba(26, 12, 58, 0.16), 0 8px 18px rgba(26, 12, 58, 0.08);
  overflow: hidden;
}
.si-laptop__screen::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 66px;
  height: 7px;
  border-radius: 999px;
  background: rgba(36, 18, 72, 0.16);
  z-index: 2;
}
.si-laptop__screen video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.si-laptop__base {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: 44px;
  /* Base reads as a real laptop deck: slightly WIDER than the screen above it. */
  width: min(106%, 1240px);
  margin: -2px 0 0;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #fdfdff 0%, #f1ebfb 74%, #e6daf8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -10px 20px rgba(75, 42, 123, 0.12), 0 18px 34px rgba(23, 10, 52, 0.15);
}
.si-laptop__base::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d4c2f1 0%, #f7f1ff 100%);
}

/* ---------- Power-on + pointer choreography ----------
   The screen starts dark (display off). A pointer travels in from the lower
   right, lands center-screen with a click ripple, and the display switches on
   at that instant. Everything is armed by the .is-live class added when the
   laptop first scrolls into view, so it plays exactly once. */
.si-laptop__poweron {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 12px;
  background: radial-gradient(120% 120% at 50% 45%, #241247 0%, #120a24 60%, #0a0616 100%);
  opacity: 1;
  pointer-events: none;
}
.si-laptop__cursor {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  /* park it off toward the lower-right until the animation runs */
  transform: translate(320px, 220px);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(10, 6, 22, 0.4));
}
.si-laptop__ripple {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(122, 92, 214, 0.9);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.si-laptop.is-live .si-laptop__cursor {
  animation: si-cursor-in 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.si-laptop.is-live .si-laptop__ripple {
  animation: si-cursor-click 0.6s ease-out 1.35s forwards;
}
.si-laptop.is-live .si-laptop__poweron {
  animation: si-poweron 0.55s ease-out 1.45s forwards;
}
@keyframes si-cursor-in {
  0%   { transform: translate(320px, 220px); opacity: 0; }
  12%  { opacity: 1; }
  80%  { transform: translate(0, 0); opacity: 1; }
  86%  { transform: translate(0, 3px) scale(0.9); }
  92%  { transform: translate(0, 0) scale(1); }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes si-cursor-click {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}
@keyframes si-poweron {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .si-laptop__poweron { opacity: 0; }
  .si-laptop__cursor { display: none; }
}

@media (max-width: 991px) {
  .si-secanim {
    padding: 80px 0 90px;
  }
  .si-laptop__screen {
    border-width: 10px;
    border-radius: 20px 20px 9px 9px;
  }
  .si-laptop__screen::before {
    top: 7px;
    width: 54px;
    height: 6px;
  }
  .si-laptop__base {
    height: 32px;
    border-radius: 0 0 20px 20px;
  }
  .si-laptop__base::before {
    width: 116px;
    height: 10px;
  }
}

/* ---------- In motion: the workday as a tree ----------
   A trunk down the middle, a numbered node per moment, clips alternating
   to either side with their write-up beside them. Each clip is small
   enough that two sit comfortably on one side. Adding a clip is adding a
   list item: the sides alternate off the index, nothing counts nodes. */
.si-tree {
  padding: 0 0 120px;
}
.si-tree .sec-title .content {
  margin-top: 14px;
  color: #777676;
  font-size: 17px;
}

.sitree-list {
  list-style: none;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* Three tracks: one half, the trunk, the other half. The clip takes its
   own half and the write-up takes the opposite one, so no row leaves a
   dead half and the clip gets the room it earns. Both hug the trunk;
   the air sits on the outer edges where it belongs. */
.sitree-node {
  /* The clip runs to the edge of its half; the write-up keeps a shorter
     measure so the text stays readable rather than matching it. */
  --sitree-media: 560px;
  --sitree-copy: 500px;
  --sitree-gap: 76px;
  --sitree-rail: 64px;
  --sitree-arm: 34px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sitree-rail) minmax(0, 1fr);
  gap: 0 var(--sitree-arm);
  align-items: center;
  padding-bottom: var(--sitree-gap);
}
.sitree-node:last-child {
  padding-bottom: 0;
}

/* Every item is pinned to row 1. Without an explicit row, auto-placement
   walks the cursor past the trunk column and drops any later item asking
   for an earlier column onto a second row. */
.sitree-node--left .sitree-media {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}
.sitree-node--left .sitree-copy {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  text-align: left;
}
.sitree-node--right .sitree-copy {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}
.sitree-node--right .sitree-media {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
}

.sitree-media {
  width: 100%;
  max-width: var(--sitree-media);
}
.sitree-copy {
  width: 100%;
  max-width: var(--sitree-copy);
}

/* The trunk. The rail is a grid item, so it stretches only to the row's
   content box; the line has to reach through the node's bottom padding or
   it breaks into dashes between nodes. */
.sitree-rail {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  align-self: stretch;
}
.sitree-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: calc(-1 * var(--sitree-gap));
  width: 1px;
  background: #e5d5fd;
  transform: translateX(-50%);
}
.sitree-node:first-child .sitree-rail::before {
  top: 50%;
}
.sitree-node:last-child .sitree-rail::before {
  top: 50%;
  bottom: auto;
  height: 90px;
  background: linear-gradient(#e5d5fd, rgba(229, 213, 253, 0));
}

/* The little connecting lines. One line crosses the whole rail and the
   dot sits on top of it opaque, so it reads as two arms: one out to the
   clip, one out to the write-up. */
.sitree-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--sitree-arm));
  right: calc(-1 * var(--sitree-arm));
  height: 1px;
  background: #e5d5fd;
}

.sitree-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5d5fd;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: #781afe;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.sitree-node:hover .sitree-dot {
  background: #781afe;
  border-color: #781afe;
  color: #fff;
}

/* Deliberately no background on the video itself: the frame's watermark
   shows through while the clip buffers, and the clip paints over it once
   it has frames. */
.sitree-media {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ebdcfe;
  background:
    url("/staffintra-mark.png") no-repeat center / 44px auto,
    #f6f2fe;
  transition: border-color 0.3s ease;
}
.sitree-node:hover .sitree-media {
  border-color: #d9c2fd;
}
.sitree-media video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.sitree-copy h3 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
  color: #131313;
  margin: 0 0 11px;
  letter-spacing: -0.014em;
  line-height: 1.18;
}
.sitree-copy p {
  font-size: 16px;
  line-height: 1.62;
  color: #777676;
  margin: 0 0 16px;
}

.sitree-beats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0;
  margin: 0;
}
.sitree-node--right .sitree-beats {
  justify-content: flex-end;
}
.sitree-beats li {
  font-size: 12px;
  font-weight: 500;
  color: #5c4a86;
  background: #fbf9ff;
  border: 1px solid #ebdcfe;
  border-radius: 100px;
  padding: 6px 12px;
  white-space: nowrap;
}

/* Below the alternating measure the tree straightens: trunk on the left,
   every clip on the same side, write-up beneath. */
@media (max-width: 900px) {
  .sitree-node {
    --sitree-gap: 44px;
    --sitree-rail: 48px;
    grid-template-columns: var(--sitree-rail) minmax(0, 1fr);
    gap: 0 16px;
    align-items: start;
  }
  .sitree-node--left .sitree-media,
  .sitree-node--right .sitree-media {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-width: 440px;
  }
  .sitree-node--left .sitree-copy,
  .sitree-node--right .sitree-copy {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    max-width: 460px;
    text-align: left;
    padding-top: 18px;
  }
  .sitree-node--right .sitree-beats {
    justify-content: flex-start;
  }
  .sitree-rail {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .sitree-dot {
    top: 20px;
    transform: translate(-50%, 0);
  }
  .sitree-rail::before,
  .sitree-node:first-child .sitree-rail::before,
  .sitree-node:last-child .sitree-rail::before {
    top: 40px;
  }
  .sitree-node:last-child .sitree-rail::before {
    height: 70px;
  }
  /* Straightened, so the arm only reaches right, to the clip. */
  .sitree-rail::after {
    top: 40px;
    left: 50%;
    right: calc(-1 * var(--sitree-arm));
  }
}

@media (max-width: 600px) {
  .si-tree {
    padding-bottom: 90px;
  }
  .sitree-node {
    --sitree-rail: 40px;
  }
  .sitree-dot {
    width: 32px;
    height: 32px;
    font-size: 11.5px;
  }
  .sitree-rail::before,
  .sitree-node:first-child .sitree-rail::before,
  .sitree-node:last-child .sitree-rail::before {
    top: 36px;
  }
  .sitree-rail::after {
    top: 36px;
  }
  .sitree-copy h3 {
    font-size: 21px;
  }
}

/* ---------- How it works: coded step visuals ----------
   main.css caps .as-work-item .xb-item--img at 350px between 992 and 1199px,
   a figure that fitted the fixed-width PNGs it was written for. The coded
   mockups are fluid and carry their own narrow-width passes, so the cap only
   squeezes them below their legible floor. */
@media (max-width: 1199px) {
  .automation-saas .as-work-item .xb-item--img {
    max-width: 520px;
    width: 100%;
  }
}
@media (max-width: 991px) {
  .automation-saas .as-work-item .xb-item--img {
    display: block;
    transform: none;
  }
}

/* The step slot is a flex item at `flex: 0 1 auto`, so its base size comes
   from the content's max-content width. Two of the mockups declare
   container-type: inline-size, which applies contain: inline-size and makes
   their width independent of their own children: max-content resolves to
   zero and the slot collapsed, which is why steps 01 and 02 rendered as a
   sliver at the panel edge. A definite basis is what the slot was missing. */
.automation-saas .as-work-item .xb-item--img {
  flex: 0 1 520px;
  min-width: 0;
}
@media (max-width: 991px) {
  .automation-saas .as-work-item .xb-item--img {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Scroll-stack choreography for “Set it up once…”: each card sticks in place
   as the next one arrives, then naturally releases when scrolling back up. */
.si-work-stack .as-work-inner {
  position: relative;
}
/* user-directed card colour pass */
.si-work-stack .clr-pink {
  background: #ffffff;
}
.si-work-stack .clr-light-cream {
  background: #fff1fd;
}
.si-work-stack .clr-green {
  background: #e0ccff;
}
.si-work-stack .as-work-item .clr-light-cream .xb-item--number {
  background: linear-gradient(180deg, #4024c0 0%, #efc8f3 94.71%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.si-work-stack .as-work-item .clr-green .xb-item--number {
  background: linear-gradient(180deg, #4024c0 0%, #4024c0 82.1%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 992px) {
  .si-work-stack .si-work-stack__item {
    position: sticky;
    top: 118px;
    z-index: 1;
    margin-bottom: 26px;
  }
  .si-work-stack .si-work-stack__item:nth-child(2) {
    top: 152px;
    z-index: 2;
  }
  .si-work-stack .si-work-stack__item:nth-child(3) {
    top: 186px;
    z-index: 3;
  }
  .si-work-stack .si-work-stack__item .xb-item--inner {
    box-shadow: 0 18px 40px rgba(31, 9, 71, 0.11);
    border: 1px solid rgb(178 136 230 / 90%);
    backdrop-filter: saturate(1.04);
  }
}
@media (max-width: 991px) {
  .si-work-stack .si-work-stack__item {
    position: static;
  }
}

/* ---------- Platform: center mark ----------
   main.css sizes this tile at 124px, which read heavy against four cards of
   art. Lives here rather than in a component stylesheet because it restyles
   shared template markup, not anything a mockup owns. */
.automation-saas .as-introduction-logo .as-security-logo.main-logo {
  width: 92px;
  height: 92px;
}
@media (max-width: 991px) {
  .automation-saas .as-introduction-logo .as-security-logo.main-logo {
    width: 76px;
    height: 76px;
  }
}
@media (max-width: 767px) {
  .automation-saas .as-introduction-logo .as-security-logo.main-logo {
    width: 46px;
    height: 46px;
  }
}