/**
 * NEOHomeNew — homepage styles.
 *
 * Structure follows attio.com. The hero is a single-cell grid holding two
 * stacked layers: a sticky backdrop that stays put for one viewport, and a
 * content column whose headline is itself sticky while the product window
 * scrolls up past it. Numbers in the hero (scale range, fade distance) are
 * measured off the reference and live in neo-home-new.js — this file only
 * has to leave room for them.
 *
 * Authored directly in dist/, matching homepage-v2.css. There is no build
 * step for the per-template stylesheets.
 */

.nhn {
	--nhn-header-h: 92px;

	/* Runway: how much scrolling the hero animation is given before the page
	   moves on. Anything less and the dolly-back finishes in one wheel tick. */
	--nhn-hero-runway: 24svh;

	/*
	 * Space between the CTAs and the top of the product window.
	 *
	 * An explicit gap, not a leftover. This used to be whatever remained after
	 * a fixed-height copy block, which meant it ignored how tall the headline
	 * actually wrapped — and left the window stranded ~200px below the buttons
	 * on desktop and ~270px on mobile.
	 */
	--nhn-hero-gap: 104px;

	--nhn-ink: #191a23;
	--nhn-ink-mid: #656672;
	--nhn-ink-soft: #8a8b96;
	--nhn-rule: rgba(25, 26, 35, 0.09);
	--nhn-blue: #5172e1;
	--nhn-surface: #ffffff;
	--nhn-surface-2: #f7f8fb;

	--nhn-max: 1280px;
	--nhn-gutter: 32px;

	background: var(--nhn-surface);
	color: var(--nhn-ink);
	font-family: 'TWK Everett', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	overflow-x: clip;
}

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

/* The site header is position:absolute, so the hero sits underneath it and
   has to reserve its own top space rather than being pushed down. */
body.page-template-template-neo-home-new .site-header {
	background: transparent;
}

/* ============================================================ HERO ===== */

/*
 * Three layers:
 *
 *   1. .nhn-hero__bg    sticky for one viewport — the gradient holds still.
 *                       Pulls the rest back over itself with a negative margin
 *                       equal to its own height, so it is a backdrop rather
 *                       than a screenful of content everything sits below.
 *   2. .nhn-hero__copy  sticky under the header — the headline that fades.
 *                       Sized by its content.
 *   3. .nhn-hero__stage normal flow — the window, so it rises with the scroll
 *                       on its own and no JS has to translate it.
 *
 * Because a sticky element reserves its flow space and stops pushing later
 * siblings the moment it pins, layer 3 scrolls up past layer 2 without any
 * arithmetic tying the two together. The only number that has to be chosen is
 * the gap between them.
 */
.nhn-hero {
	position: relative;
	z-index: 0;
	isolation: isolate;
}

/*
 * The hero is positioned, and positioned elements paint above static ones
 * regardless of document order — so its sticky gradient was showing through
 * the sections below it. Everything after the hero is lifted into the same
 * positioned layer, where DOM order decides again.
 */
.nhn > section:not(.nhn-hero) {
	position: relative;
	z-index: 1;
}

/* ---- backdrop ---- */

.nhn-hero__bg {
	position: sticky;
	top: 0;
	z-index: 0;
	height: 100svh;
	margin-bottom: -100svh;
	overflow: clip;
	pointer-events: none;
}

.nhn-hero__wash {
	position: absolute;
	inset: 0;
	/*
	 * White through the upper half so the headline sits on paper, with the
	 * colour blooming up from below the fold. The centre is pushed past the
	 * bottom edge (118%) so what shows is the shoulder of the gradient, not
	 * its hot centre — that is what keeps it a wash rather than a spotlight.
	 */
	background: radial-gradient(
		130% 92% at 50% 118%,
		#8fa0ea 0%,
		#c3cef7 34%,
		#e6ebfd 58%,
		#ffffff 76%
	);
}

/*
 * Uploaded backdrop. Replaces the gradient rather than sitting over it — the
 * background-image and anchor come from the template as inline style, because
 * they are per-page content rather than design.
 */
.nhn-hero__wash--image {
	background-repeat: no-repeat;
	background-size: cover;
	/* Fallback under a transparent PNG or an SVG that does not fill the box,
	   so the hero never shows bare white behind the product window. */
	background-color: #eef1fe;
}

.nhn-hero__stripes {
	position: absolute;
	inset: 0;
	/* 1px of white every 8px — a pinstripe over the colour. Masked to the
	   lower half, because over white it would be invisible anyway and over
	   the mid-tones it is what stops the gradient banding on wide displays. */
	background: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.5) 0,
		rgba(255, 255, 255, 0.5) 1px,
		rgba(255, 255, 255, 0) 1px,
		rgba(255, 255, 255, 0) 8px
	);
	mask-image: linear-gradient(180deg, transparent 34%, #000 78%);
	-webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 78%);
}

/* ---- content column ---- */

.nhn-hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	/*
	 * Clears the site header, which is position:absolute and so overlays the
	 * hero rather than pushing it down.
	 *
	 * This has to be here and not inside .nhn-hero__copy. The copy is sticky
	 * with `top: header`, so without it the copy's flow box began at the very
	 * top of the hero while the copy itself rendered a header's-height lower —
	 * and the stage, which follows the flow box, started 60px above the
	 * buttons it was supposed to sit below.
	 */
	padding-top: var(--nhn-header-h);
}

/*
 * Sticky, but sized by its own content — no fixed height, no negative margin.
 *
 * A sticky element reserves its normal-flow space and does not push later
 * siblings once it pins, so the stage below scrolls up and past it without any
 * of that arithmetic. The overlap the hero needs comes free; all that is left
 * to decide is the gap.
 */
.nhn-hero__copy {
	position: sticky;
	top: var(--nhn-header-h);
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(36px, 6.5svh, 84px) var(--nhn-gutter) 0;
	text-align: center;
	will-change: opacity, transform;
}

.nhn-hero__copy-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	max-width: 900px;
}

/*
 * Hero copy — Figma node 13079:80263:
 *   H1 "large title"  — TWK Everett Book 450, 48px, letter-spacing -0.03em,
 *                       centered, ~780px column.
 *   Lede "large"      — TWK Everett Light 300, 36px, centered, ~580px column.
 *
 * Sizes here are the desktop target; a clamp() floor keeps them readable on
 * phones without hitting the very small end of viewport-relative units.
 */
.nhn-hero__title {
	margin: 0;
	max-width: 780px;
	font-family: "TWK Everett", sans-serif;
	/* +20% over the Figma 48px target → 58px cap; floor scaled to match. */
	font-size: clamp(41px, 4.3vw, 58px);
	font-weight: 450;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: var(--nhn-ink);
}

.nhn-hero__lede {
	margin: 0;
	max-width: 580px;
	font-family: "TWK Everett", sans-serif;
	/* -20% off the Figma 36px target → 29px cap; floor scaled to match. */
	font-size: clamp(18px, 2.1vw, 29px);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--nhn-ink);
	text-wrap: balance;
}

.nhn-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* ---- the product window ---- */

