/* ==========================================================================
   THE SMILE CHANNEL — CINEMATIC PLATFORM THEME (LIGHT MODE)
   Main Stylesheet
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS — LIGHT PALETTE
   ========================================================================== */
:root {
	/* Color — Base surfaces (warm whites & creams) */
	--tsc-white:        #FFFFFF;
	--tsc-cream:        #FAF8F3;
	--tsc-cream-2:      #F4F1E8;
	--tsc-cream-3:      #ECE8DC;
	--tsc-line:         #E5E0D2;
	--tsc-line-soft:    rgba(60, 50, 30, 0.08);

	/* Color — Text */
	--tsc-text:         #1A1814;
	--tsc-text-2:       #3D3830;
	--tsc-text-mute:    #6B6558;
	--tsc-text-dim:     #9A9384;

	/* Color — Gold accent */
	--tsc-gold:         #B8862A;
	--tsc-gold-soft:    #D4A24C;
	--tsc-gold-deep:    #8B6420;
	--tsc-gold-pale:    #F5EAD0;
	--tsc-glow:         rgba(184, 134, 42, 0.18);

	/* Color — States */
	--tsc-glass:        rgba(255, 255, 255, 0.7);
	--tsc-success:      #2D7A4F;
	--tsc-live:         #DC2626;

	/* Typography */
	--font-display:     'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-ui:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--text-hero:        clamp(3rem, 6vw, 5.5rem);
	--text-h1:          clamp(2.25rem, 4vw, 3.5rem);
	--text-h2:          clamp(1.625rem, 2.5vw, 2.25rem);
	--text-h3:          1.375rem;
	--text-h4:          1.125rem;
	--text-body:        1.0625rem;
	--text-small:       0.875rem;
	--text-micro:       0.75rem;

	/* Spacing — 8px base */
	--space-1:          0.25rem;
	--space-2:          0.5rem;
	--space-3:          0.75rem;
	--space-4:          1rem;
	--space-5:          1.5rem;
	--space-6:          2rem;
	--space-7:          3rem;
	--space-8:          4rem;
	--space-9:          6rem;
	--space-10:         8rem;

	--section-py:       clamp(4rem, 8vw, 8rem);

	/* Layout */
	--container-max:    1440px;
	--container-read:   1280px;
	--container-text:   720px;
	--container-px:     clamp(1rem, 4vw, 2.5rem);

	/* Radius */
	--radius-sm:        6px;
	--radius:           12px;
	--radius-lg:        20px;
	--radius-pill:      999px;

	/* Motion */
	--ease:             cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast:         200ms;
	--dur:              400ms;
	--dur-slow:         700ms;

	/* Shadows — soft, warm, elevation-based */
	--shadow-sm:        0 2px 8px rgba(60, 50, 30, 0.06);
	--shadow:           0 12px 32px -12px rgba(60, 50, 30, 0.15);
	--shadow-lg:        0 24px 64px -24px rgba(60, 50, 30, 0.22);
	--shadow-glow:      0 0 0 1px rgba(184, 134, 42, 0.35), 0 16px 40px -16px rgba(184, 134, 42, 0.25);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.smile-channel-theme {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-body);
	line-height: 1.6;
	color: var(--tsc-text);
	background: var(--tsc-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv11', 'ss01', 'ss03';
	overflow-x: hidden;
	padding-top: 80px; /* offset for fixed header */
}

@media (max-width: 900px) {
	body.smile-channel-theme { padding-top: 70px; }
}

/* Elementor Canvas template has no theme header — kill the offset */
body.smile-channel-theme.tsc-elementor-canvas,
body.smile-channel-theme.elementor-template-canvas {
	padding-top: 0;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--tsc-gold); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--tsc-gold-deep); }

::selection { background: var(--tsc-gold); color: var(--tsc-white); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--tsc-cream); }
::-webkit-scrollbar-thumb {
	background: var(--tsc-cream-3);
	border-radius: 6px;
	border: 3px solid var(--tsc-cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--tsc-gold-soft); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-4);
	color: var(--tsc-text-2);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin: 0 0 var(--space-4); }

.text-hero {
	font-family: var(--font-display);
	font-size: var(--text-hero);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 500;
}

.text-eyebrow {
	font-family: var(--font-ui);
	font-size: var(--text-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--tsc-gold);
	margin-bottom: var(--space-4);
	display: inline-block;
}

.text-mute { color: var(--tsc-text-mute); }
.text-italic { font-style: italic; }

.gradient-text {
	background: linear-gradient(135deg, var(--tsc-gold-deep) 0%, var(--tsc-gold) 50%, var(--tsc-gold-soft) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.tsc-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-px);
}

.tsc-container--read { max-width: var(--container-read); }
.tsc-container--text { max-width: var(--container-text); }

.tsc-section { padding-block: var(--section-py); position: relative; }
.tsc-section--alt { background: var(--tsc-cream-2); }

.tsc-section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
	flex-wrap: wrap;
}

.tsc-section-head h2 { margin: 0; }

.tsc-section-head .view-all {
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--tsc-text-mute);
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}

.tsc-section-head .view-all:hover { color: var(--tsc-gold); gap: var(--space-3); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.tsc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.95rem 1.75rem;
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: all var(--dur) var(--ease);
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	color: var(--tsc-text);
	line-height: 1;
}

