@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800;900&display=swap");

/* ASB tokens from React src/index.css */
:root {
	--asb-background: #ffffff;
	--asb-foreground: #1f2937;
	--asb-primary: #E42E2D;
	--asb-primary-gradient: linear-gradient(180deg, #F24A48 0%, #C22726 100%);
	--asb-primary-foreground: #ffffff;
	--asb-muted: #6b7280;
	--asb-border: #e5e7eb;
	--asb-secondary: #f3f4f6;
	--asb-font-display: "Montserrat", system-ui, sans-serif;
	--asb-font-body: "Inter", system-ui, sans-serif;
}

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

html {
	overflow-x: hidden;
}

html.lenis,
html.lenis body {
	height: auto;
}

html.lenis:not(.lenis-autoToggle).lenis-stopped {
	overflow: clip;
}

html.lenis [data-lenis-prevent],
html.lenis [data-lenis-prevent-wheel],
html.lenis [data-lenis-prevent-touch] {
	overscroll-behavior: contain;
}

html.lenis [data-lenis-prevent-vertical] {
	overscroll-behavior-y: contain;
}

html.lenis [data-lenis-prevent-horizontal] {
	overscroll-behavior-x: contain;
}

html.lenis.lenis-smooth iframe {
	pointer-events: auto;
}

body {
	margin: 0;
	font-family: var(--asb-font-body);
	color: var(--asb-foreground);
	background: var(--asb-background);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3 {
	font-family: var(--asb-font-display);
}

a {
	color: inherit;
	text-decoration: none;
}

/*
 * Match React: section.section-padding (px-4 md:px-8) > .container-wide (max-w-7xl).
 * Horizontal padding lives on the container so every page inherits the same width.
 */
.asb-container {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 1rem;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.asb-container {
		padding-inline: 2rem;
	}
}

.asb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.asb-btn--primary {
	background: var(--asb-primary-gradient);
	color: var(--asb-primary-foreground);
	border: 1px solid transparent;
}

.asb-btn--primary:hover {
	background: #C22726;
}

.asb-btn--ghost {
	background: transparent;
	border: 1px solid var(--asb-border);
	color: var(--asb-foreground);
}

.asb-btn--ghost:hover {
	background: var(--asb-secondary);
}

/* ExtraaEdge embed (shared) */
.asb-ee-frame-wrap {
	margin: 0 auto;
	width: 370px;
	max-width: 100%;
}
.asb-ee-iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	background: transparent;
}
.asb-ee-fallback {
	margin: 0;
	padding: 1rem;
	color: #64748b;
	text-align: center;
}