/* Constrain page content while body keeps full-bleed background */
.wc-welcome-page {
	/* make main full-bleed while keeping internal padding for readable content */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--welcome-foreground);
	font-family: 'Open Sans', Arial, sans-serif;
	width: 100%;
	box-sizing: border-box;
	padding-left: 0.75em; /* content inset */
	padding-right: 0.75em; /* content inset */
}

.wc-hero-left .wc-eyebrow { color: var(--md-yellow); font-family: 'Poppins', 'Open Sans', Arial, sans-serif; font-weight: 500; margin-bottom: 0.5rem; font-size: 1.6rem; letter-spacing: 0.2px; }
.wc-hero h1 { color: var(--md-white); font-size: 3.5rem; line-height: 1.05; margin: 0 0 0.6rem 0; }
.wc-hero-lead { color: rgba(255,255,255,0.95); margin-bottom: 1.25rem; font-size: 1.15rem; }

/* tighten vertical rhythm in hero */
.wc-hero h1 { line-height: 1.02; }
.wc-hero-left h2.wc-eyebrow { line-height: 1.5; }
.wc-hero-lead { line-height: 1.3; }

/* utility text colors for hero phrasing */
.wc-text-grey { color: var(--md-grey); font-weight: 400; }
.wc-text-yellow { color: var(--md-yellow); font-weight: 800; }

/* removed duplicate `wc-cl-md-*` helpers — use the short `md-` utilities below */

/* Short helpers using the md- prefix so HTML can use simple classes like `md-yellow` or `bg-md-blue-dark` */
.md-orange { color: var(--md-orange) !important; }
.md-yellow { color: var(--md-yellow) !important; }
.md-blue-dark { color: var(--md-blue-dark) !important; }
.md-blue { color: var(--md-blue) !important; }
.md-white { color: var(--md-white) !important; }
.md-grey { color: var(--md-grey) !important; }
.md-black { color: var(--md-black) !important; }
.md-green { color: var(--md-green) !important; }
.md-green-dark { color: var(--md-green-dark) !important; }

.bg-md-orange { background: var(--md-orange) !important; }
.bg-md-yellow { background: var(--md-yellow) !important; }
.bg-md-blue-dark { background: var(--md-blue-dark) !important; }
.bg-md-blue { background: var(--md-blue) !important; }
.bg-md-white { background: var(--md-white) !important; }
.bg-md-grey { background: var(--md-grey) !important; }
.bg-md-black { background: var(--md-black) !important; }
.bg-md-green { background: var(--md-green) !important; }
.bg-md-green-dark { background: var(--md-green-dark) !important; }

/* Full-bleed background applied to body so it spans entire viewport width */
body.wc-welcome-bg-page{
	/* keep body layout normal; background rendered by fixed ::before to guarantee full-viewport coverage */
	background: transparent;
	position: relative;
}

