/**
 * Pattern primitives.
 *
 * Only rules that theme.json cannot express. Block backgrounds always stretch
 * to the container width, so anything that needs an intrinsic width - a pill,
 * a fixed-size icon tile - needs real CSS. Values reference design tokens so
 * they stay in sync with theme.json.
 */

/* Badge / pill: shrink-wraps its text instead of filling the row. */
.wpa-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	padding: 7px 14px;
	border-radius: 999px;
	font-weight: 600;
}

/* Smaller squared badge, e.g. "Free on WordPress.org". */
.wpa-badge {
	display: inline-flex;
	align-items: center;
	width: auto;
	padding: 3px 9px;
	border-radius: 6px;
	font-weight: 600;
}

/* Centres a pill whose parent is a block-level container. */
/* The comp sets 26px under the trust pill. Doubled class because Astra's
 * `p { margin-bottom: 0 }` is (0,1,1) and would otherwise collapse it to nothing,
 * leaving the pill sitting on the headline. */
.wpa-pill-center.wpa-pill-center {
	text-align: center;
	margin: 0 0 26px;
}

/* The comp draws the dot as a 7px circle rather than a bullet glyph, which sets
 * its own size from the font and renders noticeably larger. */
.wpa-pill__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: currentColor;
	flex-shrink: 0;
}

/* Square icon tile, centred glyph. */
.wpa-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-height: 52px;
	padding: 0;
	flex: 0 0 52px;
}

.wpa-icon-tile p {
	margin: 0;
	line-height: 1;
}

/*
 * Links inside dark sections.
 *
 * The global link colour (primary, #4f46e5) scores 2.83:1 against the dark
 * surface (#14162b) and fails WCAG AA. Dark sections opt into a light link
 * colour instead.
 */
.wpa-on-dark a {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.wpa-on-dark a:hover,
.wpa-on-dark a:focus {
	color: var(--wp--preset--color--primary-subtle);
	text-decoration: underline;
}

/* "Most popular" ribbon on the featured pricing tier. */
.wpa-ribbon {
	display: inline-flex;
	align-items: center;
	width: auto;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Reassurance row under the hero buttons. */
.wpa-reassurance {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	justify-content: center;
}

.wpa-reassurance > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* ============================================================
 * Pattern component classes.
 *
 * Presentation lives here rather than in block style attributes.
 * Hand-writing block HTML that byte-matches WordPress's style-engine
 * serialisation is fragile - property order, padding longhand order and
 * shadow-as-class all have to match exactly or the editor reports
 * "Block contains unexpected or invalid content". Keeping block attributes
 * to presets (colour, font size, font family) and doing the rest in CSS
 * removes that whole class of failure.
 * ============================================================ */

.wpa-section        { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
.wpa-section-sm    { padding-top: 44px; padding-bottom: 44px; }
.wpa-section-tight { padding-top: 0; padding-bottom: 20px; }
.wpa-section-rule-y { border-top: 1px solid var(--wp--preset--color--stroke-subtle); border-bottom: 1px solid var(--wp--preset--color--stroke-subtle); }
.wpa-section-rule-top { border-top: 1px solid var(--wp--preset--color--stroke-subtle); }

.wpa-head    { margin-bottom: 52px; }
.wpa-lead    { max-width: 600px; margin-left: auto; margin-right: auto; }

/* Doubled class, here and on the other paragraph rules marked the same way.
 * Astra's customizer CSS emits `p, .entry-content p { margin-bottom: 0 }`, and
 * the `.entry-content p` half scores (0,1,1) - higher than a single class - so
 * it silently wins over any `.wpa-*` bottom margin on a paragraph. Repeating
 * the class lifts these to (0,2,0) without tying them to a wrapper, so they
 * hold both inside post content and in the header and footer patterns. */
.wpa-eyebrow.wpa-eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-bottom: 12px; }

.wpa-card {
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 18px;
	padding: 32px;
	box-shadow: 0 1px 3px rgba(20, 22, 40, .04);
}

.wpa-card-flat { border: 0; box-shadow: none; }

.wpa-card > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- Icon tiles
 * Glyphs are CSS shapes drawn with ::before, exactly as the comp does -
 * text glyphs render far smaller than the 22px shapes the design specifies.
 * Colour comes from the block's textColor preset via currentColor.
 * Sizes per comp: suite 52/22, starting point 46/18, why 44/16.
 */
.wpa-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	flex: 0 0 auto;
}

.wpa-tile::before { content: ""; display: block; box-sizing: border-box; }

.wpa-tile-lg { width: 52px; height: 52px; border-radius: 13px; }
.wpa-tile-md { width: 46px; height: 46px; border-radius: 12px; }
.wpa-tile-sm { width: 44px; height: 44px; border-radius: 11px; margin-bottom: 18px; }

/* Suite - 52px tile */
.wpa-tile-lg.wpa-ico-square::before  { width: 22px; height: 22px; border-radius: 6px;   border: 3px solid currentColor; }
.wpa-tile-lg.wpa-ico-circle::before  { width: 22px; height: 22px; border-radius: 999px; border: 3px solid currentColor; }
.wpa-tile-lg.wpa-ico-diamond::before { width: 22px; height: 22px; border-radius: 5px;   background: currentColor; transform: rotate(45deg); }

/* Starting point - 46px tile */
.wpa-tile-md.wpa-ico-square::before  { width: 18px; height: 18px; border-radius: 5px;   border: 3px solid currentColor; }
.wpa-tile-md.wpa-ico-circle::before  { width: 18px; height: 18px; border-radius: 999px; border: 3px solid currentColor; }
.wpa-tile-md.wpa-ico-diamond::before { width: 16px; height: 16px; border-radius: 4px;   background: currentColor; transform: rotate(45deg); }

/* Why WPActPro - 44px tile */
.wpa-tile-sm.wpa-ico-square::before  { width: 16px; height: 16px; border-radius: 4px;   border: 3px solid currentColor; }
.wpa-tile-sm.wpa-ico-circle::before  { width: 16px; height: 16px; border-radius: 999px; border: 3px solid currentColor; }
.wpa-tile-sm.wpa-ico-diamond::before { width: 16px; height: 16px; border-radius: 4px;   background: currentColor; transform: rotate(45deg); }
.wpa-tile-sm.wpa-ico-bar::before     { width: 16px; height: 2px;  background: currentColor; }

.wpa-price      { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.wpa-price span { font-size: 15px; font-weight: 500; }

.wpa-faq-item {
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 12px;
	background: var(--wp--preset--color--surface);
}

/*
 * The browser's own disclosure triangle was showing here. It is the default
 * `list-item` marker on a summary, and it had never been replaced - so this
 * accordion carried a raw black arrow while the article accordion built later
 * used the design's + / -. Both now read the same.
 */
.wpa-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	list-style: none;
}

.wpa-faq-item summary::-webkit-details-marker { display: none; }

.wpa-faq-item summary::after {
	content: "\FF0B";
	color: var(--wp--preset--color--ink-subtle);
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

.wpa-faq-item[open] summary::after {
	content: "\FF0D";
	color: var(--wp--preset--color--primary);
}

.wpa-faq-item[open] { border-color: var(--wp--preset--color--primary); }

.wpa-faq-item p { margin: 12px 0 0; }

/* Guarantee card, to the comp: a green disc beside the copy rather than a tick
 * inline in the heading, and the two lines 3px apart instead of a paragraph gap. */
.wpa-guarantee {
	max-width: 720px;
	margin: 44px auto 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 16px;
	padding: 26px 32px;
	display: flex;
	align-items: center;
	gap: 20px;
	text-align: left;
}

.wpa-guarantee__icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #eafaf1;
	color: #16a34a;
	font-size: 22px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpa-guarantee__text b {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 3px;
}

.wpa-guarantee__text > span { display: block; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--ink-muted); }

@media (max-width: 600px) {
	.wpa-guarantee { padding: 22px; gap: 16px; align-items: flex-start; }
}

/* Newsletter card - light two-column variant used on the homepage. The blog
   templates use a dark inline variant, styled separately in blog.css. */
.wpa-newsletter {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 20px;
	padding: 40px 48px;
}

/* !important for the same reason as .wpa-feature-grid below. */
.wpa-newsletter .wp-block-columns { gap: 40px; margin-bottom: 0; }

/*
 * Vertical centring is a desktop-only concern. Once the columns stack, the
 * flex direction becomes `column` and align-items governs the horizontal axis
 * instead - centring each column on its own content and shrinking it off full
 * width. The About story's illustration column rendered 223px wide in a 342px
 * slot before this was scoped.
 */
@media (min-width: 782px) {
	.wpa-newsletter .wp-block-columns { align-items: center !important; }
}

.wpa-news-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 8px;
}

.wpa-news-lead {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
}

.wpa-news-form__row { display: flex; gap: 10px; }

.wpa-news-form__row input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #d9dbe6;
	border-radius: 11px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
}

.wpa-news-form__row input::placeholder { color: var(--wp--preset--color--ink-subtle); }

.wpa-news-form__row button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	border: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 600;
	padding: 0 24px;
	border-radius: 11px;
	cursor: pointer;
	white-space: nowrap;
}

.wpa-news-form__row button:hover { background: var(--wp--preset--color--primary-hover); }

.wpa-news-form__consent {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--wp--preset--color--ink-subtle);
}

.wpa-news-form__consent input[type="checkbox"] { accent-color: var(--wp--preset--color--primary); }

@media (max-width: 781px) {
	.wpa-newsletter { padding: 28px 24px; }
	.wpa-newsletter .wp-block-columns { gap: 24px; }
	.wpa-news-form__row { flex-direction: column; }
	.wpa-news-form__row button { height: 48px; }
}

.wpa-stack-tight > * { margin-bottom: 10px; }

/* Hero specifics that theme.json cannot express. */
.wpa-hero { background: radial-gradient(120% 70% at 50% -10%, var(--wp--preset--color--primary-subtle) 0%, var(--wp--preset--color--surface) 55%); }
.wpa-hero-lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.wpa-hero .wp-block-heading { max-width: 860px; margin-left: auto; margin-right: auto; }
.wpa-hero-shot img { border-radius: 16px; box-shadow: 0 30px 70px rgba(20, 22, 40, .16); max-width: 1000px; }

.wpa-stat { line-height: 1.1; }
.wpa-footer-brand strong { font-family: var(--wp--preset--font-family--brand); font-size: 23px; letter-spacing: -0.03em; }
.wpa-footer-title { font-weight: 700; }

/* Buttons inside patterns keep the comp's pill-ish radius and padding. */
.wp-block-button__link { border-radius: 12px; padding: 15px 30px; font-weight: 600; }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1px solid var(--wp--preset--color--stroke); }

