/* Extra rules for the pages that reuse the Beauty & Wellness design. Everything is under .bty, so the Beauty page itself does not change. */
/* image cards: any number of cards (2-8) on a 12-column grid, the width of each card is set by --s */
.bty .treat.tw{grid-template-columns:repeat(12,1fr)}
.bty .treat.tw .card.card{grid-column:span var(--s,4)}
/* photo next to the text (used where the Beauty page shows the phone) */
.bty .show-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:32px;box-shadow:var(--shadow);transition:transform .5s ease}
.bty .show-photo:hover{transform:scale(1.02)}
.bty .phone .cover{background-size:cover;background-position:center}
/* list pages (all features, all integrations ...): linked boxes with an emoji */
.bty .feat .emo{display:block;font-size:26px;line-height:1;margin-bottom:18px}
.bty .feat-link li{padding:0;transition:transform .25s ease,box-shadow .25s ease}
.bty .feat-link li:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bty .feat-link li>a{display:block;height:100%;padding:28px 26px;color:inherit}
.bty .feat-link li:not(:has(>a)){padding:28px 26px}
@media (max-width:980px){.bty .treat.tw .card.card{grid-column:span 6}}
@media (max-width:620px){.bty .treat.tw{grid-template-columns:1fr}.bty .treat.tw .card.card{grid-column:auto}}

/* "Ready to fill your calendar?" - the same light block on every page (white to pale blue to pale pink, rose "calendar?").
   uams-theme.css turns it dark navy, so this file is linked LAST on every page. */
.bty .cta .box{background:linear-gradient(120deg,#fff 0%,#f1f7ff 55%,#fff1f3 100%)!important;border:1px solid var(--line);color:var(--text);position:relative}
.bty .cta .box h2{color:var(--ink)}
.bty .cta .box h2 em{color:var(--rose);font-style:normal}
.bty .cta .box .copy>p:not(.note){color:var(--text)}
.bty .cta .box .checks li{color:#4a5f80}
.bty .cta .box .checks li:before{color:#1e90ff}
.bty .cta .box .btn-line{background:#fff;color:var(--ink);border-color:#cfd9ea}
.bty .cta .box .btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.bty .cta .box .note{color:#1e90ff}

/* ---------- Banners: one common, compact height on the whole site ----------
   Covers the industry photo banners (.hero-bg) and the feature / enterprise / resources banners
   (.hero, .uap-hero, .ucs-hero, .ce-hero, .fs-hero, .sc-hero, .usm-hero).
   Same padding, same min-height, content centred. Only size/spacing is set - no text, link or script is touched. */
.bty section.hero,.bty section.uap-hero,.bty section.ucs-hero,.bty section.ce-hero,.bty section.fs-hero,.bty section.sc-hero,.bty section.usm-hero,.bty section.uen-hero,.bty section.ulg-hero{
  box-sizing:border-box;padding:28px 0 32px;display:flex;align-items:center}
.bty section.hero.hero-bg{padding:40px 0}
.bty section.hero>.wrap,.bty section.uap-hero>.uap-wrap,.bty section.ucs-hero>.ucs-wrap,.bty section.ce-hero>.ce-wrap,
.bty section.fs-hero>.fs-wrap,.bty section.sc-hero>.sc-wrap,.bty section.usm-hero>.usm-wrap,.bty section.uen-hero>.uen-wrap,.bty section.ulg-hero>.ulg-wrap{width:100%;max-width:1160px;margin-left:auto;margin-right:auto;box-sizing:border-box}
/* photo banners: slightly smaller title and a wider text block so long titles (e.g. Education) stay on 3 lines */
.bty section.hero.hero-bg h1{font-size:clamp(36px,4.4vw,54px)}
.bty section.hero.hero-bg .hero-copy{max-width:640px}
@media (min-width:981px){
  .bty section.hero,.bty section.uap-hero,.bty section.ucs-hero,.bty section.ce-hero,.bty section.fs-hero,.bty section.sc-hero,.bty section.usm-hero,.bty section.uen-hero,.bty section.ulg-hero{min-height:560px}
  /* photo card keeps its original 4:4.3 shape (nothing cropped); it is just a little narrower so the banner stays 560px */
  .bty section.hero .hero-img{width:100%;max-width:440px;margin-left:auto}
}
@media (max-width:620px){
  .bty section.hero,.bty section.uap-hero,.bty section.ucs-hero,.bty section.ce-hero,.bty section.fs-hero,.bty section.sc-hero,.bty section.usm-hero,.bty section.uen-hero,.bty section.ulg-hero{padding:32px 0 48px}
  .bty section.hero.hero-bg{padding:40px 0}
}
/* About Us banner has its own rule; bring it to the same height */
.bty section.hero.ab-hero{min-height:560px!important;padding:40px 0!important}
@media (max-width:980px){.bty section.hero.ab-hero{min-height:0!important}}