/**
 * prismal/product-landing — front end styles.
 *
 * Everything is scoped under the block wrapper. The block deliberately does not
 * inherit the theme's spacing or typography: a product page is a self-contained
 * surface that should look the same wherever it is dropped.
 *
 * @package Prismal
 * @subpackage Prismal
 * @since Prismal 1.0
 */

.wp-block-prismal-product-landing {
	/* Palette. --pl-accent and --pl-accent-soft come from the block attributes. */
	--pl-bg: #fefefb;
	--pl-bone: #f6f5f0;
	--pl-ink: #0a0a0a;
	--pl-ink-60: rgba(10, 10, 10, 0.6);
	--pl-ink-40: rgba(10, 10, 10, 0.4);
	--pl-line: rgba(10, 10, 10, 0.1);
	--pl-line-soft: rgba(10, 10, 10, 0.06);

	/* Code surface. */
	--pl-code-bg: #0b1020;
	--pl-code-bar: rgba(255, 255, 255, 0.06);
	--pl-code-ink: #e8ecf6;
	--pl-code-dim: rgba(232, 236, 246, 0.45);

	--pl-font-display: var(--wp--preset--font-family--archivo, Archivo), "Archivo", system-ui, sans-serif;
	--pl-font-narrow: var(--wp--preset--font-family--archivo-narrow, "Archivo Narrow"), "Archivo Narrow", system-ui, sans-serif;
	--pl-font-body: var(--wp--preset--font-family--dm-sans, "DM Sans"), "DM Sans", system-ui, sans-serif;
	--pl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--pl-shell: 1440px;
	--pl-gutter: clamp(20px, 4vw, 64px);

	position: relative;
	box-sizing: border-box;
	margin: 0;
	background: var(--pl-bg);
	color: var(--pl-ink);
	font-family: var(--pl-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wp-block-prismal-product-landing *,
.wp-block-prismal-product-landing *::before,
.wp-block-prismal-product-landing *::after {
	box-sizing: border-box;
}

.wp-block-prismal-product-landing p,
.wp-block-prismal-product-landing h1,
.wp-block-prismal-product-landing figure,
.wp-block-prismal-product-landing blockquote,
.wp-block-prismal-product-landing ul {
	margin: 0;
	padding: 0;
}

.wp-block-prismal-product-landing ul {
	list-style: none;
}

.wp-block-prismal-product-landing a {
	color: inherit;
	text-decoration: none;
}

.wp-block-prismal-product-landing button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.wp-block-prismal-product-landing .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wp-block-prismal-product-landing .pl-shell {
	width: 100%;
	max-width: var(--pl-shell);
	margin-inline: auto;
	padding-inline: var(--pl-gutter);
}

/* Shared label: the small uppercase eyebrow used throughout. */
.wp-block-prismal-product-landing .pl-label {
	font-family: var(--pl-font-narrow);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--pl-ink-40);
}

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

.wp-block-prismal-product-landing .pl-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: min(860px, 92vh);
	padding-block: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 36px);
	overflow: hidden;
}

.wp-block-prismal-product-landing .pl-hero__tint {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 78% 0%, color-mix(in srgb, var(--pl-accent) 16%, transparent), transparent 62%),
		linear-gradient(180deg, color-mix(in srgb, var(--pl-accent) 8%, transparent), transparent 72%);
	pointer-events: none;
}

.wp-block-prismal-product-landing .pl-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
}

.wp-block-prismal-product-landing .pl-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-family: var(--pl-font-narrow);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wp-block-prismal-product-landing .pl-meta__pill {
	padding: 5px 12px;
	border: 1px solid var(--pl-line);
	border-radius: 999px;
}

.wp-block-prismal-product-landing .pl-meta__year {
	color: var(--pl-ink-40);
}

.wp-block-prismal-product-landing .pl-meta__rule {
	flex: 1;
	min-width: 24px;
	height: 1px;
	background: var(--pl-line);
}

