/* sell-first-1.css (Creative, 2026-10-31, SELL-FIRST-1). DRAFT for Web. Not deployed.
   Spec: brand/specs/sell-first-1/spec.md v0.3.1 (v0.3.1: CLO copy-spec r3 f3b18503 (r2 38e66f26 + r3 deltas) - hero size line "{M} modules · {L} lessons", no price (price = founder HOLD
   variant), "View the Online Course", after-before/after CTA secondary, prompts reflow (white-space normal + explicit paragraphs),
   RE swap list as a 2-column table / stacked pairs <360px, compact bottom section, /class/ drops the after-before/after Buy). Nebula night only (space #06060A, panel #191B20, cyan #2FD3EE).
   v0.3: Orion rulings A-J + outside mockup review: hub H2 "What are you looking to learn about?", hub Free card secondary to Courses,
   theme hero price + no-credit line, mid-page buy CTAs, mobile offer-first + collapsed modules, mobile sticky buy bar (dismissible),
   /class/ price-first layout (D. below). v0.2: rebased on LIVE site-review-1.af4f7fcb.css. This file never styles .ba.
   Load AFTER theme-nebula-night-v1.css and site-review-1.af4f7fcb.css (and class.css on /class/). Uses tokens.css (--nn-*, --font-*) with literal fallbacks.
   CSP-safe: no inline style. Content never depends on JS; the only JS is sell-first-1-buybar.js, which only reveals the optional sticky bar.
   Reuses live .btn / .btn--primary / .btn--secondary / .btn--lg, .sl, .ba, .ticks, .pill, .h3b, .offer, .price. */

/* ======================================================================
   A. HUB HOME: audience tiles, sell-first (.aud-section--sell)
   ====================================================================== */
