/* =============================================================================
 * NorBAN Knowledge Base — kb.css
 * Enqueued by norban-kb.php on norban_kb singulars and the four /knowledge/ pages.
 * Tokens: plan v2 §7.1. Bands: §7.2. Landing pages: §7.3.
 *
 * Rules that are load-bearing on this site:
 *  - Elementor `astglobalcolorN` globals are undefined in the kit and render
 *    transparent. Literal hex only, always.
 *  - Links on the navy band need an explicit light colour (#8EC5FF).
 *  - Nothing here sets a font family: Astra's Montserrat stack stays in charge.
 *    This file owns measure, colour, spacing and the card system only.
 * ========================================================================== */

:root {
	--kb-navy: #00205B;
	--kb-white: #FFFFFF;
	--kb-grey: #F2F5F7;
	--kb-pale-blue: #C4D8F2;
	--kb-border: #DCE5F0;
	--kb-ink: #1B2430;
	--kb-ink-muted: #4A5666;
	--kb-link-on-navy: #8EC5FF;
	--kb-investing: #19559E;
	--kb-fundraising: #79A471;
	--kb-measure: 920px;
	--kb-radius: 10px;
	--kb-shadow: 0 6px 20px rgba(0, 32, 91, 0.10);
	--kb-gap: 24px;
	--kb-anchor-offset: 96px;
}

/* ---------------------------------------------------------------------------
 * 1. Bands and measure
 * ------------------------------------------------------------------------ */

.kb-band {
	padding: 48px 20px;
}

.kb-band > * {
	max-width: var(--kb-measure);
	margin-left: auto;
	margin-right: auto;
}

.kb-band--white {
	background-color: var(--kb-white);
	color: var(--kb-ink);
}

.kb-band--grey {
	background-color: var(--kb-grey);
	color: var(--kb-ink);
}

.kb-band--lightblue {
	background-color: var(--kb-pale-blue);
	color: var(--kb-ink);
}

.kb-band--navy {
	background-color: var(--kb-navy);
	color: var(--kb-white);
}

.kb-band--navy h1,
.kb-band--navy h2,
.kb-band--navy h3,
.kb-band--navy p {
	color: var(--kb-white);
}

.kb-band--navy a {
	color: var(--kb-link-on-navy);
	text-decoration: underline;
}

.kb-band--navy a:hover,
.kb-band--navy a:focus {
	color: var(--kb-white);
}

/* Icon-list anchors collapse without this on this theme. */
.kb-band .elementor-icon-list-item a {
	display: inline;
}

/* Body measure. The article body, every meta-driven band and the glossary all sit
   on the same 920px column. */
.kb-article,
.kb-article > *,
.kb-meta,
.kb-takeaways,
.kb-related,
.kb-counterpart,
.kb-terms,
.kb-sources,
.kb-disclaimer,
.kb-assets,
.kb-glossary,
.kb-members-panel {
	max-width: var(--kb-measure);
	margin-left: auto;
	margin-right: auto;
}

.kb-article {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--kb-ink);
}

.kb-article h2 {
	margin-top: 2em;
	margin-bottom: 0.5em;
	line-height: 1.25;
}

.kb-article h3 {
	margin-top: 1.5em;
	margin-bottom: 0.4em;
	line-height: 1.3;
}

.kb-article ul,
.kb-article ol {
	padding-left: 1.35em;
}

.kb-article li + li {
	margin-top: 0.35em;
}

.kb-article blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--kb-pale-blue);
	color: var(--kb-ink-muted);
}

.kb-article hr,
.kb-article .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--kb-border);
	margin: 2.5em 0;
}

.kb-standfirst {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--kb-ink-muted);
	margin: 0 auto 1.25em;
	max-width: var(--kb-measure);
}

.kb-eyebrow {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kb-investing);
	margin-bottom: 8px;
}

.kb-eyebrow--fundraising {
	color: var(--kb-fundraising);
}

/* ---------------------------------------------------------------------------
 * 2. Cards
 * ------------------------------------------------------------------------ */

.kb-card {
	background-color: var(--kb-white);
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius);
	box-shadow: var(--kb-shadow);
	padding: 20px;
	list-style: none;
	position: relative;
}

/* On grey and pale-blue bands the fill is the light grey, and the border is
   unnecessary weight. */
.kb-band--grey .kb-card,
.kb-band--lightblue .kb-card {
	background-color: var(--kb-grey);
	border-color: transparent;
}

.kb-card__link {
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.35;
	text-decoration: none;
	color: var(--kb-navy);
}

.kb-card__link:hover,
.kb-card__link:focus {
	text-decoration: underline;
}

.kb-card__standfirst {
	margin: 8px 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--kb-ink-muted);
}

.kb-card--investing {
	border-top: 3px solid var(--kb-investing);
}

.kb-card--fundraising {
	border-top: 3px solid var(--kb-fundraising);
}

