/* Product: Zoho Workplace - page-specific design.
   Accent sampled from the icon (#e22728, the shared Zoho red). The mechanic is a spatial
   consolidation: seven floating app chips converge into one Workplace badge on click, with a
   count that drops from 7 to 1 - unlike any diagram/slider/switch used on other pages.

   All classes scoped to .wkp-page, prefixed wkp-. */

.wkp-page { --wkp: #e22728; --wkp-d: #a01315; --wkp-l: #fdecec; }

.product-hero.ph-tag,
.wkp-page .ph-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; font-weight: 700; font-size: .9rem; color: #fff;
  margin-block-end: 18px;
}
.wkp-page .ph-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; }

/* ------------------------------------------------------------------------ merge -- */
.wkp-merge { padding: clamp(48px, 7vw, 84px) 0; }
.wkp-merge h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0 0 12px; }
.wkp-merge .lede { max-width: 82ch; }

.wkp-stage {
  margin-block-start: 30px;
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 40px);
  flex-wrap: wrap;
  background: var(--wkp-l); border-radius: 20px;
  padding: clamp(28px, 5vw, 56px) 20px;
  min-height: 220px;
}
.wkp-cloud {
  position: relative; width: 240px; height: 160px;
  display: grid; place-items: center;
}
.wkp-chip {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .88rem;
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 10px 24px -16px rgba(160, 19, 21, .4);
  transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .5s ease;
}
/* seven resting positions, roughly circular, purely presentational */
.wkp-chip:nth-child(1) { top: 4%;  inset-inline-start: 38%; }
.wkp-chip:nth-child(2) { top: 20%; inset-inline-start: 4%; }
.wkp-chip:nth-child(3) { top: 20%; inset-inline-end: 4%; }
.wkp-chip:nth-child(4) { top: 52%; inset-inline-start: -6%; }
.wkp-chip:nth-child(5) { top: 52%; inset-inline-end: -6%; }
.wkp-chip:nth-child(6) { top: 78%; inset-inline-start: 22%; }
.wkp-chip:nth-child(7) { top: 78%; inset-inline-end: 22%; }

.wkp-stage.is-merged .wkp-chip {
  transform: translate(0, 40px) scale(.4);
  opacity: 0;
  transition-delay: calc(var(--d) * .05s);
}

/* The svg itself points down. In the wide row layout (cloud - arrow - one, RTL so "one" sits
   to the inline-end/left of "arrow") it must point left instead; the narrow stacked layout
   needs the natural downward direction, so that media query below removes the rotation. */
.wkp-arrow { color: var(--wkp-d); flex: none; transform: rotate(90deg); }

.wkp-one {
  width: 130px; height: 130px; border-radius: 24px; flex: none;
  display: grid; place-items: center; text-align: center;
  background: var(--white); border: 2px solid var(--wkp-l);
  font-weight: 800; font-size: .95rem; color: var(--wkp-d);
  box-shadow: 0 20px 40px -26px rgba(160, 19, 21, .45);
  transform: scale(.001); opacity: 0;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1) .35s, opacity .3s ease .35s;
}
.wkp-stage.is-merged .wkp-one { transform: scale(1); opacity: 1; }

.wkp-ctrl { margin-block-start: 26px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.wkp-count { margin: 0; color: var(--muted); font-size: .95rem; }
.wkp-count span { font-weight: 800; color: var(--wkp-d); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------ need -- */
.wkp-need {
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--wkp-l);
  border-block: 1px solid color-mix(in srgb, var(--wkp) 18%, var(--line));
}
.wkp-need h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 0 0 12px; }
.wkp-need .lede { max-width: 82ch; margin: 0; }

/* ------------------------------------------------------------------------- apps -- */
.wkp-apps { padding: clamp(48px, 7vw, 84px) 0; }
.wkp-apps h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 22px; }
.wkp-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; }
.wkp-app { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.wkp-app b { display: block; margin-block-end: 6px; font-size: 1.02rem; color: var(--wkp-d); }
.wkp-app p { margin: 0; color: var(--muted); font-size: .93rem; }

/* ----------------------------------------------------------------------- move -- */
.wkp-move { padding: clamp(48px, 7vw, 84px) 0; }
.wkp-move h2 { font-size: 1.35rem; margin: 0 0 10px; }
.wkp-move h3 { font-size: 1.08rem; }

/* ------------------------------------------------------------------------- do -- */
.wkp-do {
  padding: clamp(48px, 7vw, 84px) 0;
  background: var(--wkp-l);
  border-block: 1px solid color-mix(in srgb, var(--wkp) 18%, var(--line));
}
.wkp-do h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 24px; }
.wkp-do-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 13px; }
.wkp-do-steps > div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.wkp-do-steps em { display: block; font-style: normal; font-size: .78rem; font-weight: 800; color: var(--wkp-d); margin-bottom: 6px; }
.wkp-do-steps h3 { margin: 0 0 6px; font-size: 1.02rem; }
.wkp-do-steps p { margin: 0; color: var(--muted); font-size: .93rem; }

@media (max-width: 900px) {
  .wkp-stage { flex-direction: column; }
  .wkp-arrow { transform: none; }
}