/* ==========================================================================
   Resources: the hub, guides, FAQs, client stories, press, the Privacy
   Policy, a guide, an announcement, a client story, and the 404.

   Every classed element that carries text states its own colour and, for
   paragraphs and headings, its own size: the parent theme's bare span, p and
   h1 to h4 rules apply directly and beat anything inherited.
   ========================================================================== */

.sbk-shero--short { padding-block: 56px 52px; }
.sbk-shero--short .sbk-lede { max-width: 34em; }

/* Topic chips and guide cards: in sbk-core.css since Oct 26 2026, because
   the service pages show guide cards too. */

/* ---------- The hub ----------------------------------------------------- */

.sbk-hubcards {
	display: grid;
	gap: var(--sbk-s3);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* A layout for every count, so three cards and four both look intended. */
.sbk-hubcards--1 { grid-template-columns: minmax(0, 460px); }
.sbk-hubcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.sbk-hubcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sbk .sbk-hubcard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 26px 26px;
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-cool);
	border-radius: var(--sbk-radius-lg);
	color: var(--sbk-navy);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sbk .sbk-hubcard:hover,
.sbk .sbk-hubcard:focus-visible {
	border-color: var(--sbk-gold-light);
	box-shadow: var(--sbk-shadow-card-2);
	transform: translateY(-2px);
}
.sbk-hubcard__icon {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--sbk-cream);
	color: var(--sbk-gold);
}
.sbk .sbk-hubcard__title {
	color: var(--sbk-navy);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: 1.3;
	margin: 6px 0 0;
}
.sbk .sbk-hubcard__body {
	flex: 1;
	color: var(--sbk-body);
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}
.sbk .sbk-hubcard__go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	color: var(--sbk-gold-text);
	font-size: 14.5px;
	font-weight: 700;
}

.sbk-latest__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--sbk-s3);
	flex-wrap: wrap;
}
.sbk .sbk-latest__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sbk-gold-text);
	font-size: 15px;
	font-weight: 700;
	min-height: var(--sbk-tap);
}

/* ---------- Press ------------------------------------------------------- */

.sbk-press {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--sbk-s6);
	align-items: start;
}
.sbk-press--kit-only { grid-template-columns: minmax(0, 460px); }

.sbk-ngrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sbk-s3);
	margin-top: var(--sbk-s4);
}

/* A card with no image is a complete card: a gold rule where the picture
   would be, never an empty grey box. */
.sbk-ncard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-cool);
	border-top: 3px solid var(--sbk-gold);
	border-radius: var(--sbk-radius-card);
	overflow: hidden;
	transition: box-shadow .15s ease, transform .15s ease;
}
.sbk-ncard--img { border-top-width: 1px; border-top-color: var(--sbk-border-cool); }
.sbk-ncard:hover,
.sbk-ncard:focus-within { box-shadow: var(--sbk-shadow-card-2); transform: translateY(-2px); }
.sbk-ncard__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--sbk-cream); }
.sbk-ncard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbk-ncard__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.sbk .sbk-ncard__date { color: var(--sbk-muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; margin: 0; }
.sbk .sbk-ncard__title { color: var(--sbk-navy); font-size: 18px; font-weight: 700; letter-spacing: -.012em; line-height: 1.35; margin: 0; }
.sbk .sbk-ncard__link { color: inherit; text-decoration: none; }
/* The whole card is the link's target area. */
.sbk-ncard__link::after { content: ""; position: absolute; inset: 0; }
.sbk .sbk-ncard__sum { color: var(--sbk-body); font-size: 15px; line-height: 1.65; margin: 0; flex: 1; }
.sbk .sbk-ncard__go { color: var(--sbk-gold-text); font-size: 14px; font-weight: 700; }

.sbk-coverage { margin-top: var(--sbk-s6); }
.sbk-coverage__list { list-style: none; margin: var(--sbk-s3) 0 0; padding: 0; display: grid; gap: 10px; }
.sbk-coverage__item { border: 1px solid var(--sbk-border-cool); border-radius: var(--sbk-radius-card); background: var(--sbk-white); }
.sbk .sbk-coverage__link { display: block; padding: 18px 22px; color: inherit; text-decoration: none; }
.sbk-coverage__item > .sbk-coverage__pub,
.sbk-coverage__item > .sbk-coverage__headline { padding-inline: 22px; }
.sbk .sbk-coverage__pub { display: block; color: var(--sbk-gold-text); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sbk .sbk-coverage__headline { display: block; color: var(--sbk-navy); font-size: 16px; font-weight: 600; line-height: 1.45; margin-top: 4px; }

.sbk-kitbox {
	position: sticky;
	top: 24px;
	padding: 26px 24px;
	border-radius: var(--sbk-radius-lg);
	background: var(--sbk-navy);
}
.sbk .sbk-kitbox__line { color: var(--sbk-white); font-size: 16px; font-weight: 600; line-height: 1.5; margin: 0; }
.sbk-kitbox__downloads { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.sbk .sbk-kitbox__dl {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid rgba(233, 190, 98, .45);
	border-radius: var(--sbk-radius-btn);
	color: var(--sbk-gold-light);
	text-decoration: none;
	transition: background .15s ease;
}
.sbk .sbk-kitbox__dl:hover,
.sbk .sbk-kitbox__dl:focus-visible { background: rgba(233, 190, 98, .12); }
.sbk .sbk-kitbox__dltext { color: var(--sbk-gold-light); font-size: 14.5px; font-weight: 700; }
.sbk-kitbox__contact { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(233, 190, 98, .22); }
.sbk .sbk-kitbox__label { color: var(--sbk-on-navy-2); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.sbk .sbk-kitbox__name { color: var(--sbk-white); font-size: 15px; font-weight: 600; margin: 8px 0 0; }
.sbk .sbk-kitbox__email { display: inline-flex; align-items: center; min-height: var(--sbk-tap); margin-top: 0; color: var(--sbk-gold-light); font-size: 15px; font-weight: 600; word-break: break-word; }

/* ---------- A marker for anything not yet confirmed ---------------------- */

.sbk .sbk-tbc {
	background: #FBF1D9;
	color: #7A5519;
	border-bottom: 1.5px dashed #B9862F;
	padding: 0 3px;
	border-radius: 3px;
	font-weight: 600;
}
.sbk .sbk-draft {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #FBF1D9;
	color: #7A5519;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: 4px;
}

/* ---------- Reading layout: guide and Privacy Policy --------------------- */

.sbk-ahead .sbk-h1 { max-width: 22ch; }
.sbk-ahead__in { max-width: 860px; }
.sbk-ahead__chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--sbk-s3); }
.sbk-ahead .sbk-h1 { margin-top: 16px; }
/* One step heavier than .sbk .sbk-byline__meta, which it shares an element
   with and which comes later in this file. At equal weight the later rule
   won and the gap under the headline was 3px. */
.sbk .sbk-byline__meta.sbk-ahead__meta { margin-top: 16px; }

.sbk-byline { display: flex; align-items: center; gap: 14px; margin-top: var(--sbk-s3); }
.sbk .sbk-byline__av {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sbk-navy);
	color: var(--sbk-gold-light);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
}
.sbk .sbk-byline__name { color: var(--sbk-navy); font-size: 15px; font-weight: 700; margin: 0; }
.sbk .sbk-byline__meta { display: flex; flex-wrap: wrap; color: var(--sbk-muted); font-size: 13.5px; margin: 3px 0 0; }
.sbk .sbk-byline__item { color: var(--sbk-muted); }
.sbk-byline__item + .sbk-byline__item::before { content: "\00b7"; margin: 0 8px; color: var(--sbk-muted); }

.sbk .sbk-updated { color: var(--sbk-muted); font-size: 14.5px; margin: 14px 0 0; }
.sbk .sbk-updated__date { color: var(--sbk-navy); font-weight: 600; }

.sbk-read {
	display: grid;
	grid-template-columns: 240px minmax(0, 720px);
	gap: var(--sbk-s6);
	align-items: start;
}
.sbk-read--single { grid-template-columns: minmax(0, 720px); }

.sbk-toc { position: sticky; top: 24px; }
.sbk .sbk-toc__head { color: var(--sbk-gold-text); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.sbk-toc__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--sbk-border-cool); }
.sbk-toc__item { margin: 0; }
.sbk .sbk-toc__link {
	display: block;
	padding: 7px 0 7px 14px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--sbk-body);
	font-size: 14px;
	line-height: 1.45;
}
.sbk .sbk-toc__link:hover { color: var(--sbk-navy); border-left-color: var(--sbk-gold); }

