/* =========================================================
   Blog category landing page — /blogs/<category>/
   Ported from design references/20260910-spcfz-blog-category-page-design.html.
   Class names are prefixed and every rule is scoped to the template root,
   so nothing here can reach the rest of the theme.
   General Sans is the theme's own face, so it is inherited, not re-loaded.
   ========================================================= */

.spcfz-blog-category {
	/* SPC design system tokens — design references/SPC Free Zone Design System/tokens/colors.css */
	--spcfz-bc-blue: #004dff; /* --spc-blue */
	--spcfz-bc-blue-deep: #102ea2; /* --spc-blue-2 */
	--spcfz-bc-blue-lift: #3a6bff; /* --blue-400 */
	--spcfz-bc-blue-100: #d6e1ff; /* --blue-100 */
	--spcfz-bc-blue-200: #adc3ff; /* --blue-200 */
	--spcfz-bc-ink: #071329; /* --spc-ink */
	--spcfz-bc-navy: #071329; /* --spc-ink */
	--spcfz-bc-navy-soft: #2b3450; /* --gray-700 */
	--spcfz-bc-body: #3f4b63; /* --gray-600 */
	--spcfz-bc-muted: #53617c; /* --spc-muted */
	--spcfz-bc-faint: #8a96af; /* --gray-400 */
	--spcfz-bc-line: #dfe7f4; /* --spc-border */
	--spcfz-bc-line-strong: #c3ccdd; /* --gray-300 */
	--spcfz-bc-surface: #ffffff; /* --spc-card */
	--spcfz-bc-soft: #f3f6ff; /* --spc-soft */
	--spcfz-bc-tint: #eef3ff; /* --blue-50 */
	--spcfz-bc-shadow: 0 18px 40px rgba(7, 19, 41, 0.08); /* --spc-shadow-sm */
	--spcfz-bc-shadow-lift: 0 26px 70px rgba(7, 19, 41, 0.11); /* --spc-shadow */
	--spcfz-bc-wrap: 1180px;
	--spcfz-bc-r: 14px;
	--spcfz-bc-sticky-top: 112px; /* site header height + breathing room */
	--spcfz-bc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");

	/* The hero carries the tint; everything below it sits on white. */
	background: var(--spcfz-bc-surface);
	color: var(--spcfz-bc-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.spcfz-blog-category *,
.spcfz-blog-category *::before,
.spcfz-blog-category *::after {
	box-sizing: border-box;
}

.spcfz-blog-category h1,
.spcfz-blog-category h2,
.spcfz-blog-category h3 {
	margin: 0;
	color: var(--spcfz-bc-navy);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.spcfz-blog-category p {
	margin: 0;
}

.spcfz-blog-category a {
	color: inherit;
	text-decoration: none;
}

.spcfz-blog-category :focus-visible {
	outline: 2.5px solid var(--spcfz-bc-blue);
	outline-offset: 3px;
	border-radius: 6px;
}

.spcfz-bc-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.spcfz-bc-wrap {
	width: 100%;
	max-width: var(--spcfz-bc-wrap);
	margin-inline: auto;
	padding-inline: 28px;
}

/* With no newsletter band after it, the content wrap is the last thing on the
   page, so it carries the gap to the footer itself. */
.spcfz-blog-category > .spcfz-bc-wrap:last-child {
	padding-bottom: 96px;
}

/* ---------- hero ---------- */

.spcfz-bc-hero {

	padding: 30px 0 24px;
	border-bottom: 1px solid var(--spcfz-bc-line);
	background: var(--spcfz-bc-soft);
}

.spcfz-bc-crumb {
	margin-bottom: 30px;
	color: var(--spcfz-bc-muted);
	font-size: 15px;
}

.spcfz-bc-crumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spcfz-bc-crumb li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.spcfz-bc-crumb a:hover {
	color: var(--spcfz-bc-blue);
	text-decoration: underline;
}

.spcfz-bc-crumb .spcfz-bc-sep {
	flex: none;
	color: var(--spcfz-bc-faint);
}

.spcfz-bc-crumb .spcfz-bc-here {
	color: var(--spcfz-bc-ink);
	font-weight: 600;
}

.spcfz-bc-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 0 66px;
	align-items: stretch;
}

/* Count chip */
.spcfz-bc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border: 1px solid var(--spcfz-bc-blue-100);
	border-radius: 999px;
	background: var(--spcfz-bc-surface);
	color: var(--spcfz-bc-blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

.spcfz-blog-category .spcfz-bc-hero h1 {
	margin-top: 13px;
	color: var(--spcfz-bc-ink);
	font-size: clamp(36px, 4.4vw, 62px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.spcfz-bc-accent {
	color: var(--spcfz-bc-blue);
}

.spcfz-blog-category .spcfz-bc-lede {
	max-width: 480px;
	/* The display line-height leaves little room below, so the gap is set here. */
	margin-top: 26px;
	color: var(--spcfz-bc-navy-soft);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
}

.spcfz-bc-hero-side {
	/* Margin, not padding: the rule then starts level with the title, and
	   stretches to the bottom of the row. */
	margin-top: 58px;
	padding-inline-start: 26px;
	border-inline-start: 2px solid var(--spcfz-bc-blue-200);
}

.spcfz-bc-intro {
	color: var(--spcfz-bc-body);
	font-size: 16px;
	line-height: 1.75;
}

.spcfz-blog-category .spcfz-bc-intro > * + * {
	margin-top: 14px;
}

.spcfz-bc-intro a {
	color: var(--spcfz-bc-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- search ---------- */

.spcfz-bc-search {
	position: relative;
	margin-top: 30px;
}

/* The icon anchors to this, not to the form, so it stays centred on the input
   at every width — including when the button stacks underneath on phones. */
.spcfz-bc-search-field {
	position: relative;
	display: block;
}

.spcfz-bc-search input {
	width: 100%;
	padding: 18px 128px 18px 52px;
	border: 1px solid var(--spcfz-bc-line);
	border-radius: 999px;
	background: var(--spcfz-bc-surface);
	box-shadow: var(--spcfz-bc-shadow);
	color: var(--spcfz-bc-navy);
	font: inherit;
	font-size: 16px;
	transition: border-color 0.18s, box-shadow 0.18s;
}

.spcfz-bc-search input::placeholder {
	color: var(--spcfz-bc-muted);
}

.spcfz-bc-search input:focus {
	outline: none;
	border-color: var(--spcfz-bc-blue);
	box-shadow: 0 0 0 4px rgba(0, 77, 255, 0.12);
}

.spcfz-bc-search svg {
	position: absolute;
	inset-inline-start: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--spcfz-bc-muted);
	pointer-events: none;
}

.spcfz-bc-search button {
	position: absolute;
	inset-inline-end: 6px;
	top: 6px;
	bottom: 6px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--spcfz-bc-blue);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s;
}

.spcfz-bc-search button:hover {
	background: var(--spcfz-bc-blue-deep);
}

/* ---------- results bar ---------- */

.spcfz-bc-results {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: baseline;
	padding: 36px 0 20px;
}

.spcfz-bc-results p {
	color: var(--spcfz-bc-muted);
	font-size: 14px;
}

.spcfz-bc-results b {
	color: var(--spcfz-bc-navy);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.spcfz-blog-category .spcfz-bc-clear {
	color: var(--spcfz-bc-blue);
	font-size: 13.5px;
	font-weight: 500;
}

.spcfz-blog-category .spcfz-bc-clear:hover {
	color: var(--spcfz-bc-blue-deep);
	text-decoration: underline;
}

/* ---------- card grid ---------- */

.spcfz-bc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px 28px;
	padding-bottom: 8px;
}

.spcfz-bc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--spcfz-bc-line);
	border-radius: var(--spcfz-bc-r);
	background: var(--spcfz-bc-surface);
	box-shadow: var(--spcfz-bc-shadow);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.spcfz-bc-card:hover {
	border-color: var(--spcfz-bc-line-strong);
	box-shadow: var(--spcfz-bc-shadow-lift);
	transform: translateY(-3px);
}

.spcfz-bc-shot {
	display: block;
	flex: none;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--spcfz-bc-tint);
}

.spcfz-bc-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.spcfz-bc-card:hover .spcfz-bc-shot img {
	transform: scale(1.045);
}

.spcfz-bc-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--spcfz-bc-faint);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.spcfz-bc-inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 0;
}

.spcfz-bc-cat {
	align-self: flex-start;
	color: var(--spcfz-bc-blue);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.spcfz-blog-category .spcfz-bc-card h3 {
	font-size: 18.5px;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.015em;
}

.spcfz-blog-category .spcfz-bc-card:hover h3 {
	color: var(--spcfz-bc-blue-deep);
}

.spcfz-bc-dek {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: var(--spcfz-bc-body);
	font-size: 14.5px;
	line-height: 1.6;
}

.spcfz-bc-foot {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: auto;
	padding: 15px 22px;
	border-top: 1px solid var(--spcfz-bc-line);
	color: var(--spcfz-bc-muted);
	font-size: 12.5px;
}

.spcfz-bc-dot {
	flex: none;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--spcfz-bc-line-strong);
}

.spcfz-bc-go {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-inline-start: auto;
	color: var(--spcfz-bc-blue);
	font-weight: 600;
}

.spcfz-bc-go svg {
	transition: transform 0.2s;
}

.spcfz-bc-card:hover .spcfz-bc-go svg {
	transform: translateX(3px);
}

/* ---------- CTA card ---------- */

/*
 * A band across the whole grid, breaking the listing after two rows.
 * Built to the blog design system's `spcfz-cta-banner`: diagonal gradient,
 * translucent round icon badge, corner dot grid and blob, tight vertical
 * padding, and a white pill button carrying a soft glow.
 */
.spcfz-bc-cta {
	position: relative;
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 24px;
	overflow: hidden;
	padding: 30px 40px;
	border-radius: 20px;
	background: linear-gradient(135deg, var(--spcfz-bc-blue) 0%, var(--spcfz-bc-blue-lift) 100%);
}

/* Dot grid in the corner. */
.spcfz-bc-cta::before {
	content: "";
	position: absolute;
	top: 18px;
	inset-inline-end: 18px;
	width: 90px;
	height: 70px;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 1.4px, transparent 1.4px);
	background-size: 14px 14px;
	pointer-events: none;
}

