@layer root, resets, base, components, overrides;@font-face {
	font-family: 'inter';
	font-style: normal;
	font-display: block;
	src: url('./vendor-libraries/fonts/inter/Inter.woff2') format('woff2');
}@font-face {
	font-family: 'inter';
	font-style: italic;
	font-display: block;
	src: url('./vendor-libraries/fonts/inter/Inter-Italic.woff2') format('woff2');
}@layer root {
	:root {
		--font-family-default: Lato, sans-serif, system-ui;
		--font-weight-regular: 400;
		--font-weight-medium: 500;
		--font-weight-semi-bold: 600;
		--font-weight-bold: 700;
		--size-5: 0.3125rem;
		--size-10: 0.625rem;
		--size-12: 0.75rem;
		--size-14: 0.875rem;
		--size-16: 1rem;
		--size-18: 1.125rem;
		--size-20: 1.25rem;
		--size-21: 1.3125rem;
		--size-24: 1.5rem;
		--size-28: 1.75rem;
		--size-30: 1.875rem;
		--size-34: 2.125rem;
		--size-40: 2.5rem;
		--size-48: 3rem;
		--size-50: 3.125rem;
		--size-56: 3.5rem;
		--size-60: 3.75rem;
		--size-64: 4rem;
		--color-white: hsl(0 0% 100%);
		--color-black: hsl(0 0% 0%);
		--color-red: hsl(348 100% 50%);
		--color-green: hsl(86 100% 65%);
		--color-gray-10: hsl(0 0% 10%);
		--color-gray-20: hsl(0 0% 20%);
		--color-gray-30: hsl(0 0% 30%);
		--color-gray-50: hsl(0 0% 50%);
		--color-gray-70: hsl(0 0% 70%);
		--color-gray-80: hsl(0 0% 80%);
		--color-gray-85: hsl(0 0% 85%);
		--color-gray-90: hsl(0 0% 90%);
		--color-gray-95: hsl(0 0% 95%);
		--color-default: light-dark(var(--color-gray-10), var(--color-gray-95));
		--color-background: light-dark(var(--color-gray-95), var(--color-gray-10));
		--color-light: var(--color-gray-95);
		--color-highlight: var(--color-gray-95);
		--color-link: var(--color-gray-50);
		--color-focus-visible: var(--color-red);
		--radius-pill: 100vw;
		--radius-card: 8px;
		--radius-circle: 50%;
		--border-focus-visible: 2px;
		--transition-time: 300ms;
		--title-size-extra-large: var(--size-40);
		--title-size-large: var(--size-50);
		--title-size-medium: var(--size-50);
		--title-size-small: var(--size-21);
		--text-size-default: var(--size-14);
		--text-size-large: var(--size-20);

		@media (prefers-reduced-motion: reduce) {
			--transition-time: 0m;
		}

		@media (width >= 48em) {
			--title-size-extra-large: var(--size-64);
			--title-size-large: var(--size-60);
			--title-size-medium: var(--size-40);
			--text-size-default: var(--size-16);
		}

		/* color-scheme: light dark; */
		interpolate-size: allow-keywords;
	}
}@view-transition {
	navigation: auto;
}@layer resets {
	html { 
		color: var(--color-default);
		font-family: var(--font-family-default);
		line-height: 1.2;
		scroll-behavior: smooth;
		scrollbar-gutter: stable;
		-webkit-text-size-adjust: none;
		   -moz-text-size-adjust: none;
		        text-size-adjust: none;
		/* stylelint-disable property-no-vendor-prefix  */
		-webkit-tap-highlight-color: transparent;
		/* stylelint-enable property-no-vendor-prefix  */
	
		&:focus-within {
			scroll-behavior: smooth;
		}
	}
	
	body {
		background-color: var(--color-background);
		font-size: var(--text-size-default);
		margin: 0;
	
		.lock-scroll & {
			overflow: hidden;
		}
	}
	
	/* stylelint-disable selector-no-vendor-prefix  */
	::-moz-selection {
		background: #b3d4fc;
		text-shadow: none;
	}
	/* stylelint-enable selector-no-vendor-prefix  */
	
	::-moz-selection {
		background: #b3d4fc;
		text-shadow: none;
	}
	
	::selection {
		background: #b3d4fc;
		text-shadow: none;
	}
	
	/* Remove default margins */
	:where(figure, blockquote, dl, dd) {
		margin: 0;
	}
	
	/* Remove default color */
	a {
		color: var(--color-link, inherit);
		
		&:active,
		&:hover,
		&:focus {
			outline-color: transparent;
		}
		
		&:focus-visible {
			outline: var(--border-focus-visible) solid var(--color-focus-visible);
		}
		
		&:not(.button) {
			text-decoration-color: hsl(from var(--color-underline, var(--color-link)) h s l / var(--alpha-underline, 0));
			-webkit-text-decoration-skip: ink;
			        text-decoration-skip-ink: auto;
			transition: color var(--transition-time) ease-in-out, text-decoration-color var(--transition-time) ease-in-out;
			
			&:hover {
				--alpha-underline: 1;
				--color-link: var(--color-gray-30);
			}
		}
	
		&[disabled] {
			cursor: none;
			pointer-events: none;
		}
	}
	
	/* Inherit fonts for inputs and buttons */
	:where(input, button, textarea, select, cite, label) {
		font: inherit;
	}
	
	/* Set textarea resize to only be vertical */
	textarea {
		resize: vertical;
	}
	
	/* Remove default button styles */
	button {
		border: none;
		background: none;
		color: inherit;
		cursor: pointer;
		padding: 0;
	
		&:focus-visible {
			outline: var(--border-focus-visible) solid var(--color-focus-visible);
		}
	
		&[disabled] {
			cursor: none;
			pointer-events: none;
		}
	}
	
	[role='button'] {
		cursor: pointer;
	}
	
	/* Set default font weight for strong tag */
	strong {
		font-weight: var(--font-weight-bold);
	}
	
	/**
	* Set default image styles
	*/
	img {
		block-size: auto;
		font-style: italic;
		max-inline-size: 100%;
		vertical-align: middle;
	}
	
	/*
	* Set SVG to be scalable
	*/
	svg {
		block-size: auto;
		display: block;
		inline-size: 100%;
	}

	/*
	* Global class to remove list styles
	*/
	ul[role='list'],
	ol[role='list'] {
		list-style-type: none;
		padding-inline-start: 0;
		margin-block: 0;
	}

	fieldset {
		border: none;
		margin-inline: 0;
		padding: 0;
	}

	legend {
		padding: 0;
	}
}@layer base {
	.main {
		margin-inline: auto;
		max-inline-size: 100rem;
	}

	.center-content {
		--section-gutter: 15px;
		--inner-max-width: 60rem;
		--content-max-width: 75rem;
		--breakout-max-width: 87.5rem;
		--content-size: calc((var(--content-max-width) - var(--inner-max-width)) / 2);
		--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

		display: grid;
		grid-template-columns:
		[full-width-start] minmax(var(--section-gutter), 1fr)
		[breakout-start] minmax(0, var(--breakout-size))
		[content-start] minmax(0, var(--content-size))
		[inner-start]
			min(100% - var(--section-gutter) * 2, var(--inner-max-width))
		[inner-end]
		minmax(0, var(--content-size))[content-end]
		minmax(0, var(--breakout-size))[breakout-end]
		minmax(var(--section-gutter), 1fr) [full-width-end];
		row-gap: 40px;

		@media (width >= 48em) {
			--section-gutter: 30px;
		}

		& > * {
			grid-column: content;
		}

		& .inner {
			grid-column: inner;
		}

		& .breakout {
			grid-column: breakout;
		}

		& .full-width {
			grid-column: full-width;
		}
	}

	.section {
		margin-block: var(--section-block-spacing, 30px);

		&[class*='bg-'] {
			margin-block: 0;
			padding-block: var(--section-block-spacing, 30px);
		}

		&.bg-image {
			background-image: var(--background-image);
			background-size: cover;
			-o-border-image: linear-gradient(
			hsl(from var(--color-gray-20) h s l / 80%)) 1;
			   border-image: linear-gradient(
			hsl(from var(--color-gray-20) h s l / 80%))
			fill 1;
		}
	}

	.divider {
		border: none;
		border-block-start: 4px solid var(--color-green);
		margin: 0;
	}
}@layer base {

	:is(h1, h2, h3, h4, h5, h6), p {
		margin-block: 0;
	}

	:is(h1, h2, h3, h4, h5, h6) {
		font-size: var(--title-font-size, inherit);
		font-weight: var(--title-font-weight, var(--font-weight-regular));
		text-wrap: balance;

		&:not(:last-child) {
			margin-block-end: var(--title-spacing, 16px);
		}
	}

	p {
		text-wrap: pretty;

		& + p {
			margin-block-start: 12px;
		}

		& a {
			--alpha-underline: 1;
		}
	}

	.title-small {
		--title-font-size: var(--title-size-small);
	}

	.title-medium {
		--title-font-size: var(--title-size-medium);
	}

	.title-large {
		--title-font-size: var(--title-size-large);
	}

	.title-extra-large {
		--title-font-size: var(--title-size-extra-large);
	}

	.text-align-center {
		text-align: center;
	}

	.text-align-right {
		text-align: right;
	}

	.color-light {
		color: var(--color-light);
	}
}@layer components {
	.button-group {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: var(--button-gap, 16px);
		justify-content: var(--button-justify, start);

		&.justify-center {
			--button-justify: center;
		}

		&.justify-end {
			--button-justify: end;
		}

		&.gap-small {
			--button-gap: 8px;
		}

		&.gap-large {
			--button-gap: 24px;
		}
	}

	.button {
		align-items: center;
		color: var(--button-color, var(--color-link));
		display: inline flex;
		font-size: var(--button-font-size, var(--text-size-large));
		font-weight: var(--font-weight-bold);
		gap: 8px;
		justify-content: center;
		line-height: 1;
		text-align: center;
		text-wrap: nowrap;
		text-decoration: underline;
		text-decoration-color: hsl(from var(--button-color, var(--color-link)) h s l / var(--alpha-underline, 0));
		text-transform: uppercase;
		transition:
		background-color var(--transition-time) ease-in-out,
		color var(--transition-time) ease-in-out,
		text-decoration-color var(--transition-time) ease-in-out;

		&.button-primary {
			--button-color: var(--color-gray-10);

			background-color: var(--button-background-color, var(--color-green));
			border-radius: var(--radius-pill);
			padding: var(--size-12) var(--size-21);

			&:hover,
			a:hover & {
				--alpha-underline: 1;
				--button-color: var(--color-green);
				--button-background-color: light-dark(var(--color-gray-10), var(--color-gray-95));
			}
		}
	}
}@layer components {
	.card-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		
		&:has(.card-default) {
			gap: 14px 80px;
		}

		&:has(.card-overlay) {
			gap: 28px;
		}

		&:has(.card-subscribe) {
			gap: 60px;
		}

		&:has(.card-subscribe:hover) .card-subscribe:not(:hover) {
			opacity: .5;
		}
	}

	.card {
		border-radius: var(--radius-card);
		overflow: hidden;
	}

	.card-title {
		--title-font-size: var(--size-30);
	}

	.card-default {
		background-color: var(--color-white);
		border: 1px solid var(--color-gray-80);
		display: flex;
		flex-direction: column;
		gap: 14px;
		justify-content: space-between;
		padding: 30px 8px 8px;
		text-align: center;

		& .card-image {
			background-color: var(--color-gray-95);
			border: 1px solid var(--color-gray-80);
			border-radius: 0 0 var(--radius-card) var(--radius-card);
			display: grid;
			padding: 40px 16px 16px;
			place-content: center;
		}
	}

	.card-overlay {
		color: var(--color-white);
		display: grid;
		isolation: isolate;

		&.card-featured {
			@media (width >= 48em) {
				grid-column: span 2;
			}
		}

		& :where(.card-image, .card-title) {
			grid-column: 1;
			grid-row: 1;
		}

		& .card-title {
			align-self: end;
			padding-inline-start: 20px;
			padding-block-end: 20px;
			z-index: 1;
		}

		& .card-image {
			position: relative;

			&::before {
				background-color: hsl(from var(--color-black) h s l / 80%);
				content: '';
				inset: 0;
				position: absolute;
			}
		}

		& img {
			block-size: 100%;
			inline-size: 100%;
			-o-object-fit: cover;
			   object-fit: cover;
		}
	}

	.card-subscribe {
		background-color: hsl(from var(--color-gray-80) h s l / 50%);
		display: grid;
		color: var(--color-white);
		gap: 26px;
		padding: 38px 8px 8px;
		text-align: center;
		text-decoration: none;
		transition: opacity var(--transition-time) ease-in-out;

		& .card-content {
			background-color: hsl(from var(--color-gray-20) h s l / 50%);
			border-radius: 0 0 var(--radius-card) var(--radius-card);
			display: grid;
			gap: 30px;
			justify-items: center;
			padding: 30px 15px;
		}

		& .card-price {
			aspect-ratio: 1;
			border: 8px solid var(--color-green);
			border-radius: var(--radius-circle);
			display: grid;
			font-size: var(--size-30);
			inline-size: 114px;
			place-content: center;
		}
	}
}@layer components {
	.header {
		margin-block-end: 25px;
		position: relative;
	}

	.header-content {
		align-items: center;
		display: flex;
		gap: 18px;

		@media (width >= 48em) {
			padding-block-end: 40px;
			position: relative;
		}
		
		& .button-group {
			margin-inline-start: auto;
		}
	}

	.header-logo {
		flex: 0 0 auto;

		& img {
			display: block;
			block-size: 120px;
			inline-size: auto;
			max-inline-size: 240px;
			object-fit: contain;
		}

		@media (width >= 48em) {
			grid-column: 1;
			grid-row: 1;

			& img {
				block-size: 160px;
				max-inline-size: 320px;
			}
		}
	}

	.mobile-nav-button {
		display: grid;
		gap: 8px;

		@media (width >= 48em) {
			display: none;
		}

		&::before,
		&::after {
			content: '';
		}

		&::before,
		&::after,
		& span {
			aspect-ratio: 1;
			background-color: var(--color-gray-10);
			border-radius: var(--radius-circle);
			inline-size: 11px;
		}

		& span {
			grid-row: 2;
			grid-column: 1;
		}
	}

	.header-dropdown {
		@media (width < 48em) {
			background-color: var(--color-background);
			inset: 100% 0 auto;
			overflow: hidden;
			padding: 20px 15px;
			position: absolute;
			transition:
			block-size var(--transition-time) ease-in-out,
			opacity var(--transition-time) ease-in-out,
			display var(--transition-time) allow-discrete;
			
			&[aria-hidden='true'] {
				block-size: 0;
				display: none;
				opacity: 0;
			}

			&[aria-hidden='false'] {
				block-size: auto;
				display: grid;
				opacity: 1;

				@starting-style {
					block-size: 0;
					opacity: 0;
				}
			}
		}
	}

	.header-search {
		align-items: center;
		background-color: var(--color-gray-90);
		border-radius: var(--radius-pill);
		display: flex;
		padding-inline-end: 10px;

		&:focus-within {
			outline: 1px solid var(--color-red);
		}

		& input {
			background-color: transparent;
			border: none;
			outline: none;
			padding: 12px 22px;
		}

		& button {
			aspect-ratio: 1;
			background-color: var(--color-gray-50);
			border-radius: var(--radius-circle);
			color: var(--color-gray-90);
			display: grid;
			inline-size: 30px;
			place-content: center;
		}

		& svg {
			inline-size: 16px;
		}
	}

	.header-nav {
		@media (width >= 48em) {
			inset: auto 0 0;
			position: absolute;
		}

		& ul {
			@media (width >= 48em) {
				display: flex;
				justify-content: space-between;
			}
		}

		& a {
			--color-underline: var(--color-green);

			font-size: var(--text-size-large);
			font-weight: var(--font-weight-bold);
			text-transform: uppercase;
			text-decoration-thickness: .8em;
			-webkit-text-decoration-skip-ink: none;
			        text-decoration-skip-ink: none;
			text-underline-offset: -.4em;
		}
	}

	.header-nav .nav-link.active {
		color: var(--color-gray-30);
		text-decoration-color: var(--color-green);
		--alpha-underline: 1;
	}
}
/* ============================================================
   FelixChess — Figma Header Override
   Navigation + account header based on Figma node 1:2
   ============================================================ */

