/* ==========================================================================
   New Home — design tokens pulled from Figma (file HbsWjz5esxCpDI80BdLF4T).
   Frame width 1440px · Container 1140px (150px side margin)
   ========================================================================== */

/* Re-align the inherited site header (Foundation .row/.column) to the
   new design system on this template only. Remove this scope when the
   rest of the site adopts the new container width. */
html {
	scroll-behavior: smooth;
}
.page-template-page-newhome .header-container .row {
	max-width: 1140px;
}
.page-template-page-newhome .header-container .row > .column,
.page-template-page-newhome .header-container .row > .columns {
	padding-right: 24px;
	padding-left:  24px;
}

/* "Contact us" header button — match the Let's Talk hero CTA on this page only */
.page-template-page-newhome .header-nav__button-link {
	border-radius: 5px;
	transform-origin: center;
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), background-color .25s ease;
}
/* Lock the header CTA to black-bg / white-text across every state — no blue, no inverted hover. */
.page-template-page-newhome .header-nav__button-link,
.page-template-page-newhome .header-nav__button-link:link,
.page-template-page-newhome .header-nav__button-link:visited,
.page-template-page-newhome .header-nav__button-link:hover,
.page-template-page-newhome .header-nav__button-link:focus,
.page-template-page-newhome .header-nav__button-link:focus-visible,
.page-template-page-newhome .header-nav__button-link:active {
	background-color: var(--nh-cta-bg, #000) !important;
	color: var(--nh-cta-fg, #fff) !important;
	border-color: var(--nh-cta-bg, #000) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline: none !important;
}
.page-template-page-newhome .header-nav__button-link:hover,
.page-template-page-newhome .header-nav__button-link:focus-visible {
	transform: scale(1.05);
}
/* Cascade the white text down to any inner span/icon the theme nests inside the link */
.page-template-page-newhome .header-nav__button-link,
.page-template-page-newhome .header-nav__button-link *,
.page-template-page-newhome .header-nav__button-link:hover *,
.page-template-page-newhome .header-nav__button-link:focus *,
.page-template-page-newhome .header-nav__button-link:focus-visible * {
	color: var(--nh-cta-fg, #fff) !important;
}

:root {
	--nh-fg:          #000000;
	--nh-card-bg:     #f8f4f3;        /* light cards & section blocks */
	--nh-card-fg:     #000000;
	--nh-cta-bg:      #000000;
	--nh-cta-fg:      #ffffff;
	--nh-accent:      #ff3cfe;        /* "Aida" magenta */
	--nh-radius:      5px;
	--nh-serif:       "Copernicus", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--nh-sans:        "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--nh-container:   1140px;      /* design-system container width (Figma) */
	--nh-gutter:      24px;        /* design-system side gutter (Figma) */
}

.newhome { color: var(--nh-fg); font-family: var(--nh-serif); }

/* =========================================================================
   Brand — OW title-reveal animation
   Reusable two-element pattern:
     <span class="ow-title-animation__mask">
       <span class="ow-title-animation__inner">Title text</span>
     </span>
   Triggers when an ancestor (typically the section) gains `.is-visible`,
   which is added by the IntersectionObserver in page-newhome.php.
   ========================================================================= */
.ow-title-animation__mask {
	display: block;
	overflow: hidden;
	padding: 0.18em 0.08em;            /* room for descenders + italic overshoot */
	margin: -0.18em -0.08em;
	opacity: 0;
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--ow-title-animation-delay, 0ms);
}
.ow-title-animation__inner {
	display: block;
	will-change: transform;
	transform: translate3d(0, 200%, 0);   /* starts much further below */
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--ow-title-animation-delay, 0ms);
}
.is-visible > .ow-title-animation__mask,
.is-visible .ow-title-animation__mask {
	opacity: 1;
}
.is-visible > .ow-title-animation__mask > .ow-title-animation__inner,
.is-visible .ow-title-animation__mask > .ow-title-animation__inner,
.ow-title-animation__inner.is-visible {
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.ow-title-animation__mask,
	.ow-title-animation__inner {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Section reveal — pure fade-in on scroll. No slide.
   Excludes hero, quote, publishers, advertisers, flow and capabilities (all have custom or no animation). */
.newhome.nh-anim > section:not(.nh-hero):not(.nh-quote):not(.nh-publishers):not(.nh-advertisers):not(.nh-flow):not(.nh-capabilities) {
	opacity: 0;
	transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.newhome.nh-anim > section:not(.nh-hero):not(.nh-quote):not(.nh-publishers):not(.nh-advertisers):not(.nh-flow):not(.nh-capabilities).is-visible {
	opacity: 1;
}

/* Advertisers — static, no entry animation */
.newhome.nh-anim > .nh-advertisers {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Publishers — title uses .ow-title-animation. Subtitle + cards fade in together after. */
.newhome.nh-anim .nh-publishers__subtitle,
.newhome.nh-anim .nh-pub-card-wrap {
	opacity: 0;
	transition: opacity 500ms ease-out;
}
.newhome.nh-anim .nh-publishers.is-visible .nh-publishers__subtitle,
.newhome.nh-anim .nh-publishers.is-visible .nh-pub-card-wrap {
	opacity: 1;
	transition-delay: 300ms;
}

/* Hero — pure CSS animations, run once on page load. No JS / no flicker. */
@keyframes nh-hero-line-rise {
	from { opacity: 0; transform: translate3d(0, 110%, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes nh-hero-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.newhome.nh-anim .nh-hero__title-inner {
	opacity: 0;
	transform: translate3d(0, 110%, 0);
	animation: nh-hero-line-rise 1300ms cubic-bezier(0.65, 0, 0.35, 1) both;
}
.newhome.nh-anim .nh-hero__title-line:nth-child(1) .nh-hero__title-inner { animation-delay: 100ms; }
.newhome.nh-anim .nh-hero__title-line:nth-child(2) .nh-hero__title-inner { animation-delay: 200ms; }
.newhome.nh-anim .nh-hero__title-line:nth-child(3) .nh-hero__title-inner { animation-delay: 300ms; }

.newhome.nh-anim .nh-hero__subtitle,
.newhome.nh-anim .nh-hero__cta,
.newhome.nh-anim .nh-hero__media {
	opacity: 0;
	/* delay = slowest title line: 300ms stagger + 1300ms duration */
	animation: nh-hero-fade-in 1100ms ease-in-out 1600ms both;
}

/* Logo + rule — fade-only, in sync with the text mask reveal */
.newhome.nh-anim .nh-quote__mark,
.newhome.nh-anim .nh-quote__rule {
	opacity: 0;
	transition: opacity 1300ms cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: 100ms;
}
.newhome.nh-anim .nh-quote.is-visible .nh-quote__mark,
.newhome.nh-anim .nh-quote.is-visible .nh-quote__rule {
	opacity: 1;
}

/* (Quote text reveal handled by .ow-title-animation__inner) */

/* Flow — title mask-reveal like hero title; everything else fades in together right after. */
.newhome.nh-anim > .nh-flow {
	opacity: 1;
	transition: none;
}

/* (Flow title reveal handled by .ow-title-animation__inner) */

/* Subtitle, steps, line, Aida — fade in together right after the title finishes */
.newhome.nh-anim .nh-flow__subtitle,
.newhome.nh-anim .nh-flow__step,
.newhome.nh-anim .nh-flow__aida {
	opacity: 0;
	transition: opacity 500ms ease-out;
}
.newhome.nh-anim .nh-flow.is-visible .nh-flow__subtitle,
.newhome.nh-anim .nh-flow.is-visible .nh-flow__step,
.newhome.nh-anim .nh-flow.is-visible .nh-flow__aida {
	opacity: 1;
	transition-delay: 300ms;
}

/* Capabilities — title mask-reveal; subtitle, tablist and active panel fade in after */
.newhome.nh-anim > .nh-capabilities {
	opacity: 1;
	transition: none;
}
.newhome.nh-anim .nh-capabilities__subtitle,
.newhome.nh-anim .nh-capabilities__tablist,
.newhome.nh-anim .nh-capabilities__panel {
	opacity: 0;
	transition: opacity 500ms ease-out;
}
.newhome.nh-anim .nh-capabilities.is-visible .nh-capabilities__subtitle,
.newhome.nh-anim .nh-capabilities.is-visible .nh-capabilities__tablist,
.newhome.nh-anim .nh-capabilities.is-visible .nh-capabilities__panel {
	opacity: 1;
	transition-delay: 300ms;
}

/* Stats — desktop: each card slides + fades in one-by-one (1, 2, 3) */
@media (min-width: 901px) {
	.newhome.nh-anim > .nh-stats {
		opacity: 1;
		transition: none;
	}
	.newhome.nh-anim .nh-stat {
		opacity: 0;
		transform: translate3d(0, 36px, 0);
		transition:
			opacity   1400ms ease-in-out,
			transform 1400ms ease-in-out;
	}
	.newhome.nh-anim .nh-stats.is-visible .nh-stat {
		opacity: 1;
		transform: none;
	}
	.newhome.nh-anim .nh-stats.is-visible .nh-stat:nth-child(1) { transition-delay: 100ms; }
	.newhome.nh-anim .nh-stats.is-visible .nh-stat:nth-child(2) { transition-delay: 350ms; }
	.newhome.nh-anim .nh-stats.is-visible .nh-stat:nth-child(3) { transition-delay: 600ms; }
}

@media (prefers-reduced-motion: reduce) {
	.newhome.nh-anim > section,
	.newhome.nh-anim .nh-hero__title,
	.newhome.nh-anim .nh-hero__subtitle,
	.newhome.nh-anim .nh-hero__cta,
	.newhome.nh-anim .nh-hero__media,
	.newhome.nh-anim .nh-stat,
	.newhome.nh-anim .nh-flow__subtitle,
	.newhome.nh-anim .nh-flow__step,
	.newhome.nh-anim .nh-flow__aida,
	.newhome.nh-anim .nh-publishers__subtitle,
	.newhome.nh-anim .nh-pub-card-wrap {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
.newhome em { font-style: italic; font-family: var(--nh-serif); }
.newhome img { display: block; }

.nh-container {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.nh-hero        { padding: 95px 0 0; }
.nh-hero__inner { max-width: var(--nh-container); margin: 0 auto; padding: 0 var(--nh-gutter); text-align: center; }

.nh-hero__title {
	margin: 0;
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 78px;
	line-height: 76px;
	letter-spacing: -5px;
	color: var(--nh-fg);
}
.nh-hero__title-line {
	display: block;
	overflow: hidden;
	/* Generous padding so descenders (P tail, y) + italic overshoot are never clipped.
	   Negative margins keep layout/line-height visually unchanged. */
	padding: 0.18em 0.08em;
	margin: -0.18em -0.08em;
}
.nh-hero__title-inner {
	display: inline-block;
	will-change: transform;
}
.nh-hero__title em   { font-style: italic; }

.nh-hero__subtitle {
	max-width: 920px;
	margin: 41px auto 0;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: -0.8px;
}

.nh-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 201px;
	height: 50px;
	margin-top: 41px;
	padding: 0 32px;
	background: var(--nh-cta-bg);
	color: var(--nh-cta-fg);
	font-family: var(--nh-serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--nh-radius);
	transform-origin: center;
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1), background-color .25s ease;
}
/* Keep the CTA label its button color (white) in every interactive state —
   otherwise the theme's default link color bleeds through on click/focus.
   Mirrors the .header-nav__button-link guard: pins both the anchor and its
   inner <span>, with !important to beat the theme's blue :active/:focus link
   rule. */
.nh-hero__cta,
.nh-hero__cta:link,
.nh-hero__cta:visited,
.nh-hero__cta:hover,
.nh-hero__cta:focus,
.nh-hero__cta:focus-visible,
.nh-hero__cta:active,
.nh-hero__cta *,
.nh-hero__cta:link *,
.nh-hero__cta:visited *,
.nh-hero__cta:hover *,
.nh-hero__cta:focus *,
.nh-hero__cta:focus-visible *,
.nh-hero__cta:active * {
	color: var(--nh-cta-fg, #fff) !important;
}
.nh-hero__cta:hover,
.nh-hero__cta:focus-visible {
	transform: scale(1.05);
}

.nh-hero__media {
	margin: 60px 0 0;
	border-radius: var(--nh-radius);
	overflow: hidden;
	aspect-ratio: 1140 / 414;
	background: #cdb6a6;
}
.nh-hero__media img,
.nh-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nh-hero__media--placeholder {
	background: linear-gradient(135deg, #d2bdae 0%, #b89c89 100%);
}

/* ==========================================================================
   Logos band
   ========================================================================== */
.nh-logos        { padding: 80px 0 0; }
.nh-logos__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 40px;
	align-items: center;
}

.nh-logos__title {
	margin: 0;
	font-family: var(--nh-sans);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--nh-fg);
}
.nh-logos__title-mobile  { display: none; }
.nh-logos__title-desktop { display: inline; }

/* Continuously scrolling marquee — runs on all viewports */
.nh-logos__marquee {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.nh-logos__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: nh-logos-scroll 80s linear infinite;
}
.nh-logos__row {
	list-style: none;
	margin: 0;
	/* Trailing padding MUST equal the inner gap so the two row copies
	   loop seamlessly when the track translates by exactly -50%. */
	padding: 0 108px 0 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 108px;
	flex: 0 0 auto;
}

.nh-logos__item {
	opacity: .5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* No fixed width — each item is exactly as wide as its image.
	   Height is set on the img (fixed px) so the SVG's viewBox aspect
	   ratio resolves a real auto width per logo. */
	filter: grayscale(100%);
}
.nh-logos__item img {
	display: block;
	height: 40px;   /* equal height for every logo, all viewports */
	width: auto;    /* natural width from the SVG's viewBox aspect ratio */
}

@keyframes nh-logos-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.nh-logos__track { animation: none; }
}

/* ==========================================================================
   Stats row
   ========================================================================== */
.nh-stats        { padding: 60px 0 0; }
.nh-stats__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.nh-stats__footnote {
	max-width: var(--nh-container);
	margin: 28px auto 0;
	padding: 0 var(--nh-gutter);
	text-align: center;
	font-family: var(--nh-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 1;
	letter-spacing: -1px !important;
	color: var(--nh-fg);
}

/* Footnote fades in after the last stat card on desktop */
@media (min-width: 901px) {
	.newhome.nh-anim .nh-stats__footnote {
		opacity: 0;
		transition: opacity 1400ms ease-in-out;
	}
	.newhome.nh-anim .nh-stats.is-visible .nh-stats__footnote {
		opacity: 1;
		transition-delay: 850ms;
	}
}
@media (prefers-reduced-motion: reduce) {
	.newhome.nh-anim .nh-stats__footnote { opacity: 1; transition: none; }
}

.nh-stat {
	background: #000;
	color: #fff;
	border-radius: var(--nh-radius);
	aspect-ratio: 372 / 258;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
	text-align: center;
}

.nh-stat__value {
	margin: 0;
	font-family: var(--nh-serif);
	font-size: 70px;
	line-height: 1;
	letter-spacing: -5px;
}
/* Trailing % rendered as a tucked-up superscript */
.nh-stat__value-sup {
	font-size: 0.35em;
	letter-spacing: 0;
	vertical-align: top;
	line-height: 1;
	margin-left: 0.05em;
	display: inline-block;
	position: relative;
	top: 0.15em;
}

.nh-stat__label {
	margin: 18px 0 0;
	font-family: var(--nh-sans);
	font-weight: 300;
	font-size: 22px;
	line-height: 1;
	letter-spacing: -0.5px;
}

/* ==========================================================================
   Quote / value-prop
   ========================================================================== */
.nh-quote        { padding: 120px 0; margin-top: 114px; background: #EFE3E1; }
.nh-quote__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
	display: grid;
	grid-template-columns: 133px 1px auto;
	gap: 46px;
	justify-content: center;      /* horizontally center the whole icon+line+text group */
	align-items: center;          /* icon, rule, text — all vertically centered */
}
.nh-quote__inner > .nh-quote__mark,
.nh-quote__inner > .nh-quote__rule,
.nh-quote__inner > .nh-quote__text {
	align-self: center;
}

.nh-quote__mark {
	width: 133px;
	height: 134px;
	display: block;
	object-fit: contain;
}

.nh-quote__rule {
	display: block;
	border: none;
	outline: none;
	margin: 0;
	width: 1px;
	height: 92px;
	background: #000;
	align-self: center;
}

.nh-quote__text {
	margin: 0;
	font-family: var(--nh-serif);
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -2px;
	max-width: 862px;
	text-align: left;
}
/* Single mask covering the whole quote text — animates as one piece. */
.nh-quote__text-mask {
	display: block;
	overflow: hidden;
	padding: 0.18em 0.08em;
	margin: -0.18em -0.08em;
}
.nh-quote__text-inner {
	display: block;
	will-change: transform;
}

/* ==========================================================================
   Flow (5-step) — "The System Behind Participation"
   ========================================================================== */
.nh-flow {
	margin: 114px auto;
	padding: 80px 0;           /* symmetrical top/bottom — content centers in the light box */
	background: #F8F4F3;
	border-radius: var(--nh-radius);
	max-width: 1092px;       /* aligns to header column inner width (1140 − 2×24px gutter) */
}
.nh-flow__inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
}

.nh-flow__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 120px;     /* no top margin — section padding alone keeps the content centered */
}

.nh-flow__title {
	margin: 0;
	font-family: var(--nh-serif);
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -2px;
}
.nh-flow__subtitle {
	margin: 22px 0 0;
	font-family: var(--nh-serif);
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -0.5px;
}

.nh-flow__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Column count comes from the inline --nh-flow-steps var the PHP renders.
	   Falls back to 5 for any pre-existing block instance without the var. */
	grid-template-columns: repeat(var(--nh-flow-steps, 5), 1fr);
	gap: 0;
	position: relative;
	align-items: start;
}

/* horizontal connector line — fades in together with steps and Aida, after title finishes.
   left/right inset = 50% / N (one half-column on each side) so the line spans
   between the centers of the first and last step dots regardless of step count. */
.nh-flow__steps::before {
	content: "";
	position: absolute;
	left:  calc(50% / var(--nh-flow-steps, 5));
	right: calc(50% / var(--nh-flow-steps, 5));
	/* min-title-height (50) + title margin-bottom (4) + half dot (16.5) - half line (0.5) */
	top: 70px;
	height: 1px;
	background: #000;
	z-index: 0;
	opacity: 0;
	transition: opacity 500ms ease-out;
}
.newhome.nh-anim .nh-flow.is-visible .nh-flow__steps::before {
	opacity: 1;
	transition-delay: 300ms;
}

.nh-flow__step {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1;
}

.nh-flow__step-title {
	margin: 0 0 4px;
	min-height: 50px;          /* keeps every dot on the same horizontal line */
	font-family: var(--nh-serif);
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -0.5px;
	font-weight: 400;
}

/* All dots — magenta outer ring with a black inner ring */
.nh-flow__dot {
	box-sizing: border-box;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: var(--nh-card-bg);
	border: 1px solid var(--nh-accent);
	display: block;
	margin: 0 auto 32px;
	position: relative;
	z-index: 1;
}
.nh-flow__dot::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 19px;
	height: 19px;
	transform: translate(-50%, -50%);
	border: 1px solid #000;
	border-radius: 50%;
	background: var(--nh-card-bg);
}

.nh-flow__step-body {
	margin: 0;
	font-family: var(--nh-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.1;
	letter-spacing: -0.3px;
	max-width: 157px;
}

.nh-flow__aida {
	margin: 48px auto 0;
	text-align: center;
	font-family: var(--nh-serif);
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: -0.5px;
}
.nh-flow__aida::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	margin-right: 14px;
	border-radius: 50%;
	border: 1px solid var(--nh-accent);
	background: transparent;
	position: relative;
	top: -1px;
}
.nh-flow__aida-name {
	color: var(--nh-accent);
	font-style: italic;
}

/* ==========================================================================
   Publisher Flow (3-step variant) — blue dots, no Aida tail
   ========================================================================== */
/* Outer ring blue, inner ring stays black (inherits base nh-flow style) */
.nh-publisher-flow .nh-flow__dot               { border-color: #0058F3; }

/* Desktop-only layout tweaks — leave mobile to inherit the base nh-flow rules */
@media (min-width: 901px) {
	.nh-publisher-flow--3 .nh-flow__steps          { grid-template-columns: repeat(3, 1fr); }
	.nh-publisher-flow--3 .nh-flow__steps::before  { left: 16.66%; right: 16.66%; }
	/* Let the 3-step row spread to the full section width so the dots breathe */
	.nh-publisher-flow .nh-flow__inner  { max-width: 100%; }
	.nh-publisher-flow {
		/*min-height: 683px;*/
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.nh-publisher-flow .nh-flow__header { margin-bottom: 90px; }
	/* Symmetric spacing around the dot — title 32px above, body 32px below */
	.nh-publisher-flow .nh-flow__step-title { margin-bottom: 32px; min-height: 0; }
	/* Re-align the horizontal connector to pass through the new dot centre.
	   2-line title text (~48px) + title margin-bottom (32) + half dot (16.5) - half line (0.5) ≈ 96px */
	.nh-publisher-flow--3 .nh-flow__steps::before { top: 96px; }
}

/* ==========================================================================
   Capabilities — "One System. Three Core Capabilities." tabs
   ========================================================================== */
.nh-capabilities {
	padding: 120px 0;
}
.nh-capabilities__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
}

.nh-capabilities__header {
	text-align: center;
	margin: 0 auto 48px;
}
.nh-capabilities__title {
	margin: 0;
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -2px;
}
.nh-capabilities__subtitle {
	margin: 22px 0 0;
	font-family: var(--nh-serif);
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: -1px;
}

/* Pill tablist */
.nh-capabilities__tablist {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	gap: 0;
	width: 100%;
	max-width: 823px;
	margin: 0 auto 59px;
	padding: 15px 22px;
	background: var(--nh-card-bg);
	border-radius: 999px;
}
.nh-capabilities__tab {
	appearance: none;
	border: 0;
	background: transparent;
	margin: 0;
	padding: 14px 24px;
	font-family: var(--nh-serif);
	font-style: italic;
	font-size: 22px;
	line-height: 1;
	letter-spacing: -0.5px;
	color: var(--nh-fg);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}
.nh-capabilities__tab[aria-selected="true"] {
	background: #000;
	color: #fff;
}
/* Lock hover/focus appearance — no border, color, or background change beyond the active state */
.nh-capabilities__tab:hover,
.nh-capabilities__tab:focus {
	background: transparent;
	color: var(--nh-fg);
	border: 0;
	box-shadow: none;
	outline: none;
}
.nh-capabilities__tab[aria-selected="true"]:hover,
.nh-capabilities__tab[aria-selected="true"]:focus {
	background: #000;
	color: #fff;
}
.nh-capabilities__tab:focus-visible {
	outline: 2px solid #0058F3;
	outline-offset: 2px;
}

/* Panel */
.nh-capabilities__panel {
	display: block;
	max-width: 823px;
	margin: 0 auto;
}
.nh-capabilities__panel.is-entering {
	animation: nh-cap-fade-in 200ms ease-out both;
}
@keyframes nh-cap-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.nh-capabilities__panel.is-entering { animation: none; }
}
.nh-capabilities__media {
	position: relative;
	overflow: hidden;
	background: var(--nh-card-bg);
	/* Match the publisher-slider photo's native ratio (2475×1203) so both
	   image and the placeholder video stay the same size and the photo
	   never gets cropped. */
	aspect-ratio: 2475 / 1203;
}
.nh-capabilities__image,
.nh-capabilities__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Smoother load: each image (eager-preloaded in PHP, so it's ready in cache)
   eases in when its panel becomes visible — both on first paint and on every
   tab switch — instead of popping in. */
.nh-capabilities__image {
	animation: nh-cap-img-in 1400ms ease-out both;
}
@keyframes nh-cap-img-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.nh-capabilities__image { animation: none; }
}
.nh-capabilities__media-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #efe3e1 0%, #f8f4f3 100%);
}

.nh-capabilities__body {
	display: block;
	margin: 32px 0 0;
	padding-top: 28px;
	border-top: 1px solid #000;
	color: inherit;
	text-decoration: none;
}
.nh-capabilities__body--link {
	cursor: pointer;
}
.nh-capabilities__body--link:hover,
.nh-capabilities__body--link:focus-visible {
	color: inherit;
	text-decoration: none;
	outline: none;
}
.nh-capabilities__panel-title {
	margin: 0 0 12px;
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: -1px;
}
.nh-capabilities__panel-body {
	margin: 0;
	font-family: var(--nh-serif);
	font-size: 20px;
	line-height: 1.35;
	letter-spacing: -0.4px;
}

/* CTA — collapsed black square arrow that expands to reveal "Learn More" on body hover */
.nh-capabilities__cta {
	margin-top: 20px;
	height: 35px;
	background: #000;
	color: #fff;
	border-radius: var(--nh-radius);
	display: inline-flex;
	align-items: center;
	padding: 0 9px;
	overflow: hidden;
	transition: padding 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.nh-capabilities__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}
.nh-capabilities__cta-label {
	font-family: var(--nh-serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1;
	letter-spacing: -0.4px;
	white-space: nowrap;
	max-width: 0;
	margin-right: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-width    1000ms cubic-bezier(0.22, 1, 0.36, 1),
		margin-right 1000ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity      550ms ease;
}
.nh-capabilities__body--link:hover .nh-capabilities__cta,
.nh-capabilities__body--link:focus-visible .nh-capabilities__cta {
	padding: 0 16px;
}
.nh-capabilities__body--link:hover .nh-capabilities__cta-label,
.nh-capabilities__body--link:focus-visible .nh-capabilities__cta-label {
	max-width: 160px;
	margin-right: 10px;
	opacity: 1;
	transition:
		max-width    1000ms cubic-bezier(0.22, 1, 0.36, 1),
		margin-right 1000ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity      600ms ease 250ms;
}

/* ==========================================================================
   Publishers (3-card)
   ========================================================================== */
.nh-publishers {
	padding: 120px 0;
	background: #EFE3E1;
}
.nh-publishers.is-visible {
	padding-left: 24px;
	padding-right: 24px;
}
.nh-publishers__inner {
	max-width: 1092px;                     /* aligns to header column inner width (1140 − 2×24px gutter) */
	margin: 0 auto;
	padding: 0;
}

.nh-publishers__header {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 64px;
}
.nh-publishers__title {
	margin: 0;
	font-family: var(--nh-serif);
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -2px;
}
.nh-publishers__title em { font-style: italic; }
.nh-publishers__subtitle {
	margin: 28px 0 0;
	font-family: var(--nh-serif);
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -0.5px;
}

.nh-publishers__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	align-items: stretch;
}
.nh-pub-card-wrap {
	display: flex;          /* lets the inner card stretch to the row height */
}
.nh-pub-card-wrap > .nh-pub-card {
	flex: 1;                /* card fills the wrap */
}

.nh-pub-card {
	--nh-card-stroke: transparent;          /* per-card hover stroke (set via :nth-child below) */
	background: var(--nh-card-bg);          /* #F8F4F3 — was #fff */
	color: inherit;
	text-decoration: none;
	border: 1px solid transparent;          /* placeholder so hover doesn't shift layout */
	border-radius: var(--nh-radius);
	padding: 46px 35px;
	min-height: 262px;                       /* eyebrow stays at top, the rest sticks to the bottom */
	display: flex;
	flex-direction: column;
	position: relative;
	transition: border-color .25s ease;
	will-change: transform;
	cursor: pointer;
}
/* Per-card stroke colors per Laina's spec */
.nh-pub-card-wrap:nth-child(1) .nh-pub-card { --nh-card-stroke: #0058FE; }  /* Community  */
.nh-pub-card-wrap:nth-child(2) .nh-pub-card { --nh-card-stroke: #FF55FE; }  /* Moderation */
.nh-pub-card-wrap:nth-child(3) .nh-pub-card { --nh-card-stroke: #00E600; }  /* Monetization */

.nh-pub-card:hover,
.nh-pub-card:focus-visible {
	color: inherit;
	text-decoration: none;
	border-color: var(--nh-card-stroke);
	outline: none;
}

.nh-pub-card__eyebrow {
	margin: 0 0 95px;          /* minimum 95px gap before the bottom content cluster */
	font-family: var(--nh-serif);
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: -1px;
}

.nh-pub-card__title {
	margin: 0;                 /* sits right below the eyebrow gap */
	font-family: var(--nh-serif);
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: -0.5px;
	font-weight: 400;
}

.nh-pub-card__body {
	margin: 24px 0 34px;          /* min 34px gap before the CTA — auto on CTA stretches further */
	font-family: var(--nh-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: -0.3px;
	max-width: 302px;
}

/* CTA — collapsed by default into a small black square; on card hover it
   expands to reveal "Learn More" italic before the arrow. */
.nh-pub-card__cta {
	margin-top: auto;            /* push the CTA to the very bottom; space above stretches */
	padding-top: 0;
	height: 35px;
	background: #000;
	color: #fff;
	border-radius: var(--nh-radius);
	display: inline-flex;
	align-items: center;
	padding: 0 9px;
	overflow: hidden;
	align-self: flex-start;
	transition: padding 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.nh-pub-card__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}
.nh-pub-card__cta-label {
	font-family: var(--nh-serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1;
	letter-spacing: -0.4px;
	white-space: nowrap;
	max-width: 0;                          /* collapsed by default */
	margin-right: 0;                       /* no gap before icon when collapsed */
	opacity: 0;
	overflow: hidden;
	transition:
		max-width    1000ms cubic-bezier(0.22, 1, 0.36, 1),
		margin-right 1000ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity      550ms ease;
}
.nh-pub-card:hover .nh-pub-card__cta,
.nh-pub-card:focus-visible .nh-pub-card__cta {
	padding: 0 16px;
}
.nh-pub-card:hover .nh-pub-card__cta-label,
.nh-pub-card:focus-visible .nh-pub-card__cta-label {
	max-width: 160px;
	margin-right: 10px;
	opacity: 1;
	transition:
		max-width    1000ms cubic-bezier(0.22, 1, 0.36, 1),
		margin-right 1000ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity      600ms ease 250ms;
}

/* ==========================================================================
   Advertisers (phone-mockup)
   ========================================================================== */
.nh-advertisers        { padding: 80px 22px 120px; }   /* 22px side gutter so the card never hits viewport edges */
.nh-advertisers__inner {
	max-width: 1092px;                     /* aligns to header column inner width (1140 − 2×24px gutter) */
	margin: 0 auto;
	min-height: 660px;
	padding: 0;
	background: var(--nh-card-bg);
	color: inherit;
	text-decoration: none;
	border-radius: var(--nh-radius);
	display: grid;
	grid-template-columns: 460px 1fr;   /* widest media that still keeps "internet" on the first line */
	min-height: 660px;
	overflow: hidden;
	cursor: pointer;
	transition: transform .35s ease;
	will-change: transform;
}

.nh-advertisers__media {
	position: relative;
	background-color: #e8dcd6;
	border-radius: var(--nh-radius) 0 0 var(--nh-radius);
	overflow: hidden;
	align-self: stretch;            /* fill the full grid row height */
	min-height: 100%;
	/* No padding — img is absolute and must fill the entire media area edge-to-edge. */
}
/* Single composed image fills the media area and animates scale on view */
.nh-advertisers__img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	object-position: center;
	transform-origin: center center;
	will-change: transform;
}
/* scale-out: starts very zoomed-in, settles to scale(1.4) so the phone fills
   the media block prominently. */
.scale-out {
	--animation-delay: 0s;
	transform: scale(1.5);
	transition: transform 2.3s var(--animation-delay) cubic-bezier(.43, .195, .02, 1);
}
.is-visible .scale-out,
.scale-out.is-visible {
	transform: scale(1.4);
}

.nh-advertisers__content {
	/* Generous breathing room matching the Figma layout */
	padding: 110px 40px 90px 64px;
	display: flex;
	flex-direction: column;
}

.nh-advertisers__title {
	margin: 0;
	font-family: var(--nh-serif);
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -2px;
}
.nh-advertisers__title em { font-style: italic; }

.nh-advertisers__subtitle {
	margin: auto 0 0;          /* push subtitle, body and CTA toward the middle/bottom */
	font-family: var(--nh-serif);
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -0.5px;
	max-width: none;
}

.nh-advertisers__body {
	margin: 24px 0 0;
	font-family: var(--nh-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: -0.3px;
	max-width: none;
}

/* CTA — same extend-on-hover behavior as the Publishers cards */
.nh-advertisers__cta {
	margin-top: 56px;
	height: 35px;
	background: #000;
	color: #fff;
	border-radius: var(--nh-radius);
	display: inline-flex;
	align-items: center;
	padding: 0 9px;
	overflow: hidden;
	align-self: flex-start;
	transition: padding 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.nh-advertisers__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}
.nh-advertisers__cta-label {
	font-family: var(--nh-serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1;
	letter-spacing: -0.4px;
	white-space: nowrap;
	max-width: 0;
	margin-right: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-width    1000ms cubic-bezier(0.22, 1, 0.36, 1),
		margin-right 1000ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity      550ms ease;
}

.nh-advertisers__inner:hover,
.nh-advertisers__inner:focus-visible {
	color: inherit;
	text-decoration: none;
	outline: none;
}
.nh-advertisers__inner:hover .nh-advertisers__cta,
.nh-advertisers__inner:focus-visible .nh-advertisers__cta {
	padding: 0 16px;
}
.nh-advertisers__inner:hover .nh-advertisers__cta-label,
.nh-advertisers__inner:focus-visible .nh-advertisers__cta-label {
	max-width: 160px;
	margin-right: 10px;
	opacity: 1;
	transition:
		max-width    1000ms cubic-bezier(0.22, 1, 0.36, 1),
		margin-right 1000ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity      600ms ease 250ms;
}

/* ==========================================================================
   Responsive — tablet (≤900px)
   ========================================================================== */
@media (max-width: 900px) {
	.nh-hero               { padding-top: 60px; }
	.nh-hero__title        { font-size: 56px; letter-spacing: -0.02em; }
	.nh-hero__subtitle     { font-size: 20px; margin-top: 28px; }
	.nh-hero__cta          { margin-top: 28px; }
	.nh-hero__media        { margin-top: 40px; }

	.nh-logos              { padding-top: 56px; }
	.nh-logos__inner       { grid-template-columns: 1fr; gap: 25px; text-align: left; padding: 0 22px; }
	.nh-logos__title       { font-size: 14px; }
	.nh-logos__row         { gap: 96px; padding-right: 96px; }

	.nh-stats              { padding-bottom: 50px; }
	.nh-stats__inner       { grid-template-columns: 1fr; gap: 12px; }
	.nh-stat               { aspect-ratio: auto; min-height: 200px; padding: 40px 24px; }
	.nh-stat__value        { font-size: 60px; }

	.nh-quote__inner       { gap: 24px; }    /* 24+1+24 ≈ 49px between icon and text on tablet */
	.nh-quote__text        { font-size: 32px; }

	/* Flow — vertical layout: dot column on the left, content on the right */
	.nh-flow                  { padding: 56px 96px; margin: 13px auto; }
	.nh-publisher-flow        { margin: 13px auto; }
	.nh-flow__inner           { padding: 0; }
	.nh-flow__header          { margin-bottom: 48px; max-width: none; }

	/* Publisher Flow — clip the vertical connector at the last dot so the line
	   doesn't continue below the final step. The mask sits right under the dot
	   and uses the section background colour so it covers the 1px line. */
	.nh-publisher-flow .nh-flow__step:last-child::after {
		content: "";
		position: absolute;
		top: 33px;          /* directly below the dot (dot is 33px tall) */
		left: 14px;         /* slightly left of the 16.5px line so the 5px wide mask covers it */
		width: 5px;
		bottom: -16px;      /* extend past the OL bottom-16px line stop */
		background: #F8F4F3;
		z-index: 1;
		pointer-events: none;
	}
	.nh-publishers__title,
	.nh-advertisers__title    { font-size: 32px; }
	.nh-flow__title           { font-size: 32px; }
	.nh-flow__subtitle        { font-size: 16px; margin-top: 16px; }

	.nh-flow__steps           {
		grid-template-columns: 1fr;
		gap: 56px;
		position: relative;
	}
	.nh-flow__steps::before   {
		display: block;
		content: "";
		position: absolute;
		top: 16px;
		bottom: 16px;
		left: 16.5px;
		width: 1px;
		height: auto;
		background: #000;
		z-index: 0;
		opacity: 0;
		transition: opacity 500ms ease-out;
	}
	.newhome.nh-anim .nh-flow.is-visible .nh-flow__steps::before {
		opacity: 1;
		transition-delay: 300ms;
	}

	.nh-flow__step            {
		display: grid;
		grid-template-columns: 33px 1fr;
		grid-template-areas:
			"dot  title"
			"dot  body";
		column-gap: 20px;
		row-gap: 8px;
		text-align: left;
		align-items: start;
	}
	.nh-flow__dot             { grid-area: dot; margin: 0; align-self: start; }
	.nh-flow__step-title      {
		grid-area: title;
		min-height: 0;
		margin: 0;
		font-size: 22px;
		line-height: 1;
	}
	.nh-flow__step-body       {
		grid-area: body;
		font-size: 16px;
		max-width: none;
	}

	.nh-flow__aida            {
		margin-top: 56px;
		text-align: left;
		font-size: 18px;
	}
	.nh-flow__aida::before    { display: none; }     /* hide the magenta circle on mobile */

	.nh-publishers__cards  { grid-template-columns: 1fr; }

	/* 22px gutter from viewport edges — same as the mobile/desktop sections */
	.nh-advertisers           { padding: 56px 22px; }
	.nh-advertisers__inner   {
		grid-template-columns: 1fr;
		min-height: 0;
		margin: 0 auto;
		max-width: 100%;
	}
	.nh-advertisers__media   {
		border-radius: var(--nh-radius) var(--nh-radius) 0 0;
		padding: 0;
		aspect-ratio: 784 / 944;     /* matches phone.png native ratio so the phone isn't cropped */
		height: auto;
	}
	.nh-advertisers__content { padding: 28px 24px 32px; }      /* matches Publishers card internal padding */
	.nh-advertisers__subtitle { margin-top: 40px; }

	/* Capabilities — tablet/mobile */
	.nh-capabilities          { padding: 64px 0; }
	.nh-capabilities__title   { font-size: 32px; }
	.nh-capabilities__subtitle{ font-size: 16px; margin-top: 16px; }
	.nh-capabilities__tablist { max-width: none; margin-bottom: 28px; padding: 10px 7px; }
	.nh-capabilities__tab     {
		width: 100%;
		padding: 12px 0 10px;
		font-size: 11px;
		text-align: center;
	}
	.nh-capabilities__body    { margin-top: 24px; padding-top: 20px; }
	.nh-capabilities__panel-title { font-size: 16px; }
	.nh-capabilities__panel-body  { font-size: 14px; }
}

/* ==========================================================================
   Responsive — phone (≤600px) — matches the 320px Figma mobile spec
   ========================================================================== */
@media (max-width: 600px) {
	/* Hero */
	.nh-hero                  { padding-top: 24px; }
	.nh-hero__inner           { padding: 0 22px; }
	.nh-hero__title           { font-size: 36px; line-height: 1.05; letter-spacing: -0.015em; }
	.nh-hero__subtitle        { font-size: 16px; line-height: 1.2; margin-top: 24px; max-width: 276px; }
	.nh-hero__cta             { margin-top: 28px; min-width: 200px; height: 46px; font-size: 18px; }
	.nh-hero__media           { margin-top: 32px; aspect-ratio: 276 / 167; }

	/* Logos band */
	.nh-logos                 { padding-top: 48px; }
	.nh-logos__title          { font-size: 13px; white-space: nowrap; }
	.nh-logos__title-desktop  { display: none; }
	.nh-logos__title-mobile   { display: inline; }
	.nh-logos__row            { gap: 62px; padding-right: 62px; }

	/* Stats — stack at 276×154 ratio */
	.nh-stats                 { padding-top: 40px; }
	.nh-stats__inner          { padding: 0 22px; }
	.nh-stat                  { min-height: 154px; padding: 32px 24px; aspect-ratio: 276 / 154; }
	.nh-stat__value           { font-size: 40px; }
	.nh-stat__label           { font-size: 14px; margin-top: 12px; }

	/* Quote — icon, divider, text — all left-aligned and stacked */
	.nh-quote                 { padding: 80px 0; }
	.nh-quote.is-visible      { padding-top: 80px; padding-bottom: 80px; }
	.nh-quote__inner          {
		display: block;
		padding: 0 30px;
	}
	.nh-quote__mark           { width: 102px; height: 85px; margin: 0 0 28px; }
	.nh-quote__rule           {
		display: block;
		border: none;
		outline: none;
		margin: 0 0 30px;
		width: 100%;
		height: 1px;
		background: #000;
	}
	.nh-quote__text           {
		font-size: 22px;
		line-height: 1.1;
		letter-spacing: -0.06em;
		max-width: none;
	}

	/* Flow — phone-specific tweaks (structure inherits from the ≤900px rules above) */
	.nh-flow                  { padding: 56px 48px; margin: 0 auto; border-radius: 0; }
	.nh-flow.is-visible       { margin-top: 0; margin-bottom: 0; }
	/* Publisher Flow keeps its 13px top margin on phones, even when .is-visible */
	.nh-publisher-flow,
	.nh-publisher-flow.is-visible { margin-top: 13px; margin-bottom: 13px; }
	.nh-flow__title           { font-size: 26px; }
	.nh-flow__subtitle        { font-size: 16px; margin-top: 20px; margin-bottom: 20px; }
	.nh-flow__step            { column-gap: 16px; }
	.nh-flow__step-title      { font-size: 18px; }
	.nh-flow__step-body       { font-size: 14px; }
	.nh-flow__aida            { font-size: 16px; }
	.nh-flow__aida::before    { width: 18px; height: 18px; }

	/* Publishers — stacked cards */
	.nh-publishers            { padding: 56px 0; }
	.nh-publishers__header    { margin-bottom: 32px; }
	.nh-publishers__title     { font-size: 22px; }
	.nh-publishers__subtitle  { font-size: 16px; margin-top: 16px; }
	.nh-publishers__cards     { gap: 12px; }
	.nh-pub-card              { padding: 28px 24px; min-height: 0; }
	.nh-pub-card__eyebrow     { font-size: 18px; margin-bottom: 57px; }
	.nh-pub-card__title       { font-size: 14px; margin-top: 32px; }
	.nh-pub-card__br          { display: none; }     /* let the title flow as one string on mobile */
	.nh-pub-card__body        { font-size: 14px; margin-top: 16px; }
	.nh-pub-card__cta         { margin-top: 24px; height: 28px; padding: 0 6px; }
	.nh-pub-card__cta-icon    { width: 14px; height: 14px; }
	.nh-pub-card__cta-icon svg{ width: 14px; height: 14px; }
	.nh-pub-card__cta-label   { font-size: 14px; }

	/* Advertisers — phone full-width on top, content below */
	.nh-advertisers           { padding: 48px 0; }
	.nh-advertisers__inner    {
		margin: 0 22px;
		max-width: none;
		min-height: 0;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
	.nh-advertisers__media    {
		border-radius: var(--nh-radius) var(--nh-radius) 0 0;
		padding: 0;
		aspect-ratio: 784 / 944;     /* preserves phone.png ratio so the phone fits without crop */
		height: auto;
		min-height: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		text-align: center;
	}
	.nh-advertisers__content  { padding: 28px 24px 32px; }     /* matches Publishers card internal padding */
	.nh-advertisers__title    { font-size: 22px; line-height: 1.1; letter-spacing: -0.04em; max-width: 260px; }
	.nh-advertisers__subtitle { font-size: 14px; line-height: 1.1; letter-spacing: -0.05em; margin-top: 56px; max-width: 260px; }
	.nh-advertisers__body     { font-size: 13px; line-height: 1.1; letter-spacing: -0.025em; margin-top: 16px; max-width: 227px; }
	.nh-advertisers__cta      { margin-top: 28px; height: 28px; padding: 0 6px; }
	.nh-advertisers__cta-icon { width: 14px; height: 14px; }
	.nh-advertisers__cta-icon svg { width: 14px; height: 14px; }
	.nh-advertisers__cta-label { font-size: 14px; }
}

/* =========================================================================
   Engagement Cards — "Increase your audience engagement"
   Three image+stat cards (newcommunity page). Section fade-in is handled by
   the generic `.newhome.nh-anim > section .is-visible` rule already in this
   file (nh-engagement is NOT in the exclusion list, so it gets the default
   fade-in for free).
   ========================================================================= */
.nh-engagement {
	padding: 96px 0;
	text-align: center;
	color: var(--nh-fg);
}
.nh-engagement__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
}
.nh-engagement__header {
	max-width: 760px;
	margin: 0 auto 56px;
}
.nh-engagement__title,
.nh-engagement__title-inner {
	display: block;
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -0.06em;
	margin: 0;
}
.nh-engagement__subtitle {
	font-family: var(--nh-serif);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.04em;
	margin: 18px 0 0;
}
.nh-engagement__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.nh-engagement__card {
	background: var(--nh-card-bg);
	border-radius: var(--nh-radius);
	padding: 15px 15px 32px;
	display: flex;
	flex-direction: column;
}
.nh-engagement__card-media {
	border-radius: var(--nh-radius);
	overflow: hidden;
	aspect-ratio: 335 / 247;
	margin-bottom: 28px;
	background: rgba(0, 0, 0, 0.04);
}
.nh-engagement__card-image,
.nh-engagement__card-image-placeholder {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.nh-engagement__card-image-placeholder {
	background: rgba(0, 0, 0, 0.05);
}
.nh-engagement__card-caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-family: var(--nh-serif);
	color: var(--nh-fg);
	margin-top: auto;
}
.nh-engagement__card-prefix {
	font-style: italic;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.06em;
}
.nh-engagement__card-line1,
.nh-engagement__card-line2 {
	font-size: 32px;
	line-height: 1.05;
	letter-spacing: -0.06em;
	margin-top: 2px;
}

/* Editor-only picker shell — keeps the card visually faithful while the
   author swaps the image. */
.nh-engagement__picker {
	display: flex;
	flex-direction: column;
}
.nh-engagement__placeholder {
	aspect-ratio: 335 / 247;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.05);
	color: rgba(0, 0, 0, 0.45);
	border-radius: var(--nh-radius);
	font-family: var(--nh-sans);
	font-size: 13px;
}
.nh-engagement__picker-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 8px;
}

@media (max-width: 900px) {
	.nh-engagement                  { padding: 64px 0; }
	.nh-engagement__header          { margin-bottom: 36px; }
	.nh-engagement__title,
	.nh-engagement__title-inner     { font-size: 32px; }
	.nh-engagement__subtitle        { font-size: 16px; margin-top: 14px; }
	.nh-engagement__cards           { grid-template-columns: 1fr; gap: 16px; }
	.nh-engagement__card            { padding: 14px 14px 28px; }
	.nh-engagement__card-media      { margin-bottom: 24px; }
	.nh-engagement__card-prefix     { font-size: 22px; }
	.nh-engagement__card-line1,
	.nh-engagement__card-line2      { font-size: 24px; }
}

/* =========================================================================
   Community Tabs variant — 4-tab pill that hugs its content instead of
   filling the row. Tabs wrap to a second line when they don't fit, and the
   whole pill stays centered. Only applies to nh-community-tabs (which carries
   the `.nh-capabilities--community` modifier); the 3-tab newhome variant
   (post 23420) keeps its original 100%-wide / max-width: 823px / 3-col grid.
   ========================================================================= */
.nh-capabilities--community .nh-capabilities__tablist {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between; /* spread the 4 tabs edge-to-edge */
	grid-template-columns: none;
	width: 100%;
	max-width: 823px;            /* always match the panel/image width */
	overflow-x: auto;            /* fallback: scroll horizontally on very tight viewports */
	scrollbar-width: none;       /* hide scrollbar in Firefox */
}
.nh-capabilities--community .nh-capabilities__tablist::-webkit-scrollbar {
	display: none;                /* hide scrollbar in WebKit */
}
.nh-capabilities--community .nh-capabilities__tab {
	flex: 0 0 auto;              /* tabs keep their natural width, never compress */
	white-space: nowrap;         /* label stays on one line */
}
/* On mobile the 4-tab pill behaves like the 3-tab publisher: 4 equal grid
   columns, tabs filling the row, no horizontal scroll, label wrap allowed for
   long copy ("Engagement Tools"). Doubling the publisher's vertical padding
   to match its "doubled" mobile height. */
@media (max-width: 900px) {
	.nh-capabilities--community .nh-capabilities__tablist {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
		max-width: none;
		overflow-x: visible;
		padding: 10px 7px;
		margin-bottom: 28px;
	}
	.nh-capabilities--community .nh-capabilities__tab {
		flex: initial;
		width: 100%;
		padding: 12px 0 10px;
		font-size: 11px;
		letter-spacing: 0;
		white-space: normal;        /* allow "Engagement Tools" to wrap if needed */
		text-align: center;
		line-height: 1.15;
	}
}

/* =========================================================================
   Monetization Bullets — "More engagement leads to more valuable inventory"
   Two-column layout: left headline (~398px), right 3-row list with horizontal
   line dividers between rows. Used on the Monetization page only.
   ========================================================================= */
.nh-monetization-bullets {
	padding: 80px 0;
	color: var(--nh-fg);
}
.nh-monetization-bullets__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
	display: grid;
	grid-template-columns: minmax(280px, 440px) 1fr;
	gap: 56px;
	align-items: start;
}
.nh-monetization-bullets__title {
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -0.06em;
	margin: 0;
	max-width: 400px;
}
.nh-monetization-bullets__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.nh-monetization-bullets__row {
	padding: 22px 0;
	border-top: 1px solid var(--nh-fg);
}
/* last row has no bottom rule — only top dividers between items */
.nh-monetization-bullets__row-title {
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: -0.06em;
	margin: 0;
}
.nh-monetization-bullets__row-body {
	font-family: var(--nh-serif);
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: -0.06em;
	margin: 8px 0 50px;             /* ≥50px breathing room below each sub-item */
}

@media (max-width: 900px) {
	.nh-monetization-bullets               { padding: 56px 0; }
	.nh-monetization-bullets__inner        { grid-template-columns: 1fr; gap: 32px; }
	.nh-monetization-bullets__title        { font-size: 32px; }
	.nh-monetization-bullets__row          { padding: 18px 0; }
	.nh-monetization-bullets__row-title    { font-size: 22px; }
	.nh-monetization-bullets__row-body     { font-size: 16px; }
}

/* =========================================================================
   nh-feature-card — two-column card (Moderation page)
   Soft-pink panel; title top-left, subtitle + body bottom-left, image right.
   Designed to be stacked vertically with several instances.
   ========================================================================= */
.nh-feature-card {
	padding: 24px 0;
	color: var(--nh-fg);
}
.nh-feature-card__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
}
.nh-feature-card__panel {
	background: var(--nh-card-bg);
	border-radius: var(--nh-radius);
	min-height: 560px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	overflow: hidden;
	position: relative;
}
.nh-feature-card__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 64px 48px 64px 64px;
	gap: 24px;
}
.nh-feature-card__title {
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -0.06em;
	margin: 0;
	max-width: 420px;
}
.nh-feature-card__bottom {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 380px;
}
.nh-feature-card__subtitle {
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -0.05em;
	margin: 0;
}
.nh-feature-card__body {
	font-family: var(--nh-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0;
}
.nh-feature-card__media {
	margin: 0;
	position: relative;
	overflow: hidden;
	align-self: stretch;
	min-height: 100%;
}
.nh-feature-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

@media (max-width: 900px) {
	.nh-feature-card { padding: 16px 0; }
	.nh-feature-card__panel {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.nh-feature-card__text {
		padding: 40px 28px 32px;
		gap: 32px;
	}
	.nh-feature-card__title    { font-size: 32px; }
	.nh-feature-card__subtitle { font-size: 18px; }
	.nh-feature-card__body     { font-size: 16px; }
	.nh-feature-card__media {
		min-height: 0;
		height: auto;
		display: block;
	}
	.nh-feature-card__image {
		position: static;
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}

/* =========================================================================
   nh-hero — Split layout variant
   Triggered by the block attribute `layoutVariant=split` (PHP emits the
   `nh-hero--split` modifier on the block wrapper, edit.js mirrors it in the
   editor). Works on any page that uses nh-hero. Pages using the default
   `stacked` value keep the original centered-vertical layout.

   The block emits 4 direct children inside .__inner (title, subtitle, CTA,
   figure) — no DOM wrapper to give the text its own column. We use CSS Grid
   with named template-areas so source order doesn't matter: title/subtitle/
   CTA all live in column 1, figure spans all 3 rows in column 2. The grid
   container is sized to the same 1140px max as the header `.header-container
   .row` so the hero's left edge aligns with the OpenWeb logo above it.
   ========================================================================= */
.nh-hero--split .nh-hero {
	padding-top: 64px;
	padding-bottom: 64px;
}
.nh-hero--split .nh-hero__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
	/*min-height: 560px;*/
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"title    media"
		"subtitle media"
		"cta      media";
	column-gap: 56px;
	row-gap: 0;
	align-content: center;          /* centers the row stack inside min-height */
	justify-items: start;
	text-align: left;
}
.nh-hero--split .nh-hero__title {
	grid-area: title;
	text-align: left;
	font-size: 60px;
	line-height: 64px;               /* match the Community hero title (reusable nh-hero) */
	letter-spacing: -0.04em;
	margin: 0;
}
.nh-hero--split .nh-hero__title-line { display: block; }
.nh-hero--split .nh-hero__subtitle {
	grid-area: subtitle;
	text-align: left;
	max-width: 460px;
	margin: 14px 0 0;                /* gap below title */
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.nh-hero--split .nh-hero__cta {
	grid-area: cta;
	margin: 18px 0 0;                /* gap below subtitle */
}
.nh-hero--split .nh-hero__media {
	grid-area: media;
	margin: 0;
	width: 100%;
	max-width: 480px;                /* keep the image from dominating */
	justify-self: end;
	align-self: center;
	aspect-ratio: 523 / 529;         /* Figma frame ratio */
	background: transparent;         /* let the cut-out PNG show through */
	border-radius: 0;
	overflow: visible;
}
.nh-hero--split .nh-hero__media img,
.nh-hero--split .nh-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: contain;            /* PNG has whitespace baked in; preserve it */
	display: block;
}

@media (max-width: 900px) {
	.nh-hero--split .nh-hero__inner {
		min-height: 0;
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"subtitle"
			"cta"
			"media";
		row-gap: 0;
		justify-items: center;
		text-align: center;
	}
	.nh-hero--split .nh-hero__title       { text-align: center; font-size: 40px; line-height: 1.05; }
	.nh-hero--split .nh-hero__subtitle    { text-align: center; margin-inline: auto; }
	.nh-hero--split .nh-hero__media {
		max-width: 420px;
		margin: 36px auto 0;
		justify-self: center;
	}
}

/* =========================================================================
   newmonetization page — page-specific (non-hero) tints
   ========================================================================= */
/* "More engagement leads to more valuable inventory" — peachy band */
.page-newmonetization .nh-monetization-bullets {
	background: #efe3e1;
}
.page-newmoderation .nh-monetization-bullets {
	padding: 0;
}

/* Logos band tightens up against the split hero on this page */
.page-newmonetization .nh-logos {
	padding: 16px 0 80px;
}

.page-newconversation .nh-logos {
	padding: 16px 0 80px;
}

.page-newmoderation .nh-logos {
	padding: 16px 0 80px;
}

.page-newcommunitymedia .nh-logos {
	padding: 16px;
}

/* =========================================================================
   Conversation page — Advanced Moderation + Community Engagement Tools.
   Two custom-HTML sections added after the feature cards. Built on the
   existing newhome tokens (serif/sans, --nh-card-bg, --nh-cta-*, radius).
   ========================================================================= */
.nc-section {
	padding: 96px 0;
	text-align: center;
	color: var(--nh-fg);
}
.nc-section__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
}
.nc-section__title {
	margin: 0;
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -2.5px;
}
.nc-section__subtitle {
	margin: 18px auto 0;
	font-family: var(--nh-serif);
	font-weight: 400;
	line-height: 1.1;
}

/* Shared pill CTA (matches the hero CTA, smaller). White label in every
   interactive state so the theme's blue link colour never bleeds through. */
.nc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	margin-top: 30px;
	padding: 0 22px;
	background: var(--nh-cta-bg);
	border-radius: var(--nh-radius);
	font-family: var(--nh-serif);
	font-style: italic;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transform-origin: center;
	transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc-btn:hover,
.nc-btn:focus-visible { transform: scale(1.05); }
.nc-btn,
.nc-btn:link,
.nc-btn:visited,
.nc-btn:hover,
.nc-btn:focus,
.nc-btn:focus-visible,
.nc-btn:active,
.nc-btn *,
.nc-btn:hover *,
.nc-btn:focus *,
.nc-btn:active * {
	color: var(--nh-cta-fg, #fff) !important;
}
.nc-btn svg { width: 16px; height: 16px; display: block; }

/* Section 1 — Advanced Moderation */
.nc-moderation__subtitle {
	max-width: 520px;
	font-size: 26px;
	letter-spacing: -1.5px;
}
.nc-moderation__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	align-items: start;
	margin: 52px auto 0;
	max-width: var(--nh-container);
}
.nc-moderation__cards img {
	display: block;
	width: 100%;
	height: auto;
}

/* Section 2 — Community Engagement Tools */
.nc-tools__subtitle {
	max-width: 820px;
	font-size: 22px;
	letter-spacing: -1.5px;
}
.nc-tools__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 52px;
}
.nc-tools__card {
	background: var(--nh-card-bg);
	border-radius: var(--nh-radius);
	padding: 40px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.nc-tools__icon {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	background: #efe3e1;          /* subtle circle behind the glyph (per Figma) */
	border-radius: 50%;
}
.nc-tools__icon img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	display: block;
}
.nc-tools__card-title {
	margin: 0;
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: -1px;
}
.nc-tools__card-text {
	margin: 10px 0 0;
	max-width: 256px;
	font-family: var(--nh-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.5px;
}

@media (max-width: 900px) {
	.nc-section { padding: 64px 0; }
	.nc-section__title { font-size: 32px; letter-spacing: -1.5px; }
	.nc-moderation__subtitle { font-size: 18px; }
	.nc-moderation__cards { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
	.nc-tools__subtitle { font-size: 16px; }
	.nc-tools__grid { grid-template-columns: 1fr; gap: 16px; }
	.nc-tools__card { padding: 32px 24px; }
}

/* =========================================================================
   SSP page (newssp) — "Built for engagement-driven performance".
   Reuses the split hero + logos; adds a photo treatment for the hero image
   plus two custom sections: "Made for Publishers" feature and the
   "A simple solution…" revenue bullets. Built on the newhome tokens.
   ========================================================================= */

/* Hero: the SSP hero image is a photo (not a cut-out PNG), so it fills + rounds. */
.page-newssp .nh-hero--split .nh-hero__media {
	aspect-ratio: 569 / 586;
	border-radius: var(--nh-radius);
	overflow: hidden;
	background: var(--nh-card-bg);
}

.page-newmoderation .nh-hero--split .nh-hero__media {
	aspect-ratio: 569 / 586;
	border-radius: var(--nh-radius);
	overflow: hidden;
	background: var(--nh-card-bg);
}

/*.page-newconversation .nh-hero--split .nh-hero__media {*/
/*	aspect-ratio: 569 / 586;*/
/*	border-radius: var(--nh-radius);*/
/*	overflow: hidden;*/
/*	background: var(--nh-card-bg);*/
/*}*/

.page-newssp .nh-hero--split .nh-hero__media img {
	object-fit: cover;
}
/* Hero title: fit on 3 lines with tight leading (design is 64px / leading-none,
   tight tracking so "engagement-driven" stays on one line). */
.page-newssp .nh-hero--split .nh-hero__title {
	font-size: 58px;
	line-height: 1.02;
	letter-spacing: -0.045em;
}
/* Logos band tightens up against the split hero, like the monetization page. */
.page-newssp .nh-logos { padding: 16px 0 80px; }

/* "Made for Publishers" reuses the existing nh-feature-card block. */

/* Section — A simple solution… (centered title + 4 bullet rows) */
.ssp-bullets {
	background: #efe3e1;
	padding: 96px 0;
	color: var(--nh-fg);
}
.ssp-bullets__inner {
	max-width: var(--nh-container);
	margin: 0 auto;
	padding: 0 var(--nh-gutter);
}
.ssp-bullets__title {
	margin: 0 auto 48px;
	max-width: 760px;
	text-align: center;
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: -2.5px;
}
.ssp-bullets__list {
	max-width: 900px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}
.ssp-bullets__row {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 40px;
	align-items: start;
	padding: 28px 0;
	border-top: 1px solid var(--nh-fg);
}
.ssp-bullets__row-title {
	margin: 0;
	font-family: var(--nh-serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: -1.5px;
}
.ssp-bullets__row-body {
	margin: 0;
	font-family: var(--nh-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.5px;
}

@media (max-width: 900px) {
	/* Title small enough that "engagement-driven" stays on one line on a phone. */
	.page-newssp .nh-hero--split .nh-hero__title { font-size: 30px; line-height: 1.06; letter-spacing: -0.03em; }
	/* Hero photo spans the full content width on mobile (matches the design). */
	.page-newssp .nh-hero--split .nh-hero__media { max-width: none; margin-top: 28px; }
	.ssp-bullets { padding: 56px 0; }
	.ssp-bullets__title { font-size: 30px; letter-spacing: -1.5px; }
	.ssp-bullets__row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
	.ssp-bullets__row-title { font-size: 22px; }
}

/* =========================================================================
   newconversation page — QA round 1 (2026-06-05)
   Scoped to .page-newconversation so the shared nh-hero / nh-feature-card
   blocks (also used by Community, Moderation, SSP…) stay untouched elsewhere.
   ========================================================================= */

/* 1 — Hero title leading tightened to 64px per QA, sized to hold its 3 lines.
   The block emits three explicit title lines; keep each on a single line so the
   headline always reads as exactly 3 rows (never wraps to 4). */
.page-newconversation .nh-hero--split .nh-hero__title {
	font-size: 64px;
	line-height: 64px;
	letter-spacing: -6px;
}
.page-newconversation .nh-hero--split .nh-hero__title-line {
	white-space: nowrap;
}

/* 3 — Feature boxes (Conversation / Live Blog / AMA) — panel height per Figma. */
.page-newconversation .nh-feature-card__panel {
	min-height: 683px;
}

@media (min-width: 901px) {
	/* Tighten the hero's top padding to 16px (Figma). */
	.page-newconversation .nh-hero--split .nh-hero {
		padding-top: 16px;
	}

	.page-newmonetization .nh-hero--split .nh-hero {
		padding-top: 16px;
	}

	.page-newssp .nh-hero--split .nh-hero {
		padding-top: 16px;
	}

	.page-newmoderation .nh-hero--split .nh-hero {
		padding-top: 16px;
	}

	.page-newcommunitymedia .nh-hero--split .nh-hero {
		padding-top: 16px;
	}
	.page-newcommunitymedia .nh-capabilities--community .nh-capabilities__tab  {
		font-size: 18px;
	}

	/* 2 — True two-column layout. The text column hugs the (no-wrap) 64px title
	   so it never clips; the image fills the remaining column at 100% width.
	   align-items/align-content:start keep the left rows at their natural height
	   (the image no longer stretches them). */
	.page-newconversation .nh-hero--split .nh-hero__inner {
		grid-template-columns: max-content minmax(0, 1fr);
		grid-template-areas:
			"title    media"
			"subtitle media"
			"cta      media";
		column-gap: 36px;
		align-items: start;
		align-content: start;
		min-height: 0;
	}
	.page-newconversation .nh-hero--split .nh-hero__title {
		margin-top: 37px;
	}

	.page-newmonetization .nh-hero--split .nh-hero__title {
		margin-top: 37px;
	}

	.page-newmoderation .nh-hero--split .nh-hero__title {
		margin-top: 37px;
	}

	.page-newssp .nh-hero--split .nh-hero__title {
		margin-top: 37px;
	}

	.page-newconversation .nh-hero--split .nh-hero__subtitle {
		margin-top: 0;   /* gap below title */
	}

	.page-newmonetization .nh-hero--split .nh-hero__subtitle {
		margin-top: 0;
	}

	.page-newssp .nh-hero--split .nh-hero__subtitle {
		margin-top: 0;
	}

	.page-newmoderation .nh-hero--split .nh-hero__subtitle {
		margin-top: 0;
	}

	.page-newconversation .nh-hero--split .nh-hero__cta {
		margin: 0;
	}

	.page-newmonetization .nh-hero--split .nh-hero__cta {
		margin: 0;
	}

	.page-newmoderation.nh-hero--split .nh-hero__cta {
		margin: 0;
	}

	.page-newssp.nh-hero--split .nh-hero__cta {
		margin: 0;
	}
		/*.page-newconversation .nh-hero--split .nh-hero__cta {*/
	/*	margin-top: 57px;   !* gap below paragraph *!*/
	/*}*/
	.page-newconversation .nh-hero--split .nh-hero__media {
		grid-area: media;
		width: 100%;               /* 100% width of the image column */
		/*max-width: none;*/
		height: 100%;              /* stretch to the full height of the hero block */
		align-self: stretch;
		margin: 0;
		border-radius: var(--nh-radius);
		overflow: hidden;
		background: var(--nh-card-bg);
	}
	.page-newconversation .nh-hero--split .nh-hero__media img {
		object-fit: cover;
	}

	/* 4 — Inset the image inside the card (Figma 77-556): ~48px top/bottom,
	   34px right, rounded 5px. We inset the media box itself with a margin and
	   clip it, so the scale-on-view animation also stays within the inset frame.
	   The base image keeps inset:0 + object-fit:cover to fill the inset box. */
	.page-newconversation .nh-feature-card__media {
		margin: 48px 34px;
		min-height: 0;          /* cancel the base min-height:100% so the margin insets */
		border-radius: 5px;
	}
	.page-newssp .nh-feature-card__media {
		margin: 48px 34px;
		min-height: 0;          /* cancel the base min-height:100% so the margin insets */
		border-radius: 5px;
	}

	.page-newmoderation .nh-feature-card__media {
		margin: 48px 34px;
		min-height: 0;          /* cancel the base min-height:100% so the margin insets */
		border-radius: 5px;
	}
}

/* 5 — Box image animation: identical to the newhome "Advertisers" block —
   the photo loads zoomed-in and scales down once the card enters the viewport
   (the shared IntersectionObserver adds .is-visible on the section). Reuses the
   exact 1.5 → 1.4 scale + easing from .scale-out. Scoped to this page so the
   shared nh-feature-card (Moderation) is untouched. */
.page-newconversation .nh-feature-card__image {
	transform: scale(1.5);
	transform-origin: center center;
	transition: transform 2.3s cubic-bezier(.43, .195, .02, 1);
	will-change: transform;
}
.page-newconversation .nh-feature-card.is-visible .nh-feature-card__image {
	transform: scale(1);
}

/* Mobile: let the title wrap naturally again (single-column stack) and crop the
   hero photo into a landscape frame. The source (Rectangle 155, 552×334) is
   landscape; cover-cropping fills the frame on both desktop (portrait) and
   mobile (landscape) — same behaviour as a background-image, but keeps the
   content-managed <img>. */
@media (max-width: 900px) {
	.page-newconversation .nh-hero--split .nh-hero__title { font-size: 40px; line-height: 1.05; letter-spacing: -3px; }
	.page-newconversation .nh-hero--split .nh-hero__title-line { white-space: normal; }
	.page-newconversation .nh-hero--split .nh-hero__subtitle { margin-top: 32px; }
	.page-newconversation .nh-hero--split .nh-hero__cta { margin-top: 32px; margin-bottom: 53px; }
	.page-newconversation .nh-hero--split .nh-hero__media {
		max-width: none;
		aspect-ratio: 552 / 334;     /* landscape mobile frame */
		border-radius: var(--nh-radius);
		overflow: hidden;
		background: var(--nh-card-bg);
	}
	.page-newconversation .nh-hero--split .nh-hero__media img { object-fit: cover; }
}

/* nh-stats cards (3x / 2x / 30%) — redesign per Figma 77-555: figure top-left,
   caption bottom-left, left-aligned (base block centers them). Card box, radius
   (5px) and aspect-ratio (372/258) already match. */
.page-newconversation .nh-stat {
	align-items: flex-start;
	justify-content: space-between;
	text-align: left;
}
.page-newconversation .nh-stat__value {
	font-family: var(--nh-sans);   /* DM Sans per Figma (was the serif) */
	font-weight: 400;
	letter-spacing: 0;
}
.page-newconversation .nh-stat__value-sup {
	font-size: 0.6em;              /* % at 60px on a 100px figure */
	top: 0;
}
.page-newconversation .nh-stat__label {
	margin: 0;
	font-family: var(--nh-sans);
	font-weight: 400;
	letter-spacing: -0.5px;
}
@media (min-width: 901px) {
	.page-newconversation .nh-stat { padding: 13px 33px 33px; }
	.page-newconversation .nh-stat__value { font-size: 100px; }
	.page-newconversation .nh-stat__label { font-size: 26px; }
}

/* Respect reduced-motion: hold the image still. */
@media (prefers-reduced-motion: reduce) {
	.page-newconversation .nh-feature-card__image { animation: none !important; transform: none !important; }
}