/* Font roles from coach-dashboard MembershipPurchasePage / index.css. */
/* Resolve from the shared palette before applying the preview's softer text. */
:root{
 --ry-text-heading:color-mix(in srgb,var(--text) 92%,var(--bg));
 --ry-text-body:color-mix(in srgb,var(--text) 84%,var(--bg));
 --ry-text-meta:color-mix(in srgb,var(--text) 76%,var(--bg));
 --ry-divider:color-mix(in srgb,var(--text) 60%,var(--bg));
}
body{
 --text:var(--ry-text-heading);
 --text-2:var(--ry-text-body);
 --text-3:var(--ry-text-meta);
 --line:var(--ry-divider);
 color:var(--text-2);
 --ry-font-copy:'Hanken Grotesk',sans-serif;
 --ry-type-hero:2.125rem;
 --ry-type-method:1.4375rem;
 --ry-type-section:1.125rem;
 --ry-type-body:1rem;
 --ry-type-meta:.75rem;
 font-size:var(--ry-type-body);
}
h1,h2,h3,h4{color:var(--text)}
.hero-product,.offer-hero-copy h1,
.section-intro h2,.tools-intro h2,.workout-copy h2,.nutrition h2,
.evening h2,.people h2,.end-intro h2,.courses-compact h2,.questions h2{
 font-size:var(--ry-type-hero);line-height:1.16;
}
.program .journey-heading h3,.phase-photo-title h4,
.included-list h3,.training-heading h3,.today-head h3,.receipt-title{
 font-size:var(--ry-type-method);line-height:1.25;
}
.course-list h3,.questions summary{
 font-size:var(--ry-type-section);line-height:1.3;
}
.hero-goal,.hero-description,.section-intro>p,.included-list p,
.phase-purpose,.phase-content li,.program-extras p>span,.release-note,
.workout-copy>p:last-of-type,.workout-facts,.training-instruction,
.nutrition-copy,.photo-question,.companion-reply>p,
.reply-name>span:not(.reply-type),.evening-heading>p:last-child,
.people-copy>p:not(.eyebrow),.community-facts,.community-facts p,
.course-list p,.courses-note,.end-intro>p:not(.eyebrow),
.offer-receipt li,.price-preview>p:last-child,.questions details p,
.planner-day-name,.planner-day-training,.gold-button,.round-link{
 font-family:var(--ry-font-copy);font-size:var(--ry-type-body);line-height:1.5;
}
.program-extras strong{font-family:var(--ff-display);font-size:1.25rem;font-weight:500;line-height:1.25}
.program-extras .extra-symbol{display:block;flex:0 0 var(--sp-4);width:var(--sp-4);height:var(--sp-4);margin-right:var(--sp-2);margin-top:var(--sp-1);transform:scale(1.1);transform-origin:left center}
.end-intro .continuation{font-size:var(--ry-type-body)!important;line-height:1.5}
.eyebrow,.people .eyebrow,.scene-label,.scene-label>span,
.journey-heading p,.phase-tabs button,.phase-tabs button span,
.phase-week,.phase-photo-title>span,.phase-content li>span,
.program-video-caption,.journey-controls p,.swipe-hint,.included-type,
.next-chapter,.photo-caption,.training-history,.dashboard-example-note,
.reply-name small,.reply-tail,.nutrition-foot,.evening-foot,
.planner-day-progress p,.planner-day-denominator,.today-head>span,.today-note,
.people-photo figcaption,.offer-receipt li strong,
.subscription-note,.preview-label,.offer-footer{
 font-size:var(--ry-type-meta);line-height:1.4;
}
.price-preview strong{font-size:1.5rem;line-height:1.333333}
.planner-day-progress strong{font-size:1rem;line-height:1.5}
.membership-training-table{font-size:var(--ry-type-body);line-height:1.5}
.membership-training-table thead th{font-size:var(--ry-type-meta);line-height:1.4}
.membership-training-table tbody th{font-size:1rem;line-height:1.5}
.membership-training-table td{font-size:var(--ry-type-section);line-height:1.5}
/* Embedded PlannerPreview uses its own heading scale in the dashboard. */
.evening h2{font-size:2.375rem;line-height:1.1}
@media(min-width:1024px){.evening h2{font-size:clamp(2.25rem,4.5vw,3.75rem);line-height:1.12}}
@media(max-width:360px){.evening h2{font-size:2.125rem}}
/* Keep the product name centered in the visible, bottom-trimmed mobile photo. */
.offer-hero-copy{padding-top:184px}
@media(max-width:700px){
 .hero-product{top:160px;transform:translateY(-50%)}
 .offer-hero-copy{padding-top:0}
}
@media(max-width:640px){
 .hero-product,.offer-hero-copy h1{font-size:clamp(1.8125rem,8.5vw,2.125rem)}
}
@media(max-width:500px){.hero-product{top:148px}}
@media(max-width:360px){.hero-product{top:128px}}

/* Use the same heading size as the surrounding sections. */
.offer-hero-copy h1{font-size:var(--ry-type-hero);line-height:1.16}

.hero-highlight{color:var(--gold);font-weight:500}

