/* ============================================================================
   Packed Plans — page chassis (SPEC §9.2).

   Layout containers, header, footer, post lists, the home landing page, the
   sticky mobile CTA bar, prose defaults, focus rings and image defaults.
   It CONSUMES tokens from tokens.css and never declares one. Component styling
   for the packedplans/* blocks lives with each block (SPEC §9.3).

   Breakpoints (DESIGN §7): sm 37.5em (600px) · md 56.25em (900px) · lg 75em.
   ========================================================================= */

/* ------------------------------------------------------------------- chassis */

body {
	background: var(--pp-bg);
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-body);
	line-height: var(--pp-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip; /* DESIGN §9.17: the body never scrolls sideways */
}

img,
video {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

/* Dark mode dims content photographs so a bright hero does not torch a reader
   at 1am (DESIGN §2). Chrome — icons, wordmark — is unaffected. */
.pp-main img,
.wp-block-post-featured-image img {
	filter: var(--pp-photo-filter);
}

:root {
	scroll-behavior: smooth;
	scroll-padding-block-start: 5rem; /* the sticky header must not cover an anchor */
}

/* --------------------------------------------------------------- typography */

h1,
h2,
h3,
h4 {
	font-family: var(--pp-font-display);
	font-optical-sizing: auto;
	line-height: var(--pp-lh-heading);
	letter-spacing: -.02em;
	text-wrap: balance;
	margin-block: 0;
}

h1 {
	font-size: var(--pp-fs-display);
	font-weight: var(--pp-fw-display);
	line-height: var(--pp-lh-tight);
	letter-spacing: -.02em;
}

h2 {
	font-size: var(--pp-fs-h2);
	font-weight: var(--pp-fw-display);
	letter-spacing: -.015em;
}

h3 {
	font-size: var(--pp-fs-h3);
	font-weight: var(--pp-fw-display);
	letter-spacing: -.01em;
}

h4 {
	font-size: var(--pp-fs-h4);
	font-weight: var(--pp-fw-display);
	letter-spacing: 0;
}

/* The italic is the display face's only emphasis: the brand uses it on "Plans" and
   on the one word of a headline that carries the idea. Coloured clay, never bolded. */
h1 em,
h2 em,
.pp-home-hero__title em {
	font-style: italic;
	color: var(--pp-accent);
}

p {
	text-wrap: pretty;
	margin-block: 0;
}

a {
	color: var(--pp-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-thickness: 2px;
}

strong {
	font-weight: 600;
}

/* Anything that is a number gets tabular figures (DESIGN §9.2). */
time,
.pp-card__date,
.pp-updatedlist__date {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Eyebrow: 11px all-caps, tracked, preceded by the 24px accent rule. */
.pp-eyebrow {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-micro);
	font-weight: 600;
	line-height: var(--pp-lh-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pp-text-muted);
}

.pp-eyebrow::after {
	content: "";
	display: block;
	inline-size: 24px;
	block-size: 2px;
	margin-block-start: var(--pp-space-2);
	margin-inline-start: -1px;
	background: var(--pp-brand-sun);
	border-radius: var(--pp-radius-sm);
}

/* ------------------------------------------------------------------- focus */

:where(a, button, input, select, textarea, summary, details, [tabindex]):focus-visible {
	outline: 2px solid var(--pp-focus);
	outline-offset: 2px;
	box-shadow: var(--pp-shadow-focus);
}

/* On an accent fill the ring switches to the surface colour for separation. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline-color: var(--pp-surface);
}

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

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--pp-space-2);
	min-block-size: 48px;
	padding: 14px 20px;
	border: 1px solid transparent;
	border-radius: var(--pp-radius-pill);
	background: var(--pp-cta-bg);
	color: var(--pp-cta-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-sm);
	font-weight: 600;
	line-height: var(--pp-lh-ui);
	text-decoration: none;
	transition: transform var(--pp-dur-fast) var(--pp-ease), background-color var(--pp-dur) var(--pp-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	color: var(--pp-cta-text);
	text-decoration: none;
	transform: translateY(-1px);
}

.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: var(--pp-border-strong);
	color: var(--pp-text);
}

/* ------------------------------------------------------------------ header */

/* The root padding of theme.json insets every direct child of .wp-site-blocks. The
   header and footer are chrome and must run edge to edge, so they give the gutter
   back as padding instead of carrying it as margin. */
header.wp-block-template-part,
footer.wp-block-template-part {
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, 0px)) calc(-1 * var(--wp--style--root--padding-right, 0px));
	padding-inline: var(--wp--style--root--padding-left, 0px) var(--wp--style--root--padding-right, 0px);
}

