/* Varylo public site. The studio and account interfaces keep their own styles. */
#publicLanding.vl-site {
  --vl-bg: #090909;
  --vl-surface: #131313;
  --vl-surface-soft: #181818;
  --vl-line: rgba(255, 255, 255, .12);
  --vl-yellow: #ffd42a;
  --vl-white: #f6f5f1;
  --vl-muted: #92928e;
  --vl-font: 'Inter', 'Segoe UI', Arial, sans-serif;
  --vl-mono: 'Cascadia Code', Consolas, monospace;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--vl-bg);
  color: var(--vl-white);
  font-family: var(--vl-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
#publicLanding.vl-site:not(.hidden) { display: block; }
#publicLanding.vl-site *, #publicLanding.vl-site *::before, #publicLanding.vl-site *::after { box-sizing: border-box; }
#publicLanding.vl-site a { color: inherit; text-decoration: none; }
#publicLanding.vl-site button { font-family: inherit; }
#publicLanding.vl-site h1, #publicLanding.vl-site h2, #publicLanding.vl-site h3, #publicLanding.vl-site p { margin-top: 0; }
#publicLanding.vl-site svg { display: block; }
#publicLanding.vl-site [id] { scroll-margin-top: 90px; }
#publicLanding.vl-site :focus-visible { outline: 2px solid var(--vl-yellow); outline-offset: 5px; }

/* A quiet navigation bar above the stage. */
#publicLanding .vl-nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 92px;
  max-width: 1376px;
  margin: 0 auto;
  padding: 0 48px;
  border-bottom: 1px solid var(--vl-line);
}
#publicLanding .vl-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 22px; font-weight: 750; letter-spacing: -1.1px; }
#publicLanding .vl-logo > span:not(.vl-logo-icon) { display: grid; }
#publicLanding .vl-logo small { color: var(--vl-muted); font: 8px var(--vl-mono); letter-spacing: 2.5px; margin-top: -3px; }
#publicLanding .vl-logo-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--vl-yellow); }
#publicLanding .vl-logo-icon svg { width: 100%; height: 100%; }
#publicLanding .vl-logo-icon { display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding: 6px 2px; }
#publicLanding .vl-logo-icon i { display: block; width: 5px; height: 14px; border-radius: 2px; background: var(--vl-yellow); transform: skewY(-16deg); }
#publicLanding .vl-logo-icon i:nth-child(2) { height: 22px; }
#publicLanding .vl-logo-icon i:nth-child(3) { height: 18px; }
#publicLanding .vl-logo b { font-weight: 700; }
#publicLanding .vl-logo b > span { vertical-align: top; margin-left: 2px; font-size: 9px; font-weight: 400; line-height: 1.8; letter-spacing: 0; }
#publicLanding .vl-nav-links { display: flex; gap: 29px; margin-left: auto; }
#publicLanding .vl-nav-links a { font-size: 12px; font-weight: 500; color: #babbb7; transition: color .18s ease; }
#publicLanding .vl-nav-links a:hover { color: var(--vl-white); }
#publicLanding .public-nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: 26px; }
#publicLanding .public-nav-actions .button { min-height: 39px; padding: 10px 16px; border: 1px solid #343434; border-radius: 7px; color: var(--vl-white); background: #151515; font-size: 11px; white-space: nowrap; }
#publicLanding .public-nav-actions .button:hover { background: #202020; border-color: #62615b; }
#publicLanding #publicAccount { color: #0d0d0b; background: var(--vl-yellow); border-color: var(--vl-yellow); }
#publicLanding #publicAccount:hover { background: #ffe15a; }
#publicLanding #publicUser { color: var(--vl-muted); font-size: 10px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hero: typography at left, dimensional product composition at right. */
#publicLanding .vl-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  align-items: center;
  gap: 32px;
  max-width: 1376px;
  min-height: 700px;
  margin: 0 auto;
  padding: 56px 48px 0;
}
#publicLanding .vl-hero-copy { position: relative; z-index: 2; padding: 0 0 24px; }
#publicLanding .vl-kicker { display: flex; align-items: center; gap: 9px; color: #ababaa; font: 9px/1.5 var(--vl-mono); letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 27px; }
#publicLanding .vl-kicker::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--vl-yellow); flex-shrink: 0; }
#publicLanding .vl-hero-title { margin: 0 0 26px; font-size: clamp(44px, 5.15vw, 73px); font-weight: 780; line-height: 1.035; letter-spacing: -3.4px; }
#publicLanding .vl-hero-title strong { font-weight: inherit; }
#publicLanding .vl-hero-title em { font-style: italic; color: var(--vl-yellow); font-weight: 720; letter-spacing: -3.8px; }
#publicLanding .vl-hero-title > span, #publicLanding .vl-hero-title > strong, #publicLanding .vl-hero-title > em { display: block; }
#publicLanding .vl-lead { max-width: 390px; font-size: 14px; line-height: 1.75; font-weight: 400; color: #a8a8a4; margin-bottom: 28px; }
#publicLanding .vl-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#publicLanding .vl-primary, #publicLanding .vl-secondary { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; padding: 14px 22px; border-radius: 7px; border: 1px solid transparent; font-size: 12px; font-weight: 680; line-height: 1.3; text-align: center; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
#publicLanding .vl-primary { color: #11110c; background: var(--vl-yellow); border-color: var(--vl-yellow); }
#publicLanding.vl-site a.vl-primary { color: #11110c; }
#publicLanding .vl-primary:hover { color: #11110c; background: #ffe45e; border-color: #ffe45e; transform: translateY(-2px); }
#publicLanding .vl-secondary { color: var(--vl-white); background: transparent; border-color: #343434; }
#publicLanding .vl-secondary:hover { background: #202020; border-color: #777568; transform: translateY(-2px); }
#publicLanding .vl-primary svg, #publicLanding .vl-secondary svg { width: 15px; height: 15px; }
#publicLanding .vl-primary[aria-disabled='true'], #publicLanding .vl-secondary[aria-disabled='true'] { opacity: .55; cursor: wait; transform: none; }
#publicLanding .public-download-note { margin: 16px 0 0; max-width: 390px; color: #71716d; font: 10px/1.6 var(--vl-mono); }
#publicLanding small.public-download-note { display: block; }
#publicLanding .vl-scroll-link { display: flex; align-items: center; gap: 11px; width: fit-content; margin-top: 43px; color: #73736e; font-size: 10px; }
#publicLanding .vl-scroll-link > span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #393935; border-radius: 50%; font-size: 12px; color: #c0b884; }
#publicLanding .vl-scroll-link:hover { color: var(--vl-white); }
#publicLanding .vl-stage {
  position: relative;
  width: 100%;
  height: 524px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 19px;
  background: radial-gradient(ellipse at 49% 80%, #4c3e181c 0, transparent 55%), linear-gradient(148deg, #202022 0, #101012 43%, #151516 100%);
  perspective: 1100px;
  transform-style: flat;
  overflow: visible;
  box-shadow: inset 0 1px 0 #ffffff08, 0 28px 70px #00000030;
}
#publicLanding .vl-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(120deg, #ffffff08, transparent 32%); }
#publicLanding #vlScene { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
#publicLanding .vl-stage-fallback { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
#publicLanding .vl-stage.is-3d .vl-stage-fallback { display: none; }
#publicLanding .vl-stage-fallback::before { content: ''; position: absolute; width: 68%; height: 38%; top: 49%; left: 18%; transform: skewY(-8deg); border: 1px solid #ffffff16; background: linear-gradient(150deg, #2c2c2d, #131313); box-shadow: 0 13px 0 #090909, 0 15px 0 #ffe34d88, 0 23px 35px #ffd42a2a; }
#publicLanding .vl-stage-fallback::after { content: ''; position: absolute; width: 70%; height: 58%; top: 16%; left: 16%; border: 1px solid #ffffff18; border-right-color: #ffffff07; transform: skewY(-8deg); }
#publicLanding .vl-product-window {
  position: absolute;
  z-index: 3;
  width: 71%;
  left: 8%;
  top: 14%;
  transform: rotateY(-14deg) rotateX(5deg) rotateZ(-3deg);
  transform-origin: 50% 50%;
  background: linear-gradient(145deg, #2d2d30ea, #161619f5);
  border: 1px solid #ffffff2d;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 12px 23px 38px #00000070, inset 0 1px 0 #ffffff18;
  pointer-events: none;
}
#publicLanding .vl-window-top { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-bottom: 1px solid #ffffff0d; color: #b9b9b5; font-size: 9px; }
#publicLanding .vl-window-top > span { margin-left: auto; color: #d6d6ce; font: 7px var(--vl-mono); letter-spacing: 1px; }
#publicLanding .vl-window-top i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #666668; }
#publicLanding .vl-window-top i:last-of-type { background: var(--vl-yellow); }
#publicLanding .vl-window-top .vl-window-dots { display: flex; gap: 4px; margin-left: 0; }
#publicLanding .vl-window-top b { margin-left: 5px; color: #bdbdb6; font-size: 7px; font-weight: 500; letter-spacing: .2px; }
#publicLanding .vl-window-body { display: grid; grid-template-columns: minmax(0, 1fr) 98px; gap: 10px; padding: 13px; }
#publicLanding .vl-monitor { position: relative; aspect-ratio: 1.4; overflow: hidden; border-radius: 5px; background: #bda895; }
#publicLanding .vl-monitor > svg, #publicLanding .vl-landscape { width: 100%; height: 100%; object-fit: cover; }
#publicLanding .vl-monitor-label { position: absolute; top: 7px; left: 7px; background: #10101095; padding: 3px 6px; border: 1px solid #ffffff25; border-radius: 3px; color: #fff; font: 6px var(--vl-mono); letter-spacing: 1px; }
#publicLanding .vl-monitor-label:last-child { left: auto; right: 7px; color: var(--vl-yellow); }
#publicLanding .vl-monitor-bottom { position: absolute; display: flex; justify-content: space-between; left: 0; right: 0; bottom: 0; padding: 8px 9px; color: #f0ebe0; background: linear-gradient(transparent, #191b196e); font-size: 7px; }
#publicLanding .vl-monitor-bottom b { color: var(--vl-yellow); font: 6px var(--vl-mono); }
#publicLanding .vl-monitor-split { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid #ffffff90; }
#publicLanding .vl-monitor-split::before { content: '↔'; position: absolute; left: -9px; top: 49%; width: 18px; height: 18px; border-radius: 50%; background: var(--vl-yellow); color: #15150d; display: grid; place-items: center; font-size: 9px; }
#publicLanding .vl-tool-rail { display: flex; flex-direction: column; gap: 13px; padding-top: 4px; min-width: 0; }
#publicLanding .vl-tool-rail p, #publicLanding .vl-tool-rail label { font-size: 7px; line-height: 1.3; color: #c2c2bb; margin: 0; }
#publicLanding .vl-tool-rail label { display: flex; justify-content: space-between; gap: 4px; }
#publicLanding .vl-tool-rail b { font: 6px var(--vl-mono); color: var(--vl-yellow); }
#publicLanding .vl-tool-rail > b { font-size: 7px; font-family: var(--vl-font); font-weight: 500; }
#publicLanding .vl-tool-rail > span { display: flex; justify-content: space-between; color: #b3b3ad; font-size: 6px; line-height: 1; }
#publicLanding .vl-tool-rail > span small { color: #a09a72; font: 5px var(--vl-mono); }
#publicLanding .vl-tool-rail > i { display: block; position: relative; height: 2px; background: #51514d; margin-top: -9px; }
#publicLanding .vl-tool-rail > i::before { content: ''; position: absolute; width: var(--position, 57%); inset: 0 auto 0 0; background: #d2b638; }
#publicLanding .vl-tool-rail > i::after { content: ''; position: absolute; left: var(--position, 57%); top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--vl-yellow); }
#publicLanding .vl-mini-crops { display: flex; gap: 5px; height: 16px; }
#publicLanding .vl-mini-crops > span { display: inline-block; width: 12px; height: 16px; border: 1px solid #55554d; border-radius: 2px; }
#publicLanding .vl-mini-crops > span:nth-child(2) { width: 16px; }
#publicLanding .vl-mini-crops > span:nth-child(3) { width: 21px; border-color: #b19b3b; }
#publicLanding .vl-mini-slider { height: 2px; width: 100%; position: relative; margin-top: 6px; background: #535353; }
#publicLanding .vl-mini-slider::before { content: ''; position: absolute; width: var(--slider, 57%); top: 0; bottom: 0; left: 0; background: #f0d447; }
#publicLanding .vl-mini-slider::after { content: ''; position: absolute; left: var(--slider, 57%); top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #f8db49; }
#publicLanding .vl-tool-rail .vl-mini-button { margin-top: auto; padding: 6px 3px; text-align: center; background: var(--vl-yellow); color: #111; border-radius: 3px; font-size: 6px; font-weight: 700; }
#publicLanding .vl-mini-button > span { margin-left: 3px; }
#publicLanding .vl-window-bottom { display: flex; align-items: center; gap: 8px; border-top: 1px solid #ffffff0b; padding: 9px 13px; color: #a6a6a0; font: 6px var(--vl-mono); }
#publicLanding .vl-window-bottom svg { width: 10px; height: 10px; color: var(--vl-yellow); }
#publicLanding .vl-window-bottom > span { display: flex; gap: 4px; align-items: center; }
#publicLanding .vl-window-bottom > span i { display: block; width: 3px; height: 3px; background: var(--vl-yellow); border-radius: 50%; }
#publicLanding .vl-window-bottom > b { margin-left: auto; color: #898982; font-weight: 400; }
#publicLanding .vl-timeline { position: relative; flex: 1; height: 3px; background: #464646; border-radius: 2px; }
#publicLanding .vl-timeline::before { content: ''; position: absolute; width: 32%; height: 100%; left: 0; background: #c5ac3a; }
#publicLanding .vl-timeline::after { content: ''; position: absolute; width: 5px; height: 5px; left: 32%; top: -1px; border-radius: 50%; background: var(--vl-yellow); }
#publicLanding .vl-float-card { position: absolute; z-index: 5; padding: 13px 15px; border: 1px solid #ffffff25; border-radius: 10px; background: linear-gradient(145deg, #353535df, #1e1e20ee); color: var(--vl-white); box-shadow: 0 16px 32px #00000050, inset 0 1px 0 #ffffff10; backdrop-filter: blur(12px); pointer-events: none; }
#publicLanding .vl-float-card > svg { width: 24px; height: 24px; margin-bottom: 9px; color: var(--vl-yellow); }
#publicLanding .vl-float-card small { display: block; font: 7px var(--vl-mono); text-transform: uppercase; color: #a9a9a3; letter-spacing: 1px; }
#publicLanding .vl-float-card b { display: block; margin: 4px 0; font-size: 12px; font-weight: 600; }
#publicLanding .vl-float-card p { margin: 0; color: #aaa9a3; font-size: 8px; line-height: 1.5; }
#publicLanding .vl-float-cloud { display: flex; align-items: center; gap: 11px; top: 10%; right: -2%; width: 208px; transform: rotateY(-16deg) rotateZ(6deg); }
#publicLanding .vl-float-cloud > svg { width: 30px; height: 30px; flex-shrink: 0; margin: 0; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#publicLanding .vl-float-card div > span { display: block; color: #999991; font-size: 7px; }
#publicLanding .vl-float-cloud > i { margin-left: auto; color: var(--vl-yellow); font-style: normal; font-size: 11px; }
#publicLanding .vl-float-presets { display: flex; align-items: center; gap: 11px; bottom: 15%; left: -5%; width: 179px; transform: rotateY(16deg) rotateZ(-7deg); }
#publicLanding .vl-preset-swatch { width: 30px; height: 41px; flex-shrink: 0; border-radius: 4px; border: 1px solid #ffffff20; background: radial-gradient(circle at 70% 22%, #f3d99a 0 8%, transparent 9%), linear-gradient(155deg, #93abaf 0 48%, #826c4f 49% 62%, #d7b387 63% 81%, #6c614f 82%); }
#publicLanding .vl-mini-preset-row { display: flex; gap: 5px; margin-top: 10px; }
#publicLanding .vl-mini-preset-row i { display: block; width: 32px; height: 38px; border-radius: 4px; border: 1px solid #ffffff25; background: linear-gradient(160deg, #c2d0c9 0 42%, #41484a 42% 65%, #ccb087 65%); }
#publicLanding .vl-mini-preset-row i:nth-child(2) { filter: saturate(1.35) contrast(1.1); }
#publicLanding .vl-mini-preset-row i:nth-child(3) { filter: brightness(1.18) saturate(.65); border-color: var(--vl-yellow); }
#publicLanding .vl-stage-caption { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #818180; font: 7px var(--vl-mono); letter-spacing: 1px; text-transform: uppercase; }
#publicLanding .vl-stage-caption span:first-child { border: 1px solid #ffffff16; border-radius: 20px; background: #111111ad; padding: 5px 9px; }
#publicLanding .vl-stage-caption button { display: inline-flex; align-items: center; gap: 5px; color: #adadab; background: transparent; border: 0; font: 7px var(--vl-mono); padding: 5px; cursor: grab; }
#publicLanding .vl-stage-caption button:hover { color: var(--vl-yellow); }
#publicLanding .vl-stage-caption button:active { cursor: grabbing; }
#publicLanding .vl-facts { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1280px; margin: 0; padding: 26px 0; border-top: 1px solid var(--vl-line); border-bottom: 1px solid var(--vl-line); }
#publicLanding .vl-facts > p { color: #70706d; margin: 0; max-width: 150px; font: 8px/1.6 var(--vl-mono); letter-spacing: 1.2px; text-transform: uppercase; }
#publicLanding .vl-facts dl { display: block; margin: 0; }
#publicLanding .vl-facts dl > div { display: flex; align-items: baseline; gap: 9px; }
#publicLanding .vl-facts dd { order: -1; margin: 0; color: var(--vl-white); font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.7px; }
#publicLanding .vl-facts dt { font-size: 10px; color: #858581; }
#publicLanding .vl-facts > a { font-size: 9px; line-height: 1.9; color: #696964; }
#publicLanding .vl-facts > a b { color: #b2b1a8; font-weight: 400; }
#publicLanding .vl-facts > a b span { color: var(--vl-yellow); margin-left: 7px; }

