/* ==========================================================================
   Concept Fusion360 — site kit
   Cardinal Red #CF2E2E · Brand Grey #8F8F8F · Poppins
   Everything is namespaced under .cf-root so nothing here can reach the
   theme, the dashboard or the two shortcode plugins by accident.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
	--cf-red-50:#FCF2F2;  --cf-red-100:#F8E2E2; --cf-red-200:#F1C0C0;
	--cf-red-300:#E79696; --cf-red-400:#DB6464; --cf-red:#CF2E2E;
	--cf-red-600:#B22A2A; --cf-red-700:#922627; --cf-red-800:#6D2122;

	--cf-grey-50:#FBFBFB; --cf-grey-100:#F5F5F5; --cf-grey-200:#ECECEC;
	--cf-grey-300:#DBDBDB; --cf-grey-400:#BABABA; --cf-grey:#8F8F8F;
	--cf-grey-600:#717070; --cf-grey-700:#595657; --cf-grey-800:#413D3E;
	--cf-ink:#1C1618;

	--cf-success:#1F7A46; --cf-warning:#9A6200; --cf-danger:#8E1B1B;

	--cf-font:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--cf-radius:14px;
	--cf-radius-lg:22px;
	--cf-gutter:24px;
	--cf-max:1180px;

	--cf-shadow-1:0 1px 2px rgba(28,22,24,.05), 0 4px 14px rgba(28,22,24,.05);
	--cf-shadow-2:0 2px 6px rgba(28,22,24,.07), 0 18px 44px rgba(28,22,24,.09);
}

/* Full-bleed sections need the page to stop scrolling sideways. The class is
   added by cf360.js only on pages that actually contain a .cf-root. */
body.cf-has-root { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   Skeleton
   -------------------------------------------------------------------------- */

.cf-root {
	font-family: var(--cf-font);
	color: var(--cf-grey-800);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

.cf-root p { max-width: 72ch; }

.cf-section,
.cf-hero,
.cf-footer {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.cf-wrap {
	width: 100%;
	max-width: var(--cf-max);
	margin: 0 auto;
	padding-left: var(--cf-gutter);
	padding-right: var(--cf-gutter);
}

.cf-section { padding-block: clamp(48px, 7vw, 88px); background: #fff; }
.cf-section--muted { background: var(--cf-grey-50); }
.cf-section--quote { background: var(--cf-ink); }
.cf-section--cta { background: var(--cf-red-50); padding-block: clamp(40px, 5vw, 64px); }

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */

.cf-head { margin-bottom: clamp(28px, 4vw, 44px); max-width: 60rem; }

.cf-kicker {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cf-red);
	margin: 0 0 10px;
}

.cf-kicker--onDark { color: var(--cf-red-200); }

.cf-title {
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--cf-ink);
	margin: 0 0 14px;
	text-wrap: balance;
}

.cf-lede {
	font-size: clamp(1rem, 1.6vw, 1.12rem);
	color: var(--cf-grey-700);
	margin: 0;
}

.cf-prose p { margin: 0 0 1.1em; font-size: 1.06rem; color: var(--cf-grey-700); }
.cf-prose p:last-child { margin-bottom: 0; }

.cf-note {
	margin-top: 26px;
	font-size: .9rem;
	color: var(--cf-grey-600);
	border-left: 3px solid var(--cf-red-200);
	padding-left: 14px;
}

.cf-empty {
	background: var(--cf-grey-50);
	border: 1px dashed var(--cf-grey-300);
	border-radius: var(--cf-radius);
	padding: 26px;
	color: var(--cf-grey-600);
	margin: 0;
	max-width: none;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.cf-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}

.cf-btn__arrow { transition: transform .18s; flex: none; }
.cf-btn:hover .cf-btn__arrow { transform: translateX(3px); }

.cf-btn--primary { background: var(--cf-red); color: #fff; border-color: var(--cf-red); }
.cf-btn--primary:hover, .cf-btn--primary:focus { background: var(--cf-red-600); border-color: var(--cf-red-600); color: #fff; }

.cf-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.cf-btn--ghost:hover, .cf-btn--ghost:focus { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.cf-section .cf-btn--ghost { color: var(--cf-red-700); border-color: var(--cf-red-300); }
.cf-section .cf-btn--ghost:hover { background: var(--cf-red-50); border-color: var(--cf-red); }

.cf-root a:focus-visible,
.cf-root button:focus-visible,
.cf-root summary:focus-visible {
	outline: 3px solid var(--cf-red-400);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.cf-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #2A2023 0%, var(--cf-ink) 42%, #3A1517 100%);
	color: #fff;
	padding-block: clamp(56px, 9vw, 108px);
}

.cf-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 82% 18%, rgba(207,46,46,.5), transparent 46%),
		radial-gradient(circle at 12% 88%, rgba(207,46,46,.22), transparent 44%);
	pointer-events: none;
}

.cf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .12;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 72%);
}

.cf-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 40px;
}

.cf-hero__title {
	font-size: clamp(2rem, 5.4vw, 3.5rem);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -.028em;
	margin: 0 0 18px;
	color: #fff;
	text-wrap: balance;
}