.sbk-tocm { display: none; margin-bottom: var(--sbk-s3); border: 1px solid var(--sbk-border-cool); border-radius: var(--sbk-radius-card); padding: 4px 16px; }
.sbk .sbk-tocm__summary { cursor: pointer; padding: 10px 0; color: var(--sbk-navy); font-size: 15px; font-weight: 700; min-height: var(--sbk-tap); }
/* The phone contents sit inside the article, so the article's own list
   rules reach them at (0,2,1). Three classes deep puts the contents back in
   charge of their own spacing. */
.sbk .sbk-tocm .sbk-toc__list { border-left: 0; margin: 0; padding: 0 0 8px; }
.sbk .sbk-tocm .sbk-toc__item { margin: 0; }
.sbk-tocm .sbk-toc__link { padding-left: 0; display: flex; align-items: center; min-height: var(--sbk-tap); padding-block: 4px; }

/* The guide's own words. Unclassed, because the owner writes them in the
   block editor, so every element is sized and coloured here explicitly. */
.sbk .sbk-prose { color: var(--sbk-body); min-width: 0; }
/* :not([class]) matters. Without it this rule, at (0,2,1), outranked every
   classed paragraph placed inside an article, the boilerplate label, the
   author box, the Privacy summary and contact headings, and turned small gold
   labels into large grey text. Only the owner's own unclassed paragraphs are
   sized here; components size themselves.
   .wp-block-paragraph matters as much: WordPress 7.1 puts that class on every
   paragraph written in the editor, so without it the owner's own words lost
   their article styling on the live site. Only a class of ours opts out. */
.sbk .sbk-prose p:is(:not([class]), .wp-block-paragraph),
.sbk .sbk-prose li { color: var(--sbk-body); font-size: 17px; line-height: 1.75; max-width: 34em; }
.sbk .sbk-prose p:is(:not([class]), .wp-block-paragraph) { margin: 0 0 18px; }
.sbk .sbk-prose strong { color: var(--sbk-navy); }
.sbk .sbk-prose a:not([class]) { color: var(--sbk-gold-text); font-weight: 600; border-bottom: 1.5px solid var(--sbk-gold-light); }
.sbk .sbk-prose h2 {
	color: var(--sbk-navy);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.3;
	margin: 44px 0 14px;
	scroll-margin-top: 24px;
}
.sbk .sbk-prose h3 { color: var(--sbk-navy); font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; margin: 30px 0 10px; }
.sbk .sbk-prose > :first-child,
.sbk .sbk-prose > .sbk-tocm + * { margin-top: 0; }
.sbk .sbk-prose ul,
.sbk .sbk-prose ol { margin: 0 0 20px; padding-left: 22px; }
/* The parent theme strips list markers on bare ul and ol, and a bare element
   rule applies directly, so prose lists state their own. */
.sbk .sbk-prose ul { list-style: disc outside; }
.sbk .sbk-prose ol { list-style: decimal outside; }
.sbk .sbk-prose li { margin: 6px 0; }
.sbk .sbk-prose li::marker { color: var(--sbk-gold); }

.sbk .sbk-prose .wp-block-table { margin: 8px 0 24px; overflow-x: auto; }
.sbk .sbk-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sbk .sbk-prose th {
	background: var(--sbk-navy);
	color: var(--sbk-white);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 12px 14px;
}
.sbk .sbk-prose td { color: var(--sbk-navy-text); padding: 12px 14px; border-bottom: 1px solid var(--sbk-border-cool); vertical-align: top; }

/* A two-column table marked sbk-table-stack becomes one block per row on a
   phone: the first cell reads as the row's label, the second under it. The
   header row is kept for screen readers and hidden from view. */
@media (max-width: 640px) {
	.sbk .sbk-prose .sbk-table-stack { border-top: 2px solid var(--sbk-navy); }
	.sbk .sbk-prose .sbk-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.sbk .sbk-prose .sbk-table-stack tbody,
	.sbk .sbk-prose .sbk-table-stack tr { display: block; }
	.sbk .sbk-prose .sbk-table-stack tr { padding: 12px 0; border-bottom: 1px solid var(--sbk-border-cool); }
	.sbk .sbk-prose .sbk-table-stack td { display: block; padding: 0; border-bottom: 0; }
	.sbk .sbk-prose .sbk-table-stack td:first-child { color: var(--sbk-navy); font-weight: 700; margin-bottom: 4px; }
}