/* MembershipPurchasePage: purchase-primary. */
.gold-button{
 font-family:var(--ff-body);
 display:inline-flex;min-height:48px;align-items:center;justify-content:center;
 gap:var(--sp-3);border-radius:var(--r-md);background:var(--gold);
 padding:var(--sp-3) var(--sp-5);font-size:.875rem;font-weight:600;
 line-height:1.25rem;text-align:center;color:var(--on-gold);
 transition:background-color 150ms cubic-bezier(.4,0,.2,1),color 150ms cubic-bezier(.4,0,.2,1);
}
.gold-button:hover{background:var(--gold-light)}
.gold-button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.offer-receipt{scroll-margin-top:var(--sp-4)}

/* Keep phase names together and make the selected tab unmistakable. */
.phase-tabs{
 position:relative;gap:0;padding:0;
 overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--gold-muted) transparent;
}
.phase-tabs button{
 flex:1 0 auto;flex-direction:row;gap:var(--sp-1);min-height:56px;
 padding:var(--sp-3) var(--sp-2);white-space:nowrap;border:0;
 border-bottom:3px solid transparent;border-radius:0;
 background:transparent;box-shadow:none;
}
.phase-tabs button:hover{background:var(--surface)}
.phase-tabs button[aria-selected=true]{
 background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold);
 border-color:var(--line-gold);border-bottom-color:var(--gold);
 font-weight:600;box-shadow:none;
}
.phase-tabs button span{font-size:inherit}
.phase-tabs button:focus-visible{outline-offset:-4px}
.journey-panel{min-height:0}
.journey-panel[hidden]{display:none}
.phase-content{padding-top:var(--sp-3)}
.phase-release-note{font-family:var(--ry-font-copy);font-size:var(--ry-type-body);line-height:1.5;color:var(--text-2);margin-bottom:var(--sp-4)}
.phase-content ol{margin-top:0}
.phase-content li>span{font-size:var(--ry-type-body);flex:0 0 var(--sp-6);min-width:var(--sp-6)}
.phase-content li:first-child{border-top:1px solid var(--line);padding-top:var(--sp-3)}
.program-extras{padding-top:var(--sp-4);padding-inline:0;column-gap:0;border-top:1px solid var(--line)}
.program-extras>div{padding-inline:var(--sp-7)}
@media(min-width:701px) and (max-width:1050px){
 .program-extras>div{padding-inline:var(--sp-6);gap:var(--sp-4)}
}
@media(max-width:700px){
 .program-extras>div{padding-inline:var(--sp-5)}
}

.included-list>.included-item{display:block;padding:0 0 var(--sp-6);border-bottom:1px solid var(--line)}
.included-list h3{justify-content:flex-start;align-items:flex-start;gap:var(--sp-3);margin-top:0}
.included-list p{margin-inline-start:calc(var(--sp-6) + var(--sp-3))}
.included-icon{flex:0 0 var(--sp-6);width:var(--sp-6);height:var(--sp-6);color:var(--gold);margin-top:2px}

/* Approved C3 wordmark, copied from the selected mockup proportions. */
.hero-product.ry-wordmark{width:6em;height:2.7em;left:calc(5% - .465em);white-space:nowrap;letter-spacing:normal}
.ry-wordmark .ry-recomp{position:absolute;left:.465em;top:.23em;z-index:1;font:600 1em/1.1 var(--ff-display);letter-spacing:-.05em;color:var(--text)}
.hero-product.ry-wordmark .ry-letter-p{display:inline;color:inherit;-webkit-text-stroke:.05em var(--bg);paint-order:stroke fill}
.hero-product.ry-wordmark .ry-yourself{position:absolute;left:4.1em;top:3.04em;font:600 .51em/1 var(--ff-body);letter-spacing:-.04em;padding:.22em .4em .26em;transform:rotate(-10deg);transform-origin:left center;color:var(--bg-3);background:var(--gold)}
@media(max-width:700px){.hero-product.ry-wordmark{left:calc(var(--sp-5) - .465em)}}

/* Give the wordmark the same visual presence on desktop as in the mobile hero. */
@media(min-width:701px){
 .offer-hero{--desktop-wordmark-size:clamp(3rem,5.5556vw,5rem)}
 .hero-product.ry-wordmark{font-size:var(--desktop-wordmark-size)}
 .offer-hero-copy{padding-top:calc(var(--desktop-wordmark-size) * 2.7 + 76px)}
}

/* Blend the desktop photo into the Aurora without scaling the subjects. */
.offer-hero-media{display:contents}
@media(min-width:701px){
 .offer-hero-media{
  --hero-side-fade:clamp(0px,calc((100vw - 1440px) / 2),160px);
  display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,black var(--hero-side-fade),black calc(100% - var(--hero-side-fade)),transparent),linear-gradient(180deg,black 72%,transparent);
  mask-composite:intersect;
 }
}

/* Supporting copy stays readable without competing with the main text. */
.photo-caption,.training-history,.dashboard-example-note,.today-note,
.membership-tax,.membership-terms,.membership-choice .preview-label{color:var(--text-3)}
