/* The partner program page (page-templates/partner-apply.php), on the site's dark look. */

.bud-pp-kicker {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bud-lime);
}

.bud-pp h1,
.bud-pp h2 {
	font-family: var(--bud-face);
	font-weight: 400;
	line-height: 0.95;
	text-transform: uppercase;
	color: #fff;
}

.bud-pp h2 {
	margin: 0 0 1.5rem;
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* Lead */
.bud-pp-hero {
	padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
	background:
		radial-gradient(70% 90% at 100% 0%, rgba(62, 240, 110, 0.16), transparent 60%),
		radial-gradient(60% 80% at 0% 100%, rgba(62, 240, 110, 0.08), transparent 60%);
	border-bottom: 1px solid var(--bud-line);
}

.bud-pp-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* The hero picture: a page whose two ad spots take turns, and three cards */
.bud-pp-art {
	position: relative;
	padding: 1.5rem 1.5rem 2.5rem;
}

.bud-pp-window {
	overflow: hidden;
	border: 1px solid #2a302c;
	border-radius: 14px;
	background: #0d0f0e;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(62, 240, 110, 0.06);
	transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
}

.bud-pp-window-bar {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid #2a302c;
	background: #141815;
}

.bud-pp-window-bar i {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: #39413b;
}

.bud-pp-window-bar span {
	margin-left: 0.6rem;
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	background: #0d0f0e;
	font-size: 0.7rem;
	color: #6f776f;
}

.bud-pp-window-page {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 1rem;
	padding: 1.1rem;
}

.bud-pp-window-main,
.bud-pp-window-rail {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	min-width: 0;
}

.bud-pp-window b {
	display: block;
	height: 0.5rem;
	border-radius: 3px;
	background: #232925;
}

.bud-pp-window b.is-title {
	width: 70%;
	height: 1rem;
	margin-bottom: 0.25rem;
	background: #343b36;
}

.bud-pp-window b.is-short {
	width: 55%;
}

.bud-pp-slot {
	display: grid;
	gap: 0.25rem;
	margin-block: 0.35rem;
}

.bud-pp-slot small {
	font-size: 0.5rem;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	color: #6f776f;
}

.bud-pp-rotor {
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	outline: 1.5px dashed rgba(62, 240, 110, 0.55);
	outline-offset: 3px;
}

.bud-pp-slot.is-banner .bud-pp-rotor {
	aspect-ratio: 728 / 90;
}

.bud-pp-slot.is-billboard .bud-pp-rotor {
	aspect-ratio: 970 / 250;
}

.bud-pp-slot.is-rectangle .bud-pp-rotor {
	aspect-ratio: 300 / 250;
}

/* Three ads take turns: each fades in, holds, and gives way. */
.bud-pp-rotor > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: bud-pp-turn 9s infinite;
}

.bud-pp-rotor > :nth-child(2) {
	animation-delay: 3s;
}

.bud-pp-rotor > :nth-child(3) {
	animation-delay: 6s;
}

/* Half a turn ahead of the banner, already part way in, so neither spot starts empty. */
.bud-pp-slot.is-rectangle .bud-pp-rotor > * {
	animation-delay: -1.5s;
}

.bud-pp-slot.is-rectangle .bud-pp-rotor > :nth-child(2) {
	animation-delay: 1.5s;
}

.bud-pp-slot.is-rectangle .bud-pp-rotor > :nth-child(3) {
	animation-delay: 4.5s;
}

@keyframes bud-pp-turn {
	0% { opacity: 0; transform: scale(1.04); }
	5% { opacity: 1; transform: scale(1); }
	30% { opacity: 1; transform: scale(1); }
	36% { opacity: 0; }
	100% { opacity: 0; }
}

.bud-pp-fake {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	gap: 0 0.4rem;
	padding: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-align: center;
	color: #0b0d0b;
}

.bud-pp-fake b {
	display: inline;
	height: auto;
	background: none;
	font-family: var(--bud-face);
	font-size: 1.3em;
	font-weight: 400;
	text-transform: uppercase;
}

.bud-pp-slot.is-rectangle .bud-pp-fake {
	flex-direction: column;
	font-size: 0.85rem;
}

.bud-pp-slot.is-rectangle .bud-pp-fake b {
	font-size: 1.9em;
	line-height: 1;
}

