/*
 * Starward Navigators — Editorial Luxury
 * Vibe archetype: Editorial Luxury.  Layout archetype: Asymmetrical Bento.
 *
 * Everything is scoped under .sn-lux so the rest of the site is untouched.
 *
 * Deliberate rejections of the previous build:
 *   - no 1px solid grey borders          -> hairline rings at low alpha
 *   - no 0 4px 6px rgba(0,0,0,.05)       -> wide, diffused, warm-tinted ambient shadow
 *   - no flat cards on a flat background -> Double-Bezel (outer shell + inner core)
 *   - no ease / ease-in-out              -> cubic-bezier(.32,.72,0,1) throughout
 *   - no Inter                           -> Instrument Serif display + Jakarta UI
 */

/* ---------- Tokens ---------- */

.sn-lux {
	--lx-cream: var( --wp--preset--color--lux-cream );
	--lx-sand: var( --wp--preset--color--lux-sand );
	--lx-ink: var( --wp--preset--color--lux-ink );
	--lx-espresso: var( --wp--preset--color--lux-espresso );
	--lx-body: var( --wp--preset--color--lux-body );
	--lx-muted: var( --wp--preset--color--lux-muted );
	--lx-accent: var( --wp--preset--color--lux-accent );
	--lx-gold: var( --wp--preset--color--lux-gold );
	--lx-hairline: var( --wp--preset--color--lux-hairline );

	/* Concentric radii — inner = outer minus shell padding. */
	--lx-shell-pad: 8px;
	--lx-radius: 32px;
	--lx-radius-inner: calc( var( --lx-radius ) - var( --lx-shell-pad ) );

	/* Warm ambient shadow, never neutral black. */
	--lx-lift: 0 1px 2px rgba( 42, 33, 27, 0.04 ),
	           0 8px 24px rgba( 42, 33, 27, 0.06 ),
	           0 32px 64px -16px rgba( 42, 33, 27, 0.10 );
	--lx-lift-hover: 0 2px 4px rgba( 42, 33, 27, 0.05 ),
	                 0 16px 40px rgba( 42, 33, 27, 0.09 ),
	                 0 48px 88px -20px rgba( 42, 33, 27, 0.16 );

	--lx-ease: cubic-bezier( 0.32, 0.72, 0, 1 );

	background: var( --lx-cream );
	color: var( --lx-body );
	font-family: var( --wp--preset--font-family--jakarta );
	--sn-focus-ring: var( --lx-accent );
}

/* ---------- Film grain: fixed, pointer-events-none, never on a scroller ---------- */

.sn-lux::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.035;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E" );
}

/* ---------- Macro whitespace ---------- */

.sn-lux .lx-section { padding-block: 10rem; position: relative; z-index: 2; }
.sn-lux .lx-section--tight { padding-block: 6rem; }

@media (max-width: 782px) {
	.sn-lux .lx-section { padding-block: 4.5rem; }
	.sn-lux .lx-section--tight { padding-block: 3.5rem; }
}

.lx-wrap { max-width: 1240px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 782px) { .lx-wrap { padding-inline: 20px; } }

/* ---------- Typography ---------- */

.sn-lux .lx-display {
	font-family: var( --wp--preset--font-family--editorial );
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -0.02em;
	color: var( --lx-ink );
	text-wrap: balance;
}

.sn-lux .lx-display em {
	font-style: italic;
	color: var( --lx-accent );
}

.sn-lux .lx-lede {
	font-size: clamp( 18px, 1.1vw + 14px, 22px );
	line-height: 1.6;
	color: var( --lx-body );
	max-width: 46ch;
}

/* Microscopic pill eyebrow. */
.sn-lux .lx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --lx-muted );
	background: rgba( 42, 33, 27, 0.04 );
	box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.06 );
}

.sn-lux .lx-eyebrow::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 999px;
	background: var( --lx-accent );
}

/* ---------- Double-Bezel ---------- */

.lx-shell {
	background: rgba( 42, 33, 27, 0.035 );
	box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.05 );
	border-radius: var( --lx-radius );
	padding: var( --lx-shell-pad );
	transition: box-shadow .7s var( --lx-ease ), transform .7s var( --lx-ease );
}

