/* ============================================================ */
/* THL Theme — single course page (single-thl_course.php).        */
/* Ported from the approved course-page-mockup.html. The nav,     */
/* announcement bar and footer come from the shared shell         */
/* (header.php / footer.php / style.css); this file styles only   */
/* the course body. Tokens are the theme's; --green is added.     */
/* ============================================================ */

:root { --green: #7fcf9b; }

/* The hero pulls up under the transparent nav (matches the homepage). */
.chero { position: relative; overflow: hidden; background: var(--ink); margin-top: calc(-1 * var(--nav-h)); }
.chero-bg { position: absolute; inset: 0; }
.chero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(0.85) brightness(0.7); transform: scale(1.18); }
.chero-bg::after {
	content: ''; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(10,13,21,0.92) 0%, rgba(10,13,21,0.78) 50%, rgba(10,13,21,0.62) 100%),
		linear-gradient(180deg, rgba(10,13,21,0.65) 0%, rgba(10,13,21,0.25) 40%, var(--bg) 100%);
}
.chero-inner {
	position: relative; z-index: 2;
	max-width: 1280px; margin: 0 auto;
	padding: calc(var(--nav-h) + 72px) 48px 72px;
	display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
	gap: 60px; align-items: center;
}
.crumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--t-soft); margin-bottom: 20px; }
.crumb a { color: var(--t-soft); text-decoration: none; transition: color 0.2s; }
.crumb a:hover { color: var(--blue-bright); }
.crumb .sep { opacity: 0.5; }
.crumb .cat { color: var(--blue-bright); background: rgba(122,175,201,0.12); border: 1px solid rgba(122,175,201,0.22); padding: 4px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.chero h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 18px; max-width: 580px; }
.speaker-row { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.speaker-avatars { display: flex; }
.speaker-avatars img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.25); background: var(--navy-deep); }
.speaker-avatars img + img { margin-left: -12px; }
.speaker-names { font-size: 14.5px; font-weight: 600; }
.speaker-names a { color: var(--t-strong); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.22); transition: border-color 0.2s, color 0.2s; }
.speaker-names a:hover { color: var(--blue-bright); border-color: var(--blue); }
.speaker-names .amp { color: var(--t-soft); font-weight: 400; padding: 0 2px; }
.speaker-names .where { display: block; font-size: 12px; font-weight: 400; color: var(--t-soft); margin-top: 1px; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.mchip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--t-mid); background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); padding: 6px 13px; border-radius: 999px; white-space: nowrap; }
.mchip svg { width: 13px; height: 13px; color: var(--blue); flex-shrink: 0; }
.chero-lede { font-size: 15px; color: var(--t-mid); line-height: 1.65; margin-bottom: 30px; max-width: 540px; }
.chero-cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cta-solid { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: var(--navy-deeper); padding: 15px 28px; border-radius: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: all 0.3s var(--ease-out); box-shadow: 0 6px 22px rgba(122,175,201,0.22); }
.cta-solid svg { width: 14px; height: 14px; }
.cta-solid:hover { background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(122,175,201,0.32); }
.cta-ghost { display: inline-flex; align-items: center; gap: 9px; color: var(--t-strong); text-decoration: none; padding: 14px 24px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.28); font-size: 12.5px; font-weight: 600; transition: all 0.25s var(--ease); }
.cta-ghost:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); }
.cta-ghost svg { width: 13px; height: 13px; }
.chero-note { margin-top: 16px; font-size: 12px; color: var(--t-soft); }
.chero-note strong { color: var(--t-mid); font-weight: 600; }

/* Preview player card (visitor right column) */
.preview-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: var(--navy-deeper); box-shadow: var(--shadow-lift); }
.preview-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.preview-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72); }
.preview-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.preview-frame .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 70px; height: 70px; border-radius: 50%; background: rgba(122,175,201,0.95); color: var(--navy-deeper); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 32px rgba(0,0,0,0.5); pointer-events: none; }
.preview-frame .play svg { width: 24px; height: 24px; fill: currentColor; transform: translateX(2px); }
.preview-caption { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; background: rgba(255,255,255,0.03); border-top: 1px solid var(--line); }
.preview-caption .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-bright); }
.preview-caption .sub { font-size: 12px; color: var(--t-soft); }