/* Spacious product story rather than a wall of dashboard cards. */
#publicLanding .vl-section { position: relative; max-width: 1376px; margin: 0 auto; padding: 111px 48px 0; }
#publicLanding .vl-section-head { display: grid; grid-template-columns: 1fr .75fr; gap: 0 50px; align-items: end; margin-bottom: 39px; }
#publicLanding .vl-section-index { display: flex; align-items: center; gap: 10px; margin: 0 0 19px; color: #868683; font: 8px var(--vl-mono); letter-spacing: 2px; text-transform: uppercase; }
#publicLanding .vl-section-index::before { content: ''; height: 1px; width: 27px; background: #7c7137; }
#publicLanding .vl-section-head > .vl-section-index { grid-column: 1 / -1; }
#publicLanding .vl-section-title { margin: 0; color: var(--vl-white); font-size: clamp(29px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -1.7px; font-weight: 650; }
#publicLanding .vl-section-title em { color: var(--vl-yellow); font-weight: 600; }
#publicLanding .vl-section-copy { max-width: 365px; margin: 0 0 1px auto; color: #8f8f8b; font-size: 12px; line-height: 1.75; }
#publicLanding .vl-section-head > .vl-section-title { grid-column: 1; grid-row: 2; }
#publicLanding .vl-section-head > .vl-section-copy { grid-column: 2; grid-row: 2; }
#publicLanding .vl-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
#publicLanding .vl-feature { min-width: 0; padding: 0 22px 24px; overflow: hidden; background: #131313; border: 1px solid #262626; border-radius: 12px; }
#publicLanding .vl-feature-art { position: relative; height: 206px; margin: 0 -22px 25px; display: grid; place-items: center; background: linear-gradient(180deg, #1b1b1d, #131313); border-bottom: 1px solid #ffffff08; overflow: hidden; }
#publicLanding .vl-feature-art > svg { width: 100%; max-width: 370px; height: 100%; }
#publicLanding .vl-feature h3 { margin: 0 0 9px; font-size: 17px; font-weight: 600; letter-spacing: -.5px; }
#publicLanding .vl-feature p { margin: 0; max-width: 300px; color: #92928e; font-size: 11px; line-height: 1.8; }
#publicLanding .vl-feature-number { display: block; color: #62625d; font: 8px var(--vl-mono); letter-spacing: 1px; margin-bottom: 10px; }
#publicLanding .vl-feature-color { background: radial-gradient(ellipse at 50% 62%, #e0b64912, transparent 67%), linear-gradient(180deg, #1b1b1d, #131313); }
#publicLanding .vl-feature-queue { background: radial-gradient(ellipse at 50% 62%, #ffffff08, transparent 70%), linear-gradient(180deg, #1b1b1d, #131313); }
#publicLanding .vl-feature-cloud { background: radial-gradient(ellipse at 50% 62%, #ffd42a10, transparent 60%), linear-gradient(180deg, #1b1b1d, #131313); }
#publicLanding .vl-art-chip { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); padding: 5px 8px; white-space: nowrap; border: 1px solid #ffffff1a; background: #141414d4; border-radius: 4px; color: #a09f96; font: 6px var(--vl-mono); letter-spacing: .6px; }
#publicLanding .vl-art-chip b { color: var(--vl-yellow); margin: 0 6px; font-weight: 400; }
#publicLanding .vl-color-bars { display: flex; gap: 9px; transform: rotateX(15deg) rotateZ(-11deg); padding-bottom: 16px; }
#publicLanding .vl-color-bars i { display: block; width: 21px; height: 97px; background: linear-gradient(90deg, #d79757, #fec479 53%, #b7723f); border-radius: 16px; box-shadow: inset 1px 1px 1px #fff5, 5px 11px 12px #0007; }
#publicLanding .vl-color-bars i:nth-child(2) { height: 135px; margin-top: -19px; background: linear-gradient(90deg, #914b36, #ba7451 53%, #5b3831); }
#publicLanding .vl-color-bars i:nth-child(3) { height: 113px; margin-top: -8px; background: linear-gradient(90deg, #576257, #9dad93 53%, #3e5048); }
#publicLanding .vl-color-bars i:nth-child(4) { height: 153px; margin-top: -28px; background: linear-gradient(90deg, #bca323, #ffe458 53%, #9a7419); }
#publicLanding .vl-color-bars i:nth-child(5) { height: 101px; margin-top: -2px; background: linear-gradient(90deg, #677985, #a2b7bf 53%, #475864); }
#publicLanding .vl-color-bars i:nth-child(6) { height: 127px; margin-top: -16px; background: linear-gradient(90deg, #806354, #d2b794 53%, #62554a); }
#publicLanding .vl-queue-stack { width: 67%; max-width: 248px; transform: perspective(500px) rotateX(12deg) rotateY(-14deg) rotateZ(-5deg); padding-bottom: 18px; }
#publicLanding .vl-queue-stack > span { display: flex; align-items: center; gap: 14px; position: relative; height: 44px; margin: 9px 0; padding: 0 13px; border: 1px solid #ffffff26; border-radius: 6px; color: #d2d2c9; background: linear-gradient(145deg, #333331, #1c1c1c); box-shadow: 0 8px 18px #0007, inset 0 1px 0 #ffffff0b; font: 9px var(--vl-mono); }
#publicLanding .vl-queue-stack > span:nth-child(2) { margin-left: 13px; margin-right: -13px; }
#publicLanding .vl-queue-stack > span:nth-child(3) { margin-left: 26px; margin-right: -26px; border-color: #93802c; }
#publicLanding .vl-queue-stack i { width: 14px; height: 20px; background: linear-gradient(160deg, #cad3c6 0 43%, #826748 44% 63%, #d8b387 64%); border-radius: 2px; flex-shrink: 0; }
#publicLanding .vl-queue-stack b { margin-left: auto; color: var(--vl-yellow); font-size: 10px; font-weight: 400; }
#publicLanding .vl-cloud-symbol { display: grid; place-items: center; width: 131px; height: 118px; margin-top: -13px; border: 1px solid #ffe57155; border-radius: 31px; background: linear-gradient(137deg, #d8be4c 0, #f2d55f 20%, #a78d30 54%, #544820 99%); transform: perspective(500px) rotateY(-22deg) rotateZ(8deg); box-shadow: inset 1px 2px 1px #fff6, -7px 7px 0 #6b5f25, 0 22px 25px #0008; }
#publicLanding .vl-cloud-symbol svg { width: 82%; height: 82%; fill: none; stroke: #272419; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* A broad wireframe conduit carries the four process steps. */
#publicLanding .vl-flow { position: relative; min-height: 660px; padding-top: 130px; padding-bottom: 94px; overflow: hidden; }
#publicLanding .vl-flow .vl-section-head { position: relative; z-index: 2; }
#publicLanding .vl-flow-wireframe { position: absolute; z-index: 0; pointer-events: none; width: calc(100% + 160px); max-width: none; height: 520px; top: 190px; left: -80px; color: #767369; opacity: .46; }
#publicLanding .vl-flow-steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 145px; }
#publicLanding .vl-flow-step { position: relative; min-height: 190px; border-top: 1px solid #4b4732; padding: 21px 13px 0 0; background: linear-gradient(180deg, #090909e8 0, #090909c2 50%, transparent); }
#publicLanding .vl-flow-step > span, #publicLanding .vl-flow-step > b { display: block; margin-bottom: 21px; color: var(--vl-yellow); font: 9px var(--vl-mono); letter-spacing: 1.3px; }
#publicLanding .vl-flow-step h3 { margin: 0 0 9px; font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
#publicLanding .vl-flow-step p { margin: 0; max-width: 235px; color: #858581; font-size: 11px; line-height: 1.7; }