.lx-core {
	background: #fff;
	border-radius: var( --lx-radius-inner );
	box-shadow: var( --lx-lift ), inset 0 1px 1px rgba( 255, 255, 255, 0.9 );
	padding: 36px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (max-width: 782px) { .lx-core { padding: 26px; } }

.lx-shell--interactive:hover { transform: translateY( -3px ); }
.lx-shell--interactive:hover .lx-core { box-shadow: var( --lx-lift-hover ), inset 0 1px 1px rgba( 255, 255, 255, 0.9 ); }
.lx-shell--interactive:focus-within .lx-core { box-shadow: var( --lx-lift-hover ); }

/* Inverted core — the rhythm break. */
.lx-core--ink {
	background: var( --lx-ink );
	color: rgba( 255, 255, 255, 0.86 );
	box-shadow: var( --lx-lift ), inset 0 1px 1px rgba( 255, 255, 255, 0.10 );
}
.lx-core--ink .lx-cell-title { color: #fff; }
.lx-core--ink .lx-eyebrow { background: rgba( 255, 255, 255, 0.08 ); color: rgba( 255, 255, 255, 0.88 ); box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.10 ); }
.lx-core--ink a { color: #fff; }

.lx-core--accent {
	background: linear-gradient( 160deg, var( --lx-accent ), #7C2A0E );
	color: rgba( 255, 255, 255, 0.85 );
	box-shadow: var( --lx-lift ), inset 0 1px 1px rgba( 255, 255, 255, 0.18 );
}
.lx-core--accent .lx-cell-title { color: #fff; }
.lx-core--accent .lx-eyebrow { background: rgba( 255, 255, 255, 0.14 ); color: #fff; box-shadow: none; }

.lx-cell-title {
	font-family: var( --wp--preset--font-family--editorial );
	font-size: clamp( 24px, 1.2vw + 18px, 32px );
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var( --lx-ink );
	margin: 0;
}

.lx-cell-body { font-size: 16.5px; line-height: 1.65; margin: 0; color: inherit; }

/* ---------- Asymmetrical bento ---------- */

.lx-bento {
	display: grid;
	grid-template-columns: repeat( 12, 1fr );
	gap: 20px;
}

.lx-c-7  { grid-column: span 7; }
.lx-c-5  { grid-column: span 5; }
.lx-c-4  { grid-column: span 4; }
.lx-c-8  { grid-column: span 8; }
.lx-c-12 { grid-column: span 12; }
.lx-r-2  { grid-row: span 2; }

@media (max-width: 1024px) {
	.lx-bento { grid-template-columns: repeat( 6, 1fr ); }
	.lx-c-7, .lx-c-5, .lx-c-8, .lx-c-12 { grid-column: span 6; }
	.lx-c-4 { grid-column: span 3; }
	.lx-r-2 { grid-row: auto; }
}

@media (max-width: 768px) {
	.lx-bento { grid-template-columns: 1fr; gap: 16px; }
	.lx-c-7, .lx-c-5, .lx-c-4, .lx-c-8, .lx-c-12 { grid-column: span 1; }
}

/* ---------- Island CTA with button-in-button ---------- */

.sn-lux .lx-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 10px 10px 10px 26px;
	border-radius: 999px;
	background: var( --lx-ink );
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: transform .7s var( --lx-ease ), box-shadow .7s var( --lx-ease );
	box-shadow: 0 1px 2px rgba( 23, 19, 16, .2 ), 0 12px 28px -8px rgba( 23, 19, 16, .45 );
}

.sn-lux .lx-cta__icon {
	width: 34px; height: 34px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.12 );
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .7s var( --lx-ease ), background-color .7s var( --lx-ease );
}

.sn-lux .lx-cta:hover { box-shadow: 0 2px 4px rgba( 23, 19, 16, .22 ), 0 20px 44px -10px rgba( 23, 19, 16, .55 ); }
.sn-lux .lx-cta:hover .lx-cta__icon { transform: translate( 3px, -1px ) scale( 1.06 ); background: rgba( 255, 255, 255, 0.2 ); }
.sn-lux .lx-cta:active { transform: scale( 0.98 ); }

.sn-lux .lx-cta--ghost {
	background: transparent;
	color: var( --lx-ink );
	box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.18 );
}
.sn-lux .lx-cta--ghost .lx-cta__icon { background: rgba( 42, 33, 27, 0.06 ); }
.sn-lux .lx-cta--ghost:hover { box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.35 ); }

/* ---------- Full-bleed inverted band — the rhythm break ---------- */

.lx-band {
	background: var( --lx-ink );
	color: rgba( 255, 255, 255, 0.86 );
	position: relative;
	z-index: 2;
}
.lx-band .lx-display, .lx-band .lx-cell-title { color: #fff; }
.lx-band .lx-eyebrow { background: rgba( 255, 255, 255, 0.08 ); color: rgba( 255, 255, 255, 0.88 ); box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.10 ); }
.lx-band .lx-cta { background: #fff; color: var( --lx-ink ); }
.lx-band .lx-cta__icon { background: rgba( 23, 19, 16, 0.10 ); }

.lx-stats { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 48px; }
@media (max-width: 768px) { .lx-stats { grid-template-columns: 1fr; gap: 32px; } }

.lx-stat__n {
	font-family: var( --wp--preset--font-family--editorial );
	font-size: clamp( 46px, 4vw, 76px );
	line-height: 1;
	color: #fff;
	display: block;
}
.lx-stat__l { font-size: 17px; line-height: 1.6; color: rgba( 255, 255, 255, 0.86 ); margin-top: 12px; }

/* ---------- Editorial split ---------- */

.lx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
@media (max-width: 900px) { .lx-split { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Media frames ---------- */

.lx-frame { border-radius: var( --lx-radius-inner ); overflow: hidden; background: var( --lx-sand ); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; }
.lx-frame img, .lx-frame video { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.lx-frame--empty { box-shadow: inset 0 0 0 1px var( --lx-hairline ); color: var( --lx-muted ); font-size: 12.5px; text-align: center; padding: 16px; letter-spacing: .01em; }
.lx-frame--video { aspect-ratio: 16 / 9; background: var( --lx-ink ); }

/* ---------- Scroll entry: heavy fade-up with blur ---------- */

/*
 * Progressive enhancement. Content is visible by default; the hidden start
 * state is only applied once JS has added .lx-js to <html>, so a script
 * failure or a blocked file can never leave the page blank.
 */
@media (prefers-reduced-motion: no-preference) {
	/*
 * Tuned down from 64px / blur(12px) / 900ms. At that weight, content was still
 * invisible for roughly a second after you scrolled to it — which reads as slow
 * loading, not as polish. Shorter travel, lighter blur, and the observer fires
 * BEFORE the element enters view so the reveal is finishing as it arrives.
 */
	.lx-js .lx-rise { opacity: 0; transform: translateY( 28px ); filter: blur( 6px ); transition: opacity .55s var( --lx-ease ), transform .55s var( --lx-ease ), filter .55s var( --lx-ease ); }
	.lx-js .lx-rise.is-in { opacity: 1; transform: none; filter: blur( 0 ); }
	.lx-js .lx-rise:nth-child(2) { transition-delay: .05s; }
	.lx-js .lx-rise:nth-child(3) { transition-delay: .10s; }
	.lx-js .lx-rise:nth-child(4) { transition-delay: .15s; }
	.lx-js .lx-rise:nth-child(5) { transition-delay: .20s; }
	.lx-js .lx-rise:nth-child(6) { transition-delay: .25s; }
}

/* ---------- Floating glass pill nav (replaces the glued-to-top bar) ---------- */

.sn-lux-nav {
	position: sticky;
	top: 18px;
	z-index: 40;
	width: max-content;
	margin: 18px auto 0;
	padding: 8px 8px 8px 22px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	gap: 26px;
	background: rgba( 253, 251, 247, 0.72 );
	backdrop-filter: saturate( 180% ) blur( 20px );
	-webkit-backdrop-filter: saturate( 180% ) blur( 20px );
	box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.07 ), 0 8px 28px -10px rgba( 42, 33, 27, 0.22 );
}

.lx-nav__mark {
	font-family: var( --wp--preset--font-family--editorial );
	font-size: 19px;
	color: var( --lx-ink );
	text-decoration: none;
	letter-spacing: -0.01em;
	flex: none;
}

.lx-nav__menu { display: flex; align-items: center; gap: 26px; }

.lx-nav__links {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

.lx-nav__links > li { position: relative; }

.lx-nav__links a,
.lx-nav__toggle {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 7px 11px;
	border-radius: 999px;
	color: var( --lx-body );
	text-decoration: none;
	font: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background .3s var( --lx-ease ), color .3s var( --lx-ease );
}

.lx-nav__links a:hover,
.lx-nav__toggle:hover { background: rgba( 42, 33, 27, 0.06 ); color: var( --lx-ink ); }

.lx-nav__chev { transition: transform .3s var( --lx-ease ); }
.lx-nav__toggle[aria-expanded="true"] .lx-nav__chev { transform: rotate( 180deg ); }

/*
 * Submenu. Hidden with visibility rather than display so it can transition and
 * so its links stay out of the tab order while closed.
 */
.lx-nav__sub {
	position: absolute;
	top: calc( 100% + 12px );
	left: 0;
	min-width: 232px;
	list-style: none;
	margin: 0;
	padding: 8px;
	border-radius: 20px;
	background: rgba( 253, 251, 247, 0.94 );
	backdrop-filter: saturate( 180% ) blur( 20px );
	-webkit-backdrop-filter: saturate( 180% ) blur( 20px );
	box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.07 ), var( --lx-lift );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -6px );
	transition: opacity .3s var( --lx-ease ), transform .3s var( --lx-ease ), visibility .3s;
}

.lx-nav__has-sub:hover .lx-nav__sub,
.lx-nav__has-sub:focus-within .lx-nav__sub,
.lx-nav__toggle[aria-expanded="true"] + .lx-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.lx-nav__sub a { padding: 9px 12px; border-radius: 13px; }

.lx-nav__actions { display: flex; align-items: center; gap: 14px; flex: none; }

.lx-nav__login { font-size: 14px; color: var( --lx-body ); text-decoration: none; white-space: nowrap; }
.lx-nav__login:hover { color: var( --lx-ink ); }

.lx-nav__cta { padding: 7px 7px 7px 18px; font-size: 14px; }
.lx-nav__cta .lx-cta__icon { width: 28px; height: 28px; }

/* Burger — appears only once the pill runs out of room. */
.lx-nav__burger {
	display: none;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
	position: relative;
	flex: none;
}

.lx-nav__burger span {
	position: absolute;
	left: 11px;
	width: 18px;
	height: 1.5px;
	background: var( --lx-ink );
	border-radius: 2px;
	transition: transform .4s var( --lx-ease );
}

.lx-nav__burger span:nth-child(1) { top: 17px; }
.lx-nav__burger span:nth-child(2) { top: 23px; }

/* The two bars rotate into an X rather than simply vanishing. */
.lx-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY( 3px ) rotate( 45deg ); }
.lx-nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY( -3px ) rotate( -45deg ); }

@media (max-width: 1080px) {
	.sn-lux-nav { width: calc( 100% - 32px ); justify-content: space-between; gap: 12px; }
	.lx-nav__burger { display: block; }

	.lx-nav__menu {
		position: absolute;
		top: calc( 100% + 12px );
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 16px;
		border-radius: 28px;
		background: rgba( 253, 251, 247, 0.97 );
		backdrop-filter: saturate( 180% ) blur( 24px );
		-webkit-backdrop-filter: saturate( 180% ) blur( 24px );
		box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.07 ), var( --lx-lift );
		opacity: 0;
		visibility: hidden;
		transform: translateY( -8px );
		transition: opacity .4s var( --lx-ease ), transform .4s var( --lx-ease ), visibility .4s;
		max-height: calc( 100dvh - 140px );
		overflow-y: auto;
	}

	.sn-lux-nav.is-open .lx-nav__menu { opacity: 1; visibility: visible; transform: translateY( 0 ); }

	.lx-nav__links { flex-direction: column; align-items: stretch; gap: 2px; font-size: 16px; }
	.lx-nav__links a, .lx-nav__toggle { padding: 11px 14px; border-radius: 14px; }
	.lx-nav__toggle { width: 100%; justify-content: space-between; }

	/* Submenus become inline accordions — there is no hover on touch. */
	.lx-nav__sub {
		position: static;
		min-width: 0;
		padding: 2px 0 6px 14px;
		margin-left: 14px;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
		border-left: 1px solid var( --lx-hairline );
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.lx-nav__has-sub:hover .lx-nav__sub,
	.lx-nav__has-sub:focus-within .lx-nav__sub { display: none; }
	.lx-nav__toggle[aria-expanded="true"] + .lx-nav__sub { display: block; }

	.lx-nav__actions {
		flex-direction: row-reverse;
		justify-content: space-between;
		padding-top: 12px;
		margin-top: 6px;
		border-top: 1px solid var( --lx-hairline );
	}

	.lx-nav__login { padding: 11px 14px; }
}

/* ==========================================================================
   ADAPTER LAYER — carries the 13 pre-existing navy patterns into Editorial
   Luxury without rewriting their markup. Interior pages keep their content and
   structure; only their surface treatment changes, so the site reads as one
   design instead of a redesigned homepage bolted onto an old site.
   ========================================================================== */

.sn-lux .sn-section { padding-block: 7rem; position: relative; z-index: 2; }
@media (max-width: 782px) { .sn-lux .sn-section { padding-block: 3.5rem; } }

.sn-lux .sn-container { max-width: 1240px; padding-inline: 32px; }
@media (max-width: 782px) { .sn-lux .sn-container { padding-inline: 20px; } }

/* Headings adopt the editorial face. */
.sn-lux :where(h1, h2, h3) {
	font-family: var( --wp--preset--font-family--editorial );
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.06;
	color: var( --lx-ink );
}
.sn-lux :where(h4, h5, h6) { font-family: var( --wp--preset--font-family--jakarta ); color: var( --lx-ink ); }
.sn-lux p, .sn-lux li { color: var( --lx-body ); }

/* Old eyebrow -> pill badge. */
.sn-lux .sn-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	border-radius: 999px; padding: 7px 14px;
	font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
	color: var( --lx-muted );
	background: rgba( 42, 33, 27, 0.04 );
	box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.06 );
	margin-bottom: 1rem;
}
.sn-lux .sn-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var( --lx-accent ); }

