/* Shared Google-inspired accents. ZepRank's own logo and readable type stay intact. */
:is(.marketing-home,.public-page,.panel-app,.access-page){
    --google-blue:#4285f4;
    --google-red:#ea4335;
    --google-yellow:#fbbc05;
    --google-green:#34a853;
    --google-action:#1a73e8;
    --google-blue-ink:#174ea6;
    --google-red-ink:#b3261e;
    --google-yellow-ink:#795800;
    --google-green-ink:#137333;
    --google-blue-soft:#e8f0fe;
    --google-red-soft:#fce8e6;
    --google-yellow-soft:#fef7e0;
    --google-green-soft:#e6f4ea;
    --google-spectrum:linear-gradient(90deg,var(--google-blue) 0 25%,var(--google-red) 25% 50%,var(--google-yellow) 50% 75%,var(--google-green) 75% 100%);
}
.theme-color-dots{display:inline-flex;align-items:center;gap:5px;margin-inline-end:11px;vertical-align:middle}
.theme-color-dots i{display:block;width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--google-blue)}
.theme-color-dots i:nth-child(2){background:var(--google-red)}
.theme-color-dots i:nth-child(3){background:var(--google-yellow)}
.theme-color-dots i:nth-child(4){background:var(--google-green)}

/* Shared website chrome, public pages and account access. */
:is(.marketing-home,.public-page) .public-site-header:before{background:var(--google-spectrum)}
:is(.marketing-home,.public-page) .public-site-header .header-shell{background-color:#fff;background-image:var(--google-spectrum);background-size:100% 3px;background-position:left top;background-repeat:no-repeat}
:is(.marketing-home,.public-page) .button-primary:not(:disabled):not([aria-disabled=true]),.access-page .access-submit:not(:disabled){background:var(--google-action);border-color:var(--google-action);color:#fff}
:is(.marketing-home,.public-page) .button-secondary{border-color:#c9daf9;color:var(--google-blue-ink);background:#fff}
:is(.marketing-home,.public-page) .public-site-header .desktop-nav a[aria-current=page]{color:var(--google-blue-ink);background:var(--google-blue-soft);border-radius:8px}
:is(.marketing-home,.public-page) .site-footer.footer-simple .footer-sheet{border-top:4px solid transparent;background:linear-gradient(#f7faff,#f7faff) padding-box,var(--google-spectrum) border-box}
.public-page .public-page-hero{background:radial-gradient(ellipse at 96% 15%,#e6f4ea 0,transparent 45%),radial-gradient(ellipse at 5% 95%,#e8f0fe 0,transparent 65%),#f8faff}
.public-page :is(.faq-topic-nav a,.blog-category-pills>a)[aria-current=page]{color:var(--google-blue-ink);background:var(--google-blue-soft);border-color:#b7cef5}
.public-page .contact-quick-links>a{border-top:3px solid var(--google-blue)}
.public-page .contact-quick-links>a:nth-child(2){border-top-color:var(--google-red)}
.public-page .contact-quick-links>a:nth-child(3){border-top-color:var(--google-green)}
.access-page .access-header{background-image:var(--google-spectrum);background-size:100% 3px;background-position:left top;background-repeat:no-repeat}
.access-page .access-form-wrap{border-top:4px solid transparent;padding-top:20px;background:linear-gradient(#fff,#fff) padding-box,var(--google-spectrum) border-box}

/* Homepage: calm surfaces with all four colors in useful, consistent places. */
.marketing-home .experience-hero{background:radial-gradient(ellipse at 100% 0,#e6f4ea 0,transparent 42%),radial-gradient(ellipse at 0 0,#e8f0fe 0,transparent 48%),radial-gradient(ellipse at 94% 100%,#fef7e0 0,transparent 36%),#fff}
.marketing-home .experience-hero-copy .eyebrow{color:var(--google-blue-ink)}
.marketing-home .experience-hero-copy h1 span{color:#1967d2}
.marketing-home .experience-demo{position:relative;border-color:#d4e0f3;box-shadow:0 20px 56px #174ea612,0 2px 8px #174ea606}
.marketing-home .experience-demo:before{content:'';position:absolute;top:-1px;left:24px;right:24px;height:4px;border-radius:0 0 5px 5px;background:var(--google-spectrum);pointer-events:none}
.marketing-home .experience-demo-draft{background:var(--google-blue-soft);border-color:#d0def8}
.marketing-home .experience-demo-draft>span,.marketing-home .experience-demo [data-demo-generate]{color:var(--google-blue-ink)}
.marketing-home .experience-demo .demo-stars button.is-filled{color:var(--google-yellow-ink);background:var(--google-yellow-soft);border-color:#edcc62}
.marketing-home .experience-feature{--feature-accent:var(--google-blue);--feature-ink:var(--google-blue-ink);--feature-surface:var(--google-blue-soft);border-top:3px solid var(--feature-accent)}
.marketing-home .experience-feature:nth-child(4n+2){--feature-accent:var(--google-red);--feature-ink:var(--google-red-ink);--feature-surface:var(--google-red-soft)}
.marketing-home .experience-feature:nth-child(4n+3){--feature-accent:var(--google-yellow);--feature-ink:var(--google-yellow-ink);--feature-surface:var(--google-yellow-soft)}
.marketing-home .experience-feature:nth-child(4n+4){--feature-accent:var(--google-green);--feature-ink:var(--google-green-ink);--feature-surface:var(--google-green-soft)}
.marketing-home .experience-feature .feature-icon{background:var(--feature-surface);color:var(--feature-ink);border-radius:14px}
.marketing-home .experience-steps li{--step-accent:var(--google-blue);--step-ink:var(--google-blue-ink);--step-surface:var(--google-blue-soft);border-top-color:var(--step-accent)}
.marketing-home .experience-steps li:nth-child(2){--step-accent:var(--google-red);--step-ink:var(--google-red-ink);--step-surface:var(--google-red-soft)}
.marketing-home .experience-steps li:nth-child(3){--step-accent:var(--google-yellow);--step-ink:var(--google-yellow-ink);--step-surface:var(--google-yellow-soft)}
.marketing-home .experience-steps li:nth-child(4){--step-accent:var(--google-green);--step-ink:var(--google-green-ink);--step-surface:var(--google-green-soft)}
.marketing-home .experience-step-number{background:var(--step-surface);color:var(--step-ink)}
.marketing-home .experience-guide-grid>a{border-top:3px solid var(--google-blue)}
.marketing-home .experience-guide-grid>a:nth-child(2){border-top-color:var(--google-green)}
.marketing-home .experience-guide-grid>a:nth-child(3){border-top-color:var(--google-yellow)}
.marketing-home .experience-cta-card{background:radial-gradient(ellipse at 100% 0,#e6f4ea 0,transparent 55%),radial-gradient(ellipse at 5% 100%,#fef7e0 0,transparent 50%),#edf4ff;border-color:#d1dff3}
.marketing-home .pricing-billing-control button[aria-pressed=true]{background:var(--google-action);color:#fff}

/* Both workspaces retain their existing dark theme and status meanings. */
.panel-app{--admin-blue:var(--google-blue-ink);--admin-blue-soft:var(--google-blue-soft);--admin-green:var(--google-green-ink);--admin-green-soft:var(--google-green-soft);--admin-red:var(--google-red-ink);--admin-red-soft:var(--google-red-soft);--admin-yellow:var(--google-yellow-ink);--admin-yellow-soft:var(--google-yellow-soft)}
.panel-app .admin-appbar{background-color:var(--admin-surface);background-image:var(--google-spectrum);background-position:left top;background-size:100% 3px;background-repeat:no-repeat}
.panel-app .btn-primary{background:var(--google-action);border-color:var(--google-action);color:#fff}
.panel-app :is(input[type=checkbox],input[type=radio]){accent-color:var(--google-action)}

/* Only compositor-friendly entrance motion; no hidden-content prerequisite. */
@media(prefers-reduced-motion:no-preference){
    :is(.marketing-home,.public-page) .button,.marketing-home .demo-stars button,.access-page .access-submit{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
    .marketing-home :is(.experience-feature,.experience-guide-grid>a){transition:box-shadow .22s ease,border-color .22s ease}
    .panel-app :is(.btn-primary,.btn-secondary,.admin-nav-link){transition:background-color .18s ease,border-color .18s ease,color .18s ease}
}
@media(hover:hover) and (pointer:fine){
    :is(.marketing-home,.public-page) .button-primary:not(:disabled):not([aria-disabled=true]):hover,.access-page .access-submit:not(:disabled):hover,.panel-app .btn-primary:not(:disabled):hover{background:#185abc;border-color:#185abc}
    :is(.marketing-home,.public-page) .button-secondary:hover{background:var(--google-blue-soft);border-color:#a8c7fa}
    .marketing-home :is(.experience-feature,.experience-guide-grid>a):hover{border-color:#a8c7fa;box-shadow:0 8px 24px #174ea60d}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    :is(.marketing-home,.public-page) .button:not(:disabled):not([aria-disabled=true]):hover,.access-page .access-submit:not(:disabled):hover{transform:translateY(-2px)}
    .marketing-home .demo-stars button:hover{transform:translateY(-2px)}
}
@media(prefers-reduced-motion:no-preference){
    :is(.marketing-home,.public-page) .button:not(:disabled):not([aria-disabled=true]):active,.marketing-home .demo-stars button:active{transform:scale(.98)}
}
@media(max-width:600px){
    .marketing-home .experience-hero{background:radial-gradient(ellipse at 100% 0,#e6f4ea 0,transparent 38%),radial-gradient(ellipse at 0 10%,#e8f0fe 0,transparent 50%),#fff}
    .marketing-home .experience-demo:before{left:18px;right:18px}
    .theme-color-dots{margin-inline-end:8px;gap:4px}.theme-color-dots i{width:6px;height:6px}
}
@media(prefers-reduced-motion:reduce){
    :is(.marketing-home,.public-page,.panel-app,.access-page) *, :is(.marketing-home,.public-page,.panel-app,.access-page) *:before, :is(.marketing-home,.public-page,.panel-app,.access-page) *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media(forced-colors:active){
    .theme-color-dots,.marketing-home .experience-demo:before{display:none}
    :is(.marketing-home,.public-page) .button,.panel-app .btn-primary,.access-page .access-submit{border:1px solid ButtonText}
}