/* Build your pack page (page-pack.php). Loaded on that page only, after main.css. */

.pp-pack [hidden] {
	display: none !important;
}

#pack-done,
#pack-summary,
#pack-details {
	scroll-margin-top: calc(var(--pp-header-h) + var(--pp-adminbar) + 16px);
}

/* ---------- Intro ---------- */

.pp-pack__intro > .pp-container {
	padding-top: clamp(40px, 5.5vw, 88px);
	padding-bottom: clamp(36px, 4.5vw, 64px);
}

.pp-pack__title {
	margin: 0;
	max-width: 12ch;
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(44px, 7.6vw, 116px);
	line-height: .95;
	letter-spacing: -.01em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.pp-pack__lead {
	margin-top: clamp(20px, 2.4vw, 28px);
	max-width: 640px;
	color: var(--pp-muted);
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.6;
}

.pp-pack__lead p {
	margin: 0;
}

.pp-pack__lead p + p {
	margin-top: 1em;
}

.pp-pack__how {
	list-style: none;
	margin: clamp(24px, 3vw, 36px) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---------- Layout: questions, then the summary beside them ---------- */

.pp-pack__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	padding-bottom: clamp(72px, 8vw, 120px);
}

@media (min-width: 960px) {
	.pp-pack__form {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
		grid-template-areas: "steps summary" "details summary";
		gap: 20px clamp(28px, 3.5vw, 56px);
		align-items: start;
	}

	.pp-pack__steps {
		grid-area: steps;
	}

	.pp-pack__details {
		grid-area: details;
	}

	.pp-pack__summary {
		grid-area: summary;
		position: sticky;
		top: calc(var(--pp-header-h) + var(--pp-adminbar) + 20px);
		max-height: calc(100vh - var(--pp-header-h) - var(--pp-adminbar) - 40px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

.pp-pack__steps {
	display: grid;
	gap: 16px;
	min-width: 0;
}

/* "Social media ——— * Every month" */
.pp-pack__group {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--pp-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.6;
	text-transform: uppercase;
}

.pp-pack__group .pp-rule {
	color: var(--pp-line-strong);
}

.pp-pack__group ~ .pp-pack__group {
	margin-top: clamp(24px, 3vw, 40px);
}

.pp-pack__tag {
	flex: none;
	padding: 4px 12px;
	border: 1px solid var(--pp-line-strong);
	border-radius: 999px;
	color: var(--pp-muted);
	font-size: 12px;
	letter-spacing: .1em;
}

/* ---------- A question ---------- */

.pp-step {
	min-width: 0;
	padding: clamp(22px, 2.6vw, 32px);
	border: 1px solid var(--pp-line-mid);
	border-radius: 28px;
	background: var(--pp-bg-alt);
	transition: border-color .3s ease;
}

.pp-step:focus-within {
	border-color: var(--pp-line-strong);
}

.pp-step fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pp-step legend {
	display: block;
	width: 100%;
	margin-bottom: 20px;
	padding: 0;
}

.pp-step__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.pp-step__num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1.5px solid var(--pp-accent);
	border-radius: 50%;
	color: var(--pp-accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
}

.pp-step__title {
	flex: 1 1 14em;
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(19px, 1.8vw, 24px);
	line-height: 1.2;
}

.pp-step__hint {
	margin: -8px 0 20px;
	max-width: 640px;
	color: var(--pp-muted);
	font-size: 15px;
	line-height: 1.55;
}

.pp-step__wait {
	margin: 14px 0 0;
	color: var(--pp-subtle);
	font-size: 14px;
	font-weight: 600;
}

/* Questions that depend on the platforms picked (stories, reels, the speaker and messages):
   pack.js hides them while they don't apply, and they slide back in. */
.js .pp-step.is-off {
	display: none;
}

.js .pp-step.is-back {
	animation: pp-pack-reveal .45s ease;
}

@keyframes pp-pack-reveal {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Choices ---------- */

.pp-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pp-opt {
	position: relative;
	display: inline-flex;
	min-width: 0;
	cursor: pointer;
}

/* The real input covers its label, invisible, so taps and the keyboard work as usual. */
.pp-opt input {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.pp-opt__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 56px;
	min-height: 50px;
	padding: 0 20px;
	border: 1.5px solid var(--pp-line-strong);
	border-radius: 999px;
	color: var(--pp-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .35s var(--pp-spring);
}

.pp-opt:hover .pp-opt__box {
	border-color: var(--pp-accent);
}

.pp-opt input:checked + .pp-opt__box {
	border-color: var(--pp-accent);
	background: var(--pp-accent);
	color: var(--pp-ink);
}

.pp-opt input:active + .pp-opt__box {
	transform: scale(.95);
}

.pp-opt input:focus-visible + .pp-opt__box {
	outline: 2px solid var(--pp-text);
	outline-offset: 3px;
}

/* Questions answered with a number: None and Not sure, 1 … 6, then Custom with its box. */
.pp-count {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pp-custom {
	display: inline-flex;
}

.js .pp-count:not(.is-custom) .pp-custom {
	display: none;
}

.pp-custom input {
	width: 128px;
	min-height: 50px;
	padding: 0 18px;
	border: 1.5px solid var(--pp-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--pp-text);
	font: inherit;
	font-size: 16px; /* 16px keeps phones from zooming in. */
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.pp-custom input::-webkit-inner-spin-button,
.pp-custom input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.pp-custom input::placeholder {
	color: var(--pp-subtle);
	font-weight: 600;
}

.pp-custom input:focus {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent) 35%, transparent);
}

.pp-custom input:disabled {
	opacity: .35;
}

/* Phones: None and Not sure, then 1 … 6 on one row like a scale, then Custom and its box. */
@media (max-width: 599px) {
	.pp-count {
		display: block;
	}

	.pp-opts--count {
		margin-top: 8px;
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 5px;
	}

	.pp-opts--count .pp-opt__box {
		width: 100%;
		min-width: 0;
		padding: 0;
		font-size: 14px;
	}

	/* None and Not sure share the first row; Custom and its box the last. */
	.pp-opts--ends,
	.pp-opts--more {
		flex-wrap: nowrap;
		gap: 6px;
	}

	.pp-opts--more {
		margin-top: 8px;
	}

	.pp-opts--ends > *,
	.pp-opts--more > * {
		flex: 1 1 0;
		min-width: 0;
	}

	.pp-opts--ends .pp-opt__box,
	.pp-opts--more .pp-opt__box {
		width: 100%;
		padding: 0 8px;
		font-size: 14px;
	}

	.pp-custom input {
		width: 100%;
		min-width: 0;
		padding: 0 8px;
	}
}

/* Bigger cards: platforms, logo and branding. */
.pp-opts--tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
	gap: 12px;
}

/* The four platforms: one row when they fit, else two by two, so none sits alone. */
#pack-platforms {
	container-type: inline-size;
}

@container (max-width: 439px) {
	#pack-platforms .pp-opts--tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container (min-width: 440px) {
	#pack-platforms .pp-opts--tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 720px) {
	#pack-platforms .pp-opts--tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.pp-opt--tile {
	display: flex;
}

.pp-opt--tile .pp-opt__box {
	position: relative;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 4px;
	min-height: 96px;
	padding: 18px 54px 18px 20px;
	border-radius: 22px;
	text-align: left;
}

/* Platforms: icons and names line up across the row; LinkedIn's "Posts only" goes under. */
.pp-opt--icon .pp-opt__box {
	justify-content: flex-start;
}

.pp-opt__icon {
	width: 30px;
	height: 30px;
	margin-bottom: 10px;
	color: var(--pp-accent);
	transition: color .2s ease;
}

.pp-opt__label {
	font-stretch: 125%;
	font-weight: 800;
	font-size: 17px;
	line-height: 1.2;
}

.pp-opt__price {
	color: var(--pp-muted);
	font-size: 14px;
	font-weight: 600;
	transition: color .2s ease;
}

.pp-opt__tick {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 24px;
	height: 24px;
	border: 1.5px solid var(--pp-line-strong);
	border-radius: 50%;
	transition: background-color .2s ease, border-color .2s ease;
}

.pp-opt__tick::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 6px;
	height: 11px;
	border: solid var(--pp-accent);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .35s var(--pp-spring);
}

.pp-opt input:checked + .pp-opt__box .pp-opt__icon,
.pp-opt input:checked + .pp-opt__box .pp-opt__price {
	color: var(--pp-ink);
}

.pp-opt input:checked + .pp-opt__box .pp-opt__tick {
	border-color: var(--pp-ink);
	background: var(--pp-ink);
}

.pp-opt input:checked + .pp-opt__box .pp-opt__tick::after {
	transform: rotate(45deg) scale(1);
}

/* Phones: platforms with the icon and name on one line. */
@media (max-width: 599px) {
	/* Platforms: icon and name on one line. */
	.pp-opt--icon .pp-opt__box {
		min-height: 64px;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		padding: 14px 54px 14px 18px;
	}

	.pp-opt--icon .pp-opt__icon {
		margin-bottom: 0;
	}

	.pp-opt--icon .pp-opt__tick {
		top: 50%;
		margin-top: -12px;
	}
}

/* ---------- Your pack ---------- */

.pp-pack__summary {
	min-width: 0;
}

.pp-sum {
	padding: clamp(22px, 2.4vw, 30px);
	border: 1px solid var(--pp-line-strong);
	border-radius: 28px;
	background: var(--pp-surface);
}

.pp-sum__title {
	margin: 0 0 16px;
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(24px, 2.2vw, 30px);
	line-height: 1.1;
	text-transform: uppercase;
}

.pp-sum__empty,
.pp-sum__nojs {
	margin: 0;
	color: var(--pp-muted);
	font-size: 15px;
}

.js .pp-sum__nojs,
.no-js .pp-sum__empty {
	display: none;
}

.pp-sum__group + .pp-sum__group {
	margin-top: 20px;
}

.pp-sum__label {
	margin: 0 0 4px;
	color: var(--pp-subtle);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.pp-sum__lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-sum__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--pp-line-mid);
	font-size: 14px;
	line-height: 1.4;
}

.pp-sum__money {
	flex: none;
	font-weight: 700;
	white-space: nowrap;
}

/* "Included", "To discuss". */
.pp-sum__money--note {
	color: var(--pp-muted);
	font-weight: 600;
}

.pp-sum__line--fee {
	border-bottom: 0;
	color: var(--pp-muted);
}

.pp-sum__total {
	margin: 6px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 14px 18px;
	border-radius: 18px;
	background: var(--pp-accent);
	color: var(--pp-ink);
}

.pp-sum__total-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.pp-sum__total-money {
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(24px, 2.3vw, 30px);
	line-height: 1.1;
	white-space: nowrap;
}

.pp-sum__note {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--pp-line-mid);
	color: var(--pp-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

.pp-sum__note p {
	margin: 0;
}

.pp-sum__note p + p {
	margin-top: .8em;
}

.pp-sum__next {
	margin-top: 20px;
	width: 100%;
	justify-content: center;
}

/* On wide screens the details are right there beside the summary. */
@media (min-width: 960px) {
	.pp-sum__next {
		display: none;
	}
}

/* ---------- Your details ---------- */

.pp-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 600px) {
	.pp-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pp-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.pp-field label {
	font-size: 14px;
	font-weight: 700;
}

.pp-field__optional {
	margin-left: 4px;
	color: var(--pp-subtle);
	font-weight: 500;
}

.pp-field input {
	width: 100%;
	min-height: 52px;
	padding: 12px 18px;
	border: 1.5px solid var(--pp-line-strong);
	border-radius: 16px;
	background: var(--pp-bg);
	color: var(--pp-text);
	font: inherit;
	font-size: 16px; /* 16px keeps phones from zooming in. */
	transition: border-color .2s ease;
}

.pp-field input:hover {
	border-color: var(--pp-subtle);
}

.pp-field input:focus {
	border-color: var(--pp-accent);
	outline: none;
}

.pp-field input:focus-visible {
	outline: 2px solid var(--pp-accent);
	outline-offset: 2px;
}

.pp-field input[aria-invalid="true"] {
	border-color: var(--pp-pink);
}

.pp-field__error,
.pp-pack__error {
	color: var(--pp-pink);
	font-size: 14px;
	font-weight: 600;
}

.pp-pack__error {
	margin: 0;
	flex: 1 1 260px;
}

.pp-step > fieldset > .pp-pack__error {
	margin-bottom: 18px;
}

.pp-pack__send {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
}

.pp-pack__submit {
	min-height: 58px;
	padding: 0 30px;
	border: 0;
	background: var(--pp-accent);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: box-shadow .3s ease, transform .35s var(--pp-spring);
}

.pp-pack__submit:hover {
	box-shadow: 0 0 32px -6px var(--pp-accent);
}

.pp-pack__submit:active {
	transform: scale(.97);
}

.pp-pack__submit:disabled {
	opacity: .6;
	cursor: progress;
}

/* Google's "I'm not a robot" box, above the send button. */
.pp-pack__captcha {
	margin-top: 24px;
	min-height: 78px;
}

.pp-pack__captcha .pp-field__error {
	display: block;
	margin-top: 8px;
}

.pp-pack__captcha + .pp-pack__send {
	margin-top: 16px;
}

/* The box is 304px wide; on the narrowest phones it's scaled to fit. */
@media (max-width: 379px) {
	.pp-pack__captcha .g-recaptcha {
		transform: scale(.88);
		transform-origin: 0 0;
	}
}

/* Hidden from people; bots fill it in. */
.pp-pack__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Sent ---------- */

/* Fills the window on its own, keeping the footer at the bottom. */
.pp-pack__done {
	min-height: calc(100vh - var(--pp-header-h) - var(--pp-adminbar) - var(--pp-footer-h));
	display: flex;
	flex-direction: column;
	justify-content: center;
	outline: none;
}

.pp-pack__done > .pp-container {
	position: relative;
	padding-top: clamp(56px, 7vw, 104px);
	padding-bottom: clamp(56px, 7vw, 104px);
}

.pp-pack__done-icon {
	display: block;
	width: clamp(64px, 8vw, 104px);
	height: auto;
	margin-bottom: 24px;
	fill: var(--pp-pink);
}

.pp-pack__done-title {
	margin: 0;
	color: var(--pp-green);
	font-stretch: 125%;
	font-weight: 800;
	font-size: clamp(36px, 5.6vw, 80px);
	line-height: 1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.pp-pack__done-text {
	margin-top: 20px;
	max-width: 600px;
	color: var(--pp-muted);
	font-size: clamp(17px, 1.35vw, 20px);
}

.pp-pack__done-text p {
	margin: 0;
}

.pp-pack__done-links {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
}

.pp-pack__again {
	color: var(--pp-muted);
	font-weight: 600;
	text-underline-offset: 4px;
}

/* ---------- Phone bar with the price ---------- */

.pp-pack__bar {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: max(12px, env(safe-area-inset-bottom));
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 7px 7px 22px;
	border-radius: 999px;
	background: var(--pp-text);
	color: var(--pp-ink);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
	transform: translateY(calc(100% + 40px));
	visibility: hidden;
	transition: transform .45s var(--pp-spring), visibility 0s .45s;
}

.pp-pack__bar.is-shown {
	transform: none;
	visibility: visible;
	transition: transform .45s var(--pp-spring), visibility 0s;
}

.pp-pack__bar-price {
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.pp-pack__bar-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .7;
}

.pp-pack__bar strong {
	font-stretch: 125%;
	font-size: clamp(15px, 4.4vw, 19px);
	font-weight: 800;
	white-space: nowrap;
}

.pp-pack__bar .pp-btn {
	flex: none;
	padding: 0 18px;
	background: var(--pp-ink);
	color: var(--pp-text);
}

@media (min-width: 960px) {
	.pp-pack__bar {
		display: none;
	}
}

/* Leaves room for the bar under the last question on phones. */
@media (max-width: 959px) {
	.pp-pack .pp-pack__form {
		padding-bottom: 104px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pp-opt__box,
	.pp-opt__tick,
	.pp-opt__tick::after,
	.pp-pack__submit,
	.pp-pack__bar {
		transition: none;
	}

	.js .pp-step.is-back {
		animation: none;
	}
}