/*
Theme Name: Site Kit
Theme URI: https://example.com
Description: Consumer news child theme for GeneratePress. All brand content — palette, wordmark, sections, FAQ, footer, disclaimers — lives in brand.php. Edit that file, not this one.
Author: Site Kit
Template: generatepress
Version: 1.0.0
Text Domain: sitekit
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--cp-evergreen:      #123C35;
	--cp-evergreen-dark: #0B2924;
	--cp-green:          #2F8F6B;
	--cp-bg:             #F5F8F6;
	--cp-card:           #FFFFFF;
	--cp-text:           #17211E;
	--cp-muted:          #65736E;
	--cp-border:         #DDE6E2;
	--cp-gold:           #E3A72F;

	/* Modern editorial pairing: tight grotesk headlines, Inter body,
	   a serif italic reserved for small accents so nothing reads dated. */
	--cp-head:   "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--cp-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--cp-accent: "Newsreader", Georgia, serif;
	/* Editorial serif, article headlines only — the rest of the site stays sans. */
	--cp-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--cp-charcoal: #262E2B;

	--cp-radius: 8px;
	--cp-wrap:   1180px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
	background: var(--cp-bg);
	color: var(--cp-text);
	font-family: var(--cp-sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .entry-title {
	font-family: var(--cp-head);
	color: var(--cp-evergreen-dark);
	font-weight: 700;
	letter-spacing: -0.021em;
	line-height: 1.15;
}

a { color: var(--cp-green); text-decoration: none; }
a:hover { color: var(--cp-evergreen); text-decoration: underline; }

.cp-wrap { max-width: var(--cp-wrap); margin: 0 auto; padding: 0 24px; }

/* Kicker / eyebrow — the one place the serif italic shows up */
.cp-kicker {
	font-family: var(--cp-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cp-green);
	margin: 0 0 18px;
}

/* ==========================================================================
   3. Header — compact evergreen masthead, wordmark left / white links right
   ID selectors are used deliberately: GeneratePress prints its own inline
   colour CSS for .site-header and .main-navigation, so the child theme has
   to outrank it rather than rely on load order.
   ========================================================================== */

.site-header#masthead {
	background: var(--cp-evergreen-dark);
	border-bottom: 1px solid rgba(255, 255, 255, .09);
	padding: 0;
}

.site-header#masthead .inside-header,
.site-header#masthead .inside-header.grid-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* GeneratePress's grid clearfix pseudo-elements become flex items inside the
   header row and push the wordmark away from the left edge. */
.site-header#masthead .inside-header::before,
.site-header#masthead .inside-header::after { content: none; }

.site-header#masthead .site-branding,
.site-header#masthead .site-logo { padding: 0; margin: 0; }

.site-header#masthead .main-title { margin: 0; line-height: 1; }

.site-header#masthead .main-title a {
	font-family: var(--cp-head);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.035em;
	color: #FFFFFF;
}
.site-header#masthead .main-title a:hover { color: #FFFFFF; text-decoration: none; }

/* Gold tick after the wordmark — the entire logo treatment. */
.site-header#masthead .main-title a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cp-gold);
	margin-left: 5px;
	vertical-align: 5px;
}

.site-description { display: none; }

/* Navigation sits in the evergreen bar as plain white text links. */
.main-navigation#site-navigation,
.main-navigation#site-navigation ul ul,
#mobile-menu-control-wrapper {
	background: transparent;
	border: 0;
	box-shadow: none;
	flex: 0 1 auto;
}

.main-navigation#site-navigation .inside-navigation,
.main-navigation#site-navigation .inside-navigation.grid-container { padding: 0; }

.main-navigation#site-navigation .main-nav > ul { display: flex; align-items: center; gap: 2px; }

.main-navigation#site-navigation .main-nav ul li a {
	position: relative;
	font-family: var(--cp-sans);
	font-weight: 500;
	font-size: 14.5px;
	line-height: 60px;
	color: #FFFFFF;
	padding: 8px 15px;
	border-bottom: 0;
	text-decoration: none;
	transition: color .12s ease;
}

.main-navigation#site-navigation .main-nav ul li a:hover,
.main-navigation#site-navigation .main-nav ul li a:focus,
.main-navigation#site-navigation .main-nav ul li.current-menu-item > a { text-decoration: none; }

/* The active marker is a pseudo-element rather than a border: a border sits at
   the bottom of the 60px line box, roughly 20px below the text, and reads as a
   detached bar. This hugs the word. */
.main-navigation#site-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation#site-navigation .main-nav ul li[class*="current-menu-"] > a::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 22px;
	height: 2px;
	background: var(--cp-gold);
}

.main-navigation#site-navigation .main-nav ul li:hover > a,
.main-navigation#site-navigation .main-nav ul li:focus-within > a {
	background: transparent;
	color: rgba(255, 255, 255, .75);
}

.main-navigation#site-navigation .main-nav ul li.current-menu-item > a,
.main-navigation#site-navigation .main-nav ul li[class*="current-menu-"] > a {
	background: transparent;
	color: #FFFFFF;
	font-weight: 600;
}

/* GeneratePress's nav search form sits inside the navigation and must stay
   hidden until the icon is tapped. Without this it renders as an empty input
   in the middle of the header row and pushes the menu out of place. */
.main-navigation#site-navigation { position: relative; }

.main-navigation#site-navigation .navigation-search {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity .1s ease-in-out;
	z-index: 20;
}

.main-navigation#site-navigation .navigation-search.nav-search-active {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.main-navigation#site-navigation .navigation-search input[type="search"] {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: var(--cp-evergreen-dark);
	color: #FFFFFF;
	font-family: var(--cp-sans);
	font-size: 16px;
	padding: 0 20px;
}
.main-navigation#site-navigation .navigation-search input[type="search"]::placeholder { color: #8FA9A1; }

/* Dropdowns, if any category ever gains children. */
.main-navigation#site-navigation ul ul { background: var(--cp-evergreen-dark); }
.main-navigation#site-navigation ul ul li a { color: #EAF2EE; border-bottom: 0; }

