/* Shared styles for Visio Studio sub-pages (about, faq, legal, 404).
   Tokens mirror index.html so every page reads as one site. */
:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --border: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
}
.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --border: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.text-muted-foreground { color: var(--muted-foreground); }

.animate-fade-in-up { animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Top bar */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in oklch, var(--background) 82%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.site-nav a { color: var(--muted-foreground); transition: color .2s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--foreground); }

/* Long-form legal / prose */
.prose-vs { max-width: 46rem; line-height: 1.75; color: var(--muted-foreground); }
.prose-vs h2 {
    color: var(--foreground); font-weight: 400; font-size: 1.5rem;
    margin: 3rem 0 1rem; scroll-margin-top: 5rem;
}
.prose-vs h3 { color: var(--foreground); font-weight: 500; font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.prose-vs p, .prose-vs ul, .prose-vs ol { margin: 0 0 1rem; }
.prose-vs ul { list-style: disc; padding-left: 1.25rem; }
.prose-vs ol { list-style: decimal; padding-left: 1.25rem; }
.prose-vs li { margin: .35rem 0; }
.prose-vs strong { color: var(--foreground); font-weight: 500; }
.prose-vs a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.prose-vs a:hover { text-decoration-color: var(--foreground); }
.prose-vs table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0 0 1.25rem; }
.prose-vs th, .prose-vs td { text-align: left; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose-vs th { color: var(--foreground); font-weight: 500; }
.table-scroll { overflow-x: auto; }

.toc a { color: var(--muted-foreground); }
.toc a:hover { color: var(--foreground); }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.25rem 0; font-size: 1.05rem; color: var(--foreground);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); color: var(--muted-foreground); flex-shrink: 0; }
.faq-item[open] summary .chev { transform: rotate(45deg); }
.faq-item .answer { padding: 0 0 1.25rem; color: var(--muted-foreground); line-height: 1.75; max-width: 42rem; }
.faq-item .answer a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }

.card-vs { border: 1px solid var(--border); border-radius: .5rem; transition: border-color .5s, box-shadow .5s; }
.card-vs:hover { border-color: color-mix(in oklch, var(--muted-foreground) 50%, transparent); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .08); }
.pill { padding: .25rem .75rem; font-size: .75rem; border: 1px solid var(--border); border-radius: 9999px; }

.site-footer a { color: var(--muted-foreground); transition: color .2s; }
.site-footer a:hover { color: var(--foreground); }

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up { animation: none; }
    html { scroll-behavior: auto; }
}