/* CapSkip SDKs page - self contained, matched to capskip.com */

/* Strip the theme container's vertical padding on this page */
.keydesign-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.capskip-sdks {
	--csk-accent: #4353ff;          /* capskip primary indigo */
	--csk-accent-2: #936dff;        /* capskip purple */
	--csk-accent-3: #2575fc;        /* gradient blue */
	--csk-green: #30e87a;           /* capskip secondary */
	--csk-grad: linear-gradient(-35deg, #2575fc 0%, #6a11cb 100%);

	--csk-bg: #ffffff;
	--csk-surface: #f7f8fb;
	--csk-surface-2: #eef1f7;
	--csk-border: #e6e9f2;
	--csk-text: #12161f;
	--csk-muted: #626a7d;
	/* Code blocks — matched to the EnlighterJS override used on capskip.com/api-docs/ */
	--csk-code-bg: #0d1020;
	--csk-code-bar: #171a2e;
	--csk-code-line: #262a45;
	--csk-code-text: #e6e8f2;
	--csk-radius: 14px;
	--csk-shadow: 0 1px 2px rgba(18, 22, 40, .05), 0 10px 26px -14px rgba(18, 22, 40, .16);

	/* Follow the site's content width (the theme's container variable), so this
	   page lines up with the landing pages instead of sitting in a narrower
	   column of its own. */
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	/* No side padding above 1280px, so the sections start on the header logo's
	   left edge like the landing hero above them; 20px comes back below 1280px,
	   where this column runs the full width of the window (rule just below). */
	padding: 0 0 40px;
	color: var(--csk-text);
	font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

@media (max-width: 1279px) {
	.capskip-sdks { padding-left: 20px; padding-right: 20px; }
}

.capskip-sdks *,
.capskip-sdks *::before,
.capskip-sdks *::after {
	box-sizing: border-box;
}

.capskip-sdks h1,
.capskip-sdks h2,
.capskip-sdks h3 {
	margin: 0;
	line-height: 1.18;
	letter-spacing: -0.02em;
}

.capskip-sdks h1 { line-height: 1.3; }

.capskip-sdks h2 { margin-bottom: 30px; }

/* Card header title stays tight, not spaced by the global h2 rule */
.csk-panel-head h2 { margin-bottom: 0; }

/* Hero
   Ported from capskip-landing-pages (.cskl-hero) so this page and the landing
   pages share one hero treatment: a dark rounded card lit from its corners by
   the two brand colours. */
.csk-hero {
	position: relative;
	margin-top: 24px;
	border-radius: 24px;
	overflow: hidden;
	background-color: #000;
	background-image:
		radial-gradient(46% 82% at 2% 10%, rgba(48, 232, 122, .55) 0%, rgba(48, 232, 122, .12) 42%, rgba(48, 232, 122, 0) 68%),
		radial-gradient(42% 78% at 100% 8%, rgba(147, 109, 255, .60) 0%, rgba(147, 109, 255, .14) 44%, rgba(147, 109, 255, 0) 70%),
		radial-gradient(60% 100% at 88% 118%, rgba(48, 232, 122, .38) 0%, rgba(48, 232, 122, 0) 60%),
		radial-gradient(50% 90% at 8% 120%, rgba(147, 109, 255, .45) 0%, rgba(147, 109, 255, 0) 62%);
	background-repeat: no-repeat;
}

.csk-hero-inner {
	position: relative;
	z-index: 1;
	padding: 62px 44px 54px;
	text-align: center;
}

.csk-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--csk-green);
	margin-bottom: 14px;
}

.capskip-sdks .csk-hero h1 {
	font-size: clamp(28px, 4.4vw, 44px);
	font-weight: 800;
	line-height: 1.14;
	color: #fff;
	max-width: 20ch;
	margin: 0 auto;
}

.capskip-sdks .csk-lead {
	max-width: 620px;
	margin: 16px auto 0;
	font-size: 16.5px;
	line-height: 1.55;
	color: rgba(240, 244, 255, .86);
	/* Force centre even if the theme left-aligns .entry-content paragraphs. */
	text-align: center;
}

.csk-hero-cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 26px;
}

/* The particle canvas is inserted as the hero's first child. */
.csk-hero > canvas.cap-particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* The ghost button sits on the dark card here, so it inverts. */
.csk-hero .csk-btn-ghost {
	background: rgba(255, 255, 255, .08);
	color: #fff;
	border-color: rgba(255, 255, 255, .28);
}

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

/* The hero's buttons are the site's own now, so these match them: 11px
   corners, and a hover that answers with shadow and colour rather than
   moving. They were 999px pills that lifted 1px and changed colour entirely,
   which put two different buttons for the same action on one page. Matched to
   .cskl-btn in the landing pages stylesheet, where that shape is defined. */
.csk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 22px;
	border-radius: 11px;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1;
	text-decoration: none;
	transition: box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
	border: 1px solid transparent;
}

.csk-btn-primary {
	background: var(--csk-green);
	color: #06301a;
	box-shadow: 0 10px 22px -12px rgba(48, 232, 122, .8);
}