/* ============================================================
 * Responsive
 *
 * Derived from the desktop comp, which contains no @media rules.
 * Breakpoints follow what is already in play: WordPress core stacks
 * .wp-block-columns at 781px, and Astra's mobile breakpoint is 921px.
 *
 * Core's stacking rule uses !important, so the two-up grids below have to
 * match it to take effect.
 * ============================================================ */

/* Hero lead: comp is 20px. Stepped down on small screens. */
.wpa-hero-lead {
	font-size: 20px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Two-up band: 545-1024px ---------------------------------------
 * The four-up feature grid is too narrow at the top of this range and too
 * sparse at the bottom, so it sits two-up across the whole band - including
 * below core's 781px stacking point, where its cards are short enough.
 */
@media (min-width: 545px) and (max-width: 1024px) {
	#features .wp-block-columns,
	.wpa-footer__grid {
		flex-wrap: wrap;
	}

	#features .wp-block-columns > .wp-block-column,
	.wpa-footer__col {
		flex-basis: calc(50% - 12px) !important;
		flex-grow: 0;
	}
}

@media (min-width: 782px) and (max-width: 1024px) {
	/* Three-up grids stay three-up but need tighter cards to fit. */
	.wpa-card { padding: 24px; }
}

/* ---- Mobile: <= 781px ---------------------------------------------- */
@media (max-width: 781px) {
	.wpa-card { padding: 24px; }

	.wpa-hero-lead { font-size: 17px; }

	/* Stats and footer links are short - one per row wastes a lot of height. */
	.wpa-section-rule-y .wp-block-columns,
	.wpa-footer__grid {
		flex-wrap: wrap;
		gap: 24px;
	}

	.wpa-section-rule-y .wp-block-columns > .wp-block-column,
	.wpa-footer__col {
		flex-basis: calc(50% - 12px) !important;
		flex-grow: 0;
	}

	/* The footer brand column keeps its own row. */
	.wpa-footer__col--brand {
		flex-basis: 100% !important;
	}

	.wpa-head { margin-bottom: 32px; }

	.wpa-guarantee,
	.wpa-newsletter { padding: 24px; }

	.wpa-faq-item { padding: 16px 18px; }

	/* Full-width buttons read better than two half-width ones. */
	.wpa-hero .wp-block-buttons,
	.wpa-section .wp-block-buttons {
		width: 100%;
	}

	.wpa-hero .wp-block-button,
	.wpa-section > .wp-block-group .wp-block-button {
		flex: 1 1 100%;
	}

	.wpa-hero .wp-block-button__link,
	.wpa-section > .wp-block-group .wp-block-button__link {
		display: block;
		text-align: center;
	}

	/* Reassurance row stacks rather than wrapping mid-item. */
	.wpa-reassurance {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
}

/* ---- Small phones: <= 544px ---------------------------------------- */
@media (max-width: 544px) {
	.wpa-card { padding: 20px; }

	.wpa-tile-lg { width: 46px; height: 46px; border-radius: 12px; }
	.wpa-tile-lg.wpa-ico-square::before,
	.wpa-tile-lg.wpa-ico-circle::before,
	.wpa-tile-lg.wpa-ico-diamond::before { width: 18px; height: 18px; }

	/* Footer collapses to a single column; stats stay two-up. */
	.wpa-footer__col {
		flex-basis: 100% !important;
	}
}

/* ============================================================
 * Astra overrides
 *
 * Astra emits its own typography and block-padding CSS, and wins two ways:
 * its `.entry-content > .wp-block-group` (0,2,0) outranks `.wpa-section`
 * (0,1,0), and its inline dynamic CSS loads after theme.json global styles so
 * `h1 { font-weight: 400; line-height: 1.4em }` beats the token values.
 *
 * These rules restore the comp values with specificity high enough to win
 * outright, rather than relying on source order.
 * ============================================================ */

.wp-block-group.alignfull.wpa-section,
.wp-block-group.alignfull.wpa-hero {
	padding-top: 88px;
	padding-bottom: 88px;
}

.wp-block-group.alignfull.wpa-hero        { padding-bottom: 72px; }
.wp-block-group.alignfull.wpa-section-sm { padding-top: 44px; padding-bottom: 44px; }
.wp-block-group.alignfull.wpa-section-tight { padding-top: 0; padding-bottom: 20px; }

/* Heading weights and line heights, per the comp. */
.wpa-section h1,
.wpa-hero h1 {
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin-top: 0;
	margin-bottom: 22px;
}

.wpa-section h2,
.wpa-hero h2 {
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-top: 0;
	margin-bottom: 14px;
}

.wpa-section h3,
.wpa-hero h3 {
	font-weight: 700;
	line-height: 1.25;
	margin-top: 0;
}

.wpa-hero .wpa-hero-lead { margin-top: 0; margin-bottom: 34px; }
.wpa-section .wpa-lead   { margin-top: 0; margin-bottom: 0; }
.wpa-section .wpa-eyebrow { margin-top: 0; }

/* Card typography differs per section in the comp. */
.wpa-card-suite h3   { font-size: 21px; margin-bottom: 10px; }
.wpa-card-suite p    { font-size: 15px; line-height: 1.6; }
.wpa-card-feature h3 { font-size: 18px; margin-bottom: 8px; }
.wpa-card-feature p  { font-size: 14px; line-height: 1.6; margin-bottom: 0; }
.wpa-card-route h3   { font-size: 19px; margin-bottom: 8px; }
.wpa-card-route p    { font-size: 14px; line-height: 1.6; }

/* Final CTA is a gradient card, not a plain section. */
.wpa-cta-card {
	background: linear-gradient(135deg, var(--wp--preset--color--primary), #6d28d9);
	border-radius: 24px;
	padding: 72px 56px;
	text-align: center;
	color: var(--wp--preset--color--surface);
}

.wpa-cta-card h2 { color: var(--wp--preset--color--surface); margin-bottom: 14px; }

.wpa-cta-card p {
	font-size: 18px;
	opacity: .9;
	color: var(--wp--preset--color--surface);
	max-width: 560px;
	margin: 0 auto 30px;
}

.wpa-cta-card .wp-block-button__link {
	font-size: 16px;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: 12px;
}

.wpa-cta-card .wp-block-button:first-child .wp-block-button__link {
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--primary) !important;
}

.wpa-cta-card .wp-block-button.is-style-outline .wp-block-button__link {
	background: rgba(255, 255, 255, .14) !important;
	color: var(--wp--preset--color--surface) !important;
	border: 1px solid rgba(255, 255, 255, .35) !important;
	font-weight: 600;
}

@media (max-width: 781px) {
	.wp-block-group.alignfull.wpa-section,
	.wp-block-group.alignfull.wpa-hero { padding-top: 56px; padding-bottom: 56px; }
	.wpa-cta-card { padding: 40px 24px; border-radius: 18px; }
	.wpa-cta-card p { font-size: 16px; }
}

/* -------------------------------------------- Feature deep-dive sections
 * Three alternating detail blocks between the suite grid and "Built to be
 * dependable". Values from the comp: 64px vertical padding, two equal
 * columns with a 56px gap, 34px heading.
 */
.wp-block-group.alignfull.wpa-feature {
	padding-top: 64px;
	padding-bottom: 64px;
}

.wpa-feature-raised { border-top: 1px solid var(--wp--preset--color--stroke-subtle); }

/* !important is needed to beat core's own `.wp-block-columns { align-items:
 * normal !important }`, which also defeats the block's vertical-alignment
 * setting - the class it adds carries no !important of its own. */
@media (min-width: 782px) {
	/* Desktop only - see the note on the newsletter columns above. */
	.wp-block-columns.wpa-feature-grid { align-items: center !important; }
}

.wpa-feature-grid { gap: 56px; margin-bottom: 0; }

/* Doubled class - see the note on Astra paragraph margins above. */
.wpa-feature-badge.wpa-feature-badge { margin: 0 0 18px; }

.wpa-feature-title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
	margin: 0 0 16px;
}

/* Doubled class - see the note on Astra paragraph margins above. */
.wpa-feature-lead.wpa-feature-lead {
	font-size: 16px;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 24px;
}

/* Doubled class - see the note on Astra paragraph margins above. Without it the
 * checklist collapses into a solid block with no air between the lines. */
.wpa-feature-tick.wpa-feature-tick {
	display: flex;
	gap: 10px;
	font-size: 15px;
	/* The comp's rows compute to `normal`; inheriting Astra's 1.7 body leading
	 * made each row 25px instead of 19 and spread the group 37px apart instead
	 * of 31, which is what read as "not the same" beside the comp. */
	line-height: normal;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0 0 12px;
}

/* The comp leaves 28px between the last tick and the button. */
.wpa-feature-tick.wpa-feature-tick:last-of-type { margin-bottom: 28px; }

.wpa-feature-tick .has-inline-color { font-weight: 700; }
.wpa-feature-copy .wp-block-buttons { margin-top: 28px; justify-content: flex-start; align-items: center; gap: 14px; }

.wpa-feature-copy .wp-block-button__link {
	font-size: 15px;
	padding: 13px 26px;
	border-radius: 11px;
}

/* ---- Two-action rows: buy, then the free version ------------------- *
 *
 * The 02-09 comp replaced every single "Explore" call to action with a pair -
 * a coloured button that goes to the pricing table, and a plain link to the
 * plugin's free listing on WordPress.org. The second action is a `wp:button`
 * rather than a paragraph so the two sit on one flex baseline; these rules
 * strip the button chrome back off it.
 *
 * Qualified with `.wp-block-button` so the reset outranks the section button
 * sizing (`.wpa-feature-copy .wp-block-button__link`) wherever it is used,
 * without depending on which rule the stylesheet states last.
 */
.wp-block-button.wpa-btn-plain .wp-block-button__link {
	background: none;
	border: 0;
	padding: 0;
	border-radius: 0;
	font-weight: 600;
}

.wp-block-button.wpa-btn-plain .wp-block-button__link:hover { text-decoration: underline; }

/* The suite cards run the smaller of the two button sizes.
 *
 * The three cards hold different amounts of copy - a star rating on one, a
 * "free on WordPress.org" pill on the other two, and a description that runs to
 * two lines on the third - so their action rows landed 24px apart. The cards are
 * already equal height, so making each a column and pushing the row down puts
 * all three buttons on one line. */
.wpa-card-suite { display: flex; flex-direction: column; }

/* The slack goes into the description, not above the button.
 *
 * Pushing the action row down with `margin-top: auto` aligned the buttons but
 * handed each card whatever space was left over, so the gap above them came out
 * 22, 16 and 40 - and in the card with the most copy the rating line sat flush
 * against the button. Letting the description absorb it instead gives all three
 * cards the same 24px below the description and the comp's 16px below the rating
 * line, with the buttons still on one baseline. */
.wpa-card-suite > p:first-of-type { flex: 1 1 auto; }
.wpa-card-suite > p:last-of-type { margin-bottom: 16px; }

.wpa-card-actions { align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }

.wpa-card-actions .wp-block-button__link {
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 10px;
}

.wpa-card-actions .wp-block-button.wpa-btn-plain .wp-block-button__link { padding: 0; }

/* Placeholder frames stand in for product imagery until real shots land. */
.wpa-feature-media { display: flex; flex-direction: column; gap: 12px; }

.wpa-shot-ph {
	height: 110px;
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eef0f5;
	background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .045) 0 10px, transparent 10px 20px);
}

