/* ============================================================================
   Page-specific design system: /products/zoho-projects/
   Shares no section structure with p-crm / p-desk / p-one / p-analytics.
   CRM explores a pipeline, Desk a clock, One a portfolio, Analytics a
   definition. Projects is about dependency: its centrepiece is a schedule you
   can push and watch the rest of the plan move.

   Base colour: --product-accent (#3060a8, sampled from the Projects icon).
   Site-wide bans hold: no arrows, no line beside headings, no bar atop cards.
   ============================================================================ */

.pj-page{--c:var(--product-accent,#3060a8)}

/* ---------- 1. hero ---------- */
.pj-hero{
  position:relative;overflow:hidden;padding:56px 0 0;border-top:10px solid var(--c);
  background:
    radial-gradient(880px 320px at 85% 0%, color-mix(in srgb,var(--c) 34%,transparent), transparent 70%),
    linear-gradient(185deg,#16202b,#0d1a17 66%);
}
.pj-hero .wrap{position:relative;z-index:2}
.pj-hero h1{color:#fff;font-size:clamp(28px,4.2vw,46px);max-width:21ch}
.pj-hero .lede{color:rgba(255,255,255,.87);max-width:60ch;margin-top:16px}
.pj-top{display:grid;grid-template-columns:1fr 380px;gap:44px;align-items:center}
@media (max-width:960px){.pj-top{grid-template-columns:1fr;gap:28px}}
.pj-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;padding:7px 13px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:7px}
.pj-tag img{width:22px;height:22px}
.pj-tag span{font-size:12.5px;font-weight:700;color:#fff}
.pj-acts{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 52px}
.pj-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.pj-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
/* mini schedule in the hero, decorative */
.pj-mini{display:grid;gap:8px;max-width:360px;margin-inline:auto}
.pj-mini div{height:22px;border-radius:5px;background:var(--mz);opacity:.9}
.pj-mini div:nth-child(1){width:64%;--mz:var(--zoho-red)}
.pj-mini div:nth-child(2){width:82%;margin-inline-start:12%;--mz:var(--zoho-green)}
.pj-mini div:nth-child(3){width:52%;margin-inline-start:30%;--mz:var(--zoho-blue)}
.pj-mini div:nth-child(4){width:38%;margin-inline-start:52%;--mz:var(--zoho-yellow)}
@media (prefers-reduced-motion:no-preference){
  .pj-mini div{animation:mBar .7s cubic-bezier(.2,.7,.3,1) both;transform-origin:inline-start}
  .pj-mini div:nth-child(2){animation-delay:.1s}
  .pj-mini div:nth-child(3){animation-delay:.2s}
  .pj-mini div:nth-child(4){animation-delay:.3s}
  @keyframes mBar{from{transform:scaleX(0);opacity:0}}
}

/* ---------- 2. THE centrepiece: dependency simulator ---------- */
.pj-dep{padding:82px 0;background:var(--white)}
.gantt{
  margin-top:30px;border:1px solid var(--line);border-radius:calc(var(--radius) * 2);
  background:var(--paper);padding:28px 30px 24px;
}
@media (max-width:600px){.gantt{padding:20px 16px}}
.gt-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:22px}
.gt-ctl{display:flex;gap:8px;flex-wrap:wrap}
.gt-btn{
  font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  color:var(--ink);transition:border-color .16s,background .16s,color .16s;
}
.gt-btn:hover{border-color:var(--c);color:var(--c)}
.gt-btn[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.gt-end{font-size:13.5px;color:var(--muted)}
.gt-end b{color:var(--ink);font-size:15px}
.gt-end b.late{color:var(--zoho-red)}
.gt-rows{display:grid;gap:10px}
.gt-row{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center}
@media (max-width:620px){.gt-row{grid-template-columns:96px 1fr;gap:10px}}
.gt-name{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.gt-track{position:relative;height:26px;background:color-mix(in srgb,var(--line) 60%,#fff);border-radius:6px}
.gt-bar{
  position:absolute;top:0;height:100%;border-radius:6px;background:var(--gz);
  transition:inset-inline-start .5s cubic-bezier(.2,.7,.3,1),width .5s cubic-bezier(.2,.7,.3,1);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;
}
.gt-row:nth-child(4n+1) .gt-bar{--gz:var(--zoho-red)}
.gt-row:nth-child(4n+2) .gt-bar{--gz:var(--zoho-green)}
.gt-row:nth-child(4n+3) .gt-bar{--gz:var(--zoho-blue)}
.gt-row:nth-child(4n+4) .gt-bar{--gz:var(--zoho-yellow)}
.gt-bar.shifted{outline:2px dashed rgba(0,0,0,.28);outline-offset:2px}
.gt-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);line-height:1.65}
.gt-foot strong{color:var(--ink)}
.dep-note{margin-top:22px;font-size:13.5px;color:var(--muted);line-height:1.7;max-width:80ch}

/* ---------- 3. project types ---------- */
.pj-types{padding:78px 0;background:var(--paper)}
.ty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media (max-width:900px){.ty-grid{grid-template-columns:1fr}}
.ty{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.ty h3{font-size:17.5px;margin-bottom:6px}
.ty > p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.ty dl{display:grid;gap:10px;margin:0}
.ty dt{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tz,var(--c))}
.ty dd{margin:2px 0 0;font-size:14px;color:var(--ink);line-height:1.5}
.ty:nth-child(1){--tz:var(--zoho-red)}
.ty:nth-child(2){--tz:var(--zoho-green)}
.ty:nth-child(3){--tz:var(--zoho-blue)}

/* ---------- 4. timesheets: the thing that decides success ---------- */
.pj-time{padding:80px 0;background:var(--dark);color:#fff}
.pj-time h2{color:#fff}
.pj-time .lede{color:#b9c6c1;max-width:64ch}
.ts-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
@media (max-width:800px){.ts-two{grid-template-columns:1fr}}
.ts{border-radius:var(--radius);padding:26px 24px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05)}
.ts h3{color:#fff;font-size:17px;margin-bottom:10px}
.ts ul{list-style:none;display:grid;gap:9px}
.ts li{position:relative;padding-inline-start:22px;font-size:14.5px;color:#e2eae7;line-height:1.55}
.ts-bad li::before{content:"";position:absolute;inset-inline-start:0;top:10px;width:11px;height:2px;
  border-radius:1px;background:var(--zoho-red)}
.ts-good li::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:11px;height:11px;
  border-radius:3px;background:var(--zoho-green)}
.ts-good{border-color:color-mix(in srgb,var(--zoho-green) 45%,transparent)}
.ts-warn{margin-top:22px;font-size:14.5px;color:#c8d2ce;line-height:1.7;max-width:78ch}
.ts-warn strong{color:#fff;display:block;margin-bottom:4px}

/* ---------- 5. handoff from a closed deal ---------- */
.pj-hand{padding:78px 0;background:var(--white)}
.hand{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media (max-width:820px){.hand{grid-template-columns:1fr}}
.hd{padding:26px 24px;border-inline-start:1px solid var(--line)}
.hd:first-child{border-inline-start:none}
@media (max-width:820px){.hd{border-inline-start:none;border-top:1px solid var(--line)}
  .hd:first-child{border-top:none}}
.hd-k{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--hz,var(--c))}
.hd-k img{width:20px;height:20px;border-radius:5px}
.hd:nth-child(1){--hz:var(--zoho-blue)}
.hd:nth-child(2){--hz:var(--zoho-green)}
.hd:nth-child(3){--hz:var(--zoho-yellow)}
.hd h3{font-size:16.5px;margin-bottom:6px}
.hd p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- 6. mid CTA: offset panel ---------- */
.pj-turn{padding:0 0 80px;background:var(--white)}
.pj-turn-in{
  background:color-mix(in srgb,var(--c) 8%,#fff);border-radius:calc(var(--radius) * 2);
  padding:34px 36px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  border-inline-end:6px solid var(--c);
}
@media (max-width:760px){.pj-turn-in{grid-template-columns:1fr;padding:26px 22px}}
.pj-turn-in h3{font-size:20px;margin-bottom:6px}
.pj-turn-in p{font-size:15px;color:var(--muted);line-height:1.65;max-width:62ch}

/* ---------- 7. delivery: milestone strip ---------- */
.pj-deliver{padding:80px 0;background:var(--paper)}
.ms{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:2px solid var(--line)}
@media (max-width:900px){.ms{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ms{grid-template-columns:1fr}}
.ms-i{padding:24px 20px 24px 0;position:relative}
.ms > .ms-i:not(:first-child){padding-inline-start:22px;border-inline-start:1px solid var(--line)}
.ms-i::before{content:"";position:absolute;top:-8px;inset-inline-start:0;width:14px;height:14px;
  border-radius:50%;background:var(--mz,var(--c));border:3px solid var(--paper)}
.ms-i:nth-child(1){--mz:var(--zoho-red)}
.ms-i:nth-child(2){--mz:var(--zoho-green)}
.ms-i:nth-child(3){--mz:var(--zoho-blue)}
.ms-i:nth-child(4){--mz:var(--zoho-yellow)}
.ms-i h3{font-size:16.5px;margin:6px 0 6px}
.ms-i p{font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- 8. FAQ ---------- */
.pj-faq{padding:80px 0;background:var(--white)}
.faq-pj{margin-top:26px;border-top:1px solid var(--line)}
.faq-pj .accordion-item button{padding-inline-end:54px;padding-block:20px;font-size:16.5px}
.faq-pj .accordion-item button::before,
.faq-pj .accordion-item button::after{background:var(--c);border-radius:1px}
.faq-pj .accordion-item button::before{inset-inline-end:16px;width:13px;height:2.5px}
.faq-pj .accordion-item button::after{inset-inline-end:21px;width:2.5px;height:13px}
.faq-pj .accordion-item button:hover,.faq-pj .accordion-item.open button{color:var(--c)}

/* ---------- 9. closing: schedule motif as the card ---------- */
.pj-close{padding:0 0 92px;background:var(--white)}
.pjc{border-radius:calc(var(--radius) * 2);overflow:hidden;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 76%,#0d1a17),#111b1f)}
.pjc-body{padding:46px 44px 30px;max-width:720px}
@media (max-width:600px){.pjc-body{padding:32px 24px 22px}}
.pjc h2{color:#fff;font-size:clamp(23px,3.2vw,32px);margin-bottom:12px;max-width:22ch}
.pjc p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.7;margin-bottom:24px}
.pjc-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pjc-alt{color:#fff;font-size:14.5px;font-weight:700;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45)}
.pjc-alt:hover{text-decoration-color:#fff}
.pjc-bars{display:grid;gap:7px;padding:0 44px 40px}
@media (max-width:600px){.pjc-bars{padding:0 24px 30px}}
.pjc-bars i{display:block;height:10px;border-radius:5px;background:var(--pz);opacity:.85}
.pjc-bars i:nth-child(1){width:70%;--pz:var(--zoho-red)}
.pjc-bars i:nth-child(2){width:86%;margin-inline-start:8%;--pz:var(--zoho-green)}
.pjc-bars i:nth-child(3){width:58%;margin-inline-start:26%;--pz:var(--zoho-blue)}
.pjc-bars i:nth-child(4){width:40%;margin-inline-start:48%;--pz:var(--zoho-yellow)}