/* Elementor bridge for the Astro design system. */
html,
body {
	margin: 0;
	padding: 0;
	max-width: 100vw;
	overflow-x: clip;
}

body.elementor-template-canvas {
	background: var(--white, #fff);
}

#main {
	display: block;
	width: 100%;
	min-height: 30vh;
}

.astro-page {
	width: 100%;
}

.elementor-widget-container {
	margin: 0 !important;
}

.elementor-widget-astro_header,
.elementor-widget-astro_footer,
.elementor-widget-astro_floating_whatsapp,
.elementor-widget-astro_breadcrumbs,
.elementor-widget-astro_home_hero,
.elementor-widget-astro_page_hero,
.elementor-widget-astro_trust_strip,
.elementor-widget-astro_article,
.elementor-widget-astro_trial,
.elementor-widget-astro_pricing,
.elementor-widget-astro_compare,
.elementor-widget-astro_cards,
.elementor-widget-astro_tabs,
.elementor-widget-astro_faq,
.elementor-widget-astro_blog_grid,
.elementor-widget-astro_cta,
.elementor-widget-astro_callout,
.elementor-widget-astro_rich_text {
	width: 100%;
}

.elementor-widget-astro_header,
.elementor-widget-astro_footer {
	position: relative;
	z-index: 20;
}

.elementor-widget-astro_article {
	margin-top: 0;
	margin-bottom: 0;
}

.elementor-widget-astro_trial .grid.grid-2,
.elementor-widget-astro_cards .grid.grid-2 {
	align-items: start;
}

.elementor-widget-astro_rich_text .text-center {
	text-align: center;
}

.elementor-widget-astro_rich_text .text-center .btn-row {
	justify-content: center;
}

/* ==========================================================================
   BLOG CARDS & COVERS (Astro Design System Sync)
   ========================================================================== */

.post-card {
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	border: 1px solid var(--line, #e2e8f0) !important;
	border-radius: var(--radius-lg, 18px) !important;
	background: #ffffff !important;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06)) !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.post-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 14px 30px rgba(7, 26, 34, 0.12) !important;
}

.post-card__link {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	height: 100% !important;
	color: inherit !important;
	text-decoration: none !important;
}

.cover {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 200px !important;
	min-height: 200px !important;
	max-height: 200px !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	background: #0a2630 !important;
	flex-shrink: 0 !important;
}

/* Featured section: large card hero cover */
.blog-featured > .post-card .cover {
	height: 270px !important;
	min-height: 270px !important;
	max-height: 270px !important;
}

/* Featured section: side cards horizontal layout */
.blog-featured__side .post-card {
	display: block !important;
	height: 100% !important;
}

.blog-featured__side .post-card__link {
	display: grid !important;
	grid-template-columns: 140px 1fr !important;
	align-items: stretch !important;
	width: 100% !important;
	height: 100% !important;
}

.blog-featured__side .cover {
	width: 140px !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: none !important;
	border-radius: 0 !important;
}

.blog-featured__side .post-card__body {
	padding: 16px 20px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-width: 0 !important;
}

.blog-featured__side .post-card h3 {
	font-size: 0.95rem !important;
	line-height: 1.32 !important;
	margin: 0 0 6px 0 !important;
}

.blog-featured__side .post-card p {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	font-size: 0.8rem !important;
	line-height: 1.45 !important;
	margin: 0 0 10px 0 !important;
}

/* Cover Image inside .cover */
.cover img,
.elementor-widget-astro_blog_grid .cover img,
.elementor-widget-astro_cards .card-media img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	z-index: 1 !important;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.post-card:hover .cover img {
	transform: scale(1.06) !important;
}

/* Card Body General */
.post-card__body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	padding: 22px 20px 20px !important;
}

.post-card__meta {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;
	margin-bottom: 10px !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--brand, #0e7c86) !important;
}

.post-card h3 {
	margin: 0 0 10px 0 !important;
	font-size: 1.08rem !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: #071a22 !important;
}

.post-card p {
	margin: 0 0 16px 0 !important;
	font-size: 0.84rem !important;
	line-height: 1.6 !important;
	color: #557077 !important;
}

