/* ==========================================================================
   GoodLives blog — design system (single posts only, scoped to body.gl-blog)
   Brand: Brand Guidelines.pdf, reduced to three colours (2026-10-18):
   logo green #49AF7C (and its light tints), sage #394B42 (text and icons only,
   never a fill), and white. Red appears only in form error messages.

   Design rules (2026-10-18 refinement):
   - Spacing runs on an 8px scale (tokens --gl-s*). Prose rhythm uses
     --gl-flow (paragraphs), --gl-block (components) and --gl-h2-space.
   - Text is always sage. Green is for fills, rules, markers and icons, never
     for running text or labels (green text on white is 2.66:1).
   - Components use three surface treatments so a long post has rhythm:
       tint    (green tint fill, no border)   helpline, in short, stats, red flags, CTA, newsletter
       outline (white, 1px green-tint border) includes, grid cards, split, table, platform, helpful
       plain   (no box, rules only)           summary, quote, contrast, questions, FAQ, author
   - Shadows only where something sits on green (hero cards) or lifts on hover.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
.gl-blog {
	/* Three colours only: logo green (plus its light tints), sage for text, white.
	   Sage is used for text and icons, never as a filled background. */
	--gl-bg: #FFFFFF;
	--gl-surface: #FFFFFF;
	--gl-text: #394B42;
	--gl-text-soft: #5E6E66;
	--gl-btn: #49AF7C;
	--gl-btn-hover: #3C9468;
	--gl-btn-text: #FFFFFF;

	/* Light tints are hue-true mixes of the logo green and white (T11, 2026-10-18).
	   The guideline tints (#E8FDF2, #F8FFFB, #DCF6E9, #C4EED9, #89D4AF) lean lime
	   and yellow on screen, so they are no longer used. Mix = % of #49AF7C. */
	--gl-g-900: #394B42;  /* sage: text and icons only */
	--gl-g-600: #49AF7C;  /* logo green */
	--gl-g-400: #B6DFCB;  /* 40% */
	--gl-g-300: #D3ECE0;  /* 24% */
	--gl-g-200: #E2F2EA;  /* 16% */
	--gl-g-100: #EDF7F2;  /* 10% */
	--gl-g-75:  #F4FAF7;  /*  6% */
	--gl-g-50:  #F8FCFA;  /*  4% */

	/* Hairlines and outlines come straight from the green tint scale. */
	--gl-border: var(--gl-g-200);        /* dividers inside components */
	--gl-border-strong: var(--gl-g-300); /* outlined components */

	--gl-radius-lg: 24px;
	--gl-radius: 16px;
	--gl-radius-sm: 12px;
	--gl-radius-xs: 8px;
	--gl-radius-pill: 999px; /* not used for buttons: they are 12px everywhere (T20) */
	/* Raised: only for white cards on the green hero, and hover lifts. */
	--gl-shadow: 0 1px 2px rgba(57, 75, 66, .06), 0 12px 32px rgba(57, 75, 66, .14);
	--gl-shadow-lg: 0 2px 4px rgba(57, 75, 66, .04), 0 16px 40px rgba(57, 75, 66, .10);
	--gl-shadow-btn: 0 1px 2px rgba(57, 75, 66, .08), 0 4px 12px rgba(73, 175, 124, .22);
	--gl-font: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* 8px spacing scale */
	--gl-s1: 8px; --gl-s2: 16px; --gl-s3: 24px; --gl-s4: 32px;
	--gl-s5: 40px; --gl-s6: 48px; --gl-s7: 56px; --gl-s8: 64px; --gl-s10: 80px;

	--gl-h1: 40px; --gl-h2: 32px; --gl-h3: 24px;
	--gl-lead: 20px; --gl-body: 18px; --gl-small: 14px;
	--gl-flow: 24px;       /* space after a paragraph or list */
	--gl-block: 40px;      /* space around a content component */
	--gl-h2-space: 64px;   /* space above an H2 */
	--gl-h3-space: 40px;   /* space above an H3 */
	--gl-pad: 24px;        /* inner padding of boxed components */

	/* One frame for hero, article and related posts, so their edges line up.
	   704px of 18px Quicksand is about 81 characters a line, spaces included
	   (T16: widened from 680px ≈ 80; kept below ~85 for reading comfort). */
	--gl-content-w: 704px;
	--gl-sidebar-w: 320px; /* fits "Ready to talk to someone?" on one line (T06) */
	--gl-gap: 96px;        /* T16: was 72px */
	--gl-frame: calc(var(--gl-sidebar-w) + var(--gl-gap) + var(--gl-content-w));
	--gl-nav-offset: 96px;
}

@media (max-width: 767px) {
	.gl-blog {
		--gl-h1: 26px; --gl-h2: 22px; --gl-h3: 19px;
		--gl-lead: 17px; --gl-body: 16px; --gl-small: 13px;
		--gl-flow: 20px;
		--gl-block: 32px;
		--gl-h2-space: 48px;
		--gl-h3-space: 32px;
		--gl-pad: 20px;
		--gl-nav-offset: 76px;
	}
}

/* 2. Page base and Hestia overrides --------------------------------------- */
body.gl-blog,
.gl-blog .wrapper,
.gl-blog .main {
	background: var(--gl-bg);
}
body.gl-blog {
	font-family: var(--gl-font);
	color: var(--gl-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.gl-blog .navbar,
.gl-blog .navbar .navbar-nav > li > a,
.gl-blog .footer {
	font-family: var(--gl-font);
}
/* Hestia's accent (pink by default) leaks into the footer links. */
.gl-blog .footer a { color: var(--gl-text); }
.gl-blog .footer a:hover { color: var(--gl-text); text-decoration: underline; text-decoration-color: var(--gl-g-600); }
html:has(body.gl-blog) {
	scroll-behavior: smooth;
	scroll-padding-top: var(--gl-nav-offset);
}

.gl-main {
	display: block;
	padding-top: var(--gl-nav-h, 70px); /* Hestia's fixed navbar; JS measures the real height */
	font-family: var(--gl-font);
	color: var(--gl-text);
	font-size: var(--gl-body);
	line-height: 1.7;
}
.gl-main *,
.gl-main *::before,
.gl-main *::after { box-sizing: border-box; }
.gl-main :is(h1, h2, h3, h4, h5, h6, p, li, td, th, a, button, input, textarea, label, figcaption, summary, blockquote, dt, dd, span) {
	font-family: var(--gl-font);
}

.gl-container {
	width: 100%;
	max-width: calc(var(--gl-frame) + 48px);
	margin: 0 auto;
	padding: 0 24px;
}
@media (max-width: 767px) {
	.gl-container { padding: 0 16px; }
}

.gl-main a { color: var(--gl-text); }
.gl-main a:focus-visible,
.gl-main button:focus-visible,
.gl-main summary:focus-visible,
.gl-main input:focus-visible,
.gl-main textarea:focus-visible {
	outline: 2px solid var(--gl-g-900);
	outline-offset: 2px;
}
/* On green surfaces the focus ring turns white. */
.gl-main :is(.gl-hero, .gl-pcard) :is(a, button):focus-visible { outline-color: #fff; }
/* …except inside the white cards that sit on the hero. */
.gl-main .gl-hero .gl-meta-card :is(a, button):focus-visible { outline-color: var(--gl-g-900); }
.gl-main .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.gl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.gl-icon { flex: none; display: inline-block; vertical-align: middle; }

/* Reduced motion: no smooth scroll, lifts or slides. */
@media (prefers-reduced-motion: reduce) {
	html:has(body.gl-blog) { scroll-behavior: auto; }
	.gl-main *,
	.gl-main *::before,
	.gl-main *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.gl-main :is(.gl-btn, .gl-related__card, .gl-pref-source):hover { transform: none !important; }
}

/* 3. Buttons, chips, labels ------------------------------------------------ */
.gl-main .gl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center; /* a label that wraps on a narrow phone stays centred (T24 R3) */
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--gl-radius-sm);
	background: var(--gl-btn);
	color: var(--gl-btn-text);
	font-family: var(--gl-font);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-decoration: none;
	text-transform: none;
	box-shadow: var(--gl-shadow-btn);
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gl-main .gl-btn:hover,
.gl-main .gl-btn:focus-visible {
	background: var(--gl-btn-hover);
	color: var(--gl-btn-text);
	text-decoration: none;
	transform: translateY(-1px);
}
.gl-main .gl-btn--block { display: flex; width: 100%; }
.gl-main .gl-btn--sm { min-height: 44px; padding: 8px 20px; font-size: 16px; }
.gl-main .gl-btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Hestia gives every <button> an accent-coloured shadow through a very specific
   inline selector, so !important is the only reliable override. */
.gl-main button:not(.gl-btn),
.gl-main button:not(.gl-btn):hover,
.gl-main button:not(.gl-btn):focus { box-shadow: none !important; text-transform: none; letter-spacing: normal; }
.gl-main button.gl-btn,
.gl-main input[type="submit"].gl-btn,
.gl-main button.gl-btn:hover,
.gl-main input[type="submit"].gl-btn:hover { box-shadow: var(--gl-shadow-btn) !important; text-transform: none; }
.gl-main .gl-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 20px;
	border: 1px solid var(--gl-border-strong);
	border-radius: var(--gl-radius-sm); /* buttons are 12px everywhere (T20) */
	background: var(--gl-surface);
	color: var(--gl-text);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.gl-main .gl-chip { white-space: nowrap; } /* "Not really" stays on one line at 320px (T24 R4) */
.gl-main .gl-chip .gl-icon { color: var(--gl-g-600); }
.gl-main .gl-chip:hover { background: var(--gl-g-50); border-color: var(--gl-g-400); }
.gl-main .gl-chip.is-selected { background: var(--gl-g-100); border-color: var(--gl-g-600); }

/* Labels (QUICK SUMMARY, RED FLAGS…): sage text, so they pass contrast. */
.gl-main .gl-label {
	margin: 0 0 var(--gl-s2);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gl-text);
}
.gl-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gl-g-400); display: inline-block; }