.cf-hero__sub {
	font-size: clamp(1.02rem, 1.8vw, 1.2rem);
	color: rgba(255,255,255,.86);
	margin: 0;
	max-width: 62ch;
}

.cf-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.cf-hero__mark { color: rgba(255,255,255,.1); line-height: 0; }
.cf-hero__mark svg { width: clamp(140px, 17vw, 220px); height: auto; stroke-width: .9; }

.cf-hero__mark--art svg { width: clamp(220px, 26vw, 360px); }

@media (prefers-reduced-motion: no-preference) {
	.cf-hero__art { animation: cf-drift 26s ease-in-out infinite alternate; transform-origin: 50% 50%; }
}

@keyframes cf-drift {
	from { transform: rotate(-4deg) scale(.985); }
	to   { transform: rotate(4deg) scale(1.015); }
}

.cf-hero--home .cf-hero__title { font-size: clamp(2.2rem, 6vw, 4rem); }

.cf-stats {
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 44px;
	border-top: 1px solid rgba(255,255,255,.18);
	padding-top: 26px;
}

.cf-stats li { display: flex; flex-direction: column; gap: 2px; }
.cf-stats__value { font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.1; }
.cf-stats__label { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* --------------------------------------------------------------------------
   Pillar grid
   -------------------------------------------------------------------------- */

/* Five items never divide evenly into a grid, so this is a centred flex row:
   three across, then two centred beneath, rather than four and an orphan. */
.cf-pillars {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

.cf-pillar {
	position: relative;
	display: flex;
	flex: 1 1 290px;
	max-width: 372px;
	flex-direction: column;
	padding: 28px 24px 24px;
	border: 1px solid var(--cf-grey-200);
	border-radius: var(--cf-radius-lg);
	background: #fff;
	text-decoration: none;
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}

.cf-pillar::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--cf-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s;
}

.cf-pillar:hover { border-color: var(--cf-red-200); box-shadow: var(--cf-shadow-2); transform: translateY(-3px); }
.cf-pillar:hover::before { transform: scaleX(1); }

/* A watermark ordinal. It duplicates the reading order and nothing else, is
   hidden from assistive technology, and is exempt from the contrast minimum
   as pure decoration (WCAG 1.4.3). Nothing informative is set in this grey. */
.cf-pillar__num {
	position: absolute;
	top: 18px;
	right: 20px;
	font-size: 2.6rem;
	font-weight: 800;
	color: var(--cf-grey-100);
	line-height: 1;
	letter-spacing: -.04em;
}

.cf-pillar__icon { color: var(--cf-red); line-height: 0; margin-bottom: 16px; }

.cf-pillar__title {
	font-size: 1.16rem;
	font-weight: 700;
	color: var(--cf-ink);
	margin: 0 0 8px;
	position: relative;
}

.cf-pillar__desc { font-size: .92rem; color: var(--cf-grey-700); margin: 0 0 18px; flex: 1; }

.cf-pillar__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--cf-red-600);
}

.cf-pillar__more svg { transition: transform .2s; }
.cf-pillar:hover .cf-pillar__more svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.cf-grid { display: grid; gap: 18px; }
.cf-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.cf-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.cf-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

.cf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px 22px 22px;
	background: #fff;
	border: 1px solid var(--cf-grey-200);
	border-radius: var(--cf-radius);
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}

.cf-section--muted .cf-card { background: #fff; }

.cf-card--link:hover { border-color: var(--cf-red-200); box-shadow: var(--cf-shadow-1); transform: translateY(-2px); }

.cf-card__num {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	/* grey-600 rather than grey-400: at this size it has to clear 4.5:1 */
	color: var(--cf-grey-600);
}

.cf-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--cf-red-50);
	color: var(--cf-red);
	margin-bottom: 16px;
	flex: none;
}

.cf-card__title { font-size: 1.05rem; font-weight: 650; color: var(--cf-ink); margin: 0 0 8px; padding-right: 30px; }
.cf-card__desc { font-size: .93rem; color: var(--cf-grey-700); margin: 0; flex: 1; }

.cf-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--cf-red-600);
}

/* "plain" variant drops the box and keeps the icon — used where the grid is
   supporting content rather than the main event. */
.cf-grid--plain .cf-card { border: 0; background: transparent; padding: 4px 0 0; box-shadow: none; }
.cf-grid--plain .cf-card__num { display: none; }
.cf-grid--plain .cf-card__title { padding-right: 0; }
.cf-grid--plain .cf-card__icon { background: transparent; border: 1.5px solid var(--cf-red-200); }

.cf-chip {
	align-self: flex-start;
	margin-top: 14px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}