.nhn-hero__stage {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	padding: var(--nhn-hero-gap) var(--nhn-gutter) var(--nhn-hero-runway);
}

.nhn-hero__frame {
	position: relative;
	width: min(100%, 1180px);
	padding: 6px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.62);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	/* Five stacked shadows rather than one: a hairline to define the edge,
	   then increasing blurs so the window lifts off the gradient the way a
	   real window does, instead of sitting on a single grey smudge. */
	box-shadow:
		0 0 0 1px rgba(11, 13, 24, 0.06),
		0 1px 2px rgba(11, 13, 24, 0.024),
		0 3px 6px rgba(11, 13, 24, 0.03),
		0 8px 14px rgba(11, 13, 24, 0.035),
		0 16px 28px rgba(11, 13, 24, 0.04);
	transform-origin: center;
	will-change: transform;
}

.nhn-hero__screen {
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	/* The 1668x1080 source, held exactly, so nothing reflows when the file
	   swaps for the mobile encode. */
	aspect-ratio: 1668 / 1080;
}

.nhn-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Clips the black outside the source's own baked corner radius. */
	border-radius: 12px;
}

/* --- satellite clips --- */

/*
 * Anchored to the deck, not to the frame. The frame is what JS scales, so a
 * satellite parented to it would shrink in lockstep and never appear to emerge
 * — the reveal depends on the main window pulling back off them.
 */
.nhn-hero__deck {
	position: relative;
	width: min(100%, 1180px);
}

.nhn-hero__deck .nhn-hero__frame {
	width: 100%;
	/* Explicit stacking context that outranks the satellites, so the
	   master video always sits in front of any panels that overlap its
	   edges instead of being obscured by them. */
	position: relative;
	z-index: 2;
}

.nhn-sat {
	position: absolute;
	/*
	 * Default stacking is behind the master frame — panels peek from its
	 * edges without covering the video content. Individual clips can be
	 * lifted above with a `.nhn-sat--stack-above` modifier applied from the
	 * ACF Stacking field, giving editors per-clip control.
	 */
	z-index: 0;
	/*
	 * Per-clip size, set from the ACF Scale field as a fraction (1 = 100%).
	 * Applied to width rather than transform: the reveal animation below
	 * already owns `transform` and scaling there would be overwritten the
	 * moment a panel faded in. min-width scales with it too, or a clip set
	 * to 60% would still be pinned to 190px on a narrow desktop and quietly
	 * ignore the setting.
	 */
	--nhn-sat-scale: 1;
	width: calc(27% * var(--nhn-sat-scale));
	min-width: calc(190px * var(--nhn-sat-scale));
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 10px, 0) scale(0.97);
	transition:
		opacity 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s linear 0.38s;
	pointer-events: none;
	will-change: opacity, transform;
}

.nhn-sat.is-on {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0) scale(1);
	transition:
		opacity 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
		visibility 0s;
}

.nhn-sat__screen {
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(11, 13, 24, 0.07),
		0 2px 6px rgba(11, 13, 24, 0.05),
		0 12px 28px rgba(11, 13, 24, 0.1),
		0 24px 48px rgba(11, 13, 24, 0.07);
}

/*
 * A masked screen carries its shape from the SVG, so the wrapper's own
 * chrome — rectangular corners, white ground, box shadow — would show through
 * as a boxy halo behind a device-shaped clip. Stripped here; the mask does
 * the work.
 *
 * mask-* itself is set inline off the ACF field so each clip can carry its
 * own outline, but the sizing/positioning is uniform and belongs here.
 */
.nhn-sat__screen.is-masked {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
}

.nhn-sat__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.nhn-sat__screen.is-masked .nhn-sat__video {
	border-radius: 0;
}

.nhn-sat__label {
	position: absolute;
	top: -26px;
	left: 2px;
	padding: 3px 9px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 0 0 1px rgba(11, 13, 24, 0.06);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--nhn-ink-mid);
}

/* Overlapping the deck edges, so they read as sitting behind the main window
   rather than floating off in the margin. */
.nhn-sat--tl { top: 8%; left: -11%; }
.nhn-sat--tr { top: 8%; right: -11%; }
.nhn-sat--l  { top: 38%; left: -13%; }
.nhn-sat--r  { top: 38%; right: -13%; }
.nhn-sat--bl { bottom: 8%; left: -11%; }
.nhn-sat--br { bottom: 8%; right: -11%; }

/* Per-clip stacking. The master frame sits at z-index 2 (see
   .nhn-hero__deck .nhn-hero__frame), so "above" must clear that; "below"
   is the same as the base .nhn-sat rule but declared explicitly so the
   editor's intent is legible in the DOM. */
.nhn-sat--stack-below { z-index: 0; }
.nhn-sat--stack-above { z-index: 3; }

/* ======================================================== LOGO WALL ===== */

/*
 * A single centred strip, not the bordered grid Attio uses. Their cell grid
 * earns its keep across fifteen logos; with six it would read as a mostly
 * empty table, so the row is set as one line of marks with generous spacing.
 */
.nhn-logos {
	padding: 64px 0 68px;
	border-bottom: 1px solid var(--nhn-rule);
	background: var(--nhn-surface);
}

.nhn-logos__title {
	margin: 0 0 34px;
	text-align: center;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nhn-ink-soft);
}

.nhn-logos__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 56px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nhn-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Keeps a short mark from sitting tight against a long one, without
	   forcing equal columns the way a grid would. */
	min-height: 40px;
}

.nhn-logos__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 160px;
	max-height: 30px;
	/* Real logos arrive in whatever colour they arrive in; muting them keeps
	   one bright brand from dominating the row. */
	opacity: 0.62;
	filter: grayscale(1);
	transition: opacity 0.25s ease, filter 0.25s ease;
}

.nhn-logos__item:hover .nhn-logos__img {
	opacity: 1;
	filter: grayscale(0);
}

.nhn-logos__wordmark {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: #9a9ba6;
	transition: color 0.25s ease;
}

.nhn-logos__item:hover .nhn-logos__wordmark {
	color: var(--nhn-ink-mid);
}

/* ============================================ PLATFORM WALKTHROUGH ===== */

.nhn-walk {
	border-bottom: 1px solid var(--nhn-rule);
	background: #ffffff;
	padding: 0 20px;
}

/*
 * The frame is the 1400px column and it carries the vertical hairlines that
 * were previously scattered across .nhn-walk__body / .nhn-walk__steps —
 * pulling them onto the outer wrapper is what makes them run continuously
 * from the very top of the intro to the bottom of the last step, without a
 * break where the intro used to end.
 */
.nhn-walk__frame {
	max-width: 1400px;
	margin: 0 auto;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}

/*
 * The intro sits inside the frame but the body does not — see below. The
 * intro-wrap carries the horizontal padding the frame needs (50px per
 * Figma section-inner), so the intro can flow inside a comfortable column
 * while the body underneath spans edge-to-edge.
 */
.nhn-walk__intro-wrap {
	padding: 0 50px;
}

.nhn-walk__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	max-width: 1180px;
	padding: 100px 0 60px;
}