.post-card__more {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: auto !important;
	color: var(--brand, #0e7c86) !important;
	font-size: 0.8rem !important;
	font-weight: 750 !important;
}

/* Responsiveness */
@media (max-width: 980px) {
	.blog-featured {
		grid-template-columns: 1fr !important;
	}
	.blog-featured__side {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
	.blog-featured__side .post-card {
		height: auto !important;
	}
	.blog-featured__side .post-card__link {
		grid-template-columns: 120px 1fr !important;
	}
	.blog-featured__side .cover {
		width: 120px !important;
	}
	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.blog-featured__side {
		grid-template-columns: 1fr !important;
	}
	.blog-featured__side .post-card__link {
		grid-template-columns: 100px 1fr !important;
	}
	.blog-featured__side .cover {
		width: 100px !important;
	}
	.blog-grid {
		grid-template-columns: 1fr !important;
	}
}

.admin-bar .site-header {
	top: 32px;
}

body.elementor-editor-active .site-header,
body.elementor-editor-preview .site-header {
	position: relative;
	top: 0;
}

body.elementor-editor-active .floating-wa,
body.elementor-editor-preview .floating-wa {
	display: none;
}

/* The 404 canvas uses the same global header and footer. */
body.error404 .site-header,
body.astro-404 .site-header {
	position: relative;
	top: 0;
}

body.astro-404 main .section {
	display: grid;
	min-height: 62vh;
	place-items: center;
}

/* Keep Elementor's editor handles from breaking the sticky navigation. */
.elementor-editor-active .elementor-widget-astro_header .site-header {
	position: relative;
}

/* Hero Visual Layout Sync - Featured Offer Card */
.hero__visual--offer {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 480px;
	position: relative;
	width: 100%;
}

.hero-offer-card {
	position: relative;
	z-index: 5;
	width: min(100%, 450px);
	background: radial-gradient(circle at 88% 8%, rgba(45, 212, 191, 0.16), transparent 45%), #ffffff;
	border: 2px solid var(--brand, #0e7c86);
	border-radius: 24px;
	padding: 34px 28px 26px;
	box-shadow: 0 20px 54px rgba(7, 26, 34, 0.15), 0 3px 10px rgba(7, 26, 34, 0.05);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
	animation: heroOfferIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-offer-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 64px rgba(7, 26, 34, 0.2);
}

@keyframes heroOfferIn {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.hero-offer-card__ribbon {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, var(--brand, #0e7c86), #0a5e66);
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 6px 18px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(14, 124, 134, 0.4);
	white-space: nowrap;
}

.hero-offer-card__head {
	margin-bottom: 16px;
	text-align: center;
}

.hero-offer-card__period {
	display: inline-block;
	color: var(--brand-dark, #0a5e66);
	font-size: 0.76rem;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 4px;
}

.hero-offer-card__title {
	font-family: var(--font-display, "Sora Variable", sans-serif);
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--ink, #071a22);
	margin: 0 0 6px;
	line-height: 1.22;
	letter-spacing: -0.03em;
}

.hero-offer-card__desc {
	color: var(--muted, #5d7074);
	font-size: 0.84rem;
	margin: 0;
	line-height: 1.5;
}

.hero-offer-card__price-box {
	background: var(--cloud, #f6f9f8);
	border: 1px solid var(--line, #dce7e5);
	border-radius: 16px;
	padding: 15px 18px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.hero-offer-card__price-box .price {
	margin-bottom: 0;
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.hero-offer-card__price-box .price__amount {
	font-family: var(--font-display, "Sora Variable", sans-serif);
	font-size: 2.15rem;
	font-weight: 800;
	color: var(--ink, #071a22);
	line-height: 1;
	letter-spacing: -0.05em;
}

.hero-offer-card__price-box .price__unit {
	font-size: 0.82rem;
	color: var(--muted, #5d7074);
	font-weight: 600;
}

.hero-offer-card__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.hero-offer-card__per-month {
	font-size: 0.8rem;
	color: var(--muted, #5d7074);
	font-weight: 650;
	line-height: 1;
}

.hero-offer-card__saving {
	background: #dcfce7;
	color: #166534;
	font-size: 0.7rem;
	font-weight: 800;
	padding: 3px 9px;
	border-radius: 999px;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

.hero-offer-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hero-offer-card__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text, #1d3338);
	font-size: 0.86rem;
	line-height: 1.4;
	margin: 0;
}

.hero-offer-card__list li svg {
	flex: none;
	width: 17px;
	height: 17px;
	color: var(--brand, #0e7c86);
	background: var(--mint-soft, #e7fbf7);
	border-radius: 50%;
	padding: 2px;
}

.hero-offer-card__list li strong {
	color: var(--ink, #071a22);
	font-weight: 700;
}

.hero-offer-card__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.hero-offer-card__action .btn {
	width: 100%;
	justify-content: center;
	font-size: 0.95rem;
	min-height: 52px;
	border-radius: 999px;
	box-shadow: 0 8px 22px rgba(14, 124, 134, 0.32);
}

.hero-offer-card__action .btn:hover {
	box-shadow: 0 12px 30px rgba(14, 124, 134, 0.44);
	transform: translateY(-2px);
}

.hero-offer-card__note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted, #5d7074);
	font-size: 0.74rem;
	font-weight: 600;
	margin: 0;
}

.hero-offer-card__note svg {
	color: var(--brand, #0e7c86);
}

@media (max-width: 640px) {
	.hero-offer-card {
		padding: 24px 18px 20px;
		border-radius: 20px;
	}
	.hero-offer-card__price-box {
		padding: 12px 14px;
	}
	.hero-offer-card__price-box .price__amount {
		font-size: 1.8rem;
	}
	.hero-offer-card__title {
		font-size: 1.2rem;
	}
}

/* Channels and Content Section - Pure Crisp White Canvas with Level 3 Elevation */
.section--channels {
	background: #ffffff !important;
	padding: 100px 0 95px !important;
	position: relative !important;
	border-top: 1px solid #e5ecea !important;
	border-bottom: 1px solid #e5ecea !important;
}

.section--channels .section-head {
	margin-bottom: 28px !important;
	text-align: left !important;
}

.section--channels .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 16px 6px 8px !important;
	border-radius: 9999px !important;
	background: #081a24 !important;
	border: 1px solid #081a24 !important;
	color: #ffffff !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
	box-shadow: 0 4px 14px rgba(8, 26, 36, 0.15) !important;
}

.section--channels .eyebrow::before {
	content: "02";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border-radius: 9999px;
	background: #2dd4bf;
	color: #081a24;
	font-size: 0.72rem;
	font-weight: 900;
	line-height: 1;
}

.section--channels .section-head h1,
.section--channels .section-head h2 {
	font-size: 2.75rem !important;
	font-weight: 800 !important;
	color: #081a24 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.15 !important;
	margin: 0 0 16px 0 !important;
}

.section--channels .section-head p {
	color: #4f636b !important;
	font-size: 1.02rem !important;
	line-height: 1.6 !important;
	max-width: 680px !important;
	margin: 0 !important;
}

.section--channels .tabs {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-bottom: 30px !important;
	align-items: center !important;
	border-bottom: none !important;
}

@media (max-width: 640px) {
	.section--channels .tabs {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		padding-bottom: 10px !important;
		scrollbar-width: none !important;
		margin: 0 -16px 22px !important;
		padding-inline: 16px !important;
	}
	.section--channels .tabs::-webkit-scrollbar {
		display: none !important;
	}
}

.section--channels .tab {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #f1f5f5 !important;
	color: #2c3e45 !important;
	border: 1px solid #dfe7e7 !important;
	border-radius: 9999px !important;
	min-height: 44px !important;
	min-width: 44px !important;
	padding: 10px 22px !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	cursor: pointer !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
	transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	text-decoration: none !important;
	outline: none !important;
	box-sizing: border-box !important;
	flex: none !important;
}

.section--channels .tab:hover {
	background: #e6eeee !important;
	color: #081a24 !important;
	border-color: #cbd8d8 !important;
	transform: translateY(-1px) !important;
}

.section--channels .tab.is-active {
	background: #081a22 !important;
	color: #ffffff !important;
	border-color: #081a22 !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 14px rgba(8, 26, 34, 0.18) !important;
}

.section--channels .tab .tab-dot {
	display: none;
	margin-left: 6px;
	font-size: 13px;
	line-height: 1;
	color: #ffffff;
}

.section--channels .tab.is-active .tab-dot {
	display: inline-block !important;
}

/* Channel Card with Media / Topic Icon - Uncramped 3-Column Layout */
.channel-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 18px !important;
	display: grid !important;
}

@media (min-width: 1400px) {
	.channel-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

.channel-card {
	min-height: 64px !important;
	border: 1px solid #e1ecea !important;
	background: #ffffff !important;
	border-radius: 18px !important;
	padding: 16px 20px !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 16px !important;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s !important;
	box-shadow: 0 8px 24px rgba(7, 26, 34, 0.05), 0 2px 6px rgba(7, 26, 34, 0.02) !important;
	cursor: pointer;
	box-sizing: border-box !important;
}

.channel-card:hover {
	transform: translateY(-3px) !important;
	border-color: #2dd4bf !important;
	box-shadow: 0 16px 36px rgba(7, 26, 34, 0.1) !important;
}

.channel-card__media {
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	flex: none !important;
	border-radius: 16px !important;
	background: #bbf3ea !important;
	border: none !important;
	color: #071a22 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.channel-card:hover .channel-card__media {
	transform: scale(1.04) !important;
	background: #a9f0e4 !important;
}

.channel-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.channel-card__media svg {
	width: 32px !important;
	height: 32px !important;
	display: block !important;
}

.channel-card__body {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	min-width: 0 !important;
	flex: 1 !important;
}

.channel-card__body strong {
	color: #071a22 !important;
	font-size: 1.05rem !important;
	font-weight: 750 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
}

.channel-card__body span {
	color: #5d7074 !important;
	font-size: 0.82rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
}

.section--channels .table-note {
	margin-top: 26px !important;
	font-size: 0.78rem !important;
	color: #7b9196 !important;
	line-height: 1.5 !important;
}

@media (max-width: 980px) {
	.channel-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
	.section--channels .section-head h1,
	.section--channels .section-head h2 {
		font-size: 2.2rem !important;
	}
}

@media (max-width: 600px) {
	.channel-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	.channel-card {
		padding: 14px 16px !important;
		min-height: 60px !important;
	}
	.section--channels {
		padding: 55px 0 !important;
	}
	.section--channels .section-head h1,
	.section--channels .section-head h2 {
		font-size: 1.85rem !important;
	}
}

/* Sports Split Section ("Sports don't buffer") - Accent Stadium Mint & Warm Amber Blobs */
.section--sports-buffer {
	background: radial-gradient(ellipse 70% 55% at 85% 15%, rgba(45, 212, 191, 0.22) 0%, transparent 60%),
	            radial-gradient(ellipse 55% 45% at 10% 85%, rgba(245, 158, 11, 0.14) 0%, transparent 55%),
	            linear-gradient(180deg, #eaf7f4 0%, #def2ed 100%) !important;
	padding: 95px 0 90px !important;
	position: relative !important;
	border-top: 2px solid rgba(45, 212, 191, 0.35) !important;
}

.sports-layout {
	display: grid !important;
	grid-template-columns: 1.05fr 1.15fr !important;
	gap: 56px !important;
	align-items: center !important;
}

.section--sports-buffer .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 16px 6px 8px !important;
	border-radius: 9999px !important;
	background: #fef3c7 !important;
	border: 1px solid #fde68a !important;
	color: #b45309 !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
}

.section--sports-buffer .eyebrow::before {
	content: "03";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border-radius: 9999px;
	background: #b45309;
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 900;
	line-height: 1;
}

.section--sports-buffer h1,
.section--sports-buffer h2 {
	font-size: 3.1rem !important;
	font-weight: 850 !important;
	color: #081a24 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.035em !important;
	margin: 0 0 20px 0 !important;
}

.section--sports-buffer .lead {
	color: #475a62 !important;
	font-size: 1.02rem !important;
	line-height: 1.62 !important;
	margin: 0 0 16px 0 !important;
}

.section--sports-buffer p {
	color: #556770 !important;
	font-size: 0.95rem !important;
	line-height: 1.62 !important;
	margin: 0 0 22px 0 !important;
}

.section--sports-buffer .sport-note {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	background: #e6f7f4 !important;
	border: 1px solid #c8ede6 !important;
	border-radius: 12px !important;
	padding: 14px 18px !important;
	margin: 0 0 26px 0 !important;
	color: #1e5954 !important;
	font-size: 0.88rem !important;
	line-height: 1.5 !important;
}

.section--sports-buffer .sport-note svg {
	color: #0ba396 !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
}

.section--sports-buffer .btn-row {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	margin-top: 24px !important;
}

/* Section 3 (Sports Buffer) - 3-tier hierarchy: Secondary + Tertiary (No Primary in this viewport) */
.section--sports-buffer a[href*="ilmainen-testi"],
.section--sports-buffer .btn--secondary {
	background: #ffffff !important;
	color: #0F766E !important;
	border: 1.5px solid #0F766E !important;
	border-radius: 9999px !important;
	padding: 13px 26px !important;
	font-size: 0.94rem !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	box-shadow: 0 2px 6px rgba(15, 118, 110, 0.08) !important;
	transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	text-decoration: none !important;
}

.section--sports-buffer a[href*="ilmainen-testi"]:hover,
.section--sports-buffer .btn--secondary:hover {
	background: #0F766E !important;
	border-color: #0F766E !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(15, 118, 110, 0.28) !important;
}

.section--sports-buffer a[href*="ilmainen-testi"]:hover svg,
.section--sports-buffer .btn--secondary:hover svg {
	color: #ffffff !important;
	stroke: #ffffff !important;
	transform: translateX(4px) !important;
}

/* Explore the channels -> Demoted from primary to Tertiary text link with arrow */
.section--sports-buffer a[href*="iptv-kanavat"],
.section--sports-buffer .btn--primary {
	background: transparent !important;
	color: #0F766E !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 8px 6px !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	box-shadow: none !important;
	transition: color 0.22s ease, transform 0.22s ease !important;
	text-decoration: none !important;
	position: relative !important;
	min-height: auto !important;
}

.section--sports-buffer a[href*="iptv-kanavat"]::after,
.section--sports-buffer .btn--primary::after {
	content: "" !important;
	position: absolute !important;
	bottom: 2px !important;
	left: 6px !important;
	width: calc(100% - 24px) !important;
	height: 2px !important;
	background: #0F766E !important;
	opacity: 0.35 !important;
	transition: opacity 0.22s ease, width 0.25s ease !important;
}

.section--sports-buffer a[href*="iptv-kanavat"]:hover,
.section--sports-buffer .btn--primary:hover {
	background: transparent !important;
	color: #094e49 !important;
	transform: none !important;
	box-shadow: none !important;
}

.section--sports-buffer a[href*="iptv-kanavat"]:hover::after,
.section--sports-buffer .btn--primary:hover::after {
	opacity: 1 !important;
	width: calc(100% - 8px) !important;
	background: #094e49 !important;
}

.section--sports-buffer a[href*="iptv-kanavat"] svg,
.section--sports-buffer .btn--primary svg {
	width: 16px !important;
	height: 16px !important;
	color: currentColor !important;
	stroke: currentColor !important;
	transition: transform 0.22s ease !important;
}

.section--sports-buffer a[href*="iptv-kanavat"]:hover svg,
.section--sports-buffer .btn--primary:hover svg {
	transform: translateX(5px) !important;
}

.section--sports-buffer .sport-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 16px !important;
}

.section--sports-buffer .sport-card {
	background: #ffffff !important;
	border: 1px solid #eef2f3 !important;
	border-radius: 18px !important;
	padding: 16px 18px !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 15px !important;
	box-shadow: 0 4px 18px rgba(7, 26, 34, 0.04) !important;
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s !important;
	cursor: pointer !important;
}

.section--sports-buffer .sport-card:hover {
	transform: translateY(-3px) !important;
	border-color: #fed7aa !important;
	box-shadow: 0 10px 25px rgba(7, 26, 34, 0.08) !important;
}

.section--sports-buffer .sport-card__icon {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	border-radius: 14px !important;
	background: #fef3c7 !important;
	border: 1px solid #fde68a !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	overflow: hidden !important;
	transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.section--sports-buffer .sport-card:hover .sport-card__icon {
	transform: scale(1.05) !important;
	background: #fde68a !important;
}

.section--sports-buffer .sport-card__icon svg {
	width: 30px !important;
	height: 30px !important;
	display: block !important;
}

.section--sports-buffer .sport-card > div {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	min-width: 0 !important;
	flex: 1 !important;
}

.section--sports-buffer .sport-card strong {
	color: #071a22 !important;
	font-size: 1.02rem !important;
	font-weight: 750 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	display: block !important;
}

.section--sports-buffer .sport-card span {
	color: #647a7e !important;
	font-size: 0.8rem !important;
	font-weight: 450 !important;
	line-height: 1.35 !important;
	display: block !important;
}

@media (max-width: 1040px) {
	.sports-layout {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}
	.section--sports-buffer h1,
	.section--sports-buffer h2 {
		font-size: 2.3rem !important;
	}
}

@media (max-width: 600px) {
	.section--sports-buffer .sport-grid {
		grid-template-columns: 1fr !important;
	}
	.section--sports-buffer {
		padding: 55px 0 !important;
	}
	.section--sports-buffer h1,
	.section--sports-buffer h2 {
		font-size: 1.95rem !important;
	}
	.section--sports-buffer .btn-row {
		flex-direction: column !important;
		width: 100% !important;
	}
	.section--sports-buffer .btn-row .btn {
		width: 100% !important;
		justify-content: center !important;
	}
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* Dark Feature Section ("Not just channels. A better viewing experience.") */
.section--ink {
	background: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(20, 83, 75, 0.5) 0%, rgba(6, 26, 23, 0) 70%),
	            radial-gradient(ellipse 70% 60% at 50% 115%, rgba(16, 185, 129, 0.2) 0%, rgba(4, 20, 18, 0) 80%),
	            linear-gradient(180deg, #071f1c 0%, #041412 100%) !important;
	padding: 110px 0 105px !important;
	position: relative !important;
	overflow: hidden !important;
	color: #ffffff !important;
}

.section--ink .section-head {
	margin-bottom: 50px !important;
}

.section--ink .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 16px 6px 8px !important;
	border-radius: 9999px !important;
	background: rgba(45, 212, 191, 0.16) !important;
	border: 1px solid rgba(45, 212, 191, 0.45) !important;
	color: #2dd4bf !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
	box-shadow: 0 0 16px rgba(45, 212, 191, 0.25) !important;
}

.section--ink .eyebrow::before {
	content: "04";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border-radius: 9999px;
	background: #2dd4bf;
	color: #041715;
	font-size: 0.72rem;
	font-weight: 900;
	line-height: 1;
}

.section--ink h1,
.section--ink h2 {
	font-size: 2.9rem !important;
	font-weight: 850 !important;
	color: #ffffff !important;
	line-height: 1.15 !important;
	letter-spacing: -0.035em !important;
	margin: 0 auto 18px auto !important;
	max-width: 820px !important;
}

.section--ink .section-head p {
	color: #8fa8a4 !important;
	font-size: 1.05rem !important;
	line-height: 1.62 !important;
	max-width: 720px !important;
	margin: 0 auto !important;
	font-weight: 400 !important;
}

.section--ink .feature-grid--4 {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 22px !important;
	max-width: 1140px !important;
	margin: 0 auto !important;
}

.section--ink .feature-card {
	background: rgba(9, 34, 31, 0.78) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(45, 212, 191, 0.22) !important;
	border-radius: 20px !important;
	padding: 30px 24px 28px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	text-align: left !important;
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
	position: relative !important;
	overflow: hidden !important;
}

.section--ink .feature-card:hover {
	transform: translateY(-4px) !important;
	border-color: rgba(45, 212, 191, 0.55) !important;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), 0 0 26px rgba(45, 212, 191, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.section--ink .icon-box {
	height: 60px !important;
	width: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	margin-bottom: 22px !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.section--ink .icon-box svg,
.section--ink .icon-box svg.channel-vector-icon {
	display: block !important;
	height: 54px !important;
	width: auto !important;
	max-height: 58px !important;
	max-width: 100px !important;
	filter: drop-shadow(0 0 16px rgba(45, 212, 191, 0.45)) !important;
	transition: filter 0.25s ease, transform 0.25s ease !important;
}

.section--ink .feature-card:hover .icon-box svg,
.section--ink .feature-card:hover .icon-box svg.channel-vector-icon {
	filter: drop-shadow(0 0 24px rgba(45, 212, 191, 0.8)) !important;
	transform: scale(1.08) !important;
}

.section--ink .feature-card h3 {
	color: #ffffff !important;
	font-size: 1.32rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em !important;
	margin: 0 0 10px 0 !important;
	line-height: 1.25 !important;
}

.section--ink .feature-card p {
	color: #8fa8a4 !important;
	font-size: 0.88rem !important;
	line-height: 1.55 !important;
	margin: 0 !important;
	font-weight: 400 !important;
}

.section--ink .btn-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
	margin-top: 44px !important;
}

/* Section 4 (Finnish Network - Dark) - 3-tier hierarchy: Secondary + Tertiary (No Primary in this viewport) */
/* "Read why Best IPTV" -> Secondary (dark glass pill with teal border & hover glow) */
.section--ink .btn--primary,
.section--ink a[href*="paras-iptv-palvelu"] {
	background: rgba(45, 212, 191, 0.12) !important;
	color: #ffffff !important;
	border: 1.5px solid rgba(45, 212, 191, 0.55) !important;
	border-radius: 9999px !important;
	padding: 13px 28px !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	box-shadow: 0 0 16px rgba(45, 212, 191, 0.18) !important;
	transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	text-decoration: none !important;
}

.section--ink .btn--primary:hover,
.section--ink a[href*="paras-iptv-palvelu"]:hover {
	background: #0F766E !important;
	border-color: #2dd4bf !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 0 28px rgba(45, 212, 191, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.section--ink .btn--primary:hover svg,
.section--ink a[href*="paras-iptv-palvelu"]:hover svg {
	transform: translateX(4px) !important;
}

/* "Compare services" -> Tertiary text link with arrow */
.section--ink .btn--ghost,
.section--ink .btn--secondary,
.section--ink a[href*="iptv-vertailu"] {
	background: transparent !important;
	color: #5eead4 !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 8px 6px !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition: color 0.22s ease, transform 0.22s ease !important;
	text-decoration: none !important;
	position: relative !important;
	min-height: auto !important;
}

.section--ink .btn--ghost::after,
.section--ink .btn--secondary::after,
.section--ink a[href*="iptv-vertailu"]::after {
	content: "" !important;
	position: absolute !important;
	bottom: 2px !important;
	left: 6px !important;
	width: calc(100% - 24px) !important;
	height: 2px !important;
	background: #5eead4 !important;
	opacity: 0.35 !important;
	transition: opacity 0.22s ease, width 0.25s ease !important;
}

.section--ink .btn--ghost:hover,
.section--ink .btn--secondary:hover,
.section--ink a[href*="iptv-vertailu"]:hover {
	background: transparent !important;
	color: #ffffff !important;
	transform: none !important;
	box-shadow: none !important;
}

.section--ink .btn--ghost:hover::after,
.section--ink .btn--secondary:hover::after,
.section--ink a[href*="iptv-vertailu"]:hover::after {
	opacity: 1 !important;
	width: calc(100% - 8px) !important;
	background: #ffffff !important;
}

.section--ink .btn--ghost svg,
.section--ink .btn--secondary svg,
.section--ink a[href*="iptv-vertailu"] svg {
	width: 16px !important;
	height: 16px !important;
	color: currentColor !important;
	stroke: currentColor !important;
	transition: transform 0.22s ease !important;
}

.section--ink .btn--ghost:hover svg,
.section--ink .btn--secondary:hover svg,
.section--ink a[href*="iptv-vertailu"]:hover svg {
	transform: translateX(5px) !important;
}

@media (max-width: 1040px) {
	.section--ink .feature-grid--4 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 18px !important;
	}
	.section--ink h1,
	.section--ink h2 {
		font-size: 2.3rem !important;
	}
}

@media (max-width: 600px) {
	.section--ink {
		padding: 60px 0 !important;
	}
	.section--ink .feature-grid--4 {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.section--ink h1,
	.section--ink h2 {
		font-size: 1.85rem !important;
	}
	.section--ink .btn-row {
		flex-direction: column !important;
		width: 100% !important;
	}
	.section--ink .btn-row .btn {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* Pricing Section ("Selkeä hinta. Ei yllätyksiä.") - Pure Crisp White Canvas with Spotlight Center Shine */
.section--hinnasto {
	background: radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.15) 0%, rgba(240, 253, 250, 0.4) 35%, transparent 65%),
	            #ffffff !important;
	padding: 115px 0 105px !important;
	position: relative !important;
	border-top: 1px solid #d5ece7 !important;
	border-bottom: 1px solid #e2ecea !important;
}

.section--hinnasto .section-head {
	margin-bottom: 48px !important;
	text-align: center !important;
}

.section--hinnasto .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 18px 6px 8px !important;
	border-radius: 9999px !important;
	background: #0d655e !important;
	border: 1px solid #094e49 !important;
	color: #ffffff !important;
	font-size: 0.8rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
	box-shadow: 0 4px 18px rgba(11, 163, 150, 0.35) !important;
}

.section--hinnasto .eyebrow::before {
	content: "★ 05";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border-radius: 9999px;
	background: #ffffff;
	color: #0ba396;
	font-size: 0.72rem;
	font-weight: 900;
	line-height: 1;
}

.section--hinnasto h1,
.section--hinnasto h2 {
	font-size: 2.9rem !important;
	font-weight: 850 !important;
	color: #081a24 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.035em !important;
	margin: 0 auto 16px auto !important;
	max-width: 820px !important;
}

.section--hinnasto .section-head p {
	color: #556770 !important;
	font-size: 1.02rem !important;
	line-height: 1.62 !important;
	max-width: 720px !important;
	margin: 0 auto !important;
}

.section--hinnasto .price-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px !important;
	align-items: stretch !important;
	max-width: 1140px !important;
	margin: 0 auto !important;
}

.section--hinnasto .price-card {
	background: #ffffff !important;
	border: 1px solid #e1ecea !important;
	border-radius: 20px !important;
	padding: 30px 22px 24px !important;
	box-shadow: 0 8px 24px rgba(7, 26, 34, 0.05) !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
	display: flex !important;
	flex-direction: column !important;
}

.section--hinnasto .price-card:hover {
	transform: translateY(-4px) !important;
	border-color: #2dd4bf !important;
	box-shadow: 0 16px 36px rgba(7, 26, 34, 0.09) !important;
}

.section--hinnasto .price-card--featured {
	background: linear-gradient(180deg, #f0fdf9 0%, #ffffff 40%) !important;
	border: 2px solid #0ba396 !important;
	border-radius: 22px !important;
	box-shadow: 0 24px 60px rgba(11, 163, 150, 0.22), 0 4px 16px rgba(7, 26, 34, 0.05) !important;
	transform: scale(1.04) !important;
	position: relative !important;
	z-index: 2 !important;
	padding: 34px 24px 26px !important;
}

.section--hinnasto .price-card--featured:hover {
	transform: scale(1.06) translateY(-4px) !important;
	box-shadow: 0 30px 70px rgba(11, 163, 150, 0.3) !important;
}

.section--hinnasto .price-card--featured .price-card__ribbon {
	background: #0d655e !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 5px 16px !important;
	border-radius: 9999px !important;
	box-shadow: 0 3px 12px rgba(11, 163, 150, 0.35) !important;
}

.section--hinnasto .price-card__name {
	font-size: 1.25rem !important;
	font-weight: 800 !important;
	color: #081a24 !important;
	margin: 0 0 6px 0 !important;
}

.section--hinnasto .price-card__desc {
	font-size: 0.84rem !important;
	color: #5d7074 !important;
	line-height: 1.4 !important;
	margin: 0 0 16px 0 !important;
}

.section--hinnasto .price {
	display: flex !important;
	align-items: baseline !important;
	gap: 6px !important;
	margin-bottom: 6px !important;
}

.section--hinnasto .price__amount {
	font-size: 2.15rem !important;
	font-weight: 850 !important;
	color: #081a24 !important;
	letter-spacing: -0.025em !important;
	line-height: 1 !important;
}

.section--hinnasto .price__unit {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: #5d7074 !important;
}

.section--hinnasto .price__meta {
	font-size: 0.8rem !important;
	font-weight: 750 !important;
	color: #064e4b !important;
	margin-bottom: 20px !important;
}

.section--hinnasto .plan-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 24px 0 !important;
	flex-grow: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.section--hinnasto .plan-list li {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: 0.85rem !important;
	color: #3b5056 !important;
	line-height: 1.35 !important;
}

.section--hinnasto .plan-list li svg {
	width: 15px !important;
	height: 15px !important;
	color: #0ba396 !important;
	flex: none !important;
}

.section--hinnasto .price-foot {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 24px !important;
	margin-top: 40px !important;
	padding-top: 24px !important;
	border-top: 1px solid #e5ecea !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	color: #4f636b !important;
}

.section--hinnasto .price-foot span {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
}

.section--hinnasto .price-foot svg {
	color: #0ba396 !important;
}

@media (max-width: 1040px) {
	.section--hinnasto .price-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 18px !important;
	}
	.section--hinnasto .price-card--featured {
		transform: none !important;
	}
	.section--hinnasto h1,
	.section--hinnasto h2 {
		font-size: 2.3rem !important;
	}
}

@media (max-width: 600px) {
	.section--hinnasto {
		padding: 65px 0 !important;
	}
	.section--hinnasto .price-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.section--hinnasto h1,
	.section--hinnasto h2 {
		font-size: 1.85rem !important;
	}
}

/* Introduction / Three Stages Section ("You can watch in three stages") - Accent Mint/Cyan Stage */
.section--steps {
	background: radial-gradient(circle at 10% 20%, rgba(45, 212, 191, 0.16) 0%, transparent 50%),
	            radial-gradient(circle at 90% 80%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
	            linear-gradient(180deg, #ecfbf7 0%, #e6f7f3 50%, #ffffff 100%) !important;
	padding: 80px 0 85px !important;
	position: relative !important;
	border-top: none !important;
}

.section--steps .section-head {
	margin-bottom: 48px !important;
}

.section--steps .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 16px 6px 12px !important;
	border-radius: 9999px !important;
	background: #e0f2fe !important;
	border: 1px solid #bae6fd !important;
	color: #0369a1 !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
}

.section--steps .eyebrow::before {
	content: "" !important;
	display: inline-block !important;
	width: 18px !important;
	height: 14px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='%230284c7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 13C0.8 10 0.8 6 2 3'/%3E%3Cpath d='M5 11c-0.8-2-0.8-4 0-6'/%3E%3Ccircle cx='12' cy='8' r='2' fill='%230284c7'/%3E%3Cpath d='M19 5c0.8 2 0.8 4 0 6'/%3E%3Cpath d='M22 3c1.2 3 1.2 7 0 10'/%3E%3C/svg%3E") !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
}

.section--steps h1,
.section--steps h2 {
	font-size: 2.9rem !important;
	font-weight: 850 !important;
	color: #081a24 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.035em !important;
	margin: 0 auto 16px auto !important;
	max-width: 820px !important;
}

.section--steps .section-head p {
	color: #475a62 !important;
	font-size: 1.02rem !important;
	line-height: 1.62 !important;
	max-width: 720px !important;
	margin: 0 auto !important;
	font-weight: 400 !important;
}

.section--steps .steps {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	margin: 0 auto 36px auto !important;
	max-width: 1140px !important;
}

.section--steps .step {
	background: #ffffff !important;
	border: 1px solid #eef2f3 !important;
	border-radius: 20px !important;
	padding: 28px 24px 26px !important;
	box-shadow: 0 4px 20px rgba(7, 26, 34, 0.04) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	text-align: left !important;
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s !important;
	position: relative !important;
	overflow: hidden !important;
}

.section--steps .step:hover {
	transform: translateY(-4px) !important;
	border-color: #a7e9dc !important;
	box-shadow: 0 12px 30px rgba(7, 26, 34, 0.08) !important;
}

.section--steps .step__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	margin-bottom: 20px !important;
}

.step::before,
.step:before,
.section--steps .step::before,
.section--steps .step:before,
.step--timeline::before,
.step--timeline:before {
	content: none !important;
	display: none !important;
}

.section--steps .step__num {
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-size: 2.5rem !important;
	font-weight: 900 !important;
	color: #081a24 !important;
	line-height: 1 !important;
	letter-spacing: -0.04em !important;
	display: inline-block !important;
	padding: 0 !important;
	margin: 0 !important;
}

.section--steps .step__icon {
	height: 48px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
}

.section--steps .step__icon svg {
	display: block !important;
	transition: transform 0.2s ease !important;
}

.section--steps .step:hover .step__icon svg {
	transform: scale(1.05) !important;
}

.section--steps .step h3 {
	font-size: 1.25rem !important;
	font-weight: 800 !important;
	color: #081a24 !important;
	margin: 0 0 10px 0 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
}

.section--steps .step p {
	font-size: 0.88rem !important;
	color: #556770 !important;
	line-height: 1.55 !important;
	margin: 0 !important;
	font-weight: 450 !important;
}

.section--steps .device-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 14px !important;
	margin: 0 auto 28px auto !important;
	max-width: 1140px !important;
}

.section--steps .device-card {
	background: #ffffff !important;
	border: 1px solid #eef2f3 !important;
	border-radius: 16px !important;
	padding: 10px 16px !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	text-decoration: none !important;
	color: #081a24 !important;
	box-shadow: 0 2px 8px rgba(7, 26, 34, 0.03) !important;
	transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s, box-shadow 0.2s !important;
}

.section--steps .device-card:hover {
	transform: translateY(-2px) !important;
	border-color: #2dd4bf !important;
	box-shadow: 0 6px 18px rgba(7, 26, 34, 0.08) !important;
}

.section--steps .device-card__icon {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 9px !important;
	overflow: hidden !important;
	transition: transform 0.2s ease !important;
}

.section--steps .device-card:hover .device-card__icon {
	transform: scale(1.05) !important;
}

.section--steps .device-card__icon svg {
	width: 36px !important;
	height: 36px !important;
	display: block !important;
}

.section--steps .device-card__title {
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	color: #081a24 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.25 !important;
}

.section--steps .text-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: #0ba396 !important;
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: gap 0.2s ease, color 0.2s ease !important;
}

.section--steps .text-link:hover {
	color: #09646c !important;
	gap: 10px !important;
}

.section--steps .text-link svg {
	width: 15px !important;
	height: 15px !important;
	transition: transform 0.2s ease !important;
}

.section--steps .text-link:hover svg {
	transform: translateX(3px) !important;
}

@media (max-width: 1040px) {
	.section--steps .steps {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}
	.section--steps .device-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
	.section--steps h1,
	.section--steps h2 {
		font-size: 2.3rem !important;
	}
}

@media (max-width: 600px) {
	.section--steps {
		padding: 55px 0 !important;
	}
	.section--steps .device-grid {
		grid-template-columns: 1fr !important;
	}
	.section--steps h1,
	.section--steps h2 {
		font-size: 1.85rem !important;
	}
}

/* Personas Section ("Built for different homes") - Pure Crisp White Canvas */
.section--personas {
	background: #ffffff !important;
	padding: 85px 0 80px !important;
	position: relative !important;
	border-top: none !important;
	border-bottom: none !important;
}

.section--personas .section-head {
	margin-bottom: 48px !important;
}

.section--personas .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 16px 6px 12px !important;
	border-radius: 9999px !important;
	background: #fef3c7 !important;
	border: 1px solid #fde68a !important;
	color: #92400e !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
}

.section--personas .eyebrow::before {
	content: "" !important;
	display: inline-block !important;
	width: 18px !important;
	height: 14px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='%23d97706' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 13C0.8 10 0.8 6 2 3'/%3E%3Cpath d='M5 11c-0.8-2-0.8-4 0-6'/%3E%3Ccircle cx='12' cy='8' r='2' fill='%23d97706'/%3E%3Cpath d='M19 5c0.8 2 0.8 4 0 6'/%3E%3Cpath d='M22 3c1.2 3 1.2 7 0 10'/%3E%3C/svg%3E") !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
}

.section--personas h1,
.section--personas h2 {
	font-size: 2.9rem !important;
	font-weight: 850 !important;
	color: #081a24 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.035em !important;
	margin: 0 auto 16px auto !important;
	max-width: 820px !important;
}

.section--personas .section-head p {
	color: #556770 !important;
	font-size: 1.02rem !important;
	line-height: 1.62 !important;
	max-width: 720px !important;
	margin: 0 auto !important;
	font-weight: 400 !important;
}

.section--personas .persona-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px !important;
	max-width: 1140px !important;
	margin: 0 auto !important;
}

.section--personas .persona {
	background: #ffffff !important;
	border: 1px solid #e1ecea !important;
	border-radius: 20px !important;
	padding: 26px 22px 24px !important;
	box-shadow: 0 8px 26px rgba(7, 26, 34, 0.06) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	text-align: left !important;
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s !important;
	position: relative !important;
	overflow: hidden !important;
}

.section--personas .persona:hover {
	transform: translateY(-4px) !important;
	border-color: #f59e0b !important;
	box-shadow: 0 16px 36px rgba(7, 26, 34, 0.1) !important;
}

.section--personas .persona__icon {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	border-radius: 14px !important;
	background: #fef3c7 !important;
	border: 1px solid #fde68a !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 18px !important;
	overflow: hidden !important;
	transition: transform 0.2s ease, background-color 0.2s !important;
	flex-shrink: 0 !important;
}

.section--personas .persona:hover .persona__icon {
	transform: scale(1.05) !important;
	background: #fde68a !important;
}

.section--personas .persona__icon svg {
	width: 30px !important;
	height: 30px !important;
	display: block !important;
}

.section--personas .persona h3 {
	font-size: 1.18rem !important;
	font-weight: 800 !important;
	color: #081a24 !important;
	margin: 0 0 8px 0 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
}

.section--personas .persona p {
	font-size: 0.86rem !important;
	color: #556770 !important;
	line-height: 1.55 !important;
	margin: 0 !important;
	font-weight: 450 !important;
}

@media (max-width: 1040px) {
	.section--personas .persona-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 18px !important;
	}
	.section--personas h1,
	.section--personas h2 {
		font-size: 2.3rem !important;
	}
}

@media (max-width: 600px) {
	.section--personas {
		padding: 55px 0 !important;
	}
	.section--personas .persona-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.section--personas h1,
	.section--personas h2 {
		font-size: 1.85rem !important;
	}
}

/* Why Section ("Quality that doesn't need explaining") - Light Pearl with Ambient Radial Blobs */
.section--why {
	background: radial-gradient(circle at 14% 20%, rgba(45, 212, 191, 0.12) 0%, transparent 45%),
	            radial-gradient(circle at 86% 75%, rgba(56, 189, 248, 0.08) 0%, transparent 45%),
	            linear-gradient(180deg, #f7faf9 0%, #edf5f3 100%) !important;
	padding: 85px 0 80px !important;
	position: relative !important;
}

.section--why .section-head {
	margin-bottom: 48px !important;
}

.section--why .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 16px 6px 8px !important;
	border-radius: 9999px !important;
	background: rgba(45, 212, 191, 0.14) !important;
	border: 1px solid rgba(45, 212, 191, 0.35) !important;
	color: #0c7a70 !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
}

.section--why .eyebrow::before {
	content: "01";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border-radius: 9999px;
	background: #0d655e;
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 900;
	line-height: 1;
}

.section--why h1,
.section--why h2 {
	font-size: 2.9rem !important;
	font-weight: 850 !important;
	color: #081a24 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.035em !important;
	margin: 0 auto 16px auto !important;
	max-width: 820px !important;
}

.section--why .section-head p {
	color: #475a62 !important;
	font-size: 1.02rem !important;
	line-height: 1.62 !important;
	max-width: 720px !important;
	margin: 0 auto !important;
	font-weight: 400 !important;
}

.section--why .feature-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 24px !important;
	max-width: 1140px !important;
	margin: 0 auto !important;
}

.section--why .feature-card {
	background: #ffffff !important;
	border: 1px solid rgba(8, 26, 36, 0.07) !important;
	border-radius: 20px !important;
	padding: 32px 28px 30px !important;
	box-shadow: 0 4px 16px rgba(7, 26, 34, 0.03) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	text-align: left !important;
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s !important;
	position: relative !important;
	overflow: hidden !important;
}

.section--why .feature-card:hover {
	transform: translateY(-4px) !important;
	border-color: #2dd4bf !important;
	box-shadow: 0 14px 32px rgba(7, 26, 34, 0.08) !important;
}

/* Frameless floating icon without any box enclosure */
.section--why .icon-box,
.section--why .icon-box--sand {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	width: auto !important;
	height: 50px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin-bottom: 22px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

.section--why .icon-box svg {
	width: 56px !important;
	height: 46px !important;
	display: block !important;
	transition: transform 0.2s ease !important;
}

.section--why .feature-card:hover .icon-box svg {
	transform: scale(1.06) !important;
}

.section--why .feature-card h3 {
	font-size: 1.25rem !important;
	font-weight: 800 !important;
	color: #081a24 !important;
	margin: 0 0 10px 0 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
}

.section--why .feature-card p {
	font-size: 0.88rem !important;
	color: #556770 !important;
	line-height: 1.55 !important;
	margin: 0 !important;
	font-weight: 450 !important;
}

@media (max-width: 1040px) {
	.section--why .feature-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 18px !important;
	}
	.section--why h1,
	.section--why h2 {
		font-size: 2.3rem !important;
	}
}

@media (max-width: 600px) {
	.section--why {
		padding: 55px 0 !important;
	}
	.section--why .feature-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.section--why h1,
	.section--why h2 {
		font-size: 1.85rem !important;
	}
}

/* Compare Section ("Vertailu") - Light Pearl */
.section--compare,
.astro-widget--compare {
	background: #f7faf9 !important;
	padding: 80px 0 75px !important;
	position: relative !important;
}

.section--compare .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 16px 6px 8px !important;
	border-radius: 9999px !important;
	background: rgba(45, 212, 191, 0.12) !important;
	border: 1px solid rgba(45, 212, 191, 0.35) !important;
	color: #0c7a70 !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
}

/* FAQ Section ("UKK") - Light Pearl */
.section--ukk {
	background: radial-gradient(circle at 20% 15%, rgba(45, 212, 191, 0.08) 0%, transparent 40%),
	            linear-gradient(180deg, #f7faf9 0%, #edf5f3 100%) !important;
	padding: 90px 0 85px !important;
	position: relative !important;
}

.section--ukk .eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 16px 6px 8px !important;
	border-radius: 9999px !important;
	background: rgba(45, 212, 191, 0.12) !important;
	border: 1px solid rgba(45, 212, 191, 0.35) !important;
	color: #0c7a70 !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 16px !important;
	line-height: 1 !important;
}





/* ==========================================================================
   3-TIER BUTTON SYSTEM & VISUAL HIERARCHY
   - Primary: Solid Teal #0F766E + shadow + hover lift & deep glow
   - Secondary: White with #0F766E border + hover fill
   - Tertiary: Text link with arrow + underline expansion & arrow slide
   - Best Value CTA: Rich Gold gradient #f59e0b -> #d97706 + warm halo shadow
   - STRICT RULE: Only ONE primary button per viewport!
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMARY BUTTON (Solid Teal #0F766E + Shadow)
   -------------------------------------------------------------------------- */
.btn--primary,
.btn.btn--primary,
a.btn--primary {
	background: #0F766E !important;
	border: 1.5px solid #0F766E !important;
	color: #ffffff !important;
	border-radius: 9999px !important;
	padding: 13px 26px !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(15, 118, 110, 0.35), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
	transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	cursor: pointer !important;
}

.btn--primary:hover,
.btn.btn--primary:hover,
a.btn--primary:hover {
	background: #0d655e !important;
	border-color: #0d655e !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 24px rgba(15, 118, 110, 0.45), 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.btn--primary:active,
.btn.btn--primary:active,
a.btn--primary:active {
	transform: translateY(0) !important;
	box-shadow: 0 4px 10px rgba(15, 118, 110, 0.3) !important;
}

.btn--primary svg,
.btn.btn--primary svg,
a.btn--primary svg {
	transition: transform 0.22s ease !important;
	color: #ffffff !important;
	stroke: #ffffff !important;
}

.btn--primary:hover svg,
.btn.btn--primary:hover svg,
a.btn--primary:hover svg {
	transform: translateX(4px) !important;
}

/* --------------------------------------------------------------------------
   2. SECONDARY BUTTON (White with Teal Border #0F766E)
   -------------------------------------------------------------------------- */
.btn--secondary,
.btn.btn--secondary,
a.btn--secondary,
.btn--ghost,
.btn.btn--ghost,
a.btn--ghost {
	background: #ffffff !important;
	border: 1.5px solid #0F766E !important;
	color: #0F766E !important;
	border-radius: 9999px !important;
	padding: 13px 26px !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(15, 118, 110, 0.08) !important;
	transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	cursor: pointer !important;
}

.btn--secondary:hover,
.btn.btn--secondary:hover,
a.btn--secondary:hover,
.btn--ghost:hover,
.btn.btn--ghost:hover,
a.btn--ghost:hover {
	background: #0F766E !important;
	border-color: #0F766E !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(15, 118, 110, 0.28) !important;
}

.btn--secondary:active,
.btn.btn--secondary:active,
a.btn--secondary:active,
.btn--ghost:active,
.btn.btn--ghost:active,
a.btn--ghost:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 6px rgba(15, 118, 110, 0.15) !important;
}

.btn--secondary svg,
.btn.btn--secondary svg,
a.btn--secondary svg,
.btn--ghost svg,
.btn.btn--ghost svg,
a.btn--ghost svg {
	transition: transform 0.22s ease, color 0.22s ease, stroke 0.22s ease !important;
	color: #0F766E !important;
	stroke: #0F766E !important;
}

.btn--secondary:hover svg,
.btn.btn--secondary:hover svg,
a.btn--secondary:hover svg,
.btn--ghost:hover svg,
.btn.btn--ghost:hover svg,
a.btn--ghost:hover svg {
	color: #ffffff !important;
	stroke: #ffffff !important;
	transform: translateX(4px) !important;
}

/* --------------------------------------------------------------------------
   3. TERTIARY BUTTON (Text link with Arrow)
   -------------------------------------------------------------------------- */
.btn--tertiary,
.text-link,
a.text-link,
a.btn--tertiary {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #0F766E !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 4px !important;
	text-decoration: none !important;
	position: relative !important;
	min-height: auto !important;
	transition: color 0.22s ease, transform 0.22s ease !important;
	cursor: pointer !important;
}

.btn--tertiary::after,
.text-link::after,
a.text-link::after,
a.btn--tertiary::after {
	content: "" !important;
	position: absolute !important;
	bottom: 0 !important;
	left: 4px !important;
	width: calc(100% - 24px) !important;
	height: 2px !important;
	background: #0F766E !important;
	opacity: 0.35 !important;
	transition: opacity 0.22s ease, width 0.25s ease !important;
}

.btn--tertiary:hover,
.text-link:hover,
a.text-link:hover,
a.btn--tertiary:hover {
	color: #0b5953 !important;
	background: transparent !important;
	transform: none !important;
	box-shadow: none !important;
}

.btn--tertiary:hover::after,
.text-link:hover::after,
a.text-link:hover::after,
a.btn--tertiary:hover::after {
	opacity: 1 !important;
	width: calc(100% - 8px) !important;
	background: #0b5953 !important;
}

.btn--tertiary svg,
.text-link svg,
a.text-link svg,
a.btn--tertiary svg {
	width: 16px !important;
	height: 16px !important;
	color: currentColor !important;
	stroke: currentColor !important;
	transition: transform 0.22s ease !important;
}

.btn--tertiary:hover svg,
.text-link:hover svg,
a.text-link:hover svg,
a.btn--tertiary:hover svg {
	transform: translateX(5px) !important;
}

/* --------------------------------------------------------------------------
   4. "BEST VALUE" GOLD-ACCENT CTA (Featured Pricing Card & Hero Offer Card)
   -------------------------------------------------------------------------- */
.section--hinnasto .price-card--featured .btn,
.price-card--featured .btn,
.hero-offer-card__action .btn {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
	border: 1.5px solid #d97706 !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	font-size: 1rem !important;
	border-radius: 9999px !important;
	box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
	transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
	cursor: pointer !important;
}

.section--hinnasto .price-card--featured .btn:hover,
.price-card--featured .btn:hover,
.hero-offer-card__action .btn:hover {
	background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%) !important;
	border-color: #b45309 !important;
	color: #ffffff !important;
	transform: translateY(-2px) scale(1.02) !important;
	box-shadow: 0 14px 32px rgba(217, 119, 6, 0.55), 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

.section--hinnasto .price-card--featured .btn:active,
.price-card--featured .btn:active,
.hero-offer-card__action .btn:active {
	transform: translateY(0) scale(1) !important;
	box-shadow: 0 6px 18px rgba(217, 119, 6, 0.35) !important;
}

.section--hinnasto .price-card--featured .btn svg,
.price-card--featured .btn svg,
.hero-offer-card__action .btn svg {
	transition: transform 0.22s ease !important;
	color: #ffffff !important;
	stroke: #ffffff !important;
}

.section--hinnasto .price-card--featured .btn:hover svg,
.price-card--featured .btn:hover svg,
.hero-offer-card__action .btn:hover svg {
	transform: translateX(4px) !important;
}

/* --------------------------------------------------------------------------
   5. STANDARD PRICING CARDS (1kk, 3kk, 6kk - Secondary Buttons)
   -------------------------------------------------------------------------- */
.section--hinnasto .price-card:not(.price-card--featured) .btn {
	background: #ffffff !important;
	border: 1.5px solid #0F766E !important;
	color: #0F766E !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	border-radius: 9999px !important;
	box-shadow: 0 2px 6px rgba(15, 118, 110, 0.08) !important;
	transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.section--hinnasto .price-card:not(.price-card--featured) .btn:hover {
	background: #0F766E !important;
	border-color: #0F766E !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(15, 118, 110, 0.28) !important;
}

.section--hinnasto .price-card:not(.price-card--featured) .btn:hover svg {
	color: #ffffff !important;
	stroke: #ffffff !important;
	transform: translateX(4px) !important;
}

/* --------------------------------------------------------------------------
   6. VIEWPORT HARMONIZATION (Enforcing ONLY ONE Primary per Viewport)
   -------------------------------------------------------------------------- */

/* Section 6: Compare Section ("Lue koko vertailu" -> Tertiary text link with arrow) */
.section--compare a[href*="iptv-vertailu"],
.astro-widget--compare a[href*="iptv-vertailu"],
.section--compare .btn--primary,
.astro-widget--compare .btn--primary {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #0F766E !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	padding: 8px 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	position: relative !important;
	min-height: auto !important;
	transition: color 0.22s ease !important;
	text-decoration: none !important;
}

.section--compare a[href*="iptv-vertailu"]::after,
.astro-widget--compare a[href*="iptv-vertailu"]::after,
.section--compare .btn--primary::after,
.astro-widget--compare .btn--primary::after {
	content: "" !important;
	position: absolute !important;
	bottom: 2px !important;
	left: 6px !important;
	width: calc(100% - 24px) !important;
	height: 2px !important;
	background: #0F766E !important;
	opacity: 0.35 !important;
	transition: opacity 0.22s ease, width 0.25s ease !important;
}

.section--compare a[href*="iptv-vertailu"]:hover,
.astro-widget--compare a[href*="iptv-vertailu"]:hover,
.section--compare .btn--primary:hover,
.astro-widget--compare .btn--primary:hover {
	background: transparent !important;
	color: #0b5953 !important;
	transform: none !important;
	box-shadow: none !important;
}

.section--compare a[href*="iptv-vertailu"]:hover::after,
.astro-widget--compare a[href*="iptv-vertailu"]:hover::after,
.section--compare .btn--primary:hover::after,
.astro-widget--compare .btn--primary:hover::after {
	opacity: 1 !important;
	width: calc(100% - 8px) !important;
	background: #0b5953 !important;
}

.section--compare a[href*="iptv-vertailu"] svg,
.astro-widget--compare a[href*="iptv-vertailu"] svg,
.section--compare .btn--primary svg,
.astro-widget--compare .btn--primary svg {
	width: 16px !important;
	height: 16px !important;
	color: currentColor !important;
	stroke: currentColor !important;
	transition: transform 0.22s ease !important;
}

.section--compare a[href*="iptv-vertailu"]:hover svg,
.astro-widget--compare a[href*="iptv-vertailu"]:hover svg,
.section--compare .btn--primary:hover svg,
.astro-widget--compare .btn--primary:hover svg {
	transform: translateX(5px) !important;
}

/* Section 10: Guides Section ("Kaikki artikkelit" -> Tertiary text link with arrow) */
.section--oppaat a[href*="blogi"],
.section--guides a[href*="blogi"],
.section--cloud a[href*="blogi"] {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #0F766E !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	padding: 8px 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	position: relative !important;
	min-height: auto !important;
	transition: color 0.22s ease !important;
	text-decoration: none !important;
}

.section--oppaat a[href*="blogi"]::after,
.section--guides a[href*="blogi"]::after,
.section--cloud a[href*="blogi"]::after {
	content: "" !important;
	position: absolute !important;
	bottom: 2px !important;
	left: 6px !important;
	width: calc(100% - 24px) !important;
	height: 2px !important;
	background: #0F766E !important;
	opacity: 0.35 !important;
	transition: opacity 0.22s ease, width 0.25s ease !important;
}

.section--oppaat a[href*="blogi"]:hover,
.section--guides a[href*="blogi"]:hover,
.section--cloud a[href*="blogi"]:hover {
	background: transparent !important;
	color: #0b5953 !important;
	transform: none !important;
	box-shadow: none !important;
}

.section--oppaat a[href*="blogi"]:hover::after,
.section--guides a[href*="blogi"]:hover::after,
.section--cloud a[href*="blogi"]:hover::after {
	opacity: 1 !important;
	width: calc(100% - 8px) !important;
	background: #0b5953 !important;
}

.section--oppaat a[href*="blogi"] svg,
.section--guides a[href*="blogi"] svg,
.section--cloud a[href*="blogi"] svg {
	width: 16px !important;
	height: 16px !important;
	color: currentColor !important;
	stroke: currentColor !important;
	transition: transform 0.22s ease !important;
}

.section--oppaat a[href*="blogi"]:hover svg,
.section--guides a[href*="blogi"]:hover svg,
.section--cloud a[href*="blogi"]:hover svg {
	transform: translateX(5px) !important;
}

/* Section 11: Final CTA Band (1 Primary + 1 Secondary) */
.cta-band a[href*="ilmainen-testi"],
.cta-band .btn--primary {
	background: #0F766E !important;
	border: 1.5px solid #0F766E !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(15, 118, 110, 0.35) !important;
}

.cta-band a[href*="ilmainen-testi"]:hover,
.cta-band .btn--primary:hover {
	background: #0d655e !important;
	border-color: #0d655e !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 24px rgba(15, 118, 110, 0.45) !important;
}

.cta-band a[href*="wa.me"],
.cta-band .btn--ghost {
	background: #ffffff !important;
	border: 1.5px solid #0F766E !important;
	color: #0F766E !important;
	box-shadow: 0 2px 6px rgba(15, 118, 110, 0.08) !important;
}

.cta-band a[href*="wa.me"]:hover,
.cta-band .btn--ghost:hover {
	background: #0F766E !important;
	border-color: #0F766E !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(15, 118, 110, 0.28) !important;
}

/* ==========================================================================
   COMPARISON TABLE ("Paras IPTV vs. perinteinen TV")
   - Desktop: max 3 columns, 6 rows, spacious density
   - Tablet (641px - 860px): Swipeable table with sticky first column
   - Mobile (<= 640px): Stacked comparison cards, zero horizontal scroll
   - Touch targets strictly >= 44px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop Comparison Table (3 Columns, 6 Rows)
   -------------------------------------------------------------------------- */
.table-wrap {
	border: 1px solid #e1ecea !important;
	border-radius: 20px !important;
	background: #ffffff !important;
	box-shadow: 0 10px 30px rgba(7, 26, 34, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
	overflow: hidden !important;
	margin-top: 36px !important;
	position: relative !important;
	max-width: 100% !important;
}

table.compare {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	width: 100% !important;
	min-width: 0 !important;
	font-size: 0.95rem !important;
}

table.compare thead th {
	background: #f7faf9 !important;
	color: #081a24 !important;
	font-size: 0.82rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	padding: 18px 24px !important;
	border-bottom: 2px solid #e1ecea !important;
	text-align: left !important;
}

/* 4 Columns proportional distribution on desktop */
table.compare thead th:first-child,
table.compare tbody th {
	width: 22% !important;
	color: #081a24 !important;
	font-weight: 750 !important;
	font-size: 0.95rem !important;
	padding: 16px 20px !important;
	border-bottom: 1px solid #edf4f3 !important;
	text-align: left !important;
	vertical-align: middle !important;
	line-height: 1.35 !important;
}

/* Column 1: Your IPTV / Paras IPTV (Tinted Teal Column) */
table.compare th.is-best,
table.compare td.is-best {
	background: #f0fdfa !important; /* Soft Premium Teal Tint */
	color: #071a22 !important;
	font-weight: 650 !important;
	width: 30% !important;
	border-left: 2px solid rgba(15, 118, 110, 0.35) !important;
	border-right: 2px solid rgba(15, 118, 110, 0.35) !important;
	border-bottom: 1px solid rgba(15, 118, 110, 0.15) !important;
	padding: 16px 20px !important;
	vertical-align: middle !important;
	position: relative !important;
}

table.compare thead th.is-best {
	background: #e6f6f4 !important;
	color: #044e46 !important;
	font-size: 0.92rem !important;
	font-weight: 850 !important;
	border-top: 3.5px solid #0f766e !important;
	border-left: 2px solid rgba(15, 118, 110, 0.45) !important;
	border-right: 2px solid rgba(15, 118, 110, 0.45) !important;
	border-bottom: 2px solid rgba(15, 118, 110, 0.3) !important;
	box-shadow: 0 4px 14px rgba(15, 118, 110, 0.08) !important;
}

/* Columns 2 & 3: Expensive Cable & Cheap Unstable IPTV */
table.compare thead th:nth-child(3),
table.compare thead th:nth-child(4),
table.compare td:nth-of-type(2),
table.compare td:nth-of-type(3) {
	width: 24% !important;
	color: #334155 !important;
	border-bottom: 1px solid #edf4f3 !important;
	padding: 16px 20px !important;
	vertical-align: middle !important;
}

table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td {
	border-bottom: none !important;
}

table.compare tbody tr:last-child td.is-best {
	border-bottom: 2px solid rgba(15, 118, 110, 0.35) !important;
}

table.compare tbody tr:hover td:not(.is-best),
table.compare tbody tr:hover th {
	background: #fbfdfc !important;
}

table.compare tbody tr:hover td.is-best {
	background: #e0f7f3 !important;
}

/* Coloured ✓ and ✗ marks with high contrast */
.cmp-yes {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #ecfdf5 !important;
	color: #047857 !important; /* Emerald 700: Contrast 5.6:1 */
	border: 1.5px solid #a7f3d0 !important;
	font-weight: 900 !important;
	font-size: 13px !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
	margin-right: 7px !important;
	box-shadow: 0 1px 3px rgba(4, 120, 87, 0.12) !important;
}

.cmp-no {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #fef2f2 !important;
	color: #b91c1c !important; /* Red 700: Contrast 5.7:1 */
	border: 1.5px solid #fecaca !important;
	font-weight: 900 !important;
	font-size: 13px !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
	margin-right: 7px !important;
	box-shadow: 0 1px 3px rgba(185, 28, 28, 0.12) !important;
}

/* CTA Row Button: Choose the stable option → */
.table-cta-btn {
	background: #0f766e !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	font-size: 0.88rem !important;
	padding: 10px 18px !important;
	border-radius: 9999px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25) !important;
	text-decoration: none !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	white-space: nowrap !important;
	min-height: 44px !important;
}

.table-cta-btn:hover {
	background: #115e59 !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 18px rgba(15, 118, 110, 0.35) !important;
}

.table-cta-btn:focus-visible {
	outline: 2.5px solid #071a22 !important;
	outline-offset: 2px !important;
}

.table-choice-alt {
	font-size: 0.82rem !important;
	color: #64748b !important;
	font-weight: 600 !important;
	display: block !important;
}

/* Yes checkmark badge legacy support */
table.compare .yes {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	color: #047857 !important;
	font-weight: 750 !important;
}

table.compare .yes svg {
	width: 16px !important;
	height: 16px !important;
	stroke: #047857 !important;
	flex: none !important;
}

/* --------------------------------------------------------------------------
   Tablet (641px - 860px): Swipeable Table with Sticky First Column
   -------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 860px) {
	.table-wrap {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		box-shadow: 0 4px 16px rgba(7, 26, 34, 0.06) !important;
	}

	table.compare {
		min-width: 680px !important;
	}

	table.compare th:first-child,
	table.compare tbody th {
		position: sticky !important;
		left: 0 !important;
		z-index: 3 !important;
		background: #ffffff !important;
		box-shadow: 3px 0 10px rgba(7, 26, 34, 0.08) !important;
	}

	table.compare thead th:first-child {
		background: #f7faf9 !important;
		z-index: 4 !important;
	}
}

/* --------------------------------------------------------------------------
   Mobile Phone (<= 640px): Stacked Comparison Cards (Zero Horizontal Scroll!)
   Clean, modern card design with full-width legible cells
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.table-wrap {
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		overflow: visible !important;
		margin-top: 24px !important;
		padding: 0 !important;
	}

	table.compare {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		width: 100% !important;
		min-width: 0 !important;
		border: none !important;
	}

	table.compare thead {
		display: none !important;
	}

	table.compare tbody {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		width: 100% !important;
	}

	/* Each row transforms into a standalone card */
	table.compare tbody tr {
		display: flex !important;
		flex-direction: column !important;
		background: #ffffff !important;
		border: 1.5px solid #e2e8f0 !important;
		border-radius: 18px !important;
		padding: 16px 18px !important;
		box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
		gap: 10px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Card Header (Row label) */
	table.compare tbody tr th {
		display: block !important;
		width: 100% !important;
		font-size: 1.05rem !important;
		font-weight: 800 !important;
		color: #0b3d3a !important;
		padding: 0 0 10px 0 !important;
		margin: 0 !important;
		border: none !important;
		border-bottom: 1.5px solid #f1f5f9 !important;
		line-height: 1.35 !important;
		text-align: left !important;
		box-shadow: none !important;
		position: static !important;
	}

	/* Option Cells inside the card - Block layout for seamless inline text */
	table.compare tbody tr td,
	table.compare th.is-best,
	table.compare td.is-best,
	table.compare td:nth-of-type(2),
	table.compare td:nth-of-type(3) {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		padding: 11px 13px !important;
		border-radius: 12px !important;
		font-size: 0.88rem !important;
		line-height: 1.5 !important;
		box-sizing: border-box !important;
		position: relative !important;
		text-align: left !important;
	}

	/* Option Badge on top of each cell */
	table.compare tbody tr td::before {
		display: block !important;
		width: fit-content !important;
		font-size: 0.72rem !important;
		font-weight: 800 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.05em !important;
		padding: 3px 8px !important;
		border-radius: 6px !important;
		margin-bottom: 8px !important;
		line-height: 1.2 !important;
		margin-right: 0 !important;
	}

	/* 1. Paras IPTV Highlighted Cell */
	table.compare tbody tr td.is-best {
		order: 1 !important;
		background: #f0fdfa !important;
		border: 1.5px solid #0f766e !important;
		color: #0b3d3a !important;
		font-weight: 600 !important;
		box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08) !important;
	}

	table.compare tbody tr td.is-best::before {
		content: "✓ Paras IPTV (Paras valinta)" !important;
		background: #0f766e !important;
		color: #ffffff !important;
		border: none !important;
	}

	/* 2. Expensive Cable Cell */
	table.compare tbody tr td:nth-of-type(2) {
		order: 2 !important;
		background: #f8fafc !important;
		border: 1px solid #e2e8f0 !important;
		color: #475569 !important;
		font-weight: 500 !important;
	}

	table.compare tbody tr td:nth-of-type(2)::before {
		content: "Expensive Cable" !important;
		background: #e2e8f0 !important;
		color: #475569 !important;
		border: none !important;
	}

	/* 3. Cheap Unstable IPTV Cell */
	table.compare tbody tr td:nth-of-type(3) {
		order: 3 !important;
		background: #fef8f8 !important;
		border: 1px solid #fee2e2 !important;
		color: #475569 !important;
		font-weight: 500 !important;
	}

	table.compare tbody tr td:nth-of-type(3)::before {
		content: "Cheap unstable IPTV" !important;
		background: #fee2e2 !important;
		color: #b91c1c !important;
		border: none !important;
	}

	/* Action Row Button full width */
	table.compare tbody tr td .table-cta-btn {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		text-align: center !important;
		box-sizing: border-box !important;
		margin-top: 4px !important;
	}
}

/* ==========================================================================
   WCAG AA / AAA ACCESSIBILITY & CONTRAST OPTIMIZATION (Score target >= 95)
   - High-contrast visible focus rings (:focus-visible)
   - Prominent skip link focus styling
   - Light mint background contrast fixes (minimum 7:1 ratio)
   - Dark section (#0B3D3A / #061e1c) text contrast fixes (minimum 9:1 ratio)
   - Pricing & table contrast compliance
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VISIBLE FOCUS STATES (WCAG 2.4.7 Focus Visible & 2.4.11 Focus Appearance)
   -------------------------------------------------------------------------- */
:focus-visible {
	outline: 2.5px solid #0F766E !important;
	outline-offset: 3px !important;
}

/* In dark sections / headers / footers */
.section--ink :focus-visible,
.site-footer :focus-visible,
.footer :focus-visible,
.site-header :focus-visible {
	outline: 2.5px solid #2dd4bf !important;
	outline-offset: 3px !important;
}

/* Skip link focus */
.skip-link {
	position: fixed !important;
	top: -120px !important;
	left: 16px !important;
	z-index: 99999 !important;
	background: #0F766E !important;
	color: #ffffff !important;
	padding: 14px 22px !important;
	font-weight: 800 !important;
	font-size: 0.95rem !important;
	border-radius: 0 0 12px 12px !important;
	text-decoration: none !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
	transition: top 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.skip-link:focus,
.skip-link:focus-visible {
	top: 0 !important;
	outline: 3px solid #ffffff !important;
	outline-offset: -3px !important;
}

/* Target main element focusable without visual outline */
main#main:focus,
main#main:focus-visible {
	outline: none !important;
}

/* Button & Link focus refinements */
.btn:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible {
	outline: 3px solid #0F766E !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px #ffffff !important;
}

.section--hinnasto .price-card--featured .btn:focus-visible,
.hero-offer-card__action .btn:focus-visible {
	outline: 3px solid #d97706 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 2px #ffffff !important;
}

.section--channels .tab:focus-visible {
	outline: 2.5px solid #081a22 !important;
	outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   2. LIGHT MINT BACKGROUNDS CONTRAST FIXES (WCAG AA & AAA >= 7:1)
   Light mint #E6F3F2, #eaf7f4, #def2ed, #edf5f3, #f7faf9
   -------------------------------------------------------------------------- */
/* General text & subtitles on light sections */
.section--sports-buffer p,
.section--sports-buffer .lead,
.section--sports-buffer .subtext,
.section--channels p,
.section--why p,
.section--compare p,
.section--ukk p,
.section--cloud p,
.section p {
	color: #1e293b !important; /* Slate 800: Contrast 12:1 on #E6F3F2 */
}

/* Secondary meta, notes, channel card descriptions */
.channel-card__body span {
	color: #334155 !important; /* Slate 700: Contrast 8.5:1 on #E6F3F2 */
	font-weight: 500 !important;
}

.table-note,
p.table-note,
.section--channels .table-note {
	color: #334155 !important; /* Contrast 8.5:1 on #ffffff and #E6F3F2 */
	font-weight: 500 !important;
}

/* Pricing Section Contrast Fixes */
section#hinnasto .eyebrow {
	background: #0d655e !important; /* Deep Teal: Contrast 5.2:1 with white text */
	color: #ffffff !important;
	border: 1px solid #094e49 !important;
}

.section--hinnasto .price__meta,
div.price__meta,
.price-card .price__meta,
.price-card .price__meta span {
	color: #064e4b !important; /* Dark Spruce: Contrast 8.5:1 on #ffffff */
	font-weight: 750 !important;
}

.section--hinnasto .price-card__ribbon,
span.price-card__ribbon {
	background: #0d655e !important; /* Contrast 5.2:1 with white text */
	color: #ffffff !important;
}

.section--hinnasto .price-card__desc,
.price-card__desc {
	color: #334155 !important; /* Contrast 8.5:1 on #ffffff */
	font-weight: 500 !important;
}

.section--hinnasto .plan-list li,
.plan-list li {
	color: #1e293b !important; /* Contrast 12:1 on #ffffff */
	font-weight: 500 !important;
}

/* Sand WhatsApp Button in Footer */
.btn--sand,
a.btn.btn--sand {
	background: #f59e0b !important;
	border: 1.5px solid #d97706 !important;
	color: #071a22 !important; /* Contrast > 10:1 */
	font-weight: 800 !important;
}

.btn--sand:hover,
a.btn.btn--sand:hover {
	background: #fbbf24 !important;
	border-color: #b45309 !important;
	color: #071a22 !important;
}

/* --------------------------------------------------------------------------
   3. DARK SECTION CONTRAST FIXES (#0B3D3A / #061e1c / .section--ink)
   -------------------------------------------------------------------------- */
.section--ink {
	color: #f1f5f9 !important;
}

.section--ink h1,
.section--ink h2,
.section--ink h3 {
	color: #ffffff !important; /* Contrast 16:1 */
}

.section--ink p,
.section--ink .lead,
.section--ink .subtext {
	color: #e2e8f0 !important; /* Contrast 11.5:1 on #061e1c */
	font-size: 1.05rem !important;
}

.section--ink .feature-card {
	background: rgba(4, 28, 25, 0.88) !important;
	border: 1.5px solid rgba(45, 212, 191, 0.45) !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
}

.section--ink .feature-card h3 {
	color: #ffffff !important;
}

.section--ink .feature-card p {
	color: #cbd5e1 !important; /* Slate 300: Contrast 9.2:1 */
	font-weight: 450 !important;
}

.section--ink .eyebrow {
	color: #2dd4bf !important; /* Contrast 9.2:1 */
	border-color: rgba(45, 212, 191, 0.5) !important;
	background: rgba(45, 212, 191, 0.14) !important;
}

/* Footer text & disclaimers */
.footer__disclaimer {
	color: #e2e8f0 !important;
	background: rgba(255, 255, 255, 0.07) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.footer__disclaimer strong {
	color: #ffffff !important;
}

.footer__bottom,
.footer__bottom-links a,
.footer__contact small {
	color: #cbd5e1 !important;
}

/* ==========================================================================
   Trust Strip & Social Proof Pillars (Trustpilot, Active Viewers, Guarantee, Payments)
   ========================================================================== */
.trust-strip {
	background: #ffffff !important;
	border-top: 1px solid #e2e8f0 !important;
	border-bottom: 1px solid #e2e8f0 !important;
	box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05) !important;
	padding: 24px 0 20px !important;
	position: relative !important;
	z-index: 10 !important;
	overflow: hidden !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.trust-strip__inner {
	display: flex !important;
	flex-direction: column !important;
	gap: 18px !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
}

/* 4 Pillars Grid */
.trust-pillars {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	align-items: center !important;
	padding-bottom: 18px !important;
	border-bottom: 1px solid #f1f5f9 !important;
}

.trust-pillar {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	border-right: 1px solid #f1f5f9 !important;
	padding-right: 20px !important;
	min-height: 52px !important;
}

.trust-pillar:last-child {
	border-right: none !important;
	padding-right: 0 !important;
}

.trust-pillar__icon-box {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.trust-pillar__content {
	flex: 1 !important;
	min-width: 0 !important;
}

/* Trustpilot Rating */
.tp-stars {
	display: inline-flex !important;
	gap: 2px !important;
	align-items: center !important;
}

.tp-star {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 17px !important;
	height: 17px !important;
	background: #00b67a !important;
	color: #ffffff !important;
	font-size: 11px !important;
	border-radius: 2px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
}

.trust-tp-logo {
	color: #00b67a !important;
	font-weight: 900 !important;
	font-size: 0.85rem !important;
}

/* Live Active Viewers */
.live-pulse-container {
	position: relative !important;
	width: 22px !important;
	height: 22px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.live-pulse-ring {
	position: absolute !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: rgba(16, 185, 129, 0.4) !important;
	animation: trustPulseLive 2s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

.live-pulse-dot {
	width: 9px !important;
	height: 9px !important;
	border-radius: 50% !important;
	background: #059669 !important;
	position: relative !important;
	z-index: 2 !important;
	box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
}

@keyframes trustPulseLive {
	0% {
		transform: scale(0.6);
		opacity: 0.9;
	}
	100% {
		transform: scale(2.2);
		opacity: 0;
	}
}

.trust-live-tag {
	color: #047857 !important;
	font-weight: 800 !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.04em !important;
}

/* Guarantee Seal & SSL Lock */
.trust-pillar__icon-box--seal,
.trust-pillar__icon-box--lock {
	width: 40px !important;
	height: 40px !important;
	border-radius: 10px !important;
	background: rgba(15, 118, 110, 0.08) !important;
	color: #0f766e !important;
	border: 1px solid rgba(15, 118, 110, 0.2) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.trust-seal-icon,
.trust-lock-icon {
	color: #0f766e !important;
}

.trust-guarantee-check {
	color: #0f766e !important;
	font-weight: 800 !important;
	font-size: 0.8rem !important;
}

/* Pillar Typography */
.trust-pillar__title {
	font-size: 0.95rem !important;
	line-height: 1.25 !important;
	color: #071a22 !important;
	font-weight: 700 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

.trust-pillar__title strong {
	color: #071a22 !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em !important;
}

.trust-pillar__count {
	font-size: 0.82rem !important;
	color: #475569 !important;
	font-weight: 600 !important;
}

.trust-pillar__sub {
	font-size: 0.77rem !important;
	color: #475569 !important;
	font-weight: 500 !important;
	margin-top: 3px !important;
	line-height: 1.3 !important;
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
}

/* Payment Badges & SSL */
.trust-pillar__title--flex {
	justify-content: space-between !important;
	width: 100% !important;
}

.trust-ssl-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	background: #ecfdf5 !important;
	color: #065f46 !important;
	border: 1px solid #a7f3d0 !important;
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	padding: 2px 7px !important;
	border-radius: 9999px !important;
	line-height: 1 !important;
}

.trust-ssl-pill svg {
	color: #059669 !important;
}

/* --- Official Payment Badges Styling --- */
.payment-badges-row {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	flex-wrap: nowrap !important;
	margin-top: 8px !important;
}

.pay-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
	flex-shrink: 0 !important;
}

.pay-badge:hover {
	transform: translateY(-1.5px) !important;
	box-shadow: 0 3px 8px rgba(15, 23, 42, 0.14) !important;
}

.pay-badge svg {
	display: block !important;
	width: 36px !important;
	height: 24px !important;
}

@media (max-width: 480px) {
	.payment-badges-row {
		gap: 4px !important;
		flex-wrap: nowrap !important;
	}
	.pay-badge svg {
		width: 34px !important;
		height: 23px !important;
	}
}

/* Device Compatibility Chips Bar */
.trust-strip__devices {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	flex-wrap: wrap !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.trust-strip__label {
	font-size: 0.77rem !important;
	font-weight: 700 !important;
	color: #475569 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	white-space: nowrap !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.trust-strip__items {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.trust-strip .chip {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	color: #334155 !important;
	padding: 4px 11px !important;
	border-radius: 9999px !important;
	font-size: 0.76rem !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	transition: all 0.15s ease !important;
	line-height: 1.4 !important;
	box-sizing: border-box !important;
}

.trust-strip .chip svg {
	color: #0f766e !important;
	width: 13px !important;
	height: 13px !important;
	flex-shrink: 0 !important;
}

.trust-strip .chip:hover {
	background: #ffffff !important;
	border-color: #0f766e !important;
	color: #0f766e !important;
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
	.trust-pillars {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px 28px !important;
	}
	.trust-pillar {
		border-right: none !important;
		padding-right: 0 !important;
	}
	.trust-pillar--reviews,
	.trust-pillar--guarantee {
		border-right: 1px solid #f1f5f9 !important;
		padding-right: 20px !important;
	}
}

@media (max-width: 768px) {
	.trust-strip {
		padding: 16px 0 14px !important;
		background: #ffffff !important;
	}

	.trust-strip__inner {
		gap: 12px !important;
	}

	/* Synced Pillars Grid: 2 side-by-side cards on top, 2 full-width cards below */
	.trust-pillars {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
		padding-bottom: 0 !important;
		border-bottom: none !important;
	}

	.trust-pillar {
		background: #f8fafc !important;
		border: 1px solid #e2e8f0 !important;
		border-radius: 12px !important;
		padding: 11px 10px !important;
		margin: 0 !important;
		min-height: auto !important;
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
		border-right: 1px solid #e2e8f0 !important;
	}

	/* Top Row: Reviews and Viewers side by side (50% / 50%) */
	.trust-pillar--reviews,
	.trust-pillar--viewers {
		grid-column: span 1 !important;
		flex-direction: row !important;
	}

	/* Bottom Rows: Guarantee and Payments full width */
	.trust-pillar--guarantee,
	.trust-pillar--payments {
		grid-column: 1 / -1 !important;
	}

	/* Matching uniform 38px icon boxes across ALL 4 pillars */
	.trust-pillar__icon-box {
		width: 38px !important;
		height: 38px !important;
		border-radius: 10px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-shrink: 0 !important;
		background: #ffffff !important;
		border: 1px solid #e2e8f0 !important;
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
	}

	/* Pillar 1: Trustpilot green stars icon box */
	.trust-pillar--reviews .trust-pillar__icon-box {
		background: #00b67a !important;
		border-color: #00a36d !important;
	}
	.trust-pillar--reviews .tp-stars {
		display: none !important;
	}
	.trust-pillar--reviews .trust-pillar__icon-box::after {
		content: "★" !important;
		color: #ffffff !important;
		font-size: 19px !important;
		font-weight: 800 !important;
		line-height: 1 !important;
	}

	/* Pillar 2: Live pulse icon box */
	.trust-pillar--viewers .trust-pillar__icon-box {
		background: #ecfdf5 !important;
		border-color: #a7f3d0 !important;
	}

	/* Pillar 3: Seal guarantee icon box */
	.trust-pillar--guarantee .trust-pillar__icon-box {
		background: #f0fdfa !important;
		border-color: #99f6e4 !important;
		color: #0f766e !important;
	}

	/* Pillar 4: Lock payment icon box */
	.trust-pillar--payments .trust-pillar__icon-box {
		background: #ecfdf5 !important;
		border-color: #a7f3d0 !important;
		color: #047857 !important;
	}

	/* Content alignment */
	.trust-pillar__content {
		flex: 1 !important;
		min-width: 0 !important;
	}

	.trust-pillar__title {
		font-size: 0.85rem !important;
		line-height: 1.25 !important;
		color: #0f172a !important;
		font-weight: 800 !important;
	}

	.trust-pillar__count {
		font-size: 0.74rem !important;
		color: #64748b !important;
	}

	.trust-pillar__sub {
		font-size: 0.72rem !important;
		color: #475569 !important;
		font-weight: 600 !important;
		margin-top: 2px !important;
	}

	/* Payment Row in Pillar 4 */
	.trust-pillar--payments .trust-pillar__title--flex {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
	}

	.trust-ssl-pill {
		font-size: 0.68rem !important;
		padding: 2px 7px !important;
		margin-left: auto !important;
		flex-shrink: 0 !important;
	}

	.payment-badges-row {
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		margin-top: 8px !important;
		flex-wrap: wrap !important;
		width: 100% !important;
	}

	.pay-badge {
		height: 24px !important;
		border-radius: 4px !important;
		box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
		flex-shrink: 0 !important;
	}

	.pay-badge svg {
		height: 24px !important;
		width: auto !important;
	}

	/* Devices Section: Clean Multi-line Wrap on Mobile */
	.trust-strip__devices {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 9px !important;
		margin-top: 4px !important;
		padding-top: 10px !important;
		border-top: 1px solid #f1f5f9 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	.trust-strip__label {
		font-size: 0.73rem !important;
		font-weight: 750 !important;
		color: #475569 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.05em !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		white-space: normal !important;
		line-height: 1.35 !important;
		width: 100% !important;
	}

	.trust-strip__label svg {
		width: 13px !important;
		height: 13px !important;
		color: #0f766e !important;
		flex-shrink: 0 !important;
	}

	.trust-strip__items {
		display: flex !important;
		align-items: center !important;
		gap: 6px 7px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		flex-wrap: wrap !important;
		overflow: visible !important;
		justify-content: flex-start !important;
	}

	.trust-strip .chip {
		flex-shrink: 0 !important;
		background: #f8fafc !important;
		border: 1px solid #e2e8f0 !important;
		color: #334155 !important;
		font-size: 0.73rem !important;
		font-weight: 600 !important;
		padding: 5px 10px !important;
		border-radius: 9999px !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 5px !important;
		white-space: nowrap !important;
		line-height: 1.3 !important;
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
	}

	.trust-strip .chip svg {
		width: 12px !important;
		height: 12px !important;
		color: #0f766e !important;
		flex-shrink: 0 !important;
	}
}

@media (max-width: 480px) {
	.trust-pillars {
		gap: 8px !important;
	}

	.trust-pillar {
		padding: 9px 8px !important;
		gap: 8px !important;
	}

	.trust-pillar__icon-box {
		width: 34px !important;
		height: 34px !important;
		border-radius: 8px !important;
	}

	.trust-pillar__title {
		font-size: 0.80rem !important;
	}

	.trust-pillar__count,
	.trust-pillar__sub {
		font-size: 0.69rem !important;
	}

	.trust-strip .chip {
		font-size: 0.70rem !important;
		padding: 4px 8px !important;
		gap: 4px !important;
	}

	.payment-badges-row {
		gap: 5px !important;
		flex-wrap: wrap !important;
	}

	.pay-badge {
		height: 22px !important;
	}

	.pay-badge svg {
		height: 22px !important;
		width: auto !important;
	}
}

/* ==========================================================================
   Pricing Section Upgrade: Toggle Monthly/Annual, Best Value Annual @ €99.90,
   Gold Ribbon, Shadow Elevation, Per-Month €8.33/mo, Guarantee Line
   ========================================================================== */

/* Billing Toggle */
.pricing-toggle-wrap {
	display: flex !important;
	justify-content: center !important;
	margin: 0 auto 36px !important;
}

.pricing-toggle {
	display: inline-flex !important;
	align-items: center !important;
	background: #f1f5f9 !important;
	padding: 5px !important;
	border-radius: 9999px !important;
	border: 1.5px solid #cbd5e1 !important;
	gap: 6px !important;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.pricing-toggle__btn {
	padding: 10px 22px !important;
	min-height: 44px !important;
	border-radius: 9999px !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	color: #334155 !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pricing-toggle__btn:hover {
	color: #071a22 !important;
}

.pricing-toggle__btn:focus-visible {
	outline: 2.5px solid #0f766e !important;
	outline-offset: 2px !important;
}

.pricing-toggle__btn.is-active {
	background: #ffffff !important;
	color: #071a22 !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.pricing-toggle__save-pill {
	background: #fef3c7 !important;
	color: #92400e !important; /* Contrast 6.1:1 on #fef3c7 */
	border: 1px solid #fde68a !important;
	font-size: 0.72rem !important;
	font-weight: 800 !important;
	padding: 3px 9px !important;
	border-radius: 9999px !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
}

/* Price Grid layout & alignment */
.price-grid {
	align-items: center !important;
}

/* Annual Best Value Card Highlight: Slightly larger with shadow */
.price-card--annual,
.section--hinnasto .price-card--featured {
	background: linear-gradient(180deg, #fffdf8 0%, #ffffff 42%) !important;
	border: 2.5px solid #f59e0b !important;
	border-radius: 24px !important;
	box-shadow: 0 24px 50px -8px rgba(217, 119, 6, 0.28), 0 10px 24px -4px rgba(7, 26, 34, 0.1) !important;
	transform: scale(1.05) translateY(-8px) !important;
	position: relative !important;
	z-index: 5 !important;
	padding: 38px 24px 28px !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.price-card--annual:hover,
.section--hinnasto .price-card--featured:hover {
	transform: scale(1.07) translateY(-12px) !important;
	box-shadow: 0 32px 64px -10px rgba(217, 119, 6, 0.36), 0 14px 28px -4px rgba(7, 26, 34, 0.14) !important;
}

/* Gold Ribbon on Best Value */
.price-card__ribbon--gold,
.section--hinnasto .price-card--featured .price-card__ribbon {
	background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
	color: #ffffff !important;
	font-weight: 850 !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	padding: 6px 16px !important;
	border-radius: 9999px !important;
	box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	position: absolute !important;
	top: -14px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	white-space: nowrap !important;
}

/* Per-month equivalent highlight (€8.33/mo) */
.price__per-month-highlight {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-size: 0.96rem !important;
	color: #071a22 !important;
	font-weight: 800 !important;
}

.price__per-month-highlight strong {
	color: #0f766e !important;
	font-size: 1.15rem !important;
	font-weight: 900 !important;
}

.price__saving-badge {
	display: inline-block !important;
	background: #fef3c7 !important;
	color: #92400e !important;
	border: 1px solid #fde68a !important;
	font-size: 0.75rem !important;
	font-weight: 800 !important;
	padding: 2px 8px !important;
	border-radius: 9999px !important;
	margin-left: 6px !important;
}

/* Gold CTA Button for Best Value */
.btn--gold {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
	color: #071a22 !important;
	border: none !important;
	box-shadow: 0 6px 20px rgba(217, 119, 6, 0.35) !important;
	font-weight: 850 !important;
	font-size: 0.95rem !important;
	padding: 13px 24px !important;
	border-radius: 9999px !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	min-height: 48px !important;
}

.btn--gold:hover {
	background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 26px rgba(180, 83, 9, 0.45) !important;
	transform: translateY(-2px) !important;
}

.btn--gold:focus-visible {
	outline: 2.5px solid #071a22 !important;
	outline-offset: 3px !important;
}

/* Guarantee Line */
.pricing-guarantee-strip {
	margin: 36px auto 0 !important;
	text-align: center !important;
}

.pricing-guarantee-line {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 12px 18px !important;
	background: #f8fafc !important;
	border: 1.5px solid #cbd5e1 !important;
	padding: 12px 28px !important;
	border-radius: 9999px !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.guarantee-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 0.88rem !important;
	color: #071a22 !important;
	font-weight: 700 !important;
}

.guarantee-pill svg {
	color: #0f766e !important;
	width: 17px !important;
	height: 17px !important;
	flex-shrink: 0 !important;
}

.guarantee-bullet {
	color: #94a3b8 !important;
	font-weight: 800 !important;
}

.pricing-guarantee-sub {
	font-size: 0.78rem !important;
	color: #475569 !important;
	margin: 10px 0 0 0 !important;
	font-weight: 500 !important;
}

/* Toggle mode states: In monthly mode, tone down annual elevation and emphasize monthly */
.price-grid--monthly .price-card--annual {
	transform: scale(1) translateY(0) !important;
	border-color: #cbd5e1 !important;
	box-shadow: 0 8px 24px rgba(7, 26, 34, 0.05) !important;
}

.price-grid--monthly .price-card[data-plan-period="monthly"]:first-child {
	border-color: #0f766e !important;
	box-shadow: 0 16px 36px rgba(15, 118, 110, 0.15) !important;
	transform: scale(1.03) translateY(-4px) !important;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 900px) {
	.price-card--annual,
	.section--hinnasto .price-card--featured {
		transform: none !important;
		order: -1 !important;
	}
	.price-card--annual:hover,
	.section--hinnasto .price-card--featured:hover {
		transform: translateY(-4px) !important;
	}
	.pricing-toggle {
		width: 100% !important;
		max-width: 420px !important;
		justify-content: center !important;
	}
	.pricing-toggle__btn {
		flex: 1 !important;
		justify-content: center !important;
		padding: 10px 14px !important;
		font-size: 0.82rem !important;
	}
	.pricing-guarantee-line {
		border-radius: 16px !important;
		padding: 14px 18px !important;
		gap: 10px 14px !important;
	}
}

/* ==========================================================================
   Persistent Conversion Actions:
   1. Desktop Sticky Header CTA
   2. Desktop Right-Edge "Need help? WhatsApp us"
   3. Mobile Floating Bottom Bar: [Price from €8.33/mo] [Start Free Trial]
   ========================================================================== */

/* 1. Desktop Sticky Header & Persistent CTA */
.site-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 80 !important;
	transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.site-header.is-past-hero {
	background: rgba(7, 26, 34, 0.96) !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
	border-bottom: 1px solid rgba(45, 212, 191, 0.25) !important;
}

.site-header.is-past-hero .header__cta {
	background: #0f766e !important;
	color: #ffffff !important;
	box-shadow: 0 4px 16px rgba(15, 118, 110, 0.45) !important;
	transform: scale(1.02) !important;
	font-weight: 800 !important;
	border: 1px solid rgba(45, 212, 191, 0.4) !important;
}

.site-header.is-past-hero .header__cta:hover {
	background: #115e59 !important;
	color: #ffffff !important;
	transform: scale(1.04) translateY(-1px) !important;
	box-shadow: 0 6px 22px rgba(15, 118, 110, 0.55) !important;
}

/* Mobile Header Layout & Button Sizing */
@media (max-width: 980px) {
	.header__inner {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 8px !important;
		min-height: 58px !important;
		padding-inline: 12px !important;
	}

	.logo {
		display: flex !important;
		align-items: center !important;
		flex-shrink: 0 !important;
	}

	.logo__img {
		width: auto !important;
		height: 34px !important;
		max-width: 135px !important;
		object-fit: contain !important;
	}

	.header__cta,
	a.btn.header__cta,
	.site-header.is-past-hero .header__cta {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		white-space: nowrap !important;
		padding: 6px 13px !important;
		font-size: 0.76rem !important;
		font-weight: 700 !important;
		line-height: 1 !important;
		height: 36px !important;
		min-height: 36px !important;
		max-height: 36px !important;
		border-radius: 9999px !important;
		gap: 5px !important;
		margin-left: auto !important;
		flex-shrink: 0 !important;
		box-shadow: 0 2px 8px rgba(14, 124, 134, 0.25) !important;
	}

	.header__cta svg,
	a.btn.header__cta svg,
	.site-header.is-past-hero .header__cta svg {
		width: 13px !important;
		height: 13px !important;
		flex-shrink: 0 !important;
	}

	.mobile-toggle {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		white-space: nowrap !important;
		height: 36px !important;
		min-height: 36px !important;
		max-height: 36px !important;
		padding: 6px 11px !important;
		font-size: 0.74rem !important;
		font-weight: 650 !important;
		gap: 6px !important;
		flex-shrink: 0 !important;
		border-radius: 10px !important;
	}

	.mobile-toggle__bars {
		width: 14px !important;
	}

	.mobile-toggle__bars span {
		height: 2px !important;
	}
}

@media (max-width: 360px) {
	.logo__img {
		max-width: 110px !important;
		height: 29px !important;
	}

	.header__cta,
	a.btn.header__cta,
	.site-header.is-past-hero .header__cta {
		padding: 5px 9px !important;
		font-size: 0.72rem !important;
		gap: 4px !important;
	}

	.mobile-toggle {
		padding: 5px 8px !important;
		font-size: 0.7rem !important;
	}
}

/* 2. Desktop Right-Edge "Need help? WhatsApp us" */
@media (min-width: 769px) {
	.floating-wa {
		position: fixed !important;
		right: 0 !important;
		bottom: 36px !important;
		z-index: 95 !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 9px !important;
		background: #1f8f5f !important;
		color: #ffffff !important;
		padding: 12px 18px 12px 16px !important;
		border-radius: 9999px 0 0 9999px !important;
		border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
		border-right: none !important;
		font-size: 0.86rem !important;
		font-weight: 800 !important;
		text-decoration: none !important;
		box-shadow: -4px 8px 26px rgba(7, 26, 34, 0.24) !important;
		transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease !important;
	}

	.floating-wa:hover {
		background: #15803d !important;
		color: #ffffff !important;
		transform: translateX(-6px) !important;
		box-shadow: -6px 12px 32px rgba(7, 26, 34, 0.35) !important;
	}

	.floating-wa svg {
		width: 20px !important;
		height: 20px !important;
		flex-shrink: 0 !important;
	}

	.floating-wa span {
		display: inline !important;
		white-space: nowrap !important;
	}
}

/* 3. Mobile Floating Bottom Bar: [Price from €8.33/mo] [Start Free Trial] */
.mobile-sticky-bar {
	display: none;
}

@media (max-width: 768px) {
	.mobile-sticky-bar {
		display: block !important;
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 99 !important;
		background: rgba(255, 255, 255, 0.98) !important;
		backdrop-filter: blur(14px) !important;
		-webkit-backdrop-filter: blur(14px) !important;
		border-top: 1.5px solid #cbd5e1 !important;
		box-shadow: 0 -8px 24px rgba(7, 26, 34, 0.12) !important;
		padding: 10px 16px max(10px, env(safe-area-inset-bottom, 10px)) 16px !important;
		box-sizing: border-box !important;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
	}

	.mobile-sticky-bar__inner {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 14px !important;
		max-width: 480px !important;
		margin: 0 auto !important;
	}

	.mobile-sticky-bar__price {
		display: flex !important;
		flex-direction: column !important;
		line-height: 1.15 !important;
	}

	.mobile-sticky-bar__label {
		font-size: 0.72rem !important;
		font-weight: 750 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.05em !important;
		color: #475569 !important; /* Slate 600: Contrast 7.0:1 on white */
	}

	.mobile-sticky-bar__amount {
		font-size: 1.12rem !important;
		color: #071a22 !important;
		font-weight: 800 !important;
	}

	.mobile-sticky-bar__amount strong {
		color: #0f766e !important; /* Teal 700: Contrast 4.8:1 on white */
		font-weight: 900 !important;
		font-size: 1.25rem !important;
	}

	.mobile-sticky-bar__unit {
		font-size: 0.85rem !important;
		color: #475569 !important;
		font-weight: 600 !important;
	}

	.mobile-sticky-bar__btn {
		background: #0f766e !important;
		color: #ffffff !important;
		font-weight: 850 !important;
		font-size: 0.9rem !important;
		padding: 11px 20px !important;
		border-radius: 9999px !important;
		text-decoration: none !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		min-height: 46px !important; /* strictly >= 44px */
		box-shadow: 0 4px 14px rgba(15, 118, 110, 0.35) !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
		transition: background 0.2s ease, transform 0.15s ease !important;
	}

	.mobile-sticky-bar__btn:hover,
	.mobile-sticky-bar__btn:active {
		background: #115e59 !important;
		color: #ffffff !important;
		transform: translateY(-1px) !important;
	}

	/* Keep floating WhatsApp icon clear of the mobile sticky bar */
	.floating-wa {
		bottom: 78px !important;
		right: 16px !important;
		padding: 10px 12px !important;
		border-radius: 9999px !important;
		z-index: 90 !important;
	}

	/* Add bottom padding to body so mobile sticky bar does not cover footer content */
	body {
		padding-bottom: 74px !important;
	}
}


/* ==========================================================================
   v1.0.23: TRUST, LEGAL SUITE, AUTHOR BYLINE & SLA PRESENTATION
   ========================================================================== */

/* --- Company Legal & SLA Details Grid (/tietoa-meista/) --- */
.company-legal-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin: 28px 0;
}

@media (max-width: 768px) {
	.company-legal-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.company-legal-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.company-legal-card h3 {
	font-size: 1.15rem;
	font-weight: 800;
	color: #0b3d3a;
	margin: 0 0 16px 0;
	padding-bottom: 12px;
	border-bottom: 2px solid #f0fdfa;
}

.company-details-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.company-details-list li {
	font-size: 0.92rem;
	line-height: 1.5;
	color: #334155;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.company-details-list li strong {
	color: #0f172a;
	font-weight: 700;
}

.company-details-list li a {
	color: #0f766e;
	text-decoration: underline;
	font-weight: 600;
}

.company-details-list li a:hover {
	color: #115e59;
}

/* --- Team Leadership & Engineering Grid --- */
.team-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin: 20px 0 32px 0;
}

@media (max-width: 768px) {
	.team-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.team-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 22px;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.team-card__avatar {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: linear-gradient(135deg, #0f766e, #0b3d3a);
	color: #ffffff;
	font-weight: 800;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 10px rgba(15, 118, 110, 0.25);
}

.team-card__content {
	flex: 1;
}

.team-card__content h4 {
	font-size: 1.1rem;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 4px 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.team-card__content h4 a {
	color: #0f172a;
	text-decoration: none;
}

.team-card__content h4 a:hover {
	color: #0f766e;
	text-decoration: underline;
}

.team-card__role {
	font-size: 0.85rem;
	font-weight: 700;
	color: #0f766e;
	margin: 0 0 8px 0;
}

.team-card__desc {
	font-size: 0.88rem;
	line-height: 1.5;
	color: #475569;
	margin: 0;
}

/* --- Verified & Experience Badges --- */
.badge-verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
	border-radius: 9999px;
	padding: 2px 9px;
	font-size: 0.76rem;
	font-weight: 750;
	line-height: 1.3;
}

.badge-exp {
	display: inline-flex;
	align-items: center;
	background: #f1f5f9;
	color: #1e293b;
	border: 1px solid #cbd5e1;
	border-radius: 9999px;
	padding: 2px 10px;
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.3;
}

/* --- Press Mentions & Backlinks Row --- */
.press-mentions-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 18px 0 32px 0;
}

@media (max-width: 992px) {
	.press-mentions-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.press-mentions-row {
		grid-template-columns: 1fr;
	}
}

.press-mention {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.press-mention:hover {
	border-color: #0f766e;
	transform: translateY(-2px);
}

.press-mention strong {
	color: #0f766e;
	font-size: 0.95rem;
	font-weight: 800;
}

.press-mention span {
	font-size: 0.82rem;
	color: #475569;
	line-height: 1.4;
	font-style: italic;
}

/* --- Contact Section: Map & CDN Node Card --- */
.contact-map-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
	text-align: left;
}

.contact-map-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
}

.contact-map-header h4 {
	font-size: 1.15rem;
	font-weight: 800;
	color: #0b3d3a;
	margin: 0 0 4px 0;
}

.contact-map-header p {
	font-size: 0.85rem;
	color: #475569;
	margin: 0;
}

.cdn-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #6ee7b7;
	border-radius: 9999px;
	padding: 5px 12px;
	font-size: 0.8rem;
	font-weight: 750;
	box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}

.interactive-map-frame {
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

/* --- Article Top Author Byline --- */
.article-author-byline {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #f8fafc;
	border: 1px solid #ccfbf1;
	border-left: 4px solid #0f766e;
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 32px 0;
}

.author-byline-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, #0f766e, #0b3d3a);
	color: #ffffff;
	font-weight: 800;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	letter-spacing: 0.05em;
	box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}

.author-byline-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.author-byline-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.author-byline-label {
	font-size: 0.82rem;
	color: #64748b;
	font-weight: 600;
}

.author-byline-name {
	font-size: 0.95rem;
	font-weight: 800;
	color: #0f172a;
	text-decoration: none;
}

.author-byline-name:hover {
	color: #0f766e;
	text-decoration: underline;
}

.author-byline-meta {
	font-size: 0.8rem;
	color: #475569;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.byline-sep {
	color: #94a3b8;
}

.byline-bio-link {
	color: #0f766e;
	font-weight: 750;
	text-decoration: none;
}

.byline-bio-link:hover {
	text-decoration: underline;
	color: #115e59;
}

/* --- Legal Pages Common Layout & Summary Box --- */
.legal-document-wrapper {
	font-size: 1rem;
	line-height: 1.7;
	color: #334155;
}

.legal-document-wrapper h2 {
	font-size: 1.35rem;
	font-weight: 800;
	color: #0b3d3a;
	margin: 36px 0 14px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid #e2e8f0;
}

.legal-document-wrapper p {
	margin-bottom: 16px;
}

.legal-document-wrapper ul,
.legal-document-wrapper ol {
	margin: 0 0 20px 24px;
	padding: 0;
}

.legal-document-wrapper li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.legal-document-wrapper a {
	color: #0f766e;
	text-decoration: underline;
	font-weight: 600;
}

.legal-document-wrapper a:hover {
	color: #115e59;
}

.legal-summary-callout {
	background: #f0fdfa;
	border: 1px solid #99f6e4;
	border-left: 5px solid #0f766e;
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 32px;
	box-shadow: 0 4px 12px rgba(15, 118, 110, 0.05);
}

.legal-summary-callout h4 {
	font-size: 1.05rem;
	font-weight: 800;
	color: #0f766e;
	margin: 0 0 12px 0;
}

.legal-summary-callout ul {
	margin: 0 0 0 18px !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.legal-summary-callout li {
	font-size: 0.9rem;
	color: #1e293b;
	margin: 0;
}

/* --- Author Bio Page (/kirjoittaja/marcin-kowalski/) --- */
.author-bio-page-wrapper {
	font-size: 1rem;
	line-height: 1.7;
	color: #334155;
}

.author-profile-hero-card {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	background: #ffffff;
	border: 1px solid #ccfbf1;
	border-radius: 20px;
	padding: 32px;
	margin-bottom: 36px;
	box-shadow: 0 8px 30px rgba(15, 118, 110, 0.08);
}

@media (max-width: 640px) {
	.author-profile-hero-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 24px;
	}
}

.author-profile-avatar-large {
	width: 88px;
	height: 88px;
	border-radius: 20px;
	background: linear-gradient(135deg, #0f766e, #0b3d3a);
	color: #ffffff;
	font-size: 2rem;
	font-weight: 850;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	letter-spacing: 0.05em;
	box-shadow: 0 6px 18px rgba(15, 118, 110, 0.3);
}

.author-profile-details {
	flex: 1;
}

.author-profile-badge-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

@media (max-width: 640px) {
	.author-profile-badge-row {
		justify-content: center;
	}
}

.author-profile-details h2 {
	font-size: 1.75rem;
	font-weight: 850;
	color: #0f172a;
	margin: 0 0 6px 0;
}

.author-profile-title {
	font-size: 1.02rem;
	font-weight: 750;
	color: #0f766e;
	margin: 0 0 4px 0;
}

.author-profile-org {
	font-size: 0.85rem;
	color: #64748b;
	margin: 0 0 16px 0;
}

.author-profile-bio-text {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #334155;
	margin: 0;
}

.author-articles-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 24px 0;
}

@media (max-width: 768px) {
	.author-articles-grid {
		grid-template-columns: 1fr;
	}
}

.author-article-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
	transition: all 0.2s ease;
}

.author-article-card:hover {
	border-color: #0f766e;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(15, 118, 110, 0.12);
}

.author-article-tag {
	align-self: flex-start;
	background: #f0fdfa;
	color: #0f766e;
	border: 1px solid #ccfbf1;
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 0.75rem;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.author-article-card strong {
	font-size: 1.05rem;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.35;
}

.author-article-card p {
	font-size: 0.86rem;
	color: #64748b;
	line-height: 1.45;
	margin: 0;
}

/* ==========================================================================
   v1.0.24: HIGH-CONVERTING 24H TRIAL PAGE ENHANCEMENTS (/ilmainen-testi/)
   ========================================================================== */

/* --- Hero Section & Visual TV Mockup --- */
.page-hero .hero-actions {
	margin-top: 24px;
}

.page-hero .hero-actions .btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.hero-micro-trust {
	font-size: 0.82rem;
	font-weight: 600;
	color: #475569;
	margin: 12px 0 0 0;
	line-height: 1.4;
}

.page-hero__aside-custom {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mockup-tv-card {
	background: #0b3d3a;
	border: 1px solid #14b8a6;
	border-radius: 20px;
	padding: 24px;
	color: #ffffff;
	box-shadow: 0 14px 34px rgba(11, 61, 58, 0.35);
	position: relative;
	overflow: hidden;
}

.mockup-tv-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	font-size: 0.8rem;
	font-weight: 750;
	letter-spacing: 0.05em;
	color: #a7f3d0;
}

.mockup-tv-screen {
	background: radial-gradient(circle at 50% 30%, #115e59 0%, #062b29 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 22px 18px;
	text-align: center;
	margin-bottom: 16px;
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mockup-tv-screen strong {
	display: block;
	font-size: 1.15rem;
	font-weight: 850;
	color: #ffffff;
	margin-bottom: 6px;
}

.mockup-tv-screen p {
	font-size: 0.84rem;
	color: #ccfbf1;
	line-height: 1.45;
	margin: 0;
}

.mockup-tv-badge {
	display: inline-block;
	background: #f59e0b;
	color: #1e1b4b;
	font-weight: 850;
	font-size: 0.74rem;
	padding: 3px 9px;
	border-radius: 9999px;
	margin-top: 10px;
	letter-spacing: 0.04em;
}

.mockup-mini-card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	padding: 14px 16px;
}

.mockup-mini-card h4,
.mockup-mini-card .mockup-mini-title {
	font-size: 0.88rem;
	font-weight: 800;
	color: #f0fdfa;
	margin: 0 0 6px 0;
}
	margin: 0 0 6px 0;
}

.mockup-mini-card ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mockup-mini-card li {
	font-size: 0.8rem;
	color: #cbd5e1;
	line-height: 1.35;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Full-width Hero Progress Strip */
.hero-progress-strip {
	display: block;
	width: 100%;
	background: #0f766e;
	color: #ffffff;
	text-decoration: none !important;
	margin-top: 36px;
	padding: 13px 0;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25);
	transition: background 0.2s ease, transform 0.15s ease;
}

.hero-progress-strip:hover {
	background: #115e59;
	color: #ffffff;
	transform: translateY(-1px);
}

.hero-progress-strip__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 0.88rem;
	font-weight: 750;
	letter-spacing: 0.02em;
	text-align: center;
}

.hero-progress-strip__inner svg {
	width: 16px;
	height: 16px;
	color: #5eead4;
	animation: bounce-down 1.8s infinite;
}

@keyframes bounce-down {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(4px); }
	60% { transform: translateY(2px); }
}

/* --- Timeline Steps on the Left --- */
.steps--timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.steps--timeline::before {
	content: "" !important;
	display: block !important;
	position: absolute;
	left: 41px;
	top: 30px;
	bottom: 30px;
	width: 2px;
	background: #ccfbf1;
	z-index: 1;
}

.step--timeline {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
	z-index: 2;
	transition: border-color 0.2s ease;
}

.step--timeline::before,
.step--timeline:before {
	content: none !important;
	display: none !important;
}

/* --- Responsive Trial Page Layout (Steps + Form Stacking) --- */
@media (max-width: 980px) {
	.grid-2,
	.grid.grid-2,
	.elementor-widget-astro_trial .grid.grid-2 {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: 1fr !important;
		gap: 36px !important;
		width: 100% !important;
	}

	.elementor-widget-astro_trial .grid.grid-2 > div {
		width: 100% !important;
		max-width: 100% !important;
	}

	#tilaa-testi.form-card {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 8px !important;
		box-sizing: border-box !important;
	}
}

@media (max-width: 640px) {
	.steps--timeline {
		gap: 16px !important;
	}

	.step--timeline {
		padding: 16px 18px !important;
		gap: 14px !important;
		border-radius: 16px !important;
	}

	.steps--timeline::before {
		left: 37px !important;
		top: 24px !important;
		bottom: 24px !important;
	}

	.step--timeline .step__num {
		width: 38px !important;
		height: 38px !important;
		font-size: 0.92rem !important;
		flex-shrink: 0 !important;
	}

	.step__body h3 {
		font-size: 1rem !important;
		line-height: 1.35 !important;
	}

	.step__body p {
		font-size: 0.86rem !important;
		line-height: 1.5 !important;
	}

	#tilaa-testi.form-card {
		padding: 24px 18px !important;
		border-radius: 18px !important;
	}

	#tilaa-testi.form-card h2 {
		font-size: 1.35rem !important;
		line-height: 1.25 !important;
	}

	.form-step-dots {
		flex-wrap: wrap !important;
		gap: 6px !important;
		justify-content: flex-start !important;
	}

	.step-dot {
		font-size: 0.72rem !important;
		padding: 3px 8px !important;
	}

	.field-row {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
	}

	.field-row .field {
		width: 100% !important;
	}

	.field--device select,
	.field input,
	.field select {
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

.step--timeline:hover {
	border-color: #0f766e;
}

.step--gold {
	border-color: #fde68a !important;
	background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
	box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
}

.step--timeline .step__num {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #0f766e, #0b3d3a);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 850;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 3px 10px rgba(15, 118, 110, 0.25);
}

.step--gold .step__num {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

.step__body {
	flex: 1;
}

.step__body h3 {
	font-size: 1.05rem;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.step-badge {
	display: inline-flex;
	align-items: center;
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #a7f3d0;
	border-radius: 9999px;
	font-size: 0.74rem;
	font-weight: 750;
	padding: 2px 8px;
}

.step__body p {
	font-size: 0.88rem;
	color: #475569;
	line-height: 1.5;
	margin: 0;
}

.step__link {
	margin-top: 8px !important;
}

.step__link a {
	font-size: 0.84rem;
	font-weight: 750;
	color: #0f766e;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.step__link a:hover {
	text-decoration: underline;
	color: #115e59;
}

/* --- Sticky Form Card on the Right --- */
@media (min-width: 992px) {
	#tilaa-testi.form-card {
		position: sticky;
		top: 90px;
		z-index: 20;
	}
}

#tilaa-testi.form-card {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 18px;
	padding: 28px 24px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.form-step-dots {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f1f5f9;
}

.step-dot {
	font-size: 0.78rem;
	font-weight: 750;
	color: #334155;
	background: #f1f5f9;
	padding: 4px 10px;
	border-radius: 9999px;
	line-height: 1.2;
}

.step-dot.is-active {
	background: #f0fdfa;
	color: #0f766e;
	border: 1px solid #99f6e4;
}

.step-dot.is-done {
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #a7f3d0;
}

.field--device {
	margin-bottom: 16px;
}

.field--device label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 750;
	color: #0b3d3a;
}

.label-badge {
	font-size: 0.72rem;
	background: #f0fdfa;
	color: #0f766e;
	border: 1px solid #99f6e4;
	padding: 2px 7px;
	border-radius: 9999px;
	font-weight: 700;
}

.select-prominent {
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	border: 2px solid #0f766e !important;
	border-radius: 10px !important;
	padding: 11px 14px !important;
	background-color: #f0fdfa !important;
	box-shadow: 0 2px 6px rgba(15, 118, 110, 0.08) !important;
	transition: all 0.2s ease;
}

.select-prominent:focus {
	border-color: #0b3d3a !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2) !important;
}

/* Clickable Category Chips */
.field--notes {
	margin-bottom: 16px;
}

.field-helper {
	font-size: 0.75rem;
	color: #64748b;
	font-weight: normal;
	margin-left: 6px;
}

.category-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 10px 0;
}

.category-chip {
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 9999px;
	padding: 4px 10px;
	font-size: 0.76rem;
	font-weight: 700;
	color: #334155;
	cursor: pointer;
	line-height: 1.3;
	transition: all 0.15s ease;
}

.category-chip:hover,
.category-chip.is-selected {
	background: #f0fdfa;
	border-color: #0f766e;
	color: #0f766e;
	transform: translateY(-1px);
}

.form-email-alt {
	text-align: center;
	margin: 10px 0 0 0;
	font-size: 0.84rem;
}

.form-email-alt a {
	color: #0f766e;
	font-weight: 700;
	text-decoration: underline;
}

.form-email-alt a:hover {
	color: #115e59;
}

/* --- Benefit Cards & Check Boxes --- */
.check-box-gold {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 0.86rem;
	font-weight: 600;
	color: #92400e;
	margin-top: 16px;
	line-height: 1.45;
}

.check-box-gold a {
	color: #b45309;
	font-weight: 800;
	text-decoration: underline;
}

.trust-box-mint {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 0.86rem;
	font-weight: 600;
	color: #065f46;
	margin-top: 16px;
	line-height: 1.45;
}

/* FAQ CTA Pill */
.btn--pill {
	border-radius: 9999px !important;
	padding: 10px 24px !important;
	font-weight: 750 !important;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}


/* ==========================================================================
   v1.0.26: MOVIES & SERIES (VOD) SECTION STYLING & MOBILE SYNC
   ========================================================================== */
.bi-vod {
  --teal: #0f766e;
  --teal-d: #0b3d3a;
  --mint: #2dd4bf;
  --mint-soft: #99f6e4;
  --orange-1: #f59e0b;
  --orange-2: #d97706;
  --bg-1: #062b29;
  --bg-2: #0a3d39;
  --ink: #eaf7f4;
  --muted: #9cc3bd;
  --line: rgba(45, 212, 191, 0.22);
  --card: rgba(255, 255, 255, 0.05);
  --r: 16px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  padding: clamp(52px, 7vw, 96px) 0;
}

.bi-vod * {
  box-sizing: border-box;
}

.bi-vod::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60%;
  height: 70%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(45, 212, 191, 0.22), transparent 70%);
  pointer-events: none;
}

.bi-vod__wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.bi-vod__head {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px 48px;
  align-items: end;
  margin-bottom: 34px;
}

.bi-vod__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
}

.bi-vod__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.bi-vod__title {
  margin: 12px 0 14px;
  font-size: clamp(32px, 4.8vw, 54px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.bi-vod__title em {
  font-style: normal;
  color: var(--mint);
  background: linear-gradient(transparent 68%, rgba(45, 212, 191, 0.28) 68% 92%, transparent 92%);
}

.bi-vod__lead {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--muted);
}

.bi-vod__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.bi-vod__stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 14px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
}

.bi-vod__stat b {
  display: block;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.bi-vod__stat span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 2px;
  display: block;
}

/* Toolbar: Tabs + Navigation Arrows */
.bi-vod__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.bi-vod__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}

.bi-vod__tabs::-webkit-scrollbar {
  display: none;
}

.bi-vod__tab {
  appearance: none;
  cursor: pointer;
  white-space: nowrap;
  font: 700 13.5px/1 Inter, sans-serif;
  padding: 11px 18px;
  border-radius: 9999px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
}

.bi-vod__tab:hover {
  border-color: var(--mint);
  transform: translateY(-1px);
  color: #ffffff;
}

.bi-vod__tab[aria-selected="true"] {
  background: var(--teal);
  border-color: var(--mint);
  color: #ffffff;
  box-shadow: 0 6px 18px -4px rgba(15, 118, 110, 0.7);
}

.bi-vod__arrows {
  display: flex;
  gap: 8px;
  flex: none;
}

.bi-vod__arrow {
  appearance: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  transition: all 0.2s ease;
}

.bi-vod__arrow:hover:not(:disabled) {
  background: var(--teal);
  border-color: var(--mint);
  color: #ffffff;
  transform: scale(1.05);
}

.bi-vod__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.bi-vod__arrow svg {
  width: 18px;
  height: 18px;
}

/* Poster Rail */
.bi-vod__rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 0 -24px;
  padding: 10px 24px 18px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 48px), transparent);
}

.bi-vod__rail::-webkit-scrollbar {
  display: none;
}

.bi-vod__rail:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
  border-radius: 14px;
}

.bi-vod__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
}

.bi-vod__item {
  flex: 0 0 clamp(142px, 17vw, 200px);
  scroll-snap-align: start;
}

.bi-vod__card {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.bi-vod__poster {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--a, #14b8a6), var(--b, #134e4a));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, border-color 0.35s;
}

.bi-vod__poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 26%, rgba(255, 255, 255, 0.30) 0 13%, transparent 14%),
             linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent 55%);
}

