/* ============================================================================
   Page-specific design system: /products/zoho-creator/
   Shares no section structure with the nine pages before it. Flow traverses a
   node graph; Creator transforms a spreadsheet into an application, and its
   interactive piece is a verdict tool that can answer "do not build".

   Base colour: --product-accent (#1878c0, sampled from the Creator icon).
   Site-wide bans hold: no arrows, no line beside headings, no bar atop cards.
   ============================================================================ */

.cr-page{--c:var(--product-accent,#1878c0)}

/* ---------- 1. hero ---------- */
.cr-hero{
  position:relative;overflow:hidden;padding:56px 0 0;border-top:10px solid var(--c);
  background:
    radial-gradient(800px 300px at 20% 0%, color-mix(in srgb,var(--c) 28%,transparent), transparent 68%),
    linear-gradient(195deg,#15202a,#0d1a17 66%);
}
.cr-hero .wrap{position:relative;z-index:2}
.cr-hero h1{color:#fff;font-size:clamp(28px,4.2vw,46px);max-width:21ch}
.cr-hero .lede{color:rgba(255,255,255,.87);max-width:60ch;margin-top:16px}
.cr-top{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center}
@media (max-width:940px){.cr-top{grid-template-columns:1fr;gap:28px}}
.cr-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:7px}
.cr-tag img{width:22px;height:22px}
.cr-tag span{font-size:12.5px;font-weight:700;color:#fff}
.cr-acts{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 52px}
.cr-hero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.cr-hero .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.cr-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:260px;margin-inline:auto}
.cr-blocks i{display:block;aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15)}
.cr-blocks i:nth-child(2){background:color-mix(in srgb,var(--zoho-red) 45%,transparent)}
.cr-blocks i:nth-child(4){background:color-mix(in srgb,var(--zoho-green) 45%,transparent)}
.cr-blocks i:nth-child(6){background:color-mix(in srgb,var(--zoho-blue) 50%,transparent)}
.cr-blocks i:nth-child(8){background:color-mix(in srgb,var(--zoho-yellow) 45%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .cr-blocks i{animation:crIn .45s ease both}
  .cr-blocks i:nth-child(n+2){animation-delay:calc((var(--i,0)) * 55ms)}
  @keyframes crIn{from{opacity:0;transform:scale(.75) rotate(-6deg)}}
}

/* ---------- 2. THE animated moment: sheet becomes an app ---------- */
.cr-morph{padding:82px 0;background:var(--white)}
.mp{
  margin-top:30px;border:1px solid var(--line);border-radius:calc(var(--radius) * 2);
  background:var(--paper);padding:28px 30px 24px;
}
@media (max-width:600px){.mp{padding:20px 16px}}
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.mp-play{font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;color:#fff;
  background:var(--c);border:1px solid var(--c);border-radius:999px;padding:9px 20px;transition:opacity .16s}
.mp-play:hover{opacity:.88}
.mp-stage{font-size:13.5px;font-weight:700;color:var(--muted)}
.mp-body{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:800px){.mp-body{grid-template-columns:1fr}}
.mp-side{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.mp-side h3{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
/* the sheet */
.sheet{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.sheet i{display:block;height:22px;border-radius:3px;background:color-mix(in srgb,var(--line) 60%,#fff);
  font-style:normal;font-size:10px;color:var(--muted);display:flex;align-items:center;
  justify-content:center;transition:background .4s ease,opacity .4s ease}
.sheet i.hdr{background:color-mix(in srgb,var(--line) 90%,#fff);font-weight:800;color:var(--ink)}
.sheet i.bad{background:color-mix(in srgb,var(--zoho-red) 18%,#fff);color:var(--zoho-red);font-weight:700}
.sheet.fading i{opacity:.25}
/* the app */
.app-form{display:grid;gap:9px}
.af{border:1px solid var(--line);border-radius:6px;padding:9px 11px;background:var(--white);
  opacity:.25;transition:opacity .4s ease,border-color .4s ease,background .4s ease}
.af.on{opacity:1;border-color:var(--afz,var(--c));background:color-mix(in srgb,var(--afz,var(--c)) 6%,#fff)}
.af:nth-child(4n+1){--afz:var(--zoho-red)}
.af:nth-child(4n+2){--afz:var(--zoho-green)}
.af:nth-child(4n+3){--afz:var(--zoho-blue)}
.af:nth-child(4n+4){--afz:var(--zoho-yellow)}
.af b{display:block;font-size:11.5px;font-weight:800;color:var(--muted);margin-bottom:3px}
.af span{font-size:13px;color:var(--ink)}
.mp-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);line-height:1.65}
.mp-foot strong{color:var(--ink)}

/* ---------- 3. THE interactive: build or do not build ---------- */
.cr-verdict{padding:80px 0;background:var(--dark);color:#fff}
.cr-verdict h2{color:#fff}
.cr-verdict .lede{color:#b9c6c1;max-width:66ch}
.vq{display:grid;gap:14px;margin-top:30px}
.vq-row{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:20px 22px}
.vq-row p{font-size:15px;color:#fff;font-weight:700;margin-bottom:12px}
.vq-opts{display:flex;gap:9px;flex-wrap:wrap}
.vq-opts button{
  font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;color:#c8d2ce;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:8px 17px;transition:background .16s,color .16s,border-color .16s;
}
.vq-opts button:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.vq-opts button[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.verdict{
  margin-top:22px;border-radius:calc(var(--radius) * 1.5);padding:26px 28px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  transition:background .3s ease,border-color .3s ease;
}
.verdict[data-v="build"]{background:color-mix(in srgb,var(--zoho-green) 15%,transparent);
  border-color:color-mix(in srgb,var(--zoho-green) 50%,transparent)}
.verdict[data-v="maybe"]{background:color-mix(in srgb,var(--zoho-yellow) 15%,transparent);
  border-color:color-mix(in srgb,var(--zoho-yellow) 50%,transparent)}
.verdict[data-v="dont"]{background:color-mix(in srgb,var(--zoho-red) 14%,transparent);
  border-color:color-mix(in srgb,var(--zoho-red) 45%,transparent)}
.verdict h3{color:#fff;font-size:20px;margin-bottom:8px}
.verdict p{font-size:15px;color:#e2eae7;line-height:1.7;max-width:66ch}
.v-note{margin-top:20px;font-size:13.5px;color:#8b9a94;line-height:1.65;max-width:76ch}

/* ---------- 4. what actually gets built ---------- */
.cr-built{padding:78px 0;background:var(--white)}
.bt{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
@media (max-width:800px){.bt{grid-template-columns:1fr}}
.bt-i{border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px;
  transition:border-color .18s,transform .18s}
.bt-i:hover{border-color:var(--bz,var(--c));transform:translateY(-2px)}
.bt-i:nth-child(4n+1){--bz:var(--zoho-red)}
.bt-i:nth-child(4n+2){--bz:var(--zoho-green)}
.bt-i:nth-child(4n+3){--bz:var(--zoho-blue)}
.bt-i:nth-child(4n+4){--bz:var(--zoho-yellow)}
.bt-i em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--bz,var(--c));margin-bottom:8px}
.bt-i h3{font-size:17px;margin-bottom:7px}
.bt-i p{font-size:14.5px;color:var(--muted);line-height:1.65}

/* ---------- 5. cost of ownership ---------- */
.cr-own{padding:78px 0;background:var(--paper)}
.ow{margin-top:28px;border-top:1px solid var(--line)}
.ow-r{display:grid;grid-template-columns:200px 1fr;gap:26px;padding:22px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
@media (max-width:760px){.ow-r{grid-template-columns:1fr;gap:6px}}
.ow-t{font-size:16px;font-weight:800;color:var(--ink)}
.ow-d{font-size:14.5px;color:var(--muted);line-height:1.65}
.ow-d b{color:var(--ink)}
.ow-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}
.ow-warn strong{display:block;margin-bottom:5px}

/* ---------- 6. mid CTA ---------- */
.cr-turn{padding:0 0 78px;background:var(--paper)}
.cr-turn-in{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  background:var(--white);border:2px solid color-mix(in srgb,var(--c) 26%,var(--line));
  border-radius:calc(var(--radius) * 2);padding:30px 32px}
@media (max-width:760px){.cr-turn-in{grid-template-columns:1fr;padding:24px 20px}}
.cr-turn-in h3{font-size:20px;margin-bottom:6px}
.cr-turn-in p{font-size:15px;color:var(--muted);line-height:1.65;max-width:62ch}

/* ---------- 7. delivery ---------- */
.cr-deliver{padding:80px 0;background:var(--white)}
.cdv{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:960px){.cdv{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cdv{grid-template-columns:1fr}}
.cdv-i{border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px}
.cdv-i em{display:block;font-style:normal;font-family:var(--font-display);font-size:11.5px;
  font-weight:800;letter-spacing:.05em;color:var(--cz,var(--c));margin-bottom:8px}
.cdv-i:nth-child(1){--cz:var(--zoho-red)}
.cdv-i:nth-child(2){--cz:var(--zoho-green)}
.cdv-i:nth-child(3){--cz:var(--zoho-blue)}
.cdv-i:nth-child(4){--cz:var(--zoho-yellow)}
.cdv-i h3{font-size:16px;margin-bottom:6px}
.cdv-i p{font-size:14px;color:var(--muted);line-height:1.6}

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

/* ---------- 9. closing ---------- */
.cr-close{padding:0 0 92px;background:var(--paper)}
.crc{border-radius:calc(var(--radius) * 2);overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 76%,#0d1a17),#111c22);
  display:grid;grid-template-columns:1fr 210px}
@media (max-width:820px){.crc{grid-template-columns:1fr}}
.crc-body{padding:46px 44px 42px}
@media (max-width:600px){.crc-body{padding:32px 24px}}
.crc h2{color:#fff;font-size:clamp(23px,3.2vw,32px);margin-bottom:12px;max-width:22ch}
.crc p{color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.7;max-width:56ch;margin-bottom:24px}
.crc-btns{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.crc-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)}
.crc-alt:hover{text-decoration-color:#fff}
.crc-side{background:rgba(255,255,255,.06);border-inline-start:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:repeat(2,1fr);gap:9px;align-content:center;padding:34px 26px}
@media (max-width:820px){.crc-side{display:none}}
.crc-side i{display:block;aspect-ratio:1;border-radius:9px;background:rgba(255,255,255,.14)}
.crc-side i:nth-child(1){background:color-mix(in srgb,var(--zoho-red) 60%,transparent)}
.crc-side i:nth-child(2){background:color-mix(in srgb,var(--zoho-green) 60%,transparent)}
.crc-side i:nth-child(3){background:color-mix(in srgb,var(--zoho-blue) 60%,transparent)}
.crc-side i:nth-child(4){background:color-mix(in srgb,var(--zoho-yellow) 60%,transparent)}