/* Full-viewport background layer (covers entire page and stays behind content) */
body.wc-welcome-bg-page::before{
	content: '';
	position: fixed;
	inset: 0;
	z-index: -999;
	pointer-events: none;
	background: linear-gradient(90deg,
		var(--md-blue-dark) 0%,
		var(--md-blue-dark) 60%,
		color-mix(in srgb, var(--md-blue-dark) 85%, var(--md-blue) 15%) 70%,
		color-mix(in srgb, var(--md-blue-dark) 70%, var(--md-blue) 30%) 80%,
		color-mix(in srgb, var(--md-blue-dark) 45%, var(--md-blue) 55%) 92%,
		var(--md-blue) 100%
	);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.wc-welcome-header {
	display: block; /* full-bleed header, inner container will limit content */
	/* header height is exposed via a CSS variable so content can offset itself */
	--wc-header-height: 120px; /* default desktop header height (approx) */
	padding: 1rem 0;
	position: fixed; /* keep header visible */
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	/* Same gradient background as the page */
	background: linear-gradient(90deg,
		var(--md-blue-dark) 0%,
		var(--md-blue-dark) 60%,
		color-mix(in srgb, var(--md-blue-dark) 85%, var(--md-blue) 15%) 70%,
		color-mix(in srgb, var(--md-blue-dark) 70%, var(--md-blue) 30%) 80%,
		color-mix(in srgb, var(--md-blue-dark) 45%, var(--md-blue) 55%) 92%,
		var(--md-blue) 100%
	);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border to separate header from content */
	/* Light transparency for subtle glass effect */
	opacity: 0.96;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Page inner container constrains readable content while leaving header/background full-bleed */
.wc-page-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
	box-sizing: border-box;
}

/* push page content below the fixed header so it scrolls under it */
.wc-welcome-page {
	padding-top: var(--wc-header-height, 40px);
}

@media (max-width: 600px) {
	.wc-page-inner {
		/* constrain readable column to common mobile widths */
		max-width: 420px;
		width: 100%;
		margin: 0 auto;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
	}

	/* mobile header is shorter; set the header height CSS variable accordingly */
	.wc-welcome-header { --wc-header-height: 92px; }
}

/* inner header container: allow full-width header — content aligned via padding */
.wc-welcome-header .wc-header-inner {
	width: 100%;
	box-sizing: border-box;
	padding: 0 1.25rem; /* default horizontal padding; responsive overrides follow */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* make nav buttons spaced out more */
.wc-welcome-nav{
	display:flex;
	gap:1.25rem; /* increased gap between buttons */
	align-items:center;
}

@media (max-width:600px){
	.wc-welcome-nav{ gap:0.6rem }
}

/* centered header label */
.wc-header-center{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.95);
	font-weight:700;
	font-size:0.98rem;
	pointer-events: none;
}

@media (max-width:800px){
	.wc-header-center{ display:none }
}

.wc-logo {
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 1.6rem;
	color: var(--md-white);
}

.wc-logo-img { height: 60px; display: block; }

.wc-logo-b2b { background: var(--md-blue); padding: 4px 8px; border-radius: 18px; margin-left: 6px; color: var(--md-white); font-weight:700; }

.wc-hero-intro { display: flex; align-items: stretch; gap: 1.25rem; padding: 1rem 1rem; margin-top: 0.75rem; margin-bottom: 3rem; }
.wc-hero-left { flex: 1 1 55%; display:flex; flex-direction: column; justify-content: center; }
.wc-hero-right { flex: 1 1 45%; display:flex; align-items: center; justify-content: center; }
.wc-hero-right .wc-hero-car { max-width: 520px; width: 100%; height: auto; border-radius: 0; box-shadow: none; background: transparent; display: block; }

/* allow the car to overflow slightly for stylistic placement */
.wc-hero-right { overflow: visible; }

/* increase gap between H1 and eyebrow-styled H2 */
.wc-hero-left h2.wc-eyebrow { margin-top: 0.3rem; margin-bottom: 1rem; }

/* small pill tags below eyebrow */
.wc-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	background: rgba(255,255,255,0.04);
	color: var(--md-white);
	padding: 0.45rem;
	border-radius: 12px;
	font-size: 0.80rem;
	margin: 2.5rem 0rem 0.6rem 0rem;
	letter-spacing: 0.3px;
	align-self: flex-start;
	justify-content: flex-start; /* Align tags to the left */
}

.wc-me-1 { margin-right: 0.5rem; }
.wc-me-2 { margin-right: 1rem; }
.wc-me-3 { margin-right: 1.5rem; }
.wc-me-4 { margin-right: 2rem; }
.wc-me-5 { margin-right: 2.5rem; }
.wc-me-6 { margin-right: 3rem; }
.wc-me-7 { margin-right: 3.5rem; }
.wc-me-8 { margin-right: 4rem; }
.wc-me-9 { margin-right: 4.5rem; }
.wc-me-10 { margin-right: 5rem; }

