/* ═══════════════════════════════════════════════════════════════════════════════
   PARESH BAFNA STUDIO — Global Stylesheet
   Purpose: Base theme, animations, layout sections, cards, utilities, and
   responsive behavior for the studio website.
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════════
   1) RESET & DESIGN TOKENS
   - Normalizes default browser spacing
   - Defines typography, colors, radii, and brand palette
   - Includes dark mode overrides through prefers-color-scheme
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Global reset */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Core design variables */
:root {
	/* Typography */
	--serif: 'DM Serif Display', serif;
	--sans: 'DM Sans', sans-serif;

	/* Light mode neutrals */
	--ink: #18181b;
	--mute: #52525b;
	--hint: #a1a1aa;
	--bg: #fafaf9;
	--bg2: #f4f4f5;
	--bg3: #e4e4e7;
	--border: rgba(0, 0, 0, 0.08);
	--border2: rgba(0, 0, 0, 0.16);

	/* Border radius scale */
	--radius-md: 8px;
	--radius-lg: 12px;

	/* Brand and feature colors */
	--gold: #b8924a;
	--nb: #2563eb;
	--nb-bg: #eff6ff;
	--nb-dark: #1d4ed8;
	--rose: #be185d;
	--rose-bg: #fdf2f8;
	--rose-dark: #9d174d;
	--green: #15803d;
	--green-bg: #f0fdf4;
	--amber: #b45309;
	--amber-bg: #fffbeb;
	--purple: #6d28d9;
	--purple-bg: #f5f3ff;
	--auto: #0891b2;
	--auto-bg: #ecfeff;
	--auto-dark: #0e7490;
	--auto-tint: #f0fdff;
	--notion-tint: #f0f4ff;
	--invite-tint: #fff0f6;
	--purple-tint: #faf8ff;
	/* BLUE THEME: was #faf8ff */
}

/* Automatic dark mode palette */
@media (prefers-color-scheme: dark) {
	:root {
		--ink: #fafafa;
		--mute: #a1a1aa;
		--hint: #52525b;
		--bg: #09090b;
		--bg2: #18181b;
		--bg3: #27272a;
		--border: rgba(255, 255, 255, 0.08);
		--border2: rgba(255, 255, 255, 0.16);
		--nb: #3b82f6;
		--nb-bg: #1e3a5f;
		--nb-dark: #60a5fa;
		--rose: #f472b6;
		--rose-bg: #3b1030;
		--rose-dark: #ec4899;
		--green: #4ade80;
		--green-bg: #052e16;
		--amber: #fbbf24;
		--amber-bg: #451a03;
		--purple: #a78bfa;
		--purple-bg: #161321;
		--auto: #22d3ee;
		--auto-bg: #083344;
		--auto-dark: #67e8f9;
		--auto-tint: #042f3d;
		--notion-tint: #0f172a;
		--invite-tint: #1a0a12;
		--purple-tint: #0d0414;
		/* BLUE THEME: was #0d0414 */
	}
}


/* ═══════════════════════════════════════════════════════════════════════════════
   2) BASE ELEMENT STYLES
   - Defines global document behavior
   - Establishes body typography, colors, and reading rhythm
   ═══════════════════════════════════════════════════════════════════════════════ */

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sans);
	color: var(--ink);
	background: var(--bg);
	font-size: 17px;
	line-height: 1.75;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   3) KEYFRAME ANIMATIONS
   - Reusable motion primitives for text, cards, reveal effects, and loaders
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Cursor blink effect */
@keyframes blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

/* Small playful wobble used for attention or hover interactions */
@keyframes wobble {

	0%,
	100% {
		transform: rotate(0);
	}

	15% {
		transform: rotate(-6deg) scale(1.05);
	}

	30% {
		transform: rotate(5deg) scale(1.05);
	}

	45% {
		transform: rotate(-4deg);
	}

	60% {
		transform: rotate(3deg);
	}

	75% {
		transform: rotate(-2deg);
	}

	90% {
		transform: rotate(1deg);
	}
}

/* Vertical fade-in reveal */
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Horizontal entrance animation */
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Scale-in animation for cards or modal-like elements */
@keyframes popIn {
	from {
		opacity: 0;
		transform: scale(0.85);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Moving light sweep for gradient shimmer effects */
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

/* Soft opacity pulsing */
@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.6;
	}
}

/* Gentle floating motion */
@keyframes floatY {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

/* Blue pulse ring for cards or highlighted components */
@keyframes cardPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55);
	}

	70% {
		box-shadow: 0 0 0 14px rgba(37, 99, 235, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
	}
}

/* Rose pulse ring variant */
@keyframes cardPulseRose {
	0% {
		box-shadow: 0 0 0 0 rgba(190, 24, 93, 0.55);
	}

	70% {
		box-shadow: 0 0 0 14px rgba(190, 24, 93, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(190, 24, 93, 0);
	}
}


/* ═══════════════════════════════════════════════════════════════════════════════
   4) GLOBAL UTILITY CLASSES
   - Small reusable classes for motion, stagger, and typing cursor
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Triggers wobble animation */
.wobble {
	animation: wobble 0.6s ease;
}

/* Base hidden state for scroll reveal animations */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Active reveal state */
.reveal.visible {
	opacity: 1;
	transform: none;
}

/* Stagger delay helpers */
.d1 {
	transition-delay: 0.08s;
}

.d2 {
	transition-delay: 0.16s;
}

.d3 {
	transition-delay: 0.24s;
}

.d4 {
	transition-delay: 0.32s;
}

.d5 {
	transition-delay: 0.40s;
}

.d6 {
	transition-delay: 0.48s;
}

.d7 {
	transition-delay: 0.56s;
}

.d8 {
	transition-delay: 0.64s;
}

/* Typing cursor style */
.tcursor {
	display: inline-block;
	animation: blink 0.75s step-end infinite;
	color: var(--mute);
	font-style: normal;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   5) PAGE TIMELINE & VERTICAL SCROLL PROGRESS
   - Top progress bar
   - Left-side vertical progress indicator
   - Includes one apparent stray/incomplete block preserved for reference
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Thin fixed bar across the top of the page */
.page-timeline {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 999;
	background: var(--bg3);
	pointer-events: none;
}

/* Animated fill inside the top progress bar */
.page-timeline-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(to right,
			#ffffff,
			/* Home */
			var(--gold),
			/* About */
			var(--nb),
			/* Notion */
			var(--rose),
			/* Invites */
			var(--purple),
			/* Websites */
			var(--auto),
			/* Automations */
			var(--green)
			/* Contact */
		);
	transition: width 0.1s linear;
	border-radius: 2px;
}

/* NOTE:
   This first .vline-track block appears incomplete:
   - property `w` is invalid/incomplete
   - this block is later redefined below with full valid properties
   Preserved as-is for now because you asked for comments, not logic changes. */
.vline-track {
	position: fixed;
	left: 0;
	top: 3px;
	bottom: 0;
	/* background: linear-gradient(to right, var(--nb), var(--auto), var(--rose)); */
	background: linear-gradient(to right,
			#ffffff,
			/* Home */
			var(--gold),
			/* About */
			var(--nb),
			/* Notion */
			var(--rose),
			/* Invites */
			var(--purple),
			/* Websites */
			var(--auto),
			/* Automations */
			var(--green)
			/* Contact */
		);
	transition: width 0.1s linear;
	border-radius: 2px;
}

/* Actual vertical track definition used for the left progress line */
.vline-track {
	position: fixed;
	left: 0;
	top: 3px;
	bottom: 0;
	width: 3px;
	z-index: 200;
	background: var(--bg3);
	pointer-events: none;
}

