/**
 * ProseCaptain Blocks — base layout.
 *
 * Structure only, with neutral defaults. Every value that carries brand
 * (colour, type, radius, spacing) is a --sq-* custom property.
 *
 * Specificity: every rule has exactly one class (context goes in :where()).
 * That beats element resets in themes (section { background: 0 0 }) and
 * loses to a theme rule with two classes (.sq-jumbo .sq-jumbo__title).
 * Brand values are easiest to set once through the variables:
 *
 *     :root {
 *         --sq-color-accent: var(--color-primary);
 *         --sq-color-dark: var(--color-secondary);
 *     }
 *
 * The full list of variables and classes is in docs/theming.md.
 *
 * Defaults sit in :where(:root) as well: block styles are printed when a
 * block renders, often after the theme stylesheet, and a plain :root here
 * would silently override the theme's values.
 */

:where(:root) {
	--sq-container-width: 1200px;
	--sq-container-padding: 16px;
	--sq-section-space: clamp(56px, 7vw, 112px);
	--sq-gap: 16px;

	/*
	 * Spacing scale. Every margin, padding and gap in this file goes through
	 * one of these, so a project changes the value here instead of editing
	 * rules — the same block can be airy on one site and dense on another
	 * without touching any CSS below this block.
	 *
	 * The defaults are the values these rules already used, so adopting the
	 * scale changed nothing visually.
	 */
	--sq-space-3xs: 4px;
	--sq-space-2xs: 8px;
	--sq-space-xs: 12px;
	--sq-space-sm: 16px;
	--sq-space-md: 24px;
	--sq-space-lg: 32px;
	--sq-space-xl: 40px;
	--sq-space-2xl: 48px;

	/* Component padding that does not sit on the scale. */
	--sq-button-padding-y: 10px;
	--sq-button-padding-x: 28px;
	--sq-button-padding-y-sm: 4px;
	--sq-button-padding-x-sm: 14px;
	--sq-button-padding-y-md: 8px;
	--sq-button-padding-x-md: 20px;
	--sq-button-padding-y-xl: 14px;
	--sq-button-padding-x-xl: 32px;
	--sq-badge-padding-y: 10px;
	--sq-badge-padding-x: 14px;
	--sq-radius: 8px;
	--sq-radius-lg: 16px;

	--sq-color-text: #111827;
	--sq-color-muted: #4b5563;
	--sq-color-accent: #15803d;
	--sq-color-on-accent: #ffffff;
	--sq-color-surface: #ffffff;
	--sq-color-surface-alt: #f3f4f6;
	--sq-color-line: #e5e7eb;
	--sq-color-dark: #1f2937;
	--sq-color-on-dark: #ffffff;
	--sq-color-on-dark-muted: #d1d5db;
	/*
	 * Derived from the accent, not a second independent constant. A theme
	 * that sets only --sq-color-accent used to get this stock mint green on
	 * its dark sections regardless of its brand — the accent and its
	 * on-dark counterpart drifted apart silently. The literal below is the
	 * fallback for browsers without color-mix.
	 */
	--sq-color-accent-on-dark: #86efac;
	--sq-color-accent-on-dark: color-mix(in srgb, var(--sq-color-accent) 40%, #ffffff);

	--sq-font-size-eyebrow: 0.875rem;
	--sq-font-size-hero: clamp(2.25rem, 4.5vw, 3.75rem);
	--sq-font-size-hero-subtitle: clamp(1.125rem, 1.7vw, 1.5rem);
	--sq-font-size-title: clamp(2rem, 3.4vw, 3rem);
	--sq-font-size-subtitle: 1.125rem;
	--sq-font-size-card-title: 1.25rem;
	--sq-font-size-card-text: 0.875rem;

	/* Image band heights (squares/image-band --md / --lg). */
	--sq-image-band-height-md: clamp(240px, 36vw, 467px);
	--sq-image-band-height-lg: clamp(320px, 48vw, 640px);
}

/* ---------- shared ---------- */

.sq-block {
	position: relative;
	color: var(--sq-color-text);
}

:where(.sq-block) :where(h1, h2, h3, p, ul, ol) {
	margin-top: 0;
}

.sq-container {
	width: min(var(--sq-container-width), 100% - 2 * var(--sq-container-padding));
	margin-inline: auto;
}

.sq-eyebrow {
	margin: 0 0 var(--sq-space-sm);
	color: var(--sq-color-accent);
	font-size: var(--sq-font-size-eyebrow);
}

.sq-heading {
	max-width: 56rem;
	margin-bottom: var(--sq-space-2xl);
}

.sq-title {
	margin: 0;
	font-size: var(--sq-font-size-title);
	line-height: 1.15;
}

.sq-subtitle {
	margin: var(--sq-space-sm) 0 0;
	color: var(--sq-color-muted);
	font-size: var(--sq-font-size-subtitle);
}

.sq-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--sq-button-padding-y) var(--sq-button-padding-x);
	border: 1px solid transparent;
	border-radius: var(--sq-radius);
	font-weight: 600;
	text-decoration: none;
}