header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: var(--pp-surface);
	border-block-end: 1px solid transparent;
	transition: box-shadow var(--pp-dur) var(--pp-ease), border-color var(--pp-dur) var(--pp-ease);
}

header.wp-block-template-part.is-scrolled {
	border-block-end-color: var(--pp-border);
	box-shadow: var(--pp-shadow-1);
}

.pp-header {
	position: relative;
	padding-block: var(--pp-space-2);
}

.pp-header__inner {
	min-block-size: 56px;
	gap: var(--pp-space-4);
}

.pp-header__brand a,
.pp-header__brand {
	color: var(--pp-text);
	text-decoration: none;
	letter-spacing: -.01em;
}

/* The brand lockup (DESIGN §2 Sun & Ink): the luggage-tag mark and the wordmark, with
   "Plans" in the display italic. The mark is inline SVG so it recolours with the tokens. */
.pp-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--pp-space-3);
	color: var(--pp-text);
	text-decoration: none;
	flex-shrink: 0;
}

.pp-brand:hover {
	color: var(--pp-text);
	text-decoration: none;
}

.pp-brand__mark {
	inline-size: 34px;
	block-size: 34px;
	flex-shrink: 0;
	transition: transform var(--pp-dur) var(--pp-ease);
}

.pp-brand:hover .pp-brand__mark {
	transform: rotate(-6deg);
}

.pp-brand__mark .pp-brand__strap {
	stroke: var(--pp-text);
}

.pp-brand__name {
	font-family: var(--pp-font-display);
	font-weight: var(--pp-fw-display);
	font-size: 1.625rem;
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
}

.pp-brand__name em {
	font-style: italic;
}

@media (min-width: 56.25em) {
	.pp-brand__mark {
		inline-size: 38px;
		block-size: 38px;
	}

	.pp-brand__name {
		font-size: 1.75rem;
	}
}

@media (min-width: 56.25em) {
	.pp-header__inner {
		min-block-size: 72px;
	}
}

/* The 2px scroll-progress bar header.js injects. Reserved height, so it can
   never shift the layout, and it is decorative — no ARIA. */
.pp-progress {
	position: absolute;
	inset-block-end: -1px;
	inset-inline: 0;
	block-size: 2px;
	pointer-events: none;
}

.pp-progress__bar {
	display: block;
	block-size: 100%;
	inline-size: 100%;
	transform: scaleX(var(--pp-progress, 0));
	transform-origin: 0 50%;
	background: var(--pp-accent);
	transition: transform var(--pp-dur-fast) linear;
}

/* Navigation: link style everywhere, full-screen paper overlay below 900px. */
.pp-nav {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-sm);
	font-weight: 500;
	gap: var(--pp-space-5);
}

.pp-nav a {
	color: var(--pp-text);
	text-decoration: none;
}

.pp-nav a:hover {
	color: var(--pp-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pp-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--pp-bg);
	color: var(--pp-text);
	padding: var(--pp-space-6) var(--pp-gutter);
}

.pp-nav .wp-block-navigation__responsive-container.is-menu-open a {
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h3);
	font-weight: var(--pp-fw-display, 400);
}

