/* Zoho Apps Setup page additions: same tokens and components as the homepage */
.crumbs{font-size:.875rem; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:28px}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--faint)}
.z-hero h1{font-size:clamp(2.6rem, 6.4vw, 4.5rem); letter-spacing:-0.045em; line-height:1; font-weight:600}
.z-hero h1 .l2{display:block; color:var(--violet-ink)}

/* Department hub */
.hub-panel{margin:0; background:var(--console-bg); color:var(--console-ink); border-radius:var(--r-lg); border:1px solid var(--console-line); box-shadow:0 40px 80px -40px rgba(30,20,90,.55), 0 0 0 6px color-mix(in srgb, var(--violet) 7%, transparent); overflow:hidden; position:relative}
.hub-panel::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:radial-gradient(60% 40% at 85% 0%, rgba(66,214,207,.14), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(174,159,247,.12), transparent 70%)}
.hub-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--console-line); position:relative; z-index:1}
.hub-top .hint{font-size:.8125rem; color:var(--console-muted)}
@media (max-width:520px){ .hub-top .hint{display:none} }
.hub{position:relative; z-index:1; aspect-ratio:100/78; max-width:100%; margin:8px 12px 0}
.hub svg.lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.hub .spoke{stroke:var(--console-line); stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke}
.hub .link{stroke:var(--console-teal); stroke-width:1.75; fill:none; vector-effect:non-scaling-stroke; stroke-dasharray:4 5; opacity:0; transition:opacity .35s}
.hub .link.on{opacity:.85; animation:dash 1.2s linear infinite}
.hub .spoke.on{stroke:var(--console-violet)}
@keyframes dash{to{stroke-dashoffset:-18}}
.hub-core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; gap:4px; width:clamp(92px, 26%, 128px); aspect-ratio:1; border-radius:50%; background:#FFFFFF; box-shadow:0 0 0 8px rgba(174,159,247,.12), 0 0 0 1px var(--console-line); padding:14px}
.hub-core img{width:84%; height:auto}
.dept{position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:.8125rem; font-weight:600; color:var(--console-muted); background:var(--console-raised); border:1px solid var(--console-line); border-radius:999px; padding:7px 12px 7px 9px; cursor:pointer; white-space:nowrap; transition:color .2s, border-color .2s, background-color .2s, box-shadow .2s}
.dept .icon{width:16px; height:16px}
.dept:hover{color:var(--console-ink); border-color:var(--console-violet)}
.dept[aria-pressed="true"]{color:var(--console-ink); border-color:var(--console-teal); background:#1F2A45; box-shadow:0 0 0 4px rgba(66,214,207,.14)}
.dept[aria-pressed="true"] .icon{color:var(--console-teal)}
.hub-detail{position:relative; z-index:1; padding:6px 18px 20px; display:grid; gap:12px}
.hub-detail h3{font-size:1.125rem; letter-spacing:-0.02em}
.hub-apps{display:flex; flex-wrap:wrap; gap:6px}
.hub-apps span{font-family:var(--mono); font-size:.6875rem; padding:4px 9px; border-radius:999px; border:1px solid var(--console-line); color:var(--console-ink); background:var(--console-raised)}
.hub-flows{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.hub-flows li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; font-size:.875rem; color:var(--console-muted); line-height:1.45}
.hub-flows .icon{width:16px; height:16px; color:var(--console-teal); margin-top:2px}
.hub-foot{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--console-line); color:var(--console-muted)}
@media (max-width:420px){ .dept{font-size:.75rem; padding:6px 10px 6px 8px} .dept .icon{display:none} }
.hub-detail.swap{animation:fade .4s ease both}

