/* ZYS Option 5 brand: transparent field, emerald-to-jade ZYS plus three progressively lighter mint slashes. */
/* Enlarged ZYS wordmark and secondary, smaller tagline (13 October 2026). */
/* Shared by the learning app, sign-in, demo, plans and account pages. */
.zys-logo{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;white-space:nowrap;line-height:1;background:transparent;color:#065f46;padding:0}
.brand .zys-wordmark,.zys-wordmark{display:inline-flex;align-items:baseline;font-family:"Bricolage Grotesque",Inter,Arial,system-ui,sans-serif;font-size:39px;font-weight:800;letter-spacing:-.065em;line-height:.96}
.brand .zys-wordmark>span,.zys-wordmark>span{display:inline-block;font-size:inherit;letter-spacing:inherit;line-height:inherit}
.zys-z{color:#065f46}
.zys-y{color:#188066}
.zys-s{color:#369679}
.zys-slash{padding-left:.07em}
.zys-slash-1{color:#a7f3d0}
.zys-slash-2{color:#c9f6df}
.zys-slash-3{color:#e1faed}
.brand .zys-tagline,.zys-tagline{display:block;color:#165544;font-family:Inter,Arial,system-ui,sans-serif;font-size:7px;line-height:1.2;font-weight:700;letter-spacing:.14em;margin-top:3px;white-space:nowrap}
#app-shell .brand{display:inline-flex;flex:none;align-items:center;gap:0;letter-spacing:normal;line-height:1;text-decoration:none}
#app-shell .brand .zys-wordmark{font-size:35px}
#app-shell .brand .zys-tagline{font-size:6px}
@media(min-width:901px){#app-shell .brand .zys-wordmark{font-size:41px}#app-shell .brand .zys-tagline{font-size:7px}}
@media(max-width:380px){#app-shell .top .brand{width:auto}#app-shell .brand .zys-wordmark{font-size:30px}#app-shell .brand .zys-tagline{font-size:6px;letter-spacing:.12em}}
/* The login welcome surface stays light so the transparent mark remains legible. */
.login-shell .welcome{background:#fff;color:#17382f;border-right:1px solid #e2ebe6}
.login-shell .welcome .brand{color:#065f46}
.login-shell .welcome .brand .zys-wordmark{font-size:52px}
.login-shell .welcome .brand .zys-tagline{font-size:7px}
.login-shell .welcome h1{color:#15362c}
.login-shell .welcome .eyebrow{color:#27735c}
.login-shell .welcome-copy>p:not(.eyebrow){color:#4d655b}
.login-shell .feature{color:#234439;border-top-color:#dfe9e3}
.login-shell .feature span{color:#237f62}
.login-shell .independent{color:#5f776a}
.login-shell .signin{background:#f5f8f7}
@media(max-width:760px){.login-shell .welcome{border-right:0;border-bottom:1px solid #e2ebe6;padding:20px 24px}.login-shell .welcome .brand .zys-wordmark{font-size:44px}}
/* Marketing and account pages use the same unmodified brand mark. */
body>header .brand .zys-wordmark{font-size:40px}
body>header .brand .zys-tagline{font-size:7px}
.account-brand-title{margin:0 0 14px}
.account-brand-title .zys-wordmark{font-size:50px}
.account-brand-title .zys-tagline{font-size:7px}
@media(max-width:520px){body>header .brand .zys-wordmark{font-size:34px}body>header .brand .zys-tagline{font-size:6px}}
/* Keep three slashes visible without crowding navigation on narrow handsets. */
@media(max-width:380px){body>header{flex-wrap:wrap}.account-brand-title .zys-wordmark{font-size:42px}}