.wpa-shot-tall { height: 320px; }

.wpa-shot-ph span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, .42);
	text-align: center;
	padding: 0 12px;
}

.wpa-shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }

@media (max-width: 781px) {
	.wp-block-group.alignfull.wpa-feature { padding-top: 48px; padding-bottom: 48px; }
	.wpa-feature-grid { gap: 32px; }
	.wpa-feature-title { font-size: 26px; }
	.wpa-shot-tall { height: 220px; }
	/* Copy first on narrow screens regardless of desktop order. */
	.wpa-feature-grid { display: flex; flex-direction: column; }
	.wpa-feature-copy { order: 1; }
	.wpa-feature-media { order: 2; }
}

/* ------------------------------------------------- Hero product mock
 * Stylised browser frame with a floating label per plugin, as the comp
 * draws it. Replace .wpa-hero-mock__frame with a real screenshot when
 * product imagery is available.
 */
.wpa-hero-mock {
	position: relative;
	max-width: 1000px;
	height: 440px;
	margin: 52px auto 0;
}

.wpa-hero-mock__frame {
	position: absolute;
	top: 24px;
	left: 60px;
	right: 60px;
	bottom: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid #edeef4;
	border-radius: 16px;
	box-shadow: 0 30px 70px rgba(20, 22, 40, .16);
	overflow: hidden;
	text-align: left;
}

.wpa-hero-mock__bar {
	height: 36px;
	background: #f5f6fa;
	border-bottom: 1px solid #edeef4;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 16px;
}