/* Animated fill for the vertical progress line */
.vline-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	/* background: linear-gradient(to bottom, var(--nb), var(--auto), var(--rose)); */
	background: linear-gradient(to bottom,
			#ffffff,
			/* Home */
			var(--gold),
			/* About */
			var(--nb),
			/* Notion */
			var(--rose),
			/* Invites */
			var(--purple),
			/* Websites */
			var(--auto),
			/* Automations */
			var(--green)
			/* Contact */
		);
	transition: height 0.1s linear;
	border-radius: 0 0 2px 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   6) TOP NAVIGATION
   - Sticky nav bar with logo, links, CTA, and mobile hamburger menu
   ═══════════════════════════════════════════════════════════════════════════════ */

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.1rem 2.5rem;
	border-bottom: 0.5px solid var(--border);
	position: sticky;
	top: 0;
	background: var(--bg);
	z-index: 100;
	backdrop-filter: blur(8px);
}

/* Brand mark / text logo */
.nav-logo {
	font-family: var(--serif);
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: opacity 0.2s;
}

.nav-logo:hover {
	opacity: 0.8;
}

/* Highlighted word or accent span inside logo */
.nav-logo span {
	font-style: italic;
	color: var(--gold);
}

/* Main nav link list */
.nav-links {
	display: flex;
	gap: 1.4rem;
	list-style: none;
}

/* Individual nav links */
.nav-links a {
	text-decoration: none;
	color: var(--mute);
	font-size: 14px;
	transition: color 0.2s, transform 0.2s;
	display: inline-block;
}

.nav-links a:hover {
	color: var(--ink);
	transform: translateY(-1px);
}

/* Primary navigation call-to-action button */
.nav-cta {
	background: linear-gradient(135deg, var(--nb), var(--nb-dark));
	color: #fff;
	padding: 0.45rem 1.1rem;
	border-radius: var(--radius-md);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: opacity 0.2s, transform 0.15s;
}

.nav-cta:hover {
	opacity: 0.8;
	transform: translateY(-1px);
}

/* Hamburger button shown on mobile */
.nav-ham {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--ink);
	font-size: 1.4rem;
	line-height: 1;
}

/* Mobile nav behavior */
@media (max-width: 800px) {

	.nav-links,
	.nav-cta {
		display: none;
	}

	.nav-ham {
		display: block;
	}

	/* Expanded mobile nav menu */
	.nav-links.open {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bg);
		border-bottom: 0.5px solid var(--border);
		padding: 1.25rem 2.5rem;
		gap: 1rem;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════════
   7) HERO SECTION
   - Main landing header, intro text, CTA buttons, and visual background glow
   ═══════════════════════════════════════════════════════════════════════════════ */

.hero {
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 4rem 2.5rem 3rem;
	border-bottom: 0.5px solid var(--border);
	position: relative;
	overflow: hidden;
}

/* Decorative ambient glow behind hero content */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 55% at 50% 55%,
			rgba(37, 99, 235, 0.07) 0%,
			rgba(190, 24, 93, 0.05) 50%,
			transparent 75%);
	pointer-events: none;
	animation: pulse 4s ease-in-out infinite;
	z-index: 0;
}

/* Small uppercase label above hero heading */
.hero-tag {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
	background: linear-gradient(90deg, #b8924a, #d4a96a, #b8924a);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: shimmer 3s linear infinite;
	display: inline-block;
	position: relative;
	z-index: 1;
}

/* Main hero headline */
.hero h1 {
	font-family: var(--serif);
	font-size: clamp(2.8rem, 6vw, 5rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin-bottom: 1.5rem;
	max-width: 780px;
	animation: fadeUp 0.8s ease 0.2s both;
	position: relative;
	z-index: 1;
}

/* Gradient-highlighted emphasis within heading */
.hero h1 em {
	font-style: italic;
	background: linear-gradient(135deg, var(--nb), var(--rose));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Supporting intro text */
.hero-sub {
	font-size: 1.1rem;
	color: var(--mute);
	max-width: 540px;
	margin: 0 auto 2.25rem;
	line-height: 1.8;
	animation: fadeUp 0.8s ease 0.4s both;
	position: relative;
	z-index: 1;
}

/* Hero CTA button row */
.hero-btns {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	animation: fadeUp 0.8s ease 0.6s both;
	position: relative;
	z-index: 1;
}

/* Container for hero service links/cards if present */
.hero-services {
	position: relative;
	z-index: 1;
}

/* Primary button style */
.btn-p {
	background: linear-gradient(135deg, var(--nb), var(--nb-dark));
	color: #fff;
	padding: 0.75rem 1.6rem;
	border-radius: var(--radius-md);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: opacity 0.2s, transform 0.15s;
	display: inline-block;
}

.btn-p:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

/* Ghost / secondary button style */
.btn-g {
	border: 0.5px solid var(--border2);
	padding: 0.75rem 1.6rem;
	border-radius: var(--radius-md);
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
	transition: background 0.2s, transform 0.15s;
	display: inline-block;
}

.btn-g:hover {
	background: var(--bg2);
	transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   8) HERO SERVICE CARDS
   - Compact linked cards shown near the hero for service categories
   ═══════════════════════════════════════════════════════════════════════════════ */

.hero-svc-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 1rem 1.5rem;
	border-radius: var(--radius-lg);
	border: 1px solid;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
	min-width: 180px;
	text-align: center;
}

.hero-svc-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Service card title */
.hero-svc-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Service card subtitle / descriptor */
.hero-svc-sub {
	font-size: 11px;
	color: var(--mute);
	line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   9) GENERIC SECTION STYLES
   - Shared spacing and visual separators for major page sections
   - Color-coded left borders for specific anchor sections
   ═══════════════════════════════════════════════════════════════════════════════ */

section {
	padding: 4rem 2.5rem;
	border-bottom: 0.5px solid var(--border);
	position: relative;
}

/* Service-specific accent borders */
section#notion {
	border-left: 3px solid var(--nb);
}

section#automations {
	border-left: 3px solid var(--auto);
}

section#webinvites {
	border-left: 3px solid var(--rose);
}

section#contact {
	border-left: 3px solid var(--green);
}

/* Corrected selectors */
section#about {
	border-left: 3px solid var(--gold);
}

section#websites {
	border-left: 3px solid var(--purple);
}

