/* =============================================================================
   /configkit/try/ (page-configkit-try.php), stage 3, 17 Oct 2026.
   Scoped to .ckt. Space and background only: no borders, outlines, rules or side bars.
   The Craftor try page has its own try-craftor.css.
   ============================================================================= */

.ckt {
	--ckt-blue: #0066ff;
	--ckt-blue-dk: #0052cc;
	--ckt-navy: #0f1a2e;
	--ckt-ink: #101828;
	--ckt-muted: #5b6475;
	--ckt-soft: #f4f7fc;
	--ckt-tint: #e8f0ff;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ckt-ink);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

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

.ckt-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.ckt .ckt-kicker {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ckt-blue);
}

/* ---- Buttons: filled, never outlined ---------------------------------- */
.ckt .ckt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 14px 22px;
	border: 0;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.ckt .ckt-btn:hover {
	transform: translateY(-1px);
}

.ckt .ckt-btn--main,
.ckt .ckt-btn--main:visited {
	background: var(--ckt-blue);
	color: #fff;
}

.ckt .ckt-btn--main:hover {
	background: var(--ckt-blue-dk);
	color: #fff;
}

.ckt .ckt-btn--soft,
.ckt .ckt-btn--soft:visited {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.ckt .ckt-btn--soft:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.ckt .ckt-btn--dark,
.ckt .ckt-btn--dark:visited {
	background: var(--ckt-navy);
	color: #fff;
}

.ckt .ckt-btn--dark:hover {
	background: #1d2b45;
	color: #fff;
}

.ckt a:focus-visible,
.ckt button:focus-visible {
	outline: 3px solid #7cb2ff;
	outline-offset: 2px;
}

/* ---- 1. The head: short, so the first configurator starts on the first screen ---- */
.ckt-head {
	padding: 128px 0 44px;
	background:
		radial-gradient(circle at 12% 30%, rgba(0, 102, 255, 0.22), transparent 52%),
		radial-gradient(circle at 88% 90%, rgba(0, 163, 255, 0.12), transparent 50%),
		linear-gradient(160deg, #001429 0%, #0a1929 60%, #071b34 100%);
	color: #eaf2ff;
}

.ckt-head .ckt-kicker {
	color: #7cc4ff;
}

.ckt-head h1 {
	max-width: 22ch;
	margin: 0 0 14px;
	font-size: clamp(32px, 4vw, 50px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: #fff;
}

.ckt-lede {
	max-width: 760px;
	margin: 0 0 24px;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(234, 242, 255, 0.84);
}

.ckt-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ckt .ckt-head-note {
	max-width: 74ch;
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #b6cae5;
}

.ckt .ckt-choose {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ckt-navy);
}

/* ---- 2. The demos ------------------------------------------------------ */
.ckt-stage {
	padding: 36px 0 96px;
	background: var(--ckt-soft);
	scroll-margin-top: 90px;
}

.ckt-empty {
	margin: 0;
	padding: 28px;
	border-radius: 16px;
	background: #fff;
	font-size: 17px;
}

.ckt-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.ckt .ckt-tab,
.ckt .ckt-tab:visited {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 999px;
	background: #fff;
	color: var(--ckt-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.ckt .ckt-tab:hover {
	background: var(--ckt-tint);
}

.ckt .ckt-tab[aria-selected="true"] {
	background: var(--ckt-navy);
	color: #fff;
}

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

/* Two columns: the side cards end clear of the site's round chat button (60px, 18px from the right
   edge), with room to spare, on screens where the page is not much wider than its content. */
@media (min-width: 1025px) {
	.ckt-stage .ckt-wrap {
		padding-right: max(24px, calc(92px - max(0px, (100vw - 1180px) / 2)));
	}
}

.ckt-panel-head {
	margin: 26px 0 20px;
}

.ckt-panel-head h2 {
	margin: 0 0 8px;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ckt-navy);
}

.ckt-panel-head p {
	max-width: 72ch;
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ckt-muted);
}

.ckt-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 28px;
	align-items: start;
}

/* Each column ends with its own content. The side stays nearby while the form is longer. */
.ckt-screen {
	align-self: start;
	min-width: 0;
	padding: 24px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 40px -26px rgba(16, 24, 40, 0.28);
}

.ckt .ckt-screen-label {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ckt-muted);
}

.ckt-screen-body {
	min-width: 0;
}

