/*
 * Platform pages.
 *
 * Loaded after neo-home-new.css and deliberately additive: every colour, rule
 * and max-width below resolves to a --nhn-* token the homepage already defines,
 * so the two surfaces cannot drift apart. Nothing here redefines a token.
 */

.pp {
	background: var(--nhn-surface);
	color: var(--nhn-ink);
}

.pp-wrap {
	width: min(100% - 48px, var(--nhn-max));
	margin-inline: auto;
}

/* --- shared type ----------------------------------------------------- */

.pp-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nhn-ink-soft);
	margin-bottom: 14px;
}

.pp-h2 {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 52px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--nhn-ink);
}

.pp-lede {
	margin: 18px 0 0;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.55;
	color: var(--nhn-ink-mid);
	max-width: 62ch;
}

.pp-head {
	margin-bottom: 44px;
}

.pp-head--center {
	text-align: center;
}

/* A centred block needs its own centring for the measure-capped lede, which
   would otherwise sit hard left inside a centred parent. */
.pp-head--center .pp-lede {
	margin-inline: auto;
}

.pp-head--left {
	text-align: left;
}

/* --- buttons --------------------------------------------------------- */

.pp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.pp-head--center + .pp-actions,
.pp-cta .pp-actions {
	justify-content: center;
}

.pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.pp-btn--primary {
	background: var(--nhn-ink);
	color: #fff;
	border: 1px solid var(--nhn-ink);
}

.pp-btn--primary:hover {
	background: #2a2b38;
}

.pp-btn--ghost {
	background: transparent;
	color: var(--nhn-ink);
	border: 1px solid var(--nhn-rule);
}

.pp-btn--ghost:hover {
	border-color: var(--nhn-ink);
}

/* --- media ----------------------------------------------------------- */

.pp-media {
	margin-top: 48px;
	border-radius: 16px;
	overflow: hidden;
	background: var(--nhn-surface-2);
	box-shadow:
		0 0 0 1px var(--nhn-rule),
		0 18px 44px rgba(11, 13, 24, 0.08);
}

/* Transparent artwork: no ground, no ring, no shadow — otherwise the card
   shows through exactly the parts the artwork deliberately left clear. */
.pp-media--plain {
	background: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

/* Images keep their own proportions — they arrive with one. */
.pp-media__img {
	display: block;
	width: 100%;
	height: auto;
}

/* A clip does not: preload="none" means no intrinsic size until the metadata
   arrives, so an unpostered video collapses to the 150px default and then
   jumps when it loads. Fixing the box and containing the frame keeps the
   layout still; a clip that is not 16:10 sits inside it rather than stretching
   to fit. */
.pp-media__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: contain;
}

.pp-caption {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--nhn-ink-soft);
}

/* --- section rhythm --------------------------------------------------- */
/* One spacing scale for every block, so a page reads evenly whatever order
   the sections are composed in. */

/* The site header overlays the page, so the first section has to clear it.
   --pp-header-h is measured at runtime (platform-page.js); the 176px fallback
   is the desktop header plus a little, so the hero sits too low rather than
   behind the nav if the script never runs. --nhn-header-h is deliberately not
   used here: it describes the homepage's own hero, not this header. */
.pp-hero {
	padding: calc(var(--pp-header-h, 176px) + clamp(56px, 6vw, 96px)) 0 clamp(40px, 5vw, 72px);
}

.pp-showcase,
.pp-cards,
.pp-rows,
.pp-callouts,
.pp-quote,
.pp-cta {
	padding: clamp(56px, 7vw, 104px) 0;
}

.pp-logos {
	padding: clamp(36px, 4vw, 56px) 0;
	border-block: 1px solid var(--nhn-rule);
}

.pp-showcase.is-tinted {
	background: var(--nhn-surface-2);
}

/* A notch under the homepage hero, which tops out at 58px. At 66px these
   headlines were larger than the homepage's own and ran to three lines on a
   laptop before anyone had read a word of the page. */
.pp-hero .pp-h2 {
	font-size: clamp(34px, 3.9vw, 52px);
}

/* Square or portrait hero artwork would otherwise be drawn as tall as the
   column is wide and push the whole page below the fold. Capping the height
   and centring it leaves wide artwork untouched — its height never reaches
   the cap — while a 1:1 graphic sits at a sane size. */
.pp-hero__media .pp-media__img,
.pp-hero__media .pp-media__video {
	width: auto;
	max-width: 100%;
	max-height: min(58vh, 600px);
	margin-inline: auto;
}

/* Optional hero background — same treatment as the quote and closing CTA, so
   a page that uses all three reads as one surface. */
.pp-hero.has-bg {
	position: relative;
	overflow: hidden;
}

/* Explicit stacking for all three layers. Without it the scrim below, being
   later in tree order than .pp-wrap and equally auto-z-indexed, paints over
   the headline and greys out the whole hero. */
.pp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* Soft is the default because a hero headline runs long and a busy image
   behind it is the fastest way to lose the first line. Full is there for
   images that were made to sit behind type. */
.pp-hero.is-soft .pp-hero__bg { opacity: 0.4; }
.pp-hero.is-full .pp-hero__bg { opacity: 1; }

.pp-hero.has-bg .pp-wrap {
	position: relative;
	z-index: 2;
}

/* A scrim rather than a flat tint: it keeps the top of the image visible while
   guaranteeing contrast where the text actually sits. */
.pp-hero.is-full::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.72) 0%,
		rgba(255, 255, 255, 0.55) 55%,
		rgba(255, 255, 255, 0.78) 100%
	);
	pointer-events: none;
}

/* --- logo wall -------------------------------------------------------- */

.pp-logos__title {
	margin: 0 0 22px;
	text-align: center;
	font-size: 13px;
	color: var(--nhn-ink-soft);
}