/* Soft blob under the button end. */
.spcfz-bc-cta::after {
	content: "";
	position: absolute;
	inset-inline-end: -70px;
	bottom: -110px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	pointer-events: none;
}

.spcfz-bc-cta > * {
	position: relative;
	z-index: 1;
}

.spcfz-bc-cta-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.spcfz-bc-cta-copy {
	flex: 1;
}

.spcfz-blog-category .spcfz-bc-cta h2 {
	margin-top: 0;
	color: #fff;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.25;
}

.spcfz-bc-cta p {
	margin-top: 8px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	line-height: 1.5;
}

.spcfz-blog-category .spcfz-bc-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 9px;
	margin-inline-start: auto;
	padding: 16px 28px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(16, 46, 162, 0.35);
	color: var(--spcfz-bc-blue-deep);
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}

.spcfz-blog-category .spcfz-bc-btn:hover {
	background: var(--spcfz-bc-tint);
	box-shadow: 0 12px 30px rgba(16, 46, 162, 0.45);
	transform: translateY(-2px);
}

/* ---------- pagination ---------- */

.spcfz-bc-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 46px 0 0;
}

/* Numbers are circles; Previous and Next are pills with a chevron. */
.spcfz-bc-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 48px;
	height: 48px;
	border: 1px solid var(--spcfz-bc-line-strong);
	border-radius: 50%;
	background: var(--spcfz-bc-surface);
	color: var(--spcfz-bc-ink);
	font-size: 16px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.16s, background 0.16s, color 0.16s;
}

