/* CATANA: one approved mark; tablet/mobile horizontal, desktop stacked.
   Only .brand-header is styled: the calculator does not have this class. */
.brand-header{--brand-size:32px;--brand-text:20px;position:relative}
.brand-lockup{display:flex;align-items:center;justify-content:center;gap:9px;width:fit-content;max-width:100%;margin:0 auto 20px;color:#fff;line-height:1}
.brand-mark{display:block;flex:none;width:var(--brand-size);height:auto;aspect-ratio:480/495;object-fit:contain}
.brand-wordmark{font-size:var(--brand-text);font-weight:800;letter-spacing:.025em;white-space:nowrap;line-height:1}
.brand-header.business-header,.brand-header.account-header,.brand-header.client-header{height:auto;min-height:0;padding-top:22px;padding-bottom:22px}
.brand-header>.account-menu{top:70px;right:16px}
.brand-header .header-back,.brand-header.transaction-header>[data-back]{position:absolute;top:18px;left:16px;width:36px;height:40px;margin:0;display:grid;place-items:center}
.brand-header .header-back .icon{width:20px;height:20px}
.brand-header.account-header>.account-menu,.brand-header.client-account-header>.account-menu,.brand-header.transaction-header>.account-menu{top:18px}
.brand-header.account-header>.brand-lockup,.brand-header.client-account-header>.brand-lockup,.brand-header.transaction-header>.brand-lockup{max-width:calc(100% - 88px)}
.brand-header.account-header .name-edit-row{padding-right:0}
.brand-header.client-account-header h1{padding-right:0}
.brand-header.account-header .header-action{bottom:22px}
.brand-header.transaction-header{display:block;padding:22px 20px 16px;min-height:0}
.brand-header.transaction-header .transaction-title{margin-top:18px;padding:0;line-height:1.5}
.brand-header.transaction-header>.brand-lockup{margin-bottom:0}
.success-screen .brand-header.transaction-header{min-height:0;padding-bottom:28px}
.brand-header.simple-header{padding:24px 20px;min-height:0}
.brand-header.simple-header>.brand-lockup{margin-bottom:0}
.brand-header.simple-header>.account-menu{top:18px}
.auth-screen .brand-header.auth-brand{padding:40px 22px 28px}
.auth-screen .brand-lockup{margin-bottom:0}
.brand-header.legal-header .brand-lockup{margin-bottom:18px}

/* Search and dots share a real grid row on phones and tablets. */
.brand-header.accounts-header{display:grid;grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"brand brand" "search menu" "summary summary";align-items:center;gap:18px 10px;height:auto;min-height:0;padding:22px 18px 24px}
.accounts-header>.brand-lockup{grid-area:brand;margin:0 auto}
.accounts-header>.search-form{grid-area:search;width:100%;max-width:none;margin:0;height:40px;min-width:0}
.accounts-header>.search-form input[type=search]{height:40px;min-height:40px;padding-right:42px;font-size:14px}
.accounts-header>.search-form button{top:0;right:4px;width:36px;height:40px}
.accounts-header>.account-menu{grid-area:menu;position:relative;top:auto;right:auto;align-self:center}
.accounts-header>.account-menu>summary{height:40px;width:40px}
.accounts-header>.accounts-summary{grid-area:summary;margin:0;padding:0;gap:16px;align-items:start}
.accounts-debt{min-width:0}.accounts-debt strong{overflow-wrap:anywhere}
.accounts-count{flex-shrink:0;min-width:52px}

@media(min-width:600px){
  .brand-header{--brand-size:38px;--brand-text:23px}
  .brand-header.business-header,.brand-header.account-header,.brand-header.client-header{padding-top:24px;padding-bottom:24px}
  .brand-header>.account-menu{top:82px;right:28px}
  .brand-header .header-back,.brand-header.transaction-header>[data-back]{left:28px;top:22px}
  .brand-header.account-header>.account-menu,.brand-header.client-account-header>.account-menu,.brand-header.transaction-header>.account-menu{top:22px;right:28px}
  .brand-header.accounts-header{padding:24px 32px;gap:22px 12px}
  .accounts-header>.account-menu{top:auto;right:auto}
  .brand-header.transaction-header{padding:24px 28px 18px}
}

/* 1024px tablets still use the horizontal composition. */
@media(min-width:1100px){
  .brand-header{--brand-size:58px;--brand-text:20px}
  .brand-lockup{flex-direction:column;gap:5px;margin-bottom:24px}
  .brand-header.accounts-header{grid-template-columns:minmax(190px,1fr) minmax(260px,2fr) minmax(90px,1fr);grid-template-areas:". brand menu" "debt search count";gap:24px 28px;padding:22px 40px 28px}
  .accounts-header>.brand-lockup{grid-area:brand}
  .accounts-header>.accounts-summary{display:contents}
  .accounts-header .accounts-debt{grid-area:debt;align-self:start}
  .accounts-header .accounts-count{grid-area:count;justify-self:end;align-self:start}
  .accounts-header>.search-form{align-self:start;margin-top:-4.5px;height:38px}
  .accounts-header>.search-form input[type=search]{height:38px;min-height:38px}
  .accounts-header>.search-form button{height:38px}
  .accounts-header>.account-menu{justify-self:end;align-self:center}
  .brand-header.client-overview-header{min-height:200px;padding-top:40px;padding-bottom:28px}
  .client-overview-header>.brand-lockup{position:absolute;left:50%;top:24px;transform:translateX(-50%);margin:0}
  .client-overview-header>.client-profile{max-width:calc(50% - 70px);padding-right:0}
  .client-overview-header>.account-menu{top:40px}
  .brand-header.business-header>.account-menu{top:30px}
  .brand-header.simple-header>.account-menu{top:30px}
  .brand-header.transaction-header{padding-top:24px}
}
@media print{.brand-mark{filter:brightness(0)}.brand-lockup{color:#212f3c}}