.pp-logos__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px 46px;
}

.pp-logos__row img {
	display: block;
	max-height: 26px;
	width: auto;
	opacity: 0.55;
	filter: grayscale(1);
}

/* --- card grid -------------------------------------------------------- */

.pp-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
}

.pp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pp-card {
	padding: 26px;
	border: 1px solid var(--nhn-rule);
	border-radius: 14px;
	background: var(--nhn-surface);
}

.pp-card__icon {
	display: block;
	width: 34px;
	height: 34px;
	object-fit: contain;
	margin-bottom: 16px;
}

.pp-card__title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 500;
	color: var(--nhn-ink);
}

.pp-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--nhn-ink-mid);
}

.pp-card__link {
	display: inline-block;
	margin-top: 14px;
	font-size: 14px;
	color: var(--nhn-blue);
	text-decoration: none;
}

.pp-card__link:hover {
	text-decoration: underline;
}

/* --- feature rows — Walk variant (reuses .nhn-walk from neo-home-new) ----
 *
 * The Platform Walkthrough component from the homepage sits in a section
 * that runs edge-to-edge with 20px side padding (only), no vertical
 * padding. On the platform page, .pp-rows applies clamp(56–104px) top +
 * bottom padding by default — that gap breaks the vertical hairlines
 * between framed sections. Reset it here so the walk butts against the
 * framed sections above and below without a visible break.
 */
.pp-rows--walk {
	padding: 0 20px;
}

/* --- story — Framed variant (Figma 14999:95194 / 95201 / 95404 / 95581) --
 *
 * Same 1400px bordered inner column as the other framed sections, with a
 * gradient-badge header on top and a three-column story grid below. Each
 * story card: numbered circle badge + mono uppercase label, then a
 * shadowed image (8px radius), then a 16px Book title and 16px Light 300
 * grey body — everything pinned to the bottom of the card so tall images
 * push the copy down together. Vertical hairlines between cards; the
 * frame's own left/right hairlines cap the outer edges.
 */
.pp-story--framed {
	padding: 0 20px;
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.pp-story--framed .pp-wrap { all: unset; }

.pp-story__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);
}

.pp-story__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 100px 50px 60px;
}

.pp-story__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;
	letter-spacing: 0.02em;
	line-height: 1;
	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;
}

.pp-story__title-wrap { width: 100%; max-width: 680px; }

.pp-story__title-head {
	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;
	text-align: left;
}
.pp-story__title-soft { font-weight: 300; color: #656672; }

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

.pp-story__card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 36px;
	padding: 36px 24px;
	min-height: 600px;
}

/* Hairlines between the three cards only — the frame handles the outer
   edges, so the first card has none on its left. */
.pp-story__card + .pp-story__card {
	border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.pp-story__card-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Numbered pill — 24×24 rounded neutral badge with a subtle border. */
.pp-story__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	border: 1px solid #D8D7DE;
	font-family: "DM Mono", "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: #656672;
	background: transparent;
}

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

/* Media well — image sits inside with 8px radius and the Figma drop
   shadow. Aspect is loosely enforced so mixed sources still land in a
   consistent vertical rhythm across the three cards. */
.pp-story__card-media {
	position: relative;
	width: 100%;
	height: 313.5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pp-story__card-media img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow:
		0 4px 6px -4px rgba(0, 0, 0, 0.10),
		0 10px 15px -3px rgba(0, 0, 0, 0.10);
	object-fit: contain;
}

.pp-story__card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pp-story__card-title {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 450;
	line-height: 1.3;
	color: #000;
}

.pp-story__card-text {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	color: #656672;
}

@media (max-width: 900px) {
	.pp-story--framed { padding: 0 12px; }
	.pp-story__head { padding: 72px 24px 40px; }
	.pp-story__title-head { font-size: 28px; }
	.pp-story__grid { grid-template-columns: 1fr; }
	.pp-story__card + .pp-story__card {
		border-left: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.2);
	}
	.pp-story__card {
		min-height: 0;
		gap: 28px;
		padding: 32px 20px;
	}
	.pp-story__card-media { height: 240px; }
}

/* --- feature rows — Framed variant (Figma 15007:172433) ------------------
 *
 * Bordered inner column (1400px) with a gradient-badge header on top and
 * a stack of split rows below: a text card on the left (36px padding,
 * small mono badge + 24px title + 24px greyed body + optional ghost
 * button + optional caption pinned to the bottom) beside a media card
 * on the right that runs the image full-bleed. Rows are separated by
 * a top hairline; the frame's vertical hairlines run continuously.
 */
.pp-rows--framed {
	padding: 0 20px;
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.pp-rows--framed .pp-wrap {
	all: unset;
}

.pp-rows__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);
}

.pp-rows__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 100px 50px 60px;
}

.pp-rows__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;
	letter-spacing: 0.02em;
	line-height: 1;
	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;
}

.pp-rows__title-wrap {
	width: 100%;
	max-width: 680px;
}

.pp-rows__title {
	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;
	text-align: left;
}

.pp-rows__lede {
	margin: 8px 0 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.4;
	color: #656672;
}

.pp-rows__list {
	display: flex;
	flex-direction: column;
}

.pp-rows__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* Flip swaps the two cards visually — the media card takes the left
   column and the text card the right, without touching source order for
   screen readers. */
.pp-rows__row.is-flipped .pp-rows__cell--text  { order: 2; }
.pp-rows__row.is-flipped .pp-rows__cell--media { order: 1; }

.pp-rows__cell {
	min-height: 500px;
}

.pp-rows__cell--text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding: 36px;
}

