/**
 * ShootCal Testimonials frontend styles.
 *
 * Cards float on a layered shadow, hold a uniform height across the grid, and open a
 * native dialog for the complete review. Column ceiling follows the shared convention:
 * three on desktop, two on tablets, one on phones.
 *
 * Progressive enhancement. Nothing here clamps a quote or reveals an open control until
 * JavaScript adds .sct-js to the section, so without script the full review is simply
 * on the page and readable. The submission form needs no script at all.
 */

.sct-testimonials {
	--sct-gap: 1.35rem;
	--sct-radius: 18px;
	--sct-radius-sm: 12px;
	--sct-quote-lh: 1.58;
	--sct-muted: #5d6672;
	--sct-line: rgba( 15, 23, 42, 0.09 );
	--sct-star: #e8a33d;
	--sct-shadow: 0 1px 2px rgba( 15, 23, 42, 0.05 ), 0 8px 24px -12px rgba( 15, 23, 42, 0.18 );
	--sct-shadow-lift: 0 2px 4px rgba( 15, 23, 42, 0.06 ), 0 18px 40px -16px rgba( 15, 23, 42, 0.28 );
	position: relative;
	margin-block: 3rem;
}

.sct-testimonials__header {
	margin-block-end: 1.75rem;
	text-align: center;
}

.sct-testimonials__eyebrow {
	margin: 0 0 0.4rem;
	font-size: 0.76rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --sct-muted );
}

.sct-testimonials__heading {
	margin: 0;
	font-size: clamp( 1.45rem, 1.1rem + 1.1vw, 2.1rem );
	line-height: 1.18;
	letter-spacing: -0.015em;
}

.sct-testimonials__intro {
	margin: 0.65rem auto 0;
	max-width: 58ch;
	color: var( --sct-muted );
}

/* Grid. Column count comes from the section data attribute, applied as a modifier
   class so no inline layout is needed. */
.sct-testimonials__grid {
	display: grid;
	gap: var( --sct-gap );
	grid-template-columns: minmax( 0, 1fr );
	align-items: stretch;
}

@media ( min-width: 640px ) {
	.sct-testimonials__grid--2,
	.sct-testimonials__grid--3 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 980px ) {
	.sct-testimonials__grid--3 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* Card. Stacking is isolated so a theme's image rules cannot cover the rating or the
   source line; this is the same failure the Social Feed hover work had to fix. */
.sct-testimonial {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid var( --sct-line );
	border-radius: var( --sct-radius );
	background: #fff;
	box-shadow: var( --sct-shadow );
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.sct-js .sct-testimonial--hidden {
	display: none;
}

/* Theme isolation. Cards and dialogs opt out of whatever the active theme applies to
   figures, quotes, images and links, so the card lift stays the only hover effect and
   no theme quote glyph, border or tint decorates a review. The !important hovers win
   against theme rules of any specificity; ties elsewhere resolve to this sheet because
   it loads after the theme's. */
.sct-testimonials figure,
.sct-testimonials blockquote,
.sct-dialog figure,
.sct-dialog blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
	font-size: inherit;
	quotes: none;
}

.sct-testimonials blockquote::before,
.sct-testimonials blockquote::after,
.sct-dialog blockquote::before,
.sct-dialog blockquote::after {
	content: none !important;
}

.sct-testimonials img,
.sct-dialog img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	filter: none;
	opacity: 1;
	transform: none;
}

.sct-testimonials img:hover,
.sct-dialog img:hover,
.sct-testimonials a:hover img,
.sct-dialog a:hover img,
.sct-testimonials figure:hover img,
.sct-dialog figure:hover img {
	transform: none !important;
	opacity: 1 !important;
	filter: none !important;
	box-shadow: none !important;
}

.sct-testimonials a,
.sct-dialog a {
	color: inherit;
}

.sct-js .sct-testimonial[data-sct-card] {
	cursor: pointer;
}

.sct-js .sct-testimonial[data-sct-card]:hover {
	box-shadow: var( --sct-shadow-lift );
	transform: translateY( -3px );
}

