:root {
	--npnx-ink: #352d31;
	--npnx-muted: #6f6268;
	--npnx-pink: #ff0b80;
	--npnx-orange: #ff9c22;
	--npnx-paper: #fffaf6;
	--npnx-card: rgb(255 255 255 / 84%);
	--npnx-line: rgb(53 45 49 / 14%);
}

body.npnx-page {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(circle at 18% 15%, rgb(255 11 128 / 10%), transparent 32rem),
		radial-gradient(circle at 82% 78%, rgb(255 156 34 / 12%), transparent 35rem),
		var(--npnx-paper);
	color: var(--npnx-ink);
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.npnx-experience,
.npnx-experience * { box-sizing: border-box; }

.npnx-experience {
	position: relative;
	isolation: isolate;
	min-height: 100dvh;
}

body.admin-bar .npnx-experience { min-height: calc(100dvh - 32px); }

.npnx-stage {
	position: fixed;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

body.admin-bar .npnx-stage { top: 32px; }

.npnx-logo {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: clamp(4.5rem, 10vw, 9rem);
	height: auto;
	margin: 0;
	opacity: 0.68;
	cursor: grab;
	pointer-events: auto;
	touch-action: pan-y pinch-zoom;
	text-decoration: none;
	will-change: transform;
	filter: drop-shadow(0 0.7rem 1.4rem rgb(53 45 49 / 11%));
	transition: opacity 180ms ease, filter 180ms ease;
}

.npnx-logo img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

.npnx-experience[data-npnx-ready] .npnx-logo { opacity: 0.82; }
.npnx-logo:nth-child(1) { top: 7%; left: 5%; transform: rotate(-8deg); }
.npnx-logo:nth-child(2) { top: 11%; left: 30%; transform: rotate(6deg); }
.npnx-logo:nth-child(3) { top: 5%; left: 72%; transform: rotate(-3deg); }
.npnx-logo:nth-child(4) { top: 27%; left: 14%; transform: rotate(11deg); }
.npnx-logo:nth-child(5) { top: 31%; left: 82%; transform: rotate(-12deg); }
.npnx-logo:nth-child(6) { top: 48%; left: 3%; transform: rotate(4deg); }
.npnx-logo:nth-child(7) { top: 53%; left: 66%; transform: rotate(-7deg); }
.npnx-logo:nth-child(8) { top: 69%; left: 18%; transform: rotate(8deg); }
.npnx-logo:nth-child(9) { top: 76%; left: 44%; transform: rotate(-4deg); }
.npnx-logo:nth-child(10) { top: 68%; left: 84%; transform: rotate(13deg); }
.npnx-logo:nth-child(11) { top: 86%; left: 4%; transform: rotate(-9deg); }
.npnx-logo:nth-child(12) { top: 87%; left: 71%; transform: rotate(5deg); }
.npnx-logo:nth-child(13) { top: 17%; left: 53%; transform: rotate(9deg); }
.npnx-logo:nth-child(14) { top: 43%; left: 39%; transform: rotate(-11deg); }
.npnx-logo:nth-child(15) { top: 83%; left: 28%; transform: rotate(3deg); }
.npnx-logo:nth-child(16) { top: 3%; left: 45%; transform: rotate(-13deg); }
.npnx-logo:nth-child(17) { top: 14%; left: 88%; transform: rotate(7deg); }
.npnx-logo:nth-child(18) { top: 22%; left: 3%; transform: rotate(-5deg); }
.npnx-logo:nth-child(19) { top: 24%; left: 41%; transform: rotate(12deg); }
.npnx-logo:nth-child(20) { top: 36%; left: 61%; transform: rotate(-9deg); }
.npnx-logo:nth-child(21) { top: 39%; left: 25%; transform: rotate(5deg); }
.npnx-logo:nth-child(22) { top: 47%; left: 90%; transform: rotate(-14deg); }
.npnx-logo:nth-child(23) { top: 58%; left: 12%; transform: rotate(10deg); }
.npnx-logo:nth-child(24) { top: 60%; left: 50%; transform: rotate(-6deg); }
.npnx-logo:nth-child(25) { top: 61%; left: 75%; transform: rotate(14deg); }
.npnx-logo:nth-child(26) { top: 73%; left: 2%; transform: rotate(-10deg); }
.npnx-logo:nth-child(27) { top: 73%; left: 60%; transform: rotate(6deg); }
.npnx-logo:nth-child(28) { top: 84%; left: 88%; transform: rotate(-3deg); }
.npnx-logo:nth-child(29) { top: 91%; left: 18%; transform: rotate(11deg); }
.npnx-logo:nth-child(30) { top: 91%; left: 51%; transform: rotate(-7deg); }
.npnx-logo:nth-child(31) { top: 2%; left: 18%; transform: rotate(13deg); }
.npnx-logo:nth-child(32) { top: 9%; left: 61%; transform: rotate(-10deg); }
.npnx-logo:nth-child(33) { top: 18%; left: 76%; transform: rotate(4deg); }
.npnx-logo:nth-child(34) { top: 30%; left: 1%; transform: rotate(-13deg); }
.npnx-logo:nth-child(35) { top: 34%; left: 48%; transform: rotate(8deg); }
.npnx-logo:nth-child(36) { top: 43%; left: 77%; transform: rotate(-4deg); }
.npnx-logo:nth-child(37) { top: 52%; left: 29%; transform: rotate(12deg); }
.npnx-logo:nth-child(38) { top: 57%; left: 92%; transform: rotate(-8deg); }
.npnx-logo:nth-child(39) { top: 68%; left: 35%; transform: rotate(5deg); }
.npnx-logo:nth-child(40) { top: 78%; left: 76%; transform: rotate(-12deg); }
.npnx-logo:nth-child(41) { top: 88%; left: 38%; transform: rotate(9deg); }
.npnx-logo:nth-child(42) { top: 94%; left: 81%; transform: rotate(-5deg); }
.npnx-logo--0 { width: clamp(5.5rem, 13vw, 11rem); }
.npnx-logo--1 { width: clamp(4rem, 8vw, 7rem); opacity: 0.56; }
.npnx-logo--2 { width: clamp(4.75rem, 10vw, 8.5rem); }
.npnx-logo--3 { width: clamp(3.75rem, 7vw, 6.5rem); opacity: 0.52; }
.npnx-logo--4 { width: clamp(5rem, 11vw, 9.5rem); }

.npnx-logo.is-dragging {
	z-index: 5;
	cursor: grabbing;
	filter: drop-shadow(0 1.2rem 1.8rem rgb(53 45 49 / 24%));
}

.npnx-logo:hover { opacity: 1; }
.npnx-logo:focus-visible {
	outline: 3px solid var(--npnx-pink);
	outline-offset: 0.35rem;
}

.npnx-motion-toggle {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 30;
	min-height: 2.75rem;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--npnx-line);
	border-radius: 999px;
	background: rgb(255 255 255 / 82%);
	color: var(--npnx-ink);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	backdrop-filter: blur(10px);
	cursor: pointer;
}

body.admin-bar .npnx-motion-toggle { top: 3rem; }

.npnx-landing__shell {
	position: relative;
	z-index: 10;
	display: grid;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	width: min(100% - 2rem, 68rem);
	margin: 0 auto;
	padding: clamp(5.5rem, 13vh, 9rem) 0 3rem;
}

.npnx-landing__intro,
.npnx-contact {
	width: min(100%, 52rem);
	margin-inline: auto;
	border: 1px solid var(--npnx-line);
	border-radius: clamp(1.3rem, 4vw, 2.2rem);
	background: var(--npnx-card);
	box-shadow: 0 2rem 5rem rgb(53 45 49 / 10%);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.npnx-landing__intro {
	padding: clamp(1.7rem, 6vw, 4rem);
	text-align: center;
}

.npnx-eyebrow {
	margin: 0 0 0.75rem;
	color: #9b184e;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.npnx-landing h1,
.npnx-contact h2 {
	margin: 0;
	color: var(--npnx-ink);
	font-weight: 720;
	letter-spacing: -0.055em;
}

.npnx-landing h1 {
	font-size: clamp(2.6rem, 8vw, 5.8rem);
	line-height: 0.98;
}

.npnx-contact h2 {
	font-size: clamp(1.8rem, 4vw, 3rem);
	line-height: 1.05;
}

.npnx-deck {
	max-width: 43rem;
	margin: 1.4rem auto 0;
	color: var(--npnx-ink);
	font-size: clamp(1.05rem, 2.4vw, 1.35rem);
	line-height: 1.6;
}

.npnx-note {
	max-width: 40rem;
	margin: 1rem auto 0;
	color: var(--npnx-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

.npnx-contact { padding: clamp(1.5rem, 5vw, 3rem); }

.npnx-contact__heading > p:last-child {
	margin: 0.8rem 0 1.5rem;
	color: var(--npnx-muted);
}

.npnx-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.npnx-form p { margin: 0; }
.npnx-form__message,
.npnx-form__wide,
.npnx-form__security,
.npnx-form__submit { grid-column: 1 / -1; }

.npnx-form__security { min-height: 65px; }
.npnx-form__security p { margin: 0; }

.npnx-form label {
	display: block;
	margin: 0 0 0.45rem;
	font-size: 0.86rem;
	font-weight: 750;
}

.npnx-form input,
.npnx-form select,
.npnx-form textarea {
	display: block;
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid rgb(53 45 49 / 24%);
	border-radius: 0.8rem;
	background: rgb(255 255 255 / 92%);
	color: var(--npnx-ink);
	font: inherit;
}

.npnx-form select { appearance: auto; }

.npnx-form textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.npnx-form button[type="submit"] {
	min-height: 3rem;
	padding: 0.75rem 1.2rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(100deg, #7a123b, #8a2149 48%, #7a3900);
	color: #fff;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 0.8rem 1.8rem rgb(255 11 128 / 19%);
}

.npnx-form-message {
	margin: 0 0 1.2rem;
	padding: 0.8rem 1rem;
	border-radius: 0.8rem;
	font-weight: 650;
}

.npnx-form-message--success { background: #e3f7eb; color: #175c34; }
.npnx-form-message--error { background: #fff0ef; color: #84231f; }

body.npnx-site-new-pencil-marketing {
	background:
		radial-gradient(circle at 12% 16%, rgb(255 11 128 / 18%), transparent 28rem),
		radial-gradient(circle at 88% 18%, rgb(255 156 34 / 19%), transparent 26rem),
		radial-gradient(circle at 70% 88%, rgb(255 11 128 / 12%), transparent 32rem),
		linear-gradient(135deg, #fff1e8, #fffaf6 48%, #ffeef6);
}

.npnx-site-new-pencil-marketing .npnx-experience[data-npnx-ready] .npnx-logo { opacity: 0.88; }

.npnx-site-new-pencil-marketing .npnx-landing__shell--intake {
	grid-template-columns: minmax(0, 0.92fr) minmax(27rem, 1.08fr);
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	width: min(100% - 2rem, 78rem);
	padding: clamp(4.75rem, 9vh, 6.75rem) 0 2rem;
}

.npnx-site-new-pencil-marketing .npnx-landing__intro,
.npnx-site-new-pencil-marketing .npnx-contact {
	width: 100%;
	margin: 0;
	border-color: rgb(255 255 255 / 72%);
	background: rgb(255 255 255 / 46%);
	box-shadow:
		0 2rem 5rem rgb(76 35 53 / 13%),
		inset 0 1px 0 rgb(255 255 255 / 64%);
	-webkit-backdrop-filter: blur(7px) saturate(125%);
	backdrop-filter: blur(7px) saturate(125%);
}

.npnx-site-new-pencil-marketing .npnx-contact { background: rgb(255 255 255 / 52%); }

.npnx-site-new-pencil-marketing .npnx-landing__intro {
	padding: clamp(2rem, 4.7vw, 3.75rem);
	text-align: left;
}

.npnx-site-new-pencil-marketing .npnx-landing h1 {
	font-size: clamp(3rem, 5.4vw, 4.8rem);
	line-height: 0.95;
}

.npnx-site-new-pencil-marketing .npnx-deck,
.npnx-site-new-pencil-marketing .npnx-note {
	margin-inline: 0;
}

.npnx-site-new-pencil-marketing .npnx-deck {
	margin-top: 1.25rem;
	font-size: clamp(1.02rem, 1.6vw, 1.2rem);
	line-height: 1.55;
}

.npnx-site-new-pencil-marketing .npnx-note {
	margin-top: 1.1rem;
	padding-left: 0.9rem;
	border-left: 3px solid var(--npnx-orange);
	color: #5d4f55;
}

.npnx-capabilities {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.35rem 0 0;
	padding: 0;
	list-style: none;
}

.npnx-capabilities li {
	display: inline-flex;
	align-items: center;
	gap: 0.42rem;
	min-height: 2rem;
	padding: 0.38rem 0.66rem;
	border: 1px solid rgb(122 18 59 / 12%);
	border-radius: 999px;
	background: rgb(255 255 255 / 55%);
	color: #5c3445;
	font-size: 0.78rem;
	font-weight: 750;
}

.npnx-capabilities li::before {
	width: 0.48rem;
	height: 0.48rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--npnx-pink), var(--npnx-orange));
	content: "";
}

.npnx-site-new-pencil-marketing .npnx-contact { padding: clamp(1.45rem, 3.5vw, 2.5rem); }

.npnx-site-new-pencil-marketing .npnx-contact h2 {
	font-size: clamp(2rem, 3.5vw, 2.8rem);
}

.npnx-site-new-pencil-marketing .npnx-contact__heading > p:last-child {
	margin-bottom: 1.1rem;
}

.npnx-site-new-pencil-marketing .npnx-form { gap: 0.78rem; }

.npnx-site-new-pencil-marketing .npnx-form label {
	margin-bottom: 0.34rem;
	font-size: 0.8rem;
}

.npnx-site-new-pencil-marketing .npnx-form input,
.npnx-site-new-pencil-marketing .npnx-form select,
.npnx-site-new-pencil-marketing .npnx-form textarea {
	min-height: 2.85rem;
	border-color: rgb(53 45 49 / 20%);
	background: rgb(255 255 255 / 79%);
}

.npnx-site-new-pencil-marketing .npnx-form textarea { min-height: 6.6rem; }

.npnx-site-new-pencil-marketing .npnx-form button[type="submit"] {
	width: 100%;
	background: linear-gradient(105deg, #8d1047, #c11b67 52%, #b85d00);
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.npnx-site-new-pencil-marketing .npnx-form button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 1rem 2rem rgb(255 11 128 / 24%);
}

.npnx-form__privacy {
	grid-column: 1 / -1;
	color: var(--npnx-muted);
	font-size: 0.76rem;
	line-height: 1.45;
	text-align: center;
}

.npnx-site-new-pencil-marketing .npnx-footer { grid-column: 1 / -1; }

.npnx-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.npnx-footer {
	display: flex;
	justify-content: center;
	gap: 0.65rem;
	padding: 0.5rem 1rem;
	color: var(--npnx-muted);
	font-size: 0.82rem;
}

.npnx-footer a,
.npnx-link { color: var(--npnx-ink); font-weight: 700; }

.npnx-404 {
	display: grid;
	place-items: center;
	min-height: 100dvh;
}

body.admin-bar .npnx-404 { min-height: calc(100dvh - 32px); }

.npnx-404__message {
	position: relative;
	z-index: 10;
	display: grid;
	justify-items: center;
	gap: 0.7rem;
	width: min(82vw, 28rem);
	padding: clamp(1rem, 3vw, 1.5rem);
	text-align: center;
	pointer-events: none;
}

.npnx-404__code {
	margin: 0;
	font-size: clamp(4rem, 17vw, 10rem);
	font-weight: 250;
	line-height: 0.8;
	letter-spacing: -0.1em;
	opacity: 0.12;
}

.npnx-link {
	min-height: 2.75rem;
	padding: 0.6rem 0.2rem;
	border-bottom: 2px solid currentColor;
	text-decoration: none;
	pointer-events: auto;
}

.npnx-link:hover,
.npnx-footer a:hover { color: #9b184e; }

.npnx-motion-toggle:focus-visible,
.npnx-link:focus-visible,
.npnx-footer a:focus-visible,
.npnx-form input:focus-visible,
.npnx-form select:focus-visible,
.npnx-form textarea:focus-visible,
.npnx-form button:focus-visible,
.npnx-skip-link:focus-visible {
	outline: 3px solid var(--npnx-pink);
	outline-offset: 0.25rem;
}

.npnx-skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100000;
	padding: 0.75rem 1rem;
	transform: translateY(-200%);
	background: #fff;
	color: #111;
	font-weight: 800;
}

.npnx-skip-link:focus { transform: translateY(0); }

.npnx-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.npnx-logo { will-change: auto; transition: none; opacity: 0.34; }
	.npnx-site-new-pencil-marketing .npnx-form button[type="submit"] { transition: none; }
}

@media (max-width: 980px) {
	.npnx-site-new-pencil-marketing .npnx-landing__shell--intake {
		grid-template-columns: 1fr;
		width: min(100% - 2rem, 42rem);
	}
}

@media (max-width: 782px) {
	body.admin-bar .npnx-experience { min-height: calc(100dvh - 46px); }
	body.admin-bar .npnx-stage { top: 46px; }
	body.admin-bar .npnx-404 { min-height: calc(100dvh - 46px); }
	body.admin-bar .npnx-motion-toggle { top: 3.8rem; }
	.npnx-form { grid-template-columns: 1fr; }
	.npnx-form p { grid-column: 1; }
	.npnx-site-new-pencil-marketing .npnx-landing__shell--intake { padding-top: 5.2rem; }
	.npnx-site-new-pencil-marketing .npnx-landing__intro { padding: 1.8rem; }
	.npnx-footer { flex-direction: column; align-items: center; }
}

@media (forced-colors: active) {
	.npnx-link,
	.npnx-motion-toggle,
	.npnx-form button[type="submit"] { border: 2px solid LinkText; }
}