.pp-rows__cell--media {
	position: relative;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	overflow: hidden;
	background: #f4f4f5;
}
.pp-rows__row.is-flipped .pp-rows__cell--media {
	border-left: 0;
	border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.pp-rows__cell--media img,
.pp-rows__cell--media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.pp-rows__cell-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pp-rows__cell-badge {
	display: inline-block;
	font-family: "DM Mono", "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	color: #656672;
}

.pp-rows__cell-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pp-rows__cell-title {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 24px;
	font-weight: 450;
	line-height: 1.3;
	color: #191A23;
}

.pp-rows__cell-body {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 1.35;
	color: #656672;
}

.pp-rows__cell-cta {
	padding-top: 8px;
}

.pp-rows__cell-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 24px;
	border: 1px solid rgba(25, 26, 35, 0.15);
	border-radius: 12px;
	background: #ffffff;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 450;
	color: #191A23;
	text-decoration: none;
	transition: border-color 0.2s, background 0.2s;
}
.pp-rows__cell-btn:hover {
	border-color: #191A23;
	background: #f4f4f5;
}

.pp-rows__cell-caption {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	color: #656672;
}

@media (max-width: 900px) {
	.pp-rows--framed {
		padding: 0 12px;
	}
	.pp-rows__head {
		padding: 72px 24px 40px;
	}
	.pp-rows__title { font-size: 28px; }
	.pp-rows__row {
		grid-template-columns: 1fr;
	}
	.pp-rows__row.is-flipped .pp-rows__cell--text  { order: 0; }
	.pp-rows__row.is-flipped .pp-rows__cell--media { order: 0; }
	.pp-rows__cell {
		min-height: 0;
	}
	.pp-rows__cell--text {
		padding: 28px 20px;
		gap: 24px;
	}
	.pp-rows__cell--media {
		border-left: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.2);
		aspect-ratio: 4/3;
	}
	.pp-rows__row.is-flipped .pp-rows__cell--media {
		border-right: 0;
	}
	.pp-rows__cell-title,
	.pp-rows__cell-body {
		font-size: 20px;
	}
}

/* --- showcase — Framed variant (Figma 15007:172106 + 15038:21162) --------
 *
 * A bordered inner column, same 1400px frame the framed cards use, with:
 *   • Centered gradient-badge header + 36px title + 36px greyed subtitle.
 *   • A browser-window mockup below hosting the screenshot: rounded top
 *     corners, three traffic-light dots, drop shadow. macOS-style, so the
 *     visual reads as "product surface" without needing chrome text.
 */
.pp-showcase--framed {
	padding: 0 20px;
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.pp-showcase__frame {
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(120px, 16vw, 192px) clamp(20px, 4vw, 50px) 60px;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}

.pp-showcase__head {
	max-width: 1180px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.pp-showcase__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;
	letter-spacing: 0.02em;
	line-height: 1;
	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;
}

.pp-showcase__title-wrap {
	max-width: 780px;
	width: 100%;
}

.pp-showcase__title {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 450;
	font-size: 36px;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: #000;
	text-align: center;
}

.pp-showcase__subtitle {
	margin: 8px 0 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 300;
	font-size: 36px;
	line-height: 1.2;
	color: #656672;
	text-align: center;
}

/* Browser-window mock — matches Figma 15038:21162. Rounded top corners,
   traffic-light chrome bar, drop shadow. The screenshot itself sits inside
   .pp-showcase__viewport where object-fit takes care of any aspect ratio. */
.pp-showcase__browser {
	width: 100%;
	max-width: 996px;
	margin: 0;
	padding: 0;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow:
		0 4px 6px -4px rgba(0, 0, 0, 0.10),
		0 10px 15px -3px rgba(0, 0, 0, 0.10);
}

.pp-showcase__chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	background: #f7f7f8;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pp-showcase__chrome span {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.pp-showcase__chrome span:nth-child(1) { background: #ED2F2C; }
.pp-showcase__chrome span:nth-child(2) { background: #FFBE1A; }
.pp-showcase__chrome span:nth-child(3) { background: #51C76C; }

.pp-showcase__viewport {
	background: #fafafa;
}

.pp-showcase__viewport img,
.pp-showcase__viewport video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

@media (max-width: 900px) {
	.pp-showcase--framed {
		padding: 0 12px;
	}
	.pp-showcase__frame {
		padding: 96px 20px 40px;
		gap: 40px;
	}
	.pp-showcase__title,
	.pp-showcase__subtitle {
		font-size: 24px;
	}
	.pp-showcase__browser {
		border-radius: 8px;
	}
}

/* --- card grid — Framed variant (Figma 15000:100074) ---------------------
 *
 * Bordered inner column (like neo-home-new frame patterns) with a
 * gradient-badge header on top, then a 3×2 hairline-divided grid of small
 * cards. Icons are 24×24; card copy is 16px Book / 16px Light 300 grey.
 * The badge, hairlines and title all reuse the tokens from the neo-home
 * work so both templates stay in the same palette.
 */
.pp-cards--framed {
	padding: 0 20px;
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.pp-cards--framed .pp-wrap,
.pp-cards--framed .pp-head {
	all: unset;   /* stop the default section chrome fighting the frame */
}

.pp-cards__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);
}

.pp-cards__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 1180px;
	margin: 0;
	padding: 100px 50px 60px;
}

.pp-cards__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;
	letter-spacing: 0.02em;
	line-height: 1;
	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;
}

.pp-cards__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;
}

.pp-cards__title-soft {
	font-weight: 300;
	color: #656672;
}

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

.pp-card--framed {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 60px;
	padding: 36px 24px;
	min-height: 220px;
}

/* Hairlines between grid cells only — never around the outside (the frame
 * already provides those). :nth-child works because the grid never wraps
 * at three columns on desktop; the mobile media query resets everything. */
