/*
Theme Name: EN Vault
Description: Archive-blog theme for unclaimed restored member blogs. Mirrors the Empower Network front-site design system (navy/blue, Archivo + Public Sans) and treats every page as a funnel surface: capture card on the index, claim strip, end-of-post CTA band, footer funnel links.
Version: 1.5.3
Author: Empower Network
Text Domain: en-vault
*/

:root {
	--en-navy: #0C2233;
	--en-blue: #1B9BE0;
	--en-blue-deep: #147BB5;
	--en-blue-light: #3DB4E8;
	--en-blue-pale: #7FD0F2;
	--en-ink: #16232C;
	--en-body-c: #2B3A45;
	--en-muted: #5B6B77;
	/* Was #8296A3: 3.07:1 on white. It carries .v-meta - the date/author line
	   under every post title on every one of these blogs - plus .v-byline-date
	   and the comment meta. #5F7181 is 5.04:1 on white and still clears 4.5 on
	   the tints, while staying lighter than --en-muted. */
	--en-faint: #5F7181;
	--en-on-navy: #9DB8CA;
	--en-on-navy-body: #C9DAE6;
	--en-tint: #F7FAFC;
	--en-tint-gray: #F4F8FA;
	--en-chip: #EFF5F9;
	--en-chip-text: #41525E;
	--en-border: rgba(14, 42, 60, .1);
	/* Ink blue: 6.48:1 on white, and still >= 5.98:1 on the tints below, where
	   --en-blue-deep (#147BB5) drops to 4.28-4.44 and misses AA. */
	--en-blue-ink: #10648F;
	/* Primary CTA gradient. The old top stop (#2FAAE8) measured 2.61:1 against
	   the white label, so the top half of every .v-btn on 3,237 member blogs
	   failed AA. Both stops now pass alone: 4.64:1 and 6.48:1. */
	--en-grad: linear-gradient(180deg, #147BB5, #10648F);
	--en-focus: #10648F;
	--en-cta-shadow: 0 12px 28px rgba(27, 155, 224, .4);
	--en-card-shadow: 0 4px 14px rgba(14, 42, 60, .06);
	--en-display: 'Archivo', sans-serif;
	--en-sans: 'Public Sans', system-ui, sans-serif;

	/* Type scale — the same ten steps as en-kadence-child. These 3,237 blogs run
	   a parallel `v-*` system that mirrored the front site's look without sharing
	   its values, so the network carried two sets of sizes that were close enough
	   to look like a mistake and far enough apart to be one (17.5 vs 17 body,
	   15.5 vs 15 buttons, 23 vs 21 card titles). Text ramp 1.125, display ramp
	   1.25, 17px body as the hinge. Nothing here picks its own size. */
	--en-t-100: 12px;
	--en-t-200: 13.5px;
	--en-t-300: 15px;
	--en-t-400: 17px;
	--en-t-500: 19px;
	--en-t-600: 21px;
	--en-t-700: 26px;
	--en-t-800: 32px;
	--en-t-900: 40px;
	--en-t-1000: 50px;

	/* Button geometry, identical to .en-btn on the front site. */
	--en-btn-r: 10px;
	--en-btn-fs: var(--en-t-300);
	--en-btn-pad: 14px 22px;

	/* Readable measure. */
	--en-measure: 60ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--en-sans);
	font-size: var(--en-t-400);
	line-height: 1.7;
	color: var(--en-body-c);
	background: #fff;
}
img { max-width: 100%; height: auto; }
/* 6.48:1 on white. Body copy here runs at 17.5px on #fff and links sit inside
   it, so the link colour has to clear AA against the same background - and
   --en-blue-deep (4.64:1) was doing it by 0.14. */
a { color: var(--en-blue-ink); }
/* Links inside the article body are underlined: in running prose, colour alone
   is not a distinguishing signal (WCAG 1.4.1), and these bodies are 2011-2017
   imports full of in-sentence links. Chrome, cards and buttons stay clean. */