.wpa-hero-mock__bar span { width: 9px; height: 9px; border-radius: 999px; }
.wpa-hero-mock__bar span:nth-child(1) { background: #ff5f57; }
.wpa-hero-mock__bar span:nth-child(2) { background: #febc2e; }
.wpa-hero-mock__bar span:nth-child(3) { background: #28c840; }
.wpa-hero-mock__bar em { margin-left: 14px; height: 15px; flex: 1; max-width: 280px; background: #e7e9f2; border-radius: 5px; }

.wpa-hero-mock__body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; padding: 32px 40px; }

.wpa-hero-mock__media {
	height: 200px;
	background: #eef0f5;
	border-radius: 12px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wpa-hero-mock__media span { width: 70px; height: 90px; background: #dfe2ee; border-radius: 8px; }

.wpa-hero-mock__thumbs { display: flex; gap: 10px; }
.wpa-hero-mock__thumbs s { width: 54px; height: 54px; background: #eef0f5; border-radius: 8px; }

.wpa-hero-mock__lines { display: flex; flex-direction: column; }
.wpa-hero-mock__lines i { display: block; height: 10px; border-radius: 5px; background: #eef0f5; }
.wpa-hero-mock__lines i:nth-child(1) { height: 14px; width: 70%; background: #e7e9f2; margin-bottom: 12px; }
.wpa-hero-mock__lines i.is-accent { height: 24px; width: 40%; background: var(--wp--preset--color--primary); border-radius: 6px; opacity: .85; margin-bottom: 20px; }
.wpa-hero-mock__lines i:nth-child(3) { width: 100%; margin-bottom: 8px; }
.wpa-hero-mock__lines i.is-short { width: 85%; margin-bottom: 24px; }

.wpa-hero-mock__fields { display: flex; gap: 10px; margin-bottom: 20px; }
.wpa-hero-mock__fields u { height: 36px; flex: 1; border: 1.5px solid #e2e4ee; border-radius: 8px; }
.wpa-hero-mock__fields u.is-filled { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary-subtle); }

.wpa-hero-mock__cart {
	height: 44px;
	background: var(--wp--preset--color--ink);
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--surface);
	font-size: 13px;
	font-weight: 600;
}

/* Floating chips. Each carries the tinted tile and shape its plugin uses
 * elsewhere on the site - square for Extra Product Options, circle for
 * Estimated Delivery Date, diamond for Shipping Rate Builder. */
.wpa-hero-mock__tag {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--surface);
	border: 1px solid #eef0f6;
	border-radius: 12px;
	box-shadow: 0 14px 30px rgba(20, 22, 40, .14);
	padding: 12px 14px;
	text-align: left;
}

.wpa-hero-mock__icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpa-hero-mock__icon i { display: block; box-sizing: border-box; }
.wpa-hero-mock__icon.is-epo { background: #eef0ff; }
.wpa-hero-mock__icon.is-epo i { width: 14px; height: 14px; border-radius: 4px; border: 3px solid var(--wp--preset--color--primary); }
.wpa-hero-mock__icon.is-edd { background: #eafaf1; }
.wpa-hero-mock__icon.is-edd i { width: 14px; height: 14px; border-radius: 999px; border: 3px solid #16a34a; }
.wpa-hero-mock__icon.is-shipping { background: #fef2e8; }
.wpa-hero-mock__icon.is-shipping i { width: 13px; height: 13px; border-radius: 4px; background: #ea8a2e; transform: rotate(45deg); }

.wpa-hero-mock__text b { display: block; font-size: 12px; font-weight: 700; color: var(--wp--preset--color--ink); }
.wpa-hero-mock__text span { display: block; font-size: 11px; color: var(--wp--preset--color--ink-subtle); }

/* The green marker the comp floats over the frame's top-right corner. */
.wpa-hero-mock__badge {
	position: absolute;
	top: 0;
	right: 20px;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #16a34a;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(22, 163, 74, .3);
}

.wpa-hero-mock__badge i { width: 16px; height: 16px; border-radius: 999px; border: 3px solid #fff; }

.wpa-hero-mock__tag.is-one   { top: 6px;    left: 0; }
.wpa-hero-mock__tag.is-two   { top: 210px;  left: -20px; }
.wpa-hero-mock__tag.is-three { bottom: 0;   right: -10px; }

/* ------------------------------------------------------ Pricing toggle */

.wpa-price-toggle {
	display: flex;
	gap: 6px;
	background: var(--wp--preset--color--stroke-subtle);
	padding: 5px;
	border-radius: 11px;
	margin: 0 auto 40px;
	width: fit-content;
}

.wpa-price-toggle span {
	font-size: 14px;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 8px;
	color: #7a7f96;
	cursor: default;
}

.wpa-price-toggle span.is-active {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.wpa-price-note {
	text-align: center;
	margin: 26px 0 0;
	font-size: 14px;
	color: var(--wp--preset--color--ink-subtle);
}

@media (max-width: 781px) {
	.wpa-hero-mock { padding: 0; margin-top: 32px; }
	.wpa-hero-mock__tag { position: static; margin-top: 10px; box-shadow: none; border: 1px solid var(--wp--preset--color--stroke-card); }
	.wpa-hero-mock__body { grid-template-columns: 1fr; }
}

/* ============================================================
 * Inner pages (About / Contact / Changelog)
 * ============================================================ */

.wp-block-group.alignfull.wpa-page-hero {
	background: radial-gradient(120% 80% at 50% -10%, var(--wp--preset--color--primary-subtle) 0%, var(--wp--preset--color--surface) 60%);
	padding-top: 80px;
	padding-bottom: 56px;
	text-align: center;
}

.wpa-page-title {
	font-size: clamp(34px, 4.2vw, 50px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	max-width: 820px;
	margin: 0 auto 20px;
}

/* The page hero opens a shade wider than the section eyebrows elsewhere. */
.wpa-page-hero .wpa-eyebrow { margin-bottom: 14px; }

.wpa-page-lead {
	font-size: 19px;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-muted);
	max-width: 620px;
	margin: 0 auto;
}

.wp-block-group.alignfull.wpa-page-section { padding-top: 80px; padding-bottom: 80px; }

.wpa-page-heading {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.wpa-eyebrow-left { text-align: left; }

/* Stats band - larger figures than the homepage variant. */
.wpa-stat-value { font-size: 36px; font-weight: 800; line-height: 1.1; margin: 0; }
.wpa-stat-label { font-size: 14px; margin: 4px 0 0; }

/* Story - the About comp opens this headline slightly wider than the homepage
 * feature titles (1.2 against 1.15, 18px below against 16px), so it takes a
 * modifier rather than shifting the shared class. */
.wpa-story-title { line-height: 1.2; margin-bottom: 18px; }

/* Doubled class - see the note on Astra paragraph margins near the top. */
.wpa-story-copy.wpa-story-copy { font-size: 16px; line-height: 1.7; margin: 0 0 16px; }
.wpa-story-copy.wpa-story-copy:last-child { margin-bottom: 0; }
.wpa-shot-about { height: 380px; }

/* Values */
.wpa-tile-about { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px; }
.wpa-tile-about.wpa-ico-square::before  { width: 18px; height: 18px; border-radius: 5px;   border: 3px solid currentColor; }
.wpa-tile-about.wpa-ico-circle::before  { width: 18px; height: 18px; border-radius: 999px; border: 3px solid currentColor; }
.wpa-tile-about.wpa-ico-diamond::before { width: 18px; height: 18px; border-radius: 5px;   background: currentColor; transform: rotate(45deg); }

.wpa-value-title { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.wpa-value-copy  { font-size: 15px; line-height: 1.6; margin: 0; }

/* Team */
.wpa-team-intro { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.wpa-team-lead  { font-size: 17px; line-height: 1.75; max-width: 680px; margin: 18px auto 0; }
.wpa-team-grid  { max-width: 900px; margin-left: auto; margin-right: auto; gap: 20px; }

.wpa-card-team { border-radius: 16px; padding: 28px; }
/* Doubled class - see the note on Astra paragraph margins near the top. */
.wpa-team-title.wpa-team-title { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.wpa-team-copy  { font-size: 14px; line-height: 1.6; margin: 0; }

/* Contact CTA */
/* Scoped to beat `.wpa-cta-card h2`, which sets the homepage CTA's 14px. */
.wpa-cta-card .wpa-cta-title { font-size: 34px; font-weight: 700; margin: 0 0 12px; }
.wpa-cta-card .wpa-cta-title + p { font-size: 17px; max-width: 520px; margin: 0 auto 28px; }

@media (max-width: 781px) {
	.wp-block-group.alignfull.wpa-page-hero { padding-top: 56px; padding-bottom: 40px; }
	.wp-block-group.alignfull.wpa-page-section { padding-top: 56px; padding-bottom: 56px; }
	.wpa-page-heading { font-size: 28px; }
	.wpa-cta-title { font-size: 26px; }
	.wpa-shot-about { height: 240px; }
}

/* The inner-page contact CTA sits closer to the content above it and uses a
   slightly shorter card than the homepage variant. */
.wp-block-group.alignfull.wpa-section-cta { padding-top: 20px; padding-bottom: 88px; }
.wpa-cta-card.wpa-cta-page { padding: 64px 56px; }

@media (max-width: 781px) {
	.wp-block-group.alignfull.wpa-section-cta { padding-bottom: 56px; }
	.wpa-cta-card.wpa-cta-page { padding: 40px 24px; }
}

/* ============================================================
 * CONTACT
 * ============================================================ */

/* The hero runs a little tighter than About's: 72/40 against 80/56, and a
 * 48px headline against 50px. */
.wp-block-group.alignfull.wpa-contact-hero { padding-top: 72px; padding-bottom: 40px; }

.wpa-contact-title { font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; max-width: 680px; }
.wpa-contact-lead  { font-size: 18px; line-height: 1.6; max-width: 680px; }

.wp-block-group.alignfull.wpa-contact-section { padding-top: 40px; padding-bottom: 80px; }

/* 1fr : 1.4fr, expressed as the percentages the columns block writes. Top
 * aligned - the cards are shorter than the form and should not float. */
.wp-block-columns.wpa-contact-grid {
	gap: 48px;
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}

@media (min-width: 782px) {
	/* Desktop only - see the note on the newsletter columns above. */
	.wp-block-columns.wpa-contact-grid { align-items: flex-start !important; }
}

.wpa-info-col { display: flex; flex-direction: column; gap: 16px; }

.wpa-info-card {
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 16px;
	padding: 26px;
}

/*
 * The tile is a fixed square inside a constrained-layout group, and core sets
 * `margin-left/right: auto !important` on those children - which centred it
 * against a comp that has it hard left. Matching !important is the only way
 * to win against an !important shorthand.
 */
.wpa-tile-contact {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px 0 !important;
}

.wpa-tile-contact svg { width: 20px; height: 20px; display: block; }

.wpa-tile-primary { background: var(--wp--preset--color--primary-subtle); color: var(--wp--preset--color--primary); }
.wpa-tile-success { background: var(--wp--preset--color--success-subtle); color: var(--wp--preset--color--success); }
.wpa-tile-accent  { background: var(--wp--preset--color--accent-subtle);  color: var(--wp--preset--color--accent); }

/* Doubled class - see the note on Astra paragraph margins near the top. */
.wpa-info-title.wpa-info-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.wpa-info-copy.wpa-info-copy   { font-size: 14px; line-height: 1.6; margin: 0 0 6px; }
.wpa-info-link.wpa-info-link   { font-size: 14px; font-weight: 600; margin: 0; }
.wpa-info-link a { color: var(--wp--preset--color--primary); text-decoration: none; }

/* Response time has no link, so its copy is the last thing in the card. */
.wpa-info-copy:last-child { margin-bottom: 0; }

.wpa-form-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 10px 30px rgba(20, 22, 40, .06);
}

.wpa-form-title { font-size: 22px; font-weight: 700; margin: 0 0 24px; }

/* ------------------------------------------------- SureForms, restyled
 *
 * The form is a real SureForms form so submission, validation, spam handling
 * and notifications stay with the plugin. Only its appearance is brought to
 * the comp - and through SureForms' own custom properties rather than by
 * out-specifying its stylesheet. Its rules are several classes deep and read
 * these variables, so setting them is both shorter and far less likely to
 * break when the plugin updates.
 */
.wpa-form-card .srfm-form-container {
	/* Fields: 50px tall, 11px radius, white on a #d9dbe6 hairline. */
	--srfm-input-height: 50px;
	--srfm-input-field-border-radius: 11px;
	--srfm-input-field-font-size: 15px;
	--srfm-input-field-padding: 0 16px;
	--srfm-input-field-margin-top: 8px;
	--srfm-color-input-background: var(--wp--preset--color--surface);
	--srfm-color-input-border: #d9dbe6;
	--srfm-color-input-border-focus-glow: rgba(79, 70, 229, .12);

	/* Labels: 14px semibold, a shade lighter than body ink. */
	--srfm-label-font-size: 14px;
	--srfm-label-font-weight: 600;
	--srfm-color-input-label: var(--wp--preset--color--ink-secondary);

	/* Submit: full-width indigo, 12px radius. */
	--srfm-btn-border-radius: 12px;
	--srfm-btn-padding: 15px;
	--srfm-btn-font-size: 16px;
	--srfm-btn-font-weight: 600;

	padding: 0;
}

/* Not expressible as a variable: the comp runs the button the full width. */
.wpa-form-card .srfm-button.srfm-submit-richtext,
.wpa-form-card .srfm-submit-container,
.wpa-form-card .srfm-button { width: 100%; }

.wpa-form-card textarea { min-height: 150px; }

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

.wp-block-group.alignfull.wpa-strip-section { padding-top: 0; padding-bottom: 80px; }

.wpa-strip {
	max-width: 1040px;
	margin: 0 auto;
	border-radius: 20px;
	padding: 44px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.wpa-strip-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.wpa-strip-copy.wpa-strip-copy { font-size: 15px; margin: 0; }

.wpa-strip-actions { gap: 12px; margin-bottom: 0; }

.wpa-strip-actions .wp-block-button__link {
	font-size: 15px;
	font-weight: 600;
	padding: 13px 24px;
	border-radius: 11px;
}

/* The secondary button is a translucent panel on the dark card rather than a
 * plain outline, which would disappear against it. */
.wpa-strip-actions .wpa-btn-ghost .wp-block-button__link {
	background-color: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	color: var(--wp--preset--color--surface);
}

.wpa-strip-actions .wpa-btn-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, .18); }

@media (max-width: 921px) {
	.wpa-strip { padding: 32px 28px; }
	.wpa-form-card { padding: 28px 24px; }
}

/* ============================================================
 * CHANGELOG
 * ============================================================ */

.wp-block-group.alignfull.wpa-changelog-hero { padding-top: 72px; padding-bottom: 44px; }

.wpa-changelog-title { font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; max-width: 700px; }
.wpa-changelog-lead.wpa-changelog-lead { font-size: 18px; line-height: 1.6; max-width: 700px; margin-bottom: 28px; }

/* Filter pills. Built from the releases actually on the page, so the row only
 * appears once there is more than one plugin to filter by - four pills where
 * three match nothing would read as broken. */
.wpa-release-filters {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.wpa-release-filters button {
	background: var(--wpa-pill-bg, #f4f5f9);
	color: var(--wpa-pill-ink, #4b4f63);
	border: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
}

.wpa-release-filters button:hover { background: var(--wp--preset--color--primary-subtle); color: var(--wp--preset--color--primary); }

.wpa-release-filters button[aria-pressed="true"],
.wpa-release-filters button[aria-pressed="true"]:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* ---------------------------------------------------------- Timeline */

.wp-block-group.alignfull.wpa-timeline-section { padding-top: 32px; padding-bottom: 80px; }

.wpa-timeline {
	max-width: 860px;
	margin: 0 auto;
	position: relative;
	padding-left: 36px;
	border-left: 2px solid var(--wp--preset--color--stroke-subtle);
}

.wpa-release {
	position: relative;
	margin-bottom: 44px;
}

/*
 * The dot sits on the rail, which is the timeline's left border - so it is
 * offset by its own width plus the 36px padding rather than positioned inside
 * the entry. The white ring hides the rail behind it and the outer ring tints
 * to match the plugin.
 */
.wpa-release::before {
	content: "";
	position: absolute;
	left: -45px;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	border: 3px solid var(--wp--preset--color--surface);
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary-subtle);
}

.wpa-release.wpa-tone-success::before { background: var(--wp--preset--color--success); box-shadow: 0 0 0 2px var(--wp--preset--color--success-subtle); }
.wpa-release.wpa-tone-accent::before  { background: var(--wp--preset--color--accent);  box-shadow: 0 0 0 2px var(--wp--preset--color--accent-subtle); }

.wpa-release-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.wpa-release-meta > * { margin: 0 !important; }

.wpa-release-version.wpa-release-version {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.wpa-release-date.wpa-release-date { font-size: 14px; color: var(--wp--preset--color--ink-subtle); }

/* Tags: release kind and plugin name share one treatment. */
.wpa-tag.wpa-tag {
	display: inline-flex;
	align-items: center;
	width: auto;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	flex-shrink: 0;
	margin: 0;
}

.wpa-tone-primary.wpa-tag { color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary-subtle); }
.wpa-tone-success.wpa-tag { color: var(--wp--preset--color--success); background: var(--wp--preset--color--success-subtle); }
.wpa-tone-accent.wpa-tag  { color: var(--wp--preset--color--accent-strong); background: var(--wp--preset--color--accent-subtle); }

.wpa-release-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 16px;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * Constrained-layout groups give every child `margin-left/right: auto
 * !important`. Each of these rows is only as wide as its own content, so that
 * centred them down the card instead of stacking them against the left edge.
 * Matching !important is the only way to pin them.
 */
.wpa-release > *,
.wpa-release-card > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	/*
	 * The block gap also adds `margin-block-start: 24px` to every child after
	 * the first, which stacked on top of the card's own 12px gap and set the
	 * entries 36px apart where the comp has 12.
	 */
	margin-top: 0 !important;
}

.wpa-release-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	/* One definition for the badge column, read by the badge and by the spacer
	 * that stands in for it when an entry has no badge. */
	--wpa-badge-col: 88px;
}

.wpa-release-item p { margin: 0 !important; }

/*
 * The 02-09 comp revision fixes the badge column at 84px.
 *
 * Sized to content, "New" and "Update" are different widths, so every entry's
 * text started at a different place down the card. A fixed column puts all of
 * them on one left edge, and the badge centres inside it.
 *
 * Scoped to the entry rows: the plugin tag in the meta row above shares the
 * `.wpa-tag` treatment but has to stay as wide as its own name. The doubled
 * class outranks `.wpa-tag.wpa-tag`, and the margin needs `!important` to get
 * past the `margin: 0 !important` that pins these paragraphs.
 */
.wpa-release-item .wpa-tag.wpa-tag {
	display: block;
	/*
	 * The comp says 84px, sized for its three sample labels. The real changelog
	 * uses nine, and "Performance" measures 85.9px - at 84 it wrapped to two
	 * lines and made that one badge 35px tall. 88px is the narrowest column that
	 * keeps every label the site actually uses on a single line; the other eight
	 * are unchanged, since they were never near the limit.
	 */
	width: var(--wpa-badge-col);
	padding: 4px 0;
	text-align: center;
	line-height: normal;
	white-space: nowrap;
	margin-top: 2px !important;
}

/*
 * Not every readme line opens with a prefix - 34 of the 330 entries do not - so
 * some entries have no badge to draw. They still occupy the badge column, or
 * their text would start at the card edge while everything above and below it
 * starts after the badge, which is the alignment the fixed column exists for.
 */
.wpa-release-item__nobadge {
	flex: 0 0 var(--wpa-badge-col);
	align-self: stretch;
}

.wpa-release-text.wpa-release-text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-secondary);
	/*
	 * A flex item will not shrink below its min-content width unless told to,
	 * and at 390px one real entry's min-content held the column open to 328px
	 * against the 176px available, pushing the page 109px wide. The hand-written
	 * entries never hit it; the readmes do.
	 */
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Older releases stay in the markup and are revealed by the button, so the
 * page needs no second request and every entry remains findable in-page. */
.wpa-release[hidden] { display: none; }

.wpa-release-more { position: relative; }

.wpa-release-more::before {
	content: "";
	position: absolute;
	left: -43px;
	top: 2px;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: #d9dbe6;
}

.wpa-release-more button {
	background: var(--wp--preset--color--surface);
	border: 1px solid #d9dbe6;
	color: var(--wpa-pill-ink, #4b4f63);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 24px;
	border-radius: 11px;
	cursor: pointer;
}

.wpa-release-more button:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }

/* --------------------------------------------------------- Subscribe */

.wp-block-group.alignfull.wpa-subscribe-section { padding-top: 0; padding-bottom: 80px; }

.wpa-subscribe {
	max-width: 860px;
	margin: 0 auto;
	border-radius: 20px;
	padding: 44px 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.wpa-subscribe-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.wpa-subscribe-copy.wpa-subscribe-copy { font-size: 15px; margin: 0; }

.wpa-subscribe-form { display: block; }

.wpa-subscribe-form .wpa-nl__row { display: flex; gap: 10px; }

.wpa-subscribe-form input {
	height: 48px;
	width: 220px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	border-radius: 11px;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--surface);
	outline: none;
}

.wpa-subscribe-form input::placeholder { color: var(--wp--preset--color--ink-faint); }

.wpa-subscribe-form button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	border: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 0 24px;
	border-radius: 11px;
	cursor: pointer;
}

.wpa-subscribe-form button:hover { background: var(--wp--preset--color--primary-hover); }

@media (max-width: 921px) {
	.wpa-subscribe { padding: 32px 28px; }
	.wpa-subscribe-form { width: 100%; }
	/* min-width: 0 is the point of this rule. A flex item defaults to
	 * min-width: auto, so the field refused to shrink below its intrinsic
	 * width and pushed the button past the viewport on a 360px screen. */
	.wpa-subscribe-form input { flex: 1; width: auto; min-width: 0; }
	.wpa-timeline { padding-left: 24px; }
	.wpa-release::before { left: -33px; }
	.wpa-release-more::before { left: -31px; }
	.wpa-release-card { padding: 20px 18px; }
}

/*
 * Standalone link paragraphs - "Learn more", "View all plugins", the contact
 * card links. `:only-child` is the point: it picks out a paragraph that is
 * nothing but a link, and leaves links inside a sentence alone, where WCAG
 * 2.5.8 exempts them and padding would disturb the line box.
 */
.entry-content p > a:only-child,
.entry-content li > a:only-child,
.wpa-prose p > a:only-child,
.wpa-prose li > a:only-child {
	display: inline-block;
	padding-block: 4px;
	margin-block: -4px;
}

/* ============================================================
 * DOCUMENT PAGES
 *
 * Privacy, terms, disclaimer, cookie policy and documentation. Their content
 * is legacy Spectra markup that is deliberately left alone - the spec records
 * what happened the last time nested Spectra containers were unwrapped - so
 * everything here is presentation applied from the outside, via the "Document
 * page" template.
 *
 * Two things were wrong before: body text ran the full 1140px of the
 * container, roughly twice a comfortable measure for a document, and headings
 * were still the previous design's 16px DM Sans.
 * ============================================================ */

/*
 * The hero band is the first container inside the content root. Every selector
 * below states that full path on purpose: the root container wraps the whole
 * document, so `root h2` is every heading on the page - an earlier version of
 * this rule did exactly that and turned the entire policy white.
 */
/*
 * Two shapes exist. On the policy pages one root container wraps the whole
 * document and the hero is its first child; on the documentation page the
 * hero is itself a root container, followed by more. `:only-child` tells them
 * apart, so neither selector can reach the other page's body.
 */
.wpa-doc .entry-content > .wp-block-uagb-container:only-child > .wp-block-uagb-container:first-child,
.wpa-doc .entry-content > .wp-block-uagb-container:first-child:not(:only-child) {
	background-color: var(--wp--preset--color--ink) !important;
	background-image: radial-gradient(120% 80% at 50% -10%, rgba(79, 70, 229, .55) 0%, rgba(20, 22, 43, 0) 60%) !important;
	min-height: 260px;
}

.wpa-doc .entry-content > .wp-block-uagb-container:only-child > .wp-block-uagb-container:first-child :is(h1, h2, h3),
.wpa-doc .entry-content > .wp-block-uagb-container:first-child:not(:only-child) :is(h1, h2, h3) {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--surface);
	margin: 0;
}

/*
 * Every one of these pages repeats its own title in a second band immediately
 * below the first - a cover block left over from the previous design. One
 * hero is the design; two is a mistake the reader sees. The block is left in
 * the content rather than deleted, because the content is not ours to edit.
 */
.wpa-doc .entry-content .wp-block-cover { display: none; }

/* ---------------------------------------------------- Reading column
 *
 * The measure, not the container, is what makes a document readable. The
 * outer bands stay full width; only the text is constrained.
 */
.wpa-doc .entry-content > .wp-block-uagb-container > .wp-block-uagb-container:not(:first-child),
.wpa-doc .entry-content > .wp-block-uagb-container > .uagb-container-inner-blocks-wrap > *:not(.wp-block-uagb-container) {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.wpa-doc .entry-content p,
.wpa-doc .entry-content li {
	font-size: 17px;
	line-height: 1.75;
	color: var(--wp--preset--color--ink-secondary);
}

.wpa-doc .entry-content h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 27px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.01em;
	margin: 44px 0 16px;
	/*
	 * !important is needed, not preferred. The content's headings carry
	 * preset classes like `has-medium-font-size`, and WordPress prints those
	 * with !important - so a document heading rendered at 16px, the same size
	 * as its body text. The content is not ours to edit, so the design has to
	 * outrank the preset here.
	 */
	font-size: 27px !important;
}

.wpa-doc .entry-content h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
	margin: 32px 0 12px;
	font-size: 20px !important;   /* see the note on h2 above */
}

.wpa-doc .entry-content h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 24px 0 10px;
}

.wpa-doc .entry-content a { color: var(--wp--preset--color--primary); font-weight: 600; }

/*
 * The previous design indented lists with a left margin - the same rule that
 * had to be undone for the blog posts. Combined with a full-width child that
 * pushed the list 50px past a 390px screen. The bullets get their room from
 * padding instead, which stays inside the measure.
 */
.wpa-doc .entry-content ul,
.wpa-doc .entry-content ol {
	margin: 0 0 22px !important;
	padding-left: 22px;
}

/* Headings picked up a horizontal offset from the same era. */
.wpa-doc .entry-content :is(h2, h3, h4) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.wpa-doc .entry-content li { margin-bottom: 8px; }

/* Tables: the privacy policy carries five. Horizontal rules only, matching
 * the article treatment. */
.wpa-doc .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 26px;
	font-size: 15px;
}

.wpa-doc .entry-content th {
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6f85;
	padding: 12px 16px;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--stroke-card);
}

.wpa-doc .entry-content td {
	padding: 13px 16px;
	border: 0;
	border-bottom: 1px solid #f0f1f6;
	color: var(--wp--preset--color--ink-secondary);
}

.wpa-doc .entry-content hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--stroke-card);
	margin: 36px auto;
	max-width: 820px;
	width: 100%;
	opacity: 1;
}

@media (max-width: 781px) {
	.wpa-doc .entry-content > .wp-block-uagb-container:only-child > .wp-block-uagb-container:first-child,
	.wpa-doc .entry-content > .wp-block-uagb-container:first-child:not(:only-child) { min-height: 180px; }

	/*
	 * The same fault the blog posts had: nested Spectra containers keep a
	 * horizontal margin from the previous design while their children are
	 * still laid out at full width, so the text spilled up to 75px past a
	 * 390px screen. The indent is decorative and is dropped once the column
	 * is narrow enough for it to cost real width.
	 */
	.wpa-doc .entry-content .wp-block-uagb-container .wp-block-uagb-container {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.wpa-doc .entry-content p,
	.wpa-doc .entry-content li { font-size: 16px; }

	.wpa-doc .entry-content h2 { font-size: 23px !important; margin-top: 32px; }
}

/* ============================================================
 * LEGAL PAGES
 *
 * Privacy, terms, disclaimer and cookie policy, rebuilt from the comp with
 * core blocks. The text is the site's own, carried across word for word; only
 * the legacy Spectra wrappers were dropped.
 *
 * Selectors double the class where they set a property Astra's customizer CSS
 * also sets - `p, .entry-content p { margin-bottom: 0 }` scores (0,1,1) and
 * would otherwise win.
 * ============================================================ */

.wp-block-group.alignfull.wpa-legal-hero {
	padding-top: 64px;
	padding-bottom: 40px;
	background: radial-gradient(120% 80% at 50% -10%, var(--wp--preset--color--primary-subtle) 0%, var(--wp--preset--color--surface) 60%) !important;
}

/*
 * The comp aligns the legal hero left, unlike the centred marketing heroes.
 *
 * The 40px padding is part of the measurement, not decoration: the comp's
 * wrap is a 900px box with 40px of padding, so its text occupies 820. Setting
 * max-width alone made the column 80px wider than designed and the gutter
 * correspondingly narrower.
 */
.wpa-legal-hero > * {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
	text-align: left;
}

.wpa-legal-title {
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	/* `auto` on the sides, not 0: the hero's children are centred in a 900px
	 * wrap, and zeroing the horizontal margins threw the title out to the
	 * page edge while the eyebrow and date stayed put. */
	margin: 0 auto 12px !important;
}

.wpa-legal-updated.wpa-legal-updated { font-size: 16px; margin: 0; }

.wp-block-group.alignfull.wpa-legal-body { padding-top: 48px; padding-bottom: 80px; }

/*
 * 900px box with 40px padding = an 820px measure. The 17-08 comps widened
 * this from 800 so the article lines up with the hero above it, rather than
 * sitting 50px inside it.
 */
.wpa-legal {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
}

.wpa-legal h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px !important;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 40px 0 14px;
	scroll-margin-top: 90px;
}

.wpa-legal h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px !important;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 26px 0 10px;
	scroll-margin-top: 90px;
}

.wpa-legal.wpa-legal p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0 0 18px;
}

/* Bulleted lists: a 6px indigo dot rather than the browser's marker. */
.wpa-legal ul.wp-block-list {
	margin: 0 0 18px !important;
	padding-left: 0;
	list-style: none;
}

.wpa-legal ul.wp-block-list > li {
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-secondary);
	padding-left: 26px;
	position: relative;
	margin-bottom: 9px;
}

.wpa-legal ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
}

/* Ordered lists: numbers in tinted squares. */
.wpa-legal ol.wp-block-list {
	counter-reset: wpa-legal-step;
	margin: 0 0 18px !important;
	padding: 0;
	list-style: none;
}

.wpa-legal ol.wp-block-list > li {
	counter-increment: wpa-legal-step;
	position: relative;
	padding-left: 34px;
	margin-bottom: 9px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-secondary);
}

.wpa-legal ol.wp-block-list > li::before {
	content: counter(wpa-legal-step);
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wpa-legal a { color: var(--wp--preset--color--primary); font-weight: 600; }

.wpa-legal code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	background: var(--wp--preset--color--surface-sunken);
	color: var(--wp--preset--color--primary-hover);
	padding: 2px 7px;
	border-radius: 6px;
}

/* The comp draws no box around the table - the header underline and the row
 * rules carry it - but the block editor's own table styles add an outer border,
 * so it is turned off here. */
.wpa-legal .wp-block-table { margin: 0 0 22px; }

.wpa-legal .wp-block-table table,
.wpa-legal table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin: 0 0 22px;
	font-size: 15px;
}