/* Deepen the shadow, keep the fill. */
.csk-btn-primary:hover {
	background: var(--csk-green);
	color: #06301a;
	box-shadow: 0 5px 16px -5px rgba(48, 232, 122, .6);
}

.csk-btn-ghost {
	background: var(--csk-surface);
	color: var(--csk-text);
	border-color: var(--csk-border);
}

/* Green, like every other outline button on the site. */
.csk-btn-ghost:hover {
	background: var(--csk-surface);
	color: #0a7a43;
	border-color: #12b464;
}

.csk-btn-sm {
	margin-top: 12px;
	padding: 10px 16px;
	font-size: 13.5px;
}

/* Language cards */
.csk-langs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	/* The hero is a card with no bottom padding of its own, so the gap after it
	   lives here, the way the landing pages put it on the following section. */
	margin: 40px 0 44px;
}

.csk-lang-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 11px;
	padding: 11px 13px;
	border-radius: 12px;
	background: var(--csk-surface);
	border: 1px solid var(--csk-border);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.csk-lang-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--csk-shadow);
	border-color: var(--csk-accent);
}

.csk-lang-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: var(--csk-icon, var(--csk-accent));
}

.csk-lang-icon svg { width: 100%; height: 100%; display: block; }

.csk-lang-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.csk-lang-name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.csk-lang-tag {
	font-size: 11.5px;
	color: var(--csk-muted);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Section titles */
.csk-section-title {
	font-size: 35px !important;
	font-weight: 800;
	text-align: center;
	margin-bottom: 20px;
}

/* Captcha grid */
.csk-captchas { margin-bottom: 44px; }

.csk-captcha-grid {
	display: grid;
	/* Three across, so the nine types read as three even rows. */
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.csk-captcha-card {
	padding: 16px;
	border-radius: var(--csk-radius);
	background: var(--csk-surface);
	border: 1px solid var(--csk-border);
}

.csk-captcha-card h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.csk-captcha-card p { margin: 0; font-size: 13px; color: var(--csk-muted); line-height: 1.5; }

/* Tabs + panels */
.csk-tabs {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto 18px;
	padding: 4px;
	/* Squared off with the buttons. The inner radius is this one minus the 4px
	   padding, so the tabs sit concentric inside the bar. */
	border-radius: 12px;
	background: var(--csk-surface);
	border: 1px solid var(--csk-border);
	width: fit-content;
	max-width: 100%;
}

.csk-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 8px 8px 8px !important;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--csk-muted);
	font: inherit;
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
	transition: all .14s ease;
}

.csk-tab-icon { width: 14px; height: 14px; display: inline-flex; color: var(--csk-icon, currentColor); }
.csk-tab-icon svg { width: 100%; height: 100%; }

.csk-tab:hover { color: var(--csk-text); background: var(--csk-surface-2); }

.csk-tab.is-active {
	background: var(--csk-accent);
	border-color: var(--csk-accent);
	color: #fff;
}

.csk-tab.is-active:hover { background: var(--csk-accent); }

.csk-tab.is-active .csk-tab-icon:not(.csk-tab-icon--tile) { color: #fff; }

/* With capskip-icons the tab carries the language's own mark, as in the header
   menu, on the menu's white tile so it still reads on the active tab's blue. */
.csk-tab-icon--tile {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background: #fff;
	place-items: center;
	display: inline-grid;
}
.csk-tab-icon--tile svg { width: 14px; height: 14px; }

.csk-panel { display: none; }
.csk-panel.is-active { display: block; animation: csk-fade .22s ease; }

@keyframes csk-fade {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: translateY(0); }
}

.csk-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 18px 20px;
	border-radius: var(--csk-radius) var(--csk-radius) 0 0;
	background: var(--csk-surface);
	border: 1px solid var(--csk-border);
	border-bottom: 0;
}

.csk-panel-head h2 { font-size: 19px; font-weight: 800; }
.csk-panel-head p { margin: 3px 0 0; font-size: 13px; color: var(--csk-muted); }

.csk-panel-links { display: flex; gap: 7px; }

.csk-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--csk-surface-2);
	border: 1px solid var(--csk-border);
	color: var(--csk-text);
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
	transition: border-color .14s ease, color .14s ease;
}

.csk-pill:hover { border-color: var(--csk-accent); color: var(--csk-accent); }

/* Steps */
.csk-step {
	display: flex;
	gap: 14px;
	padding: 18px 20px;
	background: var(--csk-bg);
	border: 1px solid var(--csk-border);
	border-bottom: 0;
}

.csk-step:last-child {
	border-bottom: 1px solid var(--csk-border);
	border-radius: 0 0 var(--csk-radius) var(--csk-radius);
}

.csk-step-num {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 13px;
	color: #fff;
	background: var(--csk-accent-2);
}

/* A picture of the step replaces the numbered disc, in the landing pages'
   step tile: signal tint, ink line work, the accent in signal ink. */
