@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
	/* High-contrast modern palette */
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-surface-alt: #f6f7fb;
	--color-surface-bold: #edf0fb;
	--color-border: rgba(16, 24, 40, 0.12);
	--color-border-strong: rgba(16, 24, 40, 0.2);
	--color-text: #1a1a1a;
	--color-muted: rgba(26, 26, 26, 0.72);
	--color-soft: rgba(26, 26, 26, 0.48);
	--color-primary: #1f4ce4; /* Royal Blue */
	--color-primary-dark: #1034c5;
	--color-secondary: #16a284; /* Emerald accent */
	--color-accent: #16a284;
	--color-success: #0c8f63;
	--color-danger: #d92d20;

	/* Typography */
	--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-display: 'Playfair Display', 'Inter', system-ui, -apple-system, 'Segoe UI', serif;
	--font-numeric: 'Space Grotesk', 'Inter', sans-serif;

	/* Components */
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--shadow-xs: 0 4px 12px rgba(15, 23, 42, 0.08);
	--shadow-sm: 0 12px 30px rgba(15, 23, 42, 0.12);
	--shadow-md: 0 20px 45px rgba(15, 23, 42, 0.14);
	--shadow-elevated: 0 30px 70px rgba(15, 23, 42, 0.16);
	--focus-ring: 0 0 0 4px rgba(31, 76, 228, 0.2);
	--gradient-ink: linear-gradient(135deg, #1f4ce4 0%, #4f7efa 45%, #16a284 100%);
	--gradient-primary: linear-gradient(135deg, #1f4ce4 0%, #1034c5 100%);
	--gradient-accent: linear-gradient(135deg, #16a284 0%, #58d8b0 100%);
	--transition-fast: 180ms;
	--transition-medium: 300ms;
	--transition-slow: 450ms;

	/* Layout system */
	--container-max: 1240px;
	--container-pad: clamp(16px, 3vw, 32px);
	--section-pad: clamp(32px, 4vw, 64px);
	--section-pad-lg: clamp(40px, 5vw, 80px);
	--stack-1: 8px;
	--stack-2: 12px;
	--stack-3: 16px;
	--stack-4: 24px;
	--stack-5: 32px;
	--radius-card: 14px;
	--shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06);

	/* Custom icon masks (inline SVG) */
	--icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' d='M7.5 13.3 4.2 10l1.2-1.2 2.1 2.1 6.1-6.1 1.2 1.2z'/></svg>");
	--icon-spark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' d='M10 1.5 11.8 6l4.7 1.2-4.7 1.2L10 12.8 8.2 8.4 3.5 7.2 8.2 6z'/></svg>");
	--icon-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' d='M3 10h11.6l-3.7-3.7 1.4-1.4L18.4 10l-6.1 6.1-1.4-1.4 3.7-3.7H3z'/></svg>");

	/* Header / Footer tokens */
	--header-bg: rgba(255, 255, 255, 0.95);
	--header-border: rgba(16, 24, 40, 0.08);
	--footer-bg: linear-gradient(145deg, #0f1629 0%, #192544 60%, #02060f 100%);
	--footer-text: rgba(255,255,255,0.9);
	--footer-muted: rgba(255,255,255,0.65);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 12px;
	top: -60px;
	padding: 10px 14px;
	background: #fff;
	color: var(--color-text);
	border-radius: 10px;
	box-shadow: var(--shadow-sm);
	z-index: 2000;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 12px;
}

html, body {
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.65;
	letter-spacing: -0.01em;
	scroll-behavior: smooth;
	font-size: 17px;
}

/* Enforce consistent box-sizing to avoid layout calculation issues */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   GLOBAL IMAGE RULES – Responsive, Layout-Safe, Device-Adaptive
   ==========================================================================
   These rules ensure all images display correctly across mobile, tablet, and
   desktop without overflow, stretching, or layout shifts. No database access.
   ========================================================================== */

/* Base image defaults – prevent overflow and maintain proportions */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Prevent images from causing horizontal scroll */
img {
	max-width: 100%;
	width: auto;
	object-fit: cover;
}

/* Picture element normalization */
picture {
	display: block;
	width: 100%;
}

picture img {
	width: 100%;
	height: auto;
}

/* Responsive image containers – lock aspect ratio to prevent CLS */
.img-container,
.image-wrapper,
[class*="__media"],
[class*="__image"] {
	position: relative;
	overflow: hidden;
	max-width: 100%;
}

/* Standard aspect ratio presets for common image contexts */
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-16-10 { aspect-ratio: 16 / 10; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-3-2 { aspect-ratio: 3 / 2; }
.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-hero { aspect-ratio: 21 / 9; }

/* Fill container for images inside aspect-ratio containers */
.aspect-16-9 > img,
.aspect-16-10 > img,
.aspect-4-3 > img,
.aspect-3-2 > img,
.aspect-1-1 > img,
.aspect-4-5 > img,
.aspect-hero > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Object-fit utility classes */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.object-scale-down { object-fit: scale-down; }
.object-none { object-fit: none; }

/* Object position utilities */
.object-center { object-position: center; }
.object-top { object-position: top; }
.object-bottom { object-position: bottom; }
.object-left { object-position: left; }
.object-right { object-position: right; }

/* Lazy loading visual feedback – hide until loaded */
img[loading="lazy"] {
	background: linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-surface) 100%);
}

/* Image loading states */
img.is-loading {
	opacity: 0;
	transition: opacity 0.3s ease;
}

img.is-loaded {
	opacity: 1;
}

/* Prevent layout shift from images with known dimensions */
img[width][height] {
	height: auto;
	max-width: 100%;
}

/* ==========================================================================
   RESPONSIVE IMAGE BREAKPOINTS
   ========================================================================== */

/* Mobile-first: constrain images on small screens */
@media (max-width: 639px) {
	img {
		max-height: 60vh; /* Prevent massive images from dominating viewport */
	}
	
	/* Card images on mobile */
	[class*="card__media"] {
		min-height: 160px;
		max-height: 280px;
	}
	
	/* Hero images on mobile */
	[class*="hero__media"],
	[class*="hero__image"] {
		max-height: 40vh;
	}
	
	/* Thumbnail scaling */
	[class*="thumb"] img,
	[class*="thumbnail"] img {
		max-width: 80px;
		max-height: 80px;
	}
}

/* Tablet adjustments */
@media (min-width: 640px) and (max-width: 1023px) {
	[class*="card__media"] {
		min-height: 180px;
		max-height: 320px;
	}
	
	[class*="hero__media"],
	[class*="hero__image"] {
		max-height: 50vh;
	}
	
	[class*="thumb"] img,
	[class*="thumbnail"] img {
		max-width: 100px;
		max-height: 100px;
	}
}

/* Desktop: allow larger images but still constrain */
@media (min-width: 1024px) {
	[class*="card__media"] {
		min-height: 200px;
		max-height: 400px;
	}
	
	[class*="hero__media"],
	[class*="hero__image"] {
		max-height: 60vh;
	}
	
	[class*="thumb"] img,
	[class*="thumbnail"] img {
		max-width: 120px;
		max-height: 120px;
	}
}

/* ==========================================================================
   GALLERY & GRID IMAGE CONSISTENCY
   ========================================================================== */

/* Grid images should fill their cells consistently */
.plan-grid img,
.bento-grid img,
.favorites-grid img,
.experience-grid img,
.insights-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Prevent grids from having uneven rows due to image sizing */
.plan-grid [class*="__media"],
.bento-grid [class*="__media"],
.favorites-grid [class*="__media"] {
	aspect-ratio: 16 / 10;
}

/* ==========================================================================
   THUMBNAIL SPECIFIC RULES
   ========================================================================== */

.plan-thumb,
.gallery-thumb,
[class*="thumb"] {
	overflow: hidden;
	border-radius: 8px;
}

.plan-thumb img,
.gallery-thumb img,
[class*="thumb"] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.plan-thumb:hover img,
.gallery-thumb:hover img,
[class*="thumb"]:hover img {
	transform: scale(1.05);
}

/* ==========================================================================
   HERO & FEATURED IMAGE CONSTRAINTS
   ========================================================================== */

.hero img,
.plan-hero img,
.plan-tech__main img {
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: cover;
	object-position: center;
}

/* Main gallery image should respect container */
.plan-tech__main {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-surface-alt);
}

.plan-tech__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   PRINT & ACCESSIBILITY
   ========================================================================== */

@media print {
	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	img {
		transition: none;
	}
	
	[class*="thumb"]:hover img {
		transform: none;
	}
}

/* End of Global Image Rules */

body {
	margin: 0;
	min-height: 100%;
	background: var(--color-bg);
	font-family: var(--font-sans);
	font-size: clamp(0.98rem, 0.25vw + 0.96rem, 1.05rem);
	line-height: 1.65;
	color: var(--color-text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.theme-lux {
	background: linear-gradient(180deg, #f6f7fb 0%, #ffffff 50%, #eef1fb 100%);
	color: var(--color-text);
}

.glass {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(226, 232, 240, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.page-shell {
	padding-block: clamp(48px, 6vw, 96px);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 4vw, 48px);
}

.section {
	padding-block: clamp(32px, 4vw, 64px);
	position: relative;
	scroll-margin-top: 80px;
}

.section--soft {
	background: rgba(255,255,255,0.86);
	border: 1px solid rgba(16,24,40,0.08);
	border-radius: var(--radius-lg);
	margin-block: clamp(24px, 4vw, 56px);
	box-shadow: var(--shadow-xs);
}

.section-heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: clamp(20px, 3vw, 32px);
}

@media (max-width: 640px) {
	.section-heading {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

.section-heading .eyebrow {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: var(--color-secondary);
}

.hero {
	position: relative;
	padding-block: clamp(64px, 8vw, 120px);
	color: var(--color-text);
	overflow: hidden;
}

.hero--immersive {
	background: linear-gradient(135deg, #f7f8ff 0%, #ffffff 45%, #eef2fe 100%);
	border-bottom: 1px solid rgba(16,24,40,0.08);
}

.hero__backdrop {
	position: absolute;
	inset: -25% -10% -35% -10%;
	background:
		radial-gradient(circle at 20% 25%, rgba(31,76,228,0.18), transparent 50%),
		radial-gradient(circle at 70% -10%, rgba(22,162,132,0.18), transparent 55%),
		radial-gradient(circle at 50% 120%, rgba(79,126,250,0.18), transparent 60%);
	filter: blur(90px);
	opacity: 0.85;
	animation: heroGlow 14s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}

@keyframes heroGlow {
	0% { opacity: 0.55; transform: scale(1); }
	100% { opacity: 0.9; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__backdrop { animation: none; }
}

.hero__layout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(28px, 5vw, 56px);
	position: relative;
	z-index: 1;
	align-items: center;
}

.hero__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hero__text h1 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5.5vw, 3.75rem);
	line-height: 1.1;
	margin: 8px 0 12px;
	letter-spacing: -0.02em;
}

.hero__lead {
	font-size: 1.05rem;
	color: rgba(71, 85, 105, 0.98);
	max-width: 620px;
	margin-bottom: 18px;
	line-height: 1.6;
}

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

@media (max-width: 640px) {
	.hero__cta {
		flex-direction: column;
		align-items: stretch;
	}
	.hero__cta .btn {
		width: 100%;
		justify-content: center;
	}
}

.hero__tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(226, 232, 240, 0.95);
	background: rgba(255,255,255,0.92);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.75rem;
	color: var(--color-primary);
}

.hero__metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-top: 24px;
}

.metric-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	background: rgba(255,255,255,0.95);
	border: 1px solid rgba(226, 232, 240, 0.9);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.metric-pill i {
	font-size: 1.1rem;
	color: var(--color-primary);
}

.metric-pill span {
	display: block;
	font-family: var(--font-numeric);
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--color-text);
}

.metric-pill p {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.82rem;
}

.hero__visual {
	position: relative;
	display: flex;
	justify-content: center;
}

.hero__panel {
	width: 100%;
	max-width: 360px;
	padding: 22px;
	border-radius: 16px;
	background: rgba(255,255,255,0.95);
	border: 1px solid rgba(226, 232, 240, 0.9);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hero__panel-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.hero__panel-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.hero__panel-row i {
	font-size: 1.2rem;
	color: var(--color-primary);
}

.hero__panel-row span {
	display: block;
	font-weight: 600;
	color: var(--color-text);
}

.hero__panel-row p {
	margin: 0;
	color: var(--color-muted);
}

.eyebrow {
	font-size: 0.88rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 600;
	color: var(--color-secondary);
}

.plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
	gap: clamp(20px, 3vw, 32px);
}

.section--bento {
	background: transparent;
}

.bento-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(16px, 2.5vw, 24px);
	grid-auto-rows: minmax(240px, auto);
}

.plan-card--bento {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
}

.plan-card--bento .plan-card__media {
	min-height: 260px;
}

.plan-card--bento.span-2 {
	grid-column: span 2;
	grid-row: span 2;
}

.plan-card--bento.span-tall {
	grid-row: span 2;
}

@media (max-width: 900px) {
	.plan-card--bento.span-2,
	.plan-card--bento.span-tall {
		grid-column: span 1;
		grid-row: span 1;
	}
}

.plan-card__status {
	position: absolute;
	left: 16px;
	top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,0.9);
	color: var(--color-primary);
	font-size: 0.85rem;
	border: 1px solid rgba(31,76,228,0.2);
}

.plan-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(280px, 360px);
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 10px;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 16px;
	-webkit-overflow-scrolling: touch;
}

.plan-row > * {
	scroll-snap-align: start;
}

@media (max-width: 640px) {
	.plan-row { grid-auto-columns: 80%; }
}

.plan-row::-webkit-scrollbar { height: 6px; }
.plan-row::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.45); border-radius: 999px; }

.plan-card--inline {
	min-height: auto;
	width: 100%;
	scroll-snap-align: start;
}

.plan-card--inline .plan-card__media {
	height: 210px;
}

.section--scroll {
	background: transparent;
}

.experience-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(16px, 3vw, 28px);
}

.experience-card {
	padding: 26px;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(16,24,40,0.08);
	background: #ffffff;
	box-shadow: var(--shadow-xs);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.experience-card i {
	font-size: 1.4rem;
	color: var(--color-primary);
}

/* Explicit responsive columns: mobile 1, tablet 2, desktop 3+ */
@media (max-width: 639px) {
	.plan-grid { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 1023px) {
	.plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

.plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border-radius: 18px;
	padding: 20px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	text-decoration: none;
	color: inherit;
	transition: all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
	opacity: 0;
	animation: cardFadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	overflow: hidden;
}

.plan-card::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 18px;
	background: var(--gradient-primary);
	opacity: 0;
	transition: opacity var(--transition-medium) ease;
	z-index: -1;
}

.plan-card:nth-child(2) { animation-delay: 0.08s; }
.plan-card:nth-child(3) { animation-delay: 0.16s; }
.plan-card:nth-child(4) { animation-delay: 0.24s; }
.plan-card:nth-child(5) { animation-delay: 0.32s; }
.plan-card:nth-child(6) { animation-delay: 0.40s; }

.plan-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-elevated);
	border-color: transparent;
}

.plan-card:hover::before {
	opacity: 0.08;
}

.plan-card__media {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	min-height: 220px;
	margin-bottom: 20px;
	background: linear-gradient(135deg, rgba(237, 240, 251, 0.9), rgba(255, 255, 255, 0.9));
}

.plan-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s ease;
}

.plan-card:hover .plan-card__media img {
	transform: scale(1.06);
	filter: saturate(1.05);
}

.plan-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.plan-card__eyebrow {
	font-size: 0.9rem;
	color: var(--color-secondary);
}

.plan-card__summary {
	color: var(--color-muted);
	font-size: 0.95rem;
}

.plan-card__tier {
	display: flex;
	justify-content: space-between;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	background: rgba(31,76,228,0.06);
	border: 1px solid rgba(31,76,228,0.15);
	font-weight: 600;
}

.plan-card__tier--muted {
	opacity: 0.5;
}

.plan-card__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.plan-card__cta {
	display: flex;
	gap: 10px;
}


/* Homepage structure upgrades */
.section--trust {
	background: var(--color-surface-alt);
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.trust-card {
	background: #fff;
	border-radius: 14px;
	padding: 16px;
	border: 1px solid rgba(226, 232, 240, 0.9);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.trust-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
	border-color: rgba(14, 165, 233, 0.35);
}

.trust-card i { color: var(--color-primary); font-size: 1.1rem; margin-top: 2px; }
.trust-card h3 { margin: 0 0 4px; font-size: 0.98rem; line-height: 1.3; }
.trust-card p { margin: 0; color: var(--color-muted); font-size: 0.88rem; line-height: 1.5; }

.why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

.why-card {
	background: #fff;
	border-radius: 14px;
	padding: 18px;
	border: 1px solid rgba(226, 232, 240, 0.9);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.why-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
	border-color: rgba(14, 165, 233, 0.35);
}

.why-card i { color: var(--color-primary); font-size: 1.1rem; }
.why-card h3 { margin: 10px 0 4px; font-size: 0.98rem; line-height: 1.3; }
.why-card p { margin: 0; color: var(--color-muted); font-size: 0.88rem; line-height: 1.5; }

.section--use-cases {
	background: var(--color-surface-alt);
}

.use-case-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.use-case-card {
	background: #fff;
	border-radius: 14px;
	padding: 18px;
	border: 1px solid rgba(226, 232, 240, 0.9);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.use-case-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
	border-color: rgba(14, 165, 233, 0.35);
}

.use-case-card h3 { margin: 0 0 6px; font-size: 0.98rem; line-height: 1.3; }
.use-case-card p { margin: 0 0 8px; color: var(--color-muted); font-size: 0.88rem; line-height: 1.5; }
.use-case-card span { font-size: 0.82rem; color: var(--color-soft); font-weight: 600; }

.section--proof {
	background: #fff;
}

.proof-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin-top: 14px;
}

.proof-card {
	background: var(--color-surface-alt);
	border-radius: 14px;
	padding: 18px;
	border: 1px solid rgba(226, 232, 240, 0.9);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.proof-card strong { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.proof-card p { margin: 0; color: var(--color-muted); font-size: 0.88rem; line-height: 1.5; }

.proof-testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.testimonial-card {
	background: #fff;
	border-radius: 14px;
	padding: 18px;
	border: 1px solid rgba(226, 232, 240, 0.9);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.testimonial-card blockquote {
	margin: 0 0 10px;
	font-size: 0.98rem;
	color: var(--color-text);
	line-height: 1.6;
}

.testimonial-card figcaption {
	color: var(--color-soft);
	font-size: 0.82rem;
}

/* Reveal animations */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}
.btn {
	border: none;
	border-radius: 12px;
	padding: 14px 28px;
	font-weight: 600;
	font-size: 0.95rem;
	transition: all var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.2);
	opacity: 0;
	transition: opacity var(--transition-fast) ease;
}

.btn:hover::before {
	opacity: 1;
}

.btn-primary {
	background: var(--gradient-primary);
	color: #ffffff;
	box-shadow: var(--shadow-sm), 0 0 0 0 rgba(31,76,228,0.25);
}

.btn-primary:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md), 0 10px 30px rgba(31,76,228,0.35);
}

.btn-primary:active {
	transform: translateY(-2px);
}

.btn--glow {
	box-shadow: 0 0 35px rgba(31,76,228,0.25), var(--shadow-sm);
}

.btn--glow:hover {
	box-shadow: 0 0 45px rgba(31,76,228,0.35), var(--shadow-md);
}

.btn-outline {
	background: transparent;
	border: 2px solid var(--color-border-strong);
	color: var(--color-text);
	box-shadow: var(--shadow-xs);
}

.btn-outline:hover {
	background: var(--color-surface-alt);
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.btn-ghost, .btn.btn-ghost {
	background: rgba(31,76,228,0.08);
	color: var(--color-primary);
	box-shadow: none;
}

.btn-ghost:hover {
	background: rgba(31,76,228,0.16);
	transform: translateY(-2px);
	box-shadow: var(--shadow-xs);
}

.fade-in {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.9s ease forwards;
}

@keyframes fadeInUp {
	to { opacity: 1; transform: translateY(0); }
}

@keyframes cardFadeUp {
	0% { opacity: 0; transform: translateY(12px); }
	100% { opacity: 1; transform: translateY(0); }
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--color-text);
	letter-spacing: -0.02em;
	font-weight: 700;
	line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
h4 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
h5 { font-size: clamp(1.02rem, 1.6vw, 1.2rem); }
h6 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }

.lead {
	font-size: clamp(1.05rem, 0.6vw + 1rem, 1.25rem);
	line-height: 1.7;
	color: var(--color-muted);
}

p {
	margin: 0 0 12px;
	color: var(--color-muted);
	line-height: 1.65;
}

li { line-height: 1.6; }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* Custom icon styling (consistent across UI) */
.nav a i,
.btn i,
.text-link i,
.section-heading .eyebrow i,
.hero__tag i,
.plan-card__eyebrow i,
.nav__contact i {
	width: 1.6em;
	height: 1.6em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.55em;
	background: rgba(31, 76, 228, 0.12);
	border: 1px solid rgba(31, 76, 228, 0.2);
	color: var(--color-primary);
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.nav a:hover i,
.btn:hover i,
.text-link:hover i {
	background: rgba(31, 76, 228, 0.18);
}

.icon-btn i,
.social-icon i {
	background: transparent;
	border: none;
	width: auto;
	height: auto;
	box-shadow: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: 8px;
}

input,
select,
textarea {
	font-family: inherit;
	line-height: 1.4;
}

.shell {
	width: min(var(--container-max), 100%);
	margin: 0 auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}
.pack-comparison__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 720px) {
	.pack-comparison__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.package-card {
	background: var(--color-surface);
	border-radius: 16px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: var(--shadow-sm);
	border: 1px solid transparent;
}

.package-card__header h3 { margin: 0; font-size: 1.4rem; }
.package-card__header .eyebrow { margin-bottom: 6px; }

.package-card--free { border-color: rgba(31,61,43,0.08); background: linear-gradient(145deg, rgba(31,61,43,0.02), var(--color-surface)); }
.package-card--pro { border-color: rgba(201,122,93,0.12); }
.package-card--cad { border-color: rgba(31,61,43,0.08); }

.package-price {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 8px 0 0;
	color: var(--color-text);
}

.package-copy {
	margin: 0;
	color: var(--color-muted);
}

.package-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.package-points li {
	font-size: 0.9rem;
	color: var(--color-text);
	padding-left: 20px;
	position: relative;
}

.package-points li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 5px;
	width: 14px;
	height: 14px;
	background: var(--color-primary);
	-webkit-mask: var(--icon-check) no-repeat center / contain;
	mask: var(--icon-check) no-repeat center / contain;
}

