/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 11 2026 | 17:31:59 */
/* ~~~~~ 2026 - Protected Pages CSS (merged Nov 11 2026, group 3b) ~~~~~
   External file, header, front end. Merges 15 older Custom CSS items in their live print order (newest ID first). The old items stay OFF (kept, never deleted).
   Sources in order: #91158 2026 - Protected Please Note | #91122 2026 - Protected Podcast | #91117 2026 - Protected Staff Class | #91087 2026 - Protected Video Controls | #91058 2026 - Protected Video | #91052 2026 - Protected PDF Above Card | #91009 2026 - Protected Audio | #90891 2026 - Protected Narrator | #90751 2026 - Protected Icons | #90749 2026 - Protected Audio Width | #90740 2026 - Protected Links | #90698 2026 - Protected PDF Butons | #90694 2026 - Protected Consistency | #90680 2026 - Protected Details | #90650 2026 - Protected Video Border
   Bug fixes for protected pages go INSIDE this file, not into new items. */

/* ===== SOURCE #91158 2026 - Protected Please Note ===== */
/* ===== 2026 - Protected Please Note CSS (protected pages, whole site, front end) =====
   Extra rules for the gold "Please Note" box (the box itself is styled by 2026 - Protected Narrator CSS, class fx-pnarr).
   - links inside the note: navy with a gold underline, like the sales pages
   Spacing: 32px between the gold box and whatever comes next (the PDF card(s) or the white card), the same 32px as between all other page objects. */