@media (prefers-reduced-motion: no-preference) {
	.pp-nav .wp-block-navigation__responsive-container.is-menu-open {
		animation: pp-fade-rise var(--pp-dur) var(--pp-ease) both;
	}
}

@keyframes pp-fade-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------- main flow */

.pp-main {
	display: block;
	padding-block: var(--pp-space-8) var(--pp-space-10);
}

.pp-main > * + * {
	margin-block-start: var(--pp-space-8);
}

@media (min-width: 56.25em) {
	.pp-main > * + * {
		margin-block-start: var(--pp-space-12);
	}
}

/* Prose measure. Block-level `constrained` layout already caps width at
   --pp-maxw-prose; this keeps a long paragraph inside a comfortable measure
   even when a block opts out. */
.pp-main :where(p, ul, ol, blockquote) {
	max-inline-size: var(--pp-measure);
}

.pp-main :where(p, ul, ol) + :where(p, ul, ol) {
	margin-block-start: var(--pp-space-4);
}

.pp-post-terms {
	margin-block-start: var(--pp-space-8);
	font-size: var(--pp-fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pp-text-muted);
}

.pp-post-terms a {
	color: var(--pp-text-muted);
}

.pp-page__title {
	margin-block-end: var(--pp-space-6);
}

/* ------------------------------------------------------- home landing page */

.pp-home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pp-space-8);
	align-items: center;
	padding-block: var(--pp-space-6) var(--pp-space-4);
}

/* Flex gap owns the rhythm here; the flow-layout margins WordPress adds to non-first
   children would double it. */
.pp-home-hero__copy,
.pp-promise,
.pp-promise__item {
	--wp--style--block-gap: 0;
}

.pp-home-hero__copy > *,
.pp-home-hero > *,
.pp-promise > *,
.pp-promise__item > * {
	margin-block-start: 0;
}

.pp-home-hero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-5);
}

.pp-home-hero__title {
	max-inline-size: 16ch;
}

.pp-home-hero__lead {
	font-size: var(--pp-fs-lead);
	line-height: var(--pp-lh-body);
	color: var(--pp-text-muted);
	max-inline-size: var(--pp-measure-lead);
}

.pp-home-hero__actions {
	gap: var(--pp-space-3);
	align-items: center;
}

/* The ghost CTA is a text link with the sun as its underline, not a second button. */
.pp-home-hero__cta--ghost .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	border-radius: 0;
	padding-inline: var(--pp-space-2);
	color: var(--pp-text);
	box-shadow: inset 0 -2px 0 var(--pp-brand-sun);
}

.pp-home-hero__cta--ghost .wp-block-button__link:hover {
	color: var(--pp-text);
	box-shadow: inset 0 -3px 0 var(--pp-brand-sun);
	transform: none;
}

/* Two photographs and the tag, composed on a square. Everything is a percentage of
   that square so the same composition holds from a 360px phone to a 1440px desktop. */
.pp-home-hero__art {
	position: relative;
	aspect-ratio: 1 / 1;
	max-inline-size: 36rem;
	margin-inline: auto;
	inline-size: 100%;
}

.pp-home-hero__photo {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: var(--pp-radius-lg);
	box-shadow: 0 24px 60px -24px rgb(27 42 65 / .45);
	background: var(--pp-surface-2);
}

.pp-home-hero__photo img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: var(--pp-photo-filter);
}

.pp-home-hero__photo--a {
	inset-inline-start: 16%;
	inset-block-start: 0;
	inline-size: 52%;
	aspect-ratio: 4 / 5;
	transform: rotate(-3deg);
}

.pp-home-hero__photo--b {
	inset-inline-end: 0;
	inset-block-end: 6%;
	inline-size: 62%;
	aspect-ratio: 3 / 2;
	transform: rotate(2.5deg);
	border: 6px solid var(--pp-bg);
}

/* The luggage tag as a sticker (DESIGN §2): sun card, ink type, a punched hole. Reused on
   destination heroes for the cheapest-month callout. */
