/* =====================================================================
   New thank-you page (/thank-you-new/)
   Builds on ippei-rank-and-rent-course.css (the .rrc design system);
   only the pieces unique to this page live here, prefixed .tyn-.
   ===================================================================== */

/* ---------- Hero ---------- */
.tyn-hero { text-align: center; padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 6vw, 80px); }
.tyn-hero__head { max-width: 860px; margin: 0 auto; }
.tyn-hero__title { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.4rem); }
.tyn-hero__title .rrc-hero__sub { font-size: 0.48em; color: var(--rrc-muted); }

/* Coach badge */
.tyn-coach {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px 18px 6px 6px;
	margin-bottom: 24px;
	border: 1px solid var(--rrc-line);
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--rrc-shadow-sm);
	text-align: left;
	line-height: 1.25;
}
.rrc .tyn-coach img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--rrc-blush); }
.tyn-coach strong { display: block; color: var(--rrc-ink); font-size: 0.9375rem; }
.tyn-coach span { font-size: 0.8125rem; font-weight: 600; color: var(--rrc-coral-deep); }

/* VSL with an animated border and glow to pull the eye to it */
.tyn-vsl { max-width: 960px; margin: clamp(28px, 4vw, 44px) auto 0; }
.tyn-vsl__cue {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px !important;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--rrc-ink);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.tyn-vsl__live { width: 10px; height: 10px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6); }
.tyn-vsl__frame {
	position: relative;
	padding: 6px;
	border-radius: 22px;
	background: linear-gradient(110deg, var(--rrc-coral) 0%, #ffd0d1 25%, var(--rrc-coral-deep) 50%, #ffd0d1 75%, var(--rrc-coral) 100%);
	background-size: 300% 100%;
	box-shadow: 0 0 0 0 rgba(240, 125, 127, 0.45), var(--rrc-shadow-lg);
}
.tyn-vsl__frame .rrc-ratio { border-radius: 16px; }

@media (prefers-reduced-motion: no-preference) {
	.tyn-vsl__live { animation: tyn-blink 1.2s ease-in-out infinite; }
	.tyn-vsl__frame { animation: tyn-sheen 4s linear infinite, tyn-glow 2s ease-in-out infinite; }
	/* Once they start watching, settle down. */
	.tyn-vsl.is-watching .tyn-vsl__frame,
	.tyn-vsl.is-watching .tyn-vsl__live { animation: none; }

	@keyframes tyn-blink {
		0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6); }
		50% { opacity: 0.35; box-shadow: 0 0 0 6px rgba(255, 59, 59, 0); }
	}
	@keyframes tyn-sheen {
		from { background-position: 0% 50%; }
		to { background-position: 300% 50%; }
	}
	@keyframes tyn-glow {
		0%, 100% { box-shadow: 0 0 0 0 rgba(240, 125, 127, 0.45), var(--rrc-shadow-lg); }
		50% { box-shadow: 0 0 0 14px rgba(240, 125, 127, 0), 0 0 48px 6px rgba(240, 125, 127, 0.35); }
	}
}

