/* Public content layer. Shared tokens, header and footer are owned by the shell.
   Keep player controls, educational colours and JS visibility states intact. */

main {
  color: var(--ink, #292340);
}

main :is(.hero-grid, .contact-grid, .story-grid, .auth-grid, .series-hero-grid,
  .store-hero-inner, .blog-list-grid, .article-layout) > * {
  min-width: 0;
}

main :is(.home-section, .story, .values, .team-section, .contact-section,
  .legal-content, .blog-list, .series-list, .prod-grid-section) {
  padding-block: clamp(36px, 5vw, 68px);
}

main :is(.masthead, .cat-masthead, .legal-masthead, .blog-masthead,
  .article-masthead, .store-hero, .series-hero, .pt-hero, .seo-hero) {
  color: var(--ink, #292340);
  background: linear-gradient(120deg, #fff8e9, #fffbf5 58%, #f0e9fc);
  border-bottom: 1px solid var(--line, #e9e1d5);
  padding-block: clamp(36px, 5vw, 64px);
}

main :is(.masthead, .cat-masthead, .legal-masthead)::after {
  background: #fff0cf;
  border-color: #e8d6b5;
  opacity: .55;
}

main :is(.masthead, .cat-masthead, .legal-masthead, .blog-masthead,
  .article-masthead, .store-hero, .series-info, .pt-hero, .seo-hero) h1 {
  color: var(--ink, #292340);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 850;
  line-height: 1.65;
  letter-spacing: 0;
  text-wrap: balance;
}

main :is(.masthead, .cat-masthead, .legal-masthead, .blog-masthead,
  .article-masthead) h1 {
  max-width: 840px;
  margin-inline: auto;
}

main :is(.lead, .hero-lead, .store-hero p, .seo-hero-desc,
  .section-head p, .section-heading p, .hero-reassurance) {
  color: var(--ink-soft, #6d657f);
  line-height: 2;
}

main :is(.masthead, .cat-masthead, .legal-masthead, .blog-masthead) .lead {
  color: var(--ink-soft, #6d657f);
  max-width: 680px;
  margin-inline: auto;
  font-size: 15px;
}

main :is(.eyebrow, .home-eyebrow) {
  color: #8b5015;
  background: #fff0cf;
  border-color: #ecd8ac;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.8;
}

main .breadcrumb {
  width: fit-content;
  max-width: 100%;
  gap: 7px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line, #e9e1d5);
  box-shadow: none;
  color: var(--ink-soft, #6d657f);
  font-size: 12px;
  line-height: 1.8;
}

main .breadcrumb a,
main :is(.masthead, .legal-masthead, .article-masthead) .breadcrumb a {
  color: #7454b8;
}

main .breadcrumb .current,
main :is(.masthead, .legal-masthead, .article-masthead) .breadcrumb .current {
  color: var(--ink, #292340);
}

main :is(.masthead, .cat-masthead, .legal-masthead, .blog-masthead,
  .article-masthead) .breadcrumb {
  margin-inline: auto;
  margin-bottom: 24px;
}

/* A small set of surfaces and controls across the public journeys. */
main :is(.content-card, .video-card, .guide-card, .team-card, .info-card,
  .form-card, .legal-prose, .home-plan, .featured-card, .post-card,
  .prod-card, .episode-card, .seo-card, .filter-card, .pt-panel,
  .result-card, .store-empty-state, .no-results) {
  background-color: #fff;
  border-color: var(--line, #e9e1d5);
  border-radius: 22px;
  box-shadow: 0 5px 20px rgb(41 35 64 / 4%);
}

main :is(.content-card, .video-card, .guide-card, .team-card,
  .info-card, .prod-card, .episode-card, .post-card, .featured-card):hover {
  transform: none;
  border-color: #d1c3e5;
  box-shadow: 0 8px 24px rgb(41 35 64 / 8%);
}

main :is(.content-card, .video-card, .guide-card, .prod-card,
  .episode-card, .post-card) h3 {
  color: var(--ink, #292340);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.8;
}

main :is(.content-meta, .post-meta, .result-count, .list-count,
  .prod-desc, .field-note, .form-privacy, .article-meta) {
  color: var(--ink-soft, #6d657f);
  line-height: 1.85;
}

main .btn {
  min-height: 48px;
  border-radius: 14px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.65;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  transition: background-color .18s, border-color .18s, box-shadow .18s;
}

main .btn.btn-primary,
main :is(.add-cart-btn, .store-quick-add) {
  color: #292340;
  background: #f6b540;
  border: 1px solid #e3a633;
  box-shadow: 0 3px 0 #e3a633;
}

main .btn.btn-primary:hover,
main :is(.add-cart-btn, .store-quick-add):hover {
  color: #292340;
  background: #ffca68;
  border-color: #e3a633;
  box-shadow: 0 3px 0 #e3a633;
  transform: none;
}

main :is(.btn.btn-outline, .btn.btn-light, .btn.btn-outline-light) {
  color: #7454b8;
  background: #fff;
  border: 1px solid #d8cbe9;
  box-shadow: none;
}

main :is(.btn.btn-outline, .btn.btn-light, .btn.btn-outline-light):hover {
  color: #523880;
  background: #f0e9fc;
  border-color: #7454b8;
  box-shadow: none;
  transform: none;
}

main :is(.text-link, .btn-detail-link, .quiz-start-link, .auth-switch a,
  .form-privacy a, .article-content a:not(.btn), .legal-prose a) {
  color: #7454b8;
  text-underline-offset: 4px;
}

main .auth-form-pane .sub a {
  color: #7454b8;
}

main :is(.legal-prose a, .article-prose p a, .form-privacy a):hover {
  text-decoration: underline;
}

main :is(.cat-pill, .filter-chip, .sort-btn, .learn-tab,
  .store-filter-select, .sort-select) {
  min-height: 44px;
  border-radius: 12px;
  font-size: 13px;
}

main :is(.cat-pill.is-active, .filter-chip.active, .sort-btn.is-active),
main.watch-detail-page .learn-tab.active {
  color: #fff;
  background: #7454b8;
  border-color: #7454b8;
  box-shadow: none;
}

main :is(.level-badge, .content-tag, .prod-cat-tag, .archive-tag,
  .series-meta-row .m-chip) {
  color: #64449c;
  background: #f0e9fc;
  border-color: #ded2ef;
  font-weight: 650;
}

main :is(.filter-head, .filter-chips, .store-featured__actions,
  .series-cta-row, .form-foot, .result-actions) {
  gap: 12px;
}

main :is(.field, .form-row, .store-filter-group) {
  min-width: 0;
}

main :is(.field input:not([type="checkbox"]):not([type="radio"]),
  .field select, .field textarea, .form-input, .store-filter-input,
  .store-filter-select, .sort-select, .newsletter-form input) {
  max-width: 100%;
  min-height: 48px;
  color: #292340;
  background: #fff;
  border: 1px solid #ddd3e8;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.7;
}

main :is(.field input, .field select, .field textarea, .form-input,
  .store-filter-input, .store-filter-select, .sort-select,
  .newsletter-form input):focus {
  border-color: #7454b8;
  box-shadow: 0 0 0 3px rgb(116 84 184 / 13%);
}

main :is(.search-box, .blog-search, .ep-search) {
  background: #fff;
  border: 1px solid #ddd3e8;
  border-radius: 14px;
  box-shadow: none;
}

main :is(.search-box, .blog-search, .ep-search) input {
  min-width: 0;
  min-height: 48px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
}

main :is(.search-box, .blog-search, .ep-search):focus-within {
  border-color: #7454b8;
  box-shadow: 0 0 0 3px rgb(116 84 184 / 13%);
}

main :is(.search-box, .blog-search, .ep-search) input:focus {
  box-shadow: none;
}

/* Home keeps its playful illustrations with a calmer reading rhythm. */
.jjb-home main .wrap {
  padding-inline: clamp(18px, 3vw, 32px);
}

.jjb-home main :is(h1, h2, h3) {
  letter-spacing: 0;
}

.jjb-home main .home-hero {
  background: radial-gradient(ellipse at 20% 25%, #fff0cf, transparent 55%);
  padding-top: clamp(30px, 4vw, 56px);
}

.jjb-home main .hero-copy h1 {
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.7;
}

.jjb-home main :is(.hero-copy h1 > span, .world-bubble b, .text-link) {
  color: #7454b8;
}

.jjb-home main :is(.world-orbit, .discovery-peach, .benefit-icon.orange) {
  background: #fff0cf;
}

.jjb-home main :is(.discovery-lilac, .benefit-icon.purple, .benefit-icon.pink) {
  color: #64449c;
  background: #f0e9fc;
}

.jjb-home main :is(.home-trust, .how-step, .benefit-grid article) {
  border-color: #e9e1d5;
  box-shadow: none;
}

.jjb-home main .section-heading h2 {
  font-size: clamp(24px, 2.7vw, 34px);
  line-height: 1.7;
}

.jjb-home main :is(.home-plan.is-featured, .quiz-panel) {
  border-color: #d5c3ec;
}

.jjb-home main .home-plan.is-featured {
  background: #faf7ff;
}

main :is(.page-cta__inner, .cta-inner, .final-card, .newsletter-inner) {
  color: #292340;
  background: linear-gradient(120deg, #fff0cf, #f0e9fc);
  border: 1px solid #e9e1d5;
  border-radius: 26px;
  box-shadow: none;
}

main :is(.page-cta__inner, .cta-inner, .final-card, .newsletter-inner) :is(h2, p) {
  color: inherit;
}

/* Informational and account pages. */
main .legal-prose {
  max-width: 820px;
  padding: clamp(22px, 4vw, 44px);
}

main :is(.legal-prose p, .legal-prose li, .story-text p,
  .article-content p, .article-content li) {
  font-size: 15px;
  line-height: 2.1;
}

main :is(.legal-prose h2, .article-content h2) {
  margin-block: 30px 14px;
  color: #292340;
  line-height: 1.8;
}

main .stats {
  color: #292340;
  background: #f0e9fc;
}

main .stats-inner {
  color: #292340;
  padding-block: 26px;
  border-color: #e9e1d5;
  box-shadow: none;
}

main .stats .stat-num {
  color: #7454b8;
}

main .stats .stat-label {
  color: #6d657f;
  opacity: 1;
}

main .tl-dot {
  color: #292340;
}

main .auth-grid {
  border-color: #e9e1d5;
  border-radius: 26px;
  box-shadow: 0 12px 40px rgb(41 35 64 / 6%);
}

main .auth-form-pane {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(24px, 4vw, 44px);
}

main .auth-form-pane h1 {
  color: #292340;
  letter-spacing: 0;
  line-height: 1.7;
}

main .auth-method-tab.is-active {
  color: #64449c;
  background: #fff;
}

main .auth-section .auth-welcome {
  color: #292340;
  background: #f0e9fc;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

main .auth-welcome h2 {
  color: #292340;
}

main .auth-welcome .lead {
  color: #6d657f;
  font-size: 14px;
}

main :is(.auth-welcome-badge, .auth-benefit-icon) {
  color: #64449c;
  border-color: #d8cbe9;
}

main .contact-grid {
  gap: clamp(20px, 3vw, 36px);
}

main :is(.form-card, .info-card) {
  padding: clamp(20px, 3vw, 32px);
}

main .article-content {
  overflow-wrap: anywhere;
}

main .article-content blockquote {
  color: #64449c;
  background: #f0e9fc;
  border-color: #7454b8;
  border-radius: 16px;
}

main .article-content table {
  border-color: #e9e1d5;
}

main .article-content th {
  color: #292340;
  background: #fff0cf;
}

main .blog-sidebar .widget {
  border-color: #e9e1d5;
  box-shadow: none;
}

/* Store summaries, placement and quiet listening retain their real states. */
main .store-featured {
  background: #f0e9fc;
  border: 1px solid #ded2ef;
  border-radius: 24px;
}

main .store-filter-form {
  padding: 20px;
  background: #fff;
  border: 1px solid #e9e1d5;
  border-radius: 20px;
}

main .order-recap .rr .val {
  color: #292340;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

main .pt-side {
  color: #292340;
  background: #f0e9fc;
}

main .pt-side :is(h3, p) {
  color: inherit;
}

/* Keep the starting action close to the introduction on every screen. */
main .pt-hero { padding-block: 26px; }
main .pt-hero-inner { max-width: 920px; }
main .pt-hero h1 { font-size: clamp(26px, 3vw, 36px); }
main .pt-hero .eyebrow { margin-bottom: 12px; }
main .pt-hero p.lead { margin-bottom: 16px; }
main .pt-panel { min-height: 370px; }
main .pt-side { padding: 28px; gap: 10px; }
main .pt-side img { max-width: 130px; }
main .pt-main { padding: 28px; }
main .pt-start .big-emoji { font-size: 36px; margin-bottom: 8px; }
main .pt-start p { margin-bottom: 18px; }
@media (max-width: 820px) {
  main .pt-panel { grid-template-columns: minmax(0, 1fr); }
  main .pt-main { order: -1; padding: 24px 18px; }
  main .pt-side { padding: 22px; }
  main .pt-side img { display: none; }
  main .pt-hero-chips { gap: 6px; }
}

main .age-opt.selected {
  color: #64449c;
  background: #f0e9fc;
  border-color: #7454b8;
}

main .pt-progress span.done {
  background: #7454b8;
}

main .pt-progress span:not(.done) {
  background: #d8cbe9;
}

main .lull-hero {
  color: #fff;
  background: #302547;
}

main .lull-hero :is(h1, h1 .hl) {
  color: #fff0cf;
}

main .lull-hero p.lead {
  color: #e4ddef;
}

main .lull-hero .eyebrow {
  color: #fff0cf;
  background: rgb(255 255 255 / 9%);
  border-color: rgb(255 255 255 / 18%);
}

main .tw-opt.active {
  color: #292340;
  background: #f6b540;
  border-color: #f6b540;
}

main .error-page__code {
  color: #7454b8;
  opacity: 1;
}

main .error-page__suggestions {
  background: #fff;
  border-color: #e9e1d5;
  box-shadow: none;
}

/* Public-page review: own foreground and background together. Never recolour
   arbitrary descendants: videos, illustrations and semantic states keep theirs. */
main :is(.masthead, .legal-masthead, .cat-masthead, .blog-masthead,
  .article-masthead) .breadcrumb :is(a, .sep, .current) {
  color: var(--ink-soft);
  opacity: 1;
}
main .breadcrumb span.current { color: var(--ink); }
main .breadcrumb span.sep { color: var(--ink-soft); opacity: 1; }
main .vocab-masthead .breadcrumb a { color: #5c3e99; }
main .player-badges .lvl { color: #292340; background: #f6b540; }
main .masthead { padding-block: clamp(24px, 3vw, 44px); }
main .masthead .masthead-mascot { width: 84px; height: 84px; margin: 0 auto 12px; }
main .masthead h1 { font-size: clamp(27px, 3vw, 40px); margin-top: 12px; }
main .masthead .lead { margin-top: 14px; }
main .masthead .breadcrumb { margin-bottom: 20px; }
main .profile-masthead {
  color: var(--ink);
  background: #f0e9fc;
  padding-top: 28px;
  border-bottom: 1px solid #ded2ef;
}
main .profile-head { flex-wrap: nowrap; gap: 32px; padding-bottom: 36px; }
main .profile-info { min-width: 0; }
main .profile-info h1 { color: var(--ink); line-height: 1.65; }
main .profile-info p.tagline { color: #51475f; max-width: 720px; line-height: 2; }
main .profile-info .role-chip { color: #5c3e99; background: #fff; border: 1px solid #ded2ef; }
main .profile-avatar { border: 5px solid #fff; box-shadow: var(--shadow-sm); }
main .profile-website a { color: #5c3e99; display: inline-block; direction: ltr; overflow-wrap: anywhere; }
main .profile-socials a { color: #5c3e99; background: #fff; width: 44px; height: 44px; }
main .profile-socials svg { color: inherit; }
main .profile-container { padding-block: 40px; gap: 36px; }
main .fact-row .v { text-align: end; }

/* One CTA surface; the surrounding section does not add a second coloured box. */
main .cta-banner { color: var(--ink); background: transparent; padding-block: 36px; }
main :is(.cta-inner, .page-cta__inner) {
  width: 100%; max-width: 900px; margin-inline: auto;
  padding: clamp(26px, 4vw, 44px);
  color: var(--ink); background: #f0e9fc; border-color: #ded2ef;
}
main :is(.cta-inner, .page-cta__inner) :is(h2, p, .cta-perks) { color: var(--ink); opacity: 1; }
main .cta-inner p { color: var(--ink-soft); max-width: 600px; }
main .cta-mascot { width: 80px; height: 80px; margin: 0 auto 12px; }
main .cta-actions { margin-bottom: 0; }
main .cta-perks { margin-top: 20px; gap: 10px 20px; font-size: 12px; }
main .faq-q { min-height: 32px; }
main .faq-q:not(:has(svg))::after { content: '+'; color: var(--grape-deep); font: 24px/1 sans-serif; flex-shrink: 0; }
main details[open] > .faq-q:not(:has(svg))::after { content: '−'; }
main :is(.faq, .faq-section) { padding-block: 28px 40px; }
main .faq-list { margin-top: 24px; }
main .contact-section { padding-top: 36px; }
main .contact-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
main .info-stack { gap: 14px; }
main .info-card { padding: 22px; }
main .contact-form textarea { resize: vertical; min-height: 160px; }
main .contact-form input[type=email] { direction: ltr; text-align: left; }
main .contact-form input::placeholder, main .contact-form textarea::placeholder { color: var(--ink-soft); opacity: 1; }
main .contact-account-link { display: inline-block; color: var(--grape-deep); text-decoration: underline; text-underline-offset: 4px; margin-top: 6px; }
main .contact-section .form-note { font-size: 13px; line-height: 1.9; }
.jjb-home main .step-number { color: #6d4b13; background: #fff0cf; }
.jjb-home main .quiz-side p { color: #62566f; }
main .avatar:not(:has(img)) { color: #5c3e99; }
main .type-tab .cnt { color: #51475f; background: #eee8f5; }
main .type-tab.is-active .cnt { color: #fff; background: #5c3e99; }
main .store-featured__eyebrow { color: #5c3e99; }
main .promo-banner p { color: var(--ink-soft); opacity: 1; }
main .cart-grid > * { min-width: 0; }
main .cart-item-controls { flex-wrap: wrap; }
main .cart-coupon-input { min-width: 0; }
@media (max-width: 900px) {
  main .cart-grid { grid-template-columns: minmax(0, 1fr); }
}
main .series-info .eyebrow { color: #5c3e99; background: #f0e9fc; }
main .series-info :is(p.lead, h1 small) { color: var(--ink-soft); opacity: 1; }
main .series-poster-fallback { min-height: 180px; display: grid; place-items: center; background: #f0e9fc; font-size: 64px; }
main#series-detail .filter-wrap { margin-top: 24px; }
main .cstep.active .num { color: #292340; }
main .checkout-section .page-head .eyebrow { color: #5c3e99; }
main .auth-welcome .auth-benefits small { color: #51475f; font-size: 12px; line-height: 1.9; }
main .auth-welcome p.lead { color: #51475f; opacity: 1; }
.jjb-home main .plan-kicker { align-self: flex-start; display: inline-flex; padding: 4px 10px; border-radius: 8px; color: #5c3e99; background: #f0e9fc; font-size: 12px; }
.jjb-home main .home-plan { padding: 28px; }
.jjb-home main .plan-features { padding: 0; list-style: none; color: #51475f; }
.jjb-home main .plan-features li { display: flex; gap: 8px; }
.jjb-home main .plan-features li::before { content: '✓'; color: #176548; }
.jjb-home main .plan-features li:has(> span)::before { content: none; }

@media (max-width: 760px) {
  main .featured-card { grid-template-columns: minmax(0, 1fr); }
  main .featured-card .body { padding: 24px; }
  main .featured-card .thumb { aspect-ratio: 16 / 10; }
  main .contact-grid { grid-template-columns: minmax(0, 1fr); }
  main .contact-grid > .form-card { order: -1; }
  main .profile-head { flex-direction: column; text-align: center; gap: 18px; }
  main .profile-avatar { width: 112px; height: 112px; }
  main .profile-socials { justify-content: center; }
  main .profile-container { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  main .profile-aside { position: static; }
  main .cta-banner { padding-block: 24px; }
  main .cta-perks { gap: 8px 14px; }
  main .masthead .masthead-mascot { width: 68px; height: 68px; }
}

@media (max-width: 700px) {
  main :is(.masthead, .cat-masthead, .legal-masthead, .blog-masthead,
    .article-masthead) .breadcrumb {
    justify-content: flex-start;
    width: 100%;
  }

  main :is(.masthead, .cat-masthead, .legal-masthead, .blog-masthead,
    .article-masthead) h1 {
    font-size: clamp(25px, 6.8vw, 34px);
  }

  main :is(.contact-grid, .form-row) {
    grid-template-columns: minmax(0, 1fr);
  }

  main .store-filter-form {
    padding: 16px;
  }

  main :is(.store-filter-group, .search-box) {
    max-width: 100%;
  }

  main .result-actions .btn {
    flex: 1 1 180px;
  }

  .jjb-home main .hero-copy h1 > span {
    white-space: normal;
  }
}

@media (max-width: 420px) {
  main .btn {
    padding-inline: 16px;
    font-size: 13px;
  }

  main :is(.auth-form-pane, .form-card, .legal-prose) {
    padding: 22px 18px;
  }

  main .hero-actions .btn {
    width: 100%;
  }
}