.pp-tag {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-1);
	inline-size: clamp(8.5rem, 40%, 10.5rem);
	padding: var(--pp-space-8) var(--pp-space-4) var(--pp-space-4);
	border-radius: var(--pp-radius-lg);
	background: var(--pp-brand-sun);
	color: var(--pp-brand-ink);
	box-shadow: 0 12px 30px -14px rgb(27 42 65 / .5);
}

.pp-tag::before {
	content: "";
	position: absolute;
	inset-block-start: var(--pp-space-3);
	inset-inline-start: 50%;
	inline-size: 12px;
	block-size: 12px;
	margin-inline-start: -8px;
	border-radius: 50%;
	background: var(--pp-bg);
	border: 2px solid var(--pp-brand-ink);
}

.pp-tag__eyebrow {
	font-size: var(--pp-fs-micro);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.pp-tag__value {
	font-family: var(--pp-font-display);
	font-weight: var(--pp-fw-display);
	font-size: 2.25rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pp-tag__note {
	font-size: var(--pp-fs-xs);
	color: #5A4A1E;
}

.pp-home-hero__art .pp-tag {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 12%;
	transform: rotate(-9deg);
}

@media (min-width: 56.25em) {
	.pp-home-hero {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--pp-space-8);
		padding-block: var(--pp-space-10) var(--pp-space-8);
	}

	.pp-home-hero__art {
		margin-inline: 0 0;
	}
}

/* The promise band: ink, three columns, one stroke icon each. */
.pp-promise {
	padding: var(--pp-space-6) var(--pp-space-6);
	background: var(--pp-brand-ink);
	color: var(--pp-brand-paper);
	border-radius: 12px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pp-space-6);
}

.pp-promise__item {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-2);
}

.pp-promise__icon {
	inline-size: 28px;
	block-size: 28px;
	color: var(--pp-brand-sun);
}

.pp-promise__title {
	font-size: var(--pp-fs-h3);
	letter-spacing: 0;
	color: var(--pp-brand-paper);
}

.pp-promise__body {
	font-size: var(--pp-fs-sm);
	line-height: 1.5;
	color: #C9C2B2;
	max-inline-size: 40ch;
}

@media (min-width: 56.25em) {
	.pp-promise {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--pp-space-8);
		padding: var(--pp-space-6) var(--pp-space-8);
	}
}

.pp-section__title,
.pp-archive__title {
	position: relative;
	padding-block-start: var(--pp-space-4);
}

.pp-section__title::before,
.pp-archive__title::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: -1px;
	inline-size: 24px;
	block-size: 2px;
	background: var(--pp-brand-sun);
	border-radius: var(--pp-radius-sm);
}

.pp-section__dek {
	margin-block-start: var(--pp-space-3);
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
}

.pp-archive__description {
	margin-block-start: var(--pp-space-3);
	color: var(--pp-text-muted);
}

/* ------------------------------------------------------- post lists (cards) */

.pp-cards {
	margin-block-start: var(--pp-space-6);
}

.pp-cards__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--pp-space-5);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.pp-cards__grid > li {
	display: flex;
	flex-direction: column;
	gap: var(--pp-space-3);
	margin: 0;
	padding: 0 0 var(--pp-space-5);
	background: var(--pp-surface);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-md);
	overflow: hidden;
	transition: border-color var(--pp-dur) var(--pp-ease);
}

.pp-cards__grid > li:hover {
	border-color: var(--pp-border-strong);
}

.pp-card__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--pp-surface-2);
}

.pp-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--pp-dur-slow) var(--pp-ease);
}

@media (prefers-reduced-motion: no-preference) {
	.pp-cards__grid > li:hover .pp-card__media img {
		transform: scale(1.03);
	}
}

.pp-card__title {
	margin: 0;
	padding-inline: var(--pp-space-4);
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h3);
	font-weight: var(--pp-fw-display, 400);
	line-height: var(--pp-lh-heading);
}

