/* Health goal page fixes on top of programmes-v20.css (kept as the design system's copy). */

/* The FAQ photograph crops the glass drop at its sides and lower edge. The frame takes the photograph's own 4:5 shape,
   so those edges are the frame's edges, and they fade into the page instead of ending in a hard cut. */
html.plan-release-v20 .faq-glass-v39{width:auto;max-width:100%;aspect-ratio:.8;justify-self:center;margin-inline:auto;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 52%,transparent 96%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,#000 52%,transparent 96%);mask-composite:intersect}
@media(max-width:800px){
 html.plan-release-v20 .faq-glass-v39{height:min(420px,105vw);margin-bottom:4px}
}

@media(max-width:760px){
 /* A larger twin on phones, starting under the heading. */
 html.plan-release-v20 #your-biology .hero-media{top:128px;height:470px}
 html.plan-release-v20 #your-biology .content{padding-top:600px}

 /* The twin's example controls stay on one row; its call to action takes the full row beneath them. */
 html.plan-release-v20 #your-biology .rail-footer{flex-wrap:wrap;row-gap:12px}
 html.plan-release-v20 #your-biology .rail-footer .mobile-kit-cta{flex:1 0 100%;margin-left:0;justify-content:space-between}
 /* More room for the label in the hero and closing actions. */
 html.plan-release-v20 :is(.hero-frame .hero-copy,.closing) a.order-button{padding-left:18px;gap:8px}

 /* The men's photograph has its subject on the left, unlike the 70% crop the closing card uses for the others. */
 html.plan-release-v20 .closing>img[src*="men-photo"]{object-position:28% 10%}
 /* "Your data stays connected" uses the same width as the sections around it, and its app icons wrap instead of being cut. */
 html.plan-release-v20 .world-connected{padding-inline:20px}
 html.plan-release-v20 .world-connected .pricing-inner{width:auto;max-width:none;margin-inline:0}
 html.plan-release-v20 .world-connected .premium-apps{flex-wrap:wrap;overflow:visible;gap:6px}
}

/* Hero from the design-system branch: a light, warm frame with dark copy and a white call to action, in place of the burnt-orange veil. */
html.plan-release-v20 .hero-frame{background:linear-gradient(28deg,#fff 2%,#f7ead5 45%,#f0d7b0);color:#272a30}
html.plan-release-v20 .hero-frame .hero-photo{mask-image:linear-gradient(90deg,transparent,#000 25%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%)}
html.plan-release-v20 .hero-frame .hero-veil{background:linear-gradient(90deg,#f7ead5 0%,#f7ead5d9 34%,#f7ead53d 61%,transparent 78%)}
html.plan-release-v20 .hero-frame :is(h1,h1 em,.eyebrow){color:#272a30!important;font-style:normal}
html.plan-release-v20 .hero-frame .hero-intro{color:#42464c!important}
html.plan-release-v20 .hero-frame .hero-facts{color:#55585e!important}
html.plan-release-v20 .hero-frame .order-button{background:#fff!important;border-color:#fff!important;color:#272a30!important}
html.plan-release-v20 .hero-frame .arrow-disc{color:#272a30!important;border-color:#b9bec1!important}
@media(max-width:760px){
 html.plan-release-v20 .hero-frame .hero-photo{mask-image:linear-gradient(#000 75%,transparent);-webkit-mask-image:linear-gradient(#000 75%,transparent)}
}

/* "Your biology": the Home bust and face scan (twin-portrait-goal-v1.js) replaces the full-body twin once it has drawn. */
html.plan-release-v20 #your-biology .goal-twin-scan{position:absolute;z-index:1;pointer-events:none}
html.plan-release-v20 #your-biology .goal-twin-portrait>img.fallback,html.plan-release-v20 #your-biology .goal-twin-portrait>#portrait{visibility:hidden}
html.plan-release-v20 #your-biology .goal-twin-scan{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* The call to action ends at the body's centre line, between the column's edge and the middle of the bust. */
html.plan-release-v20 #your-biology.goal-twin-centred .desktop-kit-cta{left:var(--goal-twin-centre);right:auto;translate:-100% 0}
@media(max-width:760px){html.plan-release-v20 #your-biology.goal-twin-ready .content{padding-top:var(--goal-twin-bottom)}}
@media(max-width:760px){html.plan-release-v20 #your-biology .goal-twin-scan{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(#000 78%,transparent);mask-composite:intersect}}