/* Homepage hero: a rotating headline tied to a strip of real app screens.
   Each word in the headline matches the screen on show. Behaviour: js/home-rotor.js. */

.suite-hero--rotor .suite-hero-grid {
  display: block;
  padding-bottom: 0;
  text-align: center;
}
.suite-hero--rotor .suite-hero-copy { max-width: 900px; margin: 0 auto; }
.suite-hero--rotor .suite-hero-copy h1 { max-width: none; margin-left: auto; margin-right: auto; }
.suite-hero--rotor .suite-hero-actions { justify-content: center; }

.suite-hero--rotor .suite-hero-copy h1 .home-rotor-word {
  display: block;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: .08em auto 0;
  padding-bottom: .1em;
  color: inherit;
  font-size: 1em;
  letter-spacing: inherit;
  transition: opacity .28s ease, transform .28s ease;
}
.home-rotor-word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .09em;
  border-radius: 999px;
  background: var(--coral);
}
.home-rotor-word.is-changing { opacity: 0; transform: translateY(.14em); }


.home-rotor { position: relative; z-index: 1; margin-top: 28px; text-align: center; padding-bottom: clamp(44px, 5vw, 68px); }
.home-rotor-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: min(100% - 32px, 1160px);
  margin: 0 auto 22px;
  padding: 0;
  list-style: none;
}
.home-rotor-tab {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #55524d;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.home-rotor-tab:hover { border-color: #1b1b1b; color: #1b1b1b; }
.home-rotor-tab[aria-pressed="true"] { border-color: #1b1b1b; background: #1b1b1b; color: #fff; }

.home-rotor-view { overflow: hidden; padding-bottom: 8px; }
.home-rotor-track {
  --slide: min(900px, 78vw);
  --gap: 20px;
  display: flex;
  gap: var(--gap);
  width: max-content;
  transform: translateX(calc(50vw - var(--slide) / 2 - (var(--slide) + var(--gap)) * var(--index, 0)));
  transition: transform .6s cubic-bezier(.22, .8, .24, 1);
}
.home-rotor-track .home-rotor-slide {
  flex: none;
  margin: 0;
  width: var(--slide);
  opacity: .5;
  cursor: pointer;
  transition: opacity .4s ease;
}
.home-rotor-slide.is-active { opacity: 1; cursor: default; }
.home-rotor-slide img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(27, 27, 27, .1);
}

/* A quiet "Learn more" under the screen in view. Hidden on the side cards so
   only the current app's link is visible and reachable by keyboard. */
.home-rotor-more {
  margin-top: 14px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.home-rotor-slide.is-active .home-rotor-more { visibility: visible; opacity: 1; transition: opacity .3s ease .15s, visibility 0s; }
.home-rotor-more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  color: #77736c;
  font-size: 13px;
  font-weight: 560;
  text-decoration: none;
  transition: color .2s ease;
}
.home-rotor-more-arrow { display: inline-block; transition: transform .2s ease; }
.home-rotor-more a:hover, .home-rotor-more a:focus-visible { color: #1b1b1b; }
.home-rotor-more a:hover .home-rotor-more-arrow, .home-rotor-more a:focus-visible .home-rotor-more-arrow { transform: translateX(3px); }
.home-rotor-more a:focus-visible { outline: 2px solid #1b1b1b; outline-offset: 3px; border-radius: 4px; }

/* At 1280px and up all tabs fit on one row. Below that the row becomes a
   single-line swipe strip: snap, faded edges, no scrollbar, never wraps. */
@media (min-width: 1280px) {
  .home-rotor-tabs { flex-wrap: nowrap; }
}
@media (max-width: 1279px) {
  .home-rotor-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    padding: 2px 28px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 28px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  .home-rotor-tabs::-webkit-scrollbar { display: none; }
  .home-rotor-tabs > li { flex: none; scroll-snap-align: start; }
  /* Centre the strip when it fits, without clipping its start when it overflows. */
  .home-rotor-tabs > li:first-child { margin-left: auto; }
  .home-rotor-tabs > li:last-child { margin-right: auto; }
  .home-rotor-tab { flex: none; }
}
@media (max-width: 720px) {
  .home-rotor-track { --slide: 88vw; --gap: 12px; }
  .home-rotor-tabs { padding: 2px 16px; scroll-padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .home-rotor-word, .home-rotor-track, .home-rotor-slide, .home-rotor-more, .home-rotor-more-arrow { transition: none; }
}

/* The statement headline under the strip keeps the look of the hero h1. */
.suite-hero-statement {
  max-width: 21ch;
  margin: 24px 0 26px;
  color: inherit;
  font-size: clamp(2.4rem, 4.05vw, 3.75rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.075em;
}
@media (max-width: 520px) { .suite-hero-statement { font-size: clamp(2.15rem, 10.4vw, 2.9rem); } }

/* Removes the animation for the unseen jump from a copy back to the real card. */
.home-rotor-track.is-jumping,
.home-rotor-track.is-jumping .home-rotor-slide { transition: none; }

/* The tilted plates behind the feature-row screenshots reach a few pixels past
   the viewport at 768-1280px. Clip the full-width section so the page itself
   never scrolls sideways; the plates stay visible inside it. */
.product-theater { overflow-x: clip; }