.sq-button--sm {
	min-height: 32px;
	padding: var(--sq-button-padding-y-sm) var(--sq-button-padding-x-sm);
	font-size: 0.875rem;
}

.sq-button--md {
	min-height: 40px;
	padding: var(--sq-button-padding-y-md) var(--sq-button-padding-x-md);
}

.sq-button--xl {
	min-height: 56px;
	padding: var(--sq-button-padding-y-xl) var(--sq-button-padding-x-xl);
}

.sq-button--primary {
	color: var(--sq-color-on-accent);
	background: var(--sq-color-accent);
}

.sq-button--secondary {
	color: var(--sq-color-text);
	background: var(--sq-color-surface);
	border-color: var(--sq-color-line);
}

.sq-placeholder {
	min-height: 48px;
	border: 1px dashed var(--sq-color-muted);
	border-radius: var(--sq-radius);
	background: repeating-linear-gradient(45deg, var(--sq-color-surface-alt) 0 8px, transparent 8px 16px);
}

/* ---------- jumbo ---------- */

.sq-jumbo {
	overflow: hidden;
	isolation: isolate;
	background: var(--sq-color-surface-alt);
}

.sq-jumbo--dark {
	color: var(--sq-color-on-dark);
	background: var(--sq-color-dark);
}

.sq-jumbo__decoration {
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}

/*
 * The pattern itself. Without this rule the decoration option rendered an
 * empty, invisible span — the editor offered a "Brand pattern" choice that
 * changed nothing on the page.
 *
 * currentColor at a low opacity rather than a fixed colour, so one rule
 * covers both heroes: .sq-jumbo--dark sets color to --sq-color-on-dark, and
 * the light hero inherits the body text colour.
 */
.sq-jumbo--decorated .sq-jumbo__decoration {
	opacity: 0.06;
	background-image: repeating-linear-gradient(
		135deg,
		currentColor 0 2px,
		transparent 2px 14px
	);
}

.sq-jumbo__inner {
	display: grid;
	gap: var(--sq-space-xl);
	padding-block: var(--sq-section-space);
}

:where(.sq-jumbo--split) .sq-jumbo__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

:where(.sq-jumbo--centered) .sq-jumbo__content {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}

:where(.sq-jumbo--centered) .sq-jumbo__actions {
	justify-content: center;
}

.sq-jumbo__title {
	margin: 0 0 var(--sq-space-sm);
	font-size: var(--sq-font-size-hero);
	line-height: 1.15;
}

.sq-jumbo__subtitle {
	margin: 0 0 var(--sq-space-xl);
	font-size: var(--sq-font-size-hero-subtitle);
	line-height: 1.55;
}

:where(.sq-jumbo--light) .sq-jumbo__subtitle {
	color: var(--sq-color-muted);
}

/*
 * The dark hero's own colour rules are gone on purpose. They now come from
 * .sq-heading--inverted, which the hero carries like every other dark block
 * (see prosecaptain_blocks_heading). Two mechanisms meant two answers to the
 * same question, and the hero's — wrapped in :where(), so specificity 0 —
 * lost to the theme's generic `.sq-block .sq-eyebrow`. That is exactly why
 * the eyebrow came out green in the hero and light-green in the CTA.
 */

.sq-jumbo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-gap);
}

.sq-jumbo__media {
	position: relative;
}

.sq-jumbo__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sq-radius-lg);
}

:where(.sq-jumbo__media .sq-placeholder).sq-jumbo__image {
	aspect-ratio: 4 / 3;
}

.sq-jumbo__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-2xs);
	margin: var(--sq-space-sm) 0 0;
	padding: 0;
	list-style: none;
}

.sq-jumbo__badge {
	display: grid;
	place-items: center;
	height: 72px;
	padding: var(--sq-badge-padding-y) var(--sq-badge-padding-x);
	border: 1px solid var(--sq-color-line);
	border-radius: var(--sq-radius);
	background: var(--sq-color-surface);
}

