/* One wordmark and the homepage's rotating Z on every public page. */
body .site-brand.site-brand.site-brand{
  display:inline-flex;align-items:center;flex:none;gap:10px;width:max-content;
  margin:0;padding:0;border:0;background:transparent;box-shadow:none;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;font-weight:800;line-height:normal;letter-spacing:-.03em;
  color:#14151a;text-decoration:none;white-space:nowrap;cursor:pointer;
}
body .site-brand.site-brand.site-brand .logo{
  display:grid;place-items:center;flex:none;width:34px;height:34px;
  border-radius:11px;font:inherit;font-size:16px;color:#fff;
  background:linear-gradient(180deg,#111827 0%,#0f172a 100%);
  box-shadow:0 8px 20px rgba(17,24,39,.18);
  transform-origin:center;transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
body .site-brand.site-brand.site-brand:is(:hover,:focus-visible) .logo{transform:rotate(360deg) scale(1.08)}
body .site-brand.site-brand.site-brand:is(:link,:visited,:hover,:active,:focus){color:#14151a;text-decoration:none}
body .site-brand.site-brand.site-brand:focus-visible{outline:3px solid #187c68;outline-offset:5px;border-radius:4px}

/* Follow the homepage shell, including its existing desktop breakpoints. */
:root{--site-brand-inset:max(44px,calc((100vw - 1440px)/2 + 20px))}
@media(min-width:761px){body .site-brand.site-brand.site-brand{font-size:1.05rem}}
@media(max-width:900px){:root{--site-brand-inset:40px}}
@media(max-width:820px){:root{--site-brand-inset:32px}}
@media(max-width:760px){:root{--site-brand-inset:16px}}
@media(max-width:560px){:root{--site-brand-inset:14px}}
body:is(.legal-page,.how-page) :is(.legal-nav-inner,.how-nav-inner){width:calc(100% - 2 * var(--site-brand-inset));min-height:70px}
body :is(.guide-nav,.seo-nav){
  width:calc(100vw - 2 * var(--site-brand-inset));
  margin-left:calc((100% - 100vw)/2 + var(--site-brand-inset));
  gap:20px;min-height:34px;
}
body.guide-page .guide-shell{padding-top:18px}
body .seo-page{padding-top:18px}
body:not(.create-page) .topbar{
  width:calc(100vw - 2 * var(--site-brand-inset));
  margin-left:calc((100% - 100vw)/2 + var(--site-brand-inset));
}
body:not(.create-page) .shell{padding-top:18px}
body .live-head{width:calc(100vw - 2 * var(--site-brand-inset));margin-inline:auto;align-items:flex-start}
body .live-brand.site-brand{margin-bottom:12px}

@media(max-width:900px){
  body:is(.legal-page,.how-page) :is(.legal-nav-inner,.how-nav-inner){width:calc(100% - 2 * var(--site-brand-inset));min-height:66px}
  body :is(.guide-nav,.seo-nav),body:not(.create-page) .topbar{
    width:calc(100vw - 2 * var(--site-brand-inset));margin-left:calc((100% - 100vw)/2 + var(--site-brand-inset));
  }
  body.guide-page .guide-shell,body .seo-page,body:not(.create-page) .shell{padding-top:16px}
  body .live-shell{padding-top:16px;padding-inline:16px}
}
@media(max-width:560px){
  body .site-brand.site-brand.site-brand{font-size:15px;gap:9px}
  body .site-brand.site-brand.site-brand .logo{width:32px;height:32px;border-radius:10px;font-size:15px}
  body:is(.legal-page,.how-page) :is(.legal-nav-inner,.how-nav-inner){width:calc(100% - 2 * var(--site-brand-inset));min-height:60px}
  body :is(.guide-nav,.seo-nav),body:not(.create-page) .topbar{
    width:calc(100vw - 2 * var(--site-brand-inset));margin-left:calc((100% - 100vw)/2 + var(--site-brand-inset));
  }
  body :is(.guide-nav,.seo-nav){flex-wrap:wrap;min-height:32px}
  body.guide-page .guide-shell,body .seo-page,body:not(.create-page) .shell{padding-top:14px}
  body .live-shell{padding-top:14px;padding-inline:14px}
}
@media(prefers-reduced-motion:reduce){
  body .site-brand.site-brand.site-brand .logo{transition:none}
  body .site-brand.site-brand.site-brand:is(:hover,:focus-visible) .logo{transform:none}
}

/* Long translations remain readable beside the wordmark on narrow screens. */
@media(max-width:480px){
 body:is(.how-page,.legal-page) :is(.how-nav,.legal-nav) nav .header-create-link{max-width:46vw;white-space:normal;line-height:1.35;text-align:right}
}