.tsc-btn--primary {
	background: var(--tsc-text);
	color: var(--tsc-cream);
	border-color: var(--tsc-text);
}

.tsc-btn--primary:hover {
	background: var(--tsc-gold);
	border-color: var(--tsc-gold);
	color: var(--tsc-white);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -12px rgba(184, 134, 42, 0.5);
}

.tsc-btn--gold {
	background: var(--tsc-gold);
	color: var(--tsc-white);
	border-color: var(--tsc-gold);
}

.tsc-btn--gold:hover {
	background: var(--tsc-gold-deep);
	border-color: var(--tsc-gold-deep);
	color: var(--tsc-white);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -12px rgba(184, 134, 42, 0.6);
}

.tsc-btn--ghost {
	background: transparent;
	color: var(--tsc-text);
	border-color: var(--tsc-line);
}

.tsc-btn--ghost:hover {
	background: var(--tsc-cream-2);
	border-color: var(--tsc-gold);
	color: var(--tsc-gold-deep);
	transform: translateY(-2px);
}

.tsc-btn--lg { padding: 1.15rem 2.25rem; font-size: 1rem; }
.tsc-btn--sm { padding: 0.65rem 1.25rem; font-size: var(--text-micro); }

.tsc-btn .arrow { transition: transform var(--dur-fast) var(--ease); }
.tsc-btn:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   6. HEADER — solid white, sticky, balanced
   ========================================================================== */
.tsc-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #FFFFFF;
	border-bottom: 1px solid var(--tsc-line);
	box-shadow: 0 1px 0 rgba(60, 50, 30, 0.04);
	transition: box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
}

/* Slightly stronger shadow + tighter padding once scrolled */
.tsc-header--scrolled {
	box-shadow: 0 6px 24px -12px rgba(60, 50, 30, 0.18);
}

.tsc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	min-height: 80px;
	padding-block: var(--space-3);
	transition: min-height var(--dur) var(--ease);
}

.tsc-header--scrolled .tsc-header__inner {
	min-height: 64px;
}

/* Logo column — fixed to the left */
.tsc-logo {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--tsc-text);
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
	line-height: 1;
	text-decoration: none;
}

.tsc-logo:hover { color: var(--tsc-text); }
.tsc-logo .accent { color: var(--tsc-gold); }

/* WordPress custom logo (image) — constrained so it never overflows the header */
.tsc-logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.tsc-logo .custom-logo {
	display: block;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: max-height var(--dur) var(--ease);
}

.tsc-header--scrolled .tsc-logo .custom-logo {
	max-height: 44px;
}

/* ==========================================================================
   6.1 HOMEPAGE TRANSPARENT HEADER
   On the front page only, header starts transparent over the dark hero,
   then transitions to solid white on scroll past the hero.
   ========================================================================== */
body.tsc-home-transparent {
	padding-top: 0; /* hero handles its own top spacing */
}

body.tsc-home-transparent .tsc-header {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

/* Light text on transparent header */
body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-logo {
	color: #FFFFFF;
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-logo .accent {
	color: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-nav__menu a {
	color: #FFFFFF;
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-nav__menu a:hover {
	color: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-nav__menu a::after {
	background: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-btn--ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.4);
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--tsc-gold-soft);
	color: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-mobile-toggle {
	color: #FFFFFF;
}

/* Once user scrolls past hero, switch to solid white header */
body.tsc-home-transparent .tsc-header.tsc-header--scrolled {
	background: #FFFFFF;
	border-bottom-color: var(--tsc-line);
	box-shadow: 0 6px 24px -12px rgba(60, 50, 30, 0.18);
}

/* Dark hero styling — overrides the light hero on transparent-home pages */
body.tsc-home-transparent .tsc-hero {
	min-height: 100vh;
	background: #0A0A0B;
	padding-top: 120px; /* room for the transparent header */
}

body.tsc-home-transparent .tsc-hero__bg::before {
	background:
		radial-gradient(ellipse at 30% 40%, rgba(212, 162, 76, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 60%, rgba(139, 100, 32, 0.12) 0%, transparent 50%),
		linear-gradient(180deg, #0A0A0B 0%, #06060A 100%);
}

body.tsc-home-transparent .tsc-hero__bg::after {
	background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 10, 11, 0.95) 100%);
}

body.tsc-home-transparent .tsc-hero__title {
	color: #FFFFFF;
}

body.tsc-home-transparent .tsc-hero__title em {
	color: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-hero__sub {
	color: rgba(255, 255, 255, 0.72);
}

body.tsc-home-transparent .tsc-hero .text-eyebrow {
	color: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-hero__scroll {
	color: rgba(255, 255, 255, 0.5);
}

/* Hero CTAs on dark hero */
body.tsc-home-transparent .tsc-hero .tsc-btn--primary {
	background: var(--tsc-gold);
	border-color: var(--tsc-gold);
	color: #FFFFFF;
}

body.tsc-home-transparent .tsc-hero .tsc-btn--primary:hover {
	background: var(--tsc-gold-soft);
	border-color: var(--tsc-gold-soft);
	color: #0A0A0B;
}

body.tsc-home-transparent .tsc-hero .tsc-btn--ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.4);
}

body.tsc-home-transparent .tsc-hero .tsc-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--tsc-gold-soft);
	color: var(--tsc-gold-soft);
}

.tsc-nav { display: flex; align-items: center; gap: var(--space-6); }

.tsc-nav__menu {
	display: flex;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tsc-nav__menu a {
	color: var(--tsc-text);
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 500;
	letter-spacing: 0.02em;
	position: relative;
	padding: var(--space-2) 0;
}

.tsc-nav__menu a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--tsc-gold);
	transition: width var(--dur) var(--ease);
}

.tsc-nav__menu a:hover { color: var(--tsc-gold-deep); }

.tsc-nav__menu a:hover::after,
.tsc-nav__menu .current-menu-item > a::after { width: 100%; }

.tsc-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.tsc-mobile-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--tsc-text);
	cursor: pointer;
	padding: var(--space-2);
	margin-left: auto;
}

