/* ============================================================================
   /solutions/ hub. Eight cards, each carrying the symptom that identifies the
   domain, what actually changes, the scenarios and the products. A search box
   was tried here and removed - eight items is browsable at a glance; a search
   input implies a list too long to scan, which isn't true for this page (see
   /products/ for a hub where the catalog is actually large enough to earn one).
   ============================================================================ */

/* ---- how to use this page ---- */
.sh-how{padding:52px 0 8px;background:var(--white)}
.sh-how h2{font-size:clamp(1.2rem,2.4vw,1.6rem);margin:0 0 20px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
@media (max-width:860px){.how-grid{grid-template-columns:1fr}}
.how-i{padding:26px 0;border-bottom:1px solid var(--line)}
.how-grid > .how-i:not(:first-child){border-inline-start:1px solid var(--line);padding-inline-start:26px}
.how-grid > .how-i:not(:last-child){padding-inline-end:26px}
@media (max-width:860px){
  .how-grid > .how-i{padding-inline:0!important;border-inline-start:0!important}
}
.how-n{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:8px;font-family:var(--font-display);font-size:11.5px;font-weight:800;color:#fff;
  background:var(--hz,var(--teal));margin-bottom:11px;
}
.how-i:nth-child(1){--hz:var(--zoho-red)}
.how-i:nth-child(2){--hz:var(--zoho-blue)}
.how-i:nth-child(3){--hz:var(--zoho-green)}
.how-i h3{font-size:17px;margin-bottom:6px}
.how-i p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---- the eight domains ---- */
.sol-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
@media (max-width:900px){.sol-grid{grid-template-columns:1fr}}

/* Bento treatment for the one domain with a real, measured reason to lead: real Keyword
   Planner data (Israel/Hebrew) puts "מערכת CRM" at 1,000-10,000 searches/month alone - the
   single highest-demand solution-hub term found across this whole project. That's a real,
   content-justified reason for one card to lead at full width instead of sitting in the
   uniform 2-column grid like the other seven identical-shaped cards - not decoration for its
   own sake. No "most popular" label is added; there's no real usage data to back that specific
   claim, only search-demand data, so the layout communicates prominence without asserting one. */
.sol--featured{grid-column:1 / -1}
@media (min-width:901px){
  .sol--featured{
    display:grid;grid-template-columns:1.3fr 1fr;column-gap:36px;row-gap:14px;
    grid-template-rows:auto auto 1fr auto;align-items:start;
  }
  .sol--featured .sol-head{grid-column:1/2;grid-row:1}
  .sol--featured .sol-sign{grid-column:1/2;grid-row:2;margin-bottom:0}
  .sol--featured .sol-what{grid-column:1/2;grid-row:3;margin-bottom:0}
  .sol--featured .sol-list{grid-column:2/3;grid-row:1/4;align-self:center;margin-bottom:0}
  .sol--featured .sol-prods{grid-column:1/2;grid-row:4;margin-bottom:0}
  .sol--featured .sol-go{grid-column:2/3;grid-row:4;align-self:end;justify-self:start}
}
.sol{
  --sz:var(--teal);
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:calc(var(--radius) * 1.5);
  padding:28px 28px 24px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
@media (max-width:600px){.sol{padding:22px 20px}}
.sol:hover{
  border-color:var(--sz);transform:translateY(-2px);
  box-shadow:0 8px 22px color-mix(in srgb,var(--sz) 12%,transparent);
}
.sol[hidden]{display:none}
/* Zoho's four brand colours cycle across the eight domains, two of each. */
.sol-grid > .sol:nth-child(8n+1){--sz:var(--zoho-red)}
.sol-grid > .sol:nth-child(8n+2){--sz:var(--zoho-green)}
.sol-grid > .sol:nth-child(8n+3){--sz:var(--zoho-blue)}
.sol-grid > .sol:nth-child(8n+4){--sz:var(--zoho-yellow)}
.sol-grid > .sol:nth-child(8n+5){--sz:var(--zoho-red)}
.sol-grid > .sol:nth-child(8n+6){--sz:var(--zoho-green)}
.sol-grid > .sol:nth-child(8n+7){--sz:var(--zoho-blue)}
.sol-grid > .sol:nth-child(8n+8){--sz:var(--zoho-yellow)}

.sol-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:14px}
.sol-k{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:var(--sz);border-radius:5px;padding:4px 9px;
}
.sol h2{font-size:21px;margin:0}
@media (max-width:600px){.sol h2{font-size:19px}}

.sol-sign{
  font-size:14.5px;line-height:1.6;color:var(--ink);
  background:color-mix(in srgb,var(--sz) 7%,#fff);
  border:1px solid color-mix(in srgb,var(--sz) 22%,var(--line));
  border-radius:var(--radius);padding:13px 15px;margin-bottom:14px;
}
.sol-sign b{color:var(--sz);font-weight:800}
.sol-what{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:16px}

.sol-list{list-style:none;display:grid;gap:9px;margin-bottom:18px}
.sol-list li{position:relative;padding-inline-start:22px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.sol-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:7px;width:10px;height:10px;
  border-radius:3px;background:color-mix(in srgb,var(--sz) 22%,#fff);
  border:1.5px solid var(--sz);
}

.sol-prods{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.sol-prods .chip{font-size:12.5px;padding:5px 11px}
.sol-prods a.chip{
  background:var(--white);border-color:var(--teal);color:var(--teal-d);
}
.sol-prods a.chip:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.sol-prods span.chip{background:transparent;color:var(--muted);border-style:dashed}

.sol-go{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;
  font-size:14.5px;font-weight:800;color:#fff;background:var(--sz);
  border-radius:999px;padding:10px 22px;
  transition:opacity .16s ease;
}
.sol-go:hover{opacity:.87}

/* ---- closing ---- */
.sh-close{padding:0 0 92px;background:var(--white)}
.shc{
  display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;
  background:var(--dark);border-radius:calc(var(--radius) * 2);padding:40px 42px;
}
@media (max-width:860px){.shc{grid-template-columns:1fr;gap:24px;padding:30px 24px}}
.shc h2{color:#fff;font-size:clamp(22px,3vw,29px);margin-bottom:10px}
.shc p{color:rgba(255,255,255,.85);font-size:15.5px;line-height:1.75;max-width:62ch}
.shc-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.shc-alt{
  color:#fff;font-size:14px;font-weight:700;text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45);
}
.shc-alt:hover{text-decoration-color:#fff}