/* Header clearance is reserved by .breadcrumbs (always the sibling right before these hero
   sections). Adding it again here on top of that was the double-gap bug — these only need
   their own content padding, not another calc(var(--hh) + N) on top.
   Hub heroes share the dark "cap" (header/breadcrumbs/hero) - light text, light-on-dark
   form controls for the search/filter row that lives inside them. */
.hub-hero{padding:0 0 40px;background:var(--darker);margin-top:-1px}
.hub-hero h1{color:#fff}
.hub-hero .lede{color:var(--on-dark-muted)}
.hub-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.hub-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.hub-search{background:#1c2f2a;border-color:var(--on-dark-line);color:#fff}
.hub-search::placeholder{color:#7c8f87}
.hub-hero p[style]{color:var(--on-dark-muted)!important}
.hub-hero a[style]{color:#8fd8cf!important}
.hub-toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:24px 0 36px}
.hub-search{flex:1;min-width:220px;height:48px;border:1px solid var(--line);border-radius:var(--radius);padding:0 16px;font-size:15px;font-family:var(--font)}
.hub-search:focus{outline:none;border-color:var(--teal)}
.chip-filter{display:flex;gap:8px;flex-wrap:wrap}
/* CONTRAST BUG, fixed: there used to be two .chip-filter button rules of equal specificity.
   The first painted a dark chip with light text for the dark hub hero; the second, later in
   the file, overrode only the BACKGROUND to white and left the light colour behind - white
   text on a white pill. One rule now owns the whole chip, and it is styled for the dark hero
   it actually sits in. Never set background here without also setting colour. */
.chip-filter button{
  border:1px solid var(--on-dark-line);background:#1c2f2a;color:var(--on-dark-ink);
  border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:700;cursor:pointer;
  font-family:var(--font);transition:background .16s,border-color .16s,color .16s;
}
.chip-filter button:hover{border-color:#8fd8cf;color:#fff}
.chip-filter button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}

/* .deep-link now lives in global.css - it is used on the home page too, which does not load hub.css. */
.no-page-note{font-size:12.5px;color:var(--muted);margin-top:auto}

/* ---------- product atmosphere ----------
   --product-accent is set per-page (build.js) from a color sampled out of that product's
   own official icon. This is deliberately BOLD and saturated, not a pale wash: the goal is
   that a customer who already knows Zoho Desk recognizes /products/zoho-desk/ as "the same
   thing" at a glance. Alevectis stays the dominant brand elsewhere (logo, nav, footer, the
   teal CTA everywhere else on the site) - the boldness is scoped to this one hero band on
   that product's own page, not bled into global chrome. */
/* .page-hero.product-hero (compound, not just .product-hero): every product page carries
   BOTH classes on the same element, so a bare .product-hero{} rule has equal specificity to
   .page-hero{} and the winner becomes whichever happens to sit later in the file - exactly
   the bug that silently overrode the accent color with .page-hero's dark background here.
   The compound selector wins on specificity regardless of source order. */
/* The field is the product's OWN colour mixed down into a deep shade, not a neutral black
   scrim laid over it: a flat rgba(13,26,23,.8) overlay drained the hue so completely that
   Desk's green and CRM's blue rendered as the same near-black. Mixing 40% of the accent into
   the dark keeps white text readable while making the page read unmistakably as "green =
   Desk" / "blue = CRM", and the 10px top edge stays the full-strength accent. */
.page-hero.product-hero{
  position:relative;
  margin-top:-1px;
  padding-bottom:52px!important;
  padding-top:18px;
  overflow:hidden;
  border-top:10px solid var(--product-accent, var(--teal));
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/36px 36px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/36px 36px,
    color-mix(in srgb, var(--product-accent, var(--teal)) 40%, #0d1a17);
}
.product-hero .wrap{position:relative;z-index:1}
.product-hero h1{color:#fff}
.product-hero .lede{color:rgba(255,255,255,.86)}
/* base .product-icon-badge lives in global.css - it is used on the home page too, which
   does not load hub.css (that mismatch rendered it as a full-width unstyled white block). */
.product-hero .product-icon-badge{box-shadow:0 8px 24px -8px rgba(0,0,0,.4)}
.product-hero .btn-primary{background:#fff;color:var(--darker)}
.product-hero .btn-primary:hover{background:#eef2ef;transform:translateY(-1px)}
/* Fallback for pages with no dedicated -hero override (see the per-product .xx-hero.btn-ghost
   rules in individual p-*.css files) - .btn-ghost's global.css default (dark text, pale border)
   is invisible against any dark hero background. Same specificity as those per-product rules,
   so this only wins where no more-specific override exists; source order still lets a real
   override win when one is written later in the cascade. */
.product-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.product-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* Zoho One's own icon is deliberately all 4 brand colors at once (it's the everything-suite) -
   averaging that produces mud, so it gets the real 4-color band on the dark cap instead of
   a single flat accent. */
.page-hero.product-hero-one{background:var(--darker);position:relative;padding-bottom:48px!important;margin-top:-1px}
.product-hero-one::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,#E42527,#089949,#226DB4,#F9B21D)}
.product-hero-one h1{color:#fff}
.product-hero-one .lede{color:var(--on-dark-muted)}
.product-hero-one .product-icon-badge{background:#fff}

/* solution/product page template - plain (non-product) heroes get the same dark cap treatment
   as .hub-hero; product-hero/product-hero-one below override this with their bolder look. */
.page-hero{padding:0 0 40px;background:var(--darker);margin-top:-1px}
.page-hero h1{color:#fff}
.page-hero .lede{color:var(--on-dark-muted)}
.page-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.page-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
/* No vertical accent rule beside the heading. That device (a coloured bar pinned to the side
   of an H1) is one of the most recognisable template/AI-generated signatures on the web, and
   the brief calls it out explicitly. Hierarchy comes from the type itself: display face,
   heavy weight, tight tracking, and a measure short enough to force a deliberate line break. */
.page-hero h1,.hub-hero h1{max-width:20ch}
.scenario-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:700px){.scenario-list{grid-template-columns:1fr}}
.scenario-list li{list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;font-size:15px}

.product-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.product-row a.chip:hover{border-color:var(--teal);color:var(--teal)}

.callout{background:#fff7ea;border:1px solid #f0ddb0;border-radius:var(--radius);padding:20px 22px;font-size:14.5px;color:#6b4e12}
.callout strong{display:block;margin-bottom:4px}

.accordion-item{border-bottom:1px solid var(--line)}
.accordion-item button{
  position:relative;width:100%;display:block;padding-inline-start:4px;padding-inline-end:40px;padding-block:18px;
  background:none;border:none;text-align:right;font-size:16px;font-weight:700;
  cursor:pointer;color:var(--ink);
}
.accordion-item button:hover{color:var(--teal)}
/* The markup never actually included an .a-icon element on any page, so the FAQ rows had
   zero visual affordance that they expand - a plain "+" drawn from two ::before/::after
   bars (no per-page markup change needed) that folds into a flat line on open. */
.accordion-item button::before,.accordion-item button::after{
  content:"";position:absolute;top:50%;inset-inline-end:6px;background:var(--teal);
  border-radius:2px;transition:transform .2s ease,opacity .2s ease;
}
.accordion-item button::before{width:14px;height:2px;transform:translateY(-50%)}
.accordion-item button::after{width:2px;height:14px;transform:translateY(-50%)}
.accordion-item.open button::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.accordion-item .a-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
.accordion-item.open .a-body{max-height:400px}
.accordion-item .a-body p{padding:0 4px 18px;color:var(--muted);font-size:15px}

/* Numbered index marks (counter + ::before) come from global.css so decision-list and
   scenario-list share one visual language across every template. */
.decision-list li{list-style:none;position:relative;margin-bottom:10px;font-size:15px}

.author-box{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:16px;font-size:14px;color:var(--muted)}
.author-box strong{color:var(--ink)}

/* ---------- integrations hub ----------
   Rule: .int-row and .int-method have NO hover lift and NO card border-box styling.
   They are flat divided rows on purpose - nothing here links anywhere, and a hover
   lift would recreate the dead-end-card problem. Only .int-lead (Priority, the one
   system with a real page) gets a raised treatment and a real button. */
.int-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:32px;border-top:1px solid var(--line)}
@media (max-width:980px){.int-methods{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.int-methods{grid-template-columns:1fr}}
.int-method{padding:26px 0;border-bottom:1px solid var(--line)}
.int-methods > .int-method:not(:nth-child(4n+1)){border-inline-start:1px solid var(--line);padding-inline-start:24px}
.int-methods > .int-method:not(:nth-child(4n)){padding-inline-end:24px}
@media (max-width:980px){
  .int-methods > .int-method{padding-inline:0!important;border-inline-start:0!important}
  .int-methods > .int-method:nth-child(even){padding-inline-start:24px!important;border-inline-start:1px solid var(--line)!important}
  .int-methods > .int-method:nth-child(odd){padding-inline-end:24px!important}
}
@media (max-width:620px){
  .int-methods > .int-method{padding-inline:0!important;border-inline-start:0!important}
}
.int-method h3{font-size:17px;margin-bottom:7px}
.int-method p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* Priority - the one integration with a deep page */
.int-lead{
  display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--dark);color:#fff;border-radius:var(--radius);padding:36px 34px;margin-top:26px;
}
.int-lead-body{flex:1 1 460px;min-width:0}
.int-lead-text{font-size:16.5px;line-height:1.75;color:var(--on-dark-ink)}
.int-lead-note{margin-top:14px;font-size:14px;color:#9fb0aa;line-height:1.6}
.int-lead .btn{flex:0 0 auto}

.int-groups{display:flex;flex-direction:column;gap:38px;margin-top:34px}
.int-group-title{
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-d);margin-bottom:4px;
}
.int-rows{border-top:1px solid var(--line)}
.int-row{padding:20px 0;border-bottom:1px solid var(--line)}
.int-row h4{font-size:16.5px;font-weight:700;margin-bottom:5px;color:var(--ink)}
.int-row p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:78ch}

.int-check{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
@media (max-width:760px){.int-check{grid-template-columns:1fr}}
.int-check-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.int-check-item h3{font-size:17px;margin-bottom:7px}
.int-check-item p{font-size:14.5px;color:var(--muted);line-height:1.65}

/* external-link note on the products hub. */
.hub-extlink-note{font-size:14.5px;color:var(--muted);line-height:1.65;margin-top:22px;max-width:70ch}
.hub-hero .deep-link{margin-top:14px}
/* "opens in a new tab" - announced to screen readers, never shown as visible link text (that
   read as an unusual/uncommon pattern, not a real convention any site actually uses). */
.ext-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ================= design corrections (product/solution page components) =================
   Three defects found by measuring the rendered pages rather than reading the markup. */

/* 1. A linked chip and a plain context chip computed to IDENTICAL colour, border and
      background - only :hover differed, which does not exist on touch. A visitor could not
      tell which chips open a page. Linked chips now carry the teal border + teal label that
      the rest of the site uses for "this is interactive"; plain chips stay flat and muted so
      the row reads as two distinct things: products you can open, and products named for
      context. Same site rule as the dead-card fix on the integrations hub. */
.product-row{margin-top:18px;gap:9px}
.product-row .chip{background:transparent;border-color:var(--line);color:var(--muted);font-weight:600}
.product-row a.chip{
  background:var(--white);border-color:var(--teal);color:var(--teal-d);font-weight:700;
  transition:background .15s ease,color .15s ease;
}
.product-row a.chip:hover,.product-row a.chip:focus-visible{background:var(--teal);border-color:var(--teal);color:#fff}

/* 2. .scenario-list was a rigid 2-column grid, so any odd number of items orphaned the last
      one and left a visible hole beside it (5 items rendered 2+2+1). The last item now spans
      the full row when the count is odd - a deliberate wide row instead of a gap. */
.scenario-list{gap:12px}
.scenario-list li:last-child:nth-child(odd){grid-column:1 / -1}
@media (max-width:700px){.scenario-list li:last-child:nth-child(odd){grid-column:auto}}

/* 3. The cells were 55px tall with 14px of vertical padding around 15px text - sparse boxes
      that read as unfinished filler. Denser type, real padding, and a hover lift tie them to
      the rest of the card language. */
.scenario-list li{
  padding:17px 50px 17px 18px;font-size:15.5px;line-height:1.6;color:var(--ink);
  display:flex;align-items:center;transition:border-color .15s ease;
}
.scenario-list li:hover{border-color:var(--teal)}

/* Integration row titles are links now that every listed system has a page. Same treatment as
   the product catalog: teal plus a standing underline, because hover does not exist on touch
   and the row itself deliberately has no hover lift. */
.int-row h4 a{color:var(--teal-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--teal) 45%,transparent)}
.int-row h4 a:hover{color:var(--teal);text-decoration-color:var(--teal)}

/* ================= product page: identity, not template =================
   Rebuilt after review: the pages carried the product colour only in the hero band, and the
   "related products" row was identical grey pills that never named the product, showed no
   logo and used no colour. --product-accent now drives markers, numerals and interaction
   states through the whole page, and related products are real tiles with official icons. */

/* ---- related products ----
   Tiles hug their content instead of stretching in a fixed grid: a uniform auto-fill grid left
   a wide dead gap beside each short product name, which read as unfinished. The clickable state
   is carried by a standing underline in the product colour (not a hover-only label, which is
   invisible on touch); a tile with no page stays dashed and muted so it never reads as a link. */
.rel-section{position:relative}
.rel-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.rel-tile{
  --c:var(--teal);
  display:inline-flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 14px 10px 16px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
/* Softened after review: a 13% tint plus a fully saturated coloured label made the row read
   as loud. The plate is now near-white and the label is ink, so the official logo carries the
   colour and the tile stays quiet. The link affordance moves to the underline alone. */
.rel-tile img,.rel-noicon{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;padding:4px;
  background:color-mix(in srgb,var(--c) 6%,#fff);
}
.rel-noicon{font-size:12px;font-weight:800;color:var(--c);display:flex;align-items:center;justify-content:center}
.rel-name{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.2;white-space:nowrap}
a.rel-tile .rel-name{
  color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--c) 55%,transparent);
}
a.rel-tile:hover,a.rel-tile:focus-visible{
  border-color:var(--c);transform:translateY(-2px);
  box-shadow:0 5px 14px color-mix(in srgb,var(--c) 13%,transparent);
}
a.rel-tile:hover .rel-name{color:var(--c);text-decoration-color:var(--c)}
.rel-open{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rel-plain{background:transparent;border-style:dashed}
.rel-plain .rel-name{color:var(--muted);font-weight:600}
.rel-plain img{opacity:.5;filter:saturate(.45)}
@media (max-width:480px){
  .rel-tile{padding:9px 11px}
  .rel-name{font-size:13.5px}
  .rel-tile img,.rel-noicon{width:28px;height:28px}
}

/* Zoho's four brand colours as a real mark, used once per product page above the related
   grid - the section where the page is explicitly talking about the Zoho portfolio. */
.rel-section .wrap::before{
  content:"";display:block;width:84px;height:4px;border-radius:2px;margin-bottom:20px;
  background:linear-gradient(90deg,#E42527 0 25%,#089949 25% 50%,#226DB4 50% 75%,#F9B21D 75% 100%);
}

/* ---- accent permeation: the product's own colour beyond the hero ---- */
.product-page .scenario-list li::before,
.product-page .decision-list li::before{color:var(--product-accent,var(--teal))}
.product-page .scenario-list li:hover{border-color:var(--product-accent,var(--teal))}
.product-page .grid-2 > .card{transition:border-color .18s ease,transform .18s ease}
.product-page .grid-2 > .card:hover{
  border-color:var(--product-accent,var(--teal));transform:translateY(-2px);
}
.product-page .grid-2 > .card h3{
  display:flex;align-items:baseline;gap:9px;
}
.product-page .grid-2 > .card h3::before{
  content:"";flex:0 0 auto;width:7px;height:7px;border-radius:2px;
  background:var(--product-accent,var(--teal));
}
.product-page .accordion-item button:hover{color:var(--product-accent,var(--teal))}
/* CONTRAST BUG, fixed: this rule used to paint the strip a near-white gradient while
   .cta-strip h2 keeps color:var(--white) from global.css - white text on a white panel, on
   every product page. The product accent now tints a DARK field instead, so the white text
   it was designed for stays readable. Never give .cta-strip a light background without also
   restyling its text. The corner notch switches from the gold triangle to Zoho four-colour. */
.product-page .cta-strip{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--product-accent,var(--teal)) 78%,#0d1a17),
    color-mix(in srgb,var(--product-accent,var(--teal)) 35%,#0d1a17));
}
.product-page .cta-strip .lede{color:rgba(255,255,255,.88)}
.product-page .cta-strip::before{
  background:linear-gradient(135deg,#E42527 0 25%,#089949 25% 50%,#226DB4 50% 75%,#F9B21D 75% 100%);
}

/* ---- entrance motion (reduced-motion respected; JS adds .reveal-on) ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal-on [data-reveal]{opacity:0;transform:translateY(10px)}
  .reveal-on [data-reveal].seen{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
  .reveal-on .rel-grid.seen .rel-tile{animation:relIn .42s ease both}
  .rel-grid.seen .rel-tile:nth-child(2){animation-delay:.04s}
  .rel-grid.seen .rel-tile:nth-child(3){animation-delay:.08s}
  .rel-grid.seen .rel-tile:nth-child(4){animation-delay:.12s}
  .rel-grid.seen .rel-tile:nth-child(5){animation-delay:.16s}
  .rel-grid.seen .rel-tile:nth-child(6){animation-delay:.2s}
  .rel-grid.seen .rel-tile:nth-child(7){animation-delay:.24s}
  .rel-grid.seen .rel-tile:nth-child(8){animation-delay:.28s}
  @keyframes relIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ---------- official Zoho partner sign-up (per product) ----------
   store.zoho.com/ResellerCustomerSignUp.do carrying Alevectis's own reseller id - a visitor
   who signs up through it lands in our partner portal automatically. One shared component,
   not a bespoke per-page section like the rest of a product page: this is a transactional
   control, and the reason .btn-primary and the booking CTA are not reinvented per page either
   is the same reason this shouldn't be - a visitor who has seen it once should recognise it
   instantly on the next product page. It tints itself from --product-accent so it still reads
   as "this page", but stays a quiet outlined card rather than a solid block: the page's own
   primary CTA (booking a scoping meeting) is the business's actual goal, and this must not
   outrank it. Injected by tools/add-signup-cta.js right after the hero on the 21 product pages
   that have a matching store.zoho.com id - see that file for which four do not and why. */
.signup-strip{padding:22px 0}
.signup-card{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 20px;border-radius:14px;text-decoration:none;
  background:color-mix(in srgb,var(--product-accent,var(--teal)) 6%,var(--white));
  border:1px solid color-mix(in srgb,var(--product-accent,var(--teal)) 24%,var(--line));
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.signup-card:hover{
  border-color:var(--product-accent,var(--teal));
  transform:translateY(-2px);
  box-shadow:0 14px 30px -22px color-mix(in srgb,var(--product-accent,var(--teal)) 55%,transparent);
}
.signup-card:focus-visible{outline:3px solid var(--product-accent,var(--teal));outline-offset:2px}
.signup-card-icon{
  flex:0 0 auto;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--product-accent,var(--teal)) 12%,var(--white));
}
.signup-card-icon img{display:block}
.signup-card-body{flex:1 1 320px;min-width:0;display:grid;gap:3px}
.signup-card-t{font-weight:800;font-size:16px;color:var(--ink)}
.signup-card-s{font-size:13.5px;color:var(--muted);line-height:1.5}
.signup-card-go{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;font-weight:800;font-size:14px;white-space:nowrap;
  color:var(--white);background:var(--product-accent,var(--teal));
  transition:background .16s ease;
}
.signup-card-go svg{width:15px;height:15px;flex:0 0 auto}
@media (max-width:560px){
  .signup-card{padding:14px 16px}
  .signup-card-go{width:100%;justify-content:center;order:3}
}