/* ====== Alapok és változók ====== */
:root {
	--bg1: #86edc4; /* világos menta */
	--bg2: #cde9c8; /* halvány kék */
	--acc1: #22c55e; /* emerald */
	--acc2: #60a5fa; /* sky */
	--ink: #0b1324; /* sötétebb szöveg */
	--muted: #5b6578;
	--pill: #eaf6ff; /* világos kapszula háttér */
	--pill-ink: #0b3b5a;
	--card: #ffffff;
	--ring: #e8eef6;
	--btn: #4f46e5; /* indigo */
	--btn-h: #4338ca;
}

/* reset jellegű apróságok */
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family:
		Inter,
		system-ui,
		-apple-system,
		Segoe UI,
		Roboto,
		Arial,
		sans-serif;
	color: var(--ink);
	background: #fff;
	line-height: 1.6;
}

/* konténer 1280px */
.container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 16px;
}
@media (min-width: 640px) {
	.container {
		padding-inline: 24px;
	}
}
@media (min-width: 1024px) {
	.container {
		padding-inline: 32px;
	}
}

/* ====== Notice bar ====== */
.notice-bar {
	width: 100%;
	background: #f97316; /* narancsos figyelmeztetés, világosabb */
	color: #fff;
	text-align: center;
	font-size: 12px;
	padding: 8px 10px;
}
@media (min-width: 640px) {
	.notice-bar {
		font-size: 14px;
	}
}

/* ====== Header ====== */
.site-header {
	background: #ffffff;
	border-bottom: 1px solid var(--ring);
}
.header-inner {
	padding: 20px 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-inner a {
	color: #046047;
}
.brand {
	font-weight: 800;
	letter-spacing: 0.5px;
	color: #0b1324;
	text-decoration: none;
	font-size: 26px;
}

/* ====== Hero ====== */
.hero {
	position: relative;
	background: linear-gradient(180deg, var(--bg1), var(--bg2));
	overflow: hidden;
	padding: 28px 0 48px;
}
@media (min-width: 1024px) {
	.hero {
		padding: 56px 0 80px;
	}
}

.hero-grid {
	display: grid;
	gap: 24px;
}
@media (min-width: 1024px) {
	.hero-grid {
		grid-template-columns: 1fr 1.05fr; /* bal: kártya, jobb: szöveg */
		gap: 32px;
		align-items: stretch;
	}
}

/* dekor “buborékok” */
.hero-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(18px);
	opacity: 0.45;
	animation: float 12s ease-in-out infinite;
}
.hero-blob--tl {
	width: 220px;
	height: 220px;
	left: -60px;
	top: -40px;
	background: radial-gradient(circle, #a7f3d0, transparent 60%);
}
.hero-blob--br {
	width: 300px;
	height: 300px;
	right: -80px;
	bottom: -60px;
	background: radial-gradient(circle, #bfdbfe, transparent 60%);
	animation-delay: 1.6s;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
}

/* ====== Offer card ====== */
.offer-card {
	background: linear-gradient(180deg, #ffffffcc, #fffffffa);
	backdrop-filter: saturate(1.2) blur(2px);
	border: 1px solid var(--ring);
	border-radius: 20px;
	box-shadow: 0 12px 36px rgba(15, 28, 53, 0.08);
	padding: 14px;
}
.offer-grid {
	display: grid;
	gap: 18px;
	align-items: center;
	grid-template-columns: 88px 1fr;
}
@media (min-width: 768px) {
	.offer-grid {
		grid-template-columns: 280px 1fr 180px;
	}
}
.offer-logo img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0.95;
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: #64748b;
	font-size: 12px;
	margin: 0 0 6px;
}
.bonus {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
}
.bonus-sub {
	margin: 4px 0 0;
	color: #059669;
	font-weight: 700;
}

.mt {
	margin-top: 14px;
}
.ticks {
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
}
.ticks li {
	position: relative;
	padding-left: 18px;
	margin: 8px 0;
	color: #0f172a;
}
.ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #10b981;
}

.offer-cta {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: flex-end;
}
@media (max-width: 767.98px) {
	.offer-cta {
		justify-content: flex-start;
	}
}
.rating {
	min-width: 86px;
	text-align: center;
}
.rating-num {
	font-weight: 900;
	font-size: 28px;
	color: #4f46e5;
	line-height: 1;
}
.rating-txt {
	font-size: 12px;
	color: #64748b;
	margin-top: 2px;
}

.btn-primary {
	--_bg: var(--btn);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 20px;
	background: var(--_bg);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	box-shadow: 0 8px 18px rgba(79, 70, 229, 0.25);
	transition:
		transform 0.18s ease,
		background 0.18s ease,
		box-shadow 0.18s ease;
}
.btn-primary:hover {
	background: var(--btn-h);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(67, 56, 202, 0.28);
}
.btn-ico {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
}
.btn-ico svg {
	width: 18px;
	height: 18px;
}

.tiny-note {
	font-size: 12px;
	color: #64748b;
	margin: 10px 4px 0 4px;
	font-style: italic;
}

/* ====== Hero copy ====== */
.hero-copy h1 {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.2;
	color: #0b1324;
}
@media (min-width: 640px) {
	.hero-copy h1 {
		font-size: 36px;
	}
}
@media (min-width: 1024px) {
	.hero-copy h1 {
		font-size: 42px;
	}
}

.lead {
	color: var(--muted);
	max-width: 58ch;
}

.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}
.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--pill);
	color: var(--pill-ink);
	border: 1px solid #dbeafe;
	border-radius: 999px;
	padding: 8px 12px;
	font-weight: 600;
	font-size: 13px;
}
.pill svg {
	width: 16px;
	height: 16px;
	color: #0ea5e9;
}