/* Old flat card -> bezelled surface. No 1px grey border, no hard shadow. */
.sn-lux .sn-card {
	background: #fff;
	border: 0;
	border-radius: var( --lx-radius-inner );
	box-shadow: var( --lx-lift ), inset 0 1px 1px rgba( 255, 255, 255, 0.9 );
	padding: 32px;
}
.sn-lux .sn-card--light { background: var( --lx-sand ); box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.06 ); }
.sn-lux .sn-card--featured { box-shadow: var( --lx-lift-hover ), inset 0 0 0 1.5px var( --lx-accent ); }
.sn-lux .sn-card--dark,
.sn-lux .sn-section--dark,
.sn-lux .sn-workflow-visual { background: var( --lx-ink ); color: rgba( 255, 255, 255, 0.86 ); border: 0; }
.sn-lux .sn-section--dark :where(h1,h2,h3,h4,p,li,span,strong) { color: inherit; }
.sn-lux .sn-section--dark :where(h1,h2,h3,h4) { color: #fff; }
.sn-lux .sn-card--dark :where(h1,h2,h3,h4) { color: #fff; }
.sn-lux .sn-section--dark .sn-eyebrow,
.sn-lux .sn-card--dark .sn-eyebrow { background: rgba( 255, 255, 255, 0.08 ); color: rgba( 255, 255, 255, 0.88 ); box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.10 ); }

/* Chips pick up the warm palette. */
.sn-lux .sn-chip { background: var( --lx-sand ); color: var( --lx-espresso ); box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.05 ); }
.sn-lux .sn-chip::before { background: var( --lx-accent ); }
.sn-lux .sn-chip--done::before { color: var( --lx-accent ); }
.sn-lux .sn-workflow-visual .sn-chip { background: rgba( 255, 255, 255, 0.08 ); color: #fff; box-shadow: none; }

/* Buttons become island pills everywhere. */
.sn-lux .wp-element-button,
.sn-lux .wp-block-button__link {
	border-radius: 999px !important;
	padding: 13px 28px;
	font-weight: 600;
	font-size: 15px;
	background: var( --lx-ink );
	color: #fff;
	border: 0;
	box-shadow: 0 1px 2px rgba( 23, 19, 16, .18 ), 0 12px 28px -10px rgba( 23, 19, 16, .4 );
	transition: transform .7s var( --lx-ease ), box-shadow .7s var( --lx-ease );
}
.sn-lux .wp-element-button:hover { box-shadow: 0 2px 4px rgba( 23, 19, 16, .2 ), 0 18px 40px -12px rgba( 23, 19, 16, .5 ); }
.sn-lux .wp-element-button:active { transform: scale( 0.98 ); }
.sn-lux .is-style-outline .wp-block-button__link {
	background: transparent; color: var( --lx-ink );
	box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.18 );
}