.kb-badge {
	display: inline-block;
	margin-top: 12px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kb-badge--members {
	background-color: var(--kb-navy);
	color: var(--kb-white);
}

.kb-badge--norway {
	background-color: var(--kb-pale-blue);
	color: var(--kb-navy);
}

/* Third access state (mu-plugin 1.4.0, D38): free to read after registering. Deliberately
   not the navy members badge — the two must be distinguishable at a glance on a card. */
.kb-badge--register {
	background-color: var(--kb-fundraising);
	color: var(--kb-white);
}

/* Compact meta row inside a loop-item card. Shorter than the article meta strip:
   level, reading time, Norway flag, members badge. */
.kb-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-top: 12px;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--kb-ink-muted);
}

.kb-card-meta__level {
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kb-navy);
	background-color: var(--kb-grey);
	border: 1px solid var(--kb-border);
	border-radius: 999px;
	padding: 2px 9px;
}

.kb-card-meta--fundraising .kb-card-meta__level {
	color: var(--kb-fundraising);
}

.kb-band--grey .kb-card-meta__level,
.kb-band--lightblue .kb-card-meta__level {
	background-color: var(--kb-white);
}

.kb-card-meta__norway {
	font-size: 0.9375rem;
	line-height: 1;
}

/* The badge is a card-meta item here, so it loses the standalone top margin. */
.kb-card-meta .kb-badge {
	margin-top: 0;
	font-size: 0.6875rem;
	padding: 2px 9px;
}

/* ---------------------------------------------------------------------------
 * 3. Meta strip
 * ------------------------------------------------------------------------ */

.kb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	padding: 12px 0;
	border-top: 2px solid var(--kb-investing);
	border-bottom: 1px solid var(--kb-border);
	font-size: 0.875rem;
	color: var(--kb-ink-muted);
}

.kb-meta--fundraising {
	border-top-color: var(--kb-fundraising);
}

.kb-meta__item {
	white-space: nowrap;
}

.kb-meta__level {
	font-weight: 700;
	color: var(--kb-navy);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
}

/* The jump to the other track, pushed to the right of the strip (D33). */
.kb-meta__counterpart {
	margin-left: auto;
	font-weight: 600;
	color: var(--kb-investing);
	text-decoration: none;
	white-space: nowrap;
}

.kb-meta--investing .kb-meta__counterpart {
	color: var(--kb-fundraising);
}

.kb-meta--fundraising .kb-meta__counterpart {
	color: var(--kb-investing);
}

