#mobile-menu-toggle{display:none}header{position:relative}

@media(max-width:650px){

header .nav{flex-wrap:nowrap;padding:12px;gap:8px}

header .brand{font-size:20px;gap:6px;white-space:nowrap}header .brand img{width:26px;height:26px}

header .preferences{margin-left:auto;gap:2px}header .preferences .preference-toggle{min-width:40px;padding:8px 4px}header .preference-chevron{display:none}

#mobile-menu-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;order:4;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:50%;background:var(--soft);color:var(--blue)}

#mobile-menu-toggle svg{width:24px;height:24px}#mobile-menu-toggle .menu-close{display:none}#mobile-menu-toggle[aria-expanded=true] .menu-bars{display:none}#mobile-menu-toggle[aria-expanded=true] .menu-close{display:block}

header .nav #main-navigation{display:none;position:absolute;top:100%;left:0;right:0;width:100%;margin:0;padding:8px 12px;z-index:40;flex-direction:column;gap:4px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 20px #0002}

header .nav #main-navigation.mobile-open{display:flex}#main-navigation a{display:flex;align-items:center;min-height:56px;padding:12px 16px;border-radius:16px;font-size:17px;background:var(--soft)}#main-navigation [hidden]{display:none!important}

html[data-theme=dark] header .nav #main-navigation{background:#1a2331}

}



@media(max-width:650px){header .nav #main-navigation{align-items:stretch}header .nav #main-navigation a{width:100%;max-width:none;box-sizing:border-box;flex-shrink:0;justify-content:flex-start}}



body[data-mode=account] .btn,body[data-mode=account] button:not(.preference-toggle):not([role=option]){border-radius:24px}

body[data-mode=account] .usage-tabs{display:flex;flex-wrap:wrap;gap:8px;overflow:visible;max-width:none;padding:0;margin:24px 0}

body[data-mode=account] .usage-tabs [role=tab]{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:10px 16px;font-size:14px;border-radius:24px}

body[data-mode=account] .usage-tabs [role=tab][aria-selected=true]{background:var(--blue);color:white}

body[data-mode=account] .info{border-radius:20px}

#main-navigation [hidden]{display:none!important}

@media(min-width:651px){body[data-mode=account] header .nav{flex-wrap:nowrap}body[data-mode=account] header #main-navigation{display:flex;flex:initial;flex-direction:row;padding:0;border:0;order:initial}body[data-mode=account] header #main-navigation a{width:auto}}

@media(max-width:650px){body[data-mode=account] header .nav{flex-wrap:nowrap;gap:8px}body[data-mode=account] header .preferences{order:initial}body[data-mode=account] header #main-navigation{padding:8px 12px;gap:4px}body[data-mode=account] header #main-navigation a{min-height:56px;border-radius:16px;font-size:17px;padding:12px 16px}body[data-mode=account] .usage-tabs [role=tab]{font-size:13px;padding:10px 14px}}

@media(max-width:360px){header .brand{font-size:18px;gap:4px}}


.hero h1{hyphens:none;-webkit-hyphens:none;word-break:normal}

/* Give the invoice generator heading and subtitle the full content width. */
.invoice-generator-hero h1,.invoice-generator-hero .lead{max-width:none;width:100%}
.invoice-generator-hero h1 span{display:inline}
@media(min-width:1024px){.invoice-generator-hero h1{font-size:clamp(32px,3.1vw,44px);line-height:1.2}.invoice-generator-hero .lead{font-size:clamp(13px,1.1vw,15.5px);line-height:1.7}}