.pp-cards__grid > li:not(:nth-child(3n + 1)) {
	border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.pp-cards__grid > li:nth-child(n + 4) {
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.pp-card--framed__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pp-card--framed__icon {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.pp-card--framed__title {
	margin: 0 0 8px;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 450;
	line-height: 1.3;
	color: #000;
}

.pp-card--framed__text {
	margin: 0;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	color: #656672;
}

.pp-card--framed__link {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	color: var(--nhn-blue, #5172e1);
	text-decoration: none;
}
.pp-card--framed__link:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.pp-cards--framed {
		padding: 0 12px;
	}
	.pp-cards__head {
		padding: 72px 24px 44px;
	}
	.pp-cards__title {
		font-size: 28px;
	}
	.pp-cards__grid {
		grid-template-columns: 1fr;
	}
	/* Stacked layout — reset the desktop nth-child borders and use a
	 * uniform top border for every row after the first. */
	.pp-cards__grid > li:not(:nth-child(3n + 1)) { border-left: 0; }
	.pp-cards__grid > li:nth-child(n + 4)         { border-top: 0; }
	.pp-cards__grid > li + li {
		border-top: 1px solid rgba(0, 0, 0, 0.2);
	}
	.pp-card--framed {
		min-height: 0;
		gap: 32px;
		padding: 28px 20px;
	}
}

/* --- feature rows ----------------------------------------------------- */

.pp-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
	padding: clamp(36px, 4vw, 64px) 0;
}

.pp-row + .pp-row {
	border-top: 1px solid var(--nhn-rule);
}

/* Order rather than direction: reversing the grid would also reverse the
   reading order for a screen reader, which is not what a visual flip means. */
.pp-row.is-flipped .pp-row__copy { order: 2; }
.pp-row.is-flipped .pp-row__media { order: 1; }

.pp-row__media {
	margin-top: 0;
}

.pp-row__title {
	margin: 0;
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: 500;
	color: var(--nhn-ink);
}

.pp-row__body {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--nhn-ink-mid);
	max-width: 54ch;
}

.pp-row__link {
	display: inline-block;
	margin-top: 18px;
	font-size: 15px;
	color: var(--nhn-blue);
	text-decoration: none;
}

.pp-row__link:hover {
	text-decoration: underline;
}

/* --- centrepiece ------------------------------------------------------
 * One visual carrying the section, under a centred heading. Exists to break
 * the left/right rhythm of the feature rows — three or four alternating rows
 * in a run stop reading as a rhythm and start reading as a list.
 * ------------------------------------------------------------------- */

.pp-centre {
	padding: clamp(56px, 7vw, 104px) 0;
}

.pp-centre.is-tinted {
	background: var(--nhn-surface-2);
}

/* Wider than a feature row's media: this block has no column beside it, so
   the visual is allowed to run to the full measure. */
.pp-centre__media {
	margin-top: 44px;
}

.pp-centre .pp-head {
	margin-bottom: 0;
}

/* --- story ------------------------------------------------------------
 * Three visuals in sequence. Deliberately an <ol>: the order carries meaning,
 * and a screen reader should hear it as a sequence rather than three cards
 * that happen to sit next to each other.
 * ------------------------------------------------------------------- */

.pp-story {
	padding: clamp(56px, 7vw, 104px) 0;
}

.pp-story.is-tinted {
	background: var(--nhn-surface-2);
}

.pp-story__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	counter-reset: pp-story;
}

.pp-story__step {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pp-story__media {
	margin-top: 0;
	margin-bottom: 20px;
}

/* Uniform crop so three visuals of different proportions still line up —
   otherwise the copy beneath them starts at three different heights. */
.pp-story__media .pp-media__img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top center;
}

.pp-story__media.pp-media--plain .pp-media__img {
	object-fit: contain;
}

.pp-story__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-bottom: 12px;
	border: 1px solid var(--nhn-rule);
	border-radius: 50%;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--nhn-ink-mid);
}

.pp-story__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--nhn-ink);
}

.pp-story__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--nhn-ink-mid);
}

@media (max-width: 900px) {
	.pp-story__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.pp-story__row { grid-template-columns: minmax(0, 1fr); }
}

/* --- dark break-out ---------------------------------------------------
 * A full-bleed dark band mid-page, the counterpart to the homepage's
 * white-label lifecycle. Same #00131b ground and same semi-transparent white
 * hairline, so a visitor moving between the two surfaces sees one component
 * rather than two that nearly match.
 *
 * Two treatments: hairline-divided (ours) and raised cards (Attio's Universal
 * Context). Both are the same markup — only the separator changes.
 * ------------------------------------------------------------------- */

.pp-dark {
	--pp-dark-ink: #ffffff;
	--pp-dark-mid: rgba(255, 255, 255, 0.68);
	--pp-dark-line: rgba(255, 255, 255, 0.2);
	position: relative;
	overflow: hidden;
	background: #00131b;
	color: var(--pp-dark-ink);
	padding: clamp(64px, 8vw, 116px) 0;
}

.pp-dark__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.28;
	pointer-events: none;
}

.pp-dark .pp-wrap { position: relative; }

/* The shared heading block is inked for a light ground, so the dark band
   restates those three colours rather than forking the markup. */
.pp-dark .pp-h2 { color: var(--pp-dark-ink); }
.pp-dark .pp-lede { color: var(--pp-dark-mid); }
.pp-dark .pp-eyebrow { color: rgba(255, 255, 255, 0.55); }

/* Feature image on the dark ground. Narrower than the full column so it reads
   as a centred exhibit rather than a full-bleed band, and the framed variant
   keeps a subtle lift so a light screenshot does not float on the dark. */
.pp-dark__media {
	width: min(100%, 860px);
	margin: 40px auto 8px;
}

.pp-dark__media.pp-media {
	background: rgba(255, 255, 255, 0.04);
	box-shadow:
		0 0 0 1px var(--pp-dark-line),
		0 24px 60px rgba(0, 0, 0, 0.35);
}

