:root {
	/* Color tokens */
	--primary: #FF7B25;
	--primary-dark: #D43F00;
	--primary-light: #FF9A56;
	--accent: #FF3D00;
	--dark: #0a0a0a;
	--darker: #050505;
	--light: #f5f5f5;
	--gray: #a0a0a0;
	--border: #1f1f1f;
	--card-bg: #141414;
	--success: #10b981;
	--error: #ef4444;
}

/* --------------------
	 Base / Layout
	 -------------------- */
html, body { height: 100%; }
body {
	font-family: 'Inter', sans-serif;
	background: var(--dark);
	color: var(--light);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pricing-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 100px 24px;
	box-sizing: border-box;
}

/* --------------------
	 Hero / Intro
	 -------------------- */
.hero { text-align: center; margin-bottom: 28px; }
.title { font-size: 2rem; font-weight: 700; }
.subtitle { color: var(--gray); margin-top: 6px; }

/* Billing cycle toggle */
.cycle-toggle {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: 9999px;
	overflow: hidden;
	margin-top: 16px;
	background: var(--card-bg);
}
.cycle-btn { padding: 10px 16px; background: transparent; color: var(--light); border: none; cursor: pointer; }
.cycle-btn.active { background: var(--primary); color: #fff; }
.badge { background: #2a2a2a; color: #fff; font-size: .75rem; padding: 2px 8px; border-radius: 12px; margin-left: 8px; }

/* --------------------
	 Promo code row
	 -------------------- */
.promo { max-width: 560px; margin: 22px auto 0; text-align: left; }
.promo-label { display: block; margin-bottom: 8px; }
.promo-row { display: flex; gap: 8px; }
.promo-input {
	flex: 1;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--darker);
	color: var(--light);
	box-sizing: border-box;
}
.promo-apply { padding: 12px 16px; border-radius: 8px; border: 1px solid var(--primary); background: var(--primary); color: #fff; cursor: pointer; }
.promo-help { color: var(--gray); margin-top: 6px; }

/* --------------------
	 Plans grid & cards
	 -------------------- */
.plans { margin-top: 22px; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.plan {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-sizing: border-box;
}
.plan.popular { outline: 2px solid var(--primary); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-name { font-size: 1.2rem; font-weight: 600; }
.plan-price { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.popular-badge { background: var(--primary); color: #fff; font-size: .75rem; padding: 2px 8px; border-radius: 12px; }

.plan-features { list-style: none; display: grid; gap: 8px; padding-left: 0; margin: 0; }
.plan-ctas { display: flex; gap: 8px; }
.btn { flex: 1; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--darker); color: #fff; cursor: pointer; }
.btn.checkout { background: linear-gradient(135deg, var(--primary-light), var(--primary)); }
.btn.trial { background: #1f1f1f; }

/* --------------------
	 Comparison table
	 -------------------- */
.comparison { margin-top: 30px; }
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; }
.compare-table thead th { background: #111; position: sticky; top: 0; }

/* --------------------
	 Floating status toast
	 -------------------- */
.status { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1a1a1a; color: #fff; border-left: 4px solid var(--primary); padding: 12px 18px; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.4); opacity: 0; transition: opacity .25s ease; }
.status.show { opacity: 1; }

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

/* --------------------
	 Responsive
	 -------------------- */
@media (max-width: 1024px) { .plans-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 768px) {
	.plans-grid { grid-template-columns: 1fr; }
	.pricing-container { padding: 90px 16px; }
	.plan-head { flex-direction: column; align-items: flex-start; gap: 6px; }
	.plan-price { font-size: 1.4rem; }
}

@media (max-width: 420px) {
	.title { font-size: 1.6rem; }
	.promo-row { flex-direction: column; }
	.promo-apply { width: 100%; }
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 55px;
    background-color: var(--dark);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
}