/* FAQ + matrix hairlines, never solid grey. */
.sn-lux .sn-faq details { border-bottom: 0; box-shadow: inset 0 -1px 0 rgba( 42, 33, 27, 0.10 ); }
.sn-lux .sn-faq summary::after,
.sn-lux .sn-feature-matrix summary::after { color: var( --lx-accent ); }
.sn-lux figure.sn-feature-matrix { border-radius: var( --lx-radius-inner ); box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.10 ); }
.sn-lux .sn-feature-matrix th, .sn-lux .sn-feature-matrix td { border-bottom: 1px solid rgba( 42, 33, 27, 0.08 ); }
.sn-lux .sn-feature-matrix tbody td:first-child, .sn-lux .sn-feature-matrix thead th:first-child { background: var( --lx-cream ); }

/* Footer joins the system. */
.sn-lux + footer, footer.sn-lux-footer { background: var( --lx-ink ); }

/* ==========================================================================
   INTERIOR PAGE FRAMING
   The adapter alone left interior pages as a flat stack of identical cream
   sections. These rules give them the homepage's two structural moves:
   a real editorial hero, and an alternating ground so adjacent sections
   never read the same.
   ========================================================================== */

/* --- Page hero: the first section of an interior page --- */

.sn-lux .sn-section:first-of-type {
	padding-block: 9rem 5rem;
}

