/* Revision 10: approved zodiac mockups, live HTML copy and CTA.
   The two AVIF exports preserve the approved images; CSS shows only the art.
   All rules are local to this section. */
#zodiac {
 --zodiac-art:url('assets/zodiac-approved-mobile.avif');
 background:#f8f8f6;color:#47474b;font-family:'Montserrat Hero',Arial,sans-serif;
 border:0;padding:34px 0 23px;position:relative;
}
#zodiac .zodiac-inner {width:100%;max-width:560px;margin-inline:auto;display:flex;flex-direction:column;align-items:stretch;min-width:0}
#zodiac .zodiac-inner > * {min-width:0}
main > #zodiac.section #zodiac-title.section-title {
 width:84%;max-width:none;margin:0 auto 18px;
 font-family:inherit;font-size:26px;line-height:1.17;letter-spacing:-.65px;font-weight:750;
 color:#474c41;text-align:center;text-wrap:initial;
}
#zodiac .zodiac-title-accent {color:#504094;white-space:nowrap}
#zodiac .zodiac-inner > p {
 width:88.6%;margin:0 auto;font-family:inherit;font-size:18.5px;line-height:1.34;
 letter-spacing:-.45px;color:#47474b;font-weight:400;text-align:left;
}
#zodiac .zodiac-inner strong {font-weight:700}
#zodiac .zodiac-inner > .zodiac-recognition {
 padding:14px 20px 15px;background:#eee8fc;border:0;border-radius:15px;text-align:center;font-size:19px;line-height:1.33;
}
#zodiac .zodiac-recognition strong {color:#504094}
#zodiac .zodiac-inner > .zodiac-explanation {margin-top:21px;font-size:19.5px;line-height:1.28}
#zodiac .zodiac-figure {width:100%;margin:2px auto 16px;position:relative}
#zodiac .zodiac-scene {
 width:100%;aspect-ratio:724/598;background-image:var(--zodiac-art);background-repeat:no-repeat;
 background-size:100% auto;background-position:0 56.41677%;pointer-events:none;
 mask-image:linear-gradient(transparent,#000 9%,#000 93%,transparent);
}
#zodiac .zodiac-figure figcaption {
 width:94%;margin:7px auto 0;font-family:inherit;font-size:13px;font-weight:400;
 font-style:normal;line-height:1.4;text-align:center;letter-spacing:-.22px;color:#474c41;
}
#zodiac .zodiac-inner > .zodiac-example {border:0;padding:0;line-height:1.35}
#zodiac .zodiac-inner > .zodiac-conclusion {
 margin-top:17px;padding:13px 16px 13px;border:0;border-radius:15px;background:#eee8fc;text-align:center;line-height:1.33;
}
#zodiac .zodiac-conclusion strong {color:#504094}
#zodiac .section-action {width:88.6%;margin:12px auto 0;text-align:center}
main > #zodiac.section #zodiac-cta.cta {
 width:100%;min-width:0;max-width:none;min-height:55px;padding:12px 14px;
 border:0;border-radius:17px;font-family:inherit;font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.35px;
 background:linear-gradient(110deg,#5744a4,#41327f 52%,#51469d);
 color:#fff;box-shadow:0 3px 0 #302062,0 12px 24px rgba(70,49,124,.12);
}
main > #zodiac.section #zodiac-cta.cta:hover {background:linear-gradient(110deg,#654dba,#4e3c94 50%,#6d5bbf);box-shadow:0 5px 0 #302062,0 15px 25px rgba(70,49,124,.15);transform:translateY(-2px)}
main > #zodiac.section #zodiac-cta.cta:active,
main > #zodiac.section #zodiac-cta.cta.is-pressed {transform:translateY(2px);box-shadow:0 1px 0 #302062,0 5px 15px rgba(70,49,124,.12)}
main > #zodiac.section #zodiac-cta.cta:focus-visible {outline:3px solid #504094;outline-offset:7px}
@media(max-width:359px) {
 main > #zodiac.section #zodiac-title.section-title {font-size:24px}
 #zodiac .zodiac-inner > p {font-size:17px}
 #zodiac .zodiac-inner > .zodiac-recognition {padding-inline:13px}
 #zodiac .zodiac-figure figcaption {font-size:12px}
 main > #zodiac.section #zodiac-cta.cta {font-size:20px}
}
@media(min-width:600px) and (max-width:1099px) {
 #zodiac {padding:44px 0}
 main > #zodiac.section #zodiac-title.section-title {font-size:32px;line-height:1.2;max-width:510px}
 #zodiac .zodiac-inner > p {font-size:20px;line-height:1.4}
 #zodiac .zodiac-scene {width:90%;margin-inline:auto}
 #zodiac .zodiac-figure figcaption {font-size:15px}
 main > #zodiac.section #zodiac-cta.cta {font-size:24px;min-height:64px}
}
@media(min-width:1100px) {
 #zodiac {--zodiac-art:url('assets/zodiac-approved-desktop.avif');padding:clamp(62px,5.99vw,100px) 0 clamp(52px,4.67vw,78px)}
 #zodiac .zodiac-inner {max-width:1680px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.972fr);column-gap:1.51%;align-items:start;padding-right:min(3.4vw,57.12px)}
 main > #zodiac.section #zodiac-title.section-title {
  grid-column:2;width:100%;margin:0 0 clamp(24px,1.88vw,32px);color:#504094;text-align:left;
  font-size:clamp(33px,2.9vw,48px);font-weight:800;line-height:1.2;letter-spacing:-1.45px;
 }
 #zodiac .zodiac-title-accent {background:#e5def7;border-radius:.4em;padding:.08em .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
 #zodiac .zodiac-inner > p {grid-column:2;width:100%;font-size:clamp(19px,1.64vw,27.5px);line-height:1.27;letter-spacing:-.65px}
 #zodiac .zodiac-inner > .zodiac-recognition {font-size:clamp(18px,1.513vw,25.2px);padding:clamp(18px,1.4vw,24px) clamp(25px,2.77vw,46px);border-radius:22px;text-align:left;line-height:1.28}
 #zodiac .zodiac-recognition strong {color:#47474b}
 #zodiac .zodiac-inner > .zodiac-explanation {margin-top:clamp(23px,1.97vw,33px);font-size:clamp(19px,1.64vw,27.5px);line-height:1.27}
 #zodiac .zodiac-figure {grid-column:1;grid-row:1/span 6;align-self:center;width:102.5%;margin:0;transform:translateY(0)}
 #zodiac .zodiac-scene {width:100%;aspect-ratio:784/680;background-size:202.295918% auto;background-position:0 48.076923%;mask-image:linear-gradient(transparent,#000 5%,#000 93%,transparent)}
 #zodiac .zodiac-figure figcaption {font-size:clamp(14px,1.2vw,20px);line-height:1.35;margin-top:7px;letter-spacing:-.3px}
 #zodiac .zodiac-inner > .zodiac-example {margin-top:clamp(23px,1.9vw,32px);line-height:1.27}
 #zodiac .zodiac-inner > .zodiac-conclusion {margin-top:clamp(21px,1.57vw,27px);padding:clamp(18px,1.4vw,24px) clamp(25px,2.77vw,46px);border-radius:22px;text-align:left;line-height:1.28}
 #zodiac .zodiac-conclusion strong {color:#47474b}
 #zodiac .section-action {grid-column:2;width:100%;margin-top:clamp(18px,1.26vw,22px)}
 main > #zodiac.section #zodiac-cta.cta {border-radius:27px;min-height:clamp(64px,4.55vw,76px);font-size:clamp(25px,2vw,33px);letter-spacing:-.6px}
}
@media(prefers-reduced-motion:reduce) {
 main > #zodiac.section #zodiac-cta.cta {transition:none}
 main > #zodiac.section #zodiac-cta.cta:hover {transform:none}
}

/* Reference wraps at the approved phone size; smaller phones wrap naturally. */
#zodiac .zodiac-br-mobile {display:none}
@media(min-width:380px) and (max-width:599px) {
 #zodiac .zodiac-title-row {display:block}
 #zodiac .zodiac-br-mobile {display:block}
}

@media(min-width:1100px) {#zodiac .zodiac-recognition-break {display:block}}