/*
 * Small gradient-border pill that opens the section — matches the same pill
 * used above the Partners / Integrations / Developers headers, but scoped
 * here so the walk block can be moved around without dragging shared rules.
 */
.nhn-walk__badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 4px 12px;
	border-radius: 12px;
	font-family: 'TWK Everett', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #000;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, #0693e3 0%, #9b51e0 100%) border-box;
	border: 1px solid transparent;
}

.nhn-walk__title {
	max-width: 680px;
	margin: 0;
	font-family: 'TWK Everett', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 450;
	font-size: 36px;
	line-height: 1.2;
	color: #000;
}

/* Second half of the title, per Figma: the "not a reseller program"
   continuation drops to a lighter weight and a mid-grey ink. */
.nhn-walk__title-soft {
	font-weight: 300;
	color: #656672;
}

/*
 * Two columns: the step list, then the steps. The list is sticky and the
 * steps are ordinary flow content — which is the whole trick. No scroll
 * arithmetic decides what is on screen; the browser does, and an observer
 * just reports which step won.
 */
.nhn-walk__body {
	display: grid;
	/* 380px per Figma "aside" frame — the previous 260px was crowding the
	   longer step labels (e.g. "AI Payroll Reconciliation") onto two lines
	   and left the aside/steps divider sitting too close to the copy. */
	grid-template-columns: 380px 1fr;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.nhn-walk__nav {
	position: sticky;
	top: calc(var(--nhn-header-h) + 28px);
	align-self: start;
	/* 50px left aligns the aside content with the Figma section-inner
	   50px H padding; the body itself now runs edge-to-edge in the frame
	   (so the top rule and step media reach both hairlines), and this
	   padding restores the visual breathing room on the left. 60px top
	   matches Figma tabs.vertical.y=60. */
	padding: 60px 32px 60px 50px;
}

.nhn-walk__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Vertical tab list per Figma node 13079:80298. Each row is 4/12/4/36
 * padding — the 36px on the left leaves room for the 2px black indicator
 * rail on the selected row. Idle rows keep the same padding (with a
 * transparent border) so text position does not shift between states.
 */
.nhn-walk__tab {
	display: block;
	padding: 4px 12px 4px 36px;
	border-left: 2px solid transparent;
	font-family: 'TWK Everett', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	font-weight: 450;
	line-height: 1.2;
	text-decoration: none;
	color: #d8d7de;
	transition: color 0.32s ease, border-color 0.32s ease;
}

.nhn-walk__tab:hover {
	color: var(--nhn-ink-mid);
}

/*
 * `aria-current="location"` rather than a class: the current step is a fact
 * about the document, so the attribute that already means that carries it
 * and screen readers get it for free.
 */
.nhn-walk__tab[aria-current='location'] {
	color: #000;
	border-left-color: #000;
}

.nhn-walk__steps {
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	min-width: 0;
}

.nhn-step {
	border-bottom: 1px solid var(--nhn-rule);
	/* Anchor jumps land under the sticky site header rather than behind it. */
	scroll-margin-top: calc(var(--nhn-header-h) + 40px);
}

.nhn-step:last-child {
	border-bottom: 0;
}

/*
 * Header block — per Figma node 13079:80307:
 *   padding: 100/36/36 (breathing room above the step, tight below into the
 *           illustration)
 *   text: 580px column, inline sentence in two type sizes
 *
 * The lead ("Automated EOR Lifecycle.") is deliberately SMALLER and darker
 * than the body — it reads as a kicker (18px Book #191A23) that names the
 * step, followed by a larger, lighter descriptor (24px Light 300 #656672).
 * Both share a line so the whole thing scans as one sentence.
 *
 * The top border on the first step is redundant with .nhn-walk__body's
 * border-top, so we suppress it there — no double rule under the intro.
 */
.nhn-step__head {
	padding: 100px 36px 36px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	background: #ffffff;
}

.nhn-step:first-child .nhn-step__head {
	border-top: 0;
}

.nhn-step__title {
	max-width: 580px;
	margin: 0;
	font-family: 'TWK Everett', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.36;
	letter-spacing: -0.005em;
	color: #656672;
}

/* Lead — same size as the continuation; only weight and colour differ so
   the whole line reads as one sentence, not a kicker plus a body. */
.nhn-step__title strong,
.nhn-step__title b {
	font-weight: 450;
	color: #191a23;
}

.nhn-step__body {
	font-weight: 300;
	color: inherit;
}

/*
 * Media band — full-bleed illustration container.
 *
 * No padding, no min-height, no framing gradient: the image itself carries
 * the visual. Background matches the paper tone so the image (which is
 * typically drawn on #FCFAF7 too) blends into the section rather than
 * sitting on a coloured band.
 */
.nhn-step__media {
	background: var(--nhn-paper, #fcfaf7);
}

/*
 * Still image — no forced aspect, no width cap. Fills the container and
 * uses its own intrinsic dimensions, so a 1020×574 illustration renders at
 * true size without being letterboxed inside a 900:582 box.
 */
.nhn-step__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0 auto;
}

/*
 * Video — same intent, but a <video> with no loaded media has no intrinsic
 * size, so the aspect-ratio hint is retained to reserve the band's height
 * before the file lands. object-fit:cover so the video fills the box; the
 * MP4 is expected to be authored at the ratio hinted below.
 */
.nhn-step__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 900 / 582;
	object-fit: cover;
}

/* Portrait clips: tower with their own width, capped by height. */
.nhn-step--tall .nhn-step__video {
	width: auto;
	max-width: 100%;
	height: 560px;
	aspect-ratio: 760 / 1014;
	margin: 0 auto;
}
.nhn-step--tall .nhn-step__image {
	max-height: 720px;
	object-fit: contain;
}

/* =================================================== GLOBAL PARTNERS ===== */

/*
 * "A global network of partners" — Figma node 13172:66576.
 *
 * Layout, top-down:
 *   1. Section — sits inside its own hairline-ruled column (left+right border
 *      only) so it reads as a discrete band within the site chrome, matching
 *      the design's `strokeWeight: "0px 1px"` frame.
 *   2. Header — centered stack: gradient-outlined badge (12px pill),
 *      36px H2, lighter 36px subtitle, ghost CTA. 780px max column so the
 *      subtitle wraps at a comfortable measure.
 *   3. Graphic band — a fixed 1400×680 art crop the illustration is
 *      composed against. `object-fit: contain` keeps proportions on
 *      narrower viewports; a min-height reserves the space so the CLS
 *      when the PNG lands is bounded.
 */
.nhn-partners {
	padding: clamp(96px, 12vw, 192px) 0 0;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.nhn-partners__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	padding: 0 50px;
	max-width: 1400px;
	margin: 0 auto;
}

.nhn-partners__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 1180px;
	text-align: center;
}

/*
 * Gradient border pill. The gradient is a border, not a background, so it
 * renders with the `border-image` trick applied to a transparent pill.
 */
.nhn-partners__badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 4px 12px;
	border-radius: 12px;
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgba(155, 81, 224, 1) 100%) border-box;
	border: 1px solid transparent;
	font-family: "TWK Everett", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #000;
}

