/* ==========================================================================
   PepSqueak landing page
   Ported from the design prototype. Tokens follow the handoff exactly.
   ========================================================================== */

.pepsq {
	--ink: #16130F;
	--paper: #F6F5F1;
	--body: #4A463E;
	--muted: #6B675E;
	--faint: #8A867C;
	--blue: #2F6FE0;
	--blue-bright: #4D8DFF;
	--on-blue: #04121c;
	--orange: #C2691A;
	--card-border: #E4E2DA;
	--hairline: #DAD8D0;
	--hairline-soft: #ECEAE3;
	--ink-border: #34302A;
	--navy: radial-gradient(125% 85% at 85% -10%, #141b30 0%, #0b1020 46%, #06080f 100%);
	--dim: #94A1C2;

	font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ink);
	background-color: var(--paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
	-webkit-font-smoothing: antialiased;
}

/* The plugin renders a standalone document, so a light reset is on us. */
body.pepsq-body { margin: 0; padding: 0; background: #F6F5F1; }
.pepsq *, .pepsq *::before, .pepsq *::after { box-sizing: border-box; }
.pepsq img, .pepsq svg { max-width: 100%; }
/* Default link colour, deliberately at ZERO specificity via :where() so that
   every component that sets its own colour — buttons, nav links, footer links,
   the wordmark, partner CTAs — wins without needing to escalate. A plain
   `.pepsq a` rule here is (0,1,1) and silently outranks single-class component
   rules, which turned the buttons blue-on-blue. */
:where(.pepsq) :where(a) { color: var(--blue); }
.pepsq a { text-decoration: none; transition: opacity .15s ease; }
.pepsq a:hover { opacity: .72; }
.pepsq ::selection { background: var(--blue-bright); color: var(--on-blue); }
.pepsq :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.pepsq-defs { position: absolute; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@keyframes pepsq-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pepsq-pulse  { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes pepsq-drawtail { to { stroke-dashoffset: 0; } }

.pepsq-tail-draw {
	stroke-dasharray: 46;
	stroke-dashoffset: 46;
	animation: pepsq-drawtail 1s ease-out .25s forwards;
}

@media (prefers-reduced-motion: reduce) {
	.pepsq *, .pepsq *::before, .pepsq *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.pepsq-tail-draw { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------- Layout -- */

.pepsq-row { max-width: 1160px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

.pepsq-split { display: flex; gap: 64px; align-items: center; flex-wrap: wrap; }
.pepsq-split--reverse { flex-wrap: wrap-reverse; }
.pepsq-split__copy { flex: 1; min-width: 320px; }

.pepsq-center { text-align: center; margin-bottom: 40px; }
.pepsq-center--wide { margin-bottom: 44px; }

.pepsq-divider { display: flex; justify-content: center; padding: 8px 28px 4px; }
.pepsq-divider svg { opacity: .34; }

/* -------------------------------------------------------------- Type ----- */

/* Headings inherit their section's colour (paper on ink, ink on paper).
   Stated explicitly rather than left to inheritance, so a stray theme or
   plugin stylesheet can't repaint them — that produced dark-on-dark hero
   headings when the block theme's stylesheet loaded alongside this one.
   No heading in this design sets its own colour, so forcing them is safe.

   Paragraphs are deliberately NOT in this list: many components give them an
   explicit colour with a single class (0,1,0), which this selector (0,1,1)
   would outrank — that silently flattened .pepsq-lead, .pepsq-hero__sub and
   .pepsq-partner__body to their inherited colour. */
.pepsq h1, .pepsq h2, .pepsq h3, .pepsq h4 { color: inherit; }

.pepsq-h1 {
	font-weight: 800; font-size: 56px; line-height: 1.02;
	letter-spacing: -.035em; margin: 0 0 20px; text-wrap: balance;
}
.pepsq-h2 {
	font-weight: 800; font-size: 40px; line-height: 1.06;
	letter-spacing: -.03em; margin: 0 0 16px; text-wrap: balance;
}
.pepsq-h2--sm { font-size: 34px; letter-spacing: -.02em; margin-bottom: 12px; }

.pepsq-lead {
	font-size: 16.5px; line-height: 1.65; color: var(--body);
	margin: 0 0 28px; max-width: 520px; text-wrap: pretty;
}
.pepsq-lead--center { margin-left: auto; margin-right: auto; max-width: 560px; }

.pepsq-eyebrow {
	font: 600 11px/1 'IBM Plex Mono', monospace;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--blue); margin-bottom: 16px;
}
.pepsq-mono-label {
	font: 600 11px/1 'IBM Plex Mono', monospace;
	letter-spacing: .18em; text-transform: uppercase;
}
.pepsq-mono-label--blue { color: var(--blue-bright); }

.pepsq-mono-note {
	font: 500 12px/1.5 'IBM Plex Mono', monospace;
	color: var(--faint); margin-top: 22px;
}
.pepsq-mono-note--hero { color: #7E8AAE; font-size: 12.5px; }
.pepsq-mono-note--center { margin: 15px 0 0; font-size: 13px; }
.pepsq-mono-note--tight { margin-top: 12px; }

.pepsq-blue { color: var(--blue-bright); }

/* ------------------------------------------------------------- Buttons --- */

.pepsq-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	font-weight: 700; font-size: 15px; padding: 14px 24px;
	border: none; border-radius: 10px; cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
	text-align: center;
}
.pepsq-btn:hover { opacity: 1; transform: translateY(-1px); }
.pepsq-btn--lg { font-size: 16px; padding: 15px 26px; }
.pepsq-btn--xl { font-size: 17px; padding: 16px 30px; }
.pepsq-btn--full { width: 100%; margin-top: 18px; }

.pepsq-btn--blue {
	background: var(--blue-bright); color: var(--on-blue);
	box-shadow: 0 12px 34px -12px rgba(77, 141, 255, .7);
}
.pepsq-btn--blue:hover { box-shadow: 0 16px 40px -12px rgba(77, 141, 255, .85); }

.pepsq-btn--ink { background: var(--ink); color: var(--paper); }
.pepsq-btn--ink:hover { background: #241f19; }

.pepsq-btn--ghost {
	background: transparent; color: var(--paper);
	border: 1px solid var(--ink-border); font-weight: 600;
}
.pepsq-btn--ghost:hover { border-color: var(--paper); }

.pepsq-btn--outline {
	background: transparent; color: var(--paper); border: 1px solid var(--body);
}
.pepsq-btn--outline:hover { border-color: var(--paper); }

.pepsq-btn--donate { background: var(--blue); color: #fff; font-size: 14.5px; padding: 12px 22px; }
.pepsq-btn--donate:hover { background: #2559b8; }

.pepsq-ctarow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pepsq-ctarow--center { justify-content: center; }

/* ----------------------------------------------------------------- Nav --- */

.pepsq-nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(246, 245, 241, .82);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--hairline);
}
.pepsq-nav__inner {
	max-width: 1160px; margin: 0 auto; padding: 15px 28px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.pepsq-brand { display: flex; align-items: center; gap: 13px; color: inherit; }
.pepsq-brand:hover { opacity: 1; }
.pepsq-brand__word { font-weight: 700; font-size: 22px; letter-spacing: -.03em; }
.pepsq-brand__word span { color: var(--blue); }

.pepsq-nav__links {
	display: flex; align-items: center; gap: 28px;
	font-size: 14px; font-weight: 500;
}
.pepsq-nav__links a:not(.pepsq-btn) { color: var(--body); }
.pepsq-brand { color: var(--ink); }
.pepsq-nav__links .pepsq-btn { font-size: 14px; padding: 10px 18px; border-radius: 8px; font-weight: 600; }

/* ---------------------------------------------------------------- Hero --- */

.pepsq-hero { background: var(--ink); color: var(--paper); }
.pepsq-hero__row {
	display: flex; align-items: center; flex-wrap: wrap;
	padding-top: 76px; padding-bottom: 64px; gap: 56px;
}
.pepsq-hero__copy { flex: 1; min-width: 340px; }
.pepsq-hero__sub { font-size: 17.5px; line-height: 1.6; color: #B9B6AC; margin: 0 0 30px; max-width: 520px; }
.pepsq-hero__foot { padding-bottom: 30px; }

.pepsq-eyebrow-pill {
	display: inline-flex; align-items: center; gap: 9px;
	font: 600 11px/1 'IBM Plex Mono', monospace;
	letter-spacing: .2em; text-transform: uppercase; color: var(--blue-bright);
	border: 1px solid var(--ink-border); border-radius: 99px;
	padding: 8px 14px; margin-bottom: 24px;
}
.pepsq-dot {
	width: 7px; height: 7px; border-radius: 99px;
	background: var(--blue-bright); animation: pepsq-pulse 2.4s ease-in-out infinite;
}

.pepsq-trustrow {
	display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px;
	font: 500 13px/1.4 'Libre Franklin'; color: #B9B6AC;
}
.pepsq-trustrow span { display: inline-flex; align-items: center; gap: 8px; }

/* Phone mockup */
.pepsq-phone-wrap { flex: 0 0 auto; margin: 0 auto; animation: pepsq-floaty 6s ease-in-out infinite; }
.pepsq-phone {
	width: 308px; border-radius: 44px; padding: 11px; background: #04070e;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06);
	overflow: hidden;
}
.pepsq-screen { border-radius: 34px; overflow: hidden; background: var(--navy); }
.pepsq-screen__status {
	display: flex; justify-content: space-between; padding: 14px 22px 0;
	font: 500 11px/1 'IBM Plex Mono', monospace; color: var(--dim);
}
.pepsq-screen__body { padding: 18px 20px 22px; }
.pepsq-screen__brand { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #fff; font-weight: 700; font-size: 15px; }
.pepsq-screen__date { font: 600 10px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; color: var(--dim); margin-bottom: 7px; }
.pepsq-screen__greet { color: #fff; font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin-bottom: 4px; }
.pepsq-screen__day { font-size: 12px; color: var(--dim); margin-bottom: 14px; }
.pepsq-screen__stats { display: flex; gap: 7px; margin-bottom: 16px; }
.pepsq-screen__stats > div {
	flex: 1; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px;
	padding: 8px 4px; text-align: center; color: #fff;
}
.pepsq-screen__stats strong { font-weight: 700; font-size: 14px; }
.pepsq-screen__stats span { font-size: 9.5px; color: var(--dim); }
.pepsq-screen__tabs {
	display: flex; justify-content: space-around; margin-top: 16px; padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font: 500 10px/1 'IBM Plex Mono', monospace; letter-spacing: .08em;
	text-transform: uppercase; color: #5B658A;
}

.pepsq-dosecard {
	background: linear-gradient(135deg, rgba(77, 141, 255, .16), rgba(255, 255, 255, .05));
	border: 1px solid var(--blue-bright); border-radius: 18px; padding: 15px 16px; color: #fff;
}
.pepsq-dosecard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pepsq-dosecard__label { font: 600 9px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--dim); }
.pepsq-dosecard__due {
	font: 600 8.5px/1 'IBM Plex Mono', monospace; letter-spacing: .08em;
	background: var(--blue-bright); color: var(--on-blue); border-radius: 99px; padding: 4px 8px;
}
.pepsq-dosecard__name { font-weight: 800; font-size: 20px; margin-bottom: 3px; }
.pepsq-dosecard__meta { font-size: 11px; color: var(--dim); margin-bottom: 12px; }
.pepsq-dosecard__big { display: flex; align-items: baseline; gap: 7px; margin-bottom: 14px; }
.pepsq-dosecard__big span { font: 700 40px/0.9 'IBM Plex Mono', monospace; color: var(--blue-bright); letter-spacing: -.02em; }
.pepsq-dosecard__big em { font-style: normal; font-size: 12px; color: var(--dim); }
.pepsq-dosecard__cta {
	background: var(--blue-bright); color: var(--on-blue); font-weight: 700; font-size: 13px;
	text-align: center; border-radius: 11px; padding: 11px;
}

/* -------------------------------------------------------------- Donate --- */

.pepsq-donate { background: var(--paper); border-bottom: 1px solid var(--hairline); }
.pepsq-donate__inner {
	padding-top: 20px; padding-bottom: 20px;
	display: flex; gap: 24px; align-items: center; justify-content: center;
	flex-wrap: wrap; text-align: center;
}
.pepsq-donate p { font-size: 15px; line-height: 1.55; color: var(--body); margin: 0; max-width: 660px; text-wrap: pretty; }
.pepsq-donate strong { color: var(--ink); font-weight: 700; }
.pepsq-donate .pepsq-btn { flex: none; }

/* --------------------------------------------------- Checklist features -- */

.pepsq-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 28px; }
.pepsq-fgrid--narrow { max-width: 480px; }
.pepsq-fitem { display: flex; gap: 12px; }
.pepsq-fitem__icon { flex: none; line-height: 0; margin-top: 2px; }
.pepsq-fitem__title { font-weight: 600; font-size: 15px; }
.pepsq-fitem__blurb { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------------------- Builder --- */

.pepsq-builder {
	background-color: var(--paper);
	background-image: radial-gradient(rgba(22, 19, 15, .06) 1.1px, transparent 1.1px);
	background-size: 22px 22px;
}
.pepsq-builder .pepsq-split { padding-top: 72px; padding-bottom: 72px; }

.pepsq-mock-wrap { flex: 0 0 auto; margin: 0 auto; }
.pepsq-mock {
	width: 344px; max-width: 100%; background: var(--navy);
	border: 1px solid rgba(255, 255, 255, .08); border-radius: 26px; padding: 22px;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
}
.pepsq-mock__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pepsq-mock__eyebrow { font: 600 10px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--dim); margin-bottom: 7px; }
.pepsq-mock__eyebrow--week { letter-spacing: .1em; margin-bottom: 9px; }
.pepsq-mock__title { color: #fff; font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.pepsq-chip-goal {
	font: 600 9px/1 'IBM Plex Mono', monospace; letter-spacing: .08em;
	background: rgba(77, 141, 255, .16); color: var(--blue-bright);
	border: 1px solid rgba(77, 141, 255, .4); border-radius: 99px; padding: 6px 10px;
}
.pepsq-mock__rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.pepsq-mock__row {
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px; padding: 13px 14px;
}
.pepsq-mock__rowtop { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.pepsq-mock__rowtop span { color: #fff; font-weight: 700; font-size: 15px; }
.pepsq-mock__rowtop em { font-style: normal; font: 600 12px/1 'IBM Plex Mono', monospace; color: var(--blue-bright); }
.pepsq-mock__rowsub { font: 500 11px/1.4 'IBM Plex Mono', monospace; color: var(--dim); }
.pepsq-mock__cta {
	background: var(--blue-bright); color: var(--on-blue); font-weight: 700; font-size: 13.5px;
	text-align: center; border-radius: 12px; padding: 13px;
}

.pepsq-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 18px; }
.pepsq-week > div { text-align: center; }
.pepsq-week span { display: block; font: 500 9px/1 'IBM Plex Mono', monospace; color: #5B658A; margin-bottom: 6px; }
.pepsq-week i {
	display: block; height: 30px; border-radius: 8px; font-style: normal;
	font: 700 9px/30px 'IBM Plex Mono', monospace;
}
.pepsq-week i.is-full { background: var(--blue-bright); color: var(--on-blue); }
.pepsq-week i.is-part { background: rgba(77, 141, 255, .22); border: 1px solid rgba(77, 141, 255, .4); color: var(--blue-bright); line-height: 28px; }
.pepsq-week i.is-off  { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #5B658A; line-height: 28px; }

/* ------------------------------------------------------------ Progress --- */

.pepsq-progress .pepsq-split { padding-top: 64px; padding-bottom: 64px; }
.pepsq-progress__card-wrap { flex: 0 0 380px; max-width: 100%; margin: 0 auto; }
.pepsq-progress__card { background: var(--ink); color: var(--paper); border-radius: 20px; padding: 22px; }
.pepsq-progress__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.pepsq-progress__head em { font-style: normal; font: 600 12px/1 'IBM Plex Mono', monospace; color: var(--blue-bright); }
.pepsq-progress__range { font-size: 11px; color: var(--dim); margin-bottom: 16px; }
.pepsq-progress__chart { width: 100%; height: auto; display: block; margin-bottom: 6px; }
.pepsq-progress__marker { font: 500 9.5px/1 'IBM Plex Mono', monospace; color: #E0A184; margin-bottom: 16px; }
.pepsq-progress__photos { display: flex; gap: 10px; }
.pepsq-progress__photos > div { flex: 1; }
.pepsq-progress__photolabel { font-size: 10px; color: var(--dim); margin-bottom: 6px; }
.pepsq-progress__photo {
	position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .1);
}
.pepsq-progress__photo--after { border-color: rgba(77, 141, 255, .3); }
.pepsq-progress__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pepsq-progress__caption {
	margin-top: 10px; text-align: center;
	font: 400 10.5px/1.4 'IBM Plex Mono', monospace; letter-spacing: .03em; color: var(--faint);
}

/* -------------------------------------------------------- Feature grid --- */

.pepsq-features { padding-top: 56px; padding-bottom: 40px; }
.pepsq-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pepsq-card {
	background: #fff; border: 1px solid var(--card-border); border-radius: 16px; padding: 26px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pepsq-card:hover {
	transform: translateY(-4px); border-color: var(--blue-bright);
	box-shadow: 0 18px 40px -22px rgba(22, 19, 15, .5);
}
.pepsq-card__icon {
	width: 44px; height: 44px; border-radius: 11px; background: var(--ink);
	display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.pepsq-card h3 { font-weight: 700; font-size: 19px; margin: 0 0 9px; }
.pepsq-card p { font-size: 14px; line-height: 1.6; color: var(--body); margin: 0; }

/* ------------------------------------------------------------ Calculator - */

.pepsq-calc { padding-top: 64px; padding-bottom: 64px; gap: 56px; }
.pepsq-calc .pepsq-split__copy { min-width: 300px; }
.pepsq-calc__card {
	flex: 0 0 420px; max-width: 100%; margin: 0 auto; position: relative;
	background: var(--ink); color: #fff; border-radius: 20px; padding: 24px;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6);
}
.pepsq-calc__badge {
	position: absolute; top: -14px; right: 18px;
	font: 700 10px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase;
	background: var(--blue-bright); color: var(--on-blue); border-radius: 99px; padding: 7px 12px;
	box-shadow: 0 8px 22px -6px rgba(77, 141, 255, .75);
}

.pepsq-calc__tabs { display: flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; }
.pepsq-calc__tab {
	flex: 1; min-width: 92px;
	font: 600 12px/1 'Libre Franklin'; color: var(--dim);
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px; padding: 11px 8px; cursor: pointer;
	transition: all .15s ease;
}
.pepsq-calc__tab:hover { color: #fff; border-color: rgba(255, 255, 255, .34); }
.pepsq-calc__tab.is-active {
	background: var(--blue-bright); border-color: var(--blue-bright); color: var(--on-blue);
}

.pepsq-calc__panel[hidden] { display: none; }

.pepsq-calc__note {
	background: rgba(77, 141, 255, .12); border: 1px solid rgba(77, 141, 255, .3);
	border-radius: 12px; padding: 13px 15px; margin-bottom: 18px;
}
.pepsq-calc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pepsq-tag {
	font: 600 10px/1.4 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase;
	color: var(--dim); background: #0b1020; border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px; padding: 4px 9px;
}
.pepsq-tag--blue { color: var(--blue-bright); }
.pepsq-calc__note p { font: 400 12.5px/1.55 'Libre Franklin'; color: #fff; margin: 0; }

.pepsq-calc__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 20px; }
.pepsq-calc__field--wide { grid-column: 1 / -1; }
.pepsq-calc__label {
	display: block; font: 600 11px/1 'Libre Franklin'; letter-spacing: .05em;
	text-transform: uppercase; color: var(--dim); margin-bottom: 6px;
}
.pepsq-calc__value {
	display: flex; align-items: baseline; gap: 6px;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 11px; padding: 13px;
}
.pepsq-calc__value strong { font: 600 17px/1 'IBM Plex Mono', monospace; color: #fff; }
.pepsq-calc__value em { font-style: normal; font-size: 12px; color: var(--dim); }

.pepsq-calc__out { border-top: 1px dashed rgba(255, 255, 255, .16); padding-top: 18px; }
.pepsq-calc__outtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pepsq-calc__units { display: flex; align-items: baseline; gap: 8px; }
.pepsq-calc__units span { font: 700 44px/0.9 'IBM Plex Mono', monospace; color: var(--blue-bright); letter-spacing: -.02em; }
.pepsq-calc__units em { font-style: normal; font-size: 14px; color: var(--dim); }
.pepsq-calc__ml { text-align: right; }
.pepsq-calc__ml div { font: 500 13px/1.3 'IBM Plex Mono', monospace; color: #fff; }
.pepsq-calc__ml span { font-size: 11px; color: var(--dim); }

.pepsq-syringe {
	position: relative; height: 34px;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 8px; overflow: hidden; margin-bottom: 6px;
}
.pepsq-syringe__fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--blue-bright); opacity: .9; transition: width .25s ease; }
.pepsq-syringe__ticks {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
	padding: 0 9px; font: 500 9px/1 'IBM Plex Mono', monospace; color: var(--dim); letter-spacing: .05em;
}

.pepsq-calc__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
.pepsq-calc__stats > div {
	background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 11px; padding: 12px 13px;
}
.pepsq-calc__stat { font: 600 16px/1 'IBM Plex Mono', monospace; }
.pepsq-calc__stat em { font-style: normal; font-size: 11px; color: var(--dim); }
.pepsq-calc__handoff {
	font: 500 13.5px/1.5 'Libre Franklin'; color: var(--dim);
	margin: 20px 0 0; text-align: center; text-wrap: pretty;
}
/* The button carries its own top margin for the standalone case; tighten it
   when the handoff line is directly above (no collapse — the button is
   inline-flex, so the two margins would otherwise add up). */
.pepsq-calc__handoff + .pepsq-btn--full { margin-top: 10px; }
.pepsq-calc__foot {
	font: 400 10.5px/1.5 'IBM Plex Mono', monospace; letter-spacing: .06em;
	text-transform: uppercase; color: var(--faint); margin: 14px 0 0; text-align: center;
}

/* ------------------------------------------------------------ Dictionary - */

.pepsq-dict { padding-top: 48px; padding-bottom: 64px; }
.pepsq-dict .pepsq-center { margin-bottom: 34px; }
.pepsq-dict__controls { max-width: 760px; margin: 0 auto 22px; }

.pepsq-search {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border: 1px solid var(--hairline); border-radius: 13px;
	padding: 0 16px; margin-bottom: 14px;
	transition: border-color .15s ease;
}
.pepsq-search:focus-within { border-color: var(--blue); }
.pepsq-search input {
	flex: 1; min-width: 0; border: none; background: transparent;
	font: 500 15px/1 'Libre Franklin'; color: var(--ink); padding: 15px 0; outline: none;
}
.pepsq-search__count { font: 500 12px/1 'IBM Plex Mono', monospace; color: var(--faint); white-space: nowrap; }

.pepsq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pepsq-chip {
	font: 600 11px/1 'IBM Plex Mono', monospace; letter-spacing: .04em;
	border-radius: 99px; padding: 8px 13px; cursor: pointer;
	color: var(--body); background: #fff; border: 1px solid var(--hairline);
	transition: all .15s ease;
}
.pepsq-chip:hover { border-color: var(--blue); color: var(--blue); }
.pepsq-chip.is-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.pepsq-dict__results {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px; max-width: 1000px; margin: 0 auto;
}
.pepsq-pep {
	background: #fff; border: 1px solid var(--card-border); border-radius: 15px; padding: 17px 18px;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pepsq-pep:hover {
	transform: translateY(-3px); border-color: var(--blue-bright);
	box-shadow: 0 14px 30px -20px rgba(22, 19, 15, .5);
}
.pepsq-pep__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.pepsq-pep__name { font-weight: 700; font-size: 16px; }
.pepsq-pep__dose { font: 600 11px/1 'IBM Plex Mono', monospace; color: var(--blue); white-space: nowrap; }
.pepsq-pep__cat {
	display: inline-block; font: 600 9.5px/1.3 'IBM Plex Mono', monospace;
	letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
	background: #F1F0EB; border: 1px solid var(--card-border); border-radius: 99px;
	padding: 4px 9px; margin-bottom: 11px;
}
.pepsq-pep__freq {
	display: inline-block; font: 500 9.5px/1.3 'IBM Plex Mono', monospace;
	color: var(--faint); margin-left: 6px;
}
.pepsq-pep p { font-size: 12.5px; line-height: 1.55; color: var(--body); margin: 0; }
.pepsq-dict__empty { text-align: center; color: var(--faint); font-size: 14px; padding: 40px 0; }

/* -------------------------------------------------------------- Sourcing - */

.pepsq-sourcing .pepsq-row { padding-top: 72px; padding-bottom: 72px; }
.pepsq-partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pepsq-partner {
	background: #fff; border: 1px solid var(--card-border); border-radius: 20px;
	padding: 32px 32px 30px; display: flex; flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pepsq-partner:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -24px rgba(22, 19, 15, .5); }
.pepsq-partner--renoja:hover { border-color: var(--blue); }
.pepsq-partner--chirp:hover { border-color: var(--orange); }

.pepsq-partner__eyebrow {
	font: 700 11px/1 'IBM Plex Mono', monospace; letter-spacing: .16em;
	text-transform: uppercase; color: var(--faint); margin-bottom: 16px;
}
/* Fixed-height wrapper keeps the two headlines aligned across cards. */
.pepsq-partner__logo { height: 68px; display: flex; align-items: center; margin-bottom: 12px; }
.pepsq-logo-renoja { height: 34px; width: auto; display: block; }
/* The PepChirp file carries heavy internal padding; the offset aligns the
   bird's visible edge with the text column. */
.pepsq-logo-chirp { height: 67px; width: auto; display: block; margin-left: -26px; }

.pepsq-partner__lead {
	font-weight: 800; font-size: 19px; line-height: 1.35; letter-spacing: -.01em;
	color: var(--ink); margin: 0 0 16px; text-wrap: pretty;
}
.pepsq-partner__body { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0 0 24px; text-wrap: pretty; }
.pepsq-partner__body strong { color: var(--ink); font-weight: 700; }
.pepsq-partner__subeyebrow {
	font: 700 10px/1 'IBM Plex Mono', monospace; letter-spacing: .16em;
	text-transform: uppercase; color: var(--faint); margin-bottom: 14px;
}
.pepsq-partner__bullets { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.pepsq-partner__bullets > div { display: flex; gap: 11px; }
.pepsq-partner__bullets svg { flex: none; margin-top: 3px; }
.pepsq-partner__bullets p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
.pepsq-partner__bullets strong { color: var(--ink); font-weight: 700; }

.pepsq-partner__cta {
	margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	background: transparent; font-weight: 700; font-size: 15.5px;
	padding: 15px 20px; border-radius: 12px; transition: background .15s ease;
}
.pepsq-partner__cta:hover { opacity: 1; }
.pepsq-partner__cta span { font-size: 19px; line-height: 0; }
.pepsq-partner--renoja .pepsq-partner__cta { color: var(--blue); border: 1px solid var(--blue); }
.pepsq-partner--renoja .pepsq-partner__cta:hover { background: rgba(47, 111, 224, .06); }
.pepsq-partner--chirp .pepsq-partner__cta { color: var(--orange); border: 1px solid var(--orange); }
.pepsq-partner--chirp .pepsq-partner__cta:hover { background: rgba(194, 105, 26, .06); }

.pepsq-sourcing__disclaimer {
	text-align: center; margin: 30px auto 0; max-width: 620px;
	font: 500 13px/1.6 'Libre Franklin'; color: var(--muted);
}

/* ------------------------------------------------------------------ FAQ -- */

.pepsq-faq { max-width: 820px; margin: 0 auto; padding: 64px 28px; }
.pepsq-faq .pepsq-center { margin-bottom: 36px; }
.pepsq-faq__list { display: flex; flex-direction: column; gap: 12px; }
.pepsq-faq__item { background: #fff; border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; }
.pepsq-faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	width: 100%; padding: 19px 22px; cursor: pointer;
	background: none; border: none; text-align: left;
	font: 600 16px/1.4 'Libre Franklin'; color: var(--ink);
}
.pepsq-faq__sign {
	font-size: 22px; font-weight: 400; color: var(--blue); line-height: 1;
	flex: none; transition: transform .2s ease;
}
.pepsq-faq__q[aria-expanded="true"] .pepsq-faq__sign { transform: rotate(45deg); }
.pepsq-faq__a[hidden] { display: none; }
.pepsq-faq__a p { font-size: 14px; line-height: 1.6; color: var(--body); margin: 0 22px 19px; }

/* -------------------------------------------------------------- Contact -- */

.pepsq-contact { max-width: 720px; margin: 0 auto; padding: 64px 28px; text-align: center; }
.pepsq-contact .pepsq-lead { margin-bottom: 24px; }

.pepsq-modal {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(11, 9, 7, .55);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pepsq-modal[hidden] { display: none; }
.pepsq-modal__box {
	width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
	background: var(--paper); border-radius: 20px; padding: 26px 24px 22px;
	position: relative; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .65);
}
.pepsq-modal__close {
	position: absolute; top: 15px; right: 15px; width: 34px; height: 34px;
	border-radius: 9px; border: 1px solid var(--hairline); background: #fff;
	color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer;
}
.pepsq-modal__head { margin-bottom: 18px; padding-right: 34px; }
.pepsq-modal__head h3 { font-weight: 800; font-size: 23px; letter-spacing: -.02em; margin: 0; }

.pepsq-form {
	position: relative; display: grid; gap: 14px;
	background: #fff; border: 1px solid var(--card-border); border-radius: 18px; padding: 26px;
}
.pepsq-form[hidden] { display: none; }
.pepsq-form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pepsq-form label {
	display: block; font: 600 11px/1 'Libre Franklin'; letter-spacing: .05em;
	text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.pepsq-form input, .pepsq-form textarea {
	width: 100%; font: 500 15px/1.5 'Libre Franklin'; color: var(--ink);
	background: var(--paper); border: 1px solid var(--hairline); border-radius: 10px;
	padding: 13px 14px; outline: none;
}
.pepsq-form input:focus, .pepsq-form textarea:focus { border-color: var(--blue); }
.pepsq-form textarea { resize: vertical; }
.pepsq-form__human { width: 120px !important; font-family: 'IBM Plex Mono', monospace !important; font-weight: 600; }
.pepsq-form__foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; }
.pepsq-form__err {
	font: 500 13px/1.5 'Libre Franklin'; color: #B4472B;
	background: rgba(180, 71, 43, .08); border: 1px solid rgba(180, 71, 43, .25);
	border-radius: 10px; padding: 10px 13px;
}
.pepsq-form__err[hidden] { display: none; }
.pepsq-honey { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.pepsq-sent {
	background: var(--ink); color: var(--paper); border-radius: 18px;
	padding: 34px 30px; text-align: center;
}
.pepsq-sent[hidden] { display: none; }
.pepsq-sent__icon {
	width: 52px; height: 52px; border-radius: 14px;
	background: rgba(77, 141, 255, .16); border: 1px solid rgba(77, 141, 255, .4);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.pepsq-sent__title { font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin-bottom: 8px; }
.pepsq-sent p { font-size: 14.5px; line-height: 1.6; color: #B9B6AC; margin: 0 auto; max-width: 420px; }

/* ------------------------------------------------------------- CTA band -- */

.pepsq-ctaband { padding-top: 24px; padding-bottom: 72px; }
.pepsq-ctaband__card {
	background: var(--ink); color: var(--paper); border-radius: 22px;
	padding: 56px 40px; text-align: center; overflow: hidden; position: relative;
}
.pepsq-ctaband__watermark {
	position: absolute; right: -48px; bottom: -70px; width: 620px; height: auto;
	opacity: .055; pointer-events: none;
}
.pepsq-ctaband__inner { position: relative; z-index: 1; }
.pepsq-ctaband__inner > svg:first-child { margin-bottom: 18px; }
.pepsq-ctaband__inner > p { font-size: 17px; line-height: 1.6; color: #B9B6AC; margin: 0 auto 30px; max-width: 460px; }
.pepsq-ctaband__note { font-size: 14px; line-height: 1.6; color: var(--faint) !important; margin: 22px auto 0 !important; max-width: 520px; }

/* -------------------------------------------------- Document / legal ----- */

.pepsq-doc { max-width: 780px; padding-top: 56px; padding-bottom: 72px; }
.pepsq-doc__title { margin-bottom: 10px; }
.pepsq-doc__updated { color: var(--faint); margin-bottom: 36px; }
.pepsq-doc__body { font-size: 16px; line-height: 1.7; color: var(--body); }
.pepsq-doc__body h2 {
	font-weight: 800; font-size: 21px; letter-spacing: -.02em;
	color: var(--ink); margin: 38px 0 12px;
}
.pepsq-doc__body h3 {
	font-weight: 700; font-size: 16.5px; color: var(--ink); margin: 26px 0 8px;
}
.pepsq-doc__body p { margin: 0 0 15px; text-wrap: pretty; }
.pepsq-doc__body ul { margin: 0 0 18px; padding-left: 22px; }
.pepsq-doc__body li { margin-bottom: 9px; text-wrap: pretty; }
.pepsq-doc__body strong { color: var(--ink); font-weight: 700; }
.pepsq-doc__body a { text-decoration: underline; text-underline-offset: 2px; }
.pepsq-doc__body hr { border: none; border-top: 1px solid var(--hairline); margin: 34px 0; }

@media (max-width: 640px) {
	.pepsq-doc { padding-top: 40px; padding-bottom: 52px; }
	.pepsq-doc__body { font-size: 15.5px; }
}

/* ------------------------------------------------------- Thank-you page -- */

.pepsq-thanks { padding-top: 56px; padding-bottom: 72px; }
.pepsq-thanks__card {
	background: var(--ink); color: var(--paper); border-radius: 22px;
	padding: 60px 40px 54px; text-align: center; overflow: hidden; position: relative;
}
.pepsq-thanks__check {
	width: 62px; height: 62px; border-radius: 16px; margin: 0 auto 20px;
	background: rgba(77, 141, 255, .16); border: 1px solid rgba(77, 141, 255, .4);
	display: flex; align-items: center; justify-content: center;
}
.pepsq-thanks__eyebrow { color: var(--blue-bright); }
.pepsq-thanks__lead {
	font-size: 17px; line-height: 1.6; color: #B9B6AC;
	margin: 0 auto 14px; max-width: 500px; text-wrap: pretty;
}
.pepsq-thanks__sub {
	font-size: 14.5px; line-height: 1.6; color: var(--faint);
	margin: 0 auto 30px; max-width: 460px; text-wrap: pretty;
}
.pepsq-thanks__note {
	font: 500 12px/1.5 'IBM Plex Mono', monospace; color: var(--faint);
	margin: 26px 0 0;
}
.pepsq-thanks__legal {
	text-align: center; margin: 24px auto 0; max-width: 560px;
	font: 400 12.5px/1.6 'Libre Franklin'; color: var(--muted);
}

@media (max-width: 640px) {
	.pepsq-thanks__card { padding: 44px 22px 40px; }
}

/* --------------------------------------------------------------- Footer -- */

.pepsq-footer { background: var(--ink); color: var(--paper); }
.pepsq-footer__top {
	padding-top: 48px; padding-bottom: 32px;
	display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between;
}
.pepsq-footer__brand { max-width: 340px; }
.pepsq-footer__mark { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.pepsq-footer__brand p { font: 400 14px/1.6 'Libre Franklin'; color: #B9B6AC; margin: 0; }
.pepsq-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.pepsq-footer__coltitle {
	font: 600 10px/1 'IBM Plex Mono', monospace; letter-spacing: .14em;
	text-transform: uppercase; color: #8F8C82; margin-bottom: 14px;
}
.pepsq-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pepsq-footer__links a { color: #C9C6BC; }
.pepsq-footer__bottom {
	padding-top: 22px; padding-bottom: 40px; border-top: 1px solid var(--ink-border);
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center;
}
.pepsq-footer__copy { font: 400 12px/1 'IBM Plex Mono', monospace; color: #8F8C82; }

/* ----------------------------------------------------------- Responsive -- */

@media (max-width: 1000px) {
	.pepsq-cardgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.pepsq-nav__links { gap: 18px; font-size: 13px; }
	.pepsq-nav__links a:not(.pepsq-btn) { display: none; }
	.pepsq-h1 { font-size: 40px; }
	.pepsq-h2 { font-size: 30px; }
	.pepsq-h2--sm { font-size: 27px; }
	.pepsq-hero__row { padding-top: 52px; padding-bottom: 48px; gap: 40px; }
	.pepsq-split { gap: 40px; }
	.pepsq-partners { grid-template-columns: 1fr; }
	.pepsq-calc__card { flex-basis: 100%; }
	.pepsq-progress__card-wrap { flex-basis: 100%; }
	.pepsq-ctaband__card { padding: 44px 24px; }
}

@media (max-width: 640px) {
	.pepsq-row { padding-left: 20px; padding-right: 20px; }
	.pepsq-h1 { font-size: 34px; }
	.pepsq-hero__sub { font-size: 16px; }
	.pepsq-cardgrid { grid-template-columns: 1fr; }
	.pepsq-fgrid { grid-template-columns: 1fr; }
	.pepsq-form__two { grid-template-columns: 1fr; }
	.pepsq-calc__inputs { grid-template-columns: 1fr; }
	.pepsq-calc__units span { font-size: 36px; }
	.pepsq-partner { padding: 26px 22px 24px; }
	.pepsq-faq { padding: 48px 20px; }
	.pepsq-ctarow .pepsq-btn { width: 100%; }
	.pepsq-footer__cols { gap: 32px; }
}