.vc-landing {--vc-green: #b9fbc0}
.vc-landing .pf-wrap {max-width: 1280px}
.vc-editor-logos {display: inline-flex; align-items: center; gap: 8px; flex: none}
.vc-editor-logos img {display: block; flex: none}
.vc-editor-logos > span {color: var(--pf-muted); font-size: 16px}
.vc-editor-platforms {display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-block: 28px; font-size: 18px}
.vc-editor-platforms > span {display: inline-flex; align-items: center; gap: 10px}
.vc-editor-platforms > span[aria-hidden] {color: var(--pf-muted)}
.vc-editor-platforms img {display: block; flex: none}
.vc-outro > .vc-editor-logos {margin-bottom: 26px}
.vc-landing .pf-hero {gap: clamp(32px, 5vw, 72px); padding-bottom: 64px}
.vc-landing .pf-hero h1 {font-size: clamp(42px, 5.4vw, 76px)}
.vc-editor-surround {padding: 32px 22px; border-radius: 22px; background: radial-gradient(ellipse at 15% 5%, #58758b 0, transparent 55%), radial-gradient(ellipse at 95% 100%, #c0a084 0, transparent 65%), #30383e}
.vc-landing .vc-hero-shot {border: 1px solid #ffffff15; border-radius: 10px !important; box-shadow: 0 18px 45px #0006}
.vc-landing .pf-text-link {display: inline-flex; justify-content: start; gap: 10px; padding: 15px 0; font-size: 13px}
.vc-landing .pf-text-link svg {width: 18px; height: 18px}
.vc-landing .pf-hero__copy > .pf-text-link {display: flex; margin-top: 3px}
.vc-landing .pf-hero__facts {border: 0; margin-top: 10px; padding-top: 0}
.vc-directory {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-block: 18px 48px}
.vc-directory a {display: flex; gap: 14px; align-items: flex-start; padding: 16px 8px; border-radius: 8px; transition: background-color .2s}
.vc-directory a:hover {background: #ffffff06}
.vc-directory img {flex: none; border-radius: 7px}
.vc-directory strong {display: block; font-size: 14px; font-weight: 500}
.vc-directory small {display: block; margin-top: 5px; color: var(--pf-muted); font-size: 11px; line-height: 1.5}
.vc-feature {padding-block: 112px; border-top: 1px solid #303030; scroll-margin-top: 28px}
.vc-feature-intro {display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; margin-bottom: 40px}
.vc-feature-intro > div > p, .vc-feature-intro > p {max-width: 42ch; font-size: 16px; line-height: 1.8}
.vc-extension-name {display: flex; align-items: center; gap: 16px; margin-bottom: 18px}
.vc-extension-name img {flex: none; border-radius: 8px}
.vc-landing .vc-extension-name h2 {font-size: clamp(30px, 3.6vw, 46px)}
.vc-landing .vc-feature-tagline {margin-top: 0; color: var(--pf-muted); font-size: 18px; line-height: 1.5}
.vc-markdown-gallery, .vc-theme-pair {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px}
.vc-landing figure {margin: 0; min-width: 0}
.vc-landing figcaption {margin-top: 22px; font-size: 13px; color: var(--pf-muted)}
.vc-landing figcaption h3 {color: var(--pf-text); margin-bottom: 7px}
.vc-palette-list {display: flex; flex-wrap: wrap; gap: 14px 22px; list-style: none; padding: 0; margin: 30px 0 0}
.vc-palette-list li {display: flex; gap: 7px; align-items: center; font-size: 10px; color: var(--pf-muted)}
.vc-palette-list span {display: block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #ffffff30; background: var(--swatch)}
.vc-code-window {background: var(--vc-editor); color: var(--vc-fg); border: 1px solid var(--vc-border); border-radius: 12px; overflow: hidden; font-family: ui-monospace, monospace}
.vc-window-bar {display: flex; align-items: center; gap: 24px; padding: 17px 20px; background: var(--vc-bar); font-size: 11px}
.vc-window-dots {color: var(--vc-muted); font-size: 8px; letter-spacing: 3px}
.vc-code-lines {padding: 30px 22px 40px; font-size: clamp(10px, 1.12vw, 14px); line-height: 2.1; overflow-x: auto}
.vc-code-lines > div {display: flex; white-space: pre; min-height: 2.1em}
.vc-code-lines i {width: 34px; flex: none; color: var(--vc-muted); font-style: normal; user-select: none}
.vc-code-lines b {color: var(--vc-keyword); font-weight: 400}
.vc-code-lines em {color: var(--vc-string); font-style: normal}
.vc-code-lines strong {color: var(--vc-function); font-weight: 400}
.vc-code-lines .vc-comment {color: var(--vc-muted)}
.vc-window-status {display: flex; justify-content: space-between; padding: 8px 18px; background: var(--vc-bar); color: var(--vc-muted); font-size: 10px}
.vc-split {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 80px; align-items: center}
.vc-split-copy > p {margin-top: 24px; font-size: 16px; max-width: 38ch; line-height: 1.8}
.vc-split-copy > .vc-supporting {margin-top: 16px; font-size: 13px}
.vc-file-tab {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; font-family: ui-monospace, monospace; font-size: 12px; background: #1a1c1e; border-radius: 12px 12px 0 0; color: #a8acaf}
.vc-tab-actions {display: flex; gap: 18px; color: #d4d4d4}
.vc-tab-actions svg {width: 17px; height: 17px}
.vc-file-paper {display: grid; padding: 28px 22px; background: #141617; font-family: ui-monospace, monospace; color: #7fa6c9; font-size: clamp(10px, 1vw, 13px); line-height: 2; border-radius: 0 0 12px 12px}
.vc-file-paper span {white-space: pre}
.vc-action-outcomes {display: grid; gap: 22px; padding: 28px 20px 12px; font-size: 12px}
.vc-action-outcomes > div {display: flex; justify-content: space-between; gap: 16px}
.vc-action-outcomes > div > span:first-child {color: var(--pf-muted)}
.vc-action-outcomes code {color: #c4c4c4; font-family: ui-monospace, monospace; font-size: 11px}
.vc-browser-result {display: flex; align-items: center; gap: 7px; font-size: 11px}
.vc-actions-demo, .vc-jump-demo {min-width: 0}
.vc-jump-keys {display: flex; gap: 9px; align-items: center; flex-wrap: wrap; font-size: 10px; color: var(--pf-muted)}
.vc-jump-keys > span:last-child {margin-left: 8px}
.vc-landing kbd {padding: 5px 7px; border: 1px solid #3e3e3e; border-radius: 5px; background: #191919; color: #d5d5d5; font-family: ui-monospace, monospace; font-size: 10px}
.vc-landing .vc-jump-graphic {display: block; width: 100%; height: auto; margin-block: 20px}
.vc-jump-legend {display: flex; flex-wrap: wrap; gap: 18px; font-size: 10px; color: var(--pf-muted)}
.vc-jump-legend > span {display: flex; align-items: center; gap: 7px}
.is-visible .vc-jump-caret {animation: vc-jump 4s ease-in-out 1s both}
@keyframes vc-jump {0%, 30% {transform: translateX(0)} 55%, 100% {transform: translateX(188px)}}
.vc-install {padding-block: 48px; border-top: 1px solid #303030; scroll-margin-top: 30px}
.vc-landing .vc-install > h2 {font-size: clamp(28px, 3vw, 38px); margin-bottom: 18px}
.vc-install-block {margin-top: 40px; padding: 26px 28px 10px; background: #121212; border: 1px solid #303030; border-radius: 14px; scroll-margin-top: 28px}
.vc-install-heading {display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 20px}
.vc-install-heading > span {font-size: 11px; color: var(--pf-muted)}
.vc-landing .vc-command-help {font-size: 12px; margin-bottom: 10px}
.vc-manual-install {display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px}
.vc-manual-install p {font-size: 11px}
.vc-manual-install strong {font-weight: 400; color: #ccc}
.vc-platforms {display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px}
.vc-platforms button {border: 1px solid #424242; border-radius: 999px; padding: 10px 17px; color: #c8c8c8; background: transparent; font-size: 12px; min-height: 42px}
.vc-platforms button:hover {border-color: #999}
.vc-platforms button[aria-pressed="true"] {border-color: #f7f7f7; color: #0c0c0c; background: #f7f7f7}
.vc-landing .vc-install-note {max-width: 80ch; margin-bottom: 30px; font-size: 12px; line-height: 1.8}
.vc-install-note strong {color: #ccc; font-weight: 400}
.vc-command-line {display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 20px; min-height: 82px; background: #161616; border: 1px solid #303030; border-radius: 10px}
.vc-command-line code {flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-wrap; color: #d2d2d2}
.vc-command-line button {flex: none; width: 72px; min-height: 38px; padding: 8px 12px; border-radius: 999px; border: 1px solid #494949; background: transparent; color: #f7f7f7; font-size: 11px}
.vc-command-line button:hover {background: #292929; border-color: #888}
.vc-landing .vc-download {display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pf-text)}
.vc-download svg {width: 15px; height: 15px}
.vc-landing .vc-download:hover, .vc-downloads a:hover {color: var(--pf-text) !important; text-decoration: underline; text-decoration-color: var(--pf-accent); text-underline-offset: 4px}
.vc-landing .vc-copy-status {min-height: 24px; margin-top: 12px; color: #c8c8c8; font-size: 12px}
.vc-downloads {display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 16px; color: var(--pf-muted); font-size: 11px}
.vc-outro {padding-block: 80px 100px}
@media (max-width: 1000px) {
  .vc-directory {grid-template-columns: repeat(2, minmax(0, 1fr))}
  .vc-feature-intro {gap: 36px}
  .vc-split {gap: 36px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)}
}
@media (max-width: 760px) {
  .vc-landing .pf-hero h1 {font-size: clamp(44px, 11.5vw, 70px)}
  .vc-editor-surround {padding: 22px 14px; border-radius: 16px}
  .vc-landing .pf-hero {padding-bottom: 30px}
  .vc-directory {gap: 12px; padding-block: 8px 24px}
  .vc-directory a {gap: 10px; padding-inline: 0}
  .vc-directory img {width: 28px; height: 28px}
  .vc-directory strong {font-size: 12px}
  .vc-directory small {font-size: 10px}
  .vc-feature {padding-block: 72px}
  .vc-install {padding-block: 48px}
  .vc-feature-intro {grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 28px}
  .vc-feature-intro > div > p, .vc-feature-intro > p, .vc-split-copy > p {font-size: 15px}
  .vc-extension-name {margin-bottom: 20px}
  .vc-markdown-gallery, .vc-theme-pair {grid-template-columns: minmax(0, 1fr); gap: 30px}
  .vc-code-lines {font-size: clamp(10px, 2.8vw, 14px); padding-inline: 16px}
  .vc-code-lines i {width: 24px}
  .vc-split {display: flex; flex-direction: column; align-items: stretch; gap: 28px}
  .vc-file-paper {font-size: 11px; padding-inline: 16px}
  .vc-action-outcomes {padding-inline: 10px}
  .vc-install-block {margin-top: 28px; padding: 22px 16px 8px}
  .vc-extension-name {gap: 12px}
  .vc-extension-name img {width: 34px; height: 34px}
  .vc-command-line {gap: 10px; padding: 14px 10px 14px 14px; min-height: 105px}
  .vc-command-line button {width: 64px}
  .vc-platforms {gap: 8px}
  .vc-platforms button {font-size: 11px; padding-inline: 14px}
  .vc-outro {padding-block: 48px 68px}
}

.vc-theme-dark {--vc-editor: #1E2022; --vc-fg: #C8CBCA; --vc-bar: #1A1C1E; --vc-muted: #888D92; --vc-border: #303336; --vc-keyword: #C98282; --vc-string: #91AF7D; --vc-function: #83A9C9}

.vc-theme-light {--vc-editor: #fafaf7; --vc-fg: #303638; --vc-bar: #eeefeb; --vc-muted: #60696e; --vc-border: #d9dedb; --vc-keyword: #a1404d; --vc-string: #42733c; --vc-function: #35647f}