.bud-pp-fake.is-a {
	background: linear-gradient(135deg, #3ef06e, #c6f36d);
}

.bud-pp-fake.is-b {
	background: linear-gradient(135deg, #c09bff, #f7b2d9);
}

.bud-pp-fake.is-c {
	background: linear-gradient(135deg, #ffb454, #ffe08a);
}

/* The cards float over the page's edges. */
.bud-pp-chip {
	position: absolute;
	display: grid;
	gap: 0.35rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid #2f3632;
	border-radius: 12px;
	background: rgba(20, 24, 21, 0.92);
	backdrop-filter: blur(6px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
	animation: bud-pp-float 6s ease-in-out infinite;
}

.bud-pp-chip span {
	font-size: 0.68rem;
	font-weight: 600;
	color: #9ca69d;
}

.bud-pp-chip.is-views {
	top: 0;
	left: -0.5rem;
}

.bud-pp-chip.is-views i {
	display: flex;
	align-items: end;
	gap: 3px;
	height: 26px;
}

.bud-pp-chip.is-views s {
	width: 7px;
	border-radius: 2px 2px 0 0;
	background: var(--bud-lime);
	animation: bud-pp-grow 3s ease-in-out infinite;
}

.bud-pp-chip.is-views s:nth-child(1) { height: 30%; animation-delay: 0s; }
.bud-pp-chip.is-views s:nth-child(2) { height: 45%; animation-delay: 0.2s; }
.bud-pp-chip.is-views s:nth-child(3) { height: 40%; animation-delay: 0.4s; }
.bud-pp-chip.is-views s:nth-child(4) { height: 60%; animation-delay: 0.6s; }
.bud-pp-chip.is-views s:nth-child(5) { height: 55%; animation-delay: 0.8s; }
.bud-pp-chip.is-views s:nth-child(6) { height: 75%; animation-delay: 1s; }
.bud-pp-chip.is-views s:nth-child(7) { height: 90%; animation-delay: 1.2s; }

.bud-pp-chip.is-ctr {
	right: -0.5rem;
	bottom: 2.5rem;
	animation-delay: -2s;
}

.bud-pp-chip .is-line {
	display: block;
	width: 120px;
	height: 26px;
	background:
		linear-gradient(to top right, transparent calc(50% - 1px), var(--bud-lime) 50%, transparent calc(50% + 1px)) 0 0 / 40px 26px no-repeat,
		linear-gradient(to bottom right, transparent calc(50% - 1px), var(--bud-lime) 50%, transparent calc(50% + 1px)) 40px 0 / 30px 26px no-repeat,
		linear-gradient(to top right, transparent calc(50% - 1px), var(--bud-lime) 50%, transparent calc(50% + 1px)) 70px 0 / 50px 26px no-repeat;
}

.bud-pp-chip.is-price {
	bottom: 0;
	left: 2.5rem;
	animation-delay: -4s;
}

.bud-pp-chip.is-price b {
	font-family: var(--bud-face);
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 1;
	color: var(--bud-lime);
}

.bud-pp-chip.is-price small {
	margin-left: 0.25rem;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 0.7rem;
	color: #9ca69d;
}

@keyframes bud-pp-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes bud-pp-grow {
	0%, 100% { transform: scaleY(1); transform-origin: bottom; }
	50% { transform: scaleY(0.75); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
	.bud-pp-rotor > *,
	.bud-pp-chip,
	.bud-pp-chip.is-views s {
		animation: none;
	}

	.bud-pp-rotor > :first-child {
		opacity: 1;
	}
}

/* Apply and log in, once the hero's buttons are out of sight */
.bud-pp-dock {
	position: fixed;
	right: 0;
	bottom: calc(1rem + var(--bud-tbar-h, 0px));
	left: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: max-content;
	max-width: calc(100% - 2rem);
	margin-inline: auto;
	padding: 0.45rem 0.45rem 0.45rem 1.1rem;
	border: 1px solid rgba(62, 240, 110, 0.35);
	border-radius: 999px;
	background: rgba(13, 15, 14, 0.9);
	backdrop-filter: blur(12px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
	opacity: 0;
	transform: translateY(140%);
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
	pointer-events: none;
}

.bud-pp-dock.is-shown {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.bud-pp-dock-price {
	margin-right: 0.4rem;
	font-size: 0.85rem;
	white-space: nowrap;
	color: #c3cac3;
}

.bud-pp-dock-price b {
	font-family: var(--bud-face);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--bud-lime);
}

.bud-pp-dock .bud-pp-button {
	padding: 0.6rem 1.1rem;
	font-size: 0.92rem;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.bud-pp-dock {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

.bud-pp-hero h1 {
	max-width: 14ch;
	margin: 0 0 1.25rem;
	font-size: clamp(3.5rem, 9vw, 7rem);
}

.bud-pp-lede {
	max-width: 40rem;
	margin: 0 0 2rem;
	font-size: clamp(1.1rem, 1.8vw, 1.3rem);
	line-height: 1.55;
	color: #d2d8d1;
}

.bud-pp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.bud-pp-button {
	display: inline-flex;
	align-items: center;
	padding: 0.85rem 1.4rem;
	border: 1.5px solid var(--bud-line-strong);
	border-radius: 999px;
	background: none;
	font: inherit;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.bud-pp-button:hover,
.bud-pp-button:focus-visible {
	border-color: #fff;
}

.bud-pp-button.is-main {
	border-color: var(--bud-lime);
	background: var(--bud-lime);
	color: #0b0d0b;
}

.bud-pp-button.is-main:hover,
.bud-pp-button.is-main:focus-visible {
	border-color: #fff;
	background: #fff;
}

/* What readers come for */
.bud-pp-reach {
	border-bottom: 1px solid var(--bud-line);
}

.bud-pp-reach dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 0;
}

/* A line between the numbers where they share a row. */
.bud-pp-reach dl > div + div {
	border-left: 1px solid var(--bud-line);
}

@media (max-width: 640px) {
	.bud-pp-reach dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bud-pp-reach dl > div:nth-child(odd) {
		border-left: 0;
	}

	.bud-pp-reach dl > div:nth-child(n + 3) {
		border-top: 1px solid var(--bud-line);
	}
}

/* Each number over its label. Only the list's own items: .container is a div too. */
.bud-pp-reach dl > div {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 0.15rem;
	padding: clamp(1.25rem, 3vw, 2rem) 0.5rem;
	text-align: center;
}

.bud-pp-reach dd {
	margin: 0;
	font-family: var(--bud-face);
	font-size: clamp(2.75rem, 5vw, 4rem);
	line-height: 1;
	color: var(--bud-lime);
}

.bud-pp-reach dt {
	font-size: 0.92rem;
	color: var(--bud-muted);
}

/* Sections */
.bud-pp-section {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
	border-bottom: 1px solid var(--bud-line);
}

.bud-pp-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.bud-pp-steps li {
	position: relative;
	display: grid;
	gap: 0.35rem;
	padding: 3.5rem 1.25rem 1.35rem;
	border-radius: 16px;
	background: var(--bud-surface);
	counter-increment: step;
}

.bud-pp-steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	top: 1.1rem;
	left: 1.25rem;
	font-family: var(--bud-face);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--bud-lime);
}

.bud-pp-steps strong,
.bud-pp-features strong {
	font-size: 1.1rem;
	color: #fff;
}

.bud-pp-steps span,
.bud-pp-features span {
	font-size: 0.95rem;
	line-height: 1.5;
	color: #c3cac3;
}

.bud-pp-intro {
	max-width: 44rem;
	margin: -0.75rem 0 1.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #c3cac3;
}

/* Pricing: the price on the left, how it adds up on the right */
.bud-pp-pricing {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}

.bud-pp-price {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1.5px solid var(--bud-lime);
	border-radius: 18px;
	background: linear-gradient(160deg, rgba(62, 240, 110, 0.12), transparent 60%), var(--bud-surface);
}

.bud-pp-price-tag {
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
	color: #d2d8d1;
}

.bud-pp-price-tag b {
	display: block;
	font-family: var(--bud-face);
	font-size: clamp(4rem, 9vw, 6rem);
	font-weight: 400;
	line-height: 0.9;
	color: var(--bud-lime);
}

.bud-pp-price ul {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.bud-pp-price li {
	position: relative;
	padding-left: 1.75rem;
	color: #e6ebe6;
}

.bud-pp-price li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 0.45rem;
	height: 0.8rem;
	border: solid var(--bud-lime);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.bud-pp-multi h3 {
	margin: 0.25rem 0 0.5rem;
	font-size: 1.35rem;
	color: #fff;
}

.bud-pp-multi > p {
	margin: 0 0 1rem;
	line-height: 1.6;
	color: #c3cac3;
}

.bud-pp-multi table {
	width: 100%;
	max-width: 22rem;
	margin: 0 0 1rem;
	border-collapse: collapse;
}

.bud-pp-multi th,
.bud-pp-multi td {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--bud-line);
	text-align: left;
}

.bud-pp-multi th {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bud-muted);
}

.bud-pp-multi td + td,
.bud-pp-multi th + th {
	text-align: right;
}

.bud-pp-multi td + td {
	font-weight: 700;
	color: #fff;
}

.bud-pp-multi .bud-pp-small {
	color: var(--bud-muted);
}

.bud-pp-formats {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}

.bud-pp-formats h3 {
	margin: 1rem 0 0.3rem;
	font-size: 1.25rem;
	color: #fff;
}

.bud-pp-formats h3 span {
	margin-left: 0.4rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--bud-muted);
}

.bud-pp-formats p {
	margin: 0;
	color: #c3cac3;
}

.bud-pp-features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bud-pp-features li {
	display: grid;
	align-content: start;
	gap: 0.35rem;
	padding: 1.35rem 1.25rem;
	border: 1px solid var(--bud-line);
	border-radius: 16px;
	background: var(--bud-surface);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.bud-pp-features li:hover {
	border-color: rgba(62, 240, 110, 0.45);
	transform: translateY(-2px);
}

.bud-pp-icon {
	width: 44px;
	height: 44px;
	margin-bottom: 0.5rem;
	padding: 9px;
	border-radius: 12px;
	background: rgba(62, 240, 110, 0.1);
	color: var(--bud-lime);
}

.bud-pp-content {
	max-width: 48rem;
}

/* Questions */
.bud-pp-faq {
	max-width: 52rem;
	border-top: 1px solid var(--bud-line);
}

.bud-pp-faq details {
	border-bottom: 1px solid var(--bud-line);
}

.bud-pp-faq summary {
	position: relative;
	padding: 1.1rem 2.5rem 1.1rem 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	list-style: none;
}

.bud-pp-faq summary::-webkit-details-marker {
	display: none;
}

.bud-pp-faq summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0.25rem;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--bud-lime);
	transform: translateY(-50%);
}

.bud-pp-faq details[open] summary::after {
	content: "\2212";
}

.bud-pp-faq p {
	max-width: 44rem;
	margin: 0 0 1.25rem;
	line-height: 1.65;
	color: #c3cac3;
}

/* Apply */
.bud-pp-apply {
	border-bottom: 0;
}

.bud-pp-apply-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: start;
}

.bud-pp-apply-grid > div > p {
	max-width: 26rem;
	line-height: 1.6;
	color: #c3cac3;
}

.bud-pp-small {
	font-size: 0.92rem;
}

.bud-pp-small a {
	color: var(--bud-lime);
}

.bud-pp-form,
.bud-pp-thanks {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: 18px;
	background: var(--bud-surface);
}

.bud-pp-thanks h3 {
	margin: 0 0 0.5rem;
	font-family: var(--bud-face);
	font-size: 2.25rem;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--bud-lime);
}

.bud-pp-thanks p {
	margin: 0;
	color: #d2d8d1;
}

.bud-pp-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 0 1rem;
}