.package-cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.package-button {
	border: none;
	border-radius: 12px;
	padding: 12px 18px;
	font-weight: 600;
	font-size: 0.98rem;
	text-align: center;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
	text-decoration: none;
	width: 100%;
	box-shadow: none;
}

.package-button:hover:not(.package-button--disabled) {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* Forms & Buttons — modern vibrant theme (preserve layout order and spacing) */
/* Form layout rules to prevent overlap and enforce spacing */
form, .form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

/* Rows of form fields may be used for multi-column layouts; allow wrapping */
.form-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 16px 0 !important;
	min-height: 44px;
	flex: 1 1 200px;
	box-sizing: border-box;
}

/* Prevent inputs from using absolute positioning which can cause overlap */
input, textarea, select, label {
	position: relative !important;
}

/* Input basic styles */
input[type="text"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--color-border);
	background: #FFFFFF;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 0.95rem;
	transition: box-shadow 0.18s ease, border-color 0.12s ease;
	width: 100%;
	display: block;
}
textarea { min-height: 120px; padding-top: 12px; padding-bottom: 12px; }

input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: var(--focus-ring);
}


/* Labels and spacing */
label { display: block; margin-bottom: 6px; color: var(--color-text); font-weight: 600; }

/* Ensure form rows don't use fixed heights and allow wrapping */
.form-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.btn, .package-button { border-radius: 10px; font-weight: 600; }
.btn-primary, .package-button--free {
	background: var(--color-primary);
	color: #fff;
	box-shadow: 0 6px 18px rgba(37,99,235,0.12);
	transition: transform var(--transition, 180ms) ease, box-shadow var(--transition, 180ms) ease;
}
.btn-primary:hover, .package-button--free:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-secondary { background: var(--color-secondary); color: #fff; }
.price-tag { color: var(--color-accent); font-weight: 700; }

/* Ensure clickable areas meet minimum touch target */
button, .btn { min-height: 44px; padding: 10px 16px; }

/* Focus-visible for keyboard users */
:focus {
	box-shadow: var(--focus-ring);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
	form, .form { gap: 16px; }
	.form-row { flex-direction: column; }
	.form-group { flex: 1 1 auto; min-width: auto; }
	input, select, textarea { width: 100%; }
}

/* Defensive: avoid negative margins and ensure overflow visible in forms */
form * { margin: 0; }
form { overflow: visible; }


.package-button--free { background: var(--color-primary); color: #fff; }
.package-button--pro { background: var(--color-accent); color: #fff; }
.package-button--cad { background: var(--color-primary); color: #fff; }
.package-button--neutral { background: #222222; color: #fff; }
.package-button--disabled { background: var(--color-border); color: var(--color-soft); cursor: not-allowed; box-shadow: none; }

.package-note {
	margin: 0;
	font-size: 0.85rem;
	color: var(--color-muted);
}

/* Cards — consistent padding, radius, and subtle elevation */
.package-card, .favorite-card, .favorite-card__media, .package-card--free, .package-card--pro, .package-card--cad {
	border-radius: var(--radius-md);
	padding: 20px;
	box-shadow: var(--shadow-sm);
}

.package-card:hover, .favorite-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.microcopy {
	margin: 10px 0 0;
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--color-muted);
}

.microcopy--info {
	color: var(--color-primary);
}

.microcopy--alert {
	color: var(--color-danger);
}

.trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	font-size: 0.9rem;
	color: var(--color-muted);
}
@media (min-width: 768px) {
	.page-shell { padding-bottom: 72px; }
}

.site-body {
	background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,247,252,0.98));
}

/* Header - Mobile First */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: var(--header-bg);
	border-bottom: 1px solid var(--header-border);
	box-shadow: 0 14px 34px rgba(11, 31, 58, 0.08);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
}

.breadcrumbs { overflow-wrap: anywhere; }

.plan-use-cases {
	margin-top: 18px;
}

.use-case-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.use-case-chips li {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px 8px 30px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-surface);
	color: inherit;
	font-size: 0.92rem;
	position: relative;
}

.use-case-chips li::before {
	content: '';
	position: absolute;
	left: 10px;
	width: 12px;
	height: 12px;
	background: var(--color-primary);
	-webkit-mask: var(--icon-check) no-repeat center / contain;
	mask: var(--icon-check) no-repeat center / contain;
}

.decision-guide {
	margin-top: 14px;
	padding: 14px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: var(--color-surface-alt);
}

.decision-guide__title {
	margin: 0 0 10px;
	font-weight: 650;
}

.decision-guide__list {
	margin: 0;
	padding-left: 0;
	color: var(--color-muted);
	list-style: none;
}

.decision-guide__list li {
	margin: 6px 0;
	padding-left: 24px;
	position: relative;
}

.decision-guide__list li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 4px;
	width: 14px;
	height: 14px;
	background: var(--color-secondary);
	-webkit-mask: var(--icon-spark) no-repeat center / contain;
	mask: var(--icon-spark) no-repeat center / contain;
}

.plan-related__grid {
	margin-top: 12px;
}

/* FAQ component */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.faq-item {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 8px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent;
	border: none;
	padding: 12px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}
.faq-question__chev { opacity: 0.7; margin-left: 8px; }
.faq-answer {
	padding: 0 12px 14px 12px;
	transition: max-height 260ms ease, opacity 200ms ease;
	max-height: 0;
	opacity: 0;
}
.faq-item[aria-expanded="true"] .faq-answer,
.faq-question[aria-expanded="true"] + .faq-answer {
	max-height: 1000px;
	opacity: 1;
}

@media (max-width: 640px) {
	.faq-question { padding: 16px; font-size: 1.02rem; }
	.faq-answer { padding: 12px 14px; }
}

/* Favorites -------------------------------------------------- */
.favorite-toggle {
	position: absolute;
	top: 12px;
	right: 12px;
	border: 1px solid rgba(0,0,0,0.06);
	background: rgba(255,255,255,0.92);
	color: var(--color-muted);
	border-radius: 999px;
	padding: 6px 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.favorite-toggle:hover,
.favorite-toggle.is-active {
	background: var(--color-surface-alt);
	color: var(--color-primary);
	border-color: rgba(31,61,43,0.08);
}

.favorite-toggle__icon {
	font-size: 0.95rem;
	line-height: 1;
}

.favorite-toggle__label {
	white-space: nowrap;
}

.favorite-toggle--inline {
	position: relative;
	top: auto;
	right: auto;
	background: rgba(17,29,74,0.08);
	color: var(--color-primary);
	border-color: rgba(17,29,74,0.15);
	padding: 10px 16px;
}

.favorite-toggle--inline .favorite-toggle__label {
	white-space: normal;
}

@media (max-width: 600px) {
	.favorite-toggle { padding: 6px; font-size: 0; }
	.favorite-toggle .favorite-toggle__label { display: none; }

/* Admin image cropper */
.image-cropper__controls {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.image-cropper__preview {
	margin-top: 12px;
	border: 1px dashed var(--color-border);
	border-radius: 12px;
	padding: 12px;
	background: rgba(255,255,255,0.6);
	display: grid;
	gap: 8px;
}

.image-cropper__preview img {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--color-border);
}

.image-cropper__preview-meta {
	font-size: 0.8rem;
	color: var(--color-muted);
}

.cropper-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cropper-modal[hidden] { display: none; }

.cropper-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(9,12,20,0.65);
}

.cropper-modal__panel {
	position: relative;
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--shadow-lg);
	width: min(96vw, 1100px);
	max-height: 90vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
}

.cropper-modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid var(--color-border);
}

.cropper-modal__body {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr);
	gap: 18px;
	padding: 18px 20px;
	overflow: auto;
}

.cropper-modal__image {
	background: var(--color-surface-alt);
	border-radius: 12px;
	overflow: hidden;
	max-height: 70vh;
}

.cropper-modal__image img {
	width: 100%;
	height: 100%;
	max-height: 70vh;
	object-fit: contain;
}

.cropper-modal__preview {
	display: grid;
	gap: 10px;
}

.cropper-preview {
	width: 100%;
	border-radius: 12px;
	background: #f5f3f0;
	overflow: hidden;
	border: 1px solid var(--color-border);
}

.cropper-preview--desktop { aspect-ratio: 16 / 10; }
.cropper-preview--mobile { aspect-ratio: 4 / 5; max-width: 220px; }

.cropper-modal__controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-top: 1px solid var(--color-border);
}

.cropper-modal__ratios {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.cropper-modal__ratios .is-active {
	background: var(--color-primary);
	color: #fff;
}

.cropper-modal__actions {
	display: flex;
	gap: 10px;
}

body.cropper-open { overflow: hidden; }

@media (max-width: 900px) {
	.cropper-modal__body { grid-template-columns: 1fr; }
	.cropper-modal__controls { flex-direction: column; align-items: flex-start; }
}

/* Admin pack visibility toggles */
.pack-visibility {
	margin: 18px 0 16px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	background: rgba(255,255,255,0.85);
}

.pack-visibility__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}

.pack-visibility__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

.toggle {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--color-border);
	background: #fff;
}

.toggle input {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.toggle__track {
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: rgba(15,23,42,0.2);
	position: relative;
	transition: background var(--transition-fast) ease;
}

.toggle__track::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	top: 3px;
	left: 3px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.18);
	transition: transform var(--transition-fast) ease;
}

.toggle input:checked + .toggle__track {
	background: var(--color-primary);
}

.toggle input:checked + .toggle__track::after {
	transform: translateX(18px);
}

.toggle__label {
	display: grid;
	gap: 4px;
}

.toggle__label small { color: var(--color-muted); }

@media (max-width: 720px) {
	.pack-visibility__header { flex-direction: column; align-items: flex-start; }
}
	.favorite-toggle__icon { font-size: 1rem; }
}

.favorites-page {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.favorites-hero {
	padding: clamp(70px, 10vw, 120px) 0 clamp(32px, 6vw, 64px);
	background: radial-gradient(circle at 12% 18%, rgba(231, 84, 128, 0.25), transparent 45%),
		linear-gradient(135deg, #120b2a 0%, #251447 45%, #0b6f6a 100%);
	color: #fff;
}

.favorites-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.favorites-hero__content .lead {
	color: rgba(255, 255, 255, 0.85);
}

.favorites-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0 16px;
}

.favorites-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

.favorites-hero__badges span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(4px);
}

.favorites-hero__card {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 18px 40px rgba(5, 14, 34, 0.45);
	backdrop-filter: blur(10px);
}

.favorites-hero__card h2 {
	margin-top: 0;
	font-size: 1.2rem;
}

.favorites-hero__card ul {
	padding-left: 18px;
	margin: 0 0 18px;
}

.favorites-hero__card li {
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.85);
}

.favorites-hero__stat {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 16px;
	display: grid;
	gap: 4px;
}

.favorites-hero__stat-label {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
}

.favorites-hero__stat-note {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.65);
}

.favorites-guide {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.favorites-guide__card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	padding: 18px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--color-border);
	box-shadow: 0 12px 30px rgba(15, 30, 60, 0.08);
}

.favorites-guide__card i {
	color: #e75480;
	font-size: 1.3rem;
	margin-top: 2px;
}

.favorites-empty {
	padding: clamp(22px, 4vw, 36px);
	border: 1px dashed rgba(15, 30, 60, 0.25);
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(245, 248, 255, 0.9));
	text-align: left;
	color: var(--color-muted);
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.favorites-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.favorite-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.favorite-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(15, 30, 60, 0.12);
}

.favorite-card__media {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: var(--color-surface-alt);
	min-height: 180px;
}

.favorite-card__badge {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(231, 84, 128, 0.92);
	color: #fff;
	font-weight: 600;
	font-size: 0.8rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 10px 20px rgba(20, 8, 40, 0.25);
}

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

.favorite-card__body h3 {
	margin: 0;
	font-size: 1.1rem;
}

.favorite-card__title-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
}

.favorite-card__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(15, 30, 60, 0.08);
	font-size: 0.8rem;
	font-weight: 600;
}

.favorite-card__meta {
	font-size: 0.9rem;
	color: var(--color-muted);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.favorite-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.favorite-card__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.favorite-card__actions .btn {
	flex: 1 1 140px;
}

.favorite-card__remove {
	background: transparent;
	color: var(--color-muted);
	border: none;
	font-weight: 600;
	cursor: pointer;
	padding: 10px 14px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 0.2s ease, color 0.2s ease;
}

.favorite-card__remove:hover {
	background: rgba(231, 84, 128, 0.1);
	color: #b22a50;
}

@media (max-width: 900px) {
	.favorites-hero__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.favorites-hero {
		padding: 56px 0 32px;
	}

	.favorites-hero__content h1 {
		font-size: clamp(1.6rem, 5vw, 1.9rem);
	}

	.favorites-hero__card {
		padding: 18px;
	}

	.favorites-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.favorites-hero__actions .btn {
		width: 100%;
		justify-content: center;
	}

	.favorites-empty {
		flex-direction: column;
		align-items: flex-start;
	}

	.favorites-grid {
		grid-template-columns: 1fr;
	}

	.favorite-card__actions {
		flex-direction: column;
	}

	.favorite-card__actions .btn {
		flex: 1 1 auto;
		width: 100%;
	}
}

.narrative-filter-group {
	margin-top: 24px;
	padding: 16px;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	background: var(--color-surface);
}

.narrative-filter-group__label { font-weight: 600; margin-bottom: 10px; }

.narrative-filter-group__chips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

/* New polished filter container + chips */
.filters-toolbar {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 12px;
}
.filters-toolbar__hint { color: var(--color-muted); font-size: 0.95rem; margin:0 }

.filters-panel {
	background: linear-gradient(180deg, var(--color-surface), rgba(255,255,255,0.96));
	border-radius: 18px;
	padding: 16px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border-strong);
	transition: transform 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
}

/* Mobile bottom-sheet behavior */
@media (max-width: 860px) {
	/* CRITICAL MOBILE FIX: Never hide the filter fields on mobile.
	   The previous bottom-sheet pattern relied on JS to open the panel.
	   If JS fails to load, mobile users cannot access filters at all.
	   Keep the panel inline + visible so all fields are always accessible. */
	.filters-panel { position: static; left: auto; right: auto; bottom: auto; transform: none; opacity: 1; z-index: auto; border-radius: 18px; max-height: none; overflow: visible; }
	.filters-panel.is-open { transform: none; opacity: 1; box-shadow: var(--shadow-sm); }
	.filters-toggle { display: none; }
}
@media (min-width: 861px) {
	.filters-toggle { display: none; }
}

/* Filter chips - color coded by attribute */
.narrative-chip { border-radius: 999px; padding: 12px 16px; display:flex; align-items:flex-start; gap:8px; }
.narrative-chip strong { display:block; }
.narrative-chip.chip-pressed { transform: scale(0.985); transition: transform 160ms ease; }

.narrative-chip[data-value][data-value*="beds"],
.narrative-chip[data-value*="bedrooms"] { border: 1px solid rgba(94,152,255,0.22); }
.narrative-chip[data-value][data-value*="budget"],
.narrative-chip[data-value*="budget"] { border: 1px solid rgba(219,189,148,0.22); }
.narrative-chip[data-value][data-value*="area"],
.narrative-chip[data-value*="area"] { border: 1px solid rgba(143,203,158,0.22); }
.narrative-chip[data-value][data-value*="lifestyle"],
.narrative-chip[data-value*="lifestyle"] { border: 1px solid rgba(201,122,93,0.22); }

.narrative-chip.is-active { color: #fff; }
.narrative-chip.is-active[data-value*="beds"] { background: linear-gradient(90deg, rgba(94,152,255,1), rgba(80,140,255,0.9)); border-color: transparent; }
.narrative-chip.is-active[data-value*="budget"] { background: linear-gradient(90deg, rgba(241,226,200,1), rgba(224,183,138,1)); border-color: transparent; color: #2b2b2b }
.narrative-chip.is-active[data-value*="area"] { background: linear-gradient(90deg, rgba(156,222,176,1), rgba(111,199,141,0.95)); }
.narrative-chip.is-active[data-value*="lifestyle"] { background: linear-gradient(90deg, rgba(201,122,93,1), rgba(184,92,70,0.95)); }

/* Outline style for inactive chips */
.narrative-chip { background: transparent; border: 1px solid var(--color-border); }
.narrative-chip:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }

/* Range inputs (area & budget) modern styles */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(201,122,93,0.12), rgba(31,61,43,0.06)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 999px; background: var(--color-accent); box-shadow: 0 6px 18px rgba(201,122,93,0.18); cursor: pointer; }
input[type="range"]:focus { outline: none; box-shadow: var(--shadow-ring); }

/* Results feedback */
#planGrid.results-updated { animation: results-pop 520ms ease; }
@keyframes results-pop { 0%{opacity:0.85; transform: translateY(6px);} 100%{opacity:1; transform:none;} }

/* Reset button prominence */
[data-filters-reset] { border-radius: 12px; padding: 8px 14px; }


