/* ==========================================================================
 * Sektioner: tryghedsbånd, pakker, trin, nøgletal, FAQ, CTA-bånd.
 * ========================================================================== */

/* ------------------------------------------------------------ Tryghedsbånd */

.tg-trust-strip {
	padding-block: var(--tg-space-5);
	border-block: 1px solid var(--tg-border);
	background: var(--tg-surface-sunk);
}
.tg-trust-strip__list {
	display: grid;
	gap: var(--tg-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.tg-trust-strip__list li {
	display: flex;
	align-items: center;
	gap: var(--tg-space-3);
	margin: 0;
	font-size: var(--tg-fs-300);
	font-weight: 550;
	color: var(--tg-text-strong);
}
.tg-trust-strip__list svg { color: var(--tg-accent-solid); }

/* ------------------------------------------------------------------ Pakker */

.tg-section-foot { margin-top: var(--tg-space-8); text-align: center; }

.tg-package {
	display: flex;
	flex-direction: column;
	background: var(--tg-surface);
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-radius-xl);
	overflow: hidden;
	backdrop-filter: blur(14px);
	box-shadow: var(--tg-shadow-sm);
	transition: transform var(--tg-dur) var(--tg-ease),
		border-color var(--tg-dur) var(--tg-ease),
		box-shadow var(--tg-dur) var(--tg-ease);
}
.tg-package:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--tg-accent) 45%, var(--tg-border));
	box-shadow: var(--tg-shadow);
}

/* --- Den fremhævede pakke ---
 *
 * Står her og ikke i components.css: reglerne skal kunne slå
 * .tg-package:hover ovenfor, og sections.css indlæses sidst. Lå de i
 * components.css, ville løftet blive spist af hover-reglen.
 */
.tg-package--featured {
	position: relative;
	border-color: color-mix(in srgb, var(--tg-accent) 55%, var(--tg-border));
	box-shadow: var(--tg-shadow), var(--tg-glow);
}
@media (min-width: 62rem) {
	.tg-package--featured { transform: translateY(-8px); }
	.tg-package--featured:hover { transform: translateY(-12px); }
}

/*
 * Mærket ligger inde i kortet, ikke hen over kanten.
 *
 * .tg-package har overflow:hidden for at holde billedets hjørner runde, og
 * et mærke der stak halvt udenfor blev derfor klippet væk. Det sidder nu
 * oven på billedfeltet i stedet.
 */
.tg-package__flag {
	position: absolute;
	top: var(--tg-space-4);
	right: var(--tg-space-4);
	z-index: 2;
	padding: .3rem .85rem;
	border-radius: var(--tg-radius-pill);
	background: var(--tg-grad-accent);
	color: #fff;
	font-family: var(--tg-font-display);
	font-size: var(--tg-fs-300);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(11, 13, 20, .28);
}

.tg-package__media {
	display: grid;
	place-items: center;
	padding: var(--tg-space-8) var(--tg-space-6) var(--tg-space-4);
	background:
		radial-gradient(60% 60% at 50% 40%, var(--tg-accent-tint), transparent 70%);
}
.tg-package__media img { width: 128px; height: 128px; object-fit: contain; }

.tg-package__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0 var(--tg-space-6) var(--tg-space-6);
}

.tg-package__title { font-size: var(--tg-fs-600); margin-bottom: var(--tg-space-3); }
.tg-package__title a { color: var(--tg-text-strong); text-decoration: none; }
.tg-package__title a:hover { color: var(--tg-accent-solid); }

.tg-package__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--tg-space-2);
	margin-bottom: var(--tg-space-5);
}
.tg-package__was {
	color: var(--tg-text-muted);
	text-decoration: line-through;
	font-size: var(--tg-fs-300);
}
.tg-package__now {
	font-family: var(--tg-font-display);
	font-size: var(--tg-fs-700);
	font-weight: 700;
	color: var(--tg-text-strong);
	letter-spacing: -.02em;
}