/* ====== Responsív átrendezés ====== */
/* Mobilon: előbb jön a szöveg, majd a kártya */
@media (max-width: 1023.98px) {
	.hero-grid {
		grid-template-columns: 1fr;
	}
	.offer-card {
		order: 2;
	}
	.hero-copy {
		order: 1;
	}
}

/* === Stack one-under-another on all breakpoints === */
.hero-grid {
	display: grid;
	grid-template-columns: 1fr; /* завжди одна колонка */
	gap: 24px;
}
@media (min-width: 1024px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* невеликий відступ між текстом і карткою */
.hero-copy {
	margin-bottom: 4px;
}

/* картка на всю ширину контейнера */
.offer-card {
	width: 100%;
}

/* необов'язково: зробити ліди трішки більшими, щоб верхній блок виглядав як hero */
.lead {
	font-size: 1.05rem;
}
@media (min-width: 640px) {
	.lead {
		font-size: 1.125rem;
	}
}

:root {
	--ink: #0e1b2a;
	--muted: #5b6676;
	--bg: #ffffff;
	--soft-a: #f4fbff; /* very light cyan */
	--soft-b: #f6fff7; /* very light mint */
	--soft-c: #f7f5ff; /* very light lilac */
	--card: #ffffff;
	--ring: #e8eef6;
	--brand: #3b82f6; /* sky */
	--brand-2: #10b981; /* emerald */
	--accent: #a78bfa; /* lavender */
}

img {
	max-width: 100%;
	display: block;
}
.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px) {
	.container {
		padding: 0 24px;
	}
}
@media (min-width: 1024px) {
	.container {
		padding: 0 32px;
	}
}

.section {
	margin: 48px 0;
}
.section h2 {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: 0.2px;
}
@media (min-width: 640px) {
	.section h2 {
		font-size: 34px;
	}
}
.section p.lead {
	color: var(--muted);
	max-width: 62ch;
}

