/* SELL-FIRST-1 Web additions on top of Creative sell-first-1.css v0.3.1 (12b4ada6). Only what Creative does not cover. */
/* Footer: the 6 Online Course names under the Learn row (parent brief: 'Online Courses' column with the 6 product names) */
.site-footer--sell .sf-foot-nav{flex-basis:100%}
.site-footer--sell .sf-foot--courses{margin-top:4px}
.site-footer--sell .sf-foot--courses a{font-size:.9375rem;color:var(--nn-text-meta,#B4BCCB)}
/* /class/ first screen at 390x844 (Creative handoff: Buy bottom 563-642px). Creative measured on a mockup stub whose page-title is 1.75rem / 32px top;
   the live page-title-band-v1 uses !important paddings and a 2.28rem H1, which put Buy at 656-749px. Scoped to .page--class-sell, phones only. */
@media (max-width:479.98px){
main.page--class-sell > section.page-title{padding:24px 0 0 !important}
main.page--class-sell .page-title__h{font-size:1.75rem;line-height:1.15}
main.page--class-sell .page-title__sub{margin-top:6px;font-size:1.125rem}
main.page--class-sell > section.page-title + .class-lead{padding-top:16px !important}
main.page--class-sell > section.cl-buy{padding-top:20px !important}}
/* Creative P1 (2026-10-31 11:18 PM ET): the disabled signup button must look disabled; .sf-free .signup .btn--primary (sell-first-1.css) overrode .btn[disabled]. */
.sf-free .signup .btn--primary[disabled],
.sf-free .signup .btn--primary[disabled]:hover,
.sf-free .signup .btn--primary[disabled]:focus-visible{background:var(--action-disabled-bg,#2E3036);color:var(--action-disabled-text,#C9D0DB);border-color:var(--action-disabled-border,#4A4C53);cursor:not-allowed}
/* HERO-LINK-ALIGN-1 (Craig 7:55-7:58 AM ET 2026-11-01): the theme hero has no CTA block; it ends at the intro paragraph, so the gap to the
   sample lesson = the standard section gap (--sf-sec-y: 72px / 48px under 768). The button after the sample stands alone, centred on the card. */
.sf-hero{padding-bottom:0}
.sf-hero__sub{margin-bottom:0}
.sf-cta--solo{justify-content:center;text-align:center}
/* Hub home: Online Courses + Free email series row lines up with the audience tiles above it (same edges, gap and inner padding as .aud);
   both cards equal height, buttons pinned to the bottom with the same height so the two CTAs sit on one line. */
.h3b--sell{gap:16px}
@media (min-width:600px){.h3b--sell{gap:20px}}
@media (min-width:900px){.h3b--sell{align-items:stretch}}
@media (min-width:1024px){.h3b--sell{gap:24px}}
.h3b--sell .h3b__item--classes .h3b__card,.h3b--sell .h3b__item--free .h3b__card{display:flex;flex-direction:column;box-sizing:border-box;padding:24px 24px 22px}
@media (min-width:1024px){.h3b--sell .h3b__item--classes .h3b__card,.h3b--sell .h3b__item--free .h3b__card{padding:28px 28px 24px}}
.h3b--sell .h3b__item--classes .h3b__btn,.h3b--sell .h3b__item--free .h3b__btn{margin-top:auto;min-height:56px}
.h3b--sell .h3b__item--classes .h3b__list,.h3b--sell .h3b__item--free .h3b__list{margin-bottom:28px}
@media (max-width:899.98px){.h3b--sell .h3b__item--free{max-width:none}.h3b--sell .h3b__item{max-width:none}}
/* HERO-LINK-ALIGN-1 (Craig 7:55 AM ET "make sure everything is always lined up"; parent item 6): 'Inside the Online Course' sits on the sample card's
   container edge (reading width 760) at every width. Above 1024 it uses Creative's own single-column course layout (the <1024 state: offer card, then modules). */
.sf #course > .sf-wrap--wide{max-width:calc(760px + 2 * var(--sf-gutter))}
@media (min-width:1024px){.sf-course{grid-template-columns:minmax(0,1fr);gap:32px}
  .sf-course > .sf-offer{position:static;grid-column:auto;grid-row:auto}.sf-course > .sf-course__main{grid-column:auto;grid-row:auto}}
/* HERO-LINK-ALIGN-1 (Craig 8:03 AM ET "something funky with coloring"): the live .signup-panel glass (backdrop-filter blur + brightness .7) drew a darker
   square rectangle inside the #191B20 card. In .sf-free the form sits straight on the card (card padding only). Inputs keep their own fill + 1px border. */
.sf-free .signup-panel,.sf-free .signup,.sf-free .signup form{background:transparent;box-shadow:none;border:0;padding:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
/* HERO-LINK-ALIGN-1 (Craig 8:04 AM ET "the yellow highlight is too much... keep the yellow before pill"): BEFORE panel = the neutral panel; the amber
   BEFORE pill (.ba__label, site-review-1 af4f7fcb) and the dashed notes well stay; AFTER unchanged. Overrides af4f7fcb (not edited). */
.ba__panel--before{background:var(--nn-panel,#191B20);border:1px solid rgba(255,255,255,.10);box-shadow:none}
/* ... "check consistency on the View the course buttons": after the before/after = the after-sample CTA (same primary .btn--lg, centred), with the
   'Module N covers...' line centred above it as small muted text, 12px gap. */
.sf-cta--ba{flex-direction:column;justify-content:center;text-align:center;gap:12px}
@media (min-width:600px){.sf-cta--ba{align-items:center}}
.sf-cta--ba .sf-cta__line{max-width:60ch;font-weight:400;font-size:.9375rem;line-height:1.5;color:var(--nn-text-meta,#B4BCCB)}
/* HERO-LINK-ALIGN-1 (Creative 2026-11-01 08:20): the offer-card price block was a second, unpadded nested panel; remove its fill (theme-page offer card only; /class/ .cl-buy untouched). */
.sf-offer .price{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}