/* =============================================================
   TEXT TO BRAND — FEATURE-PAGE PREMIUM STYLING
   Loaded on every feature deep-dive page. Covers:
     - New editorial hero (.pageFeat__hero)
     - Signature showcase canvas (.fx-scene) with per-feature layouts
     - Tightened capability rows
   ============================================================= */

/* =============================================================
   FEATURE HERO — editorial split, big type
   ============================================================= */
.pageFeat__hero {
	background: var(--muted-warm);
	padding: 5.5rem 0 4rem;
	position: relative;
	overflow: hidden;
}
.pageFeat__hero-inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 2rem;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 4rem;
	align-items: center;
}
.pageFeat__breadcrumb {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: 0.72rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .16em;
	color: var(--muted-foreground);
	margin-bottom: 1.5rem;
}
.pageFeat__breadcrumb a { color: inherit; }
.pageFeat__breadcrumb a:hover { color: var(--foreground); }
.pageFeat__breadcrumb span { opacity: 0.5; }
.pageFeat__title {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.02;
	color: var(--foreground);
	margin-bottom: 1.25rem;
	max-width: 14ch;
}
.pageFeat__title em {
	font-style: italic;
	font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
	font-weight: 400;
	color: var(--primary);
}
.pageFeat__tagline {
	font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
	font-style: italic;
	font-size: clamp(1.15rem, 1.8vw, 1.5rem);
	color: var(--muted-foreground);
	line-height: 1.4;
	margin-bottom: 1.5rem;
	max-width: 34ch;
}
.pageFeat__intro {
	font-size: 1.05rem;
	color: var(--text);
	line-height: 1.6;
	margin-bottom: 2rem;
	max-width: 42ch;
}
.pageFeat__hero-cta {
	display: inline-flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.pageFeat__hero-visual {
	position: relative;
	aspect-ratio: 1;
	max-width: 460px;
	margin-left: auto;
	border-radius: var(--radius-xl);
	background: var(--foreground);
	overflow: hidden;
	box-shadow: 0 40px 100px -40px rgba(11, 13, 26, 0.4);
	display: flex; align-items: center; justify-content: center;
}
.pageFeat__hero-visual::before {
	content: "";
	position: absolute; inset: -20%;
	background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 60%);
	filter: blur(60px);
	opacity: 0.7;
}

/* =============================================================
   SHOWCASE SHELL — dark editorial canvas
   ============================================================= */
.pageFeat__showcase {
	background: #0B0D1A;
	color: #F7F6F2;
	padding: 5.5rem 0;
	position: relative;
	overflow: hidden;
}
.pageFeat__showcase::before, .pageFeat__showcase::after {
	content: "";
	position: absolute; pointer-events: none;
	border-radius: 50%;
	filter: blur(120px);
}
.pageFeat__showcase::before {
	top: -180px; left: -140px;
	width: 520px; height: 520px;
	background: color-mix(in srgb, var(--primary) 40%, transparent);
	opacity: 0.5;
}
.pageFeat__showcase::after {
	bottom: -220px; right: -120px;
	width: 560px; height: 560px;
	background: color-mix(in srgb, var(--secondary) 55%, transparent);
	opacity: 0.3;
}
.pageFeat__showcase-inner {
	position: relative;
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: 2rem;
}

