/* Solution: projects and operations - page-specific design.

   The Projects icon samples to a blue-violet (#3859a3) that is distinct from the Zoho blue used
   on the sales page, which is what keeps these two solution pages from reading as the same
   family. Zoho yellow marks waiting time throughout - it is the only thing on the page that is
   neither work nor failure, and it needed a colour of its own.

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

.po-page {
  --po: #3859a3;
  --po-d: #27407a;
  --po-l: #eaeef7;
  --po-w: #f7b11a;
  --po-ink: #131a2b;
}

/* ---------------------------------------------------------------------- hero -- */
.po-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
  background: linear-gradient(178deg, var(--po-l) 0%, var(--white) 60%);
  border-block-end: 1px solid color-mix(in srgb, var(--po) 16%, var(--line));
}
.po-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.po-hero h1 { font-size: clamp(1.65rem, 3.6vw, 2.65rem); line-height: 1.19; margin: 0 0 14px; color: var(--po-ink); }
.po-hero .lede { max-width: 66ch; margin-block-end: 26px; }
.po-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* a small gantt with one waiting bar */
.po-hero-vis { display: grid; place-items: center; }
.po-gantt { display: grid; gap: 10px; width: 100%; max-width: 280px; }
.po-g {
  display: block; height: 18px; border-radius: 5px;
  margin-inline-start: var(--s); width: var(--w);
  background: var(--po);
}
.po-g-wait { background: var(--po-w); }

@media (prefers-reduced-motion: no-preference) {
  .po-g { animation: po-slide 5.6s ease-in-out infinite; }
  .po-gantt .po-g:nth-child(2) { animation-delay: .2s }
  .po-gantt .po-g:nth-child(3) { animation-delay: .4s }
  .po-gantt .po-g:nth-child(4) { animation-delay: .6s }
  .po-gantt .po-g:nth-child(5) { animation-delay: .8s }
}
@keyframes po-slide { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(-8px) } }

/* --------------------------------------------------------------- week track -- */
.po-drift { padding: clamp(48px, 7vw, 84px) 0; }
.po-drift h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.po-drift .lede { max-width: 80ch; }

.po-track {
  margin-block-start: 28px;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(16px, 3vw, 26px);
  box-shadow: 0 20px 50px -40px rgba(12, 22, 48, .5);
}
.po-track-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  padding-block-end: 16px; margin-block-end: 16px;
  border-block-end: 1px solid var(--line);
}
.po-wk { margin: 0; color: var(--muted); font-weight: 600; }
.po-wk b { color: var(--po-d); font-size: 1.4rem; margin-inline: 6px; font-variant-numeric: tabular-nums; }
.po-replay {
  font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  color: var(--po-d); background: var(--white);
  border: 1px solid color-mix(in srgb, var(--po) 38%, var(--line));
  border-radius: 9px; padding: 8px 15px;
}
.po-replay:hover { background: var(--po-l); }