/* H2 "What are you looking to learn about?" (ruling A) in brand cyan: #2FD3EE on #06060A = 11.24:1 (AAA). */
.aud-section--sell .aud-section__h{color:var(--nn-accent-hub,#2FD3EE)}
/* No "See a sample lesson" link: the tile has 2 rows (name, result). Web deletes .aud__sample from the markup;
   these rules make the grid correct even if a stale tile still had one. */
.aud-section--sell .aud{grid-template-areas:"icon name" "icon result";grid-template-rows:auto 1fr}
.aud-section--sell .aud__sample{display:none}
@media (min-width:1024px){
  .aud-section--sell .aud{grid-template-rows:auto auto 1fr;grid-template-areas:"icon" "name" "result"}}
@media (min-width:600px){
  .aud-section--sell .aud-grid > .aud-grid__item:last-child:nth-child(odd) .aud{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"icon name" "icon result"}}
@media (min-width:1024px){
  .aud-section--sell .aud-grid > .aud-grid__item:last-child:nth-child(odd):not(:nth-child(3n+1)) .aud{grid-template-columns:minmax(0,1fr);grid-template-areas:"icon" "name" "result"}
  .aud-section--sell .aud-grid > .aud-grid__item:last-child:nth-child(3n+1) .aud{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"icon name" "icon result"}}
.aud-section--sell .aud__result{margin-bottom:0}
/* Exactly ONE focus ring per tile.
   1) the link never draws its own ring (site-wide a:focus-visible ring cancelled);
   2) browsers with :has(): ring on the whole tile (site-review-1.css line 55, unchanged);
   3) the ::after fallback only runs where :has() is missing, and is drawn INSET (the tile has overflow:hidden,
      so an outer shadow on ::after would be clipped). Never both. */
.aud-section--sell .aud__link:focus-visible{outline:none;box-shadow:none}
.aud-section--sell .aud__link:focus-visible::after{box-shadow:none}
@supports not selector(:has(*)){
  .aud-section--sell .aud__link:focus-visible::after{box-shadow:inset 0 0 0 3px var(--nn-accent-hub,#2FD3EE)}}
@media (forced-colors:active){.aud-section--sell .aud:has(.aud__link:focus-visible){outline:3px solid CanvasText;outline-offset:2px}}


/* A.7 Hub 3-box (v0.3): founder layout kept (row 1 = paid next to free; compact Blog under), but the Free card is now
   visibly SECONDARY: Courses column wider (3fr / 2fr), Free card = quieter well panel, no cyan top rule, no icon tile,
   smaller title, secondary (outline) button. Courses keeps the only filled button. Add class .h3b--sell on ul.h3b. */
@media (min-width:900px){.h3b--sell{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}}
.h3b--sell .h3b__item--classes .h3b__card{border-color:rgba(47,211,238,.40);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 20px 50px -12px rgba(0,0,0,.65)}
.h3b--sell .h3b__item--classes .h3b__btn{gap:10px;white-space:nowrap;min-height:56px;padding:0 32px;font-size:1.1875rem;border-radius:10px}
.h3b--sell .h3b__item--free .h3b__card{padding:28px 24px 28px;background:var(--nn-well,#101115);border-color:var(--nn-hairline,#3A3C42)}
.h3b--sell .h3b__item--free .h3b__card::before{content:none}
.h3b--sell .h3b__item--free .h3b__tile{display:none}
.h3b--sell .h3b__item--free .h3b__pill{margin-top:0;color:var(--nn-text-meta,#B4BCCB);background:transparent;border-color:var(--nn-hairline,#3A3C42)}
.h3b--sell .h3b__item--free .h3b__title{margin-top:12px;font-size:1.25rem}
.h3b--sell .h3b__item--free .h3b__line{font-size:16px}
.h3b--sell .h3b__item--free .h3b__list{margin-top:16px;gap:6px}
.h3b--sell .h3b__item--free .h3b__list li{font-size:15px;color:var(--nn-text-body,#CFD6E1)}
@media (min-width:900px){.h3b--sell .h3b__item--free .h3b__list{margin-bottom:20px}}
/* secondary (outline) look on the Free and Blog card buttons = live .btn--secondary values, 48px */
.h3b--sell .h3b__item--free .h3b__btn,.h3b--sell .h3b__item--blog .h3b__btn{background:transparent;color:#FFFFFF;border:2px solid var(--nn-accent-hub,#2FD3EE);font-weight:700}
.h3b--sell .h3b__item--free .h3b__btn:hover,.h3b--sell .h3b__item--blog .h3b__btn:hover{background:rgba(47,211,238,.12);color:#FFFFFF}
@media (max-width:899.98px){.h3b--sell .h3b__item--free{max-width:440px}}

/* ======================================================================
   B. THEME PAGE FLOW (.sf), same on all 6: business, education, realestate,
      assistants, bookkeeping, hub Everyday Life
   ====================================================================== */
.sf{--sf-gutter:24px;--sf-sec-y:72px}
@media (max-width:767.98px){.sf{--sf-gutter:20px;--sf-sec-y:48px}}
.sf .sf-wrap{box-sizing:border-box;margin:0 auto;padding-left:var(--sf-gutter);padding-right:var(--sf-gutter);width:100%}
.sf .sf-wrap--hero{max-width:calc(880px + 2 * var(--sf-gutter))}
.sf .sf-wrap--read{max-width:calc(760px + 2 * var(--sf-gutter))}
.sf .sf-wrap--ba{max-width:calc(1040px + 2 * var(--sf-gutter))}
.sf .sf-wrap--wide{max-width:calc(1120px + 2 * var(--sf-gutter))}
.sf-sec{padding:var(--sf-sec-y) 0 0}
.sf-sec:last-child{padding-bottom:calc(var(--sf-sec-y) + 8px)}
.sf-sec__h{margin:0 0 12px;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  line-height:1.2;color:var(--nn-text-title,#FFFFFF);text-wrap:balance}
.sf-sec__lead{margin:0 0 28px;max-width:60ch;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:1.0625rem;line-height:1.55;color:var(--nn-text-body,#CFD6E1)}
.sf-sec--center .sf-sec__h,.sf-sec--center .sf-sec__lead{text-align:center;margin-left:auto;margin-right:auto}

/* 1. Hero (replaces page-title "Free 5-day educational series" + hero--flow). Structure: div.sf-hero__kicker (pill + h1.sf-hero__name) -> p.sf-hero__h -> p.sf-hero__sub -> buy row -> jump */
.sf-hero{padding:72px 0 8px;text-align:center}
@media (max-width:767.98px){.sf-hero{padding:40px 0 0;text-align:left}}
.sf-hero__kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;
  font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--nn-text-meta,#B4BCCB)}
.sf-hero__kicker .pill{margin:0}
/* v0.3 (SEO R2/R3 + CLO): the H1 IS the audience name, styled as this kicker; the big "Learn in depth ..." line is p.sf-hero__h.
   Kicker limit 36 characters ("AI for Executive & Admin Assistants" = 35) on one line at 390. */
.sf-hero__name{margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--nn-text-lead,#E6E9EF)}
.sf-hero__h{margin:0 auto 16px;max-width:22ch;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;
  font-size:clamp(2rem,1.35rem + 2.6vw,3rem);line-height:1.1;letter-spacing:-.01em;color:var(--nn-text-title,#FFFFFF);text-wrap:balance}
.sf-hero__sub{margin:0 auto 28px;max-width:52ch;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:1.25rem;line-height:1.5;color:var(--nn-text-lead,#E6E9EF)}
@media (max-width:767.98px){.sf-hero__h{margin-left:0}.sf-hero__sub{margin-left:0;font-size:1.125rem;margin-bottom:24px}}
.sf-hero__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px}
@media (max-width:599.98px){.sf-hero__actions{flex-direction:column;align-items:stretch}.sf-hero__actions .btn{width:100%;justify-content:center}}
/* quiet in-page link under/next to the hero button */
.sf-jump{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 4px;font-family:var(--font-body,"Source Sans 3",sans-serif);
  font-weight:600;font-size:1.0625rem;color:var(--color-cyan-200,#9BE8F6);text-decoration:underline;text-underline-offset:3px;border-radius:8px}
.sf-jump:hover{color:#FFFFFF}
.sf-jump:focus-visible{outline:none;box-shadow:var(--nn-focus-ring,0 0 0 2px #06060A,0 0 0 5px #2FD3EE)}
.sf-jump svg{width:18px;height:18px;flex:none}

/* 2. Paid sample lesson: the .sl component unchanged, plus a quiet "Online Course" pill and from-line */
.sl--paid .sl__top{flex-wrap:wrap;row-gap:8px}
.sl--paid .sl__more a{white-space:nowrap}

/* 2c. v0.3.1 prompt reflow (CLO): soft breaks inside a prompt paragraph may reflow; every word, [bracket] slot and the blank line
   between prompt parts stays. Markup: div.prompt__text > p (one p per prompt part). Applies to the paid samples on theme pages and /class/. */
.sl--paid .prompt__text{white-space:normal;overflow-wrap:anywhere}
.sl--paid .prompt__text > p{margin:0}
.sl--paid .prompt__text > p + p{margin-top:.9em}
/* v0.3.1: sample prompts are 66 words max, so the live phone scroll cap and its bottom fade (site-review-1 l.156-159) are off here; the fade dimmed the last line ("Draft: ...") even with nothing to scroll. */
@media (max-width:767.98px){.sl--paid .prompt__text{max-height:none;overflow:visible;padding-right:0;-webkit-mask-image:none;mask-image:none}}
/* 2d. v0.3.1 lesson "card" that is a two-column list (RE Lesson 4.5 quality-word swap list): a real table, same words, same order;
   the arrow is the column split. >=360px: 2 columns; <360px: stacked pairs (word, then "-> fact"). No sideways scroll. */
.sl-card{margin:16px 0;padding:16px 18px;background:var(--nn-well,#101115);border:1px solid var(--nn-hairline,#3A3C42);border-radius:14px}
.sl-card__title{margin:0 0 10px;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:.8125rem;letter-spacing:.06em;color:var(--nn-text-meta,#B4BCCB)}
.sl-swap{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:.9375rem;line-height:1.45}
.sl-swap col.sl-swap__w{width:40%}
.sl-swap th{padding:0 8px 6px 0;text-align:left;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:.75rem;letter-spacing:.06em;color:var(--nn-text-meta,#B4BCCB);border-bottom:1px solid var(--nn-hairline,#3A3C42)}
.sl-swap td{padding:7px 8px 7px 0;vertical-align:top;color:var(--nn-text-body,#CFD6E1);overflow-wrap:anywhere;border-bottom:1px solid rgba(255,255,255,.06)}
.sl-swap td:first-child{color:var(--nn-text-lead,#E6E9EF);font-weight:600}
.sl-swap tr:last-child td{border-bottom:0}
@media (max-width:359.98px){
  .sl-swap,.sl-swap tbody,.sl-swap tr,.sl-swap td{display:block;width:auto}
  .sl-swap colgroup,.sl-swap thead{display:none}
  .sl-swap tr{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}.sl-swap tr:last-child{border-bottom:0}
  .sl-swap td{padding:0;border:0}
  .sl-swap td + td::before{content:"\2192\00a0";content:"\2192\00a0" / "";color:var(--nn-accent-hub,#2FD3EE)}}

/* 3. Before/after: live .ba from site-review-1.af4f7fcb unchanged (no Example label; amber BEFORE, cyan AFTER). Only a section head. */
.sf-sec--ba .sf-sec__h{margin-bottom:24px}

/* 4. Quick course preview */
.sf-course{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){.sf-course{grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start}
  /* v0.3: the offer card comes FIRST in the DOM (phones see price + Buy before the modules); at >=1024 it sits in the right column */
  .sf-course > .sf-offer{grid-column:2;grid-row:1}.sf-course > .sf-course__main{grid-column:1;grid-row:1}}
.sf-course__h3{margin:0 0 12px;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:1.25rem;line-height:1.3;color:var(--nn-text-title,#FFFFFF)}
.sf-modules{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:8px;counter-reset:none}
.sf-module{display:grid;grid-template-columns:32px minmax(0,1fr) auto;column-gap:14px;align-items:center;padding:12px 16px;
  background:var(--nn-panel,#191B20);border:1px solid rgba(255,255,255,.08);border-radius:14px}
.sf-module__n{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--nn-accent-hub,#2FD3EE);
  color:#06060A;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:.9375rem}
.sf-module__t{margin:0;font-family:var(--font-body,"Source Sans 3",sans-serif);font-weight:600;font-size:1.0625rem;line-height:1.4;color:var(--nn-text-lead,#E6E9EF)}
.sf-module__m{margin:0;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:.9375rem;color:var(--nn-text-meta,#B4BCCB);white-space:nowrap}
@media (max-width:599.98px){.sf-module{grid-template-columns:32px minmax(0,1fr);row-gap:2px;padding:12px 14px}
  .sf-module__n{grid-row:span 2;align-self:start}.sf-module__m{grid-column:2}}
.sf-modules__total{margin:-20px 0 32px;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:.9375rem;color:var(--nn-text-meta,#B4BCCB)}
.sf-leave{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sf-leave li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:1.0625rem;line-height:1.5;color:var(--nn-text-body,#CFD6E1)}
.sf-leave svg{width:20px;height:20px;margin-top:3px;color:var(--nn-accent-hub,#2FD3EE)}
/* the offer card (price + no-credit line + the one primary CTA) */
.sf-offer{position:relative;box-sizing:border-box;padding:28px 28px 24px;background:var(--nn-panel-fill,rgba(25,27,32,.96));
  border:1px solid rgba(47,211,238,.40);border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 50px -12px rgba(0,0,0,.65)}
.sf-offer::before{content:"";position:absolute;top:0;left:24px;right:24px;height:2px;background:var(--nn-accent-hub,#2FD3EE)}
@media (min-width:1024px){.sf-offer{position:sticky;top:24px}}
@media (max-width:599.98px){.sf-offer{padding:24px 20px 20px;border-radius:20px}}
.sf-offer__name{margin:12px 0 8px;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:1.375rem;line-height:1.25;color:var(--nn-text-title,#FFFFFF);text-wrap:balance}
.sf-offer__line{margin:0 0 20px;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:1rem;line-height:1.5;color:var(--nn-text-body,#CFD6E1)}
.sf-offer .price{margin:0 0 20px;padding:16px 0 0;border-top:1px solid var(--nn-hairline,#3A3C42)}
.sf-offer .price__line{margin:0;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:2.25rem;line-height:1.1;color:var(--nn-text-title,#FFFFFF)}
.sf-offer .price__note{margin:8px 0 0;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:.9375rem;line-height:1.45;color:var(--nn-text-meta,#B4BCCB)}
.sf-offer .btn{width:100%;justify-content:center}
.sf-offer__meta{margin:12px 0 0;text-align:center;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:.9375rem;color:var(--nn-text-meta,#B4BCCB)}

/* 5. Bottom: "Not convinced? Try it for free" + the LIVE inline signup form (Orion 9:48 PM ET: the niche form stays inline on the theme home).
   A calm secondary panel: #191B20, hairline border, no cyan rule, no glow, ~560px wide. It wraps the heading, the line and the live
   .signup-panel > form.signup#signup-form exactly as live (markup, consent, hidden fields, Brevo flow unchanged). The live form keeps its
   own field styles; only its card chrome is flattened so the panel is the one surface, and its submit takes the secondary (outline) look
   so it never competes with the buy buttons. The live form title h2#signup keeps the anchor (one id="signup" per page). */
.sf-sec--free{padding-bottom:calc(var(--sf-sec-y) + 8px)}
.sf-free{box-sizing:border-box;max-width:560px;margin:0 auto;padding:36px 32px 32px;background:var(--nn-panel,#191B20);
  border:1px solid var(--nn-hairline,#3A3C42);border-radius:24px;box-shadow:none}
@media (max-width:599.98px){.sf-free{padding:24px 18px 22px;border-radius:20px}}
.sf-free__h{margin:0 0 8px;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:clamp(1.375rem,1.15rem + .9vw,1.75rem);line-height:1.2;color:var(--nn-text-title,#FFFFFF)}
.sf-free__line{margin:0 0 20px;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:1.0625rem;line-height:1.55;color:var(--nn-text-body,#CFD6E1)}
/* the live wrapper + form, flattened (no card-in-card) */
.sf-free .signup-panel{margin:0;padding:0;background:transparent !important;border:0;box-shadow:none;border-radius:0}
.sf-free .signup-panel::before{content:none !important}
.sf-free .signup{margin:0;padding:0;background:transparent;border:0;box-shadow:none !important;border-radius:0}
.sf-free .signup__title{margin:0 0 16px;font-size:1.125rem;line-height:1.35;font-weight:700;color:var(--nn-text-lead,#E6E9EF)}
.sf-free .signup__title:target,.sf-free .signup__title:focus{scroll-margin-top:24px}
/* live submit .btn.btn--primary.btn--lg.btn--block -> secondary (outline) look inside .sf-free only */
.sf-free .signup .btn--primary{background:transparent;color:#FFFFFF;border:2px solid var(--nn-accent-hub,#2FD3EE)}
.sf-free .signup .btn--primary:hover{background:rgba(47,211,238,.12);color:#FFFFFF}
.sf-free .signup__day1{margin:10px 0 0;font-size:.9375rem;color:var(--nn-text-meta,#B4BCCB);text-align:center}
.sf-free .free__after{display:none} /* v0.3.1: the 2 free-series steps are dropped (CLO r2); Web removes them from the markup */
/* v0.3.1 compact order (CLO r2): h2 (no id) -> free line -> course line -> live form (h2#signup kept) -> quiet "Ready now?" link -> closed FAQ */
.sf-free__course{margin:-12px 0 20px;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:.9375rem;line-height:1.5;color:var(--nn-text-meta,#B4BCCB)}
.sf-free__ready{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-family:var(--font-body,"Source Sans 3",sans-serif);font-weight:600;font-size:1rem;
  color:var(--color-cyan-200,#9BE8F6);text-decoration:underline;text-underline-offset:3px;border-radius:6px}
.sf-free__ready:hover{color:#FFFFFF}
.sf-free__ready:focus-visible{outline:none;box-shadow:var(--nn-focus-ring,0 0 0 2px #06060A,0 0 0 5px #2FD3EE)}
.sf-free-faq .faq summary:focus-visible{outline:3px solid var(--nn-accent-hub,#2FD3EE);outline-offset:2px}
/* v0.3.1 Everyday Life (/everyday-ai/, no form, CLO r3): h2.sf-free__h#signup, line, secondary a.btn.btn--secondary "Start the free series"
   -> https://siqwes.com/free/everyday-ai/#signup, then the quiet .sf-free__ready link. No FAQ. */
.sf-free--everyday .sf-free__h{scroll-margin-top:24px}
.sf-free--everyday .sf-free__cta{display:flex;margin:4px 0 0}
@media (max-width:599.98px){.sf-free--everyday .sf-free__cta .btn{width:100%}}
/* the free-series FAQ (moved from mid-page, text + FAQPage JSON-LD unchanged) follows the panel at reading width */
.sf-free-faq{max-width:560px;margin:32px auto 0}
.sf-free-faq .sf-free-faq__h{margin:0 0 12px;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:1.25rem;color:var(--nn-text-title,#FFFFFF)}


/* ---------- v0.3 additions to the theme page ---------- */
/* 1b. Hero price block next to the hero button: price + size, the no-credit line directly under (house rule).
   Same data as /class/ (data-price-line, data-no-credit). >=600: button | price block side by side; <600: stacked under the button. */
.sf-hero__buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px}
.sf-hero__price{margin:0;max-width:30ch;text-align:left}
.sf-hero__amount{margin:0;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:1.5rem;line-height:1.2;color:var(--nn-text-title,#FFFFFF)}
.sf-hero__size{font-family:var(--font-body,"Source Sans 3",sans-serif);font-weight:600;font-size:1.0625rem;color:var(--nn-text-lead,#E6E9EF)}
.sf-hero__price .price__note{margin:2px 0 0;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:.9375rem;line-height:1.4;color:var(--nn-text-meta,#B4BCCB)}
.sf-hero__actions{flex-direction:column}
/* v0.3.1 DEFAULT (CLO r3, founder HOLD on hero price): p.sf-hero__meta "{M} modules · {L} lessons" (r3 dropped "Self-paced") under the button,
   no price. The .sf-hero__price block above stays specced as the HOLD variant (price + no-credit line) if the founder approves. */
.sf-hero__meta{margin:0;font-family:var(--font-body,"Source Sans 3",sans-serif);font-weight:600;font-size:1rem;line-height:1.4;color:var(--nn-text-meta,#B4BCCB)}
@media (max-width:599.98px){.sf-hero__meta{text-align:left}}
.sf-hero .sf-jump{margin-top:4px}
@media (max-width:767.98px){.sf-hero__buy{justify-content:flex-start}.sf-hero__actions{align-items:flex-start}}
@media (max-width:599.98px){.sf-hero__buy{flex-direction:column;align-items:stretch;gap:10px}.sf-hero__buy .btn{width:100%;justify-content:center}
  .sf-hero__price{max-width:none}.sf-hero__actions{align-items:stretch}.sf-hero .sf-jump{align-self:flex-start;margin-top:0}}

/* 2b/3b. Mid-page buy CTA: right after the sample lesson and again after the before/after.
   One line + the primary button (-> /class/ on theme pages; on /class/ the Buy -> checkout). No price here (prices only where the no-credit line sits). */
.sf-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin:28px 0 0;text-align:center}
.sf-cta__line{margin:0;max-width:44ch;font-family:var(--font-body,"Source Sans 3",sans-serif);font-weight:600;font-size:1.0625rem;line-height:1.5;color:var(--nn-text-lead,#E6E9EF)}
@media (max-width:767.98px){.sf-cta{justify-content:flex-start;text-align:left;margin-top:24px}}
@media (max-width:599.98px){.sf-cta{flex-direction:column;align-items:stretch}.sf-cta .btn{width:100%;justify-content:center}
  .sf-cta .btn--lg{padding:0 20px;font-size:1.125rem}}

/* 4b. Modules: first 3 visible, the rest in <details> ("See all N modules"). Native disclosure: the summary is a button with
   expanded/collapsed state exposed by the browser, so no aria-expanded to maintain and no JS. Content is in the HTML either way. */
.sf-modules--first{margin-bottom:8px}
.sf-more{margin:0 0 32px}
.sf-more > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;margin:4px 0 0;cursor:pointer;
  border:2px solid var(--nn-accent-hub,#2FD3EE);border-radius:10px;color:#FFFFFF;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:700;font-size:1rem}
.sf-more > summary::-webkit-details-marker{display:none}
.sf-more > summary::marker{content:""}
.sf-more > summary:hover{background:rgba(47,211,238,.12)}
.sf-more > summary:focus{outline:none}
.sf-more > summary:focus-visible{outline:3px solid var(--nn-accent-hub,#2FD3EE);outline-offset:3px;box-shadow:none}
.sf-more > summary svg{width:18px;height:18px;flex:none;transition:transform .15s ease}
.sf-more[open] > summary svg{transform:rotate(180deg)}
.sf-more__less,.sf-more[open] .sf-more__all{display:none}
.sf-more[open] .sf-more__less{display:inline}
.sf-more > .sf-modules{margin:8px 0 0}
.sf-more + .sf-modules__total{margin:-16px 0 32px}
@media (max-width:599.98px){.sf-more > summary{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.sf-more > summary svg{transition:none}}
@media (forced-colors:active){.sf-more > summary{border-color:ButtonText}.sf-more > summary:focus-visible{outline-color:Highlight}}

/* HEADER-PARITY-1: the .sh--sell header rules were removed; every header renders the course-flow-1 header (sh-classes-v1.css). The sh--sell class stays in the HTML and does nothing. */

/* Footer: a "Learn" row above the legal links, same on all sites */
.site-footer--sell .sf-foot{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;padding:0;list-style:none}
.site-footer--sell .sf-foot a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:1rem;
  color:var(--nn-text-lead,#E6E9EF);text-decoration:none;border-radius:6px}
.site-footer--sell .sf-foot a:hover{color:#FFFFFF;text-decoration:underline}
.site-footer--sell .sf-foot a:focus-visible{outline:none;box-shadow:var(--nn-focus-ring,0 0 0 2px #06060A,0 0 0 5px #2FD3EE)}
.site-footer--sell .sf-foot__primary a{font-weight:700;color:var(--nn-accent-hub,#2FD3EE)}

/* 390px fit (measured in mockup): kicker pill never wraps; large buttons tighten so 26-character labels stay on one line */
.sf-hero__kicker{flex-wrap:wrap;justify-content:center}
.sf-hero__kicker .pill{white-space:nowrap}
@media (max-width:767.98px){.sf-hero__kicker{justify-content:flex-start}}
@media (max-width:599.98px){.sf .btn--lg{padding:0 20px;font-size:1.125rem}}

/* ======================================================================
   D. /class/ PRICE-FIRST LAYOUT (all 6 course pages; ruling D). Add class .page--class-sell on main.page--class.
   New order: title band (unchanged) -> "This Course is for ..." intro (unchanged, founder rule) -> section.cl-buy (the live
   offer card + Buy + access line; the class cover beside it at >=1024, hidden under 600) -> short paid sample excerpt ->
   before/after + Buy -> live details unchanged (leave-with, modules, How to get started, FAQ, Key takeaways last).
   Measured goal: price + Buy inside the first 390x844 screen.
   ====================================================================== */
.page--class-sell .class-lead{padding-bottom:0}
.page--class-sell > .cl-buy{padding:24px 0 0}
.page--class-sell > .cl-buy > .container{max-width:calc(1120px + 2 * var(--layout-gutter,24px))}
.cl-buy__grid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);justify-items:center}
.cl-buy__panel{box-sizing:border-box;width:100%;max-width:46rem}
@media (min-width:1024px){.cl-buy__grid{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:40px;align-items:center;justify-items:stretch}
  .cl-buy__panel{max-width:none}}
.cl-buy .class-cover{margin:0;max-width:46rem;width:100%}
@media (max-width:599.98px){.cl-buy .class-cover{display:none}}
/* compact card on phones so name + price + no-credit line + Buy fit the first screen */
.page--class-sell .cl-buy .signup-panel{padding:28px 28px 24px}
@media (max-width:599.98px){.page--class-sell .cl-buy .signup-panel{padding:20px 18px 18px}
  .page--class-sell .cl-buy .offer{gap:12px}
  .page--class-sell .cl-buy .offer__name{font-size:1.375rem}
  .page--class-sell .cl-buy .price{padding:12px 16px}
  .page--class-sell .cl-buy .price__line .price__amount{font-size:2.25rem}}
/* the offer lead sits AFTER Buy + access line in the DOM (v0.3), so it never pushes Buy down */
.cl-buy .offer__lead{font-size:1rem;color:var(--nn-text-body,#CFD6E1)}
/* ruling I: one plain access line under Buy */
.offer__access{margin:0;max-width:40ch;font-family:var(--font-body,"Source Sans 3",sans-serif);font-size:.9375rem;line-height:1.45;color:var(--nn-text-meta,#B4BCCB);text-align:center}
/* proof sections: short sample excerpt (.sl.sl--paid.sl--short) and the before/after (+ Buy) */
.page--class-sell > .cl-proof{padding:56px 0 0}
.page--class-sell > .cl-proof > .container{max-width:calc(760px + 2 * var(--layout-gutter,24px))}
.page--class-sell > .cl-proof--ba > .container{max-width:calc(1040px + 2 * var(--layout-gutter,24px))}
.cl-proof__h{margin:0 0 20px;font-family:var(--font-heading,"Nunito",sans-serif);font-weight:800;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);line-height:1.2;color:var(--nn-text-title,#FFFFFF);text-align:center;text-wrap:balance}
@media (max-width:767.98px){.page--class-sell > .cl-proof{padding-top:40px}.cl-proof__h{text-align:left}}
.sl--short .sl__more{margin-top:16px}

/* ======================================================================
   E. MOBILE STICKY BUY BAR (theme pages only, <768px). Small and dismissible (Orion).
   Markup ships with the [hidden] attribute: with no JS it never shows (graceful fallback; the page already has 4 buy buttons).
   sell-first-1-buybar.js removes [hidden], shows it after the hero buy row scrolls away, hides it while the offer card or the
   footer is on screen, and keeps it dismissed for the session (sessionStorage "sf-buybar-dismissed").
   ====================================================================== */
.sf-buybar[hidden]{display:none !important}
.sf-buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;box-sizing:border-box;
  padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:rgba(25,27,32,.97);border-top:1px solid rgba(47,211,238,.40);box-shadow:0 -12px 32px -12px rgba(0,0,0,.7);
  transform:translateY(110%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
.sf-buybar.is-shown{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s}
.sf-buybar__in{display:flex;align-items:center;gap:8px;max-width:560px;margin:0 auto}
.sf-buybar__btn{flex:1 1 auto;justify-content:center;min-height:48px;padding:0 16px;border-radius:10px;font-size:1.0625rem}
.sf-buybar__btn:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px;box-shadow:none}
.sf-buybar__x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;
  background:transparent;border:1px solid var(--nn-hairline,#3A3C42);border-radius:10px;color:var(--nn-text-lead,#E6E9EF);cursor:pointer}
.sf-buybar__x:hover{border-color:rgba(47,211,238,.55);color:#FFFFFF}
.sf-buybar__x:focus{outline:none}
.sf-buybar__x:focus-visible{outline:3px solid var(--nn-accent-hub,#2FD3EE);outline-offset:2px}
.sf-buybar__x svg{width:20px;height:20px}
@media (min-width:768px){.sf-buybar{display:none !important}}
/* focus never hides under the bar: scroll-padding while it is shown (the JS also nudges a focused element up) */
html.sf-buybar-on{scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom))}
@media (prefers-reduced-motion:reduce){.sf-buybar,.sf-buybar.is-shown{transition:none}}
@media (forced-colors:active){.sf-buybar{border-top:2px solid CanvasText}}

main.sf[tabindex="-1"]:focus{outline:none}