/* ============================================================================
   Page-specific design system: /products/zoho-crm/
   Every section here is unique to this page and must not be reused on another
   product page - that is the point. Shared components (hub.css) still provide
   the header, footer, breadcrumbs and CTA strip.

   Colour rule: --product-accent (#226DB4, Zoho CRM blue) is the base of the page.
   Zoho's four brand colours appear as a real mark, never as decoration for its
   own sake. No arrows, no vertical accent lines beside headings, no coloured
   bars on top of cards - the site-wide bans hold here too.
   ============================================================================ */

.crm-page{--c:var(--product-accent,#226DB4)}

/* ---------- 1. hero: animated lead-to-customer path ---------- */
.crm-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 380px at 85% -10%, color-mix(in srgb,var(--c) 38%,transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb,var(--c) 34%,#0d1a17), #0d1a17);
  border-top:10px solid var(--c);
  padding:56px 0 0;
}
.crm-hero .wrap{position:relative;z-index:2}
.crm-hero h1{color:#fff;max-width:26ch}
.crm-hero .lede{color:rgba(255,255,255,.87);max-width:60ch;margin-top:16px}
.crm-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
@media (max-width:900px){.crm-hero-grid{grid-template-columns:1fr;gap:28px}}
.crm-badge{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 14px;margin-bottom:18px;
}
.crm-badge img{width:22px;height:22px}
.crm-badge span{font-size:12.5px;font-weight:700;color:#fff;letter-spacing:.01em}
.crm-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 52px}
.crm-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.crm-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* the SVG journey sits inside the hero on the inline-start side */
.crm-journey{width:100%;height:auto;max-width:460px;margin-inline:auto;display:block}
.crm-journey .jpath{stroke:rgba(255,255,255,.22);stroke-width:2;fill:none;stroke-dasharray:5 6}
.crm-journey .jnode circle{fill:#0d1a17;stroke:rgba(255,255,255,.3);stroke-width:2}
.crm-journey .jnode text{fill:#fff;font-size:12px;font-weight:700}
.crm-journey .jnode circle{r:15}
.crm-journey .jnode.on circle{stroke:#fff;fill:var(--c)}
.crm-journey .jspark{fill:#F9B21D}
@media (prefers-reduced-motion:no-preference){
  .crm-journey .jspark{animation:jrun 6s linear infinite}
  @keyframes jrun{from{offset-distance:0%}to{offset-distance:100%}}
}

/* ---------- 2. reality switch: with / without a CRM ---------- */
.crm-reality{background:var(--darker);color:#fff;padding:72px 0}
.crm-reality h2{color:#fff}
.crm-reality .lede{color:#a9b6b0;max-width:62ch}
.rsw{display:inline-flex;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:4px;margin:26px 0 30px;gap:4px}
.rsw button{
  font-family:var(--font);font-size:14px;font-weight:700;color:#c8d2ce;cursor:pointer;
  background:none;border:none;border-radius:999px;padding:9px 20px;transition:background .18s,color .18s;
}
.rsw button[aria-selected="true"]{background:var(--c);color:#fff}
.rsw button:hover{color:#fff}
.rpanel[hidden]{display:none}
.rboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:820px){.rboard{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.rboard{grid-template-columns:1fr}}
.rcell{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:18px 16px;min-height:118px;
}
.rcell h3{font-size:14px;color:#fff;margin-bottom:7px}
.rcell p{font-size:13.5px;color:#a9b6b0;line-height:1.55}
.rcell.bad{border-color:rgba(228,37,39,.45);background:rgba(228,37,39,.09)}
.rcell.good{border-color:color-mix(in srgb,var(--c) 60%,transparent);background:color-mix(in srgb,var(--c) 14%,transparent)}
.rnote{margin-top:18px;font-size:13.5px;color:#8b9a94;max-width:70ch;line-height:1.6}
@media (prefers-reduced-motion:no-preference){
  .rpanel:not([hidden]) .rcell{animation:rin .38s ease both}
  .rpanel .rcell:nth-child(2){animation-delay:.05s}
  .rpanel .rcell:nth-child(3){animation-delay:.1s}
  .rpanel .rcell:nth-child(4){animation-delay:.15s}
  @keyframes rin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ---------- 3. interactive pipeline explorer ---------- */
.crm-pipe{padding:78px 0;background:var(--white)}
.pipe-rail{display:flex;gap:6px;margin:30px 0 0;flex-wrap:wrap}
.pipe-step{
  flex:1 1 130px;min-width:120px;text-align:start;cursor:pointer;font-family:var(--font);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 14px 16px;transition:border-color .18s,background .18s,transform .18s;
}
.pipe-step:hover{border-color:var(--c)}
.pipe-step[aria-selected="true"]{background:var(--c);border-color:var(--c);transform:translateY(-2px)}
.pipe-step[aria-selected="true"] .pipe-n,
.pipe-step[aria-selected="true"] .pipe-t{color:#fff}
.pipe-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;margin-bottom:9px;
  font-family:var(--font-display);font-size:11.5px;font-weight:800;
  color:#fff;background:var(--z);
}
.pipe-t{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
/* The illustrative width bar was removed: it looked like a conversion chart while carrying no
   data, which is both unclear and dishonest. Stage identity is carried by Zoho brand colour
   instead - the four official colours cycle across the six stages, so the rail reads as Zoho
   without inventing numbers. */
.pipe-step:nth-child(4n+1){--z:var(--zoho-red)}
.pipe-step:nth-child(4n+2){--z:var(--zoho-green)}
.pipe-step:nth-child(4n+3){--z:var(--zoho-blue)}
.pipe-step:nth-child(4n+4){--z:var(--zoho-yellow)}
.pipe-step[aria-selected="true"]{background:var(--z);border-color:var(--z);transform:translateY(-2px)}
.pipe-step[aria-selected="true"] .pipe-n{background:rgba(255,255,255,.22);color:#fff}
.pipe-step[aria-selected="true"] .pipe-t{color:#fff}
.pipe-step[aria-selected="true"] .pipe-hint{color:rgba(255,255,255,.8)}
.pipe-hint{display:block;margin-top:6px;font-size:12px;color:var(--muted);line-height:1.35}
.pipe-step:hover{border-color:var(--z)}

.pipe-detail{
  margin-top:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 30px;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;
}
@media (max-width:820px){.pipe-detail{grid-template-columns:1fr;gap:20px;padding:22px}}
.pipe-detail h3{font-size:20px;margin-bottom:10px}
.pipe-detail p{font-size:15px;color:var(--muted);line-height:1.7}
.pipe-does{list-style:none;margin-top:4px}
.pipe-does li{position:relative;padding-inline-start:26px;margin-bottom:11px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.pipe-does li::before{
  content:"";position:absolute;inset-inline-start:0;top:7px;width:11px;height:11px;
  border-radius:3px;background:color-mix(in srgb,var(--c) 20%,#fff);border:1.5px solid var(--c);
}
.pipe-risk{background:#fff7ea;border:1px solid #f0ddb0;border-radius:var(--radius);padding:16px 18px}
.pipe-risk strong{display:block;font-size:13.5px;color:#6b4e12;margin-bottom:5px}
.pipe-risk span{font-size:13.5px;color:#6b4e12;line-height:1.6}
.pipe-caption{margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.6}

/* ---------- 4. capability split ---------- */
.crm-caps{padding:78px 0;background:var(--paper)}
.cap-split{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;border-top:1px solid var(--line)}
@media (max-width:900px){.cap-split{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cap-split{grid-template-columns:1fr}}
.cap{padding:26px 22px 26px 0;border-bottom:1px solid var(--line);position:relative}
.cap-split > .cap:not(:nth-child(3n+1)){border-inline-start:1px solid var(--line);padding-inline-start:24px}
@media (max-width:900px){
  .cap-split > .cap{padding-inline-start:0!important;border-inline-start:0!important}
  .cap-split > .cap:nth-child(even){padding-inline-start:22px!important;border-inline-start:1px solid var(--line)!important}
}
.cap-i{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--c) 13%,#fff);margin-bottom:13px;
}
.cap-i svg{width:20px;height:20px;stroke:var(--c);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cap h3{font-size:16.5px;margin-bottom:6px}
.cap p{font-size:14.5px;color:var(--muted);line-height:1.6}
.cap::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;width:0;height:2px;background:var(--c);transition:width .35s ease}
.cap:hover::after{width:100%}

/* ---------- 5. what happens when a lead arrives (drawn track) ---------- */
.crm-track{padding:78px 0;background:var(--white);overflow:hidden}
.track-wrap{position:relative;margin-top:34px}
.track-line{position:absolute;inset-inline-start:19px;top:6px;bottom:6px;width:2px;background:var(--line)}
.track-line i{display:block;width:100%;height:0;background:var(--c);transition:height 1.2s ease}
.track-wrap.seen .track-line i{height:100%}
.tstep{position:relative;padding-inline-start:58px;padding-bottom:30px}
.tstep:last-child{padding-bottom:0}
.tdot{
  position:absolute;inset-inline-start:8px;top:2px;width:24px;height:24px;border-radius:50%;
  background:var(--white);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--muted);transition:border-color .3s,color .3s,background .3s;
}
.track-wrap.seen .tstep:nth-child(1) .tdot{transition-delay:.15s}
.track-wrap.seen .tstep:nth-child(2) .tdot{transition-delay:.35s}
.track-wrap.seen .tstep:nth-child(3) .tdot{transition-delay:.55s}
.track-wrap.seen .tstep:nth-child(4) .tdot{transition-delay:.75s}
.track-wrap.seen .tstep:nth-child(5) .tdot{transition-delay:.95s}
.track-wrap.seen .tdot{border-color:var(--c);color:#fff;background:var(--c)}
.tstep h3{font-size:17px;margin-bottom:5px}
.tstep p{font-size:14.5px;color:var(--muted);line-height:1.65;max-width:72ch}

/* ---------- 6. decision checklist ---------- */
.crm-decide{padding:74px 0;background:var(--dark);color:#fff}
.crm-decide h2{color:#fff}
.crm-decide .lede{color:#b9c6c1;max-width:62ch}
.dchecks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
@media (max-width:760px){.dchecks{grid-template-columns:1fr}}
.dcheck{
  display:flex;gap:13px;align-items:flex-start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:17px 18px;transition:border-color .18s,background .18s;
}
/* Not a link or button - no :hover treatment on purpose, see site rule "nothing may look
   clickable unless it is." */
.dbox{
  flex:0 0 auto;width:19px;height:19px;border-radius:4px;margin-top:2px;
  border:1.8px solid color-mix(in srgb,var(--c) 75%,#fff);background:transparent;
}
.dcheck p{font-size:14.5px;color:#e2eae7;line-height:1.55}

/* Zoho's four brand colours cycle across the capability icons too, so the portfolio identity
   runs through the page rather than sitting in one mark. The product accent still owns the
   page (hero, CTA, track, decisions); Zoho colour marks the parts that ARE Zoho. */
.cap:nth-child(4n+1){--z:var(--zoho-red)}
.cap:nth-child(4n+2){--z:var(--zoho-green)}
.cap:nth-child(4n+3){--z:var(--zoho-blue)}
.cap:nth-child(4n+4){--z:var(--zoho-yellow)}
.cap-i{background:color-mix(in srgb,var(--z,var(--c)) 15%,#fff)}
.cap-i svg{stroke:color-mix(in srgb,var(--z,var(--c)) 82%,#0d1a17)}
.cap::after{background:var(--z,var(--c))}

/* section heads on this page carry a small four-colour Zoho tick */
.crm-pipe > .wrap > h2::after,
.crm-caps > .wrap > h2::after{
  content:"";display:block;width:64px;height:3px;border-radius:2px;margin-top:12px;
  background:linear-gradient(90deg,#E42527 0 25%,#089949 25% 50%,#226DB4 50% 75%,#F9B21D 75% 100%);
}

/* ---------- 7. mid-page conversion point ----------
   Was a 760px card with no margin, so in RTL it hugged the inline-start edge and left a wide
   dead strip beside it - it read as a stray box rather than part of the page. It is now a
   full-width band that continues the pipeline section above it: rules top and bottom in
   Zoho brand colour, content on one line, CTA opposite the text. No card, no float. */
.crm-turn{
  padding:0;background:var(--white);
}
.turn-inner{
  max-width:var(--content-max);margin:0 auto;padding:44px 24px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;
  border-block:1px solid var(--line);
  position:relative;
}
.turn-inner::before,.turn-inner::after{
  content:"";position:absolute;inset-inline:0;height:2px;
  background:linear-gradient(90deg,#E42527 0 25%,#089949 25% 50%,#226DB4 50% 75%,#F9B21D 75% 100%);
  opacity:.85;
}
.turn-inner::before{top:-1px}
.turn-inner::after{bottom:-1px}
@media (max-width:820px){
  .turn-inner{grid-template-columns:1fr;gap:22px;padding:34px 20px}
}
.turn-inner h2{font-size:clamp(21px,2.7vw,28px);margin-bottom:9px;max-width:24ch}
.turn-inner > div > p{font-size:15.5px;color:var(--muted);line-height:1.7;max-width:64ch;margin:0}
.turn-act{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.turn-note{font-size:12.5px;color:var(--muted)}

/* ---------- 8. delivery phases ---------- */
.crm-deliver{padding:82px 0;background:var(--paper)}
.dv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
@media (max-width:1000px){.dv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.dv-grid{grid-template-columns:1fr}}
.dv{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;display:flex;flex-direction:column;position:relative;
  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." */
.dv-n{
  font-family:var(--font-display);font-size:13px;font-weight:800;color:#fff;
  background:var(--z,var(--c));width:30px;height:30px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.dv:nth-child(4n+1){--z:var(--zoho-red)}
.dv:nth-child(4n+2){--z:var(--zoho-green)}
.dv:nth-child(4n+3){--z:var(--zoho-blue)}
.dv:nth-child(4n+4){--z:var(--zoho-yellow)}
.dv h3{font-size:18px;margin-bottom:8px}
.dv > p{font-size:14.5px;color:var(--muted);line-height:1.65}
.dv-out{
  margin-top:auto;padding-top:15px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink)!important;line-height:1.55;
}
.dv-out strong{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--z,var(--c));margin-bottom:4px}
.dv-cta{
  margin-top:26px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.dv-cta h3{font-size:18.5px;margin-bottom:5px}
.dv-cta p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:58ch}
.dv-cta-btns{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* ---------- 9. FAQ ---------- */
/* The FAQ used to be a shared .section with padding-top:0, so it sat flush against the block
   above it. It owns its spacing here, and the toggle is an explicit plus in a bordered plate
   rather than two thin hairlines that read as a stray mark at small sizes. */
.crm-faq{padding:82px 0;background:var(--white)}
.crm-faq .lede{max-width:64ch;margin-bottom:8px}
.faq-plus{margin-top:26px;border-top:1px solid var(--line)}
.faq-plus .accordion-item button{padding-inline-end:56px;padding-block:20px;font-size:16.5px}
/* The two bars are anchored from the same inline edge, so giving both the same
   inset-inline-end put the vertical bar at the END of the horizontal one and the glyph
   rendered as a broken plus. The vertical bar is offset so their centres coincide:
   horizontal spans 16..29px from the edge (centre 22.25), vertical is 2.5 wide -> 21px. */
.faq-plus .accordion-item button::before,
.faq-plus .accordion-item button::after{background:var(--c);border-radius:1px}
.faq-plus .accordion-item button::before{inset-inline-end:16px;width:13px;height:2.5px}
.faq-plus .accordion-item button::after{inset-inline-end:21px;width:2.5px;height:13px}
.faq-plus .accordion-item button:hover{color:var(--c)}
/* the bordered plate the plus sits inside */
.faq-plus .accordion-item{position:relative}
.faq-plus .accordion-item > button{position:relative}
.faq-plus .accordion-item > button > span.fplate{display:none}
.faq-plus .accordion-item button::marker{content:""}
.faq-plus .accordion-item.open button{color:var(--c)}

/* ---------- 10. closing block ---------- */
/* Not .cta-strip: that shared component has a clipped corner and a gold triangle that mean
   nothing on a product page, and it butted against the section above with no top spacing. */
.crm-close{padding:0 0 92px;background:var(--white)}
.close-card{
  display:grid;grid-template-columns:1fr 210px;gap:0;border-radius:calc(var(--radius) * 3);
  overflow:hidden;background:linear-gradient(135deg,
    color-mix(in srgb,var(--c) 82%,#0d1a17), color-mix(in srgb,var(--c) 34%,#0d1a17));
}
@media (max-width:820px){.close-card{grid-template-columns:1fr}}
.close-body{padding:48px 48px 44px}
@media (max-width:600px){.close-body{padding:32px 24px}}
.close-card h2{color:#fff;font-size:clamp(24px,3.4vw,33px);margin-bottom:12px;max-width:22ch}
.close-text{color:rgba(255,255,255,.85);font-size:15.5px;line-height:1.7;max-width:60ch}
.close-list{list-style:none;margin:20px 0 26px;display:grid;gap:9px}
.close-list li{
  position:relative;padding-inline-start:26px;color:#fff;font-size:14.5px;line-height:1.5;
}
.close-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:6px;width:12px;height:12px;
  border-radius:3px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.6);
}
.close-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.close-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)}
.close-alt:hover{text-decoration-color:#fff}
.close-side{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border-inline-start:1px solid rgba(255,255,255,.14);
}
@media (max-width:820px){.close-side{display:none}}
.close-side img{position:relative;z-index:1;border-radius:12px;background:#fff;padding:8px}
/* the four Zoho colours as a quiet ring, not a stray triangle */
.close-mark{
  position:absolute;width:132px;height:132px;border-radius:50%;
  background:conic-gradient(#E42527 0 25%,#089949 25% 50%,#226DB4 50% 75%,#F9B21D 75% 100%);
  opacity:.34;filter:blur(1px);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 55%);
  mask:radial-gradient(circle,transparent 54%,#000 55%);
}