/* Vosh download page. A feature tour built from real screenshots. Colors
   resolve through the site tokens, so every scheme recolors it. */

.vosh-page {
    --v-gap: clamp(88px, 11vw, 160px);
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(8px, 3vw, 40px) 0 clamp(32px, 5vw, 64px);
    box-sizing: border-box;
    color: var(--text);
}

/* Screenshots carry their own transparent window corners, so the shadow
   follows the image's alpha instead of a box radius. */
.vosh-page .vs {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.16))
            drop-shadow(0 22px 44px rgba(0, 0, 0, 0.5));
}
.vosh-page figure { margin: 0; }
.vosh-page code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--bg-hover);
    color: var(--text-bright);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Buttons */
.vosh-page .vbtn {
    box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 20px 0 17px; border-radius: 10px;
    background: var(--highlight); color: var(--bg-body);
    font-size: 15px; line-height: 20px; font-weight: 600;
    text-decoration: none;
}
.vosh-page .vbtn:hover { background: var(--highlight-hover); color: var(--bg-body); }
.vosh-page .vbtn:focus-visible,
.vosh-page .vlink:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; }
.vosh-page .vlink { font-size: 15px; font-weight: 600; color: var(--link); }
.vosh-page .vlink:hover { color: var(--link-hover); }

/* Hero */
.vosh-page .vh h1 {
    margin: 0; max-width: 17ch;
    font-size: clamp(38px, 5.6vw, 66px); line-height: 1.02;
    font-weight: 600; letter-spacing: -0.035em;
    color: var(--text-bright);
}
.vosh-page .vh .vh-lede {
    margin: 22px 0 0; max-width: 54ch;
    font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6;
    color: var(--text);
}
.vosh-page .vh-actions {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 14px 20px; margin-top: 30px;
}
.vosh-page .vh-note { font-size: 14px; line-height: 20px; color: var(--text-fade); }
.vosh-page .vh-shot { margin-top: clamp(44px, 6vw, 72px); }

/* Shared section type */
.vosh-page .vf-where {
    margin: 0 0 12px;
    font-size: 13px; line-height: 18px; font-weight: 500;
    color: var(--highlight);
}
.vosh-page .vf h2,
.vosh-page .vc h2,
.vosh-page .va h2,
.vosh-page .vp h2,
.vosh-page .vt h2,
.vosh-page .vend h2 {
    margin: 0; max-width: 20ch;
    font-size: clamp(26px, 3vw, 36px); line-height: 1.12;
    font-weight: 600; letter-spacing: -0.025em;
    color: var(--text-bright);
}
.vosh-page .vf-text p,
.vosh-page .vc-head p,
.vosh-page .va-head p,
.vosh-page .vt-head p,
.vosh-page .vend p {
    margin: 16px 0 0; max-width: 48ch;
    font-size: 16px; line-height: 1.65;
    color: var(--text);
}
.vosh-page .vf-text p + p { margin-top: 12px; }

/* Feature rows: copy beside a shot, sides alternating */
.vosh-page .vf {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-top: var(--v-gap);
}
.vosh-page .vf-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.vosh-page .vf-flip .vf-text { order: 2; }
.vosh-page .vf-stack { display: grid; gap: 28px; }

.vosh-page .vf-clients {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 22px 0 0; padding: 0; list-style: none;
}
.vosh-page .vf-clients li {
    padding: 5px 12px;
    border: 1px solid var(--border-hover); border-radius: 999px;
    font-size: 14px; line-height: 20px; color: var(--text-bright);
}

