/* Buttons: HTML/CSS instead of image sprites, so they stay sharp on high-resolution screens.
   Green = free download, blue = Pro / upgrade, PayPal yellow = buy, grey outline = secondary. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	padding: 9px 18px;
	border: 0;
	border-radius: 8px;
	font: 600 15px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s, box-shadow .15s;
}
/* the site styles links as #content a (underlined), which outranks a plain class */
a.btn, a.btn:hover, a.btn:visited, #content a.btn, #content a.btn:hover, #content a.btn:visited { color: #fff; text-decoration: none; }
.btn:focus-visible { outline: 3px solid rgba(32, 88, 161, .45); outline-offset: 2px; }
.btn:active { box-shadow: none; }
.btn svg, .btn img { flex: none; }

/* hover: the button darkens a shade and its arrow icon inverts (the white disc becomes a ring, the arrow turns white) */
.btn svg circle, .btn svg path { transition: fill .15s, stroke .15s; }
.btn:not(.btn-secondary):hover svg circle { fill: rgba(255, 255, 255, .15); stroke: #fff; stroke-width: 1.5px; }
.btn:not(.btn-secondary):hover svg path { stroke: #fff; }
.btn-secondary:hover svg path { stroke: #1f2329; }

/* subtle top-to-bottom gradients; white text is readable where it sits (contrast 4.6+) */
.btn-download { background: linear-gradient(#31a24f, #136a29); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(19, 106, 41, .3); }
.btn-download:hover { background: linear-gradient(#2b9447, #105c23); }
.btn-pro { background: linear-gradient(#3070c2, #1b4b8c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 6px rgba(32, 88, 161, .25); }
.btn-pro:hover { background: linear-gradient(#2a64ae, #173f77); }
.btn-buy, #content a.btn-buy { background: linear-gradient(#ffd35c, #ffb92e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(190, 130, 0, .28); }
a.btn-buy, a.btn-buy:hover, a.btn-buy:visited, #content a.btn-buy, #content a.btn-buy:hover, #content a.btn-buy:visited { color: #1f2329; }
.btn-buy:hover, #content a.btn-buy:hover { background: linear-gradient(#ffc94a, #f5aa1a); }
a.btn-secondary, a.btn-secondary:hover, a.btn-secondary:visited, #content a.btn-secondary, #content a.btn-secondary:hover, #content a.btn-secondary:visited { color: #3d4652; }
.btn-secondary { background: #fff; box-shadow: inset 0 0 0 1.5px #c3cad4, 0 1px 2px rgba(0, 0, 0, .05); }
.btn-secondary:hover { background: #f3f5f8; box-shadow: inset 0 0 0 1.5px #aab3bf; }

.btn-sm { padding: 7px 14px; font-size: 14px; gap: 7px; }
.btn-arrow { gap: 7px; padding-right: 13px; }

/* the home-page download button: title + details inside the button */
.btn-hero { gap: 12px; padding: 15px 18px 15px 23px; border-radius: 10px; text-align: left; }
.btn-hero svg { width: 30px; height: 30px; }
.btn-hero .t { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.btn-hero .s { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; opacity: .9; }
.btn-hero-caption { margin-top: 8px; font-size: 12px; line-height: 1.4; color: #555; }

/* PayPal checkout: PayPal's yellow and official logo */
.btn-paypal { gap: 6px; padding: 10px 24px; border-radius: 22px; background: #ffc439; color: #111; font-weight: 500; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.btn-paypal:hover { background: #f2b52e; }