/*
 * VirtualFont 2.0: the modern blue interface.
 *
 * Loaded after main.css and the tools stylesheet. main.css keeps the layout
 * and the tokens (now blue); this file adds the night surfaces, rounded
 * cards, pill controls and gradients. Tool selectors are prefixed with
 * `html` so they win over tools.css whatever order the files print in.
 *
 * 1. Night surfaces   2. Base         3. Header & nav   4. Hero
 * 5. Sections & cards 6. Tool pages   7. Controls       8. Code
 * 9. Footer           10. Motion hooks
 */

/* 1. Night surfaces ------------------------------------------------------
   Any block with .vf-night (and the header, hero, tool header and footer)
   re-points the tokens, so existing components render light-on-dark. */

.vf-night,
.site-header,
.hero,
.tool-header,
.site-footer,
.home-section--ink {
	--vf-paper: var(--vf-night);
	--vf-tint: #211a3f;
	--vf-surface: #1b1534;
	--vf-ink: #ffffff;
	--vf-ink-2: #d9d0f2;
	--vf-muted: #bfb3dc;
	--vf-line: rgba(255, 255, 255, .12);
	--vf-line-strong: rgba(255, 255, 255, .24);
	--vf-accent: #f9a8d4;
	--vf-accent-ink: #0e0b1f;
	--vf-accent-soft: rgba(249, 168, 212, .14);
	color: var(--vf-ink);
}

/* 2. Base ---------------------------------------------------------------- */

body {
	font-size: 1rem;
	background: var(--vf-paper);
}

h1,
h2,
h3,
h4 {
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.08;
}

h5,
h6 {
	font-weight: 700;
	letter-spacing: -.01em;
}

a {
	color: var(--vf-accent);
	text-decoration-color: color-mix(in srgb, var(--vf-accent) 45%, transparent);
}

a:hover {
	color: var(--vf-accent);
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: 3px solid #c084fc;
	outline-offset: 3px;
	border-radius: 8px;
}

::selection {
	background: #ddd6fe;
	color: #0f172a;
}

/* Buttons (theme) */
.btn {
	border-radius: var(--vf-radius-pill);
	font-weight: 700;
	min-height: 3rem;
	padding-inline: 1.5rem;
	transition: transform .25s var(--vf-ease-out), box-shadow .25s var(--vf-ease-out), background-color .2s;
}

.btn--primary,
.site-header__cta {
	background: var(--vf-grad);
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0 14px 30px -14px rgba(124, 58, 237, .9);
}

.btn--primary:hover,
.site-header__cta:hover {
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 20px 36px -14px rgba(124, 58, 237, .95);
}

.btn--ghost {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--vf-line-strong);
	color: var(--vf-ink);
}

.btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--vf-ink);
	transform: translateY(-2px);
}

.eyebrow,
.hero__kicker,
.section-intro__kicker,
.card__eyebrow {
	font-family: var(--vf-font-ui);
	letter-spacing: .04em;
	font-weight: 700;
}

/* 3. Header & nav ------------------------------------------------------- */

.site-header {
	background: radial-gradient(500px 120px at 0% 0%, rgba(124, 58, 237, .35), transparent 70%), rgba(14, 11, 31, .97);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.site-header.is-scrolled {
	border-bottom-color: rgba(255, 255, 255, .12);
	box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .8);
}

.wordmark {
	align-items: center;
	font-size: 1.25rem;
	color: #ffffff;
}

.wordmark::before {
	content: "Aa";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: .75rem;
	background: var(--vf-grad);
	font-family: var(--vf-font-specimen);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0;
	color: #ffffff;
	margin-right: .6rem;
	box-shadow: 0 8px 22px -8px rgba(124, 58, 237, .9);
}

.wordmark:hover {
	color: #ffffff;
}

.wordmark__a {
	font-weight: 800;
	letter-spacing: -.03em;
}

.wordmark__b {
	font-family: var(--vf-font-ui);
	font-style: normal;
	font-weight: 800;
	letter-spacing: -.03em;
	margin-left: 0;
	background: var(--vf-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wordmark:hover .wordmark__b {
	font-weight: 800;
}

.primary-nav a {
	border-radius: var(--vf-radius-pill);
	padding: .5rem .9rem;
	color: var(--vf-ink-2);
	transition: color .15s, background-color .2s;
}

.primary-nav a::after {
	display: none;
}

.primary-nav a:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, .08);
}