.nhn-partners__title {
	margin: 0;
	max-width: 780px;
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(28px, 3.2vw, 36px);
	font-weight: 450;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #000;
}

.nhn-partners__lede {
	margin: 0;
	max-width: 780px;
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(20px, 2.6vw, 36px);
	font-weight: 300;
	line-height: 1.28;
	color: var(--nhn-ink-mid);
}

.nhn-partners__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding-top: 16px;
}

/*
 * Illustration constrained to the same 1400px inner column as the copy
 * above. CSS mask feathers the left and right edges to transparent so the
 * illustration reads as blending into the page rather than sitting on a
 * hard rectangular crop.
 *
 * The mask stops (0% → 8% → 92% → 100%) leave the middle 84% at full
 * opacity and fade the outer 8% on each side.
 */
.nhn-partners__graphic {
	margin: 0;
	width: 100%;
	aspect-ratio: 1400 / 680;
	overflow: hidden;

	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	        mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

.nhn-partners__graphic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 900px) {
	.nhn-partners {
		padding-top: clamp(72px, 14vw, 120px);
		border-left: 0;
		border-right: 0;
	}
	.nhn-partners__inner {
		gap: 40px;
		padding: 0 24px;
	}
	.nhn-partners__graphic {
		aspect-ratio: auto;
	}
	.nhn-partners__graphic img {
		height: auto;
		object-fit: initial;
	}
}

/* ================================================== WHITE-LABEL LIFECYCLE ===== */

/*
 * Dark hero + 5-card steps — Figma nodes 13177:69989 and 13094:63153.
 *
 * Single dark surface `#00131B` shared by both halves. Hero band centers a
 * 60px display title over an absolutely-positioned illustration (bg.png).
 * Steps row below is a five-column grid with hairline white dividers between
 * cards; wraps at ≤ 900px so each card gets a comfortable measure.
 *
 * `--nhn-wl-border` centralises the semi-transparent white stroke colour so
 * the hero bounds and card dividers stay in agreement.
 */
.nhn-wl {
	--nhn-wl-ink: #ffffff;
	--nhn-wl-mid: rgba(255, 255, 255, 0.7);
	--nhn-wl-border: rgba(255, 255, 255, 0.2);
	background: #00131b;
	color: var(--nhn-wl-ink);
	border-top: 1px solid var(--nhn-wl-border);
	/* Same outer breathing room as .nhn-sec so the two dark sections align
	   pixel-perfect on the left and right hairlines. */
	padding: 0 20px;
}

/*
 * Centered 1400px inner column with the left and right hairlines. Hero band
 * and steps row live inside it, so the vertical rules run continuously from
 * the top of White-label lifecycle down through Security as one frame.
 */
.nhn-wl__inner {
	max-width: 1400px;
	margin: 0 auto;
	border-left: 1px solid var(--nhn-wl-border);
	border-right: 1px solid var(--nhn-wl-border);
}

.nhn-wl__hero {
	position: relative;
	overflow: hidden;
	min-height: 680px;
	padding: clamp(96px, 12vw, 192px) 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Full-bleed illustration behind the copy. Positioned absolutely so it can
   overflow to the edges of the section without pushing the copy around. */
.nhn-wl__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.9;
	pointer-events: none;
	user-select: none;
}

.nhn-wl__hero-inner {
	position: relative; /* Stack above the bg image. */
	z-index: 1;
	max-width: 1180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

/* Gradient-outlined pill on dark, white label text. Reuses the same
   padding-box/border-box gradient technique as the light-mode badge. */
.nhn-wl__badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 4px 12px;
	border-radius: 12px;
	background:
		linear-gradient(#00131b, #00131b) padding-box,
		linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgba(155, 81, 224, 1) 100%) border-box;
	border: 1px solid transparent;
	font-family: "DM Mono", "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.nhn-wl__title {
	margin: 0;
	max-width: 780px;
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(34px, 5.2vw, 60px);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--nhn-wl-ink);
	text-wrap: balance;
}

.nhn-wl__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding-top: 16px;
}

/* Dark-mode overrides for the shared button styles. Ghost inverts the ink;
   solid becomes white with black text so it stands out on `#00131B`. */
.nhn-btn--on-dark.nhn-btn--ghost {
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
	background: transparent;
}
.nhn-btn--on-dark.nhn-btn--ghost:hover {
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.06);
}
.nhn-btn--on-dark.nhn-btn--solid {
	background: #ffffff;
	border-color: #ffffff;
	color: #000;
}
.nhn-btn--on-dark.nhn-btn--solid:hover {
	background: #e6e6e6;
	border-color: #e6e6e6;
}

/*
 * Five-card row: equal columns with left dividers on every card except the
 * first. Grid keeps card widths equal even when text lengths differ. Cards
 * flip to a two-column layout at tablet width and stack on phones so no
 * card is ever less than ~200px wide.
 */
.nhn-wl__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border-top: 1px solid var(--nhn-wl-border);
}

.nhn-wl-step {
	padding: 36px 24px;
	display: flex;
	flex-direction: column;
	gap: 100px;
	border-left: 1px solid var(--nhn-wl-border);
}
.nhn-wl-step:first-child {
	border-left: 0;
}

.nhn-wl-step__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nhn-wl-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.6);
	font-family: "DM Mono", "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	line-height: 1;
}

.nhn-wl-step__eyebrow {
	font-family: "DM Mono", "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.nhn-wl-step__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nhn-wl-step__title {
	margin: 0;
	font-family: "DM Sans", "TWK Everett", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
}

.nhn-wl-step__text {
	margin: 0;
	font-family: "TWK Everett", sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 1080px) {
	.nhn-wl__steps {
		grid-template-columns: repeat(3, 1fr);
	}
	.nhn-wl-step:nth-child(3n + 1) {
		border-left: 0;
	}
	.nhn-wl-step {
		gap: 60px;
	}
}

@media (max-width: 720px) {
	.nhn-wl {
		padding: 0 12px;
	}
	.nhn-wl__hero {
		min-height: 0;
		padding: 96px 24px;
	}
	.nhn-wl__steps {
		grid-template-columns: 1fr;
	}
	.nhn-wl-step {
		border-left: 0;
		border-top: 1px solid var(--nhn-wl-border);
		gap: 24px;
		padding: 28px 20px;
	}
	.nhn-wl-step:first-child {
		border-top: 0;
	}
}

/* ============================================================= SECURITY ===== */

/*
 * Two-column dark section (Figma node 13087:95468) — text card on the left,
 * graphic card on the right, both 700×680, joined by a hairline vertical
 * divider. Sits on the same `#00131B` band as White-label lifecycle above,
 * so the two dark chapters flow together with just a top hairline to
 * separate them.
 */
.nhn-sec {
	background: #00131b;
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding: 0 20px;
}

.nhn-sec__inner {
	display: flex;
	max-width: 1400px;
	margin: 0 auto;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.nhn-sec__card {
	flex: 1 1 0;
	min-height: 680px;
	padding: 36px;
	color: #fff;
	margin: 0;
}

/* Text card — badge/title/CTA at top, body copy pinned to the bottom. */
.nhn-sec__card--text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}

