/* RSP Video Testimonials: recorder, CTA dialog, testimonial wall.
   All presentation lives here. Tokens are custom properties on .rvt, so a
   theme can restyle by overriding them without touching the markup. */

.rvt,
.rvt-dialog,
.rvt-wall,
.rvt-empty,
.rvt-page,
.rvt-player,
.rvt-cta {
	--rvt-navy: #003087;
	--rvt-orange: #f47920;
	--rvt-cream: #faf6f0;
	--rvt-cream-deep: #f5ede6;
	--rvt-ink: #1d2433;
	--rvt-muted: #5b6475;
	--rvt-line: #e3dacd;
	--rvt-danger: #b42318;
	--rvt-radius: 14px;
	--rvt-gap: 1rem;
	--rvt-font-head: "Playfair Display", Georgia, serif;
	--rvt-font-body: "DM Sans", "Nunito", system-ui, sans-serif;
}

/* ----- CTA button ----- */
.rvt-cta {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .85em 1.4em;
	border: 0;
	border-radius: 999px;
	background: var(--rvt-orange);
	color: #fff;
	font: 600 1rem/1.2 var(--rvt-font-body);
	cursor: pointer;
}
.rvt-cta::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #fff; }
.rvt-cta:hover, .rvt-cta:focus-visible { background: var(--rvt-navy); }

/* ----- dialog ----- */
.rvt-dialog {
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--rvt-radius);
	background: var(--rvt-cream);
	color: var(--rvt-ink);
	overflow: auto;
}
.rvt-dialog::backdrop { background: rgb(0 20 60 / .55); }
.rvt-dialog__close {
	position: sticky;
	top: 8px;
	float: right;
	margin: 8px 8px 0 0;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--rvt-navy);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

