/*
 Theme Name:     Slide Science v5
 Theme URI:      https://slidescience.co
 Description:    Standalone theme for Slide Science. Replaces the wp-bootstrap-starter child theme.
 Author:         Daniel Galletta
 Author URI:     https://slidescience.co
 Version:        1.0
 Requires PHP:   7.4
 Text Domain:    slidescience
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Brand */
	--color-blue: #042249;
	--color-red: #c91d1d;
	--color-yellow: #f5ad21;
	--color-sand: #f8f7f6;
	--color-link: #007bff;

	/* Neutrals */
	--color-ink: #0a0a0a;
	--color-muted: #737373;
	--color-muted-on-blue: #c0cee2; /* body copy on --color-blue */
	--color-border: #e5e5e5;
	--color-muted-bg: #f5f5f5;
	--color-rule: #d6dade;
	--color-field-border: #dbdbdb;
	--color-surface: #fff;
	--color-green: #16a34a;
	--color-heading: #24292e; /* measured off the builder originals */

	/* Hover step for filled buttons: mix this much white into the base colour.
	   Lighten rather than darken — navy is already near-black, so a shade of it
	   is invisible while a tint reads clearly, and one direction keeps every
	   button behaving the same way. */
	--hover-lift: 12%;

	/* Buttons and form fields. 4px to match the radius Kit hardcodes inline on
	   both the inputs and the submit button it renders — matching it is the only
	   way an embedded Kit form and a native one look like the same form. */
	--radius-control: 4px;

	/* Type scale */
	--text-xs: 0.875rem;    /* 14px   — code */
	--text-sm: 0.96875rem;  /* 15.5px — meta, footer */
	--text-base: 1rem;      /* 16px   — body */
	--text-lg: 1.125rem;    /* 18px   — h3 */
	--text-xl: 1.5rem;      /* 24px   — h2 */
	--text-2xl: 2rem;       /* 28.8px rendered — headings above h2, below h1 */
	--text-3xl: 3rem;       /* 48px   — h1 */

	--leading-tight: 1.08;
	--leading-snug: 1.33;
	--leading-normal: 1.55;
	--leading-relaxed: 1.625;
	--tracking-tight: -0.025em;

	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* Spacing — 4px base */
	--space-1: 0.25rem;   /* 4  */
	--space-2: 0.5rem;    /* 8  */
	--space-3: 0.75rem;   /* 12 */
	--space-4: 1rem;      /* 16 */
	--space-5: 1.25rem;   /* 20 */
	--space-6: 1.5rem;    /* 24 */
	--space-8: 2rem;      /* 32 */
	--space-10: 2.5rem;   /* 40 */
	--space-12: 3rem;     /* 48 */
	--space-16: 4rem;     /* 64 */
	--space-20: 5rem;     /* 80 */

	/* Layout */
	/* Deliberately px: frame measurements keep their original physical size and
	   do NOT follow the 90% root scale. */
	--container-max: 1140px;
	--title-inset: 150px;
	--gutter: 0.9375rem;       /* 15px */
	--logo-width: 14rem;       /* 224px */

	/* Article prose sits 10% above the chrome scale. */
	--text-article: 1.1rem;

	/* ~75 characters at --text-article, assuming an average advance of ~0.51em
	   (75 * 0.51 = 38.2). That figure was calibrated against Inter — Geist's
	   metrics are close but not identical, so treat it as approximate until
	   eyeballed. Derived, so it tracks the article size automatically. */
	--measure: calc(var(--text-article) * 38.2);

	--font-sans: "Geist", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", sans-serif;
}

/* Global scale.
   Everything above is rem/em-based, so this one declaration scales the whole
   design the way browser zoom does — type, spacing and container together.
   A percentage (not a px value) keeps it proportional to the visitor's own
   default font size rather than overriding it. */
html {
	font-size: 90%;
	-webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   2. Fonts — self-hosted Geist, variable
   --------------------------------------------------------------------------
   Geist ships no italic, so <em>/<i> render as a synthesised oblique. Split
   latin / latin-ext exactly as Google serves it, so the 16KB extended subset
   only downloads when an accented character actually appears.
   ========================================================================== */

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/Geist-latin.woff2") format("woff2");
	unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/Geist-latin-ext.woff2") format("woff2");
	unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-feature-settings: "liga" 1, "calt" 1;
	-webkit-font-smoothing: antialiased;
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-ink);
	background: var(--color-surface);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

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

a {
	color: var(--color-link);
}

/* Display sizes only — at h3/h4 sizes the tightening just costs legibility. */
h1,
h2 {
	letter-spacing: var(--tracking-tight);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: var(--space-2) var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-ink);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.container-op,
.site-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-main {
	flex: 1 0 auto;
}

/* ==========================================================================
   5. Header + nav
   ========================================================================== */

.site-header {
	background: var(--color-surface);
	/* --space-8 rather than a literal: the next token up from --space-5, which
	   works out ~11px more top and bottom and keeps the bar on the 4px scale. */
	padding: var(--space-8) var(--gutter);
}

.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

/* Sized in rem so the logo scales with the root, the way it would under browser
   zoom. The width/height attributes stay on the tag for layout stability. */
.navbar-brand img {
	display: block;
	width: var(--logo-width);
	height: auto;
}

.site-footer .navbar-brand img,
.site-info-brand img {
	width: calc(var(--logo-width) * 0.835); /* 187px against the 224px header logo */
}

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: var(--space-2);
	cursor: pointer;
	line-height: 0;
}

.nav-toggle svg {
	width: 1.5rem;
	height: 1.5rem;
}

.nav-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu a {
	display: block;
	color: var(--color-ink);
	font-size: 1.0417rem; /* 15px against the 90% root */
	font-weight: var(--weight-medium);
	text-decoration: none;
	padding-left: var(--space-6);
}

.nav-menu a:hover,
.nav-menu .current_page_item > a,
.nav-menu .current-menu-item > a {
	color: var(--color-link);
}

