/* ==========================================================================
   TILL'S FEEDBACK, 2026-09-29. Loaded after solo-school.css, overrides only.
   Each block is labelled with the section number from the feedback doc.
   Delete a block to undo that one change.
   ========================================================================== */
:root { --t-cream: #f4ebd9; --t-card: #fbf6ea; --t-ink: #1b1916; --t-ink-2: #3f3931; --t-orange: #ea6f1c; --t-rust: #c4502a; --t-line: #d9c9a3; }

/* shared: eyebrow and sub head */
.t-eyebrow { margin: 0 0 18px; font: 800 13px/1.2 Archivo, Arial, sans-serif; font-stretch: 118%; letter-spacing: .18em; text-transform: uppercase; color: var(--t-rust); }
.t-eyebrow-dark { color: #f08a45; }
.t-sub { margin: 18px 0 0; max-width: 40em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--t-ink-2); }
.t-sub-center { margin-inline: auto; text-align: center; }

/* 1. Hero: a smaller button on phones so the ribbons clear it */
@media (max-width: 600px) {
  .analogue-bottom .button.primary { font-size: 13px; letter-spacing: .05em; min-height: 50px; padding: 13px 18px; max-width: calc(100% - 96px); }
}

/* 4.1 More dream + 5. Pain: the hero's cream on both, so the turn line bridges them */
.c-reach.c-reach-e { background: var(--t-cream); }
.c-reach-e .c-reach-turn { color: var(--t-ink); }
.b-scope .b-myths.c-pain { background: var(--t-cream); }

/* 6. Myths: eyebrow sits centred above the headline */
.cinema-heading .t-eyebrow { text-align: center; }

/* 7. Intro: the logo in place of the words */
.worlds-intro h2 .t-intro-logo { display: block; width: min(560px, 78%); height: auto; margin: .12em auto 0; }
@media (max-width: 760px) {
  .worlds-intro { display: flex; flex-direction: column; }
  .worlds-intro > h2 { order: 1; }
  .worlds-intro .c-product { order: 2; margin-top: 22px; margin-bottom: 26px; }
  .worlds-intro .worlds-tagline { order: 3; }
  .worlds-intro .worlds-description { order: 4; }
}

/* 7.1 How each world works: light cards, dark text, orange accent line (as in the hub) */
.b-scope .c-how.b-dark .b-step { background: var(--t-card); box-shadow: none; border: 0; border-top: 4px solid var(--t-orange); border-radius: 4px; }
.b-scope .c-how.b-dark .b-step h4 { color: var(--t-ink); }
.b-scope .c-how.b-dark .b-step p { color: var(--t-ink-2); }
.b-scope .c-how.b-dark .b-step-num { color: var(--t-rust); }
.b-scope .c-how.b-dark .b-key { background: var(--t-ink); color: #efe6d2; box-shadow: 0 5px 0 #000; }
@media (max-width: 760px) {
  .b-scope .c-how.b-dark .b-step { background: var(--t-card); padding: 18px; border-top: 4px solid var(--t-orange); }
}

/* 10. Worlds: no big number behind the tape */
.b-scope .b-world .b-world-ghost { display: none; }

/* 12. Practice Center: a frame and a caption */
.c-practice-video.t-framed { margin: 0; padding: 10px 10px 0; background: var(--t-card); border-radius: 6px; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8); }
.c-practice-video.t-framed video { box-shadow: none; border-radius: 3px; }
.c-practice-video.t-framed figcaption { padding: 14px 8px 16px; font-size: 17px; line-height: 1.35; color: var(--t-ink-2); text-align: center; }
.c-practice-video.t-framed figcaption strong { display: block; font: 800 13px/1.2 Archivo, Arial, sans-serif; font-stretch: 118%; letter-spacing: .18em; text-transform: uppercase; color: var(--t-rust); margin-bottom: 4px; }

/* 13. Extras: less black above, light cards, labelled as bonuses */
.bonuses.section-pad { padding-top: clamp(40px, 5vw, 72px); }
.bonuses .section-heading .t-eyebrow { text-align: center; }
.bonuses .bonus-card { background: var(--t-card); border: 0; border-top: 4px solid var(--t-orange); }
.bonuses .bonus-card h3 { color: var(--t-ink); }
.bonuses .bonus-card p:not(.eyebrow) { color: var(--t-ink-2); }
.bonuses .bonus-card .c-bonus-sub { color: var(--t-rust); }
.bonuses .bonus-card .t-bonus-tag { display: inline-block; margin: 0 0 12px; padding: 6px 10px; background: var(--t-ink); color: #fbb020; border-radius: 3px; font: 800 12px/1 Archivo, Arial, sans-serif; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; }

/* 16. Meet your teacher: eyebrow, four markers, signed polaroid */
.t-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 30px; padding-top: 26px; border-top: 1px solid #29252130; }
.t-stats div { display: flex; flex-direction: column; gap: 4px; }
.t-stats strong { font-size: clamp(30px, 2.6vw, 40px); line-height: 1; letter-spacing: -.04em; color: #bd491f; }
.t-stats span { font-size: 16px; line-height: 1.4; color: #52564f; }
.c-polaroid .t-polaroid-cap { display: block; padding: 10px 6px 2px; text-align: right; }
.c-polaroid .t-polaroid-cap img { display: inline-block; width: 46%; height: auto; filter: brightness(0); opacity: .82; transform: rotate(-3deg); }

/* 16. Course for you: centred, on the hero's cream */
.b-scope .b-fit.c-fit { background: var(--t-cream); }
.b-scope .c-fit .b-section-head { display: block; text-align: center; }
.b-scope .c-fit .b-section-head .b-lede { margin-inline: auto; }
.b-scope .c-fit .b-fit-grid { max-width: 1040px; margin-inline: auto; }
.b-scope .c-fit .b-fit-card { border-top: 4px solid var(--t-orange); }
.b-scope .c-fit .b-fit-card.b-no { border-top-color: #95193c; }
.b-scope .c-fit .b-section-head .b-h2, .b-scope .c-fit .b-section-head .b-lede { max-width: none; width: 100%; margin-inline: auto; text-align: center; }

/* 7. Intro: a Join button under the product image (Chris, 2026-09-29) */
.worlds-intro .t-intro-cta { position: relative; z-index: 2; margin: clamp(28px, 3.4vw, 48px) auto 0; text-align: center; }
.worlds-intro .t-intro-cta .button.primary { font-size: 19px; min-height: 70px; padding: 22px 34px; }
.worlds-intro .t-cta-fine { margin: 16px 0 0; font-size: 15px; color: #656057; }
@media (max-width: 760px) {
  .worlds-intro .t-intro-cta { order: 5; margin-top: 28px; }
  .worlds-intro .t-intro-cta .button.primary { font-size: 15px; letter-spacing: .06em; min-height: 58px; padding: 16px 22px; white-space: nowrap; }
  .worlds-intro .t-cta-fine { font-size: 13px; }
}

/* 17. Aidan's copy round (2026-09-30), with the desktop polish pass the same night */
/* 1. Hero: Aidan's line leads, the original line sits under it, smaller */
.hero .c-hero-lead { max-width: 32em; margin-bottom: 0; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.4; font-weight: 600; color: var(--t-ink); }
.hero .c-hero-lead + .c-hero-sub { margin-top: 12px; font-size: clamp(16px, 1.2vw, 19px); }
/* Both lines stay inside the screen and clear of the stripes on the right at every width (Chris: "colour overlap looks messy") */
.hero .c-hero-lead, .hero .c-hero-lead + .c-hero-sub { max-width: min(32em, calc(100vw - 2 * clamp(24px, 13vw, 170px))); margin-inline: auto; text-wrap: balance; }
/* 2. Paul's letter: a size up, to balance the headline and photo */
.c-welcome .c-welcome-copy p { font-size: clamp(19px, 1.5vw, 23px); }
.c-welcome .c-welcome-copy .c-welcome-hi { font-size: clamp(22px, 1.9vw, 29px); }
/* 3. Pain: the headline runs across on two lines, the copy under it, the question right above the cards */
.b-scope .b-myths.c-pain .b-section-head { display: block; max-width: none; }
.b-scope .c-pain #pain-title { max-width: 15em; text-wrap: balance; }
.b-scope .c-pain .ss-pain-copy { max-width: 44em; margin-top: 28px; }
.b-scope .c-pain .ss-pain-copy .t-sub { margin-top: 0; max-width: none; }
.b-scope .c-pain .ss-pain-copy .t-sub + .t-sub { margin-top: 10px; }
.b-scope .c-pain .ss-pain-ask { margin: clamp(36px, 4vw, 52px) 0 0; font: 800 15px/1.3 Archivo, Arial, sans-serif; font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--t-rust); }
/* 4. The line after the cards reads as the turn, not fine print */
.b-scope .c-pain .ss-pain-close { max-width: 30em; margin: clamp(48px, 5vw, 72px) auto 0; text-align: center; font-size: clamp(22px, 2vw, 30px); line-height: 1.4; font-weight: 600; letter-spacing: -.02em; color: var(--t-ink); text-wrap: balance; }
/* 4b. The line of hope (Chris: "make this stand out more"): its first sentence is set like a headline, in the pain headline's type */
.b-scope .c-pain .ss-pain-close { max-width: 34em; font-weight: 500; color: var(--t-ink-2); }
/* The good news is the big headline again (Chris, Sep 30: "switch it back to the big headline, it was really cool"). */
.b-scope .c-pain .ss-hope { display: block; margin: 0 auto 20px; font-size: clamp(38px, 5vw, 72px); line-height: 1; font-weight: 800; letter-spacing: -.045em; color: var(--t-ink); }
.b-scope .c-pain .ss-hope em { font-family: var(--sans); font-style: italic; font-weight: 800; color: var(--t-rust); }
/* "You need immersion." is the answer, so it is set big, bold and orange (Chris: "make this pop more") */
.chapter-copy .ss-immersion { display: block; margin-top: 14px; font-family: var(--sans); font-size: clamp(42px, 5.4vw, 80px); line-height: 1.02; font-weight: 800; font-style: italic; letter-spacing: -.045em; color: #f08a3e; }
/* 5. "And that's what I built." closes the three truths */
.chapter-copy p.ss-built { margin-top: clamp(34px, 3.4vw, 52px); font-size: clamp(30px, 3.4vw, 52px); line-height: 1.15; font-weight: 600; letter-spacing: -.035em; color: #f4ebd9; }
/* The two paragraphs under the logo (Chris: "these paragraphs could for sure look way better"): the first sentence leads, bold and dark, and the rest sits in a narrower, balanced measure */
.worlds-intro .worlds-description { max-width: 34em; margin-inline: auto; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.6; color: #5b5b51; text-wrap: balance; }
.worlds-intro .ss-intro-lead { display: block; max-width: 24em; margin: -6px auto 0; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.2; font-weight: 700; letter-spacing: -.03em; color: var(--t-ink); text-wrap: balance; }
.worlds-intro .worlds-description + .worlds-description { margin-top: 18px; }
/* The five worlds line keeps the darker ink wherever it sits (Chris, Sep 30: it now comes first). */
.worlds-intro .worlds-description:has(.ss-five) { color: var(--t-ink-2); }
/* 6. Follow along (Chris): a bigger heading, the paragraph set large enough to fill three tight lines, and the four features as ticked items */
.b-scope .c-lesson-head { max-width: 980px; }
.b-scope .c-lesson-head .b-h3 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.b-scope .c-lesson-head .b-lede { max-width: 31em; margin: 22px auto 0; font-size: clamp(20px, 1.95vw, 28px); line-height: 1.45; text-wrap: balance; }
.c-lesson-head .ss-lesson-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.c-lesson-head .ss-lesson-ticks li { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1.2 Archivo, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--on-tape, #f5ecd8); }
.c-lesson-head .ss-lesson-ticks svg { flex: none; width: 20px; height: 20px; color: var(--t-orange); stroke: currentColor; }
/* 7. Five worlds: a size down, so it reads without a long scroll */
.five-worlds-story .scroll-copy { font-size: clamp(24px, 2.6vw, 40px); max-width: 1000px; }
/* 9. Join: a tighter list, a bigger guarantee that stays in view, Pay in three the lighter button */
.b-scope .c-join .ss-join-sub { margin: 16px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--on-tape-2); }
.b-scope .c-join .ss-pc-included { margin: 22px 0 0; font: 800 13px/1 Archivo, Arial, sans-serif; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.b-scope .c-join .ss-pc-included + .b-pc-list { margin-top: 8px; }
.b-scope .c-join .b-pc-list li { padding: 7px 0; }
.b-scope .c-join .ss-pay { display: grid; gap: 18px; margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--ink); }
.b-scope .c-join .ss-pay .b-pc-price { margin-top: 6px; padding-top: 0; border-top: 0; }
.b-scope .c-join .ss-pay-label { margin: 0; font: 800 13px/1 Archivo, Arial, sans-serif; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.b-scope .c-join .ss-pay .c-pc-join { margin-top: 12px; }
.b-scope .c-join .ss-pay-plan { padding-top: 18px; border-top: 1px solid var(--line); }
.b-scope .c-join .ss-pay-plan-price { margin: 8px 0 0; font-size: clamp(24px, 2.3vw, 30px); font-weight: 900; font-style: italic; font-stretch: 118%; letter-spacing: -.03em; line-height: 1.05; }
body .b-scope .c-join .button.ss-plan-btn { --key-face: #fffaf0; --key-hover: #fff; --key-edge: var(--ink); --key-border: var(--ink); border-width: 2px; }
.b-scope .c-join .b-join-points > div { --c: var(--s1); }
.b-scope .c-join .b-join-points h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); }
.b-scope .c-join .b-join-points p { margin-top: 10px; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.6; }
@media (min-width: 1040px) {
  .b-scope .c-join .b-join-points { position: sticky; top: 110px; align-self: start; }
}
@media (max-width: 760px) {
}

/* 18. Introducing, desktop: the words on the left, the product image on the right (Chris, 2026-09-30).
   Below 1040px the two wrappers step aside and the page flows as before. */
.worlds-intro .ss-intro-row, .worlds-intro .ss-intro-text { display: contents; }
@media (min-width: 1040px) {
  /* The words and the image share a top line, so the words sit exactly where they did in the centred column above them */
  .worlds-intro .ss-intro-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: clamp(48px, 4.6vw, 76px); align-items: start; max-width: 1200px; margin: 34px auto 0; }
  /* The line and the lead read as one pair */
  .worlds-intro .ss-intro-lead { margin-top: -12px; }
  .worlds-intro .t-intro-cta { margin-top: 48px; }
  .worlds-intro .ss-intro-text { display: block; }
  /* A size up once the words sit beside the product (Chris) */
  .worlds-intro .ss-intro-text .worlds-description { max-width: 32em; margin-inline: 0; text-align: left; font-size: clamp(21px, 1.75vw, 25px); }
  .worlds-intro .ss-intro-row .c-product { width: 100%; margin: 0; }
}
@media (min-width: 761px) and (max-width: 1039px) {
  .worlds-intro { display: flex; flex-direction: column; }
  .worlds-intro > h2 { order: 1; }
  .worlds-intro .worlds-tagline { order: 2; }
  .worlds-intro .worlds-description { order: 3; }
  .worlds-intro .c-product { order: 4; }
  .worlds-intro .t-intro-cta { order: 5; }
}
/* The lead line sits with the tagline above it, on every screen (Chris) */
@media (max-width: 760px) { .worlds-intro .ss-intro-lead { order: 3; margin-bottom: 14px; } }
@media (min-width: 761px) and (max-width: 1039px) { .worlds-intro .ss-intro-lead { order: 2; margin-bottom: 18px; } }
/* "five worlds" pops (Chris) */
.worlds-intro .ss-five { font-weight: 800; color: var(--t-rust); }

/* 19. "12 weeks from now," then the orange line on one line of its own (Chris: "two tight lines").
   The orange line is about 17.4 times its type size wide, so the type is capped to fit the screen. */
.c-benefits h2#benefits-title { max-width: none; }
@media (min-width: 761px) { .c-benefits h2#benefits-title { font-size: min(76px, 4.6vw, calc((100vw - 64px) / 17.6)); } .c-benefits h2#benefits-title em { white-space: nowrap; } }
/* phones: a proper headline size, the orange line free to wrap, both lines balanced (Chris: "it's mobile sizing") */
@media (max-width: 760px) { .c-benefits h2#benefits-title { font-size: clamp(32px, 9.4vw, 44px); line-height: 1.05; text-wrap: balance; } }

/* 20. (Removed, Chris Sep 30: "Five worlds." back to how it was before the shine and the bigger size.) */

/* 21. "The technique / to tell your story." on two tight lines (Chris: "tighten it up").
   The orange line is about 8.1 times its type size wide, so the type is sized to its own column and never wraps a third line. */
.practice-studio .studio-copy { container-type: inline-size; }
.practice-studio #practice-title { font-size: min(68px, calc(100cqi / 8.25)); line-height: .98; }
.practice-studio #practice-title em { white-space: nowrap; }
.practice-studio .studio-lead { margin-top: clamp(22px, 2.2vw, 30px); }

/* 23. Pain headline: one line per phrase, and the paragraph under it on two tight, even lines (Chris) */
.b-scope .c-pain #pain-title { max-width: none; line-height: .98; }
@media (min-width: 761px) { .b-scope .c-pain #pain-title em { white-space: nowrap; } }
.b-scope .c-pain .ss-pain-copy { max-width: none; }
.b-scope .c-pain .ss-pain-copy .t-sub { max-width: 44em; font-size: clamp(19px, 1.55vw, 22px); line-height: 1.5; text-wrap: balance; }

/* 24. Reviews, straight after Introducing (Chris: "just the text-based testimonials ... improve the cards ... a black section using the consistent color").
   The page's black, a heading in the page's own type, and cards that read as quotes first: a big orange mark,
   the words in cream at reading size, and the student's initial in one of the logo's stripe colours beside the name.
   The first group shows; the rest sit behind "Read more reviews". */
.ss-reviews { position: relative; background: #151311; color: #f4ebd9; }
.ss-reviews-head { max-width: 1120px; margin: 0 auto clamp(40px, 5vw, 64px); padding-inline: var(--gutter, 20px); text-align: center; }
.ss-reviews-head .t-eyebrow { color: #f08a3e; margin-bottom: 14px; }
.ss-reviews-head h2 { margin: 0; font-size: clamp(52px, 6.4vw, 100px); line-height: .95; font-weight: 800; letter-spacing: -.05em; color: #f4ebd9; }
.ss-reviews-head h2 em { font-style: italic; color: #fbb020; }
.ss-reviews-head .ss-reviews-sub { max-width: 40em; margin: 22px auto 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: #d8ccb8; text-wrap: balance; }
.ss-reviews .ss-quotes { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter, 20px); }
.ss-reviews .ss-quote-group + .ss-more, .ss-reviews .ss-more-body .ss-quote-group + .ss-quote-group, .ss-reviews .ss-more-body { margin-top: clamp(44px, 5vw, 68px); }
.ss-reviews .ss-quote-head { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; font: 800 14px/1.2 Archivo, Arial, sans-serif; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: #fbb020; }
.ss-reviews .ss-quote-head::after { content: ""; flex: 1; height: 1px; background: rgba(244, 235, 217, .16); }
.ss-reviews .ss-quote-grid { columns: 3 320px; column-gap: 22px; }
.ss-reviews .ss-quote { position: relative; break-inside: avoid; margin: 0 0 22px; padding: 54px 28px 24px; background: #1f1c19; border: 1px solid rgba(244, 235, 217, .09); border-radius: 10px; box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px rgba(0, 0, 0, .35); transition: transform .25s ease, border-color .25s ease; }
.ss-reviews .ss-quote:hover { transform: translateY(-3px); border-color: rgba(234, 111, 28, .45); }
.ss-reviews .ss-quote::before { content: "\201C"; position: absolute; top: 8px; left: 24px; font: 900 72px/1 Georgia, "Times New Roman", serif; color: #ea6f1c; }
.ss-reviews .ss-quote blockquote { margin: 0; }
.ss-reviews .ss-quote p { margin: 0; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6; color: #efe5d2; text-wrap: pretty; }
.ss-reviews .ss-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(244, 235, 217, .1); }
.ss-reviews .ss-av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--av, #ea6f1c); color: #151311; font: 800 16px/1 Archivo, Arial, sans-serif; }
.ss-reviews .ss-quote:nth-child(5n+1) .ss-av { --av: #fbb020; }
.ss-reviews .ss-quote:nth-child(5n+2) .ss-av { --av: #ea6f1c; }
.ss-reviews .ss-quote:nth-child(5n+3) .ss-av { --av: #e2453c; color: #fff6e6; }
.ss-reviews .ss-quote:nth-child(5n+4) .ss-av { --av: #b8325a; color: #fff6e6; }
.ss-reviews .ss-quote:nth-child(5n+5) .ss-av { --av: #8a3b8f; color: #fff6e6; }
.ss-reviews .ss-name { font: 800 15px/1.2 Archivo, Arial, sans-serif; letter-spacing: .01em; color: #f4ebd9; }
.ss-reviews .ss-more > summary { display: flex; width: max-content; margin: 10px auto 0; padding: 16px 28px; border: 2px solid #f4ebd9; border-radius: 4px; list-style: none; cursor: pointer; font: 700 16px/1 Archivo, Arial, sans-serif; letter-spacing: .02em; color: #f4ebd9; }
.ss-reviews .ss-more > summary::-webkit-details-marker { display: none; }
.ss-reviews .ss-more > summary:hover { background: #f4ebd9; color: #151311; }
.ss-reviews .ss-more > summary:focus-visible { outline: 2px solid #ea6f1c; outline-offset: 3px; }
.ss-reviews .ss-more .ss-more-close, .ss-reviews .ss-more[open] .ss-more-open { display: none; }
.ss-reviews .ss-more[open] .ss-more-close { display: inline; }
@media (max-width: 760px) { .ss-reviews .ss-quote { padding: 50px 22px 20px; } .ss-reviews .ss-quote p { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .ss-reviews .ss-quote { transition: none; } .ss-reviews .ss-quote:hover { transform: none; } }

/* 25. Photos of Paul through the page (Chris, 2026-09-30: "put the photos inside the funnel where you think they would look good").
   The files sit on the site at /images/solo-school/photos/ and can be swapped one for one. */
/* a strip of film between "12 weeks" and "Five worlds", drifting slowly sideways */
.ss-strip { position: relative; overflow: hidden; padding: 26px 0; background: #151311; }
.ss-strip-track { display: flex; width: max-content; }
.ss-strip-set { display: flex; gap: 10px; padding-right: 10px; }
/* Paul with the players who inspire him, each photo at its own shape and one height, the name underneath (Chris) */
.ss-strip { padding: clamp(48px, 5vw, 72px) 0 clamp(52px, 5.4vw, 76px); }
.ss-strip-set { gap: clamp(18px, 2vw, 28px); padding-right: clamp(18px, 2vw, 28px); }
.ss-frame { margin: 0; display: flex; flex-direction: column; align-items: center; }
.ss-frame img { display: block; height: clamp(230px, 24vw, 340px); width: auto; border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.ss-frame figcaption { margin-top: 14px; font: 800 13px/1 Archivo, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #f4ebd9; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .ss-strip-track { animation: ss-strip 70s linear infinite; } .ss-strip:hover .ss-strip-track { animation-play-state: paused; } }
@keyframes ss-strip { to { transform: translateX(-50%); } }
/* The closing letter had a polaroid of Paul beside it; removed (Chris, Oct 1). */
/* a studio polaroid under the FAQ heading */
.faq .ss-faq-photo { margin: clamp(28px, 3vw, 44px) 0 0; width: min(100%, 400px); padding: 12px 12px 40px; background: #f4ebd9; border-radius: 3px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transform: rotate(-2deg); }
.faq .ss-faq-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 760px) { .faq .ss-faq-photo { width: min(78%, 320px); margin-inline: auto; padding-bottom: 28px; } }


/* 27. Phone pass (Chris, 2026-09-30: "go on all 7") */
@media (max-width: 760px) {
  /* 3. the hero: the bold line only, so the video and Join come up sooner */
  .hero .c-hero-lead + .c-hero-sub { display: none; }
  /* 4. the pain headline: "Mechanical licks." and "Boring solos." one line each, the orange line in two balanced lines */
  .b-scope .c-pain #pain-title { font-size: calc((100vw - 40px) / 8.9); line-height: 1; text-wrap: balance; }
  /* 5. no empty black between the players and "Five worlds" */
  .ss-strip { padding-bottom: 28px; }
  .five-worlds-story .passage-stage { min-height: 0 !important; padding-top: 36px !important; padding-bottom: 72px !important; }
  /* 7. the tape players: a bar a thumb can hold, and the tape's name in full */
  .c-world-deck .audio-track input { height: 34px; }
  .c-world-deck .audio-track > div { flex-wrap: wrap; }
  .c-world-deck .audio-track > div span:first-child { white-space: normal; overflow: visible; text-overflow: clip; }
}
/* 6. "Solo & improvise like the greats." never leaves "greats." on its own */
.worlds-intro .worlds-tagline { text-wrap: balance; }

/* 28. "That's what the Practice Center is for:" stands out, on every screen (Chris) */
.practice-studio .ss-pc-hl { font-weight: 700; color: #f08a3e; }
/* "Is Solo School right for you?" on phones: the line under it in from the edges and balanced, no word left alone (Chris: "fix mobile spacing") */
@media (max-width: 760px) {
  .b-scope .c-fit .b-section-head { padding-inline: 8px; }
  .b-scope .c-fit .b-section-head .b-lede { max-width: 20em; margin: 18px auto 0; font-size: 18px; line-height: 1.5; text-wrap: balance; }
}
/* Introducing paragraphs centred wherever the section is one column (Chris: "align this in the center on mobile") */
@media (max-width: 1039px) { .worlds-intro .worlds-description { text-align: center !important; margin-inline: auto; text-wrap: balance; } }
/* Review group labels on one line on phones (Chris: "make this one line on mobile") */
@media (max-width: 760px) { .ss-reviews .ss-quote-head { white-space: nowrap; letter-spacing: .02em; width: calc(100vw - 32px); margin-left: calc(50% - (100vw - 32px) / 2); justify-content: center; font-size: min(14px, calc((100vw - 32px) / 31)); } .ss-reviews .ss-quote-head::after { display: none; } }
/* The hero's one sub-line, sized to sit under the big headline (Chris: "resize it to look better"): larger, darker, balanced, clear of the stripes */
.hero .analogue-heading .c-hero-sub { max-width: min(32em, calc(100vw - 2 * clamp(24px, 13vw, 170px))); margin: clamp(18px, 2vw, 28px) auto 0; font-size: clamp(19px, 1.75vw, 26px); line-height: 1.45; color: #3f3931; text-wrap: balance; }
@media (max-width: 760px) { .hero .analogue-heading .c-hero-sub { max-width: calc(100vw - 56px); font-size: 18px; } }

/* 29. The written reviews as a carousel of smaller cards, like the student videos, in the logo's five stripe colours (Chris, 2026-09-30).
   Long quotes are cut at eight lines with "Read more"; the arrows step through; phones swipe. */
.ss-rv { max-width: 1240px; margin: 0 auto; }
.ss-rv-track { display: flex; align-items: flex-start; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 20px); padding: 6px var(--gutter, 20px) 18px; scrollbar-width: none; }
.ss-rv-track::-webkit-scrollbar { display: none; }
.ss-rv-track:focus-visible { outline: 2px solid #ea6f1c; outline-offset: 4px; }
.ss-rv-card { --bg: #fbb020; --fg: #1b1916; --soft: rgba(27, 25, 22, .72); flex: 0 0 clamp(264px, 24vw, 310px); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 50px 22px 20px; position: relative; background: var(--bg); color: var(--fg); border-radius: 10px; box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
.ss-rv-card:nth-child(5n+2) { --bg: #ea6f1c; }
.ss-rv-card:nth-child(5n+3) { --bg: #c21b25; --fg: #fff6e6; --soft: rgba(255, 246, 230, .8); }
.ss-rv-card:nth-child(5n+4) { --bg: #951a3c; --fg: #fff6e6; --soft: rgba(255, 246, 230, .8); }
.ss-rv-card:nth-child(5n+5) { --bg: #4f1036; --fg: #f4ebd9; --soft: rgba(244, 235, 217, .78); }
.ss-rv-card::before { content: "\201C"; position: absolute; top: 6px; left: 18px; font: 900 64px/1 Georgia, "Times New Roman", serif; color: var(--fg); opacity: .35; }
.ss-rv-tag { margin: 0; font: 800 10.5px/1.35 Archivo, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.ss-rv-card blockquote { margin: 0; }
.ss-rv-card blockquote p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.ss-rv-card.is-open blockquote p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.ss-rv-more { align-self: flex-start; padding: 0; border: 0; background: none; font: 700 13px/1 Archivo, Arial, sans-serif; letter-spacing: .02em; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ss-rv-card .ss-rv-card figcaption { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); }
.ss-rv-card .ss-av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--fg); color: var(--bg); font: 800 14px/1 Archivo, Arial, sans-serif; }
.ss-rv-card .ss-name { font: 800 14px/1.2 Archivo, Arial, sans-serif; color: var(--fg); }
.ss-rv-controls { display: flex; justify-content: center; gap: 18px; margin-top: 10px; }
.ss-rv-controls button { width: 54px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(244, 235, 217, .55); border-radius: 4px; background: transparent; color: #f4ebd9; font-size: 22px; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.ss-rv-controls button:hover { background: rgba(244, 235, 217, .12); }
.ss-rv-controls button:focus-visible, .ss-rv-more:focus-visible { outline: 2px solid #fbb020; outline-offset: 3px; }
@media (max-width: 760px) { .ss-rv-card { flex-basis: 80vw; } }

/* 30. No fade-in on these three sections: the words are simply there (Chris, 2026-09-30: "no fancy appearing, it feels cheap").
   12 weeks from now, Join Solo School, and Is Solo School right for you. The "12 weeks" card keeps its resting tilt. */
.js .c-benefits [data-reveal], .js .c-benefits [data-reveal].is-in,
.js .b-scope #enroll [data-reveal], .js .b-scope #enroll [data-reveal].is-in,
.js .b-scope #course-fit [data-reveal], .js .b-scope #course-fit [data-reveal].is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
.js .c-benefits .c-jcard[data-reveal], .js .c-benefits .c-jcard[data-reveal].is-in { transform: rotate(-.6deg) !important; }
@media (max-width: 640px) { .js .c-benefits .c-jcard[data-reveal], .js .c-benefits .c-jcard[data-reveal].is-in { transform: none !important; } }

/* 31. Reviews in one flat colour, the page's own orange, with no yellow (Chris: "all one flat color ... use the orange"),
   and every card the same size: the label is given two lines and the quote eight, and "Read more" always holds its place. */
.ss-reviews-head h2 em { color: #ea6f1c; }
.ss-rv-card, .ss-rv-card:nth-child(n) { --bg: #ea6f1c; --fg: #1b1916; --soft: rgba(27, 25, 22, .72); box-shadow: none; }
.ss-rv-card::before { opacity: .28; }
.ss-rv-tag { min-height: calc(2 * 1.35em); }
.ss-rv-card blockquote p { min-height: calc(8 * 1.55em); }

/* 32. (Removed with section 20.) */

/* 33. The payment plan as a line of text under the button, the way the other course pages offer it (Chris) */
.b-scope .c-join .ss-plan-note { margin: 14px 0 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-3); text-wrap: balance; }
.b-scope .c-join .ss-plan-note a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.b-scope .c-join .ss-plan-note a:hover { color: var(--ink); }

/* 34. "But for most guitarists, soloing looks a lot more like this..." centred between the card above and the pain headline below,
   as a clean hand-over (Chris). Same total gap as before, split evenly; the two lines balanced. */
.c-reach-e .c-reach-turn { text-wrap: balance; }
@media (min-width: 761px) {
  .c-reach-e .c-reach-turn { margin-top: 160px !important; }
  .b-scope .b-myths.c-pain { padding-top: 32px !important; }
}
@media (max-width: 760px) {
  .c-reach-e .c-reach-turn { margin-top: 99px !important; }
  .b-scope .b-myths.c-pain { padding-top: 19px !important; }
}

/* 35. The closing letter stays clear of the stripes down the left edge at every width (Chris: "sizing gets messed up on some devices").
   The tablet rule above already did this below 1100px; since the letter sits beside the photo, it applies all the way up. */
@media (min-width: 1101px) {
  .b-scope .c-close .b-wrap { width: auto; max-width: none; margin-left: max(150px, calc((100vw - 1240px) / 2)); margin-right: max(var(--gutter, 40px), calc((100vw - 1240px) / 2)); }
}

/* 36. No lone word on a line (Chris, Sep 30 device audit): the Practice lead ("…speed up."), the fit card headings ("…for you if"), and the Five worlds scroll passage. */
.studio-lead, .b-scope .b-fit-card h3 { text-wrap: balance; }
.scroll-copy { text-wrap: pretty; }

/* 37. Live chat on request (Chris, Sep 30): under the FAQ heading, a button that opens the team's chat. The chat itself only loads when it is pressed. */
.faq .ss-help { margin-top: 32px; }
.faq .ss-help-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1.5px solid rgba(243, 234, 215, .55); border-radius: 0; background: transparent; color: #f3ead7; font: inherit; font-size: 1rem; line-height: 1.35; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.faq .ss-help-btn svg { flex: 0 0 22px; width: 22px; height: 22px; }
.faq .ss-help-btn strong { font-weight: 700; }
.faq .ss-help-btn:hover, .faq .ss-help-btn:focus-visible { background: var(--orange, #ea6f1c); border-color: var(--orange, #ea6f1c); color: #1b1916; outline: none; }
.faq .ss-help-btn svg { color: var(--orange, #ea6f1c); }
.faq .ss-help-btn:hover svg, .faq .ss-help-btn:focus-visible svg { color: #1b1916; }
.faq .ss-help-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
@media (max-width: 760px) { .faq .ss-help { margin: 20px 0 8px; } .faq .ss-help-btn { width: 100%; justify-content: center; } }

/* 38. The sticky Join bar reaches the bottom of the screen (Chris, Sep 30 iPhone recording: page text showed underneath it).
   Safari's floating bottom toolbar leaves a strip below a bottom:0 bar where the page scrolled past in view. The bar's own
   colour now carries on down behind the toolbar, so nothing shows between the bar and the edge. */
.mobile-cta::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px; background: #1e1b18; pointer-events: none; }

/* 39. The line under the Introducing logo is a headline now (Chris, Sep 30: "capitalised headline and bigger"). */
.b-scope .worlds-intro .worlds-tagline, .worlds-intro .worlds-tagline { font-size: clamp(36px, 4.6vw, 66px); line-height: 1.05; font-weight: 700; letter-spacing: -.045em; color: #1b1916; margin: 34px auto 22px; }
@media (max-width: 760px) { .worlds-intro .worlds-tagline { font-size: clamp(32px, 9vw, 40px); margin-block: 28px 20px; } }

/* 40. Introducing is one centred column at every width, no animation (Chris, Sep 30):
   Introducing, logo, headline, sub, paragraphs, graphic, button. Replaces the two-column desktop layout (section 16/18). */
.worlds-intro { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
.worlds-intro .ss-intro-row, .worlds-intro .ss-intro-text { display: contents !important; }
.worlds-intro > h2 { order: 1 !important; }
.worlds-intro .worlds-tagline { order: 2 !important; }
.worlds-intro .ss-intro-lead { order: 3 !important; margin: 0 auto 26px !important; }
.worlds-intro .worlds-description { order: 4 !important; max-width: 36em !important; margin-inline: auto !important; text-align: center !important; font-size: clamp(19px, 1.5vw, 22px) !important; }
.worlds-intro .c-product { order: 5 !important; display: block !important; width: min(820px, 100%) !important; height: auto; margin: clamp(30px, 3.6vw, 52px) auto 0 !important; }
.worlds-intro .t-intro-cta { order: 6 !important; margin: clamp(28px, 3.2vw, 44px) auto 0 !important; }

/* 41. The Introducing headline in the hero's look and colours (Chris, Sep 30: "use these colours ... make it pop more"):
   heavy wide Archivo in near-black, the "&" and the second line in rust italic. A step smaller than the hero's own. */
.b-scope .worlds-intro .worlds-tagline, .worlds-intro .worlds-tagline { font-family: var(--sans, Archivo, Arial, sans-serif); font-size: clamp(42px, 5.2vw, 78px); font-weight: 900; font-stretch: 116%; letter-spacing: -.062em; line-height: .99; color: #23201d; margin: 30px auto 26px; }
.worlds-intro .worlds-tagline em, .worlds-intro .worlds-tagline .opus-amp { font-family: var(--sans, Archivo, Arial, sans-serif) !important; }
.worlds-intro .worlds-tagline em { display: block; margin-top: 6px; font-style: italic; font-weight: 900; font-stretch: 116%; color: #c4502a; line-height: 1.05; }
.worlds-intro .worlds-tagline .opus-amp { color: #c4502a; font-style: italic; }
@media (max-width: 760px) { .worlds-intro .worlds-tagline { font-size: min(8.6vw, 48px); white-space: nowrap; margin-block: 26px 22px; } }

/* 42. The sticky Join bar is fully solid (Chris, Sep 30: behind Safari's bottom bar should look like the Join bar, not the page).
   Safari on iPhone fills the area behind its floating toolbar with the colour of a solid bar touching the bottom edge; a
   see-through bar with a blur (as it was) is passed over, so the page showed through. */
.mobile-cta { background: #1e1b18 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* 43. "Five worlds." moves like the three truths (Chris, Sep 30): the section pins while you scroll, the heading settles from a
   touch larger and the paragraph fades up under it. Bigger type, centred. The word-by-word dimming is off here: the paragraph
   arrives as one piece. The motion is set by a script in soloSchoolSalesE.ts (FIVEW) and only when html.fw-armed is on, so
   without it, or with reduced motion, the section simply sits there, fully shown. */
.five-worlds-story { min-height: 160svh !important; }
.five-worlds-story .passage-stage { position: sticky !important; top: 0 !important; min-height: 100svh !important; padding: 80px 9% 110px !important; align-items: center; text-align: center; }
.five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(64px, 7.2vw, 112px) !important; line-height: 1.02; font-weight: 760; margin: 0 0 clamp(26px, 3vw, 44px) !important; transform-origin: center center; }
.five-worlds-story .scroll-copy { font-size: clamp(26px, 2.9vw, 42px) !important; line-height: 1.35; max-width: 1000px; margin-inline: auto; text-align: center; text-wrap: balance; }
.journey-motion-ready .five-worlds-story .scroll-copy span { color: #f4ebd9 !important; }
html.fw-armed .five-worlds-story h2#five-worlds-heading { transform: translateY(var(--fw-shift, 60px)) scale(var(--fw-scale, 1.08)); will-change: transform; }
html.fw-armed .five-worlds-story .scroll-copy { opacity: var(--fw-reveal, 0); transform: translateY(var(--fw-copy, 22px)); }
@media (max-width: 760px) {
  .five-worlds-story { min-height: 155svh !important; }
  .five-worlds-story .passage-stage { padding: 65px 10% 90px !important; }
  .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(46px, 12vw, 60px) !important; }
  .five-worlds-story .scroll-copy { font-size: clamp(22px, 6.2vw, 27px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .five-worlds-story { min-height: 0 !important; }
  .five-worlds-story .passage-stage { position: relative !important; min-height: 0 !important; }
}

/* 44. The "Solo & Improvise, Like the Greats." line under the Introducing logo is smaller (Chris, Oct 1). */
.b-scope .worlds-intro .worlds-tagline, .worlds-intro .worlds-tagline { font-size: clamp(30px, 3.4vw, 50px); margin: 24px auto 20px; }
@media (max-width: 760px) { .worlds-intro .worlds-tagline { font-size: min(6.6vw, 34px); margin-block: 20px 18px; } }

/* 45. "Mechanical licks and lifeless solos." section head centred: headline, paragraph and "Do some of these sound familiar?" (Chris, Oct 1). */
.b-scope .b-myths.c-pain .b-section-head { text-align: center; }
.b-scope .c-pain #pain-title { margin-inline: auto; text-align: center; }
.b-scope .c-pain .ss-pain-copy, .b-scope .c-pain .ss-pain-copy .t-sub { margin-inline: auto; text-align: center; }
.b-scope .c-pain .ss-pain-ask { text-align: center; }

/* 46. "Is Solo School right for you?" head sits in the middle of the page: its box was 820px wide and pinned left, so the centred text sat off to the left on wide screens (Chris, Oct 1). */
.b-scope .c-fit .b-section-head { max-width: none; width: 100%; margin-inline: auto; }

/* Copy page only: a clear gap between "...top of the list." and "But when I ask..." (Chris, Oct 1). */
.b-scope .c-pain .ss-pain-copy .t-sub + .t-sub { margin-top: clamp(16px, 1.6vw, 24px); }
/* Copy page: takes 07 to 09 get their own stripe colours instead of all falling back to gold. */
.b-scope .b-myth:nth-child(7) { --c: var(--s3); }
.b-scope .b-myth:nth-child(8) { --c: var(--s4); }
.b-scope .b-myth:nth-child(9) { --c: var(--s5); }

/* Copy page: "To unlock your soloing, you need to understand..." replaces the 3 surprising truths (Chris, Oct 1). One centred column, no pinning. */
.b-scope .c-unlock { background: var(--t-cream, #f1e7d6); padding-block: clamp(72px, 9vw, 130px); }
.b-scope .c-unlock .b-wrap { max-width: 980px; margin-inline: auto; text-align: center; }
.b-scope .c-unlock #unlock-title { max-width: none; margin: 0 auto; text-wrap: balance; }
.b-scope .c-unlock #unlock-title em { display: block; }
.b-scope .c-unlock .c-unlock-copy { max-width: 36em; margin: clamp(30px, 3.4vw, 48px) auto 0; display: grid; gap: 18px; }
.b-scope .c-unlock .c-unlock-copy p { margin: 0; font-size: clamp(19px, 1.55vw, 22px); line-height: 1.55; color: var(--t-ink-2, #3b352e); text-wrap: pretty; }
.b-scope .c-unlock .c-unlock-copy .c-unlock-end { margin-top: 12px; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.25; font-weight: 800; letter-spacing: -.03em; color: var(--t-ink, #1b1916); text-wrap: balance; }

/* Copy page: the Introducing paragraph is one piece now, sized to read (Chris, Oct 1: "tidy up sizing"). */
.worlds-intro .ss-intro-text { max-width: 36em; margin-inline: auto; }
.worlds-intro .ss-intro-text .worlds-description { font-size: clamp(19px, 1.55vw, 22px) !important; line-height: 1.55 !important; max-width: none !important; margin: 0 auto !important; text-align: center; text-wrap: pretty; }

/* Copy page: "Learn Through Immersion" intro paragraph under the heading. */
.b-scope .c-how .c-how-lede { max-width: 40em; margin-top: 18px; color: var(--on-tape-2, #cfc6b4); }
.b-scope .c-how .c-how-lede + .b-fine { margin-top: 18px; }
.worlds-intro .ss-intro-row .ss-intro-text { max-width: 720px !important; width: 100%; margin-inline: auto !important; }

/* Copy page: the Five worlds opener has a long headline now (Chris, Oct 1: "play around with the spacing and locking").
   Smaller, balanced headline that settles from a touch larger; the paragraph and the lead-in line fade up under it.
   Pinned for a shorter run, so it reads and moves on. */
.five-worlds-story { min-height: 150svh !important; }
.five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(44px, 5vw, 80px) !important; line-height: 1.02; max-width: 15em; margin-inline: auto !important; text-wrap: balance; }
.five-worlds-story .passage-stage h2#five-worlds-heading em { display: block; }
.five-worlds-story .scroll-copy { font-size: clamp(21px, 2vw, 28px) !important; line-height: 1.45; max-width: 34em; }
.five-worlds-story .fw-lead { margin: clamp(28px, 3vw, 44px) auto 0; font: 800 clamp(13px, 1vw, 15px)/1.4 Archivo, Arial, sans-serif; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--orange, #ea6f1c); max-width: 40em; text-align: center; text-wrap: balance; }
html.fw-armed .five-worlds-story .fw-lead { opacity: var(--fw-reveal, 0); transform: translateY(var(--fw-copy, 22px)); }
@media (max-width: 760px) {
  .five-worlds-story { min-height: 140svh !important; }
  .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(34px, 9.4vw, 44px) !important; }
  .five-worlds-story .scroll-copy { font-size: clamp(19px, 5.2vw, 22px) !important; }
}
@media (prefers-reduced-motion: reduce) { .five-worlds-story { min-height: 0 !important; } }


/* Copy page: the Practice Center headline wraps instead of running under the video. */
.practice-studio #practice-title { font-size: clamp(40px, 4.2vw, 66px) !important; }
.practice-studio #practice-title em { white-space: normal !important; display: block; }
.worlds-intro .ss-intro-text .worlds-description { max-width: 36em !important; }

/* Copy page: "To unlock your soloing" in the 3-truths style (black, pinned, each line settles in as you scroll) (Chris, Oct 1).
   The lines are longer than the old truths, so the headline type is smaller and kept to a readable width. */
html body .c-unlock-cinema .chapter-copy h3 { font-size: clamp(34px, 3.9vw, 60px); max-width: 17em; margin-inline: auto; }
html body .c-unlock-cinema .chapter-copy p { max-width: 30em; margin-inline: auto; }
@media (max-width: 760px) { html body .c-unlock-cinema .chapter-copy h3 { font-size: clamp(26px, 7vw, 34px); } }

/* Copy page: Introducing spacing (Chris, Oct 1: "fix this spacing"). Even gaps logo > headline > paragraph,
   and a narrower, balanced paragraph so no word sits alone on the last line. */
.worlds-intro .worlds-tagline { margin-top: clamp(22px, 2.4vw, 34px) !important; margin-bottom: 0 !important; }
.worlds-intro .ss-intro-row { margin-top: clamp(22px, 2.4vw, 32px) !important; }
.worlds-intro .ss-intro-text .worlds-description { max-width: 31em !important; text-wrap: balance !important; }
/* The page's own inline styles pin the tagline gap at 14px, so these need the extra weight. */
html body .worlds-intro .worlds-tagline { margin-top: clamp(22px, 2.4vw, 34px) !important; }
html body .worlds-intro .ss-intro-text .worlds-description { margin-top: clamp(22px, 2.4vw, 32px) !important; }

/* Copy page: "Learn Through Immersion" head (Chris, Oct 1: "fix spacing and sizing"). Headline a step down,
   paragraph at a readable width with no lone last word, and the lead-in line set as a label that points at the steps. */
html body .c-how .b-how-head #how-title { font-size: clamp(44px, 5vw, 78px); line-height: 1; }
html body .c-how .b-how-head .c-how-lede { max-width: 32em; margin-top: clamp(20px, 2vw, 28px); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.55; text-wrap: balance; }
html body .c-how .b-how-head .c-how-lede + .b-fine { margin-top: clamp(26px, 2.6vw, 36px); font: 800 clamp(13px, 1vw, 15px)/1.4 Archivo, Arial, sans-serif; font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--orange, #ea6f1c); }

/* Copy page: Five worlds opener resized (Chris, Oct 1: "sizing looks shit"). Two even lines, white then orange,
   so the orange line no longer sticks out past a narrow white block; the paragraph is looser and a touch smaller. */
html body .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(36px, 4.1vw, 64px) !important; line-height: 1.06 !important; max-width: none !important; letter-spacing: -.045em; text-wrap: nowrap; }
html body .five-worlds-story .passage-stage h2#five-worlds-heading em { display: block; margin-top: .06em; }
html body .five-worlds-story .scroll-copy { font-size: clamp(19px, 1.6vw, 24px) !important; line-height: 1.55 !important; letter-spacing: -.005em !important; max-width: 31em !important; text-wrap: balance; }
html body .five-worlds-story .scroll-copy span { letter-spacing: inherit !important; }
@media (max-width: 760px) {
  html body .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(30px, 8.2vw, 40px) !important; text-wrap: balance; }
  html body .five-worlds-story .scroll-copy { font-size: 19px !important; }
}
/* Second pass (Chris, Oct 1: "fix sizing"): headline and paragraph now sit as one block of similar width,
   instead of a wide headline over a small paragraph. */
html body .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(34px, 3.5vw, 56px) !important; }
html body .five-worlds-story .scroll-copy { font-size: clamp(20px, 1.75vw, 27px) !important; max-width: 32em !important; }
html body .five-worlds-story .fw-lead { font-size: clamp(13px, 1.05vw, 16px); }
@media (max-width: 760px) {
  html body .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(30px, 8.2vw, 40px) !important; }
  html body .five-worlds-story .scroll-copy { font-size: 19px !important; }
}

/* ===== Copy page sizing audit (Chris, Oct 1: "sizing audit, this will be going live soon") ===== */
/* No lone last words anywhere: paragraphs and list lines wrap evenly, headlines balance. */
main p, main li, main summary, main .b-myth-truth, main .b-myth-claim { text-wrap: pretty; }
main h2, main h3 { text-wrap: balance; }
/* Student Results: headline was the biggest on the page (101px at 1440) and sat on its paragraph. */
html body .student-results #student-results-title { font-size: clamp(44px, 5.6vw, 84px) !important; margin-bottom: clamp(16px, 1.6vw, 24px) !important; }
/* 12 weeks from now: the three outcomes read small beside every other section (17px at 1440). */
html body .c-benefits li p, html body .c-benefits .c-benefit p { font-size: clamp(17px, 1.3vw, 19px) !important; line-height: 1.55 !important; }
/* Phones: section headlines ranged 39px to 52px. One size band, so no section shouts over the next. */
@media (max-width: 600px) {
  html body .bonuses .section-heading h2, html body .teacher-copy h2, html body #faq-title, html body #student-results-title,
  html body #close-title, html body #join-title, html body #fit-title, html body #pain-title, html body #how-title, html body #welcome-title { font-size: clamp(36px, 11vw, 44px) !important; line-height: 1.02 !important; }
}
html body .c-benefits .c-jcard-list li p { font-size: clamp(17px, 1.4vw, 20px) !important; line-height: 1.55 !important; }
/* "Solo School." never splits across two lines in the Join headline. */
html body #join-title em { white-space: nowrap; }
/* Join points: two-line headings sat far apart (line height 1.6). */
html body .c-join .b-join-points h3 { line-height: 1.2 !important; }
/* Learn Through Immersion paragraph: two long lines on desktop instead of three (Chris, Oct 1). */
html body .c-how .b-how-head .c-how-lede { max-width: 50em !important; }
/* Five worlds opener, third pass (Chris, Oct 1): one tight block. Paragraph runs as two lines about as wide as
   the headline, sits closer under it, and the lead-in line follows closer too. */
html body .five-worlds-story .passage-stage h2#five-worlds-heading { margin-bottom: clamp(18px, 1.8vw, 26px) !important; }
html body .five-worlds-story .scroll-copy { max-width: 46em !important; font-size: clamp(19px, 1.6vw, 24px) !important; line-height: 1.5 !important; }
html body .five-worlds-story .fw-lead { margin-top: clamp(22px, 2.2vw, 32px) !important; }
@media (max-width: 760px) { html body .five-worlds-story .scroll-copy { max-width: 32em !important; font-size: 19px !important; } }
html body .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(34px, 4vw, 64px) !important; }
@media (max-width: 760px) { html body .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(30px, 8.2vw, 40px) !important; } }
/* "Here's what you'll learn..." (Chris, Oct 1: "change the heres what section"): a normal sentence on one line,
   not two lines of small caps, with an arrow pointing down into the worlds. */
html body .five-worlds-story .fw-lead { font: italic 700 clamp(18px, 1.5vw, 22px)/1.4 Archivo, Arial, sans-serif !important; font-stretch: 100% !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--orange, #ea6f1c) !important; max-width: none !important; white-space: nowrap; margin-top: clamp(26px, 2.6vw, 36px) !important; }
html body .five-worlds-story .fw-lead::after { content: ""; display: block; width: 14px; height: 14px; margin: 16px auto 0; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
@media (max-width: 760px) { html body .five-worlds-story .fw-lead { white-space: normal; text-wrap: balance; font-size: 18px !important; } }
/* Five worlds opener (Chris, Oct 1: "make them all closer in sizing"): headline down, paragraph and lead-in up,
   all three about the same width. */
html body .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(32px, 3.3vw, 52px) !important; }
html body .five-worlds-story .scroll-copy { font-size: clamp(20px, 1.8vw, 28px) !important; max-width: 33em !important; line-height: 1.45 !important; }
html body .five-worlds-story .fw-lead { font-size: clamp(19px, 1.65vw, 25px) !important; }
@media (max-width: 760px) {
  html body .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(28px, 7.6vw, 36px) !important; }
  html body .five-worlds-story .scroll-copy { font-size: 20px !important; }
  html body .five-worlds-story .fw-lead { font-size: 19px !important; }
}
/* "Imagine that soloing flowed naturally..." (Chris, Oct 1: "fix this awkward sizing"): smaller, centred and
   balanced like the other black sections, instead of a huge ragged left-aligned block. */
html body .story .story-inner { text-align: center; }
html body .story .reveal-copy { font-size: clamp(30px, 4vw, 62px) !important; line-height: 1.16 !important; letter-spacing: -.035em !important; max-width: 19em !important; margin-inline: auto !important; text-wrap: balance; }
@media (max-width: 760px) { html body .story .reveal-copy { font-size: clamp(28px, 8vw, 34px) !important; } }
/* "To unlock your soloing" chapters (Chris, Oct 1: "make this better"): the second line sits as a tidy block
   under the headline, no lone "your own.", and the payoff line is the orange accent, a step below the headline. */
html body .c-unlock-cinema .chapter-copy p { font-size: clamp(20px, 1.9vw, 28px) !important; line-height: 1.45 !important; max-width: 27em !important; margin: clamp(18px, 1.8vw, 26px) auto 0 !important; text-wrap: balance; }
html body .c-unlock-cinema .chapter-copy p.ss-built { max-width: none !important; margin-top: clamp(30px, 3vw, 44px) !important; font-size: clamp(24px, 2.5vw, 40px) !important; line-height: 1.15 !important; font-weight: 700; letter-spacing: -.03em; color: var(--orange, #ea6f1c) !important; }
/* "Immerse yourself in their playing..." on one line on desktop and tablet (Chris, Oct 1). */
@media (min-width: 900px) { html body .c-unlock-cinema [aria-labelledby="chapter-title-2"] .chapter-copy p:not(.ss-built) { max-width: none !important; white-space: nowrap; } }
/* Five worlds opener on tablet and small laptop widths (Chris, Oct 1: "sizing"): the paragraph and lead-in hit
   their minimum size there and crowded the headline. Same proportions as desktop at every width now. */
@media (min-width: 761px) and (max-width: 1279px) {
  html body .five-worlds-story .passage-stage h2#five-worlds-heading { font-size: clamp(30px, 3.6vw, 46px) !important; }
  html body .five-worlds-story .scroll-copy { font-size: clamp(17px, 1.85vw, 23px) !important; max-width: 31em !important; }
  html body .five-worlds-story .fw-lead { font-size: clamp(16px, 1.7vw, 21px) !important; }
}
/* No arrow under "Here's what you'll learn..." (Chris, Oct 1). */
html body .five-worlds-story .fw-lead::after { content: none !important; display: none !important; }