/* Member watch panel */
.watch-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-elev); box-shadow: var(--shadow-lift); }
.watch-art { position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; background: var(--navy-deep); }
.watch-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out), filter 0.4s var(--ease-out); }
.watch-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,13,21,0.05) 40%, rgba(10,13,21,0.6) 100%); }
.watch-art .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; z-index: 2; background: rgba(122,175,201,0.95); color: var(--navy-deeper); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 32px rgba(0,0,0,0.5); transition: all 0.3s var(--ease-out); }
.watch-art .play svg { width: 24px; height: 24px; fill: currentColor; transform: translateX(2px); }
a.watch-art-link { display: block; text-decoration: none; }
a.watch-art-link:hover .watch-art img { transform: scale(1.03); filter: brightness(1.08); }
a.watch-art-link:hover .watch-art .play { background: var(--blue-bright); transform: translate(-50%, -50%) scale(1.08); }
.watch-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 5px; background: rgba(255,255,255,0.16); }
.watch-progress .fill { height: 100%; background: var(--blue); border-radius: 0 3px 3px 0; transition: width 0.5s var(--ease-out); }
.watch-progress.complete .fill { background: var(--green); }

/* Course steps */
.steps { padding: 8px 10px 10px; }
.step { display: flex; align-items: center; gap: 15px; padding: 15px 14px; border-radius: 11px; transition: background 0.2s; }
.step + .step { position: relative; }
.step + .step::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--line); }
.step-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(122,175,201,0.13); border: 1px solid rgba(122,175,201,0.3); color: var(--blue-bright); }
.step-icon svg { width: 17px; height: 17px; }
.step-body { flex: 1; min-width: 0; }
.step-title { font-size: 14px; font-weight: 700; }
.step-sub { font-size: 12px; color: var(--t-soft); margin-top: 2px; line-height: 1.45; }
.step-action { flex-shrink: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy-deeper); background: var(--blue); padding: 9px 15px; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.15s; }
.step-action:hover { background: var(--blue-bright); transform: translateY(-1px); }
.step-action.ghost { background: transparent; color: var(--blue-bright); border: 1px solid var(--line-2); }
.step-action.ghost:hover { background: rgba(122,175,201,0.1); }
.step.done .step-icon { background: rgba(127,207,155,0.13); border-color: rgba(127,207,155,0.4); color: var(--green); }
.step.done .step-sub { color: rgba(127,207,155,0.8); }
.step.locked { opacity: 0.55; }
.step.locked .step-icon { background: rgba(255,255,255,0.05); border-color: var(--line-2); color: var(--t-soft); }
.step.locked .step-action { background: rgba(255,255,255,0.07); color: var(--t-soft); cursor: not-allowed; pointer-events: none; }
.steps-foot { padding: 12px 24px 16px; font-size: 11.5px; color: var(--t-soft); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.steps-foot svg { width: 13px; height: 13px; color: var(--blue); flex-shrink: 0; }

/* Member progress line */
.prog-line { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; max-width: 480px; }
.prog-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.prog-bar .fill { height: 100%; background: var(--blue); border-radius: 3px; transition: width 0.5s var(--ease-out); }
.prog-bar.complete .fill { background: var(--green); }
.prog-lbl { font-size: 12.5px; font-weight: 600; color: var(--t-mid); white-space: nowrap; }
.prog-lbl.complete { color: var(--green); }

/* Completed badge (member, course complete) */
.chero-done { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.chero-done-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); background: rgba(127,207,155,0.12); border: 1px solid rgba(127,207,155,0.4); padding: 6px 13px; border-radius: 999px; }
.chero-done-badge svg { width: 13px; height: 13px; }
.chero-done-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--blue-bright); text-decoration: none; }
.chero-done-link svg { width: 13px; height: 13px; }
.chero-done-link:hover { color: var(--t-strong); }