.csk-step-num--icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--pa-signal-tint, #e6f8ee);
	color: var(--pa-ink, #0a0e14);
	--csi-accent: var(--pa-signal-ink, #0a7d4b);
}
.csk-step-num--icon .csi { width: 20px; height: 20px; display: block; }

.csk-step-body { flex: 1 1 auto; min-width: 0; }
.csk-step-body h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 10px; }


/* Code blocks
   Mirrors the EnlighterJS override used on capskip.com/api-docs/: a 44px title
   bar with traffic-light dots, a language label and a copy button, over a dark
   code area. No line numbers, matching that override. */
.csk-code {
	background: var(--csk-code-bg);
	border: 1px solid var(--csk-code-line);
	border-radius: 12px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 18px 40px -30px rgba(13, 16, 32, .9);
}

/* Top bar */
.csk-code-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	background: var(--csk-code-bar);
	border-bottom: 1px solid var(--csk-code-line);
}

/* Traffic-light dots */
.csk-code-bar::before {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff5f57;
	box-shadow: 17px 0 0 #febc2e, 34px 0 0 #28c840;
	margin-right: 34px;
}

/* Language label */
.csk-code-lang {
	flex: none;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #aeb4d0;
	white-space: nowrap;
}

.csk-copy {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	width: auto;
	height: 30px;
	padding: 0 12px !important;
	background: transparent;
	border: 1px solid var(--csk-code-line);
	border-radius: 8px;
	color: #c3c8e2;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
}

.csk-copy:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.csk-copy.is-copied { color: var(--csk-green); border-color: rgba(48, 232, 122, .45); }

/* Code area */
.csk-code pre {
	margin: 0;
	padding: 16px 18px;
	background: var(--csk-code-bg);
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: #2f3454 transparent;
}

.csk-code pre::-webkit-scrollbar { height: 8px; }
.csk-code pre::-webkit-scrollbar-track { background: transparent; }
.csk-code pre::-webkit-scrollbar-thumb { background: #2f3454; border-radius: 4px; }

.csk-code code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--csk-code-text);
	white-space: pre;
	background: transparent;
	padding: 0;
}

/* Responsive */
@media (max-width: 860px) {
	.csk-langs, .csk-captcha-grid { grid-template-columns: repeat(2, 1fr); }
	.csk-hero-inner { padding: 48px 26px 42px; }
}

/* Matches the api-docs override, which drops the language label on narrow screens. */
@media (max-width: 640px) {
	.csk-code-lang { display: none; }
}

@media (max-width: 520px) {
	.csk-langs, .csk-captcha-grid { grid-template-columns: 1fr; }
	.csk-hero { margin-top: 16px; border-radius: 18px; }
	.csk-hero-inner { padding: 40px 20px 34px; }
	.csk-panel-head { flex-direction: column; align-items: flex-start; }
}

/* Palette A ("Signal, tuned"). Scoped to html.cskpal-a, the class capskip-palette
   prints on <html>, so switching the palette off (capskip_palette_mode = off)
   drops every rule below and this page returns to the colours above. The --pa-*
   tokens are declared by that plugin on the same element.

   Same mapping the palette gives the landing pages, whose hero sits directly
   above this block on /captcha-solving-sdk/: indigo and purple become the one
   info blue, the cool greys become paper and line, the code block sits on
   surface, green buttons get the ink label and the shared hover.

   Left alone on purpose: the per-language brand colours (--csk-icon, set inline
   from the SDK list) and the three window dots on the code bar. The .csk-hero
   rules above are not remapped because the page uses the landing hero instead. */
html.cskpal-a .capskip-sdks {
	--csk-accent: var(--pa-info);
	--csk-accent-2: var(--pa-info);
	--csk-accent-3: var(--pa-info);
	--csk-green: var(--pa-signal);
	--csk-bg: #ffffff;
	--csk-surface: var(--pa-paper);
	--csk-surface-2: var(--pa-paper-2);
	--csk-border: var(--pa-line);
	--csk-text: var(--pa-ink);
	--csk-muted: var(--pa-muted);
	--csk-code-bg: var(--pa-surface);
	--csk-code-bar: var(--pa-surface-2);
	--csk-code-line: rgba(255, 255, 255, .08);
	--csk-code-text: #f2f4fb;
}
html.cskpal-a .capskip-sdks .csk-btn-primary,
html.cskpal-a .capskip-sdks .csk-btn-primary:hover { color: var(--pa-ink); }
html.cskpal-a .capskip-sdks .csk-btn-primary:hover { background: var(--pa-signal-hover); }
html.cskpal-a .capskip-sdks .csk-btn-ghost:hover { color: var(--pa-signal-ink); border-color: var(--pa-signal-ink); }
html.cskpal-a .capskip-sdks .csk-code-lang { color: var(--pa-dark-muted); }
html.cskpal-a .capskip-sdks .csk-copy { color: #a8b0c4; }
html.cskpal-a .capskip-sdks .csk-copy:hover { color: #f2f4fb; }
html.cskpal-a .capskip-sdks .csk-code pre { scrollbar-color: rgba(255, 255, 255, .16) transparent; }
html.cskpal-a .capskip-sdks .csk-code pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }