/**
 * pp-ear-piercing — "first-sparkle ticket" design system, v1.1.0.
 *
 * Every rule carries !important: pediatricpeople.com runs Avada, whose
 * globals otherwise win (hard-learned on pp-registration and
 * pp-vaccine-intake).
 *
 * Direction: a keepsake ticket, not a checkout. One memorable device — the
 * perforated ticket stub carrying the chosen earrings through every step,
 * punched into the confirmation stub at the end. Catalog cards sit on
 * jewelry-tray panels. Motion only answers action: select pop, step rise,
 * and one orchestrated confetti finale.
 */

.ppep {
	/* Tokens */
	--pp-ink: #1f2a28 !important;
	--pp-teal: #0a7d71 !important;
	--pp-teal-deep: #075e55 !important;
	--pp-seafoam: #12b2a0 !important;
	--pp-porcelain: #f3f8f7 !important;
	--pp-gold: #c99a2e !important;
	--pp-line: #d9e4e2 !important;
	--pp-display: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', sans-serif !important;

	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 720px !important;
	margin: 0 auto !important;
	padding: 8px 0 44px !important;
	box-sizing: border-box !important;
	padding-left: env(safe-area-inset-left, 0px) !important;
	padding-right: env(safe-area-inset-right, 0px) !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	color: var(--pp-ink) !important;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-text-size-adjust: 100% !important;
}

/* iOS lockdown: double-tap zoom dies everywhere in the form. Scrolling
   and pinch-zoom accessibility stay; carousel and signature carve-outs
   win on specificity. */
.ppep, .ppep * { touch-action: manipulation !important; }
.ppep, .ppep * { -webkit-tap-highlight-color: transparent !important; }
/* No long-press selection loupe on labels/headings mid-tap... */
.ppep { -webkit-user-select: none !important; user-select: none !important; }
/* ...but typing and the confirmation code stay selectable. */
.ppep input, .ppep textarea {
	-webkit-user-select: text !important;
	user-select: text !important;
}
.ppep .ppep-code strong, .ppep .ppep-consent p {
	-webkit-user-select: text !important;
	user-select: text !important;
}
.ppep .ppep-code strong { -webkit-user-select: all !important; user-select: all !important; }

.ppep *:focus-visible {
	outline: 3px solid var(--pp-seafoam) !important;
	outline-offset: 2px !important;
}

/* ---- motion vocabulary (action-answering only) ---- */

@keyframes ppep-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes ppep-pop {
	0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); }
}
@keyframes ppep-checkpop {
	0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); }
}
@keyframes ppep-fall {
	0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
	85% { opacity: 1; }
	100% { transform: translateY(560px) rotate(660deg); opacity: 0; }
}

.ppep .ppep-step { animation: none !important; }
.ppep .ppep-step.anim { animation: ppep-rise .32s ease both !important; }

/* ---- loading skeleton ---- */

@keyframes ppep-shimmer { from { background-position: -300px 0; } to { background-position: 300px 0; } }
.ppep .ppep-skel {
	height: 16px !important; border-radius: 8px !important; margin: 0 0 12px !important;
	background: linear-gradient(90deg, #e8f0ee 25%, #f6faf9 50%, #e8f0ee 75%) !important;
	background-size: 600px 100% !important;
	animation: ppep-shimmer 1.2s linear infinite !important;
}
.ppep .ppep-skel.hero { height: 120px !important; border-radius: 20px !important; }
.ppep .ppep-skel.card { height: 170px !important; border-radius: 14px !important; margin: 0 !important; }
.ppep .ppep-skelgrid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }

/* ---- type ---- */

.ppep .ppep-h {
	font-family: var(--pp-display) !important;
	font-size: 27px !important;
	font-weight: 700 !important;
	margin: 0 0 6px !important;
	color: var(--pp-ink) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}
