/* Pricing table — adapted from a React/Tailwind/framer-motion reference
   component into plain CSS + vanilla JS for this static site. Same layout
   ideas (toggle, highlighted tier, glass cards, entrance/hover motion),
   restyled with the site's own tokens (Outfit, light-blue/gold, soft
   shadows) instead of the reference's dark/amber theme. */

.pricing-section{
	position:relative;
	max-width:1120px;
	margin:0 auto 64px;
	padding:72px 20px;
	overflow:hidden;
}
.pricing-section .blob{position:absolute;}
.pricing-section .blob-a{top:-60px;left:-40px;}
.pricing-section .blob-b{bottom:-60px;right:-40px;}

.pricing-header{
	position:relative;
	z-index:1;
	text-align:center;
	max-width:560px;
	margin:0 auto 40px;
}
.pricing-header h2{
	font-size:clamp(28px,5vw,40px);
	font-weight:700;
	letter-spacing:-0.025em;
	margin:0 0 12px;
}
.pricing-header p{
	color:var(--muted);
	font-size:16px;
	margin:0;
}

/* Toggle */
.pricing-toggle{
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	margin:28px auto 0;
}
.pricing-toggle-label{
	font-size:14px;
	color:var(--muted);
	transition:color .2s ease;
}
.pricing-toggle-label.is-active{color:var(--ink);font-weight:600;}
.pricing-toggle-save{
	display:inline-flex;
	margin-left:6px;
	padding:2px 8px;
	border-radius:999px;
	background:var(--tone-gold);
	color:var(--accent-deep);
	font-size:10px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.03em;
}
.pricing-toggle-switch{
	position:relative;
	display:flex;
	align-items:center;
	width:56px;
	height:32px;
	border-radius:999px;
	background:var(--white);
	border:1px solid var(--border);
	padding:3px;
	cursor:pointer;
	transition:border-color .2s ease;
}
.pricing-toggle-switch:hover{border-color:var(--sky-deep);}
.pricing-toggle-thumb{
	display:inline-block;
	width:24px;
	height:24px;
	border-radius:50%;
	background:var(--accent);
	box-shadow:var(--shadow-soft);
	transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pricing-toggle-switch.is-annual .pricing-toggle-thumb{transform:translateX(24px);}

/* Grid */
.pricing-grid{
	position:relative;
	z-index:1;
	display:grid;
	gap:24px;
	margin-top:48px;
}
@media (min-width:960px){
	.pricing-grid{grid-template-columns:repeat(3,1fr);gap:28px;}
}

.pricing-card{
	position:relative;
	display:flex;
	flex-direction:column;
	background:rgba(255,255,255,.7);
	backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(16px);
	border:1px solid var(--border);
	border-radius:var(--radius-lg);
	padding:32px 28px;
	transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}

.pricing-card.is-highlight{
	background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,225,.85));
	border:1px solid var(--accent);
	box-shadow:0 0 0 1px rgba(245,184,0,.25), var(--shadow-lift);
}
@media (min-width:960px){
	.pricing-card.is-highlight{transform:translateY(-14px);}
	.pricing-card.is-highlight:hover{transform:translateY(-18px);}
}

.pricing-badge{
	position:absolute;
	top:-14px;
	left:50%;
	transform:translateX(-50%);
	background:linear-gradient(90deg, var(--yellow-300, #FFD84D), var(--accent));
	color:var(--ink);
	font-size:11px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.04em;
	padding:6px 16px;
	border-radius:999px;
	box-shadow:var(--shadow-soft);
	white-space:nowrap;
}

.pricing-icon{
	width:48px;height:48px;
	border-radius:14px;
	display:flex;align-items:center;justify-content:center;
	margin-bottom:20px;
	background:var(--tone-sky);
	color:var(--sky-deep);
}
.pricing-card.is-highlight .pricing-icon{
	background:var(--accent);
	color:var(--ink);
}
.pricing-icon svg{width:22px;height:22px;}

.pricing-card h3{
	font-size:20px;
	font-weight:700;
	margin:0 0 6px;
	color:var(--ink);
}
.pricing-card-desc{
	font-size:13.5px;
	color:var(--muted);
	margin:0 0 22px;
	line-height:1.5;
	min-height:40px;
}

.pricing-price{
	display:flex;
	align-items:baseline;
	gap:6px;
	margin-bottom:22px;
}
.pricing-price-value{
	font-size:38px;
	font-weight:800;
	letter-spacing:-0.02em;
	color:var(--ink);
}
.pricing-price-period{
	font-size:13px;
	color:var(--muted);
}
.pricing-price-note{
	display:block;
	font-size:11px;
	color:var(--accent-deep);
	font-weight:600;
}

.pricing-features{
	list-style:none;
	margin:0 0 26px;
	padding:0;
	flex:1;
	display:flex;
	flex-direction:column;
	gap:10px;
}
.pricing-features li{
	display:flex;
	align-items:flex-start;
	gap:10px;
	font-size:13px;
	color:var(--ink-soft);
	line-height:1.45;
}
.pricing-features svg{
	width:17px;height:17px;
	flex:none;
	margin-top:1px;
	color:#1FA35A;
}
.pricing-card.is-highlight .pricing-features svg{color:var(--accent-deep);}

.pricing-features li.not-included{
	color:var(--muted);
	opacity:.65;
}
.pricing-features li.not-included svg{color:#C7CBDE;}

.pricing-cta{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	width:100%;
	padding:14px;
	border:none;
	border-radius:999px;
	font-family:inherit;
	font-size:14.5px;
	font-weight:700;
	cursor:pointer;
	transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
	text-decoration:none;
}
.pricing-cta.is-primary{
	background:linear-gradient(90deg, var(--yellow-300, #FFD84D), var(--accent));
	color:var(--ink);
	box-shadow:var(--shadow-soft);
}
.pricing-cta.is-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.pricing-cta.is-secondary{
	background:var(--tone-sky);
	color:var(--ink);
}
.pricing-cta.is-secondary:hover{background:var(--sky);color:var(--ink);}

.pricing-footnote{
	position:relative;
	z-index:1;
	text-align:center;
	font-size:13px;
	color:var(--muted);
	margin:36px 0 0;
}