/* Desktop: force single-line layout for hero tags — prevent wrapping */
@media (min-width: 901px) {
	.wc-hero-tags {
		display: flex;
		flex-wrap: nowrap; /* keep all tags on one line */
		overflow-x: auto; /* allow horizontal scroll if space is tight */
		-webkit-overflow-scrolling: touch;
	}
	.wc-hero-tags .wc-hero-tag { white-space: nowrap; }
}

@media (max-width: 600px) {
	.wc-hero-tags { 
		font-size: 0.85rem; 
		padding: 0.35rem 0.7rem; 

	}
}

.wc-hero-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.6rem;
	box-sizing: border-box;
	/* allow the tag to shrink inside a grid column instead of forcing overflow */
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	text-align: left;
	margin-left: 0;
}

@media (max-width:600px) {
	/* switch hero tags to a compact two-column grid on small screens */
	.wc-hero-tags { display:grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 0.5rem; }
	.wc-hero-tags .wc-hero-tag {
		display:inline-flex;
		align-items:left;
		justify-content:left;
		width:100%;
		border-radius: 8px;
		text-align:left;
		/* allow text size to scale with viewport so long labels wrap/scale instead of overflowing */
		font-size: clamp(0.78rem, 3.2vw, 1rem);
		white-space: normal;
	}

	/* make the hero-tags block use same width as other sections like .wc-trust
	   .wc-trust has margin: 0.8rem 0.8rem and padding: 1rem
	   .wc-hero-intro has padding: 1rem 0.75rem on mobile
	   .wc-page-inner has padding: 0 (on mobile)
	   So we need to break out of .wc-hero-intro padding and match .wc-trust margin */
	.wc-hero-tags {
		box-sizing: border-box;
		width: 100%; /* 100% + parent padding (0.75rem*2) + section margin (0.8rem*2) */
		border-radius: 12px;
	}
}

/* utility text colors for hero phrasing */
.wc-text-yellow { color: var(--md-yellow); font-weight: 800; }

.wc-welcome-nav a:not(.ap-btn) {
	/* only apply simple link spacing to anchors that are NOT ap-btns
	   so the ap-btn component keeps its pill shape, padding and hover styles */
	margin-left: 0.75rem;
	text-decoration: none;
}

/* legacy .btn rules removed — use .ap-btn variants from the style guide */


/* Hero */
.wc-hero {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem 1rem 0.5rem;
}

.wc-hero-inner { max-width: 920px; text-align: center; padding: 1.25rem; }
.wc-hero p { font-size: 1.05rem; margin-bottom: 1.5rem; color: rgba(255,255,255,0.9); }


/* NOTE: ap-btn layout and component styles have been moved to `assets/css/ap-buttons.css` */

/* Footer */
.wc-welcome-footer { text-align: center; padding: 1rem; font-size: 0.9rem; opacity: 0.9; }


/* Responsive tweaks */
@media (max-width: 600px) {
	.wc-hero h1 { font-size: 1.6rem; }
	.wc-welcome-header { padding: 0.6rem 1rem; }
	.wc-hero { padding: 1rem 1rem 0.4rem; }
	.wc-hero-intro { margin-top: 1.25rem; padding: 1rem 0.75rem; }
	.wc-welcome-nav a:not(.ap-btn) { padding: 0.35rem 0.65rem; }
	/* smaller eyebrow on mobile */
	.wc-hero-left .wc-eyebrow { font-size: 1.05rem; }
}

/* NOTE: nav ap-btn spacing is provided by `assets/css/ap-buttons.css` */

.wc-how-it-works { margin: 0.6rem 0 1.25rem 0; padding: 1.25rem; border-radius: 16px; background: linear-gradient(180deg, rgba(3,57,152,0.14) 0%, rgba(0,27,94,0.08) 50%, rgba(3,57,152,0.14) 100%); border: 2px solid rgba(55, 112, 226, 0.04); }
.wc-how-it-works h2 { color: var(--md-yellow); font-weight: 500; font-size: 1.6rem; margin-bottom: 1rem; }