.wp-block-prismal-product-landing .pl-meta__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wp-block-prismal-product-landing .pl-tag {
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(10, 10, 10, 0.04);
	font-family: var(--pl-font-narrow);
	font-size: 11px;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-block-prismal-product-landing .pl-tag--outline {
	background: none;
	border: 1px solid var(--pl-line);
}

.wp-block-prismal-product-landing .pl-hero__grid {
	display: grid;
	flex: 1;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	margin-top: clamp(20px, 3vw, 36px);
}

.wp-block-prismal-product-landing .pl-hero__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* The title. Archivo pushed wide and heavy — the one loud thing on the page. */
.wp-block-prismal-product-landing .pl-title {
	font-family: var(--pl-font-display);
	font-size: clamp(56px, 10.5vw, 190px);
	/* Archivo's @font-face declares 300-700, so 700 is the heaviest cut the
	   browser will render; width does the rest of the work. */
	font-weight: 700;
	font-variation-settings: "wght" 700, "wdth" 112;
	letter-spacing: -0.045em;
	line-height: 0.84;
	color: var(--pl-accent);
	overflow-wrap: anywhere;
}

.wp-block-prismal-product-landing .pl-tagline {
	margin-top: clamp(12px, 1.6vw, 20px);
	max-width: 34ch;
	font-family: var(--pl-font-narrow);
	font-size: clamp(18px, 2.2vw, 27px);
	font-style: italic;
	font-weight: 300;
	line-height: 1.25;
	color: var(--pl-ink-60);
}

.wp-block-prismal-product-landing .pl-hero__bottom {
	margin-top: clamp(28px, 4vw, 48px);
}

/* -------------------------------------------------------------------------
 * Snippet slider — the "screens" of the reference layout
 * ---------------------------------------------------------------------- */

/* The strip runs off the right edge of the viewport so the next card is always
   half-visible. Where a rail sits beside it, it stops at the column instead. */
.wp-block-prismal-product-landing .pl-slider {
	margin-inline-end: calc(var(--pl-gutter) * -1);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wp-block-prismal-product-landing .pl-slider::-webkit-scrollbar {
	display: none;
}

.wp-block-prismal-product-landing .pl-slider__track {
	display: flex;
	gap: 18px;
	width: max-content;
	padding-inline-end: var(--pl-gutter);
	padding-block: 4px 8px;
}

.wp-block-prismal-product-landing .pl-slider__item {
	scroll-snap-align: start;
	width: min(78vw, 420px);
}

.wp-block-prismal-product-landing .pl-screen {
	display: block;
	width: 100%;
	height: 248px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--pl-code-bg);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 24px 60px -34px rgba(10, 20, 60, 0.7);
	text-align: left;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}

.wp-block-prismal-product-landing .pl-screen:hover,
.wp-block-prismal-product-landing .pl-screen:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.1) inset,
		0 34px 80px -34px rgba(10, 20, 60, 0.85);
}

.wp-block-prismal-product-landing .pl-screen__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	padding-inline: 14px;
	border-bottom: 1px solid var(--pl-code-bar);
	font-family: var(--pl-font-narrow);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pl-code-dim);
}

.wp-block-prismal-product-landing .pl-screen__dots {
	display: flex;
	gap: 5px;
}

.wp-block-prismal-product-landing .pl-screen__dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
}

.wp-block-prismal-product-landing .pl-screen__name {
	color: rgba(232, 236, 246, 0.8);
}

.wp-block-prismal-product-landing .pl-screen__lang {
	margin-inline-start: auto;
	padding: 3px 7px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--pl-accent) 26%, transparent);
	color: #fff;
	font-size: 9px;
}