.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
#mobile-menu-control-wrapper .menu-toggle {
	background: transparent;
	color: #FFFFFF;
	font-family: var(--cp-sans);
	font-weight: 600;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.cp-btn {
	display: inline-block;
	font-family: var(--cp-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 15px 26px;
	border-radius: var(--cp-radius);
	border: 1px solid transparent;
	transition: background .14s ease, color .14s ease;
}
.cp-btn:hover { text-decoration: none; }

.cp-btn--primary { background: var(--cp-green); color: #FFFFFF; }
.cp-btn--primary:hover { background: #26775A; color: #FFFFFF; }

.cp-textlink {
	font-family: var(--cp-sans);
	font-weight: 600;
	font-size: 15px;
	color: #EAF2EE;
	border-bottom: 1px solid rgba(234, 242, 238, .35);
	padding-bottom: 2px;
}
.cp-textlink:hover { color: var(--cp-gold); border-bottom-color: var(--cp-gold); text-decoration: none; }

/* ==========================================================================
   5. Hero — two-column editorial, no floating box, no decoration
   ========================================================================== */

.cp-hero {
	background: var(--cp-evergreen);
	color: #EAF2EE;
	padding: 72px 0 76px;
	border-bottom: 3px solid var(--cp-gold);
}

.cp-hero__grid {
	display: grid;
	grid-template-columns: 0.415fr 0.585fr;
	gap: 44px;
	align-items: start;
}

.cp-hero .cp-kicker { color: #8FBFAC; }

.cp-hero h1 {
	color: #FFFFFF;
	font-size: 40px;
	line-height: 1.12;
	letter-spacing: -0.03em;
	margin: 0 0 12px;
}

.cp-hero p {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .68);
	margin: 0 0 20px;
	max-width: none;
}

.cp-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }

/* Featured story — image left, text right, sitting directly on the hero
   background. Matches the Recall Refunds hero feature: no card, no shadow. */
.cp-featured {
	display: grid;
	grid-template-columns: 337px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	background: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.cp-featured__media {
	display: block;
	height: 236px;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, .06);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.cp-featured__media:hover { text-decoration: none; }

.cp-featured__media--empty {
	background-image:
		repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px);
}

.cp-featured__text { display: flex; flex-direction: column; }

.cp-featured__cat {
	font-family: var(--cp-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--cp-green);
	margin: 0 0 7px;
}
.cp-featured__cat:hover { color: #7FD3B4; text-decoration: none; }

.cp-featured__title {
	font-family: var(--cp-serif);
	font-size: 23px;
	line-height: 1.24;
	font-weight: 600;
	margin: 0 0 6px;
}
.cp-featured__title a { color: #FFFFFF; }
.cp-featured__title a:hover { color: #C8DAD3; text-decoration: none; }

.cp-featured__date {
	font-family: var(--cp-sans);
	font-size: 12px;
	color: rgba(255, 255, 255, .42);
	margin: 0 0 8px;
}

.cp-featured__excerpt {
	font-family: var(--cp-sans);
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .6);
	margin: 0 0 12px;
}

.cp-featured__link {
	align-self: flex-start;
	font-family: var(--cp-sans);
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF;
	border-bottom: 2px solid var(--cp-green);
	padding-bottom: 2px;
}
.cp-featured__link:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; text-decoration: none; }

/* ==========================================================================
   6. Sections
   ========================================================================== */

.cp-section { padding: 52px 0; }

.cp-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cp-border);
}

.cp-section-head h2 { font-size: 26px; margin: 0; letter-spacing: -0.025em; }

.cp-section-head .cp-more {
	font-family: var(--cp-sans);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--cp-green);
	border-bottom: 1px solid rgba(47, 143, 107, .35);
	padding-bottom: 2px;
	transition: color .12s ease, border-color .12s ease;
}
.cp-section-head .cp-more:hover {
	color: var(--cp-evergreen);
	border-bottom-color: var(--cp-evergreen);
	text-decoration: none;
}

/* ==========================================================================
   7. Article cards
   ========================================================================== */

.cp-grid { display: grid; gap: 22px; }
.cp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cp-grid--4 { grid-template-columns: repeat(4, 1fr); }

.cp-card {
	background: var(--cp-card);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .14s ease, box-shadow .14s ease;
}
.cp-card:hover {
	border-color: #C4D8D0;
	box-shadow: 0 6px 22px rgba(11, 41, 36, .07);
}

/* Media — fixed 16:9 so every card in the row lines up. */
.cp-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--cp-green-soft, #E8F2EE);
	border-bottom: 1px solid var(--cp-border);
}

.cp-card__img,
.cp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.cp-card:hover .cp-card__img { transform: scale(1.03); }

/* Fallback panel until a featured image is attached. Deliberately quiet:
   it holds the grid rhythm without pretending to be a photograph. */
.cp-card__media--empty {
	background:
		repeating-linear-gradient(
			-45deg,
			rgba(18, 60, 53, .045) 0 10px,
			transparent 10px 20px
		),
		linear-gradient(150deg, #E8F2EE 0%, #DCEAE4 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cp-card__media--empty span {
	font-family: var(--cp-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #7C9990;
}
.cp-card__media--empty:hover { text-decoration: none; }

/* Body — tight, no wasted vertical space. */
.cp-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.cp-card__cat {
	font-family: var(--cp-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--cp-green);
	margin: 0 0 8px;
}

.cp-card h3 {
	font-size: 20px;
	line-height: 1.24;
	margin: 0 0 12px;
}
.cp-card h3 a { color: var(--cp-evergreen-dark); }
.cp-card h3 a:hover { color: var(--cp-green); text-decoration: none; }

/* Payout row — the one place gold appears on a card. */
.cp-card__payout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

.cp-payout__amount {
	font-family: var(--cp-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #7A5406;
	background: #FBF2DE;
	border: 1px solid #F0DEB4;
	border-radius: 4px;
	padding: 5px 10px;
	line-height: 1.1;
}

.cp-payout__deadline {
	font-family: var(--cp-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--cp-text);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cp-payout__deadline::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cp-gold);
	flex: none;
}

.cp-payout__status {
	font-family: var(--cp-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--cp-evergreen);
	background: #E8F2EE;
	border-radius: 4px;
	padding: 5px 9px;
	line-height: 1.1;
}

.cp-card__date {
	margin: auto 0 0;
	padding-top: 4px;
	font-family: var(--cp-sans);
	font-size: 12.5px;
	font-weight: 500;
	color: #8A9791;
	letter-spacing: .01em;
}

.cp-empty {
	background: var(--cp-card);
	border: 1px dashed var(--cp-border);
	border-radius: var(--cp-radius);
	padding: 34px;
	color: var(--cp-muted);
	font-size: 15px;
}
.cp-empty h3 { font-size: 19px; margin: 0 0 8px; }

/* ==========================================================================
   8. Trust section — centred intro, three equal editorial cards
   ========================================================================== */

.cp-trust {
	background: var(--cp-card);
	border-top: 1px solid var(--cp-border);
	border-bottom: 1px solid var(--cp-border);
	padding: 80px 0;
}

.cp-trust__intro {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 44px;
}

.cp-trust__intro h2 {
	font-family: var(--cp-head);
	font-size: 32px;
	line-height: 1.18;
	letter-spacing: -0.028em;
	margin: 0 0 16px;
	color: var(--cp-evergreen-dark);
}

.cp-trust__intro p {
	font-family: var(--cp-sans);
	font-size: 17px;
	line-height: 1.6;
	color: var(--cp-muted);
	margin: 0;
}

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

.cp-trust__card {
	background: #FAFCFB;
	border: 1px solid var(--cp-border);
	border-top: 3px solid var(--cp-green);
	border-radius: var(--cp-radius);
	padding: 32px 28px;
}

.cp-trust__card h3 {
	font-family: var(--cp-head);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--cp-evergreen-dark);
	margin: 0 0 12px;
}

.cp-trust__card p {
	font-family: var(--cp-sans);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cp-muted);
	margin: 0;
}