/* Main section heading */
.sec-title {
	font-family: var(--serif);
	font-size: clamp(2.6rem, 5.5vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin-bottom: 0.75rem;
}

/* Muted italic emphasis inside section headings */
.sec-title em {
	font-style: italic;
	color: var(--mute);
}

/* Section intro/subtext */
.sec-sub {
	font-size: 15px;
	color: var(--mute);
	max-width: 560px;
	margin-bottom: 2rem;
	line-height: 1.8;
}


/* ── SECTION BADGES ────────────────────────────────────────────────────────────
   Reusable pill-like label used at the start of major sections
   Variants below map to different service color themes
   ───────────────────────────────────────────────────────────────────────────── */

.sec-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 1.3rem;
	border-radius: 100px;
	border: 2px solid;
	margin-bottom: 1.5rem;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.sec-badge:hover {
	transform: scale(1.04);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.sec-badge.nb {
	color: var(--nb);
	border-color: var(--nb);
	background: var(--nb-bg);
}

.sec-badge.rose {
	color: var(--rose);
	border-color: var(--rose);
	background: var(--rose-bg);
}

.sec-badge.auto {
	color: var(--auto);
	border-color: var(--auto);
	background: var(--auto-bg);
}

.sec-badge.gold {
	color: var(--gold);
	border-color: var(--gold);
	background: var(--amber-bg);
}

.sec-badge.green {
	color: var(--green);
	border-color: var(--green);
	background: var(--green-bg);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   10) PILLS
   - Small tag chips used for categories, highlights, or quick labels
   ═══════════════════════════════════════════════════════════════════════════════ */

.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.pill-n {
	font-size: 13px;
	padding: 0.35rem 0.9rem;
	border-radius: 100px;
	border: 1px solid var(--nb);
	color: var(--nb);
	background: var(--nb-bg);
	font-weight: 500;
	transition: transform 0.15s;
}

.pill-i {
	font-size: 13px;
	padding: 0.35rem 0.9rem;
	border-radius: 100px;
	border: 1px solid var(--rose);
	color: var(--rose);
	background: var(--rose-bg);
	font-weight: 500;
	transition: transform 0.15s;
}

.pill-a {
	font-size: 13px;
	padding: 0.35rem 0.9rem;
	border-radius: 100px;
	border: 1px solid var(--auto);
	color: var(--auto);
	background: var(--auto-bg);
	font-weight: 500;
	transition: transform 0.15s;
}

.pill-n:hover,
.pill-i:hover,
.pill-a:hover {
	transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   11) ABOUT SECTION
   - Two-column intro layout
   - Statistic cards and supporting copy
   ═══════════════════════════════════════════════════════════════════════════════ */

.about-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 4rem;
	align-items: start;
	margin-top: 1.5rem;
}

/* Stack columns on smaller screens */
@media (max-width: 680px) {
	.about-grid {
		grid-template-columns: 1fr;
	}
}

/* About section paragraph text */
.about-body p {
	font-size: 15px;
	color: var(--mute);
	line-height: 1.85;
	margin-bottom: 1rem;
}

/* Stats wrapper grid */
.stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--border);
	border: 0.5px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* Individual stat tile */
.stat {
	background: var(--bg);
	padding: 1.4rem;
	text-align: center;
	transition: background 0.25s, transform 0.25s;
	cursor: default;
}

.stat:hover {
	background: var(--bg2);
	transform: scale(1.03);
}