.bi-vod__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.55);
}

.bi-vod__ph svg {
  width: 36%;
  height: auto;
}

.bi-vod__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.bi-vod__badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 9999px;
  backdrop-filter: blur(6px);
}

.bi-vod__badge--type {
  left: 10px;
  background: rgba(6, 43, 41, 0.85);
  color: var(--mint-soft);
  border: 1px solid var(--line);
}

.bi-vod__badge--q {
  right: 10px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.bi-vod__badge--new {
  left: 10px;
  top: auto;
  bottom: 10px;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.4);
}

.bi-vod__play {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  background: linear-gradient(0deg, rgba(6, 43, 41, 0.8), rgba(6, 43, 41, 0.3));
  transition: opacity 0.3s ease;
}

.bi-vod__play i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  color: #ffffff;
  box-shadow: 0 10px 24px -6px rgba(217, 119, 6, 0.8);
  transform: scale(0.85);
  transition: transform 0.3s ease;
}

.bi-vod__play svg {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

.bi-vod__card:hover .bi-vod__poster,
.bi-vod__card:focus-visible .bi-vod__poster {
  transform: translateY(-6px);
  border-color: var(--mint);
  box-shadow: 0 24px 40px -14px rgba(45, 212, 191, 0.4);
}

.bi-vod__card:hover .bi-vod__play,
.bi-vod__card:focus-visible .bi-vod__play {
  opacity: 1;
}

.bi-vod__card:hover .bi-vod__play i,
.bi-vod__card:focus-visible .bi-vod__play i {
  transform: scale(1);
}

.bi-vod__meta {
  padding: 12px 4px 0;
}

.bi-vod__name {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #ffffff;
}

.bi-vod__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.bi-vod__empty {
  padding: 40px 0;
  color: var(--muted);
  text-align: center;
}

/* Scroll progress */
.bi-vod__progress {
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  margin-top: 6px;
  overflow: hidden;
}

.bi-vod__progress span {
  display: block;
  height: 100%;
  width: 30%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--mint), var(--teal));
  transition: width 0.15s ease;
}

