/* Trade Landing (Ads) template only. Loaded only on pages using that template, and every rule is scoped to body.fourk-ads. */

/* Offer banner: one short line that wraps instead of clipping */
.fourk-ads .strip{padding:8px 0}
.fourk-ads .strip__line{margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.fourk-ads .strip__tag{margin-right:4px}

/* Header: no menu, so logo left, phone + Book a demo right, at every width (also while sticky) */
.fourk-ads .site-header .wrap{flex-wrap:nowrap;min-height:76px}
.fourk-ads .brand{display:block;flex:0 0 auto}
.fourk-ads .header-actions{flex:0 1 auto;min-width:0}
.fourk-ads .header-actions .btn{display:inline-flex}
.fourk-ads .phone-link span{display:inline}

/* Mockup: "Sample project" label */
.fourk-ads .mock__sample{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:4px;background:var(--navy);color:var(--white);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* Laptops with a short screen (e.g. 1366 x 768): pull the hero up so the button sits above the fold */
@media (min-width:1025px) and (max-height:900px){
  .fourk-ads .hero{padding:28px 0 56px}
  .fourk-ads .hero .pills{margin-bottom:14px;font-size:18px}
  .fourk-ads .hero .h-hero{font-size:60px;margin-bottom:14px}
  .fourk-ads .hero p.lead{font-size:18px;margin-bottom:20px}
}

/* Phones and small tablets */
@media (max-width:640px){
  .fourk-ads .strip{font-size:13px;padding:6px 0}
  .fourk-ads .site-header .wrap{min-height:60px;gap:8px;padding-top:4px;padding-bottom:4px}
  .fourk-ads .brand img{height:40px}
  .fourk-ads .header-actions{gap:8px}
  .fourk-ads .phone-link{font-size:15px;gap:4px}
  .fourk-ads .phone-link svg{width:15px;height:15px}
  .fourk-ads .header-actions .btn{min-height:44px;padding:8px 12px;font-size:15px}

  .fourk-ads .hero{padding:16px 0 48px}
  .fourk-ads .hero .pills{font-size:13px;gap:4px;margin-bottom:12px}
  .fourk-ads .hero .pill{padding:3px 8px}
  .fourk-ads .hero .h-hero{font-size:32px;line-height:1;margin-bottom:10px}
  .fourk-ads .hero p.lead{font-size:16px;line-height:1.45;margin-bottom:14px}
  .fourk-ads .hero .btn--lg{min-height:52px;padding:12px 16px;font-size:17px;width:100%}
  .fourk-ads .hero .btn-row{gap:10px}
}

/* Very narrow phones (320-359px): phone icon only, so the bar never overflows */
@media (max-width:359px){
  .fourk-ads .brand img{height:34px}
  .fourk-ads .phone-link svg{display:none}
  .fourk-ads .phone-link{font-size:14px}
  .fourk-ads .header-actions .btn{padding:8px 10px;font-size:14px}
}

/* Salon Landing (Ads): "Sample booking" label above the booking mockup */
.fourk-ads .mock__sample-row{padding:12px 20px 0;font-family:var(--mono);font-size:12px}
/* Two-column card grids (salon pricing): never wider than the screen on 320px phones */
.fourk-ads .cols2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}