.sbk .sbk-prose .is-style-sbk-callout,
.sbk .sbk-prose .is-style-sbk-callout-warn {
	margin: 0 0 28px;
	padding: 20px 22px 4px;
	border-radius: var(--sbk-radius-card);
	background: var(--sbk-cream);
	border-left: 4px solid var(--sbk-gold);
}
.sbk .sbk-prose .is-style-sbk-callout-warn { background: #FFF6E8; border-left-color: #C77A1A; }
.sbk .sbk-prose .is-style-sbk-callout p:first-child strong,
.sbk .sbk-prose .is-style-sbk-callout-warn p:first-child strong {
	color: var(--sbk-gold-text);
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.sbk .sbk-prose .is-style-sbk-callout-warn p:first-child strong { color: #8A4B06; }

.sbk .sbk-prose .is-style-sbk-steps { list-style: none; padding: 0; counter-reset: sbk-step; }
.sbk .sbk-prose .is-style-sbk-steps li { counter-increment: sbk-step; position: relative; padding-left: 46px; margin: 12px 0; }
.sbk-prose .is-style-sbk-steps li::before {
	content: counter(sbk-step);
	position: absolute;
	left: 0;
	top: 1px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sbk-navy);
	color: var(--sbk-gold-light);
	font-size: 14px;
	font-weight: 700;
}

.sbk .sbk-prose .is-style-sbk-pull { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--sbk-gold); }
/* Names the block paragraph class as well, so it outranks the article's
   paragraph rule by its own weight rather than by context. */
.sbk .sbk-prose .is-style-sbk-pull :is(p, .wp-block-paragraph) { color: var(--sbk-navy); font-size: 21px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; margin: 0; }

.sbk-midcta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sbk-s2);
	flex-wrap: wrap;
	margin: 28px 0;
	padding: 18px 22px;
	border-radius: var(--sbk-radius-card);
	background: var(--sbk-navy);
}
.sbk .sbk-midcta__text { color: var(--sbk-white); font-size: 15.5px; line-height: 1.5; flex: 1 1 280px; }
.sbk .sbk-midcta__link { display: inline-flex; align-items: center; min-height: var(--sbk-tap); color: var(--sbk-gold-light); font-size: 15px; font-weight: 700; white-space: nowrap; }
.sbk-midcta--quiet { background: var(--sbk-cream); border: 1px solid var(--sbk-border-warm); }
.sbk-midcta--quiet .sbk-midcta__text { color: var(--sbk-navy); }
.sbk-midcta--quiet .sbk-midcta__link { color: var(--sbk-gold-text); }


.sbk-summary {
	margin: 0 0 36px;
	padding: 22px 24px 8px;
	border-radius: var(--sbk-radius-card);
	background: var(--sbk-cream);
	border: 1px solid var(--sbk-border-warm);
}
.sbk .sbk-summary__head { color: var(--sbk-navy); font-size: 15px; font-weight: 700; margin: 0 0 8px; }
/* A summary of one point is a paragraph led by the heading (the Privacy
   Policy, Oct 24 2026). The bottom margin makes up the panel's 8px. */
.sbk .sbk-summary__text { color: var(--sbk-body); font-size: 16px; line-height: 1.7; margin: 0 0 14px; max-width: 34em; }
.sbk .sbk-summary__lead { color: var(--sbk-navy); font-weight: 700; }
.sbk .sbk-secnum { color: var(--sbk-gold-text); margin-right: 10px; }
.sbk-prose__section--awaiting { opacity: .85; }
.sbk .sbk-prose__section--awaiting p { font-style: italic; }

.sbk-doccontact { margin-top: 44px; padding: 22px 24px; border-radius: var(--sbk-radius-card); background: var(--sbk-blue-grey); }
.sbk .sbk-doccontact__head { color: var(--sbk-navy); font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.sbk .sbk-doccontact__body { color: var(--sbk-body); font-size: 15.5px; line-height: 1.7; margin: 0; }

/* ---------- An announcement --------------------------------------------- */

.sbk-readone { max-width: 720px; }
.sbk-prose__lead-img { margin: 0 0 28px; border-radius: var(--sbk-radius-card); overflow: hidden; }
.sbk-boiler { margin-top: 40px; padding: 22px 24px; border-radius: var(--sbk-radius-card); background: var(--sbk-blue-grey); }
.sbk .sbk-boiler__head { color: var(--sbk-gold-text); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.sbk .sbk-boiler__body { color: var(--sbk-body); font-size: 15.5px; line-height: 1.7; margin: 0; max-width: 34em; }
.sbk .sbk-backlink { margin: 28px 0 0; font-size: 15px; }
.sbk .sbk-backlink a { display: inline-flex; align-items: center; gap: 8px; color: var(--sbk-gold-text); font-weight: 700; min-height: var(--sbk-tap); }

/* ---------- The 404 ------------------------------------------------------ */

.sbk-nf { background: var(--sbk-cream); padding-block: 80px 96px; }
.sbk-nf__in { max-width: 900px; }
.sbk .sbk-nf__code { color: var(--sbk-gold-text); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.sbk-nf__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: var(--sbk-s4);
}
.sbk .sbk-nfcard {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 16px;
	align-items: center;
	padding: 20px 22px;
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-cool);
	border-radius: var(--sbk-radius-card);
	color: var(--sbk-navy);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sbk .sbk-nfcard:hover,
.sbk .sbk-nfcard:focus-visible { border-color: var(--sbk-gold-light); box-shadow: var(--sbk-shadow-card); }
.sbk .sbk-nfcard__title { color: var(--sbk-navy); font-size: 17px; font-weight: 700; }
.sbk .sbk-nfcard__body { grid-column: 1; color: var(--sbk-body); font-size: 14.5px; line-height: 1.5; }
.sbk-nfcard__go { grid-column: 2; grid-row: 1 / span 2; color: var(--sbk-gold); }
.sbk .sbk-nf__more { color: var(--sbk-body); font-size: 15.5px; line-height: 1.7; margin: var(--sbk-s4) 0 0; }
.sbk .sbk-nf__more a { color: var(--sbk-gold-text); font-weight: 700; border-bottom: 1.5px solid var(--sbk-gold-light); }

/* ---------- The Guides page ---------------------------------------------- */

.sbk-fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sbk-s4); }
.sbk .sbk-fchip {
	display: inline-flex;
	align-items: center;
	min-height: var(--sbk-tap);
	padding: 8px 18px;
	border: 1px solid var(--sbk-border-cool);
	border-radius: 999px;
	background: var(--sbk-white);
	color: var(--sbk-navy);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.sbk .sbk-fchip:hover { border-color: var(--sbk-gold-light); }
.sbk .sbk-fchip.is-on { background: var(--sbk-navy); border-color: var(--sbk-navy); color: var(--sbk-white); }

/* Before the first guide: what is being written, and a way to ask. */
.sbk-gempty {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--sbk-s5);
	align-items: start;
}
.sbk-gempty--single { grid-template-columns: minmax(0, 680px); }
.sbk-gempty__main { padding-top: 4px; }
.sbk .sbk-gempty__title { margin: 0; }
.sbk .sbk-gempty__body { color: var(--sbk-body); font-size: 17px; line-height: 1.7; margin: 16px 0 0; max-width: 60ch; }
.sbk .sbk-gempty__ask { color: var(--sbk-navy); font-size: 15.5px; font-weight: 600; line-height: 1.6; margin: 18px 0 0; }
.sbk .sbk-gempty__btn { margin-top: 22px; }
.sbk-gempty__side {
	padding: 24px 24px 12px;
	border-radius: var(--sbk-radius-lg);
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-cool);
}
.sbk .sbk-gempty__k { color: var(--sbk-gold-text); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; }
.sbk-queue { list-style: none; margin: 0; padding: 0; }
.sbk-queue__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 14px 0;
	border-top: 1px solid var(--sbk-border-cool);
}
.sbk-queue__item:first-child { border-top: 0; }
.sbk .sbk-queue__title { color: var(--sbk-navy); font-size: 16px; font-weight: 700; line-height: 1.4; }