.spcfz-bc-pager a.page-numbers:hover {
	border-color: var(--spcfz-bc-ink);
}

.spcfz-bc-pager .page-numbers.current {
	border-color: var(--spcfz-bc-ink);
	background: var(--spcfz-bc-ink);
	color: #fff;
}

.spcfz-bc-pager .page-numbers.dots {
	width: 26px;
	border-color: transparent;
	background: none;
	color: var(--spcfz-bc-faint);
	/* The ellipsis is drawn on the baseline while the digits fill the cap height,
	   so centring the box leaves its ink sitting low. Lift it by half that gap. */
	line-height: 1;
	padding-bottom: 8px;
}

.spcfz-bc-pager .prev,
.spcfz-bc-pager .next {
	width: auto;
	height: 48px;
	padding: 0 20px;
	border-radius: 999px;
	font-size: 15px;
}

.spcfz-bc-pager a.prev:hover,
.spcfz-bc-pager a.next:hover {
	border-color: var(--spcfz-bc-ink);
}

/* There is no page to go to, so it reads as unavailable rather than clickable. */
.spcfz-bc-pager .spcfz-bc-off {
	color: var(--spcfz-bc-faint);
}

/* Chevrons as masks, so the markup stays plain text for wp_kses_post(). */
.spcfz-bc-pager .prev::before,
.spcfz-bc-pager .next::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--spcfz-bc-chevron) center / contain no-repeat;
	mask: var(--spcfz-bc-chevron) center / contain no-repeat;
}

