/* ----- Pastoral / Warm design tokens -----
     * Formation, community, care.
     * Warm sans (DM Sans) + optional serif (Lora); warm neutrals; soft radius.
     */
    :root {
      --font-heading: 'Lora', Georgia, serif;
      --font-body: 'DM Sans', system-ui, sans-serif;
      --measure: min(65ch, 50rem);
      --measure-wide: min(80rem, 95vw);
      --space-xs: 0.25rem;
      --space-s: 0.5rem;
      --space-m: 1rem;
      --space-l: 1.5rem;
      --space-xl: 2rem;
      --space-2xl: 3rem;
      --space-3xl: 4.5rem;
      --radius: 10px;
      --radius-lg: 16px;
      --bg: #faf7f2;
      --bg-elevated: #ffffff;
      --bg-warm: #f5efe6;
      --border: #e8e0d4;
      --text: #2c2420;
      --text-muted: #7a6e63;
      --accent: #b58c4c;
      --accent-hover: #9a7640;
      --accent-soft: rgba(181, 140, 76, 0.1);
      --section-art-min-height: 22rem;
      --line-height-body: 1.7;
      --line-height-heading: 1.3;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: var(--line-height-body);
      color: var(--text);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* ----- PublicHeader ----- */
    .public-header {
      background: var(--bg-elevated);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .public-header__inner {
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: var(--space-m) var(--space-l);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-xl);
    }
    .public-header__logo {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 1.25rem;
      color: var(--text);
      text-decoration: none;
      letter-spacing: 0.01em;
    }
    .public-header__logo:hover { color: var(--accent); }
    .public-header__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
    .public-header__nav a {
      font-size: 0.9375rem;
      color: var(--text-muted);
      text-decoration: none;
      padding: var(--space-xs) var(--space-s);
      border-radius: var(--radius);
      transition: color 0.15s, background 0.15s;
    }
    .public-header__nav a:hover { color: var(--text); background: var(--bg-warm); }
    .public-header__nav .active { color: var(--accent); font-weight: 500; }
    .public-header__actions { display: flex; align-items: center; gap: var(--space-m); }
    .public-header__actions .btn-signin {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      padding: var(--space-s) var(--space-l);
      border: 1px solid var(--accent);
      border-radius: var(--radius);
      background: transparent;
      color: var(--accent);
      cursor: pointer;
      text-decoration: none;
      font-weight: 500;
      transition: background 0.15s, color 0.15s;
    }
    .public-header__actions .btn-signin:hover { background: var(--accent); color: var(--bg-elevated); }
    .public-header__search { width: 1.25rem; height: 1.25rem; color: var(--text-muted); cursor: pointer; }
    .public-header__search:hover { color: var(--accent); }
    .hamburger { display: none; background: none; border: none; cursor: pointer; padding: var(--space-xs); color: var(--text); }
    .hamburger svg { width: 1.5rem; height: 1.5rem; }

    @media (max-width: 48rem) {
      .public-header__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-elevated); border-bottom: 1px solid var(--border); flex-direction: column; padding: var(--space-m) var(--space-l); gap: var(--space-xs); }
      .public-header__nav.is-open { display: flex; }
      .hamburger { display: block; }
    }

    /* ----- Main ----- */
    .main-content { flex: 1; }

    /* ----- HomeHero: Split diagonal (pastoral-warm rec; warm invitation, portrait right) ----- */
    .home-hero {
      background: linear-gradient(135deg, var(--bg-warm) 55%, var(--accent-soft) 100%);
      position: relative;
      overflow: hidden;
    }
    .home-hero__inner {
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: var(--space-3xl) var(--space-l);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
      align-items: center;
    }
    @media (min-width: 56rem) {
      .home-hero__inner {
        grid-template-columns: 1fr minmax(16rem, 40%);
        gap: var(--space-3xl);
        padding: 5rem var(--space-l);
      }
    }
    .home-hero__content { text-align: left; }
    .home-hero__eyebrow {
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
      margin: 0 0 var(--space-m);
    }
    .home-hero__title {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 5vw, 3.25rem);
      font-weight: 600;
      line-height: var(--line-height-heading);
      margin: 0 0 var(--space-l);
      color: var(--text);
    }
    .home-hero__subtitle {
      font-size: 1.125rem;
      color: var(--text-muted);
      max-width: var(--measure);
      margin: 0 0 var(--space-xl);
      line-height: var(--line-height-body);
    }
    .home-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-m); }
    .home-hero__ctas .btn {
      font-family: var(--font-body);
      font-size: 1rem;
      padding: 0.75rem 1.75rem;
      border-radius: var(--radius);
      cursor: pointer;
      text-decoration: none;
      font-weight: 500;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .home-hero__ctas .btn--primary {
      background: var(--accent);
      color: #fff;
      border: 1px solid var(--accent);
    }
    .home-hero__ctas .btn--primary:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      box-shadow: 0 4px 16px rgba(181, 140, 76, 0.25);
    }
    .home-hero__ctas .btn--secondary {
      background: var(--bg-elevated);
      color: var(--text);
      border: 1px solid var(--border);
    }
    .home-hero__ctas .btn--secondary:hover {
      background: var(--bg-warm);
      border-color: var(--accent);
      color: var(--accent);
    }
    .home-hero__media {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--border);
      aspect-ratio: 3 / 4;
      box-shadow: 0 8px 32px rgba(44, 36, 32, 0.12);
    }
    .home-hero__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ----- Home hero variants: Alan ≥33% + artistic image integration ----- */

    /* V2: Full-bleed — Alan as hero background (≥33% viewport), art as band below */
    .home-hero--fullbleed {
      min-height: 85vh;
      display: flex;
      flex-direction: column;
      background: var(--text);
    }
    .home-hero--fullbleed .home-hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center 28%;
      background-repeat: no-repeat;
    }
    .home-hero--fullbleed .home-hero__bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, rgba(44, 36, 32, 0.88) 0%, rgba(44, 36, 32, 0.5) 50%, transparent 65%);
      z-index: 1;
    }
    .home-hero--fullbleed .home-hero__inner {
      position: relative;
      z-index: 2;
      flex: 1;
      min-height: 60vh;
      align-items: flex-end;
      padding-bottom: var(--space-3xl);
    }
    .home-hero--fullbleed .home-hero__content {
      max-width: 28rem;
    }
    .home-hero--fullbleed .home-hero__eyebrow { color: var(--accent); }
    .home-hero--fullbleed .home-hero__title { color: #fff; }
    .home-hero--fullbleed .home-hero__subtitle { color: var(--text-on-dark-muted, #cbd5e1); }
    .home-hero--fullbleed .home-hero__media { display: none; }
    .home-hero--fullbleed .home-hero__art-band {
      position: relative;
      z-index: 2;
      height: 14rem;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .home-hero--fullbleed .home-hero__art-band::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, var(--bg) 75%);
    }

    /* V3: Art from one side fading gradually into background as it nears Alan's portrait */
    .home-hero--art-fade {
      min-height: 75vh;
      position: relative;
      overflow: hidden;
      background: var(--bg);
    }
    .home-hero--art-fade .home-hero__inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      min-height: 75vh;
      padding: 0;
      max-width: none;
    }
    @media (min-width: 56rem) {
      .home-hero--art-fade .home-hero__inner {
        grid-template-columns: 1fr minmax(38%, 1fr);
      }
    }
    .home-hero--art-fade .home-hero__art-fade-wrap {
      position: relative;
      min-height: 50vh;
      display: flex;
      align-items: center;
      padding: var(--space-3xl) var(--space-l);
    }
    @media (min-width: 56rem) {
      .home-hero--art-fade .home-hero__art-fade-wrap {
        min-height: 75vh;
        padding: 5rem var(--space-2xl);
      }
    }
    .home-hero--art-fade .home-hero__art-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: left center;
      background-repeat: no-repeat;
    }
    .home-hero--art-fade .home-hero__art-fade-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to right, transparent 0%, rgba(250, 247, 242, 0.4) 35%, var(--bg) 60%, var(--bg) 100%);
      pointer-events: none;
    }
    .home-hero--art-fade .home-hero__content {
      position: relative;
      z-index: 2;
      max-width: 28rem;
    }
    .home-hero--art-fade .home-hero__media {
      position: relative;
      min-height: 50vh;
      background: var(--border);
    }
    .home-hero--art-fade .home-hero__media img {
      width: 100%;
      height: 100%;
      min-height: 50vh;
      object-fit: cover;
      object-position: center 25%;
      display: block;
    }
    @media (min-width: 56rem) {
      .home-hero--art-fade .home-hero__media {
        min-height: 75vh;
      }
      .home-hero--art-fade .home-hero__media img {
        min-height: 75vh;
      }
    }

    /* V4: Art as hero background + Alan in glass card (≥33%) */
    .home-hero--art-bg {
      min-height: 85vh;
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .home-hero--art-bg .home-hero__art-bg-layer {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .home-hero--art-bg .home-hero__art-bg-layer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(44, 36, 32, 0.62);
      z-index: 1;
    }
    .home-hero--art-bg .home-hero__inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
      align-items: center;
    }
    @media (min-width: 56rem) {
      .home-hero--art-bg .home-hero__inner {
        grid-template-columns: 1fr minmax(420px, 1fr);
      }
    }
    .home-hero--art-bg .home-hero__content { text-align: left; }
    .home-hero--art-bg .home-hero__eyebrow {
      color: #f5efe6;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    .home-hero--art-bg .home-hero__title {
      color: #fff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }
    .home-hero--art-bg .home-hero__subtitle {
      color: #e8e4df;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
    .home-hero--art-bg .home-hero__glass-card {
      background: rgba(250, 247, 242, 0.92);
      backdrop-filter: blur(12px);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
      aspect-ratio: 3 / 4;
      min-height: 20rem;
      min-width: min(100%, 420px);
      position: relative;
    }
    .home-hero--art-bg .home-hero__glass-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }
    .home-hero--art-bg .home-hero__glass-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(250, 247, 242, 0.4) 75%, rgba(250, 247, 242, 0.85) 100%);
      pointer-events: none;
      border-radius: inherit;
    }
    /* Dave Ferguson: no white card background — portrait floats on art background */
    body[data-leader-id="dave-ferguson"] .home-hero--art-bg .home-hero__glass-card {
      background: transparent;
      backdrop-filter: none;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
    }
    body[data-leader-id="dave-ferguson"] .home-hero--art-bg .home-hero__glass-card::after {
      display: none;
    }

    /* ----- ExplorationLane ----- */
    .section--art-bg {
      position: relative;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: var(--section-art-min-height, 22rem);
    }
    .section--art-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(250, 247, 242, 0.9);
      z-index: 0;
      pointer-events: none;
    }
    .section--art-bg > * {
      position: relative;
      z-index: 1;
    }
    .section--art-band {
      position: relative;
      overflow: hidden;
    }
    .section__art-band-strip {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 10rem;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
    }
    .section__art-band-strip::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(250, 247, 242, 0.8) 0%, var(--bg) 100%);
    }
    .section--art-band > *:not(.section__art-band-strip) {
      position: relative;
      z-index: 1;
    }
    .exploration-lane {
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: var(--space-3xl) var(--space-l) var(--space-2xl);
    }
    .exploration-lane__title {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0 0 var(--space-l);
      color: var(--text);
    }
    .exploration-lane__grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
      gap: var(--space-l);
    }
    .theme-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl) var(--space-xl) var(--space-l);
      text-decoration: none;
      color: inherit;
      display: block;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .theme-card:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 20px rgba(181, 140, 76, 0.1);
      transform: translateY(-2px);
    }
    .theme-card__icon {
      width: 2.5rem;
      height: 2.5rem;
      background: var(--accent-soft);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--space-m);
      color: var(--accent);
    }
    .theme-card__img {
      aspect-ratio: 3 / 2;
      overflow: hidden;
      border-radius: var(--radius) var(--radius) 0 0;
      margin: calc(var(--space-xl) * -1) calc(var(--space-xl) * -1) var(--space-m) calc(var(--space-xl) * -1);
      background: var(--bg-warm);
    }
    .theme-card__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .theme-card__title {
      font-family: var(--font-heading);
      font-size: 1.0625rem;
      font-weight: 600;
      margin: 0 0 var(--space-s);
      color: var(--text);
    }
    .theme-card__description {
      font-size: 0.9375rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.55;
    }
    .theme-card__meta {
      display: block;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--accent);
      margin-top: var(--space-s);
      letter-spacing: 0.03em;
    }

    /* ----- LibraryLane ----- */
    .library-lane {
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: var(--space-2xl) var(--space-l) var(--space-3xl);
    }
    .library-lane__title {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0 0 var(--space-l);
      color: var(--text);
    }
    .library-lane__grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
      gap: var(--space-l);
    }
    .library-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      text-decoration: none;
      color: inherit;
      display: block;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .library-card:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 20px rgba(181, 140, 76, 0.1);
      transform: translateY(-2px);
    }
    .library-card__title {
      font-family: var(--font-heading);
      font-size: 1.0625rem;
      font-weight: 600;
      margin: 0 0 var(--space-s);
      color: var(--text);
    }
    .library-card__description {
      font-size: 0.875rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.55;
    }
    .library-card__thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      margin-bottom: var(--space-m);
      border-radius: var(--radius);
    }
    .library-card__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .library-card__icon-wrap {
      width: 2.25rem;
      height: 2.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius);
      background: var(--accent-soft);
      margin-bottom: var(--space-s);
      color: var(--accent);
    }
    .library-card__icon {
      width: 1.125rem;
      height: 1.125rem;
    }
    .library-card__meta {
      display: block;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--accent);
      margin-top: var(--space-s);
      letter-spacing: 0.03em;
    }

    /* ----- HomeFoot: about, orgs, newsletter ----- */
    .home-foot {
      background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
      border-top: 1px solid var(--border);
      padding: var(--space-3xl) var(--space-xl);
      width: 100%;
    }
    .home-foot__inner {
      max-width: var(--measure-wide);
      margin: 0 auto;
      width: 100%;
    }
    .home-foot__top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3xl) var(--space-2xl);
      margin-bottom: var(--space-3xl);
      align-items: start;
    }
    @media (max-width: 52rem) {
      .home-foot__top {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
      }
    }
    .home-foot__title {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0 0 var(--space-m);
      color: var(--text);
    }
    .home-foot__about-text {
      margin: 0 0 var(--space-l);
      font-size: 1.0625rem;
      line-height: 1.75;
      color: var(--text);
      max-width: 36em;
    }
    .home-foot__cta { margin-top: var(--space-m); display: inline-block; }
    .home-foot__newsletter-desc {
      margin: 0 0 var(--space-l);
      font-size: 1rem;
      color: var(--text-muted);
      max-width: 28em;
    }
    .home-foot__newsletter-form {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-s);
      max-width: 100%;
    }
    .home-foot__newsletter-input {
      flex: 1;
      min-width: 14rem;
      padding: var(--space-m) var(--space-l);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 1rem;
      background: var(--bg-elevated);
      color: var(--text);
    }
    .home-foot__newsletter-input::placeholder { color: var(--text-muted); }
    .home-foot__newsletter-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent-soft);
    }
    /* Orgs: full-width strip, big logo row */
    .home-foot__orgs {
      padding-top: var(--space-2xl);
      border-top: 1px solid var(--border);
      width: 100%;
    }
    .home-foot__orgs-title {
      font-family: var(--font-heading);
      font-size: 1.375rem;
      font-weight: 600;
      margin: 0 0 var(--space-s);
      color: var(--text);
    }
    .home-foot__orgs-subtitle {
      margin: 0 0 var(--space-xl);
      font-size: 1rem;
      color: var(--text-muted);
      max-width: 40rem;
    }
    .home-foot__orgs-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-xl);
      align-items: stretch;
      width: 100%;
    }
    @media (max-width: 64rem) {
      .home-foot__orgs-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 28rem) {
      .home-foot__orgs-grid {
        grid-template-columns: 1fr;
      }
    }
    .org-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-m);
      padding: var(--space-xl) var(--space-l);
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      text-decoration: none;
      color: var(--text);
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      min-height: 8rem;
    }
    .org-card:hover {
      border-color: var(--accent);
      box-shadow: 0 6px 24px rgba(181, 140, 76, 0.12);
      transform: translateY(-2px);
    }
    .org-card__logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 4rem;
      flex-shrink: 0;
    }
    .org-card__logo {
      max-width: 100%;
      max-height: 4rem;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
    }
    .org-card__name {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-muted);
      text-align: center;
      line-height: 1.3;
    }

    /* ----- PublicFooter ----- */
    .public-footer {
      border-top: 1px solid var(--border);
      background: var(--bg-warm);
      margin-top: auto;
    }
    .public-footer__inner {
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: var(--space-xl) var(--space-l);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-m);
    }
    .public-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-m); }
    .public-footer__links a { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; }
    .public-footer__links a:hover { color: var(--accent); }
    .public-footer__copy { font-size: 0.8125rem; color: var(--text-muted); margin: 0; }

    /* ----- Auth (sign in, sign up, verify email) ----- */
    .auth-section,
    .auth-page {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-3xl) var(--space-l);
      min-height: 50vh;
    }
    .auth-card {
      width: 100%;
      max-width: 26rem;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-2xl);
      box-shadow: 0 8px 32px rgba(44, 36, 32, 0.08);
    }
    .auth-card__title {
      font-family: var(--font-heading);
      font-size: 1.75rem;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 var(--space-xl);
      text-align: center;
    }
    .auth-card__description {
      font-size: 0.9375rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin: 0 0 var(--space-l);
      text-align: center;
    }
    .auth-form,
    .auth-card__form { margin-bottom: var(--space-l); }
    .auth-form__field,
    .auth-form__group {
      margin-bottom: var(--space-m);
    }
    .auth-form__field:last-of-type,
    .auth-form__group:last-of-type { margin-bottom: var(--space-l); }
    .auth-form__field label,
    .auth-form__label,
    .auth-card__label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text);
      margin-bottom: var(--space-xs);
    }
    .auth-form__field input,
    .auth-form__input,
    .auth-card__input {
      width: 100%;
      font-family: var(--font-body);
      font-size: 1rem;
      padding: var(--space-m);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      color: var(--text);
      transition: border-color 0.2s;
    }
    .auth-form__field input:focus,
    .auth-form__input:focus,
    .auth-card__input:focus {
      outline: none;
      border-color: var(--accent);
    }
    .auth-form__submit,
    .auth-card__submit {
      width: 100%;
      margin-top: var(--space-s);
      padding: var(--space-m) var(--space-l);
    }
    .auth-card__footer {
      font-size: 0.9375rem;
      color: var(--text-muted);
      text-align: center;
      margin: var(--space-m) 0 0;
    }
    .auth-card__footer a,
    .auth-form__link {
      color: var(--accent);
      font-weight: 500;
      text-decoration: none;
    }
    .auth-card__footer a:hover,
    .auth-form__link:hover { text-decoration: underline; }
    .verify-email-form__hint { font-size: 0.875rem; color: var(--text-muted); margin: 0 0 var(--space-m); }
    .verify-email-form__form { margin-bottom: var(--space-m); }
    .verify-email-form__resend { font-size: 0.875rem; margin: 0; }
    .verify-email-form__resend a { color: var(--accent); text-decoration: none; }
    .verify-email-form__resend a:hover { text-decoration: underline; }

    /* ----- FloatingChatButton ----- */
    .floating-chat-button {
      position: fixed;
      bottom: var(--space-xl);
      right: var(--space-xl);
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(181, 140, 76, 0.3);
      z-index: 200;
      transition: background 0.2s, transform 0.2s;
    }
    .floating-chat-button:hover { background: var(--accent-hover); transform: scale(1.06); }
    .floating-chat-button svg { width: 1.25rem; height: 1.25rem; }

    /* ----- FloatingChatPanel ----- */
    .floating-chat-panel {
      position: fixed; top: 0; right: 0; width: 100%; max-width: 24rem; height: 100%;
      background: var(--bg-elevated); border-left: 1px solid var(--border);
      box-shadow: -4px 0 24px rgba(44, 36, 32, 0.1); z-index: 201;
      display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform 0.25s ease;
    }
    .floating-chat-panel.is-open { transform: translateX(0); }
    .floating-chat-panel__header {
      padding: var(--space-m) var(--space-l); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
    }
    .floating-chat-panel__title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; margin: 0; color: var(--text); }
    .floating-chat-panel__close {
      width: 2rem; height: 2rem; padding: 0; border: none; background: transparent;
      color: var(--text-muted); cursor: pointer; border-radius: var(--radius);
      display: flex; align-items: center; justify-content: center;
    }
    .floating-chat-panel__close:hover { background: var(--bg-warm); color: var(--text); }
    .floating-chat-panel__body { flex: 1; overflow-y: auto; padding: var(--space-l); }
    .floating-chat-panel__placeholder { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
    .floating-chat-panel__input-area { padding: var(--space-m) var(--space-l); border-top: 1px solid var(--border); display: flex; gap: var(--space-s); }
    .floating-chat-panel__input {
      flex: 1; font-family: var(--font-body); font-size: 0.9375rem;
      padding: var(--space-s) var(--space-m); border: 1px solid var(--border);
      border-radius: var(--radius); background: var(--bg); color: var(--text);
    }
    .floating-chat-panel__input::placeholder { color: var(--text-muted); }
    .floating-chat-panel__send {
      font-family: var(--font-body); font-size: 0.9375rem; padding: var(--space-s) var(--space-m);
      border: none; border-radius: var(--radius); background: var(--accent);
      color: #fff; cursor: pointer; font-weight: 500;
    }
    .floating-chat-panel__send:hover { background: var(--accent-hover); }
    .floating-chat-panel__suggestions {
      padding: 0 var(--space-l) var(--space-s);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }
    .floating-chat-panel__suggestion {
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 500;
      padding: var(--space-xs) var(--space-m);
      border: 1px solid var(--border);
      border-radius: 999px;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: border-color var(--transition), color var(--transition), background var(--transition);
    }
    .floating-chat-panel__suggestion:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-soft);
    }
    .chat-backdrop {
      position: fixed; inset: 0; background: rgba(44, 36, 32, 0.2);
      z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s;
    }
    .chat-backdrop.is-visible { opacity: 1; pointer-events: auto; }

    /* ----- Full-page chat (/chat) — full viewport, input never below fold ----- */
    .chat-page-wrap {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .chat-page-wrap .public-footer { display: none; }
    .chat-page-wrap .floating-chat-button { display: none; }
    .chat-page {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      max-width: var(--measure-wide);
      margin: 0 auto;
      width: 100%;
      padding: var(--space-l) var(--space-xl);
      background: var(--bg);
      color: var(--text);
      overflow: hidden;
    }
    .chat-page__frame { flex-shrink: 0; padding-bottom: var(--space-m); border-bottom: 1px solid var(--border); margin-bottom: var(--space-m); }
    .chat-page__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; margin: 0 0 var(--space-xs); color: var(--text); }
    .chat-page__user-in-charge { font-size: 0.8125rem; color: var(--text-muted); margin: 0; font-style: italic; }
    .chat-page__messages {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: var(--space-m);
      -webkit-overflow-scrolling: touch;
    }
    .chat-page__empty { display: block; }
    .chat-page__list { display: flex; flex-direction: column; gap: var(--space-m); }
    .chat-page__welcome { font-size: 0.9375rem; color: var(--text-muted); margin: 0 0 var(--space-l); line-height: 1.5; }
    .chat-page__suggestions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
    .chat-page__suggestion { font-family: var(--font-body); font-size: 0.8125rem; padding: var(--space-s) var(--space-m); background: var(--bg-warm); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
    .chat-page__suggestion:hover { border-color: var(--accent); color: var(--accent); }
    .chat-page__input {
      flex-shrink: 0;
      padding-top: var(--space-m);
      border-top: 1px solid var(--border);
      display: flex;
      gap: var(--space-s);
      margin-top: 0;
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .chat-page__input input { flex: 1; font-family: var(--font-body); font-size: 0.9375rem; padding: var(--space-m); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); outline: none; transition: border-color 0.2s; }
    .chat-page__input input::placeholder { color: var(--text-muted); }
    .chat-page__input input:focus { border-color: var(--accent); }
    .chat-page__send { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; padding: var(--space-m) var(--space-l); background: var(--accent); color: #fff; border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.2s; }
    .chat-page__send:hover { background: var(--accent-hover); }
    .chat-page__disclaimer {
      flex-shrink: 0;
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin: var(--space-s) 0 0;
      line-height: 1.4;
    }

    /* Focus */
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* ===== SHARED UTILITIES ===== */
    .btn {
      font-family: var(--font-body);
      font-size: 1rem;
      padding: 0.75rem 1.75rem;
      border-radius: var(--radius);
      cursor: pointer;
      text-decoration: none;
      font-weight: 500;
      display: inline-block;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .btn--primary {
      background: var(--accent);
      color: #fff;
      border: 1px solid var(--accent);
    }
    .btn--primary:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      box-shadow: 0 4px 16px rgba(181, 140, 76, 0.25);
    }
    .btn--secondary {
      background: var(--bg-elevated);
      color: var(--text);
      border: 1px solid var(--border);
    }
    .btn--secondary:hover {
      background: var(--bg-warm);
      border-color: var(--accent);
      color: var(--accent);
    }
    .btn--outline {
      background: transparent;
      color: var(--accent);
      border: 1px solid var(--accent);
    }
    .btn--outline:hover {
      background: var(--accent);
      color: #fff;
    }
    .btn--sm {
      font-size: 0.875rem;
      padding: 0.5rem 1.25rem;
    }
    .btn--lg {
      font-size: 1.0625rem;
      padding: 0.875rem 2rem;
    }

    /* ----- Badge ----- */
    .badge {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 500;
      padding: 0.2rem 0.65rem;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      text-transform: capitalize;
      letter-spacing: 0.02em;
    }
    .badge--formation { background: rgba(181, 140, 76, 0.15); color: #8b6919; }
    .badge--apest { background: rgba(118, 95, 160, 0.2); color: #4a3d6b; }
    .badge--missional { background: rgba(64, 120, 120, 0.2); color: #2d5a5a; }
    .badge--discipleship { background: rgba(140, 100, 60, 0.2); color: #6b4a2d; }
    .badge--type {
      background: var(--bg-warm);
      color: var(--text-muted);
    }
    .badge--popular {
      background: var(--accent);
      color: #fff;
    }

    /* ----- Page Section ----- */
    .page-section {
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: var(--space-3xl) var(--space-l);
    }
    .page-section__title {
      font-family: var(--font-heading);
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 600;
      line-height: var(--line-height-heading);
      margin: 0 0 var(--space-m);
      color: var(--text);
    }
    .page-section__subtitle {
      font-size: 1.0625rem;
      color: var(--text-muted);
      margin: 0 0 var(--space-2xl);
      max-width: var(--measure);
      line-height: var(--line-height-body);
    }
    .page-section__subtitle--lead {
      font-size: 1.125rem;
      margin-bottom: var(--space-2xl);
    }
    .page-section__lead {
      font-size: 1.0625rem;
      color: var(--text);
      margin: 0 0 var(--space-2xl);
      max-width: var(--measure);
      line-height: var(--line-height-body);
    }
    .page-section__title--small {
      font-size: 1.25rem;
      margin-bottom: var(--space-m);
    }
    .page-section__inner {
      max-width: var(--measure);
    }
    .page-section__eyebrow {
      font-size: 0.875rem;
      color: var(--text-muted);
      margin: 0 0 var(--space-s);
    }
    .page-section__eyebrow a {
      color: var(--accent);
      text-decoration: none;
    }
    .page-section__eyebrow a:hover {
      text-decoration: underline;
    }

    /* ----- Themes: key frameworks grid ----- */
    .themes-frameworks .page-section__inner {
      max-width: var(--measure-wide);
    }
    .themes-frameworks__grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
      gap: var(--space-l);
      margin-top: var(--space-xl);
    }
    .themes-frameworks__card {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      text-decoration: none;
      color: inherit;
      display: block;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .themes-frameworks__card:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 20px rgba(181, 140, 76, 0.1);
    }
    .themes-frameworks__label {
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 600;
      color: var(--accent);
      display: block;
      margin-bottom: var(--space-s);
      letter-spacing: 0.02em;
    }
    .themes-frameworks__text {
      font-size: 0.9375rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.55;
    }
    .themes-frameworks__text em {
      font-style: italic;
      color: var(--text);
    }

    /* ===== CONTENT TABS ===== */
    .content-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin-bottom: var(--space-2xl);
      border-bottom: 1px solid var(--border);
      padding-bottom: var(--space-xs);
    }
    .content-tabs__tab {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--text-muted);
      background: none;
      border: none;
      padding: var(--space-s) var(--space-m);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: color 0.15s, border-color 0.15s;
      margin-bottom: -1px;
    }
    .content-tabs__tab:hover { color: var(--text); }
    .content-tabs__tab.is-active {
      color: var(--accent);
      border-bottom-color: var(--accent);
      font-weight: 600;
    }

    /* ===== CONTENT HUB ===== */
    .content-hub__grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
      gap: var(--space-l);
    }
    .content-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .content-card:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 20px rgba(181, 140, 76, 0.1);
      transform: translateY(-2px);
    }
    .content-card__image {
      aspect-ratio: 3 / 2;
      overflow: hidden;
      background: var(--bg-warm);
      position: relative;
    }
    .content-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .content-card__image--book {
      aspect-ratio: 2 / 3;
      max-height: 16rem;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-l);
    }
    .content-card__image--book img {
      width: auto;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      border-radius: var(--radius);
      box-shadow: 0 4px 16px rgba(44, 36, 32, 0.15);
    }
    .content-card__image--featured { background: var(--border); }
    .content-card__image--featured img { object-fit: cover; }
    .content-card__image--video .content-card__runtime,
    .content-card__image--podcast .content-card__runtime { bottom: var(--space-s); right: var(--space-s); }
    .content-card__runtime {
      position: absolute;
      bottom: var(--space-s);
      right: var(--space-s);
      background: rgba(44, 36, 32, 0.8);
      color: #fff;
      font-size: 0.75rem;
      font-weight: 500;
      padding: 0.15rem 0.5rem;
      border-radius: var(--radius);
    }
    .content-card__body {
      padding: var(--space-l);
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
    }
    .content-card__badges {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }
    .content-card__title {
      font-family: var(--font-heading);
      font-size: 1.0625rem;
      font-weight: 600;
      margin: 0;
      color: var(--text);
      line-height: 1.35;
    }
    .content-card__description {
      font-size: 0.875rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.55;
    }
    .content-card__link {
      font-size: 0.875rem;
      color: var(--accent);
      text-decoration: none;
      font-weight: 500;
      margin-top: auto;
      padding-top: var(--space-s);
    }
    .content-card__link:hover { text-decoration: underline; }

    /* ----- Course Learn (CourseSidebar + LessonContent) ----- */
    .course-learn-main { padding-top: 72px; min-height: 100vh; }
    .course-learn-layout { display: flex; max-width: var(--measure-wide); margin: 0 auto; min-height: calc(100vh - 72px); }
    .course-learn-sidebar {
      width: 280px; flex-shrink: 0; background: var(--bg-elevated); border-right: 1px solid var(--border);
      padding: var(--space-xl); overflow-y: auto; position: sticky; top: 72px; height: calc(100vh - 72px);
    }
    .course-learn-sidebar__back { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-l); }
    .course-learn-sidebar__back:hover { color: var(--accent); }
    .course-learn-sidebar__back svg { width: 1rem; height: 1rem; }
    .course-learn-sidebar__title { font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin: 0 0 var(--space-m); }
    .course-learn-accordion { padding: 0; margin: 0; }
    .course-learn-week { border-bottom: 1px solid var(--border); }
    .course-learn-week__summary { font-size: 0.875rem; font-weight: 600; color: var(--text); padding: var(--space-m) 0; cursor: pointer; list-style: none; display: flex; align-items: center; }
    .course-learn-week__summary::-webkit-details-marker { display: none; }
    .course-learn-week__summary::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); margin-right: var(--space-s); transform: rotate(45deg); }
    .course-learn-week[open] .course-learn-week__summary::before { transform: rotate(-135deg); }
    .course-learn-lessons { list-style: none; padding: 0 0 var(--space-m); margin: 0; }
    .course-learn-lesson { display: block; font-size: 0.8125rem; color: var(--text-muted); text-decoration: none; padding: var(--space-s) 0 var(--space-s) var(--space-l); border-left: 2px solid transparent; }
    .course-learn-lesson:hover { color: var(--text); }
    .course-learn-lesson--active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
    .lesson-content { flex: 1; background: var(--bg); padding: var(--space-3xl); max-width: 780px; margin: 0 auto; width: 100%; }
    .lesson-content__meta { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin: 0 0 var(--space-m); }
    .lesson-content__title { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; line-height: var(--line-height-heading); color: var(--text); margin: 0 0 var(--space-2xl); }
    .lesson-content__body { font-size: 1.0625rem; color: var(--text); line-height: 1.85; }
    .lesson-content__body .lesson-section { margin-bottom: var(--space-2xl); }
    .lesson-content__body .lesson-section__title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--accent); margin: 0 0 var(--space-m); }
    .lesson-content__body .lesson-section__body p { margin: 0 0 var(--space-l); }
    .lesson-content__body p { margin: 0 0 var(--space-l); }
    .lesson-content__body h2 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; color: var(--text); margin: var(--space-2xl) 0 var(--space-m); }
    .lesson-content__body blockquote { border-left: 3px solid var(--accent); margin: var(--space-xl) 0; padding: var(--space-m) var(--space-xl); font-style: italic; color: var(--text); }
    .lesson-content__body ol { margin: var(--space-l) 0; padding-left: var(--space-2xl); }
    .lesson-content__nav { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2xl) 0; border-top: 1px solid var(--border); margin-top: var(--space-3xl); gap: var(--space-m); }
    .lesson-content__nav-link { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-xs); }
    .lesson-content__nav-link:hover { color: var(--accent); }
    .lesson-content__nav-link svg { width: 1rem; height: 1rem; }
    @media (max-width: 48rem) {
      .course-learn-sidebar { position: fixed; top: 72px; left: 0; bottom: 0; z-index: 90; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,0.1); }
      .course-learn-sidebar.is-open { transform: translateX(0); }
      .lesson-content { padding: var(--space-xl) var(--space-l); }
    }

    /* ----- Course Player (video left, outline right; reference-style) ----- */
    .course-player-main { padding-top: 72px; min-height: 100vh; background: var(--bg); }
    .course-player-back {
      display: inline-flex; align-items: center; gap: var(--space-s);
      font-size: 0.875rem; color: var(--text-muted); text-decoration: none;
      max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-m) var(--space-l);
    }
    .course-player-back:hover { color: var(--accent); }
    .course-player-back svg { width: 1rem; height: 1rem; }
    .course-player-layout {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: var(--space-xl);
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: 0 var(--space-l) var(--space-2xl);
    }
    .course-player-video-col { min-width: 0; }
    .course-player-media { display: block; }
    .course-player-media.is-hidden { display: none; }
    .course-player-lesson-content {
      display: none;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      max-height: 70vh;
      overflow-y: auto;
      margin-bottom: var(--space-xl);
    }
    .course-player-lesson-content.is-visible { display: block; }
    .course-player-content-body.prose {
      font-size: 0.9375rem;
      line-height: 1.7;
      color: var(--text);
    }
    .course-player-content-body.prose p { margin: 0 0 1em; }
    .course-player-content-body.prose p:last-child { margin-bottom: 0; }
    .course-player-content-body.prose h2 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin: 1.5em 0 0.5em; }
    .course-player-content-body.prose h3 { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; margin: 1.25em 0 0.5em; }
    .course-player-content-body.prose strong { font-weight: 600; }
    .course-player-content-body.prose em { font-style: italic; }
    .course-player-content-body.prose ul, .course-player-content-body.prose ol { margin: 0 0 1em; padding-left: 1.5em; }
    .course-player-content-body.prose li { margin-bottom: 0.25em; }
    .course-player-content-body.prose hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
    .course-player-content-body.prose blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--accent); color: var(--text-muted); }
    .course-player-video-wrap {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--text);
      aspect-ratio: 16 / 9;
    }
    .course-player-poster {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--bg-warm) 0%, var(--accent-soft) 50%, rgba(181, 140, 76, 0.2) 100%);
      z-index: 2;
      transition: opacity 0.2s;
    }
    .course-player-poster__bg {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; z-index: 0;
    }
    .course-player-poster__bg[src] ~ .course-player-poster__badge,
    .course-player-poster__bg[src] ~ .course-player-poster__title,
    .course-player-poster__bg[src] ~ .course-player-play-btn { text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
    .course-player-poster::after {
      content: ''; position: absolute; inset: 0; z-index: 0.5;
      background: linear-gradient(135deg, rgba(250,247,242,0.75) 0%, rgba(181,140,76,0.15) 50%, rgba(0,0,0,0.2) 100%);
      pointer-events: none;
    }
    .course-player-poster .course-player-poster__badge,
    .course-player-poster .course-player-poster__title,
    .course-player-poster .course-player-play-btn { position: relative; z-index: 1; }
    .course-player-poster.is-visible { opacity: 1; }
    .course-player-poster:not(.is-visible) { opacity: 0; pointer-events: none; }
    .course-player-poster__badge {
      font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--text-muted); margin-bottom: var(--space-s);
    }
    .course-player-poster__title {
      font-family: var(--font-heading);
      font-size: clamp(1.25rem, 2.5vw, 2rem);
      font-weight: 600;
      color: var(--text);
      margin: 0 0 var(--space-l);
      padding: 0 var(--space-m);
      text-align: center;
    }
    .course-player-play-btn {
      width: 4.5rem; height: 4.5rem;
      border-radius: 50%;
      background: var(--text);
      color: var(--bg-elevated);
      border: none;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 24px rgba(0,0,0,0.2);
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .course-player-play-btn:hover { transform: scale(1.05); box-shadow: 0 6px 28px rgba(0,0,0,0.25); }
    .course-player-play-btn svg { width: 2rem; height: 2rem; margin-left: 4px; }
    .course-player-video {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
      background: #000;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .course-player-video.is-visible { opacity: 1; z-index: 3; }
    .course-player-below {
      display: grid;
      grid-template-columns: 1fr minmax(12rem, 280px);
      gap: var(--space-xl);
      align-items: start;
      margin-top: var(--space-xl);
    }
    .course-player-lesson-title {
      font-family: var(--font-heading);
      font-size: clamp(1.375rem, 2vw, 1.75rem);
      font-weight: 600;
      color: var(--text);
      margin: 0 0 var(--space-m);
    }
    .course-player-lesson-excerpt {
      font-size: 0.9375rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin: 0;
    }
    .course-player-cta {
      background: var(--bg-warm);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--space-l);
    }
    .course-player-cta__text,
    .course-player-cta__sub { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
    .course-player-cta__link { color: var(--accent); font-weight: 500; text-decoration: none; }
    .course-player-cta__link:hover { text-decoration: underline; }
    .course-player-sidebar {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      position: sticky;
      top: calc(72px + var(--space-m));
      max-height: calc(100vh - 72px - var(--space-2xl));
      overflow-y: auto;
      transition: background 0.2s;
    }
    .course-player-sidebar[aria-lights-off="true"] {
      background: var(--bg-warm);
    }
    .course-player-sidebar__head { display: flex; justify-content: flex-end; margin-bottom: var(--space-m); }
    .course-player-lights-off {
      display: inline-flex; align-items: center; gap: var(--space-xs);
      font-size: 0.8125rem; color: var(--text-muted);
      background: none; border: none; cursor: pointer;
      padding: var(--space-xs) var(--space-s);
      border-radius: var(--radius);
    }
    .course-player-lights-off:hover { color: var(--accent); }
    .course-player-lights-off svg { width: 1.125rem; height: 1.125rem; }
    .course-player-sidebar__course-title {
      font-family: var(--font-heading);
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 var(--space-xs);
    }
    .course-player-sidebar__meta { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 var(--space-l); }
    .course-player-outline { margin: 0; padding: 0; }
    .course-player-loading { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
    .course-player-chapter { margin-bottom: var(--space-l); }
    .course-player-chapter__title {
      font-family: var(--font-heading);
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 var(--space-s);
    }
    .course-player-lessons { list-style: none; padding: 0; margin: 0; }
    .course-player-lesson-item { margin: 0; }
    .course-player-lesson-item__link {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: var(--space-s);
      align-items: center;
      font-size: 0.8125rem;
      color: var(--text-muted);
      text-decoration: none;
      padding: var(--space-s) var(--space-m);
      border-radius: var(--radius);
      margin-bottom: 2px;
      transition: background 0.15s, color 0.15s;
    }
    .course-player-lesson-item__link:hover { background: var(--bg-warm); color: var(--text); }
    .course-player-lesson-item--active .course-player-lesson-item__link {
      background: var(--accent-soft);
      color: var(--text);
      font-weight: 500;
    }
    .course-player-lesson-item__num { color: var(--text-muted); }
    .course-player-lesson-item--active .course-player-lesson-item__num { color: var(--accent); }
    .course-player-lesson-item__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .course-player-lesson-item__duration { font-size: 0.75rem; color: var(--text-muted); }
    .course-player-lesson-item__play {
      width: 1.5rem; height: 1.5rem;
      border-radius: 50%;
      border: 2px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .course-player-lesson-item__play svg { width: 0.625rem; height: 0.625rem; }
    .course-player-lesson-item--active .course-player-lesson-item__play {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--bg-elevated);
    }
    @media (max-width: 64rem) {
      .course-player-layout { grid-template-columns: 1fr; }
      .course-player-sidebar { position: static; max-height: none; }
    }
    @media (max-width: 40rem) {
      .course-player-below { grid-template-columns: 1fr; }
    }

    /* ===== BOOK CARDS (Books List) ===== */
    .books-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
      gap: var(--space-l);
    }
    .book-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .book-card:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 20px rgba(181, 140, 76, 0.12);
      transform: translateY(-3px);
    }
    .book-card__cover {
      aspect-ratio: 2 / 3;
      overflow: hidden;
      background: var(--bg-warm);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-l);
    }
    .book-card__cover img {
      width: auto;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      border-radius: var(--radius);
      box-shadow: 0 4px 16px rgba(44, 36, 32, 0.15);
      transition: transform 0.2s;
    }
    .book-card:hover .book-card__cover img { transform: scale(1.03); }
    .book-card--course .book-card__cover {
      aspect-ratio: 3 / 2;
      padding: 0;
    }
    .book-card--course .book-card__cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0;
      box-shadow: none;
    }
    .book-card__info {
      padding: var(--space-m) var(--space-l) var(--space-l);
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }
    .book-card__title {
      font-family: var(--font-heading);
      font-size: 1rem;
      font-weight: 600;
      margin: 0;
      color: var(--text);
      line-height: 1.3;
    }
    .book-card__author {
      font-size: 0.8125rem;
      color: var(--text-muted);
      margin: 0;
    }
    .book-card__badges {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin-top: var(--space-xs);
    }

    /* ===== BOOK DETAIL ===== */
    .book-detail {
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: var(--space-3xl) var(--space-l);
    }
    .book-detail__hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
      margin-bottom: var(--space-3xl);
    }
    @media (min-width: 48rem) {
      .book-detail__hero {
        grid-template-columns: minmax(12rem, 20rem) 1fr;
        gap: var(--space-3xl);
      }
    }
    .book-detail__cover {
      aspect-ratio: 2 / 3;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--bg-warm);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-xl);
      box-shadow: 0 8px 32px rgba(44, 36, 32, 0.12);
    }
    .book-detail__cover img {
      width: auto;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      border-radius: var(--radius);
      box-shadow: 0 4px 24px rgba(44, 36, 32, 0.2);
    }
    .book-detail__meta { display: flex; flex-direction: column; gap: var(--space-l); }
    .book-detail__title {
      font-family: var(--font-heading);
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 600;
      line-height: var(--line-height-heading);
      margin: 0;
      color: var(--text);
    }
    .book-detail__author-row {
      display: flex;
      align-items: center;
      gap: var(--space-m);
    }
    .book-detail__author-avatar {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--border);
    }
    .book-detail__author-name {
      font-size: 1rem;
      font-weight: 500;
      color: var(--text);
      margin: 0;
    }
    .book-detail__badges {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-s);
    }
    .book-detail__description {
      font-size: 1.0625rem;
      color: var(--text-muted);
      line-height: var(--line-height-body);
      margin: 0;
    }
    .book-detail__description p { margin: 0 0 var(--space-m); }
    .book-detail__description p:last-child { margin-bottom: 0; }
    .book-detail__ctas {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-m);
      margin-top: var(--space-s);
    }
    .book-detail__related {
      border-top: 1px solid var(--border);
      padding-top: var(--space-3xl);
    }
    .book-detail__related-title {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0 0 var(--space-l);
      color: var(--text);
    }

    /* ----- Course Detail ----- */
    .course-detail__hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-3xl) var(--space-l); }
    .course-detail__media .course-detail__instructor-img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; display: block; }
    .course-detail__eyebrow { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 var(--space-s); }
    .course-detail__title { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; margin: 0 0 var(--space-s); }
    .course-detail__instructor-row { display: flex; align-items: center; gap: var(--space-m); margin-bottom: var(--space-s); }
    .course-detail__instructor-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .course-detail__instructor-name { font-size: 1.125rem; font-weight: 500; color: var(--text); margin: 0; }
    .course-detail__instructor-line { border: none; border-top: 1px solid var(--border); margin: 0 0 var(--space-m); width: 3rem; }
    .course-detail__badges { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-bottom: var(--space-m); }
    .course-detail__description { font-size: 1rem; line-height: 1.6; margin: 0 0 var(--space-l); }
    .course-detail__ctas { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); }
    .course-detail__cta-primary { margin-bottom: var(--space-xs); }
    .course-detail__cta-secondary { font-size: 0.9375rem; color: var(--text-muted); margin: 0; }
    .course-detail__cta-secondary a { color: var(--accent); font-weight: 500; text-decoration: none; }
    .course-detail__cta-secondary a:hover { text-decoration: underline; }
    .course-detail__availability { font-size: 0.8125rem; color: var(--text-muted); margin: var(--space-m) 0 0; }
    .course-detail__meta-strip { background: var(--bg-warm); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .course-detail__meta-strip-inner { display: flex; flex-wrap: wrap; gap: var(--space-xl) var(--space-2xl); max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-l) var(--space-l); justify-content: flex-start; }
    .course-detail__meta-item { margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
    .course-detail__meta-item dt { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
    .course-detail__meta-item dd { font-size: 0.9375rem; font-weight: 600; color: var(--accent); margin: 0; }
    .course-detail__promo { max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-3xl) var(--space-l); }
    .course-detail__promo-title {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 600;
      color: var(--text);
      margin: 0 0 var(--space-l);
      position: relative;
    }
    .course-detail__promo-title::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -0.25em;
      width: 2.5rem;
      height: 0.2rem;
      background: var(--accent);
      border-radius: 2px;
    }
    .course-detail__promo-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
      align-items: center;
    }
    .course-detail__promo-media { min-width: 0; }
    .course-detail__promo-img {
      width: 100%;
      height: auto;
      border-radius: var(--radius-lg);
      object-fit: cover;
      display: block;
    }
    .course-detail__promo-body {
      background: var(--bg-warm);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
    }
    .course-detail__promo-text {
      margin: 0;
      font-size: 1rem;
      line-height: 1.6;
      color: var(--text);
    }
    @media (max-width: 48rem) {
      .course-detail__promo-inner { grid-template-columns: 1fr; }
    }
    .course-detail__related { border-top: 1px solid var(--border); padding: var(--space-3xl) var(--space-l); max-width: var(--measure-wide); margin: 0 auto; }
    .course-detail__related-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin: 0 0 var(--space-l); }
    @media (max-width: 48rem) { .course-detail__hero { grid-template-columns: 1fr; } }

    /* ----- Course Enroll (two-column: info + form card) ----- */
    .course-enroll-main { padding-top: 72px; padding-bottom: var(--space-3xl); }
    .course-enroll-layout {
      display: grid;
      grid-template-columns: 1fr minmax(20rem, 380px);
      gap: var(--space-2xl);
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: var(--space-2xl) var(--space-l);
      align-items: start;
    }
    .course-enroll__title {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 600;
      color: var(--text);
      margin: 0 0 var(--space-m);
    }
    .course-enroll__description { font-size: 1rem; line-height: 1.6; color: var(--text); margin: 0 0 var(--space-l); }
    .course-enroll__divider { border: none; border-top: 1px solid var(--border); margin: 0 0 var(--space-l); }
    .course-enroll__about-heading { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; margin: 0 0 var(--space-m); color: var(--text); }
    .course-enroll__about-list { list-style: none; padding: 0; margin: 0; }
    .course-enroll__about-list li { font-size: 0.9375rem; color: var(--text); margin-bottom: var(--space-s); padding-left: 1.5em; position: relative; }
    .course-enroll__about-list li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 0.5em; height: 0.5em; border: 2px solid var(--accent); border-radius: 50%; }
    .course-enroll-form-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }
    .course-enroll-form-card__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin: 0 0 var(--space-l); color: var(--text); }
    .course-enroll-form__row { margin-bottom: var(--space-m); }
    .course-enroll-form__row--half { display: inline-block; width: calc(50% - var(--space-s)); vertical-align: top; margin-right: var(--space-s); }
    .course-enroll-form__row--checkbox { display: flex; align-items: flex-start; gap: var(--space-s); }
    .course-enroll-form__label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text); margin-bottom: var(--space-xs); }
    .course-enroll-form__label--inline { margin-bottom: 0; }
    .course-enroll-form__input {
      width: 100%;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      padding: var(--space-s) var(--space-m);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-elevated);
      color: var(--text);
    }
    .course-enroll-form__select { cursor: pointer; appearance: auto; }
    .course-enroll-form__checkbox { margin-top: 0.25rem; }
    .course-enroll-form__privacy { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 var(--space-l); line-height: 1.5; }
    .course-enroll-form__privacy a { color: var(--accent); }
    .course-enroll-form__submit { width: 100%; }
    @media (max-width: 52rem) { .course-enroll-layout { grid-template-columns: 1fr; } .course-enroll-form__row--half { width: 100%; } }

    /* ----- Course Overview (two-column: info + progress/outline) ----- */
    .course-overview-main { padding-top: 72px; padding-bottom: var(--space-3xl); }
    .course-overview-layout {
      display: grid;
      grid-template-columns: 1fr minmax(18rem, 340px);
      gap: var(--space-2xl);
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: var(--space-2xl) var(--space-l);
      align-items: start;
    }
    .course-overview__title { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; color: var(--text); margin: 0 0 var(--space-s); }
    .course-overview__category { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin: 0 0 var(--space-m); }
    .course-overview-card { margin-bottom: var(--space-xl); }
    .course-overview-card__visual {
      aspect-ratio: 16 / 10;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: linear-gradient(135deg, var(--bg-warm) 0%, var(--accent-soft) 100%);
    }
    .course-overview-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .course-overview__about-heading,
    .course-overview__instructor-heading { font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin: 0 0 var(--space-m); }
    .course-overview__about-desc { font-size: 0.9375rem; line-height: 1.6; color: var(--text); margin: 0 0 var(--space-xl); }
    .course-overview__instructor-row { display: flex; align-items: center; gap: var(--space-m); }
    .course-overview__instructor-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
    .course-overview__instructor-name { font-size: 1rem; font-weight: 500; margin: 0; color: var(--text); }
    .course-overview-progress { margin-bottom: var(--space-xl); }
    .course-overview-progress__label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin: 0 0 var(--space-s); }
    .course-overview-progress__bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: var(--space-m); }
    .course-overview-progress__fill { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.2s; }
    .course-overview-progress__cta { display: block; text-align: center; }
    .course-overview-outline__title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--text); margin: 0 0 var(--space-m); }
    .course-overview-outline__empty { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
    .course-overview-module { margin-bottom: var(--space-l); }
    .course-overview-module__title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin: 0 0 var(--space-s); }
    .course-overview-module__lessons { list-style: none; padding: 0; margin: 0; }
    .course-overview-module__lesson { display: flex; align-items: center; gap: var(--space-s); font-size: 0.8125rem; color: var(--text-muted); margin-bottom: var(--space-xs); }
    .course-overview-module__lesson-icon { width: 1rem; height: 1rem; border: 2px solid var(--border); border-radius: 50%; flex-shrink: 0; }
    .course-overview-module__lesson-title { flex: 1; }
    @media (max-width: 52rem) { .course-overview-layout { grid-template-columns: 1fr; } }

    /* ===== PRICING ===== */
    .pricing-section {
      max-width: var(--measure-wide);
      margin: 0 auto;
      padding: var(--space-3xl) var(--space-l);
      text-align: center;
    }
    .pricing-section__title {
      font-family: var(--font-heading);
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 600;
      margin: 0 0 var(--space-m);
      color: var(--text);
    }
    .pricing-section__subtitle {
      font-size: 1.0625rem;
      color: var(--text-muted);
      margin: 0 0 var(--space-3xl);
      max-width: 36rem;
      margin-left: auto;
      margin-right: auto;
    }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
      gap: var(--space-l);
      max-width: 56rem;
      margin: 0 auto var(--space-3xl);
    }
    .plan-card {
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-2xl);
      text-align: left;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .plan-card:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 20px rgba(181, 140, 76, 0.1);
    }
    .plan-card--featured {
      border-color: var(--accent);
      box-shadow: 0 4px 24px rgba(181, 140, 76, 0.15);
    }
    .plan-card__badge {
      position: absolute;
      top: calc(-0.75rem);
      left: 50%;
      transform: translateX(-50%);
    }
    .plan-card__name {
      font-family: var(--font-heading);
      font-size: 1.25rem;
      font-weight: 600;
      margin: 0 0 var(--space-s);
      color: var(--text);
    }
    .plan-card__price {
      font-family: var(--font-heading);
      font-size: 2.25rem;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 var(--space-xs);
      line-height: 1.1;
    }
    .plan-card__price span {
      font-size: 1rem;
      font-weight: 400;
      color: var(--text-muted);
    }
    .plan-card__desc {
      font-size: 0.9375rem;
      color: var(--text-muted);
      margin: 0 0 var(--space-l);
      line-height: 1.55;
    }
    .plan-card__features {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--space-xl);
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
      flex: 1;
    }
    .plan-card__features li {
      font-size: 0.9375rem;
      color: var(--text);
      display: flex;
      align-items: baseline;
      gap: var(--space-s);
    }
    .plan-card__features li::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
      margin-top: 0.45rem;
    }
    .plan-card__cta { width: 100%; text-align: center; }

    /* Individual book purchase */
    .individual-purchase {
      max-width: 40rem;
      margin: 0 auto;
      padding: var(--space-2xl);
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      gap: var(--space-xl);
      text-align: left;
    }
    .individual-purchase__cover {
      width: 6rem;
      flex-shrink: 0;
    }
    .individual-purchase__cover img {
      width: 100%;
      border-radius: var(--radius);
      box-shadow: 0 4px 12px rgba(44, 36, 32, 0.15);
    }
    .individual-purchase__info { flex: 1; }
    .individual-purchase__title {
      font-family: var(--font-heading);
      font-size: 1.125rem;
      font-weight: 600;
      margin: 0 0 var(--space-xs);
      color: var(--text);
    }
    .individual-purchase__price {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--accent);
      margin: 0 0 var(--space-m);
    }
    @media (max-width: 36rem) {
      .individual-purchase { flex-direction: column; text-align: center; }
    }

    /* FAQ Accordion */
    .faq-section {
      max-width: 40rem;
      margin: var(--space-3xl) auto 0;
      text-align: left;
    }
    .faq-section__title {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0 0 var(--space-l);
      color: var(--text);
      text-align: center;
    }
    .faq-item {
      border-bottom: 1px solid var(--border);
    }
    .faq-item__question {
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 500;
      color: var(--text);
      background: none;
      border: none;
      padding: var(--space-l) 0;
      width: 100%;
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-m);
      transition: color 0.15s;
    }
    .faq-item__question:hover { color: var(--accent); }
    .faq-item__icon {
      width: 1.25rem;
      height: 1.25rem;
      flex-shrink: 0;
      transition: transform 0.2s;
      color: var(--text-muted);
    }
    .faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
    .faq-item__answer {
      font-size: 0.9375rem;
      color: var(--text-muted);
      line-height: 1.6;
      padding: 0 0 var(--space-l);
      margin: 0;
      display: none;
    }
    .faq-item.is-open .faq-item__answer { display: block; }

    /* ===== BOOK READER ===== */
    .book-reader {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    .book-reader__header {
      background: var(--bg-elevated);
      border-bottom: 1px solid var(--border);
      padding: var(--space-m) var(--space-l);
      display: flex;
      align-items: center;
      gap: var(--space-l);
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .book-reader__back {
      font-size: 0.9375rem;
      color: var(--text-muted);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      transition: color 0.15s;
      white-space: nowrap;
    }
    .book-reader__back:hover { color: var(--accent); }
    .book-reader__back svg { width: 1rem; height: 1rem; }
    .book-reader__book-title {
      font-family: var(--font-heading);
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text);
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .book-reader__progress {
      height: 3px;
      background: var(--border);
      position: relative;
    }
    .book-reader__progress-bar {
      height: 100%;
      background: var(--accent);
      transition: width 0.3s ease;
      border-radius: 0 2px 2px 0;
    }
    .book-reader__body {
      display: flex;
      flex: 1;
    }
    .book-reader__sidebar {
      width: 18rem;
      flex-shrink: 0;
      background: var(--bg-warm);
      border-right: 1px solid var(--border);
      overflow-y: auto;
      padding: var(--space-l) 0;
    }
    .book-reader__sidebar-title {
      font-family: var(--font-heading);
      font-size: 0.8125rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      padding: 0 var(--space-l);
      margin: 0 0 var(--space-m);
    }
    .book-reader__chapters {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .book-reader__chapter {
      display: block;
      width: 100%;
      text-align: left;
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--text-muted);
      background: none;
      border: none;
      padding: var(--space-s) var(--space-l);
      cursor: pointer;
      transition: color 0.15s, background 0.15s;
      border-left: 3px solid transparent;
    }
    .book-reader__chapter:hover { color: var(--text); background: var(--accent-soft); }
    .book-reader__chapter.is-active {
      color: var(--accent);
      background: var(--accent-soft);
      font-weight: 500;
      border-left-color: var(--accent);
    }
    .book-reader__chapter-num {
      font-size: 0.75rem;
      color: var(--text-muted);
      display: block;
      margin-bottom: 0.1rem;
    }
    .book-reader__main {
      flex: 1;
      overflow-y: auto;
      padding: var(--space-3xl) var(--space-2xl);
      max-width: 48rem;
      margin: 0 auto;
    }
    .book-reader__chapter-heading {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 600;
      line-height: var(--line-height-heading);
      margin: 0 0 var(--space-2xl);
      color: var(--text);
    }
    .book-reader__chapter-eyebrow {
      font-size: 0.8125rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      margin: 0 0 var(--space-s);
    }
    .book-reader__prose {
      font-size: 1.0625rem;
      line-height: 1.85;
      color: var(--text);
    }
    .book-reader__prose p {
      margin: 0 0 var(--space-l);
    }
    .book-reader__prose blockquote {
      margin: var(--space-xl) 0;
      padding: var(--space-l) var(--space-xl);
      border-left: 3px solid var(--accent);
      background: var(--accent-soft);
      border-radius: 0 var(--radius) var(--radius) 0;
      font-style: italic;
      color: var(--text-muted);
    }
    .book-reader__nav {
      display: flex;
      justify-content: space-between;
      gap: var(--space-m);
      padding: var(--space-xl) 0;
      border-top: 1px solid var(--border);
      margin-top: var(--space-2xl);
    }
    .book-reader__nav-btn {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--accent);
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--space-s) var(--space-l);
      cursor: pointer;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      transition: background 0.15s, border-color 0.15s;
    }
    .book-reader__nav-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
    .book-reader__nav-btn svg { width: 1rem; height: 1rem; }

    /* Sidebar toggle for mobile */
    .book-reader__sidebar-toggle {
      display: none;
      background: var(--bg-elevated);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--space-xs) var(--space-s);
      cursor: pointer;
      color: var(--text-muted);
      font-size: 0.875rem;
      font-family: var(--font-body);
      align-items: center;
      gap: var(--space-xs);
    }
    .book-reader__sidebar-toggle svg { width: 1rem; height: 1rem; }

    @media (max-width: 56rem) {
      .book-reader__sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 24px rgba(44, 36, 32, 0.1);
      }
      .book-reader__sidebar.is-open { transform: translateX(0); }
      .book-reader__sidebar-toggle { display: flex; }
      .book-reader__main { padding: var(--space-2xl) var(--space-l); }
    }

    /* ----- Article detail (reader layout) ----- */
    .reader-header { position: sticky; top: 0; z-index: 100; background: var(--bg-elevated); border-bottom: 1px solid var(--border); }
    .reader-header__inner { max-width: var(--measure-wide); margin: 0 auto; padding: var(--space-m) var(--space-l); display: flex; align-items: center; justify-content: space-between; }
    .reader-header__logo { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--text); text-decoration: none; }
    .reader-header__nav { display: flex; gap: var(--space-xl); }
    .reader-header__nav a { font-size: 0.9375rem; color: var(--text-muted); text-decoration: none; }
    .reader-header__nav a:hover { color: var(--accent); }
    .reader-footer { background: var(--bg-elevated); border-top: 1px solid var(--border); padding: var(--space-xl) var(--space-l); }
    .reader-footer__inner { max-width: var(--measure-wide); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); }
    .reader-footer__back, .reader-footer__legal { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; }
    .reader-footer__back:hover, .reader-footer__legal:hover { color: var(--accent); }
    .reader-footer__copy { font-size: 0.8125rem; color: var(--text-muted); margin: 0; }
    .article-detail { padding: var(--space-4xl) var(--space-l); }
    .article-detail__inner { max-width: var(--measure); margin: 0 auto; }
    .article-detail__badges { margin-bottom: var(--space-m); }
    .article-detail__title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--text); margin: 0 0 var(--space-m); }
    .article-detail__lead { font-size: 1.25rem; color: var(--text-muted); margin: 0 0 var(--space-xl); }
    .article-detail__meta { font-size: 0.875rem; color: var(--text-muted); margin-bottom: var(--space-2xl); }
    .article-detail__prose.prose { font-size: 1.0625rem; color: var(--text); line-height: 1.8; }
    .article-detail__prose.prose p { margin: 0 0 var(--space-l); }
    .article-detail__prose.prose h2 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; color: var(--text); margin: var(--space-2xl) 0 var(--space-m); }
    .article-detail__byline { display: flex; align-items: center; gap: var(--space-l); margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: 1px solid var(--border); }
    .article-detail__byline-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--border); }
    .article-detail__byline-name { display: block; color: var(--text); }
    .article-detail__byline-bio { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
    .related-content { padding: var(--space-3xl) var(--space-l); background: var(--bg-warm); }
    .related-content__inner { max-width: var(--measure-wide); margin: 0 auto; }
    .related-content__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--text); margin: 0 0 var(--space-xl); }
    .related-content__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-xl); }
    /* ----- Podcast Detail (full layout) ----- */
    .podcast-detail { max-width: var(--measure-wide); margin: 0 auto; }
    .podcast-detail__hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
      align-items: start;
      padding: var(--space-3xl) var(--space-l);
    }
    @media (min-width: 48rem) {
      .podcast-detail__hero { grid-template-columns: minmax(14rem, 22rem) 1fr; gap: var(--space-3xl); }
    }
    .podcast-detail__media { min-width: 0; }
    .podcast-detail__artwork {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1;
      border-radius: var(--radius-lg);
      background: var(--bg-warm);
      box-shadow: 0 8px 32px rgba(44, 36, 32, 0.12);
    }
    .podcast-detail__artwork-img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .podcast-detail__artwork-img:not([data-filled]) { display: none; }
    .podcast-detail__artwork:has(.podcast-detail__artwork-img[data-filled]) .podcast-detail__artwork-icon { display: none; }
    .podcast-detail__artwork-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
    .podcast-detail__meta { display: flex; flex-direction: column; gap: var(--space-m); }
    .podcast-detail__title {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 600;
      margin: 0;
      color: var(--text);
      line-height: var(--line-height-heading);
    }
    .podcast-detail__host-row {
      display: flex;
      align-items: center;
      gap: var(--space-m);
    }
    .podcast-detail__host-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--border);
    }
    .podcast-detail__host-info { display: flex; flex-direction: column; gap: var(--space-xs); }
    .podcast-detail__host-name { font-size: 1.125rem; font-weight: 500; color: var(--text); margin: 0; }
    .podcast-detail__host-label { font-size: 0.8125rem; color: var(--text-muted); margin: 0; }
    .podcast-detail__badges { display: flex; flex-wrap: wrap; gap: var(--space-s); }
    .podcast-detail__duration { font-size: 0.9375rem; color: var(--text-muted); margin: 0; }
    .podcast-detail__description { font-size: 1rem; line-height: 1.6; color: var(--text); margin: 0; }
    .podcast-detail__ctas { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-top: var(--space-s); }
    .podcast-detail__related {
      border-top: 1px solid var(--border);
      padding: var(--space-3xl) var(--space-l);
    }
    .podcast-detail__related-title {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0 0 var(--space-l);
      color: var(--text);
    }
    .podcast-detail__related-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
      gap: var(--space-l);
    }
    .podcast-detail__card-thumb {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-warm);
      color: var(--text-muted);
    }

    /* ----- mDNA Assessment (pastoral-warm) ----- */
    .assessment-cta .page-section__inner {
      text-align: center;
    }
    .assessment-cta .btn { margin-top: var(--space-m); }
    .mdna-form-section .page-section__inner { max-width: var(--measure); }
    .mdna-form__questions { display: flex; flex-direction: column; gap: var(--space-2xl); }
    .mdna-question {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: var(--space-l);
      background: var(--bg-elevated);
    }
    .mdna-question__label {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: var(--space-s);
      display: block;
    }
    .mdna-question__element {
      display: inline-block;
      font-size: 0.8125rem;
      color: var(--accent);
      font-weight: 500;
      margin-bottom: var(--space-m);
    }
    .mdna-question__options {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-m);
      align-items: center;
    }
    .mdna-option {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      cursor: pointer;
      font-size: 0.9375rem;
      color: var(--text);
    }
    .mdna-option input { accent-color: var(--accent); }
    .mdna-question__hint {
      font-size: 0.8125rem;
      color: var(--text-muted);
      margin-top: var(--space-s);
      margin-bottom: 0;
    }
    .mdna-form__actions { margin-top: var(--space-2xl); }
    .mdna-results__limiting { margin-bottom: var(--space-2xl); }
    .mdna-limiting-card {
      padding: var(--space-l);
      background: var(--accent-soft);
      border-radius: var(--radius-lg);
      border: 1px solid var(--accent);
      color: var(--text);
    }
    .mdna-results__scores { max-width: 28rem; margin-bottom: var(--space-2xl); }
    .mdna-score-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      gap: var(--space-m);
      margin-bottom: var(--space-s);
    }
    .mdna-score-row__name { font-size: 0.9375rem; color: var(--text); }
    .mdna-score-row__bar-wrap {
      height: 8px;
      background: var(--bg-warm);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .mdna-score-row__bar {
      height: 100%;
      background: var(--accent);
      border-radius: var(--radius);
      min-width: 4px;
    }
    .mdna-score-row__value { font-size: 0.875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .mdna-results__next { margin-top: var(--space-xl); }
    .mdna-results__next .btn { margin-top: var(--space-s); }