/* ============================================================
   Local fonts — put the font files in css/fonts/ (see css/fonts/README.txt).
   No CDN imports: Poppins + Material Symbols Rounded are served locally.
   ============================================================ */
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Material Symbols Rounded"; src: url("fonts/MaterialSymbolsRounded.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: block; }

/* ============================================================
   VerifyFiltering — public site redesign v2 ("modern" direction)
   Replaced the legacy Bootstrap 5 stylesheet pair (retired 2026-07-28).
   Dark hero band + light/dark body via html[data-theme="dark"]
   ============================================================ */

:root {
  --vf-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vf-static-white: #fff;
  --vf-white-500: #fff;
  --vf-black-500: #0b1120;
  --vf-blue-050: #f0f4fd;
  --vf-blue-500: #0a369d;
  --vf-blue-600: #082f88;
  --vf-blue-100: #b3c1e1;
  --vf-blue-surface: #e5edfa;
  --vf-green-500: #16a34a;
  --vf-green-surface: #e8f7ee;
  --vf-red-500: #dc3545;
  --vf-red-50: #fdedee;
  --vf-gray-900: #1c2333;
  --vf-gray-700: #4a5468;
  --vf-gray-600: #67718a;
  --vf-gray-500: #8b94a7;
  --vf-gray-300: #c3c9d6;
  --vf-gray-200: #e6e9f0;
  --vf-gray-050: #f6f8fc;
  --vf-border: #e7eaf2;
  --vf-page: #fbfcfe;
  --vf-radius: 16px;
  --vf-shadow-card: 0 1px 2px rgba(11, 17, 32, 0.04), 0 8px 24px -12px rgba(11, 17, 32, 0.08);
  --vf-shadow-pop: 0 24px 48px -16px rgba(10, 54, 157, 0.25);
  /* dark hero band (theme-independent) */
  --vf-ink-1: #070d1c;
  --vf-ink-2: #0c1a3d;
  --vf-hero-line: rgba(143, 176, 255, 0.16);
  --vf-hero-accent: #8fb0ff;
}

html[data-theme="dark"] {
  --vf-white-500: #121926;
  --vf-black-500: #f6f8fc;
  --vf-blue-050: #1a2440;
  --vf-blue-surface: #1e2c50;
  --vf-green-surface: #123324;
  --vf-red-50: #3a1f25;
  --vf-gray-900: #eef1f7;
  --vf-gray-700: #c4cbd9;
  --vf-gray-600: #a4adbe;
  --vf-gray-500: #7d8798;
  --vf-gray-300: #4d576a;
  --vf-gray-200: #333d50;
  --vf-gray-050: #182031;
  --vf-border: #283246;
  --vf-page: #0b101a;
  --vf-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --vf-shadow-pop: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--vf-font-family);
  font-size: 15px;
  line-height: 24px;
  color: var(--vf-gray-700);
  background:
    radial-gradient(1000px 620px at 50% -140px, rgba(178, 200, 245, 0.4), transparent 70%),
    radial-gradient(800px 500px at 88% 40%, rgba(178, 200, 245, 0.18), transparent 70%),
    var(--vf-page);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1000px 620px at 50% -140px, rgba(38, 66, 140, 0.35), transparent 70%),
    radial-gradient(800px 500px at 88% 40%, rgba(38, 66, 140, 0.16), transparent 70%),
    var(--vf-page);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; font-weight: 600; color: var(--vf-black-500); letter-spacing: -0.02em; }
h1 { font-size: 54px; line-height: 62px; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: 34px; line-height: 42px; }
h3 { font-size: 20px; line-height: 28px; }
p { margin-top: 0; }
a { color: var(--vf-blue-500); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--vf-blue-600); }
html[data-theme="dark"] a { color: var(--vf-hero-accent); }
html[data-theme="dark"] a:hover { color: #b7ccff; }
ul { padding-left: 0; list-style: none; margin: 0; }

.vf-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

.vf-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vf-blue-500); margin-bottom: 14px;
}
html[data-theme="dark"] .vf-eyebrow { color: var(--vf-hero-accent); }

/* ---------------- Buttons ---------------- */
.vf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--vf-font-family); font-size: 14.5px; font-weight: 500; line-height: 20px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.vf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vf-btn-primary {
  color: var(--vf-static-white); background: var(--vf-blue-500); border-color: var(--vf-blue-500);
  box-shadow: 0 8px 20px -8px rgba(10, 54, 157, 0.55);
}
.vf-btn-primary:hover:not(:disabled) {
  background: var(--vf-blue-600); border-color: var(--vf-blue-600); color: var(--vf-static-white);
  transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(10, 54, 157, 0.6);
}
.vf-btn-outline { border-color: var(--vf-gray-200); color: var(--vf-black-500); background: transparent; }
.vf-btn-outline:hover:not(:disabled) { border-color: var(--vf-blue-500); color: var(--vf-blue-500); }
html[data-theme="dark"] .vf-btn-outline:hover:not(:disabled) { border-color: var(--vf-hero-accent); color: var(--vf-hero-accent); }
.vf-btn-lg { padding: 15px 30px; font-size: 16px; border-radius: 14px; }

/* ---------------- Header / nav ---------------- */
.vf-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--vf-white-500) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vf-border);
}
.vf-nav-inner { max-width: none; margin: 0; padding: 14px 20px; display: flex; align-items: center; gap: 24px; }
.vf-nav-brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--vf-black-500); margin-right: auto; }
.vf-nav-brand img { height: 34px; display: block; }
.vf-nav-brand img.vf-nav-brand-mark { display: none; }
.vf-nav-links { display: flex; align-items: center; gap: 6px; }
.vf-nav-menu { display: contents; }
.vf-nav-link { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--vf-gray-700); }
html[data-theme="dark"] .vf-nav-link { color: var(--vf-gray-900); }
.vf-nav-link:hover { color: var(--vf-black-500); background: var(--vf-gray-050); }
.vf-nav-link.is-active { color: var(--vf-blue-500); background: var(--vf-blue-050); }
html[data-theme="dark"] .vf-nav-link.is-active { color: var(--vf-hero-accent); }
.vf-theme-toggle, .vf-nav-toggle {
  display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--vf-border); border-radius: 50%; background: var(--vf-blue-050);
  color: var(--vf-gray-600); font-size: 19px; cursor: pointer; flex: none; overflow: hidden;
  transition: color 0.18s ease, border-color 0.18s ease;
}
html[data-theme="dark"] .vf-theme-toggle, html[data-theme="dark"] .vf-nav-toggle { color: var(--vf-gray-900); }
.vf-theme-toggle:hover, .vf-nav-toggle:hover { color: var(--vf-blue-500); border-color: var(--vf-blue-500); }
html[data-theme="dark"] .vf-theme-toggle:hover, html[data-theme="dark"] .vf-nav-toggle:hover { color: var(--vf-hero-accent); border-color: var(--vf-hero-accent); }
.vf-nav-toggle { display: none; }