.spcfz-bc-pager .prev::before {
	transform: rotate(180deg);
}

/* ---------- empty state ---------- */

.spcfz-bc-empty {
	grid-column: 1 / -1;
	padding: 70px 24px;
	border: 1px dashed var(--spcfz-bc-line-strong);
	border-radius: var(--spcfz-bc-r);
	background: var(--spcfz-bc-surface);
	text-align: center;
}

.spcfz-blog-category .spcfz-bc-empty h3 {
	font-size: 19px;
	font-weight: 600;
}

.spcfz-bc-empty p {
	margin-top: 9px;
	color: var(--spcfz-bc-muted);
	font-size: 14.5px;
}

/* ---------- FAQ ---------- */

.spcfz-bc-faq {
	margin-top: 56px;
	padding: 56px 0 4px;
	border-top: 1px solid var(--spcfz-bc-line);
}

.spcfz-bc-sec-head {
	max-width: 62ch;
}

.spcfz-blog-category .spcfz-bc-sec-head h2 {
	margin-top: 0;
	font-size: 31px;
	font-weight: 700;
	line-height: 1.18;
}

.spcfz-bc-sec-head p {
	margin-top: 12px;
	font-size: 15.5px;
	line-height: 1.68;
}

/* Heading block on the left, questions on the right. */
.spcfz-bc-faq-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
	gap: 0 76px;
	align-items: start;
}

/* The heading column holds still while the answers scroll past it.
   --spcfz-bc-sticky-top clears the theme's sticky site header. */
.spcfz-bc-faq .spcfz-bc-sec-head {
	position: sticky;
	top: var(--spcfz-bc-sticky-top);
}

.spcfz-blog-category .spcfz-bc-faq .spcfz-bc-sec-head h2 {
	margin-top: 0;
	color: var(--spcfz-bc-ink);
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1.12;
}

.spcfz-bc-faq .spcfz-bc-sec-head p {
	margin-top: 14px;
	color: var(--spcfz-bc-body);
	font-size: 16px;
	line-height: 1.8;
}

.spcfz-bc-qa-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/*
 * Accordion per the blog design system: soft-shadow card, 48px tap target,
 * light circle with "+" that becomes a solid blue circle with "×" when open.
 */
.spcfz-bc-qa {
	padding: 22px 30px;
	border-radius: 16px;
	background: var(--spcfz-bc-surface);
	box-shadow: 0 2px 14px rgba(7, 19, 41, 0.08);
	transition: box-shadow 0.2s ease;
}

.spcfz-bc-qa:hover,
.spcfz-bc-qa[open] {
	box-shadow: 0 6px 22px rgba(7, 19, 41, 0.12);
}

