*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
  body { font-family: "EB Garamond", serif; background: #faf8f3; color: #1a2847; min-height: 100vh; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  ::selection { background: #c89849; color: #faf8f3; }
  button { font-family: inherit; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; height: auto; }
  input, select, textarea { font-family: inherit; }

  /* Modern accessible focus rings */
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #c89849; outline-offset: 3px; border-radius: 2px; }

  /* External link styling — small arrow + subtle hover */
  .ext { font-size: 9px; color: #c89849; opacity: 0.7; vertical-align: super; margin-left: 2px; }
  a.connect-link { display: inline-block; cursor: pointer; }
  a.connect-link:hover { opacity: 0.7; }
  a.lock-link { display: flex; align-items: center; gap: 8px; cursor: pointer; transition: opacity 0.2s ease; }
  a.lock-link:hover { opacity: 1; color: #e0b870; }
  .lock-lotus { width: 18px; height: 18px; vertical-align: middle; flex-shrink: 0; }
  a.discover-card { display: block; }

  /* ─── Banner ─── */
  .banner { background: #1a2847; color: #e0b870; text-align: center; padding: 10px 16px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-family: "Cormorant Garamond", serif; border-bottom: 2px solid #c89849; }
  .banner strong { color: #ffffff; font-weight: 600; letter-spacing: 0.22em; }

  /* ─── Header ─── */
  header { border-bottom: 1px solid #dde2ea; background: rgba(250, 248, 243, 0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); position: sticky; top: 0; z-index: 50; }
  .nav { max-width: 1180px; margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .brand { font-family: "Cormorant Garamond", serif; background: none; border: none; color: #1a2847; display: flex; align-items: center; gap: 10px; padding: 0; cursor: pointer; }
  .brand-emblem { height: 36px; width: auto; flex-shrink: 0; }
  .brand-wordmark { height: 22px; width: auto; flex-shrink: 0; }
  .brand-tag { font-family: "Cormorant Garamond", serif; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.55; margin-left: 8px; padding-left: 10px; border-left: 1px solid #dde2ea; }
  nav.tabs { display: flex; gap: 32px; margin-left: auto; flex-wrap: wrap; }
  nav.tabs button { background: none; border: none; font-family: "Cormorant Garamond", serif; font-size: 16px; letter-spacing: 0.08em; color: #1a2847; opacity: 0.65; padding: 6px 0; border-bottom: 1px solid transparent; transition: opacity 0.15s, border-color 0.2s ease; cursor: pointer; }
  nav.tabs button:hover, nav.tabs button.active { opacity: 1; border-bottom-color: #c89849; }
  nav.tabs a { background: none; border: none; font-family: "Cormorant Garamond", serif; font-size: 16px; letter-spacing: 0.08em; color: #1a2847; opacity: 0.65; padding: 6px 0; border-bottom: 1px solid transparent; transition: opacity 0.15s, border-color 0.2s ease; cursor: pointer; text-decoration: none; }
  nav.tabs a:hover, nav.tabs a.active { opacity: 1; border-bottom-color: #c89849; }
  .lang-select { background: transparent; border: 1px solid #dde2ea; padding: 4px 10px; font-family: "Cormorant Garamond", serif; font-size: 12px; color: #4a5468; cursor: pointer; }

  main { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
  .eyebrow { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: #c89849; margin-bottom: 16px; }
  h1.hero { font-family: "Cormorant Garamond", serif; font-size: 60px; font-weight: 400; line-height: 1.04; color: #1a2847; margin-bottom: 24px; letter-spacing: -0.015em; }
  h1.hero em { color: #c89849; font-style: italic; }
  h2.section-h { font-family: "Cormorant Garamond", serif; font-size: 38px; font-weight: 400; line-height: 1.1; color: #1a2847; margin-bottom: 20px; letter-spacing: -0.01em; }
  h3.card-h { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 500; color: #1a2847; margin-bottom: 8px; }
  .lede { font-family: "EB Garamond", serif; font-size: 19px; line-height: 1.65; color: #4a5468; max-width: 640px; }
  .section { padding: 56px 0; }

  /* ─── HOME hero ─── */
  .hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; padding: 64px 0 40px; }
  @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } h1.hero { font-size: 40px; } }
  .hero-meta { text-align: right; }
  .hero-meta .date { font-family: "Cormorant Garamond", serif; font-size: 22px; color: #1a2847; margin-bottom: 4px; }
  .hero-meta .moment { font-family: "EB Garamond", serif; font-size: 14px; font-style: italic; color: #4a5468; }
  .hero-practice { font-family: "EB Garamond", serif; font-size: 14px; font-style: italic; color: #4a5468; margin-top: 20px; padding-top: 16px; border-top: 1px solid #dde2ea; display: inline-block; padding-right: 24px; }
  .hero-portrait { margin: 0; position: relative; }
  .hero-portrait img { width: 100%; height: auto; display: block; filter: sepia(0.05) brightness(1.02); }
  .hero-portrait figcaption { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #4a5468; margin-top: 12px; text-align: center; }
  @media (max-width: 880px) { .hero-portrait { max-width: 280px; margin: 0 auto; } }

  /* ─── Begin Here (Beginner's Meditation) ─── */
  .begin-here { display: flex; align-items: center; gap: 28px; background: linear-gradient(to right, #1a2847 0%, #243559 100%); color: #faf8f3; padding: 28px 36px; margin: 8px 0 24px; border-left: 4px solid #c89849; transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; }
  .begin-here:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,40,71,0.18); }
  .begin-here-stamp { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: #1a2847; background: #c89849; padding: 8px 14px; flex-shrink: 0; white-space: nowrap; align-self: flex-start; margin-top: 4px; }
  .begin-here-body { flex-grow: 1; }
  .begin-here-title { font-family: "Cormorant Garamond", serif; font-size: 26px; line-height: 1.2; color: #faf8f3; margin: 0 0 8px; font-weight: 500; }
  .begin-here-desc { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.55; color: #dde2ea; margin: 0 0 8px; }
  .begin-here-desc em { color: #e0b870; font-style: italic; }
  .begin-here-meta { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: #c89849; }
  .begin-here-cta { font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #e0b870; flex-shrink: 0; white-space: nowrap; }
  @media (max-width: 880px) { .begin-here { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 22px; } .begin-here-title { font-size: 22px; } .begin-here-stamp { align-self: flex-start; } }

  /* ─── Path Picker ─── */
  .path-section { padding: 16px 0 40px; }
  .path-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
  @media (max-width: 880px) { .path-grid { grid-template-columns: 1fr 1fr; } }
  .path-card { background: white; border: 1px solid #dde2ea; padding: 20px 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.2s ease; text-align: left; font-family: inherit; }
  .path-card:hover, .path-card.active { border-color: #c89849; background: #fffdf6; box-shadow: 0 2px 8px rgba(26,40,71,0.06); }
  .path-card .icon { font-family: "Cormorant Garamond", serif; font-size: 26px; color: #c89849; margin-bottom: 8px; font-style: italic; }
  .path-card .name { font-family: "Cormorant Garamond", serif; font-size: 15px; color: #1a2847; font-weight: 500; margin-bottom: 4px; }
  .path-card .desc { font-family: "EB Garamond", serif; font-size: 12px; color: #4a5468; line-height: 1.4; }

  /* ─── Continue card ─── */
  .continue-card { background: #f4f1e8; border: 1px solid #dde2ea; padding: 28px 32px; margin: 32px 0; display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 28px; align-items: center; }
  @media (max-width: 880px) { .continue-card { grid-template-columns: 1fr; } }
  .continue-card .label { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 8px; }
  .continue-card .stage { font-family: "Cormorant Garamond", serif; font-size: 22px; color: #1a2847; margin-bottom: 4px; font-style: italic; }
  .continue-card .progress-bar { height: 3px; background: #e8ecf2; margin-top: 12px; position: relative; overflow: hidden; }
  .continue-card .progress-fill { position: absolute; left: 0; top: 0; height: 100%; background: #c89849; width: 38%; }
  .continue-card .next { font-family: "EB Garamond", serif; font-size: 16px; color: #1a2847; line-height: 1.5; }
  .continue-card .next em { color: #c89849; font-style: italic; }
  .btn-dark { background: #1a2847; color: #faf8f3; border: none; padding: 13px 24px; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
  .btn-dark:hover { background: #243559; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26,40,71,0.18); }

  /* ─── Today's Passage ─── */
  .today-card { border-top: 1px solid #dde2ea; border-bottom: 1px solid #dde2ea; padding: 48px 0 48px 32px; display: grid; grid-template-columns: 1fr 3fr; gap: 32px; border-left: 3px solid #c89849; }
  @media (max-width: 600px) { .today-card { padding-left: 18px; border-left-width: 2px; } }
  @media (max-width: 880px) { .today-card { grid-template-columns: 1fr; } }
  .today-meta .label { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 12px; }
  .today-meta .source { font-family: "EB Garamond", serif; font-size: 14px; font-style: italic; color: #4a5468; }
  .today-meta .source-attr { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #6b7589; margin-top: 6px; }
  .today-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
  .read-source { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #6b7589; padding-left: 18px; border-left: 1px solid #dde2ea; }
  .read-source:hover { color: #c89849; }
  .quote-mark { font-family: "Cormorant Garamond", serif; font-size: 48px; color: #c89849; opacity: 0.4; line-height: 0.8; margin-bottom: 12px; }
  blockquote.featured { font-family: "EB Garamond", serif; font-size: 26px; line-height: 1.5; color: #1a2847; margin-bottom: 24px; }
  .read-link { background: none; border: none; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #c89849; display: inline-flex; align-items: center; gap: 8px; padding: 0; }
  .read-link:hover { gap: 12px; transition: gap 0.2s; }

  /* ─── Ask CTA ─── */
  .ask-cta { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; padding: 56px 0; }
  @media (max-width: 880px) { .ask-cta { grid-template-columns: 1fr; } }
  .examples { display: flex; flex-direction: column; gap: 10px; }
  .example { background: #f4f1e8; border: 1px solid #dde2ea; padding: 14px 18px; font-family: "EB Garamond", serif; font-size: 16px; font-style: italic; color: #1a2847; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: background 0.2s ease; }
  .example:hover { background: white; }
  .example .arrow { color: #c89849; opacity: 0.4; flex-shrink: 0; }
  .example:hover .arrow { opacity: 1; }

  /* ─── Discover ─── */
  .discover { padding: 56px 0; border-top: 1px solid #dde2ea; }
  .discover-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
  @media (max-width: 880px) { .discover-grid { grid-template-columns: 1fr; } }
  .discover-card { background: white; border: 1px solid #dde2ea; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s ease; text-align: left; font-family: inherit; overflow: hidden; display: flex; flex-direction: column; }
  .discover-card:hover { border-color: #c89849; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,40,71,0.08); }
  .discover-img { aspect-ratio: 4 / 3; overflow: hidden; background: #f4f1e8; }
  .discover-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .discover-body { padding: 22px 22px 22px; }
  .discover-tag { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 10px; }
  .discover-title { font-family: "Cormorant Garamond", serif; font-size: 20px; line-height: 1.2; color: #1a2847; margin-bottom: 6px; }
  .discover-desc { font-family: "EB Garamond", serif; font-size: 14px; line-height: 1.5; color: #4a5468; }
  .discover-meta { font-family: "EB Garamond", serif; font-size: 12px; font-style: italic; color: #6b7589; margin-top: 10px; }

  /* ─── Teachings (Watch & Listen) ─── */
  .teachings-section { padding: 56px 0; border-top: 1px solid #dde2ea; }
  .teachings-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px; }
  @media (max-width: 880px) { .teachings-head { flex-direction: column; align-items: flex-start; gap: 12px; } }
  .teachings-browse { font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #c89849; white-space: nowrap; padding-bottom: 4px; border-bottom: 1px solid #c89849; }
  .teachings-browse:hover { opacity: 0.8; }
  .teachings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 880px) { .teachings-grid { grid-template-columns: 1fr; } }
  .teaching-card { background: white; border: 1px solid #dde2ea; overflow: hidden; transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s ease; display: flex; flex-direction: column; }
  .teaching-card:hover { border-color: #c89849; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(26,40,71,0.1); }
  .teaching-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1a2847; }
  .teaching-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
  .teaching-card:hover .teaching-img img { transform: scale(1.04); }
  .teaching-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, rgba(26,40,71,0.05), rgba(26,40,71,0.35)); }
  .play-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #1a2847; display: flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
  .teaching-card:hover .play-icon { background: #c89849; color: white; }
  .teaching-type { position: absolute; top: 12px; left: 12px; background: rgba(26,40,71,0.85); color: #e0b870; font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; padding: 4px 10px; }
  .teaching-body { padding: 20px 22px 22px; flex-grow: 1; display: flex; flex-direction: column; }
  .teaching-title { font-family: "Cormorant Garamond", serif; font-size: 20px; line-height: 1.25; color: #1a2847; margin: 0 0 10px; font-weight: 500; }
  .teaching-speaker { font-family: "EB Garamond", serif; font-size: 15px; color: #4a5468; font-style: italic; margin-bottom: 6px; }
  .teaching-meta { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #6b7589; margin-top: auto; padding-top: 10px; }

  /* ─── Mood section (How are you feeling today?) ─── */
  .mood-section { padding: 48px 0 32px; }
  .mood-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .mood-pill { background: white; border: 1px solid #dde2ea; padding: 11px 22px; font-family: "Cormorant Garamond", serif; font-size: 14px; color: #1a2847; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.04em; border-radius: 999px; }
  .mood-pill:hover { border-color: #c89849; }
  .mood-pill.active { background: #1a2847; color: #faf8f3; border-color: #1a2847; }
  .mood-result { margin-top: 28px; padding: 32px 36px; background: linear-gradient(135deg, #faf6e9 0%, #f4ecd3 100%); border: 1px solid #e0d5b5; border-left: 3px solid #c89849; }
  .mood-quote-mark { font-family: "Cormorant Garamond", serif; font-size: 48px; color: #c89849; line-height: 0.8; margin-bottom: 4px; }
  .mood-quote { font-family: "Cormorant Garamond", serif; font-size: 22px; font-style: italic; line-height: 1.45; color: #1a2847; margin: 0 0 16px; padding: 0; border: none; }
  .mood-attribution { font-family: "EB Garamond", serif; font-size: 14px; color: #4a5468; margin-bottom: 18px; }
  .mood-attribution em { font-style: italic; }
  .mood-actions { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; padding-top: 14px; border-top: 1px solid #e0d5b5; }
  .mood-source, .mood-next-step { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #6b7589; }
  .mood-next-step { color: #c89849; }
  .mood-source:hover, .mood-next-step:hover { opacity: 0.7; }
  @media (max-width: 600px) { .mood-result { padding: 22px 22px; } .mood-quote { font-size: 18px; } .mood-actions { gap: 12px; flex-direction: column; align-items: flex-start; } }

  /* ─── Seven Portals ─── */
  .portals-section { padding: 56px 0 40px; border-top: 1px solid #dde2ea; margin-top: 32px; }
  .portals-intro { max-width: 720px; margin-bottom: 32px; }
  .portals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  @media (max-width: 1024px) { .portals-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 720px) { .portals-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 420px) { .portals-grid { grid-template-columns: 1fr; } }
  .portal-card { background: white; border: 1px solid #dde2ea; padding: 24px 20px; text-align: left; font-family: inherit; cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s ease; display: flex; flex-direction: column; align-items: flex-start; position: relative; text-decoration: none; }
  .portal-card:hover { transform: translateY(-2px); border-color: #c89849; box-shadow: 0 6px 16px rgba(26,40,71,0.08); }
  .portal-icon { font-size: 28px; color: #c89849; margin-bottom: 14px; line-height: 1; font-family: "Cormorant Garamond", serif; }
  .portal-name { font-family: "Cormorant Garamond", serif; font-size: 19px; color: #1a2847; margin-bottom: 8px; font-weight: 500; line-height: 1.2; }
  .portal-desc { font-family: "EB Garamond", serif; font-size: 13px; line-height: 1.55; color: #4a5468; margin-bottom: 14px; flex-grow: 1; }
  .portal-cta { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: #c89849; margin-top: auto; padding-top: 8px; border-top: 1px solid #f1ebd9; width: 100%; }
  .portal-protected { background: linear-gradient(135deg, #1a2847 0%, #243559 100%); border-color: #1a2847; }
  .portal-protected .portal-icon { color: #e0b870; }
  .portal-protected .portal-name { color: #faf8f3; }
  .portal-protected .portal-desc { color: #dde2ea; }
  .portal-protected .portal-cta { color: #e0b870; border-top-color: rgba(200,152,73,0.2); }
  .portal-tag { position: absolute; top: 10px; right: 10px; font-family: "Cormorant Garamond", serif; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: #e0b870; background: rgba(200,152,73,0.15); padding: 3px 8px; }

  /* ─── Reading Room band ─── */
  .reading-room { display: flex; align-items: center; gap: 28px; background: linear-gradient(135deg, #2a2118 0%, #1a2847 100%); color: #faf8f3; padding: 0; margin: 32px 0; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; }
  .reading-room:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,40,71,0.22); }
  .reading-room-img { flex-shrink: 0; width: 200px; height: 160px; overflow: hidden; align-self: stretch; }
  .reading-room-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.85) sepia(0.1); }
  .reading-room-body { flex-grow: 1; padding: 26px 4px 26px 0; }
  .reading-room-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: #c89849; margin-bottom: 8px; }
  .reading-room-title { font-family: "Cormorant Garamond", serif; font-size: 26px; line-height: 1.2; color: #faf8f3; margin: 0 0 10px; font-weight: 500; }
  .reading-room-title em { color: #e0b870; font-style: italic; }
  .reading-room-desc { font-family: "EB Garamond", serif; font-size: 14px; line-height: 1.55; color: #dde2ea; margin: 0; max-width: 600px; }
  .reading-room-cta { flex-shrink: 0; padding-right: 36px; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #e0b870; }
  @media (max-width: 880px) { .reading-room { flex-direction: column; align-items: stretch; } .reading-room-img { width: 100%; height: 140px; } .reading-room-body { padding: 22px 22px; } .reading-room-cta { padding: 0 22px 22px; align-self: flex-start; } .reading-room-title { font-size: 22px; } }

  /* ─── Voice of Yogananda band ─── */
  .voice-band { display: flex; align-items: center; gap: 28px; background: #1a2847; color: #faf8f3; padding: 24px 32px; margin: 32px 0; border-left: 4px solid #c89849; transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .voice-band:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,40,71,0.2); }
  .voice-band-icon { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 2px solid #c89849; }
  .voice-band-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .voice-band-body { flex-grow: 1; }
  .voice-band-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 6px; }
  .voice-band-title { font-family: "Cormorant Garamond", serif; font-size: 26px; line-height: 1.2; color: #faf8f3; margin: 0 0 6px; font-weight: 500; }
  .voice-band-title em { color: #e0b870; font-style: italic; }
  .voice-band-desc { font-family: "EB Garamond", serif; font-size: 14px; line-height: 1.55; color: #dde2ea; margin: 0; }
  .voice-band-cta { flex-shrink: 0; display: flex; align-items: center; gap: 14px; }
  .play-circle { width: 52px; height: 52px; border-radius: 50%; background: #c89849; color: #1a2847; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
  .voice-band-cta-text { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #e0b870; }
  @media (max-width: 880px) { .voice-band { flex-direction: column; align-items: flex-start; padding: 22px 22px; } .voice-band-icon { width: 64px; height: 64px; } .voice-band-title { font-size: 22px; } }

  /* ─── Video Library (SRF YouTube content) ─── */
  .video-library { padding: 48px 0 32px; border-top: 1px solid #dde2ea; }
  .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
  @media (max-width: 1024px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; gap: 12px; } }
  .video-card { background: white; border: 1px solid #dde2ea; overflow: hidden; transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s ease; display: flex; flex-direction: column; }
  .video-card:hover { border-color: #c89849; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(26,40,71,0.1); }
  .video-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1a2847; }
  .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
  .video-card:hover .video-thumb img { transform: scale(1.04); }
  .video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, rgba(26,40,71,0.0), rgba(26,40,71,0.3)); }
  .video-play-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #1a2847; display: flex; align-items: center; justify-content: center; font-size: 16px; padding-left: 3px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
  .video-card:hover .video-play-icon { background: #c89849; color: white; }
  .video-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(26,40,71,0.85); color: #faf8f3; font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 3px 8px; }
  .video-body { padding: 14px 16px 16px; flex-grow: 1; display: flex; flex-direction: column; }
  .video-topic { font-family: "Cormorant Garamond", serif; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: #c89849; margin-bottom: 6px; }
  .video-title { font-family: "Cormorant Garamond", serif; font-size: 16px; line-height: 1.25; color: #1a2847; margin: 0 0 8px; font-weight: 500; }
  .video-speaker { font-family: "EB Garamond", serif; font-size: 13px; font-style: italic; color: #4a5468; margin-top: auto; }

  /* ─── Lessons Invite Card (on home) ─── */
  .lessons-invite { display: flex; align-items: center; gap: 28px; background: linear-gradient(135deg, #1a2847 0%, #243559 100%); color: #faf8f3; padding: 32px 40px; margin: 48px 0; border-left: 4px solid #c89849; transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; }

  /* ─── One Path section (the unifying frame) ─── */
  .one-path { padding: 64px 0 48px; margin-top: 32px; border-top: 1px solid #dde2ea; }
  .one-path-intro { max-width: 720px; margin-bottom: 36px; }
  .one-path-intro .eyebrow { margin-bottom: 14px; }
  .one-path-lede { font-family: "EB Garamond", serif; font-size: 17px; line-height: 1.7; color: #1a2847; margin: 0; padding-left: 24px; border-left: 3px solid #c89849; }

  .one-path-heart { display: flex; align-items: center; gap: 32px; background: linear-gradient(135deg, #1a2847 0%, #243559 100%); color: #faf8f3; padding: 40px 48px; margin: 36px 0 32px; border-left: 4px solid #c89849; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; }
  .one-path-heart:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(26,40,71,0.24); }
  .one-path-heart::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 1px; height: 32px; background: linear-gradient(to bottom, #c89849, transparent); }
  .one-path-heart-mark { width: 72px; height: 72px; flex-shrink: 0; }
  .one-path-heart-mark img { width: 100%; height: 100%; display: block; }
  .one-path-heart-body { flex-grow: 1; }
  .one-path-heart-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: #c89849; margin-bottom: 10px; }
  .one-path-heart-title { font-family: "Cormorant Garamond", serif; font-size: 34px; line-height: 1.1; color: #faf8f3; margin: 0 0 10px; font-weight: 500; }
  .one-path-heart-desc { font-family: "EB Garamond", serif; font-size: 16px; line-height: 1.55; color: #dde2ea; margin: 0; max-width: 600px; }
  .one-path-heart-cta { flex-shrink: 0; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #e0b870; padding-left: 28px; border-left: 1px solid rgba(200,152,73,0.3); white-space: nowrap; }
  @media (max-width: 880px) { .one-path-heart { flex-direction: column; align-items: flex-start; padding: 28px; gap: 18px; } .one-path-heart-title { font-size: 26px; } .one-path-heart-mark { width: 56px; height: 56px; } .one-path-heart-cta { padding-left: 0; border-left: none; padding-top: 14px; border-top: 1px solid rgba(200,152,73,0.3); width: 100%; } .one-path-heart::after { display: none; } }

  .one-path-supports-label { text-align: center; padding: 12px 0 24px; position: relative; }
  .one-path-supports-label::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #dde2ea; z-index: 0; }
  .one-path-supports-label span { display: inline-block; position: relative; background: #faf8f3; padding: 0 20px; font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #6b7589; z-index: 1; }

  .one-path-supports { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 880px) { .one-path-supports { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
  @media (max-width: 480px) { .one-path-supports { grid-template-columns: 1fr; } }
  .one-path-support { background: white; border: 1px solid #dde2ea; padding: 24px 22px; transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s ease; display: flex; flex-direction: column; }
  .one-path-support:hover { transform: translateY(-2px); border-color: #c89849; box-shadow: 0 6px 16px rgba(26,40,71,0.08); }
  .one-path-support-icon { font-size: 26px; color: #c89849; margin-bottom: 14px; font-family: "Cormorant Garamond", serif; line-height: 1; }
  .one-path-support h4 { font-family: "Cormorant Garamond", serif; font-size: 18px; color: #1a2847; margin: 0 0 8px; font-weight: 500; }
  .one-path-support p { font-family: "EB Garamond", serif; font-size: 13px; line-height: 1.55; color: #4a5468; margin: 0; }
  .lessons-invite:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,40,71,0.22); }
  .lessons-invite-mark { width: 56px; height: 56px; flex-shrink: 0; opacity: 0.95; }
  .lessons-invite-mark img { width: 100%; height: 100%; display: block; }
  .lessons-invite-body { flex-grow: 1; }
  .lessons-invite-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: #c89849; margin-bottom: 8px; }
  .lessons-invite-title { font-family: "Cormorant Garamond", serif; font-size: 30px; line-height: 1.15; color: #faf8f3; margin: 0 0 8px; font-weight: 500; }
  .lessons-invite-desc { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.55; color: #dde2ea; margin: 0; max-width: 600px; }
  .lessons-invite-cta { flex-shrink: 0; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #e0b870; padding-left: 24px; border-left: 1px solid rgba(200,152,73,0.3); white-space: nowrap; }
  @media (max-width: 880px) { .lessons-invite { flex-direction: column; align-items: flex-start; padding: 26px; gap: 16px; } .lessons-invite-title { font-size: 24px; } .lessons-invite-cta { padding-left: 0; border-left: none; padding-top: 10px; border-top: 1px solid rgba(200,152,73,0.3); width: 100%; } }

  /* ─── Lessons Page ─── */
  .lessons-hero { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; padding: 64px 0 48px; }
  @media (max-width: 880px) { .lessons-hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 32px; } }
  .lessons-hero-img { margin: 0; }
  .lessons-hero-img img { width: 100%; height: auto; display: block; filter: sepia(0.05) brightness(1.02); }
  .lessons-section { padding: 56px 0; }
  .lessons-section-alt { background: #f4f1e8; margin: 0 -32px; padding: 56px 32px; }
  @media (max-width: 600px) { .lessons-section-alt { margin: 0 -18px; padding: 40px 18px; } }
  .lessons-prose { max-width: 680px; margin-bottom: 36px; }
  .lessons-prose .eyebrow { margin-bottom: 14px; }
  .lessons-prose p { font-family: "EB Garamond", serif; font-size: 17px; line-height: 1.65; color: #1a2847; margin: 0 0 14px; }
  .lessons-prose p em { color: #c89849; font-style: italic; }
  .lessons-lede { font-family: "EB Garamond", serif; font-size: 19px; line-height: 1.6; color: #1a2847; max-width: 720px; padding-left: 24px; border-left: 3px solid #c89849; }
  .lessons-frame { max-width: 760px; margin: 36px 0; padding: 28px 32px; background: #f4f1e8; border: 1px solid #e0d5b5; }
  .lessons-frame p { font-family: "EB Garamond", serif; font-size: 16px; line-height: 1.7; color: #1a2847; margin: 0; font-style: italic; }
  @media (max-width: 600px) { .lessons-frame { padding: 22px 22px; } .lessons-frame p { font-size: 15px; } }

  /* Three pillars: what the Lessons are */
  .lessons-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 12px; }
  @media (max-width: 880px) { .lessons-pillars { grid-template-columns: 1fr; gap: 20px; } }
  .lessons-pillar { padding: 0; }
  .lessons-pillar-num { font-family: "Cormorant Garamond", serif; font-size: 13px; letter-spacing: 0.3em; color: #c89849; margin-bottom: 12px; }
  .lessons-pillar h3 { font-family: "Cormorant Garamond", serif; font-size: 22px; color: #1a2847; margin: 0 0 10px; font-weight: 500; }
  .lessons-pillar p { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.6; color: #4a5468; margin: 0; }

  /* The Highest Achievements flipbook callout on lessons page */
  .lessons-flipbook { display: flex; align-items: center; gap: 24px; background: white; border: 1px solid #e0d5b5; padding: 24px 28px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .lessons-flipbook:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,40,71,0.1); border-color: #c89849; }
  .lessons-flipbook-icon { width: 48px; height: 48px; flex-shrink: 0; }
  .lessons-flipbook-icon img { width: 100%; height: 100%; display: block; }
  .lessons-flipbook-body { flex-grow: 1; }
  .lessons-flipbook-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 4px; }
  .lessons-flipbook-title { font-family: "Cormorant Garamond", serif; font-size: 22px; color: #1a2847; margin-bottom: 4px; }
  .lessons-flipbook-desc { font-family: "EB Garamond", serif; font-size: 14px; color: #4a5468; font-style: italic; }
  .lessons-flipbook-cta { font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #c89849; flex-shrink: 0; white-space: nowrap; }
  @media (max-width: 600px) { .lessons-flipbook { flex-direction: column; align-items: flex-start; padding: 20px; } }

  /* Three steps to begin */
  .lessons-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
  @media (max-width: 880px) { .lessons-steps { grid-template-columns: 1fr; gap: 16px; } }
  .lessons-step { background: white; border: 1px solid #dde2ea; padding: 28px 26px; }
  .lessons-step-num { width: 36px; height: 36px; border-radius: 50%; background: #c89849; color: white; display: flex; align-items: center; justify-content: center; font-family: "Cormorant Garamond", serif; font-size: 17px; margin-bottom: 16px; }
  .lessons-step h3 { font-family: "Cormorant Garamond", serif; font-size: 19px; color: #1a2847; margin: 0 0 10px; font-weight: 500; }
  .lessons-step p { font-family: "EB Garamond", serif; font-size: 14px; line-height: 1.6; color: #4a5468; margin: 0; }
  .lessons-step p em { color: #1a2847; font-style: italic; }

  /* Apply CTA */
  .lessons-apply-cta { margin-top: 40px; padding-top: 32px; border-top: 1px solid #dde2ea; text-align: center; }
  .btn-large { display: inline-block; padding: 18px 36px; font-size: 13px; letter-spacing: 0.28em; }
  .lessons-apply-note { font-family: "EB Garamond", serif; font-size: 13px; font-style: italic; color: #6b7589; margin: 18px auto 0; max-width: 580px; line-height: 1.6; }

  /* Alternative paths cards */
  .lessons-alternatives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12px; }
  @media (max-width: 880px) { .lessons-alternatives { grid-template-columns: 1fr; gap: 12px; } }
  .lessons-alt-card { background: white; border: 1px solid #dde2ea; padding: 24px 22px; transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s ease; display: flex; flex-direction: column; }
  .lessons-alt-card:hover { transform: translateY(-2px); border-color: #c89849; box-shadow: 0 6px 16px rgba(26,40,71,0.08); }
  .lessons-alt-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #c89849; margin-bottom: 12px; }
  .lessons-alt-title { font-family: "Cormorant Garamond", serif; font-size: 20px; color: #1a2847; margin-bottom: 8px; font-weight: 500; }
  .lessons-alt-desc { font-family: "EB Garamond", serif; font-size: 14px; line-height: 1.55; color: #4a5468; margin-bottom: 16px; flex-grow: 1; }
  .lessons-alt-cta { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #c89849; }

  /* ─── Seeker Journey Arc ─── */
  .journey-arc { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 16px; padding: 8px 0 24px; }
  .arc-stage { display: flex; flex-direction: column; align-items: center; text-align: center; flex-shrink: 0; width: 90px; position: relative; }
  .arc-dot { width: 12px; height: 12px; border-radius: 50%; background: #dde2ea; border: 2px solid #dde2ea; margin-bottom: 10px; }
  .arc-stage-here .arc-dot { background: #c89849; border-color: #c89849; box-shadow: 0 0 0 5px rgba(200,152,73,0.18); }
  .arc-label { font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.04em; color: #4a5468; line-height: 1.3; }
  .arc-stage-here .arc-label { color: #1a2847; font-weight: 600; }
  .arc-you { font-family: "EB Garamond", serif; font-size: 11px; font-style: italic; color: #c89849; margin-top: 6px; }
  .arc-line { flex-grow: 1; height: 2px; background: #dde2ea; margin-top: 5px; min-width: 8px; }
  @media (max-width: 880px) {
    .journey-arc { flex-direction: column; align-items: flex-start; padding-left: 6px; }
    .arc-stage { flex-direction: row; width: auto; gap: 12px; text-align: left; align-items: center; }
    .arc-dot { margin-bottom: 0; }
    .arc-you { margin-top: 0; margin-left: 8px; }
    .arc-line { width: 2px; height: 18px; min-width: 0; margin: 2px 0 2px 5px; flex-grow: 0; }
  }

  /* ─── Three Seeker Questions ─── */
  .seeker-questions { display: flex; flex-direction: column; gap: 4px; }
  .seeker-q { background: white; border: 1px solid #dde2ea; border-left: 3px solid #c89849; padding: 28px 32px; }
  .seeker-q + .seeker-q { margin-top: 12px; }
  .seeker-q-num { font-family: "Cormorant Garamond", serif; font-size: 22px; color: #1a2847; margin-bottom: 12px; font-style: italic; }
  .seeker-q p { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.65; color: #4a5468; margin: 0; }
  @media (max-width: 600px) { .seeker-q { padding: 22px 22px; } .seeker-q-num { font-size: 19px; } }

  /* ─── Commitment Curve (two ways to begin) ─── */
  .commitment-curve { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .commitment-card { display: block; padding: 32px 36px; transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .commitment-light { background: linear-gradient(135deg, #faf6e9 0%, #f4ecd3 100%); border: 1px solid #e0d5b5; }
  .commitment-full { background: linear-gradient(135deg, #1a2847 0%, #243559 100%); border: 1px solid #1a2847; }
  .commitment-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,40,71,0.14); }
  .commitment-tag { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 14px; }
  .commitment-light .commitment-tag { color: #c89849; }
  .commitment-full .commitment-tag { color: #e0b870; }
  .commitment-card h3 { font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 500; margin: 0 0 10px; }
  .commitment-light h3 { color: #1a2847; }
  .commitment-full h3 { color: #faf8f3; }
  .commitment-card h3 em { font-style: italic; color: #c89849; }
  .commitment-full h3 em { color: #e0b870; }
  .commitment-card p { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
  .commitment-light p { color: #4a5468; }
  .commitment-full p { color: #dde2ea; }
  .commitment-cta { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; }
  .commitment-light .commitment-cta { color: #c89849; }
  .commitment-full .commitment-cta { color: #e0b870; }
  .commitment-connector { display: flex; align-items: center; gap: 16px; padding: 18px 36px; }
  .commitment-connector-line { flex-grow: 1; height: 1px; background: #dde2ea; }
  .commitment-connector-text { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #6b7589; white-space: nowrap; }
  @media (max-width: 600px) { .commitment-card { padding: 24px 22px; } .commitment-card h3 { font-size: 22px; } .commitment-connector { padding: 14px 0; } }

  /* ─── Yogananda University ─── */
  /* Home promo card */
  .university-promo { display: flex; align-items: center; gap: 28px; background: linear-gradient(135deg, #2a1f4a 0%, #1a2847 100%); color: #faf8f3; padding: 32px 40px; margin: 40px 0; border-left: 4px solid #c89849; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .university-promo:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,40,71,0.22); }
  .university-promo-mark { width: 56px; height: 56px; flex-shrink: 0; opacity: 0.95; }
  .university-promo-mark img { width: 100%; height: 100%; }
  .university-promo-body { flex-grow: 1; }
  .university-promo-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: #c89849; margin-bottom: 8px; }
  .university-promo-title { font-family: "Cormorant Garamond", serif; font-size: 30px; line-height: 1.15; color: #faf8f3; margin: 0 0 8px; font-weight: 500; }
  .university-promo-title em { color: #e0b870; font-style: italic; }
  .university-promo-desc { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.55; color: #dde2ea; margin: 0; max-width: 640px; }
  .university-promo-cta { flex-shrink: 0; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #e0b870; padding-left: 24px; border-left: 1px solid rgba(200,152,73,0.3); white-space: nowrap; }
  @media (max-width: 880px) { .university-promo { flex-direction: column; align-items: flex-start; padding: 26px; gap: 16px; } .university-promo-cta { padding-left: 0; border-left: none; padding-top: 10px; border-top: 1px solid rgba(200,152,73,0.3); width: 100%; } }

  /* University hero */
  .university-hero { padding: 56px 0 40px; }
  .university-hero-text { max-width: 760px; }
  .university-disclaimer { font-family: "EB Garamond", serif; font-size: 13px; font-style: italic; color: #6b7589; margin-top: 16px; padding: 12px 16px; background: #f4f1e8; border-left: 2px solid #c89849; }
  .university-disclaimer a { color: #c89849; }
  .university-disclaimer em { color: #1a2847; }

  /* Course grid */
  .course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  @media (max-width: 880px) { .course-grid { grid-template-columns: 1fr; } }
  .course-card { background: white; border: 1px solid #dde2ea; padding: 32px 30px; cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; }
  .course-card:hover { transform: translateY(-2px); border-color: #c89849; box-shadow: 0 10px 24px rgba(26,40,71,0.1); }
  .course-card-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: #c89849; margin-bottom: 16px; }
  .course-card-title { font-family: "Cormorant Garamond", serif; font-size: 30px; line-height: 1.15; color: #1a2847; margin: 0 0 10px; font-weight: 500; }
  .course-card-sub { font-family: "EB Garamond", serif; font-size: 15px; font-style: italic; color: #4a5468; margin: 0 0 18px; line-height: 1.5; }
  .course-card-meta { font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.08em; color: #6b7589; margin-bottom: 22px; }
  .course-card-meta .dot { color: #c89849; margin: 0 6px; }
  .course-card-cta { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #c89849; margin-top: auto; padding-top: 16px; border-top: 1px solid #f1ebd9; }

  /* University note */
  .university-note { background: #f4f1e8; padding: 48px 40px; margin: 40px 0 0; border-left: 3px solid #c89849; }
  .university-note p { font-family: "EB Garamond", serif; font-size: 16px; line-height: 1.65; color: #1a2847; margin: 12px 0 0; max-width: 720px; }
  .university-note p a { color: #c89849; }
  @media (max-width: 600px) { .university-note { padding: 32px 22px; } }

  /* Course back link */
  .course-back { display: inline-block; font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #6b7589; margin-bottom: 24px; padding: 4px 0; transition: color 0.2s ease; }
  .course-back:hover { color: #c89849; }

  /* Course header */
  .course-header { padding-bottom: 24px; border-bottom: 1px solid #dde2ea; margin-bottom: 28px; }
  .course-header-text { max-width: 780px; }

  /* Course progress strip */
  .course-progress { display: flex; gap: 4px; margin-bottom: 40px; flex-wrap: wrap; padding: 4px 0; }
  .course-progress-step { flex: 1; min-width: 0; background: white; border: 1px solid #dde2ea; padding: 14px 12px; font-family: inherit; cursor: pointer; text-align: left; transition: all 0.2s ease; display: flex; align-items: center; gap: 10px; }
  .course-progress-step:hover { border-color: #c89849; }
  .course-progress-step.active { background: #1a2847; border-color: #1a2847; }
  .course-progress-step.done { background: #f4f1e8; border-color: #e0d5b5; }
  .course-progress-num { font-family: "Cormorant Garamond", serif; font-size: 12px; color: #c89849; font-weight: 600; flex-shrink: 0; width: 18px; }
  .course-progress-step.active .course-progress-num { color: #e0b870; }
  .course-progress-label { font-family: "Cormorant Garamond", serif; font-size: 12px; line-height: 1.3; color: #1a2847; }
  .course-progress-step.active .course-progress-label { color: #faf8f3; }
  .course-progress-step.done .course-progress-label { color: #4a5468; }
  @media (max-width: 720px) { .course-progress { flex-direction: column; } .course-progress-step { flex: none; } }

  /* Lesson layout */
  .lesson-content { max-width: 820px; }
  .lesson-counter { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: #c89849; margin-bottom: 14px; }
  .lesson-title { font-family: "Cormorant Garamond", serif; font-size: 36px; line-height: 1.15; color: #1a2847; margin: 0 0 32px; font-weight: 500; letter-spacing: -0.01em; }
  .lesson-placeholder { /* still shows but with marker */ }
  .lesson-placeholder-note { background: #fef8e8; border: 1px solid #e8d8a0; padding: 12px 18px; font-family: "EB Garamond", serif; font-size: 13px; font-style: italic; color: #7a5a20; margin-bottom: 28px; }

  /* The quote block — this is the most important visual element */
  .lesson-quote-block { background: linear-gradient(135deg, #faf6e9 0%, #f4ecd3 100%); border: 1px solid #e0d5b5; padding: 40px 44px; margin-bottom: 32px; position: relative; }
  .lesson-quote-mark { font-family: "Cormorant Garamond", serif; font-size: 64px; color: #c89849; line-height: 0.6; margin-bottom: 8px; }
  .lesson-quote { font-family: "Cormorant Garamond", serif; font-size: 26px; font-style: italic; line-height: 1.4; color: #1a2847; margin: 0 0 24px; padding: 0; border: none; letter-spacing: -0.005em; }
  .lesson-source { font-family: "Cormorant Garamond", serif; font-size: 13px; color: #4a5468; padding-top: 16px; border-top: 1px solid #e0d5b5; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
  .lesson-source-link { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: #c89849 !important; margin-left: 12px; }
  .lesson-source-link:hover { opacity: 0.7; }
  @media (max-width: 600px) { .lesson-quote-block { padding: 28px 26px; } .lesson-quote { font-size: 20px; } }

  /* Editorial framing — clearly distinguished from Paramahansaji's words */
  .lesson-framing { margin-bottom: 32px; padding: 24px 28px; background: white; border: 1px solid #dde2ea; border-left: 3px solid #6b7589; }
  .lesson-framing-label { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #6b7589; margin-bottom: 10px; }
  .lesson-framing p { font-family: "EB Garamond", serif; font-size: 16px; line-height: 1.65; color: #4a5468; margin: 0; }

  /* Lesson video */
  .lesson-video { display: flex; gap: 0; background: #1a2847; color: #faf8f3; margin-bottom: 32px; align-items: stretch; transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; }
  .lesson-video:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,40,71,0.18); }
  .lesson-video-thumb { flex-shrink: 0; width: 200px; position: relative; overflow: hidden; }
  .lesson-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .lesson-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(200,152,73,0.95); color: #1a2847; display: flex; align-items: center; justify-content: center; font-size: 16px; padding-left: 3px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
  .lesson-video-body { flex-grow: 1; padding: 22px 26px; }
  .lesson-video-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #e0b870; margin-bottom: 8px; }
  .lesson-video-title { font-family: "Cormorant Garamond", serif; font-size: 20px; color: #faf8f3; margin-bottom: 4px; line-height: 1.25; }
  .lesson-video-speaker { font-family: "EB Garamond", serif; font-size: 13px; font-style: italic; color: #dde2ea; }
  .lesson-video-cta { flex-shrink: 0; padding: 22px 28px; align-self: center; font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #e0b870; border-left: 1px solid rgba(200,152,73,0.3); white-space: nowrap; }
  @media (max-width: 600px) { .lesson-video { flex-direction: column; } .lesson-video-thumb { width: 100%; aspect-ratio: 16 / 9; } .lesson-video-cta { border-left: none; border-top: 1px solid rgba(200,152,73,0.3); padding: 16px 22px; align-self: stretch; } }

  /* Lesson navigation */
  .lesson-nav { display: flex; align-items: center; gap: 16px; padding-top: 28px; border-top: 1px solid #dde2ea; }
  .lesson-nav-spacer { flex-grow: 1; }
  .lesson-nav-btn { background: white; border: 1px solid #dde2ea; padding: 12px 22px; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #1a2847; cursor: pointer; transition: all 0.2s ease; text-decoration: none; }
  .lesson-nav-btn:hover:not([disabled]) { border-color: #c89849; color: #c89849; }
  .lesson-nav-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
  .lesson-nav-next { background: #1a2847; color: #e0b870; border-color: #1a2847; }
  .lesson-nav-next:hover { background: #243559 !important; color: #e0b870 !important; }

  /* ─── Featured Free Lesson (Highest Achievements flipbook) ─── */
  .featured-lesson { display: grid; grid-template-columns: 5fr 7fr; gap: 0; margin: 56px 0; background: linear-gradient(135deg, #faf6e9 0%, #f4ecd3 100%); border: 1px solid #e0d5b5; transition: transform 0.25s ease, box-shadow 0.25s ease; overflow: hidden; }
  .featured-lesson:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(26,40,71,0.12); }
  .featured-lesson-img { background: #1a2847; overflow: hidden; min-height: 240px; }
  .featured-lesson-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
  .featured-lesson:hover .featured-lesson-img img { transform: scale(1.04); }
  .featured-lesson-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
  .featured-lesson-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; }
  .featured-lesson-title { font-family: "Cormorant Garamond", serif; font-size: 32px; line-height: 1.15; color: #1a2847; font-weight: 500; margin: 0; }
  .featured-lesson-title em { color: #c89849; font-style: italic; }
  .featured-lesson-desc { font-family: "EB Garamond", serif; font-size: 16px; line-height: 1.6; color: #4a5468; margin: 0; }
  .featured-lesson-cta { font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #1a2847; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
  .featured-lesson:hover .featured-lesson-cta { color: #c89849; }
  @media (max-width: 880px) { .featured-lesson { grid-template-columns: 1fr; } .featured-lesson-img { min-height: 180px; max-height: 220px; } .featured-lesson-body { padding: 28px 26px; } .featured-lesson-title { font-size: 26px; } }

  /* ─── Tier Bridge (between Open and Deep tiers) ─── */
  .tier-bridge { display: flex; align-items: center; gap: 20px; max-width: 720px; margin: 28px auto 0; padding: 18px 24px; background: #faf6e9; border: 1px solid #e0d5b5; border-left: 3px solid #c89849; transition: background 0.15s, transform 0.2s ease; }
  .tier-bridge:hover { background: #f4ecd3; transform: translateY(-1px); }
  .tier-bridge-label { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; flex-shrink: 0; padding-right: 16px; border-right: 1px solid #e0d5b5; }
  .tier-bridge-text { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.55; color: #1a2847; flex-grow: 1; }
  .tier-bridge-text em { color: #c89849; font-style: italic; }
  .tier-bridge-text strong { color: #1a2847; font-weight: 600; }
  .tier-bridge-cta { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #c89849; flex-shrink: 0; white-space: nowrap; }
  @media (max-width: 880px) { .tier-bridge { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; } .tier-bridge-label { padding-right: 0; border-right: none; padding-bottom: 4px; border-bottom: 1px solid #e0d5b5; width: 100%; } }

  /* ─── Tiered Access ─── */
  .tier-section { padding: 56px 0; border-top: 1px solid #dde2ea; }
  .tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
  @media (max-width: 880px) { .tier-grid { grid-template-columns: 1fr; } }
  .tier { padding: 32px; border: 1px solid #dde2ea; }
  .tier.open { background: #f4f1e8; }
  .tier.deep { background: #1a2847; color: #e8ecf2; border-color: #1a2847; position: relative; }
  .tier .tag { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 12px; }
  .tier.deep .tag { color: #e0b870; }
  .tier h3 { font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 500; margin-bottom: 8px; }
  .tier p { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.55; margin-bottom: 16px; opacity: 0.9; }
  .tier ul { font-family: "EB Garamond", serif; font-size: 14px; padding-left: 0; list-style: none; margin-bottom: 20px; }
  .tier ul li { padding: 4px 0 4px 16px; position: relative; }
  .tier ul li::before { content: "·"; position: absolute; left: 0; color: #c89849; font-weight: bold; }
  .tier.deep ul li::before { color: #e0b870; }
  .tier .lock { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }

  /* ─── Connect block ─── */
  .connect-block { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 56px 0; border: 1px solid #dde2ea; }
  @media (max-width: 880px) { .connect-block { grid-template-columns: 1fr; } }
  .connect-half { padding: 36px; border-right: 1px solid #dde2ea; }
  .connect-half:last-child { border-right: none; }
  @media (max-width: 880px) { .connect-half { border-right: none; border-bottom: 1px solid #dde2ea; } }
  .connect-half .label { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 10px; }
  .connect-half h4 { font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 500; color: #1a2847; margin-bottom: 8px; }
  .connect-half p { font-family: "EB Garamond", serif; font-size: 15px; color: #4a5468; line-height: 1.55; margin-bottom: 16px; }
  .connect-link { font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #c89849; background: none; border: none; padding: 0; }

  /* ─── Ask page ─── */
  .ask-page { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; padding: 56px 0; }
  @media (max-width: 880px) { .ask-page { grid-template-columns: 1fr; } }
  .ask-input-row { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #1a2847; padding-bottom: 14px; margin-bottom: 32px; transition: border-color 0.2s ease; }
  .ask-input-row:focus-within { border-bottom-color: #c89849; }
  .ask-input-row input { flex: 1; font-family: "EB Garamond", serif; font-size: 22px; font-style: italic; border: none; outline: none; background: transparent; color: #1a2847; }
  .ask-input-row input::placeholder { opacity: 0.4; }
  .ask-go { background: none; border: none; font-family: "Cormorant Garamond", serif; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: #c89849; padding: 4px 8px; }
  .ask-go:disabled { opacity: 0.3; cursor: not-allowed; }
  .you-asked { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #4a5468; margin-bottom: 8px; }
  .you-asked-text { font-family: "EB Garamond", serif; font-size: 22px; font-style: italic; color: #1a2847; margin-bottom: 32px; }
  .reflection-label { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: #c89849; margin-bottom: 16px; }
  .answer { font-family: "EB Garamond", serif; font-size: 18px; line-height: 1.7; color: #1a2847; white-space: pre-line; margin-bottom: 32px; }
  .cite { color: #c89849; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 12px; vertical-align: super; cursor: pointer; padding: 0 2px; background: none; border: none; }
  .skeleton { height: 14px; background: #e8ecf2; border-radius: 3px; margin-bottom: 12px; animation: pulse 1.5s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  .citations { border-top: 1px solid #dde2ea; padding-top: 28px; margin-top: 28px; }
  .citation { border-left: 2px solid #dde2ea; padding: 8px 0 8px 20px; margin: 14px 0; cursor: pointer; transition: background 0.15s, border-color 0.2s ease; }
  .citation.active { border-left-color: #c89849; background: #f4f1e8; }
  .citation-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
  .citation-num { color: #c89849; font-family: "Cormorant Garamond", serif; font-weight: 600; }
  .citation-chap { font-family: "Cormorant Garamond", serif; font-size: 13px; font-style: italic; color: #4a5468; }
  .citation-source { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7589; margin-left: 4px; }
  .citation-text { font-family: "EB Garamond", serif; font-size: 16px; line-height: 1.55; color: #1a2847; }
  .citation-link { display: inline-block; margin-top: 10px; font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #c89849; }
  .citation-link:hover { opacity: 0.75; }
  .next-step-card { background: #f4f1e8; border: 1px solid #dde2ea; padding: 22px; margin-top: 28px; }
  .next-step-card .label { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 8px; }
  .next-step-card h4 { font-family: "Cormorant Garamond", serif; font-size: 20px; color: #1a2847; margin-bottom: 6px; }
  .next-step-card p { font-family: "EB Garamond", serif; font-size: 15px; color: #4a5468; line-height: 1.55; margin-bottom: 12px; }
  .rail { background: #f4f1e8; border: 1px solid #dde2ea; padding: 22px; }
  .rail-monastics { margin-top: 16px; background: linear-gradient(135deg, #1a2847 0%, #243559 100%); border-color: #1a2847; }
  .rail-monastics .rail-h { color: #e0b870; }
  .rail-monastics p { color: #dde2ea; }
  .rail-monastics-btn { display: block; margin-top: 14px; background: transparent; color: #e0b870; border: 1px solid #c89849; padding: 10px 16px; font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; width: 100%; text-align: center; text-decoration: none; box-sizing: border-box; }
  .rail-monastics-btn:hover { background: rgba(200,152,73,0.15); }
  .rail-monastics-link { display: block; margin-top: 10px; font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #dde2ea !important; text-align: center; padding: 6px; opacity: 0.8; transition: opacity 0.2s ease; }
  .rail-monastics-link:hover { opacity: 1; }
  .rail-h { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 12px; }
  .rail p { font-family: "EB Garamond", serif; font-size: 14px; line-height: 1.55; color: #1a2847; margin-bottom: 16px; }
  .rail ul { font-family: "EB Garamond", serif; font-size: 14px; color: #1a2847; padding-left: 0; list-style: none; }
  .rail ul li { margin-bottom: 4px; padding-left: 12px; position: relative; }
  .rail ul li::before { content: "·"; position: absolute; left: 0; color: #c89849; }
  .rail-divider { border-top: 1px solid #dde2ea; margin: 18px 0; }
  .footnote { font-family: "EB Garamond", serif; font-size: 12px; font-style: italic; color: #6b7589; margin-top: 24px; }

  /* ─── Reader ─── */
  .reader-page { max-width: 760px; margin: 0 auto; padding: 56px 32px; }
  .back-btn { background: none; border: none; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #c89849; margin-bottom: 36px; padding: 0; }
  .reader-source { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: #c89849; margin-bottom: 12px; }
  .reader-chap { font-family: "Cormorant Garamond", serif; font-size: 28px; font-style: italic; color: #1a2847; margin-bottom: 36px; font-weight: 400; }
  .reader-quote { font-family: "EB Garamond", serif; font-size: 26px; line-height: 1.55; color: #1a2847; margin-bottom: 48px; }
  .reflection-block { border-top: 1px solid #dde2ea; padding-top: 28px; }
  .reflection-prompt { font-family: "EB Garamond", serif; font-size: 19px; font-style: italic; color: #1a2847; line-height: 1.6; margin-bottom: 16px; }
  .journal-textarea { width: 100%; min-height: 120px; padding: 16px; border: 1px solid #dde2ea; background: white; font-family: "EB Garamond", serif; font-size: 16px; line-height: 1.6; color: #1a2847; resize: vertical; }
  .journal-textarea:focus { outline: none; border-color: #c89849; }
  .journal-actions { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
  .journal-saved { font-family: "EB Garamond", serif; font-size: 13px; font-style: italic; color: #4a5468; }
  .apply-life { background: #f4f1e8; border: 1px solid #dde2ea; padding: 18px 22px; margin-top: 28px; font-family: "EB Garamond", serif; font-size: 15px; color: #1a2847; line-height: 1.55; }
  .apply-life em { color: #c89849; font-style: italic; }

  /* ─── Library ─── */
  .library-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; margin-bottom: 32px; align-items: center; }

  /* Cross-reference banner pointing to SRF Teachings Library */
  .library-banner { display: flex; align-items: center; gap: 20px; background: linear-gradient(to right, #1a2847, #243559); color: #faf8f3; padding: 22px 28px; margin-top: 24px; border-left: 3px solid #c89849; transition: transform 0.15s, box-shadow 0.2s ease; }
  .library-banner:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26,40,71,0.15); }
  .library-banner-icon { width: 44px; height: 44px; border-radius: 50%; background: #c89849; color: #1a2847; display: flex; align-items: center; justify-content: center; font-size: 16px; padding-left: 3px; flex-shrink: 0; }
  .library-banner-text { flex-grow: 1; }
  .library-banner-title { font-family: "Cormorant Garamond", serif; font-size: 19px; color: #faf8f3; margin-bottom: 4px; }
  .library-banner-desc { font-family: "EB Garamond", serif; font-size: 14px; color: #dde2ea; line-height: 1.5; }
  .library-banner-cta { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #e0b870; white-space: nowrap; flex-shrink: 0; }
  @media (max-width: 880px) { .library-banner { flex-direction: column; align-items: flex-start; padding: 18px 20px; gap: 12px; } .library-banner-icon { width: 36px; height: 36px; font-size: 14px; } }
  .lib-search { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid #dde2ea; background: white; font-family: "EB Garamond", serif; font-size: 16px; font-style: italic; outline: none; }
  .lib-search:focus { border-color: #c89849; }
  .lib-filter { padding: 10px 14px; border: 1px solid #dde2ea; background: white; font-family: "Cormorant Garamond", serif; font-size: 13px; color: #4a5468; cursor: pointer; }
  .library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; padding: 24px 0; }
  @media (max-width: 880px) { .library-grid { grid-template-columns: 1fr; } }
  .lib-card { background: none; border: none; padding: 0; text-align: left; font-family: inherit; }
  .lib-chap { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 6px; }
  .lib-meta { font-family: "EB Garamond", serif; font-size: 11px; font-style: italic; color: #6b7589; margin-bottom: 8px; }
  .lib-text { font-family: "EB Garamond", serif; font-size: 17px; font-style: italic; line-height: 1.45; color: #1a2847; transition: opacity 0.2s ease; }
  .lib-card:hover .lib-text { opacity: 0.6; }
  .lib-empty { font-family: "EB Garamond", serif; font-style: italic; color: #4a5468; padding: 32px 0; }

  /* ─── Journey ─── */
  .journey-page { padding: 40px 0; }
  .journey-stages { display: flex; gap: 16px; margin: 28px 0 40px; flex-wrap: wrap; }
  .stage-pill { background: white; border: 1px solid #dde2ea; padding: 11px 18px; font-family: "Cormorant Garamond", serif; font-size: 13px; color: #4a5468; flex: 1; min-width: 130px; text-align: center; }
  .stage-pill.current { background: #1a2847; color: #faf8f3; border-color: #1a2847; }
  .stage-pill.complete { color: #c89849; border-color: #c89849; }
  .journey-list { display: flex; flex-direction: column; gap: 14px; }
  .journey-item { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; padding: 18px; align-items: center; background: white; border: 1px solid #dde2ea; }
  .journey-item.complete { background: #f4f1e8; }
  .journey-marker { width: 11px; height: 11px; border-radius: 50%; background: #dde2ea; }
  .journey-item.complete .journey-marker { background: #c89849; }
  .journey-item.current .journey-marker { background: #1a2847; }
  .journey-title { font-family: "Cormorant Garamond", serif; font-size: 17px; color: #1a2847; }
  .journey-meta { font-family: "EB Garamond", serif; font-size: 12px; font-style: italic; color: #4a5468; }
  .journey-action { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #c89849; background: none; border: none; padding: 0; }

  /* ─── Community ─── */
  .community-list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
  .community-thread { background: white; border: 1px solid #dde2ea; padding: 20px 24px; cursor: pointer; transition: border-color 0.2s ease; }
  .community-thread:hover { border-color: #c89849; }
  .ct-meta { display: flex; gap: 16px; font-family: "EB Garamond", serif; font-size: 12px; font-style: italic; color: #6b7589; margin-bottom: 6px; }
  .ct-q { font-family: "Cormorant Garamond", serif; font-size: 19px; font-style: italic; color: #1a2847; margin-bottom: 6px; }
  .ct-snippet { font-family: "EB Garamond", serif; font-size: 14px; color: #4a5468; line-height: 1.5; }
  .ct-stats { display: flex; gap: 18px; margin-top: 12px; font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #c89849; }

  /* ─── About ─── */
  .about-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 32px; }
  @media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }
  .about-card { padding: 28px; border: 1px solid #dde2ea; background: white; }
  .about-card .num { font-family: "Cormorant Garamond", serif; font-size: 36px; color: #c89849; font-style: italic; margin-bottom: 8px; line-height: 1; }
  .about-card h4 { font-family: "Cormorant Garamond", serif; font-size: 19px; color: #1a2847; margin-bottom: 8px; font-weight: 500; }
  .about-card p { font-family: "EB Garamond", serif; font-size: 14px; color: #4a5468; line-height: 1.55; }

  /* ─── Initiative (AI & contemplative wisdom) ─── */
  nav.tabs button.tab-initiative { color: #c89849; border: 1px solid #c89849; border-radius: 2px; padding: 5px 14px; opacity: 1; display: inline-flex; align-items: center; gap: 8px; }
  nav.tabs button.tab-initiative::before { content: ""; width: 6px; height: 6px; background: #c89849; border-radius: 50%; display: inline-block; flex-shrink: 0; animation: initiative-pulse 2.6s ease-in-out infinite; }
  nav.tabs button.tab-initiative:hover, nav.tabs button.tab-initiative.active { background: #c89849; color: #faf8f3; border-color: #c89849; border-bottom-color: #c89849; }
  nav.tabs button.tab-initiative:hover::before, nav.tabs button.tab-initiative.active::before { background: #faf8f3; animation: none; }
  @keyframes initiative-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,152,73,0.45); } 50% { box-shadow: 0 0 0 5px rgba(200,152,73,0); } }
  .begin-here.is-static { cursor: default; }
  .begin-here.is-static:hover { transform: none; box-shadow: none; }
  .init-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
  .init-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
  @media (max-width: 880px) { .init-two, .init-2x2 { grid-template-columns: 1fr; } }
  .init-panel-navy { background: linear-gradient(135deg, #1a2847 0%, #243559 100%); color: #faf8f3; padding: 26px 26px; border-left: 4px solid #c89849; }
  .init-panel-navy .scope-h { color: #e0b870; border-bottom-color: rgba(224,184,112,0.25); }
  .init-panel-navy > p { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.6; color: #dde2ea; }
  .init-panel-navy .conv { margin-bottom: 16px; }
  .init-panel-navy .conv strong { font-family: "Cormorant Garamond", serif; font-size: 18px; color: #ffffff; display: block; font-weight: 500; }
  .init-panel-navy .conv span { font-family: "EB Garamond", serif; font-size: 14px; color: #dde2ea; }
  .init-panel-navy .note { font-family: "EB Garamond", serif; font-style: italic; font-size: 14px; color: #e0b870; margin-top: 8px; }
  .scope-col > p { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.6; color: #4a5468; }
  .init-deck-row { text-align: center; margin-top: 26px; }
  .init-deck-btn { display: inline-block; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #1a2847; border: 1px solid #1a2847; padding: 13px 24px; transition: background 0.2s ease, color 0.2s ease; }
  .init-deck-btn:hover { background: #1a2847; color: #faf8f3; }
  .init-note { font-family: "EB Garamond", serif; font-style: italic; font-size: 15px; color: #4a5468; text-align: center; margin-top: 22px; }
  .init-close { background: linear-gradient(135deg, #1a2847 0%, #243559 100%); color: #faf8f3; padding: 48px 40px; margin: 40px 0 0; border-left: 3px solid #c89849; }
  .init-close .eyebrow { color: #e0b870; }
  .init-close h2.section-h { color: #faf8f3; }
  .init-decision-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 28px; }
  @media (max-width: 880px) { .init-decision-grid { grid-template-columns: 1fr; } }
  .init-decision { background: rgba(255,255,255,0.05); border: 1px solid rgba(224,184,112,0.22); padding: 22px 20px; }
  .init-decision .num { font-family: "Cormorant Garamond", serif; font-style: italic; color: #e0b870; font-size: 30px; line-height: 1; margin-bottom: 8px; }
  .init-decision h4 { font-family: "Cormorant Garamond", serif; color: #ffffff; font-size: 17px; margin-bottom: 6px; font-weight: 500; }
  .init-decision p { font-family: "EB Garamond", serif; color: #dde2ea; font-size: 14px; line-height: 1.5; }
  .init-close .closing-line { font-family: "Cormorant Garamond", serif; font-style: italic; color: #e0b870; font-size: 24px; text-align: center; margin-top: 30px; }

  /* ─── Footer ─── */
  footer { border-top: 1px solid #dde2ea; margin-top: 80px; padding: 40px 32px; max-width: 1200px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 28px; }
  .footer-main { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
  footer p { font-family: "EB Garamond", serif; font-size: 13px; font-style: italic; color: #4a5468; max-width: 600px; line-height: 1.6; margin: 0; }
  footer .version { font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 20px 28px; padding-top: 24px; border-top: 1px solid #dde2ea; align-items: center; }
  .footer-links-label { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; width: 100%; margin-bottom: -8px; }
  .footer-links a { font-family: "Cormorant Garamond", serif; font-size: 13px; color: #4a5468; transition: color 0.2s ease; }
  .footer-links a:hover { color: #c89849; }
  .footer-donate { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 28px; background: linear-gradient(135deg, #faf6e9 0%, #f4ecd3 100%); border: 1px solid #e0d5b5; border-left: 3px solid #c89849; }
  .footer-donate-eyebrow { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c89849; margin-bottom: 4px; }
  .footer-donate-text { font-family: "EB Garamond", serif; font-size: 14px; color: #4a5468; }
  .footer-donate-btn { background: #1a2847; color: #e0b870 !important; padding: 13px 26px; font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; border-radius: 999px; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
  .footer-donate-btn:hover { background: #243559; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(26,40,71,0.18); }
  @media (max-width: 600px) { .footer-donate { flex-direction: column; align-items: flex-start; padding: 18px 20px; gap: 12px; } }

  /* ─── Scope section (on About page) ─── */
  .scope-section { margin-top: 64px; padding-top: 48px; border-top: 1px solid #dde2ea; }
  .scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
  @media (max-width: 880px) { .scope-grid { grid-template-columns: 1fr; gap: 18px; } }
  .scope-col { background: white; border: 1px solid #dde2ea; padding: 24px 22px; }
  .scope-h { font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid #dde2ea; }
  .scope-h-done { color: #4a8060; border-bottom-color: #d0e0d6; }
  .scope-h-build { color: #c89849; border-bottom-color: #e8d8b8; }
  .scope-h-open { color: #1a2847; border-bottom-color: #c8d2e0; }
  .scope-list { list-style: none; padding: 0; margin: 0; }
  .scope-list li { font-family: "EB Garamond", serif; font-size: 14px; line-height: 1.5; color: #1a2847; padding: 8px 0 8px 18px; position: relative; border-bottom: 1px dotted #e8ecf2; }
  .scope-list li:last-child { border-bottom: none; }
  .scope-list li::before { content: "·"; position: absolute; left: 6px; top: 6px; color: #c89849; font-size: 18px; line-height: 1; }

  /* ─── Floating Ask ─── */
  .float-ask { position: fixed; bottom: 24px; right: 24px; z-index: 100; }
  .float-ask-btn { background: #1a2847; color: #e8ecf2; border: none; padding: 15px 26px; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(26,40,71,0.22), 0 2px 6px rgba(26,40,71,0.12); border-radius: 999px; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
  .float-ask-btn:hover { background: #243559; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,40,71,0.28), 0 4px 10px rgba(26,40,71,0.14); }

  /* ─── Phone-specific tightening (≤600px) ─── */
  @media (max-width: 600px) {
    /* Header / nav: let tabs scroll horizontally instead of wrapping ugly */
    .nav { padding: 14px 20px; gap: 12px; flex-wrap: nowrap; overflow: hidden; }
    .brand { gap: 8px; flex-shrink: 0; }
    .brand-emblem { height: 30px; }
    .brand-wordmark { display: none; }
    .brand-tag { display: none; }
    nav.tabs { gap: 20px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; margin-left: 0; width: 100%; }
    nav.tabs::-webkit-scrollbar { display: none; }
    nav.tabs button { font-size: 14px; white-space: nowrap; flex-shrink: 0; }
    nav.tabs a { font-size: 14px; white-space: nowrap; flex-shrink: 0; }
    .lang-select { display: none; } /* save space; not core to demo */

    /* Main: comfortable mobile rhythm */
    main { padding: 0 20px; }
    .section { padding: 32px 0; }

    /* Typography: phone-friendly with comfortable line-height */
    h1.hero { font-size: 32px; line-height: 1.12; margin-bottom: 16px; letter-spacing: -0.01em; }
    h2.section-h { font-size: 26px; margin-bottom: 14px; letter-spacing: -0.005em; }
    h3.card-h { font-size: 19px; }
    .lede { font-size: 16px; }
    .eyebrow { font-size: 10px; margin-bottom: 12px; }

    /* Hero grid: left-align meta, smaller date */
    .hero-grid { padding: 32px 0 20px; gap: 16px; }
    .hero-meta { text-align: left; }
    .hero-meta .date { font-size: 17px; }
    .hero-meta .moment { font-size: 13px; }

    /* Path picker: 2 columns of slightly smaller cards (5th wraps to row 3) */
    .path-section { padding: 8px 0 28px; }
    .path-grid { gap: 8px; }
    .path-card { padding: 14px 12px; }
    .path-card .icon { font-size: 22px; margin-bottom: 4px; }
    .path-card .name { font-size: 14px; }
    .path-card .desc { font-size: 11px; }

    /* Continue card */
    .continue-card { padding: 20px; gap: 16px; margin: 20px 0; }
    .continue-card .stage { font-size: 19px; }
    .continue-card .next { font-size: 15px; }
    .btn-dark { padding: 11px 18px; font-size: 11px; width: 100%; text-align: center; }

    /* Today's passage */
    .today-card { padding: 32px 0; gap: 16px; }
    blockquote.featured { font-size: 20px; line-height: 1.45; margin-bottom: 18px; }
    .quote-mark { font-size: 38px; margin-bottom: 8px; }

    /* Ask CTA on home */
    .ask-cta { padding: 36px 0; gap: 20px; }
    .example { padding: 12px 14px; font-size: 15px; }

    /* Discover */
    .discover { padding: 36px 0; }
    .discover-grid { gap: 12px; margin-top: 20px; }
    .discover-body { padding: 16px; }
    .discover-title { font-size: 18px; }
    .discover-desc { font-size: 13px; }

    /* Teachings */
    .teachings-section { padding: 36px 0; }
    .teachings-head { margin-bottom: 20px; }
    .teachings-grid { gap: 14px; }
    .teaching-body { padding: 16px 18px 18px; }
    .teaching-title { font-size: 18px; }
    .play-icon { width: 48px; height: 48px; font-size: 19px; }

    /* Featured Lesson */
    .featured-lesson { margin: 32px 0; }
    .featured-lesson-body { padding: 22px 20px; gap: 10px; }
    .featured-lesson-title { font-size: 23px; }
    .featured-lesson-desc { font-size: 14px; }

    /* Tier section */
    .tier-section { padding: 36px 0; }
    .tier-grid { gap: 14px; margin-top: 20px; }
    .tier { padding: 22px; }
    .tier h3 { font-size: 22px; }
    .tier p { font-size: 14px; }
    .tier ul { font-size: 13px; }

    /* Connect block */
    .connect-block { margin: 36px 0; }
    .connect-half { padding: 24px; }
    .connect-half h4 { font-size: 21px; }
    .connect-half p { font-size: 14px; }

    /* Ask page */
    .ask-page { padding: 32px 0; gap: 24px; }
    .ask-input-row input { font-size: 18px; }
    .you-asked-text { font-size: 19px; margin-bottom: 24px; }
    .answer { font-size: 16px; line-height: 1.65; }
    .citation { padding: 8px 0 8px 14px; }
    .citation-text { font-size: 15px; }
    .rail { padding: 18px; }
    .rail p, .rail ul { font-size: 13px; }

    /* Reader page */
    .reader-page { padding: 32px 18px; }
    .reader-chap { font-size: 22px; margin-bottom: 24px; }
    .reader-quote { font-size: 20px; line-height: 1.5; margin-bottom: 32px; }
    .reflection-prompt { font-size: 17px; }
    .journal-textarea { font-size: 15px; min-height: 100px; padding: 12px; }
    .apply-life { padding: 16px 18px; font-size: 14px; }

    /* Library */
    .library-controls { gap: 8px; margin-bottom: 24px; }
    .lib-search { padding: 9px 12px; font-size: 15px; }
    .lib-filter { padding: 9px 10px; font-size: 12px; }
    .library-grid { gap: 24px; padding: 16px 0; }
    .lib-text { font-size: 16px; }

    /* Journey */
    .journey-page { padding: 28px 0; }
    .journey-stages { gap: 8px; margin: 20px 0 28px; }
    .stage-pill { padding: 9px 12px; font-size: 12px; min-width: 0; flex: 1 1 calc(50% - 4px); }
    .journey-item { padding: 14px; gap: 12px; }
    .journey-title { font-size: 15px; }
    .journey-meta { font-size: 11px; }
    .journey-action { font-size: 10px; }

    /* Community */
    .community-list { gap: 10px; margin-top: 20px; }
    .community-thread { padding: 16px 18px; }
    .ct-q { font-size: 17px; }
    .ct-snippet { font-size: 13px; }

    /* About */
    .about-grid { gap: 12px; margin-top: 20px; }
    .about-card { padding: 22px; }
    .about-card .num { font-size: 30px; }

    /* Footer */
    footer { padding: 28px 18px; margin-top: 48px; gap: 18px; }
    .footer-main { flex-direction: column; gap: 12px; }
    footer p { font-size: 12px; }
    .footer-links { gap: 12px 18px; padding-top: 18px; }
    .footer-links a { font-size: 12px; }

    /* Floating Ask: smaller, leave room for content */
    .float-ask { bottom: 16px; right: 16px; }
    .float-ask-btn { padding: 12px 20px; font-size: 11px; letter-spacing: 0.2em; }

    /* Banner */
    .banner { font-size: 10px; padding: 6px 8px; }
  }
a.about-card{text-decoration:none;color:inherit;}
a.about-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(26,40,71,.10);}

.otp-note{font-size:15px;color:#4A5468;margin:0 0 24px;padding:13px 16px;background:#FAF6E9;border-left:3px solid #C89849;border-radius:4px;}
.otp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;}
.otp-book{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid #E6E2D6;border-radius:10px;overflow:hidden;transition:transform .15s,box-shadow .15s;}
.otp-book:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(26,40,71,.14);}
.otp-cover{position:relative;aspect-ratio:3/4;background:linear-gradient(160deg,#1A2847,#26395c);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 18px;text-align:center;}
.otp-cover-rule{position:absolute;inset:10px;border:1px solid rgba(200,152,73,.45);border-radius:4px;}
.otp-cover-mark{width:34px;height:34px;margin-bottom:12px;}
.otp-cover-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600;color:#fff;line-height:1.12;margin-bottom:12px;}
.otp-cover-author{font-size:10.5px;letter-spacing:1.5px;color:#E0B870;text-transform:uppercase;}
.otp-cover-org{position:absolute;bottom:16px;left:0;right:0;font-size:8.5px;letter-spacing:1.5px;color:rgba(221,226,234,.7);text-transform:uppercase;}
.otp-book-meta{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1;}
.otp-book-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;font-weight:600;color:#1A2847;margin-bottom:5px;}
.otp-book-blurb{font-size:13px;color:#4A5468;line-height:1.42;margin-bottom:12px;flex:1;}
.otp-book-cta{font-size:13px;font-weight:600;color:#C89849;}
.otp-lessons-card{display:flex;margin-top:32px;border-radius:12px;overflow:hidden;background:#1A2847;}
.otp-lessons-stamp{flex:0 0 150px;background:#C89849;color:#1A2847;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:14px;line-height:1.3;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;}
.otp-lessons-body{padding:24px 30px;}
.otp-lessons-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;color:#fff;margin-bottom:8px;}
.otp-lessons-desc{font-size:14px;color:#DDE2EA;line-height:1.55;margin-bottom:18px;max-width:660px;}
.otp-lessons-btn{background:#C89849;color:#1A2847;border:none;border-radius:6px;padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;}
.otp-lessons-btn:hover{background:#E0B870;}
.otp-lessons-btn:disabled{background:#C9CCD3;color:#7b8290;cursor:not-allowed;}
.otp-reader-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.otp-reader-tools button{background:#1A2847;color:#fff;border:none;border-radius:6px;padding:6px 13px;margin-left:8px;cursor:pointer;font-family:inherit;font-size:14px;}
.otp-reader-tools button:hover{background:#26395c;}
.otp-reader-page{max-width:680px;margin:0 auto;background:#FCFAF3;border:1px solid #E6E2D6;border-radius:8px;padding:48px 58px;line-height:1.78;color:#2b2b2b;box-shadow:0 8px 30px rgba(26,40,71,.08);}
.otp-reader-head{text-align:center;margin-bottom:22px;}
.otp-reader-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:31px;color:#1A2847;line-height:1.1;}
.otp-reader-author{font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:#8090A8;margin-top:6px;}
.otp-placeholder-banner{font-size:12.5px;color:#8a6d3b;background:#FBF3DF;border:1px dashed #C89849;border-radius:6px;padding:9px 13px;margin-bottom:28px;text-align:center;}
.otp-ch{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;color:#1A2847;text-align:center;margin:0 0 20px;letter-spacing:1px;font-weight:600;}
.otp-reader-page p{margin:0 0 16px;}
.otp-gate{max-width:680px;margin:0 auto;background:#fff;border:1px solid #E6E2D6;border-radius:12px;padding:38px 42px;box-shadow:0 8px 30px rgba(26,40,71,.08);}
.otp-gate-h{font-family:'Cormorant Garamond',Georgia,serif;font-size:29px;color:#1A2847;margin:6px 0 14px;}
.otp-gate-p{font-size:15px;color:#4A5468;line-height:1.62;margin-bottom:22px;}
.otp-pledge{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#1A2847;background:#FAF6E9;border-radius:8px;padding:16px 18px;line-height:1.5;cursor:pointer;}
.otp-pledge input{margin-top:3px;transform:scale(1.25);accent-color:#C89849;}
.otp-gate-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px;}
.otp-enroll-btn{display:inline-block;background:#1A2847;color:#fff;text-decoration:none;border-radius:6px;padding:13px 26px;font-weight:600;font-size:15px;}
.otp-enroll-btn:hover{background:#26395c;}
@media(max-width:640px){.otp-lessons-card{flex-direction:column;}.otp-lessons-stamp{flex-basis:auto;}.otp-reader-page{padding:32px 24px;}}

  /* ─── Lessons-path extras (same tokens as Concept v0.24) ─── */
  nav.tabs a {
    background: none;
    border: none;
    font-family: "Cormorant Garamond", serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: #1a2847;
    opacity: 0.65;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: opacity 0.15s, border-color 0.2s ease;
    cursor: pointer;
  }
  nav.tabs a:hover, nav.tabs a.active { opacity: 1; border-bottom-color: #c89849; }
  a.brand { text-decoration: none; }
  a.btn-dark, a.btn-ghost, a.btn-outline { display: inline-block; text-align: center; text-decoration: none; }
  a.float-ask-btn { display: inline-block; text-decoration: none; color: #e8ecf2; }

  .btn-ghost {
    background: none;
    border: none;
    padding: 13px 24px;
    font-family: "Cormorant Garamond", serif;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #c89849;
    white-space: nowrap;
  }
  .btn-ghost:hover { color: #1a2847; }
  .btn-outline {
    background: transparent;
    color: #1a2847;
    border: 1px solid #1a2847;
    padding: 13px 24px;
    font-family: "Cormorant Garamond", serif;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .btn-outline:hover { background: #1a2847; color: #faf8f3; }

  .hero-actions { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-top: 32px; }
  .already-link {
    font-family: "Cormorant Garamond", serif;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #c89849;
  }
  .already-link:hover { color: #1a2847; }

  .flow-narrow { max-width: 760px; padding: 40px 0 64px; }
  .flow-mid { max-width: 980px; padding: 40px 0 64px; }
  .muted { color: #4a5468; }
  .hidden { display: none !important; }
  .center { text-align: center; }

  .step { display: none; }
  .step.active { display: block; }

  .path-dots { display: flex; gap: 8px; margin: 8px 0 28px; }
  .path-dots span { width: 10px; height: 10px; border-radius: 50%; background: #dde2ea; border: 2px solid #dde2ea; }
  .path-dots span.on { background: #c89849; border-color: #c89849; }
  .path-dots span.here { background: #c89849; border-color: #c89849; box-shadow: 0 0 0 5px rgba(200,152,73,0.18); }

  .callout {
    margin: 24px 0;
    padding: 22px 26px;
    background: #f4f1e8;
    border: 1px solid #e0d5b5;
    border-left: 4px solid #c89849;
    font-family: "EB Garamond", serif;
    font-size: 16px;
    line-height: 1.65;
    color: #1a2847;
    font-style: italic;
  }

  .nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #dde2ea;
  }

  .quiet-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
  .quiet-list li { display: flex; gap: 16px; align-items: flex-start; background: white; border: 1px solid #e0d5b5; border-left: 4px solid #c89849; padding: 20px 22px; }
  .quiet-list .n { font-family: "Cormorant Garamond", serif; font-size: 18px; color: #c89849; font-style: italic; min-width: 1.4em; }
  .quiet-list strong { display: block; font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 500; color: #1a2847; margin-bottom: 4px; }
  .quiet-list span { font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.55; color: #4a5468; }

  .choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 12px; }
  @media (max-width: 880px) { .choices { grid-template-columns: 1fr; } }
  .choice {
    background: white;
    border: 1px solid #e0d5b5;
    padding: 28px 24px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.2s ease, transform 0.15s;
  }
  .choice:hover { border-color: #c89849; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(26,40,71,0.08); }
  .choice.selected { border-color: #c89849; border-left: 4px solid #c89849; background: #fffdf6; }
  .choice h3 { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 500; color: #1a2847; margin: 8px 0 8px; }
  .choice p { font-family: "EB Garamond", serif; font-size: 14px; line-height: 1.55; color: #4a5468; margin: 0 0 14px; }
  .choice .equal { font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #c89849; }
  .choice-icon { width: 40px; height: 40px; color: #c89849; margin-bottom: 4px; }

  .field { display: block; margin: 18px 0; }
  .field > span {
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #c89849;
    margin-bottom: 8px;
  }
  .field input, .field select, .field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #dde2ea;
    background: white;
    font-family: "EB Garamond", serif;
    font-size: 17px;
    color: #1a2847;
    outline: none;
  }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: #c89849; }
  .field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
  .hint { font-family: "EB Garamond", serif; font-size: 14px; font-style: italic; color: #6b7589; margin-top: 8px; }
  .small { font-family: "EB Garamond", serif; font-size: 14px; color: #4a5468; line-height: 1.55; }

  .check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f4f1e8;
    border: 1px solid #e0d5b5;
    padding: 16px 18px;
    font-family: "EB Garamond", serif;
    font-size: 15px;
    line-height: 1.55;
    color: #1a2847;
    margin: 22px 0;
    cursor: pointer;
  }
  .check input { accent-color: #c89849; margin-top: 4px; flex-shrink: 0; transform: scale(1.15); }

  .err { display: none; font-family: "EB Garamond", serif; font-size: 15px; font-style: italic; color: #8a4a32; margin: 12px 0 0; }
  .err.show { display: block; }

  .currency-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
  .currency-bar button {
    background: white;
    border: 1px solid #dde2ea;
    padding: 8px 14px;
    font-family: "Cormorant Garamond", serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #1a2847;
  }
  .currency-bar button[aria-pressed="true"] { background: #1a2847; color: #faf8f3; border-color: #1a2847; }

  .amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 700px) { .amount-grid { grid-template-columns: 1fr; } }
  .amount {
    background: #f4f1e8;
    border: 1px solid #e0d5b5;
    border-left: 4px solid #e0d5b5;
    padding: 22px 20px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .amount:hover { border-color: #c89849; }
  .amount[aria-pressed="true"] { border-left-color: #c89849; background: #fffdf6; }
  .amount .fig { font-family: "Cormorant Garamond", serif; font-size: 28px; color: #1a2847; display: block; margin-bottom: 6px; }
  .amount .lbl { font-family: "EB Garamond", serif; font-size: 13px; font-style: italic; color: #4a5468; }

  .custom-amt { display: flex; align-items: flex-end; gap: 10px; margin-top: 16px; }
  .custom-amt .sym { font-family: "Cormorant Garamond", serif; font-size: 28px; color: #c89849; padding-bottom: 10px; }

  .grace { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
  .grace button {
    background: white;
    border: 1px solid #e0d5b5;
    border-left: 4px solid #c89849;
    padding: 16px 20px;
    text-align: left;
    font-family: "EB Garamond", serif;
    font-size: 16px;
    font-style: italic;
    color: #1a2847;
  }
  .grace button[aria-pressed="true"] { background: #f4f1e8; }

  .letter {
    background: white;
    border: 1px solid #e0d5b5;
    padding: 40px 44px;
    margin: 24px 0 32px;
  }
  .letter p { font-family: "EB Garamond", serif; font-size: 18px; line-height: 1.7; color: #1a2847; margin: 0 0 16px; }
  .letter .signoff { font-style: italic; color: #4a5468; margin-top: 28px; }
  .letter-mark { width: 48px; height: 48px; margin-bottom: 18px; }
  @media (max-width: 600px) { .letter { padding: 28px 22px; } }

  .week-card { margin: 28px 0 40px; }
  .weeks-on { display: flex; align-items: baseline; gap: 16px; margin: 8px 0 36px; }
  .weeks-on .num { font-family: "Cormorant Garamond", serif; font-size: 48px; color: #c89849; font-style: italic; line-height: 1; }
  .weeks-on .cap { font-family: "EB Garamond", serif; font-size: 14px; font-style: italic; color: #4a5468; line-height: 1.45; }

  .path-track { display: flex; align-items: center; gap: 0; margin: 12px 0 8px; overflow-x: auto; padding: 8px 0 16px; }
  .path-node { display: flex; align-items: center; }
  .path-node .bead { width: 12px; height: 12px; border-radius: 50%; background: #dde2ea; border: 2px solid #dde2ea; flex-shrink: 0; }
  .path-node.done .bead { background: #c89849; border-color: #c89849; }
  .path-node.now .bead { background: #1a2847; border-color: #1a2847; box-shadow: 0 0 0 5px rgba(26,40,71,0.12); }
  .path-node .wire { width: 28px; height: 2px; background: #dde2ea; }
  .path-caption { font-family: "EB Garamond", serif; font-size: 13px; font-style: italic; color: #6b7589; margin-bottom: 36px; }

  .study-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
  @media (max-width: 700px) { .study-links { grid-template-columns: 1fr; } }
  .study-links a.card {
    background: white;
    border: 1px solid #e0d5b5;
    padding: 24px 22px;
    display: block;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s ease;
  }
  .study-links a.card:hover { transform: translateY(-2px); border-color: #c89849; box-shadow: 0 6px 16px rgba(26,40,71,0.08); }
  .study-links a.card h3 { font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 500; color: #1a2847; margin: 0 0 8px; }
  .study-links a.card p { font-family: "EB Garamond", serif; font-size: 14px; line-height: 1.55; color: #4a5468; margin: 0; }

  .letter-page { max-width: 760px; margin: 0 auto; padding: 48px 0 80px; }
  .stillness {
    background: linear-gradient(135deg, #faf6e9 0%, #f4ecd3 100%);
    border: 1px solid #e0d5b5;
    border-left: 4px solid #c89849;
    padding: 28px 32px;
    margin: 24px 0 28px;
  }
  .stillness p { font-family: "EB Garamond", serif; font-size: 19px; font-style: italic; line-height: 1.6; color: #1a2847; margin: 0; }
  .sample-flag {
    display: inline-block;
    font-family: "Cormorant Garamond", serif;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #7a5a20;
    background: #fef8e8;
    border: 1px solid #e8d8a0;
    padding: 8px 14px;
    margin: 0 0 24px;
  }
  .prose p { font-family: "EB Garamond", serif; font-size: 18px; line-height: 1.7; color: #1a2847; margin: 0 0 16px; }
  .practice {
    margin: 36px 0;
    padding: 28px 32px;
    background: white;
    border: 1px solid #e0d5b5;
    border-left: 4px solid #c89849;
  }
  .practice h2 { font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 500; color: #1a2847; margin: 0 0 14px; }
  .practice ol { margin: 0 0 16px; padding-left: 22px; }
  .practice li { font-family: "EB Garamond", serif; font-size: 16px; line-height: 1.6; color: #4a5468; margin: 0 0 8px; }
  .mark-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #dde2ea; }
  .received-seal { display: none; font-family: "EB Garamond", serif; font-size: 16px; font-style: italic; color: #1a2847; }
  .received-seal.show { display: block; }
  .received-seal a { color: #c89849; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-style: normal; }

  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
  @media (max-width: 880px) { .pair { grid-template-columns: 1fr; } }
  .pair .card {
    background: white;
    border: 1px solid #e0d5b5;
    padding: 28px 26px;
  }
  .pair .card.yours { border-color: #c89849; border-left: 4px solid #c89849; }
  .pair .card h2 { font-family: "Cormorant Garamond", serif; font-size: 26px; font-weight: 500; color: #1a2847; margin: 0 0 16px; }
  .flow-steps { list-style: none; padding: 0; margin: 0 0 16px; }
  .flow-steps li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; font-family: "EB Garamond", serif; font-size: 15px; line-height: 1.55; color: #4a5468; }
  .flow-steps .n {
    width: 28px; height: 28px; border-radius: 50%; background: #c89849; color: white;
    display: flex; align-items: center; justify-content: center;
    font-family: "Cormorant Garamond", serif; font-size: 14px; flex-shrink: 0;
  }
  .pair .illus { color: #c89849; margin-bottom: 8px; }
  .pair .illus svg { width: 88px; height: 70px; }

  .phone-frame {
    width: 280px;
    margin: 36px auto;
    border: 1px solid #e0d5b5;
    background: white;
    padding: 14px 14px 24px;
    border-radius: 28px;
    box-shadow: 0 8px 24px rgba(26,40,71,0.08);
  }
  .phone-screen { background: #faf8f3; padding: 36px 22px; text-align: center; border: 1px solid #dde2ea; }
  .phone-screen img { width: 40px; height: 40px; margin: 0 auto 16px; }
  .phone-screen h2 { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 500; color: #1a2847; margin: 0 0 10px; }
  .actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
  .actions.center { justify-content: center; }

  @media (max-width: 600px) {
    nav.tabs a { font-size: 14px; white-space: nowrap; flex-shrink: 0; }
    .flow-narrow, .flow-mid, .letter-page { padding-top: 24px; }
    .hero-actions { gap: 16px; }
    .btn-ghost, .btn-outline { width: 100%; text-align: center; }
    .stillness, .practice { padding: 22px; }
  }