.kb-meta__counterpart:hover,
.kb-meta__counterpart:focus {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.kb-meta__counterpart {
		margin-left: 0;
		flex-basis: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Key takeaways
 * ------------------------------------------------------------------------ */

/* 1.2.2: the "Key takeaways" heading sits outside the card, at body-H2 weight; the card
   is .kb-takeaways__box and holds the list alone. The wrapper carries only the rhythm. */
/* In-this-article contents (plugin 1.2.3): sits at the top of a long article, inside the
   body band, and reads as a card rather than as a heading in the flow. */
/* Corner ribbon (1.3.3): a card says whether the article is open or members-only, cut
   across its top-right corner. Drawn on the card box itself — the loop item's section, or
   the icon-box of a hand-built card — because that is the element that knows where the
   corner is; 1.3.2 printed it inside a widget and it landed near the card's foot. */
[data-elementor-type="loop-item"] > .elementor-section,
.kb-flagged.elementor-widget-icon-box > .elementor-widget-container {
	position: relative;
	overflow: hidden;
}

/* 1.5.3: on the hand-built cards the ribbon is drawn and clipped on the widget's inner
   container, which is the visible white rounded card. It used to be clipped by the widget
   itself: a square box, 20px taller than the card. That clip also cut the hover shadow's
   blur along straight edges, so the shadow showed square bottom corners under a rounded
   card. The widget no longer clips anything. */
.kb-flagged.elementor-widget-icon-box {
	overflow: visible;
}

/* Geometry (1.4.4). The band is clipped by the card's corner, so the readable run is not
   the 220px box but the chord the band cuts across that corner: chord = leg × √2, where
   leg = top + height/2 + width/2 − |right|. At the old 20px/−46px/170px the chord was
   102px, and "Members only" measured 102px — which is why it always looked like it was
   touching the edges, and why the longer "Free on registration" lost a few characters at
   each end. These numbers give a 146px chord against a 124px label: 11px clear at both
   ends. Measured in the browser at the rendered font, not calculated from the design.

   All three states share the geometry and the type size so the corner reads the same
   wherever a card appears; only the label and the colour change. Changing any of top,
   right, width or font-size means re-measuring the chord. */
.e-loop-item.kb-access-members > .elementor-section::after,
.e-loop-item.kb-access-free > .elementor-section::after,
.e-loop-item.kb-access-register > .elementor-section::after,
.kb-flagged > .elementor-widget-container::after {
	position: absolute;
	top: 38px;
	right: -58px;
	width: 220px;
	padding: 5px 0;
	transform: rotate(45deg);
	z-index: 3;
	pointer-events: none;
	text-align: center;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kb-white);
	box-shadow: 0 2px 6px rgba(0, 32, 91, 0.18);
}

.e-loop-item.kb-access-members > .elementor-section::after,
.kb-flagged--members > .elementor-widget-container::after {
	content: "Members only";
	background-color: var(--kb-navy);
}

.e-loop-item.kb-access-free > .elementor-section::after,
.kb-flagged--free > .elementor-widget-container::after {
	content: "Free to read";
	background-color: var(--kb-fundraising);
}

/* Third state (1.4.3, D38): a startup article that opens once the reader registers.
   NorBAN blue, so the three ribbons read as a ladder of effort rather than two shades of
   the same thing — green costs nothing, blue costs a form, navy costs a membership.
   Tracked one step tighter than the other two labels: the phrase is longer than "Members
   only" and the band's visible run across the corner is shorter than its 170px box. */
.e-loop-item.kb-access-register > .elementor-section::after,
.kb-flagged--register > .elementor-widget-container::after {
	content: "Free on registration";
	background-color: var(--kb-investing);
}

/* Whole-card links (1.3.1): an entry card should be clickable anywhere, not only on its
   title. The class goes on the Elementor icon-box; the overlay covers the card, and the
   real anchor keeps its own focus ring because the overlay is on the anchor itself. */
.kb-cardlink.elementor-widget-icon-box {
	position: relative;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kb-cardlink.elementor-widget-icon-box:hover {
	transform: translateY(-2px);
}

/* 1.5.2: the shadow belongs on the visible card. The white, rounded box is the widget's
   inner container; the widget itself is 20px taller, square and transparent, so a shadow
   on the widget showed as a strip under the card. Elementor sets the card's resting shadow
   per element (.elementor-NNNN .elementor-element-ID > .elementor-widget-container), so
   the hover rule needs one more point of specificity: hence the leading `body`. */
.kb-cardlink.elementor-widget-icon-box > .elementor-widget-container {
	transition: box-shadow 0.2s ease;
}

body .kb-cardlink.elementor-widget-icon-box:hover > .elementor-widget-container {
	box-shadow: 0 10px 26px rgba(0, 32, 91, 0.14);
}

.kb-cardlink .elementor-icon-box-title a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

.kb-cardlink .elementor-icon-box-description {
	position: relative;
	z-index: 1;
}

/* Whole-card links on the article cards (1.5.1, owner 2026-09-29). The loop-item cards on
   the two track pages link only through their "Read the article" button, and the related
   and counterpart cards only through their title. The link's ::after is stretched over the
   whole card. On the loop item that needs every Elementor wrapper between the button and
   the card's section to be position: static, so the section is the containing block. The
   corner ribbon is pointer-events: none and stays on top (z-index 3). Keyboard focus stays
   on the real link; the card shows the focus ring. */
.e-loop-item > .elementor-section > .elementor-container,
.e-loop-item .elementor-column,
.e-loop-item .elementor-widget-wrap,
.e-loop-item .elementor-widget-button,
.e-loop-item .elementor-widget-button .elementor-widget-container,
.e-loop-item .elementor-button-wrapper,
.e-loop-item .elementor-widget-button .elementor-button {
	position: static;
}

.e-loop-item .elementor-widget-button .elementor-button::after,
.kb-card__link::after,
.kb-counterpart__link a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

.kb-card,
.kb-counterpart {
	position: relative;
}

.e-loop-item > .elementor-section,
.kb-card,
.kb-counterpart {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.e-loop-item:hover > .elementor-section,
.kb-card:hover,
.kb-counterpart:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 32, 91, 0.14);
}

.e-loop-item:focus-within > .elementor-section,
.kb-card:focus-within,
.kb-counterpart:focus-within {
	outline: 2px solid var(--kb-investing);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.e-loop-item:hover > .elementor-section,
	.kb-card:hover,
	.kb-counterpart:hover {
		transform: none;
	}
}

.kb-toc {
	max-width: var(--kb-measure);
	margin: 0 auto 32px;
	padding: 20px 24px;
	background-color: var(--kb-grey);
	border-radius: var(--kb-radius);
	border: 1px solid var(--kb-border);
}

.kb-toc__title {
	margin: 0 0 10px;
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kb-ink-muted);
}

.kb-toc__list {
	margin: 0;
	padding-left: 1.3em;
	columns: 2;
	column-gap: 32px;
}

.kb-toc__list li {
	margin: 0 0 6px;
	break-inside: avoid;
}

@media (max-width: 767px) {
	.kb-toc__list {
		columns: 1;
	}
}

.kb-article h2 {
	scroll-margin-top: var(--kb-anchor-offset);
}

.kb-takeaways {
	margin-top: 32px;
	margin-bottom: 32px;
}

.kb-takeaways__box {
	background-color: var(--kb-grey);
	border-radius: var(--kb-radius);
	box-shadow: var(--kb-shadow);
	padding: 24px 28px;
}

.kb-band--grey .kb-takeaways__box,
.kb-band--lightblue .kb-takeaways__box {
	background-color: var(--kb-white);
	border: 1px solid var(--kb-border);
}

/* Band ladder change of 8 Sep 2026 (decision D12): takeaways sit on the pale-blue page
   band and the counterpart + related cards on the grey band. The section classes are set
   in template T2 (6345). On the page band the takeaways box turns white so it reads as a
   card; a band whose shortcodes returned nothing collapses instead of rendering as empty
   padding (every counterpart and related target is a draft until G3). */
