/* ============================================================================
   Page-specific design system: /products/zoho-salesiq/
   Shares no section structure with the eleven pages before it. WorkDrive
   simulates a departure across two ownership models; SalesIQ replays a single
   visitor session as it accumulates - page views stacking up in real time until
   a trigger fires.

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

.sq-page{--c:var(--product-accent,#d83030)}

/* ---------- 1. hero ---------- */
.sq-hero{
  position:relative;overflow:hidden;padding:56px 0 0;border-top:10px solid var(--c);
  background:
    radial-gradient(780px 300px at 18% 0%, color-mix(in srgb,var(--c) 26%,transparent), transparent 68%),
    linear-gradient(198deg,#231a1a,#0d1a17 66%);
}
.sq-hero .wrap{position:relative;z-index:2}
.sq-hero h1{color:#fff;font-size:clamp(28px,4.2vw,46px);max-width:21ch}
.sq-hero .lede{color:rgba(255,255,255,.87);max-width:60ch;margin-top:16px}
.sq-top{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center}
@media (max-width:940px){.sq-top{grid-template-columns:1fr;gap:28px}}
.sq-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}
.sq-tag img{width:22px;height:22px}
.sq-tag span{font-size:12.5px;font-weight:700;color:#fff}
.sq-acts{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 52px}
.sq-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.sq-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.sq-bubbles{display:grid;gap:10px;max-width:260px;margin-inline:auto}
.sq-bubbles i{display:block;height:30px;border-radius:14px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16)}
.sq-bubbles i:nth-child(1){width:78%}
.sq-bubbles i:nth-child(2){width:56%;margin-inline-start:auto;
  background:color-mix(in srgb,var(--c) 40%,transparent);border-color:color-mix(in srgb,var(--c) 65%,transparent)}
.sq-bubbles i:nth-child(3){width:66%}
@media (prefers-reduced-motion:no-preference){
  .sq-bubbles i{animation:sqIn .45s ease both}
  .sq-bubbles i:nth-child(2){animation-delay:.14s}
  .sq-bubbles i:nth-child(3){animation-delay:.28s}
  @keyframes sqIn{from{opacity:0;transform:translateY(8px)}}
}

/* ---------- 2. THE animated moment: one session, replayed ---------- */
.sq-session{padding:82px 0;background:var(--white)}
.ss{
  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){.ss{padding:20px 16px}}
.ss-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ss-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}
.ss-play:hover{opacity:.88}
.ss-clock{font-size:13.5px;color:var(--muted)}
.ss-clock b{color:var(--ink);font-family:var(--font-display);font-size:16px}
.ss-two{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
@media (max-width:860px){.ss-two{grid-template-columns:1fr}}
.ss-log{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px;min-height:250px}
.ss-log h3{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.ss-ev{display:grid;gap:8px}
.ss-e{
  display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:baseline;
  border-inline-start:2px solid var(--line);padding:8px 0 8px 0;padding-inline-start:12px;
  opacity:0;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease,border-color .35s ease;
}
.ss-e.on{opacity:1;transform:none;border-inline-start-color:var(--ez,var(--c))}
.ss-e:nth-child(4n+1){--ez:var(--zoho-blue)}
.ss-e:nth-child(4n+2){--ez:var(--zoho-green)}
.ss-e:nth-child(4n+3){--ez:var(--zoho-yellow)}
.ss-e:nth-child(4n+4){--ez:var(--zoho-red)}
.ss-t{font-size:12px;font-weight:800;color:var(--muted);font-family:var(--font-display)}
.ss-x{font-size:14px;color:var(--ink);line-height:1.5}
.ss-e.trigger .ss-x{font-weight:700;color:var(--c)}
.ss-card{background:var(--dark);border-radius:var(--radius);padding:22px 22px;color:#fff;
  display:flex;flex-direction:column;gap:12px}
.ss-card h3{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8fa39c}
.ss-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
  padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.12)}