/* ----- full page ----- */
.rvt-page { padding: 2rem 16px 4rem; background: var(--rvt-cream, #faf6f0); }
.rvt-page .rvt { max-width: 640px; margin-inline: auto; background: #fff; border-radius: var(--rvt-radius); box-shadow: 0 2px 24px rgb(0 48 135 / .08); }

/* ----- recorder ----- */
.rvt {
	padding: clamp(1rem, 4vw, 2rem);
	font-family: var(--rvt-font-body);
	color: var(--rvt-ink);
}
.rvt [hidden] { display: none !important; }
.rvt__title { margin: 0 0 .5rem; font: 700 clamp(1.4rem, 4vw, 1.9rem)/1.2 var(--rvt-font-head); color: var(--rvt-navy); }
.rvt__greeting { margin: 0 0 1rem; font-size: 1.05rem; }
.rvt__muted, .rvt__meta { color: var(--rvt-muted); }
.rvt__notice {
	padding: .75rem 1rem;
	border-left: 4px solid var(--rvt-orange);
	background: var(--rvt-cream-deep);
	border-radius: 0 8px 8px 0;
	font-size: .95rem;
}
.rvt__prompts { margin: 1rem 0; padding-left: 1.25rem; display: grid; gap: .35rem; }
.rvt__status { min-height: 1.25em; margin: 0 0 .5rem; font-size: .95rem; color: var(--rvt-navy); }
.rvt__status--error, .rvt__error { color: var(--rvt-danger); }

.rvt__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.rvt__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .7em 1.3em;
	border: 2px solid var(--rvt-navy);
	border-radius: 999px;
	background: #fff;
	color: var(--rvt-navy);
	font: 600 1rem/1.2 var(--rvt-font-body);
	cursor: pointer;
}
.rvt__btn--primary { background: var(--rvt-navy); color: #fff; }
.rvt__btn--primary:hover, .rvt__btn--primary:focus-visible { background: var(--rvt-orange); border-color: var(--rvt-orange); }
.rvt__btn--ghost { border-color: var(--rvt-line); }
.rvt__btn--stop { background: var(--rvt-danger); border-color: var(--rvt-danger); color: #fff; }
.rvt__file { position: relative; overflow: hidden; }
.rvt__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.rvt__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--rvt-radius);
	overflow: hidden;
	background: #0b1530;
}
@media (max-width: 600px) { .rvt__stage { aspect-ratio: 3 / 4; } }
.rvt__video { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-rvt-live] { transform: scaleX(-1); } /* mirror the live preview only */
.rvt__prompt {
	position: absolute;
	inset: auto 12px 12px 12px;
	margin: 0;
	padding: .65rem .9rem;
	border-radius: 10px;
	background: rgb(0 48 135 / .82);
	color: #fff;
	font-weight: 600;
}
.rvt__timer {
	position: absolute;
	top: 12px;
	right: 12px;
	margin: 0;
	padding: .2rem .6rem;
	border-radius: 999px;
	background: rgb(0 0 0 / .55);
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.rvt__rec-dot {
	position: absolute;
	top: 12px;
	left: 12px;
	margin: 0;
	padding: .2rem .6rem .2rem 1.4rem;
	border-radius: 999px;
	background: rgb(0 0 0 / .55);
	color: #fff;
	font-size: .8rem;
	letter-spacing: .08em;
}
.rvt__rec-dot::before {
	content: "";
	position: absolute;
	left: .55rem;
	top: 50%;
	width: .5rem;
	height: .5rem;
	margin-top: -.25rem;
	border-radius: 50%;
	background: #ff3b30;
	animation: rvt-pulse 1s infinite;
}
@keyframes rvt-pulse { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .rvt__rec-dot::before { animation: none; } }
.rvt__countdown {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	font: 700 5rem/1 var(--rvt-font-head);
	color: #fff;
	background: rgb(0 0 0 / .35);
}

.rvt__progress { width: 100%; height: 12px; accent-color: var(--rvt-orange); }

/* ----- form ----- */
.rvt__form { display: grid; gap: 1rem; }
.rvt__fields, .rvt__consent { display: grid; gap: .9rem; }
.rvt__consent { margin: 0; padding: 1rem; border: 1px solid var(--rvt-line); border-radius: var(--rvt-radius); background: var(--rvt-cream); }
.rvt__legend { padding: 0 .4rem; font: 700 1.05rem/1.2 var(--rvt-font-head); color: var(--rvt-navy); }
.rvt__label { display: block; margin-bottom: .3rem; font-weight: 600; }
.rvt__field input[type="text"],
.rvt__field input[type="email"],
.rvt__field select,
.rvt__field textarea {
	width: 100%;
	min-height: 46px;
	padding: .6rem .8rem;
	border: 1px solid var(--rvt-line);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	color: inherit;
}
.rvt__check { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; font-size: .95rem; line-height: 1.45; cursor: pointer; }
.rvt__check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--rvt-navy); }
.rvt__field--invalid input, .rvt__field--invalid select, .rvt__field--invalid textarea { border-color: var(--rvt-danger); }
.rvt__field--invalid .rvt__check { color: var(--rvt-danger); }
.rvt__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ----- signed copy ----- */
.rvt__copy { margin-top: 1rem; padding: 1rem; border: 1px solid var(--rvt-line); border-radius: var(--rvt-radius); background: var(--rvt-cream); font-size: .9rem; }
.rvt__copy-title { margin: 0 0 .5rem; font: 700 1.05rem/1.2 var(--rvt-font-head); color: var(--rvt-navy); }
.rvt__copy-list dt { font-weight: 600; margin-top: .6rem; }
.rvt__copy-list dd { margin: .1rem 0 0; }

/* ----- wall: skin B (navy frame) ----- */
.rvt-wall {
	display: grid;
	gap: 32px;
	max-width: 1100px;
	margin: 0 auto;
	font-family: var(--rvt-font-body);
}
.rvt-b {
	--rvt-b-media: 300px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--rvt-b-media) minmax(0, 1fr);
	background: var(--rvt-navy);
	color: #fff;
	border-radius: 20px;
	overflow: hidden;
	text-align: left;
	box-shadow: 0 10px 30px rgb(0 48 135 / .18);
}
.rvt-b__side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
}
.rvt-b__brand { justify-content: space-between; }
.rvt-b__who { justify-content: flex-end; }
.rvt-b__logo {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border-radius: 999px;
	background: #fff;
}
.rvt-b__logo img { display: block; width: 124px; height: auto; }
.rvt-b__kicker {
	margin: 0;
	font: 700 clamp(1.25rem, 2.2vw, 1.6rem)/1.2 var(--rvt-font-head);
	color: #fff;
}
.rvt-b__kicker::before {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-bottom: 12px;
	border-radius: 2px;
	background: var(--rvt-orange);
}
.rvt-b__media {
	position: relative;
	align-self: center;
	width: 100%;
	background: #0b1530;
	box-shadow: 0 0 0 5px var(--rvt-orange);
}
.rvt-b__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rvt-b__stars { display: flex; gap: 6px; }
.rvt-b__stars svg { width: 18px; height: 18px; fill: var(--rvt-orange); }
.rvt-b__name { margin: 0; font: 700 1.5rem/1.2 var(--rvt-font-head); color: #fff; }
.rvt-b__role { margin: 0; font-size: .95rem; color: #d6def0; }
.rvt-b__book {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 14px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--rvt-orange);
	color: #fff !important;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
}
.rvt-b__book:hover, .rvt-b__book:focus-visible { background: #fff; color: var(--rvt-navy) !important; }

/* Wide (landscape) videos: full-width video, details underneath */
.rvt-b--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rvt-b--wide .rvt-b__media { grid-column: 1 / -1; grid-row: 1; box-shadow: inset 0 -5px 0 var(--rvt-orange); }
.rvt-b--wide .rvt-b__brand { grid-row: 2; }
.rvt-b--wide .rvt-b__who { grid-row: 2; }

/* Phones: logo, video, name, stacked */
@media (max-width: 760px) {
	.rvt-b, .rvt-b--wide { grid-template-columns: minmax(0, 1fr); }
	.rvt-b__side { padding: 22px 20px; }
	.rvt-b__brand { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
	.rvt-b__kicker { font-size: 1.05rem; text-align: right; }
	.rvt-b__kicker::before { display: none; }
	.rvt-b__media { max-width: 360px; margin: 0 auto; }
	.rvt-b--wide .rvt-b__media { max-width: none; grid-row: auto; }
	.rvt-b--wide .rvt-b__brand, .rvt-b--wide .rvt-b__who { grid-row: auto; }
}

.rvt-empty {
	max-width: 640px;
	margin: 0 auto;
	padding: 36px 28px;
	border: 1px dashed #c9d3e6;
	border-radius: 20px;
	background: #fff;
	text-align: center;
	color: #475569;
	font: 1.05rem/1.6 var(--rvt-font-body);
}
.rvt-empty p { margin: 0; }

/* ----- sticky-note wall ----- */
.rvt-stickies {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 48px 36px;
	padding: 24px 8px 8px;
}
.rvt-sticky {
	position: relative;
	margin: 0;
	padding: 18px 18px 14px;
	background: #fff3a6;
	background-image: linear-gradient(180deg, #fff7c4 0, #fff3a6 28%, #ffec80 100%);
	box-shadow: 0 1px 1px rgb(0 0 0 / .08), 0 14px 22px -10px rgb(0 0 0 / .32);
	transform: rotate(var(--rvt-tilt, -2deg));
	transition: transform .2s ease, box-shadow .2s ease;
}
.rvt-sticky:hover,
.rvt-sticky:focus-within {
	transform: rotate(0deg) scale(1.03);
	box-shadow: 0 1px 1px rgb(0 0 0 / .08), 0 22px 32px -12px rgb(0 0 0 / .36);
	z-index: 2;
}
@media (prefers-reduced-motion: reduce) { .rvt-sticky { transition: none; } }
.rvt-sticky__clip {
	position: absolute;
	top: -26px;
	left: 26px;
	width: 26px;
	height: 66px;
	z-index: 3;
	fill: none;
	stroke: #9aa3b2;
	stroke-width: 3.2;
	stroke-linecap: round;
	filter: drop-shadow(1px 2px 1px rgb(0 0 0 / .25));
	transform: rotate(-8deg);
}
.rvt-sticky__play {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	padding: 0;
	border: 0;
	background: #2a3550;
	cursor: pointer;
	overflow: hidden;
}
.rvt-sticky__play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rvt-sticky__icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}
.rvt-sticky__icon svg { width: 64px; height: 64px; }
.rvt-sticky__icon circle { fill: var(--rvt-navy); fill-opacity: .85; }
.rvt-sticky__icon path { fill: #fff; }
.rvt-sticky__play:hover .rvt-sticky__icon circle,
.rvt-sticky__play:focus-visible .rvt-sticky__icon circle { fill: var(--rvt-orange); fill-opacity: 1; }
.rvt-sticky__play:focus-visible { outline: 3px solid var(--rvt-orange); outline-offset: 3px; }
.rvt-sticky__name {
	margin: 12px 2px 0;
	font: 700 1.6rem/1.1 "Caveat", "Segoe Print", "Bradley Hand", cursive;
	color: #1d2433;
	text-align: center;
}

/* ----- full-screen player (skin B inside) ----- */
.rvt-player {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: clamp(56px, 6vh, 72px) clamp(12px, 3vw, 40px) clamp(12px, 3vh, 32px);
	border: 0;
	background: rgb(0 18 56 / .94);
	overflow: auto;
	box-sizing: border-box;
}
.rvt-player[open] { display: grid; place-items: center; }
.rvt-player::backdrop { background: rgb(0 18 56 / .6); }
.rvt-player .rvt-b {
	width: min(1100px, 100%);
	--rvt-b-media: min(340px, calc((100dvh - 140px) * 9 / 16));
}
.rvt-player .rvt-b--wide { width: min(1100px, 100%, calc((100dvh - 260px) * 16 / 9)); }
.rvt-player__close {
	position: fixed;
	top: 14px;
	right: 14px;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--rvt-navy);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
}
.rvt-player__close:focus-visible { outline: 3px solid var(--rvt-orange); outline-offset: 2px; }
@media (max-width: 760px) {
	.rvt-player .rvt-b { --rvt-b-media: 100%; }
	.rvt-player .rvt-b__media { max-width: min(360px, calc((100dvh - 300px) * 9 / 16)); }
}

/* ----- testimonials page ----- */
.rvt-page__inner { max-width: 1100px; margin: 0 auto; }
.rvt-page__head { text-align: center; margin-bottom: 40px; }
.rvt-page__share { margin-top: 28px; display: flex; justify-content: center; }
.rvt-page__share .rvt-cta.rsp-btn-primary { border: 0; cursor: pointer; font-family: inherit; }
.rvt-page__share .rvt-cta.rsp-btn-primary::before { display: none; }
.rvt-page__alt { margin-top: 18px; font-family: sans-serif; font-size: 15px; color: #64748B; }
.rvt-page__alt a { color: var(--rvt-navy, #003087); font-weight: 600; }
.rvt-page .rvt-dialog { text-align: left; font-family: var(--rvt-font-body, sans-serif); }