.kb-band-takeaways .kb-takeaways__box {
	background-color: var(--kb-white);
	border: 1px solid var(--kb-border);
}

.kb-band-takeaways:not(:has(.kb-takeaways)),
.kb-band-related:not(:has(.kb-related, .kb-counterpart)) {
	display: none;
}

/* Article head (T2, 9 Sep 2026): the breadcrumb and the track eyebrow sit on one line,
   the eyebrow pushed to the right so it reads as a label, not as a crumb. Both widgets
   are inline-width in the template; the wrap is a flex row. */
.kb-crumbs {
	flex: 1 1 auto;
}

.kb-eyebrow-head {
	margin-left: auto;
	text-align: right;
	align-self: center;
}

/* Terms used now sits at the end of the body, above the takeaways (owner, 9 Sep 2026). */
.kb-band-body .kb-terms {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--kb-border);
}

/* The white band after the cards holds only the disclaimer and the asset box now; it
   collapses when both are empty, like the takeaways and related bands. */
.kb-band-extras:not(:has(.kb-disclaimer, .kb-assets)) {
	display: none;
}

.kb-takeaways__title {
	margin: 0 0 16px;
	font-size: 1.75rem;
	line-height: 1.25;
	font-weight: 600;
	color: var(--kb-navy);
}

.kb-takeaways__list {
	margin: 0;
	padding-left: 1.2em;
}

.kb-takeaways__list li + li {
	margin-top: 8px;
}

/* ---------------------------------------------------------------------------
 * 5. Counterpart, related, terms, sources, disclaimer, assets
 * ------------------------------------------------------------------------ */

.kb-counterpart {
	background-color: var(--kb-white);
	border: 1px solid var(--kb-border);
	border-left: 4px solid var(--kb-investing);
	border-radius: var(--kb-radius);
	box-shadow: var(--kb-shadow);
	padding: 20px 24px;
	margin: 32px auto;
}

.kb-counterpart--fundraising {
	border-left-color: var(--kb-fundraising);
}

/* D33: the section heading sits above the card and reads like the other band headings;
   the card's eyebrow names the perspective the reader is crossing to. */
.kb-counterpart-block {
	max-width: var(--kb-measure);
	margin: 32px auto;
}

.kb-counterpart-block__title {
	margin: 0 0 12px;
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kb-ink-muted);
}

.kb-counterpart-block .kb-counterpart {
	margin: 0;
}

.kb-counterpart__eyebrow {
	margin: 0 0 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kb-investing);
}

.kb-counterpart--fundraising .kb-counterpart__eyebrow {
	color: var(--kb-fundraising);
}

/* the old in-card heading, kept so an unupgraded page does not lose its label */
.kb-counterpart__title {
	margin: 0 0 8px;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kb-ink-muted);
}

.kb-counterpart__link {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
}

.kb-counterpart__standfirst {
	margin: 8px 0 0;
	font-size: 0.9375rem;
	color: var(--kb-ink-muted);
}

.kb-related {
	margin: 32px auto;
}

.kb-related__title,
.kb-terms__title,
.kb-sources__title,
.kb-assets__title {
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--kb-navy);
	margin: 0 0 16px;
}

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

/* Glossary mini-card (1.7.0): a small link card. In the article's terms section it sits on
   the title row; the track headings carry the same markup next to the search field. */
.kb-terms__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 16px;
}

.kb-terms__head .kb-terms__title {
	margin: 0;
	flex: 1 1 280px;
}

.kb-glossary-mini {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px 9px 12px;
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius);
	background-color: var(--kb-white);
	color: var(--kb-navy);
	text-decoration: none;
	line-height: 1.3;
	box-shadow: 0 2px 8px rgba(0, 32, 91, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kb-glossary-mini:hover,
.kb-glossary-mini:focus {
	color: var(--kb-navy);
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(0, 32, 91, 0.16);
	transform: translateY(-1px);
}

.kb-glossary-mini__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--kb-pale-blue);
	color: var(--kb-investing);
}

.kb-glossary-mini__text {
	display: flex;
	flex-direction: column;
	font-size: 0.8125rem;
	color: var(--kb-ink-muted);
}

.kb-glossary-mini__text strong {
	font-size: 0.9375rem;
	color: var(--kb-navy);
}

.kb-glossary-mini__arrow {
	color: var(--kb-investing);
	font-weight: 700;
}

/* Feature cards (1.7.0): the glossary and counterpart cards in Elementor HTML widgets. They
   copy the look of the two access cards on /knowledge/ (white, hairline, soft shadow,
   framed round icon) and carry their own styling, so no Elementor CSS regeneration is
   needed when a card is added or edited. The whole card is the link (title ::after). */
.kb-feature-row {
	box-sizing: border-box;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
}

.kb-feature-row--single {
	grid-template-columns: minmax(0, 1fr);
}

.kb-feature-row--inset {
	padding: 0 10px;
}

.kb-feature {
	--kb-accent: #19559E;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 24px;
	text-align: center;
	background-color: var(--kb-white);
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius);
	box-shadow: 0 6px 20px rgba(0, 32, 91, 0.10);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kb-feature:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 32, 91, 0.14);
}

