/* ============================================================================
   Page-specific design system: /products/zoho-one/
   Shares no section structure with p-crm.css or p-desk.css. CRM explores a
   linear pipeline, Desk converges channels into a clock; One is a portfolio,
   so its centrepiece is an explorer over the app catalogue itself.

   Base colour: --product-accent (#E42527). Zoho One's icon uses all four brand
   colours near-equally, so there is no dominant hue to sample - the corporate
   red is the honest identity for the whole-Zoho suite.
   Site-wide bans hold: no arrows, no line beside headings, no bar atop cards.
   ============================================================================ */

.one-page{--c:var(--product-accent,#E42527)}

/* ---------- 1. hero: the portfolio assembling ---------- */
.on-hero{
  position:relative;overflow:hidden;padding:58px 0 0;border-top:10px solid var(--c);
  background:
    radial-gradient(760px 300px at 78% 4%, color-mix(in srgb,var(--c) 30%,transparent), transparent 70%),
    linear-gradient(170deg,#14201d, #0d1a17 70%);
}
.on-hero .wrap{position:relative;z-index:2}
.on-hero h1{color:#fff;font-size:clamp(28px,4.3vw,47px);max-width:20ch}
.on-hero .lede{color:rgba(255,255,255,.87);max-width:60ch;margin-top:16px}
.on-top{display:grid;grid-template-columns:1fr 360px;gap:46px;align-items:center}
@media (max-width:960px){.on-top{grid-template-columns:1fr;gap:30px}}
.on-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:999px;
}
.on-tag img{width:22px;height:22px}
.on-tag span{font-size:12.5px;font-weight:700;color:#fff}
.on-acts{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 52px}
.on-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.on-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* the mosaic: real product icons settling into a block */
.on-mosaic{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;max-width:330px;margin-inline:auto}
.on-mosaic img{
  width:100%;height:auto;aspect-ratio:1;border-radius:10px;padding:6px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);
}
@media (prefers-reduced-motion:no-preference){
  .on-mosaic img{animation:onIn .5s ease both}
  .on-mosaic img:nth-child(n+2){animation-delay:calc((var(--i,0)) * 45ms)}
  @keyframes onIn{from{opacity:0;transform:scale(.86) translateY(6px)}to{opacity:1;transform:none}}
}

/* ---------- 2. the licence idea, as a stacked structure ---------- */
.on-model{padding:78px 0;background:var(--white)}
.mdl{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:32px}
@media (max-width:860px){.mdl{grid-template-columns:1fr}}
.mdl-col{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.mdl-col h3{font-size:17.5px;margin-bottom:6px}
.mdl-col > p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.stack{display:grid;gap:6px}
.stack i{
  display:block;height:30px;border-radius:6px;font-style:normal;
  font-size:12px;font-weight:700;line-height:30px;padding-inline:12px;
}
.mdl-sep .stack i{background:color-mix(in srgb,var(--line) 70%,#fff);color:var(--muted)}
.mdl-sep .stack i:nth-child(1){width:100%}
.mdl-sep .stack i:nth-child(2){width:82%}
.mdl-sep .stack i:nth-child(3){width:64%}
.mdl-sep .stack i:nth-child(4){width:47%}
.mdl-one{background:color-mix(in srgb,var(--c) 5%,#fff);border-color:color-mix(in srgb,var(--c) 26%,var(--line))}
.mdl-one .stack i{background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--ink);width:100%}
.mdl-note{margin-top:22px;font-size:13.5px;color:var(--muted);line-height:1.65;max-width:78ch}

/* ---------- 3. app explorer: pick a domain, see the apps ---------- */
.on-apps{padding:82px 0;background:var(--dark);color:#fff}
.on-apps h2{color:#fff}
.on-apps .lede{color:#b9c6c1;max-width:64ch}
.dom-row{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 26px}
.dom{
  font-family:var(--font);cursor:pointer;font-size:14px;font-weight:700;color:#c8d2ce;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:999px;padding:9px 18px;transition:background .16s,color .16s,border-color .16s;
}
.dom:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.dom[aria-selected="true"]{background:var(--dz);border-color:var(--dz);color:#fff}
.dom:nth-child(6n+1){--dz:var(--zoho-red)}
.dom:nth-child(6n+2){--dz:var(--zoho-green)}
.dom:nth-child(6n+3){--dz:var(--zoho-blue)}
.dom:nth-child(6n+4){--dz:var(--zoho-yellow)}
.dom:nth-child(6n+5){--dz:var(--zoho-red)}
.dom:nth-child(6n+6){--dz:var(--zoho-green)}
.app-wrap{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:26px 26px 22px;
}
.app-lead{font-size:15px;color:#e2eae7;line-height:1.7;max-width:72ch;margin-bottom:20px}
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.app{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  transition:border-color .16s,background .16s;
}
a.app:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.app img{width:28px;height:28px;border-radius:7px;background:#fff;padding:3px;flex:0 0 auto}
.app b{font-size:13.5px;font-weight:700;color:#fff}
a.app b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
a.app:hover b{text-decoration-color:#fff}
.app-count{margin-top:18px;font-size:12.5px;color:#8b9a94}
@media (prefers-reduced-motion:no-preference){
  .app-grid .app{animation:appIn .3s ease both}
  .app-grid .app:nth-child(2){animation-delay:.03s}
  .app-grid .app:nth-child(3){animation-delay:.06s}
  .app-grid .app:nth-child(4){animation-delay:.09s}
  .app-grid .app:nth-child(5){animation-delay:.12s}
  .app-grid .app:nth-child(6){animation-delay:.15s}
  @keyframes appIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ---------- 4. rollout ladder: the order that actually works ---------- */
.on-roll{padding:80px 0;background:var(--paper)}
.ladder{margin-top:32px;display:grid;gap:12px}
.rung{
  display:grid;grid-template-columns:74px 1fr;gap:22px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;transition:border-color .18s,transform .18s;
}
@media (max-width:640px){.rung{grid-template-columns:1fr;gap:10px}}
/* Not a link or button - no :hover lift on purpose, see site rule "nothing may look
   clickable unless it is." */
.rung-w{
  font-family:var(--font-display);font-size:12px;font-weight:800;color:#fff;
  background:var(--rz,var(--c));border-radius:8px;padding:7px 0;text-align:center;
}
.rung:nth-child(4n+1){--rz:var(--zoho-red)}
.rung:nth-child(4n+2){--rz:var(--zoho-green)}
.rung:nth-child(4n+3){--rz:var(--zoho-blue)}
.rung:nth-child(4n+4){--rz:var(--zoho-yellow)}
.rung h3{font-size:16.5px;margin-bottom:4px}
.rung p{font-size:14.5px;color:var(--muted);line-height:1.6}
.roll-warn{
  margin-top:24px;background:#fff7ea;border:1px solid #f0ddb0;border-radius:var(--radius);
  padding:20px 22px;font-size:14.5px;color:#6b4e12;line-height:1.7;max-width:80ch;
}
.roll-warn strong{display:block;margin-bottom:5px}

/* ---------- 5. when One is NOT the right answer ---------- */
.on-not{padding:78px 0;background:var(--white)}
.not-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;border-top:1px solid var(--line)}
@media (max-width:860px){.not-grid{grid-template-columns:1fr}}
.not{padding:24px 0;border-bottom:1px solid var(--line)}
.not-grid > .not:not(:nth-child(3n+1)){border-inline-start:1px solid var(--line);padding-inline-start:24px}
.not-grid > .not:not(:nth-child(3n)){padding-inline-end:24px}
@media (max-width:860px){
  .not-grid > .not{padding-inline:0!important;border-inline-start:0!important}
}
.not h3{font-size:16.5px;margin-bottom:6px;color:var(--ink)}
.not p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- 6. mid CTA: bordered plate, not CRM's band or Desk's bar ---------- */
.on-turn{padding:0 0 80px;background:var(--white)}
.on-turn-in{
  border:2px solid color-mix(in srgb,var(--c) 30%,var(--line));border-radius:calc(var(--radius) * 2);
  padding:32px 34px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
}
@media (max-width:760px){.on-turn-in{grid-template-columns:1fr}}
.on-turn-in h3{font-size:20px;margin-bottom:6px}
.on-turn-in p{font-size:15px;color:var(--muted);line-height:1.65;max-width:62ch}

/* ---------- 7. delivery: numbered inline list ---------- */
.on-deliver{padding:80px 0;background:var(--paper)}
.od{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}
@media (max-width:760px){.od{grid-template-columns:1fr}}
.od-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px}
.od-item h3{font-size:17px;margin-bottom:7px;display:flex;align-items:center;gap:10px}
.od-item h3 em{
  font-style:normal;font-family:var(--font-display);font-size:11.5px;font-weight:800;color:#fff;
  background:var(--oz,var(--c));border-radius:7px;padding:4px 8px;
}
.od-item:nth-child(4n+1){--oz:var(--zoho-red)}
.od-item:nth-child(4n+2){--oz:var(--zoho-green)}
.od-item:nth-child(4n+3){--oz:var(--zoho-blue)}
.od-item:nth-child(4n+4){--oz:var(--zoho-yellow)}
.od-item p{font-size:14.5px;color:var(--muted);line-height:1.65}

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

/* ---------- 9. closing: wide banner with the four colours as a base rule ---------- */
.on-close{padding:0 0 92px;background:var(--white)}
.onc{
  border-radius:calc(var(--radius) * 2);overflow:hidden;
  background:linear-gradient(150deg,#16211e,#0d1a17);
  border:1px solid rgba(255,255,255,.1);
}
.onc-body{padding:48px 46px 42px;max-width:760px}
@media (max-width:600px){.onc-body{padding:32px 24px}}
.onc h2{color:#fff;font-size:clamp(24px,3.3vw,33px);margin-bottom:12px;max-width:22ch}
.onc p{color:rgba(255,255,255,.85);font-size:15.5px;line-height:1.7;margin-bottom:24px}
.onc-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.onc-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)}
.onc-alt:hover{text-decoration-color:#fff}
.onc-rule{height:6px;background:linear-gradient(90deg,#E42527 0 25%,#089949 25% 50%,#226DB4 50% 75%,#F9B21D 75% 100%)}