/* MWA polish layer: shared finishing touches, loaded last on every page */
html{scroll-padding-top:96px}
h1,h2,h3{text-wrap:balance}
p,li,.lead,small{text-wrap:pretty}
h2{max-width:20ch}
.lead{max-width:60ch}

/* eyebrow labels: one consistent branded marker */
.eyebrow{letter-spacing:.01em}
.eyebrow:before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 2px 1px;border-radius:50%;background:var(--pk,#ff3d9a);box-shadow:0 0 10px var(--pk,#ff3d9a);vertical-align:middle}

/* cards: one surface, one radius, one hover across the site */
.box,.card,.rv,.sx,.tv{border-radius:20px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),var(--dusk,#110b1d);
  transition:transform .45s var(--ease,cubic-bezier(.22,.8,.22,1)),border-color .35s,box-shadow .45s var(--ease,cubic-bezier(.22,.8,.22,1))}
.box:hover,.card:hover,.rv:hover,.sx:hover,.tv:hover{border-color:rgba(255,122,192,.32);box-shadow:0 26px 60px -32px rgba(255,61,154,.5)}
a.card:hover,.sx:hover{transform:translateY(-4px)}
.card img{transition:transform .8s var(--ease,cubic-bezier(.22,.8,.22,1))}
a.card:hover img{transform:scale(1.03)}
.card{overflow:hidden}

/* buttons: crisper press and focus */
.btn{letter-spacing:.005em}
.btn:focus-visible{outline:2px solid #ff7ac0;outline-offset:3px}

/* gentle scroll-in for cards (modern browsers only, respects reduced motion) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .card,.rv,.sx,.tv{animation:mwaIn linear both;animation-timeline:view();animation-range:entry 0% cover 18%}
    @keyframes mwaIn{from{opacity:0;transform:translateY(26px) scale(.985)}}
  }
}

/* mobile: tighter rhythm, bigger tap targets, full-width main buttons */
@media(max-width:720px){
  section{padding-top:64px;padding-bottom:64px}
  .head{margin-bottom:30px}
  h2{max-width:none}
  .box{padding:20px}
  .row .btn:not(.s){flex:1 1 auto;min-height:52px}
  .lead{font-size:1.04rem}
}

/* blog index: wider, three-column grid; articles stay at a comfortable reading width */
.blogp main.bw:has(.cards){max-width:1160px}
@media(min-width:1000px){.blogp .cards{grid-template-columns:repeat(3,1fr)}}
.blogp .card{padding:14px 14px 18px}
.blogp .card h2{font-size:1.2rem;line-height:1.2}
.blogp .card p{color:var(--mu)}