.kb-feature--green {
	--kb-accent: #79A471;
}

.kb-feature--navy {
	--kb-accent: #00205B;
}

.kb-feature--wide {
	flex-direction: row;
	gap: 28px;
	padding: 24px 32px;
	text-align: left;
}

.kb-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 74px;
	height: 74px;
	border: 3px solid var(--kb-accent);
	border-radius: 50%;
	color: var(--kb-accent);
}

.kb-feature__icon svg {
	width: 34px;
	height: 34px;
}

.kb-feature__title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--kb-navy);
}

.kb-feature__title a {
	color: inherit;
	text-decoration: none;
}

.kb-feature__title a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

.kb-feature__title a:focus-visible {
	outline: 3px solid var(--kb-investing);
	outline-offset: 4px;
}

.kb-feature__text {
	margin: 4px 0 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #333333;
}

@media (max-width: 781px) {
	.kb-feature-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.kb-feature--wide {
		flex-direction: column;
		text-align: center;
	}
}

/* Track heading: the search form and the glossary mini-card share a row. */
.kb-search-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.kb-search-row .kb-search {
	flex: 1 1 320px;
	min-width: 0;
}

.kb-search-row .kb-glossary-mini {
	flex: 0 0 auto;
}

.kb-terms__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kb-chip a {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background-color: var(--kb-grey);
	border: 1px solid var(--kb-border);
	color: var(--kb-navy);
	font-size: 0.875rem;
	text-decoration: none;
	line-height: 1.4;
}

.kb-chip a:hover,
.kb-chip a:focus {
	background-color: var(--kb-pale-blue);
	border-color: var(--kb-pale-blue);
}

.kb-chip__no {
	font-style: italic;
}

.kb-chip__en {
	color: var(--kb-ink-muted);
}

.kb-sources {
	margin: 32px auto;
	font-size: 0.9375rem;
}

.kb-sources__list {
	margin: 0;
	padding-left: 1.4em;
	color: var(--kb-ink-muted);
}

.kb-sources__item + .kb-sources__item {
	margin-top: 8px;
}

.kb-sources__item a {
	color: var(--kb-investing);
	overflow-wrap: anywhere;
}

.kb-sources__accessed {
	color: var(--kb-ink-muted);
	font-size: 0.875rem;
}

/* Legal and tax disclaimer (1.7.2): titled, warm-toned and larger, so it is not skimmed past. */
.kb-disclaimer {
	margin: 36px auto;
	padding: 20px 24px 22px;
	border: 1px solid #E3B341;
	border-left: 8px solid #B7791F;
	background-color: #FFF6DC;
	border-radius: var(--kb-radius);
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--kb-ink);
}

.kb-disclaimer p {
	margin: 0;
}

/* Own band above the key takeaways (1.7.3): a warm band between the white body band and the
   pale-blue takeaways band, with a white box on it; collapses when there is no disclaimer. */
.kb-band-disclaimer {
	padding: 40px 0;
	background-color: #FBEBC0;
}

.kb-band-disclaimer .kb-disclaimer {
	margin: 0 auto;
	background-color: var(--kb-white);
}

.kb-band-disclaimer:not(:has(.kb-disclaimer)) {
	display: none;
}

@media (max-width: 1024px) {
	.kb-band-disclaimer {
		padding: 32px 30px;
	}
}

@media (max-width: 767px) {
	.kb-band-disclaimer {
		padding: 28px 20px;
	}
}

.kb-disclaimer__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--kb-navy);
}

.kb-disclaimer__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: #8A5A00;
}

.kb-assets {
	background-color: var(--kb-white);
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius);
	box-shadow: var(--kb-shadow);
	padding: 20px 24px;
	margin: 32px auto;
}

.kb-assets__list {
	margin: 0;
	padding-left: 1.2em;
}

.kb-assets__note {
	margin: 12px 0 0;
	font-size: 0.875rem;
	color: var(--kb-ink-muted);
}

/* Coming-soon box (1.5.0, D68): a template mapped to the article but not built yet. Small,
   quiet and plainly separate from the article: dashed outline, grey fill, no shadow, no
   link. Narrow on wide screens, so it reads as a side note rather than a section. */
.kb-assets--soon {
	max-width: 360px;
	margin: 24px auto 24px max(0px, calc((100% - var(--kb-measure)) / 2));
	padding: 12px 16px;
	background-color: var(--kb-grey);
	border: 1px dashed var(--kb-investing);
	box-shadow: none;
}

.kb-assets__soon-title {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kb-navy);
}

.kb-assets__soon-title::before {
	content: "";
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-right: 0.5em;
	border: 2px solid var(--kb-investing);
	border-radius: 2px;
	vertical-align: -0.05em;
}

