.plb-body {
	margin: 0;
	padding: 0;
	/* Matches the reference prelaunch page's font (Montserrat), loaded via
	   Google Fonts in prelaunch-builder.php. Falls back to a generic
	   sans-serif if the Google Fonts request ever fails to load. */
	font-family: 'Montserrat', sans-serif;
	background-color: #111;
	/* Sticky-footer layout: the page fills at least the full screen height,
	   stacked in a column. .plb-boxes-wrap (below) is allowed to grow, and
	   the footer never grows — so the footer always sits at the TRUE
	   bottom of the screen, with no separate empty gap below it, and
	   whichever box is last just extends its own background to meet it
	   instead of leaving dead space. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.plb-boxes-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto; /* grow to fill any leftover height above the footer */
}
/* Whichever box ends up last absorbs the leftover space (if any) and
   centers its own content within it, so a stretched box still looks
   intentional rather than like its content is stranded at the top of a
   too-tall box. */
.plb-boxes-wrap > *:last-child {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.plb-footer {
	flex-shrink: 0; /* never grows — stays its natural, small size */
}
/* Browsers don't apply the page font to form elements by default (a common
   CSS quirk) — this makes inputs/buttons/etc. (including Fluent Forms'
   email field and Subscribe button) match instead of using the browser's
   default UI font. */
.plb-body input,
.plb-body button,
.plb-body textarea,
.plb-body select {
	font-family: inherit;
}

.plb-box {
	width: 100%;
	padding: 60px 0;
	box-sizing: border-box;
}

.plb-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}

/* Two-column layout used by image/text and sign-up boxes.
   Columns are intentionally NOT flush against the outer edges —
   the .plb-container padding above handles that "centered, not flush" look. */
.plb-two-col {
	display: flex;
	align-items: stretch;
	gap: 60px;
	flex-wrap: wrap;
}
/* Only image-bearing boxes (Comic Page/Cover, Padded Image) need generous
   height — that's what stops their images looking squished. Sign-up boxes
   have no image, so they're deliberately left free to size to their own
   (much shorter) content instead of matching that height. */
.plb-image-text .plb-two-col {
	min-height: 480px;
}
/* Comic Page/Cover ("flush" mode) is meant to bleed edge-to-edge like the
   reference site — the outer section's normal top/bottom padding would
   always leave a gap above/below the image no matter how the image itself
   is sized, so it's removed here specifically and moved onto the text
   column instead, which still needs the breathing room. Padded Image
   ("padded" mode) keeps the section's normal padding on both columns —
   it's intentionally meant to stay contained, not bleed to the edges. */
.plb-mode-flush {
	padding-top: 0;
	padding-bottom: 0;
}
.plb-mode-flush .plb-col-text {
	padding-top: 60px;
	padding-bottom: 60px;
	box-sizing: border-box;
}

.plb-col { flex: 1 1 420px; min-width: 280px; }
.plb-col-text { display: flex; flex-direction: column; justify-content: center; }

.plb-col-text h2 { font-size: 2.1em; margin: 0 0 16px; line-height: 1.2; }
.plb-rich-text { font-size: 1.05em; line-height: 1.6; }

/* Comic Page/Cover: image flush top & bottom of its own column. No fixed
   aspect-ratio is forced — that caused oddly narrow/cropped-looking images
   when a box's height (driven by the text column) didn't match a portrait
   ratio well. Instead the image just fills the column's actual height and
   crops to fit, whatever that height ends up being. */
/* Comic Page/Cover: sized from the image's own natural proportions rather
   than forced to fill an externally-set height. This lets the image
   display full and uncropped, hitting the top and bottom of the row on its
   own — the row's height grows/shrinks to match the image instead of the
   other way around. A max-height keeps an unusually tall/narrow image from
   making the section absurdly long; object-fit only kicks in if that cap
   is actually hit. */
.plb-col-image.plb-img-flush {
	display: flex;
}
.plb-col-image.plb-img-flush img {
	width: 100%;
	height: auto;
	max-height: 900px;
	object-fit: cover;
	display: block;
}