.v-content p a,
.v-content li a,
.v-excerpt a,
.v-capture-privacy a {
	text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 2px;
}

/* ==========================================================================
   Focus + skip link
   ==========================================================================
   3,237 of the network's 3,255 blogs run this theme, and it shipped with no
   :focus rule of any kind and no skip link - so on 99.4% of the network a
   keyboard user had no visible focus and no way past the header. (en-member,
   which 16 blogs run, has had both since it was written; this brings the other
   99.4% up to it.)
   Ring contrast, measured: #10648F on #fff = 6.48:1, #7FD0F2 on #0C2233 =
   9.45:1. Non-text UI needs 3:1. */
:focus-visible {
	outline: 3px solid var(--en-focus);
	outline-offset: 2px;
	border-radius: 4px;
}
/* Navy surfaces need the light ring. */
.v-head,
.v-foot,
.v-capture { --en-focus: var(--en-blue-pale); }

.v-skip {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: #fff; color: var(--en-blue-ink);
	font-family: var(--en-sans); font-weight: 700; font-size: var(--en-t-300);
	padding: 12px 18px; border-radius: 0 0 10px 0; text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.v-skip:focus { left: 0; }
/*
 * #v-content is the <main> landmark (header.php opens it, footer.php closes
 * it). It used to be a bare `<span tabindex="-1">`, so "skip to content" moved
 * the caret but announced nothing and the page carried no main landmark at all
 * - on 3,237 of the network's 3,257 blogs. height:0 went with the span and has
 * to go with it: the element now holds the article.
 * Still no ring of its own - it is a landing point, not a control.
 */
#v-content { display: block; }
#v-content:focus, #v-content:focus-visible { outline: none; }

/* The archive posts carry inline styles from 2011-2017 and some of them set a
   colour on links. Focus still has to be visible on those. */
.v-content a:focus-visible { outline: 3px solid var(--en-focus); outline-offset: 2px; }

/*
 * Imported 2011-2017 content wrote pull quotes as <pre>.
 *
 * <pre> does not wrap, so a one-line Andrew Carnegie quote pushed the whole
 * article wider than the viewport and dragged the layout off-centre with it.
 * Fixing the CSS rather than rewriting bodies: the markup is what the author
 * published, there are thousands of these posts, and any content pass over them
 * risks more than it repairs.
 *
 * pre-wrap keeps deliberate line breaks (some posts really are code) while
 * letting long lines fold. overflow-x on top so a genuinely unbreakable string
 * scrolls inside its own box instead of widening the page.
 */
pre,
.v-content pre {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
	overflow-x: auto;
	max-width: 100%;
	font-family: inherit; /* these are quotes, not code — monospace was never meant */
	font-size: inherit;
	margin: 0 0 1.15em;
}
code, kbd, samp { overflow-wrap: anywhere; }

/*
 * Nothing in an article may widen the page. Imported bodies carry 2013-era
 * tables, iframes and inline-styled divs with fixed pixel widths.
 */
.v-content table { display: block; max-width: 100%; overflow-x: auto; }
.v-content iframe,
.v-content embed,
.v-content object { max-width: 100%; }
body { overflow-x: hidden; }

/* Visually-hidden, still in the accessibility tree. The capture field on every
   index page and post was placeholder-only: a placeholder is not a label, it
   disappears on first keystroke, and voice control has nothing to address. */
.v-vh {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.v-wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.v-narrow { max-width: 720px; margin: 0 auto; padding: 0 22px; }

/* Readable measure. The blog band's description ran the full 640px at 17px -
   about 100 characters a line - and the article body ran 79. `ch` so the cap
   tracks the size rather than a guess about it.
   `body` on the front of each selector because .v-blog-band p carries its own
   640px max-width later in this file at equal specificity, and would win. */
body .v-blog-band p,
body .v-blog-about p,
body .v-content > p,
body .v-content > ul,
body .v-content > ol { max-width: var(--en-measure); }

/* ---------- buttons ----------
 * .v-btn is the same button as .en-btn on the front site, down to the family,
 * weight, radius and padding. It was Archivo 700 at 15.5px in an 9px box while
 * the front site's was Public Sans 800 at 15px in a 10px box - two buttons that
 * are trying to be one button, on pages that link straight to each other. The
 * geometry comes from the shared --en-btn-* variables so a size change is one
 * edit in :root, and .v-btn-sm is the only thing allowed to override it. */
.v-btn {
	display: inline-block; background: var(--en-grad); color: #fff !important;
	font-family: var(--en-sans); font-weight: 800; font-size: var(--en-btn-fs);
	padding: var(--en-btn-pad); border-radius: var(--en-btn-r); text-decoration: none; border: 0;
	cursor: pointer; line-height: 1.2; box-shadow: var(--en-cta-shadow); white-space: nowrap;
	transition: filter .15s ease, transform .15s ease;
}
.v-btn-sm { --en-btn-fs: var(--en-t-200); --en-btn-pad: 12px 20px; }
.v-btn:hover { filter: brightness(1.06); }
.v-btn:active { transform: translateY(1px); }
.v-btn-ghost {
	display: inline-block; color: var(--en-blue-pale) !important; font-family: var(--en-sans);
	font-weight: 700; font-size: var(--en-btn-fs); padding: 12px 6px; text-decoration: none;
}
/* The header bar is the tightest row on these blogs - at 390px the wordmark
   already competes with this button for the line - so the masthead CTA is the
   small size. It is the same button, one step down, not a different one. */
.v-head-cta .v-btn { --en-btn-fs: var(--en-t-200); --en-btn-pad: 12px 20px; }

/* ---------- header ---------- */
.v-head { background: var(--en-navy); color: #fff; }
.v-head-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding: 16px 0;
}
.v-wordmark {
	font-family: var(--en-display); font-weight: 900; font-size: var(--en-t-500);
	letter-spacing: 1.5px; color: #fff; text-decoration: none;
}
.v-wordmark .v-wm-net { color: var(--en-blue-light); }
.v-archive-chip {
	display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 99px;
	background: rgba(255,255,255,.12); font-size: var(--en-t-100); letter-spacing: 1.2px;
	font-weight: 700; vertical-align: 2px;
}
.v-head-cta { display: flex; align-items: center; gap: 14px; }
.v-head-cta .v-link { color: var(--en-on-navy); text-decoration: none; font-size: var(--en-t-300); }
.v-head-cta .v-link:hover { color: #fff; }

.v-blog-band { padding: 30px 0 34px; border-top: 1px solid rgba(255,255,255,.12); }
.v-blog-band h1 {
	font-family: var(--en-display); font-weight: 800; font-size: clamp(var(--en-t-700), 4vw, var(--en-t-900));
	line-height: 1.15; margin: 0; letter-spacing: -0.5px; color: #fff;
}
.v-blog-band p { color: var(--en-on-navy-body); margin: 10px 0 0; max-width: 640px; font-size: var(--en-t-400); }
/* Long-form blog description: narrower measure and tighter type than the
   one-line tagline, because 200 words at 16px across 640px reads as a wall. */
.v-blog-about { max-width: 660px; margin: 12px 0 0; }
.v-blog-about p { font-size: var(--en-t-300); line-height: 1.62; margin: 0 0 .7em; }
.v-blog-about p:last-child { margin-bottom: 0; }
.v-blog-start { margin-top: .9em !important; font-size: var(--en-t-300); opacity: .92; }
.v-blog-start a { color: var(--en-blue-light); text-decoration: none; border-bottom: 1px solid rgba(127,208,242,.35); }
.v-blog-start a:hover { border-bottom-color: var(--en-blue-light); }

/* ---------- index list + capture ---------- */
.v-index { display: grid; grid-template-columns: 1fr 340px; gap: 42px; padding: 40px 0 20px; }
.v-cards { min-width: 0; }
.v-card { padding: 22px 0; border-bottom: 1px solid var(--en-border); }
.v-card h2 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-600); line-height: 1.25; margin: 0 0 6px; letter-spacing: -0.3px; }
.v-card h2 a { color: var(--en-ink); text-decoration: none; }
.v-card h2 a:hover { color: var(--en-blue-deep); }
.v-meta { color: var(--en-faint); font-size: var(--en-t-200); }
.v-excerpt { margin: 8px 0 10px; }
.v-readmore { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-300); text-decoration: none; }