#publicLanding .vl-detail { padding-top: 36px; }
#publicLanding .vl-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 29px; }
#publicLanding .vl-detail-card { border-top: 1px solid #303030; padding: 28px 20px 0 0; min-height: 176px; }
#publicLanding .vl-detail-icon { width: 30px; height: 30px; margin-bottom: 18px; color: var(--vl-yellow); }
#publicLanding span.vl-detail-icon { display: grid; place-items: center; border: 1px solid #77682c; border-radius: 6px; font-size: 21px; line-height: 1; }
#publicLanding .vl-detail-icon svg { width: 100%; height: 100%; }
#publicLanding .vl-detail-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
#publicLanding .vl-detail-card p { margin: 0; max-width: 316px; font-size: 11px; line-height: 1.8; color: #93938f; }
#publicLanding .vl-detail-card small { display: block; margin-top: 12px; font: 8px/1.6 var(--vl-mono); color: #b0a465; }

/* Pricing remains explicit about features and checkout availability. */
#publicLanding .vl-plans { padding-top: 120px; }
#publicLanding .public-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
#publicLanding .public-plan-card { display: flex; flex-direction: column; position: relative; min-width: 0; padding: 24px 21px 21px; border: 1px solid #2b2b2b; border-radius: 12px; background: #121212; box-shadow: none; }
#publicLanding .public-plan-card.featured { border-color: #988234; background: linear-gradient(155deg, #262217 0, #151512 44%); box-shadow: inset 0 1px 0 #ffd42a15; }
#publicLanding .plan-card-label { display: block; margin-bottom: 22px; font: 8px var(--vl-mono); color: #93938d; letter-spacing: 1.5px; text-transform: uppercase; }
#publicLanding .public-plan-card.featured .plan-card-label { color: #d4c382; }
#publicLanding .public-plan-card h3 { margin: 0 0 12px; color: var(--vl-white); font-size: 20px; font-weight: 650; letter-spacing: -.7px; }
#publicLanding .vl-plan-price { margin: 0 0 12px; font-size: 31px; line-height: 1.2; color: var(--vl-white); letter-spacing: -1px; font-weight: 550; }
#publicLanding .vl-plan-price small { margin-left: 4px; color: #898982; font-size: 9px; font-weight: 400; letter-spacing: 0; }
#publicLanding .public-plan-card > p:not(.vl-plan-price):not(.plan-card-label) { min-height: 40px; margin: 0 0 20px; font-size: 10px; line-height: 1.65; color: #969690; }
#publicLanding .public-plan-card ul { display: grid; gap: 11px; list-style: none; padding: 20px 0 22px; margin: 0 0 20px; border-top: 1px solid #2c2c27; flex: 1; color: #bbbcb6; font-size: 10px; line-height: 1.5; }
#publicLanding .public-plan-card li { position: relative; padding-left: 16px; }
#publicLanding .public-plan-card li::before { content: ''; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; background: var(--vl-yellow); clip-path: polygon(10% 45%, 22% 34%, 43% 55%, 78% 16%, 91% 28%, 45% 82%); }
#publicLanding .public-plan-card li.vl-plan-unavailable { color: #64645f; }
#publicLanding .public-plan-card li.vl-plan-unavailable::before { width: 7px; height: 1px; top: 8px; background: #64645f; clip-path: none; }
#publicLanding .public-plan-card .button { width: 100%; min-height: 41px; border: 1px solid #37372f; background: #1d1d1a; border-radius: 6px; color: #d6d6cb; font-size: 10px; font-weight: 600; }
#publicLanding .public-plan-card .button-primary { background: var(--vl-yellow); color: #14140c; border-color: var(--vl-yellow); }
#publicLanding .public-plan-card .button:disabled { cursor: default; color: #82827b; background: #191918; opacity: 1; }
#publicLanding .public-plan-card .button:not(:disabled):hover { border-color: #b59d3f; }
#publicLanding .public-plan-note { max-width: 710px; margin: 19px 0 0; color: #6c6c66; font: 9px/1.75 var(--vl-mono); }