/* Footer: Info Note + CTAs */
.bi-vod__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.bi-vod__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 560px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.bi-vod__note svg {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--mint);
}

.bi-vod__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bi-vod__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 750 15px/1 Inter, sans-serif;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 9999px;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  min-height: 48px;
}

.bi-vod__btn svg {
  width: 18px;
  height: 18px;
}

.bi-vod__btn--pri {
  color: #ffffff;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  box-shadow: 0 10px 24px -8px rgba(217, 119, 6, 0.7);
}

.bi-vod__btn--pri:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -8px rgba(217, 119, 6, 0.9);
  color: #ffffff;
}

.bi-vod__btn--ghost {
  color: var(--ink);
  border: 1.5px solid var(--mint);
  background: transparent;
}

.bi-vod__btn--ghost:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #ffffff;
  transform: translateY(-2px);
}

.bi-vod__btn:focus-visible,
.bi-vod__tab:focus-visible,
.bi-vod__arrow:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

/* Responsive & Mobile Optimization */
@media (max-width: 900px) {
  .bi-vod__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
  }
}

@media (max-width: 640px) {
  .bi-vod {
    padding: 44px 0 52px;
  }
  .bi-vod__wrap {
    padding: 0 16px;
  }
  .bi-vod__title {
    font-size: clamp(28px, 8vw, 38px);
  }
  .bi-vod__rail {
    margin: 0 -16px;
    padding: 10px 16px 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
  }
  .bi-vod__arrows {
    display: none;
  }
  .bi-vod__item {
    flex-basis: 44vw;
  }
  .bi-vod__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .bi-vod__stat {
    padding: 12px 8px;
    text-align: center;
    border-radius: 12px;
  }
  .bi-vod__stat b {
    font-size: 1.15rem;
  }
  .bi-vod__stat span {
    font-size: 0.72rem;
    line-height: 1.3;
  }
  .bi-vod__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .bi-vod__cta {
    flex-direction: column;
  }
  .bi-vod__cta .bi-vod__btn {
    width: 100%;
    justify-content: center;
  }
  .bi-vod__play {
    display: none;
  }
}