.cf-chip--soon { background: #FBF3E3; color: var(--cf-warning); }
.cf-chip--live { background: #E8F4EC; color: var(--cf-success); }

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */

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

.cf-pull {
	font-size: clamp(1.5rem, 3.6vw, 2.3rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 auto;
	max-width: 22ch;
	border: 0;
	padding: 0;
	text-wrap: balance;
}

.cf-pull__sub {
	margin: 20px auto 0;
	color: rgba(255,255,255,.72);
	font-size: 1rem;
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.cf-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
}

.cf-cta__title { font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 700; color: var(--cf-ink); margin: 0 0 8px; }
.cf-cta__body { margin: 0; color: var(--cf-grey-700); font-size: 1rem; }
.cf-cta__action { flex: none; }

/* --------------------------------------------------------------------------
   Resource / file cards
   -------------------------------------------------------------------------- */

.cf-file {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px 22px 22px;
	background: #fff;
	border: 1px solid var(--cf-grey-200);
	border-radius: var(--cf-radius);
}

.cf-file__ext {
	align-self: flex-start;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .09em;
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--cf-ink);
	color: #fff;
	margin-bottom: 14px;
}

.cf-file__title { font-size: 1.02rem; font-weight: 650; color: var(--cf-ink); margin: 0 0 8px; }
.cf-file__desc { font-size: .9rem; color: var(--cf-grey-700); margin: 0 0 12px; flex: 1; }
.cf-file__meta { font-size: .8rem; color: var(--cf-grey-600); margin: 0; letter-spacing: .02em; }

.cf-file__dl {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	background: var(--cf-red);
	color: #fff;
	align-self: flex-start;
	transition: background-color .18s;
}

.cf-file__dl:hover { background: var(--cf-red-600); color: #fff; }
.cf-file__dl--locked { background: var(--cf-grey-800); }
.cf-file__dl--locked:hover { background: var(--cf-ink); }
.cf-file__dl--none { background: var(--cf-grey-200); color: var(--cf-grey-600); cursor: default; }

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

.cf-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; align-items: stretch; }

.cf-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 24px 26px;
	background: #fff;
	border: 1px solid var(--cf-grey-200);
	border-radius: var(--cf-radius-lg);
}

.cf-plan--featured { border-color: var(--cf-red); box-shadow: var(--cf-shadow-2); }

.cf-plan__flag {
	position: absolute;
	top: -12px;
	left: 24px;
	background: var(--cf-red);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 999px;
}

.cf-plan__name { font-size: 1.05rem; font-weight: 700; color: var(--cf-ink); margin: 0 0 6px; }

.cf-plan__price {
	font-size: 1.85rem;
	font-weight: 800;
	color: var(--cf-red);
	letter-spacing: -.02em;
	margin: 0 0 10px;
	line-height: 1.1;
}

.cf-plan__price span { display: block; font-size: .78rem; font-weight: 500; color: var(--cf-grey-600); letter-spacing: 0; text-transform: uppercase; margin-top: 4px; }
.cf-plan__desc { font-size: .9rem; color: var(--cf-grey-700); margin: 0 0 16px; }

.cf-plan__list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.cf-plan__list li { display: flex; gap: 9px; font-size: .9rem; color: var(--cf-grey-800); align-items: flex-start; }
.cf-plan__list svg { color: var(--cf-success); flex: none; margin-top: 2px; }

.cf-plan .cf-btn { justify-content: center; }

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

.cf-faq { border-top: 1px solid var(--cf-grey-200); max-width: 820px; }

.cf-faq__item { border-bottom: 1px solid var(--cf-grey-200); }

.cf-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 40px 18px 0;
	font-weight: 600;
	color: var(--cf-ink);
	position: relative;
	font-size: 1rem;
}

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

.cf-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--cf-red);
	line-height: 1;
}

.cf-faq__item[open] summary::after { content: "–"; }
.cf-faq__item p { margin: 0 0 20px; color: var(--cf-grey-700); font-size: .96rem; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.cf-mailto { margin-top: 32px; max-width: none; }

.cf-mailto a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--cf-red-50);
	color: var(--cf-red-700);
	font-weight: 600;
	text-decoration: none;
}

.cf-mailto a:hover, .cf-mailto a:focus { background: var(--cf-red-100); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Embedded plugin output
   -------------------------------------------------------------------------- */

.cf-embed { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */

.cf-root--footer { margin: 0; }

.cf-footer {
	background: linear-gradient(135deg, #2A2023 0%, var(--cf-ink) 46%, #3A1517 100%);
	color: rgba(255,255,255,.74);
	padding-block: 60px 34px;
	position: relative;
	overflow: hidden;
}

.cf-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 78% 12%, rgba(207,46,46,.32), transparent 52%);
	pointer-events: none;
}

.cf-footer > .cf-wrap { position: relative; z-index: 1; }

.cf-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: 34px 30px;
}

.cf-footer__label {
	font-size: 1.02rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 12px;
	letter-spacing: -.01em;
}

/* The short rule under each heading, in brand red rather than the blue of
   the original design. */
.cf-footer__label::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--cf-red);
	margin-top: 10px;
}

.cf-footer__col ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }

.cf-footer__col a {
	color: rgba(255,255,255,.74);
	text-decoration: none;
	font-size: .95rem;
	display: inline-block;
	min-height: 24px;
}

