/* Studio Blocks: memberships. Framework-only fixes. */
/* The library toggles Monthly/Yearly under a .variant wrapper; the framework wraps looks in .blk instead. */
body .sb-memberships .blk:has(input[value="year"]:checked) .yr{display:inline}
body .sb-memberships .blk:has(input[value="year"]:checked) .mo{display:none}
/* 13: who-is-joining radios use value w0, w1, w2 (any number of options). */
body .sb-memberships .m13 .who{display:none}
body .sb-memberships .m13:has(input[value="w0"]:checked) .who.w0,body .sb-memberships .m13:has(input[value="w1"]:checked) .who.w1,body .sb-memberships .m13:has(input[value="w2"]:checked) .who.w2,body .sb-memberships .m13:has(input[value="w3"]:checked) .who.w3{display:block}
/* 04: the table has as many plan columns as items. */
body .sb-memberships .m4-r{grid-template-columns:minmax(0,2.2fr) repeat(var(--n,3),minmax(0,1fr))}
@media (max-width:767px){body .sb-memberships .m4-r{grid-template-columns:minmax(0,1.6fr) repeat(var(--n,3),minmax(0,1fr))}}
/* Dark buttons/bands: --pb-text turns light on dark rows. */
body .sb-memberships.sb-dark .ink{background:var(--color-headings,var(--pb-ink))}
/* The theme's global h3/link colors and .section cap. */
body .sb-memberships .blk h3{color:inherit}
/* :where keeps this default below a look's own h3 size (09, 14, 17 set their own). */
body .sb-memberships :where(.blk) h3{font-size:clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium))}
body .sb-memberships .m5-opts .step button{cursor:pointer}
/* 00: the empty state keeps its 720px column (the frame removes .wrap's max-width, so cap the card). */
body .sb-memberships .sbi17 .empty{max-width:720px;margin-inline:auto}
/* 15: the library's global p size rule must not shrink the big price. */
body .sb-memberships .m15 .big{font-size:clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) !important}
/* Units stay on the price line (the frame is narrower than the library page). */
body .sb-memberships .price .per{white-space:nowrap}
/* 11: ticket stub buttons wrap inside the card on phones. */
body .sb-memberships .m11-pass .stub{flex-wrap:wrap}
@media (max-width:900px){body .sb-memberships .m11-pass .stub .btn{white-space:normal;text-align:center;padding-block:12px}}

/* Result line of a posted form (shared Forms submit): inherits the look text color. */
body .sb-memberships .sbstatus { margin: 12px 0 0; font-weight: var(--pb-ui-weight); }

