/* ============================================================================
   Page-specific design system: /products/zoho-workdrive/
   Shares no section structure with the ten pages before it. Creator morphs a
   sheet into an app; WorkDrive simulates a single event - an employee leaving -
   and shows the same files behaving differently on each side.

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

.wd-page{--c:var(--product-accent,#1878c0)}

/* ---------- 1. hero ---------- */
.wd-hero{
  position:relative;overflow:hidden;padding:56px 0 0;border-top:10px solid var(--c);
  background:
    radial-gradient(800px 300px at 80% 0%, color-mix(in srgb,var(--c) 28%,transparent), transparent 70%),
    linear-gradient(185deg,#141f27,#0d1a17 66%);
}
.wd-hero .wrap{position:relative;z-index:2}
.wd-hero h1{color:#fff;font-size:clamp(28px,4.2vw,46px);max-width:21ch}
.wd-hero .lede{color:rgba(255,255,255,.87);max-width:60ch;margin-top:16px}
.wd-top{display:grid;grid-template-columns:1fr 290px;gap:44px;align-items:center}
@media (max-width:940px){.wd-top{grid-template-columns:1fr;gap:28px}}
.wd-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}
.wd-tag img{width:22px;height:22px}
.wd-tag span{font-size:12.5px;font-weight:700;color:#fff}
.wd-acts{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 52px}
.wd-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.wd-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.wd-fold{display:grid;gap:9px;max-width:250px;margin-inline:auto}
.wd-fold i{display:block;height:26px;border-radius:6px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15)}
.wd-fold i:nth-child(2){background:color-mix(in srgb,var(--c) 30%,transparent)}
.wd-fold i:nth-child(3){width:86%}
.wd-fold i:nth-child(4){width:72%}
@media (prefers-reduced-motion:no-preference){
  .wd-fold i{animation:wdIn .45s ease both;transform-origin:inline-start}
  .wd-fold i:nth-child(2){animation-delay:.08s}
  .wd-fold i:nth-child(3){animation-delay:.16s}
  .wd-fold i:nth-child(4){animation-delay:.24s}
  @keyframes wdIn{from{opacity:0;transform:translateY(-6px)}}
}

/* ---------- 2. THE animated moment: the day someone leaves ---------- */
.wd-leave{padding:82px 0;background:var(--white)}
.lv{
  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){.lv{padding:20px 16px}}
.lv-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.lv-play{font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;color:#fff;
  background:var(--c);border:1px solid var(--c);border-radius:999px;padding:9px 20px;transition:opacity .16s}
.lv-play:hover{opacity:.88}
.lv-day{font-size:13.5px;font-weight:700;color:var(--muted)}
.lv-day b{color:var(--ink)}
.lv-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:800px){.lv-two{grid-template-columns:1fr}}
.lv-side{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px}
.lv-side h3{font-size:16px;margin-bottom:4px}
.lv-side > p{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.lv-files{display:grid;gap:8px}
.lv-f{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:7px;padding:10px 12px;background:var(--white);
  font-size:13px;color:var(--ink);
  transition:opacity .45s ease,background .45s ease,border-color .45s ease,color .45s ease;
}
.lv-f span{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;
  background:var(--line);color:var(--muted);transition:background .45s,color .45s}
.lv-personal .lv-f.gone{opacity:.4;background:color-mix(in srgb,var(--zoho-red) 7%,#fff);
  border-color:color-mix(in srgb,var(--zoho-red) 32%,transparent);color:var(--muted);text-decoration:line-through}
.lv-personal .lv-f.gone span{background:color-mix(in srgb,var(--zoho-red) 16%,#fff);color:var(--zoho-red)}
.lv-team .lv-f.moved{background:color-mix(in srgb,var(--zoho-green) 7%,#fff);
  border-color:color-mix(in srgb,var(--zoho-green) 34%,transparent)}
.lv-team .lv-f.moved span{background:color-mix(in srgb,var(--zoho-green) 16%,#fff);color:#0b6b3a}
.lv-personal{border-color:color-mix(in srgb,var(--zoho-red) 26%,var(--line))}
.lv-team{border-color:color-mix(in srgb,var(--zoho-green) 30%,var(--line))}
.lv-verdict{margin-top:14px;font-size:13.5px;font-weight:700;line-height:1.5;min-height:2.6em}
.lv-personal .lv-verdict{color:var(--zoho-red)}
.lv-team .lv-verdict{color:#0b6b3a}
.lv-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);line-height:1.65}
.lv-foot strong{color:var(--ink)}
.lv-note{margin-top:22px;font-size:13.5px;color:var(--muted);line-height:1.7;max-width:80ch}

/* ---------- 3. sharing scope ---------- */
.wd-share{padding:80px 0;background:var(--dark);color:#fff}
.wd-share h2{color:#fff}
.wd-share .lede{color:#b9c6c1;max-width:64ch}
.sc-row{display:flex;gap:9px;flex-wrap:wrap;margin:28px 0 24px}
.sc{font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;color:#c8d2ce;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:9px 18px;transition:background .16s,color .16s,border-color .16s}
.sc:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.sc[aria-selected="true"]{background:var(--scz);border-color:var(--scz);color:#fff}
.sc:nth-child(1){--scz:var(--zoho-green)}
.sc:nth-child(2){--scz:var(--zoho-blue)}
.sc:nth-child(3){--scz:var(--zoho-yellow)}
.sc:nth-child(4){--scz:var(--zoho-red)}
.sc-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:26px 26px}
.sc-panel h3{color:#fff;font-size:19px;margin-bottom:8px}
.sc-panel > p{font-size:15px;color:#e2eae7;line-height:1.7;max-width:70ch;margin-bottom:18px}
.sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.sc-grid{grid-template-columns:1fr}}
.sc-i{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:14px 15px}
.sc-i b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#8fa39c;margin-bottom:5px}
.sc-i span{font-size:14px;color:#fff;line-height:1.5}
.sc-risk{margin-top:20px;font-size:14px;color:#c8d2ce;line-height:1.7;max-width:76ch}
.sc-risk strong{color:#fff}

/* ---------- 4. folder structure ---------- */
.wd-struct{padding:78px 0;background:var(--white)}
.st-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
@media (max-width:800px){.st-two{grid-template-columns:1fr}}
.st-c{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.st-c h3{font-size:17.5px;margin-bottom:6px}
.st-c > p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.st-c ul{list-style:none;display:grid;gap:9px}
.st-c li{position:relative;padding-inline-start:22px;font-size:14.5px;line-height:1.55}
.st-bad li{color:var(--muted)}
.st-bad li::before{content:"";position:absolute;inset-inline-start:0;top:10px;width:11px;height:2px;
  border-radius:1px;background:var(--zoho-red)}
.st-good{border-color:color-mix(in srgb,var(--c) 28%,var(--line));background:color-mix(in srgb,var(--c) 4%,#fff)}
.st-good li{color:var(--ink)}
.st-good li::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:11px;height:11px;
  border-radius:3px;background:var(--c)}

/* ---------- 5. migration honesty ---------- */
.wd-mig{padding:78px 0;background:var(--paper)}
.mg{margin-top:28px;border-top:1px solid var(--line)}
.mg-r{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:22px 0;
  border-bottom:1px solid var(--line);align-items:start}
.mg-n{font-family:var(--font-display);font-size:12px;font-weight:800;color:#fff;
  background:var(--mz,var(--c));border-radius:8px;padding:7px 0;text-align:center}
.mg-r:nth-child(4n+1){--mz:var(--zoho-red)}
.mg-r:nth-child(4n+2){--mz:var(--zoho-green)}
.mg-r:nth-child(4n+3){--mz:var(--zoho-blue)}
.mg-r:nth-child(4n+4){--mz:var(--zoho-yellow)}
.mg-t{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:4px}
.mg-d{font-size:14.5px;color:var(--muted);line-height:1.65}
.mg-warn{margin-top:24px;background:#fff7ea;border:1px solid #f0ddb0;border-radius:var(--radius);
  padding:20px 22px;font-size:14.5px;color:#6b4e12;line-height:1.7;max-width:80ch}
.mg-warn strong{display:block;margin-bottom:5px}

/* ---------- 6. mid CTA ---------- */
.wd-turn{padding:0 0 78px;background:var(--paper)}
.wd-turn-in{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:calc(var(--radius) * 2);
  padding:28px 30px}
@media (max-width:760px){.wd-turn-in{grid-template-columns:1fr}}
.wd-turn-in .btn{order:2}
.wd-turn-in div{order:1}
.wd-turn-in h3{font-size:20px;margin-bottom:6px}
.wd-turn-in p{font-size:15px;color:var(--muted);line-height:1.65;max-width:62ch}

/* ---------- 7. delivery ---------- */
.wd-deliver{padding:80px 0;background:var(--white)}
.wdd{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
@media (max-width:960px){.wdd{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.wdd{grid-template-columns:1fr}}
.wdd-i{padding:26px 0;border-bottom:1px solid var(--line)}
.wdd > .wdd-i:not(:nth-child(4n+1)){border-inline-start:1px solid var(--line);padding-inline-start:22px}
.wdd > .wdd-i:not(:nth-child(4n)){padding-inline-end:22px}
@media (max-width:960px){.wdd > .wdd-i{padding-inline:0!important;border-inline-start:0!important}}
.wdd-i em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--wz,var(--c));margin-bottom:8px}
.wdd-i:nth-child(1){--wz:var(--zoho-red)}
.wdd-i:nth-child(2){--wz:var(--zoho-green)}
.wdd-i:nth-child(3){--wz:var(--zoho-blue)}
.wdd-i:nth-child(4){--wz:var(--zoho-yellow)}
.wdd-i h3{font-size:16px;margin-bottom:6px}
.wdd-i p{font-size:14px;color:var(--muted);line-height:1.6}

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

/* ---------- 9. closing ---------- */
.wd-close{padding:0 0 92px;background:var(--paper)}
.wdc{border-radius:calc(var(--radius) * 2);overflow:hidden;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 78%,#0d1a17),#111b21)}
.wdc-body{padding:46px 44px 38px;max-width:730px}
@media (max-width:600px){.wdc-body{padding:32px 24px}}
.wdc h2{color:#fff;font-size:clamp(23px,3.2vw,32px);margin-bottom:12px;max-width:22ch}
.wdc p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.7;margin-bottom:24px}
.wdc-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wdc-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)}
.wdc-alt:hover{text-decoration-color:#fff}
.wdc-rows{display:grid;gap:6px;padding:0 44px 40px}
@media (max-width:600px){.wdc-rows{padding:0 24px 30px}}
.wdc-rows i{display:block;height:9px;border-radius:5px;background:var(--wz)}
.wdc-rows i:nth-child(1){width:100%;--wz:color-mix(in srgb,var(--zoho-red) 55%,transparent)}
.wdc-rows i:nth-child(2){width:84%;--wz:color-mix(in srgb,var(--zoho-green) 60%,transparent)}
.wdc-rows i:nth-child(3){width:66%;--wz:color-mix(in srgb,var(--zoho-blue) 60%,transparent)}
.wdc-rows i:nth-child(4){width:48%;--wz:color-mix(in srgb,var(--zoho-yellow) 60%,transparent)}