@media (max-width: 880px) {
	.cp-trust { padding: 54px 0; }
	.cp-trust__intro { margin-bottom: 32px; }
	.cp-trust__intro h2 { font-size: 26px; }
	.cp-trust__grid { grid-template-columns: 1fr; gap: 18px; }
	.cp-trust__card { padding: 26px 22px; }
}

/* ==========================================================================
   9. Topic row — compact text links, not tiles
   ========================================================================== */

.cp-topics { border-top: 1px solid var(--cp-border); }

.cp-topic {
	display: block;
	padding: 20px 0;
	border-bottom: 1px solid var(--cp-border);
}
.cp-topic:hover { text-decoration: none; }
.cp-topic h3 { font-size: 18px; margin: 0 0 5px; }
.cp-topic:hover h3 { color: var(--cp-green); }
.cp-topic p { color: var(--cp-muted); font-size: 14.5px; margin: 0; }

/* ==========================================================================
   10. FAQ — full-bleed evergreen, native details/summary accordion
   Uses <details> rather than JS so rows stay keyboard-accessible and
   openable before any script runs.
   ========================================================================== */

.cp-faq {
	position: relative;
	background: var(--cp-evergreen-dark);
	padding: 84px 0 92px;
	overflow: hidden;
}

/* Barely-there texture standing in for a background photograph: a faint
   document-grid and a soft light fall, both well under the evergreen. */
.cp-faq::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 34px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 34px),
		radial-gradient(120% 90% at 78% 8%, rgba(47,143,107,.20) 0%, transparent 60%);
	pointer-events: none;
}

.cp-faq__inner {
	position: relative;
	z-index: 1;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px;
}

.cp-faq h2 {
	font-family: var(--cp-head);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: #FFFFFF;
	text-align: center;
	margin: 0 0 40px;
}

.cp-faq__list { display: flex; flex-direction: column; gap: 12px; }

.cp-faq__row {
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 10px;
	transition: background .14s ease, border-color .14s ease;
}
.cp-faq__row:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); }
.cp-faq__row[open] { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .17); }

.cp-faq__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 24px;
	font-family: var(--cp-sans);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	color: #FFFFFF;
}
.cp-faq__q::-webkit-details-marker { display: none; }

/* + when closed, - when open */
.cp-faq__q::after {
	content: "+";
	flex: none;
	font-family: var(--cp-sans);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: #8FBFAC;
	transition: color .14s ease;
}
.cp-faq__row[open] .cp-faq__q::after { content: "\2212"; color: var(--cp-gold); }
.cp-faq__q:hover::after { color: #FFFFFF; }

.cp-faq__q:focus-visible {
	outline: 2px solid var(--cp-gold);
	outline-offset: -2px;
	border-radius: 10px;
}

.cp-faq__a {
	padding: 0 62px 22px 24px;
}
.cp-faq__a p {
	font-family: var(--cp-sans);
	font-size: 16px;
	line-height: 1.68;
	color: #BCD2CB;
	margin: 0 0 14px;
}
.cp-faq__a p:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
	.cp-faq { padding: 54px 0 60px; }
	.cp-faq h2 { font-size: 27px; margin-bottom: 28px; }
	.cp-faq__q { padding: 17px 18px; font-size: 16px; gap: 14px; }
	.cp-faq__a { padding: 0 18px 18px; }
	.cp-faq__a p { font-size: 15.5px; }
}

/* ==========================================================================
   11. Footer note
   ========================================================================== */

.cp-disclosure {
	font-family: var(--cp-accent);
	font-size: 16px;
	line-height: 1.6;
	color: var(--cp-muted);
	border-top: 1px solid var(--cp-border);
	padding: 26px 0 44px;
	max-width: 78ch;
}
.cp-disclosure strong { font-family: var(--cp-sans); font-size: 14px; color: var(--cp-evergreen-dark); }

/* ==========================================================================
   12. Single article — editorial layout, serif headlines, TOC card
   ========================================================================== */

.cp-article { background: var(--cp-bg); padding: 38px 0 72px; }

.cp-article__wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* --- Breadcrumbs --- */