/* Four columns of cookie names do not fit a phone. The table scrolls inside its
 * own figure rather than stretching the page, and keeps a width at which the
 * columns are still readable. */
@media (max-width: 781px) {
	.wpa-legal .wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wpa-legal .wp-block-table table { min-width: 560px; }
}

.wpa-legal th {
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6f85;
	padding: 12px 16px;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--stroke-card);
}

.wpa-legal td {
	padding: 13px 16px;
	border: 0;
	border-bottom: 1px solid #f0f1f6;
	color: var(--wp--preset--color--ink-secondary);
}

.wpa-legal blockquote {
	margin: 0 0 22px;
	padding: 4px 0 4px 22px;
	border-left: 4px solid #d9dbe6;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	font-style: italic;
}

@media (max-width: 781px) {
	.wp-block-group.alignfull.wpa-legal-hero { padding-top: 48px; padding-bottom: 32px; }
	.wp-block-group.alignfull.wpa-legal-body { padding-top: 32px; padding-bottom: 56px; }
	.wpa-legal h2 { font-size: 21px !important; margin-top: 32px; }

	/* 40px of gutter is most of a phone screen. */
	.wpa-legal-hero > *,
	.wpa-legal { padding-left: 24px; padding-right: 24px; }
}

/* A filter with no matching releases says so rather than showing a blank rail. */
.wpa-release-empty {
	font-size: 15px;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
	padding: 8px 0 24px;
}