.v-side { position: relative; }
.v-capture {
	position: sticky; top: 18px; background: var(--en-navy); border-radius: 14px;
	padding: 24px 22px; color: #fff; box-shadow: var(--en-card-shadow);
}
.v-capture-title { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-500); line-height: 1.3; }
.v-capture-sub { color: var(--en-on-navy-body); font-size: var(--en-t-300); margin: 8px 0 14px; }
.v-capture .en-m-subscribe { margin: 0; padding: 0; border: 0; background: none; }
.v-capture input[type=email] {
	width: 100%; padding: 12px 13px; font-size: var(--en-t-300); border: 0; border-radius: 9px; margin-bottom: 10px;
}
/* Same button again, full width. Only the width is a property of the slot. */
.v-capture button, .en-m-subscribe button {
	width: 100%; background: var(--en-grad); color: #fff; font-family: var(--en-sans);
	font-weight: 800; font-size: var(--en-btn-fs); padding: var(--en-btn-pad); border: 0;
	border-radius: var(--en-btn-r); line-height: 1.2;
	cursor: pointer; box-shadow: var(--en-cta-shadow); margin-bottom: 8px;
}
.v-capture button:hover, .en-m-subscribe button:hover { filter: brightness(1.06); }
.v-capture .en-m-sub-note { color: var(--en-on-navy-body); font-size: var(--en-t-200); }
/* Emitted by the capture partial but never defined; both sit on the navy card,
   so they inherit white (16.25:1). Declared so the DOM/CSS diff comes out clean
   and the note is not left at body size. */