/* The featured guide: the words on the left, a navy panel on the right. */
.sbk .sbk-feat {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	background: var(--sbk-white);
	border: 1px solid var(--sbk-border-cool);
	border-radius: var(--sbk-radius-lg);
	overflow: hidden;
	color: var(--sbk-navy);
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}
.sbk .sbk-feat:hover,
.sbk .sbk-feat:focus-visible { box-shadow: var(--sbk-shadow-card-2); transform: translateY(-2px); }
.sbk-feat__main { display: flex; flex-direction: column; gap: 14px; padding: 34px 36px; }
.sbk-feat__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sbk .sbk-feat__title { color: var(--sbk-navy); font-size: 28px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; margin: 0; }
.sbk .sbk-feat__sum { display: block; color: var(--sbk-body); font-size: 16.5px; line-height: 1.7; max-width: 62ch; }
.sbk .sbk-feat__meta { display: flex; flex-wrap: wrap; color: var(--sbk-muted); font-size: 13.5px; }
.sbk-feat__side {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 34px 30px;
	background: var(--sbk-navy);
}
.sbk-feat__label { display: flex; flex-direction: column; gap: 10px; }
.sbk .sbk-feat__k { color: var(--sbk-gold-light); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sbk .sbk-feat__line { color: var(--sbk-white); font-size: 16px; font-weight: 600; line-height: 1.5; }
.sbk .sbk-feat__go { display: inline-flex; align-items: center; gap: 8px; color: var(--sbk-gold-light); font-size: 15px; font-weight: 700; }
/* The topic's chip icon, large, in gold outline, centred in the panel's
   empty middle (owner, Oct 25 2026). Only where the panel is a tall column. */
.sbk-feat__icon { display: flex; justify-content: center; align-items: center; flex: 1; color: var(--sbk-gold-light); }
.sbk-feat__icon svg { display: block; }

/* Three across, the width of the featured guide above them. */
.sbk-agrid--guides { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sbk-s3); }
.sbk-agrid--flush { margin-top: 0; }

.sbk .sbk-nocat {
	margin: 0;
	padding: 22px 24px;
	border-radius: var(--sbk-radius-card);
	background: var(--sbk-white);
	border: 1px dashed var(--sbk-border-cool);
	color: var(--sbk-body);
	font-size: 15.5px;
	line-height: 1.6;
}
.sbk .sbk-nocat__text,
.sbk .sbk-nocat__after { color: var(--sbk-body); }
.sbk .sbk-nocat__link { color: var(--sbk-gold-text); font-weight: 700; border-bottom: 1.5px solid var(--sbk-gold-light); }

/* ---------- The FAQs page ------------------------------------------------ */

.sbk-faqsearch { position: relative; max-width: 560px; margin-top: var(--sbk-s4); }
.sbk .sbk-faqsearch__icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--sbk-muted);
	pointer-events: none;
}
.sbk .sbk-faqsearch__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 16px 12px 46px;
	border: 1px solid var(--sbk-border-cool);
	border-radius: var(--sbk-radius-btn);
	background: var(--sbk-white);
	color: var(--sbk-navy);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
}
.sbk .sbk-faqsearch__input::placeholder { color: var(--sbk-muted); opacity: 1; }
.sbk .sbk-faqsearch__input:focus { outline: 2px solid var(--sbk-gold); outline-offset: 1px; border-color: var(--sbk-gold); }
/* Room for the line under the box from the start, so typing moves nothing. */
.sbk .sbk-faqsearch__count { min-height: 22px; color: var(--sbk-muted); font-size: 14px; margin: 10px 0 0; }

.sbk-faqpage__in { max-width: 760px; }
.sbk-faqgroup + .sbk-faqgroup { margin-top: var(--sbk-s5); }
.sbk .sbk-faqgroup__title {
	color: var(--sbk-gold-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--sbk-navy);
	scroll-margin-top: 24px;
}
.sbk-faqpage .sbk-faq__list { max-width: none; margin: 0; }
.sbk-faqpage .sbk-faq__a p { max-width: 34em; }
.sbk .sbk-faqsearch__none { color: var(--sbk-body); font-size: 16px; margin: 0; }
.sbk .sbk-faqask {
	margin: var(--sbk-s5) 0 0;
	padding: 22px 24px;
	border-radius: var(--sbk-radius-card);
	background: var(--sbk-cream);
	border: 1px solid var(--sbk-border-warm);
	color: var(--sbk-navy);
	font-size: 16px;
	line-height: 1.6;
}
.sbk .sbk-faqask__text { color: var(--sbk-navy); font-weight: 600; margin-right: 6px; }
.sbk .sbk-faqask__link { color: var(--sbk-gold-text); font-weight: 700; border-bottom: 1.5px solid var(--sbk-gold-light); }

/* ---------- Client stories ---------------------------------------------- */