/* Stat number */
.stat-n {
	font-family: var(--serif);
	font-size: 2.2rem;
	line-height: 1;
	margin-bottom: 0.35rem;
	background: linear-gradient(135deg, #b8924a, #d4a96a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Stat label */
.stat-l {
	font-size: 13px;
	color: var(--mute);
	line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   12) TEMPLATE GRID & TEMPLATE CARDS
   - Used for showcases, examples, templates, or content collections
   ═══════════════════════════════════════════════════════════════════════════════ */

.tmpl-phase {
	margin-bottom: 2rem;
}

/* Small label heading for template groups/phases */
.tmpl-simple-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.85rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Circular dot marker inside template label */
.tmpl-simple-label span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

/* Responsive template card grid */
.tgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

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

/* Template card base */
.tc {
	border: 0.5px solid var(--border);
	border-radius: var(--radius-lg);
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	cursor: pointer;
	width: 100%;
	padding: 1.5rem;
	/* Increased padding to match the larger width */
	min-height: 320px;
	/* Optional: ensures uniform height if text varies */
}

.tc:hover {
	border-color: var(--border2);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Special state for cards that represent live items */
.tc.live-card {
	background: rgba(21, 128, 61, 0.07);
	border-color: rgba(21, 128, 61, 0.3);
}

/* Live status badge */
.badge-live {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #14532d;
	background: #bbf7d0;
	border-radius: 100px;
	padding: 3px 10px;
	display: inline-block;
	align-self: flex-start;
	border: 1px solid #16a34a;
}

/* Free plan/price badge */
.badge-free {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	padding: 3px 9px;
	border-radius: var(--radius-md);
	background: var(--green-bg);
	color: var(--green);
}

/* Paid plan/price badge */
.badge-paid {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	padding: 3px 9px;
	border-radius: var(--radius-md);
	background: var(--nb-bg);
	color: var(--nb);
}

/* Template card title */
.tc h4 {
	font-size: 0.95rem;
	font-weight: 500;
}

/* Template card body copy */
.tc p {
	font-size: 13px;
	color: var(--mute);
	line-height: 1.6;
	flex: 1;
}

/* Bottom row of each template card */
.tc-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: auto;
}

/* Link stack within card footer */
.tc-lks {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

/* Template card link */
.tc-a {
	font-size: 11px;
	color: var(--nb);
	text-decoration: none;
	border-bottom: 0.5px solid rgba(37, 99, 235, 0.3);
	transition: opacity 0.2s;
}

.tc-a:hover {
	opacity: 0.7;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   13) WEB INVITES ACCORDION
   - Accordion container for invitation-related content sections
   ═══════════════════════════════════════════════════════════════════════════════ */

.wi-accordion {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 2.5rem;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   WEDDING INVITES ACCORDION SYSTEM
   Primary accordion component for service breakdowns
   ═════════════════════════════════════════════════════════════════════════════════ */

.wi-acc-item {
	border: 0.5px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color 0.2s;
}

.wi-acc-item:hover {
	border-color: var(--rose);
}

/* Accordion button styling */
.wi-acc-btn {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--bg);
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	font-family: var(--sans);
	color: var(--ink);
	text-align: left;
	transition: background 0.2s;
}

/* Subtitle styling within accordion button */
.wi-acc-btn em {
	font-style: italic;
	color: var(--mute);
	font-size: 14px;
}

.wi-acc-btn:hover {
	background: var(--rose-bg);
}

/* Expand/collapse icon */
.wi-acc-ico {
	font-size: 1.2rem;
	color: var(--rose);
	flex-shrink: 0;
	transition: transform 0.25s;
}

.wi-acc-item.open .wi-acc-ico {
	transform: rotate(45deg);
}

.wi-acc-item.open .wi-acc-btn {
	/* background: var(--rose-bg); */
	/* Commented: active state background */
}

/* Collapsible content area */
.wi-acc-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.wi-acc-item.open .wi-acc-body {
	max-height: 600px;
}

/* Service grid within accordion */
.wi-acc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0.75rem;
	padding: 1rem 1.25rem 1.25rem;
}

@media (max-width: 640px) {
	.wi-acc-grid {
		grid-template-columns: 1fr;
	}
}

/* Individual service cards */
.wi-acc-card {
	background: var(--bg2);
	border-radius: var(--radius-md);
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--rose);
}

.wi-acc-name {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 0.25rem;
	color: var(--ink);
}

.wi-acc-desc {
	font-size: 12px;
	color: var(--mute);
	line-height: 1.55;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   NOTION SYSTEMS ACCORDION
   Secondary accordion with Notion branding
   ═════════════════════════════════════════════════════════════════════════════════ */

.notion-accordion {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 2.5rem;
}

.notion-acc-item {
	border: 0.5px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color 0.2s;
}

.notion-acc-item:hover {
	border-color: var(--nb);
}

/* Notion accordion button */
.notion-acc-btn {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--bg);
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	font-family: var(--sans);
	color: var(--ink);
	text-align: left;
	transition: background 0.2s;
}

.notion-acc-btn em {
	font-style: italic;
	color: var(--mute);
	font-size: 14px;
}

.notion-acc-btn:hover {
	background: var(--nb-bg);
}

.notion-acc-ico {
	font-size: 1.2rem;
	color: var(--nb);
	flex-shrink: 0;
	transition: transform 0.25s;
}

.notion-acc-item.open .notion-acc-ico {
	transform: rotate(45deg);
}

.notion-acc-item.open .notion-acc-btn {
	/* background: var(--nb-bg); */
}

.notion-acc-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.notion-acc-item.open .notion-acc-body {
	max-height: 600px;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   SUBSECTIONS & FAQ SYSTEM
   Section dividers and expandable FAQ items
   ═════════════════════════════════════════════════════════════════════════════════ */

.sub-section {
	padding-top: 2rem;
	margin-top: 2rem;
	border-top: 1px solid var(--border2);
	scroll-margin-top: 5rem;
}

.faq-section-header {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.faq-item {
	border: 0.5px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color 0.2s;
}

.faq-item:hover {
	border-color: var(--border2);
}

/* FAQ question styling */
.faq-q {
	padding: 1rem 1.1rem;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	transition: background 0.2s;
}

.faq-q:hover {
	background: var(--rose-bg);
}

.faq-ico {
	font-size: 1.1rem;
	color: var(--gold);
	flex-shrink: 0;
	transition: transform 0.25s;
}

/* FAQ answer content */
.faq-a {
	padding: 0 1.1rem;
	font-size: 14px;
	color: var(--mute);
	line-height: 1.75;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-a {
	max-height: 220px;
	padding: 0.5rem 1.1rem 1rem;
}

.faq-item.open .faq-ico {
	transform: rotate(45deg) !important;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   ADDONS & SERVICES GRID
   Upsell services and additional offerings
   ═════════════════════════════════════════════════════════════════════════════════ */

.addons {
	margin-top: 1.5rem;
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	border: 0.5px solid;
	border-top: 3px solid;
}

.addons-hdr {
	margin-bottom: 1.25rem;
}

.addons-hdr h4 {
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 0.25rem;
	background: linear-gradient(90deg, var(--nb), var(--nb-dark));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.addons-sub {
	font-size: 13px;
	color: var(--mute);
}

.addon-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0.75rem;
}

@media (max-width: 640px) {
	.addon-list {
		grid-template-columns: 1fr;
	}
}

.addon {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	background: var(--bg);
	border: 0.5px solid var(--border);
	border-radius: var(--radius-md);
	padding: 0.9rem 1rem;
	transition: border-color 0.2s, transform 0.2s;
}

.addon:hover {
	border-color: var(--border2);
	transform: translateY(-2px);
}

.addon-ico {
	font-size: 1.3rem;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
}

.addon-body {
	flex: 1;
	min-width: 0;
}

.addon-name {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 0.2rem;
	color: var(--ink);
}

.addon-desc {
	font-size: 12px;
	color: var(--mute);
	line-height: 1.5;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   PRICING CARDS SYSTEM
   Multi-tier pricing display with feature comparison
   ═════════════════════════════════════════════════════════════════════════════════ */

.psec-lbl {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.85rem;
	margin-top: 1.5rem;
	display: flex;
	align-items: center;
	gap: 6px;
}

.psec-lbl.invite {
	color: var(--rose);
}

.psec-lbl.notion {
	color: var(--nb);
}

.pgrid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

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

.pcard {
	border: 0.5px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
	cursor: pointer;
}

.pcard:hover {
	transform: translateY(-4px);
	border-color: var(--border2);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.pcard.feat {
	border: 1.5px solid var(--rose);
}

.pbadge {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #fff;
	padding: 3px 10px;
	border-radius: var(--radius-md);
	align-self: flex-start;
}

.pcard h3 {
	font-family: var(--serif);
	font-size: 1.15rem;
	line-height: 1.2;
}

.pprice {
	font-size: 2.1rem;
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1;
	background: linear-gradient(135deg, #b8924a, #d4a96a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.pprice sup {
	font-size: 0.95rem;
	font-weight: 400;
	vertical-align: super;
}

.pprice-n {
	font-size: 13px;
	color: var(--mute);
}

.pdesc {
	font-size: 14px;
	color: var(--mute);
	line-height: 1.65;
}

.pfeats {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0.25rem 0;
}

.pf {
	font-size: 13px;
	color: var(--mute);
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	line-height: 1.5;
}

.pf-ck-notion {
	color: var(--nb);
	font-weight: 600;
	flex-shrink: 0;
}

.pf-ck-web-inivites {
	color: var(--rose);
	font-weight: 600;
	flex-shrink: 0;
}

.pf-ck-auto {
	color: var(--auto);
	font-weight: 600;
	flex-shrink: 0;
}

/* Pricing card buttons */
.pbtn {
	display: block;
	text-align: center;
	padding: 0.65rem;
	border-radius: var(--radius-md);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	border: 0.5px solid var(--border2);
	color: var(--ink);
	transition: background 0.2s, transform 0.15s;
	margin-top: auto;
}

.pbtn:hover {
	background: var(--bg2);
	transform: translateY(-1px);
}

.pcard.feat .pbtn {
	background: linear-gradient(135deg, var(--rose), var(--rose-dark));
	color: #fff;
	border-color: transparent;
}

.pcard.feat .pbtn:hover {
	opacity: 0.85;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   COMPARISON TABLE SYSTEM
   Expandable feature comparison tables
   ═════════════════════════════════════════════════════════════════════════════════ */

.cmp-block {
	border: 0.5px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 1.5rem;
}

.cmp-btn {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.9rem 1.25rem;
	background: var(--invite-tint);
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	font-family: var(--sans);
	color: var(--rose);
	transition: background 0.2s;
}

.cmp-btn:hover {
	background: var(--bg3);
}

.cmp-ico {
	font-size: 1rem;
	transition: transform 0.3s;
	color: var(--rose);
}

.cmp-block.open .cmp-ico {
	transform: rotate(180deg);
}

.cmp-wrap {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.cmp-block.open .cmp-wrap {
	max-height: 600px;
}

/* Comparison table styling */
.ctbl {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.ctbl th,
.ctbl td {
	padding: 0.5rem 0.9rem;
	border-bottom: 0.5px solid var(--border);
	text-align: left;
}

.ctbl th:not(:first-child) {
	text-align: center;
}

.ctbl th {
	background: var(--bg3);
	font-weight: 500;
}

.ctbl td:first-child {
	color: var(--mute);
}

.ctbl td:not(:first-child) {
	text-align: center;
	font-weight: 500;
}

.ctbl tr:last-child td {
	border-bottom: none;
}

.ctbl tr:hover td {
	background: var(--bg2);
}

.cy {
	color: var(--rose) !important;
	font-size: 15px;
}

.cn {
	color: #dc2626 !important;
	font-size: 15px;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   AUTOMATION CARDS GRID
   Workflow automation service showcase
   ═════════════════════════════════════════════════════════════════════════════════ */

.auto-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-top: 1rem;
}

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

.auto-card {
	display: flex;
	gap: 1.1rem;
	background: var(--bg);
	border: 0.5px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.4rem;
	transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
	cursor: pointer;
}

.auto-card:hover {
	border-color: var(--auto);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(8, 145, 178, 0.12);
}

.auto-ico {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	flex-shrink: 0;
	transition: transform 0.3s;
}

.auto-card:hover .auto-ico {
	transform: scale(1.1) rotate(-5deg);
}

.auto-body h4 {
	font-size: 0.95rem;
	font-weight: 500;
	margin-bottom: 0.35rem;
	color: var(--ink);
}

.auto-body p {
	font-size: 13px;
	color: var(--mute);
	line-height: 1.65;
	margin-bottom: 0.65rem;
}

.auto-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.auto-tag {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 100px;
	background: var(--auto-bg);
	color: var(--auto);
	border: 0.5px solid var(--auto);
	font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   PORTFOLIO GRID SYSTEM
   Project showcase cards
   ═════════════════════════════════════════════════════════════════════════════════ */

.pgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.4rem;
}

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

.pc {
	border: 0.5px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s;
	cursor: pointer;
}

.pc:hover {
	border-color: var(--rose);
	transform: translateY(-5px);
	box-shadow: 0 12px 32px rgba(190, 24, 93, 0.12);
}

/* Portfolio thumbnail backgrounds */
.pthumb-pink {
	height: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	background: linear-gradient(135deg, #fdf0f1 0%, #f9e0e3 50%, #f5cfd4 100%);
}

.p-logo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-size: 1.05rem;
	color: var(--gold);
	letter-spacing: 0.05em;
	transition: transform 0.3s;
}

.pc:hover .p-logo {
	transform: scale(1.12) rotate(5deg);
}

.p-tlbl {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9d174d;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.6);
	padding: 3px 10px;
	border-radius: 4px;
}

.p-info {
	padding: 1rem 1.1rem;
	border-top: 0.5px solid var(--border);
}

.p-tag {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin-bottom: 0.3rem;
	color: var(--rose);
}

.p-info h4 {
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 0.4rem;
}

.p-lks {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.p-lks a {
	font-size: 12px;
	color: var(--mute);
	text-decoration: none;
	border-bottom: 0.5px solid var(--border);
	display: inline-block;
	width: fit-content;
	transition: color 0.2s;
}

.p-lks a:hover {
	color: var(--rose);
}

/* ═════════════════════════════════════════════════════════════════════════════════
   PROCESS TIMELINE / STEPS
   Visual workflow steps with animated timeline
   ═════════════════════════════════════════════════════════════════════════════════ */

.proc-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 2rem;
	position: relative;
	padding-left: 2.5rem;
}

.proc-steps::before {
	content: '';
	position: absolute;
	left: 0.8rem;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 3px;
	background: linear-gradient(to bottom, var(--rose-bg), var(--rose), var(--rose-dark));
	border-radius: 2px;
}

.step {
	position: relative;
	padding: 1.25rem 1.25rem 1.25rem 1.5rem;
	margin-bottom: 1rem;
	background: var(--bg);
	border: 0.5px solid var(--border);
	border-radius: var(--radius-lg);
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
	cursor: pointer;
}

.step::before {
	content: '';
	position: absolute;
	left: -2.15rem;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: linear-gradient(to bottom, var(--rose-bg), var(--rose), var(--rose-dark));
	border: 3px solid var(--bg);
	box-shadow: 0 0 0 2px var(--rose);
	transition: transform 0.2s, box-shadow 0.2s;
}

.step:hover {
	border-color: var(--rose);
	transform: translateX(6px);
	box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1);
}

.step:hover::before {
	transform: translateY(-50%) scale(1.3);
}

.step-n {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nb);
	margin-bottom: 0.3rem;
}

.step-w {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rose);
	margin-bottom: 0.3rem;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   MULTI-SELECT DROPDOWNS
   Custom checkbox selection components
   ═════════════════════════════════════════════════════════════════════════════════ */

.ms-opt {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.9rem;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.15s;
	border-radius: 4px;
	margin: 2px 4px;
}

.ms-opt:hover {
	background: var(--bg2);
}

.ms-opt input[type='checkbox'] {
	width: 15px;
	height: 15px;
	accent-color: var(--nb);
	cursor: pointer;
	flex-shrink: 0;
}

.ms-opt-group {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.6rem 0.9rem 0.3rem;
	color: var(--mute);
	border-top: 0.5px solid var(--border);
	margin-top: 4px;
}

.ms-opt-group:first-child {
	border-top: none;
	margin-top: 0;
}

.ms-arrow {
	font-size: 0.8rem;
	color: var(--mute);
	transition: transform 0.2s;
	flex-shrink: 0;
}

.multi-select.open .ms-arrow {
	transform: rotate(180deg);
}

/* ═════════════════════════════════════════════════════════════════════════════════
   CONTACT SECTION GRID
   Contact information and links layout
   ═════════════════════════════════════════════════════════════════════════════════ */

.cgrid {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 4rem;
	align-items: start;
	margin-top: 2rem;
}

@media (max-width: 700px) {
	.cgrid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.cg-lbl {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 0.4rem;
	padding-bottom: 0.3rem;
	border-bottom: 0.5px solid var(--border);
}

.cinfo {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.clink {
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--ink);
	text-decoration: none;
	padding: 0.5rem 0.7rem;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--border);
	transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.clink svg {
	flex-shrink: 0;
	color: var(--mute);
}

.clink:hover {
	border-color: var(--border2);
	background: var(--bg2);
	transform: translateX(3px);
}

.clink[data-brand='notion']:hover {
	border-color: #37352f;
	background: rgba(55, 53, 47, 0.07);
	color: #37352f;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   CONTACT LINKS – BRANDED HOVER STYLES
   Custom hover styles for each brand‑specific contact link
   ═════════════════════════════════════════════════════════════════════════════════ */

.clink[data-brand='gumroad']:hover {
	border-color: #ff90e8;
	background: rgba(255, 144, 232, 0.09);
	color: #e879d8;
}

.clink[data-brand='linkedin']:hover {
	border-color: #0a66c2;
	background: rgba(10, 102, 194, 0.07);
	color: #0a66c2;
}

.clink[data-brand='email']:hover {
	border-color: var(--green);
	background: var(--green-bg);
	color: var(--green);
}

.clink[data-brand='phone']:hover {
	border-color: var(--green);
	background: var(--green-bg);
	color: var(--green);
}

.clink[data-brand='instagram']:hover {
	border-color: #e1306c;
	background: rgba(225, 48, 108, 0.07);
	color: #e1306c;
}

/* Dark‑mode override for Notion brand hover */
@media (prefers-color-scheme: dark) {
	.clink[data-brand='notion']:hover {
		border-color: #aaa;
		background: rgba(255, 255, 255, 0.05);
		color: #ccc;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTACT FORM STYLING
   Main container, labels, inputs, and submit button
   ───────────────────────────────────────────────────────────────────────────── */

.cform {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.form-intro {
	font-size: 15px;
	color: var(--mute);
	line-height: 1.8;
	margin-bottom: 1.25rem;
}

.frow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

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

.fg {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.fg label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mute);
}

.fg input,
.fg textarea {
	background: var(--bg);
	border: 0.5px solid var(--border2);
	border-radius: var(--radius-md);
	padding: 0.65rem 0.9rem;
	font-size: 14px;
	font-family: var(--sans);
	color: var(--ink);
	outline: none;
	transition: border-color 0.2s;
	width: 100%;
}

.fg input:focus,
.fg textarea:focus {
	border-color: var(--ink);
}

.fg textarea {
	min-height: 110px;
	resize: vertical;
	line-height: 1.65;
}

.sbtn {
	background: linear-gradient(135deg, var(--nb), var(--nb-dark));
	color: #fff;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-md);
	font-size: 15px;
	font-weight: 500;
	font-family: var(--sans);
	cursor: pointer;
	align-self: flex-start;
	transition: opacity 0.2s, transform 0.15s;
}

.sbtn:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

.sbtn:disabled {
	opacity: 0.5;
	cursor: default;
	transform: none;
}

.fstatus {
	font-size: 13px;
	color: var(--green);
	margin-top: 0.25rem;
	min-height: 1.2em;
}

.fstatus.err {
	color: #dc2626;
}

/* ═════════════════════════════════════════════════════════════════════════════════
   SITE FOOTER
   Logo, copyright, and navigation links
   ═════════════════════════════════════════════════════════════════════════════════ */

.site-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.1rem 2.5rem;
	background: var(--bg);
	border-top: 0.5px solid var(--border);
	flex-wrap: wrap;
	gap: 1rem;
}

.foot-logo {
	font-family: var(--serif);
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}

.foot-logo span {
	font-style: italic;
	color: var(--gold);
}

.foot-copy {
	font-size: 12px;
	color: var(--hint);
}

.foot-nav {
	display: flex;
	gap: 1.4rem;
	list-style: none;
}

.foot-nav a {
	text-decoration: none;
	color: var(--mute);
	font-size: 14px;
	transition: color 0.2s;
}

.foot-nav a:hover {
	color: var(--ink);
}

/* ═════════════════════════════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   Global padding tweaks for mobile breakpoints
   ═════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {

	section,
	.hero {
		padding: 3rem 1.25rem;
	}

	nav,
	.site-footer {
		padding: 1rem 1.25rem;
	}

	.hero {
		min-height: 70vh;
		padding: 3rem 1.25rem 2.5rem;
	}
}

@media (max-width: 480px) {

	section,
	.hero {
		padding: 2.5rem 1rem;
	}

	.sec-title {
		font-size: clamp(2rem, 5vw, 3.2rem);
	}

	.pgrid,
	.pgrid2,
	.tgrid {
		grid-template-columns: 1fr;
	}
}

/* ── WEBSITES SECTION STYLING ── */
.sec-badge.purple {
	color: var(--purple);
	border-color: var(--purple);
	background: var(--purple-bg);
}

section#websites {
	border-left: 3px solid var(--purple);
}

/* ── SUBSECTION HEADERS WITH BORDER-TOP ── */
.sub-section[style*="border-top: 3px solid var(--purple)"] {
	border-top: 3px solid var(--purple) !important;
}

.sub-section[style*="border-top: 3px solid var(--nb)"] {
	border-top: 3px solid var(--nb) !important;
}

.sub-section[style*="border-top: 3px solid var(--rose)"] {
	border-top: 3px solid var(--rose) !important;
}

.sub-section[style*="border-top: 3px solid var(--auto)"] {
	border-top: 3px solid var(--auto) !important;
}

.pf-ck-web {
	color: var(--purple);
	font-weight: 600;
}

/* ABOUT SECTION – WARM CHARCOAL WITH GOLD HIGHLIGHT */
#about {
	background-color: #221f1a !important;
	border-left: 4px solid var(--gold);
	box-shadow: inset 10px 0 30px -10px rgba(184, 146, 74, 0.15);
	position: relative;
	z-index: 5;
}

/* CONTACT SECTION – COOL EMERALD SLATE */
#contact {
	background-color: #1a221e !important;
	border-left: 4px solid var(--green);
	box-shadow: inset 10px 0 30px -10px rgba(21, 128, 61, 0.15);
}

/* White‑text contrast on brighter backgrounds */
#about .sec-title,
#contact .sec-title {
	color: #ffffff;
}

/* Light‑gray body text for readability */
#about p,
#contact .form-intro {
	color: #d1d5db;
	font-weight: 400;
}

/* Subtle glow on About badge */
#badge-about {
	box-shadow: 0 0 15px rgba(184, 146, 74, 0.1);
}

/* Highlight key terms in About section paragraphs */
#about p:nth-of-type(2) strong {
	color: var(--rose);
}

/* Web Invites term */
#about p:nth-of-type(3) strong {
	color: var(--purple);
}

/* Websites term */
#about p:nth-of-type(4) strong {
	color: var(--auto);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION LAYOUT & SPACING
   Tighten padding, sub‑section lines, and addons boxes
   ───────────────────────────────────────────────────────────────────────────── */

section {
	padding: 1rem 2.5rem;
	border-bottom: 0.5px solid var(--border);
	position: relative;
}

.sub-section {
	padding-top: 1.4rem;
	margin-top: 0.5rem;
	border-top: 1px solid var(--border2);
	scroll-margin-top: 5rem;
}

.sec-sub {
	margin-bottom: 0.75rem;
}

.addons {
	margin-top: 0.5rem;
	padding: 1.25rem;
	border-radius: var(--radius-lg);
	border: 0.5px solid;
	border-top: 3px solid;
}

/* Tight layout for addon name + price side‑by‑side */
.addon-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	width: 100% !important;
}

.addon-name span {
	flex-shrink: 0 !important;
	white-space: nowrap !important;
	margin-left: auto !important;
}

/* On very small mobile, stack price below */
@media (max-width: 480px) {
	.addon-name span {
		margin-left: 0 !important;
		width: 100% !important;
		display: block !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   RIGHT‑PANE TIMELINE
   Fixed vertical navigation dots and gradient connectors
   ───────────────────────────────────────────────────────────────────────────── */

.right-timeline {
	position: fixed;
	right: 0;
	top: 70px;
	bottom: 60px;
	width: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	padding: 2rem 0;
	z-index: 10000;
	pointer-events: none;
}

.rt-dot {
	width: 14px;
	height: 14px;
	background: transparent;
	border: 2px solid var(--hint);
	border-radius: 50%;
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	pointer-events: auto;
}

/* Outer ring for active/passed states */
.rt-dot.active::before,
.rt-dot.passed::before {
	content: '';
	position: absolute;
	inset: -6px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	opacity: 0.4;
	transition: all 0.3s ease;
}

.rt-dot.active::before {
	opacity: 0.8;
	transform: scale(1.1);
}

/* Line connector between dots */
.rt-connector {
	position: absolute;
	width: 2px;
	height: var(--line-height, 0px);
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	z-index: -1;
	background: var(--bg3);
	opacity: 0.2;
	transition: opacity 0.3s ease, background 0.3s ease;
}

/* Hide connector after last section */
.rt-dot[data-sec="contact"] .rt-connector {
	display: none !important;
}

/* Fully opaque when active/passed */
.rt-dot.active .rt-connector,
.rt-dot.passed .rt-connector {
	opacity: 1;
}

/* Brand‑colored gradient connectors */
.rt-dot[data-sec="hero"] .rt-connector {
	background: var(--gold);
}

.rt-dot[data-sec="about"] .rt-connector {
	background: linear-gradient(to bottom, var(--gold), var(--nb));
}

.rt-dot[data-sec="notion"] .rt-connector {
	background: linear-gradient(to bottom, var(--nb), var(--rose));
}

.rt-dot[data-sec="webinvites"] .rt-connector {
	background: linear-gradient(to bottom, var(--rose), var(--purple));
}

.rt-dot[data-sec="websites"] .rt-connector {
	background: linear-gradient(to bottom, var(--purple), var(--auto));
}

.rt-dot[data-sec="automations"] .rt-connector {
	background: linear-gradient(to bottom, var(--auto), var(--green));
}

/* Filled dot states with brand colors */
.rt-dot.active[data-sec="hero"],
.rt-dot.passed[data-sec="hero"] {
	border-color: var(--ink) !important;
	background: var(--ink);
	color: var(--ink);
}

.rt-dot.active[data-sec="about"],
.rt-dot.passed[data-sec="about"] {
	border-color: var(--gold) !important;
	background: var(--gold);
	color: var(--gold);
}

.rt-dot.active[data-sec="notion"],
.rt-dot.passed[data-sec="notion"] {
	border-color: var(--nb) !important;
	background: var(--nb);
	color: var(--nb);
}

.rt-dot.active[data-sec="webinvites"],
.rt-dot.passed[data-sec="webinvites"] {
	border-color: var(--rose) !important;
	background: var(--rose);
	color: var(--rose);
}

.rt-dot.active[data-sec="websites"],
.rt-dot.passed[data-sec="websites"] {
	border-color: var(--purple) !important;
	background: var(--purple);
	color: var(--purple);
}

.rt-dot.active[data-sec="automations"],
.rt-dot.passed[data-sec="automations"] {
	border-color: var(--auto) !important;
	background: var(--auto);
	color: var(--auto);
}

.rt-dot.active[data-sec="contact"],
.rt-dot.passed[data-sec="contact"] {
	border-color: var(--green) !important;
	background: var(--green);
	color: var(--green);
}

/* Gradient segments for visual flow */
.rt-dot.passed[data-sec="hero"] .rt-connector {
	background: linear-gradient(to bottom, var(--gold), var(--gold));
}

.rt-dot.passed[data-sec="about"] .rt-connector {
	background: linear-gradient(to bottom, var(--gold), var(--nb));
}

.rt-dot.passed[data-sec="notion"] .rt-connector {
	background: linear-gradient(to bottom, var(--nb), var(--rose));
}

.rt-dot.passed[data-sec="webinvites"] .rt-connector {
	background: linear-gradient(to bottom, var(--rose), var(--purple));
}

.rt-dot.passed[data-sec="websites"] .rt-connector {
	background: linear-gradient(to bottom, var(--purple), var(--auto));
}

.rt-dot.passed[data-sec="automations"] .rt-connector {
	background: linear-gradient(to bottom, var(--auto), var(--green));
}

/* Timeline tooltip labels */
.rt-label {
	position: absolute;
	right: 36px;
	top: 50%;
	transform: translateY(-50%);
	background: #111;
	color: #fff;
	padding: 5px 12px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	opacity: 0;
	visibility: hidden;
	transition: 0.2s ease;
	white-space: nowrap;
}

.rt-dot:hover .rt-label {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(-4px);
}

/* NOTION FAQS – HOVER THEME
   Blue-themed hover treatment for FAQ cards inside the Notion section */

#notion .faq-item:hover {
	border-color: var(--nb) !important;
	background-color: var(--nb-bg) !important;
	transform: translateY(-2px);
	transition: all 0.2s ease;
}

#notion .faq-item:hover .faq-q {
	background: transparent;
	/* Prevents the default gray hover from script-source.js */
	color: white;
}

#notion .faq-item:hover .faq-ico {
	color: white;
}

/* WEB INVITES FAQ – HOVER THEME
   Rose-themed hover state for FAQ cards in the Web Invites section */

#webinvites .faq-item {
	transition: all 0.3s ease;
}

