/* ============================================================================
   Page-specific design system: /products/zoho-desk/
   Nothing here may be reused on another product page. Deliberately shares NO
   section structure with p-crm.css: CRM explores a linear pipeline, Desk is
   about many channels converging and then a clock running against them.

   Base colour: --product-accent (#089949, Zoho Desk green).
   Zoho's four brand colours mark the parts that ARE Zoho (channels, portfolio).
   Site-wide bans still hold: no arrows, no vertical line beside headings, no
   coloured bar on top of cards.
   ============================================================================ */

.desk-page{--c:var(--product-accent,#089949)}

/* ---------- 1. hero: channels converging into one ticket ---------- */
.dk-hero{
  position:relative;overflow:hidden;padding:54px 0 0;
  border-top:10px solid var(--c);
  background:
    radial-gradient(900px 320px at 12% 0%, color-mix(in srgb,var(--c) 32%,transparent), transparent 68%),
    linear-gradient(200deg, color-mix(in srgb,var(--c) 26%,#0d1a17), #0d1a17 62%);
}
.dk-hero .wrap{position:relative;z-index:2}
.dk-hero h1{color:#fff;font-size:clamp(28px,4.2vw,46px);max-width:22ch}
.dk-hero .lede{color:rgba(255,255,255,.87);max-width:58ch;margin-top:16px}
.dk-top{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:center}
@media (max-width:940px){.dk-top{grid-template-columns:1fr;gap:26px}}
.dk-chip{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  border-radius:8px;padding:7px 13px;
}
.dk-chip img{width:21px;height:21px}
.dk-chip span{font-size:12.5px;font-weight:700;color:#fff}
.dk-acts{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 50px}
.dk-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.dk-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

.dk-converge{width:100%;height:auto;max-width:400px;display:block;margin-inline:auto}
.dk-converge .cline{stroke-width:1.6;fill:none;opacity:.5;stroke-dasharray:120;stroke-dashoffset:120}
.dk-converge .cdot{r:3.4}
.dk-converge .cticket{fill:rgba(255,255,255,.08);stroke:#fff;stroke-width:1.6;rx:8}
.dk-converge text{fill:rgba(255,255,255,.82);font-size:10.5px;font-weight:700}
.dk-converge .ctlabel{fill:#fff;font-size:12px;font-weight:800}
@media (prefers-reduced-motion:no-preference){
  .dk-converge .cline{animation:cdraw 2.6s ease forwards}
  .dk-converge .cline:nth-of-type(2){animation-delay:.18s}
  .dk-converge .cline:nth-of-type(3){animation-delay:.36s}
  .dk-converge .cline:nth-of-type(4){animation-delay:.54s}
  @keyframes cdraw{to{stroke-dashoffset:0}}
}

/* ---------- 2. channels: where tickets come from ---------- */
.dk-channels{padding:76px 0;background:var(--white)}
.ch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:30px}
@media (max-width:940px){.ch-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.ch-grid{grid-template-columns:1fr 1fr}}
.ch{
  border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px;background:var(--white);
  transition:border-color .18s ease,transform .18s ease;
}
/* Not a link or button - no :hover lift on purpose, see site rule "nothing may look
   clickable unless it is." */
.ch:nth-child(4n+1){--z:var(--zoho-red)}
.ch:nth-child(4n+2){--z:var(--zoho-green)}
.ch:nth-child(4n+3){--z:var(--zoho-blue)}
.ch:nth-child(4n+4){--z:var(--zoho-yellow)}
.ch-dot{display:block;width:9px;height:9px;border-radius:50%;background:var(--z);margin-bottom:12px}
.ch h3{font-size:15.5px;margin-bottom:5px}
.ch p{font-size:13.5px;color:var(--muted);line-height:1.55}
.ch-note{
  margin-top:24px;padding:18px 20px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--c) 7%,#fff);
  border:1px solid color-mix(in srgb,var(--c) 22%,var(--line));
  font-size:14.5px;color:var(--ink);line-height:1.65;max-width:78ch;
}

/* ---------- 3. SLA explorer: severity selector + running clock ---------- */
.dk-sla{padding:80px 0;background:var(--dark);color:#fff}
.dk-sla h2{color:#fff}
.dk-sla .lede{color:#b9c6c1;max-width:64ch}
.sev-row{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 26px}
.sev{
  font-family:var(--font);cursor:pointer;border-radius:var(--radius);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  padding:13px 20px;text-align:start;transition:background .18s,border-color .18s;
}
.sev:hover{border-color:rgba(255,255,255,.42)}
.sev[aria-selected="true"]{background:var(--sv);border-color:var(--sv)}
.sev-name{display:block;font-size:15px;font-weight:800;color:#fff}
.sev-sub{display:block;font-size:12.5px;color:rgba(255,255,255,.66);margin-top:3px}
.sev[aria-selected="true"] .sev-sub{color:rgba(255,255,255,.85)}
.sev:nth-child(1){--sv:var(--zoho-red)}
.sev:nth-child(2){--sv:var(--zoho-yellow)}
.sev:nth-child(3){--sv:var(--zoho-blue)}

.sla-panel{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start}
@media (max-width:860px){.sla-panel{grid-template-columns:1fr;gap:24px}}
.sla-clock{position:relative;display:flex;align-items:center;justify-content:center;padding:8px 0}
.sla-clock svg{width:100%;max-width:230px;height:auto}
.sla-clock .track{fill:none;stroke:rgba(255,255,255,.13);stroke-width:11}
/* stroke is deliberately NOT transitioned: with a transition on it the element reported the
   previous colour from getComputedStyle long after the inline stroke had been set to the new
   one, so the ring stayed on the first severity colour. Only the arc length animates. */
.sla-clock .prog{fill:none;stroke:var(--sv,#fff);stroke-width:11;stroke-linecap:round;
  transition:stroke-dashoffset .7s ease}
.sla-mid{position:absolute;text-align:center}
.sla-t{display:block;font-family:var(--font-display);font-size:30px;font-weight:800;color:#fff;line-height:1}
.sla-l{display:block;font-size:12px;color:rgba(255,255,255,.68);margin-top:6px}
.sla-facts{display:grid;gap:12px}
.sla-fact{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:16px 18px;
}
.sla-fact strong{display:block;font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sv,#fff);margin-bottom:5px}
.sla-fact span{font-size:14.5px;color:#e2eae7;line-height:1.6}
.sla-caption{margin-top:20px;font-size:12.5px;color:#8b9a94;line-height:1.6;max-width:74ch}

/* ---------- 4. ticket lifecycle: horizontal states ---------- */
.dk-life{padding:78px 0;background:var(--paper)}
.life-rail{display:flex;margin-top:32px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--white)}
@media (max-width:900px){.life-rail{flex-direction:column}}
.life{flex:1;padding:22px 20px;border-inline-start:1px solid var(--line);position:relative}
.life:first-child{border-inline-start:none}
@media (max-width:900px){
  .life{border-inline-start:none;border-top:1px solid var(--line)}
  .life:first-child{border-top:none}
}
.life-k{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c);margin-bottom:8px;display:block}
.life h3{font-size:16px;margin-bottom:6px}
.life p{font-size:13.5px;color:var(--muted);line-height:1.55}
.life::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--c);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .5s ease}
.life-rail.seen .life::after{transform:scaleX(1)}
.life-rail.seen .life:nth-child(2)::after{transition-delay:.12s}
.life-rail.seen .life:nth-child(3)::after{transition-delay:.24s}
.life-rail.seen .life:nth-child(4)::after{transition-delay:.36s}
.life-rail.seen .life:nth-child(5)::after{transition-delay:.48s}

/* ---------- 5. knowledge base: what belongs in it ---------- */
.dk-kb{padding:78px 0;background:var(--white)}
.kb-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
@media (max-width:800px){.kb-split{grid-template-columns:1fr}}
.kb-col{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.kb-col h3{font-size:17.5px;margin-bottom:6px}
.kb-col > p{font-size:14px;color:var(--muted);margin-bottom:16px;line-height:1.6}
.kb-col ul{list-style:none;display:grid;gap:10px}
.kb-col li{position:relative;padding-inline-start:24px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.kb-yes{background:color-mix(in srgb,var(--c) 5%,#fff);border-color:color-mix(in srgb,var(--c) 26%,var(--line))}
.kb-yes li::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:11px;height:11px;
  border-radius:3px;background:var(--c)}
.kb-no li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:11px;height:2px;
  border-radius:1px;background:var(--muted)}
.kb-no li{color:var(--muted)}

/* ---------- 6. mid-page CTA: quiet inline bar (not CRM's rule band) ---------- */
.dk-turn{padding:0 0 78px;background:var(--white)}
.dk-turn-in{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:color-mix(in srgb,var(--c) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--c) 26%,var(--line));
  border-radius:var(--radius);padding:26px 30px;
}
.dk-turn-in h3{font-size:19px;margin-bottom:5px}
.dk-turn-in p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:60ch}

/* ---------- 7. delivery: stacked rows, not CRM's four cards ---------- */
.dk-deliver{padding:80px 0;background:var(--paper)}
.dl-rows{margin-top:30px;border-top:1px solid var(--line)}
.dl-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:26px;padding:24px 0;
  border-bottom:1px solid var(--line);align-items:start}
@media (max-width:860px){.dl-row{grid-template-columns:1fr;gap:10px}}
.dl-stage{font-size:15.5px;font-weight:800;color:var(--ink)}
.dl-stage em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--z,var(--c));margin-bottom:5px}
.dl-row:nth-child(4n+1){--z:var(--zoho-red)}
.dl-row:nth-child(4n+2){--z:var(--zoho-green)}
.dl-row:nth-child(4n+3){--z:var(--zoho-blue)}
.dl-row:nth-child(4n+4){--z:var(--zoho-yellow)}
.dl-what{font-size:14.5px;color:var(--muted);line-height:1.65}
.dl-out{font-size:14px;color:var(--ink);line-height:1.6}
.dl-out b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}

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

/* ---------- 9. closing: split panel, deliberately not CRM's ring card ---------- */
.dk-close{padding:0 0 92px;background:var(--white)}
.dkc{
  display:grid;grid-template-columns:1.15fr .85fr;border-radius:calc(var(--radius) * 2);overflow:hidden;
  border:1px solid var(--line);
}
@media (max-width:820px){.dkc{grid-template-columns:1fr}}
.dkc-main{
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--c) 80%,#0d1a17), color-mix(in srgb,var(--c) 30%,#0d1a17));
  padding:46px 44px;
}
@media (max-width:600px){.dkc-main{padding:32px 24px}}
.dkc-main h2{color:#fff;font-size:clamp(23px,3.2vw,31px);margin-bottom:11px;max-width:20ch}
.dkc-main p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.7;max-width:54ch;margin-bottom:24px}
.dkc-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dkc-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)}
.dkc-alt:hover{text-decoration-color:#fff}
.dkc-side{background:var(--paper);padding:40px 34px;display:grid;gap:16px;align-content:center}
.dkc-q{display:flex;gap:12px;align-items:flex-start}
.dkc-q span{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--zq);
  color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.dkc-q:nth-child(1){--zq:var(--zoho-red)}
.dkc-q:nth-child(2){--zq:var(--zoho-green)}
.dkc-q:nth-child(3){--zq:var(--zoho-blue)}
.dkc-q p{font-size:14px;color:var(--ink);line-height:1.55}