.cf-footer__col a:hover, .cf-footer__col a:focus { color: #fff; text-decoration: underline; }

.cf-footer__email {
	display: inline-flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 18px;
	color: rgba(255,255,255,.74);
	text-decoration: none;
	min-height: 44px;
}

.cf-footer__email svg { color: #fff; flex: none; margin-top: 2px; }
.cf-footer__email span { display: flex; flex-direction: column; gap: 3px; font-size: .95rem; }
.cf-footer__email strong { color: #fff; font-size: 1rem; font-weight: 650; }
.cf-footer__email:hover span { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Lower strip
   -------------------------------------------------------------------------- */

.cf-footer__base {
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid rgba(255,255,255,.16);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 22px;
}

.cf-footer__base-left { max-width: 62ch; }

.cf-footer__know {
	display: inline-block;
	color: #fff;
	font-weight: 650;
	font-size: .98rem;
	text-decoration: none;
	border-bottom: 2px solid var(--cf-red);
	padding-bottom: 3px;
	min-height: 28px;
}

.cf-footer__know:hover { color: var(--cf-red-300); }

.cf-footer__blurb { font-size: .9rem; color: rgba(255,255,255,.62); margin: 14px 0 0; }

.cf-footer__social { display: flex; gap: 10px; }

.cf-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.3);
	color: rgba(255,255,255,.82);
	transition: background-color .18s, border-color .18s, color .18s;
}

.cf-social:hover, .cf-social:focus { background: var(--cf-red); border-color: var(--cf-red); color: #fff; }

.cf-footer__legal {
	margin: 22px 0 0;
	font-size: .82rem;
	color: rgba(255,255,255,.5);
	max-width: none;
}

/* The theme's own copyright strip now duplicates ours, so it goes. */
body:has(.cf-root--footer) .site-footer { display: none; }

@media (max-width: 700px) {
	.cf-footer__base { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Reveal on scroll — opt-out respected
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.cf-root .cf-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
	.cf-root .cf-reveal.is-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.cf-footer__inner { grid-template-columns: 1fr 1fr; }
	.cf-hero__inner { grid-template-columns: 1fr; }
	.cf-hero__mark { display: none; }
}

@media (max-width: 600px) {
	:root { --cf-gutter: 18px; }
	.cf-footer__inner { grid-template-columns: 1fr; gap: 26px; }
	.cf-stats { gap: 16px 28px; }
	.cf-stats__value { font-size: 1.35rem; }
	.cf-cta__inner { flex-direction: column; align-items: flex-start; }
	.cf-btn { width: 100%; justify-content: center; }
	.cf-hero__actions .cf-btn { width: auto; }
	.cf-card__num { display: none; }
	.cf-card__title { padding-right: 0; }
}

@media print {
	.cf-hero { background: #fff !important; color: #000; }
	.cf-hero__title, .cf-hero__sub { color: #000; }
	.cf-btn, .cf-file__dl { display: none; }
}

/* --------------------------------------------------------------------------
   Pillar hero with a photographic layer. The image sits under the existing
   gradient at low opacity, so the text contrast measured on the plain hero
   still holds.
   -------------------------------------------------------------------------- */

.cf-hero--photo::before {
	background-image:
		radial-gradient(circle at 82% 18%, rgba(207,46,46,.42), transparent 48%),
		linear-gradient(90deg, rgba(28,22,24,.94) 0%, rgba(28,22,24,.82) 46%, rgba(28,22,24,.55) 100%),
		var(--cf-hero-img);
	background-size: auto, auto, cover;
	background-position: center, center, center;
}

/* --------------------------------------------------------------------------
   Sample work grid
   -------------------------------------------------------------------------- */

.cf-work {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: 20px;
}

.cf-work__item {
	margin: 0;
	background: #fff;
	border: 1px solid var(--cf-grey-200);
	border-radius: var(--cf-radius);
	overflow: hidden;
}

.cf-work__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--cf-grey-100);
	border-bottom: 1px solid var(--cf-grey-200);
}

.cf-work__item figcaption { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.cf-work__item strong { font-size: 1rem; color: var(--cf-ink); font-weight: 650; }
.cf-work__item span { font-size: .9rem; color: var(--cf-grey-700); }

/* --------------------------------------------------------------------------
   Theme page header.
   Woostify prints the page title and a breadcrumb above the content. Every
   Site Kit page opens with its own hero carrying the same title, so on those
   pages the theme's version is a duplicate. :has() scopes this to pages that
   actually contain a .cf-root; a browser without :has() simply keeps the old
   header rather than losing anything.
   -------------------------------------------------------------------------- */

body:has(.cf-root) .page-header { display: none; }
body:has(.cf-root) .site-content { padding-top: 0; }
body:has(.cf-root) .entry-content > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Primary menu spacing.
   The rebuild added Resources and About to the menu, which pushed nine items
   onto a second row at desktop width. The theme sets 20px of horizontal
   margin on each top-level link; 12px keeps all nine on one line with room
   to spare and is still a comfortable click target. Applies only above
   1200px — below that the theme switches to its drawer and this does nothing.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
	/* !important is needed here: the theme's own rule is more specific, and
	   this is a deliberate override of one declaration rather than a
	   wholesale restyle of the menu. */
	.main-navigation .primary-navigation > li > a {
		margin-left: 10px !important;
		margin-right: 10px !important;
	}
}


/* --------------------------------------------------------------------------
   Converter, brought onto the brand palette.
   The converter shipped with cool blue-grey neutrals and a muted grey that
   measured 4.36:1 against its own tab strip — under the 4.5:1 that 10-12px
   text needs. Repointing its variables at the CF360 neutrals fixes the
   contrast and makes the tool look like the rest of the site. The class is
   doubled because the converter prints its stylesheet in the footer, after
   this file, so it would otherwise win at equal specificity.
   Measured after the change: muted text 6.41:1 on the tab strip, 7.26:1 on
   white.
   -------------------------------------------------------------------------- */

.sc-app.sc-app {
	--sc-ground: var(--cf-grey-50);
	--sc-surface-2: var(--cf-grey-100);
	--sc-rule: var(--cf-grey-300);
	--sc-rule-soft: var(--cf-grey-200);
	--sc-ink-2: var(--cf-grey-800);
	--sc-muted: var(--cf-grey-700);
	--sc-good: var(--cf-success);
	--sc-error: var(--cf-danger);
}

/* 29px was under the comfortable tap minimum. */
.sc-app.sc-app .sc-btn,
.sc-app.sc-app .sc-copyable { min-height: 32px; }

/* ==========================================================================
   Shop and quotes
   ========================================================================== */

/* Price chips sit beside the format badge at the top of a file card. */
.cf-file__top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cf-file__top .cf-file__ext { margin-bottom: 0; }
.cf-file__top .cf-chip { margin-top: 0; align-self: center; }

.cf-chip--free { background: #E8F4EC; color: var(--cf-success); }
.cf-chip--paid { background: var(--cf-red-50); color: var(--cf-red-700); letter-spacing: .02em; text-transform: none; font-size: .78rem; }
.cf-chip--sale { background: #FBF3E3; color: var(--cf-warning); }

.cf-file__dl--buy { background: var(--cf-ink); }
.cf-file__dl--buy:hover { background: var(--cf-red); color: #fff; }

.cf-file__was { display: block; margin-top: 8px; font-size: .82rem; color: var(--cf-grey-600); }

/* The quote button on a service card. */
.cf-card__quote {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	align-self: flex-start;
	padding: 10px 18px;
	border: 1.5px solid var(--cf-red-300);
	border-radius: 999px;
	background: #fff;
	color: var(--cf-red-700);
	font-family: var(--cf-font);
	font-size: .86rem;
	font-weight: 600;
	cursor: pointer;
	min-height: 40px;
	transition: background-color .18s, border-color .18s;
}

.cf-card__quote:hover { background: var(--cf-red-50); border-color: var(--cf-red); }
.cf-card__quote svg { transition: transform .18s; }
.cf-card__quote:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

body.cf-modal-open { overflow: hidden; }

.cf-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
	font-family: var(--cf-font);
}

.cf-modal[hidden] { display: none; }

.cf-modal__backdrop { position: fixed; inset: 0; background: rgba(28,22,24,.62); }

.cf-modal__panel {
	position: relative;
	width: 100%;
	max-width: 620px;
	margin: auto;
	background: #fff;
	border-radius: var(--cf-radius-lg);
	padding: 34px 32px 30px;
	box-shadow: 0 30px 80px rgba(28,22,24,.35);
}

.cf-modal__x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--cf-grey-100);
	color: var(--cf-grey-800);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.cf-modal__x:hover { background: var(--cf-grey-200); }

.cf-modal__title { font-size: 1.6rem; font-weight: 700; color: var(--cf-ink); margin: 0 0 10px; letter-spacing: -.02em; }
.cf-modal__lede { font-size: .95rem; color: var(--cf-grey-700); margin: 0 0 22px; }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.cf-form__service {
	background: var(--cf-red-50);
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 18px;
	font-size: .92rem;
	color: var(--cf-red-700);
}

.cf-form__service:empty { display: none; }

.cf-form__row { margin-bottom: 14px; }
.cf-form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.cf-form label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: var(--cf-grey-800);
	margin-bottom: 6px;
}

.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form input[type="date"],
.cf-form textarea {
	width: 100%;
	font-family: var(--cf-font);
	font-size: .95rem;
	color: var(--cf-ink);
	padding: 11px 14px;
	border: 1.5px solid var(--cf-grey-300);
	border-radius: 10px;
	background: #fff;
}

.cf-form input:focus, .cf-form textarea:focus {
	outline: 3px solid var(--cf-red-200);
	outline-offset: 1px;
	border-color: var(--cf-red);
}

.cf-form textarea { resize: vertical; min-height: 110px; }

.cf-form__note { font-size: .82rem; color: var(--cf-grey-600); margin: 4px 0 18px; }

.cf-form__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cf-form__status { margin: 14px 0 0; font-size: .9rem; min-height: 1.2em; }
.cf-form__status.is-good { color: var(--cf-success); font-weight: 600; }
.cf-form__status.is-bad { color: var(--cf-danger); font-weight: 600; }

/* --------------------------------------------------------------------------
   Coupon box on the pay-for-order page
   -------------------------------------------------------------------------- */

.cf-coupon {
	margin: 20px 0;
	padding: 16px 18px;
	background: var(--cf-grey-50);
	border: 1px solid var(--cf-grey-200);
	border-radius: var(--cf-radius);
	font-family: var(--cf-font);
}

.cf-coupon label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 8px; color: var(--cf-ink); }
.cf-coupon__row { display: flex; gap: 10px; flex-wrap: wrap; }

.cf-coupon input {
	flex: 1 1 200px;
	padding: 11px 14px;
	border: 1.5px solid var(--cf-grey-300);
	border-radius: 999px;
	font-family: var(--cf-font);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.cf-coupon__applied { margin: 10px 0 0; font-size: .86rem; color: var(--cf-success); font-weight: 600; }

.cf-delivery {
	background: var(--cf-red-50);
	border-left: 3px solid var(--cf-red);
	padding: 12px 16px;
	border-radius: 0 8px 8px 0;
	font-family: var(--cf-font);
}

@media (max-width: 560px) {
	.cf-modal__panel { padding: 28px 20px 24px; }
	.cf-form__two { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Home hero montage — the five pillar banners, tiled.
   -------------------------------------------------------------------------- */

.cf-montage {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, clamp(104px, 10vw, 140px));
	grid-template-rows: repeat(2, clamp(84px, 8vw, 112px));
	gap: 10px;
}

.cf-montage__tile,
.cf-montage__mark {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 7px;
	padding: 10px 8px;
	text-align: center;
	border-radius: 12px;
	background: rgba(255,255,255,.055);
	outline: 1px solid rgba(255,255,255,.13);
	outline-offset: -1px;
	backdrop-filter: blur(2px);
}

.cf-montage__icon { color: var(--cf-red-300); line-height: 0; }
.cf-montage__icon svg { width: 30px; height: 30px; stroke-width: 1.4; }

.cf-montage__label {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255,255,255,.92);
	line-height: 1.25;
}

/* The sixth cell is the mark, so the block reads as one object rather than
   five unrelated panels. */
.cf-montage__mark { background: rgba(207,46,46,.16); outline-color: rgba(207,46,46,.42); }
.cf-montage__mark img { width: clamp(34px, 3.4vw, 46px); height: auto; opacity: .95; }

/* --------------------------------------------------------------------------
   Content cards
   -------------------------------------------------------------------------- */

.cf-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 22px;
}

.cf-post {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cf-grey-200);
	border-radius: var(--cf-radius-lg);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cf-post:hover {
	transform: translateY(-3px);
	border-color: var(--cf-red-200);
	box-shadow: 0 16px 36px rgba(28,22,24,.10);
}

.cf-post__cover {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--cf-grey-100);
	overflow: hidden;
}

.cf-post__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cf-post__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }

.cf-post__meta {
	margin: 0;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cf-grey-700);
}