#webinvites .faq-item:hover {
	border-color: var(--rose) !important;
	background-color: var(--rose-bg) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(190, 24, 93, 0.08);
}

#webinvites .faq-item:hover .faq-q {
	color: white;
}

#webinvites .faq-item:hover .faq-ico {
	color: white;
}

/* WEBSITES ACCORDION – HOVER & OPEN STATES
   Purple-themed accordion behavior for the Websites section */

#websites .wi-acc-item:hover {
	border-color: var(--purple) !important;
	background-color: var(--purple-bg) !important;
}

#websites .wi-acc-item:hover .wi-acc-btn {
	background-color: var(--purple-bg) !important;
	color: white;
}

#websites .wi-acc-item:hover .wi-acc-ico {
	color: var(--purple);
}

/* Keep purple theme visible when accordion is open */
#websites .wi-acc-item.open {
	border-color: var(--purple);
}

#websites .wi-acc-item.open .wi-acc-btn {
	color: var(--purple);
}

#websites .wi-acc-item.open .wi-acc-ico {
	color: var(--purple);
}

/* Force accordion icon color to remain purple */
#websites .wi-acc-ico {
	color: var(--purple) !important;
}

#websites .wi-acc-item:hover .wi-acc-ico,
#websites .wi-acc-item.open .wi-acc-ico {
	color: var(--purple) !important;
}