/* Dropdowns — hover on pointer devices, toggled class on touch/mobile */
.nav-menu .sub-menu {
	display: none;
	position: absolute;
	z-index: 20;
	min-width: max-content;
	margin: 0;
	padding: var(--space-2) 0;
	list-style: none;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
}

.nav-menu li {
	position: relative;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li.is-open > .sub-menu {
	display: block;
}

.nav-menu .sub-menu a {
	white-space: nowrap;
	padding: var(--space-2) var(--space-6);
	font-size: 1.0417rem; /* 15px against the 90% root */
	font-weight: var(--weight-medium);
}

/* Dropdown links deliberately have no :hover rule of their own — that lets
   .nav-menu a:hover apply, so they highlight exactly like the top level. */

@media (max-width: 1199.98px) {
	.nav-toggle {
		display: block;
	}

	.nav-menu {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		padding-top: var(--space-4);
	}

	.site-nav.is-open .nav-menu {
		display: flex;
	}

	.site-nav {
		flex-wrap: wrap;
	}

	.nav-menu a {
		padding: var(--space-2) 0;
	}

	.nav-menu .sub-menu {
		position: static;
		border: 0;
		padding: 0 0 0 var(--space-4);
	}
}

/* Hello bar */
.hellobar {
	background: var(--color-red);
	color: var(--color-surface);
	font-size: var(--text-sm);
	line-height: 1.4;
}

.hellobar-inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-3) var(--gutter);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
}

.hellobar-text {
	margin: 0;
}

.hellobar-cta {
	color: var(--color-surface);
	font-weight: var(--weight-bold);
	text-decoration: none;
	white-space: nowrap;
}

.hellobar-cta:hover {
	color: var(--color-surface);
	text-decoration: underline;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.site-footer {
	background: var(--color-surface);
	padding: var(--space-12) 0 var(--space-8);
	margin-top: auto;
	border-top: 1px solid var(--color-rule);
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.site-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 992px) {
	.site-footer-grid {
		grid-template-columns: 3fr 3fr 6fr;
	}
}

.site-footer a {
	display: block;
	margin: 0 0 var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-ink);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-link);
}

.site-footer .widget-title {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-ink);
	/* The column heading sits flush with the top of its column — the global
	   heading margin would push it out of line with the brand block beside it. */
	margin-top: 0;
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Minimal footer used by landing-page templates */
.site-footer-min .site-footer-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

/* ==========================================================================
   7. Page header (shared hero band)
   ========================================================================== */

.page-header {
	background: var(--color-sand);
	padding-block: var(--space-16);
	margin-bottom: var(--space-12);
	text-align: center;
}

.page-header h1 {
	font-weight: var(--weight-bold);
	margin: 0;
	padding: 0;
}

.page-header p {
	margin: var(--space-5) 0 0;
	padding: 0;
}

/* ==========================================================================
   8. Single post
   ========================================================================== */

.post-header {
	padding-block: var(--space-20);
	background: var(--color-sand);
	text-align: center;
}

.post-header .entry-title {
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin: 0 0 var(--space-8);
	padding-inline: var(--title-inset);
}

.entry-meta {
	font-size: var(--text-sm);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8);
}

/* One centred sentence. display:block undoes the flex row above, which would
   otherwise turn each link into a flex item and open a 2rem gap around it.
   The links inherit the sentence's size — .entry-meta a resets to
   --text-base, which would make them larger than the words around them. */
p.entry-meta {
	display: block;
	margin: 0;
	text-align: center;
}

p.entry-meta a {
	font-size: inherit;
}

.entry-meta p {
	margin: 0;
}

.entry-meta a {
	font-size: var(--text-base);
	color: var(--color-ink);
}

.entry-meta a:hover {
	color: var(--color-link);
}

.entry-meta .icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex: none;
}

.post-body {
	display: grid;
	grid-template-columns: 1fr;
	padding-top: var(--space-20);
}

/* Fixed sidebar, measure-capped article column, pair centred in the container.
   v4 used 3fr/8fr, which let the prose run to ~90 characters per line. */
@media (min-width: 992px) {
	.post-body {
		grid-template-columns: minmax(0, 16rem) minmax(0, var(--measure));
		gap: var(--space-12);
		justify-content: center;
	}
}

.entry-sidebar {
	display: none;
}

@media (min-width: 992px) {
	.entry-sidebar {
		display: block;
	}
}

.sticky-sidebar {
	position: sticky;
	top: var(--space-8);
}