/* Quiet preview link (members) — now a button that reveals the embedded preview */
.preview-quiet { margin-top: 14px; font-size: 12.5px; }
.preview-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--t-soft); transition: color 0.2s; }
.preview-toggle span { transition: text-decoration-color 0.2s; }
.preview-toggle:hover { color: var(--blue-bright); }
.preview-toggle:hover span, .preview-toggle:focus-visible span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(122,175,201,0.5); }
.preview-toggle svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.25s var(--ease-out); }
.preview-toggle[aria-expanded="true"] svg { transform: scale(1.1); }

/* Member preview reveal — expands as a dark band below the hero, autoplays */
.member-preview { background: var(--bg-deep); border-bottom: 1px solid var(--line); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.55s var(--ease-out), opacity 0.4s var(--ease-out); }
.member-preview.is-open { max-height: 1000px; opacity: 1; }
.member-preview-inner { max-width: 920px; margin: 0 auto; padding: 32px 48px 42px; }
.mp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.mp-titles .lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-bright); }
.mp-titles .lbl svg { width: 13px; height: 13px; fill: currentColor; }
.mp-titles .sub { display: block; margin-top: 8px; font-size: 13px; color: var(--t-soft); line-height: 1.5; }
.mp-titles .sub a { color: var(--blue-bright); text-decoration: none; }
.mp-titles .sub a:hover, .mp-titles .sub a:focus-visible { color: var(--t-strong); text-decoration: underline; text-underline-offset: 3px; }
.mp-close { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; background: rgba(255,255,255,0.05); border: 1px solid var(--line-2); color: var(--t-mid); font-size: 12px; font-weight: 600; padding: 9px 15px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.mp-close:hover { background: rgba(255,255,255,0.1); color: var(--t-strong); border-color: rgba(255,255,255,0.32); }
.mp-close svg { width: 13px; height: 13px; }
.mp-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-lift); }
.mp-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 1020px) {
	.chero-inner { grid-template-columns: 1fr; gap: 44px; padding: calc(var(--nav-h) + 52px) 24px 56px; }
	.chero h1, .chero-lede { max-width: 640px; }
	/* The hero blur gradient is tuned for the short, wide DESKTOP hero, where its
	   transparent band (0.25 at 40%) sits behind the headline. On the TALL stacked
	   mobile hero that band drops down near the preview card, so the blurred image
	   showed through as a "bar" before About. The desktop fade also ends on --bg
	   while About is --bg-deep, leaving a faint shade seam. Re-tune for the stack:
	   drop the side-light gradient (pointless when stacked), keep the image covered
	   lower down, and land on --bg-deep so the hero blends straight into About. */
	.chero-bg::after {
		background: linear-gradient(180deg, rgba(10,13,21,0.74) 0%, rgba(10,13,21,0.5) 42%, var(--bg-deep) 86%);
	}
	.member-preview-inner { padding: 26px 24px 34px; }
	.member-preview.is-open { max-height: 820px; }
}
@media (max-width: 560px) {
	.chero-cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
	.chero-cta-row .cta-solid, .chero-cta-row .cta-ghost { justify-content: center; padding-top: 15px; padding-bottom: 15px; }
	.chero-cta-row .cta-ghost { padding-top: 14px; padding-bottom: 14px; }
	.mp-head { flex-direction: column; align-items: flex-start; gap: 13px; }
	.mp-close { align-self: flex-end; }
}

/* ============================================================ */
/* SECTION SCAFFOLD                                              */
/* ============================================================ */
.section { padding: 72px 48px; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 14px; }
.section h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
@media (max-width: 760px) { .section { padding: 52px 24px; } }