@media (max-width: 782px) { .sn-lux .sn-section:first-of-type { padding-block: 5rem 3rem; } }

.sn-lux .sn-section:first-of-type h1 {
	font-family: var( --wp--preset--font-family--editorial );
	font-size: clamp( 44px, 5.2vw, 86px );
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var( --lx-ink );
	max-width: 18ch;
	text-wrap: balance;
}

/* Centre-aligned page titles get their measure centred too. */
.sn-lux .sn-section:first-of-type h1.has-text-align-center { margin-inline: auto; }

/* The paragraph immediately after the page title becomes a lede. */
.sn-lux .sn-section:first-of-type h1 + p,
.sn-lux .sn-section:first-of-type h1 + .wp-block-paragraph {
	font-size: clamp( 18px, 1vw + 15px, 22px );
	line-height: 1.6;
	max-width: 52ch;
	margin-top: 1.5rem;
	color: var( --lx-body );
}
.sn-lux .sn-section:first-of-type h1.has-text-align-center + p { margin-inline: auto; text-align: center; }

/* Hairline closing the hero, so it reads as a distinct zone. */
.sn-lux .sn-section:first-of-type::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 5rem;
	background: linear-gradient( 90deg, transparent, rgba( 42, 33, 27, 0.14 ), transparent );
}

