/* ═════════════════════════════════════════════════════════════════
   BUTTONS
   ═════════════════════════════════════════════════════════════════ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 22px 32px;
	min-width: 250px;
	font-family: var(--f-sans);
	font-size: clamp(16px, 1.55vw, 22px);
	font-weight: 600;
	letter-spacing: 0;
	border-radius: 12px;
	transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
	white-space: nowrap;
	line-height: 1.2;
	cursor: pointer;
	border: 0;
}

/* ── Variants ── */
.btn-orange { background: var(--orange); color: var(--cream); }
.btn-orange:hover { box-shadow: 0 10px 30px rgba(255,79,0,.25); transform: translateY(-1px); }

.btn-ghost { background: #EDEBE7; color: var(--ink); }
.btn-ghost:hover { background: #E0DDD6; }

.btn-cream-on-orange { background: var(--cream); color: var(--ink); }
.btn-cream-on-orange:hover { box-shadow: 0 10px 30px rgba(0,0,0,.15); transform: translateY(-1px); }

.btn-green { background: var(--green); color: var(--cream); }
.btn-green:hover { box-shadow: 0 10px 30px rgba(11,102,35,.3); transform: translateY(-1px); }

/* ── Size modifier ── */
.btn-sm { padding: 14px 20px; font-size: 16px; border-radius: 10px; }

/* Reverse order for "Watch the explainer" — label first, icon right */
.btn-ghost .icon-right { order: 2; }