/* Shared scene chrome */
.fx-scene__intro {
	max-width: 42rem;
	margin: 0 auto 3rem;
	text-align: center;
}
.fx-scene__eyebrow {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: color-mix(in srgb, #fff 60%, transparent);
	padding: .3rem .9rem;
	border: 1px solid color-mix(in srgb, #fff 15%, transparent);
	border-radius: 999px;
	margin-bottom: 1.1rem;
}
.fx-scene__h {
	font-size: clamp(1.75rem, 3.6vw, 2.65rem);
	font-weight: 500;
	letter-spacing: -0.028em;
	line-height: 1.1;
	color: #fff;
	margin-bottom: 1rem;
}
.fx-scene__h em {
	font-style: italic;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	color: color-mix(in srgb, var(--primary) 60%, #fff);
}
.fx-scene__p {
	font-size: 1.02rem;
	line-height: 1.55;
	color: color-mix(in srgb, #fff 72%, transparent);
	margin-bottom: 1.25rem;
}
.fx-scene__cta {
	display: inline-flex; align-items: center; gap: .4rem;
	background: color-mix(in srgb, #fff 8%, transparent);
	color: #fff;
	border: 1px solid color-mix(in srgb, #fff 15%, transparent);
	padding: .55rem 1rem;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.82rem; font-weight: 500;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.fx-scene__cta:hover { background: color-mix(in srgb, #fff 15%, transparent); border-color: color-mix(in srgb, #fff 30%, transparent); }
.fx-scene__cta svg { width: 13px; height: 13px; }
.fx-scene__note {
	text-align: center;
	font-size: 0.8rem;
	color: color-mix(in srgb, #fff 55%, transparent);
	margin-top: 2rem;
}
.fx-scene__tabs {
	display: inline-flex;
	gap: .25rem;
	padding: .25rem;
	background: color-mix(in srgb, #fff 5%, transparent);
	border: 1px solid color-mix(in srgb, #fff 10%, transparent);
	border-radius: 999px;
	margin-top: .5rem;
}
.fx-scene__tabs button {
	background: transparent; border: none;
	padding: .45rem 1rem;
	border-radius: 999px;
	font-size: 0.8rem; font-weight: 500;
	color: color-mix(in srgb, #fff 65%, transparent);
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.fx-scene__tabs button:hover { color: #fff; }
.fx-scene__tabs button.is-active { background: #fff; color: #0B0D1A; }
.fx-scene__meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: color-mix(in srgb, #fff 8%, transparent);
	border: 1px solid color-mix(in srgb, #fff 8%, transparent);
	border-radius: 12px;
	overflow: hidden;
	max-width: 720px;
	margin: 2rem auto 0;
}
.fx-scene__meta > div {
	background: #0B0D1A;
	padding: 1.25rem;
	text-align: center;
}
.fx-scene__meta span {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.75rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: -0.02em;
	margin-bottom: .35rem;
}
.fx-scene__meta small {
	font-size: 0.75rem;
	color: color-mix(in srgb, #fff 60%, transparent);
	letter-spacing: 0.02em;
}

.fx-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent);
}
.fx-cursor {
	display: inline-block; width: 2px; height: 1em;
	vertical-align: -0.16em; margin-left: 0.1em;
	background: var(--primary);
	animation: fx-blink 1.1s steps(2, end) infinite;
}
@keyframes fx-blink { 0%,50%{opacity:1;} 51%,100%{opacity:0;} }

/* =============================================================
   DNA showcase — prompt → strategy card
   ============================================================= */
.fx-dna {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 900px;
	margin: 0 auto;
	align-items: center;
	justify-items: center;
}
.fx-dna__prompt {
	width: 100%; max-width: 720px;
	background: color-mix(in srgb, #fff 4%, transparent);
	border: 1px solid color-mix(in srgb, #fff 10%, transparent);
	border-radius: 16px;
	padding: 1.35rem 1.65rem 1.4rem;
	backdrop-filter: blur(6px);
}
.fx-dna__prompt-label {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: 0.7rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .18em;
	color: color-mix(in srgb, #fff 60%, transparent);
	margin-bottom: .85rem;
}
.fx-dna__prompt-text {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: clamp(1.2rem, 2.4vw, 1.75rem);
	line-height: 1.35;
	color: #F7F6F2;
	margin: 0;
	letter-spacing: -0.015em;
}
.fx-dna__arrow {
	color: color-mix(in srgb, #fff 40%, transparent);
	width: 24px; height: 40px;
}
.fx-dna__arrow svg { width: 100%; height: 100%; }
.fx-dna__card {
	width: 100%;
	background: #F7F6F2;
	color: #1a1613;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 40px 100px -40px rgba(0,0,0,0.5);
}
.fx-dna__head {
	display: flex; justify-content: space-between; align-items: center;
	padding: .75rem 1.5rem;
	background: #EEEBE1;
	border-bottom: 1px solid #DBD5C6;
	font-size: 0.72rem;
}
.fx-dna__handle { font-weight: 600; color: #2a1a0e; }
.fx-dna__tag { color: #7A6650; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.66rem; font-weight: 600; }
.fx-dna__body { padding: 1.5rem 2rem 1.75rem; }
.fx-dna__row { padding-block: 1rem; border-top: 1px solid #E4DFD1; }
.fx-dna__row:first-child { border-top: none; padding-top: 0; }
.fx-dna__split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-block: 1rem; border-top: 1px solid #E4DFD1; }
.fx-dna__k {
	display: block;
	font-size: 0.68rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .16em;
	color: #7A6650;
	margin-bottom: .5rem;
}
.fx-dna__v {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.2rem, 1.9vw, 1.5rem);
	font-weight: 400;
	line-height: 1.3;
	color: #1a1613;
	margin: 0;
	letter-spacing: -0.015em;
}
.fx-dna__v--italic { font-style: italic; }
.fx-dna__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.fx-dna__list li {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.05rem;
	color: #1a1613;
	letter-spacing: -0.01em;
}

/* =============================================================
   Logo showcase — grid of variants
   ============================================================= */
.fx-logogrid {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	min-height: 480px;
}
.fx-logogrid__set {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.fx-logogrid__set[hidden] { display: none; }
.fx-logotile {
	background: color-mix(in srgb, #fff 4%, transparent);
	border: 1px solid color-mix(in srgb, #fff 10%, transparent);
	border-radius: 14px;
	padding: 2rem 1.5rem 1.25rem;
	text-align: center;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.fx-logotile:hover { background: color-mix(in srgb, #fff 8%, transparent); border-color: color-mix(in srgb, #fff 20%, transparent); }
.fx-logotile svg { width: 100%; max-width: 140px; height: 140px; margin: 0 auto; display: block; }
.fx-logotile__label {
	display: block;
	margin-top: 1rem;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: color-mix(in srgb, #fff 55%, transparent);
}

/* =============================================================
   Names showcase — availability list
   ============================================================= */
.fx-names {
	max-width: 720px;
	margin: 0 auto;
	background: color-mix(in srgb, #fff 4%, transparent);
	border: 1px solid color-mix(in srgb, #fff 10%, transparent);
	border-radius: 16px;
	padding: .5rem;
}
.fx-name-row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.15rem;
	border-radius: 10px;
	transition: background .18s ease;
}
.fx-name-row:hover { background: color-mix(in srgb, #fff 5%, transparent); }
.fx-name-row + .fx-name-row { border-top: 1px solid color-mix(in srgb, #fff 6%, transparent); }
.fx-name-row__idx {
	font-size: 0.7rem; font-weight: 600;
	letter-spacing: .12em;
	color: color-mix(in srgb, #fff 45%, transparent);
}
.fx-name-row__name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.4rem;
	color: #fff;
	letter-spacing: -0.015em;
}
.fx-name-row__tld {
	color: color-mix(in srgb, #fff 55%, transparent);
	font-family: 'Inter', sans-serif;
	font-size: 1.05rem;
	font-style: normal;
}
.fx-name-row__status {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: 0.75rem; font-weight: 600;
	padding: .3rem .65rem;
	border-radius: 999px;
	letter-spacing: 0.02em;
}
.fx-name-row__status.is-avail { background: color-mix(in srgb, #15925B 30%, transparent); color: #5AE0A8; }
.fx-name-row__status.is-taken { background: color-mix(in srgb, #C93838 25%, transparent); color: #FF9A9A; }
.fx-name-row__status svg { width: 12px; height: 12px; }
.fx-name-row__claim {
	background: #fff; color: #0B0D1A;
	border: none;
	padding: .45rem 1rem;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.78rem; font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.fx-name-row__claim:hover { background: color-mix(in srgb, var(--primary) 20%, #fff); }

/* =============================================================
   Assets showcase — filterable asset grid
   ============================================================= */
.fx-assetgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	max-width: 1000px;
	margin: 0 auto;
}
.fx-asset {
	background: color-mix(in srgb, #fff 5%, transparent);
	border: 1px solid color-mix(in srgb, #fff 10%, transparent);
	border-radius: 12px;
	overflow: hidden;
	transition: opacity .3s ease, transform .3s ease, border-color .18s ease;
}
.fx-asset:hover { border-color: color-mix(in srgb, #fff 20%, transparent); }
.fx-asset.is-hidden { opacity: 0.15; }
.fx-asset__thumb {
	aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center;
	padding: 1rem;
}
.fx-asset__thumb svg { width: 100%; height: 100%; max-height: 100px; }
.fx-asset__thumb--split { padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; }
.fx-asset__thumb--split span { display: block; }
.fx-asset__label {
	display: block;
	padding: .75rem 1rem 0;
	font-size: 0.82rem; font-weight: 600;
	color: #fff;
	letter-spacing: -0.005em;
}
.fx-asset__meta {
	display: block;
	padding: .15rem 1rem 1rem;
	font-size: 0.72rem;
	color: color-mix(in srgb, #fff 55%, transparent);
}

/* =============================================================
   Website showcase — full browser mockup
   ============================================================= */
.fx-site {
	max-width: 1000px;
	margin: 0 auto;
}
.fx-site__frame {
	background: #F5F1EA;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 40px 100px -40px rgba(0,0,0,0.55);
}
.fx-site__bar {
	background: #E8E4D9;
	padding: .5rem .85rem;
	display: flex; align-items: center; gap: .35rem;
}
.fx-site__bar > span { width: 8px; height: 8px; border-radius: 50%; background: #C8BEA9; }
.fx-site__url {
	flex: 1;
	background: #F5F1EA;
	border-radius: 4px;
	padding: .2rem .6rem;
	font-size: 0.72rem;
	color: #7A6650;
	margin-left: .35rem;
	text-align: center;
}
.fx-site__scroll { padding: 0; }
.fx-site__nav {
	background: #2A1A0E;
	padding: 1rem 1.75rem;
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
}
.fx-site__brand {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	color: #F5F1EA;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
}
.fx-site__navlinks {
	font-family: 'Inter', sans-serif;
	color: #B8926B;
	font-size: 0.65rem;
	letter-spacing: 0.24em;
}
.fx-site__navcta {
	color: #F5F1EA;
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
}
.fx-site__hero {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 2rem;
	padding: 3rem 2rem;
	align-items: center;
}
.fx-site__hero-copy { max-width: 30ch; }
.fx-site__eyebrow {
	display: inline-block;
	font-size: 0.65rem; font-weight: 600;
	letter-spacing: 0.24em; color: #8B5E3C;
	margin-bottom: .75rem;
}
.fx-site__h {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.5rem, 2.8vw, 2.15rem);
	font-weight: 500;
	color: #2A1A0E;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: .85rem;
}
.fx-site__h em { font-style: italic; font-weight: 400; }
.fx-site__p {
	font-family: 'Inter', sans-serif;
	font-size: 0.85rem;
	color: #7A6650;
	line-height: 1.5;
	margin-bottom: 1rem;
}
.fx-site__cta {
	display: inline-block;
	background: #2A1A0E;
	color: #F5F1EA;
	padding: .6rem 1rem;
	border-radius: 4px;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.fx-site__hero-visual svg { width: 100%; max-width: 200px; }
.fx-site__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding: 2rem 2rem;
	background: #EEEBE1;
}
.fx-site__prod { text-align: center; }
.fx-site__prod-img {
	aspect-ratio: 1;
	background: linear-gradient(135deg, #B8926B, #8B5E3C);
	border-radius: 6px;
	margin-bottom: .5rem;
}
.fx-site__prod-name {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.05rem;
	color: #2A1A0E;
}
.fx-site__prod-meta {
	font-family: 'Inter', sans-serif;
	font-size: 0.68rem;
	color: #7A6650;
	letter-spacing: 0.06em;
}
.fx-site__editorial {
	padding: 2.5rem 2rem;
	text-align: center;
	border-top: 1px solid #DBD5C6;
	border-bottom: 1px solid #DBD5C6;
}
.fx-site__ed-h {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 400;
	color: #2A1A0E;
	line-height: 1.3;
	margin-bottom: .5rem;
	max-width: 42ch;
	margin-inline: auto;
}
.fx-site__ed-h em { font-style: italic; }
.fx-site__ed-c {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	color: #7A6650;
	letter-spacing: 0.14em;
}
.fx-site__footer {
	padding: 1.15rem 1.75rem;
	background: #2A1A0E;
	display: flex; justify-content: space-between;
	color: #B8926B;
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
}
.fx-site__meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	max-width: 720px;
	margin: 2rem auto 0;
	background: color-mix(in srgb, #fff 8%, transparent);
	border: 1px solid color-mix(in srgb, #fff 8%, transparent);
	border-radius: 12px;
	overflow: hidden;
}
.fx-site__meta > div {
	background: #0B0D1A;
	padding: 1.15rem;
	text-align: center;
}
.fx-site__meta span {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.6rem;
	color: #fff;
	letter-spacing: -0.02em;
	margin-bottom: .3rem;
}
.fx-site__meta small {
	font-size: 0.72rem;
	color: color-mix(in srgb, #fff 60%, transparent);
}

/* =============================================================
   Social showcase — three post mockups
   ============================================================= */
.fx-social {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	max-width: 1000px;
	margin: 0 auto;
}
.fx-post {
	background: #F7F6F2;
	color: #1a1613;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 20px 60px -25px rgba(0,0,0,0.4);
}
.fx-post__head {
	display: flex; align-items: center; gap: .5rem;
	padding: .75rem 1rem;
	border-bottom: 1px solid #E4DFD1;
}
.fx-post__avatar {
	width: 28px; height: 28px; border-radius: 50%;
	background: linear-gradient(135deg, #2A1A0E, #B8926B);
}
.fx-post__handle {
	font-size: 0.8rem; font-weight: 600;
	color: #2A1A0E;
	flex: 1;
}
.fx-post__pill {
	font-size: 0.6rem; font-weight: 600;
	letter-spacing: 0.14em;
	color: #7A6650;
	padding: .2rem .5rem;
	border: 1px solid #DBD5C6;
	border-radius: 999px;
}
.fx-post__visual {
	aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center;
}
.fx-post__visual svg { width: 100%; height: 100%; }
.fx-post__caption {
	padding: 1rem 1.15rem 1.2rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #2A1A0E;
	margin: 0;
}

/* =============================================================
   Print showcase — single-item stage with tabs
   ============================================================= */
.fx-print {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	background: color-mix(in srgb, #fff 4%, transparent);
	border: 1px solid color-mix(in srgb, #fff 10%, transparent);
	border-radius: 16px;
	padding: 2rem;
	min-height: 360px;
	display: flex; align-items: center; justify-content: center;
}
.fx-print__item {
	position: absolute;
	inset: 2rem;
	display: flex; align-items: center; justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
	transform: translateY(12px) scale(0.98);
}
.fx-print__item.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}
.fx-print__item svg { width: 100%; max-width: 400px; height: auto; }

/* =============================================================
   eCommerce showcase — shop preview with badge
   ============================================================= */
.fx-shop {
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
}
.fx-shop__frame {
	background: #F5F1EA;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 40px 100px -40px rgba(0,0,0,0.55);
}
.fx-shop__nav {
	background: #2A1A0E;
	padding: 1rem 1.75rem;
	display: flex; align-items: center; justify-content: space-between;
}
.fx-shop__cart {
	background: #B8926B;
	color: #2A1A0E;
	font-family: 'Inter', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	padding: .35rem .75rem;
	border-radius: 4px;
}
.fx-shop__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding: 2rem;
}
.fx-shop__card {
	background: #FFF;
	border: 1px solid #E4DFD1;
	border-radius: 10px;
	padding: 1rem;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
.fx-shop__card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -15px rgba(42, 26, 14, 0.25); }
.fx-shop__img {
	aspect-ratio: 1;
	background: linear-gradient(135deg, #B8926B, #8B5E3C);
	border-radius: 6px;
	margin-bottom: .75rem;
}
.fx-shop__name {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.1rem;
	color: #2A1A0E;
	margin-bottom: .2rem;
}
.fx-shop__meta {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 0.68rem;
	color: #7A6650;
	letter-spacing: 0.08em;
	margin-bottom: .5rem;
}
.fx-shop__price {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #2A1A0E;
}
.fx-shop__badge {
	display: inline-block;
	position: absolute;
	top: 1rem; right: 1rem;
	background: var(--primary); color: #fff;
	font-size: 0.7rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	padding: .4rem .85rem;
	border-radius: 999px;
	box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--primary) 50%, transparent);
}

/* =============================================================
   FEATURE PAGE — capability rows (replaces old cards)
   ============================================================= */
.pageFeat__caps {
	padding-block: 6rem;
}
.pageFeat__caps-inner {
	max-width: 1000px;
	margin-inline: auto;
	padding-inline: 2rem;
}
.pageFeat__caps-head {
	max-width: 40rem;
	margin: 0 auto 4rem;
	text-align: center;
}
.pageFeat__caps-head span {
	display: inline-block;
	font-size: 0.72rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .13em;
	color: var(--muted-foreground);
	padding: .3rem .85rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	margin-bottom: 1.25rem;
}
.pageFeat__caps-head h2 {
	font-size: clamp(1.85rem, 3.6vw, 2.75rem);
	font-weight: 500;
	letter-spacing: -0.028em;
	color: var(--foreground);
	line-height: 1.1;
}
.pageFeat__caps-head h2 em {
	font-style: italic;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	color: var(--primary);
}

.pageFeat__cap {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 3rem;
	padding-block: 2.5rem;
	border-top: 1px solid var(--border);
	align-items: baseline;
}
.pageFeat__cap:last-child { border-bottom: 1px solid var(--border); }
.pageFeat__cap-idx {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: 3rem;
	font-weight: 400;
	color: var(--muted-foreground);
	line-height: 1;
	width: 4ch;
}
.pageFeat__cap-body h3 {
	font-size: clamp(1.35rem, 2.4vw, 1.65rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--foreground);
	margin-bottom: .65rem;
}
.pageFeat__cap-body p {
	font-size: 1.02rem;
	color: var(--text);
	line-height: 1.6;
	max-width: 60ch;
	margin-bottom: 1rem;
}
.pageFeat__cap-body ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;
	gap: .35rem .5rem;
}
.pageFeat__cap-body ul li {
	background: var(--muted);
	color: var(--text);
	font-size: 0.82rem;
	padding: .3rem .7rem;
	border-radius: 999px;
}

/* =============================================================
   Related features footer
   ============================================================= */
.pageFeat__related {
	padding-block: 5rem;
	background: var(--muted-warm);
}
.pageFeat__related-inner {
	max-width: 1000px;
	margin-inline: auto;
	padding-inline: 2rem;
}
.pageFeat__related-head { text-align: center; margin-bottom: 3rem; }
.pageFeat__related-head span {
	display: inline-block;
	font-size: 0.72rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .13em;
	color: var(--muted-foreground);
	padding: .3rem .85rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--background);
	margin-bottom: 1rem;
}
.pageFeat__related-head h2 {
	font-size: clamp(1.65rem, 3vw, 2.25rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	color: var(--foreground);
}
.pageFeat__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
.pageFeat__related-card {
	display: block;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 1.75rem;
	text-decoration: none;
	color: inherit;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.pageFeat__related-card:hover {
	border-color: var(--border-strong);
	box-shadow: 0 6px 20px -8px rgba(11, 13, 26, 0.08);
}
.pageFeat__related-card h3 {
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--foreground);
	margin-bottom: .4rem;
}
.pageFeat__related-card p {
	font-size: 0.9rem;
	color: var(--muted-foreground);
	line-height: 1.55;
	margin-bottom: .85rem;
}
.pageFeat__related-card span {
	display: inline-flex; align-items: center; gap: .3rem;
	color: var(--primary);
	font-size: 0.85rem;
	font-weight: 600;
}
.pageFeat__related-card svg { width: 12px; height: 12px; }

/* =============================================================
   MOBILE
   ============================================================= */
@media (max-width: 900px) {
	.pageFeat__hero-inner { grid-template-columns: 1fr; gap: 3rem; }
	.pageFeat__hero-visual { margin: 0 auto; max-width: 380px; }
	.fx-dna__split { grid-template-columns: 1fr; gap: 1.5rem; }
	.fx-logogrid__set { grid-template-columns: repeat(2, 1fr); }
	.fx-assetgrid { grid-template-columns: repeat(2, 1fr); }
	.fx-social { grid-template-columns: 1fr; max-width: 380px; }
	.fx-shop__grid { grid-template-columns: repeat(2, 1fr); }
	.fx-site__hero { grid-template-columns: 1fr; padding: 2rem 1.25rem; }
	.fx-site__grid { grid-template-columns: repeat(2, 1fr); padding: 1.5rem; }
	.pageFeat__cap { grid-template-columns: 1fr; gap: 1rem; }
	.pageFeat__cap-idx { font-size: 2rem; }
	.pageFeat__related-grid { grid-template-columns: 1fr; }
	.fx-name-row { grid-template-columns: auto 1fr auto; }
	.fx-name-row__claim { display: none; }
}