/* Site v2 /enterprise: only what the shared v2 classes don't cover. The page is built from the v2 hero, heads,
   feature rows, cards, points and checks (base.css) on the flat tint (.v2-tinted); this file adds the logo
   marquee, the tiers diagram, the platform rows' room for the animations, the connector grid and Microsoft 365
   tiles, the demo browser frame, the roadmap and the contact panel. The four platform animations have their own
   files (css/enterprise/<name>.css). Colours are the v2 theme's, bar the Microsoft brand tiles. */

/* The rows' slide-in starts 28px outside the column. */
.v2-ent {
  overflow-x: clip;
}

.v2-ent-accent {
  background: linear-gradient(90deg, var(--accent), var(--glow-b-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* "AI-First" wraps as one phrase, never at its hyphen. */
  white-space: nowrap;
}
/* A phrase the hero title keeps on one line ("Maximize Revenue"), so it breaks before it. */
.v2-ent-keep {
  white-space: nowrap;
}

/* The design's type where it runs larger than v2's: the hero title, the row titles and text, the check lists. */
.v2-ent .v2-hero__title {
  max-width: 1100px;
  font-size: clamp(36px, 3.9vw, 50px);
  line-height: 1.07;
}
/* The hero lead: two even lines, no word left alone on the second. */
.v2-ent .v2-hero .v2-lead {
  text-wrap: balance;
}
/* The centred section headings (platform, connectors, demos): larger than a section head, two even lines at every width (outranks base.css's
   .v2-tinted .v2-head__title.v2-h2). */
.v2-tinted .v2-head__title.v2-ent-balance {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1.1;
  text-wrap: balance;
}
.v2-ent .v2-feature__title {
  max-width: none;
  font-size: clamp(24px, 2.2vw, 28px);
  line-height: 1.15;
}
.v2-ent .v2-feature__body {
  font-size: 17px;
  line-height: 1.6;
}
.v2-ent .v2-feature__body .v2-checks {
  font-size: 15px;
  line-height: 22px;
}

/* ---------- Customer logos: a continuous marquee with faded edges ---------- */
.v2-ent-logos {
  padding-bottom: var(--section);
}
/* The logo strip's bottom padding is the one gap before the next section, as
   between two plain sections in base.css. */
.v2-ent-logos + .v2-section {
  padding-top: 0;
}
.v2-ent-logos .v2-wrap {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  text-align: center;
}
.v2-ent-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    var(--ink) 12%,
    var(--ink) 88%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    var(--ink) 12%,
    var(--ink) 88%,
    transparent
  );
}
.v2-ent-marquee__track {
  display: flex;
  width: max-content;
  animation: v2-ent-marquee 40s linear infinite;
}
.v2-ent-marquee__track:hover {
  animation-play-state: paused;
}
.v2-ent-marquee__set {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 72px;
  padding-right: 72px;
}
.v2-ent-marquee__set img {
  flex-shrink: 0;
  /* Grey artwork: unchanged in light, light grey on navy. */
  filter: var(--logo-filter);
}
@keyframes v2-ent-marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-ent-marquee__track {
    animation: none;
  }
}