/* Presets compare: the page's one interactive showpiece */
.vosh-page .vc {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-top: var(--v-gap);
}
.vosh-page .vc-compare {
    --pos: 50%;
    position: relative;
    margin-top: 28px;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.16))
            drop-shadow(0 22px 44px rgba(0, 0, 0, 0.5));
    touch-action: pan-y;
}
.vosh-page .vc-img { display: block; width: 100%; height: auto; }
.vosh-page .vc-on {
    position: absolute; inset: 0;
    clip-path: inset(0 0 0 var(--pos));
}
.vosh-page .vc-tag {
    position: absolute; bottom: calc(100% + 10px);
    font-size: 13px; line-height: 18px; font-weight: 500;
    color: var(--text-dim);
    pointer-events: none;
}
.vosh-page .vc-tag-off { left: 2px; }
.vosh-page .vc-tag-on { right: 2px; color: var(--highlight); }
.vosh-page .vc-handle {
    position: absolute; top: 0; bottom: 0; left: var(--pos);
    width: 2px; margin-left: -1px;
    background: var(--highlight);
    pointer-events: none;
}
.vosh-page .vc-handle::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 36px; height: 36px; margin: -18px 0 0 -18px;
    border-radius: 50%;
    background: var(--highlight)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23090E13' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 6 3.5 10l4 4'/%3E%3Cpath d='M12.5 6l4 4-4 4'/%3E%3C/svg%3E")
        center / 20px no-repeat;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.vosh-page .vc-range {
    position: absolute; inset: 0;
    width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: ew-resize;
}
.vosh-page .vc-compare:has(.vc-range:focus-visible) {
    outline: 2px solid var(--highlight); outline-offset: 6px; border-radius: 14px;
}
.vosh-page .vc-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* Automation tabs */
.vosh-page .va { margin-top: var(--v-gap); }
.vosh-page .va-head { max-width: 640px; }
.vosh-page .va-tabs {
    display: inline-flex; gap: 4px;
    margin-top: 28px; padding: 4px;
    border-radius: 12px;
    background: var(--bg-panel);
    box-shadow: inset 0 0 0 1px var(--border);
}
.vosh-page .va-tabs button {
    min-height: 40px; padding: 0 18px;
    border: 0; border-radius: 9px;
    background: transparent; color: var(--text-dim);
    font: inherit; font-size: 15px; font-weight: 500;
    cursor: pointer;
}
.vosh-page .va-tabs button:hover { color: var(--text-bright); }
.vosh-page .va-tabs button[aria-selected="true"] {
    background: var(--bg-active); color: var(--text-bright);
}
.vosh-page .va-tabs button:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }
.vosh-page .va-panel {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-top: 32px;
}
.vosh-page .va-panel[hidden] { display: none; }
.vosh-page .va-points { margin: 0; padding: 0; list-style: none; }
.vosh-page .va-points li {
    padding: 18px 0;
    border-top: 1px solid var(--border);
    font-size: 15px; line-height: 1.6; color: var(--text);
}
.vosh-page .va-points li:last-child { border-bottom: 1px solid var(--border); }
.vosh-page .va-points strong {
    display: block; margin-bottom: 4px;
    font-size: 16px; font-weight: 600; color: var(--text-bright);
}

/* Your prompt: tabs, then the three places it can show */
.vosh-page .vp { margin-top: var(--v-gap); }
.vosh-page .vp-modes { margin-top: clamp(48px, 6vw, 80px); }
.vosh-page .vp-modes-cap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 40px;
    margin-top: 26px;
}
.vosh-page .vp-modes-cap h3 {
    margin: 0;
    font-size: 16px; line-height: 24px; font-weight: 600;
    color: var(--text-bright);
}
.vosh-page .vp-modes-cap p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--text); }

/* Themes */
.vosh-page .vt { margin-top: var(--v-gap); }
.vosh-page .vt-head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 48px); }

/* Closing download */
.vosh-page .vend {
    margin-top: var(--v-gap);
    padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 64px);
    border-radius: 20px;
    background: var(--bg-panel);
    box-shadow: inset 0 0 0 1px var(--border);
    text-align: center;
}
.vosh-page .vend h2 { margin: 0 auto; max-width: 26ch; text-wrap: balance; }
.vosh-page .vend p { margin-left: auto; margin-right: auto; }
.vosh-page .vend-actions { justify-content: center; }

/* Platforms, help and changelog */
.vosh-page .vd { max-width: 720px; margin-top: clamp(56px, 7vw, 88px); }
.vosh-page .vd-release { margin: 0 0 14px; font-size: 13px; color: var(--text-dim); }
.vosh-page .vd-release a { color: var(--text-dim); }
.vosh-page .vd-release a:hover { color: var(--text-bright); }
.vosh-page .vd-foot {
    margin: clamp(40px, 5vw, 64px) 0 0; padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 13px; line-height: 20px; color: var(--text-fade);
}

@media (max-width: 900px) {
    .vosh-page .vf,
    .vosh-page .vf-flip,
    .vosh-page .vc,
    .vosh-page .va-panel { grid-template-columns: minmax(0, 1fr); }
    .vosh-page .vf-flip .vf-text { order: 0; }
    .vosh-page .va-tabs { display: flex; }
    .vosh-page .vp-modes-cap { grid-template-columns: minmax(0, 1fr); }
    .vosh-page .va-tabs button { flex: 1; padding: 0 8px; }
}