/* Feature intro block — Figma 12935:3742 (1044 x 737) */

.sec-features-intro {
  background: var(--color-surface);
  padding-top: 85px;
}

/* keep 1044px as the *content* width (base .container adds 24px inline padding) */
.sec-features-intro .container--narrow {
  max-width: calc(var(--container-narrow) + 48px);
}

.sec-features-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.sec-features-intro__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -2px;
  text-align: center;
  color: var(--color-ink);
}

.sec-features-intro__cards {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.sec-features-intro__card {
  position: relative;
  flex: 0 0 auto;
  width: 510px;
  height: 616px;
  border-radius: 16px;
  overflow: hidden;
}

/* ---------- Card 01 ---------- */

.sec-features-intro__card-bg {
  position: absolute;
  left: -41.38%;
  top: -6.98%;
  width: 182.76%;
  height: 113.96%;
  max-width: none;
  pointer-events: none;
}

.sec-features-intro__content {
  position: absolute;
  left: 54px;
  top: 57px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 166px;
}

.sec-features-intro__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.sec-features-intro__label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-features-intro__label-icon {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  flex: 0 0 auto;
}

.sec-features-intro__label-icon img {
  position: absolute;
  left: 13.64%;
  right: 13.64%;
  top: 6.25%;
  bottom: 6.25%;
  width: 72.72%;
  height: 87.5%;
  max-width: none;
}

.sec-features-intro__label-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.7;
  color: var(--color-white);
  white-space: nowrap;
}

.sec-features-intro__lead {
  width: 361px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -1.7px;
  color: var(--color-white);
}

.sec-features-intro__prompts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 361px;
}

.sec-features-intro__prompt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 100px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.sec-features-intro__prompt--sm {
  font-size: 16px;
  letter-spacing: 0;
}

/* ---------- Card 02 ---------- */

.sec-features-intro__card--cloud {
  background: var(--color-white);
}

/* Pass-through on desktop: same padding box as the card, so every right/top offset
   below still resolves against a 510 x 616 frame. Only the <=560px block moves it. */
.sec-features-intro__stage {
  position: absolute;
  inset: 0;
}

.sec-features-intro__media {
  position: absolute;
  right: 156px;
  top: 199.05px;
  width: 200px;
  height: 200px;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  border-radius: 40px;
  background: #f2f0e6;
  overflow: hidden;
}