/* ============================================================
 * DOCUMENTATION HUB
 * Values from WPActPro Docs.dc.html.
 * ============================================================ */

.wpa-docs-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.wpa-docs-hero {
	background: radial-gradient(120% 80% at 50% -10%, var(--wp--preset--color--primary-subtle) 0%, var(--wp--preset--color--surface) 60%);
	padding: 72px 0 52px;
	text-align: center;
}

.wpa-docs-hero__inner { max-width: 720px; margin: 0 auto; padding: 0 40px; }

.wpa-docs-hero h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 16px;
}

.wpa-docs-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 30px;
}

/* Search */
.wpa-docs-search { position: relative; max-width: 560px; margin: 0 auto; }

.wpa-docs-search__icon {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--ink-subtle);
	font-size: 17px;
}

.wpa-docs-search input[type="search"] {
	width: 100%;
	height: 56px;
	padding: 0 20px 0 48px;
	border: 1px solid #d9dbe6;
	border-radius: 14px;
	font-family: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	outline: none;
	box-shadow: 0 10px 30px rgba(20, 22, 40, .06);
}

.wpa-docs-search input[type="search"]:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

.wpa-docs-popular { margin: 16px 0 0; font-size: 14px; color: var(--wp--preset--color--ink-subtle); }
.wpa-docs-popular a { color: var(--wp--preset--color--primary); font-weight: 600; }

/* Plugin category cards */
.wpa-docs-cats { padding: 8px 0 24px; }

.wpa-docs-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.wpa-doc-cat {
	display: block;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 18px;
	padding: 28px;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.wpa-doc-cat:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(20, 22, 40, .1); }

.wpa-doc-cat__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.wpa-doc-cat__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpa-doc-cat__count { font-size: 12px; font-weight: 700; color: var(--wp--preset--color--ink-subtle); }

.wpa-doc-cat__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 6px;
}

.wpa-doc-cat__text { display: block; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--ink-muted); }

/* Shared icon shapes, drawn rather than typed - the same approach the rest of
 * the site uses, so a missing glyph font cannot change the design. */
.wpa-doc-cat__icon::before,
.wpa-doc-group__icon::before,
.wpa-doc-card__icon::before { content: ""; display: block; box-sizing: border-box; }

/* Tinted icon tiles on the documentation hub.
 *
 * These were written as bare `.wpa-tone-*` selectors, which also matched the
 * changelog's release groups - `.wpa-release.wpa-tone-primary` - and painted all
 * nine of them a lavender panel the comp does not have. The tone class there
 * exists to colour the timeline dot, nothing else. Scoped to the tiles they were
 * drawn for. */
:is(.wpa-doc-cat__icon, .wpa-doc-group__icon, .wpa-doc-card__icon).wpa-tone-primary { background: var(--wp--preset--color--primary-subtle); color: var(--wp--preset--color--primary); }
:is(.wpa-doc-cat__icon, .wpa-doc-group__icon, .wpa-doc-card__icon).wpa-tone-success { background: var(--wp--preset--color--success-subtle); color: var(--wp--preset--color--success); }
:is(.wpa-doc-cat__icon, .wpa-doc-group__icon, .wpa-doc-card__icon).wpa-tone-accent  { background: var(--wp--preset--color--accent-subtle);  color: var(--wpa-warning-ink, #c96f1e); }

.wpa-doc-cat__icon.wpa-ico-square::before  { width: 20px; height: 20px; border-radius: 5px;   border: 3px solid currentColor; }
.wpa-doc-cat__icon.wpa-ico-circle::before  { width: 20px; height: 20px; border-radius: 999px; border: 3px solid currentColor; }
.wpa-doc-cat__icon.wpa-ico-diamond::before { width: 17px; height: 17px; border-radius: 4px;   background: currentColor; transform: rotate(45deg); }

/* Filter tabs */
.wpa-docs-tabs { padding: 14px 0 0; }

.wpa-doc-filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.wpa-doc-filters button {
	background: var(--wpa-pill-bg, #f4f5f9);
	color: var(--wpa-pill-ink, #4b4f63);
	border: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
}

.wpa-doc-filters button:hover { background: var(--wp--preset--color--primary-subtle); color: var(--wp--preset--color--primary); }

.wpa-doc-filters button[aria-pressed="true"],
.wpa-doc-filters button[aria-pressed="true"]:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* Articles for the selected plugin */
.wpa-docs-main { padding: 40px 0 80px; }

/* The articles themselves, printed into the page under their plugin.
 *
 * Full width rather than the blog's reading measure: these docs are built as
 * page layouts - rows of three feature cards, side-by-side panels - and at a
 * 760px measure each card is squeezed to about 210px and the text breaks a word
 * per line. Plain paragraphs are held to a comfortable measure below instead, so
 * the layouts get their room without the prose running the full width. */
.wpa-doc-article { margin: 0 0 64px; }
.wpa-doc-article:last-child { margin-bottom: 0; }

.wpa-doc-article__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 20px;
}

.wpa-doc-article__body > p,
.wpa-doc-article__body > ul,
.wpa-doc-article__body > ol,
.wpa-doc-article__body > h2,
.wpa-doc-article__body > h3,
.wpa-doc-article__body > h4,
.wpa-doc-article__body > blockquote { max-width: 760px; }

.wpa-doc-group { margin-bottom: 44px; }
.wpa-doc-group:last-of-type { margin-bottom: 0; }
.wpa-doc-group[hidden] { display: none; }

.wpa-doc-group__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }

.wpa-doc-group__icon {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpa-doc-group__icon.wpa-ico-square::before  { width: 14px; height: 14px; border-radius: 4px;   border: 3px solid currentColor; }
.wpa-doc-group__icon.wpa-ico-circle::before  { width: 14px; height: 14px; border-radius: 999px; border: 3px solid currentColor; }
.wpa-doc-group__icon.wpa-ico-diamond::before { width: 13px; height: 13px; border-radius: 3px;   background: currentColor; transform: rotate(45deg); }

.wpa-doc-group__head h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.wpa-doc-group__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.wpa-doc-card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 14px;
	padding: 20px 22px;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wpa-doc-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px rgba(20, 22, 40, .1);
	border-color: #dfe0ef;
}

.wpa-doc-card__icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpa-doc-card__icon::before { width: 12px; height: 12px; border-radius: 3px; border: 3px solid currentColor; }

.wpa-doc-card__text { display: block; }

.wpa-doc-card__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 3px;
}

.wpa-doc-card__excerpt { display: block; font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--ink-subtle); }

/* Now that one plugin is shown at a time, an empty section is a normal state
 * rather than an edge case, so it gets the same card treatment as the articles
 * it stands in for instead of reading as a broken page. */
.wpa-doc-empty,
.wpa-doc-empty-library {
	font-size: 15px;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
	border: 1px dashed var(--wp--preset--color--stroke-card);
	border-radius: 16px;
	padding: 40px 24px;
	text-align: center;
}

/* Support band */
.wpa-docs-support { padding: 0 0 80px; }

.wpa-docs-support__card {
	background: var(--wp--preset--color--ink);
	border-radius: 22px;
	padding: 52px 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.wpa-docs-support__card h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 700;
	color: var(--wp--preset--color--surface);
	margin: 0 0 8px;
}

.wpa-docs-support__card p { font-size: 15px; color: var(--wp--preset--color--ink-faint); margin: 0; }

