/**
 * Capskip Captcha Demos styles.
 * Inherits the active theme's CSS variables when present, with safe fallbacks.
 */

/* =========================================================
   Transparent-until-scrolled site header
   Reproduces the theme's per-page "transparent navigation" option, the one
   enabled on /extension-guide/, whose page CSS emits exactly these rules. The
   header floats over the hero with no background, then picks its background
   back up once the theme's own JS adds .scrolled past 95px of scroll.

   Scoped to the gallery page's body class, so no other page is touched. If the
   option is later switched on for this page in the page settings, these rules
   simply agree with the ones the theme emits.
   ========================================================= */
body.page-template-capskip-captcha-gallery {
	--transparent-navigation-position: fixed;
}

body.page-template-capskip-captcha-gallery .site-header.sticky-header.show-on-scroll.hide-menu {
	pointer-events: auto;
}

body.page-template-capskip-captcha-gallery .site-header.sticky-header.show-on-scroll.hide-menu .site-header-wrapper {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

body.page-template-capskip-captcha-gallery .site-header.sticky-header:not(.scrolled):not(.mobile-menu-active) .elementor > .e-con.e-flex:last-child {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}

body.page-template-capskip-captcha-gallery #site-footer {
	position: relative;
}

/* =========================================================
   Gallery hero
   Same treatment the site-wide snippet paints on the other hero sections: the
   gradient stack on black plus an animated particle field (see
   assets/js/captcha-hero-particles.js). The gradient lives in CSS rather than
   being applied by JS, so the band still looks right before the script runs,
   with JS off, or under prefers-reduced-motion.

   Padding matches /extension-guide/ (160/80 desktop, 90/30 mobile): the header
   above is fixed and out of flow, so the top padding is what clears it.
   ========================================================= */
.captcha-hero {
	--captcha-hero-pad-top: 160px;
	--captcha-hero-pad-bottom: 80px;

	position: relative;
	background-color: #000;
	background-image:
		radial-gradient(46% 82% at 1% 14%, rgba(66, 214, 142, 0.95) 0%, rgba(58, 200, 135, 0.32) 40%, rgba(58, 200, 135, 0) 66%),
		radial-gradient(30% 60% at 0% 100%, rgba(120, 118, 225, 0.70) 0%, rgba(120, 118, 225, 0) 62%),
		radial-gradient(52% 96% at 100% 60%, rgba(58, 208, 135, 0.62) 0%, rgba(58, 200, 135, 0.18) 42%, rgba(58, 200, 135, 0) 72%),
		radial-gradient(48% 72% at 92% 114%, rgba(97, 119, 179, 0.88) 0%, rgba(97, 119, 179, 0) 62%);
	background-repeat: no-repeat;
}

.captcha-hero__inner {
	position: relative;
	z-index: 1;
	max-width: min(100%, var(--container-max-width, 1240px));
	margin: 0 auto;
	padding: var(--captcha-hero-pad-top) 20px var(--captcha-hero-pad-bottom);
	box-sizing: border-box;
}

/* Doubled-up selectors so theme rules like `.site-main h1` don't win. */
.captcha-hero .captcha-hero__title {
	margin: 0 0 12px;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.027em;
	text-transform: none;
	color: #fff;
}

.captcha-hero .captcha-hero__desc {
	max-width: 550px;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #f6f6f6;
}

@media (max-width: 766.98px) {
	.captcha-hero {
		--captcha-hero-pad-top: 90px;
		--captcha-hero-pad-bottom: 30px;
	}

	.captcha-hero .captcha-hero__title {
		font-size: 27px;
	}
}

/* =========================================================
   Demo page hero panel
   The rounded inset hero the landing pages use, sitting inside the page
   container (rather than full-bleed like the gallery band) so it lines up with
   the widget and the copy below it. Same gradient stack and particle field as
   the gallery hero, since the JS claims every .captcha-hero on the page.
   ========================================================= */
.captcha-hero--panel {
	--captcha-hero-pad-top: 64px;
	--captcha-hero-pad-bottom: 56px;

	margin-bottom: 42px;
	border-radius: 24px;
	/* Clips the injected particle canvas to the rounded corners. */
	overflow: hidden;
}