.pp-dark__media.pp-media--plain {
	background: none;
	box-shadow: none;
}

/* Items sit closer when an image is carrying the section above them. */
.pp-dark__media + .pp-dark__items {
	margin-top: 44px;
}

.pp-dark__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* The icon set is stroked in the light-ground ink so it reads on a card.
   Inverting it here turns those strokes white rather than shipping a second
   set — one file, both grounds. Only line art survives this; a filled or
   coloured icon inverts into a solid blob, which is why the set is line art. */
.pp-dark__icon {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
	margin-bottom: 18px;
	filter: invert(1);
	opacity: 0.9;
}

.pp-dark__item-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--pp-dark-ink);
	line-height: 1.3;
}

.pp-dark__item-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pp-dark-mid);
}

/* Hairline treatment: dividers between columns, not around them, so the row
   reads as one frame the way the homepage lifecycle does. */
.pp-dark--rule .pp-dark__item {
	padding: 4px 28px;
	border-left: 1px solid var(--pp-dark-line);
}

.pp-dark--rule .pp-dark__item:first-child {
	padding-left: 0;
	border-left: 0;
}

/* Card treatment: each item on its own slightly-lifted ground. */
.pp-dark--card .pp-dark__items { gap: 16px; }

.pp-dark--card .pp-dark__item {
	padding: 24px;
	border: 1px solid var(--pp-dark-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
}

.pp-dark .pp-actions { justify-content: center; margin-top: 44px; }

.pp-btn--on-dark {
	background: var(--pp-dark-ink);
	color: #00131b;
	border: 1px solid var(--pp-dark-ink);
}

.pp-btn--on-dark:hover { background: rgba(255, 255, 255, 0.88); }

.pp-btn--on-dark-ghost {
	background: transparent;
	color: var(--pp-dark-ink);
	border: 1px solid var(--pp-dark-line);
}

.pp-btn--on-dark-ghost:hover { border-color: var(--pp-dark-ink); }

@media (max-width: 860px) {
	/* Left rules make no sense once the row wraps to a column. */
	.pp-dark--rule .pp-dark__item {
		padding: 22px 0;
		border-left: 0;
		border-top: 1px solid var(--pp-dark-line);
	}

	.pp-dark--rule .pp-dark__item:first-child { padding-top: 0; border-top: 0; }
}

/* --- callout strip ---------------------------------------------------- */

.pp-callouts {
	background: var(--nhn-surface-2);
}

.pp-callouts__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.pp-callout__icon {
	display: block;
	width: 28px;
	height: 28px;
	object-fit: contain;
	margin-bottom: 14px;
}

.pp-callout__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 500;
	color: var(--nhn-ink);
}

.pp-callout__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--nhn-ink-mid);
}

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

.pp-quote {
	position: relative;
	overflow: hidden;
	background: var(--nhn-surface-2);
}

.pp-quote__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

.pp-quote .pp-wrap {
	position: relative;
}

.pp-quote figure {
	margin: 0;
	max-width: 46ch;
}

.pp-quote__text {
	margin: 0;
	font-size: clamp(21px, 2.3vw, 32px);
	line-height: 1.32;
	letter-spacing: -0.015em;
	font-weight: 400;
	color: var(--nhn-ink);
}

.pp-quote__by {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	font-size: 14px;
	color: var(--nhn-ink-mid);
}

.pp-quote__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.pp-quote__by strong {
	display: block;
	font-weight: 500;
	color: var(--nhn-ink);
}

.pp-quote__meta {
	display: block;
	color: var(--nhn-ink-soft);
}

/* --- closing CTA ------------------------------------------------------ */

.pp-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
}

.pp-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pp-cta .pp-wrap {
	position: relative;
}

.pp-cta .pp-head {
	margin-bottom: 0;
}

.pp-fallback {
	max-width: 68ch;
	margin: 32px auto 0;
	color: var(--nhn-ink-mid);
	line-height: 1.6;
}

/* --- responsive ------------------------------------------------------- */

@media (max-width: 1000px) {
	.pp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.pp-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Media below the copy on every row: the alternation only reads as a
	   rhythm when there are two columns to alternate between. */
	.pp-row.is-flipped .pp-row__copy,
	.pp-row.is-flipped .pp-row__media {
		order: initial;
	}

	.pp-grid--3,
	.pp-grid--4,
	.pp-callouts__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.pp-wrap { width: min(100% - 32px, var(--nhn-max)); }

	.pp-grid--2,
	.pp-grid--3,
	.pp-grid--4,
	.pp-callouts__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.pp-actions .pp-btn { width: 100%; }
}

/* ======================================================================
 * Platform mega-menu
 *
 * Lives here rather than in the header stylesheet because it is part of the
 * platform surface and shares its tokens. Loaded on every page via the header,
 * so the token block is aliased onto .pmega as well — the panel renders on
 * pages that are not themselves platform pages.
 * ==================================================================== */

.pmega {
	--nhn-ink: #191a23;
	--nhn-ink-mid: #656672;
	--nhn-ink-soft: #8a8b96;
	--nhn-rule: rgba(25, 26, 35, 0.09);
	--nhn-surface: #ffffff;
	--nhn-surface-2: #f7f8fb;
}

/* The generic submenu shrink-wraps to its trigger and lays out as a flex row.
   A four-group panel needs neither, so both are overridden by selector weight
   rather than !important — .navigation__submenu.pmega outranks the base rule
   and leaves the other dropdowns alone. */
.navigation__submenu.pmega {
	width: min(1000px, calc(100vw - 48px));
	max-width: none;
	left: 50%;
	transform: translateX(-50%);
}

.navigation__submenu.pmega .pmega__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 232px;
	gap: 0;
	padding: 0;
	background: var(--nhn-surface);
	border: 1px solid var(--nhn-rule);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(11, 13, 24, 0.12);
	overflow: hidden;
}