.wpa-docs-support__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.wpa-docs-support__primary,
.wpa-docs-support__ghost {
	font-size: 15px;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: 11px;
	text-decoration: none;
	color: var(--wp--preset--color--surface);
}

.wpa-docs-support__primary { background: var(--wp--preset--color--primary); }
.wpa-docs-support__primary:hover { background: var(--wp--preset--color--primary-hover); color: var(--wp--preset--color--surface); }
.wpa-docs-support__ghost { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.wpa-docs-support__ghost:hover { background: rgba(255, 255, 255, .18); color: var(--wp--preset--color--surface); }

@media (max-width: 1024px) {
	.wpa-docs-cats__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 921px) {
	.wpa-docs-wrap { padding: 0 24px; }
	.wpa-docs-hero__inner { padding: 0 24px; }
}

@media (max-width: 781px) {
	.wpa-docs-hero { padding: 48px 0 36px; }
	.wpa-docs-cats__grid { grid-template-columns: 1fr; }
	.wpa-doc-group__grid { grid-template-columns: 1fr; }
	.wpa-docs-support__card { padding: 32px 28px; }
	.wpa-docs-main { padding: 28px 0 56px; }
}

.wpa-doc-results { font-size: 15px; color: var(--wp--preset--color--ink-muted); margin: 0 0 28px; }
.wpa-doc-results a { margin-left: 10px; color: var(--wp--preset--color--primary); }

/* Doc content, brought onto the current card language.
 *
 * The articles were built with the old UI: a 20px title over 17px/1.75 body in a
 * 32px box, and a filled indigo button on every card. Beside the rest of the site
 * that reads as another product. The markup belongs to Spectra and is not worth
 * rewriting by hand for seventeen cards, so the styling is brought into line here.
 *
 * Spectra prints its own per-post rules with a block-id class, so these need the
 * extra weight of !important to land - checked by measuring, not assumed. */

/* The article was laid out as a standalone page and carries 112px of padding top
 * and bottom. On the hub the page already provides that room, so 224px of it is
 * dead space between the last card and what follows. */
.wpa-doc-article__body > .wp-block-uagb-container.uagb-is-root-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Card, icon tile and type all taken from the 2026-08-22 field icons comp:
 * 18px radius on a 28px box, a 52px tile at 14px radius, 19px title, 14.5px body. */
.wpa-doc-article__body .uagb-layout-grid .wp-block-uagb-container:has(> .wp-block-uagb-info-box) {
	border-radius: 18px !important;
	border-color: var(--wp--preset--color--stroke-card) !important;
	padding: 28px !important;
}

/* Icon and title share a row, with the description below - the comp's layout. */
.wpa-doc-article__body .wpa-doc-fieldrow {
	display: flex;
	align-items: center;
	gap: 16px;
}

.wpa-doc-fieldicon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--wp--preset--color--primary-subtle);
	color: var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wpa-doc-fieldicon svg { width: 26px; height: 26px; display: block; }

.wpa-doc-article__body .uagb-ifb-title {
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink) !important;
	margin-bottom: 0 !important;
}

.wpa-doc-article__body .uagb-ifb-desc {
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--ink-muted) !important;
	margin: 14px 0 0 !important;
}

/* Only the per-card "Read More" becomes a quiet link. The buttons that close the
 * article - Email Us, Contact Us - are real calls to action and keep their
 * button treatment. */
.wpa-doc-article__body .uagb-layout-grid .wp-block-uagb-buttons a.uagb-buttons-repeater.wp-block-button__link {
	background: none !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--wp--preset--color--primary) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	min-height: 0 !important;
}

/* Hover darkens the label. It used to underline instead, which is the only place
 * on the site a link does that - every other quiet link here changes colour. */
.wpa-doc-article__body .uagb-layout-grid .wp-block-uagb-buttons a.uagb-buttons-repeater.wp-block-button__link:hover {
	background: none !important;
	color: var(--wp--preset--color--primary-hover) !important;
}

.wpa-doc-article__body .uagb-layout-grid .wp-block-uagb-buttons { margin-top: 12px; }

/* "Read More" sits on one line across each row of cards.
 *
 * The descriptions run to three, four or five lines, so the link followed the
 * text and landed up to 23px higher in the shorter cards. The cards are already
 * stretched to equal height by the grid, so making each a column and pushing the
 * button block down aligns them - the same fix the suite cards needed, and the
 * `margin-top: 12px` above still holds the minimum gap. */
.wpa-doc-article__body .uagb-layout-grid .wp-block-uagb-container:has(> .wp-block-uagb-info-box) > .uagb-container-inner-blocks-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wpa-doc-article__body .uagb-layout-grid .wp-block-uagb-container .wp-block-uagb-buttons {
	margin-top: auto;
}

/* The pricing switch is a control now, not two highlighted words. */
.wpa-price-toggle button {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 18px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #7a7f96;
	cursor: pointer;
}

.wpa-price-toggle button.is-active {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.wpa-price-toggle button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* One card per plugin, each choosing its own number of sites. */
.wpa-price-single {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}

.wpa-price-plugin {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 20px;
	padding: 36px;
}

/* Doubled classes: Astra sets `p { margin-bottom: 0 }` at (0,1,1), which beats a
 * single class, so these margins would silently collapse. */
.wpa-price-plugin__name.wpa-price-plugin__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 6px;
}

.wpa-price-plugin__text.wpa-price-plugin__text {
	font-size: 14px;
	color: #8a8fa3;
	margin: 0 0 22px;
}

.wpa-price-sites {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--wp--preset--color--ink-muted);
}

.wpa-price-sites__select {
	flex: 1;
	font-family: inherit;
	font-size: 14px;
	padding: 9px 12px;
	border: 1px solid var(--wp--preset--color--stroke-card);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* The comp's light cards carry a ghost button - white, indigo label, hairline
 * border - and only the featured dark tier is filled. These are all light cards,
 * so they all take the ghost treatment. */
.wpa-price-btn {
	display: block;
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	padding: 13px;
	border: 1px solid #d9d9ec;
	border-radius: 11px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	margin-bottom: 26px;
}

.wpa-price-btn:hover,
.wpa-price-btn:focus-visible {
	color: #4338ca;
	border-color: var(--wp--preset--color--primary);
}

.wpa-price-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.wpa-price-plugin__free { font-size: 13px; color: var(--wp--preset--color--ink-subtle); margin: 14px 0 0; text-align: center; }

@media (max-width: 921px) {
	.wpa-price-single { grid-template-columns: 1fr; }
	.wpa-price-plugin { padding: 28px; }
}

/* Feature lines on a single-plugin card, matching the suite cards. */
.wpa-price-plugin__feature.wpa-price-plugin__feature {
	font-size: 14px;
	line-height: 1.5;
	color: #3c4056;
	margin: 0 0 11px;
}

.wpa-price-plugin__feature span { color: var(--wp--preset--color--primary); font-weight: 700; }
.wpa-price-plugin__free.wpa-price-plugin__free { margin: 22px 0 0; }

/* Pricing cards, brought back to the comp.
 *
 * The section was built before the pricing comp was final and drifted from it in
 * four ways that read as a different design: the buttons were the block editor's
 * filled default rather than the comp's full-width ghost button, the "most
 * popular" ribbon sat inline and pushed the card's content down instead of
 * straddling its top edge, the feature lines were spaced more than twice as far
 * apart, and the card padding and radius were a few pixels short.
 *
 * Values below are the comp's own: 36px padding on a 20px radius, a 13px/11px
 * button, an 11px gap between features, and the ribbon 13px above the card. */
#wpa-panel-suite .wpa-card {
	padding: 36px;
	border-radius: 20px;
	position: relative;
}

/* The dark tier keeps the comp's lift. */
#wpa-panel-suite .wpa-card-flat {
	box-shadow: 0 24px 50px rgba(20, 22, 40, .25);
}

/* Ribbon: centred on the card's top edge rather than in the flow. */
#wpa-panel-suite .wpa-card-flat > p:first-child {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	z-index: 1;
}

#wpa-panel-suite .wpa-ribbon {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Buttons: full width, and a ghost on the light cards. */
#wpa-panel-suite .wp-block-buttons { display: block; margin-bottom: 26px; }
#wpa-panel-suite .wp-block-button { width: 100%; }

#wpa-panel-suite .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	padding: 13px;
	border-radius: 11px;
}

/* The ghost button has to out-shout has-primary-background-color, which the
 * preset classes declare with !important. */
#wpa-panel-suite .wpa-card:not(.wpa-card-flat) .wp-block-button__link {
	background: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--primary) !important;
	border: 1px solid #d9d9ec;
}

/* The comp's only hover rule is a:hover { color:#4338ca }, so the label darkens
 * and the hairline border firms up. Both tabs share it, so a ghost button
 * behaves the same wherever it appears. */
#wpa-panel-suite .wpa-card:not(.wpa-card-flat) .wp-block-button__link:hover,
#wpa-panel-suite .wpa-card:not(.wpa-card-flat) .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--surface) !important;
	color: #4338ca !important;
	border-color: var(--wp--preset--color--primary);
}

/* The featured tier is filled, so it darkens instead. */
#wpa-panel-suite .wpa-card-flat .wp-block-button__link:hover,
#wpa-panel-suite .wpa-card-flat .wp-block-button__link:focus-visible {
	background: #4338ca !important;
}

/* Feature lines: the comp sets them 11px apart, not 24. */
#wpa-panel-suite .wpa-card p:has(> .has-inline-color) {
	margin: 0 0 11px;
	font-size: 14px;
	line-height: 1.5;
}

#wpa-panel-suite .wpa-card p:has(> .has-inline-color):last-child { margin-bottom: 0; }

/* The dark card's own text tones. */
#wpa-panel-suite .wpa-card-flat p:has(> .has-inline-color) { color: #d4d7ea; }
#wpa-panel-suite .wpa-card-flat .has-inline-color { color: #818cf8 !important; }

/* Hero buttons, to the comp.
 *
 * These were never styled, so they rendered with the block editor's defaults:
 * 14px at normal weight, 4px corners, 40px of side padding and no lift on the
 * primary. The comp asks for 16px/600 on 12px corners, a tighter 15/30 box, a
 * coloured glow under the primary, and a neutral hairline on the secondary
 * rather than the indigo one the preset gives it.
 *
 * !important because the colour presets (has-primary-background-color and
 * friends) declare with it. */
.wpa-hero .wp-block-buttons { gap: 14px; }

.wpa-hero .wp-block-button__link {
	font-size: 16px;
	font-weight: 600;
	padding: 15px 30px;
	border-radius: 12px;
	line-height: 1.2;
}

/* Primary: the comp lifts it off the page with a tinted shadow. */
.wpa-hero .wp-block-button:first-child .wp-block-button__link {
	box-shadow: 0 10px 24px rgba(79, 70, 229, .3);
	border: 0;
}