/* Clear of the floating menu pill (it ends at about 111px) with room to spare: nothing touches it. */
.ckt-side {
	position: sticky;
	top: 132px;
	align-self: start;
	display: grid;
	gap: 14px;
	min-width: 0;
}

.ckt-note {
	padding: 20px;
	border-radius: 16px;
	background: #fff;
}

.ckt-note--try {
	background: var(--ckt-tint);
}

.ckt-demo-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 16px 0 20px;
}

.ckt .ckt-demo-tools > p {
	flex: 1 1 340px;
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ckt-muted);
}

.ckt .ckt-reset {
	flex: 0 1 auto;
	min-height: 44px;
	padding: 11px 16px;
	border: 0;
	border-radius: 10px;
	background: #e2eafb;
	color: var(--ckt-blue-dk);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
}

.ckt .ckt-reset:hover {
	background: #d5e2fb;
}

.ckt .ckt-reset[hidden] {
	display: none;
}

.ckt .ckt-reset:disabled {
	opacity: 0.6;
	cursor: wait;
}

.ckt .ckt-demo-tools > .ckt-reset-status {
	flex-basis: 100%;
	color: #215a3e;
}

.ckt-reset-status:empty {
	display: none;
}

.ckt .ckt-note-k {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ckt-blue-dk);
}

.ckt-note p:last-child {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #344054;
}

/* His example shop, with his own photo, under the notes. */
.ckt-shop {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
}

/* A little wider than the photo in the side column, so the side ends near the customer's screen. */
.ckt-shop-photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.ckt-shop figcaption {
	display: grid;
	gap: 6px;
	padding: 14px 18px 18px;
}

.ckt-shop-name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ckt-navy);
}

.ckt-shop-name img {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 8px;
}

.ckt-shop-line {
	font-size: 14.5px;
	line-height: 1.55;
	color: #344054;
}

/*
 * Stacked: the wide layout at every width (it brings its own summary card, so it takes the whole
 * width), and every layout below 1024px. The side's cards join the grid, each as wide as the screen
 * card, so no card is ever left short beside a taller one: "Try this" goes above the customer's
 * screen, so it is read before the thing it describes; the rest come after it. His example shop
 * becomes one wide card, the photo beside its words (above them on a phone).
 */
.ckt-split--wide {
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.ckt-split--wide .ckt-side {
	display: contents;
}

.ckt-split--wide .ckt-note--try {
	order: -1;
}

/* ---- ConfigKit itself: its own tokens, the way any theme sets them (FORMAT.md, frontend.css) ---- */
.ckt .ckit,
.ckt .ckit-quote {
	--ckit-line: transparent;
	--ckit-line-strong: transparent;
	--ckit-field: #f2f5fa;
	--ckit-soft: #f2f5fa;
	--ckit-soft-strong: #e7edf7;
	--ckit-text: var(--ckt-ink);
	font-family: inherit;
	color: var(--ckt-ink);
}

.ckt .ckit {
	margin: 0;
}

.ckt .ckit-option:hover {
	background: #e7edf7;
}

/* Keep wrapped choice labels aligned with the shorter choices beside them. */
.ckt .ckit-display-cards .ckit-option {
	align-items: flex-start;
	padding: var(--ckit-optpad, .7em);
	padding-right: 2.2em;
}

/* The accordion layout: each step is a tinted card, so the option boxes and fields inside it are
   white, or they would melt into the card. */
.ckt .ckit[data-layout="accordion"] .ckit-step {
	--ckit-field: #fff;
	--ckit-soft: #fff;
	background: #f2f5fa;
}

/* A white or pale colour dot still shows on the pale option box: a soft shadow under it, never a ring
   (its outline is off with the lines; the picked option keeps ConfigKit's own ring). */
.ckt .ckit-swatch {
	border-color: transparent;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.28);
}

/* A step's number in a circle (the accordion, the stepper): ConfigKit draws a 2px ring in the
   accent colour round the open one. The fill alone says the same, so the ring goes. */
.ckt .ckit-num,
.ckt .ckit-stepper-n,
.ckt .ckit-step.is-open .ckit-num,
.ckt .ckit-step.is-done .ckit-num,
.ckt .ckit-stepper-step.is-on .ckit-stepper-n,
.ckt .ckit-stepper-step.is-done .ckit-stepper-n {
	border-color: transparent;
}