/* ---------- Three tiers: copy and the tier list beside the hierarchy diagram ---------- */
.v2-ent-tiers {
  display: grid;
  gap: var(--space-10) var(--space-16);
  align-items: center;
}
.v2-ent-tiers .v2-head {
  margin-bottom: var(--space-8);
}
.v2-ent-tier-list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-ent-tier {
  position: relative;
  padding-left: var(--space-6);
}
.v2-ent-tier::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--v2-ent-tone);
}
.v2-ent-tier .v2-h3 {
  margin-top: var(--space-1);
}
.v2-ent-tier--accent {
  --v2-ent-tone: var(--accent);
}
.v2-ent-tier--blue {
  --v2-ent-tone: var(--glow-mid);
}
.v2-ent-tier--cyan {
  --v2-ent-tone: var(--glow-b-deep);
}
.v2-ent-chart-card {
  align-items: center;
  overflow: hidden;
}
.v2-ent-chart {
  max-width: 100%;
  height: auto;
}
.v2-ent-chart__dot {
  fill: var(--rule);
}
.v2-ent-chart__stop--accent {
  stop-color: var(--accent);
}
.v2-ent-chart__stop--blue {
  stop-color: var(--glow-mid);
}
.v2-ent-chart__stop--cyan {
  stop-color: var(--glow-b-deep);
}
.v2-ent-chart__stop--violet-light {
  stop-color: var(--accent);
}
.v2-ent-chart__stop--violet-deep {
  stop-color: var(--accent-ink);
}
.v2-ent-chart__stop--beam-base {
  stop-color: var(--glow-b-deep);
  stop-opacity: 0.16;
}
.v2-ent-chart__stop--beam-top {
  stop-color: var(--accent);
  stop-opacity: 0;
}
.v2-ent-chart__shadow {
  flood-color: var(--ink);
  flood-opacity: 0.08;
}
.v2-ent-chart__link-top {
  fill: none;
  stroke-width: 1.8;
}
.v2-ent-chart__link-bottom {
  fill: none;
  stroke-width: 1.4;
  stroke-opacity: 0.9;
}
.v2-ent-chart__shield {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.6;
}
.v2-ent-chart__project {
  fill: var(--paper);
  stroke: color-mix(in srgb, var(--glow-mid) 30%, var(--paper));
}
.v2-ent-chart__project-icon {
  fill: none;
  stroke: var(--glow-mid);
  stroke-width: 1.6;
}
.v2-ent-chart__person {
  fill: var(--paper);
  stroke: color-mix(in srgb, var(--glow-b) 35%, var(--paper));
}
.v2-ent-chart__person-icon {
  fill: var(--glow-b-deep);
}
.v2-ent-chart__master-label,
.v2-ent-chart__project-label,
.v2-ent-chart__brain-title,
.v2-ent-chart__brain-text {
  font-family: var(--font-sans);
  font-weight: 600;
}
.v2-ent-chart__master-label {
  fill: var(--paper);
  font-size: 14px;
}
.v2-ent-chart__project-label {
  fill: var(--glow-mid-ink);
  font-size: 13px;
}
.v2-ent-chart__caption {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
}
.v2-ent-chart__brain-title {
  fill: var(--paper);
  font-size: 17px;
}
.v2-ent-chart__brain-text {
  fill: var(--paper);
  fill-opacity: 0.85;
  font-size: 13px;
  font-weight: 400;
}

/* ---------- Platform and demo rows: a wider column (1240px, media 1.7 : copy 1) for the animations, which are
   drawn at about 680px wide (zoom scales each to its column), and for the demo videos. ---------- */
.v2-ent-wide .v2-wrap {
  --max: 1240px;
}
/* Rows slide in from their media side as they reach the screen (once js/enterprise.js has marked the page). */
.v2-ent-motion [data-ent-reveal] > .v2-feature__media {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Even rows start from the left; only until revealed, as this rule outranks the revealed state below. */
.v2-ent-motion
  .v2-features
  > [data-ent-reveal]:nth-child(even):not(.v2-ent-in)
  > .v2-feature__media {
  transform: translateX(-28px);
}
.v2-ent-motion [data-ent-reveal] > .v2-feature__copy {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s ease 0.12s,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s;
}
.v2-ent-motion [data-ent-reveal].v2-ent-in > .v2-feature__media,
.v2-ent-motion [data-ent-reveal].v2-ent-in > .v2-feature__copy {
  opacity: 1;
  transform: none;
}

/* ---------- Connectors ---------- */
.v2-ent-connect {
  display: grid;
  gap: var(--col-gap);
}
.v2-ent-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}
.v2-ent-connectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-ent-connectors li {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
}
.v2-ent-connectors img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.v2-ent-card-row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
}
/* Word, Excel, PowerPoint and Outlook as letter tiles in their brand colours */
.v2-ent-office {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}
.v2-ent-office i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--on-accent);
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
}
.v2-ent-office--word {
  background: var(--ent-brand-word);
}
.v2-ent-office--excel {
  background: var(--ent-brand-excel);
}
.v2-ent-office--powerpoint {
  background: var(--ent-brand-powerpoint);
}
.v2-ent-office--outlook {
  background: var(--ent-brand-outlook);
}