.narrative-chip {
	border: 1px solid rgba(17,29,74,0.15);
	border-radius: 16px;
	padding: 12px 16px;
	background: #fff;
	text-align: left;
	cursor: pointer;
	transition: border 0.2s ease, background 0.2s ease, color 0.2s ease;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.narrative-chip strong { font-size: 0.95rem; }
.narrative-chip span { font-size: 0.85rem; color: var(--color-muted); }
.narrative-chip.is-active { border-color: var(--color-primary); background: rgba(17,29,74,0.08); }

.catalog-suggestions {
	margin: 32px 0;
	padding: 20px;
	border-radius: 18px;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
}

.catalog-suggestions__title { font-weight: 600; margin-bottom: 8px; }
.catalog-suggestions ul { list-style: none; padding: 0; margin: 0 0 8px 0; display: flex; flex-wrap: wrap; gap: 12px; }
.catalog-suggestions li { font-size: 0.9rem; }
.catalog-suggestions a { text-decoration: none; color: var(--color-primary); }
.catalog-suggestions a:hover { text-decoration: underline; }

.insights-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.insight-card {
	border-radius: 18px;
	padding: 20px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.newsletter-panel {
	margin: 48px 0;
	padding: 28px;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(17,29,74,0.95), rgba(82,99,183,0.85));
	color: #fff;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}

.newsletter-panel__form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.newsletter-panel__form input { border-radius: 14px; border: none; padding: 12px 14px; }
.newsletter-panel__form .btn { width: 100%; }
.newsletter-panel__confirmation { margin: 0; font-weight: 600; }
.newsletter-panel__confirmation.is-error { color: #ffd7d7; }

.insight-page { display: flex; flex-direction: column; gap: 32px; }
.insight-hero { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; }
.insight-body { display: grid; gap: 18px; }
.insight-section { padding: 18px; border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border); }

.plan-trust-badges {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 12px 0;
}

.plan-trust-badges span {
	background: var(--color-surface);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 0.8rem;
	border: 1px solid var(--color-border);
}

.plan-testimonial {
	margin: 0 0 12px;
	font-style: italic;
	color: var(--color-muted);
}
.plan-testimonial cite { display: block; margin-top: 4px; font-style: normal; font-weight: 600; }

.plan-faq__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.plan-faq__grid article {
	border-radius: 18px;
	border: 1px solid var(--color-border);
	padding: 16px;
	background: var(--color-surface);
}

.plan-version ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.plan-version li {
	background: var(--color-surface);
	border-radius: 14px;
	padding: 10px 14px;
	border: 1px dashed var(--color-border);
}


@keyframes fade-in-soft {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.plan-card,
.rail-card,
.insight-card,
.package-card,
.plan-panel,
.plan-panel .rich-text,
.plan-faq__grid article,
.newsletter-panel,
.catalog-suggestions {
	animation: fade-in-soft 0.4s ease both;
}

@media (max-width: 640px) {
	.plan-card {
		display: grid;
		grid-template-columns: 45% 55%;
		gap: 12px;
	}
	.plan-card__media { border-radius: 16px; overflow: hidden; }
	.plan-card__actions .btn,
	.plan-card__actions .compare-toggle { width: 100%; }
	.newsletter-panel { grid-template-columns: 1fr; }
}

/* Compare ----------------------------------------------------- */
.plan-card__actions {
	margin-top: 12px;
}

.compare-toggle {
	width: 100%;
	border: 1px solid rgba(17,29,74,0.2);
	background: rgba(17,29,74,0.05);
	color: var(--color-primary);
	border-radius: 12px;
	padding: 10px 14px;
	font-weight: 600;
	font-size: 0.85rem;
	text-align: center;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.compare-toggle:hover { background: rgba(17,29,74,0.12); }
.compare-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.compare-toggle.is-active { background: #111d4a; color: #fff; border-color: #111d4a; }

.favorite-toggle,
.faq-question {
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.favorite-toggle:hover,
.faq-question:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

.compare-toggle--inline {
	width: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 999px;
}

.plan-hero__compare { margin-top: 10px; }

.compare-tray {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	background: rgba(15,23,42,0.95);
	color: #fff;
	border-radius: 24px;
	padding: 16px 20px;
	box-shadow: 0 20px 50px rgba(15,23,42,0.35);
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(640px, 94vw);
	z-index: 120;
}

.compare-tray__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.8;
}

.compare-tray__message {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255,255,255,0.9);
}

.compare-tray--shake {
	animation: compare-shake 0.6s ease;
}

.compare-tray__plans {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.compare-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(255,255,255,0.12);
	border-radius: 999px;
	font-size: 0.85rem;
}

.compare-chip strong {
	font-weight: 600;
}

.compare-chip button {
	background: transparent;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 0.85rem;
}

.compare-tray__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.compare-tray__actions .btn { flex: 1 1 140px; }

@keyframes compare-shake {
	0% { transform: translateX(-50%) translate3d(0,0,0); }
	20% { transform: translateX(-50%) translate3d(-6px,0,0); }
	40% { transform: translateX(-50%) translate3d(6px,0,0); }
	60% { transform: translateX(-50%) translate3d(-4px,0,0); }
	80% { transform: translateX(-50%) translate3d(4px,0,0); }
	100% { transform: translateX(-50%) translate3d(0,0,0); }
}

.compare-inline {
	position: sticky;
	bottom: 24px;
	margin: 0 auto;
	max-width: 1180px;
	width: min(96vw, 100%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	background: rgba(15,23,42,0.06);
	border: 1px solid rgba(15,23,42,0.16);
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
}

.compare-inline__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.compare-inline__text p {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.85rem;
}

.compare-inline__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.compare-inline__clear {
	border: none;
	background: transparent;
	color: var(--color-text);
	font-weight: 600;
	cursor: pointer;
}

.compare-page {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.compare-hero {
	padding: clamp(70px, 10vw, 120px) 0 clamp(32px, 6vw, 64px);
	background: radial-gradient(circle at 15% 20%, rgba(22, 84, 226, 0.18), transparent 45%),
		linear-gradient(135deg, #07132a 0%, #0f2346 55%, #0b6f6a 100%);
	color: #fff;
}

.compare-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.compare-hero__content .lead {
	color: rgba(255, 255, 255, 0.85);
}

.compare-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0 16px;
}

.compare-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

.compare-hero__badges span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(4px);
}

.compare-hero__card {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 18px 40px rgba(5, 14, 34, 0.45);
	backdrop-filter: blur(10px);
}

.compare-hero__card h2 {
	margin-top: 0;
	font-size: 1.2rem;
}

.compare-hero__card ul {
	padding-left: 18px;
	margin: 0 0 18px;
}

.compare-hero__card li {
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.85);
}

.compare-hero__stat {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 16px;
	display: grid;
	gap: 4px;
}

.compare-hero__stat-label {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
}

.compare-hero__stat-note {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.65);
}

.compare-guide {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.compare-guide__card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	padding: 18px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--color-border);
	box-shadow: 0 12px 30px rgba(15, 30, 60, 0.08);
}

.compare-guide__card i {
	color: #0f4bcf;
	font-size: 1.3rem;
	margin-top: 2px;
}

.compare-empty {
	padding: clamp(22px, 4vw, 36px);
	border: 1px dashed rgba(15, 30, 60, 0.25);
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(245, 248, 255, 0.9));
	color: var(--color-muted);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.compare-table-wrapper {
	overflow-x: auto;
	background: #fff;
	border-radius: 18px;
	border: 1px solid var(--color-border);
	box-shadow: 0 12px 30px rgba(15, 30, 60, 0.08);
	padding: 12px;
}

.compare-table {
	min-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.compare-table__head,
.compare-table__row {
	display: grid;
	grid-template-columns: 180px repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	align-items: stretch;
}

.compare-table__head {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.85rem;
	color: var(--color-muted);
}

.compare-table__cell {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 16px;
	min-height: 80px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.compare-table__cell--label {
	background: transparent;
	border: none;
	padding: 16px 0;
	font-weight: 600;
	color: var(--color-text);
}

.compare-table__plan-title {
	margin: 0 0 6px;
	font-size: 1rem;
}

.compare-table__meta {
	font-size: 0.85rem;
	color: var(--color-muted);
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.compare-price-pill {
	display: inline-flex;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(17,29,74,0.08);
	font-weight: 600;
}

.compare-remove {
	background: transparent;
	border: none;
	color: var(--color-muted);
	cursor: pointer;
	font-size: 0.85rem;
}

@media (max-width: 900px) {
	.compare-hero__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.compare-empty {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
@media (min-width: 768px) {
	.site-header__inner { gap: 24px; padding: 16px 24px; }
}

.site-brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	z-index: 101;
}
.site-brand__logo { font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.site-brand__mark {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(15,118,110,0.10);
	color: var(--color-primary);
	border: 1px solid rgba(15,118,110,0.18);
}
.site-brand__name { font-family: var(--font-display); font-weight: 750; letter-spacing: 0.04em; }
.site-brand__tagline { font-size: 0.82rem; color: var(--color-muted); line-height: 1.35; }

@media (min-width: 768px) {
	.site-header__inner { gap: 24px; padding: 16px 24px; }
	.site-brand__logo { font-size: 1.18rem; }
	.site-brand__tagline { font-size: 0.9rem; }
}

.site-header__actions {
	display: none;
	align-items: center;
	gap: 10px;
	z-index: 101;
}

.icon-btn {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--color-text);
	background: rgba(255,255,255,0.55);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-xs);
	transition: transform var(--transition-fast) ease, background var(--transition-fast) ease;
}

.icon-btn:hover {
	background: var(--color-surface);
	transform: translateY(-1px);
}

.btn-cta i { margin-right: 8px; }

/* Mobile Navigation */
.nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	background: transparent;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--color-primary);
	z-index: 101;
	border-radius: var(--radius-sm);
	transition: background 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover { background: var(--color-surface-alt); }
.nav-toggle:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.nav {
	position: fixed;
	top: 0;
	right: -100%;
	width: min(360px, 92vw);
	height: 100vh;
	background: var(--color-surface);
	box-shadow: -8px 0 30px rgba(15,9,4,0.15);
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 96px 28px 36px;
	transition: right 0.3s ease;
	z-index: 99;
	overflow-y: auto;
	scrollbar-gutter: stable both-edges;
	border-left: 1px solid var(--color-border-strong);
}

.nav.is-open { right: 0; }

.nav a {
	text-decoration: none;
	color: var(--color-text);
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	font-size: 1rem;
	font-weight: 600;
	min-height: 48px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.nav a i { width: 18px; text-align: center; color: var(--color-muted); }

.nav a.is-active i,
.nav a:hover i { color: var(--color-primary); }

.nav a:hover,
.nav a.is-active {
	background: rgba(214,102,61,0.08);
	color: var(--color-primary);
	transform: translateX(4px);
}
.nav-link--muted { color: var(--color-muted); }

.nav__group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(15,23,42,0.12);
}

.nav__group:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.nav__heading {
	margin: 0;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-soft);
}

.nav__stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nav__select {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
}

.nav__select::after {
	content: "▼";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-primary);
	pointer-events: none;
}

.nav__select i {
	color: var(--color-primary);
}

.nav__select-label {
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.70rem;
	color: #ffffff;
	background: var(--gradient-primary);
	border-radius: 999px;
	padding: 6px 10px;
	line-height: 1;
}

.nav__select-control {
	appearance: none;
	background: transparent;
	border: none;
	font-weight: 600;
	color: var(--color-text);
	font-size: 0.95rem;
	width: 100%;
	min-height: 40px;
	padding-right: 34px;
}

.nav__select-control:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.nav__group--tools .nav__stack { gap: 12px; }

.nav__group--tools .nav__select {
	border-color: rgba(31, 76, 228, 0.25);
	background: rgba(31, 76, 228, 0.06);
}

.nav__tools-links {
	display: grid;
	gap: 8px;
}

/* Mobile-first: show tap-friendly list, hide spinner */
[data-tools-desktop] { display: none; }
[data-tools-mobile] { display: grid; }

.nav__cta {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border-strong);
}

.nav__cta .btn {
	width: 100%;
}

.nav__contact {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--color-text);
	font-weight: 600;
}

.nav__contact i {
	color: var(--color-primary);
}

.site-header__cta {
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.site-header__cta-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.site-header__note {
	font-size: 0.85rem;
	color: var(--color-secondary);
	margin: 0;
}

.site-header__help {
	font-size: 0.85rem;
	color: var(--color-muted);
	margin: 0;
}

.site-header__help a { color: var(--color-primary); font-weight: 600; }

/* Overlay for mobile menu */
.nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(15,23,42,0.4);
	z-index: 98;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.nav-overlay.is-visible {
	opacity: 1;
	pointer-events: all;
}

@media (min-width: 960px) {
	.nav-toggle { display: none; }
	.nav {
		position: static;
		width: auto;
		height: auto;
		background: transparent;
		box-shadow: none;
		flex-direction: row;
		gap: 6px;
		padding: 0;
		overflow: visible;
		justify-content: center;
		flex: 1;
		border-left: none;
	}
	.nav__group {
		flex-direction: row;
		align-items: center;
		gap: 6px;
		border: none;
		padding: 0;
	}
	.nav__heading { display: none; }
	.nav__stack { flex-direction: row; gap: 6px; }
	.nav__group--tools .nav__stack { flex-direction: column; }
	.nav__select { min-width: 220px; }
	[data-tools-desktop] { display: flex; }
	[data-tools-mobile] { display: none; }
	.nav a { padding: 10px 12px; min-height: auto; font-size: 0.93rem; transform: none; }
	.nav a:hover,
	.nav a.is-active { transform: none; }
	.site-header__actions { display: inline-flex; }
	.site-header__cta { display: none; }
	.nav__cta { display: none; }
	.nav-overlay { display: none; }
}

/* Buttons - Touch Friendly */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: clamp(10px, 1.2vw, 14px) clamp(16px, 2vw, 22px);
	min-height: 44px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	text-align: center;
	font-size: 0.95rem;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:active { transform: scale(0.98); }

.btn-primary {
	background: var(--gradient-ink);
	color: #fff;
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
	transition: left 0.5s;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-elevated);
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
}

.btn-primary:hover::before {
	left: 100%;
}

.btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px 0 rgba(17, 29, 74, 0.2);
}

.btn-outline {
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	background: transparent;
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--color-primary);
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}

.btn-outline:hover {
	color: #fff;
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(17, 29, 74, 0.2);
}

.btn-outline:hover::before {
	width: 100%;
}

.btn-outline:active {
	transform: translateY(0);
}

.btn-soft {
	background: rgba(22,162,132,0.12);
	color: var(--color-secondary);
	box-shadow: 0 10px 30px rgba(22,162,132,0.15);
}

.btn-ghost {
	border-color: rgba(31,76,228,0.25);
	color: var(--color-primary);
}

/* Hero - Mobile First */
.hero--architect {
	position: relative;
	overflow: hidden;
	background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,238,229,0.9));
	border-radius: var(--radius-lg);
	padding: clamp(48px, 8vw, 96px) 0;
}

.hero--architect::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 20% 20%, rgba(246,183,86,0.35), transparent 55%);
	opacity: 0.6;
}

.hero--architect .hero__content,
.hero--architect .hero__metrics,
.hero--architect .hero__visual,
.hero--architect .hero__tag {
	position: relative;
	z-index: 1;
}

.hero {
	padding: 32px 0 24px;
}

@media (min-width: 768px) {
	.hero { padding: 52px 0 36px; }
}

@media (min-width: 1024px) {
	.hero { padding: 68px 0 36px; }
}

.hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 768px) {
	.hero__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px; align-items: center; }
}

.hero__content h1 {
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	margin: 0 0 16px;
	line-height: 1.05;
	color: var(--color-text);
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.7rem;
	color: var(--color-soft);
	margin-bottom: 8px;
}

@media (min-width: 768px) {
	.eyebrow { font-size: 0.75rem; margin-bottom: 12px; }
}

.lead { color: var(--color-muted); max-width: 640px; font-size: 0.98rem; line-height: 1.65; }

.hero--architect .lead {
	color: var(--color-muted);
}

@media (min-width: 768px) {
	.lead { font-size: 1rem; }
}

.hero__actions {
	display: flex;
	gap: 14px;
	margin: 24px 0;
	flex-direction: column;
}

.hero__actions .btn {
	width: 100%;
	justify-content: center;
	font-weight: 600;
	min-height: 52px;
	font-size: 1rem;
}

@media (min-width: 640px) {
	.hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.hero__actions .btn {
		width: auto;
		flex: 1 1 auto;
		min-width: 160px;
	}
}

@media (min-width: 768px) {
	.hero__actions {
		margin: 28px 0;
		gap: 16px;
	}
	.hero__actions .btn {
		flex: 0 1 auto;
		min-width: 180px;
		min-height: 48px;
		padding: 14px 28px;
	}
}

.hero__metrics { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); 
	gap: 14px; 
	margin-top: 28px;
}

.hero__metrics > div {
	background: rgba(255,255,255,0.9);
	border: 1px solid rgba(38,24,10,0.08);
	box-shadow: var(--shadow-sm);
	border-radius: var(--radius-md);
	padding: 16px 18px;
}

@media (min-width: 768px) {
	.hero__metrics { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 18px; }
}

.metric-value { font-size: 1.8rem; font-weight: 700; display: block; color: var(--color-primary); }
.metric-label { color: var(--color-muted); font-size: 0.9rem; }

@media (min-width: 768px) {
	.metric-value { font-size: 1.9rem; }
	.metric-label { font-size: 0.92rem; }
}
.hero__visual {
	position: relative;
	padding: 28px;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	min-height: 280px;
	display: grid;
	gap: 16px;
	border: 1px solid rgba(255,255,255,0.6);
	box-shadow: var(--shadow-elevated);
}

@media (min-width: 768px) {
	.hero__visual { padding: 32px; }
}

.hero__visual-frame {
	border-radius: var(--radius-md);
	border: 1px solid rgba(255,255,255,0.4);
	height: 200px;
	box-shadow: var(--shadow-md);
	background: linear-gradient(135deg, rgba(255,252,248,0.9), rgba(247,224,208,0.6));
}

@media (min-width: 1024px) {
	.hero__visual-frame { height: 240px; }
}

.hero__tag {
	position: relative;
	background: rgba(255,255,255,0.85);
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: var(--shadow-xs);
}

.hero__tag--soft { background: rgba(214,102,61,0.12); color: var(--color-primary); }
.hero__tag--outline { border: 1px dashed rgba(38,24,10,0.18); background: transparent; color: var(--color-text); }

/* Sections - Mobile First */
.section {
	padding: var(--section-pad) 0;
	position: relative;
	scroll-margin-top: 80px;
}

@media (min-width: 1024px) {
	.section { padding: var(--section-pad-lg) 0; }
}

.section--soft {
	background: var(--color-surface-alt);
	border-radius: var(--radius-md);
	margin: clamp(20px, 3vw, 32px) 0;
	padding: clamp(20px, 3vw, 32px);
}

@media (min-width: 1024px) {
	.section--soft { border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px); }
}

.section--duo {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	margin: clamp(20px, 3vw, 32px) 0;
	padding: clamp(20px, 3vw, 32px);
}

@media (min-width: 1024px) {
	.section--duo { border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px); }
}

.section-heading {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.section-heading { flex-direction: row; justify-content: space-between; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
}

.section-heading h1,
.section-heading h2 {
	margin: 0;
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	line-height: 1.2;
}

.text-link { text-decoration: none; color: var(--color-primary); font-weight: 600; font-size: 0.9rem; }

@media (min-width: 768px) {
	.text-link { font-size: 1rem; }
}

/* Plan cards - Mobile First */
.plan-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 24px;
}

@media (min-width: 640px) {
	.plan-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
}

@media (min-width: 1024px) {
	.plan-grid { gap: 28px; margin-top: 32px; }
}

.plan-grid--catalog { grid-template-columns: 1fr; }

@media (min-width: 720px) {
	.plan-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.plan-grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.plan-grid--scroll {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	overflow-x: auto;
	padding-bottom: 12px;
	gap: 16px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.plan-grid--scroll > * { scroll-snap-align: start; }

.plan-related--listing .plan-grid--scroll .plan-card { min-width: 260px; }

.plan-card {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-card--tap {
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

.plan-card--tap:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.plan-card:active { transform: scale(0.98); }

@media (min-width: 768px) {
	.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

.plan-card--compact .plan-card__media { min-height: 160px; }

@media (min-width: 768px) {
	.plan-card--compact .plan-card__media { min-height: 180px; }
}

.plan-card--compact .plan-card__body { gap: 10px; padding: 20px; }

@media (min-width: 768px) {
	.plan-card--compact .plan-card__body { gap: 12px; padding: 24px; }
}

.plan-card__media {
	position: relative;
	display: block;
	max-width: 100%;
	min-height: 200px;
	/* Reserve a consistent aspect ratio to avoid CLS */
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-surface-alt);
}

.plan-card__media > a {
	display: block;
	width: 100%;
	height: 100%;
}

@media (min-width: 768px) {
	.plan-card__media { min-height: 220px; }
}

.plan-card__media picture { display: block; width: 100%; height: 100%; }
.plan-card__media img,
.plan-card__media picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Skeleton placeholder shown until image loads (prevents layout shift and provides perceived performance)
   Uses a light shimmer and is removed when the image finishes loading via JS. */
.plan-card__media .skeleton {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(245,243,240,0.9), rgba(233,229,224,0.95) 50%, rgba(245,243,240,0.9));
	background-size: 200% 100%;
	animation: shimmer 1.2s linear infinite;
}
.plan-card__media.is-loaded .skeleton { display: none; }

@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.plan-card__placeholder {
	width: 100%;
	height: 100%;
	min-height: 200px;
	display: grid;
	place-items: center;
	background: var(--color-surface-alt);
	color: var(--color-muted);
	font-size: 0.9rem;
}

@media (min-width: 768px) {
	.plan-card__placeholder { min-height: 220px; }
}

.plan-card__labels, .plan-card__media .badge { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }

@media (min-width: 768px) {
	.plan-card__labels, .plan-card__media .badge { top: 16px; left: 16px; gap: 8px; }
}

.plan-card__body { 
	padding: 24px; 
	display: flex; 
	flex-direction: column; 
	gap: 16px;
	flex: 1;
}

@media (min-width: 768px) {
	.plan-card__body { padding: 28px; gap: 18px; }
}

.plan-card__eyebrow { 
	font-size: 0.6875rem; 
	letter-spacing: 0.05em; 
	color: #64748b; 
	text-transform: uppercase; 
	margin: 0;
	font-weight: 600;
}

.plan-card__eyebrow a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.plan-card__eyebrow a:hover {
	color: #0ea5e9;
}

@media (min-width: 768px) {
	.plan-card__eyebrow { font-size: 0.75rem; }
}

.plan-card h3 { font-size: 1.1rem; margin: 0; line-height: 1.3; }

@media (min-width: 768px) {
	.plan-card h3 { font-size: 1.2rem; }
}

.plan-card__summary { color: var(--color-muted); margin: 0; font-size: 0.9rem; line-height: 1.5; }

.plan-card__specs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }

@media (min-width: 768px) {
	.plan-card__specs { gap: 10px; }
}

.plan-card__specs div { padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

@media (min-width: 768px) {
	.plan-card__specs div { padding: 12px; }
}

.plan-card__specs dt { font-size: 0.7rem; color: var(--color-soft); margin: 0; text-transform: uppercase; letter-spacing: 0.05em; }

@media (min-width: 768px) {
	.plan-card__specs dt { font-size: 0.75rem; }
}

.plan-card__specs dd { font-weight: 600; margin: 4px 0 0; font-size: 0.95rem; }

.plan-card__footer { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

@media (min-width: 640px) {
	.plan-card__footer { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
}

.plan-card__footer .btn { width: 100%; }

@media (min-width: 640px) {
	.plan-card__footer .btn { width: auto; }
}

.plan-card__chips { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }

@media (min-width: 768px) {
	.plan-card__chips { gap: 8px; }
}

.plan-card__chips li { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--color-border); font-size: 0.8rem; color: var(--color-muted); }

@media (min-width: 768px) {
	.plan-card__chips li { padding: 6px 12px; font-size: 0.85rem; }
}

/* Premium plan cards - Modern, clean design */
.plan-card--lux {
	border-radius: 20px;
	border: 1px solid rgba(15, 23, 42, 0.06);
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-card--lux:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
	transform: translateY(-4px);
}

.plan-card--lux .plan-card__media {
	min-height: 280px;
	background: #f8f9fa;
	position: relative;
	overflow: hidden;
}

.plan-card--lux .plan-card__media img {
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-card--lux:hover .plan-card__media img {
	transform: scale(1.05);
}

/* Mobile-first balance: comfortable cards, no screen domination */
@media (max-width: 719px) {
	.plan-grid--catalog .plan-card {
		height: clamp(340px, 52vh, 420px);
	}
	.plan-grid--catalog .plan-card__media {
		min-height: unset;
		flex: 0 0 42%;
	}
	.plan-grid--catalog .plan-card__placeholder { min-height: unset; }
	.plan-grid--catalog .plan-card__body {
		flex: 1;
		gap: 12px;
	}
}

.plan-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.4;
	font-weight: 600;
	color: #1e293b;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	letter-spacing: -0.01em;
}

.plan-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.plan-card__title a:hover {
	color: #0ea5e9;
}

.plan-card__top {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.plan-card__ref {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
	font-weight: 500;
}

.plan-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.plan-card__bestfor {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 8px;
	background: #f1f5f9;
	color: #475569;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
}

.plan-card__bestfor-label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #94a3b8;
	font-weight: 600;
}

.plan-card__quick-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
	gap: 10px;
}

.plan-quick-spec {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 12px 10px;
	background: #fafbfc;
	text-align: center;
	transition: all 0.2s ease;
}

.plan-quick-spec:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
}

.plan-quick-spec small {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #94a3b8;
	font-weight: 600;
	margin-bottom: 4px;
}

.plan-quick-spec strong {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: #1e293b;
	color: var(--color-text);
}

.plan-card__tiers--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.plan-card__tier {
	border-radius: 999px;
	padding: 8px 14px;
	border: 1px solid rgba(17,29,74,0.15);
	background: rgba(17,29,74,0.05);
	font-size: 0.82rem;
	font-weight: 600;
	display: flex;
	gap: 6px;
}

.plan-card__tier span:last-child {
	color: var(--color-primary);
}

.plan-card__tier--muted {
	opacity: 0.6;
	background: rgba(17,29,74,0.03);
}

.plan-card__tier--muted span:last-child {
	color: inherit;
}

.plan-fact {
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 6px 14px 6px 10px;
	font-size: 0.9rem;
	color: var(--color-muted);
	background: rgba(255,255,255,0.9);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-shadow: var(--shadow-sm);
}

.plan-fact strong {
	color: var(--color-text);
	font-weight: 700;
}

.plan-fact i {
	font-size: 1rem;
	color: var(--color-primary);
	background: rgba(16, 68, 150, 0.08);
	border-radius: 999px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.plan-fact__metric {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.plan-fact__label {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.plan-card__price {
	font-size: 1.15rem;
	font-weight: 750;
	color: var(--color-text);
}

.plan-card--lux .plan-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(0, 0, 0, 0.45), transparent 55%);
	opacity: 0.85;
	pointer-events: none;
}

.plan-card__tag-stack {
	position: absolute;
	left: 18px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.plan-card__tag-stack .badge {
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-text);
	backdrop-filter: blur(6px);
}

.plan-card--lux .plan-card__content {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.plan-card__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.plan-card__category a {
	text-decoration: none;
	color: var(--color-muted);
	font-size: 0.85rem;
}

.plan-card__ref {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-soft);
}

.plan-card--lux h3 {
	font-size: 1.35rem;
	margin: 0;
	color: var(--color-text);
}

.plan-card--lux .plan-card__summary {
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--color-muted);
}

.plan-card__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.plan-card__stats li {
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgba(16,24,40,0.12);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text);
	background: rgba(31,76,228,0.05);
}

.plan-card__stats--inline {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.plan-card__stats--inline span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.1);
	background: rgba(128, 98, 240, 0.08);
	font-size: 0.85rem;
}