.wpa-hero .wp-block-button:first-child .wp-block-button__link:hover {
	background: #4338ca !important;
	box-shadow: 0 12px 28px rgba(79, 70, 229, .38);
}

/* Secondary: white with a neutral hairline, not the indigo preset border.
 *
 * Astra's Customizer writes an inline rule at
 * `.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button`
 * - four classes - which sets this button's size, weight and border colour and
 * beat the shorter selector used above. Hence the long selector here: it has to
 * out-weigh that one, not just the block defaults. */
.wpa-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,
.wpa-hero .wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--surface) !important;
	color: #1a1c26 !important;
	border: 1px solid #e3e5ee !important;
	font-size: 16px;
	font-weight: 600;
	padding: 15px 30px;
	border-radius: 12px;
	line-height: 1.2;
}

.wpa-hero .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wpa-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: #cdd0e0 !important;
}

/* The comp sets the reassurance row slightly heavier than body text. */
.wpa-reassurance { font-weight: 500; }

/* Feature screenshots.
 *
 * Replaces the hatched placeholders the sections shipped with. The frame, the
 * captioned card and the small figure chip all come from the 2026-08-26 comp.
 *
 * The window has a fixed height and hides the overflow, so a tall screen capture
 * shows its top rather than being squashed - the same trick the comp uses. */
.wpa-shot { position: relative; padding: 0 0 54px; }

.wpa-shot__frame {
	background: var(--wp--preset--color--surface);
	border: 1px solid #e7e9f2;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 26px 60px rgba(20, 22, 40, .14);
}

.wpa-shot__bar {
	height: 34px;
	background: #f5f6fa;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px;
}

.wpa-shot__bar span { width: 9px; height: 9px; border-radius: 999px; }
.wpa-shot__bar span:nth-child(1) { background: #ff5f57; }
.wpa-shot__bar span:nth-child(2) { background: #febc2e; }
.wpa-shot__bar span:nth-child(3) { background: #28c840; }
.wpa-shot__bar em { margin-left: 12px; height: 14px; flex: 1; max-width: 220px; background: #e7e9f2; border-radius: 5px; }

.wpa-shot__view { height: 360px; overflow: hidden; background: var(--wp--preset--color--surface); }
.wpa-shot__view img { display: block; width: 100%; height: auto; margin-top: -14px; }

/* The captioned thumbnail that overlaps the frame's bottom-left corner. */
.wpa-shot__card {
	position: absolute;
	bottom: 0;
	left: -14px;
	width: 212px;
	background: var(--wp--preset--color--surface);
	border: 1px solid #eef0f6;
	border-radius: 12px;
	box-shadow: 0 18px 38px rgba(20, 22, 40, .18);
	overflow: hidden;
}

.wpa-shot__card img { display: block; width: 100%; height: 118px; object-fit: cover; object-position: top center; }
.wpa-shot__card div { padding: 9px 12px; }
.wpa-shot__card b { display: block; font-size: 12px; font-weight: 700; color: var(--wp--preset--color--ink); }
.wpa-shot__card span { display: block; font-size: 11px; color: var(--wp--preset--color--ink-subtle); }

/* The small figure chip on the opposite corner. */
.wpa-shot__chip {
	position: absolute;
	bottom: 14px;
	right: -14px;
	background: var(--wp--preset--color--surface);
	border: 1px solid #eef0f6;
	border-radius: 11px;
	box-shadow: 0 14px 30px rgba(20, 22, 40, .16);
	padding: 10px 14px;
}

.wpa-shot__chip span { display: block; font-size: 12px; color: var(--wp--preset--color--ink-subtle); }
.wpa-shot__chip b {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

@media (max-width: 921px) {
	.wpa-shot { padding-bottom: 0; }
	.wpa-shot__view { height: 260px; }
	/* Off-canvas corners do not work once the column is full width. */
	.wpa-shot__card, .wpa-shot__chip { position: static; width: auto; margin-top: 12px; box-shadow: none; }
	.wpa-shot__card img { height: 150px; }
}

/* About: the story collage.
 *
 * Three overlapping cards from the 2026-08-26 comp, replacing the single
 * "product / brand illustration" placeholder the page shipped with. Each window
 * has a fixed height and hides its overflow, so a tall capture shows its top
 * rather than being squashed. */
.wpa-collage { position: relative; height: 380px; }

.wpa-collage__pane,
.wpa-collage__card,
.wpa-collage__chip {
	position: absolute;
	background: var(--wp--preset--color--surface);
	border-radius: 14px;
	overflow: hidden;
}

.wpa-collage__pane {
	top: 0;
	right: 0;
	width: 82%;
	box-shadow: 0 22px 50px rgba(20, 22, 40, .16);
}

.wpa-collage__bar { height: 28px; background: #f5f6fa; display: flex; align-items: center; gap: 5px; padding: 0 12px; }
.wpa-collage__bar span { width: 8px; height: 8px; border-radius: 999px; }
.wpa-collage__bar span:nth-child(1) { background: #ff5f57; }
.wpa-collage__bar span:nth-child(2) { background: #febc2e; }
.wpa-collage__bar span:nth-child(3) { background: #28c840; }

.wpa-collage__pane figure { height: 150px; overflow: hidden; margin: 0; }

.wpa-collage__card {
	top: 150px;
	left: 0;
	width: 62%;
	border: 1px solid #eef0f6;
	box-shadow: 0 22px 50px rgba(20, 22, 40, .18);
}

.wpa-collage__card figure { height: 160px; overflow: hidden; margin: 0; }

.wpa-collage__chip {
	bottom: 0;
	right: 6px;
	width: 180px;
	border: 1px solid #eef0f6;
	border-radius: 12px;
	box-shadow: 0 18px 38px rgba(20, 22, 40, .18);
}

.wpa-collage__chip img { height: 96px; object-fit: cover; object-position: top center; }

.wpa-collage img { display: block; width: 100%; height: auto; }
.wpa-collage__meta { padding: 10px 14px; }
.wpa-collage__meta b { display: block; font-size: 12px; font-weight: 700; color: var(--wp--preset--color--ink); }
.wpa-collage__meta span { display: block; font-size: 11px; color: var(--wp--preset--color--ink-subtle); }

/* Overlapping cards need room they do not have on a phone, so they stack. */
@media (max-width: 921px) {
	.wpa-collage { height: auto; display: grid; gap: 14px; }
	.wpa-collage__pane,
	.wpa-collage__card,
	.wpa-collage__chip { position: static; width: auto; box-shadow: 0 14px 30px rgba(20, 22, 40, .12); }
	.wpa-collage__chip { width: 100%; }
	.wpa-collage__chip img { height: 140px; }
}

/* ---------------------------------------------------------------------------
 * Featured single-plugin card
 *
 * The suite tab puts its recommended tier in the middle under a "most popular"
 * ribbon; the single-plugin tab now reads the same way. The ribbon sits on the
 * card's top edge rather than in the flow, so it does not push the title down
 * and leave the three cards misaligned - the same reason the suite card
 * positions its own ribbon absolutely.
 * ------------------------------------------------------------------------ */

.wpa-price-plugin {
	position: relative;
}

.wpa-price-plugin__ribbon.wpa-price-plugin__ribbon {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	z-index: 1;
}

.wpa-price-plugin__ribbon .wpa-ribbon {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* The featured single-plugin card is the dark tier, exactly as the Full Suite
 * tab's middle card is. Both tabs sit behind the same switch, so a reader moving
 * between them should see one design with different contents, not two designs.
 * Every value below is the one `#wpa-panel-suite .wpa-card-flat` already uses. */
.wpa-price-plugin--featured {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	box-shadow: 0 24px 50px rgba(20, 22, 40, .25);
}

.wpa-price-plugin--featured .wpa-price-plugin__name.wpa-price-plugin__name,
.wpa-price-plugin--featured .wpa-price.wpa-price {
	color: var(--wp--preset--color--surface);
}

.wpa-price-plugin--featured .wpa-price-plugin__text.wpa-price-plugin__text,
.wpa-price-plugin--featured .wpa-price-sites {
	color: var(--wp--preset--color--ink-faint);
}

/* Feature lines take the dark card's pair: light text, a brighter tick. */
.wpa-price-plugin--featured .wpa-price-plugin__feature.wpa-price-plugin__feature { color: #d4d7ea; }
.wpa-price-plugin--featured .wpa-price-plugin__feature span { color: #818cf8; }
.wpa-price-plugin--featured .wpa-price-plugin__free.wpa-price-plugin__free { color: var(--wp--preset--color--ink-faint); }

/* The site selector has to stay legible on ink rather than punch a white hole
 * in the card, so it becomes a translucent panel the way the suite's ghost
 * button does. */
.wpa-price-plugin--featured .wpa-price-sites__select {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .22);
	color: var(--wp--preset--color--surface);
}

.wpa-price-plugin--featured .wpa-price-sites__select option {
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
}

/* The light tiers carry a ghost button and only the featured one is filled -
 * the rule the suite tab already states. */
.wpa-price-plugin--featured .wpa-price-btn {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.wpa-price-plugin--featured .wpa-price-btn:hover,
.wpa-price-plugin--featured .wpa-price-btn:focus-visible {
	background: #4338ca;
	border-color: #4338ca;
	color: var(--wp--preset--color--surface);
}

.wpa-price-plugin--featured .wpa-price-btn:focus-visible {
	outline-color: var(--wp--preset--color--surface);
}

/* Breathing room between the price and the site selector below it: the two sat
 * flush, so the figure read as part of the control rather than above it. */
.wpa-price-single .wpa-price.wpa-price {
	margin: 0 0 22px;
}

/* ============================================================
   Newsletter forms
   ============================================================

   Three variants share one form module (inc/newsletter.php): the dark band on
   blog templates, the band on the changelog, and the card on the home page.
   Each keeps the classes its design already had; only the honeypot and the
   status message are new, so the forms render exactly as the comps did. */

/* Bot bait. Off-screen rather than display:none - some bots skip anything
   explicitly hidden, and off-screen still keeps it out of the tab order via
   tabindex="-1" on the input itself. */
.wpa-nl__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wpa-nl__msg {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
}

.wpa-nl__msg[hidden] { display: none; }

.wpa-nl__msg.is-ok { color: var(--wp--preset--color--ink-muted); }

/* Not a palette token: the design has no danger colour, and these two are
   picked to clear AA on the grounds they actually sit on. */
.wpa-nl__msg.is-error { color: #c0392b; }

/* The changelog band is dark, so the light-ground colours above would vanish. */
.wpa-subscribe-form .wpa-nl__msg.is-ok { color: var(--wp--preset--color--ink-faint); }
.wpa-subscribe-form .wpa-nl__msg.is-error { color: #ff9b8a; }