.tsc-mobile-toggle__close { display: none; }

@media (max-width: 900px) {
	.tsc-mobile-toggle { display: block; }
	.tsc-nav.is-open .tsc-mobile-toggle__open { display: none; }
	.tsc-nav.is-open .tsc-mobile-toggle__close { display: block; }

	/* Hide the inner wrapper (menu + CTA) by default on mobile */
	.tsc-nav__inner {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--tsc-white);
		padding: var(--space-4) var(--space-5);
		border-top: 1px solid var(--tsc-line);
		box-shadow: 0 12px 32px -12px rgba(60, 50, 30, 0.18);
		max-height: calc(100vh - 80px);
		overflow-y: auto;
	}

	/* Show as a dropdown when nav has the is-open class */
	.tsc-nav.is-open .tsc-nav__inner {
		display: flex;
	}

	/* Stack menu items vertically inside the dropdown */
	.tsc-nav__menu {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.tsc-nav__menu li {
		width: 100%;
		border-bottom: 1px solid var(--tsc-line);
	}

	.tsc-nav__menu li:last-child {
		border-bottom: none;
	}

	.tsc-nav__menu a {
		display: block;
		padding: var(--space-4) 0;
		color: var(--tsc-text);
		font-size: 1rem;
	}

	/* Underline animation doesn't make sense on stacked mobile items */
	.tsc-nav__menu a::after { display: none; }

	/* CTA button gets a top divider and full width inside the dropdown */
	.tsc-nav__cta {
		display: block;
		text-align: center;
		margin-top: var(--space-4);
		padding: var(--space-3) var(--space-4);
	}

	/* CRITICAL: when the mobile dropdown is open on the homepage transparent
	   header, the dropdown background is white — so the menu links must
	   render in the normal dark text color, not the white color used over
	   the dark hero. Override the transparent-header rules. */
	body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-nav.is-open .tsc-nav__menu a {
		color: var(--tsc-text);
	}
	body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-nav.is-open .tsc-nav__menu a:hover {
		color: var(--tsc-gold-deep);
	}
	body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-nav.is-open .tsc-nav__cta {
		color: var(--tsc-text);
		border-color: var(--tsc-line);
	}
	body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-nav.is-open .tsc-nav__cta:hover {
		background: var(--tsc-cream-2);
		border-color: var(--tsc-gold);
		color: var(--tsc-gold-deep);
	}
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.tsc-hero {
	position: relative;
	min-height: calc(100vh - 80px);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}

.tsc-hero__bg { position: absolute; inset: 0; z-index: 0; }

.tsc-hero__bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 40%, rgba(212, 162, 76, 0.16) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 60%, rgba(184, 134, 42, 0.10) 0%, transparent 50%),
		linear-gradient(180deg, var(--tsc-cream) 0%, var(--tsc-cream-2) 100%);
}

.tsc-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 30%, rgba(250, 248, 243, 0.6) 100%);
	pointer-events: none;
}

.tsc-hero__content { position: relative; z-index: 2; max-width: 760px; }

.tsc-hero__title {
	font-size: var(--text-hero);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-5);
	font-weight: 500;
	color: var(--tsc-text);
}

.tsc-hero__title em { font-style: italic; color: var(--tsc-gold); }

.tsc-hero__sub {
	font-size: 1.25rem;
	color: var(--tsc-text-mute);
	max-width: 580px;
	margin: 0 0 var(--space-7);
	line-height: 1.6;
}

.tsc-hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.tsc-hero__scroll {
	position: absolute;
	bottom: var(--space-7);
	left: 50%;
	transform: translateX(-50%);
	color: var(--tsc-text-dim);
	font-size: var(--text-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	animation: tsc-float 3s ease-in-out infinite;
}

@keyframes tsc-float {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(8px); }
}

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.tsc-card {
	position: relative;
	background: var(--tsc-white);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	border: 1px solid var(--tsc-line);
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow-sm);
}

.tsc-card:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow:
		0 24px 48px -20px rgba(60, 50, 30, 0.25),
		0 0 0 1px rgba(184, 134, 42, 0.35);
}

.tsc-card__media {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--tsc-cream-3);
}

.tsc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.tsc-card:hover .tsc-card__media img { transform: scale(1.08); }

.tsc-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(26, 24, 20, 0.85) 100%);
	pointer-events: none;
}

.tsc-card__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-5);
	z-index: 2;
}

.tsc-card__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 var(--space-1);
	color: var(--tsc-white);
	line-height: 1.2;
}

