/* Every route uses siteHeader() and footer(). Keep their layout independent of page content. */
#app{display:flex;flex-direction:column;min-height:100svh}
#app>main,#app>.workspace{width:100%}
#app>.branded-footer{margin-top:auto}
.workspace-header.site-header{display:block;width:100%;padding:0;min-height:0;background:var(--eq-surface);border-bottom:1px solid var(--eq-border);position:relative;z-index:20}
.site-header-inner{max-width:1240px;min-height:88px;margin:0 auto;padding:18px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .brand{font-size:22px;gap:10px;white-space:nowrap}
.site-header .brand small,.branded-footer .brand small{color:var(--eq-muted)}
.site-header .product-links{display:flex;align-items:center;gap:24px;flex-wrap:nowrap}
.site-header .workspace-nav-links{gap:24px}
.site-header .workspace-nav-links a:hover,.branded-footer a:hover{color:var(--eq-link)}
.site-header .workspace-nav-links a[aria-current=page]{color:var(--eq-link)}
.branded-footer{width:100%;background:var(--eq-surface);color:var(--eq-muted)}
.branded-footer .brand{font-size:22px;gap:10px;color:var(--eq-text)}
.branded-footer .footer-column>b,.branded-footer .footer-art>span{color:var(--eq-text)}
.footer-bottom>div{flex-wrap:wrap}

/* White cards remain readable in both themes. Their children inherit a light palette. */
:is(.benefit,.tool-card,.guide-card,.stack-item,.panel,.comparison-scroll,.tool-table,.stat,.mock-window,.settings-card,#auth-mount){
 --eq-bg:#f7f8f5;--eq-surface:#fff;--eq-soft:#f0f2e9;--eq-text:#191d17;--eq-muted:#62695b;--eq-border:#dce1d5;--eq-link:#4d6900;--eq-tint:#eef5d9;
 --ink:var(--eq-text);--paper:var(--eq-bg);--muted:var(--eq-muted);--line:var(--eq-border);
 color-scheme:light;color:var(--eq-text)
}
:is(.benefit,.tool-card,.guide-card,.stack-item,.panel,.comparison-scroll,.tool-table,.stat,.mock-window,.settings-card){background:#fff;border-color:#dce1d5}
.benefit,.tool-card,.guide-card,.stack-item,.stat{box-shadow:0 5px 20px #080e0808}
.benefit h3,.tool-card h3,.guide-card h3,.stack-item h3,.stat strong{color:#191d17}
.benefit:hover,.tool-card:hover,.guide-card:hover{border-color:#b9c799;box-shadow:0 12px 30px #080e0814}
.tool-card-top{background:transparent;padding:0;border-radius:0}
.tool-card-top .logo{mix-blend-mode:multiply}
.benefit-icon{background:#eff5dc;color:#4d6900}
.mock-window .logo{background:transparent;border:0}
.tool-card .tool-actions .capsule{color:#191d17;background:#f7f8f5;border-color:#dce1d5}
.tool-card .tool-actions .capsule[aria-pressed=true]{background:#e6ff32;border-color:#e6ff32}

/* Luminance filters turn source backgrounds transparent and preserve white wordmarks. */
.logo-filters{position:absolute;pointer-events:none}
.logo-carousel{background:#181d16;color:#fff;padding:28px 0 34px;isolation:isolate;overflow:hidden}
.logo-carousel-heading{max-width:1240px;margin:0 auto 20px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo-carousel-heading p{margin:0;color:#d0d7c6;font-size:10px;line-height:1.6;letter-spacing:1.5px}
.carousel-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 10px;border:1px solid #4a5342;border-radius:7px;background:transparent;color:#f3f6ed;font:inherit;font-size:11px;cursor:pointer}
.carousel-toggle:hover{border-color:#e6ff32;color:#e6ff32}
.logo-carousel-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.logo-carousel-track{display:flex;width:max-content;animation:logo-loop 42s linear infinite;will-change:transform}
.logo-carousel-group{display:flex;align-items:center;justify-content:space-around;gap:64px;padding-right:64px;min-width:100vw;flex:0 0 auto}
.logo-carousel-group>a{display:flex;align-items:center;justify-content:center;flex:0 0 164px;width:164px;height:64px;padding:0;background:transparent;border:0;border-radius:0}
.logo-carousel .logo{width:164px;height:56px;object-fit:contain;background:transparent;border:0;border-radius:0;padding:0;filter:url(#carousel-dark-ink);opacity:.9}
.logo-carousel [data-light-ink] .logo{filter:url(#carousel-light-ink)}
.logo-carousel .logo-fallback{color:#fff;filter:none;font-size:30px}
.logo-carousel-group>a:hover .logo{opacity:1}
.logo-carousel-track:hover,.logo-carousel.is-paused .logo-carousel-track,.logo-carousel-window:focus-within .logo-carousel-track{animation-play-state:paused}
.logo-carousel:has(.logo-carousel-window:focus-within) .logo-carousel-window{overflow-x:auto}
@keyframes logo-loop{to{transform:translateX(-50%)}}

@media(max-width:1050px){
 .site-header .workspace-nav-links{gap:15px}.site-header .product-links{gap:18px}
 .site-header-inner{padding-left:25px;padding-right:25px;gap:18px}
}
@media(max-width:760px){
 .site-header-inner{display:grid;grid-template-columns:1fr auto;gap:14px;padding:18px 20px;min-height:0}
 .site-header .product-links{display:contents}
 .site-header .workspace-nav-links{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;gap:16px;padding-top:12px;border-top:1px solid var(--eq-border)}
 .site-header .account-controls{grid-column:2;grid-row:1;gap:8px}
 .site-header .brand{font-size:18px;gap:8px}
 .site-header .brand-mark{width:34px;height:34px;padding:5px}
 .logo-carousel-heading{padding:0 23px;gap:15px;margin-bottom:18px}
 .logo-carousel-heading p{max-width:235px;font-size:9px}
 .logo-carousel{padding:24px 0 28px}
 .logo-carousel-group{gap:38px;padding-right:38px}
 .logo-carousel-group>a{flex-basis:126px;width:126px;height:55px}
 .logo-carousel .logo{width:126px;height:48px}
 .logo-carousel-track{animation-duration:36s}
}
@media(max-width:380px){
 .site-header-inner{padding-left:16px;padding-right:16px}
 .site-header .brand{font-size:15px;gap:6px}
 .site-header .brand-mark{width:29px;height:29px}
 .site-header .account-controls{gap:7px}
}
@media(prefers-reduced-motion:reduce){
 .logo-carousel-track{animation:none;transform:none;will-change:auto}
 .logo-carousel-window{overflow-x:auto;mask-image:none}
 .logo-carousel-group[aria-hidden=true],.carousel-toggle{display:none}
 .logo-carousel-group{padding:0 24px;gap:32px}
}