/* Graphic card — bordered off from the text side, hosts the illustration
   with no padding so it fills the panel edge-to-edge. */
.nhn-sec__card--graphic {
	padding: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.nhn-sec__card--graphic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.nhn-sec__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

/* Gradient-outlined pill. Padding-box paints the dark card behind the text
   so the pill reads as filled; border-box paints the gradient stroke. */
.nhn-sec__badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 4px 12px;
	border-radius: 12px;
	background:
		linear-gradient(#00131b, #00131b) padding-box,
		linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgba(155, 81, 224, 1) 100%) border-box;
	border: 1px solid transparent;
	font-family: "DM Mono", "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.nhn-sec__title {
	margin: 0;
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 300;
	line-height: 1.3;
	color: #fff;
	letter-spacing: -0.005em;
	max-width: 24ch;
}

.nhn-sec__title strong {
	display: inline;
	font-weight: 450;
	color: #fff;
}

.nhn-sec__title-light {
	display: inline;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.75);
}

.nhn-sec__ctas {
	padding-top: 8px;
}

.nhn-sec__body {
	margin: 0;
	max-width: 44ch;
	font-family: "TWK Everett", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: #fff;
}

@media (max-width: 900px) {
	.nhn-sec {
		padding: 0 12px;
	}
	.nhn-sec__inner {
		flex-direction: column;
	}
	.nhn-sec__card {
		/* Reset the desktop `flex: 1 1 0` — with basis 0 in a column
		   flexbox whose parent has no defined height, each card collapses
		   to just its padding and every child spills out below. That was
		   the "only-badge-visible" mobile bug. `flex: none` = size on
		   content, which is what stacked cards actually need. */
		flex: none;
		width: 100%;
		min-height: 0;
		padding: 32px 24px;
	}
	.nhn-sec__card--text {
		/* Space-between only makes sense inside a fixed-height card; once
		   the card sizes on its content, it just introduces a gap between
		   the head and the body that varies with content — flow start
		   instead. */
		justify-content: flex-start;
		gap: 20px;
	}
	.nhn-sec__card--graphic {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		aspect-ratio: 700 / 500;
		padding: 0;
	}
}

/* =========================================================== REBRANDING ===== */

/*
 * Reuses .nhn-sec's two-column skeleton, then swaps the right-hand card's
 * static graphic for a stack of three cascaded browser windows (Figma node
 * 13105:62983). Each window is chrome + image and the three fan out from
 * top-LEFT (back) down to bottom-RIGHT (front), overlapping like a
 * shuffled deck.
 *
 * Rotation is a pure CSS animation. Every card runs the same 12-second
 * `nhn-rb-shuffle` keyframe, but each card starts at a different point in
 * the cycle (via negative `animation-delay`), so at any moment one card is
 * at the front slot, one at the middle, one at the back — and they cycle
 * forward every 4 seconds. No JS timer, no IntersectionObserver dance, no
 * data-attribute swap. The browser handles pausing behind offscreen /
 * hidden tabs on its own.
 */
.nhn-rb__stack {
	position: relative;
	/* No `overflow: hidden` here — the parent .nhn-sec__card--graphic
	   already clips at the panel edge, and clipping the stack itself
	   would eat the directional shadow each card casts down-and-right. */
	background: #00121b;
	min-height: 680px;
}

.nhn-rb__frame {
	position: absolute;
	margin: 0;
	width: 78%;
	aspect-ratio: 837 / 542;
	overflow: hidden;
	border-radius: 12px;
	background: #f4f4f5;
	border: 1px solid rgba(0, 0, 0, 0.15);
	/*
	 * Directional shadow — heavy right + down offset so each layer casts
	 * a visible dark halo off its right edge on the dark section
	 * background. Two stacked shadows: a tighter one for edge definition,
	 * a larger diffused one for the depth halo.
	 */
	box-shadow:
		20px 14px 24px rgba(0, 0, 0, 0.55),
		48px 40px 80px rgba(0, 0, 0, 0.65);
	animation: nhn-rb-shuffle 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Staggered starts so the three cards occupy three different slots at t=0. */
.nhn-rb__frame:nth-child(1) { animation-delay: 0s; }
.nhn-rb__frame:nth-child(2) { animation-delay: -4s; }
.nhn-rb__frame:nth-child(3) { animation-delay: -8s; }

/*
 * Slot 0 = front (bottom-right of stack, top of z-order)
 * Slot 1 = middle
 * Slot 2 = back  (top-left of stack, bottom of z-order)
 *
 * The 32%–34% window fades the front card out and teleports it to the
 * back slot; the 34%–38% window fades it back in behind the others.
 */
@keyframes nhn-rb-shuffle {
	  0%  { top: 24%; left: 12%; z-index: 3; opacity: 1; }
	 28%  { top: 24%; left: 12%; z-index: 3; opacity: 1; }
	 32%  { top: 24%; left: 12%; z-index: 3; opacity: 0; }
	 34%  { top: 18%; left: 6%;  z-index: 1; opacity: 0; }
	 38%  { top: 18%; left: 6%;  z-index: 1; opacity: 1; }
	 62%  { top: 18%; left: 6%;  z-index: 1; opacity: 1; }
	 66%  { top: 21%; left: 9%;  z-index: 2; opacity: 1; }
	 95%  { top: 21%; left: 9%;  z-index: 2; opacity: 1; }
	100%  { top: 24%; left: 12%; z-index: 3; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.nhn-rb__frame { animation: none; }
	.nhn-rb__frame:nth-child(1) { top: 24%; left: 12%; z-index: 3; }
	.nhn-rb__frame:nth-child(2) { top: 21%; left: 9%;  z-index: 2; }
	.nhn-rb__frame:nth-child(3) { top: 18%; left: 6%;  z-index: 1; }
}

/* Traffic-light dots — red / amber / green matching the Figma palette. */
.nhn-rb__chrome {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 24px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	background: rgba(255, 255, 255, 0.92);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	z-index: 2;
}
.nhn-rb__chrome i {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ed2f2c;
}
.nhn-rb__chrome i:nth-child(2) { background: #ffbe1a; }
.nhn-rb__chrome i:nth-child(3) { background: #51c76c; }

.nhn-rb__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	padding-top: 24px;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.nhn-rb__stack {
		min-height: 0;
		aspect-ratio: 700 / 500;
	}
	.nhn-rb__frame {
		width: 82%;
	}
	@keyframes nhn-rb-shuffle-sm {
		  0%  { top: 28%; left: 12%; z-index: 3; opacity: 1; }
		 28%  { top: 28%; left: 12%; z-index: 3; opacity: 1; }
		 32%  { top: 28%; left: 12%; z-index: 3; opacity: 0; }
		 34%  { top: 22%; left: 6%;  z-index: 1; opacity: 0; }
		 38%  { top: 22%; left: 6%;  z-index: 1; opacity: 1; }
		 62%  { top: 22%; left: 6%;  z-index: 1; opacity: 1; }
		 66%  { top: 25%; left: 9%;  z-index: 2; opacity: 1; }
		 95%  { top: 25%; left: 9%;  z-index: 2; opacity: 1; }
		100%  { top: 28%; left: 12%; z-index: 3; opacity: 1; }
	}
	.nhn-rb__frame {
		animation-name: nhn-rb-shuffle-sm;
	}
}

/* ========================================================= INTEGRATIONS ===== */

/*
 * Dark section under Rebranding — Figma node 13086:94506.
 *
 * Same 1400px inner column + left/right hairlines that White-label and
 * Security use, so all four dark chapters share one continuous frame.
 * Big centered 60px "large-display" title, two CTAs (ghost + solid), and
 * a horizontal row of partner logos below. The logo row auto-wraps and
 * every mark is greyed to sit gracefully on the dark ink.
 */
.nhn-int {
	background: #00131b;
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding: 0 20px;
}

.nhn-int__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(96px, 12vw, 192px) 50px 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.nhn-int__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 1180px;
	text-align: center;
}

.nhn-int__badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 4px 12px;
	border-radius: 12px;
	background:
		linear-gradient(#00131b, #00131b) padding-box,
		linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgba(155, 81, 224, 1) 100%) border-box;
	border: 1px solid transparent;
	font-family: "DM Mono", "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.nhn-int__title {
	margin: 0;
	max-width: 780px;
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(34px, 5.2vw, 60px);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: #fff;
	text-wrap: balance;
}

.nhn-int__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding-top: 16px;
}