/* Why sell section */
.wc-sell-why{ margin: 1.25rem 0; padding-left: 1.25rem; padding-right: 1.25rem; }
.wc-sell-why h2{ color: var(--md-yellow); font-weight:500; font-size:1.6rem; margin-bottom:1rem }
.wc-sell-why-lead{ color: rgba(255,255,255,0.9); margin-bottom:1rem }
.wc-sell-why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
.wc-sell-card{
	background: rgba(255,255,255,0.12); /* softened white */
	border:1px solid rgba(255,255,255,0.04);
	padding:1.25rem;
	border-radius:10px;
	text-align:left;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:flex-start;
	gap:0.6rem;
	box-sizing:border-box;
	min-height:140px; /* ensure visible cards have consistent height */
	width:100%;
	height:100%; /* fill the slide area */
}
.wc-sell-card h3{
	margin:0;
	color:var(--md-white);
	font-size:1rem;
	line-height:1.1rem;
	height:1.1rem; /* reserve single-line height */
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap; /* force single line */
	width:100%;
}

/* reduce boldness of sell cards headings to match design */
.wc-sell-card h3 { font-weight: 500 }
.wc-sell-card p{ margin:0; color: rgba(255,255,255,0.8); font-size:0.95rem }

/* slider layout */
.wc-sell-slider{ overflow:hidden; position:relative }
.wc-sell-track{
	display:flex;
	gap:0; /* remove gap so slides can be exact halves */
	transition: transform 0.6s ease;
	will-change: transform;
	align-items:stretch;
}
.wc-sell-slide{
	/* give each slide a small horizontal margin but keep two slides per row
		 calc(50% - margin) ensures two slides + margins fill 100% */
	--slide-gap: 0.75rem; /* total gap to allocate (left+right combined per slide) */
	flex: 0 0 calc(50% - (var(--slide-gap) / 2));
	box-sizing:border-box;
	display:flex;
	align-items:stretch;
	padding: 0;
	margin: 0 calc(var(--slide-gap) / 2);
}

