/* Photo-led cover: one large scene, a curved pink sweep and an inset portrait. */
.hero{padding:0;background:#f9dce8;isolation:isolate;overflow:hidden}
.hero .hero-inner{display:block;position:relative;max-width:1440px;height:740px;margin:auto;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#fff8fb 35%,#f4c5d7)}
.hero .hero-inner:before{content:'';position:absolute;z-index:1;pointer-events:none;left:-15%;bottom:-16%;width:145%;height:68%;border-radius:50% 55% 0 0;transform:rotate(-8deg);background:linear-gradient(130deg,#fff6fa 15%,#fdeaf2 55%,#efbad0 100%);box-shadow:0 -12px 45px #fff9fc85}
.hero .hero-visual{position:absolute;inset:0;display:block;grid-column:auto;grid-row:auto;width:100%;height:100%;min-height:0;background:transparent;border-radius:0;box-shadow:none;overflow:visible}
.hero .hero-visual .hero-photo{position:absolute;inset:0 0 auto;height:72%;width:100%;margin:0;aspect-ratio:auto!important;border-radius:0;overflow:hidden;z-index:0}
.hero .hero-visual .hero-photo:after{content:'';position:absolute;inset:35% 0 0;pointer-events:none;background:linear-gradient(transparent 25%,#fff5f9b8 75%,#fff5f9 100%)}
.hero .hero-visual .hero-photo>img{width:100%;height:100%!important;aspect-ratio:auto;object-fit:cover!important;object-position:50% 27%}
.hero .hero-visual .hero-photo figcaption{position:absolute!important;top:14px!important;bottom:auto!important;left:22px!important;z-index:2}
.hero .hero-visual .hero-photo .photo-note{font-size:11px;background:#fffafbd9!important;padding:3px 9px;border-radius:20px;color:#674c57}
.hero .hero-copy{position:absolute;z-index:4;left:58px;top:40%;padding:0;width:65%;min-width:0}
.hero .hero-copy>.eyebrow{display:none}
.hero .hero-tag{display:inline-block;font-size:15px;letter-spacing:.03em;line-height:1.6;margin:0 0 12px;padding:4px 13px;border:1px solid #e6b2c7;border-radius:24px;background:#fff7fbe8;color:#8a2c50}
.hero h1{font-size:49px;line-height:1.55;letter-spacing:.02em;white-space:normal;text-shadow:0 2px 20px #fff9fbd9}
.hero h1 em{color:#982c55;font-size:64px;line-height:1.5}
.hero h1 em:after{height:.13em;bottom:.08em;background:#efb5cc;transform:rotate(-3deg)}
.hero .hero-description{font-size:19px;margin-top:12px;line-height:1.8;width:62%;color:#5c3747}
.hero .hero-grandfather{position:absolute;z-index:3;right:4.5%;bottom:109px;width:29%;height:38%;display:block;border:7px solid #fff9fc;border-radius:46% 46% 44% 44%;overflow:hidden;box-shadow:0 0 0 1px #d89cb4,0 12px 28px #84354e26;transform:rotate(4deg);background:#f3e3da}
.hero .hero-grandfather>img{width:100%;height:100%;object-fit:cover;object-position:45% 21%;transform:rotate(-4deg) scale(1.08)}
.hero .hero-grandfather>figcaption{position:absolute;z-index:2;bottom:0;left:0;right:0;padding:35px 8px 17px;text-align:center;font-family:var(--serif);font-size:20px;line-height:1.5;color:#503241;background:linear-gradient(transparent,#fff7f9ed 36%,#fff7f9 100%);transform:rotate(-4deg);width:auto}
.hero .hero-grandfather>figcaption em{color:#8a2c50}
.hero .hero-action{position:absolute;z-index:5;left:58px;bottom:29px;width:450px;max-width:calc(100% - 116px);padding:0;margin:0}
.hero .trial-button{background:linear-gradient(125deg,#bc537b,#94284f);border-radius:50px;padding:13px 28px;box-shadow:inset 0 1px #fff9,0 4px 0 #75203e,0 14px 24px #8d315730}
.hero .trial-label{text-align:center;font-size:14px;line-height:1.5}
.hero .trial-main{font-size:18px;line-height:1.4;justify-content:center;gap:9px}
.hero .trial-bold{font-size:31px;letter-spacing:.05em;margin:0}
.hero .trial-main>.icon{margin-left:6px;width:22px;height:22px}
@media(max-width:1100px) and (min-width:801px){.hero .hero-copy{left:35px;width:69%}.hero h1{font-size:42px}.hero h1 em{font-size:56px}.hero .hero-action{left:35px}.hero .hero-grandfather{width:31%;right:3%}}
@media(max-width:800px){
  .hero{height:calc(100vh - 174px - env(safe-area-inset-bottom));height:calc(100svh - 174px - env(safe-area-inset-bottom));padding:0;min-height:0}
  .hero .hero-inner{height:100%;width:100%;max-width:600px;display:block;gap:0;overflow:hidden}
  .hero .hero-inner:before{left:-30%;bottom:-15%;width:160%;height:64%;transform:rotate(-11deg);background:linear-gradient(125deg,#fff9fc 5%,#fce7f0 65%,#efb9ce)}
  .hero .hero-visual{position:absolute;inset:0;height:100%;display:block;width:100%;border-radius:0;overflow:visible}
  .hero .hero-visual .hero-photo{inset:0 0 auto;height:62%;width:100%;aspect-ratio:auto!important;border-radius:0;margin:0}
  .hero .hero-visual .hero-photo>img{height:100%!important;width:100%;object-fit:cover!important;object-position:50% 20%}
  .hero .hero-visual .hero-photo:after{inset:40% 0 0;background:linear-gradient(transparent 12%,#fff6fab5 70%,#fff5f9 100%)}
  .hero .hero-visual .hero-photo figcaption{top:10px!important;left:13px!important}
  .hero .hero-visual .hero-photo .photo-note{font-size:10px;padding:2px 8px}
  .hero .hero-copy{position:absolute;top:34%;left:22px;width:calc(100% - 44px);padding:0;order:initial;grid-row:auto;grid-column:auto}
  .hero .hero-tag{font-size:12px;line-height:1.5;padding:3px 10px;margin-bottom:7px;letter-spacing:0}
  .hero h1{font-size:clamp(25px,7.2vw,34px);line-height:1.45;letter-spacing:0}
  .hero h1 em{font-size:clamp(34px,9.6vw,44px);line-height:1.5;letter-spacing:.025em}
  .hero .hero-description{font-size:16px;width:52%;line-height:1.7;margin-top:10px}
  .hero .hero-grandfather{right:16px;bottom:98px;width:43%;height:25%;min-height:118px;max-height:190px;display:block;border-width:5px;border-radius:46% 46% 44% 44%;transform:rotate(5deg)}
  .hero .hero-grandfather>img{height:100%;width:100%;object-fit:cover;object-position:44% 21%;transform:rotate(-5deg) scale(1.09)}
  .hero .hero-grandfather>figcaption{font-size:13px;line-height:1.5;padding:25px 3px 7px;background:linear-gradient(transparent,#fff7f9ec 42%,#fff7f9);transform:rotate(-5deg)}
  .hero .hero-grandfather>figcaption em br{display:initial}
  .hero .hero-action{position:absolute;left:21px;right:21px;bottom:18px;width:auto;max-width:none;padding:0;margin:0;grid-row:auto;grid-column:auto;order:initial}
  .hero .trial-button{border-radius:40px;padding:9px 17px 11px}
  .hero .trial-label{font-size:12px;line-height:1.5}
  .hero .trial-main{font-size:16px;line-height:1.4;gap:7px}
  .hero .trial-bold{font-size:27px;line-height:1.5;letter-spacing:.04em}
  .hero .trial-main>.icon{margin-left:4px;width:20px;height:20px}
}
@media(max-width:800px) and (max-height:700px){
  .hero .hero-copy{top:31%;left:19px;width:calc(100% - 38px)}
  .hero .hero-tag{font-size:11px;margin-bottom:4px;padding-top:2px;padding-bottom:2px}
  .hero h1{font-size:25px;line-height:1.4}.hero h1 em{font-size:34px;line-height:1.4}
  .hero .hero-description{font-size:14px;line-height:1.6;margin-top:7px;width:55%}
  .hero .hero-grandfather{bottom:90px;right:12px;height:25%;min-height:95px;width:41%}
  .hero .hero-grandfather>figcaption{font-size:12px;padding-bottom:5px}
  .hero .hero-action{bottom:14px;left:17px;right:17px}
  .hero .trial-button{padding-top:7px;padding-bottom:9px}
  .hero .trial-label{font-size:11px}.hero .trial-bold{font-size:25px}
}
@media(max-width:359px){
  .hero .hero-copy{left:17px;width:calc(100% - 34px)}
  .hero h1{font-size:23px}.hero h1 em{font-size:32px}
  .hero .hero-description{font-size:14px}
  .hero .trial-main{font-size:15px;gap:5px}.hero .trial-bold{font-size:24px}
}
/* The enlarged text modes retain photos and let the poster grow vertically. */
:root[data-text-size=large] .hero,:root[data-text-size=largest] .hero{height:auto;overflow:hidden}
:root[data-text-size=large] .hero .hero-inner,:root[data-text-size=largest] .hero .hero-inner{display:flex;flex-direction:column;height:auto;min-height:0;gap:0;padding-bottom:26px}
:root[data-text-size=large] .hero .hero-inner:before,:root[data-text-size=largest] .hero .hero-inner:before{display:none}
:root[data-text-size=large] .hero .hero-visual,:root[data-text-size=largest] .hero .hero-visual{position:relative;inset:auto;order:0;height:520px;display:block;min-height:0;overflow:hidden;flex-shrink:0}
:root[data-text-size=large] .hero .hero-visual .hero-photo,:root[data-text-size=largest] .hero .hero-visual .hero-photo{position:absolute;height:80%;aspect-ratio:auto!important}
:root[data-text-size=large] .hero .hero-visual .hero-photo>img,:root[data-text-size=largest] .hero .hero-visual .hero-photo>img{height:100%!important;object-fit:cover!important;aspect-ratio:auto}
:root[data-text-size=large] .hero .hero-grandfather,:root[data-text-size=largest] .hero .hero-grandfather{position:absolute;bottom:4px;right:5%;height:41%;width:43%;max-height:none;display:block}
:root[data-text-size=large] .hero .hero-grandfather>img,:root[data-text-size=largest] .hero .hero-grandfather>img{height:100%;width:100%}
:root[data-text-size=large] .hero .hero-grandfather>figcaption,:root[data-text-size=largest] .hero .hero-grandfather>figcaption{position:absolute;width:auto;padding:25px 4px 8px}
:root[data-text-size=large] .hero .hero-copy,:root[data-text-size=largest] .hero .hero-copy{position:relative;inset:auto;order:1;width:100%;padding:15px 24px 25px}
:root[data-text-size=large] .hero .hero-description,:root[data-text-size=largest] .hero .hero-description{width:100%}
:root[data-text-size=large] .hero .hero-action,:root[data-text-size=largest] .hero .hero-action{position:relative;inset:auto;order:2;width:calc(100% - 44px);max-width:600px;margin:0 auto;padding:0}
:root[data-text-size=large] .hero .trial-button,:root[data-text-size=largest] .hero .trial-button{border-radius:24px;padding:15px 20px}
@media(min-width:801px){:root[data-text-size=large] .hero .hero-grandfather,:root[data-text-size=largest] .hero .hero-grandfather{width:27%}}

/* Give the grandfather portrait a substantial presence beside the main scene. */
.hero .hero-grandfather{width:35%;height:44%;right:3%}
@media(max-width:800px){
  .hero .hero-copy{top:30%}
  .hero .hero-description{width:40%}
  .hero .hero-grandfather{right:12px;bottom:104px;width:56%;height:35%;min-height:150px;max-height:none}
}
@media(max-width:800px) and (max-height:700px){
  .hero .hero-copy{top:25%}
  .hero .hero-description{width:40%}
  .hero .hero-grandfather{right:10px;bottom:91px;width:56%;height:35%;min-height:125px}
}
@media(max-width:359px){.hero .hero-description{width:38%}}
:root[data-text-size=large] .hero .hero-visual,:root[data-text-size=largest] .hero .hero-visual{height:600px}
:root[data-text-size=large] .hero .hero-visual .hero-photo,:root[data-text-size=largest] .hero .hero-visual .hero-photo{height:70%}
:root[data-text-size=large] .hero .hero-grandfather,:root[data-text-size=largest] .hero .hero-grandfather{width:56%;height:44%;right:3%;bottom:7px}
:root[data-text-size=large] .hero .hero-copy,:root[data-text-size=largest] .hero .hero-copy{top:auto}
:root[data-text-size=large] .hero .hero-description,:root[data-text-size=largest] .hero .hero-description{width:100%}
@media(min-width:801px){:root[data-text-size=large] .hero .hero-grandfather,:root[data-text-size=largest] .hero .hero-grandfather{width:35%}}