/* ---------------- Footer ---------------- */
.vf-footer { border-top: 1px solid var(--vf-border); background: var(--vf-white-500); margin-top: 72px; }
.vf-footer-inner { max-width: 1160px; margin: 0 auto; padding: 30px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vf-footer p { margin: 0; color: var(--vf-gray-500); font-size: 13px; }
.vf-footer-links { display: flex; gap: 22px; font-size: 13px; }
.vf-footer-links a { color: var(--vf-gray-600); }
.vf-footer-links a:hover { color: var(--vf-blue-500); }

/* ---------------- Hero (dark band, both themes) ---------------- */
.vf-hero {
  position: relative; overflow: hidden;
  padding: 88px 0 72px; text-align: center;
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(64, 110, 220, 0.35), transparent 65%),
    radial-gradient(600px 300px at 85% 10%, rgba(30, 70, 170, 0.25), transparent 70%),
    linear-gradient(180deg, var(--vf-ink-1) 0%, var(--vf-ink-2) 100%);
  border-bottom: 1px solid var(--vf-hero-line);
}
.vf-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--vf-hero-line) 1px, transparent 1px), linear-gradient(90deg, var(--vf-hero-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(700px 360px at 50% 0%, rgba(0,0,0,0.5), transparent 75%);
  -webkit-mask-image: radial-gradient(700px 360px at 50% 0%, rgba(0,0,0,0.5), transparent 75%);
}
.vf-hero > * { position: relative; }
.vf-hero h1 { color: #fff; }
.vf-hero h1 span { color: var(--vf-hero-accent); }
.vf-hero .vf-hero-sub { max-width: 720px; margin: 18px auto 0; color: rgba(226, 234, 252, 0.72); font-size: 16px; line-height: 26px; }
.vf-hero .vf-hero-sub strong { color: #fff; font-weight: 600; }
.vf-hero .vf-eyebrow { color: var(--vf-hero-accent); }
/* .vf-hero is theme-independent dark; .vf-input's own bg/text tokens flip
   dark in html[data-theme="dark"] too, so without reinforcement the input
   could sit low-contrast against the hero in dark mode specifically. Scoped
   to .vf-hero .vf-input only -- doesn't affect .vf-input elsewhere
   (e.g. results.php's report-request form, which isn't inside a hero). */
.vf-hero .vf-input { box-shadow: var(--vf-shadow-pop); }

/* ---------------- Profile chips ---------------- */
.vf-chip-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 40px 0 10px; max-width: 560px; }
.vf-chip {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 14px 18px;
  border: 1px solid rgba(160, 190, 255, 0.22); border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--vf-font-family); font-size: 15.5px; font-weight: 500; color: #eaf0fd;
  cursor: pointer; position: relative;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.vf-chip:hover { border-color: rgba(160, 190, 255, 0.55); background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); }
.vf-chip.selected {
  background: var(--vf-blue-500); border-color: #4f79d9; color: #fff;
  box-shadow: 0 12px 32px -8px rgba(45, 95, 210, 0.65);
}
.vf-chip .vf-cat-ic { background: rgba(143, 176, 255, 0.14); color: var(--vf-hero-accent); }
.vf-chip.selected .vf-cat-ic { background: rgba(255, 255, 255, 0.16); color: #fff; }
.vf-chip .vf-chip-check {
  position: absolute; top: -8px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--vf-green-500); color: #fff; display: none; align-items: center; justify-content: center; font-size: 13px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.vf-chip.selected .vf-chip-check { display: inline-flex; }

/* ---------------- Sections ---------------- */
.vf-section { padding: 72px 0; }
.vf-section-glow {
  background: radial-gradient(1200px 130% at 50% 40%, rgba(10, 54, 157, 0.16), transparent 78%);
}
html[data-theme="dark"] .vf-section-glow { background: radial-gradient(1200px 130% at 50% 40%, rgba(28, 66, 160, 0.42), transparent 78%); }
.vf-section-glow-sm { background: radial-gradient(92% 88% at 50% 50%, rgba(10, 54, 157, 0.14), transparent 72%); }
html[data-theme="dark"] .vf-section-glow-sm { background: radial-gradient(92% 88% at 50% 50%, rgba(28, 66, 160, 0.38), transparent 72%); }
/* .vf-hero itself does NOT fade at all here -- it's the same solid dark
   navy (plus the grid-square pattern) as every other page's hero, unchanged
   from .vf-hero's own base rule below. All of the fading is one gradient on
   .vf-fade-band.
   A plain 2-stop linear-gradient(navy, transparent) fades at a CONSTANT
   rate from its very first pixel -- but the flat hero right above it has a
   rate of zero. Solid-then-suddenly-changing-at-full-speed is exactly what
   read as an abrupt, "dramatic" seam, even though the color at the seam
   itself matches exactly. Eased stops fix the actual problem (the rate of
   change, not the color): barely fading for the first stretch so it starts
   as close to flat as the hero above it, then accelerating -- same
   destination (transparent), same navy hue throughout, just arriving there
   on a curve instead of a straight line. */
.vf-fade-band {
  /* Extra height for the fade to happen over -- the same curve compressed
     into a short section would still look abrupt regardless of easing. */
  padding-bottom: 160px;
  background: linear-gradient(180deg,
    var(--vf-ink-2) 0%,
    rgba(12, 26, 61, 0.97) 20%,
    rgba(12, 26, 61, 0.85) 38%,
    rgba(12, 26, 61, 0.62) 55%,
    rgba(12, 26, 61, 0.36) 70%,
    rgba(12, 26, 61, 0.15) 84%,
    rgba(12, 26, 61, 0.04) 94%,
    transparent 100%);
}
.vf-fade-band .vf-billing-toggle label { color: rgba(190, 206, 240, 0.65); }
.vf-fade-band .vf-billing-toggle label.is-active { color: #fff; }
.vf-section-alt { background: var(--vf-white-500); border-top: 1px solid var(--vf-border); border-bottom: 1px solid var(--vf-border); }
.vf-section-title { text-align: center; margin-bottom: 40px; }
.vf-section-title h2 { margin-bottom: 8px; }
.vf-section-title p { color: var(--vf-gray-600); margin: 0; max-width: 620px; margin-inline: auto; }

/* ---------------- Category cards ---------------- */
.vf-cat-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.vf-cat-card {
  display: flex; align-items: center; gap: 12px;
  min-width: 214px; padding: 12px 18px 12px 12px;
  border: 1px solid var(--vf-border); border-radius: 999px;
  background: var(--vf-white-500); box-shadow: var(--vf-shadow-card);
  font-size: 14px; font-weight: 500; color: var(--vf-black-500);
}
.vf-cat-ic {
  display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--vf-blue-surface); color: var(--vf-blue-500); font-size: 20px; flex: none;
}
html[data-theme="dark"] .vf-cat-ic { color: var(--vf-hero-accent); }
.vf-cat-card.selectable { cursor: pointer; user-select: none; position: relative; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.vf-cat-card.selectable:hover { border-color: var(--vf-blue-500); transform: translateY(-1px); }
.vf-cat-card.selectable input { position: absolute; opacity: 0; pointer-events: none; }
.vf-cat-card.selectable.checked { border-color: var(--vf-blue-500); background: var(--vf-blue-surface); }
.vf-cat-tick {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--vf-gray-300);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: transparent; flex: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.vf-cat-card.selectable.checked .vf-cat-tick { background: var(--vf-blue-500); border-color: var(--vf-blue-500); color: #fff; }

/* ---------------- Pricing ---------------- */
.vf-billing-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 44px; }
.vf-billing-toggle label { font-size: 15px; font-weight: 600; color: var(--vf-gray-500); cursor: pointer; transition: color 0.15s ease; }
.vf-billing-toggle label.is-active { color: var(--vf-black-500); }
.vf-switch { width: 52px; height: 28px; border-radius: 999px; background: var(--vf-blue-500); border: 0; cursor: pointer; position: relative; padding: 0; }
.vf-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.18s ease; }
.vf-switch.on::after { transform: translateX(24px); }

.vf-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: stretch; }
.vf-plan-card {
  display: flex; flex-direction: column; position: relative;
  border: 1px solid var(--vf-border); border-radius: 20px;
  background: var(--vf-white-500);
  box-shadow: 0 22px 44px -20px rgba(7, 13, 28, 0.55), var(--vf-shadow-card);
  padding: 26px 26px 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vf-plan-card:hover { transform: translateY(-3px); }
.vf-plan-head { padding: 0; background: transparent; text-align: left; }
.vf-plan-head h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vf-gray-600); }
.vf-plan-price { text-align: left; padding: 4px 0 14px; border-bottom: 1px solid var(--vf-border); }
.vf-plan-price strong { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; color: var(--vf-black-500); }
.vf-plan-price span { font-size: 14px; color: var(--vf-gray-500); font-weight: 500; margin-left: 2px; }
.vf-plan-list { padding: 16px 0 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vf-plan-list li { position: relative; padding: 0 0 0 26px; font-size: 13.5px; line-height: 20px; color: var(--vf-gray-700); text-align: left; border: 0; }
.vf-plan-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%; font-size: 11px; line-height: 18px; text-align: center;
  background: var(--vf-green-surface); color: var(--vf-green-500); font-weight: 700;
}
.vf-plan-cta { padding: 0; text-align: center; }
.vf-plan-cta .vf-btn { width: 100%; }
/* A real border, not the previous gradient-painted-through-a-mask trick --
   that technique positions its "ring" relative to the padding box while the
   card's own (transparent) border still reserves edge space, which is
   exactly what made it read as floating just inside the card's edge instead
   of sitting on it. A plain border can't have that problem: it IS the edge,
   by definition, on every browser, with no offset math to get wrong. */