.tsc-card__meta {
	font-size: var(--text-micro);
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tsc-card__featured {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	background: var(--tsc-gold);
	color: var(--tsc-white);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	z-index: 3;
	box-shadow: 0 4px 12px rgba(184, 134, 42, 0.4);
}

/* Episode card variant — landscape, light body */
.tsc-card--episode .tsc-card__media { aspect-ratio: 16 / 9; }

.tsc-card--episode .tsc-card__body {
	position: static;
	padding: var(--space-5);
	background: var(--tsc-white);
}

.tsc-card--episode .tsc-card__title { color: var(--tsc-text-2); }
.tsc-card--episode .tsc-card__meta { color: var(--tsc-text-mute); }

.tsc-card--episode .tsc-card__media::after {
	background: linear-gradient(180deg, transparent 60%, rgba(26, 24, 20, 0.4) 100%);
}

.tsc-card--episode .tsc-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	z-index: 3;
}

.tsc-card--episode:hover .tsc-card__play { opacity: 1; }

.tsc-card__play-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tsc-white);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tsc-gold);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	transform: scale(0.8);
	transition: transform var(--dur) var(--ease);
}

.tsc-card--episode:hover .tsc-card__play-icon { transform: scale(1); }

.tsc-card__duration {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	color: var(--tsc-text);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	font-size: var(--text-micro);
	font-weight: 600;
	z-index: 3;
}

/* ==========================================================================
   9. CAROUSEL / HORIZONTAL ROWS
   ========================================================================== */
.tsc-row {
	position: relative;
	margin-inline: calc(var(--container-px) * -1);
	padding-inline: var(--container-px);
}

.tsc-row__track {
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--container-px);
	padding-block: var(--space-3);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tsc-row__track::-webkit-scrollbar { display: none; }

.tsc-row__track > * { flex: 0 0 280px; scroll-snap-align: start; }
.tsc-row--landscape .tsc-row__track > * { flex: 0 0 360px; }

.tsc-row::before,
.tsc-row::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	pointer-events: none;
	z-index: 5;
}

.tsc-row::before { left: 0; background: linear-gradient(90deg, var(--tsc-cream) 0%, transparent 100%); }
.tsc-row::after { right: 0; background: linear-gradient(-90deg, var(--tsc-cream) 0%, transparent 100%); }

.tsc-section--alt .tsc-row::before { background: linear-gradient(90deg, var(--tsc-cream-2) 0%, transparent 100%); }
.tsc-section--alt .tsc-row::after { background: linear-gradient(-90deg, var(--tsc-cream-2) 0%, transparent 100%); }

/* ==========================================================================
   10. GRID
   ========================================================================== */
.tsc-grid { display: grid; gap: var(--space-5); }
.tsc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tsc-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.tsc-grid--4 { grid-template-columns: repeat(3, 1fr); }
	.tsc-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.tsc-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.tsc-grid--3 { grid-template-columns: 1fr; }
}

.tsc-grid--animate > * { opacity: 0; animation: tsc-fade-up var(--dur-slow) var(--ease) forwards; }

@keyframes tsc-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tsc-grid--animate > *:nth-child(1) { animation-delay: 0ms; }
.tsc-grid--animate > *:nth-child(2) { animation-delay: 60ms; }
.tsc-grid--animate > *:nth-child(3) { animation-delay: 120ms; }
.tsc-grid--animate > *:nth-child(4) { animation-delay: 180ms; }
.tsc-grid--animate > *:nth-child(5) { animation-delay: 240ms; }
.tsc-grid--animate > *:nth-child(6) { animation-delay: 300ms; }
.tsc-grid--animate > *:nth-child(7) { animation-delay: 360ms; }
.tsc-grid--animate > *:nth-child(8) { animation-delay: 420ms; }

/* ==========================================================================
   11. WHY SECTION (FEATURE COLUMNS)
   ========================================================================== */
.tsc-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-7);
}

@media (max-width: 900px) { .tsc-features { grid-template-columns: 1fr; } }

.tsc-feature { text-align: left; }

.tsc-feature__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tsc-gold-pale);
	border: 1px solid rgba(184, 134, 42, 0.25);
	border-radius: var(--radius);
	color: var(--tsc-gold);
	margin-bottom: var(--space-5);
}

.tsc-feature__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	margin: 0 0 var(--space-3);
	color: var(--tsc-text-2);
}

.tsc-feature__text { color: var(--tsc-text-mute); margin: 0; line-height: 1.7; }

/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */
.tsc-testimonials {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--space-7);
	align-items: center;
}

@media (max-width: 900px) { .tsc-testimonials { grid-template-columns: 1fr; } }

.tsc-testimonial-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--tsc-cream-3);
	cursor: pointer;
	border: 1px solid var(--tsc-line);
	box-shadow: var(--shadow);
}

.tsc-testimonial-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.tsc-testimonial-video:hover img { transform: scale(1.04); }

.tsc-testimonial-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tsc-testimonial-video__play-icon {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--tsc-white);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tsc-gold);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
	transition: transform var(--dur) var(--ease);
}

.tsc-testimonial-video:hover .tsc-testimonial-video__play-icon { transform: scale(1.1); }

.tsc-reviews { display: flex; flex-direction: column; gap: var(--space-4); }

.tsc-review {
	background: var(--tsc-white);
	border: 1px solid var(--tsc-line);
	border-radius: var(--radius);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
	transition: all var(--dur) var(--ease);
}

.tsc-review:hover {
	border-color: var(--tsc-gold-soft);
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.tsc-review__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.tsc-review__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tsc-cream-3);
	flex-shrink: 0;
	overflow: hidden;
}