.sq-jumbo__badge-image {
	display: block;
	width: auto;
	max-width: 140px;
	height: 100%;
	object-fit: contain;
}

:where(.sq-jumbo__badge) .sq-placeholder {
	width: 96px;
	height: 100%;
	min-height: 0;
}

/* ---------- logo section ---------- */

.sq-logo-section {
	padding-block: var(--sq-space-lg);
	background: var(--sq-color-surface);
}

.sq-logo-section__title {
	margin: 0 0 var(--sq-space-sm);
	color: var(--sq-color-muted);
	text-align: center;
}

.sq-logo-section__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-logo-section__item {
	display: grid;
	place-items: center;
}

.sq-logo-section__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: 44px;
	object-fit: contain;
}

:where(.sq-logo-section__item) .sq-placeholder {
	width: 120px;
	height: 44px;
	min-height: 0;
}

:where(.sq-logo-section--row) .sq-logo-section__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sq-space-lg);
}

:where(.sq-logo-section--grid) .sq-logo-section__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--sq-space-md) var(--sq-space-lg);
}

.sq-logo-section__viewport {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.sq-logo-section__track {
	display: flex;
	width: max-content;
	animation: sq-logo-scroll calc(var(--sq-logo-count, 8) * 3s) linear infinite;
}

:where(.sq-logo-section__track) .sq-logo-section__list {
	display: flex;
	gap: var(--sq-space-2xl);
	padding-right: var(--sq-space-2xl);
}

/* WCAG 2.2.2: moving content can be paused — under the pointer, and while
   the viewport (a focusable region) has keyboard focus. */
:where(.sq-logo-section__viewport:hover, .sq-logo-section__viewport:focus-within) .sq-logo-section__track {
	animation-play-state: paused;
}

@keyframes sq-logo-scroll {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sq-logo-section__track {
		animation: none;
	}
}

/* ---------- how it works ---------- */

.sq-how-it-works {
	padding-block: var(--sq-section-space);
	background: var(--sq-color-surface-alt);
}

.sq-how-it-works__steps {
	display: grid;
	/* Default / --cols-3: three across. Up to 5 steps in one row; more wrap
	   into rows of 4 or 3 (render.php picks the count). */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sq-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.sq-how-it-works--cols-1) .sq-how-it-works__steps {
	grid-template-columns: minmax(0, 1fr);
}

:where(.sq-how-it-works--cols-2) .sq-how-it-works__steps {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(.sq-how-it-works--cols-4) .sq-how-it-works__steps {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

:where(.sq-how-it-works--cols-5) .sq-how-it-works__steps {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sq-how-it-works__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sq-space-sm);
	padding: var(--sq-space-md) 20px;
	border: 1px solid var(--sq-color-line);
	border-radius: var(--sq-radius-lg);
	background: var(--sq-color-surface);
	text-align: center;
}

.sq-how-it-works__number {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--sq-color-on-accent);
	background: var(--sq-color-accent);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
}

.sq-how-it-works__image {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.sq-how-it-works__step-title {
	margin: 0;
	font-size: var(--sq-font-size-card-title);
	line-height: 1.5;
}

.sq-how-it-works__step-text {
	margin: 0;
	color: var(--sq-color-muted);
	font-size: var(--sq-font-size-card-text);
	line-height: 1.57;
}

/*
 * Jedna klasa, zgodnie z kontraktem na gorze tego pliku. Bylo
 * `.sq-block .sq-heading.sq-heading--flush` — trzy klasy, wiec reguly motywu
 * z dwiema (obiecane jako wygrywajace) przegrywaly. `.sq-heading` wyzej ma tez
 * jedna klase, a ta jest pozniej, wiec nadal wygrywa tam, gdzie ma.
 */
.sq-heading--flush {
	max-width: none;
	margin-inline: 0;
	margin-bottom: 0;
	text-align: left;
}

/*
 * The hero heading. Same modifier family as --flush, but deliberately says
 * nothing about text-align: the hero's alignment belongs to its layout
 * (:where(.sq-jumbo--centered) .sq-jumbo__content centres it, split does
 * not), and a heading modifier that overrode it would take that choice away
 * from the block. Type scale stays on --sq-font-size-hero* via the
 * .sq-jumbo__title / __subtitle aliases the preset emits.
 */
.sq-heading--hero {
	max-width: none;
	margin-inline: 0;
	margin-bottom: 0;
}

.sq-heading--inverted {
	color: var(--sq-color-on-dark);
}

:where(.sq-heading--inverted) .sq-title {
	color: var(--sq-color-on-dark);
}

:where(.sq-heading--inverted) .sq-eyebrow {
	color: var(--sq-color-accent-on-dark);
}

:where(.sq-heading--inverted) .sq-subtitle {
	color: var(--sq-color-on-dark-muted);
}

.sq-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-2xs);
	margin: 0 0 var(--sq-space-lg);
	justify-content: center;
}