.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav a[aria-current="page"] {
	color: #ffffff;
	background: rgba(255, 255, 255, .14);
}

.site-header__cta {
	border-radius: var(--vf-radius-pill);
	padding: .6rem 1.2rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform .25s var(--vf-ease-out), box-shadow .25s var(--vf-ease-out);
}

.nav-toggle {
	border-radius: var(--vf-radius-pill);
	border-color: var(--vf-line-strong);
	color: #ffffff;
}

@media (max-width: 960px) {
	.primary-nav {
		background: #17112f;
		border-radius: 0 0 var(--vf-radius) var(--vf-radius);
		box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
	}
	.primary-nav a {
		border-radius: var(--vf-radius-sm);
		padding: .85rem 1rem;
	}
}

/* 4. Hero --------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--vf-glow), var(--vf-night);
	overflow: hidden;
	padding-bottom: clamp(3rem, 7vw, 6rem);
	isolation: isolate;
}

.hero__glow {
	position: absolute;
	z-index: -1;
	width: 38rem;
	height: 38rem;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .45;
	pointer-events: none;
}

.hero__glow--a {
	left: -12rem;
	top: -16rem;
	background: #7c3aed;
}

.hero__glow--b {
	right: -14rem;
	top: 2rem;
	background: #ec4899;
	opacity: .32;
}

.hero__kicker {
	display: inline-flex;
	align-self: start;
	justify-self: start;
	align-items: center;
	gap: .5rem;
	padding: .45rem .95rem;
	border-radius: var(--vf-radius-pill);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	font-size: .8125rem;
	letter-spacing: .01em;
	text-transform: none;
	color: #ffffff;
}

.hero__kicker::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 4px rgba(52, 211, 153, .22);
}

.hero__kicker span:first-child {
	color: #ffffff;
}

.hero__kicker span[aria-hidden] {
	color: var(--vf-muted);
}

.hero__title {
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: 1;
}

.hero__title em {
	font-style: normal;
	font-weight: 800;
	background: var(--vf-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__lede {
	color: var(--vf-ink-2);
}

/* The tester floats on the night hero as a bright card with a blue halo. */
html .hero .vft-hero {
	--vf-paper: #f8f6ff;
	--vf-tint: #f1ebff;
	--vf-surface: #ffffff;
	--vf-ink: #0f172a;
	--vf-ink-2: #475569;
	--vf-muted: #556079;
	--vf-line: #e2e8f5;
	--vf-line-strong: #c9d4ea;
	--vf-accent: #7c3aed;
	--vf-accent-ink: #ffffff;
	--vf-accent-soft: #f1eaff;
	color: var(--vf-ink);
	position: relative;
}

html .hero .vft-hero::before {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: calc(var(--vf-radius) + 14px);
	background: linear-gradient(135deg, rgba(124, 58, 237, .6), rgba(236, 72, 153, .45), rgba(249, 115, 22, .5));
	opacity: .55;
	filter: blur(2px);
	z-index: -1;
}

html .vft-hero__sheet {
	border: 0;
	border-radius: 26px;
	box-shadow: var(--vf-shadow-lg);
	background-image: none;
}

html .vft-hero__input input {
	border: 2px solid var(--vf-line);
	border-radius: 14px;
	padding: .75rem 1rem;
	background: #faf8ff;
}

html .vft-hero__input input:focus {
	border-color: var(--vf-accent);
}

html .vft-hero__label,
html .vft-hero__input label {
	font-family: var(--vf-font-ui);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	font-size: .8125rem;
	color: var(--vf-accent);
}

html .vft-hero__name {
	display: inline-block;
	padding: .3rem .75rem;
	border-radius: var(--vf-radius-pill);
	background: var(--vf-accent-soft);
	color: #6d28d9;
	font-family: var(--vf-font-ui);
	font-weight: 700;
}

html .vft-hero__play {
	font-weight: 700;
}

/* 5. Sections & cards ----------------------------------------------------- */

.home-section--tint {
	background: linear-gradient(180deg, #f1ebff, #f8f6ff);
}

.home-section--ink {
	background: var(--vf-glow), var(--vf-night);
}

.section-intro {
	border-top: 0;
	padding-top: 0;
}

.section-intro__kicker {
	align-items: center;
	color: var(--vf-accent);
	font-size: .8125rem;
	text-transform: uppercase;
}

.section-intro__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .5rem;
	border-radius: .75rem;
	background: var(--vf-grad);
	color: #ffffff;
	font-family: var(--vf-font-mono);
	font-size: .8125rem;
}