/* navigation buttons */
.wc-sell-prev, .wc-sell-next{
	position:absolute;
	top:50%; transform:translateY(-50%);
	width:38px; height:38px; border-radius:8px; border:none; background: rgba(0,0,0,0.45); color: var(--md-white); font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.wc-sell-prev{ left:8px }
.wc-sell-next{ right:8px }
.wc-sell-prev:focus, .wc-sell-next:focus{ outline:2px solid var(--md-yellow) }

/* dots navigation */
.wc-sell-dots{ display:flex; gap:8px; justify-content:center; margin-top:0.9rem }
.wc-sell-dots button{ width:10px; height:10px; border-radius:50%; border:none; background: rgba(255,255,255,0.22); cursor:pointer }
.wc-sell-dots button.active{ background: var(--md-yellow) }

@media (max-width:900px){ .wc-sell-slide{ flex:0 0 calc(50% - 0.5rem) } }
@media (max-width:600px){ .wc-sell-slide{ flex:0 0 100%; padding: 0; margin: 0 } }


/* Normalize section headings to match the How it works style */
section h2 {
	color: var(--md-yellow);
	font-weight: 500;
	font-size: 1.6rem;
	margin-bottom: 1rem;
}

/* Unified section background to match .wc-how-it-works */
.wc-how-it-works,
.wc-sell-why,
.wc-sources,
.wc-trust,
.wc-benefits {
	/* remove fixed horizontal margins so sections can be full-bleed; keep internal padding for content */
	margin: 1.25rem 0;
	padding: 1.25rem;
	border-radius: 16px;
		/* faster transition to dark blue: dark stop moved earlier */
		background: linear-gradient(180deg, rgba(3,57,152,0.14) 0%, rgba(0,27,94,0.08) 20%, rgba(3,57,152,0.14) 100%);
	border: 2px solid rgba(55, 112, 226, 0.04);
}
.wc-cards{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem; }
.wc-card{ background:var(--md-white); border-radius:12px; padding:1rem 1rem 0.9rem 1rem; box-shadow:0 6px 18px rgba(3,12,38,0.06); border:1px solid rgba(0,27,94,0.04); }
.wc-card h3{ display:flex; align-items:center; justify-content:center; gap:.6rem; font-size:0.95rem; color:var(--md-blue-dark); margin:0 0 .6rem 0; text-transform:uppercase; letter-spacing:.02em; }
.wc-card-icon{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:0; background:transparent; color:var(--md-blue-dark); }
.wc-card-icon img.wc-card-icon-img{ display:block; width:20px; height:auto }
.wc-card-icon svg{ display:block; width:20px; height:20px }
.wc-card-icon svg path, .wc-card-icon svg circle, .wc-card-icon svg rect { fill: none !important; stroke: currentColor; }
.wc-card-icon--filled{ color: var(--md-blue-dark); }
.wc-card-icon--filled img.wc-card-icon-img{ width:20px }
.wc-card-icon--filled svg, .wc-card-icon--filled svg path, .wc-card-icon--filled svg circle { fill: currentColor !important; stroke: none !important; }
.wc-card ul{ list-style:none; padding:0; margin:0 }
.wc-card li{ display:flex; align-items:flex-start; gap:.75rem; padding:.7rem 0; border-top:1px solid rgba(0,27,94,0.04) }
.wc-li-icon{ flex:0 0 36px; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--md-blue-dark); color:#fff }
.wc-li-icon svg{ display:block; width:16px; height:16px }
.wc-li-copy{ display:flex; flex-direction:column; font-size:.95rem; color:#0b1b3d }
.wc-li-copy strong{ color:var(--md-blue-dark); font-weight:600; margin-bottom:3px }
.wc-li-copy span{ color:#6b7280; font-size:.86rem }

/* numeric step badges inside list items */
.wc-step-number{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background: var(--md-blue-dark); color: #fff; font-weight:700; font-family: 'Poppins', 'Open Sans', Arial, sans-serif; }
.wc-li-icon{ /* ensure container keeps the same sizing */ flex:0 0 36px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; }

@media (max-width:900px){ .wc-step-number{ width:32px;height:32px;font-size:0.95rem } }

/* how tag with fragment icon */
.wc-how-tag{ margin-top: 1rem; color: var(--md-white); font-weight:600; }

/* three-column tag grid spanning the section */
.wc-how-tag-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; width:100%; margin-top:1rem; margin-bottom: 1rem; align-items:center; }
.wc-how-tag-item{ color:var(--md-white); font-family: 'Poppins', 'Open Sans', Arial, sans-serif; font-weight:500; display:flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.8rem 0; font-size:1.15rem; }
.wc-how-tag-icon{ width:24px; height:auto; display:inline-block; }

/* center the CTA button under the how-it-works cards */
.wc-how-cta{ display:flex; align-items:center; justify-content:center; margin-top:1rem; }

@media (max-width:900px){
	.wc-how-tag-grid{ grid-template-columns:1fr; }
	.wc-how-tag-item{ justify-content:flex-start; padding-left:0.5rem; font-size:1rem; }
	.wc-how-tag-icon{ width:18px; }
}

@media (max-width:900px){
	.wc-cards{ grid-template-columns:1fr; }
	.wc-how-it-works { margin: 0.6rem 1rem 1rem 1rem; }
}
/* skip link */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; background: var(--md-white); color: var(--md-black); padding: 0.5rem 1rem; z-index: 9999; border-radius: 6px; }

/* Benefits */
.wc-benefits { margin: 2rem 0 3rem 0; background: linear-gradient(180deg, rgba(3,57,152,0.14) 0%, rgba(0,27,94,0.08) 50%, rgba(3,57,152,0.14) 100%); border: 2px solid rgba(55,112,226,0.04); padding: 1rem; border-radius: 14px }
.wc-benefits h2 { color: var(--md-white); margin-bottom: 0.75rem; }
.wc-benefits .wc-benefit-list { display:flex; gap:1rem; flex-wrap:wrap; background: transparent; padding: 1rem; border-radius: 14px; }
.wc-benefits .wc-benefit-list div { flex: 1 1 30%; padding: 0.9rem 1.1rem; color: var(--md-white); font-weight:600; border-radius: 8px; }

/* Vozy z ověřených zdrojů */
.wc-sources{ margin: 2rem 0; padding: 1.25rem; border-radius: 12px; background: linear-gradient(180deg, rgba(3,57,152,0.14) 0%, rgba(0,27,94,0.08) 50%, rgba(3,57,152,0.14) 100%); border: 2px solid rgba(55,112,226,0.04); }
.wc-sources h2{ color: var(--md-yellow); font-weight:500; font-size:1.6rem; margin:0 0 .5rem 0 }
.wc-sources-lead{ color: rgba(255,255,255,0.9); margin-bottom:1rem }
.wc-sources-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.wc-source-tile{ background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.04); border-radius:0 0 10px 10px; padding: calc(1rem + 6px) 1rem 1rem 1rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.6rem; position:relative; overflow:visible; }
.wc-source-icon{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--md-blue); }
.wc-source-tile h3{ color:var(--md-white); font-size:0.98rem; margin:0; font-weight:500; line-height:1.3 }
.wc-source-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-right: 0; /* remove right margin so icons center inside column layout */
	color: var(--md-blue);
	flex: 0 0 56px; /* prevent growing */
	overflow: hidden; /* ensure oversized images don't overflow */
}
.wc-source-icon svg {
	height: 36px; /* enforce uniform height */
	width: auto;  /* scale proportionally */
}
.wc-source-icon-img {
	height: 36px; /* uniform height */
	width: auto;  /* scale proportionally */
	display: block;
	object-fit: contain; /* preserve aspect ratio */
}