.sq-tabs__button {
	appearance: none;
	border: 1px solid var(--sq-color-line);
	border-radius: 999px;
	background: var(--sq-color-surface);
	color: var(--sq-color-text);
	padding: var(--sq-space-2xs) var(--sq-space-sm);
	cursor: pointer;
}

.sq-tabs__button.is-active {
	background: var(--sq-color-accent);
	border-color: var(--sq-color-accent);
	color: var(--sq-color-on-accent);
}

.sq-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--sq-color-line);
	border-radius: 999px;
	background: var(--sq-color-surface);
	cursor: pointer;
}

.sq-icon {
	display: block;
}

/* ---------- header ---------- */

.sq-header {
	padding-block: var(--sq-section-space);
}

:where(.sq-header--left) .sq-heading {
	text-align: left;
	margin-inline: 0;
	max-width: none;
}

/* ---------- content block ---------- */

.sq-content-block {
	padding-block: var(--sq-section-space);
}

:where(.sq-content-block--white) {
	background: var(--sq-color-surface);
}

.sq-content-block__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sq-space-2xl);
	align-items: center;
}

.sq-block.sq-content-block .sq-heading,
.sq-content-block__copy {
	text-align: left;
	margin-inline: 0;
	max-width: none;
}

:where(.sq-content-block--right) .sq-content-block__copy {
	order: 2;
}

.sq-content-block__text {
	margin: var(--sq-space-sm) 0 var(--sq-space-md);
	color: var(--sq-color-muted);
	line-height: 1.6;
}

.sq-content-block__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sq-radius-lg);
}

:where(.sq-content-block__media .sq-placeholder).sq-content-block__image {
	aspect-ratio: 4 / 3;
}

/* ---------- call to action ---------- */

.sq-call-to-action {
	padding-block: var(--sq-section-space);
	color: var(--sq-color-on-dark);
	background: var(--sq-color-dark);
}

.sq-block.sq-call-to-action--split .sq-heading,
.sq-block.sq-call-to-action--split .sq-heading--flush {
	text-align: left;
	margin-inline: 0;
	max-width: none;
}

.sq-call-to-action__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sq-space-lg);
}

.sq-call-to-action__copy {
	flex: 1 1 20rem;
	max-width: 36rem;
}

.sq-call-to-action--split .sq-call-to-action__action {
	margin-inline-start: auto;
}

.sq-call-to-action__features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-sm) var(--sq-space-md);
	margin: var(--sq-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.sq-call-to-action__feature {
	display: flex;
	align-items: center;
	gap: var(--sq-space-2xs);
}

.sq-call-to-action__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	color: var(--sq-color-on-dark);
	background: color-mix(in srgb, var(--sq-color-on-dark) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--sq-color-on-dark) 28%, transparent);
}

.sq-call-to-action__icon svg,
.sq-call-to-action__icon img {
	display: block;
	width: 0.875rem;
	height: 0.875rem;
	object-fit: contain;
}

.sq-call-to-action__icon svg {
	fill: currentColor;
}

.sq-call-to-action__label {
	color: var(--sq-color-on-dark-muted);
	font-size: 0.875rem;
}

.sq-call-to-action--centered .sq-call-to-action__row {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--sq-space-lg);
	text-align: center;
}

.sq-block.sq-call-to-action--centered .sq-heading,
.sq-block.sq-call-to-action--centered .sq-heading--flush {
	text-align: center;
	margin-inline: auto;
}

.sq-call-to-action--centered .sq-call-to-action__copy {
	flex: 0 1 auto;
	max-width: 40rem;
	margin-inline: auto;
}

.sq-call-to-action--centered .sq-call-to-action__features {
	justify-content: center;
}

