/* Product: Zoho Writer / Sheet / Show - page-specific design. Primary accent sampled from
   Writer's icon (#226db4, the anchor app of this bundled catalog entry); Sheet (#2a8148) and
   Show (#e42527) accents used only inside the mockup tabs for visual distinction between the
   three apps. Mechanic is app-mockup tabs: switching tabs swaps both a small visual mockup of
   that app's interface and its feature lines - three genuinely different mockups, not the same
   data reframed.

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

.wsh-page { --wsh: #226db4; --wsh-d: #185086; --wsh-l: #eaf2fa; --wsh-sheet: #2a8148; --wsh-show: #e42527; }

.wsh-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;
}
.wsh-page .ph-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; }

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

.wsh-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 20px; }
.wsh-tab {
  font: inherit; cursor: pointer; padding: 9px 18px; border-radius: 999px;
  background: var(--white); border: 1.5px solid var(--line); color: var(--ink); font-weight: 700; font-size: .9rem;
}
.wsh-tab[aria-pressed="true"] { background: var(--wsh); border-color: var(--wsh); color: #fff; }

.wsh-stage { position: relative; height: 220px; background: var(--wsh-l); border-radius: 16px; overflow: hidden; }
.wsh-mock { position: absolute; inset: 0; padding: 20px; opacity: 0; transition: opacity .25s ease; }
.wsh-mock.is-active { opacity: 1; }
.wsh-mock-bar { width: 46px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--wsh) 40%, transparent); margin-block-end: 16px; }
.wsh-mock-sheet .wsh-mock-bar { background: color-mix(in srgb, var(--wsh-sheet) 40%, transparent); }
.wsh-mock-show .wsh-mock-bar { background: color-mix(in srgb, var(--wsh-show) 40%, transparent); }

.wsh-doc { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.wsh-doc-h { display: block; width: 55%; height: 12px; border-radius: 3px; background: var(--wsh-d); }
.wsh-doc-l { display: block; width: 100%; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--wsh) 25%, var(--white)); }
.wsh-doc-l.short { width: 65%; }

.wsh-grid { display: grid; grid-template-columns: repeat(4, 46px); grid-template-rows: repeat(3, 34px); gap: 4px; }
.wsh-grid span { background: var(--white); border: 1px solid color-mix(in srgb, var(--wsh-sheet) 30%, var(--line)); border-radius: 3px; }
.wsh-grid span.on { background: color-mix(in srgb, var(--wsh-sheet) 30%, var(--white)); border-color: var(--wsh-sheet); }

.wsh-slide { width: 320px; max-width: 100%; aspect-ratio: 16/9; background: var(--white); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--wsh-show) 25%, var(--line)); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.wsh-slide-t { display: block; width: 50%; height: 10px; border-radius: 3px; background: var(--wsh-show); }
.wsh-slide-b { display: block; width: 80%; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--wsh-show) 20%, var(--white)); }

.wsh-feats { margin-block-start: 18px; display: flex; flex-direction: column; gap: 6px; }
.wsh-feats p { margin: 0; font-size: .92rem; color: var(--ink); font-weight: 600; }
.wsh-feats p::before { content: "\2713"; margin-inline-end: 8px; color: var(--wsh-d); font-weight: 800; }

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

/* ------------------------------------------------------------------------- caps -- */
.wsh-caps { padding: clamp(48px, 7vw, 84px) 0; }
.wsh-caps h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 22px; }
/* Divided rows, not a card grid - these four items are the sub-products of one bundle,
   not four unrelated capabilities, so a definition-list reads more accurately than cards. */
.wsh-cap-grid { border-top: 1px solid var(--line); }
.wsh-cap { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
@media (max-width: 640px) { .wsh-cap { grid-template-columns: 1fr; gap: 4px; } }
.wsh-cap b { font-size: 1.02rem; color: var(--wsh-d); }
.wsh-cap p { margin: 0; color: var(--muted); font-size: .93rem; }

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