.brand{gap:8px}
.brand-mascot{display:inline-block;position:relative;flex:0 0 43px;width:43px;height:52px;line-height:0;isolation:isolate}
.brand-mascot img{width:100%;height:100%;object-fit:contain;transform-origin:50% 85%;animation:slab-hop 9s ease-in-out infinite}
.brand-mascot::after{content:'';position:absolute;width:26px;height:4px;border-radius:50%;background:#102b341c;bottom:0;left:9px;z-index:-1}
.brand.is-playing .brand-mascot img{animation:slab-play 1.15s ease-in-out both}
.app-sidebar>.brand{font-size:24px;padding-left:0;gap:5px}
.app-sidebar .brand-mascot{flex-basis:38px;width:38px;height:47px}
.footer-top .brand-mascot{width:34px;flex-basis:34px;height:42px}
@keyframes slab-hop{0%,4%,18%,100%{transform:translateY(0) rotate(0) scale(1)}7%{transform:translateY(1px) scale(1.08,.91)}10%{transform:translateY(-7px) rotate(-9deg) scale(.98,1.03)}13%{transform:translateY(0) rotate(4deg) scale(1.05,.94)}16%{transform:translateY(-3px) rotate(-3deg)}}
@keyframes slab-play{0%{transform:translateY(0)}15%{transform:scale(1.1,.9)}40%{transform:translateY(-9px) rotate(-14deg)}65%{transform:translateY(0) rotate(7deg) scale(1.07,.93)}82%{transform:translateY(-4px) rotate(-5deg)}100%{transform:none}}
.motion-reduced .brand-mascot img,.mascots-paused .brand-mascot img{animation:none!important;transform:none!important}
@media(max-width:900px){.nav .brand{gap:4px;font-size:22px}.nav .brand-mascot{flex-basis:34px;width:34px;height:44px}.app-topbar .brand{gap:3px;font-size:20px}.app-topbar .brand-mascot{flex-basis:30px;width:30px;height:40px}.app-topbar .topbar-actions{gap:6px}.app-topbar .button{padding-inline:10px}}
@media(max-width:380px){.nav{gap:8px}.nav .brand{font-size:21px}.nav-cta{padding-inline:10px}.app-topbar{padding-inline:12px;gap:6px}.app-topbar .brand{font-size:19px}.app-topbar .topbar-actions{gap:4px}}
@media(prefers-reduced-motion:reduce){.brand-mascot img{animation:none!important;transform:none!important}}

/* Lowercase is the SlabPay interface voice; exact wallet and code values retain case. */
body,body :is(h1,h2,h3,h4,p,a,button,span,strong,small,summary,li,label,output,option,th,td,select){text-transform:lowercase!important}
input::placeholder{text-transform:lowercase}
code,code *,pre,pre *,kbd,[data-preserve-case],#wallet-address{text-transform:none!important}
.record-card{transform-style:preserve-3d;backface-visibility:hidden}
.hero-slabs,.story-slabs{perspective:1100px;transform-style:preserve-3d}

.hero h1{font-size:clamp(46px,4.65vw,68px);letter-spacing:-.045em;line-height:1.04}
@media(max-width:900px){.hero h1{font-size:clamp(38px,10vw,58px);line-height:1.07}}