/* The agent directory (/agents) and an agent's profile page (/<account>/<agent>).
   Loaded after brand.css and home.css: the header, footer, buttons, .vz-light surfaces and the .vz-page tokens
   come from home.css, so these pages read as the same site. Everything here is scoped to its own classes. */

body.vz-directory { margin: 0; }
.vz-skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px;
  background: #fff; color: #0b1019; font-weight: 600; }
.vz-skip:focus { top: 12px; }
.vz-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vz-header nav a[aria-current="page"] { color: #fff; border-bottom: 2px solid #8681ff; }

/* ------------------------------------------------------------------ the dark top: header and search */
.vz-dir-top { background: radial-gradient(900px 420px at 50% -80px, #2b2570 0, rgba(43, 37, 112, 0) 70%), #0b1019; }
.vz-dir-hero { max-width: 900px; margin: 0 auto; padding: 18px 5% 64px; text-align: center; }
.vz-dir-hero .vz-eyebrow { margin-bottom: 16px; }
.vz-dir-hero h1 { margin: 0; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -1.8px; font-weight: 700; color: #fff; }
.vz-dir-sub { margin: 16px auto 30px; max-width: 60ch; font-size: clamp(16px, 1.3vw, 19px); color: #d3d7e3; line-height: 1.5; }
.vz-dir-search { position: relative; display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 0 auto;
  padding: 6px 6px 6px 18px; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px #0007, 0 0 0 1px #ffffff26; }
.vz-dir-search-ico { display: grid; place-items: center; color: #5f667a; }
.vz-dir-search-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.vz-dir-search input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; font: inherit; font-size: 17px; color: #0b1019; }
.vz-dir-search input:focus { outline: none; }
.vz-dir-search input::placeholder { color: #7a8196; }
.vz-dir-search:focus-within { box-shadow: 0 18px 50px #0007, 0 0 0 3px #8d86ff; }
.vz-dir-search button { flex: none; height: 48px; padding: 0 26px; border: 0; border-radius: 10px; background: var(--vz-brand);
  color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: var(--vz-brand-lift); transition: filter .15s; }
.vz-dir-search button:hover { filter: brightness(1.1); }
.vz-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; margin: 0; padding: 6px; list-style: none;
  border-radius: 12px; background: #fff; box-shadow: 0 18px 40px #0b101940; text-align: left; }
.vz-suggest li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #0b1019; cursor: pointer; font-size: 15px; }
.vz-suggest li small { color: #5f667a; }
.vz-suggest li[aria-selected="true"], .vz-suggest li:hover { background: #f0efff; }
.vz-dir-examples { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.vz-dir-examples a { padding: 9px 18px; border-radius: 999px; border: 1px solid #ffffff38; color: #eef0f8; font-size: 14px;
  background: #ffffff08; transition: background .15s, border-color .15s; }
.vz-dir-examples a:hover { background: #ffffff18; border-color: #a7a2ff; }
.vz-dir-facts { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin: 30px 0 0; padding: 14px 30px;
  list-style: none; border-radius: 999px; border: 1px solid #ffffff1c; background: #ffffff0a; color: #e6e8f2; font-size: 14.5px; }
.vz-dir-facts li { display: flex; align-items: center; gap: 12px; }
.vz-dir-facts i { display: grid; place-items: center; color: #9c96ff; }
.vz-dir-facts svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ the light area: filters and results */
.vz-dir-page { background: var(--paper); color: var(--ink); }
.vz-dir-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding: 32px var(--vz-inline) 64px; }
.vz-dir-filters { align-self: start; position: sticky; top: 16px; padding: 22px 20px; border-radius: 14px; background: #eef0f6; color: var(--ink); }
.vz-filters-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.vz-filters-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.vz-filters-head a { color: var(--vz-brand); font-size: 14px; font-weight: 600; }
.vz-dir-filters fieldset { margin: 0; padding: 16px 0 12px; border: 0; border-top: 1px solid #dde0ea; min-width: 0; }
.vz-dir-filters legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.vz-dir-filters legend + * { clear: both; }
.vz-check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.vz-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--vz-brand); flex: none; }
.vz-check span:first-of-type { flex: 1; }
.vz-count { font-size: 12px; color: var(--ink-muted); }
.vz-filters-note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.vz-apply { margin-top: 14px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: var(--vz-brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.js .vz-apply { display: none; }
.vz-filter-toggle { display: none; }

.vz-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.vz-chips a { padding: 9px 18px; border-radius: 999px; background: #eef0f6; color: var(--ink-2); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.vz-chips a:hover { background: #e3e5ef; color: var(--ink); }
.vz-chips a.on { background: var(--vz-brand); color: #fff; box-shadow: var(--vz-brand-lift); }
.vz-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.vz-results-head h2 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.8px; color: var(--ink); }
.vz-results-count { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }
.vz-sort select { height: 42px; padding: 0 38px 0 14px; border: 1px solid #d9dcea; border-radius: 10px; background: #fff; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f667a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.vz-cat-intro, .vz-early { margin: -6px 0 20px; color: var(--ink-2); font-size: 15px; }
.vz-cat-intro { max-width: 760px; margin-bottom: 26px; }
.vz-cat-intro p { margin: 0 0 10px; line-height: 1.6; }
.vz-early { font-size: 13px; color: var(--ink-muted); }
.vz-dir-note { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--ink-muted); }
.vz-more-wrap { display: flex; justify-content: center; margin-top: 30px; }
.vz-more { padding: 11px 34px; border-radius: 10px; border: 1.5px solid var(--vz-brand); color: var(--vz-brand); font-weight: 600; font-size: 15px; background: #fff; transition: background .15s; }
.vz-more:hover { background: #f0efff; }
.vz-more[aria-busy="true"] { opacity: .6; pointer-events: none; }
/* ---- a category's complete list (every agent, with its main skill), and the directory's list of categories ---- */
.vz-index { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--rule, #e1e4ee); }
.vz-index h2 { margin: 0 0 22px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -.6px; color: var(--ink); }
.vz-index-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px 32px; }
.vz-index-list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; align-content: start; gap: 2px 12px; padding-bottom: 16px; border-bottom: 1px solid var(--rule, #e1e4ee); }
.vz-index-list a { color: var(--ink); font-weight: 600; font-size: 16px; }
.vz-index-list a:hover { color: var(--vz-brand); text-decoration: underline; }
.vz-index-skill { color: #4f43d6; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.vz-index-list p { grid-column: 1 / -1; margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }

/* ------------------------------------------------------------------ result cards */
.vz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vz-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff;
  border: 1px solid #e1e4ee; box-shadow: 0 1px 2px #0b10190a; transition: box-shadow .2s, transform .2s, border-color .2s; }
.vz-card:hover, .vz-card:focus-within { transform: translateY(-3px); border-color: #cfcaff; box-shadow: 0 16px 36px #0b101918; }
.vz-card-media { position: relative; aspect-ratio: 6 / 5; overflow: hidden; background: #e9ebf3; }
.vz-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; transition: transform .5s ease; }
.vz-card:hover .vz-card-media img { transform: scale(1.03); }
.vz-card-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%;
  opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.vz-card-loop.playing { opacity: 1; }
.vz-card-initial { display: grid; place-items: center; width: 100%; height: 100%; font-size: 64px; font-weight: 700; color: #b8b4ff; }
.vz-card-ai, .vz-avail { position: absolute; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; background: #ffffffeb; color: #0b1019; box-shadow: 0 2px 8px #0b101922; backdrop-filter: blur(4px); }
.vz-card-ai { left: 12px; }
.vz-card-media .vz-avail { right: 12px; }
.vz-avail i { width: 8px; height: 8px; border-radius: 50%; background: #8a91a6; }
.vz-avail.is-available i { background: #1fbf6a; box-shadow: 0 0 0 3px #1fbf6a2e; }
.vz-avail.is-busy i { background: #e5a100; }
.vz-avail.is-text_only i { background: #6a8cff; }
.vz-avail.is-paused i { background: #8a91a6; }
/* offline: the agent's account is out of credits. Shown, greyed, and nothing to start */
.vz-avail.is-offline i { background: #8a91a6; box-shadow: none; }
.vz-card.is-offline .vz-card-media img, .vz-card.is-offline .vz-card-loop,
.vz-pro-portrait.is-offline img, .vz-pro-portrait.is-offline video { filter: grayscale(1); opacity: .6; }
.vz-pro-portrait.is-offline { box-shadow: 0 24px 60px #0009; }
.vz-pro-portrait.is-offline::before, .vz-pro-portrait.is-offline::after { display: none; }
.vz-primary.vz-unavailable, .vz-primary.vz-unavailable:hover { background: #3a4152; color: #aab1c3; box-shadow: none; cursor: not-allowed; filter: none; transform: none; }
.vz-avail.is-unavailable i { background: #e04b5a; }
.vz-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 16px 18px 18px; }
.vz-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vz-kind, .vz-example, .vz-verified, .vz-featured { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.vz-kind { background: #ece9ff; color: #4f43d6; }
.vz-kind.k-guide { background: #dcf5e6; color: #17703f; }
.vz-kind.k-business { background: #e3ecff; color: #2a55c9; }
.vz-kind.k-character { background: #f2e5ff; color: #7c32bd; }
.vz-kind.k-expert { background: #fff0d4; color: #845400; }
.vz-example { background: #f1f2f6; color: #4b5266; }
.vz-verified { background: #dff3ff; color: #075b8a; }
.vz-featured { background: #fff4db; color: #7a5200; }
.vz-card-name { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; }
.vz-card-name a { color: var(--ink); }
.vz-card-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.vz-card-name a:focus-visible { outline: none; }
.vz-card:has(.vz-card-name a:focus-visible) { outline: 3px solid var(--vz-brand); outline-offset: 3px; }
.vz-card-by { margin: 3px 0 0; font-size: 14px; color: var(--ink-muted); }
.vz-card-headline { margin: 10px 0 12px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.vz-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.vz-card-tags li { padding: 4px 10px; border-radius: 999px; border: 1px solid #c9c4ff; color: #4f43d6; font-size: 12.5px; font-weight: 500; background: #faf9ff; }
.vz-card-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: auto 0 14px; padding-top: 14px; border-top: 1px solid #eceef4; }
.vz-card-facts > div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.vz-card-facts i { grid-row: span 2; display: grid; place-items: center; color: #5f667a; }
.vz-card-facts svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vz-card-facts dt { font-size: 11.5px; color: var(--ink-muted); }
.vz-card-facts dd { margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.vz-card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--vz-brand); font-size: 15px; font-weight: 600; }
.vz-card-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.vz-card:hover .vz-card-link svg { transform: translate(2px, -2px); }

.vz-empty { grid-column: 1 / -1; padding: 48px 24px; border: 1px dashed #cfd3e0; border-radius: 14px; text-align: center; background: #fff; }
.vz-empty h3 { margin: 0 0 8px; font-size: 20px; }
.vz-empty p { margin: 0 auto 20px; max-width: 48ch; color: var(--ink-2); }
.vz-empty-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.vz-empty .vz-primary { padding: 13px 22px; font-size: 15px; }
.vz-secondary-light { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 12px; border: 1px solid #d3d6e3;
  background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.vz-secondary-light:hover { background: #f4f5fa; }

/* ------------------------------------------------------------------ the profile page */
body.vz-profile .vz-scene-plain { min-height: 0; padding-bottom: 0;
  background: radial-gradient(1000px 480px at 75% -120px, #2b2570 0, rgba(43, 37, 112, 0) 70%), #0b1019; }
.vz-pro-banner { margin: 0; padding: 10px 4.8%; background: #3a2d00; color: #ffe7a3; font-size: 14px; text-align: center; }
.vz-pro-hero { padding: 8px var(--vz-inline) 72px; }
.vz-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font-size: 14px; color: #a8afc1; }
.vz-crumbs a { color: #c9cce0; }
.vz-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vz-pro-grid { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 56px; align-items: center; }
.vz-pro-portrait { margin: 0; aspect-ratio: 3 / 4; border-radius: 26px; background: #192030; box-shadow: 0 24px 60px #0009, 0 0 26px #7778ff33; }
/* overflow stays visible: the travelling edge light (.vz-edge-glow, brand.css) sits just outside the frame,
   and the portrait and its loop clip themselves with border-radius */
.vz-pro-portrait { position: relative; }
.vz-pro-portrait img, .vz-pro-loop { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: inherit; display: block; }
.vz-pro-loop { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.vz-pro-loop.playing { opacity: 1; }
.vz-pro-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vz-badge-ai { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .3px; background: #fff; color: #0b1019; }
.vz-pro-intro h1 { margin: 0; font-size: clamp(38px, 4vw, 62px); line-height: 1.05; letter-spacing: -1.8px; font-weight: 700; color: #fff; }
.vz-pro-by { margin: 10px 0 0; font-size: 16px; color: #c9cce0; }
.vz-pro-by strong { color: #fff; font-weight: 600; }
.vz-pro-by a { color: #c9c6ff; text-decoration: underline; text-underline-offset: 3px; }
.vz-pro-by a.vz-pro-by-company { color: inherit; text-decoration: none; }
.vz-pro-by a.vz-pro-by-company:hover strong { text-decoration: underline; text-underline-offset: 3px; }
/* a company's logo above its agent's name (directory_pages.profile_main) */
.vz-pro-company { display: inline-flex; align-items: center; margin-bottom: 18px; padding: 8px 14px; border-radius: 12px; background: #fff;
  box-shadow: 0 10px 26px #0006; transition: transform .15s, box-shadow .15s; }
.vz-pro-company:hover { transform: translateY(-1px); box-shadow: 0 14px 30px #0008; }
.vz-pro-company:focus-visible { outline: 3px solid #a7a2ff; outline-offset: 3px; }
.vz-pro-company img { display: block; height: 32px; width: auto; max-width: 200px; object-fit: contain; }
.vz-pro-headline { margin: 20px 0 0; max-width: 34ch; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; color: #eef0f8; }
.vz-pro-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: #d3d7e3; }
.vz-pro-meta li { display: flex; align-items: center; gap: 8px; }
.vz-pro-meta i { display: grid; place-items: center; color: #9c96ff; }
.vz-pro-meta svg, .vz-actions > button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vz-avail.vz-avail-dark { position: static; background: #ffffff14; color: #eef0f8; box-shadow: none; }
.vz-pro-detail { margin: 12px 0 0; max-width: 52ch; font-size: 14px; color: #ffd98a; }
.vz-pro-intro .vz-actions { margin-top: 28px; }
.vz-pro-intro .vz-primary, .vz-pro-intro .vz-secondary { font: inherit; font-size: 16px; padding: 16px 24px; gap: 10px; cursor: pointer; }
.vz-pro-intro .vz-actions > * > span:last-child { font-size: inherit; }   /* home.css sizes a last span as an arrow */
.vz-pro-note { margin: 14px 0 0; font-size: 13px; color: #a8afc1; }

.vz-pro-body { padding-top: 64px; }
.vz-pro-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; max-width: 1240px; margin: 0 auto; align-items: start; }
.vz-pro-main > section + section, .vz-pro-main > p + section, .vz-pro-main > section + p { margin-top: 44px; }
.vz-pro-main h2 { margin: 0 0 14px; font-size: 24px; font-weight: 700; letter-spacing: -.5px; text-align: left; color: var(--ink); }
.vz-pro-about p { margin: 0 0 14px; max-width: 64ch; font-size: 17px; line-height: 1.65; }
.vz-pro-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.vz-pro-cols h2 { font-size: 19px; }
.vz-pro-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vz-pro-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.vz-pro-list i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; }
.vz-pro-list svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vz-pro-list.ok i { background: #dcf5e6; color: #17703f; }
.vz-pro-list.no i { background: #f1f2f6; color: #6b7185; }
.vz-pro-notice { display: flex; gap: 12px; align-items: flex-start; margin: 32px 0 0; padding: 14px 16px; border-radius: 12px; background: #fff7e0; color: #5c4300; font-size: 15px; line-height: 1.5; }
.vz-pro-notice i { flex: none; color: #a06b00; }
.vz-pro-notice svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vz-pro-hint { margin: -6px 0 14px; font-size: 14px; color: var(--ink-muted); }
.vz-starter.vz-starter-light { background: #fff; border-color: #d6d9e6; color: var(--ink); font-size: 15px; }
.vz-starter.vz-starter-light:hover { background: #f4f3ff; border-color: #a9a3ff; }
.vz-starter.vz-starter-light span { color: var(--vz-brand); }
.vz-starter.is-static { cursor: default; }
.vz-pro-questions .vz-starters { margin-top: 0; max-width: none; }

.vz-pro-side { position: sticky; top: 20px; }
.vz-pro-facts { margin: 0; padding: 6px 22px; border-radius: 16px; background: #fff; border: 1px solid #e1e4ee; box-shadow: 0 8px 24px #0b10190a; }
.vz-pro-facts > div { padding: 14px 0; border-bottom: 1px solid #eceef4; }
.vz-pro-facts > div:last-child { border-bottom: 0; }
.vz-pro-facts dt { font-size: 12.5px; font-weight: 600; letter-spacing: .2px; color: var(--ink-muted); margin-bottom: 5px; }
.vz-pro-facts dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.vz-pro-facts .vz-avail { position: static; box-shadow: none; background: #f1f2f6; }
.vz-pro-links { display: flex; flex-wrap: wrap; gap: 6px; }
.vz-pro-links a { padding: 3px 10px; border-radius: 999px; border: 1px solid #c9c4ff; color: #4f43d6; font-size: 13px; background: #faf9ff; }
.vz-pro-links a:hover { background: #f0efff; }
.vz-pro-small { margin: 14px 4px 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.vz-pro-tools { display: flex; gap: 10px; margin-top: 16px; }
.vz-tool { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid #d6d9e6; background: #fff;
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s; }
.vz-tool:hover { background: #f4f5fa; }
.vz-tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vz-tool.done { border-color: #1fbf6a; color: #17703f; }

.vz-related { background: #fff; }
.vz-related-in { max-width: 1240px; margin: 0 auto; }
.vz-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.vz-related-head h2 { margin: 0; text-align: left; font-size: clamp(24px, 2.2vw, 32px); }
.vz-related-head a { color: var(--vz-brand); font-weight: 600; }
.vz-final-sub { margin: -16px auto 28px; max-width: 52ch; color: #c9cce0; font-size: 17px; }
.vz-final .vz-secondary { font: inherit; font-size: 17px; }

/* the report dialog */
.vz-report { width: min(480px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 18px; background: #fff; color: #0b1019;
  box-shadow: 0 30px 80px #0008; font-family: var(--vz-font); }
.vz-report::backdrop { background: #050b17b3; backdrop-filter: blur(6px); }
.vz-report form { padding: 26px 26px 22px; }
.vz-report h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.4px; }
.vz-report p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: #3a4050; }
.vz-report fieldset { margin: 0 0 14px; padding: 0; border: 0; }
.vz-report legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.vz-radio { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 15px; cursor: pointer; }
.vz-radio input { width: 17px; height: 17px; margin: 0; accent-color: var(--vz-brand); }
.vz-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.vz-field small { font-weight: 400; color: #5f667a; }
.vz-field textarea { padding: 10px 12px; border: 1px solid #d3d6e3; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 400; resize: vertical; }
.vz-field textarea:focus { outline: none; border-color: var(--vz-brand); box-shadow: 0 0 0 3px #655bff33; }
.vz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vz-report-msg { min-height: 1.2em; margin: 12px 0 0 !important; font-weight: 600; }
.vz-report-msg.error { color: #b3261e !important; }
.vz-report-msg.ok { color: #17703f !important; }
.vz-report-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.vz-report-actions .vz-primary { padding: 12px 20px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1150px) {
  .vz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-pro-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
}
@media (max-width: 900px) {
  .vz-dir-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 24px; }
  .vz-dir-filters { position: static; }
  .js .vz-dir-filters.collapsed > :not(.vz-filters-head) { display: none; }
  .js .vz-filter-toggle { display: inline-flex; }
  .vz-filter-toggle { align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 18px; font-weight: 600; color: var(--ink); cursor: pointer; }
  .vz-filter-toggle::after { content: "⌄"; font-size: 16px; transition: transform .2s; }
  .vz-dir-filters:not(.collapsed) .vz-filter-toggle::after { transform: rotate(180deg); }
  .js .vz-filters-head h2 { display: none; }
  .js .vz-dir-filters.collapsed { padding-block: 14px; }
  .js .vz-dir-filters.collapsed .vz-filters-head { margin-bottom: 0; align-items: center; }
  .vz-pro-grid { grid-template-columns: 1fr; gap: 28px; }
  .vz-pro-portrait { max-width: 280px; }
  .vz-pro-layout { grid-template-columns: 1fr; }
  .vz-pro-side { position: static; }
  .vz-pro-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vz-grid { grid-template-columns: 1fr; }
  .vz-dir-hero { padding: 8px var(--vz-gutter) 44px; }
  .vz-dir-search { padding-left: 10px; }
  .vz-dir-search button { padding: 0 14px; font-size: 14px; }
  .vz-dir-search { gap: 6px; }
  .vz-dir-search input { font-size: 16px; }   /* 16px or iOS zooms in on focus */
  /* the categories scroll sideways in one row instead of stacking seven rows above the results */
  .vz-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--vz-gutter)) 20px; padding: 2px var(--vz-gutter) 12px; scrollbar-width: none;
    scroll-padding-inline: var(--vz-gutter); scroll-snap-type: x proximity;
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .vz-chips::-webkit-scrollbar { display: none; }
  .vz-chips a { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .vz-dir-facts { border-radius: 16px; padding: 14px 18px; gap: 10px; flex-direction: column; align-items: flex-start; }
  .vz-results-head { flex-direction: column; align-items: flex-start; }
  .vz-pro-hero { padding: 4px var(--vz-inline) 48px; }
  .vz-pro-intro .vz-actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .vz-card-loop, .vz-pro-loop { display: none; }      /* the still portrait instead of a moving one */
  .vz-card, .vz-card-media img, .vz-card-link svg { transition: none; }
  .vz-card:hover { transform: none; }
  .vz-card:hover .vz-card-media img { transform: none; }
}

/* ------------------------------------------------------------------ languages (avatar_app/languages.py) */
.vz-lang-more { color: var(--vz-brand); font-weight: 600; white-space: nowrap; }
.vz-pro-meta .vz-lang-more, .vz-pro-facts .vz-lang-more { color: inherit; opacity: .75; }

/* ------------------------------------------------------------------ a company's page, /<account> (account_page) */
.vz-acct-hero { padding-bottom: 56px; }
.vz-acct-logo { display: inline-grid; place-items: center; min-width: 72px; height: 72px; margin-bottom: 18px; padding: 10px 16px;
  border-radius: 18px; background: #fff; box-shadow: 0 12px 30px #0006; }
.vz-acct-logo img { display: block; max-height: 52px; max-width: 220px; width: auto; }
.vz-acct-initial { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 18px;
  background: var(--vz-brand-fill); color: #fff; font-size: 32px; font-weight: 700; }
.vz-acct-site { color: #c9c6ff; font-weight: 600; text-decoration: none; }
.vz-acct-site:hover { text-decoration: underline; }
.vz-acct-layout { padding: 40px var(--vz-inline) 72px; }
.vz-acct-layout .vz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1150px) { .vz-acct-layout .vz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vz-acct-layout .vz-grid { grid-template-columns: minmax(0, 1fr); } }

/* a logo that reads on the dark page as it is (accounts.logo_on_dark): no light tile behind it */
.vz-pro-company.bare, .vz-acct-logo.bare { padding-left: 0; padding-right: 0; background: none; box-shadow: none; }