.tsc-review__avatar img { width: 100%; height: 100%; object-fit: cover; }

.tsc-review__name {
	font-weight: 600;
	font-size: var(--text-small);
	color: var(--tsc-text);
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.tsc-review__verified { color: var(--tsc-gold); font-size: 0.875rem; }
.tsc-review__title { font-size: var(--text-micro); color: var(--tsc-text-mute); }

.tsc-review__quote {
	font-size: var(--text-small);
	color: var(--tsc-text);
	margin: 0;
	line-height: 1.6;
}

/* ==========================================================================
   13. FINAL CTA SECTION
   ========================================================================== */
.tsc-final-cta {
	position: relative;
	text-align: center;
	padding-block: clamp(6rem, 12vw, 10rem);
	overflow: hidden;
}

.tsc-final-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(212, 162, 76, 0.14) 0%, transparent 60%),
		linear-gradient(180deg, var(--tsc-cream) 0%, var(--tsc-cream-2) 100%);
	z-index: 0;
}

.tsc-final-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin-inline: auto;
}

.tsc-final-cta h2 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: var(--space-5);
	color: var(--tsc-text);
}

.tsc-final-cta p {
	font-size: 1.125rem;
	color: var(--tsc-text-mute);
	margin-bottom: var(--space-7);
}

.tsc-final-cta__buttons {
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	flex-wrap: wrap;
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.tsc-footer {
	background: var(--tsc-cream-2);
	border-top: 1px solid var(--tsc-line);
	padding-block: var(--space-9) var(--space-6);
}

.tsc-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-7);
	margin-bottom: var(--space-8);
}

@media (max-width: 900px) { .tsc-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tsc-footer__grid { grid-template-columns: 1fr; } }

.tsc-footer__brand p {
	color: var(--tsc-text-mute);
	max-width: 320px;
	margin-top: var(--space-3);
}

.tsc-footer h4,
.footer-widget-title {
	font-family: var(--font-ui);
	font-size: var(--text-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--tsc-text);
	margin-bottom: var(--space-4);
}

.tsc-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.tsc-footer li a {
	color: var(--tsc-text-mute);
	font-size: var(--text-small);
	transition: color var(--dur-fast) var(--ease);
}

.tsc-footer li a:hover { color: var(--tsc-gold); }

.tsc-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-5);
	border-top: 1px solid var(--tsc-line);
	color: var(--tsc-text-dim);
	font-size: var(--text-micro);
	letter-spacing: 0.04em;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* ==========================================================================
   15. PLUGIN INTEGRATION
   ========================================================================== */
.has-scge .scge-guests-grid,
.has-scge .scge-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}

@media (max-width: 1024px) {
	.has-scge .scge-guests-grid,
	.has-scge .scge-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.has-scge .scge-guests-grid,
	.has-scge .scge-grid { grid-template-columns: repeat(2, 1fr); }
}

.has-smile-events .smile-events-list,
.has-smile-events .smile-events-grid { color: var(--tsc-text); }

/* ==========================================================================
   16. PAGE HEADER / CONTENT
   ========================================================================== */
.tsc-page-header {
	padding-top: var(--space-8);
	padding-bottom: var(--space-7);
	text-align: center;
	background: linear-gradient(180deg, var(--tsc-cream-2) 0%, var(--tsc-cream) 100%);
}

.tsc-page-header h1 { font-size: var(--text-h1); margin-bottom: var(--space-3); }

.tsc-page-header p {
	color: var(--tsc-text-mute);
	font-size: 1.125rem;
	max-width: 580px;
	margin-inline: auto;
}

.tsc-content { max-width: var(--container-text); margin-inline: auto; }

/* ==========================================================================
   17. UTILITIES
   ========================================================================== */