/* 4. Hero ------------------------------------------------------------------ */
.gl-hero {
	position: relative;
	overflow: hidden;
	padding: var(--gl-s6) 0 var(--gl-s8);
	/* Logo green, with two soft white circles for depth (same colour, no new hues). */
	background:
		radial-gradient(560px 560px at 100% 0%, rgba(255, 255, 255, .10), transparent 60%),
		radial-gradient(420px 420px at 0% 100%, rgba(255, 255, 255, .07), transparent 60%),
		var(--gl-g-600);
	color: #fff;
}
.gl-hero__grid {
	display: grid;
	/* Equal columns (was 1.2fr / 1fr) so the featured image card reads larger (T01). */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--gl-s7);
	align-items: start;
}
/* Breadcrumb: quiet text, not a pill, so it doesn't compete with the button. */
.gl-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--gl-s1);
	max-width: 100%;
	margin-bottom: var(--gl-s3);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.4;
}
.gl-breadcrumb a {
	display: inline-block;
	padding: 4px 0;
	color: #fff !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .45);
}
.gl-breadcrumb a:hover { border-bottom-color: #fff; text-decoration: none; }
.gl-breadcrumb__sep { color: #fff; opacity: .7; display: inline-flex; }
.gl-breadcrumb__current {
	color: #fff;
	max-width: 32ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gl-main .gl-hero__title {
	margin: 0 0 var(--gl-s3);
	font-size: var(--gl-h1);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: #fff;
}
.gl-hero__intro {
	max-width: 52ch;
	margin: 0 0 var(--gl-s4);
	font-size: var(--gl-lead);
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
}
.gl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: var(--gl-s3); }
/* On the green hero the primary button flips to white with sage text. */
.gl-main .gl-hero .gl-btn--primary {
	min-height: 52px;
	padding: 14px 22px;
	border-radius: var(--gl-radius-sm); /* 12px, same as every other button (T20: no pills anywhere) */
	background: #fff;
	color: var(--gl-text);
	box-shadow: 0 8px 20px rgba(57, 75, 66, .16);
}
.gl-main .gl-hero .gl-btn--primary:hover,
.gl-main .gl-hero .gl-btn--primary:focus-visible { background: var(--gl-g-50); color: var(--gl-text); }

/* Trust strip (T18): quiet inline social proof on the green, not a button.
   No background, border, shadow or pill; small white text and icons. */
.gl-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	margin-bottom: 0;
	color: #fff;
}
.gl-trust__item { display: inline-flex; align-items: center; gap: 8px; }
/* Small white discs keep the heart and the Google mark true on the green. */
.gl-trust__icon,
.gl-trust__item > .gl-google {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	box-sizing: border-box;
	width: 24px; height: 24px; border-radius: 50%;
	background: #fff; color: var(--gl-g-600);
}
/* Filled red heart (T19). Red is allowed only here, the Red flags heading and
   form errors. #E5484D is a warm red that sits well beside the logo green;
   on the white disc it is about 3.9:1 (non-text minimum is 3:1). */
.gl-trust__icon { color: #E5484D; }
.gl-trust__icon svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; }
.gl-trust__item > .gl-google { padding: 4px; }
.gl-trust__label { font-size: 14px; font-weight: 600; line-height: 1.3; color: #fff; }
.gl-trust__rating { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.gl-trust__divider { width: 1px; height: 16px; background: rgba(255, 255, 255, .45); }
.gl-stars { display: inline-flex; gap: 1px; color: var(--gl-g-600); }
.gl-trust .gl-stars { color: #fff; }
/* Responsive variants of the trust line (T22): hidden on desktop. */
.gl-trust__item--short,
.gl-trust__tiny { display: none; }
.gl-trust .gl-stars svg { width: 12px; height: 12px; }

/* Preferred source (T05): a compact white button with a soft shadow, the
   full-colour Google G and a small ↗, matching the owner's reference. It shares
   the 12px button radius with Book a Session (T20) so the two read as a pair. */
.gl-main .gl-pref-source {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 6px 14px 6px 10px;
	border-radius: var(--gl-radius-sm); /* 12px, same as Book a Session (T20) */
	background: #fff;
	border: 0;
	box-shadow: 0 8px 20px rgba(57, 75, 66, .16);
	color: var(--gl-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}
.gl-main .gl-pref-source > .gl-google { flex: none; width: 32px; height: 32px; }
.gl-main .gl-pref-source > span { max-width: 180px; } /* breaks after "preferred" */
.gl-main .gl-pref-source > .gl-icon { flex: none; align-self: flex-end; margin-bottom: 9px; color: var(--gl-text-soft); }
.gl-main .gl-pref-source:hover,
.gl-main .gl-pref-source:focus-visible { background: var(--gl-g-50); color: var(--gl-text); text-decoration: none; transform: translateY(-1px); }

.gl-hero__media { display: flex; flex-direction: column; gap: var(--gl-s2); }

/* Desktop hero grid (T17): one shared row holds the action buttons (left) and
   the meta card with the share icons (right), centred on each other, so the
   two always line up whatever the title length. The image spans the rows
   above; any extra height becomes air between the image and the meta card. */
@media (min-width: 1024px) {
	.gl-hero__grid {
		grid-template-areas:
			"crumb   image"
			"title   image"
			"intro   image"
			"actions meta"
			"trust   .";
		grid-template-rows: auto auto 1fr auto auto;
		row-gap: 0;
	}
	.gl-hero__text,
	.gl-hero__media { display: contents; }
	.gl-breadcrumb { grid-area: crumb; }
	.gl-main .gl-hero__title { grid-area: title; }
	.gl-hero__intro { grid-area: intro; align-self: start; }
	.gl-hero__image { grid-area: image; align-self: start; margin-bottom: var(--gl-s3); }
	.gl-hero__actions { grid-area: actions; align-self: center; margin-bottom: 0; }
	.gl-meta-card { grid-area: meta; align-self: center; }
	.gl-trust { grid-area: trust; justify-self: start; margin-top: var(--gl-s3); }
}
/* White cards sitting on the green hero use the normal text colour. */
.gl-hero .gl-meta-card { color: var(--gl-text); }
.gl-hero__image {
	margin: 0;
	border-radius: var(--gl-radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--gl-g-100), var(--gl-g-300));
	box-shadow: var(--gl-shadow);
}
.gl-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-hero__image--empty { display: flex; align-items: center; justify-content: center; }
.gl-hero__placeholder { font-size: 28px; font-weight: 600; color: var(--gl-g-900); opacity: .7; }

.gl-meta-card {
	/* Compact E-E-A-T card (T03): author on the left, share icons on the right,
	   one row on desktop. About 95px tall instead of 250px. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px var(--gl-s2);
	padding: var(--gl-s2) 20px;
	border-radius: var(--gl-radius);
	background: var(--gl-surface);
	box-shadow: var(--gl-shadow);
}
.gl-meta-card__author { display: flex; align-items: center; gap: 12px; flex: 1 1 180px; min-width: 0; container-type: inline-size; }
.gl-main .gl-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.gl-main .gl-meta-card__name {
	display: inline-block; /* own line box, so the name never clips (T17) */
	padding-top: 1px;
	font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--gl-text);
	text-decoration: underline; text-decoration-color: var(--gl-g-400); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.gl-main .gl-meta-card__name:hover { text-decoration-color: var(--gl-g-600); }
.gl-meta-card__line {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
	margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--gl-text-soft);
}
/* When the author block is narrow (desktop hero), date and read time stack
   cleanly instead of wrapping with a dangling dot. */
@container (max-width: 280px) {
	.gl-meta-card__line { flex-direction: column; align-items: flex-start; }
	.gl-meta-card__line .gl-dot { display: none; }
}
/* Reviewer line (only when GL_SHOW_REVIEWER is on): full width, under the row. */
.gl-reviewed {
	order: 3;
	flex-basis: 100%;
	display: flex; align-items: center; gap: 8px;
	margin: 0; padding: 8px 12px;
	border-radius: var(--gl-radius-xs);
	background: var(--gl-g-50);
	font-size: 13px; line-height: 1.45;
	color: var(--gl-text);
}
.gl-reviewed .gl-icon { color: var(--gl-g-600); }
.gl-share {
	display: flex; align-items: center; flex: none;
	margin: 0; padding: 0;
}
/* The label stays for screen readers; the icons explain themselves visually. */
.gl-share__label {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.gl-share__buttons { position: relative; display: flex; gap: 6px; }
.gl-main .gl-share__btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0;
	border: 1px solid var(--gl-border-strong); border-radius: 50%;
	background: var(--gl-surface); color: var(--gl-text);
	cursor: pointer; text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.gl-main .gl-share__btn svg { width: 16px; height: 16px; }
.gl-main .gl-share__btn:hover { background: var(--gl-g-600); border-color: var(--gl-g-600); color: #fff; }
.gl-share__toast {
	position: absolute; right: 0; top: -36px;
	padding: 4px 10px; border-radius: var(--gl-radius-xs);
	background: var(--gl-surface); color: var(--gl-text);
	border: 1px solid var(--gl-border-strong);
	box-shadow: var(--gl-shadow);
	font-size: 13px; font-weight: 600; white-space: nowrap;
	opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.gl-share__toast.is-visible { opacity: 1; }

/* 5. Layout: article + sidebar -------------------------------------------- */
/* Desktop: article on the left, contents list and persistent card on the right
   (T07). The sidebar stays first in the DOM so that on tablet and phone the
   collapsible contents card still sits above the article. */
.gl-layout {
	display: grid;
	grid-template-columns: minmax(0, var(--gl-content-w)) var(--gl-sidebar-w);
	justify-content: space-between;
	gap: var(--gl-gap);
	padding-top: var(--gl-s6);
	padding-bottom: var(--gl-s10);
}
/* Sticks 24px below the real navbar bottom (JS measures --gl-nav-h, admin bar
   included), so there is no dead band above the contents list (T06). */
.gl-layout > .gl-sidebar { grid-column: 2; grid-row: 1; }
.gl-layout > .gl-article { grid-column: 1; grid-row: 1; }
.gl-sidebar__sticky {
	position: sticky;
	top: calc(var(--gl-nav-h, 70px) + var(--gl-s3));
	display: flex;
	flex-direction: column;
	gap: var(--gl-s4);
}
/* The contents list scrolls inside itself so the persistent card stays fully visible. */
.gl-toc__nav {
	max-height: max(160px, calc(100vh - var(--gl-nav-h, 70px) - 420px));
	padding: 4px 0;
	/* Soft fade at the clipped edges so a scrolled list doesn't look cut off. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--gl-g-300) transparent;
	overscroll-behavior: contain;
}

/* Contents list: plain on desktop (a rail, not a card) so it sits lighter
   than the green card below it. On tablet and phone it becomes a card. */
.gl-toc { padding: 0; }
.gl-toc__heading {
	display: flex; align-items: center; gap: 8px;
	padding: 0 0 12px;
	list-style: none;
	font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--gl-text);
	cursor: default;
}
.gl-toc__heading .gl-icon { color: var(--gl-g-600); }
.gl-toc__heading::-webkit-details-marker { display: none; }
.gl-toc__list { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--gl-g-200); }
.gl-toc__item { margin: 0; }
.gl-main .gl-toc__item a {
	display: block;
	margin-left: -2px;
	padding: 8px 12px 8px 16px;
	border-left: 2px solid transparent;
	font-size: 15px; font-weight: 500; line-height: 1.45;
	color: var(--gl-text-soft);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.gl-main .gl-toc__item a:focus-visible { outline-offset: -2px; }
.gl-main .gl-toc__item--h3 a { padding-left: 32px; font-size: 14px; }
.gl-main .gl-toc__item a:hover { color: var(--gl-text); border-left-color: var(--gl-g-400); }
.gl-main .gl-toc__item a.is-active {
	border-left-color: var(--gl-g-600);
	color: var(--gl-text);
	font-weight: 600;
}

/* Persistent card */
.gl-pcard {
	position: relative;
	overflow: hidden;
	padding: 22px;
	border-radius: var(--gl-radius);
	/* Logo green, matching the hero. */
	background:
		radial-gradient(240px 200px at 100% 0%, rgba(255, 255, 255, .14), transparent 65%),
		var(--gl-g-600);
	color: #fff;
}
.gl-main .gl-pcard__title { margin: 0 0 var(--gl-s2); font-size: 20px; font-weight: 600; line-height: 1.3; color: #fff; }
.gl-pcard__list { margin: 0 0 var(--gl-s3); padding: 0; list-style: none; }
.gl-pcard__list li { display: flex; gap: 8px; margin: 0 0 var(--gl-s1); font-size: 15px; font-weight: 500; line-height: 1.45; color: #fff; }
.gl-pcard__list .gl-icon { width: 16px; height: 16px; color: #fff; margin-top: 3px; }
.gl-main .gl-pcard .gl-btn--primary { background: #fff; color: var(--gl-text); box-shadow: 0 6px 16px rgba(57, 75, 66, .16) !important; }
.gl-main .gl-pcard .gl-btn--primary:hover,
.gl-main .gl-pcard .gl-btn--primary:focus-visible { background: var(--gl-g-50); color: var(--gl-text); }
.gl-pcard__sub { margin: 12px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: #fff; }

/* 6. Article typography ---------------------------------------------------- */
.gl-article { min-width: 0; }
/* Medium 500 for body: Quicksand Regular is thin on screen at 16–18px. */
.gl-content { font-size: var(--gl-body); font-weight: 500; line-height: 1.75; color: var(--gl-text); }
.gl-content > :first-child { margin-top: 0 !important; }
.gl-content p { margin: 0 0 var(--gl-flow); }
.gl-main .gl-content h2 {
	margin: var(--gl-h2-space) 0 var(--gl-s2);
	font-size: var(--gl-h2);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--gl-text);
}
.gl-main .gl-content h3 {
	margin: var(--gl-h3-space) 0 12px;
	font-size: var(--gl-h3);
	font-weight: 600;
	line-height: 1.3;
	color: var(--gl-text);
}
.gl-main .gl-content h4 { margin: var(--gl-s4) 0 var(--gl-s1); font-size: 20px; font-weight: 600; line-height: 1.35; }
/* A heading straight after another heading or a component needs less air. */
.gl-main .gl-content :is(h2, h3) + h3 { margin-top: var(--gl-s3); }
.gl-content :is(h2, h3) { scroll-margin-top: var(--gl-nav-offset); }
.gl-main .gl-content a {
	color: var(--gl-g-900);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--gl-g-600);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-skip-ink: auto;
	transition: background-color .15s ease;
}
.gl-main .gl-content a:hover { background: var(--gl-g-100); text-decoration-color: var(--gl-g-900); }
.gl-content strong, .gl-content b { font-weight: 700; }
.gl-content ul, .gl-content ol { margin: 0 0 var(--gl-flow); padding-left: 1.5em; }
.gl-content li { margin: 0 0 var(--gl-s1); padding-left: .25em; }
.gl-content li > :is(ul, ol) { margin: var(--gl-s1) 0 0; }
.gl-content ul > li::marker { color: var(--gl-g-600); font-size: 1.1em; }
.gl-content ol > li::marker { color: var(--gl-text); font-weight: 700; }
.gl-content hr { border: 0; height: 1px; background: var(--gl-border-strong); margin: var(--gl-s6) 0; }
/* In-article images never dominate the screen: capped to ~60% of the viewport
   height (comfortable on a 12-inch laptop in one scroll), width follows aspect. */
.gl-content img { max-width: 100%; height: auto; max-height: 60vh; border-radius: var(--gl-radius); }
.gl-content blockquote:not(.gl-quote blockquote) {
	margin: var(--gl-block) 0;
	padding: 4px 0 4px var(--gl-s3);
	border-left: 4px solid var(--gl-g-600);
	background: none;
	font-size: var(--gl-lead);
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
}
.gl-content blockquote:not(.gl-quote blockquote) p:last-child { margin-bottom: 0; }
.gl-content figure { margin: var(--gl-block) 0; max-width: 100%; }
.gl-content :is(figure.gl-figure, figure.wp-block-image, figure.wp-caption) img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 60vh;
	margin-inline: auto;
	border: 1px solid var(--gl-border);
}
.gl-content figcaption,
.gl-content .wp-caption-text {
	margin-top: 12px;
	font-size: var(--gl-small);
	font-weight: 500;
	line-height: 1.5;
	color: var(--gl-text-soft);
	text-align: center;
}
.gl-content iframe { max-width: 100%; border-radius: var(--gl-radius); }

/* Plain tables (any table in content) */
.gl-content table:not(.gl-table) {
	width: 100%;
	margin: var(--gl-block) 0;
	border-collapse: collapse;
	font-size: 16px;
}
.gl-content table:not(.gl-table) :is(th, td) { padding: 12px 16px; border: 1px solid var(--gl-border-strong); text-align: left; vertical-align: top; }
.gl-content table:not(.gl-table) th { background: var(--gl-g-100); font-weight: 700; }
.gl-content table:not(.gl-table) thead th { background: var(--gl-g-600); border-color: var(--gl-g-600); color: #fff; }

/* 7. Content components ---------------------------------------------------- */
.gl-content > :is(.gl-helpline, .gl-summary, .gl-includes, .gl-quote, .gl-grid, .gl-stats, .gl-table-wrap,
	.gl-contrast, .gl-split, .gl-redflags, .gl-questions, .gl-cta, .gl-faq, .gl-fit, .gl-platform) {
	margin-top: var(--gl-block);
	margin-bottom: var(--gl-block);
}
/* 7.1 Helpline block — TINT. Phone numbers are sage and bold: in a crisis the
   number is the most important thing on the page, so it gets full contrast. */
.gl-helpline {
	padding: var(--gl-pad);
	border-radius: var(--gl-radius);
	background: var(--gl-g-100);
}
.gl-helpline__lead { margin: 0 0 var(--gl-s2) !important; font-weight: 600; line-height: 1.55; }
.gl-helpline__list { margin: 0 !important; padding: 0 !important; list-style: none; display: grid; gap: var(--gl-s1); }
.gl-helpline__list li {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
	margin: 0 !important; padding: 12px 16px !important;
	border-radius: var(--gl-radius-sm);
	background: var(--gl-surface);
	font-size: 16px;
	line-height: 1.45;
}
.gl-helpline__list li::marker { content: none; }
.gl-main .gl-content .gl-helpline__list a {
	display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
	min-height: 28px;
	text-decoration: none; font-weight: 700; color: var(--gl-g-900);
}
.gl-main .gl-content .gl-helpline__list a:hover { background: none; }
.gl-main .gl-helpline__list a span {
	color: var(--gl-g-900);
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: var(--gl-g-600);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.gl-helpline__note { font-size: 14px; color: var(--gl-text-soft); }

/* 7.2 Quick Summary — PLAIN. A lead paragraph with a green rule, no box. */
.gl-summary {
	position: relative;
	padding: 4px 0 4px var(--gl-s3);
	border-left: 4px solid var(--gl-g-600);
}
.gl-summary .gl-label { display: flex; align-items: center; gap: var(--gl-s1); }
.gl-summary .gl-label::before {
	content: ""; width: 28px; height: 28px; border-radius: 50%;
	background: var(--gl-g-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2349AF7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 14h6l-1 7 8-11h-6l1-7z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.gl-summary p:not(.gl-label) { margin: 0; font-size: var(--gl-lead); font-weight: 500; line-height: 1.6; }

/* 7.3 What this blog includes — OUTLINE */
.gl-includes {
	padding: var(--gl-pad) var(--gl-pad) 12px;
	border: 1px solid var(--gl-border-strong);
	border-radius: var(--gl-radius);
	background: var(--gl-surface);
}
.gl-includes ul { margin: 0 !important; padding: 0 !important; list-style: none; }
.gl-includes li {
	position: relative;
	margin: 0 !important; padding: 12px 0 12px 36px !important;
	border-top: 1px solid var(--gl-border);
	font-size: 16px; line-height: 1.55;
}
.gl-includes li::before {
	content: ""; position: absolute; left: 0; top: 14px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--gl-g-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* 7.4 In short / Example callouts
   In short = TINT (a takeaway). Example = dashed OUTLINE (a made-up scene). */
.gl-content .gl-inshort,
.gl-content .gl-example {
	margin: var(--gl-s4) 0;
	padding: var(--gl-s2) 20px;
	border-radius: var(--gl-radius-sm);
	font-size: 17px;
	line-height: 1.65;
}
.gl-content .gl-inshort { background: var(--gl-g-100); }
.gl-content .gl-example { background: var(--gl-surface); border: 1.5px dashed var(--gl-g-400); }
.gl-content :is(.gl-inshort, .gl-example) strong:first-child { color: var(--gl-text); }

/* 7.5 Quote — PLAIN. Editorial pull quote between hairlines, no card. */
.gl-quote {
	position: relative;
	margin: var(--gl-block) 0;
	padding: var(--gl-s4) 0 var(--gl-s3) var(--gl-s8);
	border-top: 1px solid var(--gl-border-strong);
	border-bottom: 1px solid var(--gl-border-strong);
}
.gl-quote::before {
	content: "\201C";
	position: absolute; left: 0; top: 20px;
	font-size: 72px; font-weight: 700; line-height: 1;
	color: var(--gl-g-600);
}
.gl-quote blockquote { margin: 0; padding: 0; border: 0; background: none; }
.gl-quote blockquote p {
	margin: 0 0 var(--gl-s2);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--gl-text);
}
.gl-quote figcaption { margin: 0; font-size: 15px; font-weight: 600; color: var(--gl-text-soft); text-align: left; }
.gl-quote figcaption::before { content: "— "; color: var(--gl-g-600); }
@media (max-width: 767px) {
	.gl-quote { padding: 56px 0 20px; }
	.gl-quote::before { top: 16px; font-size: 56px; }
	.gl-quote blockquote p { font-size: 18px; }
}

/* 7.6 Grid cards — OUTLINE. Not links, so no hover lift. */
.gl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gl-s2);
	counter-reset: gl-card;
}
.gl-card {
	display: flex; flex-direction: column; gap: var(--gl-s1);
	padding: 20px;
	border: 1px solid var(--gl-border-strong);
	border-radius: var(--gl-radius);
	background: var(--gl-surface);
}
.gl-card__num {
	display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
	width: 32px; height: 32px; border-radius: 10px;
	background: var(--gl-g-200); color: var(--gl-text);
	font-size: 15px; font-weight: 700;
	margin-bottom: 4px;
}
.gl-content .gl-card__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; }
.gl-content .gl-card__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gl-text-soft); }

/* 7.7 Big number — SOLID logo green with white text (T13). */
.gl-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--gl-s2);
}
.gl-stat {
	position: relative;
	overflow: hidden;
	padding: var(--gl-pad);
	border-radius: var(--gl-radius);
	background:
		radial-gradient(180px 180px at 100% 0%, rgba(255, 255, 255, .10), transparent 65%),
		var(--gl-g-600);
	color: #fff;
}
.gl-content .gl-stat__num {
	margin: 0 0 var(--gl-s2);
	padding-bottom: 12px;
	font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em;
	color: #fff;
	background: linear-gradient(#fff, #fff) left bottom / 40px 3px no-repeat;
}
.gl-content .gl-stat__text { margin: 0 0 12px; font-size: 16px; font-weight: 600; line-height: 1.5; color: #fff; }
.gl-content .gl-stat__source { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: #fff; }
.gl-main .gl-content .gl-stat__source a {
	color: #fff;
	font-weight: 600;
	text-decoration-color: #fff;
	text-decoration-thickness: 1px;
}
.gl-main .gl-content .gl-stat__source a:hover { background: rgba(255, 255, 255, .16); text-decoration-color: #fff; }
.gl-main .gl-content .gl-stat a:focus-visible { outline-color: #fff; }

/* 7.8 Comparison table / Price tiers — OUTLINE */
.gl-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--gl-border-strong);
	border-radius: var(--gl-radius);
	background: var(--gl-surface);
}
.gl-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.gl-table thead th {
	position: sticky; top: 0;
	padding: 14px 16px;
	/* Header row in solid logo green with white text (T09). */
	background: var(--gl-g-600);
	color: #fff;
	font-size: 14px; font-weight: 700; letter-spacing: .02em;
	text-align: left;
	white-space: nowrap;
}
.gl-table tbody td { padding: 14px 16px; border-top: 1px solid var(--gl-border); vertical-align: top; }
.gl-table tbody td:first-child { font-weight: 700; }
.gl-table tbody tr.is-goodlives td { background: var(--gl-g-50); }
.gl-table tbody tr.is-goodlives td:first-child { box-shadow: inset 4px 0 0 var(--gl-g-600); }
.gl-content .gl-table-note { margin: 12px 0 var(--gl-block); font-size: 13px; line-height: 1.5; color: var(--gl-text-soft); }

/* 7.9 Contrast list — PLAIN columns under a green rule. */
.gl-contrast { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gl-s3); }
.gl-contrast__item {
	padding: var(--gl-s2) 0 0;
	border-top: 3px solid var(--gl-g-600);
}
.gl-contrast__item:nth-child(2) { border-top-color: var(--gl-g-400); }
.gl-contrast__item:nth-child(3) { border-top-color: var(--gl-g-300); }
.gl-content .gl-contrast__title { margin: 0 0 var(--gl-s1); font-size: 18px; font-weight: 700; line-height: 1.35; }
.gl-contrast ul { margin: 0 !important; padding-left: 1.2em !important; }
.gl-contrast li { font-size: 16px; line-height: 1.5; margin-bottom: var(--gl-s1); }

/* 7.10 Decision split / Is this comparison for you — OUTLINE, first column tinted */
.gl-split, .gl-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--gl-border-strong); border-radius: var(--gl-radius); overflow: hidden; background: var(--gl-surface); }
.gl-split__col, .gl-fit__col { padding: var(--gl-pad); }
.gl-split__col:first-child { background: var(--gl-g-75); }
.gl-split__col:last-child { background: var(--gl-surface); border-left: 1px solid var(--gl-border-strong); }
.gl-content .gl-split__title, .gl-content .gl-fit__title { margin: 0 0 12px; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--gl-text); }
.gl-split ul, .gl-fit ul { margin: 0 !important; padding: 0 !important; list-style: none; }
.gl-split li, .gl-fit li { position: relative; margin: 0 0 var(--gl-s1) !important; padding-left: 22px !important; font-size: 16px; line-height: 1.5; }
.gl-split li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--gl-g-600); }
.gl-split__col:last-child li::before { background: var(--gl-g-400); }
.gl-fit__col--yes { background: var(--gl-g-75); }
.gl-fit__col--no { background: var(--gl-surface); border-left: 1px solid var(--gl-border-strong); }
.gl-fit__col--yes li::before { content: "\2713"; position: absolute; left: 0; color: var(--gl-g-600); font-weight: 700; }
.gl-fit__col--no li::before { content: "\2715"; position: absolute; left: 0; color: var(--gl-text-soft); font-weight: 700; }

/* 7.11 Red flags — TINT, each flag on its own white row. */
.gl-redflags {
	padding: var(--gl-pad) var(--gl-pad) 16px;
	border-radius: var(--gl-radius);
	background: var(--gl-g-100);
}
/* The one place red is allowed besides form errors (owner, T10): the heading.
   #B3261E on the tint is about 6:1. Quicksand tops out at 700, so the extra
   weight comes from a slightly larger size. */
.gl-main .gl-redflags .gl-label { color: #B3261E; font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.gl-redflags ul { margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: gl-flag; }
.gl-redflags li {
	position: relative;
	margin: 0 0 var(--gl-s1) !important; padding: 12px 16px 12px 52px !important;
	border-radius: var(--gl-radius-sm);
	background: var(--gl-surface);
	font-size: 16px; line-height: 1.5;
}
.gl-redflags li::before {
	content: ""; position: absolute; left: 16px; top: 12px; width: 24px; height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23394B42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E") center / 16px no-repeat;
	border-radius: 6px;
	background-color: var(--gl-g-200);
}

/* 7.12 Intake-call questions — PLAIN numbered list with outlined numbers. */
.gl-questions {
	padding: var(--gl-s3) 0 var(--gl-s1);
	border-top: 1px solid var(--gl-border-strong);
	border-bottom: 1px solid var(--gl-border-strong);
}
.gl-questions ol { margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: gl-q; }
.gl-questions li {
	position: relative; counter-increment: gl-q;
	margin: 0 0 var(--gl-s2) !important; padding: 3px 0 3px 48px !important;
	font-size: 17px; line-height: 1.55;
}
.gl-questions li::before {
	content: counter(gl-q);
	position: absolute; left: 0; top: 0;
	width: 32px; height: 32px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	border: 1.5px solid var(--gl-g-600);
	background: var(--gl-surface); color: var(--gl-text);
	font-size: 14px; font-weight: 700;
}

/* 7.13 Contextual CTA / Closing CTA
   Contextual (T12): a white card with a solid logo-green edge, a soft lift and a
   green button. Green and white only, and clearly not the solid-green closing CTA. */
.gl-cta {
	position: relative;
	overflow: hidden;
	padding: var(--gl-s4) var(--gl-s4) var(--gl-s4) var(--gl-s5);
	border: 1px solid var(--gl-g-300);
	border-radius: var(--gl-radius-lg);
	background: var(--gl-surface);
	box-shadow: var(--gl-shadow-lg);
}
.gl-cta::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 8px;
	background: var(--gl-g-600);
}
/* Soft blobs inside the plain contextual CTA (owner asked to bring them back, 2026-10-18):
   a large tint circle bleeding off the top-right corner and a smaller one near the
   bottom edge. Logo-green tints only; the list/media variants keep their own look. */
.gl-cta:not(.gl-cta--closing):not(.gl-cta--list):not(.gl-cta--media) {
	background:
		radial-gradient(circle at 100% 0%, var(--gl-g-100) 0 150px, transparent 151px),
		radial-gradient(circle at calc(100% - 150px) 100%, var(--gl-g-200) 0 48px, transparent 49px),
		radial-gradient(circle at calc(100% - 40px) calc(100% - 56px), var(--gl-g-300) 0 14px, transparent 15px),
		var(--gl-surface);
}
.gl-cta > * { position: relative; }
.gl-content .gl-cta__title { margin: 0 0 var(--gl-s1); font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--gl-g-900); }
.gl-content .gl-cta__text { margin: 0 0 var(--gl-s3); font-size: 17px; line-height: 1.6; color: var(--gl-text); max-width: 52ch; }
.gl-cta__list { margin: 0 0 var(--gl-s3) !important; padding: 0 !important; list-style: none; display: grid; gap: 12px; }
.gl-cta__list li {
	position: relative; margin: 0 !important; padding-left: 32px !important; font-size: 17px; font-weight: 500; line-height: 1.5;
}
.gl-cta__list li::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--gl-g-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.gl-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gl-main .gl-content .gl-cta a.gl-btn { color: var(--gl-btn-text); text-decoration: none; background: var(--gl-btn); }
.gl-main .gl-content .gl-cta a.gl-btn:hover { background: var(--gl-btn-hover); }
.gl-cta--closing { padding: var(--gl-s5); }
.gl-cta--closing::before { content: none; }
.gl-cta--closing .gl-cta__title { font-size: 30px; margin-bottom: var(--gl-s3); }

/* Closing CTA: logo green, so it bookends the article with the hero (owner decision 2026-10-18).
   Same treatment as the hero: white text, white button with sage text. */
.gl-content .gl-cta--closing {
	border: 0;
	box-shadow: none;
	background:
		radial-gradient(420px 420px at 100% 0%, rgba(255, 255, 255, .10), transparent 60%),
		radial-gradient(320px 320px at 0% 100%, rgba(255, 255, 255, .08), transparent 60%),
		var(--gl-g-600);
	color: #fff;
}
.gl-content .gl-cta--closing :is(.gl-cta__title, .gl-cta__text, .gl-cta__list li) { color: #fff; }
.gl-content .gl-cta--closing .gl-cta__list li::before {
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2349AF7C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.gl-main .gl-content .gl-cta--closing a.gl-btn {
	background: #fff;
	color: var(--gl-text);
	box-shadow: 0 8px 20px rgba(57, 75, 66, .18);
}
.gl-main .gl-content .gl-cta--closing a.gl-btn:hover,
.gl-main .gl-content .gl-cta--closing a.gl-btn:focus-visible { background: var(--gl-g-50); color: var(--gl-text); }
.gl-main .gl-content .gl-cta--closing a:focus-visible { outline-color: #fff; }

/* Bullet-list CTA with blobs (T14): a soft green-tint card with organic blob
   shapes on the right (CSS only, logo green and its tints), title, 3–4 checked
   bullets and a green button. Markup: aside.gl-cta.gl-cta--list. */
.gl-content .gl-cta--list {
	isolation: isolate;
	padding: var(--gl-s5) 38% var(--gl-s5) var(--gl-s5);
	border: 0;
	box-shadow: none;
	background:
		radial-gradient(circle at 63% 78%, var(--gl-g-400) 0 9px, transparent 10px),
		radial-gradient(circle at 70% 18%, var(--gl-g-300) 0 6px, transparent 7px),
		var(--gl-g-100);
}
.gl-cta--list::before,
.gl-cta--list::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}
/* Large pale blob, top right. */
.gl-cta--list::before {
	left: auto; bottom: auto;
	top: -64px; right: -72px;
	width: 320px; height: 290px;
	background: var(--gl-g-300);
	border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
	transform: rotate(-12deg);
}
/* Smaller logo-green blob, bottom right. */
.gl-cta--list::after {
	right: 48px; bottom: -64px;
	width: 180px; height: 160px;
	background: var(--gl-g-600);
	border-radius: 41% 59% 45% 55% / 60% 40% 60% 40%;
	transform: rotate(18deg);
}
.gl-content .gl-cta--list .gl-cta__title { margin-bottom: var(--gl-s3); }
.gl-cta--list .gl-cta__list li { font-size: 16px; }

/* Text + image CTA (T15): two columns, words and button on the left, an image
   bleeding to the right edge. Clean white card, no blobs, no edge bar.
   Markup: aside.gl-cta.gl-cta--media > div.gl-cta__body + figure.gl-cta__media. */
.gl-content .gl-cta--media {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: stretch;
	padding: 0;
	border: 1px solid var(--gl-g-300);
	background: var(--gl-surface);
	box-shadow: var(--gl-shadow-lg);
}
.gl-cta--media::before { content: none; }
.gl-cta--media .gl-cta__body {
	display: flex; flex-direction: column; justify-content: center;
	padding: var(--gl-s5) var(--gl-s4) var(--gl-s5) var(--gl-s5);
}
.gl-content .gl-cta--media .gl-cta__media {
	margin: 0;
	min-height: 100%;
	background: var(--gl-g-100);
}
.gl-content .gl-cta--media .gl-cta__media img {
	display: block;
	width: 100%; height: 100%;
	min-height: 240px;
	object-fit: cover;
	border: 0;
	border-radius: 0;
}

/* 7.14 FAQ — PLAIN: a divided list, not a stack of cards. */
.gl-faq > h2 { margin-top: 0 !important; margin-bottom: var(--gl-s3) !important; }
.gl-faq details {
	margin: 0;
	border-top: 1px solid var(--gl-border-strong);
}
.gl-faq details:last-of-type { border-bottom: 1px solid var(--gl-border-strong); }
.gl-faq summary {
	position: relative;
	display: block;
	padding: 20px 56px 20px 0;
	list-style: none;
	font-size: 18px; font-weight: 600; line-height: 1.45;
	cursor: pointer;
}
.gl-faq summary:focus-visible { outline-offset: -2px; border-radius: var(--gl-radius-xs); }
.gl-faq summary::-webkit-details-marker { display: none; }
.gl-faq summary::after {
	content: "+";
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	width: 32px; height: 32px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--gl-g-100); color: var(--gl-g-900);
	font-size: 20px; font-weight: 600; line-height: 1;
	transition: background-color .15s ease;
}
.gl-faq summary:hover::after { background: var(--gl-g-200); }
.gl-faq details[open] summary::after { content: "\2212"; background: var(--gl-g-600); color: #fff; }
.gl-faq__a { padding: 0 56px var(--gl-s3) 0; }
.gl-faq__a p { margin: 0 0 12px; font-size: 17px; line-height: 1.7; color: var(--gl-text); }
.gl-faq__a p:last-child { margin-bottom: 0; }

/* 7.15 Platform entry (comparison posts) — OUTLINE */
.gl-platform {
	padding: var(--gl-pad);
	border: 1px solid var(--gl-border-strong);
	border-radius: var(--gl-radius);
	background: var(--gl-surface);
}
.gl-platform__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.gl-platform__facts > div { padding-bottom: 12px; border-bottom: 1px solid var(--gl-border); }
.gl-platform__facts dt { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-text-soft); }
.gl-platform__facts dd { margin: 0; font-size: 16px; line-height: 1.5; }
.gl-platform__facts > div.is-wide { grid-column: 1 / -1; }
.gl-content .gl-platform__quote { margin: var(--gl-s2) 0 0; padding: 12px 16px; border-radius: var(--gl-radius-sm); background: var(--gl-g-100); font-weight: 600; }

/* 8. After the article ------------------------------------------------------ */
/* Author — PLAIN, set off by a rule rather than a card. */
.gl-author {
	display: flex;
	gap: var(--gl-s3);
	margin: var(--gl-s8) 0 var(--gl-s4);
	padding: var(--gl-s4) 0 0;
	border-top: 1px solid var(--gl-border-strong);
}
.gl-main .gl-author__photo { width: 72px; height: 72px; border-radius: 50%; flex: none; border: 3px solid var(--gl-g-100); }
.gl-author__name { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.gl-author__bio { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--gl-text-soft); }
.gl-main .gl-author__link {
	display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
	font-size: 15px; font-weight: 700; color: var(--gl-text);
	text-decoration: underline; text-decoration-color: var(--gl-g-600); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.gl-main .gl-author__link .gl-icon { color: var(--gl-g-600); }

/* Helpful — OUTLINE */
.gl-helpful { margin: 0 0 var(--gl-s4); padding: 20px var(--gl-s3); border: 1px solid var(--gl-border-strong); border-radius: var(--gl-radius); background: var(--gl-surface); }
.gl-helpful__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.gl-helpful__q { margin: 0; font-size: 17px; font-weight: 600; }
.gl-helpful__buttons { display: flex; gap: 12px; }
.gl-helpful__form { margin-top: var(--gl-s2); display: grid; gap: 12px; }
.gl-helpful__form[hidden], .gl-helpful__thanks[hidden] { display: none; }
.gl-helpful__form label { font-size: 15px; font-weight: 600; }
.gl-helpful__form .gl-btn { justify-self: start; }
.gl-helpful__thanks { margin: 12px 0 0; font-weight: 600; color: var(--gl-text); }

.gl-main textarea,
.gl-main input[type="email"],
.gl-main input[type="text"],
.gl-main input[type="url"] {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--gl-g-600); /* strongest in-palette edge for form fields */
	border-radius: var(--gl-radius-sm);
	background: var(--gl-surface) none;
	color: var(--gl-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gl-main :is(textarea, input)::placeholder { color: var(--gl-text-soft); opacity: 1; }
.gl-main textarea { min-height: 96px; resize: vertical; }
.gl-main textarea:focus,
.gl-main input[type="email"]:focus,
.gl-main input[type="text"]:focus,
.gl-main input[type="url"]:focus {
	outline: none;
	border-color: var(--gl-g-600);
	box-shadow: 0 0 0 3px rgba(73, 175, 124, .25);
	background-image: none;
}

/* Newsletter — TINT */
.gl-newsletter {
	position: relative;
	margin: 0 0 var(--gl-s4);
	padding: var(--gl-s4);
	border-radius: var(--gl-radius-lg);
	background: var(--gl-g-100);
}
.gl-newsletter__intro { display: flex; gap: var(--gl-s2); margin-bottom: 20px; }
.gl-newsletter__icon {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 48px; height: 48px; border-radius: var(--gl-radius-sm); background: var(--gl-surface); color: var(--gl-g-600);
}
.gl-newsletter__title { margin: 0 0 4px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.gl-newsletter__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--gl-text-soft); }
.gl-newsletter__form { display: flex; gap: 12px; }
.gl-newsletter__form input[type="email"] { flex: 1; }
.gl-newsletter__consent { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--gl-text-soft); }
.gl-main .gl-newsletter__consent a { color: var(--gl-text); }
.gl-newsletter__status { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.gl-newsletter__status:empty { display: none; }
.gl-newsletter__status.is-ok { color: var(--gl-text); }
.gl-newsletter__status.is-error { color: #B3261E; }

.gl-admin-note {
	margin: 0 0 8px;
	padding: 8px 12px;
	border: 1px dashed var(--gl-g-600);
	border-radius: var(--gl-radius-xs);
	background: var(--gl-g-50);
	font-size: 13px;
	color: var(--gl-text);
}

/* Not-medical-advice note — PLAIN small print. */
.gl-medical-note {
	margin: 0 0 var(--gl-s5);
	padding: var(--gl-s2) 0 0;
	border-top: 1px solid var(--gl-border);
	font-size: 14px;
	line-height: 1.6;
	color: var(--gl-text-soft);
}

/* Comments */
.gl-comments { padding-top: var(--gl-s1); border-top: 1px solid var(--gl-border-strong); }
.gl-main .gl-comments__title { margin: var(--gl-s4) 0 var(--gl-s2); font-size: 26px; font-weight: 600; }
.gl-comments__list,
.gl-comments__list .children { margin: 0; padding: 0; list-style: none; }
.gl-comments__list .children { margin-left: var(--gl-s4); }
.gl-comments__list .comment-body {
	margin: 0 0 var(--gl-s2); padding: 20px;
	border: 1px solid var(--gl-border-strong); border-radius: var(--gl-radius); background: var(--gl-surface);
}
.gl-comments__list .comment-author { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; }
.gl-comments__list .comment-author .fn { font-style: normal; }
.gl-comments__list .comment-author .avatar { border-radius: 50%; }
.gl-comments__list .comment-author .says { display: none; }
/* WordPress prints .comment-metadata (HTML5) or .commentmetadata (legacy markup). */
.gl-comments__list :is(.comment-metadata, .commentmetadata) { margin: 4px 0 8px 56px; font-size: 13px; line-height: 1.4; }
.gl-main .gl-comments__list :is(.comment-metadata, .commentmetadata) a { color: var(--gl-text-soft); text-decoration: none; font-size: 13px; font-weight: 500; }
.gl-comments__list :is(.comment-content, .comment-body > p) { font-size: 16px; line-height: 1.6; }
.gl-comments__list :is(.comment-content p, .comment-body > p) { margin: 0 0 .6em; }
.gl-main .gl-comments__list .reply a { font-size: 14px; font-weight: 700; color: var(--gl-text); text-decoration: underline; text-decoration-color: var(--gl-g-600); text-underline-offset: 4px; }
.gl-comments__list .comment-awaiting-moderation { display: block; font-size: 13px; color: var(--gl-text-soft); }
.gl-main .gl-comments__reply-title { margin: var(--gl-s3) 0 var(--gl-s1); font-size: 22px; font-weight: 600; }
.gl-comments__reply-title small { margin-left: 8px; font-size: 14px; }
.gl-comments :is(.gl-comments__notes, .logged-in-as) { margin: 0 0 var(--gl-s2); font-size: 14px; color: var(--gl-text-soft); }
.gl-comments .comment-form { display: grid; gap: 12px; }
.gl-comments .comment-form p { margin: 0; }
.gl-comments .comment-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.gl-comments .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.gl-comments .comment-form-cookies-consent label { margin: 0; font-weight: 500; }
.gl-main .gl-comments .form-submit .gl-btn { min-width: 180px; border-radius: var(--gl-radius-sm); }

/* Related posts */
.gl-related { padding: var(--gl-s8) 0 var(--gl-s10); background: var(--gl-g-75); border-top: 1px solid var(--gl-border); }
.gl-main .gl-related__title { margin: 0 0 var(--gl-s3); font-size: var(--gl-h2); font-weight: 600; }
.gl-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gl-s3); }
.gl-main .gl-related__card {
	display: flex; flex-direction: column; gap: var(--gl-s1);
	padding: 12px 12px 20px;
	border: 1px solid var(--gl-border-strong); border-radius: var(--gl-radius);
	background: var(--gl-surface);
	text-decoration: none; color: var(--gl-text);
	transition: box-shadow .2s ease, transform .2s ease;
}
.gl-main .gl-related__card:hover { box-shadow: var(--gl-shadow-lg); transform: translateY(-2px); text-decoration: none; }
.gl-main .gl-related__card:hover .gl-related__name { text-decoration: underline; text-decoration-color: var(--gl-g-600); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gl-related__thumb { display: block; aspect-ratio: 16 / 9; border-radius: var(--gl-radius-sm); overflow: hidden; background: linear-gradient(135deg, var(--gl-g-100), var(--gl-g-300)); margin-bottom: 4px; }
.gl-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-related__cat { padding: 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gl-text-soft); }
.gl-related__name { padding: 0 8px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.gl-related__meta { padding: 0 8px; font-size: 14px; color: var(--gl-text-soft); }

/* Mobile sticky CTA */
.gl-mobile-cta { display: none; }

/* 9. Legacy posts: neutralise inline fonts/colours from the Elementor era --- */
.gl-legacy .gl-content :is(p, li, span, a, strong, em, b, div, td, th, figcaption, blockquote, h2, h3, h4, h5, h6, font) {
	font-family: var(--gl-font) !important;
}
.gl-legacy .gl-content :is(p, li, span, div, td, th, blockquote, font)[style] {
	color: var(--gl-text) !important;
	font-size: inherit !important;
	text-align: left !important;
	line-height: 1.7 !important;
}
.gl-legacy .gl-content font[color] { color: var(--gl-text) !important; }
/* Elementor's per-post CSS gives old headings a blurry glow (text-shadow 0 0 10px). Found on live, v1.4.2. */
.gl-legacy .gl-content :is(h1, h2, h3, h4, h5, h6, p, li, span, a, .elementor-heading-title) { text-shadow: none !important; }
.gl-legacy .gl-content p:is([style], :has(> b > em), :has(> strong > em)) { font-size: var(--gl-body) !important; }
.gl-legacy .gl-content :is(h2, .elementor-heading-title) {
	font-size: var(--gl-h2) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	color: var(--gl-text) !important;
	text-align: left !important;
}
.gl-legacy .gl-content h3,
.gl-legacy .gl-content h3.elementor-heading-title {
	font-size: var(--gl-h3) !important;
	line-height: 1.3 !important;
}
.gl-legacy .gl-content :is(h4, h5, h6) { color: var(--gl-text) !important; }
.gl-legacy .gl-content .elementor-widget-text-editor,
.gl-legacy .gl-content .elementor-widget-heading .elementor-heading-title { color: var(--gl-text) !important; }
.gl-legacy .gl-content .elementor-widget:not(:last-child) { margin-bottom: 0 !important; }
.gl-legacy .gl-content .elementor-section .elementor-container,
.gl-legacy .gl-content .e-con { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
.gl-legacy .gl-content .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; }
.gl-legacy .gl-content .elementor-widget-divider { display: none !important; }
.gl-legacy .gl-content .elementor-image img,
.gl-legacy .gl-content .elementor-widget-image img { border-radius: var(--gl-radius); }
.gl-legacy .gl-content .elementor-image-box-title,
.gl-legacy .gl-content .elementor-icon-box-title { font-size: var(--gl-h3) !important; color: var(--gl-text) !important; }

/* 10. Responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
	/* Small laptops: the sidebar keeps its 320px (so the card title stays on one
	   line and the card stays short); the gap and the article give way (T16). */
	.gl-blog { --gl-gap: 56px; }
	.gl-hero__grid { column-gap: var(--gl-s5); }
	/* Small laptops (1024–1180px): a slightly wider text column keeps Book a
	   Session and the preferred-source button on one row (T24 R6). */
	.gl-blog .gl-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

@media (max-width: 1023px) {
	.gl-container { max-width: 768px; }
	/* Tablet and phone hero order (T23): words, then the picture, then one
	   action at a time, so the CTAs never stack into a wall:
	   breadcrumb, title, intro, image, Book a Session, trust line,
	   meta card (author and share), preferred-source button.
	   Wrappers become transparent so their children can be ordered; desktop
	   (≥1024px, T17 grid) is untouched. */
	.gl-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.gl-hero__text,
	.gl-hero__media,
	.gl-hero__actions { display: contents; }
	.gl-breadcrumb { order: 1; }
	.gl-main .gl-hero__title { order: 2; }
	.gl-hero__intro { order: 3; }
	.gl-hero__image { order: 4; margin-bottom: var(--gl-s3); }
	.gl-hero__actions > .gl-btn { order: 5; align-self: flex-start; }
	.gl-trust { order: 6; margin-top: var(--gl-s2); }
	.gl-meta-card { order: 7; margin-top: var(--gl-s3); }
	.gl-main .gl-hero__actions > .gl-pref-source { order: 8; align-self: flex-start; margin-top: var(--gl-s2); }
	.gl-layout { grid-template-columns: minmax(0, 1fr); gap: var(--gl-s3); padding-top: var(--gl-s4); }
	.gl-layout > .gl-sidebar,
	.gl-layout > .gl-article { grid-column: 1; grid-row: auto; }
	.gl-sidebar__sticky { position: static; max-height: none; overflow: visible; }
	.gl-sidebar .gl-pcard { display: none; }
	.gl-toc__nav { max-height: none; padding: 0; -webkit-mask-image: none; mask-image: none; }

	/* Collapsible contents card on tablet and phone. */
	.gl-toc {
		padding: 0 var(--gl-s2);
		border: 1px solid var(--gl-border-strong);
		border-radius: var(--gl-radius);
		background: var(--gl-surface);
	}
	.gl-toc__heading { cursor: pointer; min-height: 52px; padding: var(--gl-s2) 0; }
	.gl-toc__heading::after {
		content: ""; margin-left: auto; width: 10px; height: 10px;
		border-right: 2px solid var(--gl-g-600); border-bottom: 2px solid var(--gl-g-600);
		transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
	}
	.gl-toc[open] .gl-toc__heading::after { transform: rotate(-135deg) translateY(-3px); }
	.gl-toc[open] .gl-toc__nav { padding-bottom: var(--gl-s2); }
	.gl-main .gl-toc__item a { padding-top: 10px; padding-bottom: 10px; }

	/* Trust line on ONE line (T22): "♥ Trusted by 500K+ people | 5-star rating on [G]". */
	.gl-trust { flex-wrap: nowrap; gap: 10px; white-space: nowrap; }
	.gl-trust__item--full { display: none; }
	.gl-trust__item--short { display: inline-flex; gap: 6px; }
	.gl-trust__item--short > .gl-google { width: 22px; height: 22px; padding: 3px; }
	.gl-trust__divider { height: 12px; }

	.gl-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gl-related__grid > :nth-child(3) { display: none; }

	.gl-mobile-cta {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: var(--gl-surface);
		border-top: 1px solid var(--gl-border-strong);
		box-shadow: 0 -8px 24px rgba(57, 75, 66, .08);
		transform: translateY(110%);
		transition: transform .25s ease;
	}
	.gl-mobile-cta.is-visible { transform: none; }
	.gl-mobile-cta p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--gl-text); }
	.gl-main .gl-mobile-cta .gl-btn { min-height: 44px; padding: 10px 20px; font-size: 16px; white-space: nowrap; }
	body.gl-blog { padding-bottom: 0; }
}

@media (max-width: 767px) {
	.gl-hero { padding: var(--gl-s4) 0 var(--gl-s5); }
	.gl-breadcrumb { margin-bottom: var(--gl-s2); font-size: 12px; }
	/* One line on any phone: the current-page crumb (which repeats the H1)
	   shrinks with an ellipsis instead of wrapping (T24 R5). */
	.gl-breadcrumb { flex-wrap: nowrap; }
	.gl-breadcrumb > a,
	.gl-breadcrumb__sep { flex: none; }
	.gl-breadcrumb__current { flex: 1 1 auto; min-width: 0; max-width: none; }
	.gl-main .gl-hero__title { margin-bottom: var(--gl-s2); line-height: 1.25; }
	.gl-hero__intro { margin-bottom: var(--gl-s3); line-height: 1.55; }
	/* Phones (T22): hero buttons size to their content, no full-width bars. */
	.gl-main .gl-hero .gl-btn--primary { min-height: 48px; padding: 12px 20px; font-size: 16px; }
	.gl-main .gl-pref-source { min-height: 48px; }
	.gl-trust__label { font-size: 13px; }
	/* Phones: share icons drop to their own row under a hairline, 40px targets. */
	.gl-share { flex-basis: 100%; padding-top: 12px; border-top: 1px solid var(--gl-border); }
	.gl-share__buttons { width: 100%; justify-content: space-between; }

	.gl-grid { grid-template-columns: 1fr; gap: 12px; }
	/* Grid cards go horizontal on phones: number left, words right. */
	.gl-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px var(--gl-s2); padding: var(--gl-s2); }
	.gl-card__num { grid-row: 1 / span 2; margin: 0; }
	.gl-content .gl-card__title,
	.gl-content .gl-card__text { grid-column: 2; }
	.gl-split, .gl-fit { grid-template-columns: 1fr; }
	.gl-split__col:last-child, .gl-fit__col--no { border-left: 0; border-top: 1px solid var(--gl-border-strong); }
	.gl-platform__facts { grid-template-columns: 1fr; }
	.gl-summary { padding-left: 20px; }
	.gl-helpline__list li { padding: 12px 14px !important; }
	.gl-cta { padding: var(--gl-s3) 20px var(--gl-s3) 28px; border-radius: var(--gl-radius); }
	.gl-cta--closing { padding: var(--gl-s3) 20px; }
	/* Phones: image on top, words and a full-width button below. */
	.gl-content .gl-cta--media { grid-template-columns: 1fr; padding: 0; }
	.gl-content .gl-cta--media .gl-cta__media { order: -1; }
	.gl-content .gl-cta--media .gl-cta__media img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
	.gl-cta--media .gl-cta__body { padding: var(--gl-s3) 20px; }
	/* Phones: blobs gather in the top-right corner, clear of the bullets. */
	.gl-content .gl-cta--list { padding: var(--gl-s5) 20px var(--gl-s3); background: var(--gl-g-100); }
	.gl-content .gl-cta--list .gl-cta__title { max-width: 72%; }
	.gl-content .gl-cta--list::before { top: -64px; right: -64px; width: 168px; height: 150px; }
	.gl-content .gl-cta--list::after { right: 18px; bottom: auto; top: -26px; width: 64px; height: 58px; }
	.gl-cta::before { width: 6px; }
	/* Smaller blobs on phones so they sit behind the edges, not the copy. */
	.gl-cta:not(.gl-cta--closing):not(.gl-cta--list):not(.gl-cta--media) {
		background:
			radial-gradient(circle at 100% 0%, var(--gl-g-100) 0 90px, transparent 91px),
			radial-gradient(circle at calc(100% - 24px) calc(100% - 96px), var(--gl-g-300) 0 10px, transparent 11px),
			var(--gl-surface);
	}
	.gl-content .gl-cta__title, .gl-cta--closing .gl-cta__title { font-size: 22px; }
	.gl-main .gl-content .gl-cta .gl-btn { width: 100%; }
	.gl-content .gl-stat__num { font-size: 34px; }
	.gl-faq summary { font-size: 17px; padding-right: 48px; }
	.gl-faq__a { padding-right: 0; }
	.gl-faq__a p { font-size: 16px; }
	.gl-questions li { font-size: 16px; }

	.gl-author { gap: var(--gl-s2); margin-top: var(--gl-s6); }
	.gl-main .gl-author__photo { width: 56px; height: 56px; }
	.gl-helpful { padding: var(--gl-s2) 20px; }
	.gl-newsletter { padding: var(--gl-s3) 20px; border-radius: var(--gl-radius); }
	.gl-newsletter__intro { flex-direction: column; gap: 12px; }
	.gl-newsletter__icon { width: 40px; height: 40px; }
	.gl-newsletter__form { flex-direction: column; }
	.gl-newsletter__form .gl-btn { width: 100%; }
	.gl-comments__list .children { margin-left: 12px; }
	.gl-related { padding: var(--gl-s6) 0 var(--gl-s8); }
	.gl-related__grid { grid-template-columns: 1fr; gap: var(--gl-s2); }
	.gl-related__grid > :nth-child(3) { display: flex; }
}