.cp-crumbs {
	font-family: var(--cp-sans);
	font-size: 13px;
	line-height: 1.5;
	color: #8A9791;
	margin: 0 0 16px;
}
.cp-crumbs a { color: #8A9791; }
.cp-crumbs a:hover { color: var(--cp-green); text-decoration: none; }
.cp-crumbs__sep { margin: 0 8px; color: #B4C4BE; }
.cp-crumbs__current { color: var(--cp-muted); }

/* --- Header --- */

.cp-article__head { margin: 0 0 24px; }

.cp-badge-cat {
	display: inline-block;
	font-family: var(--cp-sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--cp-green);
	border-radius: 4px;
	padding: 5px 12px;
	border-radius: 6px;
	line-height: 1.1;
	margin-bottom: 14px;
}
.cp-badge-cat:hover { background: var(--cp-evergreen); color: #FFFFFF; text-decoration: none; }

.cp-article__title {
	font-family: var(--cp-serif);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--cp-evergreen-dark);
	margin: 0 0 14px;
	overflow-wrap: break-word;
}

.cp-article__meta {
	font-family: var(--cp-sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--cp-muted);
	margin: 0 0 24px;
}
.cp-article__meta a { color: var(--cp-green); font-weight: 600; }
.cp-article__meta a:hover { color: var(--cp-evergreen); }
.cp-article__dot { margin: 0 7px; color: #C0CDC8; }
.cp-article__updated { color: var(--cp-green); font-weight: 600; }

/* --- Featured image: cinematic, not enormous --- */

.cp-article__figure { margin: 0 0 8px; }
.cp-article__figure img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}
.cp-article__figure figcaption {
	font-family: var(--cp-sans);
	font-size: 13px;
	line-height: 1.5;
	color: #96A39E;
	margin-top: 12px;
}

/* --- Two columns --- */

.cp-article__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 50px;
	align-items: start;
	margin-top: 30px;
}

.cp-article__main { min-width: 0; }

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

.cp-article__body {
	font-family: var(--cp-sans);
	font-size: 18.5px;
	line-height: 1.75;
	color: var(--cp-charcoal);
	max-width: 68ch;
}

.cp-article__body p { margin: 0 0 24px; }

.cp-article__body h2 {
	font-family: var(--cp-serif);
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.2;
	color: var(--cp-evergreen-dark);
	margin: 60px 0 20px;
	scroll-margin-top: 90px;
}

.cp-article__body h3 {
	font-family: var(--cp-sans);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.012em;
	color: var(--cp-evergreen-dark);
	margin: 36px 0 12px;
	scroll-margin-top: 90px;
}

.cp-article__body ul,
.cp-article__body ol { margin: 0 0 24px; padding-left: 22px; }
.cp-article__body li { margin-bottom: 12px; padding-left: 4px; color: var(--cp-charcoal); }
.cp-article__body ul li::marker { color: var(--cp-green); font-size: .8em; }
.cp-article__body ol li::marker { color: var(--cp-green); font-weight: 600; font-size: .9em; }

.cp-article__body strong { font-weight: 600; color: var(--cp-evergreen-dark); }

.cp-article__body a {
	color: var(--cp-green);
	border-bottom: 1px solid rgba(47, 143, 107, .35);
}
.cp-article__body a:hover { color: var(--cp-evergreen); border-bottom-color: var(--cp-evergreen); text-decoration: none; }

.cp-article__body blockquote {
	margin: 0 0 24px;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--cp-green);
	color: var(--cp-muted);
}

/* Outbound link to an official page — editorial, clearly leaving the site.
   Never a button, which would imply we process the claim. */
.cp-article__body a.cp-out,
.cp-sources a.cp-out {
	font-weight: 600;
	border-bottom: 1px solid rgba(47, 143, 107, .45);
}
.cp-article__body a.cp-out::after,
.cp-sources a.cp-out::after {
	content: "\2197";
	font-size: .85em;
	margin-left: 3px;
	color: var(--cp-green);
}

/* --- Sticky TOC card --- */

.cp-article__side { position: relative; }

.cp-toc {
	position: sticky;
	top: 32px;
	background: #F1F6F4;
	border: 1px solid var(--cp-border);
	border-radius: 16px;
	padding: 26px;
}

.cp-toc__head {
	font-family: var(--cp-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--cp-evergreen-dark);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cp-border);
}

.cp-toc ul { list-style: none; margin: 0; padding: 0; }
.cp-toc li { margin-bottom: 15px; }
.cp-toc li:last-child { margin-bottom: 0; }

.cp-toc a {
	font-family: var(--cp-sans);
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--cp-muted);
	display: block;
	transition: color .12s ease;
}
.cp-toc a:hover { color: var(--cp-evergreen); text-decoration: none; }
.cp-toc a.is-active { color: var(--cp-green); font-weight: 600; }

/* --- Mobile TOC --- */

.cp-toc-mobile {
	display: none;
	border: 1px solid var(--cp-border);
	border-radius: 14px;
	background: #F1F6F4;
	margin: 0 0 32px;
}
.cp-toc-mobile summary {
	list-style: none;
	cursor: pointer;
	padding: 15px 20px;
	font-family: var(--cp-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cp-evergreen-dark);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cp-toc-mobile summary::-webkit-details-marker { display: none; }
.cp-toc-mobile summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--cp-green); }
.cp-toc-mobile[open] summary::after { content: "\2212"; }
.cp-toc-mobile ol { margin: 0; padding: 0 20px 18px 40px; }
.cp-toc-mobile li { margin-bottom: 10px; }
.cp-toc-mobile a { font-size: 15.5px; color: var(--cp-muted); }
.cp-toc-mobile li::marker { color: var(--cp-green); }

/* --- About This Page --- */

.cp-about-page {
	margin: 56px 0 0;
	padding: 26px 28px;
	background: #F1F6F4;
	border-left: 3px solid var(--cp-green);
	border-radius: 8px;
	max-width: 68ch;
}
.cp-about-page h2 {
	font-family: var(--cp-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--cp-evergreen-dark);
	margin: 0 0 10px;
	scroll-margin-top: 90px;
}
.cp-about-page p {
	font-family: var(--cp-sans);
	font-size: 15.5px;
	line-height: 1.68;
	color: #3A4F49;
	margin: 0;
}

/* --- Official Sources --- */

.cp-sources {
	margin: 44px 0 0;
	padding-top: 30px;
	border-top: 1px solid var(--cp-border);
	max-width: 68ch;
}
.cp-sources h2 {
	font-family: var(--cp-serif);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--cp-evergreen-dark);
	margin: 0 0 16px;
	scroll-margin-top: 90px;
}
.cp-sources ol { margin: 0; padding-left: 22px; }
.cp-sources li {
	font-family: var(--cp-sans);
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 12px;
	color: var(--cp-charcoal);
}
.cp-sources li::marker { color: var(--cp-green); font-weight: 600; }
.cp-sources a { color: var(--cp-green); }

@media (max-width: 1040px) {
	.cp-article__cols { grid-template-columns: 1fr; gap: 0; }
	.cp-article__side { display: none; }
	.cp-toc-mobile { display: block; }
	.cp-article { padding: 20px 0 60px; }
	.cp-article__wrap { padding: 0 20px; }
	.cp-crumbs { margin-bottom: 18px; }
	.cp-crumbs__current { display: none; }
	.cp-crumbs a:last-of-type ~ .cp-crumbs__sep { display: none; }
	.cp-article__head { margin-bottom: 26px; }
	.cp-article__title { font-size: 30px; }
	.cp-article__figure { margin-bottom: 30px; }
	.cp-article__figure img { max-height: 240px; border-radius: 12px; }
	.cp-article__body { font-size: 17.5px; max-width: none; }
	.cp-article__body h2 { font-size: 27px; margin-top: 44px; }
	.cp-about-page, .cp-sources { max-width: none; }
}

/* ==========================================================================
   13. Archive + other
   ========================================================================== */

.site-content .entry-title { font-size: 34px; }
.entry-meta { color: var(--cp-muted); font-size: 14px; }