.sbk-topic--industry { background: #EAEDF6; color: #25305C; }
.sbk-storytags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sbk .sbk-stag {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border: 1px solid var(--sbk-border-cool);
	border-radius: 999px;
	color: var(--sbk-navy);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
}
.sbk .sbk-acard--story { border-top-color: var(--sbk-gold); }
.sbk .sbk-acard__go { display: inline-flex; align-items: center; gap: 8px; color: var(--sbk-gold-text); font-size: 14.5px; font-weight: 700; }
.sbk .sbk-editnote { color: var(--sbk-muted); font-size: 15px; font-style: italic; margin: 0; }

.sbk .sbk-story h2 .sbk-draft { vertical-align: 5px; }
.sbk-storyquote { margin: 36px 0 0; padding: 26px 28px; border-radius: var(--sbk-radius-card); background: var(--sbk-cream); border-left: 4px solid var(--sbk-gold); }
.sbk .sbk-storyquote__text { margin: 0; padding: 0; border: 0; }
.sbk .sbk-storyquote__text p { color: var(--sbk-navy); font-size: 20px; font-weight: 600; line-height: 1.55; letter-spacing: -.01em; margin: 0 0 10px; }
.sbk-storyquote__who { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.sbk .sbk-storyquote__name { color: var(--sbk-navy); font-size: 15px; font-weight: 700; }
.sbk .sbk-storyquote__role { color: var(--sbk-muted); font-size: 15px; }

/* ---------- Narrow screens ---------------------------------------------- */

@media (max-width: 1100px) {
	.sbk-hubcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
	.sbk-hubcards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbk-gempty { grid-template-columns: minmax(0, 1fr); }
	.sbk-gempty__side { max-width: 560px; }
	.sbk .sbk-feat { grid-template-columns: minmax(0, 1fr); }
	.sbk-agrid--guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbk-feat__side { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 22px 36px; }
	.sbk-feat__icon { display: none; }
	.sbk-press { grid-template-columns: minmax(0, 1fr); gap: var(--sbk-s5); }
	.sbk-kitbox { position: static; max-width: 560px; }
	.sbk-read { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.sbk-toc { display: none; }
	.sbk-tocm { display: block; }
}

@media (max-width: 767px) {
	/* The same as the full page hero on a phone. It kept its desktop padding. */
	.sbk-shero--short { padding-block: 32px 40px; }
	.sbk .sbk-hubcard__title { font-size: 20px; }
	.sbk-hubcards,
	.sbk-hubcards--2,
	.sbk-hubcards--3,
	.sbk-hubcards--4,
	.sbk-agrid--guides,
	.sbk-ngrid,
	.sbk-nf__grid { grid-template-columns: minmax(0, 1fr); }
	.sbk .sbk-prose p:is(:not([class]), .wp-block-paragraph),
	.sbk .sbk-prose li { font-size: 16px; }
	.sbk .sbk-prose h2 { font-size: 20px; margin-top: 36px; }
	.sbk-nf { padding-block: 56px 64px; }
	.sbk-feat__main { padding: 26px 22px; }
	.sbk-feat__side { padding: 20px 22px; }
	.sbk .sbk-feat__title { font-size: 22px; }
}

/* =========================================================================
   Resources redesign, News and the newsletter (Oct 8 2026)
   From "Resources Page v5" (blue tint), "Resources News v2" and "News Topic
   Covers", ported onto the site's tokens. Four design names were renamed
   because the site already uses them for something else: the dropdown
   panel (.sbk-ddpanel, in sbk-core.css), the news strip (.sbk-nstrip), its
   cards (.sbk-nscard) and the hub cards (.sbk-doors).
   ========================================================================= */

/* ---------- The blue tint, from under the header to the footer ---------- */

.sbk.sbk-r5--blue { background: #EEF3FA; }

/* ---------- Topic covers ------------------------------------------------- */

.sbk-cov {
	position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
	display: flex; align-items: center; justify-content: center; isolation: isolate;
}
.sbk-cov::before {
	content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
	right: -22%; bottom: -46%; background: currentColor; opacity: .10; z-index: -1;
}
.sbk-cov::after {
	content: ""; position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%;
	left: -9%; top: -22%; border: 2px solid currentColor; opacity: .16; z-index: -1;
}
.sbk-cov-ic {
	width: 30%; max-width: 132px; aspect-ratio: 1; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .14); border: 1.5px solid currentColor;
}
.sbk-cov-ic svg { width: 48%; height: 48%; }
/* The icon takes its cover's colour: white on the dark covers. The icon is a
   span, and the parent theme's bare span colour had drawn it navy on every
   cover (owner, Oct 24 2026). Before the tech cover's own gold, on purpose. */
.sbk .sbk-cov-ic { color: inherit; }
.sbk .sbk-cov-l {
	position: absolute; left: 14px; bottom: 12px;
	font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
	padding: 5px 9px; border-radius: 5px; background: var(--sbk-white); color: var(--sbk-navy);
}
.sbk .sbk-cov--light .sbk-cov-l { background: var(--sbk-navy); color: var(--sbk-white); }
.sbk-cov--light .sbk-cov-ic { background: rgba(255, 255, 255, .55); }
/* The source, named clearly on every news cover (owner, Oct 23 2026): in
   the site's navy and gold, never the publisher's own logo or photo. */
.sbk .sbk-cov-src {
	position: absolute; left: 14px; top: 12px; max-width: calc(100% - 28px);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	padding: 6px 10px 6px 11px; border-radius: 6px;
	border-left: 3px solid var(--sbk-gold);
	background: var(--sbk-white); color: var(--sbk-navy);
	font-size: 13px; font-weight: 700; letter-spacing: .005em; line-height: 1.25;
	box-shadow: 0 2px 8px rgba(29, 37, 71, .16);
}

.sbk-cov--tax { color: var(--sbk-navy); background-color: #E3B858; background-image: repeating-linear-gradient(135deg, rgba(29, 37, 71, .08) 0 2px, transparent 2px 16px), linear-gradient(135deg, #EDC979, #C9973F); }
.sbk-cov--payroll { color: #FFFFFF; background-color: #2E6B4A; background-image: radial-gradient(rgba(255, 255, 255, .16) 1.4px, transparent 1.6px), linear-gradient(160deg, #357A55, #245A3D); background-size: 18px 18px, auto; }
.sbk-cov--deadlines { color: var(--sbk-gold-light); background-color: var(--sbk-navy); background-image: linear-gradient(rgba(233, 190, 98, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 190, 98, .13) 1px, transparent 1px), linear-gradient(160deg, #26305C, #141B38); background-size: 30px 30px, 30px 30px, auto; }
.sbk-cov--smallbiz { color: #FFFFFF; background-color: #9C4A2F; background-image: repeating-radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .10) 0 2px, transparent 2px 22px), linear-gradient(150deg, #B05A3B, #86402A); }
.sbk-cov--economy { color: #1F4E96; background-color: #DCE7F5; background-image: repeating-linear-gradient(90deg, rgba(31, 78, 150, .10) 0 1px, transparent 1px 26px), linear-gradient(20deg, rgba(31, 78, 150, .16) 0 30%, transparent 30%), linear-gradient(160deg, #E6EEF8, #C9D9EF); }
.sbk-cov--quebec { color: #FFFFFF; background-color: #24569E; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 20px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 20px), linear-gradient(160deg, #2C64B4, #1D477F); }
.sbk-cov--tech { color: #FFFFFF; background-color: #242D53; background-image: radial-gradient(rgba(233, 190, 98, .32) 1.4px, transparent 1.7px), radial-gradient(circle at 20% 20%, rgba(36, 86, 158, .6), transparent 55%), linear-gradient(160deg, #2A3560, #1A2144); background-size: 22px 22px, auto, auto; }
.sbk-cov--tech .sbk-cov-ic { border-color: var(--sbk-gold-light); color: var(--sbk-gold-light); }
.sbk-cov--general { color: #6E4F15; background-color: #F5E6C4; background-image: repeating-radial-gradient(circle at 0 0, rgba(110, 79, 21, .10) 0 2px, transparent 2px 24px), linear-gradient(160deg, #F9EDD3, #EFD9A8); }
.sbk-cov--photo { background: linear-gradient(135deg, #E8EFF9, #C9D9EF); color: var(--sbk-navy); }
.sbk-cov--photo::before,
.sbk-cov--photo::after { content: none; }
.sbk .sbk-cov__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Source tags ---------------------------------------------------- */

.sbk .sbk-tag {
	display: inline-flex; align-items: center; white-space: nowrap;
	font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
	padding: 6px 10px; border-radius: 5px;
}
.sbk .sbk-tag--cra { background: #DCE7F5; color: #1F4E96; }
.sbk .sbk-tag--rq { background: #DCEADF; color: #23603A; }
.sbk .sbk-tag--biz { background: #F4DFD5; color: #8A3E24; }
.sbk .sbk-tag--take { background: var(--sbk-navy); color: var(--sbk-gold-light); }

.sbk .sbk-ncard-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--sbk-body); }
.sbk .sbk-ncard-date { font-size: 13.5px; color: var(--sbk-body); }

/* ---------- The Resources page ------------------------------------------- */

.sbk-r5hero { padding: 72px 0 0; }
.sbk-r5hero-in { max-width: 760px; margin: 0 auto; text-align: center; }
.sbk .sbk-r5hero .sbk-h1 { margin: 0 auto; max-width: 18ch; }
.sbk .sbk-r5hero .sbk-lede { margin: 16px auto 0; max-width: 52ch; }

.sbk-r4sec { padding: 96px 0 0; }
.sbk-r4sec--doors { padding-top: 64px; }
.sbk-r4sec--last { padding-bottom: 104px; }

.sbk-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sbk-doors--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sbk-doors--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbk-doors--1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
.sbk-door {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--sbk-white); border: 1px solid rgba(29, 37, 71, .08); border-radius: 16px;
	box-shadow: 0 18px 40px rgba(29, 37, 71, .12); transition: transform .2s, box-shadow .2s;
}
.sbk-door:hover { transform: translateY(-4px); box-shadow: 0 26px 52px rgba(29, 37, 71, .18); }
/* No picture since Oct 20 2026: the topic's icon in a small gold-ringed tile. */
.sbk-door-ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 12px;
	background: var(--sbk-cream); border: 1px solid var(--sbk-border-gold-soft); color: var(--sbk-gold-text);
	margin-bottom: 6px;
}
.sbk-door-b { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; flex: 1; }
.sbk .sbk-door__title { font-size: clamp(22px, 2vw, 26px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--sbk-navy); margin: 0; }
.sbk .sbk-door__body { font-size: 16px; line-height: 1.65; color: var(--sbk-body); margin: 0; flex: 1; }
.sbk .sbk-door-go { display: inline-flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 700; color: var(--sbk-gold-text); padding-top: 14px; }

.sbk-sech { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sbk .sbk-sech .sbk-h2 { margin: 0; }
.sbk .sbk-sech__all {
	display: inline-flex; align-items: center; gap: 6px; min-height: var(--sbk-tap);
	font-size: 15.5px; font-weight: 700; color: var(--sbk-gold-text);
}

.sbk-nstrip { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 32px; }
.sbk-nscard { display: flex; flex-direction: column; gap: 12px; }
.sbk .sbk-nscard__title { font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -.01em; color: var(--sbk-navy); margin: 0; text-wrap: pretty; }
.sbk .sbk-nscard--lg .sbk-nscard__title { font-size: clamp(20px, 1.8vw, 23px); }
.sbk .sbk-nscard:hover .sbk-nscard__title { color: var(--sbk-gold-text); }

.sbk-agrid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.sbk-acard3 {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--sbk-white); border: 1px solid rgba(29, 37, 71, .08); border-radius: 14px;
	box-shadow: 0 10px 28px rgba(29, 37, 71, .07);
}
.sbk-acard3:hover { box-shadow: 0 18px 40px rgba(29, 37, 71, .13); }
.sbk-acard3 .sbk-cov { border-radius: 0; }
.sbk-acard3-b { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
.sbk-acard-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sbk .sbk-acard3__title { font-size: 19px; line-height: 1.35; font-weight: 700; letter-spacing: -.012em; color: var(--sbk-navy); margin: 0; }
.sbk .sbk-acard3__meta { font-size: 13.5px; color: var(--sbk-body); margin: 0; }

.sbk-r3cta {
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	border-radius: 18px; overflow: hidden; background: var(--sbk-gold-grad);
	box-shadow: 0 20px 48px rgba(29, 37, 71, .14);
}
.sbk-r3cta--nophoto { grid-template-columns: minmax(0, 1fr); }
.sbk-photo { position: relative; overflow: hidden; min-height: 280px; background: linear-gradient(135deg, #E8EFF9, #C9D9EF); }
.sbk .sbk-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sbk-r3cta-b { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.sbk .sbk-r3cta__title { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--sbk-navy); margin: 0; text-wrap: balance; }
.sbk .sbk-r3cta__body { font-size: 16.5px; line-height: 1.6; color: var(--sbk-on-gold-body); margin: 12px 0 0; max-width: 46ch; }
.sbk-r3cta .sbk-btn { margin-top: 26px; }

/* ---------- The newsletter card ------------------------------------------- */

.sbk-tex-navy {
	background-color: var(--sbk-navy);
	background-image: radial-gradient(circle at 88% 12%, rgba(233, 190, 98, .20), transparent 42%), radial-gradient(circle at 6% 100%, rgba(36, 86, 158, .45), transparent 46%), radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px);
	background-size: auto, auto, 22px 22px;
}
.sbk-nl { max-width: 600px; margin: 40px auto 0; padding: 28px 30px 24px; border-radius: 16px; text-align: center; box-shadow: 0 18px 40px rgba(29, 37, 71, .18); }
.sbk .sbk-nl h2 { font-size: 19px; font-weight: 700; letter-spacing: -.012em; margin: 0; color: var(--sbk-white); line-height: 1.3; }
.sbk .sbk-nl > p:not([class]) { font-size: 15px; line-height: 1.6; color: #D3D8E8; margin: 8px auto 0; max-width: 46ch; }
.sbk-nl-form { display: flex; gap: 10px; margin-top: 22px; }
.sbk .sbk-nl-in {
	flex: 1; min-width: 0; min-height: 50px; padding: 0 16px;
	border: 1.5px solid transparent; border-radius: 6px;
	font-family: inherit; font-size: 16px; color: var(--sbk-navy); background: var(--sbk-white);
}
.sbk .sbk-nl-in::placeholder { color: #6B7290; }
.sbk .sbk-nl-in:focus { outline: none; border-color: var(--sbk-gold-light); box-shadow: 0 0 0 3px rgba(233, 190, 98, .35); }
.sbk .sbk-nl-in.is-err { border-color: #F0A08F; box-shadow: 0 0 0 3px rgba(240, 160, 143, .25); }
.sbk-nl-form .sbk-btn { flex-shrink: 0; border: 0; cursor: pointer; min-height: 50px; padding: 0 26px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.sbk .sbk-nl-small { font-size: 13px; line-height: 1.55; color: #C9CFE2; margin: 14px 0 0; }
.sbk .sbk-nl-small + .sbk-nl-small { margin-top: 2px; }
.sbk .sbk-nl-msg { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 14px; font-weight: 500; color: #FFD2C7; }
.sbk-nl-msg svg { width: 17px; height: 17px; flex-shrink: 0; }
.sbk .sbk-nl-msg span { color: inherit; }
.sbk .sbk-nl-ok {
	display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; padding: 16px 18px;
	border-radius: 10px; background: rgba(220, 234, 223, .14); border: 1px solid rgba(220, 234, 223, .35);
	color: var(--sbk-white); font-size: 16px; font-weight: 600; text-align: left;
}
.sbk .sbk-nl-ok span { color: inherit; }
.sbk-nl-ok svg { width: 24px; height: 24px; flex-shrink: 0; color: #9FD3B0; }

/* ---------- The News page ------------------------------------------------- */

/* The Pricing hero's cream, glows and faint dots, with the thin bottom line of
   the Articles and guides hero (owner, Oct 25 2026; was a blue grid). */
.sbk-n2hero {
	background:
		radial-gradient(ellipse 60% 70% at 50% 50%, var(--sbk-cream) 45%, transparent 100%),
		radial-gradient(ellipse 45% 90% at 0% 0%, color-mix(in srgb, var(--sbk-gold) 7%, transparent), transparent 70%),
		radial-gradient(ellipse 45% 90% at 100% 100%, color-mix(in srgb, var(--sbk-gold) 6%, transparent), transparent 70%),
		radial-gradient(circle, color-mix(in srgb, var(--sbk-navy) 9%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
		var(--sbk-cream);
	border-bottom: 1px solid var(--sbk-border-warm);
	padding: 56px 0 60px; text-align: center;
}
.sbk .sbk-n2hero .sbk-h1 { margin: 0 auto; max-width: 20ch; }
.sbk .sbk-n2hero .sbk-lede { margin: 14px auto 0; max-width: 52ch; color: #33405F; }
/* With the optional photograph: the About hero's tint and white words
   (service.css), at this hero's own size. These rules load after the shared
   ones and would otherwise win. */
.sbk-n2hero.sbk-shero--photo { background: var(--sbk-navy); border-bottom: 0; padding: 56px 0 60px; }
.sbk .sbk-n2hero.sbk-shero--photo .sbk-h1 { color: var(--sbk-white); }
.sbk .sbk-n2hero.sbk-shero--photo .sbk-lede { color: var(--sbk-on-navy); }
/* With a photograph, the About hero's height at every size, the words in
   the middle, and the photo's middle-to-lower part showing (owner, Oct 25
   2026: it was cropped to the top). No photograph: nothing here applies. */
.sbk-n2hero.sbk-shero--photo { display: flex; flex-direction: column; justify-content: center; min-height: 541px; }
.sbk .sbk-n2hero .sbk-shero__media img { object-position: 50% 65%; }
@media (max-width: 1023px) { .sbk-n2hero.sbk-shero--photo { min-height: 458px; } }
/* Phones: About's height moves with how its words wrap, so these follow it
   step by step (measured on the live About page, Oct 25 2026). */
@media (max-width: 767px) { .sbk-n2hero.sbk-shero--photo { min-height: 479px; } }
@media (max-width: 540px) { .sbk-n2hero.sbk-shero--photo { min-height: 498px; } }
@media (max-width: 430px) { .sbk-n2hero.sbk-shero--photo { min-height: 525px; } }
@media (max-width: 360px) { .sbk-n2hero.sbk-shero--photo { min-height: 551px; } }

.sbk-n2band { background: var(--sbk-cream); padding: 56px 0 96px; }
.sbk-n2grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.sbk-nchips { display: flex; gap: 10px; flex-wrap: wrap; }
.sbk-n2feed { display: flex; flex-direction: column; gap: 40px; margin-top: 28px; }

.sbk-feat2 {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--sbk-white); border: 1px solid var(--sbk-border-warm); border-radius: 16px;
	box-shadow: 0 16px 40px rgba(29, 37, 71, .10);
}
.sbk-feat2 .sbk-cov { border-radius: 0; aspect-ratio: 21 / 9; }
.sbk-feat2-b { padding: 28px 32px 30px; display: flex; flex-direction: column; gap: 10px; }
.sbk .sbk-feat2__title { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; color: var(--sbk-navy); margin: 4px 0 0; text-wrap: balance; }
.sbk .sbk-feat2:hover .sbk-feat2__title { color: var(--sbk-gold-text); }

.sbk-n2item { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 28px; align-items: center; }
.sbk-n2item-b { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sbk .sbk-n2item__title { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.38; font-weight: 700; letter-spacing: -.012em; color: var(--sbk-navy); margin: 0; text-wrap: pretty; }
.sbk .sbk-n2item:hover .sbk-n2item__title { color: var(--sbk-gold-text); }
.sbk .sbk-n2sum { font-size: 15.5px; line-height: 1.6; color: var(--sbk-body); margin: 0; }
.sbk .sbk-n2go { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--sbk-gold-text); margin-top: 2px; }
.sbk .sbk-n2date { font-size: 13.5px; color: var(--sbk-body); }
.sbk .sbk-n2credit { font-size: 13px; line-height: 1.55; color: var(--sbk-muted); margin: 0; }

.sbk-n2empty {
	display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: center;
	background: var(--sbk-white); border: 1px solid var(--sbk-border-warm); border-radius: 16px; padding: 20px;
}
.sbk .sbk-n2empty__title { font-size: 20px; font-weight: 700; letter-spacing: -.012em; margin: 0; color: var(--sbk-navy); }
.sbk .sbk-n2empty__body { font-size: 15.5px; line-height: 1.6; color: var(--sbk-body); margin: 8px 0 0; }
.sbk-n2empty .sbk-btn { margin-top: 18px; cursor: pointer; }

.sbk-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
.sbk .sbk-side-nav__title { font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--sbk-navy); margin: 0 0 10px; }
.sbk .sbk-side-nav__link {
	display: flex; align-items: center; min-height: var(--sbk-tap); padding: 0 0 0 16px;
	border-left: 3px solid var(--sbk-border-warm); font-size: 15.5px; font-weight: 500; color: var(--sbk-navy-2);
}
.sbk .sbk-side-nav__link:hover { color: var(--sbk-gold-text); }
.sbk .sbk-side-nav__link.is-on { border-left-color: var(--sbk-gold); color: var(--sbk-gold-text); font-weight: 700; }
.sbk-side-card { background: var(--sbk-white); border: 1px solid var(--sbk-border-warm); border-radius: 14px; padding: 22px 22px 20px; }
.sbk .sbk-side-card__title,
.sbk .sbk-side-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--sbk-navy); margin: 0; }
.sbk-side-card--navy { background: var(--sbk-navy); border-color: var(--sbk-navy); text-align: left; }
.sbk .sbk-side-card--navy h3 { color: var(--sbk-white); }
.sbk .sbk-side-card--navy > p:not([class]) { color: #D3D8E8; font-size: 14px; line-height: 1.55; margin: 6px 0 0; }
.sbk-side-card .sbk-nl-form { flex-direction: column; margin-top: 14px; }
.sbk .sbk-side-card .sbk-nl-small { font-size: 12.5px; margin-top: 10px; }
.sbk .sbk-side-card .sbk-nl-msg { font-size: 13.5px; justify-content: flex-start; }
.sbk .sbk-side-card .sbk-nl-ok { font-size: 15px; margin-top: 14px; justify-content: flex-start; }
.sbk-side-media { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.sbk .sbk-side-media__link { display: flex; align-items: center; gap: 10px; min-height: var(--sbk-tap); font-size: 15px; font-weight: 600; color: var(--sbk-navy-2); }
.sbk .sbk-side-media__email { color: inherit; min-width: 0; }
.sbk .sbk-side-media__link:hover { color: var(--sbk-gold-text); }
.sbk-side-media svg { color: var(--sbk-gold-text); flex-shrink: 0; }

/* ---------- Our take, the single post -------------------------------------- */

.sbk-take__photo { margin: 0 0 32px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; }
.sbk .sbk-take__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Narrower screens ------------------------------------------------ */

@media (max-width: 1200px) {
	.sbk-nstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbk-nstrip > :first-child { grid-column: 1 / -1; }
	.sbk-doors--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbk-n2grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; }
}
@media (max-width: 1023px) {
	.sbk-r5hero { padding-top: 52px; }
	.sbk-r4sec { padding-top: 72px; }
	.sbk-r4sec--doors { padding-top: 48px; }
	.sbk-r4sec--last { padding-bottom: 80px; }
	.sbk-doors, .sbk-doors--2, .sbk-doors--4 { grid-template-columns: minmax(0, 1fr); }
	.sbk-agrid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbk-r3cta { grid-template-columns: minmax(0, 1fr); }
	.sbk-photo { min-height: 220px; }
	.sbk-n2grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.sbk-side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sbk-side-nav { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.sbk-r5hero { padding-top: 40px; }
	.sbk-r4sec { padding-top: 56px; }
	.sbk-r4sec--doors { padding-top: 40px; }
	.sbk-r4sec--last { padding-bottom: 64px; }
	.sbk-nl { margin-top: 28px; padding: 24px 20px 20px; }
	.sbk-nl-form { flex-direction: column; }
	.sbk-door-b { padding: 22px; }
	.sbk-nstrip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sbk-agrid3 { grid-template-columns: minmax(0, 1fr); }
	.sbk-r3cta-b { padding: 30px 24px 32px; }
	.sbk-r3cta .sbk-btn { width: 100%; text-align: center; }
	.sbk-n2hero { padding: 40px 0 44px; background-size: auto, auto, auto, 18px 18px, auto; }
	.sbk-n2hero.sbk-shero--photo { padding: 40px 0 44px; }
	.sbk-n2band { padding: 32px 0 64px; }
	.sbk-nchips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--sbk-gutter)); padding: 0 var(--sbk-gutter) 4px; scrollbar-width: none; }
	.sbk-nchips .sbk-fchip { flex-shrink: 0; }
	.sbk-n2item { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.sbk-feat2-b { padding: 22px 20px 24px; }
	.sbk-feat2 .sbk-cov { aspect-ratio: 16 / 10; }
	.sbk-n2empty { grid-template-columns: minmax(0, 1fr); }
	.sbk-side { grid-template-columns: minmax(0, 1fr); }
}

/* The Articles and guides page's newsletter band, above the gold band
   (Oct 14 2026): the same card as the Resources hero, in a band of its own. */
.sbk-nlband .sbk-nl { margin-top: 0; }

/* The publisher beside a news item's date (Oct 14 2026): "October 8, 2026 ·
   Financial Post". Its own colour, as the parent theme's span rule applies
   directly. */
.sbk .sbk-n2pub { color: var(--sbk-body); font-weight: 600; }
.sbk .sbk-n2pub::before { content: " \00b7  "; font-weight: 400; color: var(--sbk-muted); }

/* Phones, Oct 14 2026: a News item was about 400px, most of it its topic
   cover. The cover keeps its icon and label, at a wider, shorter shape. */
@media (max-width: 767px) {
	.sbk-n2item .sbk-cov { aspect-ratio: 5 / 2; }
	.sbk-n2item { gap: 12px; }
	.sbk-n2item-b { gap: 6px; }
}

/* The Resources page's newsletter box, lighter (Oct 23 2026, round 4
   design): a pale, see-through card on the page's own blue, no shadow,
   navy words. Same wording and form as everywhere else. */
.sbk-nl.sbk-nl--soft {
	margin-top: 36px; padding: 26px 32px 22px;
	background: rgba(255, 255, 255, .5);
	border: 1px solid rgba(29, 37, 71, .09);
	border-radius: 14px; box-shadow: none;
}
.sbk .sbk-nl--soft h2 { color: var(--sbk-navy); }
.sbk .sbk-nl--soft > p:not([class]) { color: var(--sbk-body); }
.sbk .sbk-nl--soft .sbk-nl-in { border-color: rgba(29, 37, 71, .16); }
.sbk .sbk-nl--soft .sbk-nl-in.is-err { border-color: #B3261E; }
.sbk-nl--soft .sbk-nl-form .sbk-btn { box-shadow: 0 4px 12px rgba(185, 134, 47, .28); }
.sbk .sbk-nl--soft .sbk-nl-small { color: var(--sbk-muted); }
.sbk .sbk-nl--soft .sbk-nl-msg { color: #B3261E; }
.sbk .sbk-nl--soft .sbk-nl-ok { color: var(--sbk-navy); background: #EAF4EC; border-color: #BFDCC7; }
.sbk-nl--soft .sbk-nl-ok svg { color: #2E7D4F; }
@media (max-width: 640px) {
	.sbk-nl.sbk-nl--soft { padding: 22px 18px 18px; margin-top: 28px; }
}