.captcha-hero--panel .captcha-hero__inner {
	max-width: 100%;
	padding: var(--captcha-hero-pad-top) 44px var(--captcha-hero-pad-bottom);
	text-align: center;
}

.captcha-hero__eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #30e87a;
}

/* Doubled-up selectors so theme rules like `.site-main h1` don't win. */
.captcha-hero--panel .captcha-hero__title {
	max-width: 22ch;
	margin: 0 auto 16px;
	font-size: clamp(28px, 4.4vw, 44px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.02em;
}

.captcha-hero--panel .captcha-hero__desc {
	max-width: 620px;
	margin: 0 auto;
	font-size: 16.5px;
	line-height: 1.55;
	color: rgba(240, 244, 255, 0.86);
	text-align: center;
}

.captcha-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 28px 0 0;
}

.captcha-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	transition: var(--global-transition, all 0.2s ease);
}

.captcha-hero-btn:hover,
.captcha-hero-btn:focus {
	text-decoration: none;
	transform: translateY(-1px);
}

.captcha-hero-btn--primary,
.captcha-hero-btn--primary:hover,
.captcha-hero-btn--primary:focus {
	color: #06301a;
	background: #30e87a;
	box-shadow: 0 10px 22px -12px rgba(48, 232, 122, 0.8);
}

.captcha-hero-btn--primary:hover,
.captcha-hero-btn--primary:focus {
	background: #29d46e;
}

/* The brand purple, same value and hover as the landing pages' .cskl-btn--purple. */
.captcha-hero-btn--purple,
.captcha-hero-btn--purple:hover,
.captcha-hero-btn--purple:focus {
	color: #fff;
	background: #936dff;
	box-shadow: 0 10px 22px -12px rgba(147, 109, 255, 0.8);
}

.captcha-hero-btn--purple:hover,
.captcha-hero-btn--purple:focus {
	background: #6f4be6;
}

.captcha-hero-btn--ghost,
.captcha-hero-btn--ghost:hover,
.captcha-hero-btn--ghost:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.28);
}

.captcha-hero-btn--ghost:hover,
.captcha-hero-btn--ghost:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
}

/* The reset also stops a theme's `.site-main ul` rules re-adding markers. */
.captcha-hero__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.captcha-hero__chip {
	margin: 0;
	padding: 6px 13px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(240, 244, 255, 0.92);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
}

@media (max-width: 766.98px) {
	.captcha-hero--panel {
		--captcha-hero-pad-top: 46px;
		--captcha-hero-pad-bottom: 42px;

		margin-bottom: 32px;
		border-radius: 18px;
	}

	.captcha-hero--panel .captcha-hero__inner {
		padding: var(--captcha-hero-pad-top) 22px var(--captcha-hero-pad-bottom);
	}

	.captcha-hero--panel .captcha-hero__title {
		font-size: 27px;
	}
}

/* =========================================================
   Gallery
   ========================================================= */
.captcha-gallery-page {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	padding-top: 50px;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 50px;
	box-sizing: border-box;
}

/* Page content, rendered below the card grid. */
.captcha-gallery-outro {
	margin-top: 50px;
}

.captcha-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	gap: var(--grid-columns-gap, 30px);
}

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

@media (max-width: 600px) {
	.captcha-gallery-grid {
		grid-template-columns: 1fr;
	}
}

.captcha-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-white, #fff);
	border: 1px solid var(--color-border, #e7e7e7);
	border-radius: var(--global-border-radius, 12px);
	box-shadow: var(--box-shadow, 0 40px 60px 0 rgb(0 0 0 / 5%));
	text-decoration: none;
	color: inherit;
	transition: var(--global-transition, all 0.2s ease);
}

a.captcha-card:hover {
	transform: translateY(-6px);
	border-color: var(--color-border-hard, #d9d9d9);
}

.captcha-card.is-unlinked {
	opacity: 0.75;
}

.captcha-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--color-white, #fff);
	overflow: hidden;
}

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

.captcha-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
}

.captcha-card__tagline {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--letter-spacing-small, 0.04em);
	text-transform: uppercase;
	color: var(--e-global-color-primary, #4353ff);
}

.captcha-card__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--e-global-color-text, #1a1a1a);
}