/* Program highlights */
.tyn-highlights {
	display: grid;
	gap: 12px;
	max-width: 960px;
	margin: clamp(28px, 4vw, 40px) auto 0 !important;
	text-align: left;
}
.tyn-highlights li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--rrc-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--rrc-shadow-sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--rrc-ink);
}
.tyn-highlights__icon { flex: none; }
@media (min-width: 768px) { .tyn-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Next step: call or checkout ---------- */
/* A short bridge between the hero and the calendar, so it gets less padding than a full section. */
.tyn-next { padding: clamp(48px, 6vw, 80px) 0; }
.tyn-next .rrc-head { margin-bottom: clamp(28px, 4vw, 40px); }
.tyn-paths { max-width: 880px; margin: 0 auto; }
.tyn-path {
	display: flex;
	align-items: center;
	gap: 16px;
	color: inherit;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.tyn-path > div { flex: 1; }
.tyn-path h3 { font-size: 1.125rem; }
.tyn-path p { margin-top: 4px !important; color: var(--rrc-muted); font-size: 0.9375rem; }
.tyn-path > .rrc-i { color: var(--rrc-coral-strong); }
.tyn-path:hover { border-color: var(--rrc-coral); box-shadow: var(--rrc-shadow-lg); }
.tyn-path:focus-visible { outline: 3px solid var(--rrc-coral); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
	.tyn-path:hover { transform: translateY(-2px); }
}
.tyn-contact { max-width: 880px; margin: 24px auto 0 !important; }
.tyn-contact a { color: var(--rrc-coral-deep); font-weight: 700; }
.tyn-contact a:hover { text-decoration: underline; }

/* ---------- Group call calendar ---------- */
.tyn-calendar { max-width: 1000px; margin: 0 auto; padding: 12px; }
.tyn-calendar iframe { display: block; width: 100%; min-height: 700px; border: 0; overflow: hidden; }

/* ---------- Self checkout ---------- */
.tyn-plan__ticks { margin-top: 20px !important; padding-top: 20px; border-top: 1px dashed var(--rrc-line); }
.tyn-plan__btn { margin-top: 28px; }

/* ---------- Top common questions (video carousel) ---------- */
.tyn-videos { max-width: 880px; }
.tyn-video { width: 100%; margin: 0; }
.tyn-video figcaption {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--rrc-ink);
	text-align: center;
}
.tyn-video figcaption span { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--rrc-coral-strong); }
.tyn-video .rrc-ratio { border: 1px solid var(--rrc-line); box-shadow: var(--rrc-shadow-lg); }

/* ---------- Coach: photo on the right on desktop ---------- */
@media (min-width: 992px) {
	.tyn-coach-section { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
	.tyn-coach-section .rrc-why__photo { order: 2; }
}

/* ---------- Success stories: featured player + playlist ---------- */
.tyn-stories { display: grid; gap: 20px; max-width: 1140px; margin: 0 auto; }
@media (min-width: 992px) { .tyn-stories { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; } }

.tyn-stories__player { border: 1px solid var(--rrc-line); box-shadow: var(--rrc-shadow-lg); }
.tyn-stories__poster { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.rrc .tyn-stories__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.2s; }
.tyn-stories__poster:hover img { opacity: 1; }
.tyn-stories__poster .rrc-play { position: relative; }
.tyn-stories__poster:focus-visible { outline: 3px solid var(--rrc-coral); outline-offset: -3px; }
.tyn-stories__now { margin-top: 14px !important; font-size: 0.9375rem; color: var(--rrc-muted); }
.tyn-stories__now > span:first-child { margin-right: 6px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rrc-coral-strong); }
.tyn-stories__now strong { color: var(--rrc-ink); }

/* Playlist: a swipeable row on phones, a scrolling column beside the player on desktop */
.rrc .tyn-stories__list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px !important; }
.tyn-stories__list li { flex: 0 0 240px; scroll-snap-align: start; }
@media (min-width: 992px) {
	.rrc .tyn-stories__list {
		flex-direction: column;
		gap: 8px;
		overflow-x: hidden;
		overflow-y: auto;
		scroll-snap-type: none;
		/* Zero height + full min-height: the row is sized by the player, and the list scrolls within it. */
		height: 0;
		min-height: 100%;
		padding: 4px 6px 4px 4px !important;
		scrollbar-width: thin;
	}
	.tyn-stories__list li { flex: none; }
}

.tyn-story {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px;
	border: 1px solid var(--rrc-line);
	border-radius: 14px;
	background: #fff;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.tyn-story:hover { border-color: #f8c2c3; box-shadow: var(--rrc-shadow-sm); }
.tyn-story:focus-visible { outline: 3px solid var(--rrc-coral); outline-offset: 2px; }
.tyn-story[aria-current="true"] { border-color: var(--rrc-coral); background: var(--rrc-tint); box-shadow: var(--rrc-shadow-sm); }
.tyn-story__thumb { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--rrc-dark-2); }
.rrc .tyn-story__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tyn-story__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.2s; }
.tyn-story__play .rrc-i { width: 22px; height: 22px; stroke: none; fill: currentColor; }
.tyn-story:hover .tyn-story__play, .tyn-story[aria-current="true"] .tyn-story__play { opacity: 1; }
.tyn-story__text { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.tyn-story__text strong { color: var(--rrc-ink); font-size: 0.9375rem; }
.tyn-story__text span { color: var(--rrc-muted); font-size: 0.8125rem; }