/* Touch layouts (T24 R2): every tap target reaches 44px. Small inline links get
   an invisible 44px hit area (::after) so the visual layout doesn't change. */
@media (max-width: 1023px) {
	.gl-breadcrumb a,
	.gl-main .gl-meta-card__name,
	.gl-main .gl-content .gl-helpline__list a,
	.gl-main .gl-comments__list .reply a,
	.gl-main .gl-comments__list :is(.comment-metadata, .commentmetadata) a { position: relative; }
	.gl-breadcrumb a::after,
	.gl-main .gl-meta-card__name::after,
	.gl-main .gl-content .gl-helpline__list a::after,
	.gl-main .gl-comments__list .reply a::after,
	.gl-main .gl-comments__list :is(.comment-metadata, .commentmetadata) a::after {
		content: "";
		position: absolute;
		left: -4px; right: -4px;
		top: 50%;
		height: 44px;
		transform: translateY(-50%);
	}
	.gl-main .gl-toc__item a { min-height: 44px; display: flex; align-items: center; }
	.gl-main .gl-share__btn { width: 44px; height: 44px; }
	.gl-main .gl-author__link { min-height: 44px; }
	.gl-comments .comment-form-cookies-consent input[type="checkbox"] {
		flex: none; width: 22px; height: 22px; margin: 1px 0 0;
		accent-color: var(--gl-g-600);
	}
	.gl-comments .comment-form-cookies-consent label { padding: 2px 0; }
}