.inside-article {
	background: var(--cp-card);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	padding: 30px;
}

.widget-area .widget {
	background: var(--cp-card);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	padding: 20px;
}
.widget-area .widget-title {
	font-size: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cp-border);
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Footer — proportions matched to Recall Refunds, in Consumer Payouts colours.
   Flexible columns (brand grows, link columns size to content) rather than a
   fixed percentage split.
   -------------------------------------------------------------------------- */

.cp-foot {
	background: var(--cp-evergreen-dark);
	width: 100%;
	padding: 60px 32px 32px;
	/* GeneratePress sets no global border-box, so a 100% width plus horizontal
	   padding renders 64px wider than the viewport and the whole page can be
	   dragged sideways on a phone. */
	box-sizing: border-box;
}

.cp-foot *,
.cp-foot *::before,
.cp-foot *::after { box-sizing: border-box; }

.cp-foot__wrap {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	padding: 0;
}

.cp-foot__cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 40px;
	padding-bottom: 0;
}

.cp-foot__brand { flex: 1 1 340px; max-width: 460px; padding-right: 0; }
.cp-foot__col   { flex: 0 0 auto; max-width: none; }

.cp-foot__logo {
	display: block;
	font-family: var(--cp-head);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: #FFFFFF;
	margin-bottom: 12px;
}
.cp-foot__logo:hover { color: #FFFFFF; text-decoration: none; }

/* Same gold tick as the header wordmark. */
.cp-foot__logo::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cp-gold);
	margin-left: 5px;
	vertical-align: 4px;
}

.cp-foot__tagline {
	margin: 0;
	font-family: var(--cp-sans);
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .5);
	max-width: 100%;
}