.kb-assets--soon .kb-assets__note {
	margin-top: 6px;
	font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------
 * 6. Members panel and track CTA — the two navy sales surfaces.
 *    Neither is an error message; both must read as an invitation.
 * ------------------------------------------------------------------------ */

.kb-members-panel {
	background-color: var(--kb-navy);
	color: var(--kb-white);
	border-radius: var(--kb-radius);
	box-shadow: var(--kb-shadow);
	padding: 32px;
	margin: 32px auto;
}

.kb-members-panel h2,
.kb-members-panel h3,
.kb-members-panel p {
	color: var(--kb-white);
}

.kb-members-panel h2 {
	margin-top: 0;
}

.kb-members-panel a {
	color: var(--kb-link-on-navy);
}

.kb-members-panel .kb-button {
	display: inline-block;
	margin-top: 8px;
	padding: 12px 24px;
	border-radius: var(--kb-radius);
	background-color: var(--kb-white);
	color: var(--kb-navy);
	font-weight: 700;
	text-decoration: none;
}

.kb-members-panel .kb-button:hover,
.kb-members-panel .kb-button:focus {
	background-color: var(--kb-pale-blue);
	color: var(--kb-navy);
}

/* The panel that replaces a gated body (mu-plugin §12.6). Same shop-window styling;
   the actions row pairs the primary button with a plain log-in link. */
.kb-members-panel__title {
	margin: 0 0 10px;
	font-size: 1.375rem;
	line-height: 1.25;
}

.kb-members-panel__text {
	margin: 0 0 20px;
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.kb-members-panel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 0;
}

.kb-members-panel__actions .kb-button {
	margin-top: 0;
}

.kb-members-panel__login {
	color: var(--kb-link-on-navy);
	font-weight: 600;
	text-decoration: underline;
}

.kb-members-panel__login:hover,
.kb-members-panel__login:focus {
	color: var(--kb-white);
}

/* The registration gate's panel (mu-plugin §14, D38). The members panel is navy because
   it sells a membership; this one asks for an email address, so it sits lighter — and a
   form on a navy ground is a legibility fight not worth having. The class stack keeps
   .kb-members-panel for layout and overrides only ground, ink and link colour. */
.kb-members-panel--register {
	background-color: var(--kb-grey);
	color: var(--kb-ink);
	border: 1px solid var(--kb-border);
	box-shadow: none;
}

.kb-members-panel--register h2,
.kb-members-panel--register p {
	color: var(--kb-ink);
}

.kb-members-panel--register a,
.kb-members-panel--register .kb-members-panel__login {
	color: var(--kb-investing);
}

.kb-members-panel--register a:hover,
.kb-members-panel--register a:focus {
	color: var(--kb-navy);
}

.kb-members-panel__form {
	margin: 0 0 16px;
}

/* Elementor supplies the form's own widget styling; these rules only stop it inheriting
   the panel's measure rules and keep the fields full width inside the article column. */
.kb-members-panel__form .elementor-form-fields-wrapper {
	margin-bottom: 0;
}

.kb-members-panel__form .elementor-field-group > label {
	color: var(--kb-ink);
	font-weight: 600;
}

.kb-members-panel__text--warning {
	color: var(--kb-ink-muted);
}

.kb-members-panel__login-line {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--kb-ink-muted);
}

/* Track CTA. The surrounding Elementor band supplies the navy ground and white text;
   these rules only have to keep the CTA legible and self-sufficient if it is ever
   rendered outside that band. */