.vf-plan-card.featured { border: 2px solid var(--vf-blue-500); box-shadow: var(--vf-shadow-pop); }
html[data-theme="dark"] .vf-plan-card.featured { border-color: var(--vf-hero-accent); }
.vf-plan-card.featured .vf-plan-head h3 { color: var(--vf-blue-500); }
html[data-theme="dark"] .vf-plan-card.featured .vf-plan-head h3 { color: var(--vf-hero-accent); }
.vf-plan-badge {
  position: absolute; top: 22px; right: 22px; padding: 4px 12px; border-radius: 999px;
  background: var(--vf-blue-surface); color: var(--vf-blue-500); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
html[data-theme="dark"] .vf-plan-badge { color: var(--vf-hero-accent); }

.vf-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.vf-feature-box {
  padding: 28px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius);
  background: var(--vf-white-500); box-shadow: var(--vf-shadow-card);
  transition: transform 0.18s ease;
}
.vf-feature-box:hover { transform: translateY(-2px); }
.vf-feature-box h3 { font-size: 17px; line-height: 24px; margin-bottom: 8px; }
.vf-feature-box p { margin: 0; color: var(--vf-gray-600); font-size: 14px; line-height: 22px; }


.vf-faq-box { padding: 22px 26px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-white-500); margin-bottom: 12px; }
.vf-faq-box h3 { font-size: 16px; line-height: 24px; margin-bottom: 6px; }
.vf-faq-box p { margin: 0; color: var(--vf-gray-600); font-size: 14px; line-height: 22px; }

.vf-cta-band {
  position: relative; overflow: hidden; border-radius: 24px; padding: 56px 32px; text-align: center;
  background:
    radial-gradient(600px 280px at 50% -80px, rgba(96, 140, 235, 0.4), transparent 70%),
    linear-gradient(180deg, var(--vf-ink-1), var(--vf-ink-2));
  border: 1px solid var(--vf-hero-line);
}
.vf-cta-band h2 { color: #fff; }
.vf-cta-band p { color: rgba(226, 234, 252, 0.72); font-size: 15px; margin-bottom: 24px; }
.vf-cta-band .vf-btn { background: #fff; color: var(--vf-ink-2); border-color: #fff; }
.vf-cta-band .vf-btn:hover { background: #e7edfb; transform: translateY(-1px); }
.vf-cta-band .vf-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.vf-cta-band .vf-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; }
.vf-aud-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 22px 0 28px; }
.vf-aud {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(143, 176, 255, 0.28);
  color: #eaf0fd; font-size: 13.5px; font-weight: 600;
}
.vf-aud .material-symbols-rounded { font-size: 18px; color: var(--vf-hero-accent); }

/* ---------------- Results page ---------------- */
.vf-result-card {
  border: 1px solid var(--vf-border); border-radius: var(--vf-radius);
  background: var(--vf-white-500); box-shadow: var(--vf-shadow-pop); overflow: hidden; height: 100%;
  text-align: left;
}
.vf-result-card-title {
  display: flex; align-items: center; gap: 10px; padding: 16px 24px 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vf-gray-500);
}
.vf-result-card-body { padding: 6px 24px 18px; }
.vf-r-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--vf-border); }
.vf-r-row:last-child { border-bottom: 0; }
.vf-r-lbl { color: var(--vf-gray-500); font-size: 13.5px; }
.vf-r-value { font-weight: 600; color: var(--vf-black-500); font-size: 14px; text-align: right; }

