/* Viewing Feedback site design system.
   Loaded on every marketing page (home, blog, guides, features, free tools, legal),
   alongside Tailwind. Visual language: big tight extra-bold headlines, mono eyebrows,
   pill buttons, soft bordered cards and a floating frosted-glass nav. */

:root {
  --vf-blue: #2563EB;
  --vf-blue-d: #1D4ED8;
  --vf-accent: #3B82F6;
  --vf-soft: #EFF6FF;
  --vf-line: #E2E8F0;
  --vf-ink: #111827;
  --vf-body: #374151;
  --vf-muted: #6B7280;
  --vf-faint: #94A3B8;
  --vf-band: #F8FAFC;
  --vf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --vf-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 40px -18px rgba(15,23,42,.18);
  --vf-shadow-lg: 0 2px 4px rgba(15,23,42,.04), 0 30px 60px -24px rgba(15,23,42,.28);
  --vf-ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --vf-nav-offset: 104px;
}
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ───────── Page shell ───────── */
/* The nav floats over the page, so content starts below it. Inner pages get the same
   soft blue wash the homepage hero has; the homepage hero handles its own top spacing. */
.vf-main { padding-top: var(--vf-nav-offset); background: radial-gradient(ellipse 60% 420px at 50% 0, rgba(59,130,246,.10), transparent 70%), linear-gradient(180deg, #F5F8FF 0, #fff 560px) no-repeat; }
.vf-main.vf-main--flush { padding-top: 0; background: none; }
@media print { .vf-main { padding-top: 0; background: none; } .vf-nav, .vf-footer { display: none !important; } }

.vf-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.vf-section { padding: 120px 0; }
.vf-band { background: var(--vf-band); border-top: 1px solid var(--vf-line); border-bottom: 1px solid var(--vf-line); }
.vf-center { text-align: center; }
@media (max-width: 640px) { .vf-section { padding: 84px 0; } .vf-wrap { padding: 0 16px; } }

/* ───────── Type ───────── */
.vf-display { text-wrap: balance; font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--vf-ink); }
.vf-h1 { font-size: clamp(40px, 6.6vw, 78px); }
.vf-h2 { font-size: clamp(34px, 5vw, 56px); }
.vf-h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.vf-lede { font-size: 18px; line-height: 1.6; color: var(--vf-muted); max-width: 600px; }
.vf-center .vf-lede { margin-left: auto; margin-right: auto; }
.vf-mono { font-family: var(--vf-mono); font-size: 12px; letter-spacing: .02em; color: var(--vf-muted); }
.vf-eyebrow { font-family: var(--vf-mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--vf-faint); }
.vf-section-head { margin-bottom: 64px; }
.vf-section-head .vf-lede { margin-top: 18px; }
@media (max-width: 640px) { .vf-section-head { margin-bottom: 44px; } }

/* Every heading on marketing pages shares the display rhythm: tight tracking, balanced wrapping */
/* In Tailwind's base layer (site.css loads after tailwind.css, so the layer order is
   already set): defaults only, so any utility class on a heading still wins. */
@layer base {
  .vf-main h1, .vf-main h2 { text-wrap: balance; letter-spacing: -0.035em; }
  .vf-main h1 { line-height: 1.05; }
  .vf-main h3 { letter-spacing: -0.02em; }
  svg.lucide { flex: none; }
}

/* Long-form content (blog, guides, research, alternatives) */
.prose h2, .prose h3 { font-weight: 800; color: var(--vf-ink); }
.prose h2 { letter-spacing: -0.03em; }
.prose a { color: var(--vf-blue); text-underline-offset: 3px; }
.prose blockquote { border-left-color: var(--vf-accent); }
.prose img { border-radius: 18px; }

/* ───────── Buttons ───────── */
.vf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; font-size: 15px; padding: 14px 26px; transition: background .15s, box-shadow .15s, transform .15s, border-color .15s; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
.vf-btn-primary { background: var(--vf-blue); color: #fff; box-shadow: 0 8px 20px -8px rgba(37,99,235,.6); }
.vf-btn-primary:hover { background: var(--vf-blue-d); transform: translateY(-1px); }
.vf-btn-ghost { background: #fff; color: var(--vf-ink); border: 1px solid var(--vf-line); }
.vf-btn-ghost:hover { border-color: var(--vf-blue); }
.vf-btn-sm { padding: 8px 16px; font-size: 13px; }
.vf-link { color: var(--vf-blue); font-weight: 600; font-size: 14px; }
.vf-link:hover { color: var(--vf-blue-d); }

/* ───────── Closing CTA card (blog posts, free tools) ───────── */
.vf-cta-card { position: relative; overflow: hidden; margin-top: 56px; padding: 44px 28px; border-radius: 28px; border: 1px solid var(--vf-line); background: radial-gradient(ellipse 70% 90% at 50% 120%, rgba(59,130,246,.16), transparent 70%), #fff; box-shadow: var(--vf-shadow); text-align: center; }
.vf-cta-card h2, .vf-cta-card .vf-cta-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--vf-ink); }
.vf-cta-card p.vf-cta-sub { margin: 12px auto 0; max-width: 460px; color: var(--vf-muted); font-size: 16px; line-height: 1.6; }
.vf-cta-card .vf-btn { margin-top: 24px; }
.vf-cta-card .vf-mono { display: block; margin-top: 14px; }

/* ───────── Nav: mirrors Mentionfront's floating nav, in Viewing Feedback blue ───────── */
.vf-nav { --sc-ink: #14161a; --sc-soft: #5b5f68; --sc-line: #ececec; position: fixed; top: 30px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 26px; width: min(720px, 100% - 24px); padding: 11px 11px 11px 26px; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--sc-line); border-radius: 999px; box-shadow: 0 4px 24px rgba(0,0,0,.05); line-height: 1.5; transition: background .3s, backdrop-filter .3s, box-shadow .3s, border-color .3s; }
.vf-nav.scrolled { background: rgba(255,255,255,.5); backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8); border-color: rgba(255,255,255,.7); box-shadow: 0 8px 32px rgba(20,22,26,.08); }
.vf-nav a.vf-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--sc-ink); margin-right: auto; white-space: nowrap; }
.vf-nav a.vf-logo img { width: 20px; height: 20px; flex: 0 0 auto; }
.vf-nav a.vf-navlink { font-size: 14px; font-weight: 500; color: var(--sc-soft); white-space: nowrap; }
.vf-nav a.vf-navlink:hover { color: var(--sc-ink); }
/* Until "Start free" slides in, Log in is the last item: give it breathing room from the pill edge */
.vf-nav a.vf-navlink.login { margin-right: 15px; transition: margin .3s; }
.vf-nav.show-cta a.vf-navlink.login { margin-right: 0; }
.vf-nav a.vf-navcta { display: inline-flex; align-items: center; justify-content: center; background: var(--vf-blue); color: #fff; font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 999px; white-space: nowrap; transition: transform .15s, background .15s, max-width .3s, padding .3s, opacity .25s, margin .3s; }
.vf-nav a.vf-navcta:hover { background: var(--vf-blue-d); transform: translateY(-1px); }
.vf-nav a.vf-navcta.deferred { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; overflow: hidden; margin-left: -26px; pointer-events: none; }
.vf-nav.show-cta a.vf-navcta.deferred { max-width: 140px; padding-left: 16px; padding-right: 16px; opacity: 1; margin-left: 0; pointer-events: auto; }
@media (max-width: 720px) {
  .vf-nav { gap: 14px; padding-left: 20px; }
  .vf-nav a.vf-navlink { padding: 12px 4px; margin: -12px 0; }
  .vf-nav a.vf-navlink.login { margin-right: 10px; }
  .vf-nav.show-cta a.vf-navlink.login { margin-right: 6px; }
  .vf-nav a.hide-sm { display: none; }
  .vf-nav.show-cta a.vf-navcta.deferred { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 430px) { .vf-nav a.vf-navlink:not(.login) { display: none; } }

/* ───────── Footer ───────── */
.vf-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--vf-ink); }
.vf-brand img { width: 26px; height: 26px; }
.vf-footer { border-top: 1px solid var(--vf-line); padding: 72px 0 40px; background: #fff; }
.vf-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; }
.vf-footer-grid p.vf-about { margin-top: 14px; color: var(--vf-muted); font-size: 14px; line-height: 1.6; max-width: 280px; }
.vf-footer-ctas { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.vf-footer h4 { margin: 0 0 14px; }
.vf-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vf-footer li a { font-size: 14px; color: var(--vf-body); }
.vf-footer li a:hover { color: var(--vf-blue); }
.vf-footer-base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--vf-line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vf-footer-base a:hover { color: var(--vf-ink); }
@media (max-width: 960px) { .vf-footer-grid { grid-template-columns: repeat(2, 1fr); } .vf-footer-grid > :first-child { grid-column: 1 / -1; } }