/* One category per row, its items two-up beneath the heading. Laying the
   categories out side by side instead made the tallest one set the height of
   the whole panel, leaving a column of dead space next to the short ones. */
.navigation__submenu.pmega .pmega__groups {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	padding: 30px 34px;
}

.pmega__heading {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nhn-ink-soft);
}

.pmega__list,
.pmega__rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pmega__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 32px;
}

.pmega__link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 9px 10px;
	margin: 0 -10px;
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.14s ease;
}

.pmega__link:hover { background: var(--nhn-surface-2); }

.pmega__icon {
	width: 26px;
	height: 26px;
	object-fit: contain;
	flex: 0 0 auto;
	margin-top: 1px;
}

.pmega__copy { display: block; min-width: 0; }

.pmega__title {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--nhn-ink);
	line-height: 1.3;
}

.pmega__blurb {
	display: block;
	font-size: 13px;
	color: var(--nhn-ink-mid);
	line-height: 1.4;
	margin-top: 2px;
}

/* The rail is a quieter list on its own ground, the way Attio separates
   "get started" actions from the product pages themselves. */
.pmega__rail {
	padding: 30px 28px;
	background: var(--nhn-surface-2);
	border-left: 1px solid var(--nhn-rule);
}

.pmega__rail-list { display: grid; gap: 14px; }

.pmega__rail-list a {
	font-size: 14px;
	color: var(--nhn-ink);
	text-decoration: none;
}

.pmega__rail-list a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
	.navigation__submenu.pmega .pmega__inner { grid-template-columns: minmax(0, 1fr); }
	.pmega__rail { border-left: 0; border-top: 1px solid var(--nhn-rule); }
}

@media (max-width: 720px) {
	.pmega__list { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
 * Contrast — them vs us
 * The two columns are deliberately unequal: the left sits recessed on the
 * page's own ground, the right is raised on white with a brand rail. The
 * eye should settle on our side before it reads either.
 * ==================================================================== */

.pp-contrast { padding: clamp(56px, 7vw, 104px) 0; }

.pp-contrast__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

.pp-contrast__col {
	padding: 32px;
	border-radius: 16px;
}

.pp-contrast__col--them {
	background: var(--nhn-surface-2);
	border: 1px solid var(--nhn-rule);
}

.pp-contrast__col--us {
	background: var(--nhn-surface);
	border: 1px solid var(--nhn-rule);
	border-top: 3px solid var(--nhn-blue);
	box-shadow: 0 18px 44px rgba(11, 13, 24, 0.09);
}

.pp-contrast__h {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 500;
	color: var(--nhn-ink);
}

/* Recessive comes from the surface, not from unreadable text — the left
   column still has to be read to make the comparison land. */
.pp-contrast__col--them .pp-contrast__h { color: var(--nhn-ink-mid); }

.pp-contrast__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.pp-contrast__list li {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--nhn-ink-mid);
}

.pp-contrast__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nhn-ink-soft);
}

.pp-contrast__col--us .pp-contrast__list li { color: var(--nhn-ink); }
.pp-contrast__col--us .pp-contrast__list li::before { background: var(--nhn-blue); }

.pp-contrast__logos {
	list-style: none;
	margin: 26px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--nhn-rule);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 26px;
}

.pp-contrast__logos img {
	display: block;
	max-height: 20px;
	width: auto;
	opacity: 0.4;
	filter: grayscale(1);
}

.pp-contrast__ours {
	margin: 26px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--nhn-rule);
}

.pp-contrast__ours img { display: block; max-height: 28px; width: auto; }

@media (max-width: 820px) {
	.pp-contrast__pair { grid-template-columns: minmax(0, 1fr); }
	/* Ours first on a phone: a single column reads top-down, and the
	   comparison should open on the answer rather than the problem. */
	.pp-contrast__col--us { order: -1; }
}

/* ======================================================================
 * Immersive scroll — copy scrolls, visual is pinned
 * ==================================================================== */

.pp-scroll { padding: clamp(56px, 7vw, 104px) 0; }

/* Jumped to from a hero CTA, so it must not land under the header. */
.pp-scroll[id] { scroll-margin-top: calc(var(--pp-header-h, 176px) + 24px); }

.pp-scroll__stage {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.pp-scroll__steps { list-style: none; margin: 0; padding: 0; }

/* Each step gets most of a viewport of runway — enough that the pinned
   visual is looked at before the next one arrives, short enough that the
   copy stays level with the panel it describes. */
.pp-scroll__step {
	min-height: 68vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0.32;
	transition: opacity 0.35s ease;
}

.pp-scroll__step.is-active { opacity: 1; }

.pp-scroll__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 16px;
	border: 1px solid var(--nhn-rule);
	border-radius: 50%;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--nhn-ink-mid);
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pp-scroll__step.is-active .pp-scroll__num {
	background: var(--nhn-ink);
	border-color: var(--nhn-ink);
	color: #fff;
}

.pp-scroll__title {
	margin: 0;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	font-weight: 500;
	color: var(--nhn-ink);
}

.pp-scroll__body {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--nhn-ink-mid);
	max-width: 46ch;
}

.pp-scroll__media {
	position: sticky;
	top: calc(var(--pp-header-h, 176px) + 40px);
}

.pp-scroll__frame {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	overflow: hidden;
	background: var(--nhn-surface-2);
	box-shadow:
		0 0 0 1px var(--nhn-rule),
		0 18px 44px rgba(11, 13, 24, 0.09);
}

/* Every panel is stacked and only opacity changes, so a step change never
   shows an empty frame while the next file is fetched. */
.pp-scroll__panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.pp-scroll__panel.is-active { opacity: 1; }

/* Contain, not cover: the clips are a mix of square product captures and
   16:9 screenshots, and cropping 40% off a square recording of a UI loses
   the part the step is talking about. */
