/* Shared wordmark: paired pebbles and a larger, tightly set name. */
.brand,.receiving-brand{--brand-accent:#28795e;display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-width:0}
.brand .brand-wordmark,.receiving-brand .brand-wordmark{display:inline-block;white-space:nowrap;font-family:"Aptos","Segoe UI",ui-sans-serif,sans-serif;font-size:29px;font-weight:750;line-height:1.12;letter-spacing:-1.3px;color:inherit}
.brand-wordmark .brand-sync{color:var(--brand-accent);font-weight:550;letter-spacing:-1.5px}
.brand .brand-symbol,.receiving-brand .brand-symbol{display:block;position:relative;width:25px;height:27px;flex:0 0 25px}
.brand-symbol i{position:absolute;width:14px;height:19px;border:2px solid currentColor;border-radius:9px 7px 9px 6px;transform:rotate(28deg);left:0;top:0}
.brand-symbol i+i{left:9px;top:8px;border-color:var(--brand-accent);background:var(--brand-accent);border-radius:7px 9px 6px 9px}
.topbar .brand,.receiving-topbar .receiving-brand{--brand-accent:#c9e8a2}
.map-home .topbar .brand,#hb-map-header .brand{--brand-accent:#28795e;color:#183e35}
.dispatch-shell .topbar .brand{gap:7px;flex-shrink:1}
.dispatch-shell .topbar .brand-wordmark{font-size:26px}
.dispatch-shell .topbar{gap:8px}
.dispatch-shell .header-actions{flex-shrink:0;gap:5px}
.login-shell .brand-wordmark{font-size:36px}
@media(max-width:600px){
  .brand .brand-wordmark,.receiving-brand .brand-wordmark{font-size:26px}
  .dispatch-shell .topbar .brand-wordmark{font-size:clamp(21px,6vw,25px);letter-spacing:-1px}
  .dispatch-shell .topbar .brand-sync{letter-spacing:-1.1px}
  .dispatch-shell .brand .brand-symbol{width:21px;height:25px;flex-basis:21px}
  .dispatch-shell .brand-symbol i{width:12px;height:17px}
  .dispatch-shell .brand-symbol i+i{left:8px;top:7px}
  .login-shell .brand-wordmark{font-size:32px}
}
@media(max-width:350px){
  .dispatch-shell .topbar .brand{gap:5px}
  .dispatch-shell .header-actions{gap:2px}
  .dispatch-shell .header-actions .notification-toggle{padding-inline:7px}
}

/* Brushed green metal with a slow, narrow reflection across the whole name. */
.brand,.receiving-brand{--metal-dark:#163e34;--metal-mid:#497466;--metal-light:#8fa89d;--metal-glint:rgba(232,247,239,.88)}
.topbar .brand,.receiving-topbar .receiving-brand{--metal-dark:#9cb5a2;--metal-mid:#d0dfc8;--metal-light:#f3f8e9;--metal-glint:rgba(255,255,255,.96)}
.map-home .topbar .brand,#hb-map-header .brand{--metal-dark:#163e34;--metal-mid:#497466;--metal-light:#8fa89d;--metal-glint:rgba(232,247,239,.88)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .brand .brand-wordmark,.receiving-brand .brand-wordmark{
  background-image:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.08) 46%,var(--metal-glint) 49%,rgba(255,255,255,.12) 52%,transparent 56%),linear-gradient(180deg,var(--metal-dark) 0%,var(--metal-mid) 28%,var(--metal-light) 44%,var(--metal-dark) 51%,var(--metal-mid) 76%,var(--metal-dark) 100%);
  background-size:260% 100%,100% 100%;background-position:130% 0,0 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:pebblesync-reflection 6s ease-in-out infinite;
 }
 .brand-wordmark .brand-sync{-webkit-text-fill-color:transparent}
}
@keyframes pebblesync-reflection{
 0%,12%{background-position:130% 0,0 0}
 48%,100%{background-position:-130% 0,0 0}
}
@media(prefers-reduced-motion:reduce){
 .brand .brand-wordmark,.receiving-brand .brand-wordmark{animation:none;background-position:130% 0,0 0}
}
@media(forced-colors:active){
 .brand .brand-wordmark,.receiving-brand .brand-wordmark{animation:none;background:none;-webkit-text-fill-color:currentColor}
 .brand-wordmark .brand-sync{-webkit-text-fill-color:currentColor}
}

/* Polished pebble edges: rounded glints travel separately, unlike the text sweep. */
.brand-symbol i{border-color:var(--metal-dark);box-shadow:inset 1px 1px 1px var(--metal-light),0 1px 1px #163e3426}
.brand-symbol i+i{border-color:var(--metal-mid);background:radial-gradient(ellipse at 24% 18%,var(--metal-light),var(--metal-mid) 35%,var(--metal-dark) 76%);box-shadow:inset 1px 1px 1px var(--metal-glint),inset -1px -1px 2px #123c3466,0 1px 2px #163e3433}
.brand-symbol i::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at center,var(--metal-glint) 0%,var(--metal-glint) 8%,transparent 38%);background-repeat:no-repeat;background-size:160% 160%;background-position:160% 150%;opacity:0;animation:pebblesync-pebble-glint 7s ease-in-out infinite}
.brand-symbol i:first-child::after{padding:2px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.brand-symbol i+i::after{inset:0;animation-delay:1.1s;animation-direction:reverse}
@keyframes pebblesync-pebble-glint{
 0%,12%{background-position:160% 150%;opacity:0}
 24%{opacity:.9}
 40%{background-position:-100% -100%;opacity:0}
 100%{background-position:-100% -100%;opacity:0}
}
@media(prefers-reduced-motion:reduce){.brand-symbol i::after{animation:none;opacity:0}}
@media(forced-colors:active){.brand-symbol i{border-color:currentColor;box-shadow:none}.brand-symbol i+i{background:currentColor;border-color:currentColor;box-shadow:none}.brand-symbol i::after{display:none;animation:none}}

/* Original racing wordmark; the real text remains its accessible name. */
@supports ((mask-image:url("/pebblesync-race-wordmark.svg")) or (-webkit-mask-image:url("/pebblesync-race-wordmark.svg"))){
 .brand .brand-wordmark,.receiving-brand .brand-wordmark{position:relative;width:6.5em;height:1em;flex-shrink:0;overflow:hidden;background:none;animation:none;color:transparent;-webkit-text-fill-color:transparent;line-height:1}
 .brand .brand-wordmark::before,.receiving-brand .brand-wordmark::before{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:url("/pebblesync-race-wordmark.svg") center/contain no-repeat;mask:url("/pebblesync-race-wordmark.svg") center/contain no-repeat;background-image:linear-gradient(110deg,transparent 42%,var(--metal-glint) 49%,transparent 56%),linear-gradient(180deg,var(--metal-mid),var(--metal-dark) 48%,var(--metal-mid) 53%,var(--metal-dark));background-size:260% 100%,100% 100%;background-position:130% 0,0 0;background-repeat:no-repeat;animation:pebblesync-reflection 7s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){.brand .brand-wordmark::before,.receiving-brand .brand-wordmark::before{animation:none}}
@media(forced-colors:active){.brand .brand-wordmark::before,.receiving-brand .brand-wordmark::before{animation:none;background:CanvasText}}
@media(max-width:350px){.dispatch-shell .topbar .brand-wordmark{font-size:19px}}