.vf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.vf-pill-pass { background: var(--vf-green-surface); color: var(--vf-green-500); }
.vf-pill-fail { background: var(--vf-red-50); color: var(--vf-red-500); }

.vf-cat-status { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; padding: 8px 0; }
.vf-cat-status li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; font-weight: 500; color: var(--vf-black-500); }
.vf-status-ic { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.vf-status-ic.ok { background: var(--vf-green-surface); color: var(--vf-green-500); }
.vf-status-ic.bad { background: var(--vf-red-50); color: var(--vf-red-500); }

.vf-table-wrap { border: 1px solid var(--vf-border); border-radius: var(--vf-radius); overflow: hidden; background: var(--vf-white-500); box-shadow: var(--vf-shadow-card); }
table.vf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vf-table thead th {
  text-align: left; padding: 14px 20px; background: var(--vf-gray-050);
  color: var(--vf-gray-500); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--vf-border);
}
.vf-table td { padding: 16px 20px; border-bottom: 1px solid var(--vf-border); color: var(--vf-gray-600); vertical-align: middle; }
.vf-table tbody tr:last-child td { border-bottom: 0; }
.vf-table td:first-child { font-weight: 600; color: var(--vf-black-500); }

/* ---------------- Modals ---------------- */
.vf-modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(5, 9, 18, 0.66);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vf-modal {
  width: 100%; max-width: 760px; max-height: calc(100vh - 64px); overflow: auto;
  background: var(--vf-white-500); border: 1px solid var(--vf-border); border-radius: 20px; box-shadow: var(--vf-shadow-pop);
}
.vf-modal-sm { max-width: 480px; }
.vf-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 26px; border-bottom: 1px solid var(--vf-border); }
.vf-modal-header h3 { margin: 0 0 2px; font-size: 19px; line-height: 26px; }
.vf-modal-header p { margin: 0; color: var(--vf-gray-500); font-size: 14px; }
.vf-modal-close { border: 0; background: transparent; color: var(--vf-gray-500); font-size: 20px; cursor: pointer; padding: 4px; line-height: 1; border-radius: 8px; }
.vf-modal-close:hover { color: var(--vf-black-500); background: var(--vf-gray-050); }
.vf-modal-body { padding: 26px; }

/* ---------------- Forms ---------------- */
.vf-form-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--vf-black-500); }
.vf-input, .vf-select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--vf-gray-200); border-radius: 10px;
  background: var(--vf-white-500); color: var(--vf-black-500); font-family: var(--vf-font-family); font-size: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease; outline: none;
}
.vf-input::placeholder { color: var(--vf-gray-500); }
.vf-input:focus, .vf-select:focus { border-color: var(--vf-blue-500); box-shadow: 0 0 0 3px var(--vf-blue-surface); }
html[data-theme="dark"] .vf-input:focus, html[data-theme="dark"] .vf-select:focus { border-color: var(--vf-hero-accent); }
.vf-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.vf-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.vf-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--vf-gray-600); cursor: pointer; }
.vf-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--vf-blue-500); flex: none; cursor: pointer; }
.vf-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--vf-black-500); cursor: pointer; }
.vf-radio input { width: 18px; height: 18px; accent-color: var(--vf-blue-500); margin: 0; cursor: pointer; }
.vf-filter-box { border: 1px solid var(--vf-border); border-radius: 14px; background: var(--vf-gray-050); padding: 16px 18px; margin-bottom: 20px; }

