/* site design-fix overrides (loaded after the main stylesheets). Keep rules small and scoped. */
/* phone-width safety: nothing may be wider than the screen */
.poster-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.poster-grid img{max-width:100%}
@media(max-width:860px){.poster-grid{grid-template-columns:minmax(0,1fr)}.poster-grid img{max-width:min(460px,100%)}}
.kv{grid-template-columns:max-content minmax(0,1fr)}.kv dd{overflow-wrap:anywhere}
@media(max-width:560px){
  .btn-lg,.btn-block{white-space:normal;text-align:center;line-height:1.3}
  .kv{grid-template-columns:minmax(0,1fr);gap:2px 0}.kv dt{margin-top:8px}.kv dd{margin-bottom:2px}
  .pay-box,.app-promo,.v-feature{grid-template-columns:minmax(0,1fr)!important}
  .flex.wrap>.btn{flex:1 1 auto}
  .hero h1{font-size:2.3rem}
  .cta{padding:28px 20px}
}
/* fees poster section: page inline style used 1fr columns that cannot shrink */
section .poster-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)!important}
@media(max-width:860px){section .poster-grid{grid-template-columns:minmax(0,1fr)!important}}
.poster-grid>*{min-width:0}.poster-grid img{width:100%;height:auto}
.poster-grid h2{overflow-wrap:anywhere}

/* keep sticky sidebar/header working: overflow-x:hidden on html/body breaks position:sticky */
html,body{overflow-x:clip}

/* ---------- fonts: DM Serif Display = headings only (single weight), DM Sans = body, buttons, prices ---------- */
h1,h2,h3,h4,.brand .t1,.page-hero h1,.hero h1,.sec-head h2,.card h3,.rank-card .hd b,.hero-card .cap b,.why b,.quote b{font-weight:400;letter-spacing:0}
.hero h1 em{font-style:italic}
/* prices, amounts and counters in DM Sans */
.svc .fee b,.fee-row .price b,.price-hero .amt,.band b,.stat .val,.adv-photo .badge-exp b,.step::before,.lvl-chip,.wallet .val,.plan-table td,.amt,.pay-box .kv dd,.price,.fee b{font-family:var(--font-body);font-weight:700;letter-spacing:-.01em}
.price-hero .amt{font-weight:800}
.btn,button,input,select,textarea,label,.badge,.chip,.pill,nav a{font-family:var(--font-body)}

/* step numbers 01/02/03: clearly visible — deep navy on light cards, bold gold on dark sections */
.step::before{color:var(--navy)!important;opacity:1!important;font-family:var(--font-body)!important;font-weight:800!important;font-size:2.2rem!important}
section.navy .step::before,.navy .step::before{color:var(--gold-2)!important}

/* hero: name caption sits BELOW the photo (never covers the face) */
.hero-card{display:flex;flex-direction:column}
.hero-card .cap{position:static;left:auto;right:auto;bottom:auto;margin-top:12px;border-radius:12px;background:var(--navy);backdrop-filter:none}
.hero-card img.photo{object-position:center 20%}

/* hero photo card straight (no tilt) */
.hero-card{transform:none!important}

/* phone top bar: one clean line — phone · language · app icon (social icons live in the footer on phones) */
.topbar .container>.flex{flex-wrap:nowrap;min-width:0}
.topbar a,.topbar span{white-space:nowrap}
@media(max-width:760px){
  .topbar .container{min-height:40px;gap:8px}
  .topbar .social-top{display:none!important}
  .topbar .hide-m,.topbar .hi{display:none!important}
  .topbar a[data-install]{font-size:0!important;gap:0}
  .topbar a[data-install] .ic{font-size:1rem;width:20px;height:20px}
  .topbar .container>.flex:last-child{gap:12px}
}