.wp-block-prismal-product-landing .pl-screen__code {
	position: relative;
	display: block;
	height: calc(100% - 34px);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

.wp-block-prismal-product-landing .pl-screen__code pre {
	margin: 0;
	padding: 16px 18px;
	overflow: visible;
	background: none;
	color: var(--pl-code-ink);
	font-family: var(--pl-font-mono);
	font-size: 12px;
	line-height: 1.65;
	tab-size: 4;
	white-space: pre;
}

.wp-block-prismal-product-landing .pl-screen__code code {
	background: none;
	padding: 0;
	font: inherit;
	color: inherit;
}

.wp-block-prismal-product-landing .pl-screen__caption {
	margin-top: 10px;
	font-family: var(--pl-font-narrow);
	font-size: 12px;
	line-height: 1.45;
	color: var(--pl-ink-40);
}

/* A screenshot card carries no window chrome, and its width follows the image's
   own aspect at the strip's shared height. That lets a 9:16 phone capture and a
   2:1 banner share one row with neither cropped nor letterboxed. */
.wp-block-prismal-product-landing .pl-slider__item.is-shot {
	width: auto;
}

.wp-block-prismal-product-landing .pl-screen.is-shot {
	width: auto;
	background: color-mix(in srgb, var(--pl-accent) 12%, var(--pl-bone));
}

.wp-block-prismal-product-landing .pl-screen__shot {
	display: block;
	height: 100%;
}

/* The item's width is the card's width, which the image decides. A caption is
   usually longer than a portrait screenshot is wide, so it must not take part in
   that intrinsic sizing: zero width keeps it out of the measurement, and the
   min-width puts it back to the card's own width to wrap inside. */
.wp-block-prismal-product-landing .pl-slider__item.is-shot {
	display: flex;
	flex-direction: column;
}

.wp-block-prismal-product-landing .pl-slider__item.is-shot .pl-screen__caption {
	width: 0;
	min-width: 100%;
}

.wp-block-prismal-product-landing .pl-screen__shot img {
	display: block;
	height: 100%;
	width: auto;
}

/* Enlarged, a screenshot is bounded by the viewport rather than the card. */
.wp-block-prismal-product-landing .pl-lightbox__body .pl-screen.is-shot {
	width: auto;
	background: none;
}

.wp-block-prismal-product-landing .pl-lightbox__body .pl-screen__shot {
	height: auto;
}

.wp-block-prismal-product-landing .pl-lightbox__body .pl-screen__shot img {
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 72vh;
	margin-inline: auto;
}

/* Tokens. */
.wp-block-prismal-product-landing .pl-t-comment {
	color: rgba(232, 236, 246, 0.38);
	font-style: italic;
}

.wp-block-prismal-product-landing .pl-t-keyword {
	color: color-mix(in srgb, var(--pl-accent-soft) 82%, #fff);
	font-weight: 600;
}

.wp-block-prismal-product-landing .pl-t-string,
.wp-block-prismal-product-landing .pl-t-template {
	color: #8ee6b8;
}

.wp-block-prismal-product-landing .pl-t-number {
	color: #ffc178;
}

.wp-block-prismal-product-landing .pl-t-type {
	color: #ffd9f0;
}

.wp-block-prismal-product-landing .pl-t-sql {
	color: color-mix(in srgb, var(--pl-accent-soft) 70%, #fff);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Install commands and the docs link
 * ---------------------------------------------------------------------- */

.wp-block-prismal-product-landing .pl-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: clamp(20px, 2.6vw, 30px);
}

.wp-block-prismal-product-landing .pl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* The whole chip is the copy button — no separate control. */
.wp-block-prismal-product-landing .pl-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px 9px 14px;
	border-radius: 999px;
	background: var(--pl-ink);
	color: #fff;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.wp-block-prismal-product-landing .pl-chip:hover,
.wp-block-prismal-product-landing .pl-chip:focus-visible {
	background: color-mix(in srgb, var(--pl-accent) 82%, #000);
}

.wp-block-prismal-product-landing .pl-chip:active {
	transform: scale(0.98);
}

.wp-block-prismal-product-landing .pl-chip__cmd {
	background: none;
	padding: 0;
	font-family: var(--pl-font-mono);
	font-size: 12.5px;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.wp-block-prismal-product-landing .pl-chip__state {
	font-family: var(--pl-font-narrow);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	transition: color 0.3s ease;
}

.wp-block-prismal-product-landing .pl-chip.is-copied .pl-chip__state {
	color: var(--pl-accent-soft);
}

/* An outbound link -- a store, a repository. Shares the docs link's pill shape;
   the primary one is filled, so a product you install leads with where to get
   it and the documentation stays the quieter second option. */
.wp-block-prismal-product-landing .pl-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid color-mix(in srgb, var(--pl-accent) 40%, transparent);
	border-radius: 999px;
	color: color-mix(in srgb, var(--pl-accent) 88%, #000);
	font-family: var(--pl-font-narrow);
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.wp-block-prismal-product-landing .pl-link.is-primary {
	background: var(--pl-ink);
	border-color: var(--pl-ink);
	color: #fff;
}

.wp-block-prismal-product-landing .pl-link:hover,
.wp-block-prismal-product-landing .pl-link:focus-visible {
	background: color-mix(in srgb, var(--pl-accent) 10%, transparent);
	border-color: color-mix(in srgb, var(--pl-accent) 70%, transparent);
	text-decoration: none;
}

.wp-block-prismal-product-landing .pl-link.is-primary:hover,
.wp-block-prismal-product-landing .pl-link.is-primary:focus-visible {
	background: color-mix(in srgb, var(--pl-accent) 82%, #000);
	border-color: color-mix(in srgb, var(--pl-accent) 82%, #000);
	color: #fff;
}

.wp-block-prismal-product-landing .pl-link span {
	transition: transform 0.3s ease;
}

.wp-block-prismal-product-landing .pl-link:hover span {
	transform: translateX(3px);
}

.wp-block-prismal-product-landing .pl-docs {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid color-mix(in srgb, var(--pl-accent) 40%, transparent);
	border-radius: 999px;
	color: color-mix(in srgb, var(--pl-accent) 88%, #000);
	font-family: var(--pl-font-narrow);
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.wp-block-prismal-product-landing .pl-docs:hover,
.wp-block-prismal-product-landing .pl-docs:focus-visible {
	background: color-mix(in srgb, var(--pl-accent) 10%, transparent);
	border-color: color-mix(in srgb, var(--pl-accent) 70%, transparent);
	text-decoration: none;
}

.wp-block-prismal-product-landing .pl-docs span {
	transition: transform 0.3s ease;
}

.wp-block-prismal-product-landing .pl-docs:hover span {
	transform: translateX(3px);
}

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

.wp-block-prismal-product-landing .pl-rail {
	display: none;
}

.wp-block-prismal-product-landing .pl-rail__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 22px;
}

.wp-block-prismal-product-landing .pl-rail__link {
	display: flex;
	align-items: center;
	gap: 12px;
	opacity: 0.4;
	transition: opacity 0.3s ease;
}

.wp-block-prismal-product-landing .pl-rail__link:hover,
.wp-block-prismal-product-landing .pl-rail__link.is-current {
	opacity: 1;
}

.wp-block-prismal-product-landing .pl-rail__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pl-dot, var(--pl-accent));
}

.wp-block-prismal-product-landing .pl-rail__name {
	font-family: var(--pl-font-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Centres when the mark is the rail's only occupant, sits below the list when
   the shelf is switched on. */
.wp-block-prismal-product-landing .pl-rail__art {
	margin-block: auto;
}

.wp-block-prismal-product-landing .pl-rail__art img {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	margin-inline-start: auto;
	filter: drop-shadow(0 26px 46px rgba(10, 40, 120, 0.24));
}

/* -------------------------------------------------------------------------
 * Scroll cue
 * ---------------------------------------------------------------------- */

.wp-block-prismal-product-landing .pl-cue {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: clamp(24px, 3vw, 40px);
	align-self: center;
}

.wp-block-prismal-product-landing .pl-cue__label {
	font-family: var(--pl-font-narrow);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pl-ink-60);
	transition: color 0.3s ease;
}

.wp-block-prismal-product-landing .pl-cue:hover .pl-cue__label {
	color: var(--pl-ink);
}

.wp-block-prismal-product-landing .pl-cue__line {
	width: 1px;
	height: 40px;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0.3), transparent);
	animation: pl-cue-pulse 2.4s ease-in-out infinite;
}

@keyframes pl-cue-pulse {
	0%, 100% { opacity: 0.5; transform: translateY(0); }
	50%      { opacity: 1;   transform: translateY(4px); }
}

/* -------------------------------------------------------------------------
 * Article
 * ---------------------------------------------------------------------- */

.wp-block-prismal-product-landing .pl-article {
	position: relative;
	z-index: 1;
	background: var(--pl-bg);
	scroll-margin-top: 80px;
}

.wp-block-prismal-product-landing .pl-article__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	padding-block: clamp(56px, 8vw, 104px);
}

.wp-block-prismal-product-landing .pl-side {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.wp-block-prismal-product-landing .pl-side__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.wp-block-prismal-product-landing .pl-side__year {
	margin-top: 10px;
	font-family: var(--pl-font-display);
	font-size: 20px;
	font-weight: 600;
}

.wp-block-prismal-product-landing .pl-lede {
	max-width: 44ch;
	font-family: var(--pl-font-display);
	font-size: clamp(22px, 2.6vw, 31px);
	font-weight: 500;
	font-variation-settings: "wght" 500, "wdth" 100;
	letter-spacing: -0.015em;
	line-height: 1.26;
}

.wp-block-prismal-product-landing .pl-para {
	max-width: 60ch;
	margin-top: 22px;
	font-size: 15.5px;
	line-height: 1.72;
	color: var(--pl-ink-60);
}

/* -------------------------------------------------------------------------
 * Stats
 * ---------------------------------------------------------------------- */

.wp-block-prismal-product-landing .pl-stats {
	margin-top: clamp(40px, 5vw, 68px);
	padding-block: clamp(28px, 3.4vw, 42px);
	border-block: 1px solid var(--pl-line);
}

.wp-block-prismal-product-landing .pl-stats__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 26px;
}

.wp-block-prismal-product-landing .pl-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wp-block-prismal-product-landing .pl-stat__value {
	font-family: var(--pl-font-display);
	font-size: clamp(38px, 5vw, 60px);
	font-weight: 700;
	font-variation-settings: "wght" 700, "wdth" 104;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--pl-accent);
	font-variant-numeric: tabular-nums;
}

.wp-block-prismal-product-landing .pl-stat__label {
	font-family: var(--pl-font-narrow);
	font-size: 11px;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--pl-ink-60);
}

.wp-block-prismal-product-landing .pl-stat__note {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--pl-ink-40);
}

/* Sends the reader to the page the figure is published on. */
.wp-block-prismal-product-landing .pl-stat__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	color: var(--pl-accent);
	font-family: var(--pl-font-narrow);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wp-block-prismal-product-landing .pl-stat__link span {
	transition: transform 0.3s ease;
}

.wp-block-prismal-product-landing .pl-stat__link:hover {
	text-decoration: none;
}

.wp-block-prismal-product-landing .pl-stat__link:hover span {
	transform: translateX(3px);
}

.wp-block-prismal-product-landing .pl-stats__footnote {
	margin-top: 22px;
	font-family: var(--pl-font-mono);
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--pl-ink-40);
}

/* -------------------------------------------------------------------------
 * Feature index
 * ---------------------------------------------------------------------- */

.wp-block-prismal-product-landing .pl-band {
	padding-block: clamp(52px, 7vw, 88px);
}

.wp-block-prismal-product-landing .pl-band--features {
	background: var(--pl-bone);
	border-block: 1px solid var(--pl-line-soft);
}

.wp-block-prismal-product-landing .pl-band__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(30px, 4vw, 46px);
}