#publicLanding .vl-faq { padding-top: 114px; }
#publicLanding .vl-faq .vl-section-head { margin-bottom: 31px; }
#publicLanding .vl-faq-list { max-width: 830px; margin-left: auto; }
#publicLanding .vl-faq details { padding: 22px 0; border-top: 1px solid #2c2c29; }
#publicLanding .vl-faq details:last-child { border-bottom: 1px solid #2c2c29; }
#publicLanding .vl-faq summary { position: relative; list-style: none; padding-right: 40px; cursor: pointer; font-size: 14px; font-weight: 500; letter-spacing: -.2px; }
#publicLanding .vl-faq summary::-webkit-details-marker { display: none; }
#publicLanding .vl-faq summary::after { content: '+'; position: absolute; top: -1px; right: 4px; color: #b8b397; font-size: 20px; font-weight: 300; line-height: 1; }
#publicLanding .vl-faq details[open] summary::after { content: '−'; color: var(--vl-yellow); }
#publicLanding .vl-faq details p { max-width: 670px; margin: 14px 36px 0 0; font-size: 12px; line-height: 1.8; color: #92928c; }
#publicLanding .vl-faq details a { text-decoration: underline; text-underline-offset: 3px; color: #dad7c8; }

/* Final download moment. */
#publicLanding .vl-download { position: relative; display: grid; grid-template-columns: 1fr 270px; align-items: center; gap: 42px; margin: 109px auto 0; padding: 48px 54px; max-width: 1280px; min-height: 288px; border-top: 1px solid #4b4324; border-bottom: 1px solid #4b4324; background: radial-gradient(ellipse at 93% 53%, #ffd42a0b, transparent 46%), linear-gradient(90deg, #131313, #101010); overflow: hidden; }
#publicLanding .vl-download-copy { position: relative; z-index: 2; }
#publicLanding .vl-download-copy .vl-kicker { margin-bottom: 16px; color: #97927b; }
#publicLanding .vl-download-copy h2 { margin: 0 0 15px; max-width: 730px; font-size: clamp(30px, 3vw, 42px); font-weight: 620; letter-spacing: -1.7px; line-height: 1.1; }
#publicLanding .vl-download-copy h2 em { color: var(--vl-yellow); font-weight: 600; }
#publicLanding .vl-download-copy > p { max-width: 555px; margin: 0 0 23px; color: #92928a; font-size: 12px; line-height: 1.8; }
#publicLanding .vl-download-copy .public-download-note { margin: 12px 0 0; font-size: 8px; }
#publicLanding .vl-download-orb { position: relative; display: grid; place-items: center; width: 260px; height: 230px; color: var(--vl-yellow); }
#publicLanding .vl-download-orb svg { width: 100%; height: 100%; filter: drop-shadow(0 20px 22px #000); }
#publicLanding .vl-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 25px; max-width: 1376px; margin: 0 auto; padding: 43px 48px 34px; color: #686864; font-size: 9px; }
#publicLanding .vl-footer .vl-logo { color: var(--vl-white); font-size: 17px; letter-spacing: -.7px; }
#publicLanding .vl-footer .vl-logo-icon { width: 24px; height: 24px; }
#publicLanding .vl-footer-links { display: flex; gap: 22px; }
#publicLanding .vl-footer-links a { color: #8e8e89; }
#publicLanding .vl-footer-links a:hover { color: var(--vl-white); }
#publicLanding .vl-footer > p { margin: 0; }
#publicLanding .vl-footer > span { font: 7px var(--vl-mono); letter-spacing: 1.2px; color: #6d6d67; }
#publicLanding .vl-footer > nav { display: flex; gap: 22px; }
#publicLanding .vl-footer > nav a { font-size: 9px; color: #91918a; }
#publicLanding .vl-footer > nav a:hover { color: var(--vl-white); }
#publicLanding .vl-footer > small { font-size: 8px; color: #63635e; }