.entry-sidebar h2 {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.entry-sidebar .toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-sidebar .toc li {
	margin-bottom: var(--space-2);
	font-size: var(--text-sm);
}

.entry-sidebar .toc a {
	text-decoration: none;
}

.entry-sidebar .toc a:hover {
	text-decoration: underline;
}

.entry-sidebar .toc li.active a {
	color: var(--color-ink);
	font-weight: var(--weight-normal);
}

/* ==========================================================================
   9. Entry content
   --------------------------------------------------------------------------
   Type inside the article is em-based so the whole block — prose and headings
   together — scales from --text-article.
   ========================================================================== */

.entry-content {
	font-size: var(--text-article);
	margin: 0 0 var(--space-20);
	min-width: 0;
}

.entry-content > h2:first-child {
	margin-top: 0;
}

.entry-content p,
.entry-content li {
	font-size: 1em;
	line-height: var(--leading-relaxed);
}

.entry-content p {
	margin-bottom: 1em;
}

.entry-content li {
	margin-bottom: var(--space-1);
}

.entry-content ul,
.entry-content ol {
	margin-block: var(--space-4);
	padding-left: var(--space-6);
}

.entry-content li ul {
	margin-top: var(--space-4);
}

.entry-content strong {
	font-weight: var(--weight-semibold);
}

.entry-content a {
	text-decoration: none;
	text-underline-offset: 2px;
	color: var(--color-link);
}

/* Already --color-link at rest, so the hover signal is the underline. Same for
   the TOC links further up. */
.entry-content a:hover {
	text-decoration: underline;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: var(--space-10);
	margin-bottom: var(--space-3);
}

.entry-content h1,
.entry-content h2 {
	letter-spacing: var(--tracking-tight);
}

.entry-content h2 {
	font-size: 1.5em;
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
}

.entry-content h3 {
	font-size: 1.125em;
	font-weight: var(--weight-semibold);
	line-height: var(--leading-normal);
	margin-top: var(--space-8);
	margin-bottom: var(--space-2);
}

.entry-content h2 + h3,
.entry-content h3 + h4 {
	margin-top: var(--space-3);
}

.entry-content blockquote {
	border-left: 2px solid var(--color-border);
	padding: 0 0 0 var(--space-4);
	font-size: 1em;
	line-height: var(--leading-relaxed);
	color: var(--color-muted);
	margin: var(--space-6) 0;
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.entry-content blockquote h2,
.entry-content blockquote h3 {
	margin-top: 0;
	font-size: 1em;
}

.entry-content code {
	background: var(--color-muted-bg);
	font-size: 0.875em;
	padding: 0.125rem var(--space-1);
	border-radius: 0.25rem;
}

/* Classic Editor's [caption] shortcode writes an inline width onto the figure
   (style="width: 1024px"), which escapes the measure. max-width caps it without
   needing !important, since it constrains the inline width rather than fighting
   it for the same property. */
.entry-content figure,
.entry-content .wp-caption {
	max-width: 100%;
	padding: 0;
	border: 0;
	margin-block: var(--space-6);
	/* The UA stylesheet gives figure `margin: 1em 40px`. margin-block above only
	   replaces the vertical half, so the 40px insets survived and pushed every
	   image 40px right of the prose — and 40px past its right edge. */
	margin-inline: 0;
}

.entry-content figcaption {
	background: var(--color-surface);
	font-size: 0.96875em;
}

/* Author note closing the article. */
.author-bio {
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.author-bio h2 {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	margin: 0 0 var(--space-2);
}

.author-bio p {
	color: var(--color-muted);
	margin: 0;
}

.entry-content img {
	border: 1px solid var(--color-border);
}

/* Tables */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	line-height: 1.5;
	margin: var(--space-6) 0;
}

.entry-content th,
.entry-content td {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	font-weight: var(--weight-semibold);
}

/* Gutenberg wraps tables in figure.wp-block-table — scroll wide tables on mobile */
.entry-content .wp-block-table {
	overflow-x: auto;
}

/* Screenshot-heavy landing page: edge-to-edge images, no frame.
   Was .page-id-5929 in v4 — now opt-in via a page class so it survives an ID change. */
.page-flush-images .entry-content figure {
	margin-block: 0;
}

.page-flush-images .entry-content img {
	border: none;
}

/* ==========================================================================
   10. Signup CTA (shortcode output)
   ========================================================================== */

.entry-content #signup-cta {
	background-color: var(--color-sand);
	padding: var(--space-16);
	text-align: center;
	margin: var(--space-16) 0;
}

@media (max-width: 767.98px) {
	.entry-content #signup-cta {
		padding: var(--space-8);
	}
}

.subtitle {
	font-size: 0.9375rem;
	color: var(--color-red);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	margin-bottom: var(--space-8);
}

.entry-content #signup-cta h3,
.entry-content #signup-cta p {
	padding: 0;
	margin: 0 0 var(--space-8);
}

.entry-content #signup-cta ul,
.entry-content #signup-cta ol {
	text-align: left;
	padding-left: var(--space-8);
}

.entry-content #signup-cta li {
	margin-bottom: var(--space-1);
}

.entry-content #signup-cta img {
	border: none;
	margin-bottom: var(--space-8);
}

.entry-content #signup-cta input,
.entry-content #signup-cta textarea,
.entry-content #signup-cta select {
	width: 100%;
	padding: 0.375rem 0.75rem;
	margin-bottom: 0;
	border: 1px solid var(--color-field-border);
	border-radius: var(--radius-control);
	height: 2.8125rem;
	background-color: var(--color-surface);
	color: var(--color-ink);
	font-size: var(--text-base);
}

.entry-content #signup-cta input:focus,
.entry-content #signup-cta textarea:focus,
.entry-content #signup-cta select:focus {
	border-color: var(--color-muted);
}

/* No #signup-cta button rules here on purpose. They styled Kit's embedded
   submit button, and all three opt-ins now render our own .cta instead — an id
   selector outranks .cta, so anything left here silently desynced these buttons
   from every other button on the site. */

/* Dark variant — the deck-download opt-in (Figma 2778:35). Scoped to the
   modifier class so the three sand-background shortcodes are untouched. */
.entry-content #signup-cta.signup-cta-dark {
	background-color: var(--color-blue);
	color: var(--color-surface);
	padding: var(--space-6);
	text-align: left;
}

.entry-content #signup-cta.signup-cta-dark h3 {
	color: var(--color-surface);
	font-size: var(--text-2xl);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-5);
}

.entry-content #signup-cta.signup-cta-dark p {
	color: var(--color-muted-on-blue);
	margin-bottom: 0;
}

/* .optin-form already brings the grid and the field gap; two columns and the
   full-width button are the only differences from the dialog version. */
.entry-content #signup-cta.signup-cta-dark .optin-form {
	grid-template-columns: 1fr 1fr;
	margin-top: var(--space-8);
}

.entry-content #signup-cta.signup-cta-dark .optin-form input {
	height: 3rem;
}

.entry-content #signup-cta.signup-cta-dark .cta {
	grid-column: 1 / -1;
}

/* Sits flush with the bottom edge — the collage is pre-cropped to the visible
   band, so no object-fit is needed. */
.entry-content #signup-cta.signup-cta-dark .signup-cta-decks {
	display: block;
	width: 100%;
	height: auto;
	margin: var(--space-8) 0 calc(var(--space-6) * -1);
}