.pp-scroll__video,
.pp-scroll__still {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pp-scroll__progress {
	height: 2px;
	margin-top: 14px;
	border-radius: 2px;
	background: var(--nhn-rule);
	overflow: hidden;
}

.pp-scroll__progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--nhn-blue);
	transition: width 0.3s ease;
}

@media (max-width: 900px) {
	.pp-scroll__stage { grid-template-columns: minmax(0, 1fr); }

	/* One column puts the copy first in source order, so the visual is moved
	   above it and pinned shallowly: a phone has room for a short panel and a
	   step of copy at once, which is the whole point of the module. */
	.pp-scroll__media {
		order: -1;
		position: sticky;
		top: 12px;
		z-index: 1;
		margin-bottom: 24px;
	}

	.pp-scroll__frame { aspect-ratio: 16 / 11; }
	.pp-scroll__step { min-height: 58vh; padding: 20px 0; }
	.pp-scroll__body { max-width: none; }
}

@media (max-width: 560px) {
	/* A shorter panel on a small phone, so a step of copy still fits beneath
	   the pinned visual rather than being pushed off the screen by it. */
	.pp-scroll__frame { aspect-ratio: 16 / 13; }
	.pp-scroll__step { min-height: 52vh; }
}

/* ======================================================================
 * Metrics
 * ==================================================================== */

.pp-metrics { padding: clamp(56px, 7vw, 104px) 0; }

.pp-metrics__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.pp-metrics__media { margin-top: 0; }

.pp-metrics__figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 32px;
	margin: 34px 0 0;
}

.pp-metric { margin: 0; }

.pp-metric__label {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--nhn-ink-soft);
}

.pp-metric__value {
	margin: 0;
	font-size: clamp(30px, 3.2vw, 46px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--nhn-ink);
}

.pp-metric__note {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--nhn-ink-mid);
}

.pp-metrics__foot {
	margin: 30px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--nhn-ink-soft);
}

/* No visual: the figures widen out instead of leaving half the row empty. */
.pp-metrics__grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.pp-metrics__grid.is-solo .pp-metrics__figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.pp-metrics__grid { grid-template-columns: minmax(0, 1fr); }
	.pp-metrics__grid.is-solo .pp-metrics__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.pp-metrics__figures { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
 * Card thumbnails — a grid that shows what it links to
 * ==================================================================== */

.pp-card__thumb {
	/* A fixed band rather than a ratio on the image: these six assets run from
	   a 2.5:1 diagram to a 16:9 screenshot, and a shared height is what makes
	   the row of cards line up. */
	display: block;
	height: clamp(150px, 13vw, 196px);
	margin: -26px -26px 20px;
	border-radius: 14px 14px 0 0;
	overflow: hidden;
	background: var(--nhn-surface-2);
	border-bottom: 1px solid var(--nhn-rule);
}

.pp-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Product screenshots carry their subject in the upper half; anchoring the
	   crop there keeps it rather than the empty rows underneath. */
	object-position: 50% 18%;
}

/* ======================================================================
 * Process — the same steps, travelling left to right
 *
 * The track is a genuine horizontally scrolling element with snap points,
 * so it is usable by swipe, scrollbar and keyboard with no script at all.
 * platform-page.js adds the pinned mapping on top: while the section holds
 * the viewport, downward scrolling drives the track sideways.
 * ==================================================================== */

.pp-proc {
	position: relative;
	padding: clamp(48px, 6vw, 88px) 0;
	scroll-margin-top: calc(var(--pp-header-h, 176px) + 24px);
}

.pp-proc__pin { display: flex; flex-direction: column; justify-content: center; }

/* Only once the script has measured the travel — otherwise a sticky element
   inside a section of ordinary height would simply stop scrolling. */
.pp-proc.is-pinned .pp-proc__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 620px;
}

.pp-proc__viewport {
	overflow-x: auto;
	/* Explicitly hidden rather than left to compute as auto: an element that
	   can scroll vertically swallows the wheel, and the reader who put their
	   pointer over the panels found the page had stopped moving. */
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pp-proc__viewport::-webkit-scrollbar { display: none; }

/* Pinned, the page owns the horizontal position; letting the reader also
   drag it would mean two things fighting over one scrollLeft. */
.pp-proc.is-pinned .pp-proc__viewport {
	overflow-x: hidden;
	scroll-snap-type: none;
}

.pp-proc__track {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	/* Gutters of exactly half the leftover viewport, so the first and last
	   panels can sit dead centre like every panel between them. In vw, not
	   %, because the percentage here resolves against the track rather than
	   the window and left the run a gutter short. */
	/* Room above and below for the panel shadow, which the hidden vertical
	   overflow would otherwise cut off square. */
	padding: 12px max( 24px, calc( ( 100vw - min( 1120px, 86vw ) ) / 2 ) ) 44px;
}

.pp-proc__panel {
	flex: 0 0 min( 1120px, 86vw );
	scroll-snap-align: center;
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
	opacity: 0.4;
	transition: opacity 0.4s ease;
}

.pp-proc__panel.is-active { opacity: 1; }

.pp-proc__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 16px;
	border: 1px solid var(--nhn-rule);
	border-radius: 50%;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--nhn-ink-mid);
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pp-proc__panel.is-active .pp-proc__num {
	background: var(--nhn-ink);
	border-color: var(--nhn-ink);
	color: #fff;
}

.pp-proc__title {
	margin: 0;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	font-weight: 500;
	color: var(--nhn-ink);
}

.pp-proc__body {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--nhn-ink-mid);
}

.pp-proc__frame {
	position: relative;
	aspect-ratio: 16 / 10;
	max-height: 54vh;
	border-radius: 16px;
	overflow: hidden;
	background: var(--nhn-surface-2);
	box-shadow:
		0 0 0 1px var(--nhn-rule),
		0 18px 44px rgba(11, 13, 24, 0.09);
}