.tsc-text-center { text-align: center; }
.tsc-mt-0 { margin-top: 0; }
.tsc-mb-0 { margin-bottom: 0; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
	.tsc-hero { min-height: 90vh; }
	.tsc-hero__title { font-size: clamp(2.25rem, 9vw, 3.5rem); }
	.tsc-hero__sub { font-size: 1.0625rem; }
	.tsc-section-head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* ==========================================================================
   19. HOMEPAGE REDESIGN — v2.0
   New cinematic dark-hero layout with alternating cream / dark sections.
   All tokens inherit from the existing --tsc-* system defined in Section 1.
   ========================================================================== */

/* ── Extra tokens (dark surfaces) ── */
:root {
	--tsc-dark:         #0A0A0B;
	--tsc-dark-2:       #111113;
	--tsc-dark-3:       #1a1a1e;
	--tsc-dark-4:       #222228;
	--tsc-on-dark:      #F0EAD8;
	--tsc-on-dark-mute: rgba(240,234,216,.55);
	--tsc-on-dark-hint: rgba(240,234,216,.28);
	--tsc-on-dark-bdr:  rgba(184,134,42,.22);
	--tsc-on-dark-bdr-dim: rgba(240,234,216,.07);
}

/* ── Button variants for dark sections ── */
.tsc-btn--gold {
	background: var(--tsc-gold) !important;
	color: #fff !important;
	border-color: var(--tsc-gold) !important;
}
.tsc-btn--gold:hover {
	background: var(--tsc-gold-deep) !important;
	border-color: var(--tsc-gold-deep) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -12px rgba(184,134,42,.55) !important;
}
.tsc-btn--ghost-on-dark {
	background: transparent !important;
	color: var(--tsc-on-dark) !important;
	border-color: rgba(255,255,255,.35) !important;
}
.tsc-btn--ghost-on-dark:hover {
	background: rgba(255,255,255,.1) !important;
	border-color: var(--tsc-gold-soft) !important;
	color: var(--tsc-gold-soft) !important;
	transform: translateY(-2px);
}

/* ── Section background variants ── */
.tsc-section--cream   { background: var(--tsc-cream); }
.tsc-section--cream-2 { background: var(--tsc-cream-2); }
.tsc-section--dark    { background: var(--tsc-dark); }
.tsc-section--dark-2  { background: var(--tsc-dark-2); }

/* ── On-dark text helpers ── */
.tsc-eyebrow--light   { color: var(--tsc-gold-soft) !important; }
.tsc-heading--light   { color: var(--tsc-on-dark); }
.tsc-section--dark__sub,
.tsc-section--dark-2__sub {
	font-size: var(--text-body);
	color: var(--tsc-on-dark-mute);
	line-height: 1.75;
	max-width: 540px;
	margin-top: 1rem;
}

/* ── Reveal animation (data-reveal) ── */
[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   19.1 HERO — REDESIGNED
   ========================================================================== */
.tsc-hero--redesign {
	min-height: 100vh;
	background: var(--tsc-dark);
	display: flex;
	align-items: stretch;
	position: relative;
	overflow: hidden;
	/* Override the default cream hero from tsc-home-transparent */
	padding-top: 0;
}

/* Radial glow background */
.tsc-hero--redesign .tsc-hero__bg::before {
	background:
		radial-gradient(ellipse 55% 55% at 65% 50%, rgba(184,134,42,.07) 0%, transparent 70%),
		radial-gradient(ellipse 40% 60% at 15% 85%, rgba(184,134,42,.05) 0%, transparent 60%),
		var(--tsc-dark) !important;
}
.tsc-hero--redesign .tsc-hero__bg::after {
	background: none !important;
}

/* Subtle grid lines */
.tsc-hero--redesign__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(184,134,42,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(184,134,42,.035) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
	pointer-events: none;
}

/* Two-column inner layout */
.tsc-hero--redesign__inner {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 0;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-px);
	position: relative;
	z-index: 2;
}

/* LEFT */
.tsc-hero--redesign__left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 160px clamp(1rem,3vw,3rem) 100px 0;
}
.tsc-hero--redesign__eyebrow {
	color: var(--tsc-gold-soft) !important;
}
.tsc-hero--redesign__title {
	font-family: var(--font-display);
	font-size: clamp(3rem, 7vw, 6rem);
	font-weight: 500;
	line-height: 1.0;
	letter-spacing: -0.02em;
	color: #fff;
	margin-bottom: var(--space-5);
}
.tsc-hero--redesign__title em {
	font-style: italic;
	color: var(--tsc-gold-soft);
}
.tsc-hero--redesign__sub {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 300;
	line-height: 1.75;
	color: var(--tsc-on-dark-mute);
	max-width: 500px;
	margin-bottom: var(--space-6);
}
.tsc-hero--redesign__ctas {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-bottom: var(--space-9);
}
.tsc-hero--redesign__stats {
	display: flex;
	gap: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--tsc-on-dark-bdr-dim);
}
.tsc-hero--redesign__stat-num {
	font-family: var(--font-display);
	font-size: 2.2rem;
	font-weight: 500;
	color: var(--tsc-gold-soft);
	line-height: 1;
	margin-bottom: 5px;
}
.tsc-hero--redesign__stat-lbl {
	font-size: var(--text-micro);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tsc-on-dark-hint);
}