/* cards */
.card {
	background: var(--card);
	border: 1px solid var(--ring);
	border-radius: 20px;
	box-shadow: 0 10px 26px rgba(20, 34, 54, 0.06);
	padding: 20px;
}
@media (min-width: 640px) {
	.card {
		padding: 24px;
	}
}
.badge {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #eef2ff;
	color: #4f46e5;
	font-weight: 800;
}
.kv {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.kv b {
	font-weight: 800;
}

/* pills */
.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 13px;
	color: #0a3a54;
	background: #eaf6ff;
	border: 1px solid #d8ecff;
	border-radius: 999px;
	padding: 8px 12px;
}

/* small fade & float */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes floaty {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}
.fade {
	animation: fadeInUp 0.4s ease both;
}
.floaty {
	animation: floaty 8s ease-in-out infinite;
}

/* grids */
.grid-2 {
	display: grid;
	gap: 18px;
}
@media (min-width: 992px) {
	.grid-2 {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 28px;
	}
}
.grid-3 {
	display: grid;
	gap: 14px;
}
@media (min-width: 640px) {
	.grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* headings accents */
.h-emerald {
	color: #0f766e;
}
.h-fuchsia {
	color: #9d174d;
}
.h-violet {
	color: #6d28d9;
}

/* link buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 14px;
	font-weight: 700;
	text-decoration: none;
}
.btn--soft-emerald {
	background: #e8fff4;
	border: 1px solid #c7f5df;
	color: #065f46;
}
.btn--soft-lav {
	background: #f1edff;
	border: 1px solid #e0dbff;
	color: #4c1d95;
}
.btn:hover {
	filter: brightness(0.98);
	transform: translateY(-1px);
	transition: 0.18s ease;
}

/* stripe / callout */
.stripe {
	background: linear-gradient(180deg, var(--soft-a), var(--soft-b));
	border: 1px solid var(--ring);
	border-radius: 20px;
	padding: 20px;
}
.stripe h3 {
	margin: 0 0 6px;
	font-size: 22px;
}
.stripe p {
	margin: 0;
	color: #0b3b5a;
}

/* list with ticks */
.ticks {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ticks li {
	position: relative;
	padding-left: 18px;
	margin: 8px 0;
}
.ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--brand-2);
}

/* rating */
.rating {
	min-width: 84px;
	text-align: center;
}
.rating .n {
	font-weight: 900;
	font-size: 28px;
	color: #4f46e5;
	line-height: 1;
}
.rating .t {
	font-size: 12px;
	color: #6b7280;
}

/* bonus grid cards */
.bonus-card {
	padding: 18px;
	border: 1px solid var(--ring);
	border-radius: 18px;
	background: var(--card);
	box-shadow: 0 8px 22px rgba(20, 34, 54, 0.05);
}
.bonus-ico {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #eaf2ff;
	color: #2643a6;
	font-size: 22px;
}

/* payment chips */
.pay-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--ring);
	border-radius: 14px;
	background: #f9fbff;
	padding: 10px 12px;
}
.pay-chip .dot {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #e6fbf1;
	color: #0b8b62;
	font-weight: 700;
}

/* section spacers */
.mt-6 {
	margin-top: 18px;
}
.mt-8 {
	margin-top: 24px;
}

/* helper colors for small badges */
.bg-emerald {
	background: #e8fff4;
	color: #065f46;
}
.bg-sky {
	background: #eaf6ff;
	color: #0a3a54;
}
.bg-lav {
	background: #f3edff;
	color: #4c1d95;
}
.bg-fuchsia {
	background: #ffeaf3;
	color: #7a1143;
}
.bg-amber {
	background: #fff7e8;
	color: #92400e;
}

:root {
	--ink: #12263a;
	--muted: #566072;
	--ring: #e6edf5;
	--card: #ffffff;

	/* пастельні фони для різних секцій */
	--band-a: #fff7ed; /* peach */
	--band-b: #f0f9ff; /* sky */
	--band-c: #f8fafc; /* slate */
	--band-d: #f5fff7; /* mint */
	--band-e: #f7f5ff; /* lilac */

	--brand: #2563eb; /* blue */
	--accent: #10b981; /* emerald */
	--accent-2: #a78bfa; /* purple */
}