/* "Add another piece": a filled soft button like Back above it, not bare words. */
.ckt .ckit .ckit-add-piece {
	min-height: 44px;
	padding: 0.4em 0.9em;
	border: 0;
	border-radius: var(--ckit-radius, 10px);
	background: var(--ckit-field);
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.ckt .ckit .ckit-add-piece:hover {
	background: var(--ckit-soft-strong);
}

.ckt .ckit-summary {
	padding: 16px;
	border-radius: 12px;
	background: #f6f8fb;
}

/* The wide layout's summary card stays in view below the site's floating menu, clear of it. */
.ckt .ckit-card {
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 132px);
}

/* "Step 1 of 3" on narrow screens: a filled progress pill, never a thin line under the words. */
.ckt .ckit-stepline-track {
	height: 8px;
	border-radius: 999px;
	background: var(--ckt-tint);
}

.ckt .ckit-stepline-bar {
	border-radius: 999px;
}

/* The wide layout on a phone: the summary card under the options already holds the total, so the
   price bar shows only while it is pinned to the bottom of the screen (ConfigKit still measures it
   where it sits, so it keeps pinning while the customer scrolls the options). */
@media (max-width: 767px) {
	.ckt .ckt-split--wide .ckit-bar:not(.ckit-bar-pinned) {
		position: absolute;
		visibility: hidden;
		pointer-events: none;
	}
}

/* The site's chat button moves up while ConfigKit's price bar is pinned to the bottom of a phone
   screen (try.js sets the bar's height), so neither covers the other. */
html.ckt-bar-up #sellsmith-root {
	bottom: calc(var(--ckt-bar-h, 72px) + 12px);
	transition: bottom 0.2s ease;
}

html.ckt-bar-up #sellsmith-root .ss-teaser {
	display: none;
}

/* The chat's teaser bubble steps aside while it would sit on one of the page's cards (try.js
   measures it); it comes back over plain background. The chat button itself always stays. */
html.ckt-teaser-off #sellsmith-root .ss-teaser {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* The wide layout's summary card: its total sits on a tint instead of under a rule. */
.ckt .ckit-card-total {
	margin-top: 12px;
	padding: 12px;
	border-top: 0;
	border-radius: 10px;
	background: #e9effa;
}

/* The page's Add to basket button: the shop's own blue, full width on its own line. */
.ckt .ckit-page .ckit-page-add,
.ckt .ckit-page button.single_add_to_cart_button {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 18px 0 0;
	padding: 14px 22px;
	border: 0;
	border-radius: 12px;
	background: var(--ckt-blue);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.ckt .ckit-page .ckit-page-add:hover {
	background: var(--ckt-blue-dk);
}

/* Send my request: the same blue button, not the browser's grey box. */
.ckt .ckit-quote button.ckit-quote-send {
	min-height: 48px;
	padding: 13px 22px;
	border: 0;
	border-radius: 12px;
	background: var(--ckt-blue);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.ckt .ckit-quote button.ckit-quote-send:hover {
	background: var(--ckt-blue-dk);
}

.ckt .ckit-quote button.ckit-quote-send:disabled {
	opacity: 0.6;
	cursor: wait;
}

.ckt .ckit-page .ckit-page-add[hidden] {
	display: none;
}

.ckt .ckit-page form.cart {
	margin: 0;
}

/* ---- The demo notices (an add refused here, a quote refused by try.js) -------- */
.ckt .woocommerce-notices-wrapper:empty {
	display: none;
}

.ckt .ckit-page .woocommerce-info,
.ckt .ckit-page .woocommerce-message,
.ckt .ckit-page .woocommerce-error {
	position: relative;
	margin: 0 0 20px;
	padding: 18px 20px !important;
	border: 0 !important;
	border-radius: 14px;
	background: var(--ckt-tint) !important;
	color: var(--ckt-ink) !important;
	font-size: 15px;
	line-height: 1.6;
	list-style: none;
	box-shadow: none;
}

.ckt .ckit-page .woocommerce-error {
	background: #fdeeee !important;
}

.ckt .ckit-page .woocommerce-error li {
	margin: 0;
	list-style: none;
}

.ckt .ckit-page .woocommerce-info::before,
.ckt .ckit-page .woocommerce-message::before,
.ckt .ckit-page .woocommerce-error::before {
	display: none !important;
	content: none !important;
}

.ckt .ckt-notice-title {
	display: block;
	margin: 0 0 4px;
	font-size: 16px;
	color: var(--ckt-navy);
}

.ckt .ckt-notice-picks {
	display: block;
	margin: 10px 0 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	color: #344054;
}

.ckt .woocommerce-info a.button.ckt-notice-btn,
.ckt a.ckt-notice-btn,
.ckt a.ckt-notice-btn:visited {
	display: inline-flex;
	float: none;
	align-items: center;
	min-height: 44px;
	margin: 4px 0 0;
	padding: 10px 16px;
	border: 0;
	border-radius: 10px;
	background: var(--ckt-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.ckt a.ckt-notice-btn:hover {
	background: var(--ckt-blue-dk);
	color: #fff;
}

.ckt .ckt-demo-hint {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--ckt-tint);
	font-size: 14px;
	line-height: 1.5;
	color: #344054;
}

/* ---- The builder, drawn from the saved configurator -------------------- */
.ckt-builder {
	margin: 28px 0 0;
	padding: 24px;
	border-radius: 20px;
	background: #fff;
}

.ckt-builder > summary {
	padding: 4px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ckt-navy);
	cursor: pointer;
}

.ckt-builder > summary::marker {
	color: var(--ckt-blue);
}

.ckt-builder > summary:focus-visible {
	outline: 3px solid #7cb2ff;
	outline-offset: 5px;
	border-radius: 4px;
}

.ckt-builder-content {
	padding-top: 22px;
}

.ckt-builder-head {
	max-width: 72ch;
	margin: 0 0 20px;
}

.ckt-builder-head h3 {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--ckt-navy);
}

.ckt-builder-head p:last-child {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ckt-muted);
}