.cp-foot__head {
	margin: 0 0 16px;
	font-family: var(--cp-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
	line-height: 1.2;
}

.cp-foot__list { list-style: none; margin: 0; padding: 0; }
.cp-foot__list li { margin: 0; }

.cp-foot__list a {
	display: block;
	font-family: var(--cp-sans);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 10px;
	transition: color .2s;
}
.cp-foot__list a:hover { color: #FFFFFF; text-decoration: none; }

/* Divider is the bottom row's own top border, as on Recall Refunds. */
.cp-foot__rule { display: none; }

.cp-foot__bottom {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 24px 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.cp-foot__copy {
	margin: 0;
	font-family: var(--cp-sans);
	font-size: 13px;
	color: rgba(255, 255, 255, .35);
}

.cp-foot__mini {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.cp-foot__mini a {
	font-family: var(--cp-sans);
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	margin: 0;
	transition: color .2s;
}
.cp-foot__mini a:hover { color: #FFFFFF; text-decoration: none; }

@media (max-width: 1024px) {
	.cp-foot__cols { gap: 32px; }
	.cp-foot__brand { flex: 1 1 100%; max-width: none; }
}

@media (max-width: 768px) {
	.cp-foot { padding: 36px 20px 20px; }
	.cp-foot__cols { flex-direction: column; gap: 24px; margin-bottom: 32px; }
	.cp-foot__col { flex: 1 1 100%; }
	.cp-foot__bottom { flex-direction: column; gap: 8px; text-align: center; }
	.cp-foot__mini { flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   12. Single article — editorial layout, serif headlines, TOC card
   ========================================================================== */

.cp-article { background: var(--cp-bg); padding: 38px 0 72px; }

.cp-article__wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* --- Breadcrumbs --- */

.cp-crumbs {
	font-family: var(--cp-sans);
	font-size: 13px;
	line-height: 1.5;
	color: #8A9791;
	margin: 0 0 16px;
}
.cp-crumbs a { color: #8A9791; }
.cp-crumbs a:hover { color: var(--cp-green); text-decoration: none; }
.cp-crumbs__sep { margin: 0 8px; color: #B4C4BE; }
.cp-crumbs__current { color: var(--cp-muted); }

/* --- Header --- */

.cp-article__head { margin: 0 0 24px; }

.cp-badge-cat {
	display: inline-block;
	font-family: var(--cp-sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--cp-green);
	border-radius: 4px;
	padding: 5px 12px;
	border-radius: 6px;
	line-height: 1.1;
	margin-bottom: 14px;
}
.cp-badge-cat:hover { background: var(--cp-evergreen); color: #FFFFFF; text-decoration: none; }

.cp-article__title {
	font-family: var(--cp-serif);
	font-size: 40px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--cp-evergreen-dark);
	margin: 0 0 14px;
	overflow-wrap: break-word;
}

.cp-article__meta {
	font-family: var(--cp-sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--cp-muted);
	margin: 0 0 24px;
}
.cp-article__meta a { color: var(--cp-green); font-weight: 600; }
.cp-article__meta a:hover { color: var(--cp-evergreen); }
.cp-article__dot { margin: 0 7px; color: #C0CDC8; }
.cp-article__updated { color: var(--cp-green); font-weight: 600; }

/* --- Featured image: cinematic, not enormous --- */

.cp-article__figure { margin: 0 0 8px; }
.cp-article__figure img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}
.cp-article__figure figcaption {
	font-family: var(--cp-sans);
	font-size: 13px;
	line-height: 1.5;
	color: #96A39E;
	margin-top: 12px;
}

/* --- Two columns --- */

.cp-article__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 50px;
	align-items: start;
	margin-top: 30px;
}

.cp-article__main { min-width: 0; }

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

.cp-article__body {
	font-family: var(--cp-sans);
	font-size: 18.5px;
	line-height: 1.75;
	color: var(--cp-charcoal);
	max-width: 68ch;
}

.cp-article__body p { margin: 0 0 24px; }

.cp-article__body h2 {
	font-family: var(--cp-serif);
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.2;
	color: var(--cp-evergreen-dark);
	margin: 60px 0 20px;
	scroll-margin-top: 90px;
}

.cp-article__body h3 {
	font-family: var(--cp-sans);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.012em;
	color: var(--cp-evergreen-dark);
	margin: 36px 0 12px;
	scroll-margin-top: 90px;
}

.cp-article__body ul,
.cp-article__body ol { margin: 0 0 24px; padding-left: 22px; }
.cp-article__body li { margin-bottom: 12px; padding-left: 4px; color: var(--cp-charcoal); }
.cp-article__body ul li::marker { color: var(--cp-green); font-size: .8em; }
.cp-article__body ol li::marker { color: var(--cp-green); font-weight: 600; font-size: .9em; }

.cp-article__body strong { font-weight: 600; color: var(--cp-evergreen-dark); }

.cp-article__body a {
	color: var(--cp-green);
	border-bottom: 1px solid rgba(47, 143, 107, .35);
}
.cp-article__body a:hover { color: var(--cp-evergreen); border-bottom-color: var(--cp-evergreen); text-decoration: none; }

.cp-article__body blockquote {
	margin: 0 0 24px;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--cp-green);
	color: var(--cp-muted);
}

/* Outbound link to an official page — editorial, clearly leaving the site.
   Never a button, which would imply we process the claim. */
.cp-article__body a.cp-out,
.cp-sources a.cp-out {
	font-weight: 600;
	border-bottom: 1px solid rgba(47, 143, 107, .45);
}
.cp-article__body a.cp-out::after,
.cp-sources a.cp-out::after {
	content: "\2197";
	font-size: .85em;
	margin-left: 3px;
	color: var(--cp-green);
}

/* --- Sticky TOC card --- */

.cp-article__side { position: relative; }

.cp-toc {
	position: sticky;
	top: 32px;
	background: #F1F6F4;
	border: 1px solid var(--cp-border);
	border-radius: 16px;
	padding: 26px;
}

.cp-toc__head {
	font-family: var(--cp-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--cp-evergreen-dark);
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--cp-border);
}

.cp-toc ul { list-style: none; margin: 0; padding: 0; }
.cp-toc li { margin-bottom: 15px; }
.cp-toc li:last-child { margin-bottom: 0; }

.cp-toc a {
	font-family: var(--cp-sans);
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--cp-muted);
	display: block;
	transition: color .12s ease;
}
.cp-toc a:hover { color: var(--cp-evergreen); text-decoration: none; }
.cp-toc a.is-active { color: var(--cp-green); font-weight: 600; }

/* --- Mobile TOC --- */

.cp-toc-mobile {
	display: none;
	border: 1px solid var(--cp-border);
	border-radius: 14px;
	background: #F1F6F4;
	margin: 0 0 32px;
}
.cp-toc-mobile summary {
	list-style: none;
	cursor: pointer;
	padding: 15px 20px;
	font-family: var(--cp-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cp-evergreen-dark);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cp-toc-mobile summary::-webkit-details-marker { display: none; }
.cp-toc-mobile summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--cp-green); }
.cp-toc-mobile[open] summary::after { content: "\2212"; }
.cp-toc-mobile ol { margin: 0; padding: 0 20px 18px 40px; }
.cp-toc-mobile li { margin-bottom: 10px; }
.cp-toc-mobile a { font-size: 15.5px; color: var(--cp-muted); }
.cp-toc-mobile li::marker { color: var(--cp-green); }

/* --- About This Page --- */

.cp-about-page {
	margin: 56px 0 0;
	padding: 26px 28px;
	background: #F1F6F4;
	border-left: 3px solid var(--cp-green);
	border-radius: 8px;
	max-width: 68ch;
}
.cp-about-page h2 {
	font-family: var(--cp-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--cp-evergreen-dark);
	margin: 0 0 10px;
	scroll-margin-top: 90px;
}
.cp-about-page p {
	font-family: var(--cp-sans);
	font-size: 15.5px;
	line-height: 1.68;
	color: #3A4F49;
	margin: 0;
}

/* --- Official Sources --- */

.cp-sources {
	margin: 44px 0 0;
	padding-top: 30px;
	border-top: 1px solid var(--cp-border);
	max-width: 68ch;
}
.cp-sources h2 {
	font-family: var(--cp-serif);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--cp-evergreen-dark);
	margin: 0 0 16px;
	scroll-margin-top: 90px;
}
.cp-sources ol { margin: 0; padding-left: 22px; }
.cp-sources li {
	font-family: var(--cp-sans);
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 12px;
	color: var(--cp-charcoal);
}
.cp-sources li::marker { color: var(--cp-green); font-weight: 600; }
.cp-sources a { color: var(--cp-green); }

@media (max-width: 1040px) {
	.cp-article__cols { grid-template-columns: 1fr; gap: 0; }
	.cp-article__side { display: none; }
	.cp-toc-mobile { display: block; }
	.cp-article { padding: 20px 0 60px; }
	.cp-article__wrap { padding: 0 20px; }
	.cp-crumbs { margin-bottom: 18px; }
	.cp-crumbs__current { display: none; }
	.cp-crumbs a:last-of-type ~ .cp-crumbs__sep { display: none; }
	.cp-article__head { margin-bottom: 26px; }
	.cp-article__title { font-size: 30px; }
	.cp-article__figure { margin-bottom: 30px; }
	.cp-article__figure img { max-height: 240px; border-radius: 12px; }
	.cp-article__body { font-size: 17.5px; max-width: none; }
	.cp-article__body h2 { font-size: 27px; margin-top: 44px; }
	.cp-about-page, .cp-sources { max-width: none; }
}

/* ==========================================================================
   13. Archive + other
   ========================================================================== */

.site-content .entry-title { font-size: 34px; }
.entry-meta { color: var(--cp-muted); font-size: 14px; }

.inside-article {
	background: var(--cp-card);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	padding: 30px;
}

.widget-area .widget {
	background: var(--cp-card);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	padding: 20px;
}
.widget-area .widget-title {
	font-size: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cp-border);
	margin-bottom: 12px;
}

/* ==========================================================================
   14. Homepage full-bleed
   ========================================================================== */

/* GeneratePress wraps everything in .site.grid-container, which is what
   was squeezing the hero into a centred rectangle. Release it on the
   homepage only; each section re-constrains itself with .cp-wrap. */
.home .site.grid-container,
.home .site.container {
	max-width: none;
	width: 100%;
	padding: 0;
}

.home .site-content,
.home .content-area,
.home #primary {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}
.home .site-content .container,
.home .inside-article { padding: 0; }
.home .site-content { display: block; }

/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.cp-hero__grid { gap: 32px; }
	.cp-hero h1 { font-size: 34px; }
	.cp-featured { grid-template-columns: 260px minmax(0, 1fr); }
	.cp-featured__media { height: 190px; }
	.cp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
	.cp-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.cp-featured { grid-template-columns: 1fr; gap: 14px; }
	.cp-featured__media { height: 200px; }
	.cp-hero { padding: 44px 0 48px; }
	.cp-hero h1 { font-size: 30px; }
	.cp-hero p { font-size: 15px; }
	.cp-grid--3, .cp-grid--4 { grid-template-columns: 1fr; }
	.cp-section { padding: 38px 0; }
	.cp-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
	.inside-article { padding: 20px; }
}

/* ==========================================================================
   16. Mobile header — matches Recall Refunds: one compact row, GeneratePress
   native search icon + hamburger, links only after tapping.
   GP's own breakpoint is 768px, so these rules use the same width.
   ========================================================================== */

@media (max-width: 768px) {

	/* One row: wordmark left, search + hamburger right. */
	/* GeneratePress needs the row to WRAP so the navigation can fall onto its
	   own full-width line below the masthead. With nowrap the nav is squeezed
	   into the header row and the menu breaks. */
	.site-header#masthead .inside-header,
	.site-header#masthead .inside-header.grid-container {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 0;
		padding: 10px 20px;
		text-align: left;
	}

	.site-header#masthead .site-branding { flex: 0 1 auto; min-width: 0; }
	.site-header#masthead .main-title a { font-size: 20px; white-space: nowrap; }

	/* Closed, the navigation is just the hamburger and shares the masthead
	   row with the wordmark. Opened, it takes a full-width row beneath.
	   Both rules carry two IDs so neither is outranked by the other. */
	.site-header#masthead #site-navigation {
		flex: 0 0 auto;
		width: auto;
		order: 2;
	}
	.site-header#masthead #site-navigation.toggled {
		flex: 0 0 100%;
		width: 100%;
		order: 10;
	}

	/* GeneratePress puts the search item and the toggle in this wrapper. */
	#mobile-menu-control-wrapper,
	.site-header#masthead #mobile-menu-control-wrapper {
		display: flex;
		align-items: center;
		gap: 2px;
		flex: 0 0 auto;
		background: transparent;
		border: 0;
	}

	.site-header#masthead .menu-bar-items {
		display: flex;
		align-items: center;
		margin: 0;
	}

	.site-header#masthead .menu-bar-item > a,
	#mobile-menu-control-wrapper .menu-toggle,
	.main-navigation .menu-toggle {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		background: transparent;
		color: #FFFFFF;
		line-height: 1;
	}
	.site-header#masthead .menu-bar-item > a:hover,
	#mobile-menu-control-wrapper .menu-toggle:hover { color: var(--cp-gold); background: transparent; }

	.site-header#masthead .gp-icon svg { width: 21px; height: 21px; }

	/* ---- Mobile navigation controls -------------------------------------
	   GeneratePress renders up to four controls inside .inside-navigation:
	   an absolutely positioned search form, a .mobile-bar-items search icon,
	   the .menu-toggle button (text-only "Menu", with no glyph), and a
	   li.search-item inside the menu list. Left alone they sit on top of one
	   another. Closed state must be: wordmark left, one hamburger right. */

	/* Where GeneratePress supplies its own inline toggle, the nav's copies
	   are duplicates. */
	.has-inline-mobile-toggle .main-navigation#site-navigation .menu-toggle,
	.has-inline-mobile-toggle .main-navigation#site-navigation .menu-bar-items { display: none; }

	/* Search belongs inside the opened menu, never beside the hamburger. */
	.main-navigation#site-navigation .mobile-bar-items,
	.main-navigation#site-navigation .main-nav li.search-item { display: none; }

	.main-navigation#site-navigation .inside-navigation,
	.main-navigation#site-navigation .inside-navigation.grid-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		padding: 0;
	}

	body:not(.has-inline-mobile-toggle) .main-navigation#site-navigation {
		flex: 0 0 auto;
		width: auto;
		background: transparent;
	}
	body:not(.has-inline-mobile-toggle) .main-navigation#site-navigation.toggled {
		flex: 0 0 100%;
		width: 100%;
	}

	/* A clean 44x44 icon button. The label stays in the DOM for screen
	   readers but leaves the visual flow, so it cannot collide. */
	body:not(.has-inline-mobile-toggle) .main-navigation#site-navigation .menu-toggle {
		position: relative;
		display: flex;
		width: 44px;
		height: 44px;
		flex: 0 0 44px;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		color: #FFFFFF;
		cursor: pointer;
		order: 2;
	}

	.main-navigation#site-navigation .menu-toggle .mobile-menu {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	/* Hamburger drawn in CSS, because GeneratePress renders no glyph here:
	   a middle bar with two box-shadow bars, becoming an X when open. */
	body:not(.has-inline-mobile-toggle) .main-navigation#site-navigation .menu-toggle::before,
	body:not(.has-inline-mobile-toggle) .main-navigation#site-navigation .menu-toggle::after {
		content: "";
		position: absolute;
		left: 12px;
		top: 21px;
		width: 20px;
		height: 2px;
		background: currentColor;
		transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
	}
	body:not(.has-inline-mobile-toggle) .main-navigation#site-navigation .menu-toggle::before {
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
	}
	body:not(.has-inline-mobile-toggle) .main-navigation#site-navigation .menu-toggle::after { opacity: 0; }

	body:not(.has-inline-mobile-toggle) .main-navigation#site-navigation.toggled .menu-toggle::before {
		box-shadow: none;
		transform: rotate(45deg);
	}
	body:not(.has-inline-mobile-toggle) .main-navigation#site-navigation.toggled .menu-toggle::after {
		opacity: 1;
		transform: rotate(-45deg);
	}

	/* The search form is absolutely positioned over the nav; keep it inert
	   until GeneratePress activates it. */
	.main-navigation#site-navigation .navigation-search {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}
	.main-navigation#site-navigation .navigation-search.nav-search-active {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	/* The opened panel takes its own full-width row below the hamburger. */
	.main-navigation#site-navigation .main-nav { order: 3; flex: 0 0 100%; }


	/* Closed: no links. Open: evergreen panel under the header, pushing the
	   page down rather than overlaying it. */
	/* GeneratePress styles the opened panel with .has-inline-mobile-toggle
	   #site-navigation.toggled, which outranks a plain class selector, so the
	   override has to match that specificity. */
	.main-navigation#site-navigation,
	.has-inline-mobile-toggle #site-navigation.toggled,
	.has-inline-mobile-toggle .site-header #site-navigation.toggled {
		background: var(--cp-evergreen-dark);
		background-color: var(--cp-evergreen-dark);
		width: 100%;
	}
	.main-navigation#site-navigation:not(.toggled) .main-nav { display: none; }
	.main-navigation#site-navigation.toggled .main-nav { display: block; }

	.main-navigation#site-navigation .inside-navigation,
	.main-navigation#site-navigation .inside-navigation.grid-container { padding: 0; }

	.main-navigation#site-navigation.toggled .main-nav > ul {
		display: block;
		border-top: 1px solid rgba(255, 255, 255, .10);
	}
	.main-navigation#site-navigation.toggled .main-nav ul li {
		display: block;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}
	.main-navigation#site-navigation.toggled .main-nav ul li:last-child { border-bottom: 0; }

	.main-navigation#site-navigation.toggled .main-nav ul li a {
		display: block;
		padding: 16px 20px;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.3;
		color: #FFFFFF;
		border-bottom: 0;
	}
	/* The desktop active marker is a pseudo-element sized to the word; on a
	   full-width mobile row it stretches across the whole item. The gold text
	   colour already marks the current page here. */
	.main-navigation#site-navigation .main-nav ul li.current-menu-item > a::after,
	.main-navigation#site-navigation .main-nav ul li[class*="current-menu-"] > a::after { content: none; }

	.main-navigation#site-navigation.toggled .main-nav ul li.current-menu-item > a,
	.main-navigation#site-navigation.toggled .main-nav ul li[class*="current-menu-"] > a,
	body:not(.has-inline-mobile-toggle) .main-navigation#site-navigation.toggled .main-nav ul li.current-menu-item > a {
		color: var(--cp-gold);
		font-weight: 600;
	}

	/* GeneratePress's search field, when the icon is tapped. */
	.main-navigation#site-navigation .navigation-search input[type="search"],
	.site-header#masthead .navigation-search input[type="search"] {
		background: var(--cp-evergreen-dark);
		color: #FFFFFF;
		font-family: var(--cp-sans);
		font-size: 16px;
	}
}