html body.ppp-protected .fx-pnarr a:not(#fx) { color: #2e4a66 !important; text-decoration: none !important; border-bottom: 1px solid #E0B02D; }
html body.ppp-protected .fx-pnarr a:not(#fx):hover { color: #0d1b3e !important; }
/* ===== END 2026 - Protected Please Note CSS ===== */

/* ===== SOURCE #91122 2026 - Protected Podcast ===== */
/* ===== 2026 - Protected Podcast CSS (front end, whole site; every rule needs the page to be a protected Podcast page built by "2026 - Protected Podcast JS") =====
   Look = approved mockup "Podcast Intro protected page" (desktop 1280 / tablet 820 / phone 390).
   Tokens: slate #5a6b7d (= the Podcast button on Streaming Access, tint #e8edf1), navy #2e4a66, deep navy #0d1b3e, gold #E0B02D, dark gold #a8761a, line #dfe4f2, gray frame #b8bfcc.
   The player rules are the Audio page player rules, scoped to body.fx-pc. */

/* ---------- no flash of the old page ---------- */
html.fx-pcp:not(.fx-pc-done) body.ppp-protected #tve_editor:not(#fx) { opacity: 0; animation: fxPcShow .01s 5s forwards; }
html.fx-pcp.fx-pc-done body.ppp-protected #tve_editor:not(#fx) { transition: opacity .25s ease; }
@keyframes fxPcShow { to { opacity: 1; } }

/* ---------- old pieces that the new layout replaces (kept in the page, only hidden) ---------- */
html body.fx-pc .fx-pc-old:not(#fx) { display: none !important; }
html body.fx-pc .main-container.thrv_wrapper:not(#fx) { padding-top: 0 !important; }
html body.fx-pc #theme-content-section:not(#fx) { margin-top: 0 !important; }
html body.fx-pc #theme-content-section .section-content:not(#fx) { padding-top: 0 !important; }
html body.fx-pc { overflow-x: clip; }
/* the real Sonaar player: off screen, still plays */
html body.fx-pc .fx-src:not(#fx) { position: absolute !important; left: -9999px !important; top: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* ---------- hero band: slate, card on the left, text column 596px (same as the Video / Staff pages) ---------- */
body.fx-pc .fx-pc-h { background: #5a6b7d; color: #fff; width: 100vw; margin-left: calc(50% - 50vw); position: relative; z-index: 1; font-family: 'Open Sans', sans-serif; }
body.fx-pc .fx-pc-in { max-width: 1080px; margin: 0 auto; padding: 56px 24px 56px; display: flex; gap: 56px; align-items: flex-start; box-sizing: border-box; }
body.fx-pc .fx-pc-cover { flex: 0 0 380px; width: 380px; max-width: 100%; position: relative; z-index: 3; box-sizing: border-box; border-radius: 12px; box-shadow: 0 18px 40px rgba(20, 35, 55, .3); overflow: hidden; line-height: 0; }
html body.fx-pc .fx-pc-cover .thrv_wrapper:not(#fx), html body.fx-pc .fx-pc-cover .tve_image_frame:not(#fx) { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; float: none !important; }
html body.fx-pc .fx-pc-cover img:not(#fx) { display: block; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; border-radius: 12px; }
body.fx-pc .fx-pc-left { flex: 0 1 596px; width: 596px; max-width: 100%; min-width: 0; }
body.fx-pc .fx-pc-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 19.5px; font-weight: 400; color: #dfe6ee; margin: 0 0 28px; flex-wrap: wrap; }
body.fx-pc .fx-pc-crumb a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
body.fx-pc .fx-pc-crumb span { margin: 0; }
html body.fx-pc h1.fx-pc-title:not(#fx) { font-family: 'Playfair Display', serif !important; font-weight: 400 !important; font-size: 46px !important; line-height: 1.18 !important; color: #fff !important; margin: 0 0 18px !important; padding: 0 !important; text-transform: none !important; letter-spacing: normal !important; text-align: left !important; }
html body.fx-pc h1.fx-pc-title:not(#fx) em { font-style: italic !important; }
html body.fx-pc h1.fx-pc-title.fx-t2:not(#fx) { font-size: 38px !important; }
html body.fx-pc h1.fx-pc-title.fx-t3:not(#fx) { font-size: 32px !important; }
html body.fx-pc h1.fx-pc-title.fx-t4:not(#fx) { font-size: 27px !important; line-height: 1.22 !important; }
body.fx-pc .fx-pc-meta { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 26px; }
body.fx-pc .fx-pc-badge { display: block; background: #E0B02D; color: #fff; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .72px; text-transform: uppercase; padding: 4px 12px; border-radius: 4px; }
body.fx-pc .fx-pc-dur { font-size: 16px; line-height: 24px; color: #eef2f6; }
body.fx-pc .fx-pc-dur:empty { display: none; }
body.fx-pc .fx-pc-by { font-size: 17px; line-height: 1.6; color: #fff; margin: 0 0 30px; }
body.fx-pc .fx-pc-chips { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }

/* Playlist / Favorites / Help = the three Thrive lightbox icons, same elements (they still open their lightboxes) */
html body.fx-pc .fx-pc-chips .fx-chip:not(#fx) { display: flex !important; align-items: center; gap: 8px; width: auto !important; height: 46px !important; margin: 0 !important; padding: 0 22px !important; background: #fff !important; border-radius: 999px; color: #5a6b7d; font-size: 15px; font-weight: 600; cursor: pointer; box-sizing: border-box; float: none !important; }
html body.fx-pc .fx-pc-chips .fx-chip:not(#fx) > * { margin: 0 !important; }
html body.fx-pc .fx-pc-chips .fx-chip:not(#fx) svg { width: 18px !important; height: 18px !important; fill: #5a6b7d !important; stroke: none !important; }
html body.fx-pc .fx-pc-chips .fx-chip:not(#fx) svg * { fill: #5a6b7d !important; stroke: none !important; }
body.fx-pc .fx-chip-playlist::after { content: "Recent"; }
body.fx-pc .fx-chip-favorites::after { content: "Favorites"; }
body.fx-pc .fx-chip-help::after { content: "Help"; }
html body.fx-pc .fx-pc-chips .fx-chip:hover:not(#fx), html body.fx-pc .fx-pc-chips .fx-chip:focus-visible:not(#fx) { background: #E0B02D !important; color: #fff !important; }
html body.fx-pc .fx-pc-chips .fx-chip:hover:not(#fx) svg, html body.fx-pc .fx-pc-chips .fx-chip:hover:not(#fx) svg * { fill: #fff !important; }

/* ---------- section headings (same header style as "Select a Disc to Listen") ---------- */
body.fx-pc .fx-pc-head { display: flex; align-items: center; gap: 14px; margin: 40px 0 14px; font-family: 'Open Sans', sans-serif; color: #2e4a66; }
body.fx-pc .fx-pc-hic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #2e4a66; display: flex; align-items: center; justify-content: center; }
body.fx-pc .fx-pc-hic svg { width: 22px; height: 22px; fill: none; stroke: #E0B02D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pc .fx-pc-h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 26px; line-height: 1.2; color: #1f3550; }
body.fx-pc .fx-pc-sub { font-size: 14px; color: #5d7289; margin-top: 3px; }

/* ---------- the player = the Audio page player ---------- */
body.fx-pc .fx-player { position: relative; width: 100%; background: #fff; border: 1px solid #dfe4f2; border-radius: 14px; box-shadow: 0 2px 14px rgba(46, 74, 102, .08); padding: 14px 20px 10px; color: #2e4a66; box-sizing: border-box; overflow: hidden; font-family: 'Open Sans', sans-serif; }
body.fx-pc .fx-pl-top { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 8px; }
body.fx-pc .fx-pl-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #a8761a; }
body.fx-pc .fx-pl-title svg { width: 18px; height: 18px; fill: none; stroke: #a8761a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pc .fx-pl-track { font-size: 13px; color: #5b6b7f; min-width: 0; flex: 1 1 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fx-pc .fx-pl-time { margin-left: auto; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.fx-pc .fx-pl-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
html body.fx-pc .fx-pl-btn:not(#fx) { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; border: 0; background: #0d1b3e; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: pointer; transition: background .2s; }
body.fx-pc .fx-pl-btn:hover, body.fx-pc .fx-pl-btn:focus-visible { background: #2e4a66; outline: none; }
body.fx-pc .fx-pl-btn svg { width: 24px; height: 24px; fill: #fff; }
body.fx-pc .fx-pl-btn .fx-i-pause { display: none; }
body.fx-pc .fx-player.fx-playing .fx-pl-btn .fx-i-play { display: none; }
body.fx-pc .fx-player.fx-playing .fx-pl-btn .fx-i-pause { display: block; }
/* the gold heartbeat ring while it plays */
body.fx-pc .fx-player.fx-playing .fx-pl-btn { animation: fxring 1.4s ease-out infinite; }
@keyframes fxring { 0% { box-shadow: 0 0 0 0 rgba(245, 200, 66, .6); } 100% { box-shadow: 0 0 0 16px rgba(245, 200, 66, 0); } }
/* the progress bar: the bars are counted to fit, and are clipped so they can never run past the edge of the card */
body.fx-pc .fx-pl-wave { position: relative; flex: 1 1 auto; min-width: 0; height: 60px; overflow: hidden; max-width: 100%; }
body.fx-pc .fx-pl-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; overflow: hidden; max-width: 100%; }
body.fx-pc .fx-pl-bars span { flex: 0 0 3px; width: 3px; border-radius: 2px; background: #c9d3e6; }
body.fx-pc .fx-pl-bars span.on { background: #2e4a66; }
body.fx-pc .fx-pl-head { position: absolute; top: 2px; width: 2px; height: 56px; margin-left: -1px; border-radius: 1px; background: #E0B02D; pointer-events: none; }
html body.fx-pc .fx-pl-seek:not(#fx) { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.fx-pc .fx-pl-ctl { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-top: 2px; }
body.fx-pc .fx-pl-skips { display: flex; gap: 4px; }
html body.fx-pc .fx-pl-ic:not(#fx) { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; }
body.fx-pc .fx-pl-ic svg { width: 26px; height: 26px; fill: none; stroke: #2e4a66; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pc .fx-pl-ic svg text { font-family: 'Open Sans', sans-serif; font-size: 8.5px; font-weight: 700; fill: #2e4a66; stroke: none; }
body.fx-pc .fx-pl-ic:hover svg { stroke: #a8761a; }
body.fx-pc .fx-pl-ic:hover svg text { fill: #a8761a; }
body.fx-pc .fx-pl-fav svg { width: 29px; height: 29px; }
body.fx-pc .fx-pl-fav.on svg { fill: #E0B02D; stroke: #E0B02D; }
html body.fx-pc .fx-pl-speed:not(#fx) { min-width: 64px; height: 36px; padding: 0 14px; margin: 0; border-radius: 18px; border: 1.5px solid #2e4a66; background: #fff; color: #2e4a66; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; }
body.fx-pc .fx-pl-speed:hover { border-color: #E0B02D; background: #E0B02D; color: #fff; }
body.fx-pc .fx-pl-vol { display: flex; align-items: center; gap: 8px; }
body.fx-pc .fx-pl-vol svg { width: 20px; height: 20px; fill: none; stroke: #2e4a66; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body.fx-pc .fx-pl-vslider:not(#fx) { --v: 70%; -webkit-appearance: none; appearance: none; width: 110px; height: 6px; margin: 0; padding: 0; border-radius: 3px; background: linear-gradient(to right, #2e4a66 var(--v), #c9d3e6 var(--v)); outline: none; cursor: pointer; }
body.fx-pc .fx-pl-vslider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #2e4a66; border: 2px solid #fff; box-shadow: 0 0 0 1px #2e4a66; }
body.fx-pc .fx-pl-vslider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #2e4a66; border: 2px solid #fff; }
/* "Picks up where you left off" */
body.fx-pc .fx-pl-resume { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f7; font-size: 13px; color: #5b6b7e; }
body.fx-pc .fx-pl-resume[hidden] { display: none; }
body.fx-pc .fx-pl-resume svg { flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: #5b6b7e; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- description card ---------- */
html body.fx-pc .fx-pc-author:not(#fx), html body.fx-pc .fx-pc-author *:not(#fx) { color: #2e4a66 !important; font-weight: 500 !important; font-size: 16px !important; letter-spacing: .02em !important; line-height: 1.4 !important; text-align: left !important; }
body.fx-pc .fx-about-h { position: relative; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 24px; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: #1f3550; margin: 0 0 34px; padding: 0 0 18px; line-height: 1.25; }
body.fx-pc .fx-about-h::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 64px; height: 2px; margin-left: -32px; background: #E0B02D; }

/* ---------- Metaphysics Chart ---------- */
body.fx-pc .fx-pc-chartsec { margin: 32px 0 0; font-family: 'Open Sans', sans-serif; }
body.fx-pc .fx-pc-chartsec .fx-pc-head { margin-top: 0; }
body.fx-pc .fx-pc-chartcard { background: #fff; border: 1px solid #dfe4f2; border-radius: 14px; box-shadow: 0 2px 14px rgba(46, 74, 102, .08); overflow: hidden; }
body.fx-pc .fx-pc-frame { position: relative; padding: 18px; }
html body.fx-pc .fx-pc-chartimg:not(#fx) { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body.fx-pc .fx-pc-chartimg .tve_image_frame:not(#fx) { display: block !important; width: 100% !important; margin: 0 !important; }
html body.fx-pc .fx-pc-chartimg img:not(#fx) { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; border: 2px solid #b8bfcc; border-radius: 10px; box-sizing: border-box; background: #fff; }
html body.fx-pc .fx-pc-zoom:not(#fx) { position: absolute; z-index: 3; right: 30px; bottom: 30px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; margin: 0; border: 0; border-radius: 999px; background: rgba(13, 27, 62, .82); color: #fff; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; }
html body.fx-pc .fx-pc-zoom:hover:not(#fx), html body.fx-pc .fx-pc-zoom:focus-visible:not(#fx), html body.fx-pc .fx-pc-zoom2:hover:not(#fx), html body.fx-pc .fx-pc-zoom2:focus-visible:not(#fx) { background: #E0B02D; color: #fff; outline: none; }
/* phones: the pill sits under the picture (not on top of it, the picture is small there) */
html body.fx-pc .fx-pc-zoom2:not(#fx) { display: none; align-items: center; gap: 8px; height: 40px; padding: 0 14px; margin: 0; border: 0; border-radius: 999px; background: #0d1b3e; color: #fff; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; }
body.fx-pc .fx-pc-zoom2 svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pc .fx-pc-nopdf .fx-pc-foot { display: none; }
body.fx-pc .fx-pc-zoom svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pc .fx-pc-foot { display: flex; align-items: center; justify-content: flex-end; padding: 0 18px 14px; }
html body.fx-pc .fx-pc-open:not(#fx) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #2e4a66; font-size: 14px; font-weight: 600; text-decoration: none; }
html body.fx-pc .fx-pc-open:hover:not(#fx) { color: #a8761a; text-decoration: underline; text-underline-offset: 3px; }
body.fx-pc .fx-pc-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* full-screen chart viewer */
html.fx-pc-lock { overflow: hidden; }
body.fx-pc .fx-pc-lb { position: fixed; inset: 0; z-index: 2147483000; background: rgba(13, 27, 62, .94); display: flex; flex-direction: column; font-family: 'Open Sans', sans-serif; }
body.fx-pc .fx-pc-lbbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; color: #fff; }
body.fx-pc .fx-pc-lbt { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fx-pc .fx-pc-lbtools { display: flex; align-items: center; gap: 8px; flex: none; }
body.fx-pc .fx-pc-lbz { min-width: 44px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
html body.fx-pc .fx-pc-lb button:not(#fx) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; margin: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; }
html body.fx-pc .fx-pc-lb button:hover:not(#fx):not(:disabled), html body.fx-pc .fx-pc-lb button:focus-visible:not(#fx) { background: #E0B02D; outline: none; }
html body.fx-pc .fx-pc-lb button:disabled:not(#fx) { opacity: .4; cursor: default; }
body.fx-pc .fx-pc-lb button svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pc .fx-pc-lbscroll { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; padding: 0 8px 16px; text-align: center; }
html body.fx-pc .fx-pc-lbscroll img:not(#fx) { display: inline-block; max-width: none !important; height: auto !important; background: #fff; border-radius: 6px; margin: 0 auto; vertical-align: top; }

/* ---------- tablet ---------- */
@media (max-width: 940px) {
  body.fx-pc .fx-pc-in { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 36px 24px 44px; }
  body.fx-pc .fx-pc-left { display: block; width: 100%; flex: none; }
  html body.fx-pc h1.fx-pc-title:not(#fx) { font-size: 40px !important; }
  html body.fx-pc h1.fx-pc-title.fx-t2:not(#fx) { font-size: 34px !important; }
  html body.fx-pc h1.fx-pc-title.fx-t3:not(#fx) { font-size: 29px !important; }
  html body.fx-pc h1.fx-pc-title.fx-t4:not(#fx) { font-size: 25px !important; }
  body.fx-pc .fx-pc-by { margin-bottom: 26px; }
  html body.fx-pc .fx-pc-chips:not(#fx) { width: auto; margin: 0; justify-content: flex-start; }
  body.fx-pc .fx-pc-head { margin-top: 32px; }
  body.fx-pc .fx-pc-chartsec .fx-pc-head { margin-top: 0; }
  body.fx-pc .fx-player { padding: 14px 18px 10px; }
}
/* ---------- phone ---------- */
@media (max-width: 700px) {
  body.fx-pc .fx-pc-in { padding: 28px 16px 36px; }
  body.fx-pc .fx-pc-by { margin-bottom: 24px; }
  html body.fx-pc .fx-pc-chips:not(#fx) { gap: 8px; }
  html body.fx-pc .fx-pc-chips .fx-chip:not(#fx) { padding: 0 16px !important; font-size: 14px; }
  html body.fx-pc h1.fx-pc-title:not(#fx) { font-size: 32px !important; }
  html body.fx-pc h1.fx-pc-title.fx-t2:not(#fx) { font-size: 28px !important; }
  html body.fx-pc h1.fx-pc-title.fx-t3:not(#fx) { font-size: 25px !important; }
  html body.fx-pc h1.fx-pc-title.fx-t4:not(#fx) { font-size: 22px !important; }
  body.fx-pc .fx-pc-h2 { font-size: 22px; }
  body.fx-pc .fx-player { padding: 14px 14px 8px; }
  body.fx-pc .fx-pl-main { gap: 12px; }
  body.fx-pc .fx-pl-top { gap: 2px 10px; }
  body.fx-pc .fx-pl-track { order: 3; flex: 1 1 100%; }
  body.fx-pc .fx-pl-ctl { gap: 4px; flex-wrap: nowrap; }
  body.fx-pc .fx-pl-vol { display: none; } /* phones have their own volume buttons */
  body.fx-pc .fx-pc-frame { padding: 10px; }
  html body.fx-pc .fx-pc-zoom:not(#fx) { display: none; }
  html body.fx-pc .fx-pc-zoom2:not(#fx) { display: inline-flex; }
  body.fx-pc .fx-pc-foot, body.fx-pc .fx-pc-nopdf .fx-pc-foot { display: flex; justify-content: space-between; padding: 0 10px 10px; }
}
/* ---------- playlist pages (Seminars): "Select a Session to Listen" = the original Sonaar rows, restyled (same as the Audio track list; accent = slate) ---------- */
html body.fx-pc .fx-pc-art:not(#fx) { margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; }
body.fx-pc .fx-pc-trk { font-family: 'Open Sans', sans-serif; color: #2e4a66; }
html body.fx-pc .fx-pc-trk .fx-pc-head:not(#fx) { margin-top: 32px; }
html body.fx-pc .fx-pc-trk ul.srp_list:not(#fx) { margin: 0 !important; padding: 0 !important; }
html body.fx-pc .fx-pc-trk .playlist:not(#fx) { background: #fff !important; border: 1px solid #dfe4f2; border-radius: 14px; box-shadow: 0 2px 14px rgba(46, 74, 102, .08); padding: 8px 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box; }
html body.fx-pc .fx-pc-trk .sr-playlist-item:not(#fx) { margin: 2px 10px !important; padding: 5px 20px 5px 14px !important; min-height: 46px; box-sizing: border-box; border-radius: 8px; border-left: 4px solid transparent; font-family: 'Open Sans', sans-serif; background: transparent !important; }
html body.fx-pc .fx-pc-trk .sr-playlist-item:hover:not(#fx) { background: #f1f4f7 !important; }
html body.fx-pc .fx-pc-trk .sr-playlist-item.current:not(#fx), html body.fx-pc .fx-pc-trk .sr-playlist-item.fx-rest:not(#fx) { background: #e8edf1 !important; border-left-color: #5a6b7d; }
html body.fx-pc .fx-pc-trk .sr-playlist-item.fx-rest:not(#fx) .tracklist-item-title { font-weight: 700 !important; }
html body.fx-pc .fx-pc-trk .sr-playlist-item.current:not(#fx) .tracklist-item-title { font-weight: 700 !important; }
html body.fx-pc .fx-pc-trk .srp_list:not(#fx), html body.fx-pc .fx-pc-trk .srp_tracklist:not(#fx), html body.fx-pc .fx-pc-trk .playlist:not(#fx) { height: auto !important; max-height: none !important; overflow: visible !important; }
html body.fx-pc .fx-pc-trk .ps__rail-y:not(#fx), html body.fx-pc .fx-pc-trk .ps__rail-x:not(#fx) { display: none !important; }
html body.fx-pc .fx-pc-trk .tracklist-item-title:not(#fx), html body.fx-pc .fx-pc-trk .tracklist-item-title *:not(#fx) { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 500 !important; color: #2e4a66 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
html body.fx-pc .fx-pc-trk .sr-playlist-item.current:not(#fx) .tracklist-item-title { font-weight: 700 !important; }
html body.fx-pc .fx-pc-trk .tracklist-item-time:not(#fx) { font-size: 12px !important; color: #5d7289 !important; }
html body.fx-pc .fx-pc-trk .srp-fav-bt:not(#fx) { font-size: 23px !important; }
body.fx-pc .fx-pc-trk .srp-fav-bt i { font-size: 23px; }
@media (max-width: 940px) { html body.fx-pc .fx-pc-trk .fx-pc-head:not(#fx) { margin-top: 32px; } }

/* ---------- Weekly Classes keep the card in the hero (it carries the week, chapter and date): stacked like the other protected pages, card centred, buttons below ---------- */
@media (max-width: 940px) {
  body.fx-pc .fx-pc-card .fx-pc-left { display: contents; }
  body.fx-pc .fx-pc-card .fx-pc-crumb, html body.fx-pc .fx-pc-card h1.fx-pc-title:not(#fx), body.fx-pc .fx-pc-card .fx-pc-meta, body.fx-pc .fx-pc-card .fx-pc-by { order: 1; }
  body.fx-pc .fx-pc-card .fx-pc-by { margin-bottom: 36px; }
  body.fx-pc .fx-pc-card .fx-pc-cover { order: 2; flex: 0 0 auto; width: 380px; max-width: 100%; margin: 0 auto; }
  html body.fx-pc .fx-pc-card .fx-pc-chips:not(#fx) { order: 3; width: 100%; margin: 36px auto 0; justify-content: center; }
}
@media (max-width: 700px) {
  body.fx-pc .fx-pc-card .fx-pc-cover { width: 358px; }
  body.fx-pc .fx-pc-card .fx-pc-by { margin-bottom: 28px; }
  html body.fx-pc .fx-pc-card .fx-pc-chips:not(#fx) { margin-top: 28px; }
}
/* ===== END 2026 - Protected Podcast CSS ===== */

/* ===== SOURCE #91117 2026 - Protected Staff Class ===== */
/* ===== 2026 - Protected Staff Class CSS (front end, whole site) =====
   Extra rules for the STAFF TAUGHT CLASS protected pages (-scp). Needs "2026 - Protected Video CSS" and "2026 - Protected Video JS" (the JS adds body class fx-sc).
   Green hero (#17695c) with NO cover picture: the height follows the text; the text column is 596px wide on desktop (same width as the Video page text column).
   Accent colour for the playing card / chart card: teal #0f7a6d (tint #e3f2ef). Paste this as its OWN snippet, after the Video CSS. */

/* ---------- hero ---------- */
html body.fx-sc .fx-vh.fx-vh-staff:not(#fx) { background: #17695c; }
html body.fx-sc .fx-vh-staff .fx-vh-in:not(#fx) { padding: 56px 24px 56px; }
html body.fx-sc .fx-vh-staff .fx-vh-left:not(#fx) { flex: 0 1 596px; width: 596px; max-width: 100%; min-height: 0; }
html body.fx-sc .fx-vh-staff .fx-vh-crumb, html body.fx-sc .fx-vh-staff .fx-vh-crumb a:not(#fx) { color: #cfe8e2; }
html body.fx-sc .fx-vh-staff .fx-vh-crumb a:not(#fx) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
html body.fx-sc .fx-vh-staff .fx-vh-dur:not(#fx) { font-size: 16px; line-height: 24px; color: #e3f1ee; }
html body.fx-sc .fx-vh-staff .fx-vh-meta:not(#fx) { margin: 0 0 26px; }
html body.fx-sc .fx-vh-by:not(#fx) { font-size: 17px; line-height: 1.6; color: #fff; margin: 0 0 30px; }
html body.fx-sc .fx-vh-staff .fx-vh-chips .fx-chip:not(#fx) { height: 46px !important; padding: 0 26px !important; border-radius: 999px; color: #17695c; font-size: 17px; }
html body.fx-sc .fx-vh-staff .fx-vh-chips .fx-chip:not(#fx) svg, html body.fx-sc .fx-vh-staff .fx-vh-chips .fx-chip:not(#fx) svg * { fill: #17695c !important; }
html body.fx-sc .fx-vh-staff .fx-vh-chips .fx-chip:hover:not(#fx) svg, html body.fx-sc .fx-vh-staff .fx-vh-chips .fx-chip:hover:not(#fx) svg * { fill: #fff !important; }
@media (max-width: 940px) {
  html body.fx-sc .fx-vh-staff .fx-vh-in:not(#fx) { padding: 36px 24px 44px; display: block; }
  html body.fx-sc .fx-vh-staff .fx-vh-left:not(#fx) { display: block; width: 100%; flex: none; }
  html body.fx-sc .fx-vh-staff .fx-vh-chips:not(#fx) { width: auto; max-width: none; margin: 0; justify-content: flex-start; }
  html body.fx-sc .fx-vh-staff .fx-vh-meta:not(#fx) { margin-bottom: 26px; }
}
@media (max-width: 700px) {
  html body.fx-sc .fx-vh-staff .fx-vh-in:not(#fx) { padding: 28px 16px 36px; }
}

/* ---------- heading above the player: no cover to sit beside ---------- */
@media (min-width: 941px) { html body.fx-sc .fx-vp-head:not(#fx) { min-height: 0; max-width: none; display: block; margin: 40px 0 14px; } }
@media (max-width: 940px) { html body.fx-sc .fx-vp-head:not(#fx) { margin-top: 32px; } }
@media (max-width: 340px) { html body.fx-sc .fx-vn-h .fx-st:not(#fx) { display: none; } } /* only if it would wrap: "Staff Class" */

/* ---------- Select a Video: Staff Class accent = the green of the Streaming Access "Staff Class" button (#0f7a6d, tint #e3f2ef).
   Extra :not(#fy) so these win over the purple Video rules whatever order the snippets load in ---------- */
html body.fx-sc .fx-vn-card:hover:not(#fx):not(#fy) { border-color: #0f7a6d; }
html body.fx-sc .fx-vn-card.on:not(#fx):not(#fy) { border-color: #0f7a6d; background: #e3f2ef; }
html body.fx-sc .fx-vn-card.on:not(#fx):not(#fy)::after { color: #0f7a6d; }
html body.fx-sc .fx-vn-card.on .fx-vn-pill:not(#fx):not(#fy) { background: #0f7a6d; }
html body.fx-sc .fx-vn-chart .fx-vn-thumb:not(#fx):not(#fy) { background: #e3f2ef; color: #0f7a6d; display: flex; align-items: center; justify-content: center; }
html body.fx-sc .fx-vn-ci:not(#fx) { display: flex; }
html body.fx-sc .fx-vn-ci svg { width: 30px; height: 30px; fill: none; stroke: #0f7a6d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body.fx-sc .fx-vn-chart:not(#fx):not(#fy)::after { content: 'View Chart'; }
html body.fx-sc .fx-vn-chart.on:not(#fx):not(#fy)::after { content: 'NOW VIEWING'; }

/* ---------- the chart picture (when the Chart card is selected): same frame as the video player, full column width, no white box around it ---------- */
html body.fx-sc .vt-player-chart:not(#fx) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
html body.fx-sc .vt-player-chart img:not(#fx) { display: block; width: 100% !important; max-width: 100% !important; height: auto; margin: 0 !important; border: 2px solid #b8bfcc; border-radius: 10px; background: #fff; box-sizing: border-box; box-shadow: 0 2px 14px rgba(46, 74, 102, .1); }
/* ===== END 2026 - Protected Staff Class CSS ===== */

/* ===== SOURCE #91087 2026 - Protected Video Controls ===== */
/* ===== 2026 - Protected Video Controls CSS (whole site, front end) =====
   v2 (2026-10-22): removed the gold "player's own controls" button and the "Back to FACIM controls" tag; the TV panel is short.
   Desktop with a mouse only: our own control bar over the video that appears when the mouse is over the video (the player's own bar is switched off).
   Tablet and phone keep the normal touch controls (Cast on Android, AirPlay on Apple). */
html body.fx-pv .fx-vc:not(#fx) { position: absolute; inset: 0; z-index: 5; cursor: pointer; font-family: 'Open Sans', sans-serif; -webkit-tap-highlight-color: transparent; user-select: none; }
html body.fx-pv .fx-vc:focus-visible:not(#fx) { outline: 3px solid rgba(224, 176, 45, .75); outline-offset: -3px; }
html body.fx-pv .fx-vc.is-idle:not(#fx) { cursor: none; }
html body.fx-pv .fx-vc-big:not(#fx) { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding: 0; border: 0; border-radius: 50%; background: rgba(13, 27, 62, .78); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, opacity .25s, transform .2s; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
html body.fx-pv .fx-vc-big svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
html body.fx-pv .fx-vc:hover .fx-vc-big:not(#fx) { background: #E0B02D; transform: scale(1.04); }
html body.fx-pv .fx-vc.is-playing .fx-vc-big:not(#fx) { opacity: 0; pointer-events: none; }
html body.fx-pv .fx-vc-bar:not(#fx) { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 38px 16px 12px; background: linear-gradient(to top, rgba(13, 27, 62, .88), rgba(13, 27, 62, 0)); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; cursor: default; box-sizing: border-box; }
html body.fx-pv .fx-vb:hover .fx-vc:not(.is-idle) .fx-vc-bar:not(#fx), html body.fx-pv .fx-vc.is-kbd:not(.is-idle) .fx-vc-bar:not(#fx), html body.fx-pv .fx-vc-bar.is-drag:not(#fx) { opacity: 1; transform: none; }
html body.fx-pv .fx-vc-bar button:not(#fx) { flex: 0 0 auto; width: 36px; height: 36px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, color .2s; font: 600 13px/1 'Open Sans', sans-serif; box-shadow: none; }
html body.fx-pv .fx-vc-bar button:not(#fx):hover, html body.fx-pv .fx-vc-bar button:not(#fx):focus-visible { background: #E0B02D; color: #fff; outline: none; }
html body.fx-pv .fx-vc-bar button.fx-vc-speed:not(#fx) { width: auto; min-width: 44px; padding: 0 8px; }
html body.fx-pv .fx-vc-bar button.is-on:not(#fx) { background: rgba(255, 255, 255, .25); }
html body.fx-pv .fx-vc-bar svg { width: 20px; height: 20px; fill: #fff; display: block; }
html body.fx-pv .fx-vc-bar .fx-vc-pl .fx-i-pause { display: none; }
html body.fx-pv .fx-vc.is-playing .fx-vc-bar .fx-vc-pl .fx-i-play { display: none; }
html body.fx-pv .fx-vc.is-playing .fx-vc-bar .fx-vc-pl .fx-i-pause { display: block; }
html body.fx-pv .fx-vc-bar .fx-vc-mute .fx-i-off { display: none; }
html body.fx-pv .fx-vc-bar .fx-vc-mute.is-muted .fx-i-off { display: block; }
html body.fx-pv .fx-vc-bar .fx-vc-mute.is-muted .fx-i-on { display: none; }
html body.fx-pv .fx-vc-time { flex: 0 0 auto; min-width: 44px; color: #fff; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; }
html body.fx-pv .fx-vc-bar input[type=range]:not(#fx) { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; height: 22px; background: transparent; cursor: pointer; border: 0; box-shadow: none; }
html body.fx-pv .fx-vc-bar input.fx-vc-seek:not(#fx) { flex: 1 1 auto; min-width: 0; }
html body.fx-pv .fx-vc-bar input.fx-vc-vol:not(#fx) { flex: 0 0 72px; width: 72px; }
html body.fx-pv .fx-vc-bar input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #E0B02D 0, #E0B02D var(--p, 0%), rgba(255, 255, 255, .35) var(--p, 0%), rgba(255, 255, 255, .35) 100%); }
html body.fx-pv .fx-vc-bar input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
html body.fx-pv .fx-vc-bar input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: #E0B02D; }
html body.fx-pv .fx-vc-bar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
html body.fx-pv .fx-vc-bar input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
html body.fx-pv .fx-vc-bar input[type=range]:hover::-webkit-slider-thumb, html body.fx-pv .fx-vc-bar input[type=range]:focus-visible::-webkit-slider-thumb { background: #E0B02D; }
html body.fx-pv .fx-vc-bar .fx-vc-cc:not(#fx)[hidden] { display: none; }
html body.fx-pv .fx-vc-pop:not(#fx) { position: absolute; right: 12px; bottom: 58px; width: 270px; max-width: calc(100% - 24px); padding: 14px 16px; border-radius: 12px; background: #0d1b3e; color: #fff; font: 400 13px/1.45 'Open Sans', sans-serif; box-shadow: 0 8px 28px rgba(0,0,0,.45); cursor: default; z-index: 6; }
html body.fx-pv .fx-vc-pop[hidden]:not(#fx) { display: none; }
html body.fx-pv .fx-vc-pop p:not(#fx) { margin: 0 0 8px !important; padding: 0 !important; font-size: 13px !important; line-height: 1.45 !important; font-weight: 400 !important; color: #fff !important; }
html body.fx-pv .fx-vc-pop p.fx-vc-pop-h:not(#fx) { font-weight: 700 !important; font-size: 14px !important; color: #E0B02D !important; }
html body.fx-pv .fx-vc-pop a:not(#fx) { color: #E0B02D !important; text-decoration: underline !important; font-weight: 600 !important; font-size: 13px !important; }
/* full screen: the frame fills the screen, the picture keeps its shape */
html body.fx-pv .fx-vb:fullscreen { width: 100vw; height: 100vh; max-width: none; border-radius: 0; border: 0; background: #000; aspect-ratio: auto; }
html body.fx-pv .fx-vb:fullscreen iframe { width: 100%; height: 100%; }
/* ===== END 2026 - Protected Video Controls CSS ===== */

/* ===== SOURCE #91058 2026 - Protected Video ===== */
/* ===== 2026 - Protected Video CSS (front end, whole site; every rule needs the page to be a protected Video page built by "2026 - Protected Video JS") =====
   Look = approved mockup "Video protected pages, version 2" (desktop 1280 / tablet 820 / phone 390).
   Tokens: navy #2e4a66 (hero, same as the Video sales page), deep navy #0d1b3e, gold #E0B02D, dark gold #a8761a, line #dfe4f2, gray frame #b8bfcc, Video accent #7a3fa0 / tint #f1e9f8. */

/* ---------- no flash of the old page: hidden until the JS has built the new layout (class fx-pv-done); CSS also shows it itself after 5 s ---------- */
html.fx-vsp:not(.fx-pv-done) body.ppp-protected #tve_editor:not(#fx) { opacity: 0; animation: fxPvShow .01s 5s forwards; }
html.fx-vsp.fx-pv-done body.ppp-protected #tve_editor:not(#fx) { transition: opacity .25s ease; }
@keyframes fxPvShow { to { opacity: 1; } }

/* ---------- old pieces that the hero replaces (kept in the page, only hidden) ---------- */
html body.fx-pv .fx-vh-old:not(#fx) { display: none !important; }
/* no gap between the menu bar and the navy hero (theme adds 10 + 25 + 20px above the page content) */
html body.fx-pv .main-container.thrv_wrapper:not(#fx) { padding-top: 0 !important; }
html body.fx-pv #theme-content-section:not(#fx) { margin-top: 0 !important; }
html body.fx-pv #theme-content-section .section-content:not(#fx) { padding-top: 0 !important; }
html body.fx-pv { overflow-x: clip; }

/* ---------- hero band: every size below is MEASURED on the Video sales page (Macbeth, 2026-10-15) at 1280 / 820 / 390 ---------- */
body.fx-pv .fx-vh { background: #2e4a66; color: #fff; width: 100vw; margin-left: calc(50% - 50vw); position: relative; z-index: 1; font-family: 'Open Sans', sans-serif; }
/* desktop: padding 56 24 0, gap 56, items start at the top; the left block is 437 tall so the hero is 493 tall and the cover (613) hangs 176 below it */
body.fx-pv .fx-vh-in { max-width: 1080px; margin: 0 auto; padding: 56px 24px 0; display: flex; gap: 56px; align-items: flex-start; box-sizing: border-box; }
body.fx-pv .fx-vh-left { flex: 1 1 0; min-width: 0; min-height: 437px; }
body.fx-pv .fx-vh-cover { flex: 0 0 380px; width: 380px; max-width: 100%; position: relative; z-index: 3; margin: 0 0 -176px; background: #fff; border: 1px solid #dfe4f2; border-radius: 12px; box-shadow: 0 18px 40px rgba(20, 35, 55, .3); padding: 12px 12px 14px; box-sizing: border-box; overflow: hidden; }
html body.fx-pv .fx-vh-cover .thrv_custom_html_shortcode:not(#fx), html body.fx-pv .fx-vh-cover .n2-section-smartslider:not(#fx) { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.fx-pv .fx-vh-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 19.5px; font-weight: 400; color: #c9d6ea; margin: 0 0 28px; }
body.fx-pv .fx-vh-crumb a { color: #c9d6ea; text-decoration: none; }
body.fx-pv .fx-vh-crumb a:hover { text-decoration: underline; text-decoration-color: #E0B02D; text-underline-offset: 3px; }
body.fx-pv .fx-vh-crumb span { margin: 0; }
html body.fx-pv h1.fx-vh-title:not(#fx) { font-family: 'Playfair Display', serif !important; font-weight: 400 !important; font-size: 46px !important; line-height: 1.18 !important; color: #fff !important; margin: 0 0 18px !important; padding: 0 !important; text-transform: none !important; letter-spacing: normal !important; text-align: left !important; }
html body.fx-pv h1.fx-vh-title:not(#fx) em { font-style: italic !important; }
/* title size by length, same tiers as the sales pages (fx-t1 up to 38 characters, t2 to 60, t3 to 85, t4 longer) */
html body.fx-pv h1.fx-vh-title.fx-t2:not(#fx) { font-size: 38px !important; }
html body.fx-pv h1.fx-vh-title.fx-t3:not(#fx) { font-size: 32px !important; }
html body.fx-pv h1.fx-vh-title.fx-t4:not(#fx) { font-size: 27px !important; line-height: 1.22 !important; }
body.fx-pv .fx-vh-meta { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 26px; }
body.fx-pv .fx-vh-badge { display: block; background: #E0B02D; color: #fff; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .72px; text-transform: uppercase; padding: 4px 12px; border-radius: 4px; }
body.fx-pv .fx-vh-tag { display: block; border: 1.5px solid rgba(255, 255, 255, .75); color: #fff; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .72px; text-transform: uppercase; padding: 2.5px 12px; border-radius: 4px; }
body.fx-pv .fx-vh-dur { font-size: 14px; line-height: 21px; font-weight: 400; color: #dfe6f1; }
body.fx-pv .fx-vh-dur:empty { display: none; }
body.fx-pv .fx-vh-chips { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }

/* the Help button = the Thrive lightbox icon, same element (it still opens its lightbox) */
html body.fx-pv .fx-vh-chips .fx-chip:not(#fx) { display: flex !important; align-items: center; gap: 8px; width: auto !important; height: 44px !important; margin: 0 !important; padding: 0 18px !important; background: #fff !important; border-radius: 22px; color: #2e4a66; font-size: 14px; font-weight: 500; cursor: pointer; box-sizing: border-box; float: none !important; }
html body.fx-pv .fx-vh-chips .fx-chip:not(#fx) > * { margin: 0 !important; }
html body.fx-pv .fx-vh-chips .fx-chip:not(#fx) svg { width: 18px !important; height: 18px !important; fill: #2e4a66 !important; stroke: none !important; }
html body.fx-pv .fx-vh-chips .fx-chip:not(#fx) svg * { fill: #2e4a66 !important; stroke: none !important; }
body.fx-pv .fx-chip-help::after { content: "Help"; }
html body.fx-pv .fx-vh-chips a.fx-chip-cast:not(#fx), html body.fx-pv .fx-vh-chips a.fx-chip-cast:not(#fx):visited { text-decoration: none !important; color: #2e4a66 !important; line-height: 1; }
html body.fx-pv .fx-vh-chips a.fx-chip-cast:hover:not(#fx), html body.fx-pv .fx-vh-chips a.fx-chip-cast:focus-visible:not(#fx) { color: #fff !important; }
html body.fx-pv .fx-vh-chips .fx-chip:hover:not(#fx), html body.fx-pv .fx-vh-chips .fx-chip:focus-visible:not(#fx) { background: #E0B02D !important; color: #fff !important; }
html body.fx-pv .fx-vh-chips .fx-chip:hover:not(#fx) svg, html body.fx-pv .fx-vh-chips .fx-chip:hover:not(#fx) svg * { fill: #fff !important; }

/* ---------- title above the player + Select a Video: same header style as "Select a Disc to Listen" (Audio) ---------- */
body.fx-pv .fx-vn-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-family: 'Open Sans', sans-serif; color: #2e4a66; }
body.fx-pv .fx-vn-ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #2e4a66; display: flex; align-items: center; justify-content: center; }
body.fx-pv .fx-vn-ic svg { width: 22px; height: 22px; fill: none; stroke: #E0B02D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pv .fx-vn-ic svg path { fill: #E0B02D; stroke: none; }
body.fx-pv .fx-vn-h { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 26px; line-height: 1.2; color: #1f3550; }
body.fx-pv .fx-vn-sub { font-size: 14px; color: #5d7289; margin-top: 3px; }
body.fx-pv .fx-vp-head { margin: 0 0 14px; }
body.fx-pv .fx-vp-head .fx-vn-head { margin: 0; }
/* desktop: the title sits LEFT of the hanging cover, bottom-aligned, so the player starts below the cover */
@media (min-width: 941px) {
  body.fx-pv .fx-vp-head { min-height: 190px; max-width: calc(100% - 396px); display: flex; align-items: flex-end; margin-bottom: 14px; }
}

/* ---------- player (the Vimeo player stays; it only gets the gray rounded frame, full column width) ---------- */
html body.fx-pv .thrv_custom_html_shortcode.fx-vplay:not(#fx) { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
html body.fx-pv .fx-vplay .vt-wrap:not(#fx) { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
html body.fx-pv .fx-vplay .fx-vframe:not(#fx) { border: 2px solid #b8bfcc !important; border-radius: 10px !important; overflow: hidden !important; background: #000; box-sizing: border-box !important; box-shadow: 0 2px 14px rgba(46, 74, 102, .1); }
html body.fx-pv .fx-vplay .fx-vframe iframe:not(#fx) { border-radius: 0 !important; }

/* ---------- STANDARD video (-vsp, 4:3): not full width; centred 720 (desktop), 600 (tablet), full width on phone ---------- */
html body.fx-pv.fx-std .thrv_custom_html_shortcode.fx-vplay:not(#fx) { width: 100% !important; max-width: 720px !important; margin: 0 auto !important; }
@media (max-width: 940px) { html body.fx-pv.fx-std .thrv_custom_html_shortcode.fx-vplay:not(#fx) { max-width: 600px !important; } }
@media (max-width: 700px) { html body.fx-pv.fx-std .thrv_custom_html_shortcode.fx-vplay:not(#fx) { max-width: none !important; } }

/* ---------- cover thumbnails: every thumbnail gets the same gray rounded frame (the white page scans had no visible edge); the active one stays gold ---------- */
html body.fx-pv .fx-vh-cover .n2-thumbnail-dot:not(#fx) { border: 2px solid #b8bfcc !important; border-radius: 8px !important; overflow: hidden !important; box-sizing: border-box !important; }
html body.fx-pv .fx-vh-cover .n2-thumbnail-dot.n2-active:not(#fx) { border-color: #E0B02D !important; }
html body.fx-pv .fx-vh-cover .n2-thumbnail-dot img:not(#fx) { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* ---------- Select a Video = a small photo strip (scrolls sideways with arrows when it does not fit) ---------- */
body.fx-pv .fx-vn { margin: 32px 0 0; font-family: 'Open Sans', sans-serif; color: #2e4a66; }
body.fx-pv .fx-vn-wrap { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #dfe4f2; border-radius: 14px; box-shadow: 0 2px 14px rgba(46, 74, 102, .08); padding: 12px; box-sizing: border-box; }
body.fx-pv .fx-vn-track { display: flex; justify-content: safe center; gap: 10px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 3px 2px; }
body.fx-pv .fx-vn-track::-webkit-scrollbar { display: none; }
html body.fx-pv .fx-vn-card:not(#fx) { flex: 0 0 168px; width: 168px; min-width: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; background: transparent; border: 0; box-shadow: none; font-family: 'Open Sans', sans-serif; color: #2e4a66; box-sizing: border-box; scroll-snap-align: start; }
body.fx-pv .fx-vn-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 2px solid #b8bfcc; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #1f3550, #2e4a66); box-sizing: border-box; transition: border-color .2s, box-shadow .2s; }
html body.fx-pv .fx-vn-card:hover:not(#fx) .fx-vn-thumb { border-color: #7a3fa0; }
html body.fx-pv .fx-vn-card.on:not(#fx) .fx-vn-thumb { border-color: #7a3fa0; box-shadow: 0 0 0 2px #7a3fa0; }
body.fx-pv .fx-vn-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.fx-pv .fx-vn-thumb img[hidden] { display: none; }
body.fx-pv .fx-vn-play { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(13, 27, 62, .72); display: flex; align-items: center; justify-content: center; }
body.fx-pv .fx-vn-play svg { width: 12px; height: 12px; fill: #fff; margin-left: 2px; }
/* the "VIDEO 1" pill: gold, white bold text, top-left; purple on the video that is playing */
body.fx-pv .fx-vn-pill { position: absolute; left: 6px; top: 6px; background: #E0B02D; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1; padding: 5px 8px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
body.fx-pv .fx-vn-card.on .fx-vn-pill { background: #7a3fa0; }
body.fx-pv .fx-vn-len { position: absolute; right: 6px; bottom: 6px; background: rgba(13, 27, 62, .82); color: #fff; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
body.fx-pv .fx-vn-len[hidden] { display: none; }
body.fx-pv .fx-vn-name { display: none !important; } /* no caption under the photos: the VIDEO n tag on the photo is enough */
body.fx-pv .fx-vn-name-old { display: flex; align-items: baseline; min-width: 0; font-size: 12px; font-weight: 500; line-height: 1.3; color: #2e4a66; }
body.fx-pv .fx-vn-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fx-pv .fx-vn-ser { flex: 0 0 auto; white-space: nowrap; }
body.fx-pv .fx-vn-ser i { font-style: normal; font-size: .67em; vertical-align: .15em; margin: 0 .4em; }
body.fx-pv .fx-vn-card.on .fx-vn-name { font-weight: 700; color: #7a3fa0; }
html body.fx-pv .fx-vn-ar:not(#fx) { display: none; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #2e4a66; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; }
body.fx-pv .fx-vn-ovf .fx-vn-ar { display: flex !important; }
body.fx-pv .fx-vn-ar:disabled { opacity: .35; cursor: default; }
body.fx-pv .fx-vn-ar svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pv .fx-vn-count { margin: 10px 0 0; text-align: center; font-size: 13px; color: #5d7289; }
body.fx-pv .fx-vn-count:empty { display: none; }

/* ---------- About this Video heading ---------- */
html body.fx-pv .fx-pv-author:not(#fx), html body.fx-pv .fx-pv-author *:not(#fx) { color: #2e4a66 !important; font-weight: 500 !important; font-size: 16px !important; letter-spacing: .02em !important; line-height: 1.4 !important; text-align: left !important; }
body.fx-pv .fx-about-h { position: relative; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 24px; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: #1f3550; margin: 0 0 34px; padding: 0 0 18px; line-height: 1.25; }
body.fx-pv .fx-about-h::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 64px; height: 2px; margin-left: -32px; background: #E0B02D; }

/* ---------- tablet and phone: stacked exactly like the sales page (padding 36 24 48 / 28 16 40, gap 36 / 28, title 29 / 25, cover centred 380 / 358).
   Our Help button sits BELOW the cover. The JS also lines the breadcrumb up with the menu (same distance below it as on the sales page). ---------- */
@media (max-width: 940px) {
  body.fx-pv .fx-vh-in { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 36px 24px 48px; }
  body.fx-pv .fx-vh-left { display: contents; min-height: 0; }
  body.fx-pv .fx-vh-crumb, html body.fx-pv h1.fx-vh-title:not(#fx), body.fx-pv .fx-vh-meta { order: 1; }
  html body.fx-pv h1.fx-vh-title:not(#fx) { font-size: 40px !important; }
  html body.fx-pv h1.fx-vh-title.fx-t2:not(#fx) { font-size: 34px !important; }
  html body.fx-pv h1.fx-vh-title.fx-t3:not(#fx) { font-size: 29px !important; }
  html body.fx-pv h1.fx-vh-title.fx-t4:not(#fx) { font-size: 25px !important; }
  body.fx-pv .fx-vh-meta { margin-bottom: 36px; }
  body.fx-pv .fx-vh-cover { order: 2; flex: 0 0 auto; width: 380px; max-width: 100%; margin: 0 auto; }
  html body.fx-pv .fx-vh-chips:not(#fx) { order: 3; width: 100%; max-width: 380px; margin: 36px auto 0; justify-content: center; }
  body.fx-pv .fx-vp-head { margin-top: 32px; }
}
@media (max-width: 700px) {
  body.fx-pv .fx-vh-in { padding: 28px 16px 40px; }
  body.fx-pv .fx-vh-meta { margin-bottom: 28px; }
  body.fx-pv .fx-vh-cover { width: 358px; }
  html body.fx-pv .fx-vh-chips:not(#fx) { margin-top: 28px; }
  body.fx-pv .fx-vn-h { font-size: 22px; }
  html body.fx-pv .fx-vn-card:not(#fx) { flex-basis: 140px; width: 140px; }
  body.fx-pv .fx-vn-wrap { padding: 10px; gap: 6px; }
  html body.fx-pv .fx-vn-ar:not(#fx) { flex-basis: 32px; width: 32px; height: 32px; }
}
@media (max-width: 700px) {
  html body.fx-pv h1.fx-vh-title:not(#fx) { font-size: 32px !important; }
  html body.fx-pv h1.fx-vh-title.fx-t2:not(#fx) { font-size: 28px !important; }
  html body.fx-pv h1.fx-vh-title.fx-t3:not(#fx) { font-size: 25px !important; }
  html body.fx-pv h1.fx-vh-title.fx-t4:not(#fx) { font-size: 22px !important; }
}
body.fx-pv .fx-vb-tag { display: flex; justify-content: flex-end; margin: 12px 0 0; }
body.fx-pv .fx-vb-tag span { border: 1.5px solid #2e4a66; color: #2e4a66; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1; padding: 5px 10px; border-radius: 4px; white-space: nowrap; }
/* multi-video pages: the original tab panel pulls the video 24px past each side of the text column; keep it exactly as wide as the column */
html body.fx-pv .vt-panels:not(#fx) { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; }

/* Select a Video: small label under each photo - "Watch", and "NOW PLAYING" on the video that is playing (same as the Staff Class design) */
html body.fx-pv .fx-vn-card:not(#fx)::after { content: 'Watch'; display: block; font-size: 12px; font-weight: 500; line-height: 1.3; color: #5b6b7e; letter-spacing: 0; text-transform: none; }
html body.fx-pv .fx-vn-card.on:not(#fx)::after { content: 'NOW PLAYING'; font-weight: 700; letter-spacing: .06em; color: #7a3fa0; }
@media (max-width: 700px) { html body.fx-pv .fx-vn-h .fx-sv:not(#fx) { display: none; } }
/* Select a Video cards: the whole card is one box; the playing one gets a purple border and a light purple fill (same as the Staff Class design) */
html body.fx-pv .fx-vn-card:not(#fx) { gap: 0; background: #fff; border: 2px solid #dfe4f2; border-radius: 10px; overflow: hidden; transition: border-color .2s, background-color .2s; }
html body.fx-pv .fx-vn-card .fx-vn-thumb:not(#fx) { border: 0; border-radius: 0; box-shadow: none; }
html body.fx-pv .fx-vn-card:hover:not(#fx) { border-color: #7a3fa0; }
html body.fx-pv .fx-vn-card:hover:not(#fx) .fx-vn-thumb, html body.fx-pv .fx-vn-card.on:not(#fx) .fx-vn-thumb { border: 0; box-shadow: none; }
html body.fx-pv .fx-vn-card.on:not(#fx) { border-color: #7a3fa0; background: #f1e9f8; }
html body.fx-pv .fx-vn-card:not(#fx)::after { padding: 8px 10px; }
/* ===== END 2026 - Protected Video CSS ===== */

/* ===== SOURCE #91052 2026 - Protected PDF Above Card ===== */
/* ===== 2026 - Protected PDF Above Card CSS (whole site, front end) =====
   PDF card(s) between the player / video and the white description card: centered, with 32px of air above and below. Card look = the existing PDF cards. */
html body .fx-pdf-above:not(#fx) { display: block; margin: 32px 0 32px !important; padding: 0 !important; text-align: center !important; }
html body .fx-pdf-above .thrv-button.fx-pdfbtn-wrap:not(#fx) { display: flex !important; justify-content: center !important; width: 100% !important; margin: 0 !important; text-align: center !important; }
html body .fx-pdf-above a.fx-pdfbtn:not(#fx) { margin-left: auto !important; margin-right: auto !important; }
/* two cards (Metaphysics Chart + Study Aids): side by side, centered, 8px gap; stacked and centered on a phone */
html body .fx-pdf-above .tcb-flex-row.fx-pdfrow:not(#fx) { justify-content: center !important; margin: 0 !important; }
@media (max-width: 700px) { html body .fx-pdf-above .tcb-flex-row.fx-pdfrow:not(#fx) { flex-direction: column !important; align-items: center !important; margin: 0 !important; } }
/* ===== END 2026 - Protected PDF Above Card CSS ===== */

/* ===== SOURCE #91009 2026 - Protected Audio ===== */
/* ===== 2026 - Protected Audio CSS (front end, whole site; every rule needs the page to be a protected Audio page built by "2026 - Protected Audio JS") =====
   Look = approved mockup "Audio protected v2" (desktop 1280 / tablet 820 / phone 390).
   Tokens: navy #2e4a66, deep navy #0d1b3e, gold #E0B02D, dark gold #a8761a, hero blue #4f7399, line #dfe4f2, Audio accent #2e5fa8 / tint #e6eefb. */

/* ---------- no flash of the old page: hidden until the JS has built the new layout (class fx-pa-done); CSS also shows it itself after 5 s ---------- */
html.fx-asp:not(.fx-pa-done) body.ppp-protected #tve_editor:not(#fx) { opacity: 0; animation: fxPaShow .01s 5s forwards; }
html.fx-asp.fx-pa-done body.ppp-protected #tve_editor:not(#fx) { transition: opacity .25s ease; }
@keyframes fxPaShow { to { opacity: 1; } }

/* ---------- old pieces that the hero replaces (kept in the page, only hidden) ---------- */
html body.fx-pa .fx-ph-old:not(#fx) { display: none !important; }
/* no gap between the menu bar and the blue hero (theme adds 10 + 25 + 20px above the page content) */
html body.fx-pa .main-container.thrv_wrapper:not(#fx) { padding-top: 0 !important; }
html body.fx-pa #theme-content-section:not(#fx) { margin-top: 0 !important; }
html body.fx-pa #theme-content-section .section-content:not(#fx) { padding-top: 0 !important; }
html body.fx-pa .fx-src:not(#fx) { position: absolute !important; left: -9999px !important; top: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* ---------- hero band ---------- */
body.fx-pa .fx-ph { background: #4f7399; color: #fff; width: 100vw; margin-left: calc(50% - 50vw); position: relative; z-index: 1; font-family: 'Open Sans', sans-serif; }
body.fx-pa .fx-ph-in { max-width: 1080px; margin: 0 auto; padding: 56px 24px 56px; display: grid; grid-template-columns: 440px minmax(0, 1fr); column-gap: 48px; grid-template-rows: auto 1fr; align-items: start; box-sizing: border-box; }
body.fx-pa .fx-ph-cover { background: #fff; border: 1px solid #dfe4f2; border-radius: 12px; box-shadow: 0 18px 40px rgba(20, 35, 55, .3); padding: 12px 12px 14px; min-width: 0; box-sizing: border-box; }
html body.fx-pa .fx-ph-cover .thrv_custom_html_shortcode:not(#fx), html body.fx-pa .fx-ph-cover .n2-section-smartslider:not(#fx) { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.fx-pa .fx-ph-cover { grid-column: 1; grid-row: 1 / span 2; }
body.fx-pa .fx-ph-left { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; }
body.fx-pa .fx-player { grid-column: 2; grid-row: 2; align-self: start; }
/* author line(s) in the description card: dark blue, regular, one name per line, tight (author-lines rule) */
html body.fx-pa .fx-pa-author:not(#fx), html body.fx-pa .fx-pa-author *:not(#fx) { color: #2e4a66 !important; font-weight: 500 !important; font-size: 16px !important; letter-spacing: .02em !important; line-height: 1.4 !important; text-align: left !important; }
body.fx-pa .fx-ph-crumb { font-size: 14px; color: #e6eef7; margin: 0 0 26px; }
body.fx-pa .fx-ph-crumb a { color: #e6eef7; text-decoration: none; }
body.fx-pa .fx-ph-crumb a:hover { text-decoration: underline; text-decoration-color: #E0B02D; text-underline-offset: 3px; }
body.fx-pa .fx-ph-crumb span { margin: 0 10px; }
html body.fx-pa h1.fx-ph-title:not(#fx) { font-family: 'Playfair Display', serif !important; font-weight: 600 !important; font-size: 38px !important; line-height: 1.18 !important; color: #fff !important; margin: 0 0 22px !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; text-align: left !important; }
html body.fx-pa h1.fx-ph-title:not(#fx) em { font-style: italic !important; }
body.fx-pa .fx-ph-meta { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 28px; font-size: 15px; color: #fff; }
body.fx-pa .fx-ph-badge { background: #E0B02D; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 6px 14px; border-radius: 4px; }
body.fx-pa .fx-ph-chips { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 28px; }

/* the three chips = the Thrive lightbox icons, same elements (they still open their lightboxes) */
html body.fx-pa .fx-ph-chips .fx-chip:not(#fx) { display: flex !important; align-items: center; gap: 8px; width: auto !important; height: 44px !important; margin: 0 !important; padding: 0 16px !important; background: #fff !important; border-radius: 22px; color: #2e4a66; font-size: 14px; font-weight: 500; cursor: pointer; box-sizing: border-box; float: none !important; }
html body.fx-pa .fx-ph-chips .fx-chip:not(#fx) > * { margin: 0 !important; }
html body.fx-pa .fx-ph-chips .fx-chip:not(#fx) svg { width: 18px !important; height: 18px !important; fill: #2e4a66 !important; stroke: none !important; }
html body.fx-pa .fx-ph-chips .fx-chip:not(#fx) svg * { fill: #2e4a66 !important; stroke: none !important; }
body.fx-pa .fx-chip-playlist::after { content: "Recent"; }
body.fx-pa .fx-chip-favorites::after { content: "Favorites"; }
body.fx-pa .fx-chip-help::after { content: "Help"; }
html body.fx-pa .fx-ph-chips .fx-chip:hover:not(#fx), html body.fx-pa .fx-ph-chips .fx-chip:focus-visible:not(#fx) { background: #E0B02D !important; color: #fff !important; }
html body.fx-pa .fx-ph-chips .fx-chip:hover:not(#fx) svg, html body.fx-pa .fx-ph-chips .fx-chip:hover:not(#fx) svg * { fill: #fff !important; }

/* ---------- our player (same look as the sales-page preview player) ---------- */
body.fx-pa .fx-player { position: relative; width: 100%; background: #fff; border: 1px solid #dfe4f2; border-radius: 14px; box-shadow: 0 2px 14px rgba(46, 74, 102, .08); padding: 14px 20px 8px; color: #2e4a66; box-sizing: border-box; }
body.fx-pa .fx-pl-top { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 8px; }
body.fx-pa .fx-pl-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #a8761a; }
body.fx-pa .fx-pl-title svg { width: 18px; height: 18px; fill: none; stroke: #a8761a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pa .fx-pl-track { font-size: 13px; color: #5b6b7f; min-width: 0; flex: 1 1 120px; }
body.fx-pa .fx-pl-time { margin-left: auto; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.fx-pa .fx-pl-main { display: flex; align-items: center; gap: 16px; }
html body.fx-pa .fx-pl-btn:not(#fx) { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%; border: 0; background: #0d1b3e; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; cursor: pointer; transition: background .2s; }
body.fx-pa .fx-pl-btn:hover, body.fx-pa .fx-pl-btn:focus-visible { background: #2e4a66; outline: none; }
body.fx-pa .fx-pl-btn svg { width: 24px; height: 24px; fill: #fff; }
body.fx-pa .fx-pl-btn .fx-i-pause { display: none; }
body.fx-pa .fx-player.fx-playing .fx-pl-btn .fx-i-play { display: none; }
body.fx-pa .fx-player.fx-playing .fx-pl-btn .fx-i-pause { display: block; }
body.fx-pa .fx-player.fx-playing .fx-pl-btn { animation: fxring 1.4s ease-out infinite; }
@keyframes fxring { 0% { box-shadow: 0 0 0 0 rgba(245, 200, 66, .6); } 100% { box-shadow: 0 0 0 16px rgba(245, 200, 66, 0); } }
body.fx-pa .fx-pl-wave { position: relative; flex: 1 1 auto; min-width: 0; height: 60px; }
body.fx-pa .fx-pl-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; }
body.fx-pa .fx-pl-bars span { flex: 0 0 3px; width: 3px; border-radius: 2px; background: #c9d3e6; }
body.fx-pa .fx-pl-bars span.on { background: #2e4a66; }
body.fx-pa .fx-pl-head { position: absolute; top: 2px; width: 2px; height: 56px; margin-left: -1px; border-radius: 1px; background: #E0B02D; pointer-events: none; }
html body.fx-pa .fx-pl-seek:not(#fx) { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.fx-pa .fx-pl-ctl { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-top: 2px; }
body.fx-pa .fx-pl-skips { display: flex; gap: 4px; }
html body.fx-pa .fx-pl-ic:not(#fx) { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; }
body.fx-pa .fx-pl-ic svg { width: 26px; height: 26px; fill: none; stroke: #2e4a66; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pa .fx-pl-ic svg text { font-family: 'Open Sans', sans-serif; font-size: 8.5px; font-weight: 700; fill: #2e4a66; stroke: none; }
body.fx-pa .fx-pl-ic:hover svg { stroke: #a8761a; }
body.fx-pa .fx-pl-ic:hover svg text { fill: #a8761a; }
body.fx-pa .fx-pl-fav svg { width: 29px; height: 29px; }
body.fx-pa .fx-pl-fav.on svg { fill: #E0B02D; stroke: #E0B02D; }
html body.fx-pa .fx-pl-speed:not(#fx) { min-width: 64px; height: 36px; padding: 0 14px; margin: 0; border-radius: 18px; border: 1.5px solid #2e4a66; background: #fff; color: #2e4a66; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; }
body.fx-pa .fx-pl-speed:hover { border-color: #E0B02D; background: #E0B02D; color: #fff; }
body.fx-pa .fx-pl-vol { display: flex; align-items: center; gap: 8px; }
body.fx-pa .fx-pl-vol svg { width: 20px; height: 20px; fill: none; stroke: #2e4a66; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body.fx-pa .fx-pl-vslider:not(#fx) { --v: 70%; -webkit-appearance: none; appearance: none; width: 110px; height: 6px; margin: 0; padding: 0; border-radius: 3px; background: linear-gradient(to right, #2e4a66 var(--v), #c9d3e6 var(--v)); outline: none; cursor: pointer; }
body.fx-pa .fx-pl-vslider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #2e4a66; border: 2px solid #fff; box-shadow: 0 0 0 1px #2e4a66; }
body.fx-pa .fx-pl-vslider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #2e4a66; border: 2px solid #fff; }

/* ---------- track section ---------- */
body.fx-pa .fx-trk { max-width: 940px; margin: 32px auto 0; font-family: 'Open Sans', sans-serif; color: #2e4a66; }
body.fx-pa .fx-trk-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
body.fx-pa .fx-trk-ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #2e4a66; display: flex; align-items: center; justify-content: center; }
body.fx-pa .fx-trk-ic svg { width: 22px; height: 22px; fill: none; stroke: #E0B02D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pa .fx-trk-h { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 26px; line-height: 1.2; color: #1f3550; }
body.fx-pa .fx-trk-sub { font-size: 14px; color: #5d7289; margin-top: 3px; }
body.fx-pa .fx-trk-nav { margin: 0 0 16px; }
body.fx-pa .fx-trk-pills { display: flex; gap: 10px; flex-wrap: wrap; }
html body.fx-pa .fx-trk-pill:not(#fx) { height: 46px; padding: 0 20px; margin: 0; border-radius: 23px; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; box-sizing: border-box; border: 1.5px solid #2e5fa8; background: #fff; color: #2e5fa8; transition: background .2s, color .2s; }
html body.fx-pa .fx-trk-pill.on:not(#fx), html body.fx-pa .fx-trk-pill:hover:not(#fx) { background: #2e5fa8; color: #fff; }
body.fx-pa .fx-trk-many { background: #fff; border: 1px solid #dfe4f2; border-radius: 14px; box-shadow: 0 2px 14px rgba(46, 74, 102, .08); padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
body.fx-pa .fx-trk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.fx-pa .fx-trk-of { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 20px; }
html body.fx-pa .fx-trk-ar:not(#fx) { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #2e4a66; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; }
body.fx-pa .fx-trk-ar:disabled { opacity: .35; cursor: default; pointer-events: none; }
body.fx-pa .fx-trk-ar svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html body.fx-pa .fx-trk-jbtn:not(#fx) { display: none; height: 44px; border-radius: 22px; border: 1.5px solid #2e4a66; background: #fff; color: #2e4a66; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 500; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
body.fx-pa .fx-trk-jbtn svg { width: 12px; height: 12px; fill: none; stroke: #2e4a66; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.fx-pa .fx-trk-jump { display: flex; flex-wrap: wrap; gap: 8px; max-height: 270px; overflow: auto; padding: 4px 2px; }
html body.fx-pa .fx-trk-chip:not(#fx) { width: 46px; height: 44px; padding: 0; margin: 0; border-radius: 10px; cursor: pointer; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 500; box-sizing: border-box; border: 1.5px solid #2e5fa8; background: #fff; color: #2e5fa8; }
html body.fx-pa .fx-trk-chip.on:not(#fx), html body.fx-pa .fx-trk-chip:hover:not(#fx) { background: #2e5fa8; color: #fff; }
body.fx-pa .fx-trk-dh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; background: #d3dbec; border: 1px solid #c2cde4; border-bottom: 0; border-radius: 14px 14px 0 0; padding: 14px 20px; }
body.fx-pa .fx-trk-dt { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 19px; }
body.fx-pa .fx-trk-dm { font-size: 13px; color: #5d7289; }
body.fx-pa .fx-hide:not(#fx) { display: none !important; }

/* the Sonaar rows (kept) restyled as the mockup rows */
html body.fx-pa .fx-trk ul.srp_list:not(#fx) { margin: 0 !important; padding: 0 !important; }
html body.fx-pa .fx-trk .playlist:not(#fx) { background: #fff !important; border: 1px solid #dfe4f2; border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 2px 14px rgba(46, 74, 102, .08); padding: 6px 0 8px !important; margin: 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box; }
html body.fx-pa .fx-trk .sr-playlist-item:not(#fx) { margin: 0 14px !important; padding: 5px 24px 5px 20px !important; min-height: 46px; box-sizing: border-box; border-radius: 8px; border-left: 4px solid transparent; font-family: 'Open Sans', sans-serif; }
html body.fx-pa .fx-trk .sr-playlist-item:not(#fx) { background: transparent !important; }
html body.fx-pa .fx-trk .sr-playlist-item:hover:not(#fx) { background: #eef3fb !important; }
html body.fx-pa .fx-trk .sr-playlist-item.current:not(#fx) { background: #dce9ff !important; border-left-color: #2e5fa8; }
html body.fx-pa .fx-trk .sr-playlist-item.current:not(#fx) .tracklist-item-title { font-weight: 700 !important; }
/* the list shows fully: no inner scroll box, no scrollbar */
html body.fx-pa .fx-trk .srp_list:not(#fx), html body.fx-pa .fx-trk .srp_tracklist:not(#fx), html body.fx-pa .fx-trk .playlist:not(#fx) { height: auto !important; max-height: none !important; overflow: visible !important; }
html body.fx-pa .fx-trk .ps__rail-y:not(#fx), html body.fx-pa .fx-trk .ps__rail-x:not(#fx) { display: none !important; }
/* the full-width hero band must not add a sideways scrollbar */
html body.fx-pa { overflow-x: clip; }
html body.fx-pa .fx-trk .tracklist-item-title:not(#fx) { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 500 !important; color: #2e4a66 !important; }
html body.fx-pa .fx-trk .tracklist-item-time:not(#fx) { font-size: 12px !important; color: #5d7289 !important; }
html body.fx-pa .fx-trk .srp-fav-bt:not(#fx) { font-size: 23px !important; }
body.fx-pa .fx-trk .srp-fav-bt i { font-size: 23px; }

/* ---------- About this Audio heading ---------- */
body.fx-pa .fx-about-h { position: relative; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 24px; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: #1f3550; margin: 0 0 34px; padding: 0 0 18px; line-height: 1.25; }
body.fx-pa .fx-about-h::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 64px; height: 2px; margin-left: -32px; background: #E0B02D; }

/* ---------- tablet ---------- */
html body.fx-multi-nav .ap-tabbar:not(#fx), html body.fx-multi-nav .ap-eyebrow:not(#fx) { display: none !important; }
body.fx-pa .fx-trk-g { margin: 0 -24px 0; }
/* ---- cover thumbnails (protected Audio hero only): ONE row = arrow, button tiles that scroll across (edges fade), arrow ---- */
html body.fx-pa .fx-ph-cover .fx-cv-bar:not(#fx) { margin-top: 12px; gap: 8px; padding: 0 2px; align-items: center; }
html body.fx-pa .fx-ph-cover .fx-cv-bar .fx-cv-thumbs:not(#fx) { gap: 9px; padding: 2px 16px; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); }
html body.fx-pa .fx-ph-cover .fx-cv-bar button.fx-cv-th:not(#fx) { flex: 0 0 56px; width: 56px; height: 56px; min-width: 0; max-width: none; aspect-ratio: auto; margin: 0 !important; padding: 2px !important; border-radius: 9px !important; border: 1px solid #d5dcec !important; background: #fff !important; box-shadow: 0 1px 4px rgba(46, 74, 102, .14) !important; opacity: .78; transition: opacity .2s, transform .2s, box-shadow .2s, border-color .2s; }
html body.fx-pa .fx-ph-cover .fx-cv-bar .fx-cv-th img { border-radius: 6px; }
html body.fx-pa .fx-ph-cover .fx-cv-bar button.fx-cv-th:not(#fx):hover { opacity: 1; transform: translateY(-1px); border-color: #E0B02D !important; }
html body.fx-pa .fx-ph-cover .fx-cv-bar button.fx-cv-th.fx-sel:not(#fx) { opacity: 1; border: 2px solid #E0B02D !important; padding: 1px !important; box-shadow: 0 0 0 2px rgba(224, 176, 45, .35) !important; }
html body.fx-pa .fx-ph-cover .fx-cv-bar button.fx-cv-arrow:not(#fx) { display: flex !important; flex: 0 0 34px; width: 34px; height: 34px; background: #fff !important; border: 1px solid #d5dcec !important; box-shadow: 0 2px 8px rgba(46, 74, 102, .2) !important; transition: background .2s, border-color .2s, transform .2s; z-index: 2; }
html body.fx-pa .fx-ph-cover .fx-cv-bar .fx-cv-arrow svg { width: 12px; height: 12px; stroke: #2e4a66; stroke-width: 2; transition: stroke .2s; }
html body.fx-pa .fx-ph-cover .fx-cv-bar button.fx-cv-arrow:not(#fx):hover { background: #E0B02D !important; border-color: #E0B02D !important; transform: scale(1.06); }
html body.fx-pa .fx-ph-cover .fx-cv-bar .fx-cv-arrow:hover svg { stroke: #fff; }
/* ---- large sets: ONE row = arrow, disc buttons that scroll across (edges fade), arrow ---- */
html body.fx-pa .fx-trk-many:not(#fx) { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; column-gap: 10px; row-gap: 0; padding: 14px 16px; }
html body.fx-pa .fx-trk-many .fx-trk-top:not(#fx) { display: contents; }
html body.fx-pa .fx-trk-many .fx-trk-of:not(#fx), html body.fx-pa .fx-trk-many .fx-trk-jbtn:not(#fx) { display: none !important; }
html body.fx-pa .fx-trk-many .fx-trk-prev:not(#fx) { grid-column: 1; grid-row: 1; }
html body.fx-pa .fx-trk-many .fx-trk-next:not(#fx) { grid-column: 3; grid-row: 1; }
html body.fx-pa .fx-trk-many .fx-trk-jump:not(#fx) { grid-column: 2; grid-row: 1; position: relative; display: flex !important; flex-wrap: nowrap; gap: 9px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 8px 18px; scroll-behavior: smooth; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
html body.fx-pa .fx-trk-many .fx-trk-jump::-webkit-scrollbar { display: none; }
html body.fx-pa .fx-trk-many .fx-trk-chip:not(#fx) { flex: 0 0 48px; width: 48px; height: 46px; border-radius: 12px; border: 1px solid #cdd8ec; background: #fff; color: #2e4a66; font-size: 15px; font-weight: 600; box-shadow: 0 1px 4px rgba(46, 74, 102, .12); transition: transform .2s, box-shadow .2s, border-color .2s, background .2s, color .2s; }
html body.fx-pa .fx-trk-many .fx-trk-chip:hover:not(#fx) { background: #fff; color: #2e5fa8; border-color: #E0B02D; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(46, 74, 102, .18); }
html body.fx-pa .fx-trk-many .fx-trk-chip.on:not(#fx) { background: linear-gradient(180deg, #3a72bd, #2e5fa8); color: #fff; border-color: #2e5fa8; transform: translateY(-2px); box-shadow: 0 5px 12px rgba(46, 95, 168, .38); }
/* the cover card must never be wider than the screen (the scrolling thumbnail row used to stretch it on phones) */
html body.fx-pa .fx-ph-cover:not(#fx) { min-width: 0; box-sizing: border-box; }
html body.fx-pa .fx-ph-cover .fx-cv-bar:not(#fx) { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }
html body.fx-pa .fx-ph-cover .fx-cv-thumbs:not(#fx) { min-width: 0; }
@media (max-width: 1024px) { body.fx-pa .fx-trk-g { margin: 0; } }
/* ---- products with two playlists (named tabs): the disc selector sits inside each playlist panel ---- */
body.fx-pa .fx-trk-top1 { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-family: 'Open Sans', sans-serif; color: #2e4a66; }
body.fx-pa .fx-trk-in { max-width: none; margin: 18px 0 0; }
body.fx-pa .fx-trk-in .fx-trk-nav { margin: 0 0 14px; }

@media (max-width: 1024px) {
  body.fx-pa .fx-ph-in { padding: 36px 40px 40px; column-gap: 36px; }
  html body.fx-pa h1.fx-ph-title:not(#fx) { font-size: 32px !important; margin-bottom: 18px !important; }
  body.fx-pa .fx-ph-meta { margin-bottom: 20px; }
  body.fx-pa .fx-ph-chips { margin-bottom: 0; }
  /* (cover stays 440px wide like the sales page) */
  body.fx-pa .fx-about-h { font-size: 24px; }
}
/* ---------- phone ---------- */
@media (max-width: 700px) {
  body.fx-pa .fx-ph-in { padding: 60px 20px 24px; display: flex; flex-direction: column; gap: 18px; }
  /* cover and title block order now come from the stacked layout block at the end */
  body.fx-pa .fx-ph-left { order: 2; }
  body.fx-pa .fx-player { order: 3; }
  body.fx-pa .fx-ph-crumb { margin: 0 0 4px; font-size: 13px; order: -1; }
  html body.fx-pa h1.fx-ph-title:not(#fx) { font-size: 27px !important; line-height: 1.2 !important; margin-bottom: 14px !important; }
  body.fx-pa .fx-ph-meta { gap: 8px 12px; margin-bottom: 16px; font-size: 14px; }
  body.fx-pa .fx-ph-chips { gap: 8px; flex-wrap: nowrap; margin-bottom: 18px; }
  html body.fx-pa .fx-ph-chips .fx-chip:not(#fx) { flex: 1 1 0; justify-content: center; padding: 0 8px !important; font-size: 13px; gap: 6px; }
  body.fx-pa .fx-player { margin-top: 0; padding: 14px 16px 8px; }
  body.fx-pa .fx-pl-main { gap: 12px; }
  body.fx-pa .fx-pl-top { gap: 2px 10px; }
  body.fx-pa .fx-pl-track { order: 3; flex: 1 1 100%; }
  body.fx-pa .fx-pl-ctl { gap: 4px; flex-wrap: nowrap; }
  html body.fx-pa .fx-pl-speed:not(#fx) { min-width: 56px; padding: 0 10px; }
  html body.fx-pa .fx-pl-vslider:not(#fx) { width: 56px; }
  body.fx-pa .fx-pl-vol { gap: 6px; }
  body.fx-pa .fx-trk-h { font-size: 22px; }
  body.fx-pa .fx-trk-jbtn { display: flex; }
  body.fx-pa .fx-trk-jump { display: none; }
  body.fx-pa .fx-trk-jump.open { display: flex; }
  body.fx-pa .fx-about-h { font-size: 20px; margin-bottom: 26px; }
}
/* ===== END 2026 - Protected Audio CSS ===== */
/* ===== Stage 1 fixes (after live test) ===== */
html body.fx-pa .fx-trk .track-number .number:not(#fx) { display: none !important; }
html body.fx-pa .fx-trk .track-number:not(#fx) { min-width: 0 !important; width: auto !important; }
/* long track titles wrap onto 2 lines (mockup) instead of being cut with ... */
html body.fx-pa .fx-trk .tracklist-item-title:not(#fx), html body.fx-pa .fx-trk .tracklist-item-title *:not(#fx) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
/* ===== END Stage 1 fixes ===== */
/* ---- phone: tighter disc row and track rows (appended last so they win) ---- */
@media (max-width: 700px) {
  html body.fx-pa .fx-trk-many:not(#fx) { grid-template-columns: 36px minmax(0, 1fr) 36px; column-gap: 4px; padding: 10px 10px; }
  html body.fx-pa .fx-trk-many .fx-trk-ar:not(#fx) { width: 36px; height: 36px; }
  html body.fx-pa .fx-trk-many .fx-trk-chip:not(#fx) { flex-basis: 44px; width: 44px; height: 42px; }
  html body.fx-pa .fx-trk-many .fx-trk-jump:not(#fx) { padding: 8px 12px; gap: 7px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
  html body.fx-pa .fx-trk .sr-playlist-item:not(#fx) { margin: 0 6px !important; padding: 5px 10px !important; }
}
/* ---- phone: the few-discs pills also stay on ONE row (swipe sideways if they do not fit) ---- */
@media (max-width: 700px) {
  html body.fx-pa .fx-trk-pills:not(#fx) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); }
  html body.fx-pa .fx-trk-pills::-webkit-scrollbar { display: none; }
  html body.fx-pa .fx-trk-pills .fx-trk-pill:not(#fx) { flex: 0 0 auto; height: 44px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
}
/* ---- tablet and phone: stacked like the sales pages (title block, then the cover at a FIXED 440px width, then the player) ---- */
@media (max-width: 940px) {
  body.fx-pa .fx-ph-in { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  body.fx-pa .fx-ph-left { order: 1; }
  html body.fx-pa .fx-ph-cover:not(#fx) { order: 2; width: 100%; max-width: 440px; margin: 0 auto; }
  html body.fx-pa .fx-player:not(#fx) { order: 3; margin: 0 auto; width: 100%; max-width: 440px; box-sizing: border-box; } /* same width as the cover, like the sales page */
  html body.fx-pa h1.fx-ph-title:not(#fx) { font-size: 38px !important; }
  /* the three buttons sit under the cover (title block, cover, buttons, player) */
  body.fx-pa .fx-ph-in { gap: 0; }
  body.fx-pa .fx-ph-left { display: contents; }
  body.fx-pa .fx-ph-crumb, html body.fx-pa h1.fx-ph-title:not(#fx), body.fx-pa .fx-ph-meta { order: 1; }
  body.fx-pa .fx-ph-meta { margin-bottom: 24px; }
  html body.fx-pa .fx-ph-chips:not(#fx) { order: 3; width: 100%; max-width: 440px; margin: 36px auto 0; box-sizing: border-box; flex-wrap: nowrap; gap: 8px; }
  html body.fx-pa .fx-ph-chips .fx-chip:not(#fx) { flex: 1 1 0; justify-content: center; padding: 0 8px !important; }
  html body.fx-pa .fx-player:not(#fx) { order: 4; margin: 28px auto 0; max-width: 560px; } /* a little wider than the three buttons */
}
@media (min-width: 701px) and (max-width: 960px) { body.fx-pa .fx-ph-in { padding: 36px 56px 40px; } }
@media (max-width: 700px) { html body.fx-pa h1.fx-ph-title:not(#fx) { font-size: 27px !important; } }

/* consistent space between the site menu and the breadcrumb at every width (menu overlaps the hero ~30px on phone, ~1px elsewhere) */
body.fx-pa .fx-ph-crumb { margin-top: 0; }
body.fx-pa .fx-ph-in { padding-top: 33px; } /* desktop: menu bar ends ~7px above the hero, so 33 + 7 = 40 */
@media (max-width: 767px) { body.fx-pa .fx-ph-in { padding-top: 70px; } } /* menu bar is taller and overlaps the hero ~29px up to 767 */
/* two-column 961-1024: air between the buttons and the player */
@media (min-width: 961px) and (max-width: 1024px) { body.fx-pa .fx-ph-chips { margin-bottom: 28px; } }
@media (min-width: 768px) and (max-width: 1024px) { body.fx-pa .fx-ph-in { padding-top: 38px; } }


/* PART # / VOLUME # tag: far right of the "Select a Disc" header, just above the disc navigation (series products) */
body.fx-pa .fx-trk-head .fx-trk-tag { margin-left: auto; flex: 0 0 auto; align-self: center; border: 1.5px solid #2e4a66; color: #2e4a66; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1; padding: 5px 10px; border-radius: 4px; white-space: nowrap; }
@media (max-width: 480px) { body.fx-pa .fx-trk-head { flex-wrap: wrap; } body.fx-pa .fx-trk-head .fx-trk-tag { margin-top: 2px; } }

/* ===== Hero matched to the Audio sales page (title sizes by length, crumb, meta, spacing; breakpoints 940 / 700) ===== */
html body.fx-pa .fx-ph-in:not(#fx) { padding: 56px 24px 64px; column-gap: 56px; }
html body.fx-pa .fx-ph-crumb:not(#fx) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 19.5px; font-weight: 400; color: #c9d6ea; margin: 0 0 28px; order: 0; }
html body.fx-pa .fx-ph-crumb a:not(#fx) { color: #c9d6ea; }
html body.fx-pa .fx-ph-crumb span:not(#fx) { margin: 0; }
html body.fx-pa h1.fx-ph-title:not(#fx) { font-weight: 400 !important; font-size: 46px !important; line-height: 1.18 !important; margin: 0 0 18px !important; letter-spacing: normal !important; }
html body.fx-pa h1.fx-ph-title.fx-t2:not(#fx) { font-size: 38px !important; }
html body.fx-pa h1.fx-ph-title.fx-t3:not(#fx) { font-size: 32px !important; }
html body.fx-pa h1.fx-ph-title.fx-t4:not(#fx) { font-size: 27px !important; line-height: 1.22 !important; }
html body.fx-pa .fx-ph-meta:not(#fx) { gap: 10px 16px; margin: 0 0 26px; font-size: 14px; font-weight: 400; color: #dfe6f1; }
html body.fx-pa .fx-ph-badge:not(#fx) { font-size: 12px; font-weight: 500; letter-spacing: .06em; padding: 4px 12px; text-transform: uppercase; }
@media (max-width: 940px) {
  html body.fx-pa .fx-ph-in:not(#fx) { padding: 36px 24px 48px; }
  html body.fx-pa h1.fx-ph-title:not(#fx) { font-size: 40px !important; }
  html body.fx-pa h1.fx-ph-title.fx-t2:not(#fx) { font-size: 34px !important; }
  html body.fx-pa h1.fx-ph-title.fx-t3:not(#fx) { font-size: 29px !important; }
  html body.fx-pa h1.fx-ph-title.fx-t4:not(#fx) { font-size: 25px !important; }
  html body.fx-pa .fx-ph-meta:not(#fx) { margin-bottom: 36px; }
}
@media (max-width: 700px) {
  html body.fx-pa .fx-ph-in:not(#fx) { padding: 28px 16px 40px; }
  html body.fx-pa h1.fx-ph-title:not(#fx) { font-size: 32px !important; }
  html body.fx-pa h1.fx-ph-title.fx-t2:not(#fx) { font-size: 28px !important; }
  html body.fx-pa h1.fx-ph-title.fx-t3:not(#fx) { font-size: 25px !important; }
  html body.fx-pa h1.fx-ph-title.fx-t4:not(#fx) { font-size: 22px !important; }
  html body.fx-pa .fx-ph-meta:not(#fx) { margin-bottom: 28px; }
}
/* ===== END hero matched ===== */
/* ---- player waveform never goes past the white card (bars were wider than the box on phones under 390 wide) ---- */
html body.fx-pa .fx-pl-wave:not(#fx), html body.fx-pa .fx-pl-bars:not(#fx) { overflow: hidden !important; max-width: 100% !important; }
/* ===== END waveform clip ===== */
/* ---- disc buttons: ONE row with round arrows that scroll it (arrows show only when the buttons do not all fit) ---- */
body.fx-pa .fx-trk-pwrap { display: flex; align-items: center; gap: 8px; }
html body.fx-pa .fx-trk-pwrap .fx-trk-pills:not(#fx) { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 8px; -webkit-mask-image: none; mask-image: none; }
html body.fx-pa .fx-trk-pwrap .fx-trk-pills::-webkit-scrollbar { display: none; }
html body.fx-pa .fx-trk-pwrap .fx-trk-pills .fx-trk-pill:not(#fx) { flex: 0 0 auto; white-space: nowrap; }
html body.fx-pa .fx-trk-pwrap .fx-trk-pa:not(#fx) { flex: 0 0 auto; margin: 0 0 4px; }
html body.fx-pa .fx-trk-pwrap .fx-trk-pa[hidden]:not(#fx) { display: none; }
@media (max-width: 700px) { html body.fx-pa .fx-trk-pwrap .fx-trk-pa:not(#fx) { width: 36px; height: 36px; } html body.fx-pa .fx-trk-pwrap { gap: 6px; } }
@media (max-width: 700px) {
  /* phone: ONE disc button between the two arrows; the arrows (or a swipe) move to the next one */
  html body.fx-pa .fx-trk-pwrap .fx-trk-pills:not(#fx) { scroll-snap-type: x mandatory; scroll-padding: 0 2px; gap: 8px; }
  html body.fx-pa .fx-trk-pwrap .fx-trk-pills .fx-trk-pill:not(#fx) { flex: 0 0 100%; width: 100%; scroll-snap-align: start; justify-content: center; text-align: center; padding: 0 12px; }
}
/* ===== END disc buttons one row ===== */

/* ---------- "picks up where you left off" note under the player controls (playlist memory) ---------- */
body.fx-pa .fx-pl-resume { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f7; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #5b6b7e; }
body.fx-pa .fx-pl-resume[hidden] { display: none; }
html body.fx-pa .fx-trk .sr-playlist-item.fx-rest:not(#fx) { background: #dce9ff !important; border-left-color: #2e5fa8; }
html body.fx-pa .fx-trk .sr-playlist-item.fx-rest:not(#fx) .tracklist-item-title { font-weight: 700 !important; }

/* ===== SOURCE #90891 2026 - Protected Narrator ===== */
/* ===== 2026 - Protected Narrator CSS (protected pages, Audio; whole site, front end) =====
   The gold note box above the white text card on audiobook protected pages ("Audiobook: The oral reading of this book is done by ...").
   Same look as the Please Note box on the sales pages: pale gold, gold bar on the left, round white icon with a gold "i",
   black regular text, bold label. Built by 2026 - Protected Narrator JS. */
html body.ppp-protected .fx-pnarr:not(#fx) {
  display: flex; align-items: center; gap: 18px; box-sizing: border-box; max-width: 940px;
  background: #fbf4df; border: 1px solid #ecd89a; border-left: 5px solid #E0B02D; border-radius: 10px; padding: 24px 32px; margin-top: 16px; margin-bottom: 32px;
}
html body.ppp-protected .fx-pnarr-ico:not(#fx) {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
}
html body.ppp-protected .fx-pnarr-ico:not(#fx) svg { width: 24px; height: 24px; fill: none; stroke: #a8761a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body.ppp-protected .fx-pnarr-body:not(#fx) { flex: 1 1 auto; min-width: 0; }
html body.ppp-protected .fx-pnarr:not(#fx), html body.ppp-protected .fx-pnarr *:not(#fx) { font-family: 'Open Sans', sans-serif !important; font-size: 15px !important; line-height: 1.65 !important; color: #000 !important; }
html body.ppp-protected .fx-pnarr p:not(#fx) { margin: 0 !important; padding: 0 !important; font-weight: 400 !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; text-align: left !important; }
html body.ppp-protected .fx-pnarr strong:not(#fx) { font-weight: 700 !important; }
@media (max-width: 700px) {
  html body.ppp-protected .fx-pnarr:not(#fx) { padding: 20px 20px; gap: 14px; align-items: flex-start; }
  html body.ppp-protected .fx-pnarr-ico:not(#fx) { flex: 0 0 36px; width: 36px; height: 36px; }
  html body.ppp-protected .fx-pnarr-ico:not(#fx) svg { width: 20px; height: 20px; }
}
/* ===== END 2026 - Protected Narrator CSS ===== */

/* ===== SOURCE #90751 2026 - Protected Icons ===== */
/* ===== 2026 - Protected Icons CSS (protected Audio / Weekly Class / Seminar / Podcast pages, front end, site-wide) =====
   The three little icons under the player (playlist, favorites heart, help) are one Thrive "columns" block that was floated to the right
   inside a box wider or narrower than the player, so on some pages they stuck out past the player's right edge.
   The block is tagged .fx-iconrow by 2026 - Protected Icons JS, which also lines its right edge up with the player's right edge
   and keeps the gap under the player the same on every page. This CSS only makes the block a simple right-aligned row (8px between icons). */
html body .thrv-columns.fx-iconrow:not(#fx):not(#fy):not(#fz) { float: none !important; display: block !important; width: auto !important; max-width: none !important; margin-left: 0 !important; padding: 0 !important; }
html body .thrv-columns.fx-iconrow:not(#fx):not(#fy):not(#fz) > .tcb-flex-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-end !important; align-items: center !important; gap: 8px !important; margin: 0 !important; width: auto !important; }
html body .thrv-columns.fx-iconrow:not(#fx):not(#fy):not(#fz) > .tcb-flex-row > .tcb-flex-col { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
html body .thrv-columns.fx-iconrow:not(#fx):not(#fy):not(#fz) > .tcb-flex-row > .tcb-flex-col > .tcb-col { width: auto !important; margin: 0 !important; padding: 0 !important; }
/* ===== END 2026 - Protected Icons CSS ===== */

/* ===== SOURCE #90749 2026 - Protected Audio Width ===== */
/* ===== 2026 - Protected Audio Width CSS (protected Audio pages, desktop only, front end) =====
   Some protected Audio pages (e.g. Classes on the Text Part 7, The Journey from the Ego-Self to the True Self, The Lessons of the Holy Spirit)
   were built without the outer 20px-padded wrapper, so their player, text card and details box were 980px wide instead of 940px.
   This keeps all three at 940px (player 938px) and centred, exactly like the other Audio pages and the Video pages.
   Desktop only (screens 1025px and wider): tablet and phone are not changed. Pages that are already 940px are not changed. */
@media (min-width: 1025px) {
  html body.fx-prot-audio .fx-tcard:not(#fx):not(#fy):not(#fz),
  html body.fx-prot-audio .fx-dwrap:not(#fx):not(#fy):not(#fz) {
    max-width: 940px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html body.fx-prot-audio .iron-audioplayer:not(#fx):not(#fy):not(#fz) {
    max-width: 938px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* ===== END 2026 - Protected Audio Width CSS ===== */

/* ===== SOURCE #90740 2026 - Protected Links ===== */
/* ===== 2026 - Protected Links CSS (protected pages, Audio + Video + Staff + Podcast; whole site, front end) =====
   Links inside paragraphs and indented paragraphs look exactly like the links on the sales pages:
   navy #2e4a66 text (visited too), regular weight, gold #E0B02D underline 3px below the text.
   Hover / keyboard focus: the text stays navy and the UNDERLINE turns blue #1b7fc4.
   Applies on desktop, tablet and phone. Not applied to PDF cards, buttons, the details box or the menus. */
html body.ppp-protected .fx-tcard a:not(.fx-pdfbtn):not(.tcb-button-link):not(.fx-gup-btn):not(.fx-pb-back):not(#fx),
html body.ppp-protected .thrv_text_element.fx-pq a:not(.fx-pdfbtn):not(.tcb-button-link):not(#fx),
html body.ppp-protected .fx-mid .thrv_text_element a:not(.fx-pdfbtn):not(.tcb-button-link):not(#fx) {
  color: #2e4a66 !important; font-weight: 400 !important; text-decoration: underline !important;
  text-decoration-color: #E0B02D !important; text-decoration-thickness: auto !important; text-underline-offset: 3px !important;
  background: none !important; border: 0 !important; box-shadow: none !important; transition: text-decoration-color .15s ease;
}
html body.ppp-protected .fx-tcard a:not(.fx-pdfbtn):not(.tcb-button-link):not(.fx-gup-btn):not(.fx-pb-back):not(#fx):visited,
html body.ppp-protected .thrv_text_element.fx-pq a:not(.fx-pdfbtn):not(.tcb-button-link):not(#fx):visited,
html body.ppp-protected .fx-mid .thrv_text_element a:not(.fx-pdfbtn):not(.tcb-button-link):not(#fx):visited { color: #2e4a66 !important; }
/* hover / focus: text stays navy, underline turns blue (two ids beat Thrive's own link hover colours) */
html body.ppp-protected .fx-tcard a:not(.fx-pdfbtn):not(.tcb-button-link):not(.fx-gup-btn):not(.fx-pb-back):not(#fx):not(#fy):hover,
html body.ppp-protected .fx-tcard a:not(.fx-pdfbtn):not(.tcb-button-link):not(.fx-gup-btn):not(.fx-pb-back):not(#fx):not(#fy):focus,
html body.ppp-protected .thrv_text_element.fx-pq a:not(.fx-pdfbtn):not(.tcb-button-link):not(#fx):not(#fy):hover,
html body.ppp-protected .thrv_text_element.fx-pq a:not(.fx-pdfbtn):not(.tcb-button-link):not(#fx):not(#fy):focus,
html body.ppp-protected .fx-mid .thrv_text_element a:not(.fx-pdfbtn):not(.tcb-button-link):not(#fx):not(#fy):hover,
html body.ppp-protected .fx-mid .thrv_text_element a:not(.fx-pdfbtn):not(.tcb-button-link):not(#fx):not(#fy):focus {
  color: #2e4a66 !important; text-decoration: underline !important; text-decoration-color: #1b7fc4 !important; background: none !important;
}
/* ===== END 2026 - Protected Links CSS ===== */

/* ===== SOURCE #90698 2026 - Protected PDF Butons ===== */
/* ===== 2026 - Protected PDF Buttons CSS (whole site, front end) =====
   Small version of the sales-page PDF card: white, 1px #dfe4f2 border, 12px corners, soft shadow, navy tile with gold PDF,
   Open Sans 500 15px navy title, small open-in-new-tab icon. Hover: gold border, gold tile, dark gold arrow, lifts 1px.
   Size: 54 tall, at least 243 wide, as wide as the title needs (never wider than the column; a very long title wraps to a second line). Centered in the column on every device.
   Single cards AND the two-card rows (Metaphysics Chart + Study Aids) now use the same 243px width. */
html body .thrv-button.fx-pdfbtn-wrap:not(#fx) { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; display: block !important; }
html body a.fx-pdfbtn:not(#fx) {
  display: flex !important; align-items: center !important; gap: 10px !important; box-sizing: border-box !important;
  width: max-content !important; min-width: 243px !important; max-width: 100% !important; min-height: 54px !important; height: auto !important; padding: 7px 14px 7px 7px !important; margin: 0 !important;
  background: #fff !important; border: 1px solid #dfe4f2 !important; border-radius: 12px !important; box-shadow: 0 2px 14px rgba(46, 74, 102, .08) !important;
  color: #2e4a66 !important; text-decoration: none !important; text-align: left !important; transition: border-color .15s, transform .15s !important;
}
html body a.fx-pdfbtn:not(#fx) .fx-pb-tile { width: 38px; height: 38px; flex: 0 0 38px; display: block; }
html body a.fx-pdfbtn:not(#fx) .fx-pb-bg { fill: #2e4a66; transition: fill .15s; }
html body a.fx-pdfbtn:not(#fx) .fx-pb-txt { fill: #E0B02D; letter-spacing: 0 !important; font-size: 8.4px; font-weight: 700; transition: fill .15s; }
html body a.fx-pdfbtn:not(#fx) .fx-pb-title {
  flex: 1 1 auto; min-width: 0; font-family: 'Open Sans', sans-serif !important; font-size: 15px !important; font-weight: 500 !important;
  line-height: 1.2 !important; color: #2e4a66 !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal; overflow: visible; text-overflow: clip;
}
html body a.fx-pdfbtn:not(#fx) .fx-pb-open { flex: 0 0 16px; color: #5b6b7f; transition: color .15s; }
/* Thrive paints its own gold hover background on the button; win with two ids so only the border, tile and arrow change */
html body a.fx-pdfbtn:not(#fx):not(#fy):hover, html body a.fx-pdfbtn:not(#fx):not(#fy):focus-visible, html body .fx-pdfbtn-wrap:not(#fx):not(#fy):hover a.fx-pdfbtn {
  background: #fff !important; background-color: #fff !important; background-image: none !important; border-color: #E0B02D !important; box-shadow: 0 4px 16px rgba(46, 74, 102, .14) !important; transform: translateY(-1px); opacity: 1 !important;
}
html body a.fx-pdfbtn:not(#fx):not(#fy):hover .fx-pb-bg, html body a.fx-pdfbtn:not(#fx):not(#fy):focus-visible .fx-pb-bg { fill: #E0B02D; }
html body a.fx-pdfbtn:not(#fx):not(#fy):hover .fx-pb-txt, html body a.fx-pdfbtn:not(#fx):not(#fy):focus-visible .fx-pb-txt { fill: #fff; }
html body a.fx-pdfbtn:not(#fx):not(#fy):hover .fx-pb-title, html body a.fx-pdfbtn:not(#fx):not(#fy):focus-visible .fx-pb-title { color: #2e4a66 !important; }
html body a.fx-pdfbtn:not(#fx):not(#fy):hover .fx-pb-open, html body a.fx-pdfbtn:not(#fx):not(#fy):focus-visible .fx-pb-open { color: #a8761a; }
/* the PDF cards are centered in the page column on every device (protected pages) */
html body .thrv-button.fx-pdfbtn-wrap:not(#fx) { display: flex !important; justify-content: center !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; text-align: center !important; }
html body a.fx-pdfbtn:not(#fx) { margin-left: auto !important; margin-right: auto !important; }
/* two PDF cards side by side (Seminar / Podcast pages: Metaphysics Chart + Study Aids): the pair is centered with an 8px gap on desktop and tablet; on a phone they stack, centered. The row is tagged .fx-pdfrow by 2026 - Protected PDF Buttons JS */
html body .tcb-flex-row.fx-pdfrow:not(#fx) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: flex-start !important; gap: 8px !important; margin: 0 !important; }
html body .tcb-flex-row.fx-pdfrow:not(#fx) > .tcb-flex-col { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; }
html body .tcb-flex-row.fx-pdfrow:not(#fx) > .tcb-flex-col .tcb-col, html body .tcb-flex-row.fx-pdfrow:not(#fx) > .tcb-flex-col .thrv-button { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
html body .tcb-flex-row.fx-pdfrow:not(#fx) a.fx-pdfbtn { width: max-content !important; min-width: 243px !important; max-width: 100% !important; }
html body .tcb-flex-row.fx-pdfrow:not(#fx) > .tcb-flex-col.fx-pdfempty { display: none !important; }
/* vertical position of the PDF card(s) under the text card (all Weekly class / Seminar / Podcast pages): a little lower on desktop, 5px higher on tablet, centered between the text card and the player box on a phone */
@media (min-width: 1025px) { html body .tcb-flex-row.fx-pdfrow:not(#fx) { margin-top: 26px !important; } }
@media (min-width: 701px) and (max-width: 1024px) { html body .tcb-flex-row.fx-pdfrow:not(#fx) { margin-top: -5px !important; } }
@media (max-width: 700px) { html body .tcb-flex-row.fx-pdfrow:not(#fx) { margin-top: -9px !important; margin-bottom: 10px !important; } }
/* ===== END 2026 - Protected PDF Buttons CSS ===== */

/* ===== SOURCE #90694 2026 - Protected Consistency ===== */
/* ===== 2026 - Protected Consistency CSS (protected pages: Audio, Video, Staff Class, Podcast; desktop, tablet, phone) =====
   Makes the protected pages match the sales pages (the master):
   - text card (white box with Kenneth's name + paragraphs): padding 48px 64px (tablet 40px, phone 28px 25px), 10px corners, soft shadow
   - text: paragraphs black #000, 16px / line-height 1.8, 20px between paragraphs; Kenneth's name dark blue #2e4a66 (alignment unchanged)
   - indented paragraphs: 15px / 1.75, 20px in from the left and right
   - 32px between the white boxes (text card -> details box); the "?" row keeps its 12px under the video and 32px to the text card
   - details box wrapper (also the .tcb-clear wrapper used on Audio, Staff Class and Podcast pages) full column width
   No :has() selectors any more (they are slow on big pages): the JS tags .fx-tcard, .fx-tcard-v (Video), .fx-mid and .fx-dwrap.
   Pairs with 2026 - Protected Consistency JS (tags the text card fx-tcard, anything between it and the details box fx-mid, and the indented paragraphs fx-pq) and 2026 - Protected Details CSS/JS. */

/* the text card */
html body.ppp-protected .thrv-content-box.fx-tcard:not(#fx) {
  width: 100% !important; max-width: 940px !important; margin: 32px auto 0 !important; box-sizing: border-box !important;
  padding: 48px 64px !important; background: #fff !important; border-radius: 10px !important; box-shadow: 0 2px 14px rgba(46, 74, 102, .08) !important;
}
/* gap from the "?" icon to the text card: 32px visually (the icon row sits at a different height in its box on Video 30px, Staff / Podcast 31px, Audio 14px; Audio is marked by the JS with body class fx-prot-audio) */
html body.ppp-protected .thrv-content-box.fx-tcard.fx-tcard-v:not(#fx) { margin-top: 30px !important; }
html body.ppp-protected .thrv-content-box.fx-tcard:not(#fx) { margin-top: 31px !important; }
html body.ppp-protected.fx-prot-audio .thrv-content-box.fx-tcard:not(#fx) { margin-top: 14px !important; }
/* anything between the text card and the details box (e.g. the class chart picture on Weekly Class pages): 32px above and below */
html body.ppp-protected .fx-mid:not(#fx) { margin-top: 32px !important; margin-bottom: 0 !important; }
/* the details wrapper */
html body.ppp-protected .fx-dwrap:not(#fx) {
  width: 100% !important; max-width: 940px !important; margin: 32px auto 0 !important; padding: 0 !important; box-sizing: border-box !important;
}
html body.ppp-protected .fx-dwrap > .thrv_custom_html_shortcode:not(#fx) { margin: 0 !important; width: 100% !important; max-width: none !important; }
/* multi-part pages: the details box sits one level deeper (.fx-dwrap > .tcb-clear > .thrv_custom_html_shortcode) and Thrive adds 20px above and below it; the gap must be the same 32px as everywhere else */
html body.ppp-protected .fx-dwrap .tcb-clear:not(#fx), html body.ppp-protected .fx-dwrap .thrv_custom_html_shortcode:not(#fx) { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* paragraphs inside the text card */
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element:not(#fx),
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element:not(#fx) {
  margin: 0 0 20px !important; padding-left: 0 !important; padding-right: 0 !important;
}
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element:last-child:not(#fx),
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element:last-child:not(#fx) { margin-bottom: 0 !important; }
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element p:not(#fx),
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element p:not(#fx) {
  color: #000 !important; font-size: 16px !important; line-height: 1.8 !important; margin: 0 !important; padding: 0 !important; font-family: 'Open Sans', sans-serif !important;
}
html body.ppp-protected.fx-pc-done .thrv-content-box .thrv_text_element p:not(#fx) *:not(a):not(#fx) { color: inherit !important; }
/* several paragraphs inside ONE text block (no gap in Thrive): 20px between them, same as between separate blocks */
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element p:not(:last-child):not(#fx),
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element p:not(:last-child):not(#fx) { margin-bottom: 20px !important; }
/* Kenneth's name (first block) */
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element:first-child p:not(#fx),
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element:first-child p:not(#fx) { color: #2e4a66 !important; line-height: 1.75 !important; }
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element:first-child:not(#fx),
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element:first-child:not(#fx) { margin-top: 0 !important; margin-bottom: 24px !important; }
/* indented paragraphs (class fx-pq and body class fx-pc-done are added by the JS; paragraph rules wait for it) */
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element.fx-pq:not(#fx) { padding-left: 20px !important; padding-right: 20px !important; }
html body.ppp-protected.fx-pc-done .thrv-content-box.fx-tcard .thrv_text_element.fx-pq p:not(#fx) { font-size: 15px !important; line-height: 1.75 !important; }

@media (max-width: 1024px) {
    html body.ppp-protected .thrv-content-box.fx-tcard:not(#fx) { padding: 40px 40px !important; }
}
@media (max-width: 700px) {
    html body.ppp-protected .thrv-content-box.fx-tcard:not(#fx) { padding: 28px 25px !important; }
}
/* ===== END 2026 - Protected Consistency CSS ===== */

/* ===== SOURCE #90680 2026 - Protected Details ===== */
/* ===== 2026 - Protected Details CSS (protected pages, Video and Audio; whole site, front end) =====
   1) The white boxes under the video (the text card and the details / SKU box) are as wide as the video above them,
      on desktop, tablet and phone (they were stuck at 350px).
   2) The details box (Original Workshop / SKU ...) is only as wide as its data needs (never narrower than 360px, never wider
      than the video column; on a phone it is full width) and uses exactly the same look as the sales pages:
      label 12px, weight 500, capitals, spaced, dark gold #a8761a; value 15px, regular, black; rows separated by a thin
      light line; white card, 10px corners, soft shadow.
      Desktop and tablet: label left, value right. Phone (700px and under): two lines, label above value, left aligned. */

/* the two white boxes: full width of the video column */
html body.ppp-protected .fx-dwrap:not(#fx),
html body.ppp-protected .thrv-content-box.fx-tcard:not(#fx) {
  width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important;
}
html body.ppp-protected .meta-card:not(#fx) {
  max-width: 100% !important; width: max-content !important; min-width: min(100%, 360px) !important; margin: 0 !important; box-sizing: border-box !important;
  background: #fff !important; border-radius: 10px !important; box-shadow: 0 2px 14px rgba(46, 74, 102, .08) !important;
  padding: 6px 28px !important;
}
html body.ppp-protected .meta-card:not(#fx) .meta-block { font-family: 'Open Sans', sans-serif !important; }
html body.ppp-protected .meta-card:not(#fx) .meta-row {
  display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 32px !important;
  padding: 13px 0 !important; border-top: 0 !important; border-bottom: 1px solid #e6e9f2 !important;
}
html body.ppp-protected .meta-card:not(#fx) .meta-row:last-child { border-bottom: 0 !important; }
html body.ppp-protected .meta-card:not(#fx) .meta-row__label {
  font-family: 'Open Sans', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: #a8761a !important; line-height: 1.5 !important; white-space: nowrap;
}
html body.ppp-protected .meta-card:not(#fx) .meta-row__value {
  font-family: 'Open Sans', sans-serif !important; font-size: 15px !important; font-weight: 400 !important; color: #000 !important;
  line-height: 1.5 !important; text-align: right !important; text-transform: none !important; letter-spacing: normal !important;
}
@media (max-width: 700px) {
  html body.ppp-protected .meta-card:not(#fx) { padding: 6px 20px !important; width: 100% !important; }
  html body.ppp-protected .meta-card:not(#fx) .meta-row { display: block !important; padding: 12px 0 !important; }
  html body.ppp-protected .meta-card:not(#fx) .meta-row__label, html body.ppp-protected .meta-card:not(#fx) .meta-row__value { display: block !important; padding: 0 !important; }
  html body.ppp-protected .meta-card:not(#fx) .meta-row__label { margin-bottom: 3px !important; white-space: normal; }
  html body.ppp-protected .meta-card:not(#fx) .meta-row__value { text-align: left !important; }
}
/* phone: the details / SKU card is ALWAYS full width. Thrive wraps it in an inline-block that shrinks to the card's own text (multi-part pages), so those wrappers are made full width too */
@media (max-width: 700px) {
  html body.ppp-protected .fx-dwrap:not(#fx) .tve-cb, html body.ppp-protected .fx-dwrap:not(#fx) .tcb-clear, html body.ppp-protected .fx-dwrap:not(#fx) .thrv_custom_html_shortcode,
  html body.ppp-protected .fx-dwrap:not(#fx) .tve_shortcode_editor, html body.ppp-protected .meta-block:not(#fx) { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  html body.ppp-protected .meta-card:not(#fx) { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
}

/* ===== END 2026 - Protected Details CSS ===== */

/* ===== SOURCE #90650 2026 - Protected Video Border ===== */
/* ===== 2026 - Protected Video Border CSS (protected pages, body class ppp-protected) =====
   A subtle 2px rounded outline (darker blue-grey #8d9db8, because the protected page background is light lavender #f4f4fc) around each video thumbnail. The 2026 - Protected Video Border JS
   adds the class fx-vb-playing when a video starts to play, and the outline fades away. */

/* the outline is drawn on top of the video's own edge, so it can never be clipped by a parent */
body.ppp-protected .fx-vb {
  position: relative;
}
body.ppp-protected .fx-vb::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #8d9db8;
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: opacity .35s ease;
}
/* once the video plays the outline fades away */
body.ppp-protected .fx-vb.fx-vb-playing::after {
  opacity: 0;
}
/* ===== END 2026 - Protected Video Border CSS ===== */