/*
 * Straight on the white panel, three levels only: the panel, a tinted card per block, white rows for
 * its options. One row per step: the step's name, then its fields side by side. Each field ends at
 * its own content. Steps are kept apart by space.
 */
.ckt-steps {
	display: grid;
	gap: 26px;
}

.ckt-step {
	min-width: 0;
}

.ckt .ckt-step-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ckt-navy);
}

.ckt-step-count {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ckt-muted);
}

.ckt-step-blocks {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	margin: 12px 0 0;
}

.ckt-step-blocks > .ckt-block {
	flex: 1 1 280px;
}

.ckt-step-n {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ckt-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.ckt-block {
	min-width: 0;
	margin: 0;
	padding: 16px;
	border-radius: 12px;
	background: #f1f4fa;
}

.ckt .ckt-block-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--ckt-ink);
}

.ckt-kind {
	flex: none;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--ckt-tint);
	color: var(--ckt-blue-dk);
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

.ckt .ckt-rule,
.ckt .ckt-when {
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ckt-muted);
}

.ckt .ckt-when {
	color: #6941c6;
	font-weight: 600;
}

/* A block that gets a whole row lays its options out side by side, so a name stays near its price. */
.ckt .ckt-opts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.ckt .ckt-opts li {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
	align-items: baseline;
	margin: 0;
	padding: 7px 10px;
	border-radius: 8px;
	background: #fff;
	font-size: 13.5px;
	line-height: 1.4;
}

.ckt-opt-name {
	display: inline-flex;
	flex: 1 1 130px;
	align-items: center;
	gap: 7px;
	min-width: 0;
	color: #344054;
}

.ckt-opt-price {
	max-width: 100%;
	margin-left: auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ckt-navy);
	text-align: right;
	overflow-wrap: anywhere;
}

.ckt-opt-rule {
	flex: 1 1 100%;
	font-size: 12.5px;
	color: #6941c6;
}

.ckt-swatch,
.ckt-colour-dot {
	display: inline-block;
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.28);
}

.ckt-colour-dot {
	margin: 0 8px 0 0;
	vertical-align: -2px;
}

.ckt-settings {
	margin: 26px 0 0;
	padding: 20px;
	border-radius: 12px;
	background: var(--ckt-tint);
}

.ckt .ckt-settings-k {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ckt-navy);
}

.ckt-settings dl {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 12px 24px;
	margin: 0;
}

.ckt-setting {
	min-width: 0;
}

.ckt-setting dt {
	margin: 0 0 2px;
	font-size: 12.5px;
	color: var(--ckt-muted);
}

.ckt-setting dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ckt-ink);
	overflow-wrap: anywhere;
}

.ckt-setting--formula {
	grid-column: 1 / -1;
}

