/*
 * Shuppz B24UX4 — universal typography + motion refinement.
 * Presentation only. No route, Beta, auth, onboarding or database ownership.
 */
body.b24-public{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.006em;
}

/* Navigation and controls */
.b24-brand{font-size:20px;font-weight:650}
.b24-brand em{font-size:10px;font-weight:650}
.b24-nav__links{font-size:15px}
.b24-btn{font-size:15px;font-weight:650;min-height:52px;padding-inline:29px}
.b24-btn--small{font-size:14px;min-height:42px}

/* Hero: intentionally not bold. */
.b24-eyebrow{font-size:12px;font-weight:650;letter-spacing:.18em}
.b24-hero h1{
  max-width:680px;
  font-size:68px;
  line-height:1.08;
  letter-spacing:-.038em;
  font-weight:500;
  text-wrap:balance;
}
.b24-hero__lead{max-width:610px;font-size:19px;line-height:1.65}
.b24-hero__trust{font-size:13px}
.b24-intent-panel__label{font-size:12px;font-weight:650}
.b24-intent-panel__message{font-size:15px;line-height:1.5}
.b24-intent-panel__message--opportunity small{font-size:12px}
.b24-chiprow span,.b24-preview-chips span{font-size:11px}
.b24-signal-line em{font-size:11px;font-weight:600}
.b24-actionchips span{font-size:11px}

/* Universal reading scale */
.b24-how h2,.b24-section-heading h2,.b24-relevance h2,.b24-beta-form-heading h2,.b24-final h2{
  font-size:58px;
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:650;
  text-wrap:balance;
}
.b24-how__head p,.b24-section-heading>p{font-size:18px;line-height:1.65}
.b24-how__steps h3,.b24-shopper-features h3,.b24-principle-grid h3,.b24-business-flow h3,.b24-campaign-grid h3,.b24-market-benefits h3,.b24-beta-grid h3{font-size:17px;line-height:1.35;font-weight:650}
.b24-how__steps p,.b24-shopper-features p,.b24-principle-grid p,.b24-business-flow p,.b24-campaign-grid p,.b24-market-benefits p,.b24-beta-grid p{font-size:15px;line-height:1.65}
.b24-pill{font-size:11px;font-weight:650}
.b24-searchbox{font-size:14px}
.b24-featured-card h3{font-size:18px;font-weight:650}
.b24-featured-card p{font-size:14px;line-height:1.6}
.b24-featured-card button{font-size:12px;font-weight:650}
.b24-preview-foot{font-size:12px}
.b24-built-for{font-size:14px}
.b24-relevance h2{font-size:52px}
.b24-beta-form-heading h2{font-size:56px}
.b24-beta-form-heading p{font-size:16px;line-height:1.6}
.b24-betaform>input[type="email"]{font-size:16px}
.b24-betaform legend{font-size:13px}
.b24-rolechoices span{font-size:13px}
.b24-consent{font-size:11px}
.b24-formfoot{font-size:11px}
.b24-beta-success h3{font-size:24px;font-weight:650}
.b24-beta-success p{font-size:15px}
.b24-share label{font-size:13px}
.b24-final p{font-size:17px;line-height:1.65}
.b24-final__actions>a:last-child{font-size:14px;font-weight:600}
.b24-footer strong{font-size:19px;font-weight:650}
.b24-footer p{font-size:13px}
.b24-footer nav,.b24-footer>div>span{font-size:12px}

/* Motion: fail-open because the base B24 JS only adds data-b24-motion when it is running. */
body[data-b24-motion="ready"] [data-b24-reveal]{
  opacity:0;
  transform:translate3d(0,24px,0);
  filter:blur(2px);
  transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1),filter .72s ease;
  will-change:opacity,transform;
}
body[data-b24-motion="ready"] [data-b24-reveal][data-visible="true"]{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}
.b24-three>article:nth-child(2),.b24-four>article:nth-child(2),.b24-campaign-grid>article:nth-child(2){transition-delay:.07s}
.b24-three>article:nth-child(3),.b24-four>article:nth-child(3),.b24-campaign-grid>article:nth-child(3){transition-delay:.14s}
.b24-four>article:nth-child(4),.b24-campaign-grid>article:nth-child(4){transition-delay:.21s}
.b24-campaign-grid>article:nth-child(5){transition-delay:.28s}
.b24-campaign-grid>article:nth-child(6){transition-delay:.35s}

.b24-nav[data-scrolled="true"]{box-shadow:0 12px 30px rgba(17,17,17,.045)}
.b24-intent-panel{animation:b24ux4-panel-float 7s ease-in-out infinite;transform-origin:center}
.b24-avatar{animation:b24ux4-avatar-pulse 3.8s ease-in-out infinite}
.b24-shopper-features article,.b24-business-flow article,.b24-campaign-grid article,.b24-principle-grid article,.b24-beta-grid article,.b24-discover-preview{
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,border-color .28s ease;
}
.b24-shopper-features article:hover,.b24-campaign-grid article:hover,.b24-principle-grid article:hover,.b24-discover-preview:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(17,17,17,.09);
  border-color:#ddd8ef;
}
.b24-business-flow article:hover,.b24-beta-grid article:hover{transform:translateY(-4px);border-color:#3a344f}
.b24-btn{transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s ease,box-shadow .22s ease}
.b24-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(95,70,215,.18)}

@keyframes b24ux4-panel-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0)}
}
@keyframes b24ux4-avatar-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(95,70,215,0)}
  50%{box-shadow:0 0 0 8px rgba(95,70,215,.08)}
}

@media (max-width:1080px){
  .b24-hero h1{font-size:58px;font-weight:500}
  .b24-hero__lead{font-size:18px}
  .b24-how h2,.b24-section-heading h2,.b24-beta-form-heading h2{font-size:50px}
}
@media (max-width:820px){
  body.b24-public{font-size:17px}
  .b24-nav__links{font-size:16px}
  .b24-hero h1{font-size:52px;font-weight:500}
  .b24-how h2,.b24-section-heading h2,.b24-beta-form-heading h2,.b24-relevance h2,.b24-final h2{font-size:46px}
}
@media (max-width:560px){
  body.b24-public{font-size:16px}
  .b24-hero h1{font-size:45px;line-height:1.09;font-weight:500;letter-spacing:-.03em}
  .b24-hero__lead{font-size:17px}
  .b24-how h2,.b24-section-heading h2,.b24-beta-form-heading h2,.b24-relevance h2,.b24-final h2{font-size:39px;line-height:1.13}
  .b24-how__head p,.b24-section-heading>p{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  body[data-b24-motion="ready"] [data-b24-reveal],body[data-b24-motion="ready"] [data-b24-reveal][data-visible="true"]{
    opacity:1;transform:none;filter:none;transition:none;will-change:auto
  }
  .b24-intent-panel,.b24-avatar{animation:none}
  .b24-shopper-features article,.b24-business-flow article,.b24-campaign-grid article,.b24-principle-grid article,.b24-beta-grid article,.b24-discover-preview,.b24-btn{transition:none}
}