.sct-testimonial:focus-within {
	box-shadow: var( --sct-shadow-lift );
}

/* Media area keeps a fixed ratio on every card, photo or monogram, because uniform
   card height depends on this block never varying. */
.sct-testimonial__media {
	position: relative;
	z-index: 0;
	flex: none;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f1f3f6;
}

.sct-testimonial__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sct-testimonial__media--monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 140deg, #eef1f6 0%, #dfe4ec 55%, #d3dae6 100% );
}

.sct-testimonial__media--monogram span {
	font-size: 2.1rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	color: rgba( 15, 23, 42, 0.34 );
}

.sct-testimonial__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.15rem 1.2rem 1.2rem;
}

.sct-rating {
	display: block;
	line-height: 1;
	color: var( --sct-star );
	letter-spacing: 0.09em;
}

.sct-star {
	font-size: 0.92rem;
}

/* Reserving the clamp height is what makes short reviews occupy the same card height
   as long ones, so the grid reads as a uniform set rather than a ragged mosaic. */
.sct-testimonial__quote {
	margin: 0;
	font-size: 0.955rem;
	line-height: var( --sct-quote-lh );
	color: #23292f;
}

.sct-js .sct-testimonial__quote {
	min-height: calc( var( --sct-lines, 5 ) * var( --sct-quote-lh ) * 1em );
	display: -webkit-box;
	-webkit-line-clamp: var( --sct-lines, 5 );
	line-clamp: var( --sct-lines, 5 );
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Preserve the reviewer's paragraph breaks; client wording stays verbatim. */
	white-space: pre-line;
}

.sct-testimonial__by {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
	/* Pinned to the bottom so attribution lines up across every card in the row. */
	margin-block-start: auto;
	font-size: 0.86rem;
}

.sct-testimonial__name {
	font-weight: 650;
	letter-spacing: -0.005em;
}

.sct-testimonial__date {
	color: var( --sct-muted );
	font-size: 0.8rem;
}

.sct-testimonial__date::before {
	content: "\00b7";
	margin-inline-end: 0.45rem;
}

/* Open control stays hidden until script is present, because a dialog cannot be opened
   without JavaScript and a dead button is worse than no button. */
.sct-testimonial__open {
	display: none;
}

.sct-js .sct-testimonial__open {
	display: block;
	width: 100%;
	padding: 0.72rem 1.2rem;
	border: 0;
	border-block-start: 1px solid var( --sct-line );
	background: transparent;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 620;
	color: var( --sct-muted );
	text-align: start;
	cursor: pointer;
	transition: color 160ms ease, background-color 160ms ease;
}

.sct-js .sct-testimonial__open:hover,
.sct-js .sct-testimonial__open:focus-visible {
	color: #111827;
	background: rgba( 15, 23, 42, 0.035 );
}

.sct-testimonial__open:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: -2px;
}

/* Source attribution. Held visually apart from the stars above because Google's brand
   rules forbid placing stars beside the Google name or logo. */
.sct-source {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid var( --sct-line );
	font-size: 0.735rem;
	line-height: 1.45;
	color: var( --sct-muted );
}

.sct-source__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.sct-testimonials .sct-source__link:hover,
.sct-testimonials .sct-source__link:focus-visible,
.sct-dialog .sct-source__link:hover,
.sct-dialog .sct-source__link:focus-visible {
	color: #111827;
}

/* Dialog. */
.sct-dialog {
	width: min( 92vw, 620px );
	max-height: 88vh;
	padding: 0;
	border: 0;
	border-radius: var( --sct-radius );
	background: #fff;
	box-shadow: 0 24px 70px -20px rgba( 15, 23, 42, 0.45 );
	color: #1b2027;
	overflow: hidden;
}

.sct-dialog::backdrop {
	background: rgba( 15, 23, 42, 0.55 );
	backdrop-filter: blur( 3px );
}

.sct-dialog[open] {
	animation: sct-pop 200ms ease;
}