.ckt-setting--formula dd {
	max-width: 80ch;
}

.ckt-formula-words {
	display: block;
	margin: 4px 0 8px;
	font-weight: 500;
	color: #344054;
}

.ckt-setting code {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 6px;
	background: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	font-weight: 500;
	color: var(--ckt-navy);
}

/* ---- 3. What reaches you ------------------------------------------------ */
.ckt-reach {
	padding: 96px 0;
	background: #fff;
}

.ckt-reach-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: 56px;
	align-items: start;
}

.ckt-reach h2,
.ckt-fit h2,
.ckt-buy h2 {
	margin: 0 0 16px;
	font-size: clamp(27px, 3.2vw, 40px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.022em;
	color: var(--ckt-navy);
}

.ckt-reach-text p:not(.ckt-kicker) {
	max-width: 60ch;
	margin: 0 0 14px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ckt-muted);
}

.ckt-order {
	padding: 26px;
	border-radius: 20px;
	background: var(--ckt-navy);
	color: #fff;
	box-shadow: 0 24px 48px -28px rgba(15, 26, 46, 0.7);
}

.ckt .ckt-order-k {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #7cc4ff;
}

.ckt .ckt-order-name {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 700;
}

.ckt-order-name b {
	font-variant-numeric: tabular-nums;
}

.ckt-order-lines {
	display: grid;
	gap: 8px;
	margin: 0 0 16px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.07);
}

.ckt-order-lines div {
	display: grid;
	grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
	gap: 12px;
	font-size: 14px;
	line-height: 1.45;
}

.ckt-order-lines dt {
	margin: 0;
	color: rgba(255, 255, 255, 0.62);
}

.ckt-order-lines dd {
	margin: 0;
	color: #fff;
}

.ckt .ckt-order-foot {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ckt-order-foot span {
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
}

.ckt .ckt-order-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

/* ---- 4. Does your job not fit? ----------------------------------------- */
.ckt-fit {
	padding: 96px 0;
	background: var(--ckt-soft);
}

.ckt-letter {
	max-width: 780px;
	margin: 0 auto;
	padding: 46px;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 18px 40px -30px rgba(16, 24, 40, 0.3);
}

.ckt-letter p:not(.ckt-kicker) {
	margin: 0 0 15px;
	font-size: 17px;
	line-height: 1.75;
	color: #344054;
}

.ckt-sign {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin: 22px 0 26px;
}

.ckt-sig {
	font-family: 'Segoe Script', 'Bradley Hand', cursive;
	font-size: 30px;
	color: var(--ckt-navy);
}

.ckt-who {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ckt-av {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--ckt-tint);
	color: var(--ckt-blue-dk);
	font-weight: 800;
}

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

.ckt-who b {
	display: block;
	font-size: 15px;
	color: var(--ckt-navy);
}

.ckt-who span span {
	font-size: 13.5px;
	color: var(--ckt-muted);
}

/* ---- 5. Put it on your shop -------------------------------------------- */
.ckt-buy {
	padding: 96px 0 84px;
	background:
		radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.12), transparent 45%),
		linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
	color: #fff;
	text-align: center;
	scroll-margin-top: 90px;
}

.ckt-buy h2 {
	color: #fff;
}

.ckt .ckt-buy-lede {
	max-width: 56ch;
	margin: 0 auto 34px;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}

.ckt-plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	max-width: 780px;
	margin: 0 auto;
	text-align: left;
}

.ckt-plan {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border-radius: 20px;
	background: #fff;
	color: var(--ckt-ink);
	box-shadow: 0 24px 48px -30px rgba(0, 20, 60, 0.6);
}

.ckt .ckt-plan-name {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ckt-blue-dk);
}

.ckt .ckt-plan-price {
	margin: 0 0 8px;
	color: var(--ckt-navy);
}

.ckt-plan-price b {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.ckt-plan-price span {
	font-size: 16px;
	color: var(--ckt-muted);
}

.ckt .ckt-plan-note {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ckt-muted);
}

.ckt-plan .ckt-btn {
	width: 100%;
	margin-top: auto;
}

.ckt .ckt-refund {
	max-width: 62ch;
	margin: 28px auto 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.ckt-buy .dts-facts.dts-facts {
	margin: 20px auto 0;
}

.ckt-buy .dts-facts--dark .dts-fact:not(.dts-fact-link) {
	background: rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.92);
}