.sec-features-intro__media img {
  position: absolute;
  left: -6.5px;
  top: -8.55px;
  width: 207.876px;
  height: 276px;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.sec-features-intro__tag {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-features-intro__tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid rgba(59, 59, 59, 0.12);
  border-radius: 100px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  white-space: nowrap;
}

.sec-features-intro__tag-pill--wide {
  padding-inline: 16px;
}

.sec-features-intro__tag--booking-pages {
  right: 272.46px;
  top: 161.05px;
  width: 140px;
  height: 77.212px;
}

.sec-features-intro__tag--booking-pages .sec-features-intro__tag-pill {
  transform: rotate(-18.92deg);
}

.sec-features-intro__tag--meet-links {
  right: 183.2px;
  top: 114px;
  width: 105.602px;
  height: 47.594px;
}

.sec-features-intro__tag--meet-links .sec-features-intro__tag-pill {
  transform: rotate(7.25deg);
}

.sec-features-intro__tag--no-double-booking {
  right: 71.79px;
  top: 168.05px;
  width: 171.2px;
  height: 41.393px;
}

.sec-features-intro__tag--no-double-booking .sec-features-intro__tag-pill {
  transform: rotate(-2.16deg);
}

.sec-features-intro__tag--time-zones {
  right: 264.18px;
  top: 408.36px;
  width: 122.624px;
  height: 50.676px;
}

.sec-features-intro__tag--time-zones .sec-features-intro__tag-pill {
  transform: rotate(7.72deg);
}

.sec-features-intro__tag--reminders {
  right: 86.82px;
  top: 407.77px;
  width: 110.607px;
  height: 69.578px;
}

.sec-features-intro__tag--reminders .sec-features-intro__tag-pill {
  transform: rotate(20.52deg);
}

.sec-features-intro__tag--team-event-types {
  right: 146px;
  top: 468.05px;
}

@media (max-width: 900px) {
  .sec-features-intro__inner {
    gap: 40px;
  }

  .sec-features-intro__title {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .sec-features-intro__cards {
    flex-direction: column;
  }

  .sec-features-intro__card {
    width: 100%;
    max-width: 510px;
  }
}

/* ---------- Mobile ----------
   There is no mobile frame in the Figma file, so both treatments below are derived
   from the desktop composition's own rules. Card 01 is copy, so it reflows; card 02
   is a hand-scattered arrangement, so it scales as one piece. 560px is the width at
   which the card stops being clamped to its 510px desktop size. */

@media (max-width: 560px) {
  /* ----- Card 01: reflow, do not scale (the lead and the prompts are copy) ----- */
  .sec-features-intro__card--ai {
    height: auto;
    min-height: 520px;
    display: flex;
    flex-direction: column;
  }

  .sec-features-intro__content {
    /* relative, not static: the card-bg above it is absolutely positioned, so a static
       content block would be painted underneath it */
    position: relative;
    left: 0;
    top: 0;
    gap: 0;
    flex: 1;
    justify-content: space-between;
    padding: 40px 24px; /* 24 = section gutter; 40 = desktop 57 x 342/510 on the design's 8px step */
  }

  .sec-features-intro__lead {
    width: 100%;
    font-size: 26px; /* desktop 32; the section H2 already steps 48 -> 34 */
    letter-spacing: -1px; /* desktop -1.7 */
  }

  .sec-features-intro__prompts {
    width: 100%;
  }

  .sec-features-intro__prompt {
    justify-content: flex-start;
    text-align: left;
    font-size: 16px; /* desktop 18; keeps the longest prompt on one line at 390px */
    white-space: normal;
  }

  .sec-features-intro__prompt--sm {
    font-size: 15px; /* desktop 16 */
  }

  /* ----- Card 02: scale the whole stage ----- */
  /* The six tags and the portrait form a 342 x 391 cluster inside the 510 x 616 stage.
     Re-anchoring six rotated pills to a fluid grid would lose the scattered look, so the
     stage is scaled about its own centre instead: relative positions, rotations and the
     design's slight right-of-centre bias all survive untouched. 430 is the stage width at
     which the cluster leaves a ~25px card margin, i.e. the section gutter. */
  .sec-features-intro__card--cloud {
    height: auto;
    aspect-ratio: 510 / 616;
    --fi-scale: 1;
  }

  .sec-features-intro__stage {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 510px;
    height: 616px;
    /* translate must stay on the individual property: the `transform` shorthand is applied
       after `scale`, so a translate(-50%,-50%) shorthand would shift by the unscaled box */
    translate: -50% -50%;
    scale: var(--fi-scale);
  }
}

/* Stepped fallback for browsers without length-over-length division in calc().
   Each value is the one that is safe at the low end of its band. */
@media (max-width: 480px) {
  .sec-features-intro__card--cloud {
    --fi-scale: 0.89;
  }
}

@media (max-width: 430px) {
  .sec-features-intro__card--cloud {
    --fi-scale: 0.77;
  }
}

@media (max-width: 390px) {
  .sec-features-intro__card--cloud {
    --fi-scale: 0.72;
  }
}

@media (max-width: 360px) {
  .sec-features-intro__card--cloud {
    --fi-scale: 0.63;
  }
}

/* Exact, step-free scale where calc() can divide a length by a length (Chrome 125+,
   Safari 18+, Firefox 129+). 100cqw is the card's own width, so it never picks up the
   scrollbar the way 100vw would. */
@supports (scale: calc(1cqw / 1px)) {
  @media (max-width: 560px) {
    .sec-features-intro__card--cloud {
      container-type: inline-size;
    }

    .sec-features-intro__stage {
      scale: min(1, calc(100cqw / 430px));
    }
  }
}