.plan-card__pricing {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.plan-card__pricing-card {
	padding: 14px 16px;
	border-radius: 16px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.plan-card__pricing-card span:first-child {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-soft);
}

.plan-card__pricing-card strong {
	font-size: 1rem;
	color: var(--color-primary);
}

.plan-card__pricing-card.is-muted {
	opacity: 0.55;
}

.plan-card__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 600px) {
	.plan-card__actions { flex-direction: row; }
}

.plan-card__actions .btn {
	flex: 1 1 auto;
}

.plan-card__actions .btn-ghost {
	border-color: rgba(15, 23, 42, 0.2);
	color: var(--color-text);
}

.plan-card__stats li { font-weight: 600; color: var(--color-text); }

.plan-card__price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.price { font-weight: 600; font-size: 1rem; }

@media (min-width: 768px) {
	.price { font-size: 1.1rem; }
}

.price--strike { text-decoration: line-through; color: var(--color-soft); margin-right: 4px; font-size: 0.9rem; }

.price--primary { color: var(--color-primary); font-size: 1.15rem; }

@media (min-width: 768px) {
	.price--primary { font-size: 1.25rem; }
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
}

@media (min-width: 768px) {
	.badge { gap: 6px; padding: 6px 12px; font-size: 0.78rem; }
}

.badge--glow { background: rgba(223,161,95,0.16); color: #8a4c0b; }
.badge--outline { border: 1px solid rgba(17,29,74,0.3); color: var(--color-primary); background: rgba(255,255,255,0.9); }
.badge--soft { background: rgba(15,23,66,0.08); color: var(--color-primary); }

/* Filters - Mobile First */
.filters {
	margin: 20px 0 12px;
	padding: 16px;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
	.filters { margin: 24px 0 12px; padding: 18px; }
}

.filter-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	align-items: end;
	position: relative;
}

.filter-form.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.filter-form.is-loading::after {
	content: '';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid rgba(17,29,74,0.25);
	border-top-color: var(--color-primary);
	animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
	to { transform: rotate(360deg); }
}

@media (min-width: 640px) {
	.filter-form { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 16px; }
}

@media (min-width: 1024px) {
	.filter-form { gap: 18px; }
}

.filter-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; color: var(--color-muted); font-size: 0.9rem; }

.filter-form__actions {
	display: flex;
	gap: 10px;
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	/* Ensure Apply/Reset are always visible and tappable on phones */
	.filter-form__actions { flex-direction: column; align-items: stretch; }
	.filter-form__actions .btn { width: 100%; justify-content: center; }
}

.filters__summary {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.95rem;
	color: var(--color-muted);
}

.category-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 28px;
}

.category-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	text-decoration: none;
	font-size: 0.9rem;
	color: var(--color-text);
	background: var(--color-surface);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.category-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.category-chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.catalog-results { margin-top: 24px; }

[data-pagination-wrapper] { min-height: 40px; }

[data-load-more-wrapper] [hidden] { display: none !important; }

#planEmptyState[hidden] { display: none !important; }

input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="url"], select, textarea {
	width: 100%;
	padding: 12px;
	min-height: 48px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-family: inherit;
	font-size: 1rem;
	color: var(--color-text);
	background: var(--color-surface);
	transition: border-color 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
	color: var(--color-muted);
}

input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="url"]:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: var(--shadow-ring);
}

@media (min-width: 768px) {
	input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="url"], select, textarea { padding: 11px 12px; min-height: auto; }
}

select { cursor: pointer; }
textarea { min-height: 120px; resize: vertical; }

/* Pagination - Mobile First */
.pagination {
	margin: 24px 0;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

@media (min-width: 768px) {
	.pagination { margin: 32px 0; gap: 12px; justify-content: flex-start; }
}

.pagination__link {
	padding: 10px 14px;
	min-height: 44px;
	min-width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	text-decoration: none;
	color: var(--color-text);
	font-size: 0.9rem;
	transition: background 0.2s ease;
}

@media (min-width: 768px) {
	.pagination__link { padding: 8px 14px; min-height: auto; font-size: 1rem; }
}

.pagination__link:active { transform: scale(0.96); }
.pagination__link.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination__ellipsis { color: var(--color-soft); padding: 0 4px; }

.empty-state {
	padding: 60px;
	text-align: center;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

/* Plan detail - Mobile First */
.plan-detail { background: transparent; }

.breadcrumbs {
	font-size: 0.8rem;
	color: var(--color-muted);
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	padding: 8px 0;
	align-items: center;
}

@media (min-width: 768px) {
	.breadcrumbs { font-size: 0.85rem; }
}

.breadcrumbs a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.breadcrumbs a::after { content: "›"; margin: 0 8px; color: var(--color-soft); }
.breadcrumbs a:last-of-type::after { content: ""; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 600; }

.plan-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 16px 0 32px;
}

@media (min-width: 768px) {
	.plan-hero { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 32px; margin: 20px 0 40px; }
}

@media (min-width: 1024px) {
	.plan-hero { gap: 36px; margin: 24px 0 48px; }
}

.plan-hero__media figure {
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	aspect-ratio: 16 / 10;
	max-width: 100%;
	max-height: min(48vh, 420px);
}
.plan-hero__media picture { display: block; width: 100%; height: 100%; }
.plan-hero__media img,
.plan-hero__media picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

.plan-hero__media figcaption { font-size: 0.85rem; color: var(--color-muted); padding: 10px 12px; background: rgba(255,255,255,0.95); }

@media (max-width: 719px) {
	.plan-hero__media figcaption { display: none; }
}
@media (max-width: 719px) {
	.plan-hero__media figure { max-height: 300px; }
}
.plan-hero__tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

@media (min-width: 768px) {
	.plan-hero__tags { gap: 10px; margin-top: 18px; }
}

.plan-hero__lead { color: var(--color-muted); font-size: 1rem; line-height: 1.6; }

@media (min-width: 768px) {
	.plan-hero__lead { font-size: 1.05rem; }
}

.plan-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0; }

.plan-quick-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin: 12px 0 0;
}

.plan-quick-spec {
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 10px 12px;
	background: rgba(255,255,255,0.9);
}

.plan-quick-spec small {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-soft);
}

.plan-quick-spec strong {
	display: block;
	font-size: 1rem;
	color: var(--color-text);
}

.unit-toggle {
	display: inline-flex;
	gap: 8px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 12px;
}

.unit-toggle__btn {
	border: none;
	background: transparent;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 600;
	color: var(--color-muted);
	cursor: pointer;
}

.unit-toggle__btn.is-active {
	background: rgba(17,29,74,0.12);
	color: var(--color-text);
}

.sticky-cta {
	position: fixed;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	background: rgba(15,23,42,0.95);
	color: #fff;
	border-radius: 18px;
	padding: 12px 16px;
	box-shadow: 0 20px 50px rgba(15,23,42,0.35);
	display: none;
	align-items: center;
	gap: 16px;
	width: min(720px, 94vw);
	z-index: 125;
}

.sticky-cta .muted { color: rgba(255,255,255,0.72); }

.sticky-cta__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	.sticky-cta { display: flex; justify-content: space-between; }
}

@media (min-width: 768px) {
	.plan-chips { gap: 10px; margin: 16px 0; }
}

.plan-chips li { border-radius: 999px; padding: 5px 12px; border: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-muted); }

@media (min-width: 768px) {
	.plan-chips li { padding: 6px 14px; font-size: 0.9rem; }
}

.plan-pricing { font-size: 1.1rem; margin-bottom: 14px; }

@media (min-width: 768px) {
	.plan-pricing { font-size: 1.2rem; margin-bottom: 16px; }
}

.plan-actions { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 640px) {
	.plan-actions { flex-direction: row; flex-wrap: wrap; gap: 12px; }
}

.plan-actions .btn { width: 100%; }

@media (min-width: 640px) {
	.plan-actions .btn { width: auto; }
}

.plan-actions--secondary { margin-top: 10px; }

@media (min-width: 768px) {
	.plan-actions--secondary { margin-top: 12px; }
}

.plan-panels {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	.plan-panels { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 24px; }
}

.plan-panel {
	background: var(--color-surface);
	padding: 20px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
	.plan-panel { padding: 24px; }
}

.plan-panel__head h2 { margin: 0 0 12px; font-size: 1.2rem; }

@media (min-width: 768px) {
	.plan-panel__head h2 { font-size: 1.4rem; }
}

.plan-accordion { display: grid; gap: 12px; }

.plan-accordion__item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.plan-accordion__item summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 16px;
	font-weight: 650;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.plan-accordion__item summary::-webkit-details-marker { display: none; }

.plan-accordion__item summary::after {
	content: "＋";
	font-weight: 700;
	color: var(--color-primary);
}

.plan-accordion__item[open] summary::after { content: "—"; }

.plan-accordion__item .rich-text { padding: 0 16px 16px; }

.spec-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media (min-width: 480px) {
	.spec-grid { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
}

@media (min-width: 768px) {
	.spec-grid { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; }
}

.spec-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 10px;
}

@media (min-width: 768px) {
	.spec-item { padding: 12px; }
}

.spec-k { font-size: 0.7rem; color: var(--color-soft); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }

@media (min-width: 768px) {
	.spec-k { font-size: 0.78rem; }
}

.spec-v { font-weight: 600; font-size: 0.95rem; }

.plan-pack-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 32px 0;
}

@media (min-width: 640px) {
	.plan-pack-grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
}

@media (min-width: 1024px) {
	.plan-pack-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 18px; margin: 40px 0; }
}

.plan-pack {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: 20px;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

@media (min-width: 768px) {
	.plan-pack { padding: 24px; gap: 16px; }
}

.plan-related { margin-bottom: 40px; }
.related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.related-list a { text-decoration: none; color: var(--color-primary); }

.rail-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	padding: 12px;
	display: flex;
	gap: 12px;
	min-width: 240px;
	box-shadow: var(--shadow-sm);
}

.rail-card__media {
	flex: 0 0 120px;
	border-radius: 14px;
	overflow: hidden;
	display: block;
}

.rail-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rail-card__placeholder {
	width: 100%;
	height: 100%;
	min-height: 90px;
	border: 1px dashed var(--color-border);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	color: var(--color-muted);
	text-align: center;
	padding: 8px;
}

.rail-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.rail-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
}

.rail-card__title a {
	text-decoration: none;
	color: inherit;
}

.rail-card__ref {
	margin: 0;
	font-size: 0.8rem;
	color: var(--color-soft);
}

.rail-card__meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--color-muted);
}

.rail-card__price {
	margin: 4px 0 0;
	font-weight: 600;
	color: var(--color-primary);
}

/* Footer - Mobile First */
.site-footer {
	margin-top: 64px;
	background: var(--footer-bg);
	color: #f8fafc;
	padding: 56px 0 34px;
	position: relative;
	overflow: hidden;
}

.site-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 20%, rgba(232,115,77,0.08), transparent 60%);
	pointer-events: none;
}

.site-footer > .shell {
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.site-footer { margin-top: 80px; padding: 64px 0 40px; }
}

@media (min-width: 1024px) {
	.site-footer { padding: 72px 0 48px; }
}

.site-footer h3, .site-footer h4 { 
	margin-bottom: 16px; 
	font-size: 1.1rem; 
	color: #ffffff;
	font-weight: 700;
}

@media (min-width: 768px) {
	.site-footer h3, .site-footer h4 { font-size: 1.15rem; margin-bottom: 18px; }
}

.site-footer p {
	color: var(--footer-text);
	line-height: 1.7;
	margin-bottom: 12px;
}

.site-footer a { 
	color: rgba(255,255,255,0.9); 
	text-decoration: none; 
	padding: 4px 0; 
	display: inline-block; 
	transition: all var(--transition-fast) ease; 
	position: relative;
}

.site-footer a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-accent);
	transition: width var(--transition-fast) ease;
}

.site-footer a:hover { 
	color: var(--color-accent);
	transform: translateX(2px);
}

.site-footer a:hover::after {
	width: 100%;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin: 8px 0; }

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer-brand__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: 760;
	letter-spacing: 0.03em;
	color: #ffffff;
	font-size: 1.1rem;
}

.footer-brand__mark {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: rgba(245,179,66,0.12);
	color: var(--color-accent);
	border: 1px solid rgba(245,179,66,0.22);
}

.footer-brand__about { margin: 0; }

.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

.social-icon {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.10);
	color: rgba(255,255,255,0.92);
	text-decoration: none;
	transition: transform var(--transition-fast) ease, background var(--transition-fast) ease, color var(--transition-fast) ease;
}

.social-icon::after { display: none; }

.social-icon:hover {
	background: rgba(245,179,66,0.12);
	border-color: rgba(245,179,66,0.22);
	color: var(--color-accent);
	transform: translateY(-2px);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

@media (min-width: 640px) {
	.footer-grid { grid-template-columns: repeat(2,1fr); gap: 24px; }
}

@media (min-width: 1024px) {
	.footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); gap: 34px; }
}

.footer-col p { margin-top: 0; }

.newsletter {
	margin-top: 12px;
}

.newsletter__row {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.newsletter input {
	flex: 1;
	min-width: 0;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.06);
	color: #ffffff;
	padding: 12px 14px;
	outline: none;
}

.newsletter input::placeholder { color: rgba(255,255,255,0.55); }

.newsletter input:focus {
	border-color: rgba(245,179,66,0.38);
	box-shadow: 0 0 0 4px rgba(245,179,66,0.14);
}

.newsletter .btn {
	white-space: nowrap;
	min-height: 46px;
}

.footer-mini {
	margin-top: 14px;
	display: grid;
	gap: 8px;
	color: var(--footer-muted);
	font-size: 0.95rem;
}

.footer-mini i { width: 18px; text-align: center; color: rgba(255,255,255,0.78); }

/* ---------------------------------------------
   Plan Detail (Technical / High-End)
   --------------------------------------------- */

.plan-tech {
	--pd-accent: #0b1f3a; /* slate/navy */
	--pd-accent-soft: rgba(11,31,58,0.08);
	--pd-border: rgba(11,31,58,0.10);
	--pd-ink: #0b1f3a;
}

.plan-tech__header {
	margin-top: 24px;
	padding: 28px 28px 24px;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
	.plan-tech__header {
		padding: 20px;
		margin-top: 16px;
	}
}

.plan-tech__nav {
	margin-top: 12px;
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding: 10px;
	border-radius: 14px;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	scrollbar-width: none;
	counter-reset: pdnav;
}

.plan-tech__nav::-webkit-scrollbar { display: none; }

.plan-tech__nav-link {
	flex: 0 0 auto;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92rem;
	color: #475569;
	border: 1px solid transparent;
	background: transparent;
	padding: 10px 12px;
	border-radius: 12px;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.plan-tech__nav-link::before {
	counter-increment: pdnav;
	content: counter(pdnav, decimal-leading-zero) " ";
	font-variant-numeric: tabular-nums;
	color: #94a3b8;
	margin-right: 6px;
}

.plan-tech__nav-link:hover {
	background: #f8fafc;
	border-color: #e2e8f0;
	color: #0f172a;
}

.plan-tech__nav-link--primary {
	background: #0ea5e9;
	color: #ffffff;
	border-color: #0ea5e9;
}

.plan-tech__nav-link--primary::before {
	color: rgba(255, 255, 255, 0.85);
}

.plan-tech__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.plan-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #475569;
	font-size: 0.875rem;
	font-weight: 600;
}

.plan-badge i { 
	color: #64748b;
	font-size: 0.875rem;
}

.plan-badge--category {
	background: #f1f5f9;
	border-color: #cbd5e1;
}

.plan-badge--ref {
	background: #ffffff;
	border-color: #e2e8f0;
}

.plan-tech__title {
	margin: 0;
	font-family: var(--font-display);
	letter-spacing: -0.02em;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	color: #0f172a;
	font-weight: 700;
	line-height: 1.2;
}

.plan-tech__subtitle {
	margin: 12px 0 0;
	color: #64748b;
	max-width: 70ch;
	line-height: 1.6;
	font-size: 1rem;
}

.plan-tech__subtitle-meta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
	color: #475569;
	font-weight: 650;
	font-size: 0.95rem;
}

.plan-tech__subtitle-text {
	display: block;
	color: #64748b;
}

.plan-tech__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr);
	gap: clamp(18px, 3vw, 34px);
	margin-top: 18px;
	align-items: start;
}

@media (max-width: 980px) {
	.plan-tech__hero { grid-template-columns: 1fr; }
}

.plan-tech__gallery {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

.plan-tech__main {
	margin: 0;
	position: relative;
	background: #f8f9fa;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	max-height: min(65vh, 560px);
	overflow: hidden;
}

.plan-tech__main img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #f8f9fa;
}

@media (max-width: 720px) {
	.plan-tech__main { max-height: 320px; }
}

.plan-tech__thumbs {
	display: flex;
	gap: 10px;
	padding: 14px 14px 0;
	flex-wrap: wrap;
}

@media (max-width: 720px) {
	.plan-tech__thumbs {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 10px;
		scroll-snap-type: x mandatory;
	}
	.plan-thumb { scroll-snap-align: start; }
}

.plan-thumb {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 0;
	background: #ffffff;
	cursor: pointer;
	overflow: hidden;
	width: 96px;
	height: 68px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.plan-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.plan-thumb:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10);
	border-color: rgba(14, 165, 233, 0.35);
}

.plan-thumb.is-active {
	border-color: #0ea5e9;
	box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
}

.plan-tech__specbar {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	padding: 20px 16px;
	background: #fafbfc;
	border-top: 1px solid #e2e8f0;
}

@media (max-width: 720px) {
	.plan-tech__specbar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 12px; }
}

.spec-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 16px 12px;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	transition: all 0.2s ease;
}

.spec-pill:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}

.spec-pill i {
	color: #0ea5e9;
	font-size: 1.25rem;
}

.spec-pill .k {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #94a3b8;
	font-weight: 700;
}

.spec-pill .v {
	font-weight: 700;
	color: #1e293b;
	line-height: 1.2;
	font-size: 1rem;
}

.spec-pill .v small {
	display: block;
	font-weight: 500;
	color: #94a3b8;
	margin-top: 2px;
	font-size: 0.75rem;
}

.plan-tech__aside {
	position: sticky;
	top: 96px;
}

@media (max-width: 980px) {
	.plan-tech__aside { position: static; top: auto; }
}

.aside-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
	position: relative;
}

.aside-card::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, rgba(14,165,233,0.9), rgba(2,132,199,0.6));
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.aside-card h2 {
	margin: 0 0 14px;
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
}

.aside-card p { margin: 12px 0 0; color: #64748b; line-height: 1.6; }

.aside-card strong { color: #0f172a; }

.aside-actions .btn {
	min-height: 44px;
}

.aside-muted { margin-top: 12px; }

.aside-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.aside-actions .btn i { margin-right: 8px; }

.plan-tech__content {
	margin-top: 24px;
}

.tech-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 900px) {
	.tech-grid { grid-template-columns: 1fr; }
}

.tech-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
	overflow: hidden;
	transition: all 0.3s ease;
}

.tech-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

.tech-card__head {
	padding: 24px 24px 0;
}

.tech-card__head h2 {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
}

.tech-card__head p {
	margin: 10px 0 0;
	color: #64748b;
	line-height: 1.6;
}

.tech-card__body {
	padding: 18px 24px 24px;
	color: #475569;
	line-height: 1.7;
}

.plan-tech .rich-text p {
	margin: 0 0 12px;
	color: #475569;
}

.plan-tech .rich-text ul,
.plan-tech .rich-text ol {
	margin: 12px 0;
	padding-left: 20px;
	display: grid;
	gap: 8px;
}

.plan-tech .rich-text li {
	color: #475569;
}

.spec-table {
	margin-top: 20px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
	overflow: hidden;
}

.spec-table__head {
	padding: 24px;
	border-bottom: 1px solid #e2e8f0;
	background: #fafbfc;
}

.spec-table__head h2 { 
	margin: 0; 
	font-size: 1.375rem; 
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
}

.spec-table__head p { 
	margin: 10px 0 0; 
	color: #64748b; 
	line-height: 1.6;
}

.spec-table__wrap { overflow-x: auto; }

.spec-table table {
	width: 100%;
	border-collapse: collapse;
}

.spec-table th,
.spec-table td {
	padding: 16px 24px;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: top;
}

.spec-table th {
	width: 240px;
	text-align: left;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #94a3b8;
	font-weight: 700;
}

.spec-table td { 
	color: #475569; 
	font-weight: 600;
	line-height: 1.6;
}

@media (max-width: 720px) {
	.spec-table th { width: 160px; }
}

.plan-tech__pricing {
	margin-top: 26px;
	padding: 18px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	background: rgba(255,255,255,0.72);
	box-shadow: var(--shadow-sm);
}

.plan-tech__mobile-cta {
	display: none;
}

@media (max-width: 900px) {
	.plan-tech__mobile-cta {
		display: flex;
		gap: 12px;
		position: sticky;
		bottom: 16px;
		z-index: 20;
		margin-top: 20px;
		padding: 16px;
		border-radius: 16px;
		border: 1px solid #e2e8f0;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(12px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}
	.plan-tech__mobile-cta .btn { flex: 1; justify-content: center; font-weight: 700; }
}

.pricing-head h2 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
}

.pricing-head p {
	margin: 12px 0 0;
	color: #64748b;
	line-height: 1.6;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 16px;
}

@media (max-width: 980px) {
	.pricing-grid { grid-template-columns: 1fr; }
}

.pricing-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}

.pricing-card.is-recommended {
	border-color: #0ea5e9;
	border-width: 2px;
	box-shadow: 0 4px 16px rgba(14, 165, 233, 0.15);
}

.pricing-card__label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.pricing-card__label .pack {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
	font-weight: 700;
}

.pricing-card__label .rec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 8px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	font-weight: 700;
	color: #0ea5e9;
	font-size: 0.8125rem;
}

.pricing-card h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
}

.pricing-card__price { margin: 8px 0 0; }

.pricing-card__price .amount {
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.02em;
}