/* The public sign-in dialog follows the same palette; desktop auth is untouched. */
body[data-cloud-mode='true'] #authGate { background: #080808dc; }
body[data-cloud-mode='true'] #authGate .auth-card { background: #151515; border-color: #35352e; color: #f6f5f1; box-shadow: 0 28px 95px #000a; }
body[data-cloud-mode='true'] #authGate .auth-brand-mark { background: #302c18; }
body[data-cloud-mode='true'] #authGate .auth-brand-mark i { background: #ffd42a; }
body[data-cloud-mode='true'] #authGate .auth-copy { color: #a2a299; }
body[data-cloud-mode='true'] #authGate .auth-form label { color: #bbbbae; }
body[data-cloud-mode='true'] #authGate .auth-form input { background: #0e0e0e; color: #f6f5f1; border-color: #41413a; }
body[data-cloud-mode='true'] #authGate .auth-form input:focus { border-color: #bba132; box-shadow: 0 0 0 2px #ffd42a18; }
body[data-cloud-mode='true'] #authGate .auth-submit { background: #ffd42a; color: #15140a; }
body[data-cloud-mode='true'] #authGate .auth-submit:hover { background: #ffe365; }
body[data-cloud-mode='true'] #authGate .auth-mode-toggle { color: #e9ce59; }
body[data-cloud-mode='true'] #authGate .auth-note { color: #79796f; }
body[data-cloud-mode='true'] #authGate .auth-message[data-kind='success'] { color: #e3d272; }
body[data-cloud-mode='true'] #authGate .auth-download { color: #e1ce75; background: #252319; border-color: #665a2d; }
body[data-cloud-mode='true'] #authGate .auth-close { color: #aaa99b; }
body[data-cloud-mode='true'] #authGate .auth-close:hover { background: #2c2c26; }