@media (max-width: 767.98px) {
	.entry-content #signup-cta.signup-cta-dark .optin-form {
		grid-template-columns: 1fr;
	}
}

/* ConvertKit / OptimizePress embedded forms — match site typography */
.formkit-form input,
.formkit-form button,
.op3-element[data-op3-element-type="customhtml"] {
	font-family: var(--font-sans);
	font-size: var(--text-base);
}

/* Kit writes border-radius:4px inline on its inputs too, so this never won
   before — it is pinned rather than changed, and now moves with the token. */
.formkit-form input {
	border-radius: var(--radius-control) !important;
}

/* The button half of the group above — its field siblings stay square.

   Every declaration is !important because Kit owns this element: it writes
   `border-radius:4px;font-weight:700` inline, which no selector can outrank,
   and the rest from `.formkit-form[data-uid="…"] .formkit-submit`, which
   outranks anything sane. This is the only way a Kit-rendered button matches
   .cta — the real fix is to drop the JS embed and post to the form directly,
   the way the three shortcodes now do. Colour is left to Kit deliberately. */
.formkit-form button {
	border-radius: var(--radius-control) !important;
	font-size: 1.0417rem !important; /* 15px, as .cta */
	font-weight: var(--weight-medium) !important;
	line-height: 1.2 !important;
	padding: 0.75em 1.6em !important;
	height: auto !important;
}

.formkit-form button:hover {
	filter: brightness(1.12);
}

/* ==========================================================================
   11. Archive / article listing
   ========================================================================== */

.articles-section {
	border-bottom: 1px solid var(--color-rule);
	padding-top: var(--space-12);
}

.articles-section:first-of-type {
	padding-top: 0;
}

.articles-section:last-of-type {
	border-bottom: none;
}

.section-header {
	text-align: center;
	margin-bottom: var(--space-8);
}

.section-header h2 {
	font-weight: var(--weight-bold);
}

.article-tile-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 768px) {
	.article-tile-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.article-tile-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

.article-tile {
	padding: var(--space-3) 0;
}

/* Column dividers. v4 used --color-tertiary-grey, which was never defined —
   the borders rendered as currentColor (near-black) instead of grey. */
@media (min-width: 768px) {
	.article-tile:not(:nth-child(2n)) {
		border-right: 1px solid var(--color-border);
		padding-right: var(--space-8);
	}
}

@media (min-width: 992px) {
	.article-tile {
		border-right: 1px solid var(--color-border);
		padding-right: var(--space-8);
	}

	.article-tile:nth-child(3n) {
		border-right: none;
		padding-right: 0;
	}
}

/* Category links. the_category() is called with a separator, so it emits bare
   anchors rather than a .post-categories list — the colour has to be set on
   the anchor, which would otherwise take the global link blue. Scoped to the
   tile: .subtitle is also a MailerLite embed class on single posts. */
.article-tile .subtitle {
	text-transform: capitalize;
	font-weight: var(--weight-semibold);
}

.article-tile .subtitle a {
	color: var(--color-red);
	text-decoration: none;
}

.article-tile h3,
.article-tile h3 a {
	font-size: var(--text-base);
	color: var(--color-ink);
	line-height: 1.4;
	font-weight: var(--weight-semibold);
	margin-bottom: var(--space-1);
}

/* .subtitle is an inline span, so the gap above the title is the h3's own
   margin; the gap below is the excerpt's, which wins the margin collapse. */
.article-tile h3 {
	margin-top: var(--space-2);
}

.article-tile p {
	margin-top: var(--space-2);
}

.article-tile .subtitle a:hover,
.article-tile h3 a:hover {
	color: var(--color-link);
}

.articles-read-more {
	text-align: center;
	margin-top: var(--space-5);
	margin-bottom: var(--space-16);
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-8);
	margin-bottom: var(--space-20);
}

.pagination .page-numbers {
	padding: 0 var(--space-3);
	border-right: 1px solid var(--color-border);
	text-decoration: none;
}

/* Anchor only — the current page is a span and has nothing to hover to. */
.pagination a.page-numbers:hover {
	text-decoration: underline;
}

.pagination .page-numbers:last-child {
	border-right: 0;
}

/* Post category list on single posts */
.post-categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-categories li a {
	font-size: var(--text-base);
	color: var(--color-ink);
}

/* ==========================================================================
   12. Landing-page templates
   ========================================================================== */

/* Prose pages (about, contact, terms) share the article measure. */
.landing-narrow {
	max-width: var(--measure);
	margin-inline: auto;
}

/* ==========================================================================
   12b. Landing page sections
   --------------------------------------------------------------------------
   Shared components for the pages converted off OptimizePress. Section >
   inner > content, mirroring the builder's own section/row/column nesting so
   the conversions stay close to the originals.
   ========================================================================== */

.section {
	padding-block: var(--space-20);
}

.section-sand {
	background: var(--color-sand);
}

.section-blue {
	background: var(--color-blue);
	color: var(--color-surface);
}

.section-inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section-narrow {
	max-width: var(--measure);
	margin-inline: auto;
}

.section-center {
	text-align: center;
}

/* Hero */
.hero-title {
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	/* auto insets, not 0 — a plain `margin: 0 0 x` here would override the
	   margin-inline: auto that .section-narrow sets, and left-align the block. */
	margin: 0 auto var(--space-6);
}

.hero-lede {
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-muted);
	margin: 0 auto var(--space-10);
	max-width: var(--measure);
}

/* Signup form. The ConvertKit embed brings its own markup; these rules only
   constrain and align it — field styling stays in section 10. */
.hero-form {
	max-width: 32rem;
	margin-inline: auto;
}