.sq-call-to-action--centered .sq-call-to-action__action {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* ---------- key features ---------- */

.sq-key-features {
	padding-block: var(--sq-section-space);
}

.sq-key-features__featured {
	margin-bottom: var(--sq-space-2xl);
	overflow: hidden;
	border-radius: var(--sq-radius-lg);
}

.sq-key-features__featured-image {
	display: block;
	width: 100%;
	height: auto;
}

:where(.sq-key-features__featured .sq-placeholder) {
	aspect-ratio: 21 / 9;
}

.sq-key-features__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sq-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-key-features__icon,
.sq-key-features__item .sq-placeholder {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--sq-radius);
	flex-shrink: 0;
}

.sq-key-features__title {
	margin: var(--sq-space-sm) 0 var(--sq-space-2xs);
	font-size: var(--sq-font-size-card-title);
}

.sq-key-features__text {
	margin: 0;
	color: var(--sq-color-muted);
}

/* ---------- stats ---------- */

.sq-stats-section {
	padding-block: var(--sq-section-space);
	background: var(--sq-color-surface);
}

.sq-stats-section__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sq-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-stats-section__item {
	border-bottom: 1px solid var(--sq-color-line);
	padding-bottom: var(--sq-space-sm);
}

.sq-stats-section__value {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	line-height: 1.2;
}

.sq-stats-section__label {
	margin: var(--sq-space-2xs) 0 0;
	color: var(--sq-color-muted);
}

/* ---------- team / speakers cards ---------- */

.sq-team,
.sq-event-speakers,
.sq-free-courses,
.sq-blog-posts,
.sq-pricing-table,
.sq-who-we-are,
.sq-event-agenda,
.sq-testimonials,
.sq-what-is,
.sq-contact-form,
.sq-faq,
.sq-seo-content {
	padding-block: var(--sq-section-space);
	background: var(--sq-color-surface);
}

/*
 * Blog posts carries its own background choice (block.json: color =
 * transparent | white) but sits in the group above, which paints the surface
 * unconditionally — so picking "transparent" in the editor did nothing. This
 * restores the option. Same specificity as the group rule and declared after
 * it, so it wins; content-block solves the same problem the other way round
 * (no rule means transparent there), which is why the two blocks behaved
 * differently for what looks like the same setting.
 */
.sq-blog-posts--transparent {
	background: transparent;
}

.sq-team__grid,
.sq-event-speakers__grid,
.sq-free-courses__grid,
.sq-why-to-choose-us__grid,
.sq-blog-posts__grid,
.sq-pricing-table__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sq-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Plan count (.sq-pricing-table--count-N): one plan is a single centred
   card, two and four fill their rows; three and five or more use the three
   columns above. */
:where(.sq-pricing-table--count-1) .sq-pricing-table__grid {
	grid-template-columns: minmax(0, 420px);
	justify-content: center;
}

:where(.sq-pricing-table--count-2, .sq-pricing-table--count-4) .sq-pricing-table__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
	:where(.sq-pricing-table--count-4) .sq-pricing-table__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sq-team__card,
.sq-event-speakers__card,
.sq-free-courses__card,
.sq-blog-posts__card,
.sq-pricing-table__card,
.sq-why-to-choose-us__card {
	overflow: hidden;
	border: 1px solid var(--sq-color-line);
	border-radius: var(--sq-radius-lg);
	background: var(--sq-color-surface);
}

.sq-team__photo,
.sq-event-speakers__photo {
	display: block;
	width: 100%;
	height: 224px;
	object-fit: cover;
}

:where(.sq-team__card, .sq-event-speakers__card) .sq-placeholder {
	height: 224px;
	border: 0;
	border-radius: 0;
}

.sq-event-speakers__card {
	display: flex;
	flex-direction: column;
}

.sq-team__body,
.sq-event-speakers__body,
.sq-free-courses__body,
.sq-blog-posts__body {
	padding: var(--sq-space-md);
}

.sq-team__name,
.sq-event-speakers__name,
.sq-free-courses__title,
.sq-blog-posts__title,
.sq-pricing-table__name,
.sq-why-to-choose-us__title,
.sq-event-agenda__title {
	margin: 0 0 var(--sq-space-3xs);
	font-size: var(--sq-font-size-card-title);
}

.sq-team__role,
.sq-event-speakers__role,
.sq-event-agenda__speaker {
	margin: 0 0 var(--sq-space-xs);
	color: var(--sq-color-muted);
}

.sq-team__bio,
.sq-event-speakers__excerpt,
.sq-blog-posts__excerpt,
.sq-why-to-choose-us__text {
	margin: 0;
	color: var(--sq-color-muted);
	font-size: var(--sq-font-size-card-text);
}

/* ---------- remaining blocks (layout) ---------- */