/* ---------------- Progress ring modal ---------------- */
.vf-progress-title { font-size: 24px; margin-bottom: 26px; }
.vf-progress-area { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.vf-progress-area svg { transform: rotate(-90deg); }
.vf-ring-track { fill: none; stroke: var(--vf-gray-200); stroke-width: 14; }
.vf-ring-fill { fill: none; stroke: url(#vfProgressGradient); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 0.2s linear; }
.vf-progress-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.vf-progress-center strong { font-size: 40px; font-weight: 700; color: var(--vf-black-500); line-height: 1; }
.vf-progress-center span { color: var(--vf-gray-500); font-size: 14px; }

/* ---------------- Step cards (About) ---------------- */
.vf-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.vf-step-card {
  padding: 28px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius);
  background: var(--vf-white-500); box-shadow: var(--vf-shadow-card); text-align: left;
}
.vf-step-num {
  display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--vf-blue-surface); color: var(--vf-blue-500);
  font-size: 14px; font-weight: 700; margin-bottom: 16px;
}
html[data-theme="dark"] .vf-step-num { color: var(--vf-hero-accent); }
.vf-step-card h3 { font-size: 17px; margin-bottom: 8px; }
.vf-step-card p { margin: 0; color: var(--vf-gray-600); font-size: 14px; line-height: 22px; }

/* ---------------- Motion ---------------- */
@keyframes vfSweep { to { transform: rotate(360deg); } }
@keyframes vfPulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes vfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------------- Split hero + radar visual ---------------- */
.vf-hero-split {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; text-align: left;
}
.vf-hero-split .vf-hero-sub { margin: 18px 0 0; }
.vf-hero-split .vf-chip-row { margin: 34px 0 0; }

.vf-radar { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin-inline: auto; }
.vf-radar-ring { position: absolute; border: 1px solid rgba(143, 176, 255, 0.2); border-radius: 50%; }
.vf-radar-sweep {
  position: absolute; inset: 4%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(96, 140, 235, 0.4), rgba(96, 140, 235, 0.05) 28%, transparent 55%);
  animation: vfSweep 7s linear infinite;
}
.vf-radar-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100px; height: 100px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(143, 176, 255, 0.35);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 70px rgba(64, 110, 220, 0.5);
}
.vf-radar-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--vf-hero-accent); animation: vfPulse 2.6s ease-in-out infinite; }
.vf-radar-badge {
  position: absolute; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(10, 20, 44, 0.78); border: 1px solid rgba(143, 176, 255, 0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #eaf0fd; font-size: 12.5px; font-weight: 600;
  animation: vfFloat 5.5s ease-in-out infinite;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.vf-radar-badge .st { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vf-radar-badge .st.ok { background: #2ecc71; box-shadow: 0 0 8px rgba(46, 204, 113, 0.8); }
.vf-radar-badge .st.bad { background: #ff5d6c; box-shadow: 0 0 8px rgba(255, 93, 108, 0.8); }

/* ---------------- Step visuals (How it works) ---------------- */
.vf-step-visual {
  position: relative; height: 156px; border-radius: 14px; margin-bottom: 20px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center;
  background:
    radial-gradient(260px 140px at 50% -40px, rgba(64, 110, 220, 0.45), transparent 70%),
    linear-gradient(180deg, var(--vf-ink-1), var(--vf-ink-2));
  border: 1px solid var(--vf-hero-line);
}
.vf-mini-chips { display: flex; flex-direction: column; gap: 7px; width: 72%; }
.vf-mini-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(160, 190, 255, 0.22);
  color: #eaf0fd; font-size: 11.5px; font-weight: 600;
}
.vf-mini-chip .material-symbols-rounded { font-size: 14px; color: var(--vf-hero-accent); }
.vf-mini-chip.sel { background: var(--vf-blue-500); border-color: #4f79d9; }
.vf-mini-chip.sel .material-symbols-rounded { color: #fff; }
.vf-mini-radar { position: relative; width: 126px; height: 126px; }
.vf-mini-radar .ring { position: absolute; border: 1px solid rgba(143, 176, 255, 0.25); border-radius: 50%; }
.vf-mini-radar .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(96, 140, 235, 0.45), rgba(96, 140, 235, 0.05) 30%, transparent 55%);
  animation: vfSweep 5s linear infinite;
}
.vf-mini-radar .dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--vf-hero-accent); animation: vfPulse 2.6s ease-in-out infinite; }
.vf-mini-radar .core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(64, 110, 220, 0.6);
}
.vf-mini-score { position: relative; width: 92px; height: 92px; }
.vf-mini-score svg { transform: rotate(-90deg); display: block; }
.vf-mini-score .t { fill: none; stroke: rgba(143, 176, 255, 0.18); stroke-width: 8; }
.vf-mini-score .f { fill: none; stroke: #2ecc71; stroke-width: 8; stroke-linecap: round; }
.vf-mini-score strong { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; font-weight: 700; }
.vf-mini-pass {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  background: rgba(10, 20, 44, 0.78); border: 1px solid rgba(143, 176, 255, 0.28);
  color: #eaf0fd; font-size: 11.5px; font-weight: 600;
}
.vf-mini-pass .st { width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 8px rgba(46, 204, 113, 0.8); flex: none; }

/* ---------------- Plan comparison table ---------------- */
.vf-compare-wrap { overflow-x: auto; }
.vf-compare th, .vf-compare td { text-align: center; }
.vf-compare th:first-child, .vf-compare td:first-child { text-align: left; }
.vf-compare td:first-child { font-weight: 500; color: var(--vf-gray-700); }
.vf-compare td, .vf-compare th { padding: 13px 20px; }
.vf-compare .vf-tgroup td {
  background: var(--vf-gray-050); font-weight: 700; color: var(--vf-black-500);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 20px;
}
.vf-compare .ok { color: var(--vf-green-500); font-weight: 700; }
.vf-compare .no { color: var(--vf-gray-300); }

/* ---------------- Flow diagram (About) ---------------- */
.vf-flow { display: flex; align-items: flex-start; justify-content: center; margin: 0 auto 48px; max-width: 940px; }
.vf-flow-node { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; flex: none; width: 172px; }
.vf-flow-node .vf-cat-ic { width: 68px; height: 68px; font-size: 34px; margin-bottom: 10px; }
.vf-flow-node strong { font-size: 14px; font-weight: 600; color: var(--vf-black-500); }
.vf-flow-node span { font-size: 12.5px; line-height: 18px; color: var(--vf-gray-500); }
.vf-flow-link {
  flex: 1; height: 2px; margin-top: 34px; min-width: 32px;
  background: repeating-linear-gradient(90deg, var(--vf-blue-500) 0 6px, transparent 6px 12px);
  animation: vfDash 1.1s linear infinite;
}
html[data-theme="dark"] .vf-flow-link { background: repeating-linear-gradient(90deg, var(--vf-hero-accent) 0 6px, transparent 6px 12px); }
@keyframes vfDash { to { background-position: 24px 0; } }

.vf-learn-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 13.5px; font-weight: 600; }
.vf-learn-link .material-symbols-rounded { font-size: 15px; }

/* ---------------- Vertical flow timeline (About) ---------------- */
.vf-vflow { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; }
.vf-vflow-item { display: grid; grid-template-columns: 64px 1fr; gap: 22px; }
.vf-vflow-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vf-vflow-rail .vf-cat-ic { width: 60px; height: 60px; font-size: 28px; }
.vf-vflow-line {
  flex: 1; width: 2px; min-height: 30px;
  background: repeating-linear-gradient(180deg, var(--vf-blue-500) 0 6px, transparent 6px 12px);
  animation: vfDashY 1.1s linear infinite;
}
html[data-theme="dark"] .vf-vflow-line { background: repeating-linear-gradient(180deg, var(--vf-hero-accent) 0 6px, transparent 6px 12px); }
@keyframes vfDashY { to { background-position: 0 24px; } }
.vf-vflow-body { padding: 6px 0 38px; text-align: left; }
.vf-vflow-item:last-child .vf-vflow-body { padding-bottom: 0; }
.vf-vflow-body h3 { font-size: 18px; margin-bottom: 6px; }
.vf-vflow-body p { margin: 0; color: var(--vf-gray-600); font-size: 14.5px; line-height: 23px; }

/* ---------------- Stat band ---------------- */
.vf-stat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vf-stat { text-align: center; padding: 32px 24px; border: 1px solid var(--vf-border); border-radius: 18px; background: var(--vf-white-500); box-shadow: var(--vf-shadow-card); }
.vf-stat strong { display: block; font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--vf-blue-500); margin-bottom: 6px; }
html[data-theme="dark"] .vf-stat strong { color: var(--vf-hero-accent); }
.vf-stat span { font-size: 14px; font-weight: 500; color: var(--vf-gray-600); }

/* ---------------- Legal pages ---------------- */
.vf-legal { max-width: 780px; margin: 0 auto; }
.vf-legal-updated { font-size: 13px; color: var(--vf-gray-500); margin-bottom: 28px; }
.vf-legal h2 { font-size: 21px; line-height: 30px; margin: 40px 0 10px; }
.vf-legal p { color: var(--vf-gray-600); font-size: 14.5px; line-height: 24px; margin-bottom: 12px; }
.vf-legal ul { list-style: disc; padding-left: 24px; margin: 0 0 14px; }
.vf-legal li { color: var(--vf-gray-600); font-size: 14.5px; line-height: 24px; margin-bottom: 6px; }

/* ---------------- Learn articles ---------------- */
/* Applied alongside .vf-legal (e.g. class="vf-container vf-legal vf-article"),
   which already provides the container width plus h2/p/ul/li. This adds only
   what .vf-legal doesn't cover. Tables reuse .vf-table-wrap/.vf-table as-is.
   Callouts reuse .vf-faq-box as-is too -- but .vf-article h3/.vf-legal p tie
   .vf-faq-box h3/p on specificity and win on source order, so the two
   .vf-article .vf-faq-box overrides below are required to actually keep
   .vf-faq-box's own look inside an article (found by code-reviewer). */