/* ---------- Demos: each app's video in a browser frame showing its address ---------- */
.v2-ent-browser__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.v2-ent-browser__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rule);
}
.v2-ent-browser__bar span {
  max-width: 70%;
  margin: 0 auto;
  padding: 0 12px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--paper-2);
  box-shadow: var(--ring);
  color: var(--muted);
  font: 400 11.5px/20px var(--font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.v2-ent-browser video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--media-bg);
}
.v2-ent-note {
  margin-top: var(--space-12);
  text-align: center;
}

/* ---------- A section head with a "more" link on the right ---------- */
.v2-ent-head-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  column-gap: var(--space-12);
  margin-bottom: var(--space-10);
}
.v2-ent-head-row .v2-head {
  margin-bottom: 0;
}
/* The design's cards: tighter (8px) and 14px text. */
.v2-ent .v2-grid > .v2-card {
  gap: var(--space-2);
}
.v2-ent .v2-grid > .v2-card .v2-card__text {
  font-size: var(--fs-sm);
  line-height: 20px;
}
.v2-ent .v2-card .v2-stat__figure {
  margin: var(--space-2) 0 0;
}

/* ---------- Roadmap: three phases on one purple-to-cyan line ---------- */
.v2-ent-roadmap {
  position: relative;
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.v2-ent-roadmap__step {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.v2-ent-roadmap__step span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--v2-ent-ring);
  color: var(--v2-ent-ink);
  font: 400 13px var(--font-mono);
}
.v2-ent-roadmap__step--accent {
  --v2-ent-ring: var(--accent);
  --v2-ent-ink: var(--accent-ink);
}
.v2-ent-roadmap__step--blue {
  --v2-ent-ring: var(--glow-mid);
  --v2-ent-ink: var(--glow-mid-ink);
}
.v2-ent-roadmap__step--cyan {
  --v2-ent-ring: var(--glow-b-deep);
  --v2-ent-ink: var(--glow-b-ink);
}

/* ---------- Consultation: the head beside the form on the purple-to-cyan tint ---------- */
.v2-ent-contact {
  display: grid;
  gap: var(--space-8);
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--tint);
  box-shadow: var(--ring);
}
.v2-ent-contact .v2-head {
  margin-bottom: 0;
}
.v2-ent-contact__form .v2-form {
  margin: 0;
}

/* ---------- Wider screens ---------- */
@media (min-width: 720px) {
  .v2-ent-connectors {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .v2-ent-roadmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .v2-ent-roadmap::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 19px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--glow-b-deep));
  }
}
@media (min-width: 1024px) {
  .v2-ent-tiers {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  }
  .v2-ent-wide .v2-feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    column-gap: 56px;
  }
  .v2-ent-wide .v2-features > .v2-feature:nth-child(even) {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
  .v2-ent-contact {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    align-items: start;
    gap: 56px;
  }
}

/* The animations' zoom: a little larger on wide screens, smaller where the column narrows. */
@media (min-width: 1440px) {
  .v2-ent-wide [data-ent-media] {
    zoom: 1.1;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .v2-ent-wide [data-ent-media] {
    zoom: 0.8;
  }
}
@media (max-width: 1023px) {
  .v2-ent-wide [data-ent-media] > .ent-anim,
  .v2-ent-chart-card > .v2-ent-chart {
    zoom: 0.75;
  }
}
@media (max-width: 599px) {
  .v2-ent-chart-card > .v2-ent-chart {
    zoom: 0.5;
  }
  /* The animations have their own phone layouts (in their css/enterprise/ files) and run at full size, centred
     and no wider than a large phone; a little under full size on the narrowest phones, where those layouts'
     350px would not fit. */
  .v2-ent-wide [data-ent-media] > .ent-anim {
    zoom: 1;
    max-width: 440px;
    margin-inline: auto;
  }
  .v2-ent-card-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 359px) {
  .v2-ent-wide [data-ent-media] > .ent-anim {
    zoom: 0.8;
  }
}