/* Desktop keeps the search icon in the nav bar, styled to match the links. */
@media (min-width: 769px) {
	.main-navigation#site-navigation .menu-bar-items .menu-bar-item > a {
		color: #FFFFFF;
		line-height: 60px;
		padding: 0 12px;
	}
	.main-navigation#site-navigation .menu-bar-items .menu-bar-item > a:hover { color: var(--cp-gold); }
	.main-navigation#site-navigation .navigation-search input[type="search"] {
		background: var(--cp-evergreen);
		color: #FFFFFF;
	}
}

/* ==========================================================================
   17. Meet The Author
   Mirrors the Recall Refunds author page structure, in Consumer Payouts
   branding. Styles live here rather than inline in the page content so the
   page inherits the palette if it ever changes.
   ========================================================================== */

.cp-author { max-width: 800px; margin: 0 auto; }

.cp-author__card {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
	padding: 32px;
	margin: 0 0 40px;
	background: linear-gradient(135deg, #F1F6F4 0%, #FAFCFB 100%);
	border: 1px solid var(--cp-border);
	border-radius: 16px;
}

.cp-author__photo {
	width: 170px;
	height: 170px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--cp-green);
	box-shadow: 0 4px 18px rgba(11, 41, 36, .12);
	flex-shrink: 0;
	display: block;
}