/* WHAT YOU'LL LEARN */
.learn { border-top: 1px solid var(--line); background: var(--bg); }
.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 28px; }
.learn-item { display: flex; gap: 15px; align-items: flex-start; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 13px; padding: 19px 22px; font-size: 14px; color: var(--t-mid); line-height: 1.6; }
.learn-item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--blue); }
@media (max-width: 820px) { .learn-grid { grid-template-columns: 1fr; } }

/* ABOUT + DETAILS */
.about { background: var(--bg-deep); border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 60px; align-items: start; }
.about-body p { font-size: 15px; color: var(--t-mid); line-height: 1.75; margin-bottom: 18px; }
.about-body p strong { color: var(--t-strong); font-weight: 600; }
.about-body ul, .about-body ol { margin: 0 0 18px 1.1em; color: var(--t-mid); font-size: 15px; line-height: 1.75; }
.about-body li + li { margin-top: 0.4em; }
.details-card { position: sticky; top: calc(var(--nav-h) + 22px); background: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid var(--line-2); border-radius: 16px; padding: 26px 28px; }
.details-card h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 16px; }
.detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.detail-row:last-of-type { border-bottom: 0; }
.detail-row .k { color: var(--t-soft); flex-shrink: 0; }
.detail-row .v { color: var(--t-strong); font-weight: 600; text-align: right; }
.details-cta { margin-top: 18px; }
.details-cta .cta-solid { width: 100%; justify-content: center; padding: 14px 20px; }
.details-foot { margin-top: 13px; text-align: center; font-size: 11.5px; color: var(--t-soft); }
@media (max-width: 940px) {
	.about-grid { grid-template-columns: 1fr; gap: 40px; }
	.details-card { position: static; max-width: 460px; margin: 0 auto; width: 100%; }
}

/* HOW CPD WORKS */
.cpdflow { border-top: 1px solid var(--line); background: var(--bg); }
.cpdflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.flow-step { position: relative; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 15px; padding: 26px 26px 24px; }
.flow-step .n { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 13px; display: flex; align-items: center; gap: 9px; }
.flow-step .n::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.flow-step h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.flow-step p { font-size: 13px; color: var(--t-soft); line-height: 1.6; }
.flow-step p strong { color: var(--t-mid); font-weight: 600; }
@media (max-width: 820px) { .cpdflow-grid { grid-template-columns: 1fr; } }

/* SPEAKERS */
.speakers { background: var(--bg-deep); border-top: 1px solid var(--line); }
.speakers-grid { display: grid; gap: 22px; margin-top: 30px; }
.speakers-grid.two { grid-template-columns: 1fr 1fr; }
.speaker-card { display: flex; gap: 26px; align-items: flex-start; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 17px; padding: 30px 32px; }
.speaker-card .photo { flex-shrink: 0; }
.speaker-card .photo img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(122,175,201,0.35); }
.speaker-card h3 { font-size: 18.5px; font-weight: 700; margin-bottom: 3px; }
.speaker-card .role { font-size: 12px; color: var(--blue-bright); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.speaker-card .bio { font-size: 13.5px; color: var(--t-mid); line-height: 1.7; margin-bottom: 16px; }
.speaker-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.speaker-links a { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--blue-bright); text-decoration: none; transition: color 0.2s, gap 0.2s; }
.speaker-links a:hover { color: var(--t-strong); }
.speaker-links svg { width: 13px; height: 13px; }
.speakers-grid.two .speaker-card { flex-direction: column; }
.speakers-grid.two .speaker-card .photo img { width: 92px; height: 92px; }
@media (max-width: 920px) { .speakers-grid.two { grid-template-columns: 1fr; } .speakers-grid.two .speaker-card { flex-direction: row; } }
@media (max-width: 640px) { .speaker-card, .speakers-grid.two .speaker-card { flex-direction: column; padding: 26px 24px; } }