.cf-post__section { color: var(--cf-red-700); }

.cf-post__title { font-size: 1.08rem; line-height: 1.32; font-weight: 700; margin: 0; letter-spacing: -.012em; }
.cf-post__title a { color: var(--cf-ink); text-decoration: none; }
.cf-post__title a:hover { color: var(--cf-red-700); text-decoration: underline; text-underline-offset: 3px; }

.cf-post__excerpt { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--cf-grey-800); }

.cf-post__video { margin: 4px 0 0; font-size: .86rem; }
.cf-post__video a { display: inline-flex; align-items: center; gap: 7px; color: var(--cf-red-700); font-weight: 600; text-decoration: none; }
.cf-post__video a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cf-post__video svg { flex: none; }

.cf-post--compact .cf-post__body { padding: 14px 16px 18px; gap: 6px; }
.cf-post--compact .cf-post__title { font-size: .98rem; }

/* --------------------------------------------------------------------------
   Latest strips
   -------------------------------------------------------------------------- */

.cf-section--latest { background: var(--cf-grey-50); }
.cf-section--upcoming { background: #fff; }

.cf-latest-stack { display: grid; gap: 40px; }

.cf-latest__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 8px 20px;
	padding-bottom: 12px;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--cf-grey-200);
}

.cf-latest__title { margin: 0; font-size: 1.24rem; font-weight: 700; letter-spacing: -.018em; }
.cf-latest__title a { color: var(--cf-ink); text-decoration: none; }
.cf-latest__title a:hover { color: var(--cf-red-700); }