img {
	max-width: 100%;
	display: block;
}
.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px) {
	.container {
		padding: 0 24px;
	}
}
@media (min-width: 1024px) {
	.container {
		padding: 0 32px;
	}
}

.section {
	padding: 40px 0;
}
.section-title {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: 0.2px;
}
@media (min-width: 640px) {
	.section-title {
		font-size: 34px;
	}
}
.subtle {
	color: var(--muted);
	max-width: 68ch;
}

.band {
	background: var(--band-c);
}
.band--a {
	background: var(--band-a);
}
.band--b {
	background: var(--band-b);
}
.band--d {
	background: var(--band-d);
}
.band--e {
	background: var(--band-e);
}

/* cards / blocks */
.block {
	background: var(--card);
	border: 1px solid var(--ring);
	border-radius: 18px;
	box-shadow: 0 10px 26px rgba(16, 24, 40, 0.06);
	padding: 20px;
}
@media (min-width: 640px) {
	.block {
		padding: 24px;
	}
}
.block + .block {
	margin-top: 14px;
}

.badge {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #edf2ff;
	color: #3740a3;
	font-weight: 800;
}
.badge--warn {
	background: #ffeceb;
	color: #9f1239;
}
.badge--ok {
	background: #eafff2;
	color: #046047;
}
.kv {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

/* steps (Felelős játék) */
.steps {
	margin-top: 14px;
}
.step {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px;
	border: 1px solid var(--ring);
	border-radius: 16px;
	background: #fff;
}
.step + .step {
	margin-top: 10px;
}
.step-num {
	flex: 0 0 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: #eaf6ff;
	color: #0a3a54;
	font-weight: 800;
}

/* accordion (Bónuszok) */
.acc {
	border: 1px solid var(--ring);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}
.acc + .acc {
	margin-top: 10px;
}
.acc > button {
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	background: #f9fbff;
	border: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 800;
	color: #0b3b5a;
	cursor: pointer;
}
.acc > div {
	padding: 14px 16px;
	border-top: 1px solid var(--ring);
	display: none;
}
.acc[open] > div {
	display: block;
}

/* chips list (Fizetés) */
.chips {
	display: grid;
	gap: 10px;
}
@media (min-width: 640px) {
	.chips {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.chips {
		grid-template-columns: repeat(3, 1fr);
	}
}
.chip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--ring);
	border-radius: 14px;
	background: #fff;
}
.chip .dot {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #eaf6ff;
	color: #0a3a54;
	font-weight: 700;
}

/* mini checklist */
.ticks {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ticks li {
	position: relative;
	padding-left: 18px;
	margin: 8px 0;
}
.ticks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--accent);
}

/* small helper */
.mt-10 {
	margin-top: 24px;
}

/* animations */
@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.anim {
	animation: slideUp 0.4s ease both;
}

.footer-wrap {
	position: relative;
	/* background: linear-gradient(180deg, #f7fbff, #fefefe); */
	background: linear-gradient(180deg, var(--bg2), var(--bg1));
	color: #0f172a;
	overflow: hidden;
}
.footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 42px 16px;
}
@media (min-width: 640px) {
	.footer-inner {
		padding: 52px 24px;
	}
}
@media (min-width: 1024px) {
	.footer-inner {
		padding: 64px 32px;
	}
}