/* WEBSITES FAQ – HOVER & OPEN STATES
   Purple-themed FAQ interactions */

#websites .faq-item {
	transition: all 0.3s ease;
}

#websites .faq-item:hover {
	border-color: var(--purple) !important;
	background-color: var(--purple-bg) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(109, 40, 217, 0.1);
}

#websites .faq-item:hover .faq-q {
	color: var(--purple);
}

#websites .faq-item:hover .faq-ico {
	color: var(--purple);
	transform: scale(1.1);
}

/* Open state for Websites FAQ items */
#websites .faq-item.open {
	border-color: var(--purple);
	background-color: var(--purple-bg);
}

#websites .faq-item.open .faq-q {
	color: var(--purple);
}

#websites .faq-item.open .faq-ico {
	color: var(--purple);
}

/* FINAL OVERRIDE – WEBSITES FAQ PURPLE THEME
   Ensures hover/open states override any script-applied defaults */

#websites .faq-item:hover,
#websites .faq-item.open {
	background-color: var(--purple-bg) !important;
	border-color: var(--purple) !important;
}

#websites .faq-item:hover .faq-q,
#websites .faq-item.open .faq-q {
	color: white !important;
}

#websites .faq-item .faq-ico,
#websites .faq-item:hover .faq-ico,
#websites .faq-item.open .faq-ico {
	color: var(--purple) !important;
}