/* App grid */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:40px}
.filters button{font:inherit; font-size:.875rem; font-weight:500; color:var(--muted); background:var(--raised); border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; transition:color .15s, border-color .15s, background-color .15s}
.filters button:hover{color:var(--ink); border-color:var(--line-strong)}
.filters button[aria-pressed="true"]{color:var(--btn-fg); background:var(--btn-bg); border-color:transparent}
.apps-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:24px}
@media (min-width:640px){ .apps-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1080px){ .apps-grid{grid-template-columns:repeat(4, minmax(0,1fr))} }
.app{display:flex; flex-direction:column; gap:14px; padding:22px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color .25s, box-shadow .25s, transform .25s, opacity .25s}
.app:hover{border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-2px)}
.app[hidden]{display:none}
.app-logo{height:64px; display:flex; align-items:center; padding:0 14px; background:#FFFFFF; border:1px solid var(--line); border-radius:12px}
.app-logo img{height:36px; width:auto; max-width:100%}
.app h3{font-size:1.125rem; letter-spacing:-0.02em}
.app p{color:var(--muted); font-size:.9375rem}
.app .dept-tag{margin-top:auto; align-self:flex-start; font-size:.75rem; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--violet-soft); color:var(--violet-ink)}
.app.featured{border-color:color-mix(in srgb, var(--violet) 35%, var(--line))}
.more-apps{margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px}
.more-apps .label{font-size:.9375rem; color:var(--muted); margin-right:4px}
.more-apps .plate-sm{height:44px; display:inline-flex; align-items:center; padding:0 12px; background:#FFFFFF; border:1px solid var(--line); border-radius:10px}
.more-apps .plate-sm img{height:24px; width:auto}

/* Methodology */
.method{margin-top:48px; display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.m-tabs{display:none}
.m-panel{padding:26px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:12px}
.m-panel .num{font-family:var(--mono); font-size:.8125rem; color:var(--teal-ink)}
.m-panel h3{font-size:1.375rem; letter-spacing:-0.03em}
.m-panel p{color:var(--muted); font-size:1.0625rem; max-width:40em}
.m-panel .covers{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.m-panel .covers span{font-size:.8125rem; font-weight:500; padding:5px 10px; border-radius:8px; background:var(--surface); border:1px solid var(--line)}
@media (min-width:960px){
  .method{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px; align-items:stretch}
  .m-tabs{display:grid; gap:4px; align-content:start; position:relative}
  .m-tab{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:center; width:100%; text-align:left; font:inherit; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:var(--r); padding:12px 14px; cursor:pointer; transition:background-color .2s, border-color .2s, color .2s}
  .m-tab .n{font-family:var(--mono); font-size:.8125rem; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--muted); transition:background-color .2s, color .2s, border-color .2s}
  .m-tab b{font-weight:600; font-size:1rem; letter-spacing:-0.01em}
  .m-tab:hover{background:var(--surface); color:var(--ink)}
  .m-tab[aria-selected="true"]{background:var(--raised); border-color:var(--line); box-shadow:var(--shadow); color:var(--ink)}
  .m-tab[aria-selected="true"] .n{background:var(--btn-bg); color:var(--btn-fg); border-color:transparent}
  .m-panel{padding:44px; align-content:start}
  .m-panel h3{font-size:2rem}
  .m-panel:not(.on){display:none}
  .m-panel.on{animation:fade .4s ease both}
  .m-progress{height:4px; border-radius:4px; background:var(--surface); overflow:hidden; margin-top:auto}
  .m-progress i{display:block; height:100%; width:var(--p, 16%); background:linear-gradient(90deg, var(--violet), var(--teal)); border-radius:4px; transition:width .45s cubic-bezier(.4,.1,.2,1)}
}
@media (max-width:959px){ .m-progress{display:none} }

/* Integrations */
.integrations{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:760px){ .integrations{grid-template-columns:repeat(2, minmax(0,1fr))} }
.int{display:grid; gap:14px; padding:26px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg)}
.int-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.int h3{font-size:1.25rem; letter-spacing:-0.025em}
.int p{color:var(--muted); font-size:.9688rem}
.int .link-more{font-size:.9375rem; font-weight:600; color:var(--violet-ink); text-decoration:none; display:inline-flex; gap:8px; align-items:center}
.int .link-more .icon{width:16px; height:16px}

/* Training + support */
.care-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:900px){ .care-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
.care{padding:28px; border-radius:var(--r-lg); background:var(--raised); border:1px solid var(--line); display:grid; gap:12px; align-content:start}
.care h3{font-size:1.25rem; letter-spacing:-0.025em}
.care p{color:var(--muted); font-size:.9688rem}
.care.why{background:var(--deep); color:var(--deep-ink); border-color:var(--deep-line)}
.care.why ul{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:10px}
.care.why li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:.9688rem}
.care.why .icon{width:18px; height:18px; color:#42D6CF; margin-top:2px}

/* Quotes (two-up) */
.zq-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:900px){ .zq-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
.zq{margin:0; padding:32px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:24px; align-content:space-between}
.zq blockquote{margin:0; font-size:clamp(1.125rem, 1.8vw, 1.375rem); line-height:1.4; letter-spacing:-0.02em; font-weight:500}
.zq blockquote::before{content:"\201C"; display:block; font-size:3.25rem; line-height:.6; height:.42em; color:var(--teal); font-weight:600; margin-bottom:10px}
.zq figcaption{display:flex; align-items:center; gap:14px}

/* FAQ */
.faq{margin-top:40px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font-size:1.125rem; font-weight:600; letter-spacing:-0.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); transition:transform .25s, background-color .2s}
.faq details[open] summary .pm{transform:rotate(45deg); background:var(--surface)}
.faq details p{color:var(--muted); padding:0 0 22px; max-width:46em}
.faq-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:24px}
@media (min-width:960px){ .faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:64px} .faq{margin-top:0} }
.news-note{font-size:.8125rem; color:var(--muted); margin-top:2px}
.cta-panel.slim{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){ .cta-panel.slim{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end} }