/* Padded Image: roughly square, but sized from the image's own space
   rather than a hard-forced ratio, so it doesn't distort. */
.plb-col-image.plb-img-padded {
	display: flex;
	align-items: center;
	justify-content: center;
}
.plb-col-image.plb-img-padded img {
	width: 100%;
	max-width: 480px;
	max-height: 480px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* Optional "Add Border/Padding Around Image" box attribute — a small mat/
   frame of empty space around the image. Transparent rather than a fixed
   color, so whatever's actually behind it (the box's own background color
   or background image) shows through naturally instead of a fixed white
   rectangle that would only look right by coincidence. */
.plb-col-image.plb-img-bordered img {
	padding: 14px;
	background: transparent;
	box-sizing: border-box;
}
.plb-grid-img-bordered .plb-grid-item img {
	padding: 10px;
	background: transparent;
	box-sizing: border-box;
}

/* Sign-up form column: whatever embed code the user pastes just sits here. */
.plb-col-form {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.plb-col-form iframe { width: 100%; border: 0; }

/* Fluent Forms (and similar plugins) set their own text color on labels,
   which doesn't automatically pick up a box's Text Color setting. This
   makes labels/checkboxes inside a sign-up box inherit it instead —
   scoped to sign-up boxes only, so nothing else on the site is affected.
   Doesn't touch input fields themselves, so typed text stays readable
   regardless of the box's color. */
.plb-col-form label,
.plb-col-form .ff-el-group label,
.plb-col-form .ff-el-form-check-label {
	color: inherit;
}

/* Multiple Page / Cover Preview */
.plb-multi .plb-container {
	max-width: 1500px;
}
.plb-multi h2.plb-center,
.plb-multi .plb-center { text-align: center; }
.plb-sub-headline {
	text-align: center;
	font-size: 1.3em;
	font-weight: 600;
	margin: 0 0 4px;
}
.plb-shared-credits { margin: 10px 0 30px; }

.plb-grid {
	display: grid;
	gap: 24px;
	margin-top: 30px;
	grid-template-columns: repeat(2, 1fr);
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
.plb-grid-item { text-align: center; }
.plb-grid-item img {
	width: 100%;
	max-width: 640px;
	object-fit: contain; /* preview images never touch top/bottom of the square */
	display: block;
	margin: 0 auto;
}
.plb-page-title { margin: 8px 0 4px; }
.plb-page-line { margin: 2px 0; font-size: 0.95em; }

/* Layouts:
   2, 4, 6 -> plain 2-column grid (default above).
   3       -> 2 on top row, 1 centered on its own row.
   5       -> 2, 2, then 1 centered.
   The centered "odd one out" item deliberately has no width/max-width of
   its own — it just spans both columns and centers itself, then shrinks
   to fit its image, which already has the exact same max-width rule as
   every other image in the grid (above). That keeps sizing driven by a
   single rule instead of two separate width caps that could disagree
   depending on the grid's actual rendered width. */
.plb-grid-3 .plb-grid-item:last-child,
.plb-grid-5 .plb-grid-item:last-child {
	grid-column: 1 / span 2;
	justify-self: center;
}

/* Footer */
.plb-footer {
	width: 100%;
	padding: 40px 0;
	background: #111;
	color: #eee;
	text-align: center;
}
.plb-footer a { color: #fff; text-decoration: underline; }
.plb-footer-links { margin-top: 14px; }

/* Basic white policy popout page */
.plb-policy-page {
	width: 100%;
	min-height: 100vh;
	background: #fff;
	color: #111;
	padding: 60px 0;
	box-sizing: border-box;
}

@media (max-width: 780px) {
	.plb-two-col { gap: 30px; }
	.plb-container { padding: 0 20px; }
	/* Deliberately keeping the 2-column PAGE / PAGE grid on mobile too
	   (per feedback) instead of collapsing to a single stacked column —
	   the grid tracks just shrink to fit, so images get smaller but stay
	   side by side the way they do on desktop. */
	.plb-grid { gap: 12px; }
}