/* Designer source: VS-LP-new/assets/css/styles.css (copied by build_product.py) */

:root{
    --vs-color-heading: #111827;
    --vs-color-page: #f9fafb;

    /* Typography */
    --vs-font-family: 'Inter', sans-serif;
    --vs-font-size-hero-title: clamp(2.5rem, 5vw, 4rem);
    --vs-font-size-section-title: clamp(2rem, 4vw, 3.25rem);
    --vs-font-size-section-lead: 1.125rem;
    --vs-font-size-section-lead-lg: 1.25rem;
    --vs-font-size-feature-title: 1.25rem;
    --vs-font-size-feature-title-lg: 1.5rem;

    /* Shared visual language */
}
.vs-page{
    font-family: var(--vs-font-family);
}
.vs-marketing-page section:where(:not(.vs-footer-cta)) h2:where(:not(.vs-feature-preview *)){
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-section-title);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.035em;
}
.vs-marketing-page section:where(:not(.vs-footer-cta)) h2:where(:not(.vs-feature-preview *)) + p{
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-section-lead);
    font-weight: 400;
    line-height: 1.6;
}
body.vs-marketing-page > :where(main.vs-body-sections) > section:where(:not(.vs-footer-cta)):first-of-type h1,body.vs-marketing-page > :where(main.vs-body-sections) > section:where(:not(.vs-footer-cta)):first-of-type h2{
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-hero-title);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.04em;
}
body.vs-marketing-page > :where(main.vs-body-sections) > section:where(:not(.vs-footer-cta)):first-of-type h1 + p,body.vs-marketing-page > :where(main.vs-body-sections) > section:where(:not(.vs-footer-cta)):first-of-type h2 + p{
    font-size: var(--vs-font-size-section-lead);
    font-weight: 400;
    line-height: 1.6;
}
.vs-content-page h1{
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-hero-title);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.04em;
}
.vs-content-page h2{
    font-family: var(--vs-font-family);
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
}
.vs-content-page h1 + p{
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-section-lead);
    font-weight: 400;
    line-height: 1.6;
}
.vs-content-page .content-section p,.vs-content-page .content-section li{
    font-family: var(--vs-font-family);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
}
.vs-page .vs-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .45);
    transition: transform .3s, box-shadow .3s;
}
.vs-page .vs-cta:hover{ background: linear-gradient(90deg, #4338ca, #6d28d9); color: #fff; box-shadow: 0 14px 24px -10px rgba(79, 70, 229, .55); transform: translateY(-2px); }
.vs-page .vs-cta:focus-visible{ outline: 3px solid #a5b4fc; outline-offset: 3px; }
.vs-page .vs-cta-size{
    box-sizing: border-box;
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .75rem 1.5rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: transform .3s, box-shadow .3s, background-color .3s, color .3s;
}
.vs-page .vs-cta-size:not(.vs-cta){ box-shadow: 0 10px 20px -10px rgba(79, 70, 229, .45); }
.vs-page .vs-cta-size:not(.vs-cta):hover{ box-shadow: 0 14px 24px -10px rgba(79, 70, 229, .55); transform: translateY(-2px); }
.vs-page .vs-cta-size:focus-visible{ outline: 3px solid #a5b4fc; outline-offset: 3px; }
.vs-section-title{
    color: var(--vs-color-heading);
    font-size: var(--vs-font-size-section-title);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.035em;
}
.vs-display-title{
    color: var(--vs-color-heading);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
}
.vs-feature-title{
    color: var(--vs-color-heading);
    font-size: var(--vs-font-size-feature-title);
    font-weight: 700;
    line-height: 1.3;
}
.vs-content-copy{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}
.vs-card-title,.vs-page .feature-content-pane h4{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}
.vs-card-copy,.vs-page .feature-content-pane h4 + p{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}
.vs-section-header{ max-width: 56rem; margin: 0 auto 3rem; text-align: center; }
.vs-section-header .vs-section-eyebrow{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 1.25rem; padding: .5rem 1rem; border: 1px solid #e0e7ff; border-radius: 999px; background: #eef2ff; color: #4f46e5; font-size: .75rem; font-weight: 700; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; }
.vs-section-header .vs-section-heading{ margin: 0 auto 1rem; color: #0f172a; font-size: var(--vs-font-size-section-title); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; }
.vs-section-header .vs-section-lead{ max-width: 48rem; margin: 0 auto; color: #475467; font-size: var(--vs-font-size-section-lead); font-weight: 400; line-height: 1.6; }
.vs-section-header--hero{ max-width: 64rem; margin-bottom: 0; }
.vs-section-header--hero .vs-section-heading{ font-size: var(--vs-font-size-hero-title); line-height: 1.08; }
.vs-section-header--hero .vs-section-lead{ margin-bottom: 2.5rem; }

@media (min-width: 640px) {
.vs-section-header .vs-section-lead{ font-size: var(--vs-font-size-section-lead-lg); }
.vs-marketing-page section:where(:not(.vs-footer-cta)) h2:where(:not(.vs-feature-preview *)) + p,body.vs-marketing-page > :where(main.vs-body-sections) > section:where(:not(.vs-footer-cta)):first-of-type h1 + p,body.vs-marketing-page > :where(main.vs-body-sections) > section:where(:not(.vs-footer-cta)):first-of-type h2 + p,.vs-content-page h1 + p{
        font-size: var(--vs-font-size-section-lead-lg);
    }
.vs-display-title{
        font-size: 3rem;
    }
.vs-feature-title{
        font-size: var(--vs-font-size-feature-title-lg);
    }
.vs-card-title,.vs-page .feature-content-pane h4{
        font-size: 1.5rem;
    }

}
.vs-hero-showcase{
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(99, 102, 241, .08);
}
.vs-hero-sidebar{
    min-width: 0;
    padding-right: 12px;
    border-right: 1px solid #e5e7eb;
}
.vs-hero-tabs-viewport{ min-width: 0; }
.vs-hero-swipe-hint{ display: none; }
.vs-hero-feature-list{ display: flex; flex-direction: column; }
.vs-hero-feature-row{ display: flex; align-items: center; min-width: 0; min-height: 42px; border-radius: 12px; }
.vs-hero-feature-row.is-preview{ background: rgba(99, 102, 241, .1); }
.vs-hero-tab-btn{ display: flex; flex: 1; min-width: 0; align-items: center; gap: 11px; padding: 0px 4px 0px 9px; border: 0; background: transparent; color: #111827; font: inherit; text-align: left; cursor: pointer; }
.vs-hero-tab-btn svg{ flex: none; width: 24px; height: 24px; }
.vs-hero-feature-copy{ display: block; min-width: 0; }
.vs-hero-feature-copy strong{ display: block; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.vs-hero-feature-copy small{ display: block; overflow: hidden; margin-top: 2px; color: #667085; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.vs-hero-feature-row.is-preview .vs-hero-tab-btn,.vs-hero-feature-row.is-preview .vs-hero-select-btn{ color: #4f46e5; }
.vs-hero-select-btn{ display: grid; flex: none; place-items: center; width: 32px; height: 32px; margin-right: 6px; border: 0; border-radius: 9px; background: transparent; color: #475467; font: inherit; font-size: 21px; line-height: 1; cursor: pointer; }
.vs-hero-select-btn svg{ display: block; width: 18px; height: 18px; }
.vs-hero-select-btn:hover,.vs-hero-feature-row.is-selected .vs-hero-select-btn{ background: rgba(99, 102, 241, .12); color: #4f46e5; }
.vs-hero-tab-btn:focus-visible,.vs-hero-select-btn:focus-visible,.vs-hero-selection-cta:focus-visible{ outline: 2px solid #4f46e5; outline-offset: 2px; }
.vs-hero-selection-cta{ display: flex; min-height: 44px; margin-top: 10px; padding: 8px 8px; font-size: 13px; }
.vs-hero-selection-cta[hidden]{ display: none; }
.vs-hero-preview{ min-width: 0; width: 100%; }
.vs-hero-preview [data-vs-hero-content="analytics"] .hero-video{ width: 100%; }
.vs-hero-preview [data-vs-hero-content="analytics"] img{ width: 100%; height: 100%; object-fit: contain; }
.vs-chat-light > .vs-hero-scaled-shell{ display: block; }
.vs-chat-light > [class~="lg:hidden"]{ display: none; }
.vs-chat-light [class~="lg:flex"]{ display: flex; }
.vs-chat-light [class~="lg:flex-row"]{ flex-direction: row; }
.vs-chat-light [class~="lg:w-[356px]"]{ width: 356px; }
.vs-chat-light [class~="lg:flex-shrink-0"]{ flex-shrink: 0; }
.vs-chat-light [class~="lg:border-b-0"]{ border-bottom-width: 0; }
.vs-chat-light [class~="lg:border-r"]{ border-right-width: 1px; }
.vs-chat-light [class~="lg:items-center"]{ align-items: center; }
.vs-chat-light [class~="lg:justify-between"]{ justify-content: space-between; }
.vs-chat-light .vs-hero-scaled-stage{ border-color: #e4e7ec; box-shadow: 0 20px 50px rgba(99, 102, 241, .12); }
.vs-chat-light [class~="bg-[#1c1c1d]"],.vs-chat-light [class~="bg-[#202021]"]{ background-color: #fff; }
.vs-chat-light [class~="bg-[#171718]"],.vs-chat-light [class~="bg-[#1b1b1c]"],.vs-chat-light [class~="bg-[#1d1d1e]"]{ background-color: #f8f9ff; }
.vs-chat-light [class~="bg-[#1a1b1e]"],.vs-chat-light [class~="bg-[#222325]"],.vs-chat-light [class~="bg-[#232427]"],.vs-chat-light [class~="bg-[#262729]"],.vs-chat-light [class~="bg-[#323233]"]{ background-color: rgb(219, 223, 238); }
.vs-chat-light [class~="bg-[#242426]"]{ background-color: #ede9fe; }
.vs-chat-light [class~="border-[#2e2f33]"],.vs-chat-light [class~="border-[#303136]"],.vs-chat-light [class~="border-[#313339]"],.vs-chat-light [class~="border-[#3a3b40]"],.vs-chat-light [class~="border-[#3b3c41]"],.vs-chat-light [class~="border-[#45464c]"],.vs-chat-light [class~="border-[#4a4b50]"],.vs-chat-light [class~="border-[#262729]"]{ border-color: #e4e7ec; }
.vs-chat-light [class~="border-[#171718]"],.vs-chat-light [class~="border-[#202021]"]{ border-color: #fff; }
.vs-chat-light [class~="text-white"]{ color: #1f2937; }
.vs-chat-light [class*="text-[#"]{ color: #667085; }
.vs-chat-light [class~="text-[#f5f5f5]"],.vs-chat-light [class~="text-[#d1d2d7]"],.vs-chat-light [class~="text-[#c9c9cb]"],.vs-chat-light [class~="text-[#d0d0d2]"]{ color: #475467; }
.vs-chat-light [class~="text-[#6f7cff]"]{ color: #4f46e5; }
.vs-chat-light [class~="bg-[#5c47ff]"],.vs-chat-light [class~="bg-[#ff5148]"],.vs-chat-light [class~="bg-gradient-to-br"],.vs-chat-light .vs-participant-tile [class~="text-white"]{ color: #fff; }
.vs-chat-light #vs-chat-input{ color: #1f2937; }
.vs-chat-light #vs-chat-input::placeholder{ color: #98a2b3; opacity: 1; }
.vs-chat-light #vs-chat-message-list{ scrollbar-color: #cbd5e1 #fff; }
.vs-hero-project-shell{ position: relative; width: 100%; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 14px; background: #fff; }
.vs-hero-project-columns{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.vs-hero-project-columns > div{ min-width: 0; }
.vs-hero-project-shell .vs-hero-project-board{ border-color: #e4e7ec; background: #fff; }
.vs-hero-project-board > div:first-child{ border-color: #e4e7ec; }
.vs-hero-project-board .vs-hero-project-columns > div{ background: #f8f9ff; }
.vs-hero-project-board .vs-hero-project-columns article{ border-color: #e4e7ec; background: #fff; box-shadow: 0 3px 12px rgba(56, 65, 99, .05); }
.vs-hero-project-board input{ border-color: #d9dfeb; background: #f8f9ff; color: #1f2937; }
.vs-hero-project-board input::placeholder{ color: #98a2b3; }
.vs-hero-project-board [class~="text-white"]{ color: #1f2937; }
.vs-hero-project-board [class~="text-slate-400"]{ color: #667085; }
.vs-hero-project-board [class~="text-slate-200"]{ color: #475467; }
.vs-hero-project-board [class~="bg-slate-700"]{ background-color: #e9ecf8; }
.vs-hero-project-board [class~="border-slate-700"],.vs-hero-project-board [class~="border-slate-700/80"],.vs-hero-project-board [class~="border-slate-600"],.vs-hero-project-board [class~="border-slate-500"]{ border-color: #d9dfeb; }
.vs-hero-project-board [class~="border-[#0c1623]"]{ border-color: #fff; }
.vs-hero-project-board [class~="bg-gradient-to-r"][class~="text-white"],.vs-hero-project-board [class~="bg-emerald-500"][class~="text-white"]{ color: #fff; }
.vs-hero-project-board [class~="text-rose-300"]{ color: #be123c; }
.vs-hero-project-board [class~="text-amber-300"]{ color: #92400e; }
.vs-hero-project-board [class~="text-emerald-300"]{ color: #047857; }
.vs-hero-project-board [class~="text-indigo-400"],.vs-hero-project-board [class~="text-blue-400"]{ color: #4f46e5; }
.vs-time-shell{ width: 100%; max-width: 1200px; border-radius: 14px; }
.vs-time-shell .vs-time-dashboard{ width: 1000px; height: 562.5px; }
.vs-time-dashboard{ display: flex; flex-direction: column; overflow: hidden; padding: 14px; border: 1px solid #303136; border-radius: 14px; background: #1c1c1d; color: #f5f7fb; box-shadow: 0 20px 50px rgba(15, 23, 42, .16); font-family: Arial, sans-serif; font-size: 11px; }
.vs-time-dashboard,.vs-time-dashboard *{ box-sizing: border-box; }
.vs-time-header,.vs-time-heading,.vs-time-header-actions,.vs-time-panel-heading{ display: flex; align-items: center; }
.vs-time-header,.vs-time-panel-heading{ justify-content: space-between; }
.vs-time-header{ gap: 12px; margin-bottom: 14px; }
.vs-time-heading{ gap: 11px; min-width: 0; }
.vs-time-heading > div{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vs-time-heading strong{ font-size: 16px; white-space: nowrap; }
.vs-time-heading > div > span{ color: #b8c5d8; font-size: 11px; white-space: nowrap; }
.vs-time-heading-icon,.vs-time-metric-icon{ display: grid; flex: none; place-items: center; border-radius: 7px; background: linear-gradient(135deg, #3549c3, #6218ed); color: #fff; }
.vs-time-heading-icon{ width: 35px; height: 35px; font-size: 27px; }
.vs-time-header-actions{ gap: 9px; color: #d6deea; font-size: 10px; }
.vs-time-period,.vs-time-range{ display: flex; align-items: center; min-height: 34px; padding: 7px 10px; border-radius: 8px; background: #242426; white-space: nowrap; }
.vs-time-metrics{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 9px; }
.vs-time-metric{ display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 60px; padding: 8px; border-radius: 9px; background: #242426; }
.vs-time-metric-icon{ width: 30px; height: 30px; font-size: 21px; }
.vs-time-metric > div{ display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) auto; column-gap: 5px; align-content: start; min-width: 0; }
.vs-time-metric small{ grid-column: 1 / -1; color: #aab6c8; font-size: 10px; white-space: nowrap; }
.vs-time-metric strong{ grid-column: 1; margin-top: 3px; font-size: 16px; line-height: 1.1; white-space: nowrap; }
.vs-time-trend{ grid-column: 2; align-self: end; color: #36dba9; font-size: 11px; white-space: nowrap; }
.vs-time-trend em{ display: block; margin-top: 3px; color: #aab6c8; font-size: 9px; font-style: normal; text-align: right; }
.vs-time-main{ display: grid; flex: 1; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; }
.vs-time-panel{ min-width: 0; padding: 8px; border-radius: 9px; background: #202021; }
.vs-time-apps,.vs-time-distribution{ display: flex; flex-direction: column; }
.vs-time-panel-heading{ gap: 8px; margin-bottom: 12px; font-size: 13px; }
.vs-time-panel-heading span{ color: #d6deea; font-size: 10px; white-space: nowrap; }
.vs-time-filter{ padding: 5px 8px; border-radius: 6px; background: #242426; }
.vs-time-app{ display: grid; flex: 1; grid-template-columns: 24px minmax(50px, 1fr) 50px minmax(45px, 1.4fr) 27px; align-items: center; gap: 6px; min-height: 29px; font-size: 10px; }
.vs-time-app-icon{ display: grid; place-items: center; width: 23px; height: 23px; overflow: hidden; border-radius: 5px; background: #fff; color: #111827; font-weight: 700; }
.vs-time-app-icon img{ width: 100%; height: 100%; object-fit: contain; }
.vs-time-app-icon--code{ background: #087dd0; color: #fff; font-size: 19px; }
.vs-time-app-icon--chrome{ background: conic-gradient(#e8453c 0 33%, #f6c53d 33% 66%, #30a75a 66%); color: #2288d1; font-size: 12px; }
.vs-time-app-icon--other{ background: #344154; color: #aebacf; font-size: 15px; letter-spacing: -2px; }
.vs-time-app-icon--station{ background: #5f26e8; }
.vs-time-app time,.vs-time-app b{ color: #d9e0e9; font-weight: 400; white-space: nowrap; }
.vs-time-app > i{ height: 9px; overflow: hidden; border-radius: 8px; background: #303136; }
.vs-time-app > i::before{ display: block; width: var(--bar); height: 100%; border-radius: inherit; background: var(--bar-color); content: ''; }
.vs-time-app b{ text-align: right; }
.vs-time-view-all{ display: block; margin-top: 5px; color: #98a3ff; text-align: right; }
.vs-time-chart-wrap{ display: flex; flex: 1; align-items: center; justify-content: space-around; gap: 14px; min-height: 170px; }
.vs-time-chart{ display: grid; flex: none; place-items: center; width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#9165ff 0 42%, #39bdf7 42% 60%, #41d8ac 60% 74%, #fa6197 74% 84%, #ffba4a 84% 92%, #8795a8 92% 100%); }
.vs-time-chart > div{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 99px; height: 99px; border-radius: 50%; background: #202021; }
.vs-time-chart strong{ font-size: 13px; }
.vs-time-chart span{ color: #d2dae5; font-size: 10px; }
.vs-time-legend{ display: grid; flex: 1; gap: 9px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.vs-time-legend li{ display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.vs-time-legend i{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.vs-time-legend b{ margin-left: auto; font-weight: 400; }
.vs-time-timeline{ position: relative; padding-bottom: 10px; }
.vs-time-timeline .vs-time-panel-heading{ margin-bottom: 8px; }
.vs-time-timeline .vs-time-panel-heading > div:first-child{ display: flex; flex-direction: column; gap: 3px; }
.vs-time-timeline .vs-time-panel-heading small{ color: #b8c5d8; font-size: 10px; font-weight: 400; }
.vs-time-timeline-date{ display: flex; align-items: center; gap: 5px; }
.vs-time-timeline-date span{ display: grid; place-items: center; min-height: 28px; padding: 5px 8px; border-radius: 7px; background: #242426; color: #e2e8f2; font-size: 10px; }
.vs-time-timeline-date span:first-child,.vs-time-timeline-date span:last-child{ width: 28px; font-size: 17px; }
.vs-time-screens{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(108px, 1fr); gap: 6px; overflow-x: auto; scrollbar-width: thin; scroll-behavior: smooth; }
.vs-time-screen{ min-width: 0; padding: 6px; border: 1px solid #303136; border-radius: 7px; background: #242426; }
.vs-time-screen-time{ display: block; margin-bottom: 7px; color: #dce3ec; font-size: 9px; white-space: nowrap; }
.vs-time-screen-bar{ position: relative; height: 5px; margin: 0 30px 8px 0; border-radius: 3px; background: #303136; }
.vs-time-screen-bar::before{ display: block; width: var(--screen-progress); height: 100%; border-radius: inherit; background: var(--screen-color); content: ''; }
.vs-time-screen-bar strong{ position: absolute; top: -5px; left: calc(100% + 5px); color: var(--screen-color); font-size: 10px; font-weight: 700; }
.vs-time-screen-image{ position: relative; height: 66px; overflow: hidden; border-radius: 4px; background: #303136; }
.vs-time-screen-image > img:first-child{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vs-time-screen-image .vs-time-screen-avatar{ position: absolute; right: 2px; bottom: 2px; width: 25px; height: 25px; border: 2px solid #ced8e5; border-radius: 50%; background: #242426; object-fit: cover; }
.vs-time-screen-app{ display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #dce3ec; font-size: 9px; white-space: nowrap; }
.vs-time-screen-app .vs-time-app-icon{ width: 17px; height: 17px; font-size: 14px; }
.vs-time-scroll-button{ position: absolute; z-index: 1; top: 61%; display: grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 50%; background: #3a3b40; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.vs-time-scroll-button--prev{ left: -19px; }
.vs-time-scroll-button--next{ right: -19px; }
.vs-time-scroll-button:focus-visible{ outline: 2px solid #a6a5ff; outline-offset: 2px; }
.vs-calendar-shell{ width: 100%; max-width: 1200px; aspect-ratio: 16 / 9; border-radius: 18px; background: #111a25; }
.vs-calendar-stage{ width: 1200px; height: 675px; overflow: hidden; border: 1px solid #2b3948; border-radius: 18px; background: #111a25; color: #f3f6fc; font: 13px inter, Arial, sans-serif; }
.vs-calendar-stage,.vs-calendar-stage *{ box-sizing: border-box; }
.vs-calendar-topbar{ display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 14px 16px; border-bottom: 1px solid #2b3948; }
.vs-calendar-brand,.vs-calendar-toolbar{ display: flex; align-items: center; }
.vs-calendar-brand{ gap: 14px; }
.vs-calendar-brand-icon{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: #352a84; color: #fff; font-size: 30px; }
.vs-calendar-brand strong,.vs-calendar-brand small{ display: block; }
.vs-calendar-brand strong{ margin-bottom: 3px; font-size: 24px; }
.vs-calendar-brand small{ color: #b7c1d0; font-size: 13px; }
.vs-calendar-toolbar{ gap: 12px; }
.vs-calendar-toolbar > span{ display: grid; place-items: center; height: 42px; padding: 0 14px; border: 1px solid #263443; border-radius: 9px; background: #1b2734; font-size: 15px; white-space: nowrap; }
.vs-calendar-toolbar .vs-calendar-nav{ font-size: 28px; line-height: 1; }
.vs-calendar-toolbar .vs-calendar-schedule{ border-color: transparent; background: #6042f3; font-weight: 700; }
.vs-calendar-content{ display: grid; grid-template-columns: 208px minmax(0, 1fr); height: 599px; }
.vs-calendar-sidebar{ border-right: 1px solid #293746; background: #121b26; }
.vs-calendar-month{ display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 13px; font-size: 14px; }
.vs-calendar-month span{ font-size: 22px; }
.vs-calendar-mini-grid{ display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 8px; text-align: center; }
.vs-calendar-mini-weekdays{ align-items: center; height: 31px; color: #b1bdce; font-size: 12px; }
.vs-calendar-mini-dates{ grid-auto-rows: 31px; align-items: center; }
.vs-calendar-mini-dates span{ display: grid; place-items: center; width: 29px; height: 29px; margin: auto; border-radius: 50%; }
.vs-calendar-mini-dates .is-muted{ color: #8997aa; }
.vs-calendar-mini-dates .is-today,.vs-calendar-day-today{ background: #6447f5; color: #fff; }
.vs-calendar-list{ margin-top: 14px; padding: 16px 13px; border-top: 1px solid #293746; }
.vs-calendar-list-title{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 15px; }
.vs-calendar-list-title span{ font-size: 22px; }
.vs-calendar-list > div:not(.vs-calendar-list-title){ display: flex; align-items: center; gap: 10px; margin: 0 0 13px; font-size: 13px; }
.vs-calendar-list i{ display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--calendar-color); color: #fff; font-size: 13px; font-style: normal; }
.vs-calendar-main{ min-width: 0; }
.vs-calendar-days{ display: grid; grid-template-columns: 68px repeat(6, minmax(0, 1fr)); height: 64px; border-bottom: 1px solid #293746; color: #c9d2e1; text-align: center; }
.vs-calendar-days > div{ display: flex; justify-content: center; flex-direction: column; gap: 4px; border-right: 1px solid #263443; font-size: 13px; }
.vs-calendar-days strong{ color: #e9eef8; font-size: 16px; font-weight: 500; }
.vs-calendar-days .vs-calendar-timezone{ justify-content: flex-end; padding-bottom: 6px; color: #aab6c5; font-size: 10px; }
.vs-calendar-day-today{ display: grid; place-items: center; width: 31px; height: 31px; margin: -5px auto; border-radius: 50%; }
.vs-calendar-week-body{ position: relative; display: grid; grid-template-columns: 68px repeat(6, minmax(0, 1fr)); height: 535px; overflow: hidden; }
.vs-calendar-hours,.vs-calendar-day-column{ position: relative; min-width: 0; border-right: 1px solid #263443; background: repeating-linear-gradient(to bottom, transparent 0 49px, #263443 50px); }
.vs-calendar-hours{ display: grid; grid-template-rows: repeat(10, 50px); padding-right: 10px; color: #b9c4d2; text-align: right; }
.vs-calendar-hours span{ padding-top: 11px; }
.vs-calendar-day-column.is-selected-day{ box-shadow: inset 1px 0 #6546ef, inset -1px 0 #6546ef; }
.vs-calendar-event{ position: absolute; top: var(--event-top); right: 4px; left: 4px; height: var(--event-height); overflow: hidden; padding: 9px 8px; border-left: 5px solid var(--event-accent); border-radius: 5px; background: var(--event-background); color: #f8faff; font-size: 11px; }
.vs-calendar-event strong,.vs-calendar-event span,.vs-calendar-event small{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-calendar-event strong{ margin-bottom: 6px; font-size: 12px; }
.vs-calendar-event small{ margin-top: 7px; font-size: 10px; }
.vs-calendar-event.is-muted{ --event-accent:#8a9bad; --event-background:linear-gradient(110deg,#354354,#25313f); color: #d4dce7; }
.vs-calendar-event.is-blue{ --event-accent:#2198ed; --event-background:linear-gradient(110deg,#105aa5,#124475); }
.vs-calendar-event.is-green{ --event-accent:#22cf8c; --event-background:linear-gradient(110deg,#086747,#104d40); }
.vs-calendar-event.is-purple{ --event-accent:#bd80f8; --event-background:linear-gradient(110deg,#493096,#30246c); }
.vs-calendar-event.is-pink{ --event-accent:#e64a99; --event-background:linear-gradient(110deg,#8b2b64,#572849); }
.vs-calendar-event.is-indigo{ --event-accent:#8271fb; --event-background:linear-gradient(110deg,#4b3da1,#2e2d70); }
.vs-calendar-event.is-orange{ --event-accent:#f59636; --event-background:linear-gradient(110deg,#804c26,#694326); }
.vs-calendar-event.is-selected-event{ outline: 1px solid #a898ff; }
.vs-calendar-now-line{ position: absolute; z-index: 2; top: 217px; right: 0; left: 0; height: 1px; background: #ef425d; }
.vs-calendar-now-line span{ position: absolute; top: -10px; left: 2px; padding: 2px 5px; border-radius: 4px; background: #192530; color: #ff5069; font-size: 11px; font-weight: 700; }
.vs-calendar-meeting-card{ position: absolute; z-index: 3; top: 155px; left: 352px; width: 340px; padding: 18px; border: 1px solid #8293a8; border-radius: 14px; background: linear-gradient(145deg,#1a2633,#121d29); box-shadow: 0 22px 55px rgba(0,0,0,.45); }
.vs-calendar-meeting-card-head,.vs-calendar-attendees,.vs-calendar-notetaker,.vs-calendar-meeting-actions{ display: flex; align-items: center; }
.vs-calendar-meeting-card-head{ justify-content: space-between; }
.vs-calendar-meeting-card-head span:first-child{ display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #6249f5; }
.vs-calendar-meeting-card-head span:last-child{ font-size: 23px; }
.vs-calendar-meeting-card h3{ margin: 8px 0 14px; font-size: 18px; }
.vs-calendar-meeting-card p{ margin: 9px 0; color: #c3cddc; font-size: 12px; line-height: 1.4; }
.vs-calendar-meeting-card em{ padding: 4px 8px; border-radius: 6px; background: #2a3646; color: #e1e8f3; font-style: normal; }
.vs-calendar-attendees{ gap: 0; margin: 13px 0; }
.vs-calendar-attendees img,.vs-calendar-attendees span{ width: 29px; height: 29px; margin-right: -5px; border: 2px solid #d8e0e9; border-radius: 50%; object-fit: cover; }
.vs-calendar-attendees span{ display: grid; place-items: center; margin-left: 5px; border: 0; background: #4d5c71; font-size: 11px; }
.vs-calendar-meeting-card .vs-calendar-description{ margin: 9px 0 14px; font-size: 13px; line-height: 1.5; }
.vs-calendar-notetaker{ gap: 9px; padding: 11px 8px; border-top: 1px solid #2d3948; border-bottom: 1px solid #2d3948; }
.vs-calendar-notetaker > span{ display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #4737a8; font-size: 19px; }
.vs-calendar-notetaker div{ flex: 1; }
.vs-calendar-notetaker strong,.vs-calendar-notetaker small{ display: block; }
.vs-calendar-notetaker small{ margin-top: 3px; color: #aebaca; }
.vs-calendar-notetaker i{ width: 32px; height: 17px; border-radius: 15px; background: #6448f4; }
.vs-calendar-notetaker i::after{ display: block; width: 13px; height: 13px; margin: 2px 2px 2px auto; border-radius: 50%; background: #fff; content: ''; }
.vs-calendar-meeting-actions{ gap: 10px; margin-top: 12px; }
.vs-calendar-meeting-actions span{ display: grid; flex: 1; place-items: center; min-height: 40px; padding: 7px; border-radius: 8px; background: #263342; font-weight: 700; white-space: nowrap; }
.vs-calendar-meeting-actions span:first-child{ flex: 1.4; background: #6242f4; }
.vs-calendar-meeting-actions span:last-child{ flex: 0 0 42px; font-size: 19px; }
.vs-meetings-light .vs-hero-scaled-stage{ border-color: #e4e7ec; box-shadow: 0 20px 50px rgba(99, 102, 241, .12); }
.vs-meetings-light [class~="bg-[#1c1c1d]"],.vs-meetings-light [class~="bg-[#202021]"]{ background-color: #fff; }
.vs-meetings-light [class~="bg-[#26272a]"],.vs-meetings-light [class~="bg-[#232427]"],.vs-meetings-light [class~="bg-[#2a2b30]"]{ background-color: #f2f4fa; }
.vs-meetings-light [class~="hover:bg-[#34353b]"]:hover{ background-color: #e9ecf8; }
.vs-meetings-light [class~="bg-[#312421]"]{ background-color: #fff1ee; }
.vs-meetings-light [class~="border-[#2e2f33]"],.vs-meetings-light [class~="border-[#303136]"],.vs-meetings-light [class~="border-[#38393e]"]{ border-color: #e4e7ec; }
.vs-meetings-light [class~="border-[#3d322e]"]{ border-color: #ffd6cc; }
.vs-meetings-light [class~="text-white"]{ color: #1f2937; }
.vs-meetings-light [class~="text-[#f5f5f5]"],.vs-meetings-light [class~="text-[#d1d2d7]"],.vs-meetings-light [class~="text-[#d3d5da]"],.vs-meetings-light [class~="text-[#cfd1d6]"]{ color: #475467; }
.vs-meetings-light [class~="text-[#9ea0a8]"]{ color: #667085; }
.vs-meetings-light [class~="text-[#ffb8a9]"]{ color: #c2412d; }
.vs-meetings-light [class~="bg-[#5c47ff]"],.vs-meetings-light [class~="bg-[#ff5a48]"],.vs-meetings-light [class~="bg-gradient-to-br"]{ color: #fff; }
.vs-meetings-light [class~="bg-[#1d1f24]/80"]{ color: #fff; }
.vs-meetings-light [class~="bg-[#18191b]"]{ border-color: #e4e7ec; background-color: #e9ecf3; }
.vs-meetings-light [class~="border-[#171718]"]{ border-color: #fff; }
.vs-time-dashboard{ border-color: #e4e7ec; background: #fff; color: #1f2937; box-shadow: 0 20px 50px rgba(99, 102, 241, .12); }
.vs-time-heading > div > span,.vs-time-metric small,.vs-time-trend em,.vs-time-timeline .vs-time-panel-heading small{ color: #667085; }
.vs-time-header-actions,.vs-time-panel-heading span,.vs-time-app time,.vs-time-app b,.vs-time-chart span,.vs-time-screen-time,.vs-time-screen-app{ color: #475467; }
.vs-time-period,.vs-time-range,.vs-time-metric,.vs-time-filter,.vs-time-timeline-date span{ background: #f2f4fa; }
.vs-time-timeline-date span{ color: #344054; }
.vs-time-panel{ background: #f8f9ff; }
.vs-time-app > i,.vs-time-screen-bar,.vs-time-screen-image{ background: #e4e7ec; }
.vs-time-chart > div{ background: #fff; }
.vs-time-trend{ color: #059669; }
.vs-time-view-all{ color: #4f46e5; }
.vs-time-screen{ border-color: #e4e7ec; background: #fff; }
.vs-time-screen-image .vs-time-screen-avatar{ background: #fff; }
.vs-time-scroll-button{ border: 1px solid #d9dfeb; background: #fff; color: #475467; box-shadow: 0 2px 8px rgba(15, 23, 42, .1); }
.vs-calendar-shell,.vs-calendar-stage{ border-color: #e4e7ec; background: #fff; }
.vs-calendar-stage{ color: #1f2937; box-shadow: 0 20px 50px rgba(99, 102, 241, .12); }
.vs-calendar-topbar,.vs-calendar-sidebar,.vs-calendar-list,.vs-calendar-days{ border-color: #e4e7ec; }
.vs-calendar-sidebar{ background: #f8f9ff; }
.vs-calendar-brand small,.vs-calendar-mini-weekdays,.vs-calendar-days,.vs-calendar-days .vs-calendar-timezone,.vs-calendar-hours{ color: #667085; }
.vs-calendar-mini-dates .is-muted{ color: #98a2b3; }
.vs-calendar-toolbar > span{ border-color: #e4e7ec; background: #f2f4fa; color: #344054; }
.vs-calendar-toolbar .vs-calendar-schedule{ border-color: transparent; background: #6042f3; color: #fff; }
.vs-calendar-days > div{ border-color: #e4e7ec; }
.vs-calendar-days strong{ color: #344054; }
.vs-calendar-day-today{ color: #fff !important; }
.vs-calendar-hours,.vs-calendar-day-column{ border-color: #e4e7ec; background: repeating-linear-gradient(to bottom, transparent 0 49px, #e4e7ec 50px); }
.vs-calendar-day-column.is-selected-day{ background-color: #faf9ff; }
.vs-calendar-event{ color: #344054; }
.vs-calendar-event.is-muted{ --event-background:linear-gradient(110deg,#f2f4f7,#e9ecf2); color: #667085; }
.vs-calendar-event.is-blue{ --event-background:linear-gradient(110deg,#e7f4ff,#d5ebff); }
.vs-calendar-event.is-green{ --event-background:linear-gradient(110deg,#e5f8ee,#d2f2e3); }
.vs-calendar-event.is-purple{ --event-background:linear-gradient(110deg,#f2ebff,#e7dbff); }
.vs-calendar-event.is-pink{ --event-background:linear-gradient(110deg,#fff0f7,#fbddea); }
.vs-calendar-event.is-indigo{ --event-background:linear-gradient(110deg,#ecebff,#dedcff); }
.vs-calendar-event.is-orange{ --event-background:linear-gradient(110deg,#fff1e3,#ffe5cc); }
.vs-calendar-now-line span{ background: #fff; color: #dc3350; }
.vs-calendar-meeting-card{ border-color: #d9dfeb; background: #fff; box-shadow: 0 22px 55px rgba(52, 64, 84, .18); }
.vs-calendar-meeting-card p,.vs-calendar-notetaker small{ color: #667085; }
.vs-calendar-meeting-card em{ background: #f2f4fa; color: #344054; }
.vs-calendar-attendees span{ background: #e9ecf8; color: #475467; }
.vs-calendar-notetaker{ border-color: #e4e7ec; }
.vs-calendar-notetaker > span{ color: #fff; }
.vs-calendar-meeting-actions span{ background: #f2f4fa; color: #344054; }
.vs-calendar-meeting-actions span:first-child{ background: #6242f4; color: #fff; }
.vs-hero-still{ width: 100%; max-width: 1200px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background-color: #111827; box-shadow: 0 20px 50px rgba(15, 23, 42, .16); }
.vs-hero-still img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-hero-active-caption{ display: none; }

@media (min-width: 1024px) {
.vs-hero-section{ padding-right: 16px; padding-left: 16px; }
.vs-hero-inner{ max-width: 1400px; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
.vs-hero-showcase{ grid-template-columns: 210px minmax(0, 1fr); gap: 12px; padding: 10px; }
.vs-hero-sidebar{ padding-right: 8px; }
.vs-hero-feature-row{ min-height: 35px; }
.vs-hero-feature-copy small{ display: none; }
.vs-hero-tab-btn{ gap: 8px; padding-left: 5px; }
.vs-hero-tab-btn svg{ width: 20px; height: 20px; }
.vs-hero-select-btn{ width: 26px; height: 26px; margin-right: 2px; font-size: 18px; }
}

@media (max-width: 1023px) {
.vs-hero-showcase{ display: flex; flex-direction: column; gap: 16px; }
.vs-hero-sidebar,.vs-hero-preview{ width: 100%; }
.vs-hero-sidebar{ padding: 0; border: 0; }
.vs-hero-tabs-viewport{ position: relative; width: 100%; }
.vs-hero-tabs-viewport::before,.vs-hero-tabs-viewport::after{ position: absolute; z-index: 1; top: 0; bottom: 0; width: 18px; content: ''; pointer-events: none; backdrop-filter: blur(2px); }
.vs-hero-tabs-viewport::before{ left: 0; background: linear-gradient(to right, rgba(255,255,255,.92), rgba(255,255,255,0)); -webkit-mask-image: linear-gradient(to right, #000, transparent); mask-image: linear-gradient(to right, #000, transparent); }
.vs-hero-tabs-viewport::after{ right: 0; background: linear-gradient(to left, rgba(255,255,255,.92), rgba(255,255,255,0)); -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); }
.vs-hero-feature-list{ flex-direction: row; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.vs-hero-feature-list::-webkit-scrollbar{ display: none; }
.vs-hero-feature-row{ position: relative; flex: 0 0 92px; min-width: 0; height: 76px; border: 1px solid #e5e7eb; background: #fff; scroll-snap-align: start; }
.vs-hero-tab-btn{ flex-direction: column; justify-content: center; gap: 5px; height: 100%; padding: 7px 5px; text-align: center; }
.vs-hero-tab-btn svg{ width: 21px; height: 21px; }
.vs-hero-feature-copy strong{ display: -webkit-box; max-height: 2.4em; overflow: hidden; font-size: 11px; line-height: 1.2; text-overflow: clip; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vs-hero-feature-copy small{ display: none; }
.vs-hero-select-btn{ position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; margin: 0; font-size: 14px; }
.vs-hero-select-btn svg{ width: 14px; height: 14px; }
.vs-hero-selection-cta{ width: fit-content; margin-left: auto; }
}

@media (max-width: 767px) {
.vs-hero-showcase{ gap: 14px; padding: 10px; }
.vs-hero-sidebar{ display: contents; }
.vs-hero-tabs-viewport{ order: 1; }
.vs-hero-tabs-viewport::before,.vs-hero-tabs-viewport::after{ bottom: 22px; width: 18px; backdrop-filter: blur(2px); }
.vs-hero-tabs-viewport::after{ background: linear-gradient(to left, rgba(255,255,255,.82), rgba(255,255,255,0)); }
.vs-hero-feature-list{ gap: 6px; padding-right: 30px; padding-bottom: 3px; }
.vs-hero-feature-row{ flex-basis: 72px; height: 64px; border-radius: 10px; }
.vs-hero-tab-btn{ gap: 4px; padding: 5px 3px; }
.vs-hero-tab-btn svg{ width: 19px; height: 19px; }
.vs-hero-feature-copy strong{ max-height: 2.3em; font-size: 10px; line-height: 1.15; }
.vs-hero-swipe-hint{ display: flex; justify-content: flex-end; gap: 5px; margin: 4px 3px 0; color: #667085; font-size: 11px; font-weight: 500; line-height: 1.3; }
.vs-hero-swipe-hint span{ color: #4f46e5; font-size: 14px; line-height: 1; }
.vs-hero-select-btn{ display: none; }
.vs-hero-preview{ order: 2; }
.vs-hero-active-caption{ display: block; padding: 14px 3px 0; color: #111827; }
.vs-hero-active-caption strong{ display: block; font-size: 17px; }
.vs-hero-active-caption p{ margin: 3px 0 0; color: #667085; font-size: 14px; }
.vs-hero-selection-cta{ order: 3; width: 100%; margin: 0; }
}

@media (max-width: 639px) {
.vs-comparison-notices > div{ gap: 8px; padding: 6px 8px; }
.vs-comparison-notices > div > div:first-child{ flex: 0 0 36px; width: 36px; height: 36px; }
.vs-comparison-notices > div > div:first-child svg{ width: 20px; height: 20px; }
.vs-comparison-notices > div > div:nth-child(2) p:first-child{ font-size: 12px; line-height: 1.25; }
.vs-comparison-notices > div > div:nth-child(2) p:nth-child(2){ font-size: 11px; line-height: 1.25; }
.vs-comparison-notices--old > div > span:last-child{ height: 20px; min-width: 20px; font-size: 10px; }
.vs-comparison-notices--new > div > svg:last-child{ flex: none; width: 18px; height: 18px; }
}
.vs-detail-hero{
    padding-top: 7.25rem;
    padding-bottom: 0;
    background: linear-gradient(130deg, #F4F4FF 0%, #FFF 22.64%, #EEEBFF 49.32%, #F2F2FF 72.5%, #F3F0FF 100%);
}
.vs-detail-hero__badge{
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .04);
}
.vs-page .vs-detail-hero__badge,.vs-page .productivity-hero__badge,.productivity-visibility__badge,.project-motion__badge,.productivity-visibility__copy > .productivity-visibility__eyebrow,.project-motion__copy > .project-motion__eyebrow{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: 1px solid #e0e7ff;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.vs-page .vs-detail-hero__badge,.vs-page .productivity-hero__badge{
    padding: .5rem 1rem !important;
    background: #eef2ff !important;
}
.vs-page .vs-detail-hero__badge svg,.vs-page .productivity-hero__badge svg,.productivity-visibility__badge svg,.project-motion__badge svg{
    width: 1rem;
    height: 1rem;
}
.vs-detail-hero__title{
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
}
.vs-detail-hero__title-accent{
    display: block;
    background: linear-gradient(90deg, #635bff 0%, #7278ff 55%, #6258f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vs-detail-hero__preview{
    width: min(100%, 1200px);
    margin: 1.75rem auto 0;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, .18);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 28px 70px rgba(54, 47, 120, .18);
}
.vs-detail-hero .vs-hero-scaled-shell{
    position: relative;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    --vs-hero-scale: 1;
}
.vs-detail-hero .vs-hero-scaled-stage{
    position: absolute;
    inset: 0 auto auto 0;
    width: 1200px;
    height: 675px;
    transform-origin: top left;
    transform: scale(var(--vs-hero-scale));
}
.vs-detail-hero .vs-hero-media-frame video{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vs-detail-hero .vs-participant-tile video{
    height: 6rem;
}

@media (max-width: 640px) {
.vs-detail-hero{ padding-top: 6rem; }
.vs-detail-hero__title{ font-size: clamp(2.25rem, 11vw, 3.25rem) !important; }
.vs-detail-hero__preview{ margin-top: 2.5rem; border-radius: .875rem .875rem 0 0; }
}
body.vs-mobile-menu-open{
    overflow: hidden !important;
}
.vs-mobile-drawer{
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    justify-content: flex-end;
    max-height: none !important;
    background: rgba(15, 23, 42, 0);
    opacity: 1 !important;
    visibility: hidden;
    transition: background-color 240ms ease, visibility 240ms ease;
}
.vs-mobile-drawer.hidden{
    display: none !important;
}
.vs-mobile-drawer.is-open{
    background: rgba(15, 23, 42, 0.28);
    visibility: visible;
}
.vs-mobile-drawer__panel{
    width: min(100%, 30rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -18px 0 45px rgba(15, 23, 42, 0.16);
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(.22, .8, .32, 1);
}
.vs-mobile-drawer.is-open .vs-mobile-drawer__panel{
    transform: translateX(0);
}
.vs-mobile-drawer__header{
    min-height: 4rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.vs-mobile-drawer__brand{
    min-width: 0;
    display: flex;
    align-items: center;
}
.vs-mobile-drawer__brand img{
    width: auto;
    max-width: 10.5rem;
    max-height: 2.5rem;
}
.vs-mobile-drawer__header-actions{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.vs-mobile-drawer__signup{
    min-height: 0;
    padding: 0.375rem 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 12px;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 10px 20px -10px rgba(79, 70, 229, 0.45);
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
.vs-mobile-drawer__signup:hover,.vs-mobile-drawer__signup:focus-visible{
    background: linear-gradient(90deg, #4338ca, #6d28d9);
    color: #fff;
    box-shadow: 0 14px 24px -10px rgba(79, 70, 229, 0.55);
    transform: translateY(-2px);
    outline: none;
}
.vs-mobile-drawer__close{
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    border-radius: 50%;
}
.vs-mobile-drawer__close:hover,.vs-mobile-drawer__close:focus-visible{
    background: #f3f4f6;
    outline: none;
}
.vs-mobile-drawer__close svg{
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}
.vs-mobile-drawer__content{
    min-height: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.vs-mobile-drawer__view{
    display: none;
    padding: 1rem 1rem 1.5rem;
    animation: vs-mobile-view-in 180ms ease both;
}
.vs-mobile-drawer__view.is-active{
    display: block;
}
.vs-mobile-drawer__primary-links{
    display: flex;
    flex-direction: column;
}
.vs-mobile-drawer__primary-link{
    width: 100%;
    min-height: 3.25rem;
    padding: 0.625rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #171717;
    border-radius: 0.6rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}
.vs-mobile-drawer__primary-link:hover,.vs-mobile-drawer__primary-link:focus-visible{
    color: #6366f1;
    background: #f8f7ff;
    outline: none;
}
.vs-mobile-drawer__chevron{
    color: #6366f1;
    font-size: 1.65rem;
    font-weight: 300;
    line-height: 1;
}
.vs-mobile-drawer__feature-groups{
    display: grid;
    gap: 1.25rem;
}
.vs-mobile-drawer__feature-group h3{
    margin: 0 0 0.4rem;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.vs-mobile-drawer__feature-link{
    min-height: 2.75rem;
    padding: 0.45rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #171717;
    border-radius: 0.55rem;
    font-size: 0.95rem;
    font-weight: 500;
}
.vs-mobile-drawer__feature-link:hover,.vs-mobile-drawer__feature-link:focus-visible{
    color: #6366f1;
    background: #f8f7ff;
    outline: none;
}
.vs-mobile-drawer__feature-icon{
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.42rem;
    background: var(--product-icon-color, #6366f1);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 2px 5px rgba(31,41,55,.1);
    font-size: 1rem;
}
.vs-mobile-drawer__feature-icon svg{
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.vs-mobile-drawer__footer{
    padding: 0.75rem 1rem max(1rem, env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7eb;
    background: #fff;
}
.vs-mobile-drawer__footer-action{
    width: 100%;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 1rem;
    font-weight: 500;
}
.vs-mobile-drawer__footer-action[hidden]{
    display: none !important;
}
.vs-mobile-drawer__footer-action:hover,.vs-mobile-drawer__footer-action:focus-visible{
    background: #e9e7ff;
    color: #4f46e5;
    outline: none;
}

@keyframes vs-mobile-view-in {
    from { opacity: 0; transform: translateX(0.75rem); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 480px) {
.vs-mobile-drawer__header{
        min-height: 4rem;
        padding-inline: 0.75rem;
        gap: 0.5rem;
    }
.vs-mobile-drawer__brand img{
        max-width: 8rem;
        max-height: 2.25rem;
    }
.vs-mobile-drawer__signup{
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
.vs-mobile-drawer__header-actions{
        gap: 0.35rem;
    }
.vs-mobile-drawer__primary-link{
        min-height: 3.25rem;
        font-size: 1rem;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
.vs-mobile-drawer__header,.vs-mobile-drawer__view,.vs-mobile-drawer__footer{
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
.vs-mobile-drawer__signup{
        padding-right: 0.625rem;
        padding-left: 0.625rem;
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
.vs-mobile-drawer{
        display: none !important;
    }
}