.vf-article h3 { font-size: 17px; line-height: 26px; margin: 28px 0 8px; }
.vf-article ol { list-style: decimal; padding-left: 24px; margin: 0 0 14px; }
.vf-article ol li { color: var(--vf-gray-600); font-size: 14.5px; line-height: 24px; margin-bottom: 6px; }
.vf-article blockquote {
  margin: 20px 0; padding: 14px 20px;
  border-left: 3px solid var(--vf-blue-500);
  background: var(--vf-blue-050);
  border-radius: 0 var(--vf-radius) var(--vf-radius) 0;
  color: var(--vf-gray-700); font-size: 14.5px; line-height: 24px;
}
.vf-article blockquote p:last-child { margin-bottom: 0; }
.vf-article img { max-width: 100%; height: auto; border-radius: var(--vf-radius); margin: 20px 0; display: block; }
.vf-article pre {
  background: var(--vf-gray-050); border: 1px solid var(--vf-border); border-radius: var(--vf-radius);
  padding: 16px 20px; overflow-x: auto; margin: 0 0 14px;
}
.vf-article code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  background: var(--vf-gray-050); border: 1px solid var(--vf-border);
  border-radius: 4px; padding: 2px 6px;
}
/* Descendant combinator (not :not(pre) > code) so this still holds if a future
   article's <pre> ever wraps <code> in an intermediate element. */
.vf-article pre code { background: none; border: none; padding: 0; }
.vf-article .vf-table-wrap { margin: 0 0 20px; }
.vf-article .vf-faq-box h3 { font-size: 16px; line-height: 24px; margin: 0 0 6px; }
.vf-article .vf-faq-box p { margin: 0; font-size: 14px; line-height: 22px; }

/* ---------------- Learn article: interactive walkthrough demo ----------------
   A self-contained demo embedded in an article body (piloted on
   creating-and-organizing-groups) -- mirrors a real in-app screen's copy and
   behavior closely enough to teach the actual flow, but is never wired to any
   account data. Any p/h3/h4/ol/li selector below is prefixed .vf-article --
   same specificity reason .vf-faq-box needed it above (.vf-legal p and
   .vf-article ol/ol li are class+type, 0,1,1, and beat an unprefixed
   class-only rule regardless of source order). Selectors on element types
   .vf-legal/.vf-article don't otherwise style (div, label, output, button)
   don't need the prefix. */
.vf-walkthrough { margin: 20px 0 28px; }
.vf-article .vf-walkthrough-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--vf-gray-500);
  margin: 0 0 14px;
}
/* .vf-article prefixed on both rules below, not just the modifiers further
   down -- an <ol> here collides with .vf-article ol's list-style:decimal/
   padding-left:24px (class+type, specificity 0,1,1) at equal-or-higher
   specificity than an unprefixed .vf-walkthrough-steps/.vf-walkthrough-step
   (class-only, 0,1,0) can beat. Without the prefix, the browser's own
   decimal marker renders alongside this component's own hand-written "1."
   text -- confirmed live (screenshot showed "2." "3." "4." bleeding into
   the end of the previous pill's label). Same trap .vf-faq-box already
   documents above; missed it here on the first pass. */
.vf-article .vf-walkthrough-steps {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0; margin: 0 0 16px;
}
.vf-article .vf-walkthrough-step {
  font-size: 12.5px; font-weight: 600; color: var(--vf-gray-500);
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--vf-border);
  background: var(--vf-white-500); margin: 0;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.vf-walkthrough-step.is-active { color: var(--vf-blue-500); border-color: var(--vf-blue-500); background: var(--vf-blue-050); }
.vf-walkthrough-step.is-done { color: var(--vf-green-500); border-color: var(--vf-green-500); }
html[data-theme="dark"] .vf-walkthrough-step.is-active { color: var(--vf-hero-accent); border-color: var(--vf-hero-accent); }

.vf-walkthrough-modal {
  border: 1px solid var(--vf-border); border-radius: var(--vf-radius);
  background: var(--vf-white-500); box-shadow: var(--vf-shadow-card);
  overflow: hidden;
}
.vf-walkthrough-modal-header {
  padding: 16px 22px; font-size: 15px; font-weight: 600; color: var(--vf-black-500);
  border-bottom: 1px solid var(--vf-border);
}
.vf-walkthrough-modal-body { padding: 20px 22px; }
.vf-walkthrough-label { display: block; font-size: 13px; font-weight: 600; color: var(--vf-black-500); margin-bottom: 6px; }
.vf-walkthrough-input {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--vf-border);
  background: var(--vf-page); color: var(--vf-black-500); font-family: var(--vf-font-family); font-size: 14px;
  margin-bottom: 4px;
}
.vf-walkthrough-input:focus-visible { outline: 2px solid var(--vf-blue-500); outline-offset: 1px; }
.vf-article .vf-walkthrough-error { min-height: 18px; font-size: 12.5px; color: var(--vf-red-500); margin: 0 0 18px; }
.vf-article .vf-walkthrough-hint { font-size: 13px; color: var(--vf-gray-600); margin: 0 0 10px; }
.vf-walkthrough-threshold-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.vf-walkthrough-range { flex: 1; accent-color: var(--vf-blue-500); }
.vf-walkthrough-threshold-value {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 14px; font-weight: 600; color: var(--vf-blue-500); min-width: 42px; text-align: right;
}
html[data-theme="dark"] .vf-walkthrough-threshold-value { color: var(--vf-hero-accent); }
.vf-walkthrough-filtering { padding: 16px; border-radius: 12px; background: var(--vf-gray-050); border: 1px solid var(--vf-border); }
.vf-walkthrough-filtering-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.vf-article .vf-walkthrough-filtering h4 { font-size: 13px; margin: 0; color: var(--vf-black-500); }
.vf-article .vf-walkthrough-filtering p { font-size: 13px; color: var(--vf-gray-600); margin: 0; line-height: 21px; }

/* The Pro/Business <-> Enterprise toggle -- lets the demo show BOTH branches
   of groups.php's real $isEnterprise conditional in one place, not just the
   branch whatever plan the reader happens to be on would see. */
.vf-walkthrough-plan-toggle { display: inline-flex; border: 1px solid var(--vf-border); border-radius: 999px; padding: 2px; background: var(--vf-white-500); }
.vf-walkthrough-plan-toggle button {
  font-family: var(--vf-font-family); font-size: 12px; font-weight: 600; color: var(--vf-gray-600);
  background: transparent; border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.vf-walkthrough-plan-toggle button.is-active { background: var(--vf-blue-500); color: var(--vf-static-white); }
.vf-walkthrough-ent-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--vf-blue-050); color: var(--vf-blue-500);
}
.vf-walkthrough-plan-toggle button.is-active .vf-walkthrough-ent-badge { background: rgba(255, 255, 255, 0.25); color: var(--vf-static-white); }
html[data-theme="dark"] .vf-walkthrough-ent-badge { color: var(--vf-hero-accent); }