/*
 * Logo strip — a single 96px band with the horizontal edge-fade Figma
 * calls out on node 13087:96302 (transparent → solid → transparent, 20%
 * of the strip on each side). The mask is applied to the container so any
 * number of logos benefit without per-mark tricks; wraps to a second row
 * only if it truly cannot fit, which is unusual with this many marks.
 */
.nhn-int__logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px 56px;
	width: 100%;

	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 20%,
		#000 80%,
		transparent 100%
	);
	        mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 20%,
		#000 80%,
		transparent 100%
	);
}

.nhn-int__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
}

.nhn-int__logo-img,
.nhn-int__logo-link {
	display: block;
	max-height: 56px;
	max-width: 180px;
	width: auto;
	height: auto;
}

.nhn-int__logo-img {
	object-fit: contain;
	transition: opacity 200ms ease;
	opacity: 0.9;
}

.nhn-int__logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nhn-int__logo:hover .nhn-int__logo-img,
.nhn-int__logo-link:hover .nhn-int__logo-img {
	opacity: 1;
}

@media (max-width: 900px) {
	.nhn-int {
		padding: 0 12px;
	}
	.nhn-int__inner {
		padding: clamp(72px, 12vw, 128px) 24px 48px;
		gap: 40px;
	}
	.nhn-int__logos {
		gap: 24px 36px;
	}
	.nhn-int__logo,
	.nhn-int__logo-img,
	.nhn-int__logo-link {
		min-height: 40px;
		max-height: 40px;
		max-width: 140px;
	}
}

/* =========================================================== DEVELOPERS ===== */

/*
 * Two side-by-side dark cards under Integrations. Design skeleton comes
 * from Figma node 13180:70065 — same dark-on-dark card treatment (white
 * 60% hairline border, 12px radius, 36px padding) but rendered twice so
 * SDK and API each get their own container.
 *
 * Grid falls back to a single column at ≤900px so cards stay readable on
 * phones instead of squeezing to one column of unreadable width.
 */
.nhn-dev {
	background: #00131b;
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding: 0 20px;
}

.nhn-dev__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(60px, 8vw, 120px) 50px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.nhn-dev__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.nhn-dev__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 36px;
	background: #00131b;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 12px;
}

.nhn-dev__eyebrow {
	font-family: "DM Mono", "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.nhn-dev__title {
	margin: 0;
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: #fff;
}

.nhn-dev__ctas {
	padding-top: 8px;
}

@media (max-width: 900px) {
	.nhn-dev {
		padding: 0 12px;
	}
	.nhn-dev__inner {
		padding: clamp(48px, 10vw, 80px) 24px;
	}
	.nhn-dev__grid {
		grid-template-columns: 1fr;
	}
	.nhn-dev__card {
		padding: 28px 24px;
	}
}

/* ========================================================= GROWTH DEMO ===== */

/*
 * White section under Developers. Hero row is a two-column layout — copy
 * on the left (badge, mixed-weight title, 2×2 stats grid with gradient
 * left-borders), illustration on the right — followed by a row of 5
 * feature cards below with hairline dividers. Design: Figma nodes
 * 13152:103627 (hero) + 13177:69936 (cards).
 */
.nhn-growth {
	background: #ffffff;
	color: #000;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	padding: 0 20px;
}

.nhn-growth__inner {
	max-width: 1400px;
	margin: 0 auto;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}

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

/*
 * Figma layout — the growth illustration is a full-width background
 * spanning the entire section (1351×760), and the copy sits over it on
 * the left in a 580px column. Reproduced with an absolute-positioned
 * figure so the image can dominate the whole width while the content
 * keeps its own left-anchored column.
 */
.nhn-growth__hero {
	position: relative;
	padding: 100px 50px;
	min-height: 760px;
	display: flex;
	align-items: center;
}

.nhn-growth__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 36px;
	width: 100%;
	max-width: 580px;
}

.nhn-growth__badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 4px 12px;
	border-radius: 12px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgba(155, 81, 224, 1) 100%) border-box;
	border: 1px solid transparent;
	font-family: "TWK Everett", sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #000;
}

.nhn-growth__title {
	margin: 0;
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 300;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: #000;
}

.nhn-growth__title-strong {
	display: block;
	font-weight: 300;
	color: #000;
}

.nhn-growth__title-soft {
	display: block;
	color: rgba(0, 0, 0, 0.6);
}

/* 2×2 stats grid with a 4px gradient left-border and 16px horizontal padding
   per Figma. Label is DM Mono uppercase, value is Everett Light 48px. */
.nhn-growth__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.nhn-growth__stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 4px 16px;
	border-left: 4px solid transparent;
	border-image: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgba(155, 81, 224, 1) 100%) 1;
}

.nhn-growth__stat-label {
	font-family: "DM Mono", "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #000;
}

.nhn-growth__stat-value {
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(36px, 4.4vw, 48px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: #000;
}

/*
 * Small explainer under the value — the "vs $300K reselling the same book"
 * caption the reference shot uses. Deliberately quiet: mid-grey, 15px,
 * light weight, wraps naturally so two-line notes still line up cleanly.
 * Extra top gap so it reads as its own note rather than a subtitle of the
 * value.
 */
.nhn-growth__stat-note {
	margin-top: 6px;
	font-family: "TWK Everett", sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
	color: #656672;
	max-width: 32ch;
}

/*
 * Footnote under the 2×2 stat grid: the modelling assumptions the numbers
 * rest on. Quieter than the per-stat note so it reads as a disclaimer
 * scoped to the whole grid rather than to any one stat.
 */
.nhn-growth__disclaimer {
	margin: 32px 0 0;
	max-width: 68ch;
	font-family: "TWK Everett", sans-serif;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.5;
	color: #8a8b96;
}

/*
 * Full-bleed illustration behind the copy. Positioned absolutely so it
 * can span the whole hero height without pushing the copy around; the
 * curve sits on the right, aligned to the bottom so the exponential
 * ramp reads correctly across viewports.
 */
.nhn-growth__graphic {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
	pointer-events: none;
}

.nhn-growth__graphic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right bottom;
}