.hero-form .formkit-form {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

.hero-form .formkit-powered-by-convertkit-container {
	display: none;
}

/* Trust strip. The firm logos are white-fill SVGs drawn for a dark ground, so
   this block only works on .section-blue — do not move it onto a light one. */
.trust-label {
	font-size: var(--text-sm);
	color: var(--color-surface);
	margin: 0 0 var(--space-8);
}

/* Shallower than a normal band — it is a trust strip between two sections,
   not a section in its own right. The second selector needs both classes to
   outrank `.landing .section`, which is equally specific and declared later. */
.logo-band,
.landing .section.logo-band {
	padding-block: var(--space-12);
}

/* space-between spreads the row edge to edge. The gap is the wrap fallback and
   the floor when a narrow viewport leaves nothing to distribute.

   The inset is deliberately px, as --container-max is: a frame measurement
   that holds its physical size rather than following the root scale. */
.logo-bar {
	--logo-h: 1.9rem;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6) var(--space-8);
	padding-inline: 100px;
}

.logo-bar img {
	height: var(--logo-h);
	width: auto;
}

/* Google and Goldman are drawn small inside their own artboards, so a shared
   height leaves them optically lighter than the rest of the row. Matched on
   src because the markup carries no per-logo hook — one loop, one <img>. */
.logo-bar img[src$="/google.svg"],
.logo-bar img[src$="/goldman.svg"] {
	height: calc(var(--logo-h) * 1.2);
}

/* Senja testimonial widgets. They render into a shadow root, so the theme can
   only size and space the container — everything inside is styled in Senja. */
.senja-embed {
	display: block;
	width: 100%;
}

.senja-badge {
	margin-bottom: var(--space-8);
}

@media (max-width: 767.98px) {
	.section {
		padding-block: var(--space-12);
	}

	/* Back to centred: the row wraps here, and space-between would strand the
	   last two logos at opposite edges. The 100px inset also goes — it would
	   eat more than half of a 375px viewport. */
	/* Retunes the var so the two oversized logos keep their 1.2 ratio here. */
	.logo-bar {
		--logo-h: 1.75rem;

		justify-content: center;
		gap: var(--space-5) var(--space-8);
		padding-inline: 0;
	}
}

/* ==========================================================================
   12c. Landing sections
   --------------------------------------------------------------------------
   Measured off the OptimizePress originals: base 16px/1.5, h1 32/600, h2
   24/600, h3 18.7/600, prose column 600px, navy #042249, sand #f8f7f6.

   The site chrome runs at a 90% root scale; these pages were designed at a
   16px base. `.landing` restores that base once, and everything inside is em,
   so the whole page scales from this single declaration.
   ========================================================================== */

.landing {
	font-size: 1.1111rem; /* 16px against the 90% root */
	line-height: 1.5;

	/* 600px. Deliberately rem, not em: em resolves against each element's own
	   font-size, so one value would mean 600px on prose and 900px on a heading. */
	--landing-measure: 41.667rem;
}

.landing .section {
	padding-block: 4em;
}

/* Continues the section above rather than starting a new beat. */
.landing .section-tight {
	padding-top: 1em;
}

.landing h1,
.landing h2,
.landing h3 {
	color: var(--color-heading);
	letter-spacing: normal;
}

.landing h1 {
	font-size: 2em;
	font-weight: var(--weight-semibold);
	line-height: 1.2;
	margin: 0 0 0.75em;
}

/* …but that `margin: 0 0 x` outranks .section-narrow's own margin-inline:auto
   (0,1,1 beats 0,1,0), which left-aligned every constrained block on a landing
   page. Restore the utility's centring for anything that opts into it — the
   heroes that want a left edge do not use .section-narrow. */
.landing .section-narrow {
	margin-inline: auto;
}

.landing h2 {
	font-size: 1.5em;
	font-weight: var(--weight-semibold);
	line-height: 1.3;
	margin: 0 0 1.5em;
}

/* Section headings wrap on the same measure as the prose beneath them.
   Scoped to direct children so the purchase panel's own heading is unaffected. */
.landing .section-inner > h2 {
	max-width: var(--landing-measure);
	margin-inline: auto;
}

.landing h3 {
	font-size: 1.17em;
	font-weight: var(--weight-semibold);
	margin: 0 0 0.75em;
}

/* Deliberately no font-size here. `.landing p` outranks single-class label
   selectors like .eyebrow and .card-meta, so setting it silently forced them
   all back to 1em. Paragraphs already inherit the base. */
.landing p,
.landing li {
	line-height: 1.5;
}

/* Homepage only — prose at 15px while the rest of the page keeps its 16px base.
   Class-less selectors for the reason above: anything with a class (.eyebrow,
   .rating, .hero-lede, .card-label, .pull-quote) carries its own size and must
   keep it. A class-less <p> wrapping a .cta is a button holder, not prose —
   .cta sizes at 1em, so shrinking its parent shrinks the whole button off the
   scale its siblings sit on. */
body.home .landing p:not([class]):not(:has(> .cta)),
body.home .landing li:not([class]) {
	font-size: 0.9375em; /* 15px against .landing's 16px */
}

.section-dark {
	background: var(--color-blue);
	color: var(--color-surface);
}

.section-dark h1,
.section-dark h2,
.section-dark h3 {
	color: var(--color-surface);
}

/* …but cards on that band are sand or white, so their headings stay dark. */
.section-dark .card h2,
.section-dark .card h3,
.section-dark .purchase h2,
.section-dark .purchase h3 {
	color: var(--color-heading);
}

/* Prose — left-aligned text in a centred 600px column */
.section-prose {
	max-width: var(--landing-measure);
	margin-inline: auto;
	text-align: left;
}

.section-prose > :last-child {
	margin-bottom: 0;
}

.section-prose ul,
.section-prose ol {
	padding-left: 1.5em;
}

.section-prose li {
	margin-bottom: 0.75em;
}

.section-shot {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 3em auto 0;
}

.section-shot-narrow {
	max-width: 70%;
}

/* Eyebrow + rating */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.8125em;
	font-weight: var(--weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-red);
	margin: 0 0 1.5em;
}