@media (max-width: 380px) {
  .bi-vod__item {
    flex-basis: 58vw;
  }
  .bi-vod__stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .bi-vod__stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 10px 14px;
  }
}

@media (hover: none) {
  .bi-vod__play {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bi-vod__rail {
    scroll-behavior: auto;
  }
  .bi-vod * {
    transition: none !important;
  }
}


/* ==========================================================================
   v1.0.27: SPORTS & LEAGUES SECTION STYLING & MOBILE SYNC
   ========================================================================== */

.bi-sp {
  --teal: #0f766e;
  --teal-d: #0b3d3a;
  --mint: #2dd4bf;
  --orange-1: #f59e0b;
  --orange-2: #d97706;
  --ink: #0b1f24;
  --muted: #4a5d62;
  --line: rgba(14, 107, 102, 0.15);
  --card: #ffffff;
  --tile: #fef3c7;
  --tile-line: #fde68a;
  --r: 16px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, #e3f7f1 0%, #f4fbf8 55%, #fdf6e8 100%);
  padding: clamp(52px, 7vw, 96px) 0;
}

.bi-sp * {
  box-sizing: border-box;
}

.bi-sp::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto auto -25% -10%;
  width: 55%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(45, 212, 191, 0.22), transparent 70%);
  pointer-events: none;
}