.vf-walkthrough-mode-row { display: flex; gap: 16px; margin-bottom: 14px; }
.vf-article .vf-walkthrough-mode-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--vf-gray-700); }

.vf-walkthrough-preset-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.vf-walkthrough-preset-tabs button {
  font-family: var(--vf-font-family); font-size: 12.5px; font-weight: 600; color: var(--vf-gray-600);
  background: var(--vf-white-500); border: 1px solid var(--vf-border); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
.vf-walkthrough-preset-tabs button.is-active { color: var(--vf-blue-500); border-color: var(--vf-blue-500); background: var(--vf-blue-050); }
html[data-theme="dark"] .vf-walkthrough-preset-tabs button.is-active { color: var(--vf-hero-accent); border-color: var(--vf-hero-accent); }
.vf-article .vf-walkthrough-preset-summary { font-size: 12.5px; color: var(--vf-gray-600); margin: 0; }
.vf-walkthrough-preset-summary strong { color: var(--vf-black-500); }

.vf-walkthrough-custom-actions { display: flex; gap: 12px; margin-bottom: 10px; }
.vf-walkthrough-custom-actions button {
  font-family: var(--vf-font-family); font-size: 12px; font-weight: 600; color: var(--vf-blue-500);
  background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline;
}
html[data-theme="dark"] .vf-walkthrough-custom-actions button { color: var(--vf-hero-accent); }
.vf-walkthrough-custom-group { margin-bottom: 10px; }
.vf-article .vf-walkthrough-custom-group h5 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vf-gray-500); margin: 0 0 6px; }
.vf-walkthrough-custom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 10px; }
.vf-article .vf-walkthrough-custom-grid label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--vf-gray-700); }

.vf-walkthrough-modal-footer { padding: 16px 22px; border-top: 1px solid var(--vf-border); display: flex; justify-content: flex-end; }

.vf-walkthrough-result {
  border: 1px solid var(--vf-border); border-radius: var(--vf-radius);
  background: var(--vf-green-surface); box-shadow: var(--vf-shadow-card);
  padding: 22px; text-align: center;
}
.vf-article .vf-walkthrough-result-label { font-size: 12.5px; font-weight: 600; color: var(--vf-gray-600); margin: 0 0 10px; }
.vf-walkthrough-result-card {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-radius: 12px; background: var(--vf-white-500); border: 1px solid var(--vf-border);
  margin-bottom: 16px;
}
.vf-walkthrough-result-name { font-size: 15px; font-weight: 600; color: var(--vf-black-500); }
.vf-walkthrough-result-threshold {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px; color: var(--vf-green-500); font-weight: 600;
}
html[data-theme="dark"] .vf-walkthrough-result-threshold { color: var(--vf-green-500); }
.vf-article .vf-walkthrough-result-categories { font-size: 12.5px; color: var(--vf-gray-600); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .vf-walkthrough-step { transition: none; }
}

/* Learn hero title -- bolder/bigger than the site's shared h1 (Poppins
   ExtraBold 800, already loaded for weight 800 above), scoped to this page
   only via .vf-learn-hero so it doesn't change every other page's h1. */
.vf-learn-hero h1 { font-weight: 800; font-size: 60px; letter-spacing: -0.02em; }
@media (max-width: 900px) { .vf-learn-hero h1 { font-size: 44px; } }

/* ---------------- Learn listing ---------------- */
/* Recreated from noc2024/css/articles.css's .learn-filter/.article-box rules
   (dimensions, radii, shadows copied 1:1) with noc2024's pink (#d80758) and
   blue (#2937f0) accents both replaced by this site's own --vf-blue-500/600 --
   plain CSS, not noc2024's actual Bootstrap-dependent stylesheet, so /learn
   doesn't reintroduce Bootstrap/jQuery into a site that deliberately retired
   both (see project-agents.md). Section grouping/filter JS mechanism
   (show/hide a whole [data-category] block, not individual cards) also
   matches noc2024's actual approach 1:1. */
.vf-learn-filter {
  background: var(--vf-white-500); border: 1px solid var(--vf-gray-200); color: var(--vf-gray-700);
  border-radius: 20px; padding: 6px 16px; font-size: 14px; font-weight: 500;
  transition: all 0.2s ease; cursor: pointer;
}
.vf-learn-filter:hover { border-color: var(--vf-blue-500); color: var(--vf-blue-500); }
.vf-learn-filter.is-active { background: var(--vf-blue-500); border-color: var(--vf-blue-500); color: var(--vf-static-white); }

.vf-learn-section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 26px; line-height: 32px; font-weight: 700; margin-bottom: 18px;
}
.vf-learn-section-title .material-symbols-rounded { font-size: 22px; color: var(--vf-blue-500); }
html[data-theme="dark"] .vf-learn-section-title .material-symbols-rounded { color: var(--vf-hero-accent); }

/* Fixed 3/2/1-column grid (matches noc2024/cleanbrowsing's Bootstrap
   col-lg-6/col-xl-4 layout) instead of auto-fill -- keeps card rows aligned
   at every width rather than leaving a ragged last row. */
.vf-learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
@media (max-width: 900px) { .vf-learn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vf-learn-grid { grid-template-columns: 1fr; } }

/* Hero search bar + the section selector directly under it (visual only, see
   learn/index.php's own comment -- not wired to real search yet). Noc2024/
   cleanbrowsing's search inputs are only lightly rounded, not a full pill;
   .vf-input's own 10px default reads more rounded than that at this width,
   so this scopes a smaller radius to just this input. */
.vf-hero-search .vf-input { border-radius: 8px; }
/* A <fieldset>, not a <div> -- border/padding/margin reset since fieldset
   carries browser default box styling this row doesn't want. */
.vf-hero-search-scope { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 12px 0 0; padding: 0; border: 0; font-size: 13.5px; }
.vf-hero-search-scope label { display: inline-flex; align-items: center; gap: 6px; color: rgba(226, 234, 252, 0.72); cursor: pointer; }
.vf-hero-search-scope input[type="radio"] { accent-color: var(--vf-hero-accent); margin: 0; cursor: pointer; }

/* Screen-reader-only: visually hidden, still announced (e.g. a <fieldset>'s
   <legend> that has no reason to be visible when the fieldset's own visible
   label/context already makes its purpose clear on-screen). */