/* Respect reduced motion and use restrained interaction throughout. */
@media (prefers-reduced-motion: reduce) {
  #publicLanding *, #publicLanding *::before, #publicLanding *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (min-width: 1600px) {
  #publicLanding .vl-hero-title { font-size: 77px; }
  #publicLanding .vl-hero { min-height: 744px; }
}
@media (max-width: 1200px) {
  #publicLanding .vl-nav { padding-right: 32px; padding-left: 32px; gap: 18px; }
  #publicLanding .public-nav-actions { margin-left: 8px; }
  #publicLanding #publicUser { display: none; }
  #publicLanding .vl-nav-links { gap: 22px; }
  #publicLanding .vl-hero { padding-left: 32px; padding-right: 32px; gap: 28px; min-height: 646px; }
  #publicLanding .vl-hero-title { font-size: 59px; letter-spacing: -2.9px; }
  #publicLanding .vl-stage { height: 510px; }
  #publicLanding .vl-window-body { grid-template-columns: minmax(0, 1fr) 76px; }
  #publicLanding .vl-float-cloud { right: -1%; width: 185px; }
  #publicLanding .vl-float-presets { left: -3%; width: 166px; }
  #publicLanding .vl-facts { margin: 0; }
  #publicLanding .vl-facts dl { gap: 39px; }
  #publicLanding .vl-section { padding-right: 32px; padding-left: 32px; }
  #publicLanding .vl-download { margin-right: 32px; margin-left: 32px; padding: 42px 37px; }
  #publicLanding .vl-footer { padding-right: 32px; padding-left: 32px; }
  #publicLanding .public-plan-card { padding: 21px 17px 18px; }
}
@media (max-width: 950px) {
  #publicLanding .vl-nav { min-height: 78px; }
  #publicLanding .vl-nav-links { gap: 17px; }
  #publicLanding .vl-nav-links a { font-size: 10px; }
  #publicLanding .vl-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 23px; padding-top: 48px; padding-bottom: 50px; min-height: 574px; }
  #publicLanding .vl-hero-title { font-size: 48px; line-height: 1.05; letter-spacing: -2.4px; }
  #publicLanding .vl-hero-title em { letter-spacing: -2.6px; }
  #publicLanding .vl-lead { font-size: 12px; }
  #publicLanding .vl-kicker { font-size: 7px; letter-spacing: 1.3px; }
  #publicLanding .vl-primary, #publicLanding .vl-secondary { font-size: 10px; padding: 13px 15px; min-height: 43px; }
  #publicLanding .vl-stage { height: 432px; }
  #publicLanding .vl-product-window { width: 83%; left: 7%; top: 23%; }
  #publicLanding .vl-window-body { padding: 10px; grid-template-columns: minmax(0, 1fr) 62px; gap: 7px; }
  #publicLanding .vl-tool-rail { gap: 9px; }
  #publicLanding .vl-tool-rail label { font-size: 6px; }
  #publicLanding .vl-float-cloud { width: 168px; top: 12%; right: -2%; gap: 8px; }
  #publicLanding .vl-float-presets { width: 153px; bottom: 12%; left: -3%; gap: 9px; }
  #publicLanding .vl-float-card { padding: 11px; }
  #publicLanding .vl-float-card b { font-size: 10px; }
  #publicLanding .vl-facts dl { gap: 28px; }
  #publicLanding .vl-facts dl > div { flex-direction: column; gap: 3px; }
  #publicLanding .vl-facts dd { font-size: 17px; }
  #publicLanding .vl-facts > a { max-width: 148px; }
  #publicLanding .vl-section { padding-top: 86px; }
  #publicLanding .vl-section-head { column-gap: 32px; row-gap: 0; }
  #publicLanding .vl-section-copy { font-size: 11px; }
  #publicLanding .vl-feature-art { height: 172px; }
  #publicLanding .vl-feature { padding-right: 16px; padding-left: 16px; }
  #publicLanding .vl-feature-art { margin-right: -16px; margin-left: -16px; }
  #publicLanding .vl-feature h3 { font-size: 15px; }
  #publicLanding .vl-feature p { font-size: 10px; }
  #publicLanding .vl-flow { min-height: 603px; padding-bottom: 62px; }
  #publicLanding .vl-flow-wireframe { top: 164px; }
  #publicLanding .vl-flow-steps { gap: 17px; padding-top: 116px; }
  #publicLanding .vl-flow-step h3 { font-size: 13px; }
  #publicLanding .vl-flow-step p { font-size: 10px; }
  #publicLanding .vl-detail { padding-top: 12px; }
  #publicLanding .vl-detail-grid { gap: 21px; }
  #publicLanding .public-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  #publicLanding .public-plan-card { padding: 24px; }
  #publicLanding .vl-faq-list { max-width: none; }
  #publicLanding .vl-download { grid-template-columns: 1fr 185px; gap: 24px; margin-top: 89px; padding: 36px; }
  #publicLanding .vl-download-orb { width: 185px; height: 200px; }
}
@media (max-width: 720px) {
  #publicLanding .vl-nav { gap: 14px; min-height: 76px; padding-left: 24px; padding-right: 24px; }
  #publicLanding .vl-logo { font-size: 20px; }
  #publicLanding .vl-nav-links { display: none; }
  #publicLanding .public-nav-actions { margin-left: auto; }
  #publicLanding .public-nav-actions .button { min-height: 36px; padding: 9px 12px; font-size: 10px; }
  #publicLanding .vl-hero { display: flex; flex-direction: column; align-items: stretch; gap: 30px; padding: 49px 24px 43px; min-height: auto; }
  #publicLanding .vl-hero-copy { padding: 0; }
  #publicLanding .vl-kicker { font-size: 8px; letter-spacing: 1.6px; margin-bottom: 22px; }
  #publicLanding .vl-hero-title { font-size: clamp(45px, 9.4vw, 66px); line-height: 1.035; letter-spacing: -2.5px; max-width: 500px; margin-bottom: 23px; }
  #publicLanding .vl-hero-title em { letter-spacing: -2.8px; }
  #publicLanding .vl-lead { max-width: 470px; font-size: 13px; margin-bottom: 25px; }
  #publicLanding .vl-primary, #publicLanding .vl-secondary { min-height: 46px; font-size: 11px; padding: 13px 19px; }
  #publicLanding .public-download-note { font-size: 9px; }
  #publicLanding .vl-stage { width: calc(100% - 12px); margin: 7px auto 0; height: 510px; max-width: 565px; }
  #publicLanding .vl-product-window { width: 79%; left: 9%; top: 22%; }
  #publicLanding .vl-window-body { grid-template-columns: minmax(0, 1fr) 92px; padding: 13px; gap: 10px; }
  #publicLanding .vl-tool-rail { gap: 13px; }
  #publicLanding .vl-tool-rail label { font-size: 7px; }
  #publicLanding .vl-float-cloud { width: 195px; top: 10%; right: -2%; }
  #publicLanding .vl-float-presets { width: 175px; bottom: 13%; left: -3%; }
  #publicLanding .vl-float-card { padding: 13px; }
  #publicLanding .vl-float-card b { font-size: 12px; }
  #publicLanding .vl-facts { margin: 0; padding: 22px 0; flex-wrap: wrap; gap: 18px; }
  #publicLanding .vl-facts > p { max-width: none; width: 100%; font-size: 7px; }
  #publicLanding .vl-facts dl { flex: 1; width: auto; }
  #publicLanding .vl-facts > a { width: 100%; max-width: none; font-size: 9px; }
  #publicLanding .vl-facts > a br { display: none; }
  #publicLanding .vl-facts > a b { margin-left: 7px; }
  #publicLanding .vl-facts dt { font-size: 9px; }
  #publicLanding .vl-facts dd { font-size: 18px; }
  #publicLanding .vl-section { padding: 75px 24px 0; }
  #publicLanding .vl-section-head { display: block; margin-bottom: 29px; }
  #publicLanding .vl-section-index { margin-bottom: 15px; font-size: 7px; }
  #publicLanding .vl-section-title { max-width: 480px; font-size: 35px; letter-spacing: -1.5px; }
  #publicLanding .vl-section-copy { margin: 19px 0 0; max-width: 445px; font-size: 12px; }
  #publicLanding .vl-feature-grid { grid-template-columns: 1fr; gap: 19px; }
  #publicLanding .vl-feature { padding-left: 24px; padding-right: 24px; padding-bottom: 26px; }
  #publicLanding .vl-feature-art { margin-left: -24px; margin-right: -24px; height: 247px; }
  #publicLanding .vl-feature-art > svg { max-width: 465px; }
  #publicLanding .vl-feature h3 { font-size: 19px; }
  #publicLanding .vl-feature p { font-size: 12px; max-width: 440px; }
  #publicLanding .vl-flow { min-height: auto; padding-top: 82px; padding-bottom: 34px; }
  #publicLanding .vl-flow-wireframe { top: 236px; left: -33%; width: 166%; height: 440px; opacity: .25; }
  #publicLanding .vl-flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 25px; padding-top: 76px; }
  #publicLanding .vl-flow-step { padding-top: 17px; min-height: 170px; }
  #publicLanding .vl-flow-step > span, #publicLanding .vl-flow-step > b { margin-bottom: 17px; font-size: 8px; }
  #publicLanding .vl-flow-step h3 { font-size: 15px; }
  #publicLanding .vl-flow-step p { font-size: 11px; }
  #publicLanding .vl-detail { padding-top: 39px; }
  #publicLanding .vl-detail-grid { grid-template-columns: 1fr; gap: 27px; }
  #publicLanding .vl-detail-card { position: relative; padding: 24px 0 0 47px; min-height: 0; }
  #publicLanding .vl-detail-icon { position: absolute; top: 25px; left: 0; width: 26px; height: 26px; }
  #publicLanding .vl-detail-card h3 { font-size: 16px; }
  #publicLanding .vl-detail-card p { max-width: 460px; font-size: 12px; }
  #publicLanding .vl-plans { padding-top: 81px; }
  #publicLanding .public-plan-grid { gap: 12px; }
  #publicLanding .public-plan-card { padding: 22px 18px; }
  #publicLanding .public-plan-card > p:not(.vl-plan-price):not(.plan-card-label) { min-height: 49px; }
  #publicLanding .public-plan-card ul { font-size: 10px; }
  #publicLanding .public-plan-note { font-size: 8px; }
  #publicLanding .vl-faq { padding-top: 78px; }
  #publicLanding .vl-faq summary { font-size: 13px; line-height: 1.5; }
  #publicLanding .vl-faq details p { font-size: 11px; margin-right: 24px; }
  #publicLanding .vl-download { grid-template-columns: 1fr; gap: 0; margin: 76px 24px 0; padding: 36px 27px; }
  #publicLanding .vl-download-copy h2 { font-size: 35px; letter-spacing: -1.5px; }
  #publicLanding .vl-download-copy > p { max-width: 430px; font-size: 11px; }
  #publicLanding .vl-download-orb { position: absolute; right: -54px; bottom: -64px; width: 224px; height: 224px; opacity: .12; }
  #publicLanding .vl-footer { padding: 35px 24px 30px; gap: 23px; }
  #publicLanding .vl-footer > p { width: 100%; order: 3; }
  #publicLanding .vl-footer > small { width: 100%; order: 3; }
  #publicLanding .vl-footer > span { display: none; }
  #publicLanding .vl-footer-links { gap: 18px; }
}
@media (max-width: 430px) {
  #publicLanding .vl-nav { padding-left: 19px; padding-right: 19px; min-height: 70px; }
  #publicLanding .vl-logo { font-size: 18px; gap: 8px; }
  #publicLanding .vl-logo-icon { width: 28px; height: 28px; }
  #publicLanding .public-nav-actions { gap: 5px; }
  #publicLanding .public-nav-actions .button { font-size: 9px; padding: 9px 10px; }
  #publicLanding #publicSignOut { padding-left: 8px; padding-right: 8px; }
  #publicLanding .vl-hero { padding: 41px 20px 35px; }
  #publicLanding .vl-hero-title { font-size: 43px; letter-spacing: -2px; }
  #publicLanding .vl-hero-title em { letter-spacing: -2.2px; }
  #publicLanding .vl-hero-actions { gap: 8px; }
  #publicLanding .vl-primary, #publicLanding .vl-secondary { font-size: 10px; padding: 12px 15px; }
  #publicLanding .vl-stage { height: 405px; width: calc(100% - 10px); border-radius: 13px; }
  #publicLanding .vl-product-window { width: 87%; top: 25%; left: 5%; }
  #publicLanding .vl-window-top { padding: 0 9px; font-size: 7px; min-height: 29px; }
  #publicLanding .vl-window-body { grid-template-columns: minmax(0, 1fr) 62px; padding: 9px; gap: 7px; }
  #publicLanding .vl-tool-rail { gap: 9px; }
  #publicLanding .vl-tool-rail label { font-size: 6px; }
  #publicLanding .vl-tool-rail b { font-size: 5px; }
  #publicLanding .vl-float-cloud { top: 10%; width: 170px; right: -3%; }
  #publicLanding .vl-float-presets { bottom: 12%; width: 151px; left: -4%; }
  #publicLanding .vl-float-card { padding: 10px; }
  #publicLanding .vl-float-card > svg { width: 20px; height: 20px; }
  #publicLanding .vl-float-card b { font-size: 10px; }
  #publicLanding .vl-float-card small { font-size: 6px; }
  #publicLanding .vl-float-card p { font-size: 7px; }
  #publicLanding .vl-mini-preset-row i { width: 27px; height: 33px; }
  #publicLanding .vl-stage-caption { left: 12px; right: 12px; bottom: 12px; font-size: 6px; }
  #publicLanding .vl-facts { margin: 0; }
  #publicLanding .vl-facts dd { font-size: 15px; }
  #publicLanding .vl-facts dt { max-width: 92px; font-size: 8px; }
  #publicLanding .vl-section { padding-left: 20px; padding-right: 20px; }
  #publicLanding .vl-section-title { font-size: 31px; letter-spacing: -1.2px; }
  #publicLanding .vl-feature-art { height: 223px; }
  #publicLanding .vl-flow-steps { gap: 24px 19px; }
  #publicLanding .vl-flow-step h3 { font-size: 13px; }
  #publicLanding .vl-flow-step p { font-size: 10px; }
  #publicLanding .public-plan-grid { grid-template-columns: 1fr; gap: 15px; }
  #publicLanding .public-plan-card { padding: 25px; }
  #publicLanding .public-plan-card > p:not(.vl-plan-price):not(.plan-card-label) { min-height: 0; }
  #publicLanding .public-plan-card ul { font-size: 11px; }
  #publicLanding .vl-download { margin-left: 20px; margin-right: 20px; padding: 31px 24px; }
  #publicLanding .vl-download-copy h2 { font-size: 30px; }
  #publicLanding .vl-footer { padding-left: 20px; padding-right: 20px; }
}