/* --- Alternating ground: every third section sits on sand --- */

/*
 * Strict alternation guarantees no two adjacent sections share a ground.
 * A 3n+3 rule left runs of three identical sand sections on longer pages.
 */
.sn-lux .sn-section:not(.sn-section--dark):nth-of-type(odd)  { background: var( --lx-cream ) !important; }
.sn-lux .sn-section:not(.sn-section--dark):nth-of-type(even) { background: var( --lx-sand )  !important; }
.sn-lux .sn-section--dark { background: var( --lx-ink ) !important; }

/* --- Section headings get editorial scale and a measure --- */

.sn-lux .sn-section:not(:first-of-type) h2 {
	font-size: clamp( 30px, 2.6vw, 48px );
	line-height: 1.04;
	max-width: 20ch;
	margin-bottom: 1rem;
}
.sn-lux .sn-section h2.has-text-align-center { margin-inline: auto; }

.sn-lux .sn-section h3 { font-size: clamp( 21px, 1.2vw + 16px, 27px ); line-height: 1.15; }

/* Cards sit in shells on interior pages too. */
.sn-lux .sn-card { position: relative; }
.sn-lux .sn-card::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: var( --lx-radius );
	background: rgba( 42, 33, 27, 0.03 );
	box-shadow: inset 0 0 0 1px rgba( 42, 33, 27, 0.045 );
	z-index: -1;
	pointer-events: none;
}

/* Feature matrix reads as a document, not a spreadsheet. */
.sn-lux .sn-feature-matrix thead th { font-family: var( --wp--preset--font-family--jakarta ); font-size: 11px; letter-spacing: .14em; color: var( --lx-muted ); }
.sn-lux .sn-feature-matrix caption { font-family: var( --wp--preset--font-family--editorial ); font-size: 24px; color: var( --lx-ink ); padding-bottom: 18px; }

/*
 * Several interior sections carry a block-level backgroundColor of "background"
 * (#FAFBFC) from the old navy system. That is a cold blue-grey and it clashes
 * badly beside warm cream (#FDFBF7) and sand (#F2EDE4). Remap the old surface
 * tokens onto the warm palette wherever they appear inside .sn-lux.
 */