.vf-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.vf-article-box {
  background: var(--vf-white-500); border: 1px solid var(--vf-border); border-radius: var(--vf-radius);
  display: flex; flex-direction: column; overflow: hidden;
  /* Visible-but-soft at rest (matches noc2024/cleanbrowsing's own resting
     card shadow) so cards read as cards immediately, not just on hover --
     shadow-card alone is close to invisible at rest. */
  box-shadow: 0 2px 10px rgba(11, 17, 32, 0.07); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vf-article-box:hover { transform: translateY(-2px); box-shadow: var(--vf-shadow-pop); }
.vf-article-box .a-body { padding: 20px 20px 10px; flex: 1; }
.vf-article-box .a-body a.title { text-decoration: none; }
.vf-article-box .a-body a.title h3 { margin: 0 0 8px; font-size: 17px; line-height: 24px; color: var(--vf-black-500); }
.vf-article-box .a-body a.title:hover h3 { color: var(--vf-blue-500); }
html[data-theme="dark"] .vf-article-box .a-body a.title:hover h3 { color: var(--vf-hero-accent); }
.vf-article-box .a-body p { margin: 0; color: var(--vf-gray-700); font-size: 14px; line-height: 22px; }
.vf-article-box .a-footer { margin-top: auto; padding: 12px 20px; border-top: 1px solid var(--vf-border); }
.vf-article-box .a-footer .btn-readmore {
  display: inline-flex; align-items: center; gap: 6px; background: var(--vf-blue-500); color: var(--vf-static-white); border: none;
  padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none;
}
.vf-article-box .a-footer .btn-readmore .material-symbols-rounded { font-size: 16px; transition: transform 0.18s ease; }
.vf-article-box .a-footer .btn-readmore:hover { background: var(--vf-blue-600); color: var(--vf-static-white); }
.vf-article-box .a-footer .btn-readmore:hover .material-symbols-rounded { transform: translateX(2px); }

/* ---------------- Learn article sidebar ---------------- */
/* Recreated from noc2024/css/articles.css's .sidebar/.r-box/.t-list/.promo-link
   rules (dimensions/radii copied 1:1), noc2024's pink (#d80758) accent border
   mapped to --vf-blue-500. An article page becomes a 2-column grid (main
   content + sidebar) instead of .vf-legal's usual single centered column --
   the main column keeps .vf-legal/.vf-article's own typography, just not its
   own max-width/centering, which the grid now provides instead. */
.vf-article-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
.vf-article-layout .vf-legal { max-width: none; margin: 0; }
@media (max-width: 991px) {
  .vf-article-layout { grid-template-columns: 1fr; }
}

.vf-learn-sidebar { display: flex; flex-direction: column; gap: 16px; }
.vf-learn-sidebar-sticky { position: sticky; top: 20px; }
@media (max-width: 991px) {
  .vf-learn-sidebar-sticky { position: static; }
}

.vf-sidebar-box {
  background: var(--vf-gray-050); border: 1px solid var(--vf-border);
  border-left: 4px solid var(--vf-blue-500); border-radius: 12px; padding: 16px;
}
.vf-sidebar-box h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--vf-black-500); }
.vf-sidebar-box p { margin: 0; color: var(--vf-gray-700); font-size: 14px; line-height: 22px; }
.vf-sidebar-box .vf-promo-link { display: inline-block; margin-top: 8px; color: var(--vf-blue-500); text-decoration: underline; font-weight: 600; font-size: 14px; }
.vf-sidebar-box .vf-promo-link:hover { color: var(--vf-blue-600); }
html[data-theme="dark"] .vf-sidebar-box .vf-promo-link:hover { color: var(--vf-hero-accent); }

.vf-sidebar-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.vf-sidebar-list li { position: relative; padding-left: 14px; color: var(--vf-gray-700); font-size: 13.5px; line-height: 20px; }
.vf-sidebar-list li::before { content: "•"; position: absolute; left: 0; color: var(--vf-gray-500); }
@media (max-width: 400px) {
  .vf-sidebar-list { grid-template-columns: 1fr; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  h1 { font-size: 38px; line-height: 46px; }
  .vf-hero-split { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .vf-hero-split .vf-chip-row { margin-inline: auto; }
  .vf-hero-split .vf-hero-sub { margin-inline: auto; }
  .vf-radar { max-width: 340px; }
  .vf-stat-band { grid-template-columns: 1fr; }
  h2 { font-size: 28px; line-height: 36px; }
  .vf-hero { padding: 64px 0 52px; }
  .vf-section { padding: 56px 0; }
  .vf-form-grid-3 { grid-template-columns: 1fr; }
  .vf-cat-status { grid-template-columns: 1fr; }
  .vf-flow { flex-direction: column; align-items: center; }
  .vf-flow-link { flex: none; width: 2px; height: 30px; min-width: 0; margin: 10px 0; background: repeating-linear-gradient(180deg, var(--vf-blue-500) 0 6px, transparent 6px 12px); animation: none; }
}
@media (max-width: 700px) {
  .vf-nav-toggle { display: inline-flex; }
  .vf-nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    gap: 2px; padding: 8px 16px 16px; background: var(--vf-white-500); border-bottom: 1px solid var(--vf-border);
    box-shadow: var(--vf-shadow-card);
  }
  .vf-nav-menu.is-open { display: flex; }
  .vf-nav-menu .vf-nav-link { padding: 12px 14px; }
  .vf-nav-menu .vf-btn { margin-top: 8px; }
}
@media (max-width: 480px) {
  .vf-nav-brand img.vf-nav-brand-full { display: none; }
  .vf-nav-brand img.vf-nav-brand-mark { display: block; height: 30px; }
}
@media (max-width: 640px) {
  .vf-nav-inner { padding: 12px 16px; gap: 12px; }
  .vf-hero { padding: 52px 0 44px; }
  h1 { font-size: 32px; line-height: 40px; }
  .vf-cat-card { min-width: calc(50% - 8px); }
  .vf-chip-row { grid-template-columns: 1fr; }
  .vf-form-grid-2 { grid-template-columns: 1fr; }
  .vf-container { padding: 0 16px; }
}


/* ---------------- Export additions ---------------- */
.material-symbols-rounded {
  font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a:focus-visible, .vf-btn:focus-visible, .vf-nav-link:focus-visible, .vf-chip:focus-visible,
.vf-theme-toggle:focus-visible, .vf-switch:focus-visible, .vf-modal-close:focus-visible,
.vf-input:focus-visible, .vf-select:focus-visible {
  outline: 2px solid var(--vf-blue-500); outline-offset: 2px;
}
html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] .vf-btn:focus-visible,
html[data-theme="dark"] .vf-nav-link:focus-visible, html[data-theme="dark"] .vf-chip:focus-visible,
html[data-theme="dark"] .vf-theme-toggle:focus-visible, html[data-theme="dark"] .vf-switch:focus-visible {
  outline-color: var(--vf-hero-accent);
}
.vf-cat-card.selectable:has(input:focus-visible) { outline: 2px solid var(--vf-blue-500); outline-offset: 2px; }