.pricing-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	color: #475569;
	font-size: 0.9375rem;
}

.pricing-card__features li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	line-height: 1.6;
}

.pricing-card__features i { color: #0ea5e9; margin-top: 3px; font-size: 0.875rem; }

.pricing-card__cta { margin-top: auto; }

.btn.is-disabled {
	opacity: 0.6;
	pointer-events: none;
}


.footer-bottom { 
	margin-top: 32px; 
	border-top: 1px solid rgba(255,255,255,0.15); 
	padding-top: 24px; 
	color: rgba(255,255,255,0.65); 
	font-size: 0.9rem; 
	text-align: center; 
}

@media (min-width: 768px) {
	.footer-bottom { 
		margin-top: 40px; 
		padding-top: 28px; 
		text-align: left; 
	}
}

/* Flash messages - Mobile First */
.flash-messages {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	width: min(420px, calc(100% - 32px));
	z-index: 1000;
	display: grid;
	gap: 10px;
}

/* Toast notifications (Flash messages) ----------------------------------- */
.toast-container {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	width: min(520px, calc(100% - 24px));
	z-index: 9999;
	display: grid;
	gap: 10px;
	pointer-events: none;
}

@media (min-width: 768px) {
	.toast-container {
		bottom: 24px;
	}
}

.toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid rgba(16, 24, 40, 0.12);
	box-shadow: 0 18px 55px rgba(15, 23, 42, 0.22);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	font-size: 1rem;
	line-height: 1.45;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity var(--transition-medium) ease, transform var(--transition-medium) ease;
	position: relative;
}

.toast.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.toast.is-hiding {
	opacity: 0;
	transform: translateY(12px) scale(0.98);
}

.toast__icon {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	margin-top: 1px;
	font-size: 1.1rem;
}

.toast__body {
	flex: 1 1 auto;
	color: var(--color-text);
	padding-top: 2px;
}

.toast__close {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	border: 1px solid rgba(16, 24, 40, 0.12);
	background: rgba(255, 255, 255, 0.7);
	color: var(--color-muted);
	font-size: 1.4rem;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.toast__close:focus {
	outline: none;
	box-shadow: var(--focus-ring);
}

.toast__close:hover {
	color: var(--color-text);
	background: rgba(255, 255, 255, 0.95);
}

/* Semantic colors */
.toast--success { border-color: rgba(12, 143, 99, 0.35); }
.toast--success .toast__icon { background: rgba(12, 143, 99, 0.12); color: var(--color-success); }

.toast--danger { border-color: rgba(217, 45, 32, 0.35); }
.toast--danger .toast__icon { background: rgba(217, 45, 32, 0.12); color: var(--color-danger); }

.toast--warning { border-color: rgba(246, 183, 86, 0.45); }
.toast--warning .toast__icon { background: rgba(246, 183, 86, 0.22); color: #b45309; }

.toast--info { border-color: rgba(31, 76, 228, 0.28); }
.toast--info .toast__icon { background: rgba(31, 76, 228, 0.12); color: var(--color-primary); }

@media (min-width: 640px) {
	.flash-messages {
		left: auto;
		right: 24px;
		transform: none;
	}
}

.alert {
	background: var(--color-surface);
	padding: 16px 20px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	font-size: 0.95rem;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid rgba(38,24,10,0.08);
}

.alert__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(214,102,61,0.1);
	display: grid;
	place-items: center;
	font-size: 1.1rem;
}

.alert__body p {
	margin: 4px 0 0;
	color: var(--color-text);
}

.alert-success { border-color: rgba(47,141,87,0.3); }
.alert-success .alert__icon { background: rgba(47,141,87,0.15); color: var(--color-success); }

.alert-danger, .alert-error { border-color: rgba(196,69,69,0.3); }
.alert-danger .alert__icon,
.alert-error .alert__icon { background: rgba(196,69,69,0.15); color: #c44545; }

.alert-warning { border-color: rgba(246,183,86,0.4); }
.alert-warning .alert__icon { background: rgba(246,183,86,0.2); color: var(--color-accent); }

.alert-info { border-color: rgba(30,95,91,0.25); }
.alert-info .alert__icon { background: rgba(30,95,91,0.14); color: var(--color-secondary); }

/* Forms - Mobile First */
.form-section { 
	border: 1px solid var(--color-border); 
	border-radius: var(--radius-md); 
	padding: 20px 16px; 
	margin: 16px 0; 
	background: var(--color-surface); 
	box-shadow: var(--shadow-sm); 
}

@media (min-width: 768px) {
	.form-section { padding: 24px; margin: 20px 0; }
}

.form-section legend { 
	font-weight: 600; 
	padding: 0 8px; 
	font-size: 1rem;
}

@media (min-width: 768px) {
	.form-section legend { font-size: 1.1rem; }
}

.form-grid { 
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 16px; 
}

@media (min-width: 768px) {
	.form-grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
}

.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-weight: 500; font-size: 0.9rem; color: var(--color-text); }
.form-field--full { grid-column: 1 / -1; }

.form-actions { 
	display: flex; 
	flex-direction: column; 
	gap: 12px; 
	margin-top: 20px;
}

@media (min-width: 640px) {
	.form-actions { flex-direction: row; align-items: center; gap: 16px; }
}

.help { color: var(--color-soft); font-size: 0.85rem; line-height: 1.4; margin-top: 4px; }

.form-errors { 
	border: 1px solid rgba(223,161,95,0.5); 
	border-radius: var(--radius-sm); 
	background: rgba(223,161,95,0.08); 
	padding: 14px; 
	margin-bottom: 16px; 
	font-size: 0.9rem;
}

@media (min-width: 768px) {
	.form-errors { padding: 16px; margin-bottom: 18px; }
}

.form-errors ul { margin: 8px 0 0; padding-left: 20px; }
.form-errors li { margin: 4px 0; }

.form-note { margin: 0; font-size: 0.9rem; color: var(--color-muted); }

.form-toggle { 
	display: flex; 
	gap: 10px; 
	align-items: center; 
	min-height: 48px;
	cursor: pointer;
}

.form-toggle input[type="checkbox"] {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.form-submit { margin-top: 8px; }
.form-submit .btn { width: 100%; }

@media (min-width: 640px) {
	.form-submit .btn { width: auto; min-width: 180px; }
}

input[type="file"] {
	padding: 10px;
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
	cursor: pointer;
	font-size: 0.9rem;
}

/* Admin - Mobile First */
.admin-shell { 
	padding-bottom: 32px;
	background: var(--admin-bg-primary);
	min-height: 100vh;
}

.admin-motivation {
	margin: 18px 0 24px;
	padding: 16px 18px;
	border-radius: 16px;
	border: 1px solid rgba(79, 70, 229, 0.18);
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(16, 185, 129, 0.12));
	box-shadow: 0 14px 30px rgba(37, 99, 235, 0.08);
	display: grid;
	gap: 8px;
}

.admin-motivation__badge {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #4338ca;
}

.admin-motivation__quote {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-text);
}

@media (min-width: 768px) {
	.admin-motivation { padding: 18px 22px; }
	.admin-motivation__quote { font-size: 1.05rem; }
}

@media (min-width: 768px) {
	.admin-shell { padding-bottom: 48px; }
}

.admin-metrics { 
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 14px; 
	margin: 24px 0; 
}

@media (min-width: 480px) {
	.admin-metrics { grid-template-columns: repeat(2,1fr); }
}

@media (min-width: 1024px) {
	.admin-metrics { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 18px; margin: 32px 0; }
}

.admin-metrics article { 
	background: var(--admin-bg-card); 
	padding: 18px; 
	border-radius: 10px; 
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	border: 1px solid var(--admin-border);
}

@media (min-width: 768px) {
	.admin-metrics article { padding: 20px; }
}

.admin-metrics strong { font-size: 1.6rem; display: block; margin: 8px 0; }

@media (min-width: 768px) {
	.admin-metrics strong { font-size: 1.8rem; }
}

.admin-metrics p { margin: 0; font-size: 0.9rem; color: var(--color-muted); }
.admin-metrics span { font-size: 0.85rem; color: var(--color-soft); display: block; margin-top: 4px; }

.admin-panel { 
	background: var(--color-surface); 
	border-radius: var(--radius-md); 
	box-shadow: var(--shadow-sm); 
	padding: 20px 16px; 
	margin: 20px 0;
	border: 1px solid rgba(16,24,40,0.1);
}

.admin-panel label,
.admin-panel h2,
.admin-panel p,
.admin-form label {
	color: var(--color-text);
}

.admin-panel input,
.admin-panel select,
.admin-panel textarea,
.admin-form input,
.admin-form select,
.admin-form textarea {
	background: #ffffff;
	color: var(--color-text);
	border: 1px solid rgba(16,24,40,0.2);
	box-shadow: none;
}

.admin-table {
	border: 1px solid rgba(16,24,40,0.12);
}

.admin-table th,
.admin-table td {
	border-color: rgba(16,24,40,0.12);
}

@media (min-width: 768px) {
	.admin-panel { padding: 24px; }
}

.admin-split { 
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 20px; 
}

@media (min-width: 1024px) {
	.admin-split { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 24px; }
}

.admin-panel__head { 
	display: flex; 
	flex-direction: column;
	gap: 12px; 
	margin-bottom: 16px;
}
.admin-header--hero {
	padding: clamp(24px, 4vw, 36px);
	border-radius: 20px;
	background: radial-gradient(circle at 15% 20%, rgba(84, 140, 255, 0.18), transparent 40%),
		linear-gradient(135deg, #0b1633 0%, #1c2b57 55%, #0b6f6a 100%);
	color: #fff;
	box-shadow: 0 18px 40px rgba(6, 14, 32, 0.35);
}
.admin-header--hero .admin-title,
.admin-header--hero .admin-subtitle,
.admin-header--hero .admin-eyebrow {
	color: #fff;
}
.admin-header__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
	font-size: 0.9rem;
}
.admin-header__badges span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(6px);
}
.admin-quick-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 24px 0 12px;
}
.admin-quick-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	padding: 16px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--color-border);
	box-shadow: 0 12px 30px rgba(15, 30, 60, 0.08);
}
.admin-quick-card i {
	color: #4a6cf7;
	font-size: 1.2rem;
	margin-top: 2px;
}
.admin-quick-card h3 {
	margin: 0 0 6px;
	font-size: 1rem;
}
.admin-quick-card p {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.9rem;
}

.admin-meta-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin: 18px 0 8px;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(17, 94, 89, 0.14));
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 14px;
	padding: 12px;
	box-shadow: 0 14px 32px rgba(11, 22, 51, 0.1);
}

.admin-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.9rem;
	border: 1px solid rgba(16, 24, 40, 0.08);
	backdrop-filter: blur(6px);
}

.admin-meta-pill--draft { border-color: rgba(59, 130, 246, 0.4); color: #1d4ed8; }
.admin-meta-pill--tip { border-color: rgba(16, 185, 129, 0.35); color: #047857; }
.admin-meta-pill--muted { background: rgba(255, 255, 255, 0.7); color: var(--color-soft); }

.admin-meta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.admin-meta-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--admin-blue);
	text-decoration: none;
	border: 1px solid rgba(59, 130, 246, 0.35);
	font-weight: 600;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-meta-link:hover,
.admin-meta-link:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(59, 130, 246, 0.18);
}

@media (min-width: 640px) {
	.admin-panel__head { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

.admin-panel__head h2 { margin: 0; font-size: 1.2rem; }

@media (min-width: 768px) {
	.admin-panel__head h2 { font-size: 1.4rem; }
}

.admin-list { 
	list-style: none; 
	padding: 0; 
	margin: 12px 0 0; 
	display: flex; 
	flex-direction: column; 
	gap: 12px; 
}

.admin-list li { 
	display: flex; 
	flex-direction: column;
	gap: 8px; 
	border-bottom: 1px solid var(--color-border); 
	padding-bottom: 12px; 
}

@media (min-width: 640px) {
	.admin-list li { flex-direction: row; justify-content: space-between; gap: 12px; }
}

.admin-list__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.admin-table { 
	overflow-x: auto; 
	-webkit-overflow-scrolling: touch;
	margin: 16px 0;
}

.admin-table table { 
	background: var(--color-surface); 
	border-radius: var(--radius-md); 
	overflow: hidden; 
	box-shadow: var(--shadow-sm); 
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
}

.admin-table table th, .admin-table table td { 
	padding: 12px; 
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.9rem;
}

@media (min-width: 768px) {
	.admin-table table th, .admin-table table td { padding: 14px; font-size: 0.95rem; }
}

@media (min-width: 1024px) {
	.admin-table table th, .admin-table table td { padding: 16px; }
}

.admin-table table th { 
	background: var(--color-surface-alt); 
	font-weight: 600; 
	color: var(--color-text);
	white-space: nowrap;
}

.admin-table table tr:last-child td { border-bottom: none; }

.admin-table__actions { 
	display: flex; 
	gap: 8px; 
	flex-wrap: wrap;
	align-items: center;
}

@media (min-width: 768px) {
	.admin-table__actions { gap: 12px; }
}

.admin-table__actions .btn { padding: 8px 12px; min-height: 36px; font-size: 0.85rem; }

@media (min-width: 768px) {
	.admin-table__actions .btn { padding: 10px 14px; min-height: auto; font-size: 0.9rem; }
}

.admin-table form { display: inline; }
.admin-table .muted { font-size: 0.85rem; margin-top: 2px; display: block; }

.admin-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 16px 0 20px;
}

.admin-stats article {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	padding: 16px;
}

.admin-stats__label { margin: 0; font-size: 0.8rem; color: var(--color-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.admin-stats__value { margin: 6px 0 0; font-size: 1.6rem; font-weight: 600; }

.admin-filter-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 16px;
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.admin-filter-card { padding: 20px 24px; }
}

.admin-filter-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}

.admin-filter-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; color: var(--color-muted); }
.admin-filter-form input,
.admin-filter-form select {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	background: var(--color-surface-alt);
	font-size: 0.95rem;
}

.admin-filter-actions { display: flex; gap: 10px; align-items: flex-end; }

.admin-quick-tools {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 16px;
	margin-bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

@media (min-width: 768px) {
	.admin-quick-tools { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}

.admin-quick-tools__left {
	display: grid;
	gap: 8px;
}

.admin-quick-tools__search,
.admin-quick-tools__sort {
	display: grid;
	gap: 6px;
	font-size: 0.82rem;
	color: var(--color-muted);
}

.admin-quick-tools input,
.admin-quick-tools select {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	background: var(--color-surface-alt);
}

.admin-quick-tools__meta {
	font-size: 0.85rem;
	color: var(--color-muted);
}

.admin-quick-tools__right {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.admin-table__select { width: 40px; }

.admin-toolbar {
	position: sticky;
	top: calc(var(--header-height, 0px) + 8px);
	background: var(--admin-bg-card);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	border: 1px solid var(--admin-border);
	padding: 12px;
	margin: 16px 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	z-index: 2;
}

.admin-toolkit {
	background: var(--admin-bg-card);
	border-radius: 12px;
	padding: 24px;
	border: 1px solid var(--admin-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	margin-bottom: 32px;
}

.admin-toolkit__header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.admin-toolkit__eyebrow {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--admin-text-muted);
	margin: 0 0 6px;
}

.admin-toolkit__title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--admin-text-dark);
	letter-spacing: -0.01em;
}

.admin-toolkit__subtitle {
	margin: 6px 0 0;
	color: var(--admin-text-body);
	line-height: 1.5;
}

.admin-toolkit__helper {
	background: var(--admin-blue-bg);
	border-radius: 8px;
	padding: 12px 14px;
	color: var(--admin-text-dark);
	font-weight: 500;
	border: 1px solid rgba(37, 99, 235, 0.2);
	font-size: 0.9rem;
}

.admin-toolkit__helper span { color: var(--admin-blue); font-weight: 600; margin-right: 6px; }

.admin-toolkit__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

.admin-tool-card {
	background: var(--admin-bg-card);
	border-radius: 10px;
	border: 1px solid var(--admin-border);
	padding: 18px;
	display: grid;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.admin-tool-card:hover,
.admin-tool-card:focus-visible {
	transform: translateY(-2px);
	border-color: var(--admin-blue);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.admin-tool-card__icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F3F4F6;
	font-size: 1.25rem;
}

.admin-tool-card__content h3 {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--admin-text-dark);
}

.admin-tool-card__content p {
	margin: 0;
	color: var(--admin-text-body);
	font-size: 0.875rem;
	line-height: 1.5;
}

.admin-tool-card__meta {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--admin-text-muted);
}

.admin-tool-card--primary {
	background: linear-gradient(135deg, var(--admin-blue) 0%, var(--admin-blue-dark) 100%);
	color: #fff;
	border: none;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.admin-tool-card--primary:hover {
	box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.admin-tool-card--primary .admin-tool-card__icon {
	background: rgba(255, 255, 255, 0.2);
}

.admin-tool-card--primary .admin-tool-card__content h3 {
	color: white;
}

.admin-tool-card--primary .admin-tool-card__content p,
.admin-tool-card--primary .admin-tool-card__meta {
	color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
	.admin-toolkit { padding: 26px; }
	.admin-toolkit__header { flex-direction: row; justify-content: space-between; align-items: center; }
	.admin-toolkit__helper { max-width: 260px; }
}

.admin-actions__inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.admin-actions__menu { position: relative; display: none; }

.action-menu__toggle {
	border: 1px solid var(--color-border);
	background: var(--color-surface-alt);
	border-radius: var(--radius-sm);
	min-width: 36px;
	min-height: 36px;
	font-size: 1.1rem;
}

.action-menu__panel {
	position: absolute;
	right: 0;
	margin-top: 6px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	min-width: 180px;
	padding: 6px;
	display: none;
	flex-direction: column;
	z-index: 10;
}

.action-menu__panel.is-open { display: flex; }

.action-menu__item {
	border: none;
	background: transparent;
	text-align: left;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	color: var(--color-text);
	cursor: pointer;
}

.action-menu__item:hover,
.action-menu__item:focus-visible {
	background: var(--color-surface-alt);
}

.action-menu__item--danger { color: var(--color-danger, #b42318); }

@media (max-width: 900px) {
	.admin-actions__inline { display: none; }
	.admin-actions__menu { display: block; }
}

.admin-preview {
	border: none;
	border-radius: var(--radius-lg);
	padding: 0;
	max-width: 520px;
	width: min(90vw, 520px);
	box-shadow: var(--shadow-lg);
}

.admin-preview::backdrop { background: rgba(15, 23, 42, 0.45); }

.admin-preview__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 20px 0;
}

.admin-preview__body {
	padding: 12px 20px 20px;
	display: grid;
	gap: 16px;
}

.admin-preview__meta p { margin: 0 0 6px; color: var(--color-muted); }
.admin-preview__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.admin-health {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.admin-health li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
}

.admin-health li strong { font-weight: 600; }

.admin-health li.is-ok strong { color: #027a48; }
.admin-health li.is-warn strong { color: #b54708; }

@media print {
	.admin-header,
	.admin-toolbar,
	.admin-filter-card,
	.admin-quick-tools,
	.pagination,
	.admin-table__actions,
	.btn,
	.btn-admin {
		display: none !important;
	}

	.admin-table table { min-width: auto; }
}

.visitor-metrics {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 24px 0;
}

@media (min-width: 640px) {
	.visitor-metrics { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

.visitor-card {
	background: var(--admin-bg-card);
	border-radius: 10px;
	border: 1px solid var(--admin-border);
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	transition: all 0.2s ease;
}

.visitor-card--primary { 
	border-color: var(--admin-blue);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.visitor-card--accent { 
	border-color: var(--admin-green);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.visitor-card__label {
	margin: 0 0 8px;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--admin-text-muted);
	font-weight: 600;
}

.visitor-card__value {
	font-size: 2rem;
	margin: 8px 0 6px;
	font-weight: 700;
	color: var(--admin-text-dark);
}

.visitor-card__note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--admin-text-body);
	line-height: 1.5;
}

.visitors-table .visitor-note {
	margin: 4px 0 0;
	font-size: 0.82rem;
	color: var(--color-soft);
}

.visitors-table .visitor-identity strong { font-size: 1rem; }


.visitors-table .visitor-page {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 0.9rem;
	background: var(--color-surface-alt);
	padding: 4px 8px;
	border-radius: var(--radius-sm);
}

.visitors-date-row td {
	background: var(--color-surface-alt);
	border-bottom: none;
}

.visitors-date {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: space-between;
	align-items: flex-start;
}

@media (min-width: 640px) {
	.visitors-date { flex-direction: row; align-items: center; }
}

.visitors-empty {
	padding: 32px;
	text-align: center;
	color: var(--color-muted);
	background: var(--color-surface);
	border-radius: var(--radius-md);
	border: 1px dashed var(--color-border);
}

/* Admin visitors: filters + insights */
.visitors-tools {
	width: 100%;
	display: grid;
	gap: 12px;
	margin-top: 12px;
}

.visitors-filters {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px;
	box-shadow: var(--shadow-sm);
}

.visitors-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.visitors-filters__row--bottom {
	margin-top: 10px;
}

.field {
	display: grid;
	gap: 6px;
	min-width: 140px;
}

.field--grow {
	flex: 1 1 240px;
}

.field--compact {
	min-width: 140px;
}

.field__label {
	font-size: 0.82rem;
	color: var(--color-soft);
	letter-spacing: 0.02em;
}

.field__input {
	width: 100%;
	min-height: 40px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
}

.field__input:focus {
	outline: none;
	border-color: rgba(59,130,246,0.55);
	box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

.visitors-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-left: auto;
}

.visitors-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.visitors-insights {
	margin-top: 14px;
}

.visitors-insights__card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px;
	box-shadow: var(--shadow-sm);
}

.visitors-insights__title {
	margin: 0;
	font-size: 1rem;
}

.visitors-top-pages {
	margin: 10px 0 0;
	padding-left: 18px;
	display: grid;
	gap: 8px;
}

.visitors-top-pages li {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
}

.visitors-top-pages__link {
	color: var(--color-text);
	text-decoration: none;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 0.92rem;
	overflow-wrap: anywhere;
}

.visitors-top-pages__link:hover {
	text-decoration: underline;
}

.visitors-ip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.visitors-ip__text {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 0.92rem;
}

.visitors-ip__copy {
	padding: 6px 10px;
	min-height: 32px;
}

/* Admin analytics: IP card explorer (mobile-first) */
.ip-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}

.ip-filters__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.ip-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 720px) {
	.ip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
	.ip-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ip-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px;
	box-shadow: var(--shadow-sm);
	display: grid;
	gap: 12px;
}

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

.ip-card__identity { display: grid; gap: 4px; }

.ip-card__ip {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.ip-card__ip-text { font-weight: 700; }

.ip-card__copy {
	padding: 6px 10px;
	min-height: 32px;
}

.ip-card__country {
	display: flex;
	gap: 6px;
	align-items: center;
	color: var(--color-muted);
	font-size: 0.9rem;
	overflow-wrap: anywhere;
}

.ip-card__flag { font-size: 1.1rem; }
.ip-card__country-code { opacity: 0.7; }

.ip-card__badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.ip-card__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 520px) {
	.ip-card__stats { grid-template-columns: 1fr; }
}

.ip-stat {
	padding: 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
}

.ip-stat__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-soft);
}

.ip-stat__value {
	display: block;
	margin-top: 6px;
	font-weight: 700;
}

.ip-card__pages-title {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
}

.ip-pages {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.ip-page {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: flex-start;
	padding: 8px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #fff;
}

.ip-page--system { opacity: 0.75; }

.ip-page__path {
	overflow-wrap: anywhere;
}

.ip-page__meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
}

.ip-card__hint {
	margin: 8px 0 0;
	font-size: 0.82rem;
	color: var(--color-soft);
	overflow-wrap: anywhere;
}

.ip-card__details summary {
	cursor: pointer;
	color: var(--color-primary);
	font-weight: 600;
}

.ip-card__details-body {
	margin-top: 10px;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
}

.ip-card__details-body p { margin: 0 0 8px; }
.ip-card__details-body p:last-child { margin-bottom: 0; }

[data-mono] {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (max-width: 680px) {
	.visitors-filters__actions { width: 100%; margin-left: 0; }
	.visitors-filters__actions .btn-admin { flex: 1 1 auto; justify-content: center; }
}

/* Visitors table: mobile card layout */
@media (max-width: 860px) {
	.visitors-table thead { display: none; }
	.visitors-table,
	.visitors-table tbody,
	.visitors-table tr,
	.visitors-table td { display: block; width: 100%; }

	.visitors-table tr {
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: 12px;
		margin: 10px 0;
		box-shadow: var(--shadow-sm);
	}

	.visitors-table tr.visitors-date-row {
		background: transparent;
		border: none;
		padding: 0;
		margin: 18px 0 6px;
		box-shadow: none;
	}

	.visitors-date-row td {
		background: transparent;
		border: none;
		padding: 0;
	}

	.visitors-table td {
		border: none;
		padding: 8px 0;
		display: flex;
		gap: 12px;
		justify-content: space-between;
		align-items: flex-start;
	}

	.visitors-table td::before {
		content: attr(data-label);
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--color-soft);
		padding-top: 2px;
		flex: 0 0 92px;
	}

	.visitors-table td[data-label="Visitor"] {
		display: block;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--color-border);
	}

	.visitors-table td[data-label="Visitor"]::before {
		content: "";
		display: none;
	}
}