/* Top yellow accent bar for source tiles (matches visual weight of .wc-trust-right ::before) */
.wc-sources .wc-source-tile::before{
	content: '';
	position: absolute;
	left: -1px; /* extend slightly to cover the 1px tile border */
	right: -1px;
	top: -1px; /* nudge up to overlap the tile border for a seamless join */
	height: 6px; /* match visual weight of trust-right bar */
	border-radius: 10px 10px 0 0; /* rounded ends to match trust-right radius */
	background: var(--md-yellow);
}

	/* Tint icons to white */
	.wc-source-icon,
	.wc-source-icon svg,
	.wc-source-icon img,
	.wc-source-icon .fa,
	.wc-source-icon i {
		color: var(--md-white) !important;
		fill: var(--md-white) !important; /* for inline SVG */
	}

	/* Fallback for external SVG <img> - make them appear white using filter */
	.wc-source-icon-img {
		filter: invert(1) brightness(1.2) saturate(0);
	}

	/* Center and slightly enlarge Font Awesome icons (camera/video) */
	.wc-source-icon i,
	.wc-source-icon .fa {
		margin: 0 !important;
		display: block;
		font-size: 24px; /* slight increase */
		line-height: 1;
		width: auto;
		height: auto;
	}

@media (max-width:1000px){ .wc-sources-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:600px){ .wc-sources-grid{ grid-template-columns: 1fr; } .wc-source-icon{ width:36px } .wc-source-icon svg{ width:22px } }

/* Make layout adapt for smaller screens */
@media (max-width: 900px) {
	.wc-hero-intro { flex-direction: column-reverse; padding: 2rem 1rem; margin-top: 2rem; }
	.wc-hero h1 { font-size: 2.2rem; }
	.wc-how-it-works .wc-cards { flex-direction: column; }
	.wc-benefits .wc-benefit-list { flex-direction: column; }
	.wc-logo { font-size: 1.2rem; }
}