.cf-latest__blurb { grid-column: 1 / -1; margin: 0; font-size: .92rem; color: var(--cf-grey-700); }

.cf-latest__all {
	font-size: .86rem;
	font-weight: 600;
	color: var(--cf-red-700);
	text-decoration: none;
	white-space: nowrap;
}

.cf-latest__all:hover { text-decoration: underline; text-underline-offset: 3px; }

.cf-post__when { color: var(--cf-red-700); }

/* --------------------------------------------------------------------------
   Free-tools strip on the Lab page
   -------------------------------------------------------------------------- */

.cf-toolstrip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 22px;
	background: var(--cf-grey-50);
	border: 1px solid var(--cf-grey-200);
	border-radius: var(--cf-radius-lg);
}

.cf-toolstrip__open { display: inline-flex; align-items: center; gap: 9px; }
.cf-toolstrip__note { flex: 1 1 260px; margin: 0; font-size: .88rem; color: var(--cf-grey-700); }

.cf-centred { text-align: center; margin: 0; }

/* --------------------------------------------------------------------------
   Wide modal, and the sign-up nudge inside it
   -------------------------------------------------------------------------- */

.cf-modal--wide .cf-modal__panel { max-width: 1040px; }
.cf-modal__body { margin-top: 18px; }

.cf-gate {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 16px;
	background: linear-gradient(to top, rgba(28,22,24,.98) 62%, rgba(28,22,24,0));
	border-radius: 0 0 var(--cf-radius-lg) var(--cf-radius-lg);
}

