/* SOCIAL STUDIO — white canvas, and her flat-lay as the hero.
   The artwork is a FRAME: its centre is 99.7% near-white, with the phone, polaroids,
   journal and the Connect/Share/Create/Inspire/Celebrate icons all around the edges.
   So the title is not placed above it — it sits INSIDE the clear middle, which is
   what the composition was built for. */
#page-social-studio{ background:#FFFFFF !important; }

/* !important on every background property: a later rule elsewhere uses the
   `background` SHORTHAND, which silently resets background-image (the same trap
   that hid the Life Lens collage). */
#page-social-studio .ss-pv-hero.ss-pv-hero{
  position:relative;
  background-image:url("assets/img/img-99f52d25119e.webp") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:#FFFFFF !important;
  border-radius:26px;
  overflow:hidden;
  aspect-ratio:1536 / 1024;      /* keeps her framing intact — nothing cropped */
  /* the hero holds several children (badge, title, tagline, blurb, socials,
     buttons) — it stays a normal block and the CONTENT is centred with padding,
     rather than becoming a flex row */
  display:block !important;
  /* Only the badge, title, tagline and blurb sit INSIDE the frame — the pills and
     CTA row are moved out below it by hu-ss-hero-js, because together they were
     107% of the frame's height and spilled over the artwork's icon row. */
  padding:13% 26% 24% !important;
  margin-bottom:26px;
  text-align:center;
}
#page-social-studio .ss-pv-hero > *{ position:relative; z-index:1; }
/* a soft veil behind the copy only, so it stays readable over the artwork */
#page-social-studio .ss-pv-hero::before{
  content:""; position:absolute; inset:12% 24%;
  background:radial-gradient(closest-side, rgba(255,255,255,.94), rgba(255,255,255,.55) 70%, rgba(255,255,255,0));
  pointer-events:none; z-index:0;
}
@media (max-width:1100px){
  #page-social-studio .ss-pv-hero.ss-pv-hero{ padding:11% 15% 22% !important; }
}
@media (max-width:900px){
  /* MOBILE: artwork on top, copy BELOW it — she asked for the heading and text moved
     back down after trying them over the middle.
     `background-size:100% auto` shows the WHOLE composition (phone, polaroids, pink
     disc, icon row) rather than `cover`, which — because the box grows with its text —
     scales by height and shows only the artwork's empty centre.
     The top padding is the artwork's own height at this width: 100/1.5 = 66.67%. */
  #page-social-studio .ss-pv-hero.ss-pv-hero{
    aspect-ratio:auto;
    background-image:url("assets/img/img-99f52d25119e.webp") !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    background-color:#FFFFFF !important;
    padding:calc(66.67% + 18px) 20px 8px !important;
    min-height:0;
    border-radius:22px;
  }
  /* type returns to a comfortable size now it is no longer squeezed into the
     artwork's clear centre */
  #page-social-studio .ss-pv-hero .ss-pv-title{ font-size:1.9rem !important; margin:6px 0 4px !important; }
  #page-social-studio .ss-pv-hero .ss-pv-tag{ font-size:.86rem !important; padding:8px 14px !important; }
  #page-social-studio .ss-pv-hero .ss-pv-sub{ font-size:.9rem !important; line-height:1.6 !important; margin-top:10px !important; }
  #page-social-studio .ss-pv-hero .ss-badge{ font-size:.64rem !important; }
  /* no veil needed — the copy sits on white, clear of the artwork */
  #page-social-studio .ss-pv-hero::before,
  #page-social-studio .ss-pv-hero::after{ content:none !important; }
}

/* the pills and CTAs, moved out of the frame and placed under it */
#page-social-studio .ss-pv-underhero{
  max-width:760px; margin:-6px auto 26px; text-align:center;
}
#page-social-studio .ss-pv-underhero .ss-pills{ margin-bottom:14px; }