/* top brand row */
.footer-top {
	display: grid;
	gap: 10px 14px;
	align-items: center;
	margin-bottom: 22px;
}
@media (min-width: 768px) {
	.footer-top {
		grid-template-columns: 1fr auto;
	}
}
.brandline {
	display: flex;
	align-items: center;
	gap: 10px;
}
.brandmark {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #e6f3ff;
	color: #0b4a86;
	font-weight: 900;
	box-shadow: 0 4px 10px rgba(11, 74, 134, 0.15);
}
.brandname {
	font-weight: 900;
	font-size: 20px;
	letter-spacing: 0.3px;
}
.tagline {
	color: #5b6676;
	font-size: 13px;
}
.top-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.top-actions a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 12px;
	background: #ecfeff;
	border: 1px solid #d5eef4;
	color: #035e6b;
	text-decoration: none;
	font-weight: 700;
}
.top-actions a:hover {
	filter: brightness(0.98);
	transform: translateY(-1px);
	transition: 0.18s;
}

/* 3-column mid section */
.footer-mid {
	display: grid;
	gap: 16px;
	margin-top: 18px;
}
@media (min-width: 992px) {
	.footer-mid {
		grid-template-columns: 1.1fr 1fr 1fr;
		gap: 22px;
	}
}
.card {
	background: #fff;
	border: 1px solid #e6edf5;
	border-radius: 18px;
	box-shadow: 0 10px 26px rgba(16, 24, 40, 0.06);
	padding: 18px;
}
.card h3 {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 900;
}
.card p {
	margin: 0;
	color: #5b6676;
	line-height: 1.6;
}
.kv {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.badge {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	font-weight: 800;
}
.badge--cyan {
	background: #cffafe;
	color: #0e7490;
}
.badge--rose {
	background: #ffe4e6;
	color: #9f1239;
}
.badge--amber {
	background: #fff7ed;
	color: #92400e;
}
.list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}
.list li {
	position: relative;
	padding-left: 18px;
	margin: 6px 0;
	color: #0f172a;
}
.list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #10b981;
}

/* org logos grid */
.orgs {
	margin: 26px 0 22px;
	display: grid;
	gap: 10px;
}
@media (min-width: 640px) {
	.orgs {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.orgs {
		grid-template-columns: repeat(6, 1fr);
	}
}
.org {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	width: auto;
	padding: 8px;
	background: #241e1eaa;
	border: 1px solid #e6edf5;
	border-radius: 14px;
	transition: 0.18s;
}
.org:hover {
	transform: translateY(-2px);
	background: #fff;
	box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
}
.org img {
	height: 40px;
	/* opacity: 0.86; */
	transition: all 0.18s;
}
.org:hover img {
	background: #817d7daa;
}

/* policy links centered block */
.policies {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	justify-content: center;
	margin: 6px 0 10px;
}
.policies a {
	color: #0b3b5a;
	text-decoration: none;
	font-weight: 700;
	border-bottom: 1px dashed transparent;
}
.policies a:hover {
	border-bottom-color: #0b3b5a;
}

/* bottom bar */
.footer-bottom {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #e6edf5;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	color: #61738a;
	font-size: 12px;
}

/* small deco */
.softline {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #c7f0ff, #eafff2);
	margin: 18px 0 8px;
}

.cc {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9999;
	background: rgba(15, 23, 42, 0.75); /* napівпрозорий фон */
	backdrop-filter: blur(6px);
	padding: 12px;
	font-family:
		system-ui,
		-apple-system,
		'Segoe UI',
		Roboto,
		Arial,
		sans-serif;
}
.cc.hidden {
	display: none;
}

.cc__inner {
	max-width: 980px;
	margin: 0 auto;
	color: #0f172a;
	background: #ffffff;
	border: 1px solid #e6edf5;
	border-radius: 14px;
	padding: 14px;
	box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
	display: grid;
	gap: 10px;
	align-items: center;
}
@media (min-width: 720px) {
	.cc__inner {
		grid-template-columns: 1fr auto;
		gap: 16px;
	}
}

.cc__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #334155;
}
.cc__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-start;
	flex-wrap: wrap;
}
@media (min-width: 720px) {
	.cc__actions {
		justify-content: flex-end;
	}
}