.pp-card__title a {
	color: var(--pp-text);
	text-decoration: none;
}

.pp-card__title a:hover {
	color: var(--pp-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pp-card__excerpt {
	margin: 0;
	padding-inline: var(--pp-space-4);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-ui);
	color: var(--pp-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pp-card__excerpt .wp-block-post-excerpt__more-link {
	display: none;
}

.pp-card__date {
	margin: 0;
	margin-block-start: auto;
	padding-inline: var(--pp-space-4);
	font-size: var(--pp-fs-xs);
	color: var(--pp-text-muted);
}

/* "Recently updated" — a list, not cards: it is a re-check log, not a shelf. */
.pp-updatedlist {
	margin-block-start: var(--pp-space-5);
}

.pp-updatedlist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var(--pp-border);
}

.pp-updatedlist__list > li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pp-space-2) var(--pp-space-5);
	padding-block: var(--pp-space-4);
	border-block-end: 1px solid var(--pp-border);
}

.pp-updatedlist__title {
	margin: 0;
	font-size: var(--pp-fs-h4);
}

.pp-updatedlist__title a {
	color: var(--pp-text);
	text-decoration: none;
}

.pp-updatedlist__title a:hover {
	color: var(--pp-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pp-updatedlist__date {
	margin: 0;
	font-size: var(--pp-fs-xs);
	color: var(--pp-text-muted);
	white-space: nowrap;
}

/* ------------------------------------------------------------- pagination */

.pp-pagination {
	margin-block-start: var(--pp-space-6);
	padding-block-start: var(--pp-space-4);
	border-block-start: 1px solid var(--pp-border);
	font-size: var(--pp-fs-sm);
	gap: var(--pp-space-4);
}

.pp-pagination a {
	color: var(--pp-accent);
}

.pp-pagination .page-numbers {
	padding: var(--pp-space-1) var(--pp-space-2);
}

.pp-pagination .page-numbers.current {
	font-weight: 600;
	color: var(--pp-text);
	background: var(--pp-accent-weak);
	border-radius: var(--pp-radius-sm);
}

/* ------------------------------------------------------------------- 404 */

.pp-404__lead {
	margin-block-start: var(--pp-space-4);
	font-size: var(--pp-fs-lead);
	color: var(--pp-text-muted);
	max-inline-size: var(--pp-measure-lead);
}

.pp-404__search {
	margin-block-start: var(--pp-space-6);
	max-inline-size: 28rem;
}

.pp-404__search .wp-block-search__input {
	min-block-size: 48px;
	padding: 0 var(--pp-space-3);
	border: 1px solid var(--pp-border-strong);
	border-radius: var(--pp-radius-md);
	background: var(--pp-surface);
	color: var(--pp-text);
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-body);
}

.pp-404__search .wp-block-search__button {
	min-block-size: 48px;
	margin-inline-start: var(--pp-space-2);
	border: 1px solid transparent;
	border-radius: var(--pp-radius-pill);
	background: var(--pp-accent);
	color: var(--pp-accent-text);
	font-weight: 600;
	padding-inline: var(--pp-space-5);
}

/* ------------------------------------------------------------------ footer */

footer.wp-block-template-part {
	margin-block-start: var(--pp-space-10);
	background: var(--pp-surface-2);
	border-block-start: 1px solid var(--pp-border);
}

.pp-footer {
	padding-block: var(--pp-space-8);
}

.pp-footer__brand {
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h3);
	font-weight: var(--pp-fw-display, 400);
	letter-spacing: -.01em;
}

.pp-footer__tagline {
	margin-block-start: var(--pp-space-2);
	color: var(--pp-text-muted);
	max-inline-size: var(--pp-measure-lead);
}

.pp-footer__rule {
	margin-block: var(--pp-space-6);
	border: 0;
	border-block-start: 1px solid var(--pp-border);
	background: none;
	opacity: 1;
}