.tg-package__includes {
	list-style: none;
	margin: 0 0 var(--tg-space-6);
	padding: 0;
	flex: 1;
}
.tg-package__includes li {
	display: flex;
	align-items: flex-start;
	gap: var(--tg-space-3);
	margin-bottom: var(--tg-space-2);
	font-size: var(--tg-fs-300);
	line-height: 1.5;
}
.tg-package__includes svg { color: var(--tg-success); margin-top: .15rem; flex: none; }

.tg-package__actions { margin-top: auto; }

/* -------------------------------------------------------------------- Trin */

.tg-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--tg-space-5);
	counter-reset: tg-step;
}
@media (min-width: 48rem) { .tg-steps { grid-template-columns: repeat(2, 1fr); gap: var(--tg-space-6); } }
@media (min-width: 75rem) { .tg-steps { grid-template-columns: repeat(3, 1fr); } }

.tg-steps__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--tg-space-4);
	align-items: start;
	margin: 0;
	padding: var(--tg-space-5);
	background: var(--tg-surface);
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-radius-lg);
}
.tg-steps__num {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--tg-radius-pill);
	background: var(--tg-grad-accent);
	color: #fff;
	font-family: var(--tg-font-display);
	font-weight: 700;
	font-size: var(--tg-fs-300);
}
.tg-steps__body h3 { font-size: var(--tg-fs-500); margin-bottom: var(--tg-space-2); }
.tg-steps__body p { font-size: var(--tg-fs-300); line-height: 1.6; margin-bottom: 0; }

/* --------------------------------------------------------------- Nøgletal */

.tg-stats {
	display: grid;
	gap: var(--tg-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	margin: 0;
	padding: var(--tg-space-8) var(--tg-space-6);
	background: var(--tg-surface);
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-radius-2xl);
	backdrop-filter: blur(14px);
}
.tg-stats__item { text-align: center; }
.tg-stats__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .25rem;
	font-family: var(--tg-font-display);
	font-size: var(--tg-fs-900);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	background: var(--tg-grad-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.tg-stats__suffix { font-size: var(--tg-fs-500); }
.tg-stats__label {
	margin: var(--tg-space-3) 0 0;
	font-size: var(--tg-fs-300);
	color: var(--tg-text-muted);
}

/* --------------------------------------------------------------- Accordion */

.tg-accordion {
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-radius-xl);
	overflow: hidden;
	background: var(--tg-surface);
	backdrop-filter: blur(14px);
}
.tg-accordion__item + .tg-accordion__item { border-top: 1px solid var(--tg-border); }
.tg-accordion__heading { margin: 0; font-size: inherit; }
.tg-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tg-space-4);
	width: 100%;
	padding: var(--tg-space-5) var(--tg-space-6);
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--tg-font-display);
	font-size: var(--tg-fs-500);
	font-weight: 600;
	color: var(--tg-text-strong);
}
.tg-accordion__trigger:hover { color: var(--tg-accent-solid); }
.tg-accordion__chevron {
	transform: rotate(90deg);
	transition: transform var(--tg-dur-fast) var(--tg-ease);
	color: var(--tg-text-muted);
	flex: none;
}
.tg-accordion__trigger[aria-expanded="true"] .tg-accordion__chevron { transform: rotate(-90deg); }
.tg-accordion__panel { padding: 0 var(--tg-space-6) var(--tg-space-5); }
.tg-accordion__panel p { margin-bottom: 0; }

/* --------------------------------------------------------------- CTA-bånd */

.tg-cta-band { padding-block: var(--tg-section-y); }
.tg-cta-band__inner {
	display: grid;
	gap: var(--tg-space-6);
	align-items: center;
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: var(--tg-radius-2xl);
	border: 1px solid var(--tg-border);
	background:
		radial-gradient(80% 120% at 100% 0%, var(--tg-accent-soft), transparent 65%),
		var(--tg-surface);
	backdrop-filter: blur(14px);
	box-shadow: var(--tg-shadow-sm);
}
@media (min-width: 56rem) {
	.tg-cta-band__inner { grid-template-columns: 1.4fr auto; gap: var(--tg-space-10); }
}
.tg-cta-band h2 { margin-bottom: var(--tg-space-3); }
.tg-cta-band p { margin-bottom: 0; }
.tg-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--tg-space-3); }