.ppep .ppep-h.sm { font-size: 18px !important; margin: 0 0 12px !important; color: var(--pp-teal-deep) !important; }
.ppep .ppep-note { color: #5b6b68 !important; font-size: 14px !important; margin: -6px 0 16px !important; }

/* ---- hero: quiet gradient, static sparkle cluster, left-aligned ---- */

.ppep .ppep-hero {
	position: relative !important;
	overflow: hidden !important;
	background:
		radial-gradient(circle at 86% 18%, rgba(255,255,255,.16) 0 6%, transparent 7%),
		linear-gradient(128deg, var(--pp-teal-deep) 0%, var(--pp-teal) 46%, var(--pp-seafoam) 100%) !important;
	border-radius: 20px !important;
	padding: 26px 120px 24px 26px !important;
	margin: 0 0 20px !important;
	box-shadow: 0 12px 28px rgba(7, 94, 85, .26) !important;
}
.ppep .ppep-hero .ppep-h.hero {
	color: #fff !important;
	font-size: 32px !important;
	margin: 0 0 5px !important;
}
.ppep .ppep-hero p { color: #dcf5f1 !important; margin: 0 !important; font-size: 15px !important; max-width: 430px !important; }
.ppep .ppep-spark {
	position: absolute !important;
	color: var(--pp-gold) !important;
	font-style: normal !important;
	text-shadow: 0 0 14px rgba(246, 214, 122, .55) !important;
	pointer-events: none !important;
}
.ppep .ppep-spark.s1 { top: 16px !important; right: 26px !important; font-size: 30px !important; }
.ppep .ppep-spark.s2 { top: 56px !important; right: 74px !important; font-size: 15px !important; opacity: .85 !important; }
.ppep .ppep-spark.s3 { bottom: 18px !important; right: 44px !important; font-size: 21px !important; opacity: .9 !important; }

/* ---- progress: the sparkle journey ----
   Glyphs are flex-centered — line-height positioning broke under Avada's
   inherited styles (mis-centered numbers on the live site, 09/18/2026).
   Completed steps read as done (check), the current step is the gold-haloed
   gem on a gradient rail, upcoming steps stay quiet. ---- */

.ppep .ppep-progress {
	display: flex !important;
	list-style: none !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
}
.ppep .ppep-progress li {
	flex: 1 1 0 !important;
	position: relative !important;
	text-align: center !important;
	font-size: 12.5px !important;
	line-height: 1.3 !important;
	color: #8ba39f !important;
	padding: 34px 2px 0 !important;
	margin: 0 !important;
	list-style: none !important;
}
.ppep .ppep-progress li::before {
	content: '' !important;
	position: absolute !important;
	top: 13px !important; left: -50% !important; right: 50% !important;
	height: 3px !important;
	border-radius: 3px !important;
	background: var(--pp-line) !important;
}
.ppep .ppep-progress li:first-child::before { display: none !important; }
.ppep .ppep-progress li.done::before,
.ppep .ppep-progress li.now::before {
	background: linear-gradient(90deg, var(--pp-teal-deep), var(--pp-seafoam)) !important;
}
.ppep .ppep-progress li span {
	position: absolute !important;
	top: 2px !important; left: 50% !important;
	transform: translateX(-50%) !important;
	width: 25px !important; height: 25px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 2px solid var(--pp-line) !important;
	color: #8ba39f !important;
	font-family: var(--pp-display) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 1 !important;
}
.ppep .ppep-progress li.done { color: var(--pp-teal) !important; }
.ppep .ppep-progress li.done span {
	background: var(--pp-teal) !important;
	border-color: var(--pp-teal) !important;
	color: #fff !important;
	font-size: 0 !important;
}
.ppep .ppep-progress li.done span::before {
	content: '\2713' !important;
	font-size: 13px !important;
	line-height: 1 !important;
}
.ppep .ppep-progress li.now {
	color: var(--pp-teal-deep) !important;
	font-weight: 700 !important;
	font-family: var(--pp-display) !important;
}
.ppep .ppep-progress li.now span {
	top: 0 !important;
	width: 29px !important; height: 29px !important;
	border-color: var(--pp-teal) !important;
	color: var(--pp-teal-deep) !important;
	font-size: 13px !important;
	box-shadow: 0 0 0 4px rgba(201, 154, 46, .28), 0 0 0 9px rgba(201, 154, 46, .1) !important;
}

/* ---- phone stepper: segmented fill bar (hidden above 560px) ---- */

.ppep .ppep-mprog { display: none !important; margin: 0 0 18px !important; }
.ppep .ppep-mprog .segs { display: flex !important; gap: 6px !important; }
.ppep .ppep-mprog .segs i {
	flex: 1 1 0 !important;
	height: 7px !important;
	border-radius: 999px !important;
	background: var(--pp-line) !important;
	display: block !important;
	font-style: normal !important;
}
.ppep .ppep-mprog .segs i.done,
.ppep .ppep-mprog .segs i.now {
	background: linear-gradient(90deg, var(--pp-teal-deep), var(--pp-seafoam)) !important;
}
.ppep .ppep-mprog .segs i.now {
	box-shadow: 0 0 0 2.5px rgba(201, 154, 46, .35) !important;
}
.ppep .ppep-mprog .meta {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	margin-top: 9px !important;
}
.ppep .ppep-mprog .meta strong {
	font-family: var(--pp-display) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--pp-teal-deep) !important;
	line-height: 1.2 !important;
}
.ppep .ppep-mprog .meta span { font-size: 12.5px !important; color: #8ba39f !important; }

/* ---- the ticket stub: chosen earrings ride every step ---- */

.ppep .ppep-stub {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: #fff !important;
	border: 1.5px solid var(--pp-line) !important;
	border-left: 6px solid var(--pp-gold) !important;
	border-radius: 14px !important;
	padding: 8px 12px 8px 10px !important;
	margin: 0 0 18px !important;
	position: relative !important;
	box-shadow: 0 4px 14px rgba(7, 94, 85, .08) !important;
	width: 100% !important;
	text-align: left !important;
	font-family: inherit !important;
	box-sizing: border-box !important;
}
/* Perforation nick where the stub will tear at the finale. */
.ppep .ppep-stub::before, .ppep .ppep-stub::after {
	content: '' !important;
	position: absolute !important;
	right: 52px !important;
	width: 14px !important; height: 14px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 1.5px solid var(--pp-line) !important;
	box-sizing: border-box !important;
}
.ppep .ppep-stub::before { top: -8px !important; border-bottom-color: transparent !important; }
.ppep .ppep-stub::after { bottom: -8px !important; border-top-color: transparent !important; }
.ppep .ppep-stub-thumb {
	position: relative !important;
	flex: none !important;
	width: 58px !important; height: 58px !important;
	padding: 4px !important;
	border: 1.5px solid #d5e4e1 !important;
	border-radius: 12px !important;
	background: radial-gradient(circle at 50% 42%, #fdfefe 0%, #f0f7f6 100%) !important;
	cursor: pointer !important;
	display: grid !important;
	place-items: center !important;
	touch-action: manipulation !important;
	transition: border-color .14s ease, transform .14s ease !important;
}
.ppep .ppep-stub-thumb:hover { border-color: var(--pp-teal) !important; transform: scale(1.04) !important; }
.ppep .ppep-stub-thumb img {
	width: 100% !important; height: 100% !important;
	object-fit: contain !important;
	mix-blend-mode: multiply !important;
	display: block !important;
}
.ppep .ppep-stub-thumb::after {
	content: '+' !important;
	position: absolute !important;
	right: -6px !important; bottom: -6px !important;
	width: 19px !important; height: 19px !important;
	line-height: 18px !important;
	text-align: center !important;
	border-radius: 50% !important;
	background: var(--pp-teal) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	box-shadow: 0 2px 6px rgba(7, 94, 85, .35) !important;
}
.ppep .ppep-stub .t { flex: 1 !important; min-width: 0 !important; padding-right: 4px !important; }
.ppep .ppep-stub .t strong {
	display: block !important; font-size: 15px !important; color: var(--pp-ink) !important;
	line-height: 1.25 !important;
}
.ppep .ppep-stub .t small { display: block !important; color: #5b6b68 !important; font-size: 12.5px !important; line-height: 1.35 !important; }
.ppep .ppep-stub .t .p {
	display: block !important;
	font-weight: 700 !important; color: var(--pp-teal-deep) !important; font-size: 14.5px !important;
	margin-top: 2px !important;
}
.ppep .ppep-stub-change {
	flex: none !important;
	margin-right: 22px !important;
	background: none !important; border: none !important; padding: 6px 2px !important;
	font-family: inherit !important;
	font-size: 12.5px !important; color: var(--pp-teal) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
	touch-action: manipulation !important;
}

/* ---- lightbox (on body; literal colors — token scope stays in .ppep) ---- */

.ppep-zoom, .ppep-zoom * { touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; }
.ppep-zoom {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	display: grid !important;
	place-items: center !important;
	background: rgba(10, 24, 22, .58) !important;
	padding: 18px !important;
	animation: ppep-zoomfade .18s ease !important;
}
.ppep-zoom .ppep-zoom-card {
	position: relative !important;
	width: min(420px, 94vw) !important;
	max-height: 92vh !important;
	overflow: auto !important;
	background: #fff !important;
	border-radius: 22px !important;
	padding: 26px 22px 24px !important;
	text-align: center !important;
	box-shadow: 0 24px 60px rgba(4, 22, 20, .45) !important;
	animation: ppep-zoomin .22s cubic-bezier(.2, .9, .3, 1.2) !important;
}
.ppep-zoom .ppep-zoom-x {
	position: absolute !important;
	top: 12px !important; right: 12px !important;
	width: 36px !important; height: 36px !important;
	border-radius: 50% !important;
	border: none !important;
	background: #eef5f4 !important;
	color: #075e55 !important;
	font-size: 15px !important;
	cursor: pointer !important;
	touch-action: manipulation !important;
}
.ppep-zoom .ppep-zoom-x:hover { background: #dfeeec !important; }
.ppep-zoom .ppep-zoom-tile {
	display: grid !important;
	place-items: center !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 16px !important;
	background: radial-gradient(circle at 50% 42%, #fdfefe 0%, #f2f8f7 62%, #e9f2f0 100%) !important;
	margin: 0 0 16px !important;
}
.ppep-zoom .ppep-zoom-tile img {
	width: 88% !important; height: 88% !important;
	object-fit: contain !important;
	mix-blend-mode: multiply !important;
}
.ppep-zoom strong { display: block !important; font-family: 'Baloo 2', system-ui, sans-serif !important; font-size: 21px !important; color: #1f2a28 !important; }
.ppep-zoom small { display: block !important; color: #5b6b68 !important; font-size: 14px !important; margin-top: 3px !important; }
.ppep-zoom .p { display: block !important; margin-top: 8px !important; font-weight: 700 !important; font-size: 17px !important; color: #075e55 !important; }
.ppep-zoom s.ppep-reg { color: #93a5a1 !important; font-weight: 500 !important; margin-right: 4px !important; }
.ppep-zoom b.ppep-sale { color: #a55b00 !important; }

@keyframes ppep-zoomfade { from { opacity: 0; } }
@keyframes ppep-zoomin { from { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) {
	.ppep-zoom, .ppep-zoom .ppep-zoom-card { animation: none !important; }
}

/* ---- catalog: jewelry trays ---- */

.ppep .ppep-tray {
	background: var(--pp-porcelain) !important;
	border: 1px solid #e2ecea !important;
	border-radius: 20px !important;
	padding: 18px 16px 16px !important;
	margin: 0 0 18px !important;
}
.ppep .ppep-tray .ppep-h.sm { display: flex !important; align-items: center !important; gap: 8px !important; }
.ppep .ppep-tray .ppep-h.sm .ct {
	margin-left: auto !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #8ba39f !important;
	letter-spacing: .2px !important;
}
.ppep .ppep-tray .ppep-h.sm::before {
	content: '\2726' !important;
	color: var(--pp-gold) !important;
	font-size: 14px !important;
}
.ppep .ppep-carwrap { position: relative !important; padding: 0 6px !important; }

.ppep .ppep-carousel {
	display: flex !important;
	gap: 14px !important;
	overflow-x: auto !important;
	overscroll-behavior-x: contain !important;
	touch-action: pan-x pan-y !important;
	scroll-snap-type: x mandatory !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 12px 2px 6px !important;
	scrollbar-width: none !important;
}
.ppep .ppep-carousel::-webkit-scrollbar { display: none !important; }

/* One card per view; content centered, badge room reserved by padding. */
.ppep .ppep-carousel .ppep-card {
	flex: 0 0 100% !important;
	scroll-snap-align: start !important;
	scroll-snap-stop: always !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
}
.ppep .ppep-carousel .ppep-card .ppep-imgbtn { width: min(320px, 82%) !important; }
.ppep .ppep-carousel .ppep-card .ppep-imgwrap,
.ppep .ppep-carousel .ppep-card .ppep-noimg { width: 100% !important; }
.ppep .ppep-carousel .ppep-card strong { font-size: 16px !important; }

/* Arrows: circular, floating at image height, gone at the ends. */
.ppep .ppep-cararrow {
	position: absolute !important;
	top: 44% !important;
	transform: translateY(-50%) !important;
	z-index: 3 !important;
	width: 42px !important; height: 42px !important;
	border-radius: 50% !important;
	border: 1.5px solid var(--pp-line) !important;
	background: #fff !important;
	color: var(--pp-teal-deep) !important;
	font-size: 26px !important;
	line-height: 1 !important;
	padding: 0 0 3px !important;
	cursor: pointer !important;
	box-shadow: 0 4px 12px rgba(7, 94, 85, .16) !important;
	transition: opacity .16s ease, transform .16s ease !important;
	touch-action: manipulation !important;
}
.ppep .ppep-cararrow.prev { left: -4px !important; }
.ppep .ppep-cararrow.next { right: -4px !important; }
.ppep .ppep-cararrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.07) !important; background: #f4faf9 !important; }
.ppep .ppep-cararrow:disabled { opacity: 0 !important; pointer-events: none !important; }

/* ---- allergy steer: gentle advisory with a jump to plastic ---- */

.ppep .ppep-steer {
	background: #fdf6e8 !important;
	border: 1.5px solid #ecd9ac !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	margin: 0 0 14px !important;
}
.ppep .ppep-steer p { margin: 0 0 8px !important; font-size: 14px !important; color: #4a4234 !important; line-height: 1.45 !important; }
.ppep .ppep-steer strong { color: #7a5a12 !important; }
.ppep .ppep-steerbtn {
	background: none !important; border: none !important; padding: 4px 0 !important;
	font-family: inherit !important; font-size: 13.5px !important; font-weight: 700 !important;
	color: var(--pp-teal) !important; text-decoration: underline !important;
	cursor: pointer !important; touch-action: manipulation !important;
}

/* ---- sale styling: gold chip on the photo, struck regular price ---- */

.ppep .ppep-salechip {
	position: absolute !important;
	top: -8px !important; left: -8px !important;
	z-index: 2 !important;
	background: linear-gradient(135deg, var(--pp-gold), #b3831f) !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .8px !important;
	padding: 4px 9px !important;
	border-radius: 999px !important;
	box-shadow: 0 3px 8px rgba(179, 131, 31, .4) !important;
}
.ppep s.ppep-reg { color: #93a5a1 !important; font-weight: 500 !important; margin-right: 4px !important; }
.ppep b.ppep-sale, .ppep strong.ppep-sale { color: #a55b00 !important; }

/* Dots: position at a glance, tappable to jump. */
.ppep .ppep-cardots {
	display: flex !important;
	justify-content: center !important;
	gap: 7px !important;
	padding: 8px 0 2px !important;
}
.ppep .ppep-cardot {
	width: 8px !important; height: 8px !important;
	border-radius: 999px !important;
	border: none !important;
	padding: 0 !important;
	background: #cfdedb !important;
	cursor: pointer !important;
	transition: background .16s ease, width .16s ease !important;
	touch-action: manipulation !important;
}
.ppep .ppep-cardot.on {
	width: 20px !important;
	background: linear-gradient(90deg, var(--pp-teal-deep), var(--pp-seafoam)) !important;
}
.ppep .ppep-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	background: none !important;
	border: none !important;
	padding: 4px 4px 10px !important;
	text-align: center !important;
	font-family: inherit !important;
}

/* The earring photo is the only tap target. */
.ppep .ppep-imgbtn {
	position: relative !important;
	display: block !important;
	padding: 8px !important;
	background: #fff !important;
	border: 2px solid #e2ecea !important;
	border-radius: 16px !important;
	cursor: pointer !important;
	transition: border-color .16s ease, box-shadow .16s ease, transform .14s ease !important;
	box-shadow: 0 2px 8px rgba(7, 94, 85, .07) !important;
	touch-action: manipulation !important;
}
.ppep .ppep-imgbtn:hover { border-color: #b4dcd6 !important; transform: translateY(-2px) !important; }
.ppep .ppep-imgbtn:active { transform: scale(.98) !important; }
.ppep .ppep-card.selected .ppep-imgbtn {
	border-color: var(--pp-teal) !important;
	box-shadow: 0 0 0 3px rgba(18, 178, 160, .2), 0 10px 22px rgba(7, 94, 85, .18) !important;
}
.ppep .ppep-card.selected .ppep-imgbtn::after {
	content: '\2713' !important;
	position: absolute !important;
	top: -9px !important; right: -9px !important;
	width: 28px !important; height: 28px !important; line-height: 28px !important;
	border-radius: 50% !important;
	background: var(--pp-teal) !important;
	color: #fff !important;
	font-size: 15px !important; font-weight: 700 !important;
	box-shadow: 0 3px 8px rgba(7, 94, 85, .4) !important;
	animation: ppep-checkpop .3s ease !important;
}
.ppep .ppep-imgwrap {
	display: grid !important;
	place-items: center !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	/* Soft porcelain tile: white product-photo backgrounds multiply into
	   it and disappear, so the earring reads as a cut-out. */
	background: radial-gradient(circle at 50% 42%, #fdfefe 0%, #f2f8f7 62%, #e9f2f0 100%) !important;
}
.ppep .ppep-card img {
	width: 90% !important;
	height: 90% !important;
	object-fit: contain !important;
	display: block !important;
	mix-blend-mode: multiply !important;
}
.ppep .ppep-noimg {
	width: 100% !important; max-width: 150px !important; height: 110px !important;
	background: #eef2f1 !important; border-radius: 10px !important; display: block !important;
}
.ppep .ppep-card strong { font-size: 14.5px !important; color: var(--pp-ink) !important; line-height: 1.25 !important; }
.ppep .ppep-card em {
	font-style: normal !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	color: var(--pp-teal-deep) !important;
	background: var(--pp-porcelain) !important;
	border: 1px solid #dcebe8 !important;
	border-radius: 999px !important;
	padding: 2px 12px !important;
}

/* ---- fields ---- */

/* Form steps sit in a panel the same width and radius as the trays and
   consent cards, so every step presents one consistent block. */
.ppep .ppep-panel {
	background: #fff !important;
	border: 1.5px solid var(--pp-line) !important;
	border-radius: 20px !important;
	padding: 18px 18px 6px !important;
	margin: 0 0 4px !important;
	box-sizing: border-box !important;
	width: 100% !important;
}
.ppep .ppep-fields2 {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0 14px !important;
}
@media (max-width: 480px) {
	.ppep .ppep-fields2 { grid-template-columns: 1fr !important; }
}

.ppep .ppep-field { margin: 0 0 16px !important; }
.ppep .ppep-field label {
	display: block !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	margin: 0 0 5px !important;
	color: #33413e !important;
}
.ppep .ppep-field input[type=text],
.ppep .ppep-field input[type=email],
.ppep .ppep-field input[type=number],
.ppep .ppep-field input[type=password] {
	width: 100% !important;
	padding: 11px 14px !important;
	/* 16px is the iOS zoom-on-focus threshold. Do not reduce. */
	font-size: 16px !important;
	border: 1.5px solid #c3d4d1 !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--pp-ink) !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 48px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}
.ppep .ppep-field input[type=text],
.ppep .ppep-field input[type=email],
.ppep .ppep-field input[type=number],
.ppep .ppep-field input[type=password] {
	-webkit-appearance: none !important;
	appearance: none !important;
}
/* ---- date of birth: one masked input (MM/DD/YYYY types itself) ---- */

.ppep .ppep-field input.ppep-dobmask {
	max-width: 220px !important;
	letter-spacing: 1.5px !important;
	font-variant-numeric: tabular-nums !important;
}
@media (max-width: 560px) {
	.ppep .ppep-field input.ppep-dobmask { max-width: none !important; }
}

.ppep .ppep-field input:focus {
	outline: none !important;
	border-color: var(--pp-teal) !important;
	box-shadow: 0 0 0 3px rgba(18, 178, 160, .2) !important;
}

.ppep .ppep-check input {
	width: 20px !important; height: 20px !important;
	accent-color: var(--pp-teal) !important;
	margin: 0 6px 0 0 !important;
	flex: none !important;
}

/* ---- segmented choice (relationship): one tap, card-selection language ---- */

.ppep .ppep-seg { display: flex !important; gap: 8px !important; }
.ppep .ppep-segbtn {
	flex: 1 1 0 !important;
	min-height: 48px !important;
	padding: 10px 8px !important;
	border: 1.5px solid #c3d4d1 !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--pp-ink) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	transition: border-color .14s ease, background .14s ease !important;
}
.ppep .ppep-segbtn:hover { border-color: #7ec4bd !important; }
.ppep .ppep-segbtn.on {
	background: #e2f4f1 !important;
	border-color: var(--pp-teal) !important;
	color: var(--pp-teal-deep) !important;
	box-shadow: inset 0 0 0 1px var(--pp-teal) !important;
}
.ppep .ppep-segbtn.on::before {
	content: '\2713  ' !important;
	font-weight: 700 !important;
}
.ppep .ppep-seg.pay .ppep-segbtn.big {
	min-height: 60px !important;
	font-family: var(--pp-display) !important;
	font-size: 18px !important;
	border-radius: 14px !important;
}
.ppep .ppep-segbtn:disabled { opacity: .45 !important; cursor: default !important; }
.ppep .ppep-cashnote {
	background: #fff !important;
	border: 1.5px solid var(--pp-line) !important;
	border-radius: 14px !important;
	padding: 16px !important;
	margin: 0 0 6px !important;
}
.ppep .ppep-cashnote p { margin: 0 0 12px !important; color: #33413e !important; }

/* ---- consents: calm, legible, deliberate ---- */

.ppep .ppep-consent {
	background: #fff !important;
	border: 1.5px solid var(--pp-line) !important;
	border-radius: 20px !important;
	padding: 16px 18px 6px !important;
	margin: 0 0 16px !important;
}
.ppep .ppep-consent .ppep-h.sm { color: var(--pp-ink) !important; }
.ppep .ppep-consent p { margin: 0 0 12px !important; color: #33413e !important; font-size: 15px !important; }
.ppep .ppep-check {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	margin: 0 -18px !important;
	padding: 13px 18px !important;
	border-top: 1.5px dashed var(--pp-line) !important;
	border-radius: 0 0 20px 20px !important;
	background: var(--pp-porcelain) !important;
	transition: background .15s ease !important;
}
.ppep .ppep-check.on { background: #e2f4f1 !important; color: var(--pp-teal-deep) !important; }

/* ---- signature ---- */

.ppep .ppep-sigwrap {
	position: relative !important;
	border: 2px dashed #a9c6c1 !important;
	border-radius: 14px !important;
	background:
		linear-gradient(#fff, #fff) padding-box,
		#fff !important;
	touch-action: none !important;
	overflow: hidden !important;
}
/* A real signature line inside the box, like the paper form had. */
.ppep .ppep-sigwrap::before {
	content: '' !important;
	position: absolute !important;
	left: 8% !important; right: 8% !important; bottom: 30px !important;
	border-bottom: 1.5px solid #dbe7e4 !important;
	pointer-events: none !important;
}
.ppep .ppep-sigwrap::after {
	content: attr(data-hint) !important;
	position: absolute !important;
	left: 0 !important; right: 0 !important; top: 42% !important;
	text-align: center !important;
	color: #a9bcb8 !important;
	pointer-events: none !important;
}
.ppep .ppep-sigwrap.has-ink::before, .ppep .ppep-sigwrap.has-ink::after { content: none !important; }
.ppep .ppep-sigwrap canvas { display: block !important; width: 100% !important; }
.ppep .ppep-sigwrap + .ppep-btn { margin: 12px 0 8px !important; }

/* ---- payment: a receipt, with the earrings on it ---- */

.ppep .ppep-summary {
	background: #fff !important;
	border: 1.5px solid var(--pp-line) !important;
	border-radius: 20px !important;
	padding: 14px 16px !important;
	margin: 0 0 18px !important;
}
.ppep .ppep-summary .r {
	display: flex !important; align-items: center !important; justify-content: space-between !important;
	gap: 12px !important;
	padding: 7px 0 !important;
}
.ppep .ppep-summary .r + .r { border-top: 1px dashed var(--pp-line) !important; }
.ppep .ppep-summary .r span { color: #5b6b68 !important; font-size: 14px !important; }
.ppep .ppep-summary .r strong { text-align: right !important; }
.ppep .ppep-summary .r.total strong {
	font-family: var(--pp-display) !important;
	font-size: 22px !important;
	color: var(--pp-teal-deep) !important;
}
.ppep .ppep-summary .ritem { display: flex !important; align-items: center !important; gap: 10px !important; }
.ppep .ppep-summary .ritem img {
	width: 44px !important; height: 44px !important; border-radius: 10px !important;
	object-fit: cover !important; background: #f8f7f4 !important; display: block !important;
}
.ppep .ppep-payel { margin: 0 0 18px !important; min-height: 60px !important; }

/* ---- buttons ---- */

.ppep .ppep-nav { display: flex !important; gap: 12px !important; margin-top: 22px !important; }
.ppep .ppep-btn {
	display: inline-block !important;
	padding: 13px 28px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	font-family: var(--pp-display) !important;
	border-radius: 999px !important;
	border: 2px solid var(--pp-teal) !important;
	background: #fff !important;
	color: var(--pp-teal) !important;
	cursor: pointer !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: .01em !important;
	transition: transform .14s ease, box-shadow .14s ease !important;
}
.ppep .ppep-btn.primary {
	background: linear-gradient(132deg, var(--pp-teal-deep), var(--pp-seafoam)) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(7, 94, 85, .3) !important;
}
.ppep .ppep-btn.ghost { border-color: #c8d6d3 !important; color: #5b6b68 !important; }
.ppep .ppep-btn:disabled { opacity: .55 !important; cursor: default !important; }
.ppep .ppep-btn:hover:not(:disabled) { transform: translateY(-1px) !important; }
.ppep .ppep-btn.primary:hover:not(:disabled) { box-shadow: 0 9px 22px rgba(7, 94, 85, .38) !important; }

/* ---- states ---- */

.ppep .ppep-error {
	background: #fdecea !important;
	border: 1.5px solid #f5c6c0 !important;
	color: #92322a !important;
	border-radius: 14px !important;
	padding: 12px 16px !important;
	margin: 0 0 16px !important;
}

/* ---- finale: the punched stub ---- */

.ppep .ppep-done {
	position: relative !important;
	overflow: hidden !important;
	text-align: center !important;
	padding: 36px 16px 42px !important;
	background: linear-gradient(180deg, var(--pp-porcelain) 0%, #ffffff 62%) !important;
	border-radius: 20px !important;
	min-height: 300px !important;
}
.ppep .ppep-bigcheck {
	width: 74px !important; height: 74px !important; line-height: 74px !important;
	margin: 0 auto 14px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, var(--pp-teal-deep), var(--pp-seafoam)) !important;
	color: #fff !important;
	font-size: 38px !important; font-weight: 700 !important;
	box-shadow: 0 10px 26px rgba(7, 94, 85, .35) !important;
	animation: ppep-checkpop .45s ease !important;
}
.ppep .ppep-done .ppep-h { font-size: 30px !important; }
.ppep .ppep-cf {
	position: absolute !important;
	top: -14px !important;
	border-radius: 2px !important;
	animation-name: ppep-fall !important;
	animation-timing-function: linear !important;
	animation-fill-mode: forwards !important;
	pointer-events: none !important;
}
.ppep .ppep-code { margin: 18px auto !important; }
.ppep .ppep-code strong {
	display: inline-block !important;
	font-family: var(--pp-display) !important;
	font-size: 30px !important;
	letter-spacing: 3px !important;
	background: #fff !important;
	border: 2px dashed var(--pp-gold) !important;
	border-radius: 14px !important;
	padding: 10px 24px !important;
	margin-top: 6px !important;
	color: var(--pp-teal-deep) !important;
	box-shadow: 0 4px 14px rgba(201, 154, 46, .18) !important;
}

/* =====================================================================
   PHONES (iPhone / Android portrait)
   ===================================================================== */

@media (max-width: 560px) {
	.ppep { padding-top: 4px !important; }
	.ppep .ppep-h { font-size: 23px !important; }
	.ppep .ppep-hero { padding: 20px 84px 18px 18px !important; border-radius: 16px !important; }
	.ppep .ppep-hero .ppep-h.hero { font-size: 26px !important; }
	.ppep .ppep-spark.s2 { display: none !important; }

	/* Phones get the segmented bar instead of shrunken dots. */
	.ppep .ppep-progress { display: none !important; }
	.ppep .ppep-mprog { display: block !important; }

	.ppep .ppep-tray { padding: 14px 12px 12px !important; border-radius: 16px !important; }
	.ppep .ppep-cararrow { width: 40px !important; height: 40px !important; }
	.ppep .ppep-carousel .ppep-card .ppep-imgbtn { width: min(260px, 86%) !important; }

	.ppep .ppep-stub .t small { display: none !important; }

	/* Short labels: every segmented choice stays on one line. */
	.ppep .ppep-seg { gap: 6px !important; }
	.ppep .ppep-segbtn { padding: 10px 4px !important; font-size: 14.5px !important; }

	.ppep .ppep-nav { flex-direction: column-reverse !important; }
	.ppep .ppep-btn { width: 100% !important; min-height: 50px !important; }

	.ppep .ppep-code strong { font-size: 24px !important; }
}

@media (max-width: 350px) {
	.ppep .ppep-carousel .ppep-card .ppep-imgbtn { width: 92% !important; }
}

/* =====================================================================
   iPADS / TABLETS — the in-office signing device.
   ===================================================================== */

@media (min-width: 561px) and (pointer: coarse) {
	.ppep .ppep-cararrow { width: 48px !important; height: 48px !important; }
	.ppep .ppep-btn { min-height: 52px !important; padding: 14px 32px !important; font-size: 17px !important; }
	.ppep .ppep-check input { width: 24px !important; height: 24px !important; }
	.ppep .ppep-check { min-height: 44px !important; align-items: center !important; }
	.ppep .ppep-segbtn { min-height: 52px !important; }
	.ppep .ppep-seg.pay .ppep-segbtn.big { min-height: 64px !important; }
	.ppep .ppep-consent p { font-size: 16px !important; }
	.ppep .ppep-sigwrap { border-width: 3px !important; }
	.ppep .ppep-sigwrap canvas { min-height: 220px !important; }
}

@media (min-width: 1000px) and (pointer: coarse) {
	.ppep .ppep-carousel .ppep-card .ppep-imgbtn { width: min(340px, 74%) !important; }
}

/* ---- reduced motion: everything still, confetti gone ---- */

@media (prefers-reduced-motion: reduce) {
	.ppep .ppep-step.anim, .ppep .ppep-card, .ppep .ppep-card.selected,
	.ppep .ppep-card.selected::after, .ppep .ppep-bigcheck,
	.ppep .ppep-btn, .ppep .ppep-skel { animation: none !important; transition: none !important; }
	.ppep .ppep-cf { display: none !important; }
}