.admin-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	flex-wrap: wrap;
	gap: 10px;
}

.admin-pagination__status { font-size: 0.9rem; color: var(--color-muted); }

.admin-pagination .is-disabled { opacity: 0.5; pointer-events: none; }

.plan-ref { display: flex; gap: 12px; align-items: center; }
.plan-ref__code,
.plan-card__ref {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-soft);
	font-weight: 600;
}

.plan-card__price--stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.pack-stack,
.delivery-stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pack-stack strong { font-size: 0.95rem; }
.delivery-stack .badge { width: fit-content; }

.plan-meta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.plan-card__tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
	margin: 16px 0 8px;
}

@media (min-width: 768px) {
	.plan-card__tiers { gap: 10px; }
}

.plan-card__tiers--inline {
	grid-template-columns: repeat(auto-fit, minmax(140px, auto));
}

.plan-card__tier {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.85rem;
	font-weight: 600;
}

@media (min-width: 768px) {
	.plan-card__tier { padding: 10px 12px; font-size: 0.9rem; }
}

.plan-card__tier span:last-child { color: var(--color-primary); }

.plan-card__tier--muted {
	opacity: 0.6;
	color: var(--color-muted);
}

.plan-card__tier--muted span:last-child { color: inherit; }

.plan-tier-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 20px 0;
}

@media (min-width: 768px) {
	.plan-tier-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
}

.plan-tier {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	border: 1px solid rgba(15,23,42,0.08);
	box-shadow: var(--shadow-sm);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.plan-tier__price { font-size: 1.3rem; margin: 8px 0; font-weight: 600; }
.plan-tier footer .btn { width: 100%; }

.plan-overview {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 36px;
	padding: 28px;
	border-radius: 28px;
	background: linear-gradient(135deg, #0d152e 0%, #13203f 55%, #1f3572 100%);
	color: #f8fafc;
	box-shadow: var(--shadow-elevated);
	overflow: hidden;
}

.plan-overview::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.25), transparent 45%),
		radial-gradient(circle at 80% 0%, rgba(77,235,255,0.35), transparent 40%);
	opacity: 0.65;
	pointer-events: none;
}

.plan-overview > * { position: relative; z-index: 1; }

@media (min-width: 768px) {
	.plan-overview {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: 36px;
		padding: 40px;
	}
}

.plan-overview__summary h2 { color: #fff; }

.plan-overview__summary .lead {
	color: rgba(248,250,252,0.85);
	max-width: 48ch;
}

.plan-keynotes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 20px;
}

@media (min-width: 640px) {
	.plan-keynotes { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.plan-keynotes div {
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 16px;
	padding: 16px;
	background: rgba(13,21,46,0.6);
	backdrop-filter: blur(10px);
	position: relative;
	padding-left: 40px;
}

.plan-keynotes div::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 18px;
	width: 14px;
	height: 14px;
	background: rgba(248,250,252,0.9);
	-webkit-mask: var(--icon-arrow) no-repeat center / contain;
	mask: var(--icon-arrow) no-repeat center / contain;
}

.plan-keynotes__label {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(248,250,252,0.7);
	margin-bottom: 6px;
}

.plan-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
}

@media (min-width: 480px) {
	.plan-facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

.plan-facts div {
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 18px;
	padding: 16px 18px;
	background: rgba(15,25,50,0.7);
	backdrop-filter: blur(8px);
}

.plan-facts dt {
	font-size: 0.7rem;
	text-transform: uppercase;
	color: rgba(248,250,252,0.65);
	letter-spacing: 0.08em;
	margin: 0 0 8px;
}

.plan-facts dd {
	margin: 0;
	font-weight: 600;
	font-size: 1rem;
	color: #fff;
}

.pack-comparison {
	margin: 40px 0;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
	.pack-comparison { padding: 32px; }
}

.pack-comparison__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.pack-comparison__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
}

.pack-comparison__card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 18px;
	background: var(--color-surface-alt);
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: var(--shadow-ring);
}

@media (min-width: 768px) {
	.pack-comparison__card { padding: 22px; }
}

.pack-comparison__card.is-highlight {
	background: radial-gradient(circle at top, rgba(223,161,95,0.18), rgba(255,255,255,0.9));
	border-color: rgba(223,161,95,0.5);
}

.pack-comparison__card header h3 { margin: 0; }
.pack-comparison__card header .eyebrow { margin-bottom: 6px; }
.pack-comparison__card header p:not(.eyebrow) {
	margin: 0;
	font-size: 0.85rem;
	color: var(--color-muted);
	overflow-wrap: anywhere;
}

.pack-comparison__cta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pack-comparison__cta .btn { width: 100%; }

.pack-help {
	margin: 4px 0 0;
	font-size: 0.85rem;
	color: var(--color-muted);
}

.admin-reference-card {
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	padding: 18px;
	background: var(--color-surface);
	box-shadow: var(--shadow-ring);
	margin-bottom: 24px;
}

.admin-reference-card h2 { margin: 6px 0 4px; font-size: 1.4rem; }

.contact-shell {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 24px;
}

@media (min-width: 960px) {
	.contact-shell { flex-direction: row; padding: 32px; }
}

.contact-intro { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.contact-highlights { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-highlights strong { color: var(--color-text); }

.contact-ref-list { background: var(--color-surface-alt); border-radius: var(--radius-sm); padding: 12px; }
.contact-ref-list ul { margin: 8px 0 0; padding-left: 18px; color: var(--color-muted); }

.contact-form-card { flex: 1; background: var(--color-surface-alt); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }

@media (min-width: 640px) {
	.contact-form-card { padding: 24px; }
}

.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--color-muted); }
.contact-form .form-input,
.contact-form .form-select,
.contact-form .form-textarea,
.contact-form .form-file {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 12px;
	background: #fff;
}

.contact-form .form-textarea { resize: vertical; min-height: 140px; }
.form-grid { display: grid; gap: 12px; }
.form-grid--2 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
	.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

.form-error { color: #d14343; font-size: 0.8rem; }
.upload-field input[type="file"] { border-style: dashed; background: rgba(17,29,74,0.03); }

.contact-form .form-checkbox { display: flex; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--color-muted); }
.contact-form .form-checkbox input { width: 18px; height: 18px; }

.admin-actions { 
	display: flex; 
	flex-direction: column;
	gap: 10px; 
	align-items: stretch; 
}

@media (min-width: 640px) {
	.admin-actions { flex-direction: row; gap: 12px; align-items: center; }
}

.admin-actions .btn { width: 100%; }

@media (min-width: 640px) {
	.admin-actions .btn { width: auto; }
}

/* Utilities - Mobile First */
.muted { color: var(--color-muted); font-size: 0.9rem; }

.link { 
	border: 0; 
	background: none; 
	color: var(--color-primary); 
	font-weight: 600; 
	cursor: pointer; 
	padding: 8px; 
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

@media (min-width: 768px) {
	.link { padding: 0; min-height: auto; }
}

.section-cta {
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: #ffffff;
	border: 1px solid rgba(16,24,40,0.08);
	border-radius: var(--radius-lg);
	padding: 28px;
	box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
	.section-cta { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
}

@media (min-width: 1024px) {
	.section-cta { padding: 40px; }
}

.section-cta h2 { font-size: 1.6rem; margin: 0; }

@media (min-width: 768px) {
	.section-cta h2 { font-size: 1.9rem; }
}

.section-cta__actions { 
	display: flex; 
	flex-direction: column;
	gap: 10px; 
	width: 100%;
}

@media (min-width: 640px) {
	.section-cta__actions { flex-direction: row; gap: 12px; flex-wrap: wrap; width: auto; }
}

.section-cta__actions .btn { width: 100%; }

@media (min-width: 640px) {
	.section-cta__actions .btn { width: auto; }
}

.value-grid { 
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 24px; 
	padding: 0;
}

@media (min-width: 640px) {
	.value-grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 28px; }
}

@media (min-width: 1024px) {
	.value-grid { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 32px; }
}

.value-grid--three { grid-template-columns: 1fr; }

@media (min-width: 768px) {
	.value-grid--three { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
}

@media (min-width: 1024px) {
	.value-grid--three { grid-template-columns: repeat(3, 1fr); }
}

.value-card { 
	padding: 32px 24px; 
	border-radius: var(--radius-lg); 
	background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(253,250,247,0.98));
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.value-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--gradient-primary);
	opacity: 0;
	transition: opacity var(--transition-medium) ease;
	z-index: 0;
}

.value-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-elevated);
	border-color: transparent;
}

.value-card:hover::before {
	opacity: 0.05;
}

.value-card > * {
	position: relative;
	z-index: 1;
}

.value-card__icon {
	font-size: 2.5rem;
	margin-bottom: 16px;
	display: block;
	line-height: 1;
}

@media (min-width: 768px) {
	.value-card { padding: 36px 28px; }
	.value-card__icon { font-size: 2.8rem; margin-bottom: 20px; }
}

.value-card h3 { 
	font-size: 1.25rem; 
	margin: 0 0 12px; 
	color: var(--color-text);
	font-weight: 700;
}

@media (min-width: 768px) {
	.value-card h3 { font-size: 1.35rem; margin-bottom: 14px; }
}

.value-card p { 
	margin: 0; 
	font-size: 1rem; 
	line-height: 1.7; 
	color: var(--color-muted); 
}

/* Legacy value-grid article support */
.value-grid article:not(.value-card) { 
	padding: 24px; 
	border-radius: var(--radius-md); 
	background: rgba(232,115,77,0.06); 
	border: 1px solid var(--color-border);
	transition: all var(--transition-fast) ease;
}

.value-grid article:not(.value-card):hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
	.value-grid article:not(.value-card) { padding: 28px; }
}

.value-grid article h3 { font-size: 1.15rem; margin: 0 0 12px; }

@media (min-width: 768px) {
	.value-grid article h3 { font-size: 1.25rem; }
}

.value-grid article p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--color-muted); }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.empty-state {
	padding: 40px 20px;
	text-align: center;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
	.empty-state { padding: 60px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Responsive helpers */
.hide-mobile { display: none; }

@media (min-width: 768px) {
	.hide-mobile { display: block; }
}

.show-mobile { display: block; }

@media (min-width: 768px) {
	.show-mobile { display: none; }
}

/* ========================================
   PREMIUM ADMIN PANEL STYLES
   ======================================== */

/* Admin Variables */
:root {
	--admin-blue: #2563EB;
	--admin-blue-dark: #1E40AF;
	--admin-blue-light: #60a5fa;
	--admin-blue-bg: #EFF6FF;
	--admin-green: #10b981;
	--admin-green-light: #34d399;
	--admin-green-bg: #ecfdf5;
	--admin-purple: #8b5cf6;
	--admin-purple-light: #a78bfa;
	--admin-purple-bg: #f5f3ff;
	--admin-orange: #f59e0b;
	--admin-orange-light: #fbbf24;
	--admin-orange-bg: #fffbeb;
	--admin-red: #ef4444;
	--admin-red-light: #f87171;
	--admin-red-bg: #fef2f2;
	--admin-text-dark: #1F2937;
	--admin-text-body: #4B5563;
	--admin-text-muted: #6B7280;
	--admin-bg-primary: #F8F9FB;
	--admin-bg-card: #FFFFFF;
	--admin-border: #E5E7EB;
}

/* Admin Header */
.admin-header {
	background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
	border-radius: 16px;
	padding: 32px;
	margin-bottom: 32px;
	color: white;
	box-shadow: 0 4px 24px rgba(37, 99, 235, 0.20);
}

.admin-header__content {
	margin-bottom: 24px;
}

.admin-header--form .admin-header__content {
	margin-bottom: 0;
}

.admin-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.95;
	margin-bottom: 8px;
}

.admin-title {
	font-size: 2rem;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.admin-subtitle {
	font-size: 1.0625rem;
	opacity: 0.92;
	margin: 0;
	line-height: 1.6;
}

.admin-header__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.admin-header {
		padding: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.admin-header__content {
		margin-bottom: 0;
		flex: 1;
	}
	
	.admin-title {
		font-size: 2.5rem;
	}
}

/* Admin Buttons */
.btn-admin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
}

.btn-admin__icon {
	font-size: 1.125rem;
}

.btn-admin--primary {
	background: white;
	color: var(--admin-blue);
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
	font-weight: 600;
}

.btn-admin--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
	color: var(--admin-blue-dark);
}

.btn-admin--secondary {
	background: rgba(255,255,255,0.15);
	color: white;
	border: 1px solid rgba(255,255,255,0.25);
}

.btn-admin--secondary:hover {
	background: rgba(255,255,255,0.25);
	border-color: rgba(255,255,255,0.35);
}

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

.btn-admin--ghost:hover {
	background: var(--admin-blue-bg);
	border-color: var(--admin-blue);
}

/* Metric Cards */
.admin-metrics {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 32px;
}

@media (min-width: 640px) {
	.admin-metrics {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.admin-metrics {
		grid-template-columns: repeat(4, 1fr);
	}
}

.metric-card {
	background: var(--admin-bg-card);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	transition: all 0.2s ease;
	border: 1px solid var(--admin-border);
}

.metric-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	border-color: var(--admin-blue);
}

.metric-card__icon {
	font-size: 2rem;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	flex-shrink: 0;
}

.metric-card--blue .metric-card__icon {
	background: var(--admin-blue-bg);
}

.metric-card--blue:hover {
	border-color: var(--admin-blue);
}

.metric-card--green .metric-card__icon {
	background: var(--admin-green-bg);
}

.metric-card--green:hover {
	border-color: var(--admin-green);
}

.metric-card--purple .metric-card__icon {
	background: var(--admin-purple-bg);
}

.metric-card--purple:hover {
	border-color: var(--admin-purple);
}

.metric-card--orange .metric-card__icon {
	background: var(--admin-orange-bg);
}

.metric-card--orange:hover {
	border-color: var(--admin-orange);
}

.metric-card--slate .metric-card__icon {
	background: #f1f5f9;
	color: #475569;
}

.metric-card--slate:hover {
	border-color: #475569;
}

.metric-card__content {
	flex: 1;
}

.metric-card__label {
	font-size: 0.875rem;
	color: var(--admin-text-muted);
	margin: 0 0 8px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.metric-card__value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--admin-text-dark);
	display: block;
	line-height: 1;
	margin-bottom: 6px;
}

.metric-card__meta {
	font-size: 0.8125rem;
	color: var(--admin-text-body);
}

/* Admin Panel */
.admin-panel {
	background: var(--admin-bg-card);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	border: 1px solid var(--admin-border);
	margin-bottom: 32px;
}

.admin-panel__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 24px;
	gap: 16px;
}

.admin-panel__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--admin-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 6px;
}

.admin-panel__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
	color: var(--admin-text-dark);
	letter-spacing: -0.01em;
}

.admin-panel__hint {
	margin: 8px 0 0;
	color: var(--admin-text-body);
	font-size: 0.9rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.admin-panel {
		padding: 32px;
	}
}

/* Admin Table */
.admin-table-wrapper {
	overflow-x: auto;
	margin: -12px -24px -24px;
}

@media (min-width: 768px) {
	.admin-table-wrapper {
		margin: 0 -32px -32px;
	}
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.admin-table thead {
	background: var(--color-bg);
}

.admin-table th {
	text-align: left;
	padding: 16px 24px;
	font-weight: 600;
	color: var(--color-muted);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.admin-table td {
	padding: 20px 24px;
	border-top: 1px solid var(--color-border);
	vertical-align: middle;
}

.admin-table tbody tr:hover {
	background: var(--color-surface-alt);
}

.plan-title {
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 4px;
}

.plan-category {
	font-size: 0.875rem;
	color: var(--color-muted);
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.status-badge--success {
	background: var(--admin-green-bg);
	color: var(--admin-green);
}

.status-badge--info {
	background: var(--admin-blue-bg);
	color: var(--admin-blue);
}

.status-badge--published {
	background: var(--admin-purple-bg);
	color: var(--admin-purple);
}

.status-badge--draft {
	background: var(--color-border);
	color: var(--color-muted);
}

.status-badge--neutral {
	background: transparent;
	color: var(--color-soft);
	padding: 0;
}

.admin-table__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.btn-action {
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-action--edit {
	background: var(--admin-blue-bg);
	color: var(--admin-blue);
}

.btn-action--edit:hover {
	background: var(--admin-blue);
	color: white;
}

.btn-action--delete {
	background: var(--admin-red-bg);
	color: var(--admin-red);
}

.btn-action--delete:hover {
	background: var(--admin-red);
	color: white;
}

.btn-action--toggle {
	background: var(--admin-orange-bg);
	color: var(--admin-orange);
}

.btn-action--toggle:hover {
	background: var(--admin-orange);
	color: white;
}

/* Inbox & Message Center */
.inbox-shell .admin-header {
	margin-bottom: 32px;
}

.inbox-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.inbox-count__label {
	font-size: 0.85rem;
	color: var(--color-muted);
	margin: 0 0 6px;
}

.inbox-count__value {
	font-size: 1.75rem;
	font-weight: 700;
}

.inbox-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
	align-items: end;
}

.inbox-filters label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--color-muted);
}

.inbox-filters select,
.inbox-filters input[type="search"] {
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid var(--color-border);
	font-size: 0.9375rem;
}

.inbox-filters__search {
	grid-column: span 2;
}

@media (max-width: 640px) {
	.inbox-filters__search {
		grid-column: span 1;
	}
}

.inbox-filters__actions {
	display: flex;
	gap: 12px;
	align-items: center;
}

.link-reset {
	color: var(--color-muted);
	text-decoration: underline;
	font-size: 0.9rem;
}

.message-legend {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.attachment-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--color-surface-alt);
	color: var(--color-muted);
}

.attachment-chip--accent {
	background: #eef2ff;
	color: #4338ca;
}

.inbox-table {
	width: 100%;
	border-collapse: collapse;
}

.inbox-table th,
.inbox-table td {
	padding: 16px 20px;
	border-bottom: 1px solid var(--color-border);
}

.inbox-table__subject a {
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
}

.inbox-table__subject p {
	color: var(--color-muted);
	margin: 6px 0 0;
	font-size: 0.85rem;
}

.inbox-flags {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.plan-snapshot {
	margin-top: 6px;
	font-size: 0.8rem;
	color: var(--color-muted);
}

.inbox-actions {
	white-space: nowrap;
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
}

.pagination__info {
	font-size: 0.9rem;
	color: var(--color-muted);
}

.btn-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.inbox-glance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.inbox-pill {
	background: var(--color-surface-alt);
	border-radius: 14px;
	padding: 16px;
}

.inbox-pill p {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.8rem;
}

.inbox-pill strong {
	font-size: 1.4rem;
}

.inbox-pill--primary {
	background: #eef2ff;
	color: #3730a3;
}

.inbox-pill--accent {
	background: #ecfdf5;
	color: #047857;
}

.inbox-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.inbox-list li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--color-border);
}

.inbox-subject {
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
}

.inbox-meta {
	margin: 6px 0 0;
	color: var(--color-muted);
	font-size: 0.85rem;
}

.inbox-status {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.inbox-empty {
	margin: 0;
	color: var(--color-muted);
	font-style: italic;
}

.message-shell .link-back {
	display: inline-flex;
	margin-bottom: 16px;
	color: var(--color-muted);
}

.message-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	.message-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
}

.message-recipient {
	margin: 4px 0 0;
	color: var(--color-muted);
}

.message-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.message-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.message-detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 960px) {
	.message-detail-grid {
		grid-template-columns: 2fr 1fr;
	}
}