.v-capture-form { margin: 0; }
.v-capture-note { color: var(--en-on-navy-body); font-size: var(--en-t-200); line-height: 1.5; }
.v-capture-privacy { color: var(--en-on-navy); font-size: var(--en-t-100); margin-top: 10px; }

/* ---------- single ---------- */
/*
 * Single posts render <div class="v-narrow v-article">. .v-narrow sets
 * `padding: 0 22px` (L132); this rule is a later `padding` SHORTHAND at equal
 * specificity (0,1,0), so it was resetting the horizontal padding to 0 and
 * every post on all 3,237 vault blogs rendered edge-to-edge at 390px - h1,
 * body copy, CTA and prev/next all at left:0, width:390. The index page never
 * showed it because it uses .v-wrap, which nothing overrides.
 *
 * Keeping the shorthand (it is the vertical rhythm for the article) and
 * restating the 22px gutter, rather than switching to padding-top/bottom, so
 * the gutter is visible at the point where it would otherwise be wiped again.
 */
.v-article { padding: 38px 22px 10px; }
.v-kicker {
	display: inline-block; background: var(--en-chip); color: var(--en-chip-text);
	font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-100);
	letter-spacing: 1.4px; text-transform: uppercase; padding: 4px 10px;
	border-radius: 99px; margin-bottom: 14px;
}
.v-article h1 {
	font-family: var(--en-display); font-weight: 800; font-size: clamp(var(--en-t-700), 4.5vw, var(--en-t-900));
	line-height: 1.15; letter-spacing: -0.6px; color: var(--en-ink); margin: 0 0 16px;
}
.v-byline { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.v-avatar {
	width: 42px; height: 42px; border-radius: 50%; background: var(--en-grad);
	color: #fff; font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-300);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.v-byline-name { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-300); color: var(--en-ink); display: block; }
.v-byline-date { color: var(--en-faint); font-size: var(--en-t-200); }
.v-hero-img { margin: 0 0 26px; }
.v-hero-img img { border-radius: 14px; box-shadow: var(--en-card-shadow); }

.v-content { font-size: var(--en-t-400); }
.v-content p { margin: 0 0 1.3em; }
.v-content h2 { font-family: var(--en-display); font-weight: 800; font-size: var(--en-t-700); line-height: 1.3; margin: 1.5em 0 .5em; color: var(--en-ink); letter-spacing: -0.3px; }
.v-content h3 { font-family: var(--en-display); font-weight: 700; font-size: var(--en-t-600); margin: 1.4em 0 .5em; color: var(--en-ink); }
.v-content img { border-radius: 10px; }
.v-content blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--en-blue); color: var(--en-muted); }
.v-content ul, .v-content ol { padding-left: 1.4em; }
/* archive-content hygiene: any empty block that survives (or is created by the
   browser parsing legacy markup) must never occupy space */