.wp-block-prismal-product-landing .pl-band__rule {
	flex: 1;
	height: 1px;
	background: var(--pl-line);
}

.wp-block-prismal-product-landing .pl-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(28px, 3.4vw, 46px);
}

.wp-block-prismal-product-landing .pl-feature__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.wp-block-prismal-product-landing .pl-feature__num {
	font-family: var(--pl-font-mono);
	font-size: 12px;
	color: var(--pl-ink-40);
}

.wp-block-prismal-product-landing .pl-feature__title {
	font-family: var(--pl-font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 600;
	font-variation-settings: "wght" 600, "wdth" 100;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

/* A linked feature title keeps the heading's weight; the arrow carries the
   affordance and is visible without hovering, for touch and for scanning. */
.wp-block-prismal-product-landing .pl-feature__link {
	color: inherit;
	transition: color 0.3s ease;
}

.wp-block-prismal-product-landing .pl-feature__link:hover,
.wp-block-prismal-product-landing .pl-feature__link:focus-visible {
	color: var(--pl-accent);
	text-decoration: none;
}

.wp-block-prismal-product-landing .pl-feature__arrow {
	display: inline-block;
	margin-inline-start: 7px;
	color: var(--pl-accent);
	font-size: 0.66em;
	vertical-align: 0.14em;
	opacity: 0.5;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.wp-block-prismal-product-landing .pl-feature:hover .pl-feature__arrow,
.wp-block-prismal-product-landing .pl-feature__link:focus-visible .pl-feature__arrow {
	opacity: 1;
	transform: translateX(3px);
}

.wp-block-prismal-product-landing .pl-feature__desc {
	max-width: 40ch;
	margin-top: 10px;
	margin-inline-start: 26px;
	font-size: 14px;
	line-height: 1.62;
	color: var(--pl-ink-60);
}

.wp-block-prismal-product-landing .pl-feature__underline {
	display: block;
	width: 0;
	height: 1px;
	margin-top: 18px;
	margin-inline-start: 26px;
	background: color-mix(in srgb, var(--pl-accent) 40%, transparent);
	transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wp-block-prismal-product-landing .pl-feature:hover .pl-feature__underline {
	width: calc(100% - 26px);
}

/* -------------------------------------------------------------------------
 * Quote
 * ---------------------------------------------------------------------- */

.wp-block-prismal-product-landing .pl-band--quote {
	background: color-mix(in srgb, var(--pl-accent) 9%, var(--pl-bg));
}

.wp-block-prismal-product-landing .pl-quote {
	text-align: center;
}

/* The measure has to live on the element that carries the display size — a ch
   on the figure would be measured against the 16px body font instead. */
.wp-block-prismal-product-landing .pl-quote__text {
	max-width: 22ch;
	margin-inline: auto;
	font-family: var(--pl-font-display);
	font-size: clamp(28px, 4.6vw, 58px);
	font-weight: 700;
	font-variation-settings: "wght" 700, "wdth" 96;
	letter-spacing: -0.035em;
	line-height: 1.04;
	quotes: none;
}

.wp-block-prismal-product-landing .pl-quote__source {
	margin-top: 24px;
	font-family: var(--pl-font-narrow);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pl-ink-60);
}

/* Underlined rather than bordered, so a source that wraps to two lines still
   underlines both of them. */
.wp-block-prismal-product-landing .pl-quote__source a {
	text-decoration: underline;
	text-decoration-color: var(--pl-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.wp-block-prismal-product-landing .pl-quote__source a:hover {
	color: var(--pl-accent);
	text-decoration-color: var(--pl-accent);
}

/* -------------------------------------------------------------------------
 * Next on the shelf
 * ---------------------------------------------------------------------- */

.wp-block-prismal-product-landing .pl-next {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: clamp(44px, 6vw, 76px);
	border-top: 1px solid var(--pl-line);
}

.wp-block-prismal-product-landing .pl-next__link {
	display: flex;
	align-items: center;
	gap: 22px;
}

.wp-block-prismal-product-landing .pl-next__art {
	flex: none;
	width: 92px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 14px;
	background: var(--pl-bone);
}

.wp-block-prismal-product-landing .pl-next__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.wp-block-prismal-product-landing .pl-next__link:hover .pl-next__art img {
	transform: scale(1.05);
}

.wp-block-prismal-product-landing .pl-next__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wp-block-prismal-product-landing .pl-next__name {
	font-family: var(--pl-font-display);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1;
}

.wp-block-prismal-product-landing .pl-next__tagline {
	font-family: var(--pl-font-narrow);
	font-style: italic;
	font-size: 14px;
	color: var(--pl-ink-60);
}

.wp-block-prismal-product-landing .pl-next__more {
	margin-top: 6px;
	font-family: var(--pl-font-narrow);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pl-accent);
}

/* -------------------------------------------------------------------------
 * Lightbox
 * ---------------------------------------------------------------------- */

.wp-block-prismal-product-landing .pl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
}

.wp-block-prismal-product-landing .pl-lightbox[hidden] {
	display: none !important;
}

.wp-block-prismal-product-landing .pl-lightbox__scrim {
	position: absolute;
	inset: 0;
	background: rgba(254, 254, 251, 0.86);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
}

.wp-block-prismal-product-landing .pl-lightbox__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(980px, 100%);
	max-height: 100%;
	gap: 14px;
}

.wp-block-prismal-product-landing .pl-lightbox__head,
.wp-block-prismal-product-landing .pl-lightbox__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* min-width:0 lets a long title wrap inside its share of the row instead of
   forcing the row wider and squeezing the round controls beside it. */
.wp-block-prismal-product-landing .pl-lightbox__head .pl-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

.wp-block-prismal-product-landing .pl-lightbox__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--pl-ink);
	color: #fff;
	font-size: 17px;
	line-height: 1;
}

