/* Font System Visualizer — layout mockup styles */
#fvPreviewPanel { overflow-x: auto; }
.fv-layout { --fv-h: "Plus Jakarta Sans"; --fv-b: "Inter"; font-family: var(--fv-b); }

/* Type scale */
.fv-scale-row { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.fv-scale-row:last-child { border-bottom: none; }
.fv-scale-label { width: 70px; flex-shrink: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); }
.fv-scale-sample { font-family: var(--fv-h); margin: 0; }
.fv-scale-sample.fv-body-sample { font-family: var(--fv-b); }

/* Blog post */
.fv-blog-kicker { font-family: var(--fv-b); font-size: 0.8em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-brand); }
.fv-blog-title { font-family: var(--fv-h); margin: var(--space-3) 0; }
.fv-blog-byline { font-family: var(--fv-b); color: var(--color-text-subtle); font-size: 0.9em; margin-bottom: var(--space-5); }
.fv-blog-body { font-family: var(--fv-b); max-width: 640px; }
.fv-blog-body p { margin-bottom: 1em; }
.fv-blog-body h3 { font-family: var(--fv-h); margin: 1.5em 0 0.5em; }
.fv-blog-body blockquote { border-left: 3px solid var(--color-brand); margin: 1.5em 0; padding-left: var(--space-4); font-style: italic; color: var(--color-text-muted); }

/* Card */
.fv-card-wrap { display: flex; justify-content: center; padding: var(--space-6) 0; }
.fv-card { width: 280px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); background: var(--color-bg); }
.fv-card-eyebrow { font-family: var(--fv-b); font-size: 0.75em; font-weight: 600; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.fv-card-title { font-family: var(--fv-h); margin: var(--space-2) 0; }
.fv-card-price { font-family: var(--fv-h); font-weight: 800; margin-bottom: var(--space-3); }
.fv-card-desc { font-family: var(--fv-b); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.fv-card-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); font-family: var(--fv-b); }
.fv-card-list li { padding: 4px 0; font-size: 0.9em; }

/* Landing */
.fv-landing-eyebrow { font-family: var(--fv-b); font-size: 0.8em; font-weight: 600; color: var(--color-brand); text-transform: uppercase; letter-spacing: 0.04em; }
.fv-landing-h1 { font-family: var(--fv-h); margin: var(--space-3) 0; max-width: 640px; }
.fv-landing-sub { font-family: var(--fv-b); color: var(--color-text-muted); max-width: 560px; margin-bottom: var(--space-5); }
.fv-landing-btns { display: flex; gap: var(--space-3); margin-bottom: var(--space-7); }
.fv-landing-btns span { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-family: var(--fv-b); font-weight: 600; font-size: 0.9em; }
.fv-landing-btns span:first-child { background: var(--color-brand); color: var(--color-bg); }
.fv-landing-btns span:last-child { border: 1px solid var(--color-border); }
.fv-landing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.fv-landing-grid h4 { font-family: var(--fv-h); margin: 0 0 var(--space-2); }
.fv-landing-grid p { font-family: var(--fv-b); color: var(--color-text-muted); font-size: 0.9em; margin: 0; }
@media (max-width: 640px) { .fv-landing-grid { grid-template-columns: 1fr; } }