.v-content p:empty, .v-content div:empty, .v-content span:empty,
.v-content h2:empty, .v-content h3:empty { display: none; margin: 0; padding: 0; }
.v-content br + br { display: none; }

/* restored-note (mu-plugin) restyle */
.v-content .en-vault-note, .en-vault-note {
	font-size: var(--en-t-200) !important; color: var(--en-muted) !important;
	background: var(--en-tint-gray); border-left: 3px solid var(--en-blue) !important;
	padding: 10px 14px !important; border-radius: 0 8px 8px 0; margin: 0 0 22px;
}

/* prev/next */
/*
 * min-width:0 on the flex children: post titles are long, and without it the
 * two spans refuse to shrink below their content width - measured 414px of
 * content in a 390px viewport, kept off-screen only by `body{overflow-x:hidden}`
 * clipping the right-hand link. Below 600px they stack instead, which is the
 * only way two full post titles fit at all.
 */
.v-pagenav { display: flex; justify-content: space-between; gap: 18px; margin: 34px 0; font-size: var(--en-t-300); }
.v-pagenav > span { min-width: 0; }
.v-pagenav a { font-family: var(--en-display); font-weight: 700; text-decoration: none; }

/* comments */
.v-comments { margin: 40px 0 0; padding-top: 8px; border-top: 1px solid var(--en-border); }
.v-comments h3 { font-family: var(--en-display); font-size: var(--en-t-500); }
.v-comments ol { list-style: none; padding: 0; }
.v-comments li { margin: 0 0 18px; padding: 14px 16px; background: var(--en-tint); border-radius: 10px; font-size: var(--en-t-300); }
.v-comments cite { font-style: normal; font-family: var(--en-display); font-weight: 700; color: var(--en-ink); }
.v-comments .says { display: none; }
.v-comments .comment-meta { font-size: var(--en-t-100); }
.v-comments .comment-meta a { color: var(--en-faint); text-decoration: none; }
.v-comments .reply { display: none; }