.sn-lux :not(.sn-section).has-background-background-color { background-color: var( --lx-sand ) !important; }
.sn-lux .has-white-background-color { background-color: #fff !important; }
.sn-lux :not(.sn-section).has-light-blue-background-color { background-color: var( --lx-sand ) !important; }
.sn-lux .has-primary-navy-background-color,
.sn-lux .has-secondary-navy-background-color { background-color: var( --lx-ink ) !important; }
.sn-lux .has-primary-blue-color { color: var( --lx-accent ) !important; }
.sn-lux .has-heading-text-color { color: var( --lx-ink ) !important; }
.sn-lux .has-body-text-color { color: var( --lx-body ) !important; }
.sn-lux .has-muted-text-color { color: var( --lx-muted ) !important; }

/* Avoid two identical grounds meeting. */


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

.lx-tiers { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 20px; align-items: stretch; }
@media (max-width: 1080px) { .lx-tiers { grid-template-columns: repeat( 2, 1fr ); } }
@media (max-width: 640px)  { .lx-tiers { grid-template-columns: 1fr; } }

.lx-shell--featured { background: rgba( 154, 52, 18, 0.07 ); box-shadow: inset 0 0 0 1px rgba( 154, 52, 18, 0.18 ); }

.lx-tier__name { font-size: 26px !important; }

.lx-price { margin: 6px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.lx-price__n {
	font-family: var( --wp--preset--font-family--editorial );
	font-size: clamp( 40px, 3vw, 52px );
	line-height: 1;
	color: var( --lx-ink );
}
.lx-core--ink .lx-price__n { color: #fff; }
.lx-price__p { font-size: 15px; color: var( --lx-muted ); font-weight: 500; }
.lx-core--ink .lx-price__p { color: rgba( 255, 255, 255, 0.82 ); }

/* Push every tier CTA to the same baseline regardless of copy length. */
.lx-tier__cta { margin-top: auto; padding-top: 18px; }
.lx-tier__cta .wp-element-button,
.lx-tier__cta a { border-radius: 999px !important; display: inline-flex; }

.lx-footnote { margin-top: 26px; font-size: 15px; color: var( --lx-muted ); }

.lx-h2 { font-size: clamp( 30px, 2.8vw, 52px ); line-height: 1.05; }

.lx-stats--4 { grid-template-columns: repeat( 4, 1fr ); }
@media (max-width: 900px) { .lx-stats--4 { grid-template-columns: repeat( 2, 1fr ); gap: 32px; } }
@media (max-width: 560px) { .lx-stats--4 { grid-template-columns: 1fr; } }
.lx-stat__n--sm { font-size: clamp( 28px, 2.2vw, 40px ) !important; }

/* Shortcode output inside a bezelled core should not double-pad. */
.lx-core .sn-feature-matrix, .lx-core figure { margin: 0; }

/*
 * Overflow containment. The feature matrix carries a 560px min-width so its
 * columns stay readable; inside a padded core on a 390px phone that pushed the
 * whole document sideways. Confine the scroll to the table's own container and
 * make sure no descendant can widen the page.
 */
.sn-lux, .lx-wrap, .lx-section { max-width: 100%; }
.lx-core { min-width: 0; overflow-wrap: anywhere; }
.lx-core > figure.sn-feature-matrix,
.lx-core .sn-feature-matrix { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.lx-tiers, .lx-bento, .lx-stats { min-width: 0; }
.lx-tiers > *, .lx-bento > *, .lx-stats > * { min-width: 0; }

@media (max-width: 640px) {
	.lx-core { padding: 22px; }
	.lx-price__n { font-size: 38px; }
}

/* ---------- Footer ----------
 * Cream, not ink. The homepage and pricing both close on an ink band, so a dark
 * footer directly beneath produced three stacked dark blocks. Sand keeps the
 * page ending on a lighter note and lets the closing CTA stay the dark accent.
 */

.lx-footer {
	background: var( --lx-sand );
	box-shadow: inset 0 1px 0 rgba( 42, 33, 27, 0.08 );
	padding-block: 6rem 2.5rem;
	position: relative;
	z-index: 2;
}
@media (max-width: 782px) { .lx-footer { padding-block: 3.5rem 2rem; } }

.lx-footer__top { display: grid; grid-template-columns: 1.1fr 2fr; gap: 64px; }
@media (max-width: 900px) { .lx-footer__top { grid-template-columns: 1fr; gap: 44px; } }

.lx-footer__mark {
	font-family: var( --wp--preset--font-family--editorial );
	font-size: 30px;
	color: var( --lx-ink );
	text-decoration: none;
	letter-spacing: -0.015em;
}
.lx-footer__line { margin: 14px 0 26px; font-size: 16.5px; line-height: 1.6; color: var( --lx-muted ); max-width: 34ch; }

.lx-cta--onink { background: var( --lx-ink ); color: #fff; }

.lx-footer__nav { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 32px; }
@media (max-width: 760px) { .lx-footer__nav { grid-template-columns: repeat( 2, 1fr ); gap: 32px 24px; } }

.lx-footer__h {
	font-family: var( --wp--preset--font-family--jakarta ) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --lx-muted ) !important;
	margin: 0 0 16px !important;
	max-width: none !important;
}

.lx-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.lx-footer__col a {
	font-size: 16px;
	color: var( --lx-body );
	text-decoration: none;
	transition: color .4s var( --lx-ease );
}
.lx-footer__col a:hover { color: var( --lx-accent ); }

.lx-footer__base {
	display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center;
	margin-top: 4.5rem; padding-top: 1.75rem;
	box-shadow: inset 0 1px 0 rgba( 42, 33, 27, 0.10 );
}
.lx-footer__base p { margin: 0; font-size: 14.5px; color: var( --lx-muted ); }
.lx-footer__legal a { color: var( --lx-muted ); text-decoration: none; }
.lx-footer__legal a:hover { color: var( --lx-accent ); }

/*
 * Screenshot frames, tuned to the actual captures.
 *
 * The two images have very different shapes and should not share one ratio:
 *  - the workflows LIST is a wide table; 16:10 suits it and top-left anchoring
 *    keeps the workflow names in frame.
 *  - the workflow BUILDER is a near-2:1 app screenshot whose content (a vertical
 *    flow) sits centred with UI whitespace either side. Forcing it to 16:10 and
 *    anchoring top-left would crop the right edge and push the flow off-centre,
 *    so it gets a wider frame and centre anchoring instead.
 */
.lx-frame--wide { aspect-ratio: 16 / 9; }
.lx-frame--wide img { object-position: center center; }

/*
 * Legibility floor.
 *
 * The stat-band copy measured 7.14:1 — comfortably past WCAG AA — and was still
 * hard to read, because the ratio doesn't capture two things: it was 14px in a
 * site whose body is 18px, and light text at 60% opacity beside a bright white
 * heading reads as dimmer than the number implies. Passing the check is the
 * floor, not the goal.
 *
 * Rule now applied throughout: anything that is a *sentence* sits at 16px or
 * above and at 0.82 alpha or above on dark. Only short uppercase labels
 * (eyebrows, table headers) go smaller, and those are tracked and high-contrast.
 */
.sn-lux p:not(.lx-eyebrow):not(.lx-footer__h) { font-size: max(16px, 1em); }
.lx-band p, .lx-core--ink p, .sn-lux .sn-section--dark p { color: rgba( 255, 255, 255, 0.88 ); }
.lx-band .lx-stat__l { color: rgba( 255, 255, 255, 0.86 ); }

/*
 * Preset-name aliases. WordPress kebab-cases font-size slugs, so `h2` is
 * emitted as --wp--preset--font-size--h-2. Markup referencing the
 * un-hyphenated name resolves to nothing, the declaration becomes invalid at
 * computed-value time, and font-size falls back to *inherit* — i.e. body size.
 *
 * These aliases previously lived in style.css and were lost when the
 * superseded Bento block was stripped from the end of that file. They live
 * here now, where nothing truncates them, and the markup below no longer
 * depends on them either.
 */
:root {
	--wp--preset--font-size--h1: var( --wp--preset--font-size--h-1 );
	--wp--preset--font-size--h2: var( --wp--preset--font-size--h-2 );
	--wp--preset--font-size--h3: var( --wp--preset--font-size--h-3 );
	--wp--preset--font-size--h4: var( --wp--preset--font-size--h-4 );
}

/* Belt and braces: any .lx-display used as a section heading gets a real size. */
.sn-lux h2.lx-display { font-size: clamp( 34px, 2.4vw + 22px, 60px ); line-height: 1.02; }

/*
 * Regression fix: text on coloured surfaces.
 *
 * The adapter layer sets `.sn-lux p, .sn-lux li { color: var(--lx-body) }` —
 * specificity (0,2,0). That beat `.lx-cell-body { color: inherit }` at (0,1,0),
 * so every paragraph inside an ink or accent card was being painted dark brown
 * on a dark ground. On the burnt-orange pricing cell that made the copy
 * essentially unreadable.
 *
 * These rules match at (0,3,0) or higher so the coloured surfaces win, and they
 * are explicit rather than relying on inherit.
 */
.sn-lux .lx-core--accent p,
.sn-lux .lx-core--accent li,
.sn-lux .lx-core--accent .lx-cell-body,
.sn-lux .lx-core--accent span,
.sn-lux .lx-core--accent strong { color: #FFFFFF; }

.sn-lux .lx-core--ink p,
.sn-lux .lx-core--ink li,
.sn-lux .lx-core--ink .lx-cell-body,
.sn-lux .lx-core--ink span:not(.lx-eyebrow),
.sn-lux .lx-core--ink strong { color: rgba( 255, 255, 255, 0.88 ); }

.sn-lux .lx-band p,
.sn-lux .lx-band li,
.sn-lux .lx-band .lx-stat__l,
.sn-lux .lx-band .lx-lede { color: rgba( 255, 255, 255, 0.88 ); }

.sn-lux .lx-core--accent .lx-eyebrow { color: #FFFFFF; }

/* Section headings: give every editorial h2 a real size, independent of presets. */
.sn-lux h2.lx-display,
.sn-lux .lx-band h2.lx-display,
.sn-lux h2.lx-h2 { font-size: clamp( 34px, 2.4vw + 22px, 60px ) !important; line-height: 1.03; }