/* ============================================================
   WHAT'S INCLUDED — platform + team side-by-side panels
   ============================================================ */

.section-included { background: hsl(var(--background)); }

.included-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 880px) {
  .included-grid { grid-template-columns: 1fr; }
}

.included-card {
  display: flex;
  flex-direction: column;
  background: hsl(var(--muted) / .35);
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  overflow: hidden;
}

/* Top visual area inside each card */
.included-visual {
  position: relative;
  padding: 24px 24px 0;
  height: 280px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

/* --- Left: platform screenshot --- */
.included-visual-platform {
  align-items: flex-end;
}
.included-shot-frame {
  width: 100%;
  max-width: 560px;
  border-radius: 10px 10px 0 0;
  background: #fff;
  padding: 6px 6px 0;
  box-shadow:
    0 24px 40px -16px rgb(15 23 42 / .25),
    0 0 0 1px hsl(218 25% 88%);
  position: relative;
}
.included-platform-marquee {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: hsl(218 25% 96%);
}
.included-platform-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: included-platform-scroll 60s linear infinite;
  will-change: transform;
}
.included-platform-marquee:hover .included-platform-track {
  animation-play-state: paused;
}
@keyframes included-platform-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.included-platform-shot {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: top left;
}
@media (prefers-reduced-motion: reduce) {
  .included-platform-track { animation: none; }
}

.included-visual-team {
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  height: 280px;
  display: flex;
}
.included-marquee {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Soft fade at left/right edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.included-marquee-track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  /* The duplicated list contains 8 items twice = 16 items. Sliding by 50%
     of the track moves the duplicate row exactly into the original's place,
     so the loop seams invisibly. */
  animation: included-marquee-scroll 40s linear infinite;
  will-change: transform;
}
.included-marquee:hover .included-marquee-track {
  animation-play-state: paused;
}
@keyframes included-marquee-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.included-headshot {
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid hsl(218 25% 90%);
  border-radius: 12px;
  padding: 18px 10px 14px;
}
.included-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid hsl(218 25% 88%);
  background: hsl(218 25% 92%);
  flex-shrink: 0;
}
.included-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.included-role {
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  color: hsl(218 70% 18%);
  letter-spacing: -.005em;
  line-height: 1.3;
  min-height: 30px;
}

@media (prefers-reduced-motion: reduce) {
  .included-marquee-track { animation: none !important; }
}

/* Card body */
.included-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--background));
}
.included-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.1;
  margin: 0;
  color: hsl(218 70% 14%);
}
.included-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 4px;
}
.included-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.included-stat-num {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -.024em;
  line-height: 1;
  color: hsl(218 70% 14%);
  font-variant-numeric: tabular-nums;
}
.included-stat-lbl {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}
.included-stat-sep {
  width: 1px;
  align-self: stretch;
  background: hsl(var(--border));
  min-height: 32px;
}
.included-caption {
  font-size: 15px;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
  margin: 0;
  text-wrap: pretty;
}

/* Full-width Typical Results bar */
.included-results {
  margin-top: 24px;
  padding: 28px 32px;
  background: hsl(var(--muted) / .5);
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 720px) {
  .included-results {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
}

.included-results-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  color: hsl(218 70% 18%);
}
.included-results-label {
  display: inline-flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.15;
  color: hsl(218 70% 18%);
}

.included-results-stats {
  display: flex;
  justify-content: flex-end;
  gap: 56px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .included-results-stats { justify-content: flex-start; gap: 32px; }
}
.included-results-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.included-results-num {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -.024em;
  line-height: 1;
  color: hsl(218 70% 14%);
  font-variant-numeric: tabular-nums;
}
.included-results-lbl {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

/* ----- Dark-mode (style-remix / contrast) -----
   Match the hero's dark band exactly (hsl(222 25% 10%)) so the section
   feels like a continuation of the rest of the dark page. Cards stay
   white so the screenshot and headshots remain legible. */
body.style-remix .section-included,
body.style-contrast .section-included {
  background: hsl(222 25% 10%);
}
body.style-remix .section-included .eyebrow,
body.style-contrast .section-included .eyebrow { color: hsl(12 88% 65%); }
body.style-remix .section-included .h-section,
body.style-contrast .section-included .h-section { color: #fff; }
body.style-remix .section-included .lede,
body.style-contrast .section-included .lede { color: hsl(220 9% 75%); }

body.style-remix .included-card,
body.style-contrast .included-card {
  background: #fff;
  border-color: hsl(222 22% 22%);
}
body.style-remix .included-body,
body.style-contrast .included-body {
  background: #fff;
  border-top-color: hsl(218 25% 90%);
}
/* In dark mode use coral for emphasis, matching the rest of remix */
/* Dark-mode card numbers: cards are white so light-mode color cascades */

body.style-remix .included-shot-frame,
body.style-contrast .included-shot-frame {
  background: #fff;
  box-shadow:
    0 24px 40px -16px rgb(0 0 0 / .55),
    0 0 0 1px hsl(218 25% 86%);
}

body.style-remix .included-results,
body.style-contrast .included-results {
  background: hsl(222 22% 14%);
  border-color: hsl(222 22% 22%);
}
body.style-remix .included-results-mark,
body.style-contrast .included-results-mark,
body.style-remix .included-results-label,
body.style-contrast .included-results-label { color: #fff; }
body.style-remix .included-results-num,
body.style-contrast .included-results-num { color: #fff; }
body.style-remix .included-results-lbl,
body.style-contrast .included-results-lbl { color: hsl(220 9% 75%); }

body.style-remix .included-results,
body.style-contrast .included-results {
  background: hsl(222 22% 12%);
  border-color: hsl(222 22% 18%);
}
body.style-remix .included-results-mark,
body.style-contrast .included-results-mark,
body.style-remix .included-results-label,
body.style-contrast .included-results-label { color: #fff; }

body.style-remix .included-platform-shot,
body.style-contrast .included-platform-shot {
  /* nothing — frame provides the bezel */
}