.sq-contact-form__inner {
	max-width: 48rem;
}

.sq-contact-form__box {
	margin-top: var(--sq-space-2xl);
	padding: var(--sq-space-lg);
	border: 1px solid var(--sq-color-line);
	border-radius: var(--sq-radius-lg);
	background: var(--sq-color-surface);
}

.sq-contact-form__placeholder {
	padding: var(--sq-space-lg);
	border: 1px dashed var(--sq-color-muted);
	border-radius: var(--sq-radius);
	color: var(--sq-color-muted);
	text-align: center;
}

.sq-seo-content__body {
	max-width: 48rem;
	margin-inline: auto;
	line-height: 1.7;
}

.sq-what-is__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sq-space-2xl);
	align-items: start;
}

.sq-what-is__image,
.sq-what-is__embed {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--sq-radius-lg);
}

:where(.sq-what-is__media .sq-placeholder) {
	aspect-ratio: 16 / 9;
}

/*
 * Not part of the shared section group above: this block is the one that sits
 * on the alternate surface. It used to be listed there and then have the
 * background overridden here, which left a dead declaration in the group and
 * made the block look like it followed a rule it did not.
 */
.sq-why-to-choose-us {
	padding-block: var(--sq-section-space);
	background: var(--sq-color-surface-alt);
}

.sq-why-to-choose-us__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sq-space-sm);
	padding: var(--sq-space-md);
	text-align: center;
}

.sq-why-to-choose-us__icon {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.sq-who-we-are__top,
.sq-who-we-are__accred {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sq-space-lg);
	margin-bottom: var(--sq-space-2xl);
}

.sq-who-we-are__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sq-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-who-we-are__stat {
	border-bottom: 1px solid var(--sq-color-line);
	padding-bottom: var(--sq-space-sm);
}

.sq-who-we-are__value {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 600;
}

.sq-who-we-are__hero-image,
.sq-who-we-are__tile-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--sq-radius);
}

.sq-who-we-are__mosaic {
	display: grid;
	grid-template-columns: 3fr 5fr 4fr;
	gap: var(--sq-space-sm);
	margin-bottom: var(--sq-space-2xl);
}

.sq-who-we-are__tile {
	min-height: 12rem;
	overflow: hidden;
	border-radius: var(--sq-radius);
}

.sq-who-we-are__logos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sq-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-who-we-are__logo {
	display: grid;
	place-items: center;
	height: 96px;
	padding: var(--sq-space-sm);
	border: 1px solid var(--sq-color-line);
	border-radius: var(--sq-radius);
	background: var(--sq-color-surface-alt);
}

.sq-who-we-are__logo-image {
	max-height: 48px;
	width: auto;
}

.sq-pricing-table__card {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-sm);
	padding: var(--sq-space-md);
}

.sq-pricing-table__card--featured {
	border-width: 2px;
	border-color: var(--sq-color-accent);
}

.sq-pricing-table__price {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
}

.sq-pricing-table__billing,
.sq-pricing-table__for {
	margin: 0;
	color: var(--sq-color-muted);
}

.sq-pricing-table__features {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-pricing-table__feature {
	display: flex;
	align-items: center;
	gap: var(--sq-space-2xs);
	margin-top: var(--sq-space-2xs);
	color: var(--sq-color-muted);
	font-size: var(--sq-font-size-card-text);
}

.sq-testimonials__carousel {
	position: relative;
}

.sq-testimonials__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.sq-testimonials__track::-webkit-scrollbar {
	display: none;
}

.sq-testimonials__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.sq-testimonials__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--sq-space-lg);
	align-items: stretch;
}

.sq-testimonials__media {
	overflow: hidden;
	border-radius: var(--sq-radius-lg);
	aspect-ratio: 4 / 3;
}

.sq-testimonials__image,
.sq-testimonials__media .sq-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--sq-radius-lg);
}

.sq-testimonials__quote-box {
	padding: var(--sq-space-lg);
	border: 1px solid var(--sq-color-line);
	border-radius: var(--sq-radius-lg);
	background: var(--sq-color-surface-alt);
}

.sq-testimonials__quote {
	margin: 0 0 var(--sq-space-md);
	font-size: 1.25rem;
	font-weight: 500;
}

.sq-testimonials__author {
	display: block;
	font-style: normal;
	font-weight: 600;
}

.sq-testimonials__meta {
	color: var(--sq-color-muted);
	font-size: 0.875rem;
}

