/* Solution: sales and customer management - page-specific design.

   Solution pages describe a business function rather than a tool, so they do not borrow a
   product's accent. This one takes Zoho blue (the colour of CRM, the spine of the solution) and
   uses Zoho red for exactly one thing: the share of leads lost at each stage. The loss is the
   subject of the page, so it is the only thing that gets a warning colour.

   All classes scoped to .sc-page, prefixed sc-. */

.sc-page {
  --sc: #226db4;
  --sc-d: #17518c;
  --sc-l: #e9f1f9;
  --sc-ink: #101c29;
}

/* ---------------------------------------------------------------------- hero -- */
.sc-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
  background: linear-gradient(175deg, var(--sc-l) 0%, var(--white) 62%);
  border-block-end: 1px solid color-mix(in srgb, var(--sc) 16%, var(--line));
}
.sc-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.sc-hero h1 { font-size: clamp(1.85rem, 4.2vw, 3rem); line-height: 1.15; margin: 0 0 14px; color: var(--sc-ink); }
.sc-hero .lede { max-width: 64ch; margin-block-end: 26px; }
.sc-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* a funnel of narrowing bars that keeps re-forming */
.sc-hero-vis { display: grid; place-items: center; }
.sc-funnel { display: grid; gap: 9px; width: 100%; max-width: 280px; justify-items: center; }
.sc-fl {
  display: block; height: 30px; width: var(--w); border-radius: 7px;
  background: linear-gradient(90deg, var(--sc), color-mix(in srgb, var(--sc) 55%, var(--white)));
}
.sc-funnel .sc-fl:nth-child(1) { opacity: 1 }
.sc-funnel .sc-fl:nth-child(2) { opacity: .88 }
.sc-funnel .sc-fl:nth-child(3) { opacity: .76 }
.sc-funnel .sc-fl:nth-child(4) { opacity: .64 }
.sc-funnel .sc-fl:nth-child(5) { opacity: .52 }

@media (prefers-reduced-motion: no-preference) {
  .sc-fl { animation: sc-grow 4.6s ease-in-out infinite; transform-origin: center; }
  .sc-funnel .sc-fl:nth-child(2) { animation-delay: .18s }
  .sc-funnel .sc-fl:nth-child(3) { animation-delay: .36s }
  .sc-funnel .sc-fl:nth-child(4) { animation-delay: .54s }
  .sc-funnel .sc-fl:nth-child(5) { animation-delay: .72s }
}
@keyframes sc-grow { 0%, 100% { transform: scaleX(1) } 50% { transform: scaleX(.9) } }

/* -------------------------------------------------------------------- funnel -- */
.sc-leak { padding: clamp(48px, 7vw, 84px) 0; }
.sc-leak h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.sc-leak .lede { max-width: 80ch; }