/* The hero eyebrow is dark; only the feature sections are red. */
.hero-split .eyebrow {
	color: var(--color-heading);
}

/* Fixed box, both axes — these are uploaded SVGs with no useful intrinsic
   size, and the global `img { height: auto }` would let them balloon. */
.eyebrow img {
	height: 1.375em;
	width: 1.375em;
	object-fit: contain;
	flex: none;
}

/* Headline figures strip */
.stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
	text-align: center;
}

@media (min-width: 768px) {
	.stats {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 992px) {
	/* Columns follow the item count, so five stats span the row rather than
	   leaving a sixth slot empty. */
	.stats {
		grid-template-columns: repeat(var(--stat-count, 6), 1fr);
	}
}

.stat {
	background: var(--color-surface);
	padding: 1.25em 0.75em;
}

.stat-value {
	font-size: 2em;
	font-weight: var(--weight-semibold);
	line-height: 1.1;
	color: var(--color-heading);
	margin: 0 0 0.25em;
}

.stat-label {
	font-size: 0.8125em;
	color: var(--color-muted);
	margin: 0;
}

.section-center .eyebrow {
	justify-content: center;
}

.rating {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.8125em;
	font-weight: var(--weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-heading);
	margin: 0 0 1.5em;
}

/* Star strips are fixed-height: the global `img { height: auto }` would
   otherwise let them render at intrinsic size. */
.rating img,
.stars {
	height: 1.25em;
	width: auto;
}

.section-center .rating,
.purchase .rating {
	justify-content: center;
}

/* …but a card is a left-aligned block sitting inside a centred section. */
.card .rating {
	justify-content: flex-start;
}

/* .rating hardcodes the heading colour, which disappears on the navy bands.
   Direct children of the band only: the purchase panel and the cards that sit
   on those bands are light, and their ratings must stay dark. */
.section-blue > .section-inner > .rating,
.section-dark > .section-inner > .rating {
	color: inherit;
}

/* Call to action */
.cta {
	display: inline-block;
	background: var(--color-red);
	color: var(--color-surface);
	/* <button> does not inherit the page font — the UA sets Arial on it — and
	   Arial has no 500, so a .cta on a <button> fell back to regular while the
	   same class on an <a> rendered Geist Medium. */
	font-family: inherit;

	/* rem, not em: a button is a control, so it holds one size wherever it lands —
	   .landing's 16px base, the 14.4px chrome, or the optin dialog. */
	font-size: 1.0417rem; /* 15px against the 90% root */
	font-weight: var(--weight-medium);
	text-decoration: none;

	/* Not inherited: .landing runs 1.5, which puts 4px of half-leading above and
	   below the label. That is invisible in the CSS but real in the box — it made
	   the effective side:vertical padding 1.22:1, near square, and the button read
	   as a slab rather than a control. 1.2 plus the padding below lands at 1.78:1. */
	line-height: 1.2;
	padding: 0.75em 1.6em;
	border: 0;
	border-radius: var(--radius-control);
	cursor: pointer;
	text-align: center;
}

/* One step toward white, same hue — see --hover-lift. Was a flat swap to
   --color-heading, which sent red and navy to the same grey and lost the brand
   colour on the one interaction that should confirm it.

   The `color` is not redundant: `.entry-content a:hover` is more specific and
   would otherwise turn the label blue inside an article. */
.cta:hover {
	background: color-mix(in srgb, var(--color-surface) var(--hover-lift), var(--color-red));
	color: var(--color-surface);
}

/* Secondary action — brand navy, as on the original's download buttons. */
.cta-secondary {
	background: var(--color-blue);
}

/* Closed/unavailable action — a <span>, not a link, so no href to neutralise. */
.cta-disabled,
.cta-disabled:hover {
	background: var(--color-border);
	color: var(--color-muted);
	cursor: default;
}

.cta-secondary:hover {
	background: color-mix(in srgb, var(--color-surface) var(--hover-lift), var(--color-blue));
}

.cta-block {
	display: block;
	width: 100%;
}

.cta-note {
	font-size: 0.875em;
	color: var(--color-muted);
	margin: 1em 0 0;
}

/* Stacked hero — one full-width left-aligned column, no media beside it.
   The front page runs its headline larger than the split product heroes
   (40px against 32px) and centres the whole block on mobile. */
/* Copy column. Deliberately px, as --container-max is: a frame measurement
   that keeps its physical size and does not follow the root scale. Narrower
   than the builder's 849px lede, and it now caps the headline too. */
.hero-stack h1,
.hero-stack .hero-lede {
	max-width: 800px;
}

.hero-stack h1 {
	/* 43.2px — the same size as --text-3xl, but em so the hero keeps scaling
	   off .landing's base rather than pinning to the chrome scale. */
	font-size: 2.7em;

	/* Between --weight-semibold and --weight-bold. Geist is a variable font at
	   100–900, so this is a real instance, not a synthesised one. */
	font-weight: 650;
}

.hero-stack .hero-lede {
	font-size: 1.375em;
	font-weight: var(--weight-medium);
	line-height: 1.4;
	color: inherit;
	margin: 0;
}

@media (max-width: 767.98px) {
	.hero-stack {
		text-align: center;
	}

	.hero-stack h1 {
		font-size: 1.75em;
	}

	.hero-stack .hero-lede {
		font-size: 1.125em;
	}

	.hero-stack .rating {
		justify-content: center;
	}
}

/* Closing pull quote — one line of testimonial on a navy band, not a card. */
.pull-quote {
	font-size: 1.4375em;
	font-weight: var(--weight-semibold);
	margin: 0 0 0.65em;
}

/* Split hero */
.hero-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3em;
	align-items: center;
	text-align: left;
}

@media (min-width: 992px) {
	.hero-split {
		grid-template-columns: 1fr 1fr;
	}
}