.ss-row span:first-child{color:#8fa39c}
.ss-row span:last-child{color:#fff;font-weight:700;text-align:end}
.ss-verdict{margin-top:auto;font-size:13.5px;line-height:1.6;color:#e2eae7;
  background:rgba(255,255,255,.06);border-radius:8px;padding:12px 14px;min-height:4.6em}
.ss-verdict.fire{background:color-mix(in srgb,var(--c) 22%,transparent);color:#fff;font-weight:600}
.ss-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);line-height:1.65}
.ss-foot strong{color:var(--ink)}
.ss-note{margin-top:22px;font-size:13.5px;color:var(--muted);line-height:1.7;max-width:80ch}

/* ---------- 3. when to trigger, when to stay quiet ---------- */
.sq-trig{padding:78px 0;background:var(--paper)}
.tg{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
@media (max-width:800px){.tg{grid-template-columns:1fr}}
.tg-c{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.tg-c h3{font-size:17.5px;margin-bottom:6px}
.tg-c > p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.tg-c ul{list-style:none;display:grid;gap:10px}
.tg-c li{position:relative;padding-inline-start:22px;font-size:14.5px;line-height:1.55}
.tg-yes{border-color:color-mix(in srgb,var(--zoho-green) 32%,var(--line))}
.tg-yes li{color:var(--ink)}
.tg-yes li::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:11px;height:11px;
  border-radius:3px;background:var(--zoho-green)}
.tg-no li{color:var(--muted)}
.tg-no li::before{content:"";position:absolute;inset-inline-start:0;top:10px;width:11px;height:2px;
  border-radius:1px;background:var(--zoho-red)}

/* ---------- 4. comparison: which tool answers the visitor ---------- */
.sq-vs{padding:80px 0;background:var(--dark);color:#fff}
.sq-vs h2{color:#fff}
.sq-vs .lede{color:#b9c6c1;max-width:66ch}
.vs-table{margin-top:30px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);overflow:hidden}
.vs-r{display:grid;grid-template-columns:190px 1fr 1fr 1fr;gap:0;border-bottom:1px solid rgba(255,255,255,.12)}
.vs-r:last-child{border-bottom:none}
@media (max-width:880px){
  .vs-r{grid-template-columns:1fr;gap:0}
  .vs-r > *{border-inline-start:0!important;border-top:1px solid rgba(255,255,255,.1)}
  .vs-r > *:first-child{border-top:none}
}
.vs-r > *{padding:15px 16px;font-size:14px;line-height:1.55}
.vs-r > * + *{border-inline-start:1px solid rgba(255,255,255,.12)}
.vs-h{background:rgba(255,255,255,.07);font-weight:800;color:#fff}
.vs-h span{display:block;font-size:11.5px;font-weight:700;color:#8fa39c;margin-top:3px}
.vs-q{color:#8fa39c;font-weight:700}
.vs-c{color:#e2eae7}
.vs-c b{color:#fff}
.vs-note{margin-top:22px;font-size:14px;color:#c8d2ce;line-height:1.7;max-width:78ch}
.vs-note strong{color:#fff}

/* ---------- 5. privacy ---------- */
.sq-priv{padding:78px 0;background:var(--white)}
.pv{border:2px solid color-mix(in srgb,var(--c) 26%,var(--line));border-radius:calc(var(--radius) * 2);
  padding:30px 32px;margin-top:26px}
@media (max-width:600px){.pv{padding:22px 20px}}
.pv-k{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c);margin-bottom:10px}
.pv h3{font-size:20px;margin-bottom:10px}
.pv > p{font-size:15px;color:var(--muted);line-height:1.75;max-width:74ch;margin-bottom:18px}
.pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.pv-grid{grid-template-columns:1fr}}
.pv-grid div{background:var(--paper);border-radius:var(--radius);padding:15px 17px}
.pv-grid b{display:block;font-size:14px;margin-bottom:4px;color:var(--ink)}
.pv-grid span{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---------- 6. mid CTA ---------- */
.sq-turn{padding:0 0 78px;background:var(--white)}
.sq-turn-in{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  background:color-mix(in srgb,var(--c) 7%,#fff);
  border:1px solid color-mix(in srgb,var(--c) 24%,var(--line));
  border-radius:calc(var(--radius) * 2);padding:30px 32px}
@media (max-width:760px){.sq-turn-in{grid-template-columns:1fr;padding:24px 20px}}
.sq-turn-in h3{font-size:20px;margin-bottom:6px}
.sq-turn-in p{font-size:15px;color:var(--muted);line-height:1.65;max-width:62ch}

/* ---------- 7. delivery ---------- */
.sq-deliver{padding:80px 0;background:var(--paper)}
.sd{margin-top:30px;display:grid;gap:12px}
.sd-i{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:baseline}
@media (max-width:800px){.sd-i{grid-template-columns:1fr;gap:6px}}
.sd-h{font-size:16px;font-weight:800;color:var(--ink)}
.sd-h em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sz,var(--c));margin-bottom:4px}
.sd-i:nth-child(4n+1){--sz:var(--zoho-red)}
.sd-i:nth-child(4n+2){--sz:var(--zoho-green)}
.sd-i:nth-child(4n+3){--sz:var(--zoho-blue)}
.sd-i:nth-child(4n+4){--sz:var(--zoho-yellow)}
.sd-i p{font-size:14.5px;color:var(--muted);line-height:1.65}

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

/* ---------- 9. closing ---------- */
.sq-close{padding:0 0 92px;background:var(--white)}
.sqc{display:grid;grid-template-columns:1fr 220px;border-radius:calc(var(--radius) * 2);overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 74%,#231a1a),#171f1e)}
@media (max-width:820px){.sqc{grid-template-columns:1fr}}
.sqc-body{padding:46px 44px 42px}
@media (max-width:600px){.sqc-body{padding:32px 24px}}
.sqc h2{color:#fff;font-size:clamp(23px,3.2vw,32px);margin-bottom:12px;max-width:21ch}
.sqc p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.7;max-width:56ch;margin-bottom:24px}
.sqc-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sqc-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)}
.sqc-alt:hover{text-decoration-color:#fff}
.sqc-side{background:rgba(255,255,255,.06);border-inline-start:1px solid rgba(255,255,255,.14);
  display:grid;gap:9px;align-content:center;padding:34px 24px}
@media (max-width:820px){.sqc-side{display:none}}
.sqc-side i{display:block;height:26px;border-radius: var(--radius-lg);background:rgba(255,255,255,.14)}
.sqc-side i:nth-child(1){width:82%}
.sqc-side i:nth-child(2){width:60%;margin-inline-start:auto;background:color-mix(in srgb,var(--zoho-green) 55%,transparent)}
.sqc-side i:nth-child(3){width:70%}