.po-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.po-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 9px;
  background: #fafbfc; border: 1px solid var(--line);
  opacity: .35; transition: opacity .35s, background .35s, border-color .35s;
}
.po-row.is-on { opacity: 1; }
.po-row-w {
  font-size: .8rem; font-weight: 800; text-align: center;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.po-row-t { font-size: .94rem; color: var(--ink); }
.po-work.is-on { background: color-mix(in srgb, var(--po) 7%, var(--white)); border-color: color-mix(in srgb, var(--po) 26%, var(--line)); }
.po-work.is-on .po-row-w { color: var(--po-d); }
.po-wait.is-on {
  background: color-mix(in srgb, var(--po-w) 16%, var(--white));
  border-color: color-mix(in srgb, var(--po-w) 50%, var(--line));
}
.po-wait.is-on .po-row-w { color: #8a5c05; }
.po-wait.is-on .po-row-t { color: #6b4a08; font-weight: 600; }

.po-tally {
  margin-block-start: 18px; padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap;
}
.po-t-item { display: flex; align-items: baseline; gap: 8px; }
.po-t-item b { font-size: 2rem; line-height: 1; color: var(--po-d); font-variant-numeric: tabular-nums; }
.po-t-item span { color: var(--muted); font-size: .92rem; }
.po-t-wait b { color: #8a5c05; }
.po-t-msg { margin: 0; color: var(--ink); font-weight: 600; flex: 1 1 260px; }
.po-note { margin-block-start: 18px; color: var(--muted); font-size: .93rem; max-width: 84ch; }

/* ------------------------------------------------------------- profitability -- */
.po-money {
  padding: clamp(48px, 7vw, 84px) 0;
  background: var(--po-l);
  border-block: 1px solid color-mix(in srgb, var(--po) 15%, var(--line));
}
.po-money h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.po-money .lede { max-width: 80ch; }
.po-profit {
  margin-block-start: 26px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; padding: clamp(18px, 3vw, 28px);
}
.po-slider {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  padding-block-end: 20px; margin-block-end: 20px;
  border-block-end: 1px solid var(--line);
}
.po-slider label { font-weight: 700; color: var(--ink); font-size: .95rem; }
.po-slider input[type="range"] { width: 100%; accent-color: var(--po); }
.po-slider output {
  font-weight: 800; font-size: 1.05rem; color: var(--po-d);
  font-variant-numeric: tabular-nums; min-width: 8ch; text-align: end;
}

.po-projs { display: grid; gap: 12px; }
.po-pr {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 180px) minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: 12px;
  background: #fafbfc; border: 1px solid var(--line);
  transition: background .25s, border-color .25s;
}
.po-pr-n { font-weight: 700; color: var(--ink); }
.po-pr-meta { color: var(--muted); font-size: .87rem; }
.po-pr-bar { display: block; height: 12px; border-radius: 6px; background: #eceff3; overflow: hidden; }
.po-pr-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--po); transition: width .25s ease, background .25s; }
.po-pr-v {
  font-weight: 800; font-size: 1.05rem; color: var(--po-d);
  font-variant-numeric: tabular-nums; min-width: 8ch; text-align: end;
  /* A leading minus is reordered by the RTL context: -7,200 renders as 7,200- and reads as
     ambiguous. isolate keeps the number and its sign as one LTR run. */
  direction: ltr; unicode-bidi: isolate;
}
.po-pr.is-loss {
  background: color-mix(in srgb, var(--zoho-red) 5%, var(--white));
  border-color: color-mix(in srgb, var(--zoho-red) 26%, var(--line));
}
.po-pr.is-loss .po-pr-bar i { background: color-mix(in srgb, var(--zoho-red) 62%, var(--white)); }
.po-pr.is-loss .po-pr-v { color: #a5191b; }
.po-profit-say {
  margin: 20px 0 0; padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
  color: var(--ink); font-weight: 600; min-height: 2.6em;
}

/* --------------------------------------------------------------------- hours -- */
.po-hours { padding: clamp(48px, 7vw, 84px) 0; }
.po-hours-in {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(22px, 4vw, 42px); align-items: start;
}
.po-hours h2 { font-size: clamp(1.4rem, 2.9vw, 2.05rem); margin: 0 0 12px; }
.po-hours .lede { max-width: 68ch; }
.po-h-two {
  margin-block-start: 22px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px;
}
.po-h-bad, .po-h-good { border-radius: 14px; padding: 20px; }
.po-h-bad h3, .po-h-good h3 { margin: 0 0 12px; font-size: 1.02rem; }
.po-h-bad ul, .po-h-good ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; }
.po-h-bad li, .po-h-good li { color: var(--muted); font-size: .95rem; }
.po-h-bad {
  background: color-mix(in srgb, var(--zoho-red) 5%, var(--white));
  border: 1px solid color-mix(in srgb, var(--zoho-red) 24%, var(--line));
}
.po-h-bad h3 { color: #a5191b; }
.po-h-good {
  background: color-mix(in srgb, var(--po) 6%, var(--white));
  border: 1px solid color-mix(in srgb, var(--po) 30%, var(--line));
}
.po-h-good h3 { color: var(--po-d); }
.po-hours-side { background: var(--po-ink); border-radius: 16px; padding: 24px; }
.po-side-t { margin: 0 0 8px; color: var(--white); font-weight: 800; }
.po-hours-side p:last-child { margin: 0; color: color-mix(in srgb, var(--white) 78%, transparent); }

/* --------------------------------------------------------------------- stack -- */
.po-stack {
  padding: clamp(48px, 7vw, 84px) 0;
  background: var(--po-l);
  border-block: 1px solid color-mix(in srgb, var(--po) 15%, var(--line));
}
.po-stack h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.po-stack .lede { max-width: 80ch; }
.po-parts {
  margin-block-start: 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.po-part {
  display: grid; gap: 6px; align-content: start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.po-part:hover { border-color: var(--po); transform: translateY(-2px); }
.po-part img { display: block; margin-block-end: 4px; }
.po-p-n { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.po-p-r { color: var(--muted); font-size: .93rem; }
.po-p-go { margin-block-start: 8px; font-size: .84rem; font-weight: 700; color: var(--po-d); }
.po-part-core { border-color: var(--po); box-shadow: 0 0 0 1px color-mix(in srgb, var(--po) 24%, transparent); }

/* ----------------------------------------------------------------------- how -- */
.po-how { padding: clamp(48px, 7vw, 84px) 0; }
.po-how h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 24px; }
.po-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: pos;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 13px;
}
.po-steps li {
  counter-increment: pos;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px; display: grid; gap: 5px;
}
.po-steps b { display: flex; align-items: baseline; gap: 9px; font-size: 1.02rem; color: var(--po-d); }
.po-steps b::before {
  content: counter(pos, decimal-leading-zero);
  font-size: .8rem; font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.po-steps span { color: var(--muted); font-size: .95rem; }
.po-how-cta {
  margin-block-start: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--po-l);
  border: 1px solid color-mix(in srgb, var(--po) 22%, var(--line));
  border-radius: 14px; padding: 20px 22px;
}
.po-how-cta p { margin: 0; color: var(--po-ink); max-width: 66ch; }

/* ------------------------------------------------------------------------ faq -- */
.po-faq { padding: 0 0 clamp(24px, 4vw, 40px); }
.po-faq h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 20px; }

/* ------------------------------------------------------------- nearby solutions -- */
.po-near { padding: 0 0 clamp(40px, 6vw, 64px); }
.po-near h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 16px; }
.po-near-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.po-near-c {
  display: grid; gap: 5px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 17px; text-decoration: none;
  transition: border-color .2s;
}
.po-near-c:hover { border-color: var(--po); }
.po-near-c b { color: var(--po-d); font-size: 1rem; }
.po-near-c span { color: var(--muted); font-size: .93rem; }

/* ---------------------------------------------------------------------- close -- */
.po-close { padding: 0 0 clamp(48px, 7vw, 84px); }
.po-close-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; border-radius: 20px;
  padding: clamp(26px, 4vw, 42px);
  background: linear-gradient(128deg, var(--po-d), #16234a);
}
.po-close-box h2 { color: var(--white); margin: 0 0 8px; font-size: clamp(1.25rem, 2.7vw, 1.85rem); }
.po-close-box .lede { color: color-mix(in srgb, var(--white) 86%, transparent); margin: 0; max-width: 62ch; }

/* --------------------------------------------------------------------- narrow -- */
@media (max-width: 950px) {
  .po-hero-in, .po-hours-in { grid-template-columns: 1fr; }
  .po-pr { grid-template-columns: minmax(0, 1fr) auto; }
  .po-pr-meta { grid-column: 1 / -1; order: 1; }
  .po-pr-bar { grid-column: 1 / -1; order: 2; }
}
@media (max-width: 560px) {
  .po-slider { grid-template-columns: 1fr; gap: 8px; }
  .po-slider output { text-align: start; }
  .po-tally { gap: 16px; }
}