.sq-testimonials__nav {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--sq-color-line);
	border-radius: 999px;
	background: var(--sq-color-surface);
	transform: translateY(-50%);
	cursor: pointer;
}

.sq-testimonials__nav--prev {
	left: 0;
}

.sq-testimonials__nav--next {
	right: 0;
}

.sq-event-agenda__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-event-agenda__row {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr) 2rem;
	gap: var(--sq-space-md);
	padding: var(--sq-space-md) 0;
	border-bottom: 1px solid var(--sq-color-line);
}

.sq-event-agenda__time {
	margin: 0;
	font-weight: 600;
}

.sq-event-agenda__chevron.is-open {
	transform: rotate(180deg);
}

.sq-event-speakers__modal {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: grid;
	place-items: center;
	padding: var(--sq-space-sm);
}

.sq-event-speakers__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.7);
}

.sq-event-speakers__dialog {
	position: relative;
	z-index: 1;
	width: min(42rem, 100%);
	max-height: 90vh;
	overflow: auto;
	padding: var(--sq-space-xl);
	border-radius: var(--sq-radius-lg);
	background: var(--sq-color-surface);
}

.sq-event-speakers__close {
	position: absolute;
	top: var(--sq-space-sm);
	right: var(--sq-space-sm);
}

.sq-event-speakers__dialog-photo {
	width: 96px;
	height: 96px;
	border-radius: 999px;
	object-fit: cover;
}

.sq-event-speakers__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-bottom: var(--sq-space-lg);
}

.sq-event-speakers__body > :has(+ .sq-event-speakers__more) {
	margin-bottom: var(--sq-space-lg);
}

.sq-event-speakers__more {
	margin-top: auto;
	align-self: flex-start;
}

.sq-blog-posts__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.sq-blog-posts__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sq-blog-posts__cta {
	margin-top: var(--sq-space-lg);
	text-align: center;
}

.sq-free-courses__media {
	position: relative;
}

.sq-free-courses__cover {
	display: block;
	width: 100%;
	height: 13rem;
	object-fit: cover;
}

.sq-free-courses__badge {
	position: absolute;
	left: var(--sq-space-sm);
	bottom: -16px;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: var(--sq-radius);
	background: var(--sq-color-surface);
}

/*
 * The badge icon had no rule at all, and the markup did not even give the
 * <img> this class — only the placeholder got it. So a real icon rendered at
 * whatever intrinsic size the uploaded file happened to have, and the badge
 * clipped it. Same shape as .sq-jumbo__badge-image: fill the box, keep the
 * aspect ratio, never crop.
 */
.sq-free-courses__badge-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sq-courses-section {
	position: relative;
	overflow: hidden;
	padding-block: 0;
	background: var(--sq-color-surface-alt);
	min-height: 700px;
}

.sq-courses-section__slider {
	height: 700px;
	overflow: hidden;
}

.sq-courses-section__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sq-space-lg);
	height: 100%;
}

.sq-courses-section__column {
	position: relative;
	overflow: hidden;
}

.sq-courses-section__track {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-sm);
	width: 100%;
}

.sq-courses-section__track--up {
	animation: sq-courses-up 40s linear infinite;
}

.sq-courses-section__track--down {
	animation: sq-courses-down 35s linear infinite;
}

.sq-courses-section__track--up-slow {
	animation: sq-courses-up 45s linear infinite;
}

.sq-courses-section__card {
	display: flex;
	gap: var(--sq-space-sm);
	padding: var(--sq-space-sm);
	border: 1px solid var(--sq-color-line);
	border-radius: var(--sq-radius);
	background: var(--sq-color-surface);
}

.sq-courses-section__thumb,
.sq-courses-section__thumb-image {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: var(--sq-radius);
}

.sq-courses-section__panel {
	position: absolute;
	inset: 50% auto auto 50%;
	z-index: 2;
	width: min(36rem, calc(100% - 32px));
	padding: var(--sq-space-lg);
	border: 1px solid var(--sq-color-line);
	border-radius: var(--sq-radius-lg);
	background: var(--sq-color-dark);
	color: var(--sq-color-on-dark);
	text-align: center;
	transform: translate(-50%, -50%);
}

.sq-block.sq-courses-section .sq-courses-section__panel .sq-heading,
.sq-block.sq-courses-section .sq-courses-section__panel .sq-heading--flush {
	text-align: center;
	margin-inline: auto;
}

@keyframes sq-courses-up {
	to {
		transform: translateY(-50%);
	}
}

