/* The stylesheets of a customer's page, in the layers and order template.html gives them. */
@layer family,site-instance;
@import url("../fonts.css") layer(family);
@import url("../styles.css") layer(family);
@import url("../themes.css") layer(family);
@import url("../artwork.css") layer(family);
@import url("../typography.css") layer(family);
@import url("../engagement.css?v=design-finish") layer(family);
@import url("../viewport.css") layer(family);
@import url("../design-finish.css?v=final1") layer(family);
@import url("../community.css?v=1") layer(family);
@import url("../visitor-character.css?v=persistent-chat2") layer(family);
@import url("../chat-composer.css?v=followups2") layer(family);
@import url("instance.css") layer(site-instance);

/* A customer's name can be any length. These stay out of the family's layers: a name that fits looks exactly as designed, and a longer one wraps inside its header or footer instead of running off the page. */
#website .site-header{min-width:0}
#website .wordmark{white-space:normal;overflow-wrap:anywhere;min-width:0;max-width:100%}
#website .site-header .wordmark{flex:0 1 auto}
@media (max-width:1100px){#website .site-header .wordmark{max-width:calc(100% - 78px)}}

/* The visitor's choice of language, which the service fills in beside the skip link. No family draws it, so it looks the same on every design. */
.site-languages{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px;padding:8px 16px 0;font-size:13px;line-height:1.4}
.site-languages a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.site-languages a[aria-current=page]{font-weight:600;text-decoration:none}