@font-face {
	font-family: 'IBM Plex Sans';
	src: url('../fonts/IBMPlexSans-var.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/*
 * The colour custom properties are owned by the Bricks global palette, which emits them
 * unlayered on :root. Declaring the same names in a layer keeps a working fallback if the
 * palette is ever deleted, without ever overriding what the builder writes.
 */
@layer nordemo-fallback {
	:root {
		--nordemo-primary: #182d57;
		--nordemo-primary-hover: #173267;
		--nordemo-primary-deep: #13274f;
		--nordemo-surface: #f3f9ff;
		--nordemo-surface-accent: #e6f2ff;
		--nordemo-surface-border: #ecf3fa;
		--nordemo-border-light: #eaeae9;
		--nordemo-accent: #ffae00;
		--nordemo-text: #161616;
		--nordemo-text-muted: #464646;
		--nordemo-on-primary: #ffffff;
		--nordemo-notice-surface: #fffbf2;
		--nordemo-notice-border: #fff8e9;
		--nordemo-news-surface: #f9f9f6;
		--nordemo-news-border: #f7f7f2;
		--nordemo-sky: #bce0ff;
		--nordemo-text-caption: #646464;
	}
}

:root {
	--nordemo-gutter: 96px;
	--nordemo-content-max: 1248px;
	--nordemo-radius-sm: 4px;
	--nordemo-radius: 8px;
	--nordemo-radius-pill: 72px;
}

@media (max-width: 991px) {
	:root {
		--nordemo-gutter: 16px;
	}
}

/* Figma draws these glyphs inset inside a fixed box rather than filling it. */
.nordemo-icon {
	position: relative;
	flex: none;
	display: block;
	width: 24px;
	height: 24px;
}

/*
 * The glyphs are exported at their own size, so each modifier restates the position and size
 * Figma gives it inside the 24px box. Four insets alone would not size a replaced element.
 */
.nordemo-icon img {
	position: absolute;
	display: block;
}

.nordemo-icon--chevron img {
	top: 46.88%;
	left: 31.65%;
	width: 36.7%;
	height: 18.34%;
}

.nordemo-icon--arrow img {
	top: 30.15%;
	left: 35.99%;
	width: 26.93%;
	height: 47.61%;
}

.nordemo-icon--hamburger img {
	top: 26.52%;
	left: 14.58%;
	width: 70.84%;
	height: 46.96%;
}

/* The exported arrow is dark; on dark buttons it has to flip to white. */
.nordemo-icon--on-dark img {
	filter: brightness(0) invert(1);
}

.nordemo-icon--card-arrow img {
	top: 22.92%;
	left: 18.75%;
	width: 62.5%;
	height: 62.5%;
}

.nordemo-section-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nordemo-section-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.0938em;
	text-transform: uppercase;
	color: var(--nordemo-text);
}

.nordemo-section-divider {
	display: block;
	width: 100px;
	height: 4px;
	background: var(--nordemo-primary);
}

.nordemo-section-divider--accent {
	background: var(--nordemo-accent);
}

.nordemo-section-divider--sky {
	background: var(--nordemo-sky);
}

/* Shared by <a> and <button>; the latter inherits neither font nor colour on its own. */
.nordemo-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px 12px 24px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	border-radius: var(--nordemo-radius-pill);
}

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

/* background-color, not the shorthand: the CF7 submit carries its arrow as a background-image. */
.nordemo-button--primary:hover {
	background-color: var(--nordemo-primary-hover);
}

.nordemo-button--light {
	color: var(--nordemo-primary);
	background: var(--nordemo-surface-accent);
}

.nordemo-button--light:hover {
	background-color: var(--nordemo-on-primary);
}

.nordemo-button--outline {
	color: var(--nordemo-primary-deep);
	background: none;
	/* Figma strokes sit inside the frame, so an outset border would make the button 50px. */
	box-shadow: inset 0 0 0 1px var(--nordemo-primary-deep);
}

.nordemo-button--outline:hover {
	color: var(--nordemo-on-primary);
	background-color: var(--nordemo-primary-deep);
}

/* Yellow call to action: dark text, dark glyph. */
.nordemo-button--accent {
	font-weight: 600;
	color: var(--nordemo-text);
	background: var(--nordemo-accent);
}

/*
 * The variant owns its icon colour: every state with a dark fill flips the dark glyphs to
 * white right here, so no button's markup can forget it.
 */
.nordemo-button--primary img,
.nordemo-button--outline:hover img {
	filter: brightness(0) invert(1);
}

/* currentColor keeps the ring legible on both the dark and the light variant. */
.nordemo-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * The open list only exists in Figma as a pasted screenshot, so its colours were sampled from
 * that bitmap and its geometry scaled against the closed field, whose values are real: the
 * text inset resolves to the field's own 16px, which is what anchors the scale.
 */
.nordemo-select {
	position: relative;
}

.nordemo-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px;
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	text-align: left;
	background: var(--nordemo-on-primary);
	border: 0;
	border-radius: var(--nordemo-radius-sm);
	cursor: pointer;
}

.nordemo-select__button[aria-expanded='true'] .nordemo-icon--chevron {
	transform: rotate(180deg);
}

.nordemo-select__list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 320px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	background: var(--nordemo-on-primary);
	border: 1px solid #e5e5e4;
	border-radius: var(--nordemo-radius-sm);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.nordemo-select__list[hidden] {
	display: none;
}

.nordemo-select__option {
	padding: 10px 16px;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	cursor: pointer;
}

.nordemo-select__option[aria-selected='true'],
.nordemo-select__option.is-active {
	background: var(--nordemo-surface);
}