/**
 * Brizz Global Styles
 *
 * Design tokens, typography, spacing, interaction rules.
 * Extracted from wireframe v5.1 + system prompt §2.3 and §4.5.
 *
 * @version 1.0.0
 */

/* ─────────────────────────────────────────────
 * 1. FONT FACE DECLARATIONS
 * ───────────────────────────────────────────── */

@font-face {
	font-family: 'Quicksand';
	src: url('../fonts/quicksand-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Quicksand';
	src: url('../fonts/quicksand-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Quicksand';
	src: url('../fonts/quicksand-semibold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Quicksand';
	src: url('../fonts/quicksand-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-semibold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ─────────────────────────────────────────────
 * 2. CSS CUSTOM PROPERTIES (Design Tokens)
 * ───────────────────────────────────────────── */

:root {
	/* Brand colors */
	--brizz-primary:       #6813a5;
	--brizz-primary-light: #8b3cc7;
	--brizz-secondary:     #ff304d;
	--brizz-bg:            #dbd3ea;
	--brizz-bg-light:      #f3f0f8;
	--brizz-dark:          #1A1A2E;

	/* Neutral palette */
	--brizz-white:  #ffffff;
	--brizz-g50:    #f9fafb;
	--brizz-g100:   #f3f4f6;
	--brizz-g200:   #e5e7eb;
	--brizz-g300:   #d1d5db;
	--brizz-g400:   #9ca3af;
	--brizz-g500:   #6b7280;
	--brizz-g600:   #4b5563;
	--brizz-g700:   #374151;
	--brizz-g800:   #1f2937;
	--brizz-g900:   #111827;

	/* Typography */
	--font-heading:  'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body:     'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

	/* Spacing (8px grid) */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-7:  28px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* Border radius */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   14px;
	--radius-pill: 20px;
	--radius-full: 50%;

	/* Shadows */
	--shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
	--shadow-base:  0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-md:    0 2px 12px rgba(0, 0, 0, 0.06);
	--shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
	--shadow-lg:    0 4px 24px rgba(0, 0, 0, 0.10);
	--shadow-fab:   0 4px 20px rgba(104, 19, 165, 0.4);

	/* Transitions */
	--transition-fast:  150ms ease-out;
	--transition-base:  200ms ease-out;
	--transition-slow:  300ms ease-out;

	/* Layout */
	--max-width-page:    960px;
	--max-width-content: 680px;
	--sidebar-width:     180px;
	--nav-height:        48px;
	--sticky-top:        48px;
}

/* ─────────────────────────────────────────────
 * 3. RESET & BASE STYLES
 * ───────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--brizz-g800);
	background-color: var(--brizz-g50);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── Astra theme overrides ──
 * Astra adds decorations, borders, and spacing to headings/elements
 * that conflict with our custom templates. Reset them here. */

.brizz-homepage h1,
.brizz-homepage h2,
.brizz-homepage h3,
.brizz-homepage h4,
.brizz-404 h1,
.brizz-404 h2 {
	border: none !important;
	border-bottom: none !important;
	text-decoration: none !important;
	padding-bottom: 0 !important;
}

/* Astra entry-content overrides */
.brizz-homepage .entry-content,
.brizz-homepage .ast-article-post,
.brizz-homepage .ast-separate-container,
.brizz-404 .entry-content,
.brizz-404 .ast-article-post,
.brizz-404 .ast-separate-container {
	background: transparent;
	padding: 0;
	margin: 0;
}

/* Astra may add borders/underlines to headings via pseudo-elements */
.brizz-homepage h1::before,
.brizz-homepage h1::after,
.brizz-homepage h2::before,
.brizz-homepage h2::after,
.brizz-404 h1::before,
.brizz-404 h1::after {
	display: none !important;
	content: none !important;
}

/* Astra separator line on headings */
.brizz-homepage .ast-title-bar-wrap,
.brizz-homepage .ast-archive-description,
.brizz-404 .ast-title-bar-wrap {
	display: none;
}

/* ── Astra link color overrides ──
 * Astra sets link colors with high specificity via body/a selectors.
 * We must override everywhere our custom components render links. */

.brizz-header a,
.brizz-header a:visited {
	color: inherit;
	text-decoration: none;
}

.brizz-header a:hover {
	color: inherit;
}

/* Footer link overrides — prevent Astra blue on dark footer */
.brizz-footer,
.brizz-footer a,
.brizz-footer a:visited,
.brizz-footer a:hover {
	color: var(--brizz-g300);
}

.brizz-footer .brizz-footer__platform a {
	color: var(--brizz-g300);
}

.brizz-footer .brizz-footer__platform a:hover {
	color: var(--brizz-white);
}

.brizz-footer .brizz-footer__legal a {
	color: var(--brizz-g500);
}

.brizz-footer .brizz-footer__legal a:hover {
	color: var(--brizz-g300);
}

.brizz-footer .brizz-footer__tagline,
.brizz-footer .brizz-footer__copyright {
	color: var(--brizz-g400);
}

/* Ensure footer background isn't overridden */
footer.brizz-footer {
	background: var(--brizz-dark) !important;
	display: block !important;
	visibility: visible !important;
}

/* Generic Astra wrapper overrides */
.brizz-homepage #content,
.brizz-homepage .ast-container,
.brizz-homepage .site-content,
.brizz-404 #content,
.brizz-404 .ast-container {
	padding: 0;
	margin: 0;
	max-width: none;
}

/* Prevent Astra from hiding/overriding our content areas */
.brizz-homepage .site-main,
.brizz-homepage .entry-content,
.brizz-404 .site-main {
	padding: 0;
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--brizz-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--brizz-primary-light);
}

/* Override Astra's link color globally on our pages */
body.brizz-homepage a,
body.brizz-404 a {
	color: var(--brizz-primary);
}

body.brizz-homepage a:hover,
body.brizz-404 a:hover {
	color: var(--brizz-primary-light);
}

/* ─────────────────────────────────────────────
 * 4. TYPOGRAPHY
 * ───────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.25;
	color: var(--brizz-g900);
}

h1 {
	font-size: clamp(24px, 5vw, 30px);
	margin-bottom: var(--space-3);
}

h2 {
	font-size: clamp(19px, 4vw, 22px);
	margin-bottom: var(--space-3);
}

h3 {
	font-size: clamp(16px, 3.5vw, 18px);
	font-weight: 600;
	margin-bottom: var(--space-2);
}

p {
	margin-bottom: var(--space-4);
	line-height: 1.6;
}

/* ─────────────────────────────────────────────
 * 5. ACCESSIBILITY
 * ───────────────────────────────────────────── */

/* Focus rings — 2px solid primary, offset 2px */
:focus-visible {
	outline: 2px solid var(--brizz-primary);
	outline-offset: 2px;
}

/* Skip to content link */
.brizz-skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	background: var(--brizz-primary);
	color: var(--brizz-white);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	z-index: 1000;
	transition: top var(--transition-fast);
}

.brizz-skip-link:focus {
	top: var(--space-2);
	color: var(--brizz-white);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Screen reader only */
.brizz-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ─────────────────────────────────────────────
 * 6. SHARED COMPONENTS
 * ───────────────────────────────────────────── */

/* --- Container --- */
.brizz-container {
	max-width: var(--max-width-page);
	margin: 0 auto;
	padding: 0 var(--space-10);
}

@media (max-width: 768px) {
	.brizz-container {
		padding: 0 var(--space-4);
	}
}

/* --- Breadcrumb --- */
.brizz-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: 12px;
	color: var(--brizz-g400);
	font-family: var(--font-body);
	padding: var(--space-3) 0;
	flex-wrap: wrap;
}

.brizz-breadcrumb a {
	color: var(--brizz-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.brizz-breadcrumb a:hover {
	color: var(--brizz-primary-light);
}

.brizz-breadcrumb__separator {
	color: var(--brizz-g300);
	margin: 0 2px;
}

.brizz-breadcrumb__current {
	color: var(--brizz-g600);
}

/* --- Card base --- */
.brizz-card {
	background: var(--brizz-white);
	border: 1px solid var(--brizz-g200);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition: box-shadow var(--transition-base);
}

.brizz-card:hover {
	box-shadow: var(--shadow-hover);
}

/* --- Category badge --- */
.brizz-badge {
	display: inline-block;
	background: var(--brizz-bg-light);
	color: var(--brizz-primary);
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* --- Button base --- */
.brizz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 20px;
	border-radius: var(--radius-md);
	font-size: 12px;
	font-weight: 700;
	font-family: var(--font-heading);
	text-align: center;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	transition: all var(--transition-base);
	min-height: 44px;
	min-width: 44px;
}

.brizz-btn--primary {
	background: var(--brizz-primary) !important;
	color: var(--brizz-white) !important;
	text-decoration: none !important;
}

.brizz-btn--primary:hover,
.brizz-btn--primary:visited {
	background: var(--brizz-primary-light) !important;
	color: var(--brizz-white) !important;
	text-decoration: none !important;
}

.brizz-btn--secondary {
	background: var(--brizz-secondary) !important;
	color: var(--brizz-white) !important;
	text-decoration: none !important;
}

.brizz-btn--secondary:hover,
.brizz-btn--secondary:visited {
	opacity: 0.9;
	color: var(--brizz-white) !important;
	text-decoration: none !important;
}

/* --- Disclaimer --- */
.brizz-disclaimer {
	background: var(--brizz-g100);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	font-size: 10px;
	color: var(--brizz-g500);
	font-family: var(--font-body);
	line-height: 1.5;
	margin-bottom: var(--space-6);
}

.brizz-disclaimer strong {
	font-weight: 600;
}

/* --- Desi Tip callout --- */
.brizz-desi-tip {
	background: #fef9ee;
	border: 1px solid #fcd34d;
	border-radius: var(--radius-md);
	padding: 10px 14px;
	font-size: 12px;
	color: #92400e;
	font-family: var(--font-body);
	line-height: 1.6;
	margin-top: var(--space-2);
}

.brizz-desi-tip strong {
	font-weight: 600;
}

/* --- At-a-Glance table --- */
.brizz-at-a-glance {
	background: var(--brizz-white);
	border: 1px solid var(--brizz-g200);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: var(--space-4);
}

.brizz-at-a-glance__header {
	background: var(--brizz-primary);
	padding: 8px var(--space-4);
	font-family: var(--font-heading);
	font-size: 12px;
	font-weight: 700;
	color: var(--brizz-white);
}

.brizz-at-a-glance__row {
	display: flex;
	padding: 8px var(--space-4);
	border-bottom: 1px solid var(--brizz-g100);
	font-size: 12px;
	font-family: var(--font-body);
}

.brizz-at-a-glance__row:last-child {
	border-bottom: none;
}

.brizz-at-a-glance__label {
	width: 160px;
	color: var(--brizz-g500);
	font-weight: 500;
	flex-shrink: 0;
}

.brizz-at-a-glance__value {
	color: var(--brizz-g800);
	font-weight: 600;
}

@media (max-width: 768px) {
	.brizz-at-a-glance__label {
		width: 120px;
	}

	.brizz-at-a-glance__row {
		padding: 8px 14px;
	}
}

/* --- FAQ accordion (native details/summary) --- */
.brizz-faq details {
	background: var(--brizz-white);
	border: 1px solid var(--brizz-g200);
	border-radius: var(--radius-md);
	margin-bottom: 6px;
	overflow: hidden;
}

.brizz-faq summary {
	padding: 12px var(--space-4);
	font-size: 14px;
	font-weight: 600;
	color: var(--brizz-g700);
	font-family: var(--font-heading);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	min-height: 44px;
}

.brizz-faq summary::-webkit-details-marker {
	display: none;
}

.brizz-faq summary::after {
	content: '+';
	color: var(--brizz-primary);
	font-size: 18px;
	flex-shrink: 0;
	margin-left: var(--space-2);
	transition: transform var(--transition-base);
}

.brizz-faq details[open] summary::after {
	content: '−';
}

.brizz-faq .brizz-faq__answer {
	padding: 0 var(--space-4) 12px;
	font-size: 13px;
	color: var(--brizz-g500);
	font-family: var(--font-body);
	line-height: 1.6;
	border-top: 1px solid var(--brizz-g100);
}

@media (max-width: 768px) {
	.brizz-faq summary {
		padding: 11px 14px;
		font-size: 13px;
	}

	.brizz-faq .brizz-faq__answer {
		padding: 0 14px 11px;
		font-size: 12px;
	}
}

/* --- Sponsored slot --- */
.brizz-sponsored {
	margin: 14px 0;
}

.brizz-sponsored__container {
	width: 100%;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.brizz-sponsored--leaderboard .brizz-sponsored__container {
	height: 90px;
}

.brizz-sponsored--banner .brizz-sponsored__container {
	height: 60px;
}

.brizz-sponsored__label {
	position: absolute;
	top: 4px;
	left: 8px;
	font-size: 8px;
	color: var(--brizz-g400);
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.brizz-sponsored__inner a {
	display: block;
}

.brizz-sponsored__inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* Placeholder (admin-visible only — when no ad is set) */
.brizz-sponsored__placeholder {
	background: linear-gradient(135deg, rgba(104, 19, 165, 0.03), rgba(219, 211, 234, 0.15));
	border: 1.5px dashed rgba(104, 19, 165, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-md);
}

.brizz-sponsored__placeholder-text {
	font-size: 11px;
	font-weight: 600;
	color: var(--brizz-primary);
	font-family: var(--font-heading);
	opacity: 0.5;
}

@media (max-width: 768px) {
	.brizz-sponsored--leaderboard .brizz-sponsored__container {
		height: 70px;
	}

	.brizz-sponsored--banner .brizz-sponsored__container {
		height: 50px;
	}
}

/* ─────────────────────────────────────────────
 * 7. UTILITY CLASSES
 * ───────────────────────────────────────────── */

.brizz-text-primary   { color: var(--brizz-primary); }
.brizz-text-secondary { color: var(--brizz-secondary); }
.brizz-text-muted     { color: var(--brizz-g500); }

.brizz-font-heading   { font-family: var(--font-heading); }
.brizz-font-body      { font-family: var(--font-body); }

.brizz-mt-0   { margin-top: 0; }
.brizz-mt-2   { margin-top: var(--space-2); }
.brizz-mt-4   { margin-top: var(--space-4); }
.brizz-mb-0   { margin-bottom: 0; }
.brizz-mb-2   { margin-bottom: var(--space-2); }
.brizz-mb-4   { margin-bottom: var(--space-4); }
.brizz-mb-6   { margin-bottom: var(--space-6); }

/* ─────────────────────────────────────────────
 * 8. HEADER
 * ───────────────────────────────────────────── */

.brizz-header {
	background: var(--brizz-white);
	border-bottom: 1px solid var(--brizz-g200);
	position: sticky;
	top: 0;
	z-index: 50;
}

.brizz-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 24px;
	max-width: var(--max-width-page);
	margin: 0 auto;
}

.brizz-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.brizz-header__logo svg {
	height: 32px;
	width: auto;
}

.brizz-header__nav {
	display: flex;
	gap: 0;
	background: var(--brizz-bg-light);
	border-radius: 8px;
	padding: 0;
	height: 34px;
	align-items: stretch;
}

.brizz-header__pill {
	padding: 0 14px;
	font-size: 12px;
	font-weight: 500;
	color: #6b7280;
	background: transparent;
	border-radius: 8px;
	font-family: var(--font-heading);
	text-decoration: none;
	white-space: nowrap;
	transition: background 150ms ease-out;
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
	z-index: 1;
}

.brizz-header__pill:hover {
	background: rgba(104, 19, 165, 0.08);
	color: #6b7280;
	text-decoration: none;
}

.brizz-header__pill--active {
	font-weight: 600;
	color: #fff;
	background: #6813a5;
}

.brizz-header__pill--active:hover {
	background: #8b3cc7;
	color: #fff;
}

.brizz-header__right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.brizz-header__search-desktop {
	display: block;
}

.brizz-header__search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--brizz-white);
	border: 1px solid var(--brizz-g200);
	border-radius: var(--radius-md);
	padding: 6px 12px;
	width: 200px;
	height: 34px;
	transition: border-color var(--transition-fast);
}

.brizz-header__search-form:focus-within {
	border-color: var(--brizz-primary);
}

.brizz-header__search-icon {
	font-size: 13px;
	flex-shrink: 0;
}

.brizz-header__search-input {
	border: none;
	background: none;
	font-size: 12px;
	color: var(--brizz-g700);
	font-family: var(--font-heading);
	font-weight: 500;
	width: 100%;
	outline: none;
}

.brizz-header__search-input::placeholder {
	color: var(--brizz-g400);
	font-family: var(--font-heading);
	font-weight: 400;
}

.brizz-header__mobile-search,
.brizz-header__hamburger {
	display: none !important;
	background: none;
	border: none;
	font-size: 16px;
	cursor: pointer;
	padding: 4px;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

.brizz-header__mobile-menu {
	display: none !important;
	background: var(--brizz-white);
	border-top: 1px solid var(--brizz-g100);
	padding: var(--space-4);
}

.brizz-header__mobile-menu.is-open {
	display: block !important;
}

.brizz-header__mobile-link {
	display: block;
	padding: 12px var(--space-4);
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 500;
	color: var(--brizz-g700);
	text-decoration: none;
	border-radius: var(--radius-md);
}

.brizz-header__mobile-link--active {
	color: var(--brizz-primary);
	font-weight: 700;
	background: var(--brizz-bg-light);
}

.brizz-header__mobile-search-form {
	margin-top: var(--space-3);
}

.brizz-header__mobile-search-form input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--brizz-g200);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 14px;
}

@media (max-width: 768px) {
	.brizz-header__inner {
		padding: 10px 16px;
	}

	.brizz-header__logo svg {
		height: 22px;
	}

	.brizz-header__nav,
	.brizz-header__search-desktop {
		display: none;
	}

	.brizz-header__mobile-search,
	.brizz-header__hamburger {
		display: flex !important;
	}

	.brizz-header__right {
		gap: 8px;
	}
}

/* ─────────────────────────────────────────────
 * 9. FOOTER
 * ───────────────────────────────────────────── */

.brizz-footer {
	background: var(--brizz-dark);
	padding: 28px 40px;
}

.brizz-footer__inner {
	max-width: var(--max-width-page);
	margin: 0 auto;
}

.brizz-footer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
}

.brizz-footer__brand {
	max-width: 320px;
}

.brizz-footer__logo {
	display: inline-block;
	margin-bottom: 6px;
}

.brizz-footer__tagline {
	font-size: 11px;
	color: var(--brizz-g400);
	line-height: 1.6;
	font-family: var(--font-body);
	margin: 0;
}

.brizz-footer__platform {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.brizz-footer__platform a {
	font-size: 12px;
	color: var(--brizz-g300);
	font-weight: 600;
	font-family: var(--font-heading);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.brizz-footer__platform a:hover {
	color: var(--brizz-white);
}

.brizz-footer__bottom {
	padding-top: 14px;
	border-top: 1px solid var(--brizz-g700);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.brizz-footer__legal {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.brizz-footer__legal a {
	font-size: 10px;
	color: var(--brizz-g500);
	font-family: var(--font-body);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.brizz-footer__legal a:hover {
	color: var(--brizz-g300);
}

.brizz-footer__copyright {
	font-size: 10px;
	color: var(--brizz-g500);
	font-family: var(--font-body);
	margin: 0;
}

@media (max-width: 768px) {
	.brizz-footer {
		padding: 24px 16px;
		text-align: center;
	}

	.brizz-footer__top {
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
	}

	.brizz-footer__brand {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

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

	.brizz-footer__platform {
		justify-content: center;
		gap: var(--space-4);
	}

	.brizz-footer__bottom {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.brizz-footer__legal {
		justify-content: center;
		gap: 12px;
	}

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