.cp-author__intro { flex: 1; min-width: 240px; }

.cp-author__name {
	font-family: var(--cp-serif);
	font-size: 33px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--cp-evergreen-dark);
	margin: 0 0 6px;
}

.cp-author__role {
	font-family: var(--cp-sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--cp-green);
	margin: 0 0 18px;
}

.cp-author__links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.cp-author__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	background: var(--cp-green);
	color: #FFFFFF;
	border-radius: 6px;
	font-family: var(--cp-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}
.cp-author__btn:hover { background: var(--cp-evergreen); color: #FFFFFF; text-decoration: none; }

.cp-author__contact {
	font-family: var(--cp-sans);
	font-size: 14px;
	color: var(--cp-muted);
}
.cp-author__contact a { color: var(--cp-muted); }
.cp-author__contact a:hover { color: var(--cp-green); }

.cp-author__section { margin: 0 0 36px; }

.cp-author__section h2 {
	font-family: var(--cp-serif);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--cp-evergreen-dark);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--cp-green);
}

.cp-author__section p {
	font-family: var(--cp-sans);
	font-size: 17px;
	line-height: 1.72;
	color: var(--cp-charcoal);
	margin: 0 0 16px;
}
.cp-author__section p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.cp-author__card { gap: 22px; padding: 26px; text-align: center; justify-content: center; }
	.cp-author__photo { width: 140px; height: 140px; }
	.cp-author__links { justify-content: center; }
	.cp-author__name { font-size: 28px; }
	.cp-author__section p { font-size: 16px; }
}

/* ==========================================================================
   18. Category archive
   Same card components as the homepage, with a centred editorial masthead
   and pagination, so a section page reads as the same publication.
   ========================================================================== */

.cp-archive { background: var(--cp-bg); padding: 28px 0 80px; }

.cp-archive__head {
	text-align: center;
	max-width: 660px;
	margin: 0 auto 42px;
}

.cp-archive__head h1 {
	font-family: var(--cp-serif);
	font-size: 44px;
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--cp-evergreen-dark);
	margin: 0 0 12px;
}

.cp-archive__head p {
	font-family: var(--cp-sans);
	font-size: 17px;
	line-height: 1.6;
	color: var(--cp-muted);
	margin: 0;
}

/* Archive cards carry a short excerpt; homepage cards deliberately do not. */
.cp-card__excerpt {
	font-family: var(--cp-sans);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--cp-muted);
	margin: 0 0 16px;
}

/* Pagination */
.cp-pagination {
	margin-top: 46px;
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.cp-pagination .page-numbers {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid var(--cp-border);
	border-radius: 8px;
	background: var(--cp-card);
	color: var(--cp-evergreen-dark);
	font-family: var(--cp-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}
.cp-pagination .page-numbers:hover {
	background: var(--cp-green);
	border-color: var(--cp-green);
	color: #FFFFFF;
	text-decoration: none;
}
.cp-pagination .page-numbers.current {
	background: var(--cp-evergreen);
	border-color: var(--cp-evergreen);
	color: #FFFFFF;
}
.cp-pagination .page-numbers.dots { background: transparent; border-color: transparent; }

/* Empty state */
.cp-archive__empty {
	text-align: center;
	padding: 70px 20px;
	background: var(--cp-card);
	border: 1px dashed var(--cp-border);
	border-radius: var(--cp-radius);
}
.cp-archive__empty p {
	font-family: var(--cp-sans);
	font-size: 18px;
	color: var(--cp-muted);
	margin: 0 0 22px;
}

@media (max-width: 880px) {
	.cp-archive { padding: 20px 0 60px; }
	.cp-archive__head { margin-bottom: 30px; }
	.cp-archive__head h1 { font-size: 31px; }
	.cp-archive__head p { font-size: 16px; }
	.cp-pagination { margin-top: 34px; }
}