.wp-block-prismal-product-landing .pl-lightbox__body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	border-radius: 18px;
	background: var(--pl-code-bg);
	box-shadow: 0 40px 120px -40px rgba(10, 20, 60, 0.6);
}

/* Inside the lightbox the code is not a card any more: no clamp, no mask. */
.wp-block-prismal-product-landing .pl-lightbox__body .pl-screen {
	height: auto;
	box-shadow: none;
	transform: none;
	cursor: default;
}

.wp-block-prismal-product-landing .pl-lightbox__body .pl-screen__code {
	height: auto;
	overflow: auto;
	-webkit-mask-image: none;
	mask-image: none;
}

.wp-block-prismal-product-landing .pl-lightbox__body .pl-screen__code pre {
	padding: 22px 26px;
	font-size: 13.5px;
	line-height: 1.75;
}

.wp-block-prismal-product-landing .pl-lightbox__nav {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--pl-line);
	border-radius: 50%;
	transition: background-color 0.3s ease;
}

.wp-block-prismal-product-landing .pl-lightbox__nav:hover {
	background: rgba(10, 10, 10, 0.05);
}

.wp-block-prismal-product-landing .pl-lightbox__count {
	font-family: var(--pl-font-narrow);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pl-ink-40);
}

/* -------------------------------------------------------------------------
 * Wider viewports
 * ---------------------------------------------------------------------- */