@layer overrides {
	.fc-header {
		--fc-header-bg: #202020;
		--fc-header-text: #ffffff;
		--fc-header-accent: #9de000;
		--fc-header-height: 126px;
		--fc-header-inner-gap: 24px;
		--fc-header-logo-gap: clamp(24px, 3vw, 48px);
		--fc-header-nav-gap: clamp(18px, 1.8vw, 34px);
		--fc-header-action-gap: 12px;
		--fc-header-action-width: 126px;

		background: var(--fc-header-bg);
		color: var(--fc-header-text);
		margin-block-end: 0;
		position: relative;
		z-index: 20;
	}

	.fc-header__inner {
		align-items: center;
		display: flex;
		gap: var(--fc-header-inner-gap);
		margin-inline: auto;
		max-width: 1512px;
		min-height: var(--fc-header-height);
		min-width: 0;
		padding: 12px 37px;
		position: relative;
	}

	.fc-header__logo {
		flex: 0 0 auto;
		margin-inline-end: var(--fc-header-logo-gap);
	}

	.fc-header__logo img {
		display: block;
		width: 99px;
		height: 112px;
		max-width: none;
		object-fit: contain;
	}

	.fc-header__dropdown {
		align-self: center;
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		padding-top: 0;
	}

	.fc-header__nav {
		inset: auto;
		min-width: 0;
		position: static;
	}

	.fc-header__nav ul {
		align-items: center;
		display: flex;
		flex-wrap: nowrap;
		gap: var(--fc-header-nav-gap);
		justify-content: flex-start;
		min-width: 0;
		overflow: hidden;
	}

	.fc-header__nav .nav-item {
		flex: 0 1 auto;
		min-width: 0;
	}

	.fc-header__nav .nav-link {
		color: var(--fc-header-text);
		display: inline-flex;
		align-items: center;
		min-height: 30px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		position: relative;
	}

	.fc-header__nav .nav-link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 3px;
		border-radius: 999px;
		background: var(--fc-header-accent);
		opacity: 0;
		transform: scaleX(0.75);
		transform-origin: center;
		transition:
				opacity 180ms ease,
				transform 180ms ease;
	}

	.fc-header__nav .nav-link:hover,
	.fc-header__nav .nav-link:focus-visible,
	.fc-header__nav .nav-link.active {
		color: var(--fc-header-text);
		text-decoration: none;
	}

	.fc-header__nav .nav-link:hover::after,
	.fc-header__nav .nav-link:focus-visible::after,
	.fc-header__nav .nav-link.active::after {
		opacity: 1;
		transform: scaleX(1);
	}

	.fc-header__account {
		align-self: center;
		align-items: flex-end;
		display: flex;
		flex: 0 0 auto;
		flex-direction: column;
		gap: 10px;
		inline-size: auto;
		margin-inline-start: auto;
		min-inline-size: max-content;
		padding-top: 0;
	}

	.fc-header__account--authenticated {
		min-inline-size: var(--fc-header-action-width);
		position: relative;
		transform: translateY(-2px);
	}

	.fc-header:not(.fc-header--compact) .fc-header__account:not(.fc-header__account--authenticated) {
		inline-size: auto;
	}

	.fc-header__account .button-group {
		gap: 10px;
		justify-content: flex-end;
		margin-inline-start: 0;
	}

	.fc-header:not(.fc-header--compact) .fc-header__account:not(.fc-header__account--authenticated) .fc-header__actions {
		flex-wrap: nowrap;
		gap: var(--fc-header-action-gap);
	}

	.fc-header__welcome {
		color: var(--fc-header-text);
		font-size: 14px;
		font-weight: 400;
		line-height: 1.2;
		margin: 0;
		inline-size: min(320px, calc(100vw - 48px));
		max-inline-size: 320px;
		overflow: hidden;
		position: absolute;
		right: 0;
		top: calc(100% + 10px);
		text-overflow: ellipsis;
		text-align: right;
		white-space: nowrap;
	}

	.fc-header__welcome a {
		color: var(--fc-header-text);
		display: inline;
		position: relative;
		text-decoration: none;
	}

	.fc-header__welcome a::after {
		background: var(--fc-header-accent);
		bottom: -5px;
		content: "";
		height: 3px;
		left: 0;
		opacity: 0;
		position: absolute;
		right: 0;
		transform: scaleX(0.75);
		transform-origin: center;
		transition:
				opacity 180ms ease,
				transform 180ms ease;
	}

	.fc-header__welcome a:hover,
	.fc-header__welcome a:focus-visible {
		color: var(--fc-header-text);
		text-decoration: none;
	}

	.fc-header__welcome a:hover::after,
	.fc-header__welcome a:focus-visible::after {
		opacity: 1;
		transform: scaleX(1);
	}

	.fc-header__login-button,
	.fc-header__account .button-secondary {
		box-sizing: border-box;
		inline-size: var(--fc-header-action-width);
		max-width: var(--fc-header-action-width);
		min-width: var(--fc-header-action-width);
		min-height: 40px;
		padding: 0 10px;
		border: 2px solid var(--fc-header-accent);
		border-radius: 43px;
		background: transparent;
		color: var(--fc-header-accent);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.fc-header__signup-button {
		box-sizing: border-box;
		inline-size: var(--fc-header-action-width);
		max-width: var(--fc-header-action-width);
		min-width: var(--fc-header-action-width);
		min-height: 40px;
		padding: 0 10px;
		border: 2px solid var(--fc-header-accent);
		border-radius: 43px;
		background: var(--fc-header-accent);
		color: #202020;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.fc-header:not(.fc-header--compact) .fc-header__account:not(.fc-header__account--authenticated) .fc-header__login-button {
		inline-size: var(--fc-header-action-width);
		max-width: var(--fc-header-action-width);
		min-width: var(--fc-header-action-width);
	}

	.fc-header__login-button:hover,
	.fc-header__login-button:focus-visible,
	.fc-header__account .button-secondary:hover,
	.fc-header__account .button-secondary:focus-visible {
		background: var(--fc-header-accent);
		color: #202020;
		text-decoration: none;
	}

	.fc-header__signup-button:hover,
	.fc-header__signup-button:focus-visible {
		background: transparent;
		color: var(--fc-header-accent);
		text-decoration: none;
	}

	.fc-header__upgrade-button {
		box-sizing: border-box;
		inline-size: 150px;
		max-width: 150px;
		min-width: 150px;
		min-height: 40px;
		padding: 0 10px;
		border-radius: 43px;
		font-size: 16px;
	}

	.fc-header__mobile-toggle {
		display: none;
	}

	.fc-header.fc-header--compact {
		--fc-header-height: auto;
		--fc-header-inner-gap: 18px;
		--fc-header-logo-gap: 0;
	}

	.fc-header.fc-header--compact .fc-header__inner {
		align-items: center;
		flex-wrap: wrap;
		gap: 18px;
		min-height: 96px;
		padding: 16px 20px;
	}

	.fc-header.fc-header--compact .fc-header__logo {
		margin-inline-end: 0;
	}

	.fc-header.fc-header--compact .fc-header__logo img {
		width: 74px;
		height: auto;
	}

	.fc-header.fc-header--compact .fc-header__mobile-toggle {
		display: grid;
		margin-left: auto;
		gap: 6px;
	}

	.fc-header.fc-header--compact .fc-header__mobile-toggle::before,
	.fc-header.fc-header--compact .fc-header__mobile-toggle::after,
	.fc-header.fc-header--compact .fc-header__mobile-toggle span {
		content: "";
		display: block;
		width: 26px;
		height: 2px;
		border-radius: 999px;
		background: var(--fc-header-accent);
	}

	.fc-header.fc-header--compact .fc-header__mobile-toggle span {
		grid-row: auto;
		grid-column: auto;
	}

	.fc-header.fc-header--compact .fc-header__dropdown {
		order: 4;
		flex-basis: 100%;
		min-width: 100%;
		overflow: visible;
		padding-top: 12px;
	}

	.fc-header.fc-header--compact .fc-header__dropdown[aria-hidden='true'] {
		block-size: 0;
		display: none;
		opacity: 0;
	}

	.fc-header.fc-header--compact .fc-header__dropdown[aria-hidden='false'] {
		block-size: auto;
		display: grid;
		opacity: 1;
	}

	.fc-header.fc-header--compact .fc-header__nav {
		position: static;
	}

	.fc-header.fc-header--compact .fc-header__nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		overflow: visible;
	}

	.fc-header.fc-header--compact .fc-header__account {
		align-items: flex-start;
		order: 3;
		flex-basis: 100%;
		inline-size: auto;
		max-inline-size: none;
		padding-top: 10px;
		margin-inline-start: 0;
	}

	.fc-header.fc-header--compact .fc-header__account--authenticated {
		inline-size: auto;
		max-inline-size: none;
		position: static;
		transform: none;
	}

	.fc-header.fc-header--compact .fc-header__account .button-group {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.fc-header.fc-header--compact .fc-header__welcome {
		inline-size: auto;
		max-inline-size: none;
		overflow: visible;
		position: static;
		text-align: left;
		white-space: normal;
	}

	@media (max-width: 80em) {
		.fc-header {
			--fc-header-inner-gap: 18px;
			--fc-header-logo-gap: 28px;
			--fc-header-nav-gap: 22px;
			--fc-header-action-gap: 10px;
			--fc-header-action-width: 116px;
		}

		.fc-header__welcome {
			inline-size: min(280px, calc(100vw - 48px));
			max-inline-size: 280px;
		}
	}

	@media (max-width: 71.25em) {
		.fc-header {
			--fc-header-inner-gap: 14px;
			--fc-header-logo-gap: 18px;
			--fc-header-nav-gap: 14px;
			--fc-header-action-gap: 8px;
			--fc-header-action-width: 108px;
		}

		.fc-header__inner {
			padding-inline: 24px;
		}

		.fc-header__welcome {
			inline-size: min(240px, calc(100vw - 48px));
			max-inline-size: 240px;
		}
	}

	@media (max-width: 66.25em) {
		.fc-header {
			--fc-header-logo-gap: 12px;
			--fc-header-nav-gap: 10px;
		}
	}

	@media (max-width: 62em) {
		.fc-header {
			--fc-header-height: auto;
		}

		.fc-header__inner {
			align-items: center;
			flex-wrap: wrap;
			gap: 18px;
			min-height: 96px;
			padding: 16px 20px;
		}

		.fc-header__logo img {
			width: 74px;
			height: auto;
		}

		.fc-header__logo {
			margin-inline-end: 0;
		}

		.fc-header__mobile-toggle {
			display: grid;
			margin-left: auto;
			gap: 6px;
		}

		.fc-header__mobile-toggle::before,
		.fc-header__mobile-toggle::after,
		.fc-header__mobile-toggle span {
			content: "";
			display: block;
			width: 26px;
			height: 2px;
			border-radius: 999px;
			background: var(--fc-header-accent);
		}

		.fc-header__mobile-toggle span {
			grid-row: auto;
			grid-column: auto;
		}

		.fc-header__dropdown {
			order: 4;
			flex-basis: 100%;
			min-width: 100%;
			padding-top: 12px;
		}

		.fc-header__nav {
			position: static;
		}

		.fc-header__nav ul {
			flex-direction: column;
			align-items: flex-start;
			gap: 18px;
		}

		.fc-header__account {
			align-items: flex-start;
			order: 3;
			flex-basis: 100%;
			inline-size: auto;
			max-inline-size: none;
			padding-top: 10px;
			margin-inline-start: 0;
		}

		.fc-header__account--authenticated {
			inline-size: auto;
			max-inline-size: none;
			position: static;
			transform: none;
		}

		.fc-header__account .button-group {
			flex-wrap: wrap;
			justify-content: flex-start;
		}

		.fc-header__welcome {
			inline-size: auto;
			max-inline-size: none;
			overflow: visible;
			position: static;
			text-align: left;
			white-space: normal;
		}
	}
}