/* Homepage rhythm and wrapping; retain shared component styles. */
html[data-page="home"] #brand-pov{--sp:40px;padding-bottom:20px}
html[data-page="home"] #examples{--sp:32px}
html[data-page="home"] #monetize{padding-bottom:28px}
html[data-page="home"] #work-with-us{--sp:36px;padding-bottom:28px}
html[data-page="home"] #studio{--sp:36px;padding-bottom:28px}
html[data-page="home"] #faq{--sp:36px}
@media(min-width:380px){html[data-page="home"] .hero-bonus{display:inline-block;white-space:nowrap}}
@media(min-width:1024px){
  html[data-page="home"] #h-brand-pov{font-size:clamp(34px,3.65vw,48px);white-space:nowrap}
  html[data-page="home"] #brand-pov{--sp:48px;padding-bottom:24px}
  html[data-page="home"] #examples{--sp:36px}
  html[data-page="home"] #work-with-us,
  html[data-page="home"] #studio{--sp:40px}
}

html[data-page="home"] .studio-preview{margin:28px 0 0}
html[data-page="home"] .studio-preview{border:1px solid rgba(5,49,122,.16);border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(5,49,122,.08)}
html[data-page="home"] .studio-preview img{display:block;width:100%;height:auto}
html[data-page="home"] .brand-pov-layout{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:24px;align-items:center}
html[data-page="home"] .revenue-bills{width:180px;height:180px;object-fit:contain}
html[data-page="home"] #h-brand-pov{white-space:normal;font-size:clamp(30px,3vw,40px);line-height:1.06;text-wrap:pretty}
@media(max-width:719px){
 html[data-page="home"] .brand-pov-layout{grid-template-columns:1fr;gap:12px}
 html[data-page="home"] .revenue-bills{grid-row:1;width:112px;height:112px}
}

/* Longer French sentences wrap naturally while sharing the same spacing. */
html[lang="fr"][data-page="home"] .hero-bonus{white-space:normal}
html[lang="fr"][data-page="home"] #h-pay .l1{white-space:normal}

@media(min-width:960px){html[lang="fr"][data-page="home"] .hero-bonus{white-space:nowrap}}

html[lang="fr"][data-page="home"] #studio .sub2{max-width:none;text-wrap:pretty}
html[lang="fr"][data-page="home"] #studio .sl-own{max-width:none;line-height:1.5;text-wrap:pretty}

/* Each French hero benefit gets its own line and room to wrap on phones. */
html[lang="fr"][data-page="home"] .hero .sub.studio-sub{max-width:none;font-size:clamp(16px,1.65vw,20px);line-height:1.4}
html[lang="fr"][data-page="home"] .hero-benefit{display:block}
html[lang="fr"][data-page="home"] .hero-benefit+.hero-benefit{margin-top:6px}

/* A distinct surface separates the series examples from the surrounding copy. */
html[data-page="home"] #examples{background:#E8F4FD;background-image:none;padding-bottom:48px}
@media(max-width:719px){html[data-page="home"] #examples{padding-bottom:36px}}
html[data-page="home"] #monetize{padding-top:40px!important}