.bi-sp__wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.bi-sp__head {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 34px;
}

.bi-sp__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 6px 14px;
  border-radius: 9999px;
}

.bi-sp__pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  animation: bi-sp-pulse 1.8s infinite;
}

@keyframes bi-sp-pulse {
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.bi-sp__title {
  margin: 14px 0 12px;
  font-size: clamp(32px, 4.8vw, 54px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 16ch;
  color: #071a22;
}

.bi-sp__title em {
  font-style: normal;
  color: var(--teal);
  background: linear-gradient(transparent 68%, rgba(45, 212, 191, 0.35) 68% 92%, transparent 92%);
}

.bi-sp__lead {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: var(--muted);
}

.bi-sp__head > div:first-child {
  flex: 1 1 440px;
}

.bi-sp__count {
  flex: none;
  display: flex;
  gap: 12px;
}

.bi-sp__count div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 22px;
  min-width: 120px;
  box-shadow: 0 10px 24px -14px rgba(14, 107, 102, 0.35);
  text-align: center;
}

.bi-sp__count b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--teal);
}

.bi-sp__count span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
  display: block;
}

/* Sport Tabs */
.bi-sp__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
  margin-bottom: 22px;
}

.bi-sp__tabs::-webkit-scrollbar {
  display: none;
}