.cc__btn {
	cursor: pointer;
	appearance: none;
	border-radius: 10px;
	padding: 10px 14px;
	font-weight: 700;
	font-size: 14px;
	border: 1px solid transparent;
	transition: 0.18s ease;
}
.cc__btn--primary {
	background: #10b981;
	color: #0b1324;
	border-color: #0bb07a;
}
.cc__btn--primary:hover {
	filter: brightness(0.97);
	transform: translateY(-1px);
}
.cc__btn--ghost {
	background: #f0f9ff;
	color: #0b3b5a;
	border-color: #cfe8fb;
}
.cc__btn--ghost:hover {
	background: #e8f3ff;
}

@media (prefers-reduced-motion: reduce) {
	.cc__btn,
	.cc__inner {
		transition: none;
	}
}

.ag {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ag--hidden {
	display: none;
}
.ag__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}
.ag__dialog {
	position: relative;
	z-index: 1;
	max-width: 520px;
	width: calc(100% - 32px);
	background: #ffffff;
	border: 1px solid #e6edf5;
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(16, 24, 40, 0.22);
	padding: 20px;
	display: grid;
	gap: 12px;
	text-align: center;
	font-family:
		system-ui,
		-apple-system,
		'Segoe UI',
		Roboto,
		Arial,
		sans-serif;
}
@media (min-width: 640px) {
	.ag__dialog {
		padding: 24px;
	}
}
.ag__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 2px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: #ecfeff;
	color: #0e7490;
	font-weight: 900;
}
.ag__title {
	margin: 0;
	font-size: 22px;
	font-weight: 900;
	color: #0f172a;
}
.ag__text {
	margin: 0;
	color: #334155;
}
.ag__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 4px;
}
.ag__btn {
	appearance: none;
	cursor: pointer;
	border-radius: 12px;
	padding: 10px 14px;
	font-weight: 800;
	font-size: 14px;
	border: 1px solid transparent;
	transition: 0.18s ease;
}
.ag__btn--primary {
	background: #10b981;
	color: #0b1324;
	border-color: #0bb07a;
}
.ag__btn--primary:hover {
	filter: brightness(0.97);
	transform: translateY(-1px);
}
.ag__btn--ghost {
	background: #f0f9ff;
	color: #0b3b5a;
	border-color: #cfe8fb;
}
.ag__btn--ghost:hover {
	background: #e8f3ff;
}
.ag__note {
	margin: 2px 0 0;
	color: #64748b;
	font-size: 12px;
}

/* lock scroll while modal is open */
.ag-body-lock {
	overflow: hidden;
}

.text-section {
	max-width: 920px;
	margin: 0 auto;
	padding: 16px;
	font-family:
		system-ui,
		-apple-system,
		'Segoe UI',
		Roboto,
		Arial,
		sans-serif;
	color: #0f172a;
	line-height: 1.7;
}
.text-section .lead {
	color: #475569;
	margin-top: 0.25rem;
}
.text-section h1 {
	font-size: 1.75rem;
	line-height: 1.2;
	margin: 0.25rem 0 0.5rem;
	font-weight: 900;
}
.text-section h2 {
	font-size: 1.25rem;
	line-height: 1.35;
	margin: 1.25rem 0 0.5rem;
	font-weight: 800;
	color: #0b3b5a;
}
.text-section p {
	margin: 0.5rem 0;
}
.text-section ul {
	margin: 0.25rem 0 0.75rem 1.25rem;
}
.text-section li {
	margin: 0.25rem 0;
}
.text-section a {
	color: #0b5aa2;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.text-section .meta {
	color: #64748b;
	font-size: 0.9rem;
	margin-top: 1rem;
}
@media (min-width: 640px) {
	.text-section {
		padding: 20px;
	}
	.text-section h1 {
		font-size: 2rem;
	}
	.text-section h2 {
		font-size: 1.375rem;
	}
}
@media (min-width: 1024px) {
	.text-section {
		padding: 24px;
	}
	.text-section h1 {
		font-size: 2.2rem;
	}
	.text-section h2 {
		font-size: 1.5rem;
	}
}