/* Phones in landscape (short and wide): cap the hero image so it doesn't fill
   the whole screen before any text or action is visible (T24 R7). */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
	.gl-hero__image { width: 100%; max-width: 440px; }
}

/* Narrow phones (<375px): the shorter wording keeps the trust line on one line. */
@media (max-width: 374px) {
	.gl-trust { gap: 6px; }
	.gl-trust__item { gap: 6px; }
	.gl-trust__long { display: none; }
	.gl-trust__tiny { display: inline; }
	.gl-trust__label { font-size: 12px; }
	.gl-trust__icon { width: 22px; height: 22px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* The article is ~720px wide on tablets, so cards stay in threes (3, 6 or 9
	   per post); two columns left the third card orphaned (T24 R9). */
	.gl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 12. Hestia base-style compatibility (T25) ------------------------------- */
/* Hestia's style.min.css only started loading in v1.4.0 (see functions.php),
   after every design round. These rules restore the agreed design where its
   base styles (body/ul/h* line-heights, material inputs, floating labels,
   button margins, italic quotes, focus outlines) leak into our components. */

/* R1 · Hestia sets body { font-weight: 300 }; we were designed on 400. */
.gl-main { font-weight: 400; }

/* R2 · Hestia: ul, ol { line-height: 1.618 }; ours inherit 1.7–1.75. */
.gl-main :is(ul, ol) { line-height: inherit; }

/* R3 · Hestia: blockquote p { font-style: italic } and blockquote { 18px }. */
.gl-main blockquote,
.gl-main blockquote p { font-style: normal; }
.gl-main .gl-quote blockquote { font-size: inherit; }

/* R4 · Hestia: button, input[type=submit] { margin: 10px 1px; position: relative;
   padding: 7px… } and display:block + auto margins on the comment submit (phones). */
.gl-main :is(button, input[type="submit"]) { margin: 0; }
.gl-main .gl-comments .form-submit .gl-btn { display: inline-flex; margin: 0; padding: 12px 24px; white-space: nowrap; }

/* R5 · Hestia's material .form-control: no border, no radius, transparent,
   underline gradients, weight 400, 7px bottom margin. Restore our fields. */
.gl-main :is(textarea, input[type="email"], input[type="text"], input[type="url"]).form-control {
	float: none;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--gl-g-600);
	border-radius: var(--gl-radius-sm);
	background: var(--gl-surface) none;
	color: var(--gl-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	vertical-align: baseline;
	box-shadow: none;
}
.gl-main textarea.form-control { min-height: 96px; }
.gl-main :is(textarea, input[type="email"], input[type="text"], input[type="url"]).form-control:focus {
	border-color: var(--gl-g-600);
	background-image: none;
	box-shadow: 0 0 0 3px rgba(73, 175, 124, .25);
}
.gl-main .form-group { margin: 0; padding-bottom: 0; }

/* R6 · Hestia's floating labels sit inside the field in grey (#aaa) and move
   on focus. Ours are plain labels above the field, in sage. */
.gl-main .gl-comments .form-group label.control-label {
	position: static !important;
	top: auto !important;
	margin: 0 0 6px !important;
	color: var(--gl-text) !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.4 !important;
	pointer-events: auto;
}
.gl-main .gl-comments .control-label .required { color: var(--gl-text); }

/* R7 · Hestia floats the comment Reply link right, uppercase, as a block. */
.gl-main .gl-comments__list .comment-reply-link {
	display: inline;
	float: none;
	text-transform: none;
	letter-spacing: normal;
}

/* R8 · Hestia: h1–h6 { line-height: 1.618 } reached headings we hadn't set. */
.gl-main :is(.gl-comments__title, .gl-comments__reply-title, .gl-related__title) { line-height: 1.25; }

/* R9 · Hestia adds a bottom border to every table row; our table rules
   draw their own lines. */
.gl-main .gl-table tr { border: 0; }

/* R10 · Hestia: button:focus, input:focus { outline: 0 !important } removed
   our keyboard focus rings. !important is the only way back. */
.gl-main a:focus-visible,
.gl-main button:focus-visible,
.gl-main summary:focus-visible,
.gl-main input:focus-visible,
.gl-main textarea:focus-visible { outline: 2px solid var(--gl-g-900) !important; outline-offset: 2px; }
.gl-main :is(.gl-hero, .gl-pcard, .gl-cta--closing, .gl-stat) :is(a, button):focus-visible { outline-color: #fff !important; }
.gl-main .gl-hero .gl-meta-card :is(a, button):focus-visible { outline-color: var(--gl-g-900) !important; }
.gl-main :is(textarea, input[type="email"], input[type="text"], input[type="url"]):focus-visible { outline: none !important; }

/* R11 · Cookie-consent checkbox: Hestia adds a 10px right margin. */
.gl-main .gl-comments .comment-form-cookies-consent #wp-comment-cookies-consent { margin: 3px 0 0; padding: 0; }

/* 13. Blog listing: index + category/archive pages (A1–A5) ---------------- */

/* A2 · Compact listing header. Sage #394B42 surface (owner override 2026-10-20,
   was logo green) to match the sage footer; white text, same shorter frame. */
.gl-listhero {
	position: relative;
	overflow: hidden;
	padding: var(--gl-s6) 0 var(--gl-s7);
	background:
		radial-gradient(560px 560px at 100% 0%, rgba(255, 255, 255, .10), transparent 60%),
		radial-gradient(420px 420px at 0% 100%, rgba(255, 255, 255, .07), transparent 60%),
		var(--gl-g-900);
	color: #fff;
}
.gl-listhero .gl-breadcrumb { margin-bottom: var(--gl-s2); }
.gl-main .gl-listhero__title {
	margin: 0;
	font-size: var(--gl-h1);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: #fff;
}
.gl-listhero__desc {
	max-width: 62ch;
	margin: var(--gl-s2) 0 0;
	font-size: var(--gl-lead);
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
}
.gl-listhero__desc p { margin: 0 0 .5em; color: #fff; }
.gl-listhero__desc p:last-child { margin: 0; }
.gl-listhero__desc a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* A3 · Card grid: 3 across on desktop, 2 on tablet, 1 on phone. */
.gl-archive { padding-top: var(--gl-s7); padding-bottom: var(--gl-s10); }
.gl-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gl-s4) var(--gl-s3);
}

.gl-main .gl-postcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--gl-border-strong);
	border-radius: var(--gl-radius);
	background: var(--gl-surface);
	text-decoration: none;
	color: var(--gl-text);
	transition: box-shadow .2s ease, transform .2s ease;
}
.gl-main .gl-postcard:hover { box-shadow: var(--gl-shadow-lg); transform: translateY(-2px); text-decoration: none; }
.gl-main .gl-postcard:focus-within { box-shadow: var(--gl-shadow-lg); }
.gl-main .gl-postcard:hover .gl-postcard__title {
	text-decoration: underline;
	text-decoration-color: var(--gl-g-600);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.gl-postcard__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, var(--gl-g-100), var(--gl-g-300));
}
.gl-main .gl-postcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-postcard__thumb--empty { display: flex; align-items: center; justify-content: center; }
.gl-postcard__ph { padding: 0 16px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--gl-g-900); opacity: .7; text-align: center; }
.gl-postcard__body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: var(--gl-s2) 20px var(--gl-s3); }
.gl-postcard__cat {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: var(--gl-radius-pill);
	background: var(--gl-g-100);
	color: var(--gl-g-900);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.4;
}
.gl-postcard__title { font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--gl-text); }
.gl-postcard__excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: var(--gl-text-soft);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gl-postcard__meta { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--gl-text-soft); }