/* MEMBERSHIP BAND (visitor only) */
.membership { padding: 88px 48px; background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(122,175,201,0.12) 0%, transparent 55%), linear-gradient(180deg, #0e1623 0%, var(--bg-deep) 100%); border-top: 1px solid var(--line); }
.membership-inner { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1fr 410px; gap: 64px; align-items: center; }
.membership h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 18px; }
.membership .lede { font-size: 15.5px; color: var(--t-mid); line-height: 1.65; margin-bottom: 28px; max-width: 460px; }
.member-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.member-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 14.5px; color: var(--t-mid); }
.member-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--blue); }
.member-list strong { color: var(--t-strong); font-weight: 600; }
.price-card { background: linear-gradient(165deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.025) 100%); border: 1px solid rgba(122,175,201,0.28); border-radius: 18px; padding: 38px 36px; box-shadow: 0 30px 80px rgba(0,0,0,0.4); position: relative; overflow: hidden; }
.price-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(122,175,201,0.7), transparent); }
.price-card .plan { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 14px; }
.price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.price-row .price { font-size: 54px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.price-row .per { font-size: 14px; color: var(--t-soft); font-weight: 500; }
.price-note { font-size: 12.5px; color: var(--t-soft); margin-bottom: 8px; }
.price-rise { display: inline-block; font-size: 11.5px; font-weight: 600; color: #ffd9a8; background: rgba(255,180,90,0.1); border: 1px solid rgba(255,180,90,0.25); border-radius: 999px; padding: 5px 12px; margin: 10px 0 24px; }
.price-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--blue); color: var(--navy-deeper); padding: 16px 20px; border-radius: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: all 0.3s var(--ease-out); }
.price-cta svg { width: 14px; height: 14px; }
.price-cta:hover { background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(122,175,201,0.3); }
.price-foot { margin-top: 16px; text-align: center; font-size: 11.5px; color: var(--t-soft); }
@media (max-width: 920px) {
	.membership { padding: 64px 24px; }
	.membership-inner { grid-template-columns: 1fr; gap: 44px; }
	.price-card { max-width: 460px; margin: 0 auto; width: 100%; }
}