.message-card,
.message-sidebar {
	background: white;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.message-card h2,
.message-sidebar h2,
.message-system h3 {
	margin-top: 0;
}

.message-body {
	background: var(--color-surface-alt);
	border-radius: 12px;
	padding: 20px;
	line-height: 1.6;
	color: var(--color-text);
}

.message-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin-top: 20px;
}

.message-meta dt {
	font-size: 0.8rem;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 4px;
}

.message-meta dd {
	margin: 0;
	font-weight: 600;
}

.message-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.message-system {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

.message-system ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.message-system li span {
	display: block;
	font-size: 0.8rem;
	color: var(--color-muted);
}

.message-system li strong {
	display: block;
	font-size: 1rem;
}

.message-note {
	margin: 4px 0 0;
	color: #d97706;
	font-size: 0.85rem;
}

/* Form Alert */
.form-alert {
	display: flex;
	gap: 16px;
	padding: 20px;
	border-radius: 12px;
	margin-bottom: 24px;
}

.form-alert--error {
	background: var(--admin-red-bg);
	border: 2px solid var(--admin-red-light);
}

.form-alert__icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.form-alert__title {
	font-weight: 700;
	color: var(--admin-red);
	margin: 0 0 8px;
}

.form-alert__list {
	margin: 0;
	padding-left: 20px;
	color: var(--admin-red);
}

.form-alert__list li {
	margin-bottom: 4px;
}

/* Form Cards */
.admin-form {
	max-width: 1000px;
}
.admin-form--add-plan {
	position: relative;
	overflow: visible;
}
.admin-form__layout {
	display: grid;
	gap: 24px;
	overflow: visible;
}
.admin-form__main {
	display: grid;
	gap: 24px;
	overflow: visible;
}
.admin-form__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 16px;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}
.admin-form__toolbar { position: static; }
.admin-shell { overflow: visible; }
.admin-form__toolbar-label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-soft);
	font-weight: 600;
}
.admin-form__toolbar-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.admin-form__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: var(--color-surface-alt);
	font-size: 0.85rem;
	color: var(--color-text);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.admin-form__chip:hover,
.admin-form__chip:focus-visible {
	transform: translateY(-1px);
	border-color: var(--admin-blue-light);
	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.12);
}
.admin-form__chip--primary {
	background: var(--admin-blue-bg);
	border-color: var(--admin-blue);
	color: var(--admin-blue);
}
.admin-form__chip.is-active {
	background: linear-gradient(135deg, #667eea 0%, #22c55e 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 10px 26px rgba(34, 197, 94, 0.25);
}
.admin-form__aside {
	display: grid;
	gap: 16px;
}
.aside-card {
	background: var(--color-surface);
	border-radius: 16px;
	border: 1px solid var(--color-border);
	padding: 16px;
	box-shadow: var(--shadow-sm);
}
.aside-card--accent {
	background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.08));
	border-color: rgba(59, 130, 246, 0.3);
}
.aside-card h3 {
	margin: 0 0 10px;
	font-size: 1rem;
}
.aside-list {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 6px;
	color: var(--color-muted);
}
.aside-links {
	display: grid;
	gap: 8px;
}
.aside-links a {
	text-decoration: none;
	font-weight: 600;
	color: var(--admin-blue);
	background: var(--admin-blue-bg);
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid rgba(59, 130, 246, 0.3);
}

.aside-card--preview {
	background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.18), transparent 45%),
		linear-gradient(135deg, #0b1633 0%, #162a55 65%, #0b6f6a 100%);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 18px 40px rgba(6, 14, 32, 0.35);
}

.aside-preview__eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; margin: 0 0 6px; }
.aside-preview__title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.aside-preview__meta { display: flex; gap: 8px; align-items: center; color: rgba(255,255,255,0.86); font-weight: 600; margin-bottom: 10px; }
.aside-preview__dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.6); }
.aside-preview__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.aside-preview__chip { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); font-weight: 600; color: #fff; font-size: 0.85rem; }
.aside-preview__hint { margin: 4px 0 0; color: rgba(255,255,255,0.8); font-size: 0.85rem; }

@media (min-width: 1024px) {
	.admin-form__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}
	.admin-form__aside {
		position: sticky;
		top: calc(var(--header-height, 0px) + 16px);
	}
}

@media (max-width: 768px) {
	.admin-meta-bar { grid-template-columns: 1fr; padding: 12px; }
	.admin-form__toolbar { position: static; }
}

.form-card {
	background: transparent;
	border-radius: 0;
	padding: 0 0 20px;
	box-shadow: none;
	margin-bottom: 20px;
	border: none;
	border-bottom: 1px solid var(--color-border);
	transition: none;
	overflow: visible;
}
.form-card:hover {
	transform: none;
	box-shadow: none;
}

.form-card--optional {
	opacity: 0.95;
}

.form-card--nested {
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 16px;
	background: var(--color-surface);
	margin-bottom: 16px;
}

.form-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border);
}

.form-card__heading {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.form-card__subtitle {
	margin: 6px 0 0;
	font-size: 0.9rem;
	color: var(--color-muted);
	max-width: 52ch;
}

.form-card__tag {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: var(--color-surface-alt);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-soft);
}

.form-card__tag--required {
	background: rgba(16, 185, 129, 0.12);
	border-color: rgba(16, 185, 129, 0.4);
	color: #0f766e;
}

.form-card__tag--optional {
	background: rgba(99, 102, 241, 0.12);
	border-color: rgba(99, 102, 241, 0.35);
	color: #4338ca;
}

.form-card__icon {
	font-size: 1.5rem;
	width: 48px;
	height: 48px;
	background: var(--color-surface-alt);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
}

.form-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
	color: var(--color-text);
}

@media (min-width: 768px) {
	.form-card {
		padding: 0 0 24px;
	}
}

/* Form Grid */
.form-grid {
	display: grid;
	gap: 20px;
}

.form-grid--1 {
	grid-template-columns: 1fr;
}

.form-grid--2 {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.form-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.form-grid--3 {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.form-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.form-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.form-group--full {
	grid-column: 1 / -1;
}

/* Form Elements */
.form-group {
	display: flex;
	flex-direction: column;
}

.form-label {
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 8px;
	font-size: 0.9375rem;
}

.form-input,
.form-select,
.form-textarea {
	padding: 12px 14px;
	border: 2px solid var(--color-border);
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
	transition: all 0.2s ease;
	background: white;
	min-height: 50px;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	outline: none;
	border-color: var(--admin-blue);
	box-shadow: 0 0 0 3px var(--admin-blue-bg);
}

.form-textarea {
	resize: vertical;
	min-height: 100px;
}

.form-help {
	font-size: 0.875rem;
	color: var(--color-muted);
	margin: 8px 0 0;
	line-height: 1.5;
}

.form-error {
	font-size: 0.875rem;
	color: var(--admin-red);
	margin-top: 8px;
	font-weight: 500;
}

/* Form Actions */
.form-actions {
	background: white;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
	gap: 24px;
	border: 1px solid rgba(16, 24, 40, 0.08);
}
.form-actions--sticky {
	position: sticky;
	bottom: 12px;
	z-index: 4;
	background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,1));
	box-shadow: 0 10px 24px rgba(15, 30, 60, 0.08);
}
.form-submit__row .btn {
	min-width: 180px;
}
@media (max-width: 900px) {
	.admin-header--hero {
		padding: 24px;
	}
}
@media (max-width: 640px) {
	.admin-quick-grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) {
	.form-actions {
		padding: 32px;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.form-toggles {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 2px solid var(--color-border);
	margin-top: 2px;
	cursor: pointer;
	flex-shrink: 0;
}

.form-checkbox input[type="checkbox"]:checked {
	background: var(--admin-blue);
	border-color: var(--admin-blue);
}

.form-checkbox__label {
	font-weight: 600;
	color: var(--color-text);
	display: block;
	margin-bottom: 2px;
}

.form-checkbox__help {
	font-size: 0.875rem;
	color: var(--color-muted);
	margin: 0;
}

.form-submit {
	display: flex;
}

.form-card__summary {
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	padding: 12px 0;
}

.form-card__summary::marker,
.form-card__summary::-webkit-details-marker {
	display: none;
}

.dropzone {
	border: 2px dashed var(--color-border);
	border-radius: 12px;
	padding: 16px;
	background: var(--color-surface-alt);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.dropzone.is-dragging {
	border-color: var(--admin-blue);
	background: var(--admin-blue-bg);
}

.dropzone__file {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--color-soft);
}

/* Progress indicator */
.admin-progress {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px 16px;
	border-radius: 14px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.admin-progress__meta {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.admin-progress__label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-soft);
	font-weight: 600;
}

.admin-progress__current {
	font-size: 0.95rem;
	color: var(--color-text);
}

.admin-progress__track {
	position: relative;
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: var(--color-surface-alt);
	overflow: hidden;
}

.admin-progress__bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(135deg, #667eea 0%, #22c55e 100%);
	transition: width 0.3s ease;
}

.admin-progress__percent {
	font-weight: 600;
	color: var(--color-text);
}

@media (max-width: 640px) {
	.admin-progress {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

@media (min-width: 1024px) {
	.admin-form__layout {
		grid-template-columns: 1fr;
	}
}

.btn-submit {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 16px 48px;
	border-radius: 12px;
	font-size: 1.0625rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
	width: 100%;
}

/* Category picker (checkbox pills) */
.category-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px;
	border: 2px solid var(--color-border);
	border-radius: 12px;
	background: #fff;
}

.category-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 999px;
	border: 2px solid var(--color-border);
	background: var(--color-surface-alt);
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: 600;
	color: var(--color-text);
}

.category-pill input[type="checkbox"] {
	width: 18px;
	height: 18px;
}

.category-pill:hover {
	transform: translateY(-1px);
	border-color: var(--admin-blue-light);
}

.category-pill:has(input[type="checkbox"]:checked) {
	background: var(--admin-blue-bg);
	border-color: var(--admin-blue);
	color: var(--admin-blue);
}

.btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

@media (min-width: 768px) {
	.btn-submit {
		width: auto;
	}
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

/* Improve input fields on mobile */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
	font-size: 16px !important; /* Prevents iOS zoom on focus */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
	/* Stack form actions vertically on mobile */
	.form-actions {
		flex-direction: column;
		align-items: stretch;
	}
	
	.form-actions .btn {
		width: 100%;
		justify-content: center;
	}
	
	/* Better mobile table scrolling */
	.admin-table {
		margin: 16px -12px; /* Negative margin for edge-to-edge on mobile */
		padding: 0 12px;
	}
	
	/* Improve admin cards on mobile */
	.admin-card {
		padding: 16px;
	}
	
	/* Better mobile spacing */
	.admin-shell {
		padding: 16px;
	}
	
	.shell {
		padding-left: 16px;
		padding-right: 16px;
	}
	
	/* Responsive plan cards */
	.plan-card {
		grid-template-columns: 1fr;
	}
	
	.plan-card__media {
		width: 100%;
	}
	
	/* Better mobile navigation */
	.nav {
		padding-top: 70px;
	}
	
	/* Improve flash messages on mobile */
	.flash-messages {
		left: 8px;
		right: 8px;
		top: 8px;
	}
	
	/* Better touch targets for links */
	a {
		-webkit-tap-highlight-color: transparent;
	}
	
	/* Improve modal sizing on mobile */
	.modal-content {
		margin: 10px;
		max-height: 90vh;
		overflow-y: auto;
	}
}

/* Prevent text size adjustment on device orientation change */
html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Better scrolling on iOS */
body {
	-webkit-overflow-scrolling: touch;
}

/* Blog */
.blog-hero {
	padding-top: 32px;
}

.blog-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.blog-filters__actions {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}

.blog-card {
	background: var(--color-surface);
	border-radius: 16px;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.blog-card__media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.blog-card__body {
	padding: 16px;
	display: grid;
	gap: 8px;
}

.blog-card__meta {
	color: var(--color-soft);
	font-size: 0.85rem;
	margin: 0;
}

.blog-card__title {
	margin: 0;
	font-size: 1.1rem;
}

.blog-card__summary {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.95rem;
}

.blog-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.blog-article {
	background: radial-gradient(circle at top, rgba(14, 165, 233, 0.08), transparent 45%),
		linear-gradient(180deg, rgba(247, 249, 255, 0.9) 0%, rgba(255,255,255,0.95) 100%);
}

.blog-article__layout {
	display: grid;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

.blog-article__main {
	background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.9) 100%);
	border-radius: calc(var(--radius-lg) + 4px);
	border: 1px solid rgba(14, 165, 233, 0.12);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
	padding: clamp(24px, 4vw, 48px);
}

.blog-article__header {
	display: grid;
	gap: 12px;
	margin-bottom: clamp(16px, 3vw, 28px);
}

.blog-article__summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: start;
	margin: 1.2rem 0 1.8rem;
	padding: 1rem 1.25rem;
	border-radius: 16px;
	background: rgba(14, 165, 233, 0.08);
	border: 1px solid rgba(14, 165, 233, 0.2);
}

.blog-article__summary-icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(14, 165, 233, 0.16);
	color: #0f172a;
	font-size: 1.1rem;
}

.blog-article__summary-body p {
	margin: 0;
	color: var(--color-text);
}

.blog-article__summary-body .eyebrow {
	margin-bottom: 0.4rem;
}

.blog-article__header h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #0f172a;
	margin: 0;
}

.blog-article__meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.blog-article__meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	color: #0f172a;
	background: rgba(14, 165, 233, 0.08);
	border: 1px solid rgba(14, 165, 233, 0.18);
	border-radius: 999px;
	padding: 6px 12px;
}

.blog-share {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.blog-share--stack {
	flex-direction: column;
	align-items: stretch;
}

.blog-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgba(14, 165, 233, 0.2);
	background: rgba(255, 255, 255, 0.95);
	color: var(--color-text);
	font-size: 0.9rem;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.blog-share__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(14, 165, 233, 0.15);
	border-color: rgba(14, 165, 233, 0.45);
}

.blog-share__btn.is-copied {
	border-color: rgba(12, 143, 99, 0.5);
	background: rgba(12, 143, 99, 0.08);
}

.blog-article__cover {
	margin: 0 0 clamp(16px, 3vw, 28px) 0;
}

.blog-article__cover img {
	width: 100%;
	border-radius: 18px;
	box-shadow: var(--shadow-sm);
}

.blog-article__cover figcaption {
	font-size: 0.95rem;
	color: var(--color-muted);
	margin-top: 10px;
}

.blog-article__content {
	max-width: 760px;
	margin: 0 auto;
	font-size: clamp(1rem, 1.2vw, 1.08rem);
	line-height: 1.9;
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.blog-article__content p {
	margin: 0 0 1.25rem 0;
}

.blog-article__content h2,
.blog-article__content h3,
.blog-article__content h4 {
	font-family: var(--font-display);
	color: var(--color-text);
	line-height: 1.3;
	margin: 2.4rem 0 0.85rem;
}

.blog-article__content h2 {
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	padding-top: 1.2rem;
	border-top: 1px solid var(--color-border);
}

.blog-article__content h2:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

.blog-article__content h3 {
	font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

.blog-article__content h4 {
	font-size: 1.1rem;
}

.blog-article__content blockquote {
	margin: 2rem 0;
	padding: 1.2rem 1.4rem;
	border-left: 4px solid var(--color-primary);
	background: var(--color-surface-alt);
	border-radius: 14px;
	color: var(--color-muted);
}

.blog-article__content blockquote p:last-child {
	margin-bottom: 0;
}

.blog-article__content .callout,
.blog-article__content .key-takeaway {
	margin: 2rem 0;
	padding: 1.1rem 1.4rem;
	background: var(--color-surface-bold);
	border-radius: 14px;
	border: 1px solid var(--color-border);
}

.blog-article__content figure {
	margin: 2rem 0;
}

.blog-article__content figcaption {
	font-size: 0.95rem;
	color: var(--color-muted);
	margin-top: 8px;
}

.blog-article__content ul,
.blog-article__content ol {
	margin: 0 0 1.3rem 1.2rem;
	padding: 0;
}

.blog-article__content li {
	margin-bottom: 0.5rem;
}

.blog-article__content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.blog-article__content pre,
.blog-article__content code {
	font-family: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.blog-article__content pre {
	background: #0f172a;
	color: #e2e8f0;
	padding: 1.2rem 1.4rem;
	border-radius: 14px;
	overflow-x: auto;
	box-shadow: var(--shadow-xs);
}

.blog-article__content code {
	background: rgba(15, 23, 42, 0.08);
	padding: 0.2rem 0.35rem;
	border-radius: 6px;
}

.blog-article__content pre code {
	background: transparent;
	padding: 0;
}

.blog-toc {
	margin: 1.2rem 0 2rem;
	padding: 1.2rem 1.3rem;
	border-radius: 16px;
	background: rgba(14, 165, 233, 0.06);
	border: 1px solid rgba(14, 165, 233, 0.16);
}

.blog-toc__title {
	margin: 0 0 0.75rem 0;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.blog-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.blog-toc__list a {
	color: var(--color-text);
	font-size: 0.95rem;
}

.blog-toc__list .toc-h3 a {
	padding-left: 1rem;
	color: var(--color-muted);
}

.blog-toc.is-empty {
	display: none;
}

/* Blog extras (progressive enhancement) */
.blog-affiliate {
	margin: 1.25rem 0;
}

.blog-affiliate__card {
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.06);
	border-radius: 1rem;
	padding: 1.25rem;
}

.blog-affiliate__title {
	margin: .35rem 0 .5rem 0;
	font-family: 'Playfair Display', serif;
}

.blog-affiliate__desc {
	margin: 0 0 1rem 0;
	opacity: .92;
}

.blog-recs {
	margin: 1.75rem 0;
}

.blog-recs__title {
	margin: 0 0 .75rem 0;
	font-family: 'Playfair Display', serif;
}

.blog-recs__list {
	display: grid;
	gap: 1rem;
}

.blog-gallery {
	margin: 1.75rem 0;
}

.blog-gallery__title {
	margin: 0 0 .75rem 0;
	font-family: 'Playfair Display', serif;
}

.blog-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}

.blog-gallery__item {
	margin: 0;
	border-radius: .85rem;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.08);
}

.blog-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 4 / 3;
}

.blog-faq {
	margin: 1.75rem 0;
}

.blog-faq h2 {
	margin: 0 0 .75rem 0;
	font-family: 'Playfair Display', serif;
}

.blog-faq__item {
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(255,255,255,.05);
	border-radius: .9rem;
	padding: .75rem 1rem;
	margin-bottom: .75rem;
}

.blog-faq__item > summary {
	cursor: pointer;
	font-weight: 600;
}

.blog-faq__answer {
	margin-top: .5rem;
	opacity: .92;
}

@media (min-width: 900px) {
	.blog-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blog-article__content img {
	max-width: 100%;
	border-radius: 12px;
}

.blog-article__aside .aside-card {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-xs);
	padding: 1.2rem;
}

.blog-article__aside .blog-toc--aside {
	position: sticky;
	top: 120px;
}

.blog-article__aside .aside-card + .aside-card {
	margin-top: 1.2rem;
}

.blog-aside-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.blog-aside-list li {
	display: grid;
	gap: 4px;
}

.blog-aside-list span { color: var(--color-soft); font-size: 0.85rem; }

.blog-cta {
	margin-top: 24px;
	padding: 20px;
	border-radius: 16px;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	background: var(--color-surface);
	display: grid;
	gap: 16px;
}

.blog-cta__media img {
	width: 100%;
	border-radius: 12px;
}

.blog-cta__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.blog-tool-links__title {
	margin: 0 0 8px 0;
}

.blog-tool-links__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.blog-tool-links__card {
	border-radius: 14px;
	border: 1px solid var(--color-border);
	padding: 16px;
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
}

.blog-tool-links__desc {
	margin: 0 0 12px;
	color: var(--color-muted);
	font-size: 0.95rem;
}

.reading-progress {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: rgba(0,0,0,0.06);
	z-index: 20;
}

.reading-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-primary);
}

.blog-article__favorite-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	color: #0f172a;
	background: rgba(14, 165, 233, 0.1);
	border: 1px solid rgba(14, 165, 233, 0.2);
	border-radius: 999px;
	padding: 6px 12px;
	transition: all var(--transition-fast);
	cursor: pointer;
}

.blog-article__favorite-btn:hover {
	background: var(--color-surface-bold);
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

.blog-article__favorite-btn.is-favorited {
	background: rgba(217, 45, 32, 0.08);
	border-color: rgba(217, 45, 32, 0.3);
	color: var(--color-danger);
}

.blog-article__favorite-btn.is-favorited i::before {
	content: '\f004'; /* solid heart */
}

.blog-author-bio {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 1.5rem 0 2rem;
	padding: 1.2rem 1.4rem;
	background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
	border-radius: 16px;
	border: 1px solid rgba(14, 165, 233, 0.2);
}

.blog-author-bio__avatar img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-border);
}

.blog-author-bio__content h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-text);
}

.blog-author-bio__content p {
	margin: 0 0 0.75rem 0;
	font-size: 0.95rem;
	color: var(--color-muted);
	line-height: 1.5;
}

.blog-author-bio__social {
	display: flex;
	gap: 12px;
}

.blog-author-bio__social a {
	color: var(--color-muted);
	transition: color var(--transition-fast);
}

.blog-author-bio__social a:hover {
	color: var(--color-primary);
}

.blog-newsletter {
	margin: 2rem 0;
	padding: 2rem;
	background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
	border-radius: 20px;
	color: white;
	text-align: center;
}

.blog-newsletter__content h2 {
	margin: 0 0 0.5rem 0;
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 700;
}

.blog-newsletter__content p {
	margin: 0 0 1.5rem 0;
	font-size: 1rem;
	opacity: 0.9;
}

.blog-newsletter__form {
	display: flex;
	gap: 10px;
	max-width: 400px;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}

.blog-newsletter__form input {
	flex: 1;
	min-width: 200px;
	padding: 12px 16px;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
}

.blog-newsletter__form button {
	padding: 12px 24px;
	border: none;
	border-radius: 8px;
	background: white;
	color: var(--color-primary);
	font-weight: 600;
	cursor: pointer;
	transition: transform var(--transition-fast);
}

.blog-newsletter__form button:hover {
	transform: translateY(-1px);
}

.blog-related {
	margin: 2.5rem 0;
}

.blog-related h2 {
	margin: 0 0 1.5rem 0;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
}

.blog-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}