@keyframes sct-pop {
	from {
		opacity: 0;
		transform: translateY( 10px ) scale( 0.985 );
	}
}

.sct-dialog__inner {
	position: relative;
	max-height: 88vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sct-dialog__media img {
	display: block;
	width: 100%;
	max-height: 46vh;
	object-fit: cover;
}

/* The media container is an empty shell until script copies the card photo into it, so
   it must not reserve space on dialogs that have no photo. */
.sct-dialog__media:empty {
	display: none;
}

.sct-dialog__close {
	position: absolute;
	inset-block-start: 0.7rem;
	inset-inline-end: 0.7rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.66 );
	-webkit-backdrop-filter: blur( 12px ) saturate( 1.5 );
	backdrop-filter: blur( 12px ) saturate( 1.5 );
	box-shadow: 0 2px 12px rgba( 15, 23, 42, 0.18 ), inset 0 0 0 1px rgba( 255, 255, 255, 0.6 );
	font-size: 1.15rem;
	line-height: 1;
	color: #1b2027;
	cursor: pointer;
}

.sct-dialog__close:hover,
.sct-dialog__close:focus-visible {
	background: rgba( 255, 255, 255, 0.88 );
	box-shadow: 0 3px 14px rgba( 15, 23, 42, 0.22 ), inset 0 0 0 1px rgba( 255, 255, 255, 0.75 );
}

/* No blue ring here (Ryan, 2026-10-02): the glass lifting is the focus cue, and an
   outline around a translucent circle read as a square halo over photos. */
.sct-dialog__close:focus-visible {
	outline: none;
}

.sct-dialog__content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem 1.55rem 1.7rem;
}

/* Plain text, not a theme heading: the dialog carries its own type scale, and a theme
   serif h2/h3 made the reviewer's name read like an article title (Ryan, 2026-10-02).
   The word "Review" is a separate muted label so it never reads as part of the name. */
.sct-dialog__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #1b2027;
}

.sct-dialog__heading-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --sct-muted );
}

.sct-dialog__heading-name {
	font-weight: 650;
}

.sct-dialog__quote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.62;
	white-space: pre-line;
}

.sct-dialog__by {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.88rem;
}

.sct-dialog__name {
	font-weight: 650;
}

.sct-dialog__date {
	color: var( --sct-muted );
	font-size: 0.82rem;
}

/* View more. */
.sct-testimonials__more {
	display: none;
	justify-content: center;
	margin-block-start: 1.75rem;
}

.sct-js .sct-testimonials__more { display: flex; }

.sct-pages {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem 1.25rem;
	margin-block-start: 1.3rem;
	font-size: .88rem;
}