.kb-cta {
	max-width: var(--kb-measure);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.kb-band--navy .kb-cta,
.kb-band--navy .kb-cta p {
	color: var(--kb-white);
}

.kb-cta__title {
	margin: 0 0 12px;
	font-size: 1.75rem;
	line-height: 1.25;
}

.kb-cta__text {
	margin: 0 auto 28px;
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.kb-cta__action {
	margin: 0;
}

/* Any inline link inside the CTA follows the navy-band link handling. */
.kb-cta a {
	color: var(--kb-link-on-navy);
}

/* The button is the site's button: the kit's accent red (#EA0F3B, the default for every
   Elementor button on norban.no, e.g. "Submit your startup" on the get-funding pages), white
   text for contrast, and the front-page hero geometry — 21px with the site's text-shadow,
   5px radius, 20/30 padding, "grow" on hover. 16px on tablet and 15px on mobile follow at the
   bottom of this file. Same on both tracks. */
.kb-cta__button {
	display: inline-block;
	padding: 20px 30px;
	border-radius: 5px;
	background-color: #EA0F3B;
	color: var(--kb-white);
	font-size: 21px;
	line-height: 1em;
	font-weight: 600;
	text-decoration: none;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease, background-color 0.2s ease;
}

.kb-cta__button:hover,
.kb-cta__button:focus {
	background-color: #C90C32;
	color: var(--kb-white);
	transform: scale(1.1);
}

/* The label stays white in every link state. Four classes deliberately (0-4-1): a
   per-section link colour set in Elementor compiles to
   `.elementor-NNNN .elementor-element.elementor-element-ID a` (0-3-1) and outranked the
   two-class rule this replaces, which painted the button's label #8EC5FF (D19). The
   template's own rule is gone, but a band anywhere on the site may still carry one. */
.kb-band--navy .kb-cta .kb-cta__action a.kb-cta__button,
.kb-band--navy .kb-cta .kb-cta__action a.kb-cta__button:link,
.kb-band--navy .kb-cta .kb-cta__action a.kb-cta__button:visited,
.kb-cta .kb-cta__action a.kb-cta__button,
.kb-cta .kb-cta__action a.kb-cta__button:link,
.kb-cta .kb-cta__action a.kb-cta__button:visited {
	color: var(--kb-white);
}

.kb-band--navy .kb-cta .kb-cta__action a.kb-cta__button:hover,
.kb-band--navy .kb-cta .kb-cta__action a.kb-cta__button:focus,
.kb-cta .kb-cta__action a.kb-cta__button:hover,
.kb-cta .kb-cta__action a.kb-cta__button:focus {
	color: var(--kb-white);
	background-color: #C90C32;
}

.kb-cta a:focus-visible {
	outline: 3px solid var(--kb-link-on-navy);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 7. Tables — 920px measure, scrollable on small screens
 * ------------------------------------------------------------------------ */

.kb-article .wp-block-table,
.kb-scroll {
	max-width: var(--kb-measure);
	margin-left: auto;
	margin-right: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kb-article table,
.kb-scroll table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 0.9375rem;
	background-color: var(--kb-white);
}

.kb-article th,
.kb-article td,
.kb-scroll th,
.kb-scroll td {
	border: 1px solid var(--kb-border);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.kb-article thead th,
.kb-scroll thead th {
	background-color: var(--kb-grey);
	color: var(--kb-navy);
	font-weight: 700;
}

.kb-article tbody tr:nth-child(even) td,
.kb-scroll tbody tr:nth-child(even) td {
	background-color: #FAFCFD;
}

/* ---------------------------------------------------------------------------
 * 8. Glossary
 * ------------------------------------------------------------------------ */

.kb-glossary__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.kb-glossary__nav a {
	display: inline-block;
	min-width: 34px;
	padding: 5px 8px;
	border-radius: var(--kb-radius);
	background-color: var(--kb-grey);
	border: 1px solid var(--kb-border);
	color: var(--kb-navy);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.kb-glossary__nav a:hover,
.kb-glossary__nav a:focus {
	background-color: var(--kb-pale-blue);
	border-color: var(--kb-pale-blue);
}

.kb-glossary__group {
	margin-bottom: 40px;
	scroll-margin-top: var(--kb-anchor-offset);
}

.kb-glossary__letter {
	margin: 0 0 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--kb-pale-blue);
	font-size: 1.25rem;
	color: var(--kb-navy);
}

.kb-glossary__list {
	margin: 0;
}

.kb-glossary__term {
	scroll-margin-top: var(--kb-anchor-offset);
	margin-top: 22px;
	font-size: 1.25em;
	line-height: 1.3;
	font-weight: 700;
	color: var(--kb-navy);
}

.kb-glossary__no {
	font-style: italic;
	font-weight: 600;
	color: var(--kb-investing);
}

.kb-glossary__definition {
	margin: 4px 0 0;
	padding: 0;
	color: var(--kb-ink);
}

.kb-glossary__definition p {
	margin: 0 0 8px;
}

.kb-glossary__more {
	font-size: 0.8125rem;
	margin: 10px 0 0;
}

.kb-glossary__articles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kb-glossary__articles li {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.kb-glossary__articles .kb-glossary__more-label {
	margin: 0 6px 0 0;
	font-weight: 600;
	color: var(--kb-ink);
}

.kb-glossary__articles a {
	display: block;
	font-family: inherit;
	font-size: inherit;
	padding: 5px 12px;
	border: 1.5px solid var(--kb-investing);
	border-radius: var(--kb-radius);
	background-color: var(--kb-white);
	color: var(--kb-investing);
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Muted fill by track (1.7.2): blue for investor articles, green for founder articles. */
.kb-glossary__a--investing a {
	background-color: #E8F0FA;
	border-color: var(--kb-investing);
	color: #14457F;
}

.kb-glossary__a--fundraising a {
	background-color: #EAF3E8;
	border-color: var(--kb-fundraising);
	color: #2D5A28;
}

.kb-glossary__articles .kb-glossary__a--investing a:hover,
.kb-glossary__articles .kb-glossary__a--investing a:focus {
	background-color: #D5E4F5;
	box-shadow: 0 2px 8px rgba(0, 32, 91, 0.12);
	text-decoration: none;
}

.kb-glossary__articles .kb-glossary__a--fundraising a:hover,
.kb-glossary__articles .kb-glossary__a--fundraising a:focus {
	background-color: #D8EAD4;
	box-shadow: 0 2px 8px rgba(0, 32, 91, 0.12);
	text-decoration: none;
}

.kb-glossary__rest {
	margin-top: 8px;
}

.kb-glossary__rest summary {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 4px;
	cursor: pointer;
	color: var(--kb-investing);
	font-weight: 500;
}

@media (max-width: 600px) {
	.kb-glossary__articles .kb-glossary__more-label {
		flex-basis: 100%;
		margin: 0;
	}

	.kb-glossary__articles li:not(.kb-glossary__more-label) {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------------
 * 9. Accessibility
 * ------------------------------------------------------------------------ */

.kb-article a:focus-visible,
.kb-glossary a:focus-visible,
.kb-card__link:focus-visible,
.kb-chip a:focus-visible,
.kb-members-panel a:focus-visible {
	outline: 3px solid var(--kb-investing);
	outline-offset: 2px;
}

.kb-band--navy a:focus-visible,
.kb-members-panel a:focus-visible {
	outline-color: var(--kb-link-on-navy);
}

.kb-screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * 10. Responsive — 390px is the reference small screen.
 *     No horizontal page scroll; cards stack; only tables scroll, inside
 *     their own wrapper.
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.kb-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.kb-band {
		padding: 32px 16px;
	}

	.kb-related__list {
		grid-template-columns: 1fr;
	}

	.kb-takeaways,
	.kb-assets,
	.kb-counterpart,
	.kb-members-panel {
		padding: 20px;
	}

	.kb-article {
		font-size: 1rem;
	}

	.kb-standfirst {
		font-size: 1.0625rem;
	}

	.kb-meta {
		gap: 6px 14px;
		font-size: 0.8125rem;
	}

	.kb-cta__title {
		font-size: 1.3125rem;
	}

	.kb-cta__text {
		font-size: 1rem;
	}
}

@media (max-width: 480px) {
	.kb-band {
		padding: 28px 14px;
	}

	.kb-meta__item {
		white-space: normal;
	}

	.kb-glossary__nav a {
		min-width: 30px;
		padding: 4px 6px;
		font-size: 0.875rem;
	}

	.kb-members-panel {
		padding: 20px 16px;
	}

	.kb-cta__button {
		display: inline-block;
		padding: 16px 24px;
	}

	.kb-card-meta {
		gap: 5px 10px;
	}

	.kb-members-panel__actions {
		display: block;
	}

	.kb-members-panel__actions .kb-button {
		display: block;
		text-align: center;
		margin-bottom: 12px;
	}
}

/* Nothing inside the knowledge base may push the page wider than the viewport. */
.kb-article img,
.kb-article iframe,
.kb-glossary img {
	max-width: 100%;
	height: auto;
}

.kb-article pre,
.kb-article code {
	overflow-x: auto;
	overflow-wrap: anywhere;
}

@media print {
	.kb-members-panel,
	.kb-glossary__nav {
		display: none;
	}
}

@media (max-width: 1024px) {
	.kb-cta__button {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.kb-cta__button {
		font-size: 15px;
	}
}

/* ---------------------------------------------------------------------------
 * Diagrams: wide/phone swap and the viewer (1.6.0, D74)
 * Every KB image is a linked block with .kb-zoom; norban-kb.php §10a opens the
 * link over the page. Where a tall phone version exists the article carries two
 * blocks, .kb-dia-wide and .kb-dia-phone, and one is shown by screen width.
 * ------------------------------------------------------------------------- */

.kb-dia-phone {
	display: none;
}

@media (max-width: 600px) {
	.kb-dia-wide {
		display: none;
	}

	.kb-dia-phone {
		display: block;
	}
}

figure.kb-zoom a {
	position: relative;
	display: block;
	cursor: zoom-in;
}

/* a small magnifier, so the image reads as something to open */
figure.kb-zoom a::after {
	content: "";
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 32, 91, 0.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 18px no-repeat;
	pointer-events: none;
}

figure.kb-zoom a:focus-visible {
	outline: 3px solid #19559e;
	outline-offset: 3px;
}

html.kb-lightbox-open,
html.kb-lightbox-open body {
	overflow: hidden;
}

.kb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	box-sizing: border-box;
	padding: 56px 12px 16px;
	background: rgba(0, 16, 46, 0.92);
}

.kb-lightbox[hidden] {
	display: none;
}

.kb-lightbox__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 72px);
	margin: auto;
	border-radius: 6px;
	background: #fff;
	cursor: zoom-in;
}

/* tall images (the phone versions) fit the width and scroll */
.kb-lightbox.is-tall {
	align-items: flex-start;
}

.kb-lightbox.is-tall .kb-lightbox__img {
	width: min(100%, 720px);
	max-height: none;
}

/* a click on the image shows it at its natural size; the viewer scrolls both ways */
.kb-lightbox.is-zoomed {
	align-items: flex-start;
	justify-content: flex-start;
}

.kb-lightbox.is-zoomed .kb-lightbox__img {
	width: auto;
	max-width: none;
	max-height: none;
	cursor: zoom-out;
}

.kb-lightbox__close {
	position: fixed;
	top: 10px;
	right: 12px;
	z-index: 1;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #00205b;
	font-size: 28px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
}

.kb-lightbox__close:focus-visible {
	outline: 3px solid #f2a33a;
	outline-offset: 2px;
}

@media print {
	figure.kb-zoom a::after,
	.kb-lightbox,
	.kb-dia-phone {
		display: none;
	}

	.kb-dia-wide {
		display: block;
	}
}

/* Closing call-to-action band (1.7.5): the shortcode returns nothing on members-only articles and for active
   members, so the band collapses. Keyed on the Elementor widget id in template 6345 (cta1kb0). */
.elementor-section:has(.elementor-element-cta1kb0):not(:has(.kb-cta)) {
	display: none;
}