.section-intro__title {
	font-weight: 800;
}

/* Shared card look: white, rounded, soft blue shadow, lifts on hover. */
html .vft-discover__item,
html .vft-pair-card,
html .vft-tool-list__item,
html .vft-font-card,
.reading__item,
.card,
.steps__item {
	background: var(--vf-surface);
	border: 1px solid var(--vf-line);
	border-radius: var(--vf-radius);
	box-shadow: var(--vf-shadow);
	transition: transform .35s var(--vf-ease-out), box-shadow .35s var(--vf-ease-out), border-color .2s;
}

html .vft-discover__item:hover,
html .vft-pair-card:hover,
html .vft-tool-list__item:hover,
html .vft-font-card:hover,
.reading__item:hover,
.card:hover {
	transform: translateY(-4px);
	border-color: #ddd6fe;
	box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 30px 50px -28px rgba(76, 29, 149, .55);
}

.card::before {
	display: none;
}

.steps__item {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
	padding: 1.5rem;
}

.steps__item::before {
	color: #f9a8d4;
}

.reading {
	gap: 1rem;
}

.reading__item {
	padding: 1.4rem 1.4rem 1.5rem;
}

.reading__num {
	display: inline-flex;
	padding: .2rem .6rem;
	border-radius: var(--vf-radius-pill);
	background: var(--vf-accent-soft);
	color: #6d28d9;
	font-weight: 700;
}

.reading__item--lead {
	background: var(--vf-glow), var(--vf-night);
	border-color: transparent;
	--vf-ink: #ffffff;
	--vf-ink-2: #d9d0f2;
	--vf-muted: #bfb3dc;
	--vf-accent: #f9a8d4;
	--vf-accent-soft: rgba(249, 168, 212, .16);
	color: #ffffff;
}

.reading__item--lead .reading__title a,
.reading__item--lead .reading__num {
	color: #ffffff;
}