.sct-pages a { font-weight: 650; text-decoration: underline; text-underline-offset: .2em; }
.sct-pages a:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.sct-pages__status { color: #5d6672; }

/* PhotoSwipe's local HTML slides retain full review text and the original image.
   The card is independently scrollable while touch/arrow navigation remains available. */
.pswp.sct-pswp { touch-action: pan-y; }
.pswp .sct-review-slide,
.pswp .sct-review-continue {
	width: 100%;
	height: 100%;
	padding: 4.4rem clamp(1rem, 4vw, 4rem) 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color-scheme: only light;
}
.pswp .sct-review-slide .sct-dialog__inner {
	width: min(100%, 990px);
	max-height: 100%;
	background: #fff;
	color: #23292f;
	border-radius: 18px;
	box-shadow: 0 24px 70px rgba(0,0,0,.28);
	overscroll-behavior: contain;
	touch-action: pan-y;
}
.pswp .sct-review-slide .sct-dialog__media img {
	width: 100%;
	max-height: min(50vh, 490px);
	object-fit: contain;
	background: #e8edf2;
}
.pswp .sct-review-slide .sct-dialog__content { padding: clamp(1.1rem, 3vw, 2rem); }
.pswp .sct-review-slide blockquote,
.pswp .sct-review-slide blockquote::before,
.pswp .sct-review-slide blockquote::after {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-style: normal !important;
	quotes: none !important;
}
.pswp .sct-review-slide blockquote::before,
.pswp .sct-review-slide blockquote::after { content: none !important; }
.pswp .sct-review-slide .sct-dialog__quote { color: #23292f; line-height: 1.62; }
.pswp .sct-review-slide .sct-dialog__heading { color: #23292f; }
.pswp .sct-review-slide .sct-dialog__date,
.pswp .sct-review-slide .sct-dialog__heading-label,
.pswp .sct-review-slide .sct-source { color: #5d6672; }
.pswp .sct-review-slide .sct-source a { color: #475569; }
.pswp .sct-review-slide a:focus-visible,
.pswp .sct-review-continue a:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.pswp .sct-review-continue { flex-direction: column; gap: 1rem; color: #fff; text-align: center; }
.pswp .sct-review-continue h2 { color: #fff; margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); }
.pswp .sct-review-continue a {
	display: inline-block; padding: .75rem 1.35rem; border-radius: 999px;
	background: #fff; color: #1b2027; font-weight: 700; text-decoration: none;
}
@media (max-width: 639px) {
	.pswp .sct-review-slide { padding: 3.8rem .5rem .75rem; }
	.pswp .sct-review-slide .sct-dialog__inner { border-radius: 13px; }
	.pswp .sct-review-slide .sct-dialog__media img { max-height: 39vh; }
	.pswp.sct-pswp .pswp__button--arrow { top: 7px; margin-top: 0; width: 44px; height: 44px; }
	.pswp.sct-pswp .pswp__button--arrow--prev { left: auto; right: 104px; }
	.pswp.sct-pswp .pswp__button--arrow--next { right: 55px; }
	.pswp.sct-pswp .pswp__button--arrow .pswp__icn { top: 2px; left: 2px; right: auto; margin: 0; width: 40px; height: 40px; }
}

.sct-more {
	padding: 0.68rem 1.6rem;
	border: 1px solid rgba( 15, 23, 42, 0.16 );
	border-radius: 999px;
	background: #fff;
	box-shadow: var( --sct-shadow );
	font: inherit;
	font-size: 0.87rem;
	font-weight: 620;
	color: #1b2027;
	cursor: pointer;
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.sct-more:hover,
.sct-more:focus-visible {
	box-shadow: var( --sct-shadow-lift );
	transform: translateY( -1px );
}

.sct-more:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* Form dialog trigger. Mirrors the View more button so a page carrying both reads as one
   design. The link is also the no-script path: it points at the same form rendered in
   place, so the dialog is an enhancement over a click that already works. */
.sct-form-trigger-wrap {
	display: flex;
	justify-content: center;
	margin-block: 1.75rem 0;
}

.sct-form-trigger {
	display: inline-block;
	padding: 0.68rem 1.6rem;
	border: 1px solid rgba( 15, 23, 42, 0.16 );
	border-radius: 999px;
	background: #fff;
	box-shadow: var( --sct-shadow );
	font-size: 0.87rem;
	font-weight: 620;
	color: #1b2027;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.sct-form-trigger:hover,
.sct-form-trigger:focus-visible {
	box-shadow: var( --sct-shadow-lift );
	transform: translateY( -1px );
}

.sct-form-trigger:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* Public submission form. Shares the card design language so a form sitting under a
   testimonial list reads as part of the same section. Nothing here depends on script: the
   form posts, the server validates, and the confirmation comes back on the next page load. */
.sct-form-wrap {
	--sct-radius: 18px;
	--sct-radius-sm: 12px;
	--sct-muted: #5d6672;
	--sct-line: rgba( 15, 23, 42, 0.09 );
	--sct-shadow: 0 1px 2px rgba( 15, 23, 42, 0.05 ), 0 8px 24px -12px rgba( 15, 23, 42, 0.18 );
	--sct-shadow-lift: 0 2px 4px rgba( 15, 23, 42, 0.06 ), 0 18px 40px -16px rgba( 15, 23, 42, 0.28 );
	--sct-danger: #b42318;
	--sct-danger-ink: #912018;
	--sct-success: #067647;
	--sct-success-ink: #085d3a;
	position: relative;
	max-width: 44rem;
	margin-block: 3rem;
}

.sct-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: 1.6rem 1.6rem 1.7rem;
	border: 1px solid var( --sct-line );
	border-radius: var( --sct-radius );
	background: #fff;
	box-shadow: var( --sct-shadow );
}

/* Inside the dialog the form sits in the dialog's own padding, so the card chrome and
   the outer spacing that suit a form standing on a page would double both here. */
.sct-dialog--form .sct-form-wrap {
	max-width: none;
	margin-block: 0;
}

.sct-dialog--form .sct-form {
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.sct-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.sct-form__label {
	font-size: 0.86rem;
	font-weight: 650;
	letter-spacing: -0.005em;
}

.sct-form__required {
	color: var( --sct-danger );
}

.sct-form__help {
	font-size: 0.78rem;
	line-height: 1.5;
	color: var( --sct-muted );
}

.sct-form input[type="text"],
.sct-form input[type="email"],
.sct-form select,
.sct-form textarea {
	width: 100%;
	padding: 0.66rem 0.8rem;
	border: 1px solid rgba( 15, 23, 42, 0.18 );
	border-radius: var( --sct-radius-sm );
	background: #fff;
	font: inherit;
	font-size: 0.93rem;
	color: #1b2027;
}

.sct-form textarea {
	min-height: 8rem;
	resize: vertical;
	line-height: 1.6;
}

.sct-form input:focus-visible,
.sct-form select:focus-visible,
.sct-form textarea:focus-visible {
	border-color: #2563eb;
	outline: 2px solid #2563eb;
	outline-offset: 1px;
}

.sct-form [aria-invalid="true"] {
	border-color: var( --sct-danger );
}

.sct-form__error {
	font-size: 0.8rem;
	color: var( --sct-danger );
}

/* Error summary. Announced by role="alert" and linked to each offending control, so the
   list is usable with the stylesheet entirely absent. */
.sct-form__errors {
	margin-block-end: 1.1rem;
	padding: 0.95rem 1.1rem;
	border: 1px solid rgba( 180, 35, 24, 0.3 );
	border-inline-start: 3px solid var( --sct-danger );
	border-radius: var( --sct-radius-sm );
	background: #fef4f2;
}

.sct-form__errors-title {
	margin: 0 0 0.4rem;
	font-size: 0.88rem;
	font-weight: 650;
	color: var( --sct-danger-ink );
}

.sct-form__errors ul {
	margin: 0;
	padding-inline-start: 1.15rem;
	font-size: 0.84rem;
	color: var( --sct-danger-ink );
}

.sct-form__errors a {
	color: inherit;
}

.sct-form__notice {
	margin-block-end: 1.1rem;
	padding: 0.95rem 1.1rem;
	border: 1px solid rgba( 6, 118, 71, 0.25 );
	border-inline-start: 3px solid var( --sct-success );
	border-radius: var( --sct-radius-sm );
	background: #f0faf4;
	font-size: 0.9rem;
	color: var( --sct-success-ink );
}

.sct-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.sct-form__submit {
	padding: 0.72rem 1.7rem;
	border: 1px solid rgba( 15, 23, 42, 0.16 );
	border-radius: 999px;
	background: #fff;
	box-shadow: var( --sct-shadow );
	font: inherit;
	font-size: 0.88rem;
	font-weight: 620;
	color: #1b2027;
	cursor: pointer;
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.sct-form__submit:hover,
.sct-form__submit:focus-visible {
	box-shadow: var( --sct-shadow-lift );
	transform: translateY( -1px );
}

.sct-form__submit:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.sct-form__note {
	font-size: 0.78rem;
	color: var( --sct-muted );
}

/* Honeypot. Off-screen rather than display:none, so it is still laid out for bots that
   skip fields a stylesheet hid, while clip-path and aria-hidden keep it invisible and out
   of the accessibility tree, and the negative tabindex keeps it out of the tab order. */
.sct-form__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* Live region: available to assistive technology, out of the visual flow. */
.sct-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.sct-testimonial,
	.sct-more,
	.sct-form__submit,
	.sct-testimonial__open {
		transition: none;
	}

	.sct-js .sct-testimonial[data-sct-card]:hover {
		transform: none;
	}

	.sct-form__submit:hover,
	.sct-form__submit:focus-visible {
		transform: none;
	}

	.sct-dialog[open] {
		animation: none;
	}
}

/* Enhancements are enabled only after the associated controls are wired. */
.sct-testimonials:not(.sct-js) .sct-testimonials__more { display: none; }
.sct-dialog { --sct-radius: 22px; --sct-muted: #5d6672; --sct-line: rgba(15,23,42,.09); border-radius: 22px; }
.sct-dialog__close:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #334155, 0 3px 14px rgba(15,23,42,.22); }
.sct-source__mark { width: 10px !important; height: auto !important; object-fit: contain !important; margin: 0 10px 0 0 !important; flex: 0 0 10px; }
.sct-testimonial__categories { color: var(--sct-muted); font-size: .75rem; }
.sct-js .sct-testimonial__open { min-height: 44px; }
@media (forced-colors: active) { .sct-dialog__close:focus-visible { outline: 2px solid ButtonText; } }

/* Keep review surfaces light even when the surrounding theme uses dark mode.
   The figure reset above must not remove a card's own background. Scope the
   overrides to plugin surfaces so page headings retain the theme's contrast. */
.sct-testimonials .sct-testimonial,
.sct-dialog,
.sct-form-wrap .sct-form {
	color-scheme: only light;
	background: #fff !important;
	color: #23292f !important;
}
.sct-testimonials .sct-testimonial__name,
.sct-testimonials .sct-testimonial__quote,
.sct-dialog .sct-dialog__heading,
.sct-dialog .sct-dialog__heading-name,
.sct-dialog .sct-dialog__quote,
.sct-dialog .sct-dialog__name,
.sct-form .sct-form__label {
	color: #23292f !important;
}
.sct-testimonials .sct-testimonial__date,
.sct-testimonials .sct-source,
.sct-dialog .sct-dialog__date,
.sct-dialog .sct-dialog__heading-label,
.sct-dialog .sct-source,
.sct-form .sct-form__help,
.sct-form .sct-form__note {
	color: #5d6672 !important;
}
.sct-testimonials .sct-source__link,
.sct-dialog .sct-source__link { color: #475569 !important; }
.sct-testimonials .sct-testimonial__open {
	background: #f8fafc !important;
	color: #475569 !important;
}
.sct-more,
.sct-form-trigger,
.sct-form__submit,
.sct-form input[type="text"],
.sct-form input[type="email"],
.sct-form select,
.sct-form textarea {
	color-scheme: only light;
	background: #fff !important;
	color: #23292f !important;
}
.sct-form input::placeholder,
.sct-form textarea::placeholder { color: #5d6672; opacity: 1; }
.sct-testimonials__intro,
.sct-testimonials__eyebrow { color: inherit; }

/* Review detail hierarchy and source alignment, isolated from theme rules. */
.sct-source__label { display: inline-flex; align-items: center; min-width: 0; }
.sct-source__mark { display: block !important; }
.sct-dialog__heading-name { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); }
.sct-dialog__by { margin: -.2rem 0 .35rem; gap: .75rem; }
.sct-dialog__categories { font-size: .82rem; color: #5d6672 !important; }
.sct-dialog__inner:focus { outline: none; }
.sct-dialog__close:focus:not(:focus-visible) { outline: none !important; box-shadow: 0 2px 12px rgba(15,23,42,.18) !important; }
.sct-filter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin: 0 0 1.6rem; position: relative; z-index: 3; }
.sct-filter > span { font-size: .85rem; font-weight: 600; }
.sct-filter__dropdown { position: relative; min-width: 220px; max-width: 100%; color-scheme: only light; }
.sct-filter__dropdown summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .6rem 1rem; box-sizing: border-box; list-style: none; cursor: pointer; font-size: .85rem; background: #fff !important; color: #23292f !important; border: 1px solid #d8dde3; border-radius: 14px; box-shadow: 0 2px 8px rgba(15,23,42,.04); }
.sct-filter__dropdown summary::-webkit-details-marker { display: none; }
.sct-filter__dropdown summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); flex: none; margin-top: -3px; }
.sct-filter__options { position: absolute; top: calc(100% + 8px); inset-inline: 0; display: grid; padding: 6px; border: 1px solid #e0e4e9; border-radius: 14px; background: #fff !important; box-shadow: 0 12px 30px rgba(15,23,42,.15); max-height: 320px; overflow-y: auto; }
.sct-filter__options a { display: block; padding: .65rem .75rem; min-height: 40px; box-sizing: border-box; border-radius: 9px; color: #374151 !important; font-size: .82rem; line-height: 1.4; text-decoration: none !important; }
.sct-filter__options a:hover, .sct-filter__options a[aria-current="page"] { background: #eef2f6 !important; color: #111827 !important; }
@media (max-width: 480px) { .sct-filter > span { flex-basis: 100%; text-align: center; } }

/* Uniform compact attribution rows, with source links integrated into the label. */
.sct-source { flex-wrap: nowrap; font-size: 0.625rem !important; line-height: 1.4; padding-block-start: 0; border-color: #edf0f3; }
.sct-source__label { min-height: 31px; font-size: inherit !important; }
.sct-source__link { display: inline-flex; align-items: center; font-size: inherit !important; }
.sct-source--empty { border-color: transparent; }

/* Pointer and programmatic focus stay quiet; Tab navigation keeps a restrained cue. */
.sct-testimonials :is(button, a, summary, figure):focus:not(:focus-visible),
.sct-dialog :is(button, a, input, select, textarea):focus:not(:focus-visible) { outline: none !important; }
.sct-testimonials :is(button, a, summary):focus:not(:focus-visible),
.sct-dialog :is(a, input, select, textarea, .sct-form__submit):focus:not(:focus-visible) { box-shadow: none !important; }
.sct-testimonials :is(button, a, summary):focus-visible,
.sct-dialog :is(button, a, input, select, textarea):focus-visible { outline: 2px solid #64748b; outline-offset: 2px; }
.sct-dialog__close:focus-visible { box-shadow: 0 2px 12px rgba(15,23,42,.18); }

/* Source credit is supporting detail, with readable but restrained contrast. */
.sct-testimonials .sct-source, .sct-dialog .sct-source,
.sct-testimonials .sct-source__link, .sct-dialog .sct-source__link { color: #6b7280 !important; }
.sct-source__link { text-decoration: none !important; }
.sct-source__link:hover, .sct-source__link:focus-visible { text-decoration: underline !important; }

/* Equal breathing room above and below the compact source credit. */
.sct-source { padding-block: 4px; }

/* The source row owns its vertical spacing; no extra gap above Read full review. */
.sct-testimonial__body { padding-bottom: 0; }
/* Category labels occupy a calm, separate line beneath the reviewer. */
.sct-testimonial__by { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; row-gap: .35rem; text-align: start; }
.sct-testimonial__name { justify-self: start; }
.sct-testimonial__date { font-size: .7rem; text-align: right; }
.sct-testimonial__date::before { content: none; }
.sct-testimonial__categories, .sct-dialog__categories { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem .8rem; width: 100%; color: #6b7280 !important; font-size: .72rem; }
.sct-category { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.sct-category__icon { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; flex: 0 0 13px; overflow: hidden; }
.sct-category__icon > svg { display: block; width: 13px !important; height: 13px !important; max-width: 100%; }

.sct-form .sct-form__credit { margin: .35rem 0 0; text-align: left; font-size: .625rem; line-height: 1.4; }
.sct-form .sct-form__credit a { color: #6b7280 !important; text-decoration: none; font-size: inherit; }
.sct-form .sct-form__credit a:hover, .sct-form .sct-form__credit a:focus-visible { text-decoration: underline; }