/* ---------- footer ---------- */
.v-foot { background: var(--en-navy); color: var(--en-on-navy); margin-top: 60px; }
.v-foot-cta { text-align: center; padding: 44px 22px 8px; }
.v-foot-cta-title { font-family: var(--en-display); font-weight: 800; font-size: clamp(var(--en-t-600), 3.5vw, var(--en-t-800)); color: #fff; letter-spacing: -0.4px; }
.v-foot-cta-sub { color: var(--en-on-navy-body); margin: 8px auto 18px; max-width: 520px; font-size: var(--en-t-300); }
.v-foot-inner {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
	padding: 34px 22px 40px; max-width: 1080px; margin: 0 auto; font-size: var(--en-t-200);
}
.v-foot a { color: var(--en-on-navy); text-decoration: none; margin-right: 16px; }
.v-foot a:hover { color: #fff; }

/*
 * The end-of-post CTA (mu-plugins/en-network.php) and the partner share band
 * (en-core/includes/partners.php) are injected by plugins this theme does not
 * own, and both write their button geometry inline. The colours in them are
 * already correct - both use the --en-grad pair - but the submit button in the
 * CTA carries no font-size at all, so it renders at the browser default 13.33px
 * in a 10x18 box: on rendered pages it measured as its own distinct button
 * signature, at the foot of every post on 3,237 blogs.
 *
 * !important is the only thing that beats an inline style attribute. It is used
 * here for geometry only, on two selectors, so the button matches .v-btn - the
 * button eight lines above it in the same block.
 */
.en-vault-cta form button[type="submit"],
.en-vault-cta > a[style*="gradient"] {
	font-family: var(--en-sans) !important;
	font-size: var(--en-btn-fs) !important;
	font-weight: 800 !important;
	padding: var(--en-btn-pad) !important;
	border-radius: var(--en-btn-r) !important;
	line-height: 1.2 !important;
}
/* Same reasoning, same pair of properties: the share-band buttons are 10x14 at
   weight 700 against the small button's 12x20 at 800. Colour and radius already
   match; this is the last of the geometry. */
.en-partner-share .en-btn,
.en-partner-share .en-btn-ghost,
.en-partner-share-copy,
.en-partner-share-join {
	padding: 12px 20px !important; font-weight: 800 !important;
}

/* claim strip (mu-plugin) re-skin */
.en-vault-claim { background: var(--en-grad) !important; font-family: var(--en-sans); }
.en-vault-claim a { color: #fff !important; text-decoration: underline; }

@media (max-width: 880px) {
	.v-index { grid-template-columns: 1fr; }
	.v-capture { position: static; }
	/* Promotional links go; the link back to this blog stays. It was the only
	   route from a post to its own index and it was being hidden with them.
	   The bar has to be allowed to wrap once it holds three things, or the
	   nowrap button is pushed past the viewport edge - measured 495px of
	   content in a 390px window before the wrap was allowed. */
	.v-head-cta .v-link:not(.v-link-home) { display: none; }
	.v-head-bar { flex-wrap: wrap; row-gap: 10px; }
	.v-head-cta { flex-wrap: wrap; min-width: 0; }
	.v-head-cta .v-link-home {
		max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
}
@media (max-width: 620px) {
	/* At phone widths the wordmark alone fills the row, so the blog link and the
	   CTA take the second one and the button goes full width rather than being
	   a 195px nowrap block looking for space that is not there. */
	.v-head-cta { width: 100%; justify-content: space-between; }
	.v-btn { white-space: normal; }
}
@media (max-width: 600px) {
	body { font-size: var(--en-t-400); }
	.v-content { font-size: var(--en-t-400); }
	.v-blog-band { padding: 22px 0 26px; }
	.v-pagenav { flex-direction: column; gap: 10px; }
}

/* ---------- blog band: two columns ----------
 * The band ran one narrow measure of text against an empty right half on every
 * archive page. The text keeps its measure; the space beside it now carries the
 * only offer that is true on all 3,237 blogs regardless of who wrote them. */
.v-band-grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	gap: 40px; align-items: start;
}
.v-band-main { min-width: 0; }
.v-band-cta {
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px; padding: 24px 24px 26px;
	display: flex; flex-direction: column; gap: 10px;
}
.v-band-cta-eyebrow {
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--en-on-navy-faint, #8FA9BC); font-weight: 700;
}
.v-band-cta-lead { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; color: #fff; }
body .v-band-cta-lead, body .v-band-cta-body { max-width: none; }
.v-band-cta-body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--en-on-navy-body, #C6D6E2); }
.v-band-cta-btn { margin-top: 6px; text-align: center; }
.v-band-cta-fine { font-size: 11.5px; line-height: 1.5; color: var(--en-on-navy-faint, #8FA9BC); }
@media (max-width: 880px) {
	.v-band-grid { grid-template-columns: 1fr; gap: 26px; }
	.v-band-cta { padding: 20px; }
}