/* Body copy, not a muted subtitle — .hero-lede is styled for the centred
   newsletter hero, so the split hero resets it. */
.hero-split .hero-lede {
	font-size: 1em;
	line-height: 1.5;
	color: inherit;
	max-width: none;
	margin: 0 0 1.5em;
}

.video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
}

.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Feature section: copy left, image right */
.prose-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3em;
	align-items: center;
	text-align: left;
}

@media (min-width: 992px) {
	.prose-split {
		grid-template-columns: 1fr 1fr;
	}
}

.prose-split .section-prose {
	max-width: none;
	margin-inline: 0;
}

.prose-split h2 {
	max-width: none;
	margin-inline: 0;
	text-align: left;
}

.prose-split img {
	display: block;
	max-width: min(100%, 400px);
	height: auto;
	margin: 0;
}

/* Card grids */
.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5em;
	margin-top: 3em;
	text-align: left;
}

@media (min-width: 768px) {
	.card-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.card-grid-2,
	.card-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.card-grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* A single card sits centred on the measure rather than filling the row. */
.card-grid-1 {
	max-width: var(--landing-measure);
	margin-inline: auto;
}

/* Cards are filled panels, never bordered. Sand on both light and navy
   bands; only testimonials go white. */
.card {
	background: var(--color-sand);
	color: var(--color-ink);
	padding: 2em;
}

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

.card-white {
	background: var(--color-surface);
}

.card-center {
	text-align: center;
}

.card-center .card-icon {
	display: block;
	height: 4em;
	width: auto;
	margin: 0 auto 1.5em;
}

.card-shot {
	width: 100%;
	height: auto;
	margin-bottom: 1.5em;
	border: 1px solid var(--color-border);
}

.card-label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	color: var(--color-red);
	font-size: 0.875em;
	font-weight: var(--weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 1em;
}

.card-label svg {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
	flex: none;
}

/* Fixed box on both axes, as .eyebrow img — uploaded SVGs carry no useful
   intrinsic size and the global `img { height: auto }` would let them grow. */
.card-label img {
	width: 1.5em;
	height: 1.5em;
	object-fit: contain;
	flex: none;
}

.card-meta {
	font-size: 0.875em;
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 1em;
}

.card ul {
	margin: 0.75em 0 0;
	padding-left: 1.25em;
}

.card li {
	margin-bottom: 0.75em;
}

/* Panel — a filled block that can hold columns (case study, guarantee) */
.panel {
	background: var(--color-sand);
	padding: 3em;
	margin-top: 3em;
	text-align: center;
}

.panel-logo {
	max-width: 16em;
	height: auto;
	margin-bottom: 2.5em;
}

.panel-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5em;
	text-align: left;
}

@media (min-width: 768px) {
	.panel-cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

.panel-cols ul {
	padding-left: 1.25em;
	margin: 0;
}

.panel-cols li {
	margin-bottom: 0.75em;
}

/* Testimonials */
.testimonial-head {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 1em;
}

.testimonial-head img {
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.testimonial-name {
	font-size: 0.875em;
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}

.testimonial .stars {
	display: block;
	margin-bottom: 1em;
}

/* Guarantee */
.guarantee {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	align-items: center;
	text-align: center;
	margin-top: 0;
}

@media (min-width: 768px) {
	.guarantee {
		grid-template-columns: auto 1fr;
	}
}

.guarantee img {
	width: 9em;
	height: auto;
	margin-inline: auto;
}

/* Purchase panel */
.purchase {
	background: var(--color-surface);
	color: var(--color-ink);
	padding: 3em 2.5em;
	max-width: 44em;
	margin: 3em auto 0;
	text-align: center;
}

.price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.6em;
	margin: 0 0 1.5em;
}

.price-now {
	font-size: 2.2em;
	font-weight: var(--weight-semibold);
	line-height: 1;
}

.price-was {
	font-size: 1.1em;
	color: var(--color-muted);
}

.checklist {
	list-style: none;
	margin: 0 0 2.5em;
	padding: 0;
	text-align: left;
}

.checklist li {
	position: relative;
	padding-left: 2em;
	margin-bottom: 0.75em;
}

/* Green circled tick, drawn in CSS so there is no extra asset to ship. */
.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background: var(--color-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.4l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center / 0.8em no-repeat;
}

.secure-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-size: 0.875em;
	margin: 1.5em 0 1em;
}

.secure-note img {
	height: 1em;
	width: auto;
}

.card-logos {
	max-width: 22em;
	height: auto;
}

/* Hero badge — a wide graphic above the headline, not an eyebrow icon */
.hero-badge {
	display: block;
	max-width: 10em;
	height: auto;
	margin: 0 0 1.5em;
}

.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}

.hero-ctas .cta {
	flex: 1 1 14em;
}

/* Pill badge, e.g. "Currently in Beta" */
.badge {
	display: inline-block;
	background: var(--color-red);
	color: var(--color-surface);
	font-size: 0.8125em;
	font-weight: var(--weight-bold);
	padding: 0.5em 1em;
	margin: 0 0 1.5em;
}

/* Footnote under a claim */
.footnote {
	font-size: 0.75em;
	color: var(--color-muted);
}

/* Numbered topic panel: white card on the navy band, red circled numbers */
.numbered-panel {
	background: var(--color-surface);
	color: var(--color-ink);
	padding: 3em;
	margin-top: 3em;
	text-align: left;
}

.numbered-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 3em;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: topic;
}

@media (min-width: 768px) {
	.numbered-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.numbered-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.numbered-list li {
	counter-increment: topic;
	position: relative;
	padding: 0.9em 0 0.9em 2.5em;
	border-bottom: 1px solid var(--color-border);
}

.numbered-list li::before {
	content: counter(topic);
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--color-red);
	color: var(--color-surface);
	font-size: 0.8125em;
	font-weight: var(--weight-bold);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Green-ticked list of filled rows */
.check-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
	list-style: none;
	margin: 3em 0 0;
	padding: 0;
	text-align: left;
}