.ckt .ckt-more {
	max-width: 66ch;
	margin: 30px auto 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.9);
}

.ckt-more a,
.ckt-more a:visited {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The builder's "show every block" switch: only on a phone (try.js adds it), a filled soft button. */
.ckt .ckt-fold {
	display: none;
}

/* ---- Tablet and phone ---------------------------------------------------- */
@media (max-width: 1024px) {
	/* The same stacking as the wide layout (above): "Try this" first, then the screen, then the rest,
	   each card as wide as the screen. */
	.ckt-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.ckt-side {
		display: contents;
	}

	.ckt-note--try {
		order: -1;
	}

	/* His example shop: one wide card, the photo beside its words. */
	.ckt-shop {
		display: grid;
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		align-items: center;
	}

	.ckt-shop-photo {
		aspect-ratio: 3 / 2;
	}

	.ckt-shop figcaption {
		gap: 8px;
		padding: 22px 26px;
	}

	.ckt-reach-in {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	/* Stacked under the words, the order card runs their full width, so nothing is left empty beside it. */
	.ckt-order {
		max-width: none;
	}
}

@media (max-width: 720px) {
	.ckt-wrap {
		padding: 0 16px;
	}

	.ckt-head {
		padding: 112px 0 36px;
	}

	.ckt-lede {
		font-size: 16.5px;
	}

	.ckt-cta .ckt-btn {
		width: 100%;
	}

	.ckt-demo-tools {
		gap: 10px;
	}

	.ckt-demo-tools > p {
		flex-basis: 100%;
	}

	.ckt-reset {
		width: 100%;
	}

	.ckt-stage {
		padding: 32px 0 64px;
	}

	.ckt-tabs {
		gap: 8px 6px;
	}

	.ckt .ckt-tab,
	.ckt .ckt-tab:visited {
		padding: 9px 14px;
		font-size: 14.5px;
	}

	.ckt-panel-head {
		margin: 22px 0 18px;
	}

	.ckt-panel-head p {
		font-size: 16px;
	}

	.ckt-screen {
		padding: 18px;
		border-radius: 16px;
	}

	.ckt-split,
	.ckt-split--wide {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.ckt-shop {
		grid-template-columns: minmax(0, 1fr);
	}

	.ckt-shop figcaption {
		padding: 14px 18px 18px;
	}

	.ckt-builder {
		padding: 18px;
		border-radius: 16px;
	}

	.ckt-builder > summary {
		font-size: 16px;
	}

	.ckt-steps {
		gap: 22px;
	}

	.ckt-step-blocks > .ckt-block {
		flex-basis: 100%;
	}

	.ckt-block {
		padding: 14px;
	}

	/* Step 1 open, the other steps behind the switch, so the next part is not 2000px away. */
	.ckt-builder.is-folded .ckt-step + .ckt-step {
		display: none;
	}

	.ckt .ckt-fold {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		margin: 16px 0 0;
		padding: 12px 18px;
		border: 0;
		border-radius: 12px;
		background: var(--ckt-tint);
		color: var(--ckt-blue-dk);
		font-family: inherit;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.3;
		cursor: pointer;
	}

	.ckt .ckt-fold:hover {
		background: #dbe7ff;
	}

	.ckt-settings {
		margin-top: 18px;
	}

	.ckt-reach,
	.ckt-fit {
		padding: 64px 0;
	}

	.ckt-letter {
		padding: 24px;
		border-radius: 18px;
	}

	.ckt-buy {
		padding: 64px 0 56px;
	}

	.ckt-plans {
		grid-template-columns: minmax(0, 1fr);
	}

	.ckt-plan {
		padding: 22px;
	}
}

/* A refused quote request: ConfigKit's own answer line and the button under it read as one note. */
.ckt .ckit-quote-answer.ckt-refused-text {
	margin: 12px 0 0;
	padding: 18px 18px 6px;
	border-radius: 14px 14px 0 0;
	background: var(--ckt-tint);
	color: var(--ckt-ink);
	font-size: 15px;
	line-height: 1.6;
}

.ckt .ckt-refused {
	margin: 0;
	padding: 4px 18px 18px;
	border-radius: 0 0 14px 14px;
	background: var(--ckt-tint);
}

@media (max-width: 360px) {
	.ckt .ckit .ckit-display-cards .ckit-option-list {
		grid-template-columns: minmax(0, 1fr);
	}
}