.cf-gate[hidden] { display: none; }

.cf-gate__inner {
	max-width: 620px;
	margin: 0 auto;
	color: #fff;
	text-align: center;
	padding: 18px 20px 6px;
}

.cf-gate__inner h3 { margin: 6px 0 8px; font-size: 1.3rem; font-weight: 700; color: #fff; }
.cf-gate__inner p { margin: 0 0 14px; font-size: .92rem; color: rgba(255,255,255,.84); }
.cf-gate__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cf-gate .cf-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.cf-gate .cf-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

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

.cf-subscribe {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #2A2023 0%, var(--cf-ink) 48%, #3A1517 100%);
	color: #fff;
	padding-block: clamp(34px, 5vw, 56px);
}

.cf-subscribe::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle at 88% 26%, rgba(207,46,46,.40), transparent 52%);
}

.cf-subscribe__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 28px 48px;
	align-items: center;
}

.cf-subscribe__title { margin: 0 0 8px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.022em; color: #fff; }
.cf-subscribe__sub { margin: 0; font-size: .96rem; color: rgba(255,255,255,.82); max-width: 54ch; }

.cf-subscribe__form { display: flex; flex-wrap: wrap; gap: 10px; }

.cf-subscribe__form input[type="email"] {
	flex: 1 1 240px;
	min-width: 0;
	padding: 13px 15px;
	font: inherit;
	font-size: .98rem;
	color: var(--cf-ink);
	background: #fff;
	border: 1px solid transparent;
	border-radius: var(--cf-radius);
}

.cf-subscribe__form input[type="email"]:focus-visible { outline: 3px solid var(--cf-red-400); outline-offset: 2px; }

/* Off-screen rather than display:none, so a bot that skips hidden fields
   still fills it in. */
.cf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cf-subscribe__note { margin: 10px 0 0; font-size: .88rem; min-height: 1.2em; color: rgba(255,255,255,.76); }
.cf-subscribe__note.is-ok { color: #9BE8B4; }
.cf-subscribe__note.is-error { color: #FFB4B4; }

.cf-subscribe__alt { margin: 12px 0 0; font-size: .86rem; color: rgba(255,255,255,.66); }
.cf-subscribe__alt a { color: #fff; font-weight: 600; }

@media (max-width: 860px) {
	.cf-subscribe__inner { grid-template-columns: 1fr; }
	.cf-latest__head { grid-template-columns: 1fr; }
	.cf-latest__all { justify-self: start; }
}

/* WordPress themes normally ship this, but the band must not depend on the
   theme: an unstyled label turns the field into "Your email address you@…". */
.cf-subscribe .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Full-width singles (magazine issues, content items)
   -------------------------------------------------------------------------- */

/* The theme sizes #primary for a sidebar that is no longer printed, so the
   column has to be told to take the space back. */
body.cf-full-width #secondary,
body.cf-full-width .widget-area { display: none; }

body.cf-full-width #primary,
body.cf-full-width .content-area {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

body.cf-full-width .site-main > article {
	max-width: 1180px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   The reading room: the reader, then the shelf of issues
   -------------------------------------------------------------------------- */

.cf-section--reader { background: var(--cf-grey-50); }

.cf-embed--reader { margin-top: 6px; }
.cf-embed--reader .rmr-reader { margin: 0; }

.cf-shelf {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
	gap: 20px;
}

.cf-shelf__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--cf-grey-200);
	border-radius: var(--cf-radius-lg);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cf-shelf__item:hover {
	transform: translateY(-3px);
	border-color: var(--cf-red-200);
	box-shadow: 0 16px 36px rgba(28,22,24,.10);
}

/* The issue being read is marked rather than hidden, so the shelf still shows
   where you are in the archive. */
.cf-shelf__item.is-current {
	border-color: var(--cf-red);
	box-shadow: 0 0 0 1px var(--cf-red) inset;
}

.cf-shelf__cover {
	display: block;
	aspect-ratio: 1 / 1.414;
	background: var(--cf-grey-100);
	border-radius: 8px;
	overflow: hidden;
}

.cf-shelf__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cf-shelf__meta { display: flex; flex-direction: column; gap: 3px; }
.cf-shelf__title { font-size: .95rem; line-height: 1.35; color: var(--cf-ink); font-weight: 700; }
.cf-shelf__sub { font-size: .78rem; color: var(--cf-grey-700); }

.cf-shelf__cue {
	margin-top: 4px;
	font-size: .8rem;
	font-weight: 600;
	color: var(--cf-red-700);
}

.cf-shelf__item.is-current .cf-shelf__cue::before {
	content: "● ";
	font-size: .7em;
	vertical-align: 2px;
}

/* --------------------------------------------------------------------------
   Blog quick view
   -------------------------------------------------------------------------- */

.cf-posts--peek .cf-post--peek { cursor: pointer; }

.cf-modal--read .cf-modal__panel {
	max-width: 760px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

.cf-peek__cover {
	display: block;
	width: calc(100% + 64px);
	margin: -34px -32px 22px;
	aspect-ratio: 3 / 1.1;
	object-fit: cover;
	border-radius: var(--cf-radius-lg) var(--cf-radius-lg) 0 0;
}

.cf-peek__cover[hidden] { display: none; }

.cf-peek__meta {
	margin: 0 0 6px;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cf-grey-700);
}

.cf-peek__body { font-size: 1rem; line-height: 1.72; color: var(--cf-grey-800); }
.cf-peek__body p { margin: 0 0 1em; max-width: 68ch; }
.cf-peek__body h2, .cf-peek__body h3 { color: var(--cf-ink); margin: 1.4em 0 .5em; line-height: 1.3; }
.cf-peek__body h2 { font-size: 1.22rem; }
.cf-peek__body h3 { font-size: 1.05rem; }
.cf-peek__body ul, .cf-peek__body ol { margin: 0 0 1em 1.2em; }
.cf-peek__body li { margin-bottom: .4em; }
.cf-peek__body blockquote {
	margin: 1.2em 0;
	padding-left: 16px;
	border-left: 3px solid var(--cf-red-200);
	color: var(--cf-grey-700);
	font-style: italic;
}

.cf-peek__loading { color: var(--cf-grey-700); }

.cf-peek__foot {
	margin: 24px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--cf-grey-200);
}

@media (max-width: 899px) {
	/* No panel at this width — the card is a plain link again. */
	.cf-posts--peek .cf-post--peek { cursor: auto; }
}

/* --------------------------------------------------------------------------
   Magazine: cover in the hero, current issue and what is coming next
   -------------------------------------------------------------------------- */

.cf-hero__mark--cover { line-height: 0; }

.cf-hero__cover {
	display: block;
	position: relative;
	width: clamp(180px, 22vw, 290px);
	aspect-ratio: 1 / 1.414;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 26px 60px rgba(0,0,0,.48);
	outline: 1px solid rgba(255,255,255,.16);
	outline-offset: -1px;
	transition: transform .2s ease;
}

.cf-hero__cover:hover { transform: translateY(-4px); }
.cf-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cf-hero__coverCue {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 12px 10px;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	background: linear-gradient(to top, rgba(28,22,24,.92), transparent);
}

.cf-section--onshelf { background: #fff; }

.cf-onshelf {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 36px 48px;
	align-items: start;
}

.cf-onshelf__now {
	display: grid;
	grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.cf-onshelf__cover {
	display: block;
	aspect-ratio: 1 / 1.414;
	border-radius: 10px;
	overflow: hidden;
	background: var(--cf-grey-100);
	box-shadow: 0 14px 34px rgba(28,22,24,.16);
}

.cf-onshelf__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cf-onshelf__title { margin: 4px 0 6px; font-size: 1.32rem; line-height: 1.25; letter-spacing: -.02em; }
.cf-onshelf__title a { color: var(--cf-ink); text-decoration: none; }
.cf-onshelf__title a:hover { color: var(--cf-red-700); }

.cf-onshelf__meta {
	margin: 0 0 10px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cf-grey-700);
}

.cf-onshelf__sub { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; color: var(--cf-grey-800); }

.cf-onshelf__next {
	padding-left: 28px;
	border-left: 1px solid var(--cf-grey-200);
}

.cf-nextlist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }

.cf-nextlist a {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 13px;
	align-items: center;
	text-decoration: none;
}

.cf-nextlist__thumb {
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: 6px;
	overflow: hidden;
	background: var(--cf-grey-100);
}

.cf-nextlist__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cf-nextlist__text { display: flex; flex-direction: column; gap: 2px; }
.cf-nextlist__text strong { font-size: .9rem; line-height: 1.32; color: var(--cf-ink); font-weight: 600; }
.cf-nextlist a:hover .cf-nextlist__text strong { color: var(--cf-red-700); }

.cf-nextlist__when {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cf-red-700);
}

@media (max-width: 900px) {
	.cf-onshelf { grid-template-columns: 1fr; }
	.cf-onshelf__next { padding-left: 0; border-left: 0; border-top: 1px solid var(--cf-grey-200); padding-top: 22px; }
}

@media (max-width: 560px) {
	.cf-onshelf__now { grid-template-columns: 1fr; }
	.cf-onshelf__cover { max-width: 210px; }
}

/* Sign-in prompt shown in place of the quote form. */
.cf-signin {
	padding: 22px;
	background: var(--cf-grey-50);
	border: 1px solid var(--cf-grey-200);
	border-radius: var(--cf-radius);
}

.cf-signin p { margin: 0 0 14px; font-size: .95rem; line-height: 1.65; color: var(--cf-grey-800); }
.cf-signin__actions { margin: 0; }