@media (min-width: 768px) {
	.check-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.check-list li {
	position: relative;
	background: var(--color-sand);
	padding: 1.1em 1.25em 1.1em 3.25em;
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 1.25em;
	top: 1.15em;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	background: var(--color-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.4l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center / 0.9em no-repeat;
}

/* Red-cross variant of the tick list, one item per row */
.check-list-single {
	grid-template-columns: 1fr;
	max-width: var(--landing-measure);
	margin-inline: auto;
}

@media (min-width: 768px) {
	.check-list-single {
		grid-template-columns: 1fr;
	}
}

.check-list-crosses li::before {
	background: var(--color-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' d='M5 5l6 6M11 5l-6 6'/%3E%3C/svg%3E") center / 0.8em no-repeat;
}

/* Outcome cards: green pill label, centred, on a white card */
.card-outcome {
	background: var(--color-surface);
	text-align: center;
}

.card-pill {
	display: flex;
	justify-content: center;
	margin: 0 0 1.25em;
}

.card-pill span {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: var(--color-green);
	color: var(--color-surface);
	font-size: 0.9375em;
	font-weight: var(--weight-semibold);
	padding: 0.35em 0.85em;
}

.card-pill span::before {
	content: "\2714";
	font-size: 0.9em;
}

/* Senja widgets sit straight under the intro copy; give them room. */
.section-prose + .senja-embed,
.section-inner > .senja-embed {
	display: block;
	margin-top: 3em;
}

/* Card grids with an image on top centre their copy under it. */
.card-shot + .card-label,
.card-shot ~ h3,
.card-shot ~ p {
	text-align: center;
}

/* Wrapper for the ported ETAC info block */
.etac-info-panel {
	background: var(--color-surface);
	padding: 2em 2.5em;
}

/* Featured video testimonial: embed, then quote, in one sand panel */
.video-testimonial {
	background: var(--color-sand);
	padding: 3em;
	text-align: center;
	max-width: 52em;
	margin-inline: auto;
}

.video-testimonial .stars {
	margin: 2em auto 1em;
}

.video-testimonial-attrib {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	margin-top: 1.5em;
	font-size: 0.9375em;
}

.video-testimonial-attrib img {
	width: 2.25em;
	height: 2.25em;
	border-radius: 50%;
	object-fit: cover;
}

/* Free-sample dialog */
.optin-dialog {
	max-width: 30em;
	width: calc(100% - 2em);
	border: 0;
	padding: 2.5em;
	background: var(--color-surface);
	color: var(--color-ink);
	text-align: center;
}

.optin-dialog::backdrop {
	background: rgb(0 0 0 / 0.5);
}

.optin-close-form {
	display: flex;
	justify-content: flex-end;
	margin-bottom: -1em;
}

.optin-close {
	background: none;
	border: 0;
	font-size: 1.75em;
	line-height: 1;
	color: var(--color-muted);
	cursor: pointer;
	padding: 0;
}

.optin-image {
	max-width: 12em;
	height: auto;
	margin: 0 auto 1.5em;
	display: block;
}

.optin-form {
	display: grid;
	gap: 0.75em;
	margin-top: 1.5em;
	text-align: left;
}

.optin-form input {
	width: 100%;
	padding: 0.75em;
	border: 1px solid var(--color-field-border);
	border-radius: var(--radius-control);
	font-size: 1em;
	font-family: inherit;
}

.optin-consent {
	font-size: 0.8125em;
	color: var(--color-muted);
	margin: 1.5em 0 0;
}

/* FAQ */
.faq {
	max-width: var(--landing-measure);
	margin-inline: auto;
	text-align: left;
}

.faq details {
	border-bottom: 1px solid var(--color-border);
	padding: 1.25em 0;
}

.faq summary {
	font-weight: var(--weight-semibold);
	cursor: pointer;
	list-style: none;
}

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

.faq summary::after {
	content: "+";
	float: right;
	color: var(--color-muted);
}

.faq details[open] summary::after {
	content: "–";
}

.faq details p {
	margin: 1em 0 0;
}

/* ==========================================================================
   13. Bootstrap compat shim
   --------------------------------------------------------------------------
   ponytail: OptimizePress builder pages and a handful of hand-written posts
   still emit Bootstrap 4 grid markup. This is the minimum that keeps them
   laid out without loading Bootstrap. Delete once Stage 2 replaces the OP
   pages and the remaining posts are cleaned up.
   ========================================================================== */

.container,
.container-fluid {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container {
	max-width: var(--container-max);
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: calc(var(--gutter) * -1);
}

.row > [class*="col-"],
.row > .col {
	position: relative;
	width: 100%;
	padding-inline: var(--gutter);
}

.col {
	flex: 1 0 0%;
}

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-9  { flex: 0 0 75%; max-width: 75%; }
.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-6  { flex: 0 0 50%; max-width: 50%; }
.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-3  { flex: 0 0 25%; max-width: 25%; }

@media (min-width: 768px) {
	.col-md-12 { flex: 0 0 100%; max-width: 100%; }
	.col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-md-6  { flex: 0 0 50%; max-width: 50%; }
	.col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
}

@media (min-width: 992px) {
	.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
	.col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-lg-9  { flex: 0 0 75%; max-width: 75%; }
	.col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-lg-6  { flex: 0 0 50%; max-width: 50%; }
	.col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-lg-3  { flex: 0 0 25%; max-width: 25%; }
}

@media (min-width: 1200px) {
	.col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}

.d-flex { display: flex; }
.d-none { display: none; }

@media (min-width: 992px) {
	.d-lg-block { display: block; }
}

.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.text-center { text-align: center; }
.my-auto { margin-block: auto; }
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.mr-3 { margin-right: var(--space-4); }

/* The title inset would crush the heading on small screens. */
@media (max-width: 767.98px) {
	:root {
		--title-inset: 0px;
	}
}