@keyframes sq-courses-down {
	from {
		transform: translateY(-50%);
	}
	to {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sq-courses-section__track {
		animation: none;
	}
}

/* ---------- faq ---------- */

.sq-faq__list {
	border-top: 1px solid var(--sq-color-line);
}

.sq-faq__item {
	border-bottom: 1px solid var(--sq-color-line);
}

.sq-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sq-space-md);
	padding: var(--sq-space-md) 0;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.sq-faq__question::-webkit-details-marker {
	display: none;
}

.sq-faq__question::marker {
	content: "";
}

.sq-faq__icon {
	display: inline-flex;
	flex: none;
	transition: transform 0.2s ease;
}

:where(.sq-faq__item[open]) .sq-faq__icon {
	transform: rotate(180deg);
}

.sq-faq__answer {
	padding-bottom: var(--sq-space-md);
	color: var(--sq-color-muted);
}

.sq-faq__answer > :last-child {
	margin-bottom: 0;
}

/* Block editor only: items that are not shown because they are incomplete. */
.sq-faq__notice {
	margin: 0 0 var(--sq-space-sm);
	padding: var(--sq-space-2xs) var(--sq-space-xs);
	border: 1px dashed var(--sq-color-muted);
	color: var(--sq-color-muted);
	font-size: var(--sq-font-size-card-text);
}

@media (prefers-reduced-motion: reduce) {
	.sq-faq__icon {
		transition: none;
	}
}

/* ---------- image band ---------- */

.sq-image-band {
	--sq-image-band-height: var(--sq-image-band-height-md);
	overflow: hidden;
}

.sq-image-band--lg {
	--sq-image-band-height: var(--sq-image-band-height-lg);
}

.sq-image-band__image {
	display: block;
	width: 100%;
	max-width: none;
	height: var(--sq-image-band-height);
	object-fit: cover;
}

/*
 * ---------- responsive ----------
 *
 * Breakpoints match Tailwind's default scale, because the theme that styles
 * these blocks is a Tailwind build and switches card padding, gaps and type
 * on md (768) / lg (1024) / xl (1280). This file used to step down at
 * 600 / 900 / 1100, so a card could gain its wide padding at 768 while still
 * sitting in a grid that did not widen until 900 — the two systems disagreed
 * about what a tablet was.
 *
 * The .98 values tile exactly against Tailwind's min-width queries, leaving no
 * gap at fractional viewport widths.
 *
 * Column counts (from the step count, see render.php): 4/5 at xl → 3 at lg
 * → 2 at md → 1 below — the same ladder as the theme's .cards-grid-3.
 */

@media (max-width: 1279.98px) {
	:where(.sq-how-it-works--cols-4, .sq-how-it-works--cols-5) .sq-how-it-works__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1023.98px) {
	:where(.sq-jumbo--split) .sq-jumbo__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.sq-how-it-works__steps,
	.sq-key-features__grid,
	.sq-team__grid,
	.sq-event-speakers__grid,
	.sq-free-courses__grid,
	.sq-why-to-choose-us__grid,
	.sq-blog-posts__grid,
	.sq-pricing-table__grid,
	.sq-stats-section__grid,
	.sq-who-we-are__top,
	.sq-who-we-are__accred,
	.sq-what-is__panel,
	.sq-content-block__row,
	.sq-testimonials__card,
	.sq-courses-section__columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.sq-who-we-are__mosaic {
		grid-template-columns: minmax(0, 1fr);
	}

	.sq-event-agenda__row {
		grid-template-columns: minmax(0, 1fr);
	}

	:where(.sq-logo-section--row) .sq-logo-section__list {
		justify-content: center;
	}
}

@media (max-width: 767.98px) {
	:where(.sq-how-it-works) .sq-how-it-works__steps,
	.sq-key-features__grid,
	.sq-team__grid,
	.sq-event-speakers__grid,
	.sq-free-courses__grid,
	.sq-why-to-choose-us__grid,
	.sq-blog-posts__grid,
	.sq-pricing-table__grid,
	.sq-stats-section__grid,
	.sq-who-we-are__stats,
	.sq-who-we-are__logos,
	.sq-content-block__row,
	.sq-what-is__panel,
	.sq-testimonials__card,
	.sq-courses-section__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.sq-logo-section__image {
		height: 32px;
	}

	.sq-courses-section,
	.sq-courses-section__slider {
		min-height: 500px;
		height: 500px;
	}

	.sq-testimonials__nav {
		display: none;
	}
}