/* ACCREDITATION STRIP */
.accred { padding: 64px 48px; background: var(--bg-deep); border-top: 1px solid var(--line); }
.accred-head { max-width: 880px; margin: 0 auto 28px; }
.accred-pace { max-width: 880px; margin: 0 auto; display: flex; gap: 30px; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 16px; padding: 24px 30px; }
.accred-logo { flex-shrink: 0; background: white; border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; }
.accred-logo img { height: 66px; width: auto; }
.accred-text { font-size: 12.5px; color: var(--t-soft); line-height: 1.7; }
.accred-text strong { color: var(--t-mid); font-weight: 600; display: block; font-size: 14px; margin-bottom: 6px; }
.accred-bodies { max-width: 880px; margin: 16px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.accred-body { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.accred-body .region { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); font-weight: 600; margin-bottom: 6px; }
.accred-body .body { font-size: 12.5px; color: var(--t-mid); line-height: 1.55; }
.accred-note { max-width: 880px; margin: 18px auto 0; font-size: 12px; color: var(--t-soft); line-height: 1.7; }
.accred-note a { color: var(--blue-bright); text-decoration: none; }
.accred-note a:hover, .accred-note a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.accred-note--small { font-size: 11px; margin-top: 10px; color: rgba(255,255,255,0.36); }
@media (max-width: 880px) { .accred-bodies { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .accred { padding: 48px 24px; } .accred-pace { flex-direction: column; text-align: center; gap: 20px; padding: 24px; } }
@media (max-width: 480px) { .accred-bodies { grid-template-columns: 1fr; } }

/* ============================================================ */
/* RELATED RAIL (reuses thl_render_course_card — homepage card)  */
/* ============================================================ */
.related { padding: 64px 0 56px; background: var(--bg); border-top: 1px solid var(--line); }
.related-header { max-width: 1280px; margin: 0 auto 24px; padding: 0 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.related-header .blurb { font-size: 13.5px; color: var(--t-soft); margin-top: 6px; }
.related .rail-seeall { color: var(--t-mid); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; transition: color 0.2s var(--ease), gap 0.25s var(--ease); }
.related .rail-seeall:hover { color: var(--blue-bright); gap: 10px; }
.related .rail-seeall svg { width: 12px; height: 12px; }
.related .rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 48px 30px; scroll-padding-left: 48px; max-width: 1280px; margin: 0 auto; scrollbar-width: none; }
.related .rail::-webkit-scrollbar { display: none; }
.related .card { flex: 0 0 300px; scroll-snap-align: start; position: relative; display: block; text-decoration: none; text-align: left; transition: transform 0.4s var(--ease-out); }
.related .card-art { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--navy-deep); border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 2px 10px rgba(0,0,0,0.35); transition: box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out); }
.related .card .card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.4s var(--ease-out), transform 0.6s var(--ease-out); }
.related .card .card-image--empty { background: linear-gradient(150deg, var(--navy-deep), var(--navy-deeper)); }
.related .card-new { position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-deeper); background: var(--blue-bright); padding: 5px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.related .card-play-btn { position: absolute; bottom: -22px; right: 18px; width: 50px; height: 50px; border-radius: 50%; background: var(--blue); color: var(--navy-deeper); display: flex; align-items: center; justify-content: center; z-index: 5; padding: 0; box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 4px var(--bg); transition: all 0.3s var(--ease-out); }
.related .card-play-btn svg { width: 16px; height: 16px; fill: currentColor; transform: translateX(1px); }
@media (hover: hover) {
	.related .card:hover { transform: translateY(-6px); }
	.related .card:hover .card-art { box-shadow: var(--shadow-lift); border-color: rgba(122,175,201,0.35); }
	.related .card:hover .card-image { filter: brightness(1.07); transform: scale(1.03); }
	.related .card:hover .card-play-btn { background: var(--blue-bright); transform: scale(1.1); box-shadow: 0 10px 24px rgba(122,175,201,0.4), 0 0 0 4px var(--bg); }
}
@media (max-width: 768px) {
	.related-header { padding: 0 24px; }
	.related .rail { padding: 8px 24px 26px; scroll-padding-left: 24px; }
	.related .card { flex: 0 0 78vw; max-width: 340px; }
}

/* ============================================================ */
/* MOBILE STICKY ACTION BAR                                      */
/* ============================================================ */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 18px calc(11px + env(safe-area-inset-bottom)); background: rgba(12,16,24,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line-2); transform: translateY(110%); transition: transform 0.35s var(--ease); }
.mobile-bar.show { transform: translateY(0); }
.mb-info { font-size: 13px; color: var(--t-mid); line-height: 1.3; min-width: 0; }
.mb-info strong { display: block; font-size: 15px; font-weight: 700; color: var(--t-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-info .mb-sub { display: block; font-size: 11px; color: var(--t-soft); }
.mb-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: var(--navy-deeper); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 13px 20px; border-radius: 9px; text-decoration: none; }
.mb-cta:active { background: var(--blue-bright); }
@media (max-width: 768px) { .mobile-bar { display: flex; } }

/* ============================================================ */
/* WRITTEN-COURSE VIEW (written-course-view.php)                 */
/* ============================================================ */
.wc-card { align-self: start; background: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid var(--line-2); border-radius: 16px; padding: 18px 10px 6px; box-shadow: var(--shadow-lift); }
.wc-card-head { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-bright); padding: 4px 14px 10px; }
.lesson-links { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.lesson-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--t-mid); text-decoration: none; font-size: 14px; font-weight: 600; transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s; }
.lesson-link:hover { border-color: rgba(122,175,201,0.4); background: rgba(122,175,201,0.07); color: var(--t-strong); transform: translateX(2px); }
.lesson-link > span { flex: 1; }
.lesson-link svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--blue); }
.lesson-link svg:last-child { width: 14px; height: 14px; color: var(--t-soft); }