/* Calendar planning and the separate status of future publishing. */
#publicLanding .vl-publishing { padding-top: 109px; }
#publicLanding .vl-publish-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 65px; align-items: center; }
#publicLanding .vl-publish-copy { min-width: 0; padding: 9px 0; }
#publicLanding .vl-status-badge { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 6px 10px; border: 1px solid #70612b; border-radius: 20px; color: #dfca76; background: #242116; font: 8px/1.3 var(--vl-mono); letter-spacing: .25px; }
#publicLanding .vl-status-badge::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #d5bd62; flex-shrink: 0; }
#publicLanding .vl-publish-copy h3 { margin: 22px 0 17px; max-width: 400px; color: var(--vl-white); font-size: 31px; line-height: 1.15; letter-spacing: -1.1px; font-weight: 600; }
#publicLanding .vl-publish-copy > p { max-width: 420px; margin: 0; color: #94948d; font-size: 12px; line-height: 1.8; }
#publicLanding .vl-publish-benefits { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; color: #c0c0b7; font-size: 11px; line-height: 1.7; }
#publicLanding .vl-publish-benefits li { position: relative; padding-left: 20px; }
#publicLanding .vl-publish-benefits li::before { content: ''; position: absolute; left: 1px; top: 7px; width: 9px; height: 6px; border-bottom: 1px solid #d9be52; border-left: 1px solid #d9be52; transform: rotate(-45deg); }
#publicLanding .vl-calendar-demo { min-width: 0; padding: 24px; border: 1px solid #4a4430; border-radius: 13px; background: linear-gradient(137deg, #1c1b17, #141414 54%); box-shadow: inset 0 1px 0 #ffe38209; }
#publicLanding .vl-calendar-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
#publicLanding .vl-calendar-top b { color: #e6e5dc; font-size: 13px; font-weight: 550; letter-spacing: -.2px; }
#publicLanding .vl-calendar-top > span { padding: 3px 7px; border: 1px solid #444135; border-radius: 4px; color: #a69b70; font: 7px/1.5 var(--vl-mono); letter-spacing: .5px; }
#publicLanding .vl-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding-bottom: 20px; border-bottom: 1px solid #343129; }
#publicLanding .vl-calendar-days > div { display: grid; justify-items: center; align-content: center; gap: 9px; min-height: 61px; padding: 8px 3px; border: 1px solid transparent; border-radius: 6px; background: #1d1d1a; }
#publicLanding .vl-calendar-days b { color: #76766d; font: 7px var(--vl-mono); font-weight: 400; }
#publicLanding .vl-calendar-days span { color: #d0cfc1; font-size: 15px; line-height: 1; }
#publicLanding .vl-calendar-days > div.is-selected { border-color: #ac913c; background: #302b19; }
#publicLanding .vl-calendar-days > div.is-selected b { color: #b8a970; }
#publicLanding .vl-calendar-days > div.is-selected span { color: var(--vl-yellow); }
#publicLanding .vl-calendar-slots { display: grid; gap: 9px; padding: 18px 0; }
#publicLanding .vl-calendar-slots > div { display: grid; grid-template-columns: 43px minmax(0, 1fr) 49px; gap: 12px; align-items: center; min-height: 55px; padding: 9px 12px; border: 1px solid #35342b; border-radius: 6px; background: #20201b; }
#publicLanding .vl-calendar-slots time { color: #bcb796; font: 8px var(--vl-mono); }
#publicLanding .vl-calendar-slots > div > span { display: flex; align-items: center; gap: 11px; min-width: 0; }
#publicLanding .vl-calendar-slots b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d8d7cd; font-size: 10px; font-weight: 500; }
#publicLanding .vl-calendar-slots small { justify-self: end; color: #a9a082; font: 7px var(--vl-mono); white-space: nowrap; }
#publicLanding .vl-clip-thumb { display: block; flex-shrink: 0; width: 23px; height: 31px; border: 1px solid #ffffff16; border-radius: 3px; background: radial-gradient(circle at 75% 23%, #e9d6ad 0 8%, transparent 9%), linear-gradient(157deg, #92acb0 0 45%, #617375 46% 63%, #c7a278 64% 80%, #7e6a51 81%); }
#publicLanding .vl-calendar-slots > div:nth-child(2) .vl-clip-thumb { filter: saturate(.65) brightness(1.15); }
#publicLanding .vl-calendar-slots > div:nth-child(3) .vl-clip-thumb { filter: saturate(1.25) contrast(1.12); }
#publicLanding .vl-calendar-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 17px; border-top: 1px solid #343129; }
#publicLanding .vl-calendar-footer > span { color: #8c8c80; font-size: 9px; }
#publicLanding .vl-calendar-footer > b { color: #c6b36d; font: 8px var(--vl-mono); font-weight: 400; }
#publicLanding .vl-publish-next { display: grid; grid-template-columns: 150px minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 30px; margin-top: 44px; padding: 27px 0 0; border-top: 1px solid #30302a; }
#publicLanding .vl-status-upcoming { border-color: #3d3d36; color: #94948b; background: #191918; margin-top: 2px; }
#publicLanding .vl-status-upcoming::before { background: #77776c; }
#publicLanding .vl-publish-next h3 { margin: 0; color: #d0d0c5; font-size: 18px; line-height: 1.4; font-weight: 550; letter-spacing: -.4px; }
#publicLanding .vl-publish-next > p { margin: 0; max-width: 420px; color: #85857c; font-size: 11px; line-height: 1.8; }
@media (max-width: 1200px) {
  #publicLanding .vl-publish-grid { gap: 42px; }
  #publicLanding .vl-calendar-demo { padding: 21px; }
  #publicLanding .vl-publish-next { gap: 24px; grid-template-columns: 135px minmax(0, .9fr) minmax(0, 1.1fr); }
}
@media (max-width: 950px) {
  #publicLanding .vl-publishing { padding-top: 87px; }
  #publicLanding .vl-publish-grid { gap: 30px; }
  #publicLanding .vl-publish-copy h3 { font-size: 27px; }
  #publicLanding .vl-publish-copy > p { font-size: 11px; }
  #publicLanding .vl-calendar-demo { padding: 18px; }
  #publicLanding .vl-calendar-top b { font-size: 11px; }
  #publicLanding .vl-calendar-days { gap: 4px; }
  #publicLanding .vl-calendar-slots > div { grid-template-columns: 35px minmax(0, 1fr) 41px; gap: 7px; padding-left: 9px; padding-right: 9px; }
  #publicLanding .vl-calendar-slots > div > span { gap: 8px; }
  #publicLanding .vl-calendar-slots b { font-size: 9px; }
  #publicLanding .vl-calendar-slots small { font-size: 6px; }
  #publicLanding .vl-calendar-footer { gap: 8px; }
  #publicLanding .vl-calendar-footer > span { font-size: 8px; }
  #publicLanding .vl-calendar-footer > b { font-size: 7px; }
  #publicLanding .vl-publish-next { grid-template-columns: 135px minmax(0, 1fr); gap: 16px 25px; }
  #publicLanding .vl-publish-next > p { grid-column: 2; max-width: none; }
}
@media (max-width: 720px) {
  #publicLanding .vl-publishing { padding-top: 76px; }
  #publicLanding .vl-publish-grid { grid-template-columns: 1fr; gap: 31px; }
  #publicLanding .vl-publish-copy { padding: 0; }
  #publicLanding .vl-publish-copy h3 { font-size: 29px; max-width: 445px; margin-top: 21px; }
  #publicLanding .vl-publish-copy > p { font-size: 12px; max-width: 480px; }
  #publicLanding .vl-publish-benefits { font-size: 11px; max-width: 445px; gap: 12px; }
  #publicLanding .vl-calendar-demo { padding: 23px; }
  #publicLanding .vl-calendar-top b { font-size: 13px; }
  #publicLanding .vl-calendar-days { gap: 6px; }
  #publicLanding .vl-calendar-slots > div { grid-template-columns: 43px minmax(0, 1fr) 49px; gap: 12px; padding-left: 12px; padding-right: 12px; }
  #publicLanding .vl-calendar-slots b { font-size: 10px; }
  #publicLanding .vl-calendar-slots small { font-size: 7px; }
  #publicLanding .vl-calendar-footer > span { font-size: 9px; }
  #publicLanding .vl-calendar-footer > b { font-size: 8px; }
  #publicLanding .vl-publish-next { grid-template-columns: 1fr; gap: 14px; margin-top: 33px; padding-top: 25px; }
  #publicLanding .vl-publish-next > p { grid-column: auto; max-width: 460px; }
  #publicLanding .vl-publish-next h3 { font-size: 19px; }
}
@media (max-width: 430px) {
  #publicLanding .vl-publish-copy h3 { font-size: 27px; }
  #publicLanding .vl-calendar-demo { padding: 18px; }
  #publicLanding .vl-calendar-top { gap: 10px; }
  #publicLanding .vl-calendar-top b { font-size: 11px; }
  #publicLanding .vl-calendar-days { gap: 4px; }
  #publicLanding .vl-calendar-days > div { min-height: 56px; }
  #publicLanding .vl-calendar-days b { font-size: 6px; }
  #publicLanding .vl-calendar-days span { font-size: 13px; }
  #publicLanding .vl-calendar-slots > div { grid-template-columns: 34px minmax(0, 1fr) 44px; gap: 7px; padding-left: 9px; padding-right: 9px; }
  #publicLanding .vl-calendar-slots b { font-size: 9px; }
  #publicLanding .vl-calendar-slots > div > span { gap: 8px; }
  #publicLanding .vl-calendar-footer > span { font-size: 8px; }
  #publicLanding .vl-calendar-footer > b { font-size: 7px; }
}