.spcfz-bc-qa summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	min-height: 48px;
	color: var(--spcfz-bc-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.spcfz-bc-qa summary::-webkit-details-marker {
	display: none;
}

.spcfz-bc-qa summary::after {
	content: "+";
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--spcfz-bc-tint);
	color: var(--spcfz-bc-blue);
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.spcfz-bc-qa[open] summary::after {
	content: "\00d7";
	background: var(--spcfz-bc-blue);
	color: #fff;
}

/* The wrapper animates; max-height here is only the no-JS fallback. */
.spcfz-bc-qa-body {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

.spcfz-bc-qa[open] .spcfz-bc-qa-body {
	max-height: 2000px;
}

.spcfz-bc-ans {
	margin-top: 16px;
	color: var(--spcfz-bc-body);
	font-size: 16px;
	line-height: 1.7;
}

.spcfz-bc-ans > * + * {
	margin-top: 12px;
}

.spcfz-bc-ans ul,
.spcfz-bc-ans ol {
	margin: 12px 0 0;
	padding-inline-start: 22px;
}

.spcfz-bc-ans li + li {
	margin-top: 8px;
}

.spcfz-bc-ans a {
	color: var(--spcfz-bc-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- other categories ---------- */

.spcfz-bc-browse {
	margin-top: 64px;
	padding: 76px 0 12px;
	border-top: 1px solid var(--spcfz-bc-line);
}

/* This section has its own scale and its indigo accent, per the section design. */
.spcfz-bc-browse {
}

.spcfz-bc-browse .spcfz-bc-sec-head {
	max-width: 660px;
}

.spcfz-blog-category .spcfz-bc-browse .spcfz-bc-sec-head h2 {
	margin-top: 0;
	color: var(--spcfz-bc-ink);
	font-size: clamp(32px, 3vw, 42px);
	line-height: 1.12;
}

.spcfz-bc-browse .spcfz-bc-sec-head p {
	margin-top: 14px;
	color: var(--spcfz-bc-body);
	font-size: 16px;
	line-height: 1.8;
}

.spcfz-bc-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
	gap: 15px 14px;
	margin-top: 34px;
}

.spcfz-bc-cat-card {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 80px;
	padding: 18px 20px;
	border: 1px solid var(--spcfz-bc-line);
	border-radius: 15px;
	background: var(--spcfz-bc-surface);
	transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.spcfz-bc-cat-card:hover {
	border-color: var(--spcfz-bc-blue);
	box-shadow: var(--spcfz-bc-shadow-lift);
	transform: translateY(-2px);
}

.spcfz-blog-category .spcfz-bc-cat-card h3 {
	color: var(--spcfz-bc-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.spcfz-blog-category .spcfz-bc-cat-card:hover h3 {
	color: var(--spcfz-bc-blue);
}

.spcfz-bc-n {
	flex: none;
	margin-inline-start: auto;
	padding: 5px 10px;
	border-radius: 8px;
	background: var(--spcfz-bc-tint);
	color: var(--spcfz-bc-blue);
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---------- newsletter ---------- */

.spcfz-bc-news-outer {
	padding: 72px 0 84px;
}

.spcfz-bc-news {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: 40px;
	align-items: center;
	overflow: hidden;
	padding: 52px 56px;
	border-radius: 20px;
	background: var(--spcfz-bc-navy);
}

.spcfz-bc-news::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(680px 300px at 6% 108%, rgba(0, 77, 255, 0.5), transparent 64%);
}

.spcfz-bc-news > * {
	position: relative;
}

.spcfz-blog-category .spcfz-bc-news h2 {
	max-width: 20ch;
	margin-top: 0;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.16;
}

.spcfz-bc-news p {
	max-width: 46ch;
	margin-top: 12px;
	color: var(--spcfz-bc-blue-100);
	font-size: 15.5px;
	line-height: 1.62;
}

/* ---------- motion, breakpoints ---------- */

@media (prefers-reduced-motion: reduce) {
	.spcfz-blog-category *,
	.spcfz-blog-category *::before,
	.spcfz-blog-category *::after {
		animation: none !important;
		transition: none !important;
	}

	.spcfz-bc-card:hover,
	.spcfz-bc-cat-card:hover,
	.spcfz-bc-btn:hover {
		transform: none;
	}
}

@media (max-width: 1000px) {
	.spcfz-bc-hero-grid {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.spcfz-bc-lede {
		max-width: 52ch;
	}

	.spcfz-bc-hero-side {
		margin-top: 18px;
	}

	.spcfz-bc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.spcfz-bc-news {
		grid-template-columns: 1fr;
		padding: 40px;
	}

	.spcfz-bc-faq-grid {
		grid-template-columns: 1fr;
		gap: 30px 0;
	}

	.spcfz-bc-faq .spcfz-bc-sec-head {
		position: static;
	}

	/* The button drops under the copy rather than squeezing it. */
	.spcfz-bc-cta {
		flex-wrap: wrap;
		padding: 36px 32px;
	}

	.spcfz-bc-cta .spcfz-bc-btn {
		margin-inline-start: 87px;
	}
}

@media (max-width: 680px) {
	.spcfz-bc-wrap {
		padding-inline: 20px;
	}

	.spcfz-blog-category > .spcfz-bc-wrap:last-child {
		padding-bottom: 64px;
	}

	.spcfz-bc-grid {
		grid-template-columns: 1fr;
	}

	.spcfz-bc-pager {
		gap: 6px;
	}

	.spcfz-bc-search input {
		padding: 15px 20px 15px 48px;
	}

	.spcfz-bc-search button {
		position: static;
		width: 100%;
		margin-top: 10px;
		padding: 14px 24px;
	}

	.spcfz-bc-qa {
		padding: 16px 18px;
	}

	.spcfz-bc-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 26px 24px;
	}

	.spcfz-bc-cta-icon {
		width: 52px;
		height: 52px;
	}

	.spcfz-bc-cta .spcfz-bc-btn {
		margin-inline-start: 0;
		width: 100%;
		justify-content: center;
	}

	/* The button now sits below, so the icon centres on the input, not the form. */}