@media (prefers-reduced-motion: reduce) {
	.gl-main .gl-postcard:hover { transform: none; }
}

/* A4 · Pagination: numbered, current in logo green, 44px targets, centred. */
.gl-main .gl-archive .navigation { margin-top: var(--gl-s6); }
.gl-main .gl-archive .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.gl-main .gl-archive .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 12px;
	border: 1px solid var(--gl-border-strong); border-radius: var(--gl-radius-sm);
	background: var(--gl-surface); color: var(--gl-text);
	font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.gl-main .gl-archive a.page-numbers:hover { background: var(--gl-g-50); border-color: var(--gl-g-400); color: var(--gl-text); }
.gl-main .gl-archive .page-numbers.current { background: var(--gl-g-600); border-color: var(--gl-g-600); color: #fff; }
.gl-main .gl-archive .page-numbers.dots { min-width: 24px; padding: 0 4px; border-color: transparent; background: none; }
.gl-main .gl-archive .page-numbers .gl-icon { color: currentColor; }
.gl-main .gl-archive .page-numbers.prev .gl-icon { transform: rotate(180deg); }

/* A5 · Empty archive state. */
.gl-archive__empty { max-width: 52ch; margin: 0 auto; padding: var(--gl-s8) 0 var(--gl-s10); text-align: center; }
.gl-main .gl-archive__empty-title { margin: 0 0 8px; font-size: var(--gl-h3); font-weight: 600; }
.gl-archive__empty-text { margin: 0 0 var(--gl-s3); color: var(--gl-text-soft); }

@media (max-width: 1023px) {
	.gl-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.gl-listhero { padding: var(--gl-s4) 0 var(--gl-s5); }
	.gl-archive { padding-top: var(--gl-s5); padding-bottom: var(--gl-s8); }
	.gl-archive__grid { grid-template-columns: 1fr; gap: var(--gl-s3); }
	.gl-main .gl-archive .navigation { margin-top: var(--gl-s5); }
}

/* 11. Print ---------------------------------------------------------------- */
@media print {
	.gl-sidebar, .gl-share, .gl-helpful, .gl-newsletter, .gl-comments, .gl-related, .gl-mobile-cta, .gl-hero__actions, .gl-pref-source, .gl-trust { display: none !important; }
	.gl-layout { display: block; }
}