.sc-pipe {
  margin-block-start: 28px;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(16px, 3vw, 26px);
  box-shadow: 0 20px 50px -40px rgba(10, 30, 55, .55);
}
.sc-pipe-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  padding-block-end: 16px; margin-block-end: 18px;
  border-block-end: 1px solid var(--line);
}
.sc-of { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.sc-of b { font-size: 1.9rem; color: var(--sc-d); font-variant-numeric: tabular-nums; }
.sc-of span { color: var(--muted); font-size: .93rem; }
.sc-replay {
  font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  color: var(--sc-d); background: var(--white);
  border: 1px solid color-mix(in srgb, var(--sc) 38%, var(--line));
  border-radius: 9px; padding: 8px 15px;
}
.sc-replay:hover { background: var(--sc-l); }

.sc-stages {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px;
  margin-block-end: 18px;
}
.sc-stage {
  font: inherit; cursor: pointer; text-align: start;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; display: grid; gap: 7px; align-content: start;
  transition: border-color .2s, box-shadow .2s;
}
.sc-stage[aria-pressed="true"] {
  border-color: var(--sc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 24%, transparent);
}
.sc-st-n { font-size: .87rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.sc-st-v {
  font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--sc-d);
  font-variant-numeric: tabular-nums;
}
.sc-st-bar { display: block; height: 6px; border-radius: 3px; background: #eef1f4; overflow: hidden; }
.sc-st-bar i {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: var(--sc); transition: width .3s ease;
}
/* the last two stages are where the loss has already happened - shade them toward the warning */
.sc-stages .sc-stage:nth-child(4) .sc-st-bar i,
.sc-stages .sc-stage:nth-child(5) .sc-st-bar i {
  background: color-mix(in srgb, var(--zoho-red) 45%, var(--sc));
}

.sc-detail {
  background: var(--sc-l); border: 1px solid color-mix(in srgb, var(--sc) 20%, var(--line));
  border-radius: 15px; padding: clamp(18px, 3vw, 26px);
}
.sc-detail h3 { margin: 0 0 10px; font-size: 1.15rem; color: var(--sc-d); }
.sc-d-what { margin: 0 0 14px; color: var(--muted); max-width: 84ch; }
.sc-d-loss, .sc-d-fix {
  margin: 0 0 10px; padding: 13px 16px; border-radius: 11px;
  background: var(--white); max-width: 88ch; color: var(--ink); font-size: .96rem;
}
.sc-d-fix { margin-block-end: 0; }
.sc-d-loss { border: 1px solid color-mix(in srgb, var(--zoho-red) 26%, var(--line)); }
.sc-d-loss b { color: #a5191b; }
.sc-d-fix { border: 1px solid color-mix(in srgb, var(--zoho-green) 30%, var(--line)); }
.sc-d-fix b { color: #0a6b39; }
.sc-math {
  margin-block-start: 20px; color: var(--muted); font-size: .95rem; max-width: 86ch;
}

/* --------------------------------------------------------------------- stack -- */
.sc-stack {
  padding: clamp(48px, 7vw, 84px) 0;
  background: var(--sc-l);
  border-block: 1px solid color-mix(in srgb, var(--sc) 15%, var(--line));
}
.sc-stack h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.sc-stack .lede { max-width: 80ch; }
.sc-parts {
  margin-block-start: 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.sc-part {
  display: grid; gap: 6px; align-content: start;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px;
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.sc-part:hover { border-color: var(--sc); transform: translateY(-2px); }
.sc-part img { display: block; margin-block-end: 4px; }
.sc-p-n { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.sc-p-r { color: var(--muted); font-size: .93rem; }
.sc-p-go {
  margin-block-start: 8px; font-size: .84rem; font-weight: 700; color: var(--sc-d);
}
.sc-part-core { border-color: var(--sc); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 24%, transparent); }

/* ------------------------------------------------------------------ decisions -- */
.sc-decide { padding: clamp(48px, 7vw, 84px) 0; }
.sc-decide h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.sc-decide .lede { max-width: 80ch; }
.sc-qs {
  margin: 26px 0 0;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--white);
}
.sc-qs > div {
  display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 32px);
  padding: 20px clamp(16px, 3vw, 26px);
  border-block-end: 1px solid var(--line);
}
.sc-qs > div:last-child { border-block-end: 0; }
.sc-qs dt { font-weight: 700; color: var(--sc-d); font-size: 1.02rem; }
.sc-qs dd { margin: 0; color: var(--muted); max-width: 82ch; }

/* ----------------------------------------------------------------------- how -- */
.sc-how {
  padding: clamp(48px, 7vw, 84px) 0;
  background: #0d1a26;
}
.sc-how h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 24px; }
.sc-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: scs;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 13px;
}
.sc-steps li {
  counter-increment: scs;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg); padding: 18px; display: grid; gap: 5px;
}
.sc-steps b {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 1.02rem; color: color-mix(in srgb, var(--sc) 48%, var(--white));
}
.sc-steps b::before {
  content: counter(scs, decimal-leading-zero);
  font-size: .8rem; font-weight: 800;
  color: color-mix(in srgb, var(--white) 52%, transparent);
  font-variant-numeric: tabular-nums;
}
.sc-steps span { color: color-mix(in srgb, var(--white) 74%, transparent); font-size: .95rem; }
.sc-how-cta {
  margin-block-start: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px; padding: 20px 22px;
}
.sc-how-cta p { margin: 0; color: color-mix(in srgb, var(--white) 84%, transparent); max-width: 66ch; }

/* ------------------------------------------------------------------------ faq -- */
.sc-faq { padding: clamp(48px, 7vw, 84px) 0 clamp(24px, 4vw, 40px); }
.sc-faq h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 20px; }

/* ------------------------------------------------------------- nearby solutions -- */
.sc-near { padding: 0 0 clamp(40px, 6vw, 64px); }
.sc-near h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 10px; }
.sc-near .lede { max-width: 74ch; }
.sc-near-grid {
  margin-block-start: 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.sc-near-c {
  display: grid; gap: 5px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 17px; text-decoration: none;
  transition: border-color .2s;
}
.sc-near-c:hover { border-color: var(--sc); }
.sc-near-c b { color: var(--sc-d); font-size: 1rem; }
.sc-near-c span { color: var(--muted); font-size: .93rem; }

/* ---------------------------------------------------------------------- close -- */
.sc-close { padding: 0 0 clamp(48px, 7vw, 84px); }
.sc-close-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; border-radius: 20px;
  padding: clamp(26px, 4vw, 42px);
  background: linear-gradient(130deg, var(--sc-d), #0b2e4d);
}
.sc-close-box h2 { color: var(--white); margin: 0 0 8px; font-size: clamp(1.35rem, 2.9vw, 1.95rem); }
.sc-close-box .lede { color: color-mix(in srgb, var(--white) 86%, transparent); margin: 0; max-width: 60ch; }

/* --------------------------------------------------------------------- narrow -- */
@media (max-width: 900px) {
  .sc-hero-in { grid-template-columns: 1fr; }
  .sc-qs > div { grid-template-columns: 1fr; gap: 5px; }
}
@media (max-width: 700px) {
  .sc-stages { grid-template-columns: repeat(2, 1fr); }
  .sc-stages .sc-stage:last-child { grid-column: 1 / -1; }
}