/* RIGHT — guest cards column */
.tsc-hero--redesign__right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 160px 0 100px var(--space-5);
}
.tsc-hero--redesign__right-lbl {
	font-size: var(--text-micro);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tsc-on-dark-hint);
	margin-bottom: var(--space-3);
}
.tsc-hero--redesign__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* Hero guest mini-card */
.tsc-hero-gcard {
	background: var(--tsc-dark-3);
	border: 1px solid var(--tsc-on-dark-bdr-dim);
	border-radius: var(--radius);
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	display: block;
	transition:
		border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease);
	animation: tsc-fade-up var(--dur-slow) var(--ease) both;
}
.tsc-hero-gcard:nth-child(1) { animation-delay: .08s; }
.tsc-hero-gcard:nth-child(2) { animation-delay: .16s; }
.tsc-hero-gcard:nth-child(3) { animation-delay: .24s; }
.tsc-hero-gcard:nth-child(4) { animation-delay: .32s; }
.tsc-hero-gcard:hover {
	border-color: var(--tsc-on-dark-bdr);
	transform: translateY(-3px);
}
.tsc-hero-gcard__img {
	height: 130px;
	background: var(--tsc-dark-4);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.tsc-hero-gcard__img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
.tsc-hero-gcard__initials {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(184,134,42,.12);
	border: 1px solid var(--tsc-on-dark-bdr);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 500;
	color: var(--tsc-gold-soft);
}
.tsc-hero-gcard__badge {
	position: absolute;
	top: 9px;
	right: 9px;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: var(--radius-pill);
	border: 1px solid;
}
.tsc-hero-gcard__badge--vip     { border-color: var(--tsc-gold-soft); color: var(--tsc-gold-pale); background: rgba(184,134,42,.12); }
.tsc-hero-gcard__badge--pro     { border-color: rgba(184,134,42,.5); color: var(--tsc-gold-soft); background: rgba(184,134,42,.08); }
.tsc-hero-gcard__badge--starter { border-color: rgba(240,234,216,.25); color: var(--tsc-on-dark-mute); background: rgba(255,255,255,.04); }
.tsc-hero-gcard__badge--free    { border-color: rgba(240,234,216,.15); color: var(--tsc-on-dark-hint); background: transparent; }
.tsc-hero-gcard__body { padding: 12px 14px; }
.tsc-hero-gcard__name { font-size: var(--text-small); font-weight: 600; color: var(--tsc-on-dark); margin-bottom: 2px; }
.tsc-hero-gcard__role { font-size: var(--text-micro); color: var(--tsc-on-dark-hint); }
.tsc-hero-gcard__ep   { font-size: var(--text-micro); color: var(--tsc-gold); margin-top: 7px; letter-spacing: .04em; }

/* ==========================================================================
   19.2 EVENTS — REDESIGNED LAYOUT
   ========================================================================== */
.tsc-events-redesign {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 18px;
}
.tsc-event-main {
	background: var(--tsc-dark-3);
	border: 1px solid var(--tsc-on-dark-bdr);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.tsc-event-main__banner {
	height: 230px;
	background: var(--tsc-dark-4);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.tsc-event-main__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 80% at 50% 100%, rgba(184,134,42,.14) 0%, transparent 70%);
}
.tsc-event-main__badge {
	position: absolute;
	top: 18px;
	left: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(10,10,11,.88);
	border: 1px solid var(--tsc-gold);
	border-radius: var(--radius-pill);
	padding: 6px 16px;
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tsc-gold-pale);
}
.tsc-event-main__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tsc-gold);
	flex-shrink: 0;
	animation: tsc-float 1.6s ease-in-out infinite;
}
.tsc-event-main__title-lg {
	font-family: var(--font-display);
	font-size: 3.5rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.02em;
	line-height: 1;
	text-align: center;
	position: relative;
	z-index: 1;
	padding: var(--space-4);
}
.tsc-event-main__body { padding: 26px 28px; }
.tsc-event-main__name {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--tsc-on-dark);
	margin-bottom: var(--space-2);
}
.tsc-event-main__meta {
	font-size: var(--text-small);
	color: var(--tsc-on-dark-mute);
	line-height: 1.7;
	margin-bottom: var(--space-5);
}
.tsc-event-main__meta strong { color: var(--tsc-gold-pale); font-weight: 500; }
.tsc-event-main__btns { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Sidebar — past events */
.tsc-event-side { display: flex; flex-direction: column; gap: 12px; }
.tsc-event-past {
	flex: 1;
	background: var(--tsc-dark-3);
	border: 1px solid var(--tsc-on-dark-bdr-dim);
	border-radius: var(--radius);
	padding: 20px 22px;
	cursor: pointer;
	text-decoration: none;
	display: block;
	transition: border-color var(--dur) var(--ease);
}
.tsc-event-past:hover { border-color: var(--tsc-on-dark-bdr); }
.tsc-event-past__label {
	font-size: var(--text-micro);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tsc-on-dark-hint);
	margin-bottom: var(--space-3);
}
.tsc-event-past__name {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--tsc-on-dark);
	margin-bottom: var(--space-1);
}
.tsc-event-past__meta { font-size: 11px; color: var(--tsc-on-dark-mute); }
.tsc-event-past__ep {
	margin-top: var(--space-3);
	font-size: var(--text-micro);
	font-weight: 600;
	color: var(--tsc-gold);
	letter-spacing: .06em;
	display: flex;
	align-items: center;
	gap: 7px;
}
.tsc-event-past__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--tsc-gold);
	flex-shrink: 0;
}

/* ==========================================================================
   19.3 SPEAKER DIRECTORY — SCGE shortcode wrapper override
   ========================================================================== */
.tsc-scge-directory-wrap {
	margin-top: 0;
}
/* When SCGE renders inside cream-2, align its background */
.tsc-section--cream-2 .scge-app .sg-card {
	box-shadow: var(--shadow) !important;
}

/* ==========================================================================
   19.4 PRICING — on dark-2 section
   ========================================================================== */
.tsc-pricing-intro {
	text-align: center;
	max-width: 620px;
	margin: 0 auto var(--space-8);
}
.tsc-pricing-intro .tsc-heading--light {
	font-size: clamp(2rem, 4vw, 3.25rem);
	margin-bottom: var(--space-4);
}
.tsc-pricing-intro .tsc-section--dark__sub {
	margin-inline: auto;
	max-width: 480px;
}
/* scge_pricing renders with its own full styling — just clear top padding */
.tsc-section--dark-2 .scge-app.scge-pricing {
	background: transparent !important;
	padding-top: 0 !important;
}

/* ==========================================================================
   19.5 HOST SECTION — REDESIGNED
   ========================================================================== */