.pp-proc__video,
.pp-proc__still {
	width: 100%;
	height: 100%;
	/* Contain, as in the vertical variant: the clips are a mix of square
	   captures and 16:9 screenshots, and cropping loses the subject. */
	object-fit: contain;
	display: block;
}

.pp-proc__rail {
	height: 2px;
	margin-top: 4px;
	border-radius: 2px;
	background: var(--nhn-rule);
	overflow: hidden;
}

.pp-proc__rail span {
	display: block;
	height: 100%;
	width: 20%;
	background: var(--nhn-blue);
	transition: width 0.2s linear;
}

.pp-proc__viewport:focus-visible {
	outline: 2px solid var(--nhn-blue);
	outline-offset: 6px;
	border-radius: 18px;
}

@media (max-width: 900px) {
	/* No pinning on a phone: the track is simply swiped, which is the
	   gesture the reader would reach for anyway. */
	.pp-proc__panel {
		flex-basis: min( 86vw, 460px );
		grid-template-columns: minmax(0, 1fr);
		opacity: 1;
	}

	.pp-proc__copy { order: 2; }
	.pp-proc__frame { max-height: none; }
	.pp-proc__track { gap: 18px; padding: 12px 24px 40px; }
	.pp-proc__panel { scroll-snap-align: start; }
}

/* ======================================================================
 * Comparison table
 *
 * One column is ours and is meant to win the eye: it sits on white with a
 * brand rail and a shadow, while the rest stay on the page's own ground.
 * The weight comes from surface and elevation, never from making the other
 * columns too faint to read — a comparison nobody can read proves nothing.
 * ==================================================================== */

/* The section sits on the soft ground so that our column, which stays white,
   is the one thing raised off it. On a white section the highlight had only a
   rail and a shadow to work with and barely registered. */
.pp-cmp {
	padding: clamp(48px, 6vw, 88px) 0;
	background: var(--nhn-surface-2);
}

/* The table scrolls inside this box on a narrow screen; the page body must
   never scroll sideways. */
.pp-cmp__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 16px;
}

.pp-cmp__scroll:focus-visible {
	outline: 2px solid var(--nhn-blue);
	outline-offset: 4px;
}

.pp-cmp__table {
	width: 100%;
	min-width: 720px;
	/* Fixed, so every provider column is the same width whatever it says.
	   Auto layout sized them by content and squeezed ours — the column with
	   the most to say — narrower than the ones answering in two words. */
	table-layout: fixed;
	border-collapse: separate;
	/* Separate, not collapse: the highlighted column needs its own rounded
	   corners and shadow, which a collapsed border model cannot give it. */
	border-spacing: 0;
	font-size: 15px;
}

.pp-cmp__corner {
	/* The only width declared: fixed layout shares what is left equally
	   between the provider columns, however many a page has. */
	width: 28%;
	border: 0;
	background: none;
}

.pp-cmp__col {
	padding: 18px 20px;
	text-align: center;
	vertical-align: middle;
	font-weight: 500;
	color: var(--nhn-ink-mid);
	border-bottom: 1px solid var(--nhn-rule);
}

.pp-cmp__logo {
	display: block;
	max-height: 22px;
	max-width: 120px;
	width: auto;
	margin: 0 auto;
	filter: grayscale(1);
	opacity: 0.55;
}

.pp-cmp__name { font-size: 15px; }

.pp-cmp__col.is-ours {
	color: var(--nhn-ink);
	background: var(--nhn-surface);
	border-top: 3px solid var(--nhn-blue);
	border-bottom-color: transparent;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -2px 30px rgba(11, 13, 24, 0.06);
}

.pp-cmp__col.is-ours .pp-cmp__logo {
	filter: none;
	opacity: 1;
	max-height: 26px;
}

.pp-cmp__label {
	padding: 16px 24px 16px 4px;
	text-align: left;
	font-weight: 400;
	color: var(--nhn-ink-mid);
	border-bottom: 1px solid var(--nhn-rule);
}

.pp-cmp__cell {
	padding: 16px 20px;
	text-align: center;
	color: var(--nhn-ink-mid);
	border-bottom: 1px solid var(--nhn-rule);
}

.pp-cmp__cell.is-ours {
	color: var(--nhn-ink);
	background: var(--nhn-surface);
	border-bottom-color: var(--nhn-rule);
	box-shadow: 0 0 30px rgba(11, 13, 24, 0.04);
}

.pp-cmp__table tbody tr:last-child .pp-cmp__cell.is-ours {
	border-bottom-color: transparent;
	border-radius: 0 0 14px 14px;
	box-shadow: 0 18px 30px -18px rgba(11, 13, 24, 0.22);
}

.pp-cmp__table tbody tr:last-child .pp-cmp__cell,
.pp-cmp__table tbody tr:last-child .pp-cmp__label { border-bottom: 0; }

.pp-cmp__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-bottom: 4px;
	border-radius: 50%;
}

.pp-cmp__mark--yes { color: #fff; background: var(--nhn-blue); }
.pp-cmp__mark--no { color: var(--nhn-ink-soft); background: var(--nhn-surface-2); }
.pp-cmp__mark--partial { color: var(--nhn-ink-mid); background: var(--nhn-surface-2); }

.pp-cmp__text {
	display: block;
	font-size: 14px;
	line-height: 1.4;
}

.pp-cmp__foot {
	margin: 20px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--nhn-ink-soft);
	text-align: center;
}

@media (max-width: 700px) {
	.pp-cmp__table { font-size: 14px; }
	.pp-cmp__label { padding: 14px 16px 14px 4px; }
	.pp-cmp__cell,
	.pp-cmp__col { padding: 14px 12px; }
}