/* Landing and use-case pages. Theme tokens only; logical properties so RTL works. */
.vtl-banner { padding-bottom: 44px !important; }
.vtl-banner h1 { max-width: 22ch; overflow-wrap: anywhere; }
.vtl-lead { max-width: 68ch; font-size: 1.08rem; line-height: 1.65; }
.vtl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 22px 4px; }
.vtl-cta .btn { white-space: normal; }
.vtl-cta .btn-outline-light { border-color: var(--ve-line-strong); color: var(--ve-text); }
.vtl-cta .btn-outline-light:hover { border-color: var(--ve-accent); background: var(--ve-accent-soft); color: var(--ve-text); }
.vtl-page .vt-prose { overflow-wrap: anywhere; }
.vtl-page .vt-prose h2 { font-size: 1.35rem; margin-block: 0 14px; }
.vtl-page .vt-prose h2.vtl-sec { margin-block: 28px 10px; }
.vtl-page .vt-prose h2.vtl-sec:first-child { margin-block-start: 0; }
.vtl-page .vt-prose p + p { margin-block-start: 12px; }
.vtl-page .vt-prose a:not(.btn) { color: var(--ve-accent-fg); }
.vtl-page .vt-prose a.btn-primary { color: #fff; }
.vtl-features { padding-block: 56px; }
.vtl-features .vtl-h5 { font-size: 1.07rem; font-weight: 600; margin-block-end: 6px; color: var(--ve-text-strong, #fff); }
.vtl-features p { overflow-wrap: anywhere; }
.vtl-features .col-md-4 { padding-inline: 12px; }
.vtl-features .mb-5 { margin-block-end: 2rem !important; }

.vtl-scroll { overflow-x: auto; max-width: 100%; margin-block-start: 14px; border: 1px solid var(--ve-line); border-radius: var(--ve-radius-sm); }
.vtl-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.vtl-table th, .vtl-table td { padding: 10px 14px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--ve-line); color: var(--ve-text-muted); min-width: 120px; }
.vtl-table thead th { background: var(--ve-surface-2); color: var(--ve-text); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.vtl-table tbody th { color: var(--ve-text); font-weight: 600; }
.vtl-table tbody tr:last-child th, .vtl-table tbody tr:last-child td { border-block-end: 0; }

.vtl-code { margin: 0 0 6px; padding: 14px 16px; overflow-x: auto; max-width: 100%; background: var(--ve-canvas); border: 1px solid var(--ve-line); border-radius: var(--ve-radius-sm); color: var(--ve-text); font-size: .84rem; line-height: 1.55; direction: ltr; text-align: left; }
.vtl-code code { color: inherit; background: none; white-space: pre; }

.vtl-vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-block: 14px 4px; }
.vtl-vs { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; background: var(--ve-surface); border: 1px solid var(--ve-line); border-radius: var(--ve-radius); text-decoration: none !important; transition: border-color .15s, background .15s; }
.vtl-vs:hover { border-color: var(--ve-accent); background: var(--ve-surface-2); }
.vtl-vs strong { color: var(--ve-text); font-size: .98rem; overflow-wrap: anywhere; }
.vtl-vs span { color: var(--ve-text-muted); font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.vtl-final .vtl-cta { margin-block-start: 18px; }
.vtl-page .vt-sites { margin-block-start: 6px; }

@media (max-width: 575.98px) {
    .vtl-features { padding-block: 36px; }
    .vtl-cta .btn { width: 100%; }
    .vtl-table th, .vtl-table td { min-width: 96px; padding: 8px 10px; }
}