.bud-pp-form label,
.bud-pp-form fieldset {
	display: block;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.bud-pp-form label > span,
.bud-pp-form legend {
	display: block;
	margin-bottom: 0.35rem;
	padding: 0;
	font-size: 0.92rem;
	font-weight: 600;
	color: #fff;
}

.bud-pp-form i {
	font-style: normal;
	font-weight: 400;
	color: var(--bud-muted);
}

.bud-pp-form input[type="text"],
.bud-pp-form input[type="email"],
.bud-pp-form input[type="url"],
.bud-pp-form select,
.bud-pp-form textarea {
	display: block;
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--bud-line-strong);
	border-radius: 10px;
	background: #0d0f0e;
	font: inherit;
	color: #fff;
}

.bud-pp-form textarea {
	resize: vertical;
}

.bud-pp-form :is(input, select, textarea):focus {
	border-color: var(--bud-lime);
	outline: 1px solid var(--bud-lime);
}

.bud-pp-form em {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.88rem;
	font-style: normal;
	color: #ff9b9b;
}

.bud-pp-form .bud-pp-check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.4rem;
	color: #d2d8d1;
}

.bud-pp-check input {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--bud-lime);
}

.bud-pp-problem {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-left: 3px solid #ff6b6b;
	border-radius: 4px;
	background: rgba(255, 107, 107, 0.12);
	color: #fff;
}

.bud-pp-trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 960px) {
	.bud-pp-hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bud-pp-art {
		max-width: 34rem;
	}
}

/* On a phone, the dock is a bar along the bottom: the two buttons, no price. */
@media (max-width: 560px) {
	.bud-pp-dock {
		bottom: var(--bud-tbar-h, 0px);
		width: 100%;
		max-width: none;
		padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
		border-width: 1px 0 0;
		border-radius: 0;
	}

	.bud-pp-dock-price {
		display: none;
	}

	.bud-pp-dock .bud-pp-button {
		flex: 1;
		justify-content: center;
	}

	.bud-pp-window {
		transform: none;
	}

	.bud-pp-art {
		padding-inline: 0.5rem;
	}

	.bud-pp-chip.is-ctr {
		display: none;
	}
}

@media (max-width: 860px) {
	.bud-pp-pricing,
	.bud-pp-formats,
	.bud-pp-apply-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}