.captcha-card__desc {
	font-size: var(--font-size-default, 14px);
	line-height: var(--line-height-paragraph, 1.75);
	color: var(--color-text, #757575);
}

.captcha-card__cta {
	align-self: flex-start;
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 20px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	color: #06301a;
	background: var(--e-global-color-primary, #30e87a);
	border: 1px solid transparent;
	/* 11px, the hero's shape. See the note on .cskip-btn in
	   captcha-tutorial.css: one button shape across these pages. */
	border-radius: 11px;
	box-shadow: 0 10px 22px -12px rgba(48, 232, 122, 0.8);
	transition: box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

/* Deepen the shadow rather than brighten the fill, which is how the home page
   and the hero answer a hover on a solid button. */
a.captcha-card:hover .captcha-card__cta {
	box-shadow: 0 5px 16px -5px rgba(48, 232, 122, 0.6);
}

.captcha-card.is-unlinked .captcha-card__cta {
	color: var(--e-global-color-text, #1a1a1a);
	background: var(--e-global-color-light, #f5f5f5);
}

/* =========================================================
   Single demo page
   ========================================================= */
/* Same content width as the gallery and the landing pages (the theme's
   container variable), so every page on the site lines up. */
.captcha-single-page {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 50px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* The hero's "Try it live" jumps here; keep it clear of the header, which is
   now the home page's: fixed, 120px tall above 1024px. */
.captcha-single-demo {
	scroll-margin-top: 148px;
}

.captcha-widget {
	margin-bottom: var(--content-spacing, 1.5em);
	padding: 30px;
	background: var(--color-white, #fff);
	border: 1px solid var(--color-border, #e7e7e7);
	border-radius: var(--global-border-radius, 12px);
	box-shadow: var(--box-shadow, 0 40px 60px 0 rgb(0 0 0 / 5%));
	text-align: center;
}

.captcha-widget__head {
	margin-bottom: 18px;
}

.captcha-widget__title {
	margin: 0;
	font-size: 30px !important;
	color: var(--e-global-color-text, #1a1a1a);
}

.captcha-widget__hint {
	margin: 0 0 16px;
	font-size: var(--font-size-default, 14px);
	color: var(--color-text, #757575);
}

.captcha-widget__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.captcha-tabs {
	width: 100%;
}

.captcha-tabs__nav {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 22px;
}

.captcha-tab {
	padding: 10px 18px !important;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--e-global-color-text, #1a1a1a);
	background: var(--e-global-color-light, #f5f5f5);
	border: 1px solid var(--color-border, #e7e7e7);
	border-radius: 11px;
	cursor: pointer;
	transition: box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.captcha-tab:hover,
.captcha-tab:focus {
	color: #000;
	text-decoration: none;
}

.captcha-tab.is-active {
	color: #fff;
	background: var(--e-global-color-primary, #4353ff);
	border-color: transparent;
}

.captcha-tab.is-active:hover,
.captcha-tab.is-active:focus {
	color: #fff;
}

.captcha-tab-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.captcha-tab-panel[hidden] {
	display: none;
}

.captcha-widget__status {
	margin: 16px 0 0;
	min-height: 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text, #757575);
}

.captcha-widget.is-verified .captcha-widget__status {
	color: var(--e-global-color-secondary, #38d996);
}

.captcha-widget.is-error .captcha-widget__status {
	color: #e03e3e;
}

.captcha-widget__notice {
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-text, #1a1a1a);
	background: var(--e-global-color-light, #f5f5f5);
	border-radius: 10px;
}

/* Once the month's free assessments are used up, Google prints "This site is
   exceeding reCAPTCHA Enterprise free quota." inside the checkbox widget. It
   is drawn inside Google's own cross-origin iframe (as #rc-anchor-over-quota),
   so it cannot be removed or restyled from here, only covered.

   Measured from the anchor frame itself, in iframe coordinates: the frame is
   304x78 and the widget in it (.rc-anchor) is 302x76 at 0,0, flat #f9f9f9
   with a 1px #d3d3d3 border running at y 75-76. The notice box is y 47-75,
   but its two lines of 9px text only start at y 50, and the checkbox above it
   ends at y 50.5. So the patch starts at y 51: below the checkbox, above the
   text, and clear of the border and of the drop shadow outside it. Covering
   any of those three is what made earlier versions of this show up, first as
   a pale box where the border had gone, then as a clipped checkbox.

   In a healthy widget the same strip is empty: the "I'm not a robot" line box
   ends at y 47 and the logo with its Privacy/Terms links starts at x 207, so
   the patch stays invisible once the quota resets. pointer-events keeps the
   checkbox clickable through it. Drop this block if the demo ever stops
   running over quota. */
.captcha-widget--recaptcha_v2 .g-recaptcha,
.captcha-widget--recaptcha_v2_callback .g-recaptcha {
	position: relative;
}

.captcha-widget--recaptcha_v2 .g-recaptcha::after,
.captcha-widget--recaptcha_v2_callback .g-recaptcha::after {
	content: "";
	position: absolute;
	top: 51px;
	left: 1px;
	width: 179px;
	height: 24px;
	background: #f9f9f9;
	pointer-events: none;
}

/* Perf panel: stopwatch and cost cells. Sit under the widget status.
   Kept to the same 760px column as the verification response below it, so
   the two panels line up as one stack rather than one stretching edge-to-edge. */
.captcha-perf {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
	width: 100%;
	max-width: 760px;
	margin: 16px auto 0;
}

.captcha-perf[hidden] {
	display: none;
}

/* One-cell variant (challenge page: cost only). Keep it a sensible width
   instead of stretching a single cell to 760px. */
.captcha-perf--single {
	grid-template-columns: minmax(220px, 360px);
	justify-content: center;
}

.captcha-perf__cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	background: var(--e-global-color-light, #f5f5f5);
	border: 1px solid var(--color-border, #e7e7e7);
	border-radius: 10px;
	text-align: left;
}

.captcha-perf__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text, #757575);
}

.captcha-perf__value {
	font-size: 22px;
	font-weight: 700;
	color: var(--e-global-color-text, #1a1a1a);
	font-variant-numeric: tabular-nums;
}

.captcha-perf__cell--cost .captcha-perf__value {
	color: var(--e-global-color-secondary, #38d996);
}

.captcha-perf__meta {
	font-size: 12px;
	color: var(--color-text, #757575);
}

.captcha-perf__meta[hidden] {
	display: none;
}

.captcha-single-content {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* The tutorial/FAQ HTML pasted into each demo page (an Elementor HTML widget)
   caps itself at 960px, which is why these pages still read narrower than the
   landing pages once the container is widened. Two classes so this beats that
   block's own inline `.cskip-tut { max-width: 960px }`, which the widget prints
   after this stylesheet. */
.captcha-single-content .cskip-tut {
	max-width: 100%;
}

/* =========================================================
   Shared controls
   ========================================================= */
.captcha-btn[hidden] {
	display: none;
}

/* The theme's own `button` rules were beating this one on padding and height
   (they came out 40px tall with 30px of side padding however this was
   written), so the properties that have to win are repeated below under a
   selector the theme cannot outrank. */
.captcha-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 0 22px;
	height: 44px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	color: #06301a;
	background: var(--e-global-color-primary, #30e87a);
	border: 1px solid transparent;
	border-radius: 11px;
	box-shadow: 0 10px 22px -12px rgba(48, 232, 122, 0.8);
	cursor: pointer;
	transition: box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.captcha-widget .captcha-btn,
.captcha-tab-panel .captcha-btn {
	gap: 9px;
	height: 44px;
	padding: 0 22px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	border-radius: 11px;
}

.captcha-btn:hover {
	box-shadow: 0 5px 16px -5px rgba(48, 232, 122, 0.6);
}

/* The one purple button on these pages, the same purple and the same hover as
   the landing pages' .cskl-btn--purple. */
.captcha-challenge-link,
.captcha-challenge-link:hover,
.captcha-challenge-link:focus {
	color: #fff;
	background: #936dff;
	border-color: transparent;
	text-decoration: none;
}

.captcha-challenge-link {
	box-shadow: 0 10px 22px -12px rgba(147, 109, 255, 0.8);
}

.captcha-challenge-link:hover,
.captcha-challenge-link:focus {
	box-shadow: 0 5px 16px -5px rgba(147, 109, 255, 0.6);
}

.captcha-challenge-result {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	font-size: 16px;
	font-weight: 600;
	color: #1a6b3c;
	background: #e6f7ec;
	border: 1px solid #a3d9b8;
	border-radius: 12px;
}

.captcha-challenge-result__icon {
	font-size: 22px;
	line-height: 1;
	color: #1a9e52;
}

.captcha-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.captcha-btn.is-loading {
	position: relative;
	color: transparent;
}

.captcha-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	/* Dark on the green fill: the spinner used to be white on indigo. */
	border: 2px solid rgba(6, 48, 26, 0.35);
	border-top-color: #06301a;
	border-radius: 50%;
	animation: captcha-spin 0.7s linear infinite;
}

/* Reset is the quiet half of the pair beside Check, and it was the loudest
   thing under the widget: a solid purple fill on a button whose own class says
   ghost. Same outline treatment the hero and the landing pages use, hovering
   green like every other outline button on the site. */
.captcha-btn--ghost,
.captcha-widget .captcha-btn--ghost,
.captcha-tab-panel .captcha-btn--ghost {
	color: #12161f;
	background: #f7f8fb;
	border-color: #e6e9f2;
	box-shadow: none;
}

.captcha-btn--ghost:hover,
.captcha-widget .captcha-btn--ghost:hover,
.captcha-tab-panel .captcha-btn--ghost:hover {
	color: #0a7a43;
	background: #f7f8fb;
	border-color: #12b464;
	box-shadow: none;
}

.captcha-input {
	height: 46px;
	padding: 0 14px;
	font-size: var(--font-size-default, 14px);
	color: var(--e-global-color-text, #1a1a1a);
	background: var(--color-white, #fff);
	border: 1px solid var(--color-border-hard, #d9d9d9);
	border-radius: var(--global-border-radius, 12px);
	transition: var(--global-transition, all 0.2s ease);
}

.captcha-input:focus {
	outline: none;
	border-color: var(--e-global-color-primary, #4353ff);
}

.captcha-row {
	display: flex;
	gap: 10px;
	align-items: center;
}

@keyframes captcha-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================
   Verification response panel
   ========================================================= */
/* The card runs the full content width, so the response panel keeps a column of
   its own: a two-value list stretched across 1200px is hard to read back. */
.captcha-result {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 18px;
	padding: 18px 20px;
	text-align: left;
	background: var(--e-global-color-light, #f7f7f9);
	border-radius: var(--global-border-radius, 12px);
	border: 1px solid var(--color-border, #e7e7e7);
}

.captcha-result__title {
	margin-bottom: 12px;
	padding-bottom: 10px;
	text-align: center;
	border-bottom: 1px solid var(--color-border, #e7e7e7);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--letter-spacing-small, 0.04em);
	text-transform: uppercase;
	color: var(--color-text, #757575);
}

.captcha-result__list {
	margin: 0;
}

.captcha-result__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-size: 14px;
	border-bottom: 1px solid var(--color-border, #ececf0);
}

.captcha-result__row:last-child {
	border-bottom: none;
}

.captcha-result__row dt {
	padding: 9px 16px 9px 0;
	font-weight: 600;
	text-align: left;
	color: var(--e-global-color-text, #1a1a1a);
}

.captcha-result__row dd {
	margin: 0;
	padding: 9px 0 9px 16px;
	text-align: left;
	word-break: break-word;
	border-left: 1px solid var(--color-border, #ececf0);
	color: var(--color-text, #757575);
}

.captcha-result__row dd.is-mono {
	font-family: var(--e-global-typography-text-font-family, monospace);
	font-size: 12px;
}

.captcha-result__row dd.is-true {
	font-weight: 700;
	color: var(--e-global-color-secondary, #2f9e44);
}

.captcha-result__row dd.is-false {
	font-weight: 700;
	color: #e03e3e;
}

/* =========================================================
   GeeTest v3
   gt.js injects its own stylesheet and lays the panel out left-to-right, so all
   this does is give it a sensible column to sit in inside the centred stage and
   hold the height while the challenge is being registered.
   ========================================================= */
.captcha-geetest {
	width: 100%;
	max-width: 320px;
	min-height: 44px;
	margin: 0 auto;
	text-align: left;
}

/* =========================================================
   Text (distorted characters) sample
   ========================================================= */
.captcha-text__canvas {
	width: 100%;
	max-width: 220px;
	height: 70px;
	border-radius: var(--global-border-radius, 12px);
	background: var(--e-global-color-light, #f5f5f5);
}

.captcha-text__controls {
	margin-top: 12px;
}

@media (max-width: 766.98px) {
	.captcha-widget {
		padding: 24px;
	}
}

/* =========================================================
   SEO copy + FAQ accordion below the grid
   Same design tokens as the "About this reCAPTCHA v2 demo" section on the
   per-type demo pages, scoped to .cskip-demoseo so the two never collide.
   ========================================================= */
.cskip-demoseo {
	--cs-indigo: #4353ff;
	--cs-indigo-ink: #2f3bd9;
	--cs-indigo-soft: #eef0ff;
	--cs-green-2: #0fa25e;
	--cs-green-soft: #e7fbef;
	--cs-ink: #0f1222;
	--cs-body: #4a5063;
	--cs-muted: #8a90a2;
	--cs-line: #e7e8ef;
	--cs-surface: #fff;
	--cs-soft: #f6f7fb;
	--cs-radius: 16px;
	--cs-radius-sm: 12px;

	/* Full width of the container, so the cards line up with the card grid. */
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	color: var(--cs-body);
	-webkit-font-smoothing: antialiased;
}

.cskip-demoseo * {
	box-sizing: border-box;
}

.cskip-demoseo h2,
.cskip-demoseo h3 {
	margin: 0;
	padding: 0;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--cs-ink);
}

.cskip-demoseo p {
	margin: 0;
	padding: 0;
}

.cskip-demoseo a {
	text-decoration: none;
}

.cskip-demoseo code {
	padding: 2px 7px !important;
	border: 0 !important;
	border-radius: 5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.5px;
	color: var(--cs-indigo-ink) !important;
	background: var(--cs-indigo-soft) !important;
}

.cskip-seo {
	margin-top: 22px;
	padding: 26px 26px 28px;
	background: var(--cs-surface);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	box-shadow: 0 20px 44px -34px rgb(20 24 60 / 50%);
}

.cskip-seo:first-of-type {
	margin-top: 0;
}

.cskip-seo__h2 {
	margin: 0 0 14px !important;
	font-size: clamp(23px, 3.4vw, 31px) !important;
	line-height: 1.2 !important;
}

.cskip-seo__h {
	margin: 0 0 12px !important;
	font-size: 19px !important;
	line-height: 1.3 !important;
}

.cskip-seo p {
	margin: 0 0 14px !important;
	font-size: 15px;
	line-height: 1.65;
	color: var(--cs-body);
}

.cskip-seo p:last-of-type {
	margin-bottom: 0 !important;
}

.cskip-seo p strong {
	font-weight: 700;
	color: var(--cs-ink);
}

.cskip-seo a {
	font-weight: 600;
	color: var(--cs-indigo);
}

.cskip-seo a:hover {
	text-decoration: underline;
}

/* FAQ accordion */
.cskip-faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.cskip-faq__q {
	overflow: hidden;
	background: var(--cs-soft);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius-sm);
}

.cskip-faq__q summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	list-style: none;
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--cs-ink);
}

.cskip-faq__q summary::-webkit-details-marker {
	display: none;
}

.cskip-faq__q summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 2px;
	border-right: 2px solid var(--cs-muted);
	border-bottom: 2px solid var(--cs-muted);
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.cskip-faq__q[open] summary::after {
	transform: rotate(-135deg);
}

.cskip-faq__a {
	padding: 0 16px 15px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--cs-body);
}

.cskip-faq__a a {
	font-weight: 600;
	color: var(--cs-indigo);
}

.cskip-faq__a a:hover {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.cskip-seo {
		padding: 20px 18px 22px;
	}
}

/* =========================================================
   Room for the shared hero
   The hero comes from the landing pages plugin now. It is full-bleed and the
   site header floats over it, so it has to start at the very top of the page:
   the boxes it sits in give up the offsets they used to hold above their own
   hero. Keyed on the body class that plugin adds, so the fallback hero (drawn
   here, inset, with a band of its own) keeps its spacing.
   ========================================================= */
body.capskip-landing-page .captcha-single-page {
	margin-top: 0;
}

body.capskip-landing-page .captcha-gallery-page {
	padding-top: 0;
}