.tsc-host-redesign {
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: clamp(3rem, 6vw, 5rem);
	align-items: center;
}
.tsc-host-redesign__img-wrap { position: relative; }
.tsc-host-redesign__img {
	width: 100%;
	aspect-ratio: 3/4;
	background: var(--tsc-cream-3);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--tsc-line);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tsc-host-redesign__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.tsc-host-redesign__img--placeholder {
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: 400;
	color: var(--tsc-text-dim);
	text-align: center;
	letter-spacing: .05em;
}
.tsc-host-redesign__img-offset {
	position: absolute;
	top: 18px;
	left: 18px;
	right: -18px;
	bottom: -18px;
	border: 1px solid rgba(184,134,42,.25);
	border-radius: var(--radius-lg);
	z-index: -1;
}
.tsc-host-redesign__quote {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	color: var(--tsc-text-2);
	margin-bottom: var(--space-6);
	padding-left: var(--space-6);
	position: relative;
}
.tsc-host-redesign__quote::before {
	content: '"';
	position: absolute;
	left: 0;
	top: -12px;
	font-size: 5rem;
	color: var(--tsc-gold);
	line-height: 1;
	font-style: normal;
}
.tsc-host-redesign__name {
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--tsc-gold);
	letter-spacing: -0.01em;
	margin-bottom: var(--space-2);
}
.tsc-host-redesign__title {
	font-size: var(--text-micro);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tsc-text-dim);
	margin-bottom: var(--space-5);
}
.tsc-host-redesign__bio {
	font-size: var(--text-body);
	line-height: 1.8;
	color: var(--tsc-text-mute);
	margin-bottom: var(--space-6);
	max-width: 520px;
}
.tsc-host-redesign__stats { display: flex; gap: var(--space-7); }
.tsc-host-redesign__stat-num {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 500;
	color: var(--tsc-gold);
	line-height: 1;
	margin-bottom: var(--space-1);
}
.tsc-host-redesign__stat-lbl {
	font-size: var(--text-micro);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tsc-text-dim);
}

/* ==========================================================================
   19.6 FAQ — REDESIGNED
   ========================================================================== */
.tsc-faq-redesign { max-width: 760px; margin: 0 auto; }
.tsc-faq-redesign__head { text-align: center; margin-bottom: var(--space-8); }
.tsc-faq-redesign__head h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); color: var(--tsc-text-2); margin-bottom: var(--space-2); }
.tsc-faq-redesign__sub { font-size: var(--text-small); color: var(--tsc-text-mute); margin: 0; }
.tsc-faq-item { border-bottom: 1px solid var(--tsc-line); }
.tsc-faq-item__q {
	width: 100%;
	background: none;
	border: none;
	padding: var(--space-5) 0;
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: 500;
	color: var(--tsc-text-2);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-5);
	text-align: left;
	transition: color var(--dur-fast) var(--ease);
}
.tsc-faq-item__q:hover { color: var(--tsc-text); }
.tsc-faq-item__icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--tsc-line);
	background: var(--tsc-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--tsc-gold);
	flex-shrink: 0;
	transition: transform var(--dur) var(--ease), background var(--dur-fast);
	line-height: 1;
}
.tsc-faq-item--open .tsc-faq-item__icon {
	transform: rotate(45deg);
	background: var(--tsc-gold-pale);
}
.tsc-faq-item__a {
	font-size: var(--text-small);
	line-height: 1.8;
	color: var(--tsc-text-mute);
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s var(--ease), padding .3s;
}
.tsc-faq-item--open .tsc-faq-item__a {
	max-height: 240px;
	padding-bottom: var(--space-5);
}
.tsc-faq-item__a p { margin: 0; }

/* ==========================================================================
   19.7 FINAL CTA — REDESIGNED (dark full-bleed)
   ========================================================================== */
.tsc-final-cta--redesign {
	background: var(--tsc-dark);
	text-align: center;
	padding-block: clamp(7rem, 12vw, 11rem);
	position: relative;
	overflow: hidden;
}
.tsc-final-cta--redesign__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 55% 80% at 50% 100%, rgba(184,134,42,.1) 0%, transparent 70%);
	pointer-events: none;
}
.tsc-final-cta--redesign__inner { position: relative; z-index: 1; }
.tsc-final-cta--redesign h2 {
	font-size: clamp(2.5rem, 6vw, 5rem) !important;
	color: #fff !important;
	margin-bottom: var(--space-5) !important;
}
.tsc-final-cta--redesign h2 em { font-style: italic; color: var(--tsc-gold-soft); }
.tsc-final-cta--redesign .tsc-section--dark__sub {
	max-width: 480px;
	margin: 0 auto var(--space-7);
}
.tsc-final-cta--redesign__btns {
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	flex-wrap: wrap;
}

/* ==========================================================================
   19.8 RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
	.tsc-hero--redesign__inner { grid-template-columns: 1fr; }
	.tsc-hero--redesign__right { display: none; }
	.tsc-hero--redesign__title { font-size: clamp(3rem, 8vw, 5rem); }
	.tsc-events-redesign { grid-template-columns: 1fr; }
	.tsc-host-redesign { grid-template-columns: 1fr; }
	.tsc-host-redesign__img-wrap { display: none; }
}
@media (max-width: 768px) {
	.tsc-hero--redesign__stats { gap: var(--space-5); }
	.tsc-hero--redesign__ctas { flex-direction: column; }
	.tsc-hero--redesign__ctas .tsc-btn { text-align: center; justify-content: center; }
	.tsc-event-main__btns { flex-direction: column; }
	.tsc-host-redesign__stats { gap: var(--space-5); }
	.tsc-final-cta--redesign__btns { flex-direction: column; align-items: center; }
}