/* ---- Feature-card row below ---------------------------------------- */

.nhn-growth__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.nhn-growth__card {
	display: flex;
	flex-direction: column;
	gap: 100px;
	padding: 36px 24px;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.nhn-growth__card:first-child {
	border-left: 0;
}

.nhn-growth__card-title {
	margin: 0;
	font-family: "DM Sans", "TWK Everett", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: #000;
}

.nhn-growth__card-body {
	margin: 0;
	font-family: "TWK Everett", sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: #000;
}

/* ---- Responsive ---------------------------------------------------- */

@media (max-width: 1080px) {
	.nhn-growth__cards {
		grid-template-columns: repeat(3, 1fr);
	}
	.nhn-growth__card:nth-child(3n + 1) {
		border-left: 0;
	}
	.nhn-growth__card {
		gap: 60px;
	}
}

@media (max-width: 900px) {
	.nhn-growth {
		padding: 0 12px;
	}
	.nhn-growth__hero {
		display: block;
		min-height: 0;
		padding: 64px 24px 32px;
	}
	.nhn-growth__copy {
		max-width: 100%;
		gap: 28px;
	}
	.nhn-growth__stats {
		gap: 20px;
	}
	.nhn-growth__graphic {
		position: static;
		margin-top: 32px;
	}
	.nhn-growth__graphic img {
		height: auto;
		aspect-ratio: 1351 / 620;
		object-position: center;
	}
	.nhn-growth__cards {
		grid-template-columns: 1fr;
	}
	.nhn-growth__card {
		border-left: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.2);
		gap: 24px;
		padding: 28px 20px;
	}
	.nhn-growth__card:first-child {
		border-top: 0;
	}
}

/*
 * Phone breakpoint — 2×2 growth stats collapses to a single column so the
 * labels aren't force-wrapped across three lines each and the values have
 * room to sit at their intended size. Disclaimer gets overflow-wrap
 * because "$500/worker/mo" is one uncut token that would otherwise push
 * out past the section's right edge.
 */
@media (max-width: 640px) {
	.nhn-growth__stats {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.nhn-growth__stat-label {
		font-size: 11px;
	}
	.nhn-growth__stat-value {
		font-size: 40px;
	}
	.nhn-growth__disclaimer {
		max-width: none;
		overflow-wrap: anywhere;
	}
}

/* ========================================================== BLOCKS ===== */

.nhn-block {
	padding: 104px 0;
	border-bottom: 1px solid var(--nhn-rule);
}

.nhn-block--alt {
	background: var(--nhn-surface-2);
}

.nhn-block__head {
	max-width: 820px;
	margin-bottom: 56px;
}

.nhn-tag {
	display: inline-block;
	margin-bottom: 20px;
	padding: 3px 10px;
	border-radius: 6px;
	background: rgba(81, 114, 225, 0.1);
	font-size: 13px;
	font-weight: 500;
	color: var(--nhn-blue);
}

.nhn-block__title {
	margin: 0;
	font-size: clamp(28px, 3.1vw, 42px);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

/* The lede is inside the h2 so the two read as one wrapped statement, the way
   Attio sets them — dark sentence, grey continuation. */
.nhn-block__lede {
	display: block;
	margin-top: 6px;
	font-weight: 300;
	color: var(--nhn-ink-mid);
}

.nhn-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--nhn-rule);
	border: 1px solid var(--nhn-rule);
	border-radius: 14px;
	overflow: hidden;
}

.nhn-card {
	padding: 32px 28px 36px;
	background: var(--nhn-surface);
}

.nhn-block--alt .nhn-card {
	background: var(--nhn-surface);
}

.nhn-card__title {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.nhn-card__body {
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--nhn-ink-mid);
}

/* ===================================================== TESTIMONIAL ===== */

/*
 * Full-bleed light band with an optional soft background illustration
 * (Figma node 13176:69401 — bg--quote-svg at 1400×787). Same 1400px
 * inner column + left/right hairlines as the other framed sections; the
 * quote and its byline float centred over the background image.
 */
.nhn-quote {
	position: relative;
	background: #fbfaf7;
	color: #000;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	padding: 0 20px;
	overflow: hidden;
}

.nhn-quote__inner {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(120px, 14vw, 192px) 50px;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}

/* Full-viewport background — anchored to the section, not the inner
   column, so it stretches edge-to-edge on wide monitors instead of being
   clipped to the 1400px frame. */
.nhn-quote__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.nhn-quote__fig {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.nhn-quote__text {
	margin: 0 0 28px;
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 300;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: #000;
	text-wrap: balance;
}

.nhn-quote__by {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-family: "TWK Everett", sans-serif;
	font-size: 14px;
	color: #000;
}

.nhn-quote__name {
	font-weight: 500;
}

.nhn-quote__role {
	color: rgba(0, 0, 0, 0.55);
}

/* ========================================================== STATS ====== */

.nhn-stats {
	padding: 104px 0;
	border-bottom: 1px solid var(--nhn-rule);
	background: var(--nhn-surface-2);
}

.nhn-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--nhn-rule);
	border: 1px solid var(--nhn-rule);
	border-radius: 14px;
	overflow: hidden;
}

.nhn-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 36px 28px;
	background: var(--nhn-surface);
}