/* Prevent internal hover script from forcing gray */
#websites .faq-q:hover {
	background: transparent !important;
}

/* AUTOMATIONS FAQ – HOVER & OPEN STATES
   Cyan-themed FAQ styling for the Automations section */

#automations .faq-item:hover,
#automations .faq-item.open {
	background-color: var(--auto-bg) !important;
	border-color: var(--auto) !important;
}

#automations .faq-item:hover .faq-q,
#automations .faq-item:hover .faq-ico {
	color: var(--auto) !important;
}

/* Pricing card checkmark color for Automations */
.pf-ck-auto {
	color: var(--auto);
	font-weight: 600;
}

/* Stronger automations pricing checkmarks */
.pf-ck-auto {
	color: var(--auto) !important;
	font-weight: 700;
	margin-right: 4px;
}

/* Most popular automation card hover effect */
#auto-pipeline:hover {
	box-shadow: 0 12px 24px rgba(8, 145, 178, 0.2) !important;
}

/* AUTOMATIONS THEME OVERRIDES
   Forces cyan theme across accordions and FAQs */

#automations .wi-acc-item:hover {
	border-color: var(--auto) !important;
	background-color: var(--auto-bg) !important;
}

#automations .wi-acc-item:hover .wi-acc-btn,
#automations .wi-acc-item:hover .wi-acc-ico,
#automations .wi-acc-item.open .wi-acc-btn,
#automations .wi-acc-item.open .wi-acc-ico {
	color: white !important;
}

#automations .faq-item:hover {
	border-color: var(--auto) !important;
	background-color: var(--auto-bg) !important;
	transform: translateY(-2px);
}

#automations .faq-item:hover .faq-q,
#automations .faq-item:hover .faq-ico,
#automations .faq-item.open .faq-q,
#automations .faq-item.open .faq-ico {
	color: white !important;
}

/* Prevent internal hover script from forcing default colors */
#automations .faq-q:hover,
#automations .wi-acc-btn:hover {
	background: transparent !important;
}

/* FINAL OVERRIDE – AUTOMATIONS CYAN THEME
   Locks icon colors and themed backgrounds */