.bi-sp__tab {
  appearance: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 13.5px/1 Inter, sans-serif;
  padding: 11px 16px;
  border-radius: 9999px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  transition: all 0.2s ease;
  min-height: 42px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.bi-sp__tab svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.bi-sp__tab small {
  font: 750 11px/1 Inter, sans-serif;
  padding: 3px 7px;
  border-radius: 9999px;
  background: rgba(14, 107, 102, 0.1);
  color: var(--teal);
}

.bi-sp__tab:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
}

.bi-sp__tab[aria-selected="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: #ffffff;
  box-shadow: 0 8px 20px -8px rgba(14, 107, 102, 0.85);
}

.bi-sp__tab[aria-selected="true"] small {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* League Grid */
.bi-sp__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bi-sp__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(14, 107, 102, 0.35);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s, border-color 0.3s;
  animation: bi-sp-in 0.45s both;
}

@keyframes bi-sp-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.bi-sp__card:hover,
.bi-sp__card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--mint);
  box-shadow: 0 20px 36px -16px rgba(14, 107, 102, 0.45);
  outline: none;
}

.bi-sp__card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.bi-sp__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bi-sp__ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
  flex-shrink: 0 !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.bi-sp__card:hover .bi-sp__ico {
  transform: scale(1.05);
  border-color: var(--teal) !important;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.16) !important;
}