@media (min-width: 782px) {
	.wp-block-prismal-product-landing .pl-hero__grid.is-railed {
		grid-template-columns: minmax(0, 1fr) 232px;
	}

	.wp-block-prismal-product-landing .pl-rail {
		display: flex;
		flex-direction: column;
		padding-inline-start: 26px;
		border-inline-start: 1px solid var(--pl-line);
	}

	.wp-block-prismal-product-landing .pl-hero__grid.is-railed .pl-slider {
		margin-inline-end: 0;
	}

	.wp-block-prismal-product-landing .pl-hero__grid.is-railed .pl-slider__track {
		padding-inline-end: 0;
	}

	.wp-block-prismal-product-landing .pl-hero__bottom {
		margin-top: auto;
	}

	.wp-block-prismal-product-landing .pl-article__grid {
		grid-template-columns: 210px minmax(0, 1fr);
		gap: clamp(32px, 5vw, 80px);
	}

	.wp-block-prismal-product-landing .pl-side {
		position: sticky;
		top: 96px;
		align-self: start;
	}

	.wp-block-prismal-product-landing .pl-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.wp-block-prismal-product-landing .pl-slider__item {
		width: 400px;
	}

	.wp-block-prismal-product-landing .pl-screen {
		height: 262px;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wp-block-prismal-product-landing *,
	.wp-block-prismal-product-landing *::before,
	.wp-block-prismal-product-landing *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.wp-block-prismal-product-landing .pl-feature__underline {
		width: calc(100% - 26px);
	}
}