/* Product: Zoho Projects Plus - page-specific design.
   No official icon file exists for this suite name, so the accent is a chosen indigo - distinct
   from the suite family already built (Zoho One red, CRM Plus blue, Workplace/People Plus red,
   FinancePlus green, Service Plus teal, Marketing Plus gold). Mechanic is a vertical layer stack:
   click a layer to expand it while the others compress to a thin strip - distinct from every
   other suite mechanic (switchboard, reach-meter, stepper, tab-lens, merge-animation,
   toggle-checklist).

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

.prjp-page { --prjp: #3a5fa8; --prjp-d: #24437f; --prjp-l: #eaf0f9; }

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

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

.prjp-stack { display: flex; flex-direction: column; gap: 8px; }
.prjp-layer { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color .2s ease; }
.prjp-layer.is-open { border-color: var(--prjp); }
.prjp-layer-h {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: start;
  font: inherit; cursor: pointer; background: var(--white); border: none; padding: 16px 18px;
}
.prjp-layer-n {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .88rem; background: var(--prjp-l); color: var(--prjp-d);
  transition: background .2s ease, color .2s ease;
}
.prjp-layer.is-open .prjp-layer-n { background: var(--prjp); color: #fff; }
.prjp-layer-t { font-weight: 700; font-size: 1rem; flex: 1; }
.prjp-layer-app { font-size: .82rem; font-weight: 700; color: var(--prjp-d); background: var(--prjp-l); padding: 4px 10px; border-radius: 999px; }
.prjp-layer-b { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: var(--prjp-l); }
.prjp-layer.is-open .prjp-layer-b { max-height: 140px; }
.prjp-layer-b p { margin: 0; padding: 4px 18px 18px 62px; color: var(--ink); font-size: .93rem; line-height: 1.6; }

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

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

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