/* Mobile (phones) - stack, increase touch targets, simplify grids */
@media (max-width: 600px) {
	body.wc-welcome-bg-page { background-attachment: scroll; }
	.wc-welcome-page { padding-left: 0.75rem; padding-right: 0.75rem; max-width: 100%; }

	/* Header */
	/* Make the header itself span the full viewport (full-bleed) on mobile */
	.wc-welcome-header {
		width: 100vw !important;
		position: relative !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		box-sizing: border-box;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		margin: 0;
		z-index: 20;
	}
	.wc-welcome-header .wc-header-inner { padding: 0 1rem; gap: 0.6rem; }
	/* Stack logo and nav on small screens: logo on its own row, nav below */
	.wc-welcome-header .wc-header-inner {
		flex-direction: column;
		align-items: center;
		row-gap: 0.5rem;
		/* make the inner container span full viewport width on mobile */
		max-width: 100% !important;
		margin: 0 !important;
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
		box-sizing: border-box;
	}
	.wc-logo { width: 100%; text-align: center; }
	.wc-logo-img { height: 56px; margin: 0 auto; display: block; }
	.wc-welcome-nav { width: 100%; display: flex; flex-direction: column; gap: 0.6rem; }
	.wc-welcome-nav .ap-btn { width: 100% !important; }
	.wc-logo-img { height: 48px; }
	.wc-header-center { display: none; }
	.wc-welcome-nav { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
	/* Ensure primary design system buttons (.ap-btn) render correctly on mobile */
	.wc-welcome-nav .ap-btn {
		display: inline-flex !important; /* keep inline-flex so icon + text center properly */
		width: 100% !important;
		box-sizing: border-box !important;
		padding: 0.6rem 1.1rem !important; /* align with design system padding */
		font-size: 1rem !important;
		border-radius: 50em !important; /* full pill radius to match desktop */
		text-align: center !important;
		align-items: center !important;
		justify-content: center !important;
		height: auto !important;
		min-height: 44px !important; /* ensure touch-friendly height */
	}
	/* Reset plain anchors in the nav so they don't accidentally look like buttons */
	.wc-welcome-nav a:not(.ap-btn) {
		display: inline-block;
		width: auto;
		padding: 0.45rem 0.6rem;
		margin: 0;
		background: transparent;
		border: none;
		color: var(--md-white);
		text-align: left;
	}

	/* Hero */
	.wc-hero { padding: 1rem 0.5rem; }
	.wc-hero-inner { padding: 1rem; text-align: left; }
	.wc-hero-left .wc-eyebrow { font-size: 1rem; }
	.wc-hero h1 { font-size: 1.8rem; line-height: 1.08; text-align: left; }
	.wc-hero-right { margin-top: 1rem; }
	.wc-hero-right .wc-hero-car { max-width: 320px; width: 100%; height: auto; display: block; }

	/* Sell slider */
	.wc-sell-why, .wc-how-it-works, .wc-sources, .wc-trust, .wc-benefits { margin: 0.8rem 0.8rem; padding: 1rem; border-radius: 12px; }
	.wc-sell-slide { flex: 0 0 100%; padding: 0; margin: 0; }
	.wc-sell-card { padding: 1rem; min-height: auto; }
	.wc-sell-dots { gap: 12px; justify-content: center; margin-top: 0.8rem; }
	/* keep the visible dot reasonably sized but provide an inline touch target using padding
	   rather than forcing large minimum element dimensions which can break layout */
	.wc-sell-dots button {
		width: 14px;
		height: 14px;
		padding: 12px; /* expands clickable area without impacting layout flow */
		border-radius: 50%;
		min-width: 0; min-height: 0; /* remove previous forced minimums */
		background-clip: padding-box;
	}

	/* How / cards */
	.wc-cards { grid-template-columns: 1fr; gap: 1rem; }
	.wc-card { padding: 1rem; }
	.wc-how-tag-grid { grid-template-columns: 1fr; gap: 0.5rem; }
	.wc-how-tag-item { justify-content: flex-start; padding: 0.6rem; }

	/* Sources tiles */
	.wc-sources-grid { grid-template-columns: 1fr; gap: 0.75rem; }
	.wc-source-tile { padding: calc(0.75rem + 6px) 0.9rem 0.9rem 0.9rem; }
	.wc-source-icon { width: 44px; height: 44px; }

	/* Trust */
	.wc-trust-inner { grid-template-columns: 1fr; }
	.wc-trust-right { padding: 1rem; margin-top: 0.6rem; }

	/* Buttons and CTAs */
	.ap-btn { min-height: 48px; font-size: 1rem; }
	.wc-how-cta { display: flex; gap: 0.5rem; }

	/* Footer */
	.wc-welcome-footer { padding: 1rem; font-size: 0.95rem; }

	/* Improve tap targets for small inline icons */
	.wc-li-icon, .wc-step-number { width: 40px; height: 40px; }
}

/* Desktop: place all grids on a single horizontal row */
@media (min-width:1000px) {
	.wc-cards,
	.wc-how-tag-grid,
	.wc-sources-grid,
	.wc-benefits .wc-benefit-list {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 1rem;
		align-items: center;
	}

	/* ensure the sources tiles keep their column layout styling */
	.wc-source-tile { text-align: center; }
}

/* Trust / Safety section */
.wc-trust{ margin: 2rem 0; padding: 1.25rem; border-radius: 12px; background: linear-gradient(180deg, rgba(3,57,152,0.14) 0%, rgba(0,27,94,0.08) 50%, rgba(3,57,152,0.14) 100%); border: 2px solid rgba(55,112,226,0.04); }
.wc-trust h2{ color: var(--md-yellow); margin: 0 0 .75rem 0; font-size: 1.6rem; display:flex; align-items:center; gap:0.6rem }
.wc-trust-inner{ display:grid; grid-template-columns: 1fr 320px; gap:1.25rem; align-items:center; }
.wc-trust-right {
	text-align: left;
	padding: 1.1rem 1.25rem;
	/* sharp left corners, rounded right corners */
	border-radius: 0 10px 10px 0;
		background: rgba(255,255,255,0.06);
	box-shadow: 0 10px 22px rgba(3,12,38,0.18);
	position: relative;
	overflow: visible;
}

/* left accent bar */
.wc-trust-right::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	/* sharp on the outside left edge, rounded inner-right to match callout */
	border-radius: 0 10px 10px 0;
	background: var(--md-yellow);
}