.bi-sp__ico img,
.bi-sp__ico svg {
  max-width: 38px !important;
  max-height: 38px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.bi-sp__status {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.bi-sp__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.bi-sp__status--on {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

.bi-sp__status--all {
  color: var(--teal);
  background: rgba(14, 107, 102, 0.1);
  border: 1px solid rgba(14, 107, 102, 0.2);
}

.bi-sp__status--off {
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.bi-sp__name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #071a22;
}

.bi-sp__desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.bi-sp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.bi-sp__chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-d);
  background: #f0faf7;
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 9999px;
}

.bi-sp__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--teal);
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
}

.bi-sp__go svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease;
}

.bi-sp__card:hover .bi-sp__go svg {
  transform: translateX(4px);
}

.bi-sp__more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.bi-sp__morebtn {
  appearance: none;
  cursor: pointer;
  font: 750 14.5px/1 Inter, sans-serif;
  color: var(--teal);
  background: #ffffff;
  border: 1.5px solid var(--teal);
  padding: 13px 26px;
  border-radius: 9999px;
  transition: all 0.2s ease;
  min-height: 44px;
}

.bi-sp__morebtn:hover {
  background: var(--teal);
  color: #ffffff;
  box-shadow: 0 6px 18px -4px rgba(15, 118, 110, 0.4);
}

/* Match-day Performance Strip */
.bi-sp__feat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(160deg, #062b29, #0a3d39);
  color: #eaf7f4;
  border: 1px solid rgba(45, 212, 191, 0.25);
  box-shadow: 0 14px 34px -14px rgba(6, 43, 41, 0.5);
}

.bi-sp__f {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 6px 8px;
}

.bi-sp__f svg {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 12px;
  color: #2dd4bf;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.28);
}

.bi-sp__f b {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.bi-sp__f span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: #9cc3bd;
}

/* Footer: Info Note + CTAs */
.bi-sp__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 32px;
}

.bi-sp__note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 600px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  backdrop-filter: blur(8px);
}

.bi-sp__note svg {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--teal);
}

.bi-sp__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.bi-sp__link {
  font-weight: 750;
  font-size: 15.5px;
  color: var(--teal);
  text-decoration: none;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: linear-gradient(var(--mint), var(--mint)) 0 100% / 100% 2px no-repeat;
  padding-bottom: 4px;
  min-height: 44px;
}

.bi-sp__link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.bi-sp__link:hover svg {
  transform: translateX(3px);
}

.bi-sp__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 750 15px/1 Inter, sans-serif;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 9999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  box-shadow: 0 10px 24px -8px rgba(217, 119, 6, 0.7);
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 48px;
}

.bi-sp__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -8px rgba(217, 119, 6, 0.9);
  color: #ffffff;
}

.bi-sp__btn svg {
  width: 18px;
  height: 18px;
}

.bi-sp__btn:focus-visible,
.bi-sp__tab:focus-visible,
.bi-sp__link:focus-visible,
.bi-sp__morebtn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Responsive & Mobile Optimization */
@media (max-width: 980px) {
  .bi-sp__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bi-sp__feat {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .bi-sp {
    padding: 44px 0 52px;
  }
  .bi-sp__wrap {
    padding: 0 16px;
  }
  .bi-sp__title {
    font-size: clamp(28px, 8vw, 38px);
    max-width: 100%;
  }
  .bi-sp__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bi-sp__card {
    padding: 16px;
  }
  .bi-sp__count {
    width: 100%;
    gap: 8px;
  }
  .bi-sp__count div {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
  }
  .bi-sp__count b {
    font-size: 24px;
  }
  .bi-sp__feat {
    grid-template-columns: 1fr;
    padding: 16px;
    border-radius: 16px;
    gap: 14px;
  }
  .bi-sp__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .bi-sp__cta {
    flex-direction: column;
    width: 100%;
  }
  .bi-sp__cta .bi-sp__link {
    justify-content: center;
    width: 100%;
  }
  .bi-sp__cta .bi-sp__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bi-sp *,
  .bi-sp *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Article End Offer CTA Box
   ========================================================================== */
.article-offer-box {
	background: linear-gradient(135deg, #071a22 0%, #0d2e2b 100%) !important;
	border: 1.5px solid #2dd4bf !important;
	border-radius: 20px !important;
	padding: 32px 28px !important;
	margin: 44px 0 36px 0 !important;
	color: #ffffff !important;
	box-shadow: 0 12px 35px rgba(7, 26, 34, 0.25) !important;
	position: relative !important;
	overflow: hidden !important;
}

.article-offer-box::before {
	content: "" !important;
	position: absolute !important;
	top: -50% !important;
	right: -20% !important;
	width: 320px !important;
	height: 320px !important;
	background: radial-gradient(circle, rgba(45, 212, 191, 0.16) 0%, transparent 70%) !important;
	pointer-events: none !important;
}

.article-offer-box__badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: rgba(45, 212, 191, 0.15) !important;
	border: 1px solid rgba(45, 212, 191, 0.45) !important;
	color: #2dd4bf !important;
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	padding: 5px 14px !important;
	border-radius: 9999px !important;
	margin-bottom: 14px !important;
}

.article-offer-box h3 {
	font-size: 1.6rem !important;
	font-weight: 850 !important;
	color: #ffffff !important;
	margin: 0 0 10px 0 !important;
	line-height: 1.25 !important;
}

.article-offer-box p {
	font-size: 0.95rem !important;
	color: #cbd5e1 !important;
	line-height: 1.62 !important;
	margin: 0 0 22px 0 !important;
}

.article-offer-box__plans {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 12px !important;
	margin-bottom: 24px !important;
}

.article-offer-plan {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 14px !important;
	padding: 14px 10px !important;
	text-align: center !important;
	text-decoration: none !important;
	color: #ffffff !important;
	transition: all 0.22s ease !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
}

.article-offer-plan:hover,
.article-offer-plan--featured {
	background: rgba(45, 212, 191, 0.15) !important;
	border-color: #2dd4bf !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 6px 18px rgba(45, 212, 191, 0.2) !important;
}

.article-offer-plan__period {
	font-size: 0.82rem !important;
	color: #94a3b8 !important;
	font-weight: 600 !important;
	display: block !important;
}

.article-offer-plan__price {
	font-size: 1.25rem !important;
	font-weight: 900 !important;
	color: #ffffff !important;
	margin: 4px 0 !important;
	display: block !important;
	letter-spacing: -0.02em !important;
}

.article-offer-plan__sub {
	font-size: 0.72rem !important;
	color: #2dd4bf !important;
	font-weight: 750 !important;
	display: block !important;
}

.article-offer-box__actions {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
}

.article-offer-box__btn {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	padding: 13px 26px !important;
	border-radius: 9999px !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 0.95rem !important;
	box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
	transition: all 0.2s ease !important;
}

.article-offer-box__btn:hover {
	background: #047857 !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
}

.article-offer-box__btn-sec {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	padding: 12px 22px !important;
	border-radius: 9999px !important;
	text-decoration: none !important;
	font-size: 0.9rem !important;
	transition: all 0.2s ease !important;
}

.article-offer-box__btn-sec:hover {
	border-color: #2dd4bf !important;
	color: #2dd4bf !important;
}

@media (max-width: 768px) {
	.article-offer-box {
		padding: 24px 18px !important;
		margin: 32px 0 24px 0 !important;
	}
	.article-offer-box h3 {
		font-size: 1.35rem !important;
	}
	.article-offer-box__plans {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}
	.article-offer-box__actions {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	.article-offer-box__btn,
	.article-offer-box__btn-sec {
		justify-content: center !important;
		text-align: center !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* ==========================================================================
   HOMEPAGE BUYER'S GUIDE (Streamlined & Mobile Optimized)
   ========================================================================== */

.homepage-seo-guide {
	max-width: 1040px;
	margin: 0 auto;
	padding: 10px 0 20px;
}

/* Lead Hero Card (Dark Accent) */
.guide-lead-card {
	background: linear-gradient(135deg, #071a22 0%, #0c3330 100%) !important;
	border: 1.5px solid rgba(45, 212, 191, 0.45) !important;
	border-radius: 20px !important;
	padding: 34px 30px !important;
	margin-bottom: 36px !important;
	box-shadow: 0 12px 36px rgba(7, 26, 34, 0.16) !important;
	color: #ffffff !important;
}

.guide-lead-card,
.guide-lead-card p,
.guide-lead-card .guide-lead-intro {
	color: #e2e8f0 !important;
	font-size: 1rem !important;
	line-height: 1.72 !important;
	margin: 0 0 12px 0 !important;
}

.guide-lead-card p:last-child,
.guide-lead-card .guide-lead-intro:last-child {
	margin-bottom: 0 !important;
}

.guide-badge {
	background: rgba(45, 212, 191, 0.15) !important;
	border: 1px solid rgba(45, 212, 191, 0.45) !important;
	color: #2dd4bf !important;
	font-size: 0.74rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	padding: 5px 14px !important;
	border-radius: 9999px !important;
	display: inline-block !important;
	margin-bottom: 14px !important;
}

.guide-lead-card h2 {
	font-size: 1.75rem !important;
	font-weight: 850 !important;
	color: #ffffff !important;
	margin: 0 0 14px 0 !important;
	line-height: 1.25 !important;
}

.guide-lead-card strong,
.guide-lead-card .guide-lead-intro strong {
	color: #2dd4bf !important;
	font-weight: 750 !important;
}

/* Content Sections (High Contrast on White / Light Surface) */
.guide-content-section {
	margin-bottom: 32px !important;
}

.guide-content-section h3 {
	font-size: 1.32rem !important;
	font-weight: 800 !important;
	color: #071a22 !important;
	margin: 0 0 14px 0 !important;
	line-height: 1.35 !important;
	border-left: 3.5px solid #0e7c86 !important;
	padding-left: 14px !important;
}

.guide-content-section p {
	font-size: 0.98rem !important;
	color: #334155 !important;
	line-height: 1.72 !important;
	margin: 0 0 14px 0 !important;
}

.guide-content-section strong {
	color: #071a22 !important;
	font-weight: 750 !important;
}

/* Guide Devices Grid */
.guide-devices-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 16px !important;
	margin: 18px 0 24px 0 !important;
}

.guide-device-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px !important;
	padding: 18px 20px !important;
	box-shadow: 0 2px 8px rgba(7, 26, 34, 0.04) !important;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.guide-device-card:hover {
	border-color: #0e7c86 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 16px rgba(7, 26, 34, 0.08) !important;
}

.guide-device-card h4 {
	font-size: 1.05rem !important;
	font-weight: 750 !important;
	color: #071a22 !important;
	margin: 0 0 8px 0 !important;
	line-height: 1.3 !important;
}

.guide-device-card p {
	font-size: 0.9rem !important;
	color: #475569 !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

.guide-device-card strong {
	color: #0e7c86 !important;
	font-weight: 700 !important;
}

/* 4-Pillar Grid */
.guide-pillars-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 16px !important;
	margin: 32px 0 !important;
}

.guide-pillar-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	padding: 22px 20px !important;
	box-shadow: 0 2px 8px rgba(7, 26, 34, 0.04) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.guide-pillar-card:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 20px rgba(7, 26, 34, 0.08) !important;
	border-color: #cbd5e1 !important;
}

.guide-pillar-icon {
	font-size: 1.5rem !important;
	margin-bottom: 10px !important;
}

.guide-pillar-card h4 {
	font-size: 1.05rem !important;
	font-weight: 750 !important;
	color: #071a22 !important;
	margin: 0 0 8px 0 !important;
	line-height: 1.3 !important;
}

.guide-pillar-card p {
	font-size: 0.88rem !important;
	color: #475569 !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

/* Responsive optimization for mobile */
@media (max-width: 768px) {
	.guide-lead-card {
		padding: 22px 18px !important;
		border-radius: 16px !important;
		margin-bottom: 26px !important;
	}

	.guide-lead-card h2 {
		font-size: 1.35rem !important;
		line-height: 1.3 !important;
	}

	.guide-lead-intro {
		font-size: 0.92rem !important;
		line-height: 1.65 !important;
	}

	.guide-content-section h3 {
		font-size: 1.15rem !important;
		line-height: 1.35 !important;
		padding-left: 10px !important;
		border-left-width: 3px !important;
	}

	.guide-content-section p {
		font-size: 0.92rem !important;
		line-height: 1.65 !important;
	}

	.guide-devices-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		margin: 16px 0 20px 0 !important;
	}

	.guide-device-card {
		padding: 16px 14px !important;
	}

	.guide-device-card h4 {
		font-size: 0.98rem !important;
	}

	.guide-device-card p {
		font-size: 0.86rem !important;
	}

	.guide-pillars-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		margin: 24px 0 !important;
	}

	.guide-pillar-card {
		padding: 18px 16px !important;
	}

	.guide-pillar-card h4 {
		font-size: 0.98rem !important;
	}

	.guide-pillar-card p {
		font-size: 0.85rem !important;
	}
}