/* 12, 20: the library's ol keeps the browser indent and margin (the theme resets them). */
body .sb-memberships .m12-path{padding-left:40px;margin-bottom:17px}
body .sb-memberships .m20-steps{padding-left:40px;margin-top:17px}
/* 15: the theme's p line-height must not loosen the big price. */
body .sb-memberships .m15 .big{line-height:1 !important}
/* 13: the design's own 860px column (the frame removes .wrap's max-width). */
body .sb-memberships .blk.m13 .wrap{max-width:860px !important}
/* Text links with an arrow: the library's link is one text run, sb_a adds a span, so no flex gap between them. */
body .sb-memberships .tlink{gap:0}
/* Branding text sizes. Kept here so Studio library re-extraction preserves these roles. */
body .sb-memberships { font-size: var(--fs-copy) }
body .sb-memberships .fh { font-size: var(--fs-small-titles-size) }
body .sb-memberships .fl { font-size: var(--fs-small) !important }
body .sb-memberships .small { font-size: var(--fs-small) !important }
body .sb-memberships .btn { font-size: var(--fs-buttons) }
body .sb-memberships .fbot { font-size: var(--fs-small) !important }
body .sb-memberships .inp { font-size: var(--fs-copy) !important }
body .sb-memberships .intro h1 { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) }
body .sb-memberships .intro p { font-size: var(--fs-small) !important }
body .sb-memberships .toggles button { font-size: var(--fs-small) }
body .sb-memberships .blk h2.hd { font-size: clamp(calc(var(--fs-titles) * 0.65), 3.75vw, var(--fs-titles)) !important }
body .sb-memberships .lead { font-size: var(--fs-lead) !important }
body .sb-memberships .price { font-size: clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) !important }
body .sb-memberships .per { font-size: var(--fs-small) !important }
body .sb-memberships .note { font-size: var(--fs-small) !important }
body .sb-memberships .tag { font-size: var(--fs-small-titles-size) }
body .sb-memberships .seg label { font-size: var(--fs-small) !important }
body .sb-memberships .seg small { font-size: var(--fs-small) !important }
body .sb-memberships .fld > span { font-size: var(--fs-small) !important }
body .sb-memberships .rowline { font-size: var(--fs-small) !important }
body .sb-memberships .rowline.total { font-size: var(--fs-copy) !important }
body .sb-memberships .step button { font-size: var(--fs-lead) }
body .sb-memberships .empty h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m1-card h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m1-card p.d { font-size: var(--fs-small) !important }
body .sb-memberships .m1-card .checks { font-size: var(--fs-small) !important }
body .sb-memberships .m2-row h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m2-row p { font-size: var(--fs-small) !important }
body .sb-memberships .m2-row ul { font-size: var(--fs-small) !important }
body .sb-memberships .m2-buy .price { font-size: clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) !important }
body .sb-memberships .m4-r.hdr b { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-memberships .m4-r.hdr span { font-size: var(--fs-small) !important }
body .sb-memberships .m4-r .lbl2 { font-size: var(--fs-small) !important }
body .sb-memberships .m4-r.cta .btn { font-size: var(--fs-buttons) !important }
body .sb-memberships .m5-opts b { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-memberships .m5-opts span { font-size: var(--fs-small) !important }
body .sb-memberships .m5 .panel h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m6 .panel h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m6 .panel .checks { font-size: var(--fs-small) !important }
body .sb-memberships .m7-card .org { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m7-card .who { font-size: var(--fs-small) !important }
body .sb-memberships .m7-card .meta { font-size: var(--fs-small) !important }
body .sb-memberships .m8-status dl { font-size: var(--fs-small) !important }
body .sb-memberships .m8-dot { font-size: var(--fs-small) !important }
body .sb-memberships .m8-opt h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m8-opt .price { font-size: clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) !important }
body .sb-memberships .m8-opt .diff { font-size: var(--fs-small) !important }
body .sb-memberships .m9-perks h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m9-perks p { font-size: var(--fs-small) !important }
body .sb-memberships .m10-card h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m10-card .bd p { font-size: var(--fs-small) !important }
body .sb-memberships .m10-card .bd p.price { font-size: clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) !important }
body .sb-memberships .m11-pass h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m11-pass .main p { font-size: var(--fs-small) !important }
body .sb-memberships .m11-pass .stub .price { font-size: clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) !important }
body .sb-memberships .m12-path li::before { font-size: var(--fs-titles-small) }
body .sb-memberships .m12-path span { font-size: var(--fs-small) !important }
body .sb-memberships .m13-out .price { font-size: clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) !important }
body .sb-memberships .m14-tier h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m14-tier .checks { font-size: var(--fs-small) !important }
body .sb-memberships .m15-meter p { font-size: var(--fs-small) !important }
body .sb-memberships .m15 .big { font-size: clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) }
body .sb-memberships .m16-choices span { font-size: var(--fs-small) !important }
body .sb-memberships .m17-grid h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m17-grid p { font-size: var(--fs-small) !important }
body .sb-memberships .m17-bar .price { font-size: clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) !important }
body .sb-memberships .m18-card h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m18-card > p { font-size: var(--fs-small) !important }
body .sb-memberships .m18-opts b { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m18-opts em { font-size: var(--fs-small) !important }
body .sb-memberships .m19-list b { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m19-list span { font-size: var(--fs-small) !important }
body .sb-memberships .m19-list em { font-size: var(--fs-small) !important }
body .sb-memberships .m20-steps li { font-size: var(--fs-small) !important }
body .sb-memberships .m20-plans b { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-memberships .m20-plans .price { font-size: clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) !important }
body .sb-memberships .m20-plans span { font-size: var(--fs-small) !important }
body .sb-memberships .sbi12 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-memberships .sbi14 { font-size: var(--fs-copy) !important }
body .sb-memberships .m12-path b { font-size: var(--fs-titles-small) !important }

/* 3.6.10: the card footer holds the price and a button side by side; at the Huge size the price pushed the button
   past the card edge (MEM-10). The design's card price is about 36px; the button drops below when it still can't fit. */
body:not(.cc-look-pre-3-6-10) .sb-memberships .m10-card .bd p.price { font-size: clamp(30px, 2.8vw, 44px) !important; }
body:not(.cc-look-pre-3-6-10) .sb-memberships .m10-card .bd .foot { flex-wrap: wrap; }
/* 3.6.10: partner names share a narrow two-column list with their offer tag; the design sets them at about 22px, and at
   the Medium title size they wrapped one word per line (MEM-19). */
body:not(.cc-look-pre-3-6-10) .sb-memberships .m19-list b { font-size: clamp(18px, 1.6vw, calc(var(--fs-medium) * .5)); }
body:not(.cc-look-pre-3-6-10) .sb-memberships .m6-note { margin: 10px 0 24px; }
/* 3.6.10: on a featured (primary) plan card the site's button colors won, leaving white text with no button shape on the
   primary fill (MEM-01). The featured button is the light one, as designed. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-memberships .m1-card.feat .btn:not(.ghost) { background: var(--color-on-main); color: var(--color-main); border-color: var(--color-on-main); }
/* The check marks on the featured card use the Secondary color, which can be as dark as the text on a primary fill. */
body:not(.cc-look-pre-3-6-10) .sb-memberships .m1-card.feat .checks svg { color: var(--color-on-main); }
body:not(.cc-look-pre-3-6-10) .sb-memberships .m-note { margin-top: 12px; }
/* Same on the primary panels (.pri, MEM-15): the light button keeps its shape. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-memberships .pri .btn:not(.ghost) { background: var(--color-on-main); color: var(--color-main); border-color: var(--color-on-main); }
/* 3.6.10: 17's dark price bar (Copy color with page-color words) turned white with white words on a dark band, where the
   copy color flips to white: on a dark band it paints Branding Dark like the other own dark panels; its button stays light. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-memberships.sb-dark .m17-bar { background: var(--pb-ink); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-memberships.sb-dark .m17-bar .btn { color: var(--pb-ink); }