.reading__mark {
	font-family: var(--vf-font-specimen);
	font-weight: 300;
	background: var(--vf-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 1;
}

/* A different blue-family tint per tool and per card, so the page has colour
   without a second palette. */
html .vft-tool-list__item:nth-child(5n + 1) { --vf-card-tint: #f1eaff; --vf-card-ink: #6d28d9; }
html .vft-tool-list__item:nth-child(5n + 2) { --vf-card-tint: #e6eeff; --vf-card-ink: #1d4ed8; }
html .vft-tool-list__item:nth-child(5n + 3) { --vf-card-tint: #fde8f3; --vf-card-ink: #be185d; }
html .vft-tool-list__item:nth-child(5n + 4) { --vf-card-tint: #dcf7f5; --vf-card-ink: #0f766e; }
html .vft-tool-list__item:nth-child(5n + 5) { --vf-card-tint: #fef3c7; --vf-card-ink: #b45309; }

html .vft-tool-list__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border-radius: .85rem;
	background: var(--vf-card-tint, var(--vf-accent-soft));
	color: var(--vf-card-ink, var(--vf-accent));
	font-weight: 700;
}

html .vft-tool-list__glyph {
	color: var(--vf-card-ink, var(--vf-accent));
}

html .vft-discover__item:nth-child(4n + 1) .vft-discover__top { background: #f5f0ff; }
html .vft-discover__item:nth-child(4n + 2) .vft-discover__top { background: #fdf0f7; }
html .vft-discover__item:nth-child(4n + 3) .vft-discover__top { background: #f5f0ff; }
html .vft-discover__item:nth-child(4n + 4) .vft-discover__top { background: #e8f7f5; }

html .vft-discover__item {
	overflow: hidden;
}

html .vft-pair-card {
	overflow: hidden;
}

html .vft-pair-card__labels {
	background: linear-gradient(135deg, #f1eaff, #e6eeff);
	margin: -1px -1px 0;
}

html .vft-tag {
	border-radius: var(--vf-radius-pill);
	background: var(--vf-accent-soft);
	border-color: transparent;
	color: #6d28d9;
	font-family: var(--vf-font-ui);
	font-weight: 600;
}

/* 6. Tool pages ---------------------------------------------------------- */

.vft-has-tool .breadcrumbs,
.tool-header {
	position: relative;
}

/* The tool title band is a night card with a blue glow. */
.tool-header {
	margin-top: .5rem;
	padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 1.4rem;
	border-radius: 26px;
	background: var(--vf-glow), var(--vf-night);
	box-shadow: var(--vf-shadow-lg);
	overflow: hidden;
}

.tool-header .eyebrow,
.tool-header .tool-header__kicker {
	color: #f9a8d4;
}

/* Step nav: a segmented control. */
.tool-steps {
	margin-top: 1rem;
	padding: .35rem;
	border: 1px solid var(--vf-line);
	border-radius: 18px;
	background: var(--vf-surface);
	box-shadow: var(--vf-shadow);
}

.tool-steps ol {
	border: 0;
	gap: .25rem;
}

.tool-steps li + li {
	border: 0;
}

.tool-steps a,
.tool-steps li + li a {
	border: 0;
	border-radius: 13px;
	padding: .6rem .9rem;
	font-family: var(--vf-font-ui);
	font-weight: 600;
	transition: background-color .2s, color .2s;
}

.tool-steps a:hover {
	background: var(--vf-accent-soft);
}

.tool-steps a[aria-current="page"] {
	background: var(--vf-grad);
	color: #ffffff;
	box-shadow: 0 10px 24px -14px rgba(124, 58, 237, .95);
}

.tool-steps a[aria-current="page"] .tool-steps__num,
.tool-steps a[aria-current="page"] .tool-steps__label {
	color: #ffffff;
	font-style: normal;
}

.tool-steps__label {
	font-family: var(--vf-font-ui);
	font-weight: 700;
}

.tool-steps a::before,
.tool-steps a::after {
	display: none;
}

/* Panels, stages and sheets: rounded white cards; no crop marks. */
html .vft-panel,
html .vft-toolbar,
html .vft-stage,
html .vft-pair-stage,
html .vft-compare__col,
html .vft-specimen-sheet,
html .vft-hero__sheet,
html .vft-device,
html .vft-features {
	background-image: none;
	border: 1px solid var(--vf-line);
	border-radius: var(--vf-radius);
	box-shadow: var(--vf-shadow);
}

html .vft-stage,
html .vft-pair-stage {
	box-shadow: 0 0 0 6px #f1ebff, var(--vf-shadow);
}

html .vft-spec,
html .vft-field > label,
html .vft-field legend,
html .vft-group > legend,
html .vft-shortlist__label {
	font-family: var(--vf-font-ui);
	font-weight: 700;
	letter-spacing: .03em;
}

html .vft-shortlist {
	border: 0;
	border-radius: 18px;
	background: linear-gradient(135deg, #f1eaff, #e6eeff);
}

html .vft-shortlist:not(.is-empty) {
	background: var(--vf-grad);
	color: #ffffff;
	box-shadow: 0 18px 36px -20px rgba(124, 58, 237, .9);
}

html .vft-shortlist:not(.is-empty) .vft-shortlist__label,
html .vft-shortlist:not(.is-empty) .vft-shortlist__count,
html .vft-shortlist:not(.is-empty) .vft-link-button {
	color: #ffffff;
}

html .vft-shortlist__item {
	border-radius: var(--vf-radius-pill);
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .3);
}

html .vft-shortlist__item a,
html .vft-shortlist__remove {
	color: #ffffff;
}

html .vft-shortlist .vft-btn--accent {
	background: #ffffff;
	color: #6d28d9;
}

/* 7. Controls ------------------------------------------------------------ */

html .vft-btn {
	border-radius: var(--vf-radius-pill);
	font-family: var(--vf-font-ui);
	font-weight: 700;
	transition: transform .25s var(--vf-ease-out), box-shadow .25s var(--vf-ease-out), background-color .2s, border-color .2s;
}

html .vft-btn:hover {
	transform: translateY(-1px);
}

html .vft-btn--accent {
	background: var(--vf-grad);
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0 12px 26px -14px rgba(124, 58, 237, .95);
}

html .vft-btn--accent:hover {
	color: #ffffff;
	box-shadow: 0 18px 32px -14px rgba(124, 58, 237, 1);
}

html .vft-chip {
	border-radius: var(--vf-radius-pill);
	border: 1px solid transparent;
	background: #eef2fb;
	color: #1e293b;
	font-family: var(--vf-font-ui);
	font-weight: 600;
	transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--vf-ease-out);
}

html .vft-chip:hover {
	background: #e9e2f8;
}

html .vft-chip[aria-pressed="true"],
html .vft-chip.is-active,
html .vft-chip[aria-checked="true"] {
	background: var(--vf-grad);
	color: #ffffff;
	box-shadow: 0 10px 22px -12px rgba(124, 58, 237, .95);
}

html .vft-field input[type="text"],
html .vft-field input[type="search"],
html .vft-field input[type="email"],
html .vft-field input[type="url"],
html .vft-field input[type="number"],
html .vft-field textarea,
html .vft-field select {
	border-radius: 14px;
	border: 1.5px solid var(--vf-line-strong);
	background-color: #faf8ff;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}

html .vft-field input:focus,
html .vft-field textarea:focus,
html .vft-field select:focus,
html .vft-tool .vft-picker.is-open .vft-picker__input {
	border-color: var(--vf-accent);
	background-color: #ffffff;
	box-shadow: 0 0 0 4px rgba(124, 58, 237, .15);
	outline: none;
}

html .vft-picker__pop {
	border: 1px solid var(--vf-line);
	border-radius: 18px;
	box-shadow: 0 30px 60px -24px rgba(15, 23, 42, .45);
}

html .vft-picker__list [role="option"] {
	border-radius: 10px;
}

html .vft-picker__list [role="option"].is-active,
html .vft-picker__list [role="option"]:hover {
	background: var(--vf-accent-soft);
}

html .vft-picker__cat {
	border-radius: var(--vf-radius-pill);
}

html .vft-picker__cat[aria-pressed="true"] {
	background: var(--vf-grad);
	border-color: transparent;
	color: #ffffff;
}

/* Range: a soft track with a blue fill feel and a white thumb ringed in blue. */
html .vft-tool input[type="range"],
html input[type="range"] {
	--vft-track: #e9e2f8;
}

html .vft-tool input[type="range"]::-webkit-slider-runnable-track,
html input[type="range"]::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: var(--vft-track);
}

html .vft-tool input[type="range"]::-moz-range-track,
html input[type="range"]::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: var(--vft-track);
}

html .vft-tool input[type="range"]::-moz-range-progress,
html input[type="range"]::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: #7c3aed;
}

html .vft-tool input[type="range"]::-webkit-slider-thumb,
html input[type="range"]::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	margin-top: -7px;
	border-radius: 50%;
	border: 3px solid #7c3aed;
	background: #ffffff;
	box-shadow: 0 4px 12px -2px rgba(124, 58, 237, .6);
	transition: transform .2s var(--vf-ease-out);
}

html .vft-tool input[type="range"]::-moz-range-thumb,
html input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 3px solid #7c3aed;
	background: #ffffff;
	box-shadow: 0 4px 12px -2px rgba(124, 58, 237, .6);
}

html .vft-tool input[type="range"]:active::-webkit-slider-thumb,
html input[type="range"]:active::-webkit-slider-thumb {
	transform: scale(1.15);
}

html .vft-check input[type="checkbox"] {
	border-radius: 7px;
	border-color: var(--vf-line-strong);
}

html .vft-check input[type="checkbox"]:checked {
	background: #7c3aed;
	border-color: #7c3aed;
}

/* 8. Code panels ---------------------------------------------------------- */

html .vft-code {
	border: 0;
	border-radius: var(--vf-radius);
	background: #0e0b1f;
	box-shadow: 0 30px 60px -36px rgba(15, 23, 42, .9);
	overflow: hidden;
}

html .vft-code__bar {
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

html .vft-code__tabs [role="tab"] {
	border-radius: 10px;
	font-family: var(--vf-font-ui);
	font-weight: 600;
}

html .vft-code__tabs [role="tab"][aria-selected="true"] {
	background: rgba(255, 255, 255, .12);
	color: #ffffff;
}

html .vft-code [data-code-copy] {
	border-radius: var(--vf-radius-pill);
	background: var(--vf-grad);
	color: #ffffff;
	border: 0;
	font-weight: 700;
}

/* 9. Footer --------------------------------------------------------------- */

.site-footer {
	background: radial-gradient(700px 360px at 0% 0%, rgba(124, 58, 237, .35), transparent 65%), radial-gradient(600px 320px at 100% 100%, rgba(236, 72, 153, .25), transparent 65%), var(--vf-night);
	border-top: 0;
}

.site-footer__title {
	color: #ffffff;
	font-family: var(--vf-font-ui);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
}

.site-footer a {
	color: var(--vf-ink-2);
	text-decoration: none;
}

.site-footer a:hover {
	color: #ffffff;
}

.site-footer__mark {
	background: var(--vf-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* 10. Motion hooks --------------------------------------------------------
   GSAP (assets/js/motion.js) animates these. Without it, or with reduced
   motion, nothing is hidden. */

html.vf-gsap [data-anim="hero"] > * {
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.btn:hover,
	html .vft-btn:hover,
	html .vft-discover__item:hover,
	html .vft-pair-card:hover,
	html .vft-tool-list__item:hover,
	html .vft-font-card:hover,
	.reading__item:hover,
	.card:hover {
		transform: none;
	}
}

/* 11. Component fixes for the card layout ---------------------------------- */

html .vft-discover,
html .vft-discover--mosaic {
	border-top: 0;
	gap: 1rem;
}

html .vft-discover__item {
	box-shadow: var(--vf-shadow);
	border-bottom: 1px solid var(--vf-line);
}

html .vft-discover__top {
	margin: -.25rem -.25rem .25rem;
	padding: .45rem .7rem;
	border-radius: 10px;
	font-family: var(--vf-font-ui);
	font-weight: 600;
	letter-spacing: 0;
}

html .vft-discover__name {
	font-weight: 700;
}

html .vft-tool-list {
	gap: 1rem;
}

html .vft-tool-list__link {
	border-top: 0;
	padding: 1.4rem 1.4rem 1.5rem;
	gap: .7rem;
}

html .vft-tool-list__step {
	align-self: flex-start;
	font-size: .8125rem;
}

html .vft-tool-list__title {
	font-family: var(--vf-font-ui);
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

html .vft-tool-list__go {
	background: var(--vf-card-tint, var(--vf-accent-soft));
	color: var(--vf-card-ink, var(--vf-accent));
	border-color: transparent;
}

html .vft-pair-card__labels {
	margin: 0 0 .25rem;
	padding: .55rem .8rem;
	border: 0;
	border-radius: 12px;
	font-family: var(--vf-font-ui);
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: 0;
}

html .vft-pair-card__role {
	font-family: var(--vf-font-ui);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	color: #6d28d9;
}

.steps__item h3 {
	font-family: var(--vf-font-ui);
	font-style: normal;
	font-weight: 800;
	letter-spacing: -.02em;
}

.how__statement {
	font-family: var(--vf-font-ui);
	font-style: normal;
	font-weight: 600;
	color: var(--vf-ink-2);
}

.how__head,
.audiences > * {
	border-top-color: rgba(255, 255, 255, .14);
}

.audiences strong {
	font-family: var(--vf-font-ui);
	color: #f9a8d4;
}

.site-footer__mark em,
.site-footer__mark i,
.site-footer__mark span {
	font-family: var(--vf-font-ui);
	font-style: normal;
	font-weight: 800;
}

html .vft-tool input[type="range"],
html input[type="range"] {
	height: 22px;
	background: transparent;
}

/* Small labels use the interface font, not monospace. */
html .vft-tool .vft-label,
html .vft-tool legend,
html .vft-features summary,
html .vft-tool .vft-field > label,
html .vft-tool .vft-presets__label,
html .vft-tool .vft-axis label,
html .vft-font-status,
html .vft-count {
	font-family: var(--vf-font-ui);
	letter-spacing: .03em;
	font-weight: 700;
}

html .vft-font-card__name,
html .vft-font-card__name a {
	font-family: var(--vf-font-ui);
	font-weight: 800;
	letter-spacing: -.02em;
}

@media (max-width: 599px) {
	.hero__kicker span:not(:first-child) {
		display: none;
	}
	.tool-header {
		padding: 1.1rem 1.1rem 1.15rem;
		border-radius: 22px;
	}
}

/* 404 ------------------------------------------------------------------- */
.not-found {
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
	.not-found {
		grid-template-columns: auto minmax(0, 1fr);
	}
}
.not-found__glyph {
	font-weight: 800;
	line-height: .95;
	padding-bottom: .04em;
	letter-spacing: -.04em;
	background: var(--vf-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.not-found__glyph span {
	font-style: normal;
	color: transparent;
}