.blog-related__item {
	background: var(--color-surface);
	border-radius: 16px;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.blog-related__item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.blog-related__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.blog-related__item img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.blog-related__item h3 {
	margin: 1rem 1rem 0.5rem;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
}

.blog-related__item p {
	margin: 0 1rem 0.75rem;
	font-size: 0.95rem;
	color: var(--color-muted);
	line-height: 1.5;
}

.blog-related__item .badge {
	margin: 0 1rem 1rem;
}

@media (max-width: 768px) {
	.blog-author-bio {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}
	.blog-article__summary {
		grid-template-columns: 1fr;
	}

	.blog-newsletter__form {
		flex-direction: column;
		align-items: stretch;
	}

	.blog-related__grid {
		grid-template-columns: 1fr;
	}
}

.back-to-top {
	position: fixed;
	right: 20px;
	bottom: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
	color: var(--color-text);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity var(--transition-fast), transform var(--transition-fast);
	z-index: 30;
}

.back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

@media (min-width: 1024px) {
	.blog-article__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
	.blog-toc--inline {
		display: none;
	}
	.blog-toc--aside {
		display: block;
	}
}

@media (max-width: 1023px) {
	.blog-article__main {
		padding: clamp(20px, 6vw, 32px);
	}
	.blog-toc--aside {
		display: none;
	}
	.blog-toc--inline {
		display: block;
	}
	.blog-share {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Responsive polish for cross-device layouts */
table {
	width: 100%;
	border-collapse: collapse;
}

.table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
	.section-heading {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.hero__cta .btn,
	.package-cta .package-button,
	.plan-hero__favorites .favorite-toggle--inline,
	.plan-hero__compare .compare-toggle--inline {
		width: 100%;
		justify-content: center;
	}
	.plan-hero__favorites,
	.plan-hero__compare {
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: stretch;
	}
}

/* Smooth scrolling for anchor links */
html {
	scroll-behavior: smooth;
}

/* Theme helpers: primary/secondary button tokens and subtle outlines */
.btn-primary,
.btn--primary {
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 10px 14px;
	box-shadow: var(--shadow-sm);
}

.btn-accent,
.btn--accent {
	background: var(--color-accent);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 10px 14px;
}

.btn-outline,
.btn--outline {
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	border-radius: 10px;
	padding: 10px 14px;
}

/* Mobile: ensure larger tap targets and full-width primary actions */
@media (max-width: 600px) {
	.btn-primary, .btn--primary, .btn-accent, .package-button { display:block; width:100%; padding:14px 18px; }
}

/* Improve button press feedback on mobile */
.btn:active,
.compare-toggle:active,
.favorite-toggle:active,
.nav-toggle:active,
button:active {
	transform: scale(0.98);
}

/* ============================================
   ABOUT PAGE STYLES
   ============================================ */
.about-page {
	padding: clamp(48px, 8vw, 96px) 0;
}

.about-hero {
	display: grid;
	gap: clamp(24px, 5vw, 56px);
	align-items: center;
	margin: 0 auto clamp(40px, 6vw, 72px);
}

.about-hero__copy {
	text-align: left;
}

.about-hero h1 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	margin: 16px 0 24px;
	line-height: 1.1;
}

.about-hero .lead {
	font-size: 1.1rem;
	max-width: 700px;
	margin: 0;
}

.about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

.about-hero__panel {
	position: relative;
}

.about-panel {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(14, 116, 144, 0.12));
	border: 1px solid rgba(59, 130, 246, 0.25);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 4vw, 40px);
	box-shadow: var(--shadow-md);
}

.about-panel__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(59, 130, 246, 0.18);
	color: var(--color-primary);
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 16px;
}

.about-panel h2 {
	font-size: 1.6rem;
	margin: 0 0 12px;
}

.about-panel p {
	color: var(--color-muted);
	line-height: 1.7;
	margin: 0 0 24px;
}

.about-panel__metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
}

.about-panel__metrics strong {
	display: block;
	font-size: 1.1rem;
}

.about-panel__metrics span {
	color: var(--color-muted);
	font-size: 0.9rem;
}

.about-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin: 0 0 clamp(40px, 6vw, 72px);
}

.about-stats article {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: 24px;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.stat-label {
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	margin-bottom: 8px;
}

.stat-value {
	display: block;
	font-size: 1.4rem;
	margin-bottom: 6px;
}

.stat-note {
	color: var(--color-muted);
	margin: 0;
}

.about-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-bottom: 80px;
}

@media (min-width: 768px) {
	.about-features {
		grid-template-columns: repeat(3, 1fr);
		gap: 36px;
	}
}

.feature-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: 40px 32px;
	text-align: center;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	transition: all var(--transition-medium) cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.feature-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--gradient-primary);
	opacity: 0;
	transition: opacity var(--transition-medium) ease;
}

.feature-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-elevated);
	border-color: transparent;
}

.feature-card:hover::before {
	opacity: 0.04;
}

.feature-card > * {
	position: relative;
	z-index: 1;
}

.feature-card__icon {
	font-size: 3rem;
	margin-bottom: 20px;
	display: block;
	line-height: 1;
}

.feature-card h2 {
	font-size: 1.4rem;
	margin: 0 0 16px;
	font-weight: 700;
}

.feature-card p {
	font-size: 1rem;
	color: var(--color-muted);
	line-height: 1.7;
	margin: 0;
}

.about-cta {
	background: linear-gradient(135deg, var(--color-surface-alt), var(--color-surface-bold));
	border-radius: var(--radius-lg);
	padding: clamp(40px, 6vw, 64px);
	text-align: center;
	box-shadow: var(--shadow-md);
}

.about-cta h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0 0 20px;
}

.about-cta p {
	font-size: 1.1rem;
	color: var(--color-muted);
	max-width: 640px;
	margin: 0 auto 32px;
	line-height: 1.7;
}

.about-cta__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.about-cta__actions .btn {
	min-width: 180px;
}

.about-section__header {
	text-align: center;
	margin: 0 auto clamp(32px, 5vw, 48px);
	max-width: 680px;
}

.about-values {
	margin-bottom: clamp(40px, 6vw, 72px);
}

.about-values__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.about-values__grid article {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: 24px;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.about-values__grid h3 {
	margin: 0 0 8px;
}

.about-values__grid p {
	margin: 0;
	color: var(--color-muted);
}

.about-process {
	margin-bottom: clamp(40px, 6vw, 72px);
}

.about-process__steps {
	display: grid;
	gap: 18px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.about-process__steps li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: start;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: 20px 24px;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.about-process__steps h3 {
	margin: 0 0 6px;
}

.about-process__steps p {
	margin: 0;
	color: var(--color-muted);
}

.step-index {
	font-weight: 700;
	color: var(--color-primary);
	background: rgba(59, 130, 246, 0.15);
	border-radius: 10px;
	padding: 8px 12px;
	min-width: 48px;
	text-align: center;
}

@media (max-width: 640px) {
	.about-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.about-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.about-cta__actions .btn {
		width: 100%;
	}
}

@media (min-width: 900px) {
	.about-hero {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}
}

/* ============================================
   NAV TOGGLE ICON ANIMATION
   ============================================ */
.nav-toggle__icon {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-primary);
	position: relative;
	transition: background var(--transition-fast) ease;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background: var(--color-primary);
	transition: all var(--transition-fast) ease;
}

.nav-toggle__icon::before {
	top: -8px;
}

.nav-toggle__icon::after {
	bottom: -8px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
	bottom: 0;
	transform: rotate(-45deg);
}

/* ============================================
   HOMEPAGE POLISH (NO HTML CHANGES)
   ============================================ */

/* Keep the immersive hero clean (avoid double card framing from generic .hero__visual rules) */
.hero--immersive .hero__visual {
	padding: 0;
	background: transparent;
	border: none;
}

/* ============================================
   PREMIUM DESIGN SYSTEM: COLORFUL & NATURAL
   ============================================ */

/* 1) SOFT GRADIENT BACKGROUNDS */
.hero--immersive {
	background: linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #f0f7ff 100%);
}

.section--trust,
.section--experience,
.section--proof {
	background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
	position: relative;
}

.section--cta {
	background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
	position: relative;
}

.section--cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse at top, rgba(14, 165, 233, 0.08), transparent 70%);
	pointer-events: none;
}

/* 2) PREMIUM BUTTON SYSTEM */
.btn-primary {
	background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
	border: none;
	box-shadow: 0 4px 14px rgba(14, 165, 233, 0.25);
	position: relative;
	overflow: hidden;
	transition: all var(--transition-base) ease;
}

.btn-primary::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.btn-primary:hover::after {
	left: 100%;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
}

/* 3) MOBILE-FIRST FULL-WIDTH BUTTONS */
@media (max-width: 768px) {
	.hero__actions .btn,
	.cta__actions .btn,
	.about-cta__actions .btn {
		width: 100%;
		text-align: center;
	}
}

/* 4) IMAGE GLOW EFFECTS */
.plan-tech__gallery {
	position: relative;
}

.plan-tech__gallery::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.08), transparent 70%);
	pointer-events: none;
	z-index: -1;
}

/* 5) CATEGORY COLOR TAG SYSTEM */
.plan-badge--category {
	font-weight: 600;
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 0.875rem;
	display: inline-block;
	transition: all var(--transition-base) ease;
}

.plan-badge--category:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hero--immersive .hero__tag {
	border: 1px solid rgba(226, 232, 240, 0.95);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	letter-spacing: 0.1em;
}

/* Mobile-first CTA: full width, comfortable tap targets */
@media (max-width: 768px) {
	.hero--immersive .hero__cta {
		flex-direction: column;
		align-items: stretch;
	}
	.hero--immersive .hero__cta .btn {
		width: 100%;
		justify-content: center;
		padding: 14px 16px;
	}
}

/* Featured + recent plan cards on homepage: cleaner, calmer, consistent */
.section--bento .plan-card,
.section--scroll .plan-card--inline {
	border-color: rgba(226, 232, 240, 0.9);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	animation: none;
}

.section--bento .plan-card::before {
	opacity: 0;
}

.section--bento .plan-card:hover,
.section--scroll .plan-card--inline:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
	border-color: rgba(14, 165, 233, 0.35);
}

.section--bento .plan-card:hover::before {
	opacity: 0;
}

/* CTA section: elegant border + subtle elevation */
.section-cta {
	border-color: rgba(226, 232, 240, 0.9);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* ============================================
   PROFESSIONAL HOMEPAGE STRUCTURE
   ============================================ */

/* Consistent section separation - no wasted space */
.section--trust,
.section--bento,
.section--scroll,
.section--experience,
.section--use-cases,
.section--proof,
.section--cta {
	border-top: 1px solid rgba(226, 232, 240, 0.5);
}

/* Remove border from first section after hero */
.hero + .section {
	border-top: none;
}

/* Visual hierarchy: Section headings must stand out */
.section-heading h2 {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 6px 0 10px;
	color: var(--color-text);
}

.section-heading p {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(71, 85, 105, 0.95);
	max-width: 660px;
	margin-top: 8px;
}

/* Mobile optimization - better use of space */
@media (max-width: 768px) {
	.section {
		padding-block: clamp(28px, 4vw, 48px);
	}
	
	.hero {
		padding-block: clamp(56px, 8vw, 96px);
	}
	
	.section-heading h2 {
		font-size: clamp(1.5rem, 5vw, 2rem);
	}
	
	/* Cards should breathe on mobile */
	.trust-card,
	.why-card,
	.use-case-card,
	.proof-card,
	.testimonial-card {
		padding: 14px;
	}
}

/* Desktop: maintain professional density */
@media (min-width: 980px) {
	.hero__layout {
		grid-template-columns: 1fr 0.9fr;
		align-items: center;
	}
	
	.section-heading {
		gap: 32px;
	}
	
	/* Better grid behavior on large screens */
	.trust-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.why-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.use-case-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.proof-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Intentional spacing: no random gaps */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.eyebrow i {
	font-size: 0.9em;
	opacity: 0.9;
}

/* Clean typography hierarchy */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	margin: 0;
	line-height: 1.25;
}

p {
	margin: 0;
}

/* Professional scroll behavior for horizontal plan rows */
.plan-row::-webkit-scrollbar {
	height: 8px;
}

.plan-row::-webkit-scrollbar-track {
	background: rgba(226, 232, 240, 0.4);
	border-radius: 8px;
}

.plan-row::-webkit-scrollbar-thumb {
	background: rgba(100, 116, 139, 0.5);
	border-radius: 8px;
}

.plan-row::-webkit-scrollbar-thumb:hover {
	background: rgba(100, 116, 139, 0.7);
}

/* Global search (homepage) */
.hero__search {
	margin-top: 1.25rem;
	max-width: 760px;
	width: 100%;
	align-self: center;
	position: relative;
	isolation: isolate;
}

.hero__search-hint {
	margin: 10px auto 0;
	max-width: 56ch;
	font-size: 0.98rem;
	color: rgba(71, 85, 105, 0.92);
}

.search-shell {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem;
	align-items: center;
	padding: 0.95rem 1.1rem;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
	border: 1px solid rgba(16, 24, 40, 0.12);
	transition: box-shadow var(--transition-medium) ease, transform var(--transition-medium) ease, border-color var(--transition-medium) ease;
}

.search-shell:focus-within {
	box-shadow: 0 16px 50px rgba(15, 23, 42, 0.12), var(--focus-ring);
	border-color: rgba(31, 76, 228, 0.28);
	transform: translateY(-1px);
}

.search-shell__icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	color: rgba(71, 85, 105, 0.9);
	background: rgba(15, 23, 42, 0.04);
}

.search-shell__input {
	border: none;
	background: transparent;
	font-size: 1.02rem;
	width: 100%;
	color: var(--color-text);
	min-height: 44px;
	letter-spacing: -0.01em;
}

.search-shell__input::placeholder {
	color: rgba(71, 85, 105, 0.78);
}

.search-shell__input:focus {
	outline: none;
}

.search-results {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 12px);
	margin-top: 0;
	padding: 0.95rem;
	border-radius: 18px;
	box-shadow: 0 22px 65px rgba(15, 23, 42, 0.18);
	border: 1px solid rgba(16, 24, 40, 0.12);
	max-height: min(420px, 55vh);
	overflow: auto;
	z-index: 40;
}

.search-results::-webkit-scrollbar {
	width: 10px;
}

.search-results::-webkit-scrollbar-thumb {
	background: rgba(100, 116, 139, 0.35);
	border-radius: 999px;
}

.search-results::-webkit-scrollbar-thumb:hover {
	background: rgba(100, 116, 139, 0.5);
}

.search-results__group {
	margin-bottom: 0.95rem;
	padding-bottom: 0.95rem;
	border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.search-results__group:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.search-results__group h3 {
	font-size: 0.82rem;
	margin-bottom: 0.6rem;
	color: rgba(71, 85, 105, 0.9);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 800;
}

.search-results__list {
	display: grid;
	gap: 0.55rem;
}

.search-results__item {
	display: block;
	padding: 0.8rem 0.85rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(16, 24, 40, 0.1);
	text-decoration: none;
	color: inherit;
	transition: transform var(--transition-fast) ease, background var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.search-results__item:hover {
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(31, 76, 228, 0.22);
}

.search-results__item:focus {
	outline: none;
	box-shadow: var(--focus-ring);
	border-color: rgba(31, 76, 228, 0.35);
}

.search-results__item strong {
	display: block;
	margin-bottom: 0.25rem;
}

.search-results__item p {
	font-size: 0.92rem;
	color: var(--color-muted);
}

.search-results__empty {
	color: var(--color-muted);
	padding: 0.35rem 0.1rem;
}

@media (max-width: 700px) {
	.hero {
		overflow: visible;
	}

	.hero__search {
		margin-top: 0.9rem;
		max-width: none;
		position: sticky;
		top: 76px;
		z-index: 1200;
	}

	.hero__search-hint {
		display: none;
	}

	.search-shell {
		border-radius: 18px;
		padding: 0.85rem 0.9rem;
	}

	.search-shell__icon {
		width: 40px;
		height: 40px;
	}

	.search-results {
		position: static;
		margin-top: 0.75rem;
		max-height: 55vh;
	}
}

/* ========================================
   MODERN MARKETPLACE PLAN DETAIL STYLES
   ======================================== */

/* Plan Hero Section */
.plan-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 768px) {
	.plan-hero {
		grid-template-columns: 1.2fr 1fr;
		align-items: start;
	}
}

.plan-hero__image-wrapper {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface-alt);
	aspect-ratio: 4 / 3;
}

.plan-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plan-hero__info {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.plan-hero__title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
	margin: 0;
}

.plan-hero__subtitle {
	font-size: 1rem;
	color: var(--color-muted);
	margin: 0;
}

.plan-hero__code {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--color-surface-alt);
	border-radius: var(--radius-sm);
	font-family: var(--font-numeric);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
}

/* Metric Badges */
.metric-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.metric-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--color-surface-alt);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
}

.metric-badge i {
	font-size: 1.125rem;
	color: var(--color-primary);
}

.metric-badge__value {
	font-family: var(--font-numeric);
	font-size: 1rem;
	color: var(--color-text);
}

.metric-badge__label {
	font-size: 0.75rem;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Area Unit Toggle */
.area-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem;
	background: var(--color-surface-alt);
	border-radius: var(--radius-sm);
}

.area-toggle__btn {
	padding: 0.5rem 1rem;
	background: transparent;
	border: none;
	border-radius: calc(var(--radius-sm) - 4px);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-muted);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.area-toggle__btn.active {
	background: var(--color-bg);
	color: var(--color-primary);
	box-shadow: var(--shadow-xs);
}

/* CTA Buttons */
.cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 1.75rem;
	border: none;
	border-radius: var(--radius-sm);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.btn-cta--primary {
	background: var(--gradient-primary);
	color: white;
	box-shadow: var(--shadow-xs);
}

.btn-cta--primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.btn-cta--secondary {
	background: var(--color-bg);
	color: var(--color-primary);
	border: 2px solid var(--color-border-strong);
}

.btn-cta--secondary:hover {
	background: var(--color-surface-alt);
}

/* Why This Plan Section */
.plan-why {
	padding: 2rem;
	background: linear-gradient(135deg, rgba(31, 76, 228, 0.05) 0%, rgba(22, 162, 132, 0.05) 100%);
	border-radius: var(--radius-md);
	border-left: 4px solid var(--color-primary);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.plan-why__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 1rem;
}

.plan-why__content {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-muted);
}

/* Gallery Section */
.plan-gallery {
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.plan-gallery__title {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 1.5rem;
}

.plan-gallery__main {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface-alt);
	aspect-ratio: 16 / 9;
	margin-bottom: 1rem;
}

.plan-gallery__main-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plan-gallery__thumbnails {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0.75rem;
}

.plan-gallery__thumb {
	position: relative;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-surface-alt);
	aspect-ratio: 4 / 3;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all var(--transition-fast);
}

.plan-gallery__thumb:hover {
	border-color: var(--color-primary);
}

.plan-gallery__thumb.active {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-xs);
}

.plan-gallery__thumb-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Quick Specs Grid */
.plan-specs {
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.plan-specs__title {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 1.5rem;
}

.plan-specs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.spec-item {
	padding: 1.25rem;
	background: var(--color-surface-alt);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
}

.spec-item__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-soft);
	margin-bottom: 0.5rem;
}

.spec-item__value {
	display: block;
	font-family: var(--font-numeric);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-text);
}

/* Climate & Build Section */
.plan-build {
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.plan-build__title {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 1.5rem;
}

.plan-build__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 640px) {
	.plan-build__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.build-item {
	padding: 1.5rem;
	background: var(--color-surface-alt);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
}

.build-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: white;
	border-radius: var(--radius-sm);
	margin-bottom: 1rem;
}

.build-item__icon i {
	font-size: 1.5rem;
	color: var(--color-primary);
}

.build-item__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-soft);
	margin-bottom: 0.5rem;
}

.build-item__value {
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.5;
}

/* Estimated Cost Box */
.plan-cost {
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.plan-cost__title {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 1.5rem;
}

.plan-cost__box {
	padding: 2rem;
	background: linear-gradient(135deg, rgba(22, 162, 132, 0.08) 0%, rgba(31, 76, 228, 0.08) 100%);
	border-radius: var(--radius-md);
	border: 2px solid var(--color-border);
	text-align: center;
}

.plan-cost__range {
	font-family: var(--font-numeric);
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 0.5rem;
}

.plan-cost__note {
	font-size: 0.875rem;
	color: var(--color-muted);
	line-height: 1.6;
}

/* Description Cards */
.plan-description {
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.plan-description__title {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 1.5rem;
}

.description-card {
	padding: 2rem;
	background: var(--color-surface-alt);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	margin-bottom: 1.5rem;
}

.description-card:last-child {
	margin-bottom: 0;
}

.description-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 1rem;
}

.description-card__content {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-muted);
}

.description-card__content p {
	margin: 0 0 1rem;
}

.description-card__content p:last-child {
	margin-bottom: 0;
}

/* Pack Comparison Cards */
.plan-packs {
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.plan-packs__title {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 1.5rem;
}

.plan-packs__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.plan-packs__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.plan-packs__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pack-card {
	position: relative;
	padding: 2rem;
	background: var(--color-bg);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.pack-card:hover {
	border-color: var(--color-primary);
	box-shadow: var(--shadow-sm);
	transform: translateY(-4px);
}

.pack-card--recommended {
	border-color: var(--color-primary);
	background: linear-gradient(135deg, rgba(31, 76, 228, 0.03) 0%, rgba(22, 162, 132, 0.03) 100%);
}

.pack-card__badge {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	background: var(--gradient-primary);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--radius-sm);
	margin-bottom: 1rem;
}

.pack-card__name {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 0 0 0.5rem;
}

.pack-card__price {
	font-family: var(--font-numeric);
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 0 1rem;
}

.pack-card__description {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-muted);
	margin-bottom: 1.5rem;
}

.pack-card__cta {
	display: block;
	width: 100%;
	padding: 1rem;
	background: var(--gradient-primary);
	color: white;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.pack-card__cta:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

.pack-card--free .pack-card__cta {
	background: var(--color-surface-alt);
	color: var(--color-primary);
	border: 2px solid var(--color-border-strong);
}

/* Responsive adjustments */
@media (max-width: 767px) {
	.plan-specs__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.metric-badges {
		justify-content: center;
	}
	
	.cta-buttons {
		justify-content: center;
	}
	
	.btn-cta {
		flex: 1;
		min-width: 0;
	}
}