.pp-footer__cols {
	gap: var(--pp-space-6);
}

.pp-footer__coltitle {
	font-family: var(--pp-font-body);
	font-size: var(--pp-fs-micro);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pp-text-muted);
}

.pp-footer__links {
	list-style: none;
	margin-block-start: var(--pp-space-3);
	padding: 0;
	display: grid;
	gap: var(--pp-space-2);
	font-size: var(--pp-fs-sm);
}

.pp-footer__links a {
	color: var(--pp-text);
	text-decoration: none;
}

.pp-footer__links a:hover {
	color: var(--pp-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The disclosure line is typographically equal to the copy around it
   (DESIGN §9.12): full contrast, never a muted footnote. */
.pp-footer__legal {
	font-size: var(--pp-fs-xs);
	line-height: var(--pp-lh-ui);
	color: var(--pp-text);
}

.pp-footer__copy {
	margin-block-start: var(--pp-space-2);
	font-size: var(--pp-fs-xs);
	color: var(--pp-text-muted);
}

/* ------------------------------------------------- sticky mobile CTA (§6.11)
   Theme chrome, built by header.js from the first stay card on the page. It
   reserves its own height so it can never shift the layout, retires at 900px
   and yields while a card CTA or the FAQ is on screen. */

.pp-stickycta {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: var(--pp-space-3);
	padding: var(--pp-space-3) var(--pp-gutter);
	padding-block-end: calc(var(--pp-space-3) + env(safe-area-inset-bottom, 0px));
	background: var(--pp-surface);
	border-block-start: 1px solid var(--pp-border);
	border-start-start-radius: var(--pp-radius-lg);
	border-start-end-radius: var(--pp-radius-lg);
	box-shadow: var(--pp-shadow-2);
	/* `transform` alone would leave the cloned CTA and the dismiss button in the tab order and
	   the accessibility tree while the bar is parked offscreen; `visibility` takes both out and
	   still transitions, so the rise is unchanged. header.js also toggles `inert`. */
	visibility: hidden;
	transform: translateY(110%);
	transition:
		transform var(--pp-dur) var(--pp-ease),
		visibility var(--pp-dur) var(--pp-ease);
}

.pp-stickycta.is-visible {
	visibility: visible;
	transform: none;
}

/* Reserved height (DESIGN §6.11, §9.14): header.js adds the class and measures the bar into
   --pp-stickycta-h once it exists, so the fixed bar can never cover the end of the footer and
   nothing moves when it rises or is dismissed. */
.pp-has-stickycta .pp-footer {
	padding-block-end: calc(var(--pp-space-8) + var(--pp-stickycta-h, 5rem));
}

.pp-stickycta__label {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-size: var(--pp-fs-xs);
	line-height: var(--pp-lh-ui);
	color: var(--pp-text);
}

.pp-stickycta__name {
	display: block;
	font-family: var(--pp-font-display);
	font-size: var(--pp-fs-h4);
	font-weight: var(--pp-fw-display, 400);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pp-stickycta__dismiss {
	flex: 0 0 auto;
	min-inline-size: 48px;
	min-block-size: 48px;
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-pill);
	background: transparent;
	color: var(--pp-text-muted);
	font-size: var(--pp-fs-sm);
	cursor: pointer;
}

@media (min-width: 56.25em) {
	.pp-stickycta {
		display: none;
	}

	/* The bar retires here, so the reserve goes with it. */
	.pp-has-stickycta .pp-footer {
		padding-block-end: var(--pp-space-8);
	}
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 37.4375em) {
	.pp-home-hero__actions .wp-block-button,
	.pp-home-hero__actions .wp-block-button__link {
		inline-size: 100%;
		justify-content: center;
	}

	.pp-home-hero__cta--ghost .wp-block-button__link {
		box-shadow: none;
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-decoration-color: var(--pp-brand-sun);
		text-underline-offset: 4px;
	}
}