.nhn-stat__figure {
	font-size: clamp(32px, 3.4vw, 44px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.025em;
}

.nhn-stat__label {
	font-size: 14px;
	font-weight: 300;
	color: var(--nhn-ink-mid);
}

/* ============================================================= CTA ===== */

/*
 * Closing CTA — Figma node 13189:71068. Warm cream `#F5F1ED` band with an
 * optional hero-style background image behind the copy. Same 1400px inner
 * column + left/right hairlines as the other framed sections. Two CTAs:
 * primary solid (with right-arrow icon) + ghost secondary.
 */
.nhn-cta {
	position: relative;
	background: #f5f1ed;
	color: #000;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	padding: 0 20px;
	overflow: hidden;
}

.nhn-cta__inner {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(96px, 12vw, 192px) 20px;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}

/* Full-viewport background — anchored to the section, not the inner
   column, so it stretches edge-to-edge on wide monitors instead of being
   clipped to the 1400px frame. */
.nhn-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.9;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.nhn-cta__panel {
	position: relative; /* Sit above the bg image. */
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.nhn-cta__title {
	margin: 0;
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 450;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: #000;
	text-wrap: balance;
}

.nhn-cta__body {
	margin: 0;
	max-width: 640px;
	font-family: "TWK Everett", sans-serif;
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 300;
	line-height: 1.35;
	color: #191a23;
	text-wrap: balance;
}

.nhn-cta__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding-top: 16px;
}

/* Right-arrow icon inside the primary CTA. Shares baseline with the label. */
.nhn-btn--icon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.nhn-btn__icon {
	display: block;
	width: 16px;
	height: 16px;
	transition: transform 200ms ease;
}
.nhn-btn--icon:hover .nhn-btn__icon {
	transform: translateX(3px);
}

/* ======================================================= REVEALS ======= */

/*
 * Gated on `.nhn-js`, set by the inline script in the template before any of
 * this content is parsed. Nothing is hidden unless something is present to
 * un-hide it, and that script drops the gate on a timer if the bundle never
 * arrives — so a JS failure costs the animation, not the content.
 *
 * Note this is ours, not Attio's — attio.com ships its section copy fully
 * visible and gets all its motion from inside the product mockups. Delete
 * this block and the `data-nhn-reveal` attributes to go back to that.
 */
.nhn-js [data-nhn-reveal] {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition:
		opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
	/* Items in a group step in one after another. The index comes from the
	   template so the delay is per-item rather than per-container. */
	transition-delay: calc(var(--nhn-reveal-i, 0) * 70ms);
	will-change: opacity, transform;
}

.nhn-js [data-nhn-reveal].is-in {
	opacity: 1;
	transform: none;
	/* Dropped once the item has arrived: leaving it set keeps a layer
	   promoted on every revealed element for the life of the page. */
	will-change: auto;
}

/* ========================================================= ATOMS ======= */

.nhn-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 8px 6px 14px;
	border: 1px solid rgba(25, 26, 35, 0.1);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 13px;
	font-weight: 400;
	color: var(--nhn-ink);
	text-decoration: none;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.nhn-pill:hover {
	border-color: rgba(25, 26, 35, 0.22);
	background: #fff;
}

.nhn-pill__arrow {
	font-size: 15px;
	line-height: 1;
	color: var(--nhn-ink-soft);
}

.nhn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.nhn-btn--solid {
	background: var(--nhn-ink);
	color: #fff;
}

.nhn-btn--solid:hover {
	background: #000;
	color: #fff;
}

.nhn-btn--ghost {
	border-color: rgba(25, 26, 35, 0.14);
	background: rgba(255, 255, 255, 0.78);
	color: var(--nhn-ink);
}

.nhn-btn--ghost:hover {
	border-color: rgba(25, 26, 35, 0.28);
	background: #fff;
}

.nhn-btn--lg {
	padding: 14px 26px;
	font-size: 16px;
}

/* ==================================================== RESPONSIVE ======= */

@media (max-width: 1024px) {
	.nhn-cards,
	.nhn-stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.nhn-logos__row {
		gap: 18px 40px;
	}

	/*
	 * Below the two-column breakpoint the list stops being a sidebar and
	 * becomes a rail pinned under the site header — still the same anchors,
	 * still marked with aria-current, just laid out along instead of down.
	 */
	.nhn-walk__body {
		display: block;
	}

	.nhn-walk__nav {
		position: sticky;
		top: var(--nhn-header-h);
		z-index: 5;
		/* Sit inside the frame's vertical hairlines instead of breaking
		   out sideways (the previous `margin: 0 -gutter` pushed the tab
		   rail past the left hairline and short of the right, cutting
		   the frame visually). No horizontal padding on the container
		   itself — the tabs carry their own 14/18 padding. */
		margin: 0;
		padding: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
		/* Solid white to match the (now-white) walk section — the previous
		   grey rgba tint made the pinned rail read as an unrelated overlay
		   floating over the step content instead of a section chrome. */
		background: #ffffff;
		box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.18);
	}

	.nhn-walk__list {
		flex-direction: row;
		gap: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.nhn-walk__list::-webkit-scrollbar {
		display: none;
	}

	.nhn-walk__list li {
		flex: 0 0 auto;
	}

	.nhn-walk__tab {
		padding: 14px 18px;
		border-left: 0;
		border-bottom: 2px solid transparent;
		font-size: 15px;
		white-space: nowrap;
	}

	.nhn-walk__tab[aria-current='location'] {
		border-bottom-color: #000;
	}

	.nhn-walk__steps {
		border-left: 0;
	}

	.nhn-step__head {
		/* Restore horizontal breathing room on mobile — the desktop 36px H
		   padding disappeared with the old 0/0 rule and left the sentence
		   pressed against the frame's vertical hairlines. */
		padding: 56px 20px 24px;
	}

	.nhn-step__title {
		font-size: 22px;
	}
	.nhn-step__title strong,
	.nhn-step__title b {
		font-size: 22px;
	}

	.nhn-step__media {
		/* Full bleed on narrower viewports too — the illustration should
		   touch the frame's inner column, matching Figma. */
		margin: 0;
	}
}

@media (max-width: 780px) {
	.nhn {
		--nhn-gutter: 20px;
		--nhn-header-h: 76px;
		--nhn-hero-runway: 14svh;
		/* Tighter on a phone, where vertical space is the scarce thing and
		   the window needs to be visible without scrolling first. */
		--nhn-hero-gap: 48px;
	}

	.nhn-hero__frame {
		padding: 4px;
		border-radius: 14px;
	}

	/* No room to hang panels off the edges of a phone, and they would cover
	   the master rather than accompany it. The clips are never fetched. */
	.nhn-sat {
		display: none;
	}

	.nhn-hero__screen,
	.nhn-hero__video {
		border-radius: 10px;
	}

	.nhn-block,
	.nhn-stats {
		padding: 68px 0;
	}
	.nhn-quote {
		padding: 0 12px;
	}
	.nhn-quote__inner {
		padding: 96px 24px;
	}

	.nhn-walk__intro-wrap {
		padding: 0 20px;
	}

	.nhn-walk__intro {
		padding: 68px 0 48px;
	}

	.nhn-step__title {
		font-size: 20px;
	}

	.nhn-step--tall .nhn-step__video {
		height: 460px;
	}
	.nhn-step--tall .nhn-step__image {
		max-height: 520px;
	}

	.nhn-cards {
		grid-template-columns: 1fr;
	}

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

	/* Six marks will not sit on one line at phone widths, so the row wraps to
	   two or three and the spacing tightens to suit. */
	.nhn-logos {
		padding: 44px 0 48px;
	}

	.nhn-logos__row {
		gap: 20px 30px;
	}

	.nhn-logos__wordmark {
		font-size: 15px;
	}

	.nhn-logos__img {
		max-width: 128px;
		max-height: 26px;
	}

	.nhn-cta {
		padding: 0 12px;
	}
	.nhn-cta__inner {
		padding: 96px 24px;
	}
}

/* ================================================ REDUCED MOTION ======= */

/*
 * With motion reduced the hero becomes a static composition: no dolly-back, no
 * fade, and the video does not autoplay. The runway also collapses, since its
 * only purpose was to give the animation somewhere to happen — left in place it
 * would be a screen of empty gradient to scroll past for no reason.
 */
@media (prefers-reduced-motion: reduce) {
	.nhn {
		--nhn-hero-runway: 60px;
	}

	.nhn-hero__copy {
		position: static;
		padding-top: calc(var(--nhn-header-h) + 48px);
	}

	.nhn-hero__frame {
		transform: none !important;
	}

	/* The master does not autoplay here, so nothing would ever cue them. */
	.nhn-sat {
		display: none;
	}
}