.wc-trust-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.6rem; align-items:flex-start }
.wc-trust-list li{ display:flex; align-items:center; gap:0.75rem; color:var(--md-white); justify-content:flex-start }
.wc-trust-list li > div { text-align: left; }
.wc-check{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:var(--md-green); color:var(--md-white); font-weight:700 }
.wc-check::before{ content: '\2713'; font-size:16px; color:var(--md-white); }

@media (max-width:700px){
	/* ensure check badges stay equal size on narrower viewports */
	.wc-check { width:36px; height:36px; flex: 0 0 36px; }
	.wc-check::before { font-size:16px; }
}
.wc-trust-right-title{ color:var(--md-white); font-size:1.2rem; margin:0 0 0.4rem 12px; font-weight:700 }
.wc-trust-right-text{ color: rgba(255,255,255,0.95); margin:0; font-size:0.98rem; margin-left:12px }

.wc-trust-cta{ margin-top:1rem; margin-left:12px }
.wc-trust-cta .ap-btn{ padding: 0.55rem 0.9rem }

@media (max-width:700px){
	.wc-trust-inner{ grid-template-columns: 1fr; }
	.wc-trust-right::before{ top:0; bottom:0; }
		.wc-trust-right { padding: 0.9rem 1rem; background: rgba(255,255,255,0.06); }
	.wc-trust-right-title, .wc-trust-right-text { margin-left: 12px }
}

@media (max-width:700px){ .wc-trust-inner{ grid-template-columns: 1fr; } .wc-trust-right{ margin-top:0.5rem } }