#automations .wi-acc-ico,
#automations .wi-acc-item:hover .wi-acc-ico,
#automations .wi-acc-item.open .wi-acc-ico {
	color: var(--auto) !important;
	opacity: 1 !important;
}

#automations .faq-ico,
#automations .faq-item:hover .faq-ico,
#automations .faq-item.open .faq-ico {
	color: var(--auto) !important;
	opacity: 1 !important;
}

#automations .wi-acc-item:hover,
#automations .faq-item:hover,
#automations .faq-item.open {
	background-color: var(--auto-bg) !important;
	border-color: var(--auto) !important;
}

/* MULTI-SELECT – BASE STRUCTURE
   Wrapper and dropdown positioning */

.multi-select {
	position: relative;
	width: 100%;
}

.multi-select-dropdown {
	display: none;
	/* Hidden by default */
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: var(--bg);
	border: 1.5px solid var(--green);
	/* Matches Contact theme */
	border-top: none;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	max-height: 300px;
	overflow-y: auto;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.multi-select-dropdown.open {
	display: block;
}

/* Multi-select visible trigger box */
.multi-select-display {
	background: var(--bg);
	border: 0.5px solid var(--border2);
	border-radius: var(--radius-md);
	padding: 0.65rem 0.9rem;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* SUBMIT BUTTON – CONTACT THEME OVERRIDE
   Emerald gradient button for final form styling */

.sbtn {
	background: linear-gradient(135deg, var(--green), #064e3b);
	color: #fff;
	border: none;
	padding: 0.75rem 1.8rem;
	border-radius: var(--radius-md);
	font-size: 15px;
	font-weight: 600;
	font-family: var(--sans);
	cursor: pointer;
	align-self: flex-start;
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px rgba(21, 128, 61, 0.2);
}

.sbtn:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(21, 128, 61, 0.3);
}

/* MULTI-SELECT – DROPDOWN LIST
   Contact-themed dropdown styling */

.multi-select-dropdown {
	display: none;
	position: absolute;
	background: var(--bg);
	border: 1px solid var(--green);
	width: 100%;
	z-index: 100;
	max-height: 250px;
	overflow-y: auto;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.multi-select-dropdown.open {
	display: block;
}

/* Individual multi-select options */
.ms-opt {
	display: flex !important;
	align-items: center;
	padding: 10px 15px;
	width: 100%;
	cursor: pointer;
	border-bottom: 0.5px solid var(--border);
	color: var(--ink);
	transition: background 0.2s;
}

.ms-opt:hover {
	background: var(--green-bg);
}

.ms-opt input {
	margin-right: 12px;
	accent-color: var(--green);
}

.ms-opt-group {
	padding: 12px 15px 5px;
	font-weight: 800;
	font-size: 11px;
	color: var(--green);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* MULTI-SELECT – FINAL DROPDOWN FIX
   Repeated override to ensure dropdown displays consistently */

.multi-select-dropdown {
	display: none;
	position: absolute;
	background: var(--bg);
	border: 1.5px solid var(--green);
	width: 100%;
	z-index: 1000;
	max-height: 300px;
	overflow-y: auto;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.multi-select-dropdown.open {
	display: block;
}

/* Final option row spacing */
.ms-opt {
	display: flex !important;
	align-items: center;
	padding: 12px 15px;
	cursor: pointer;
	border-bottom: 0.5px solid var(--border);
	transition: background 0.2s;
}

.ms-opt:hover {
	background: var(--green-bg);
}

.ms-opt input {
	margin-right: 12px;
	width: 18px;
	height: 18px;
	accent-color: var(--green);
}

/* Final button refinement */
.sbtn {
	background: linear-gradient(135deg, var(--green), #064e3b) !important;
	box-shadow: 0 4px 14px rgba(21, 128, 61, 0.3);
	font-weight: 600;
}

.sbtn:hover {
	transform: translateY(-2px);
	filter: brightness(1.1);
}

/* Ensure dropdown becomes visible when toggled by JS */
.multi-select-dropdown.open {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* OPTION COLOR THEMES – VALUE/ORDER-BASED
   Color-code groups and items by service type */

.ms-opt-group:nth-of-type(1),
.ms-opt:has(input[value^="Notion"]) {
	color: var(--nb) !important;
}

.ms-opt:has(input[value^="Notion"]):hover {
	background-color: var(--nb-bg) !important;
	color: var(--nb-dark) !important;
}

.ms-opt-group:nth-of-type(2),
.ms-opt:has(input[value^="Invite"]) {
	color: var(--rose) !important;
}

.ms-opt:has(input[value^="Invite"]):hover {
	background-color: var(--rose-bg) !important;
	color: var(--rose-dark) !important;
}

.ms-opt-group:nth-of-type(3),
.ms-opt:has(input[value^="Web "]) {
	color: var(--purple) !important;
}

.ms-opt:has(input[value^="Web "]):hover {
	background-color: var(--purple-bg) !important;
	color: #4c1d95 !important;
}

.ms-opt-group:nth-of-type(4),
.ms-opt:has(input[value^="Auto"]) {
	color: var(--auto) !important;
}

.ms-opt:has(input[value^="Auto"]):hover {
	background-color: var(--auto-bg) !important;
	color: var(--auto-dark) !important;
}

/* MULTI-SELECT DROPDOWN – BASE
   Shared dropdown shell before category-specific overrides */

.multi-select-dropdown {
	display: none;
	position: absolute;
	background: var(--bg);
	border: 1.5px solid var(--green);
	width: 100%;
	z-index: 1000;
	max-height: 300px;
	overflow-y: auto;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.multi-select-dropdown.open {
	display: block !important;
}

/* SERVICE-BASED DROPDOWN STYLING
   Data-category driven option styling */

#ms-dropdown .ms-opt {
	color: #ffffff !important;
	transition: all 0.2s ease;
}

/* 1. Notion */
#ms-dropdown .ms-opt[data-category="notion"] {
	color: var(--nb) !important;
}

#ms-dropdown .ms-opt[data-category="notion"]:hover {
	background-color: var(--nb-bg) !important;
}

/* 2. Web Invites & Add-ons */
#ms-dropdown .ms-opt[data-category="invite"],
#ms-dropdown .ms-opt[data-category="add-on"] {
	color: var(--rose) !important;
}

#ms-dropdown .ms-opt[data-category="invite"]:hover,
#ms-dropdown .ms-opt[data-category="add-on"]:hover {
	background-color: var(--rose-bg) !important;
}

/* 3. Websites */
#ms-dropdown .ms-opt[data-category="web"] {
	color: var(--purple) !important;
}

#ms-dropdown .ms-opt[data-category="web"]:hover {
	background-color: var(--purple-bg) !important;
}

/* 4. Automations */
#ms-dropdown .ms-opt[data-category="auto"] {
	color: var(--auto) !important;
}

#ms-dropdown .ms-opt[data-category="auto"]:hover {
	background-color: var(--auto-bg) !important;
}

/* 5. General Enquiry */
#ms-dropdown .ms-opt[data-category="enquiry"] {
	color: var(--green) !important;
}

#ms-dropdown .ms-opt[data-category="enquiry"]:hover {
	background-color: var(--green-bg) !important;
}

/* Ensure the dropdown is hidden by default */
.multi-select-dropdown {
	display: none;
	position: absolute;
	z-index: 100;
	/* add your existing positioning/styling here */
}

/* Show the dropdown only when it has the .open class */
.multi-select-dropdown.open {
	display: block !important;
}

.faq-item.open .wi-acc-ico {
    transform: rotate(45deg);
}

.faq-item.open .notion-acc-ico {
    transform: rotate(45deg);
}