/* ============================================================
   Viali — global tokens, base, shared nav/footer, responsive
   Tokens and base rules are verbatim from the design helmet.
   ============================================================ */

:root { --accent: #4B41E0; --bg: #F2F1ED; --ink: #16150F; --faint: #75726A; --rule: #DBD9D2; }

html, body { margin: 0; padding: 0; background: var(--bg); }
body { font-family: 'Bricolage Grotesque', sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

@keyframes vlMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Accessibility */
.screen-reader-text, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   NAV (SiteNav) — hover states + open/close behavior
   ============================================================ */
.vl-menu-btn:hover { color: var(--accent); }
.vl-nav-a:hover { color: var(--ink); }
.vl-signin:hover { color: var(--ink); }
.vl-start:hover { background: var(--accent); color: #FFFFFF; }
.vl-mega { display: none; }
.vl-mega.open { display: block; }
.vl-mega-a:hover { background: #FFFFFF; }
.vl-mega-a:hover span { color: inherit; }
.vl-promo-cta { transition: transform 0.2s ease; }
.vl-promo-cta:hover { color: #FFFFFF; transform: scale(1.03); }
.vl-promo-link:hover { color: var(--accent); }

/* Mobile nav */
.vl-burger { display: none; font: inherit; background: none; border: 1px solid var(--rule); border-radius: 100px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.vl-mobile { display: none; border-top: 1px solid var(--rule); background: var(--bg); padding: 20px 22px 30px; }
.vl-mobile.open { display: block; }
.vl-mobile .vl-m-head { font-family: 'Spline Sans Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 22px 0 10px; }
.vl-mobile a { display: block; padding: 7px 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.vl-mobile a:hover { color: var(--accent); }
.vl-mobile .vl-m-cta { display: inline-block; background: var(--ink); color: var(--bg); padding: 12px 24px; border-radius: 100px; font-weight: 600; margin-top: 18px; }
.vl-mobile .vl-m-cta:hover { background: var(--accent); color: #FFFFFF; }

@media (max-width: 900px) {
  .vl-desktop { display: none !important; }
  .vl-burger { display: inline-flex; }
}

/* ============================================================
   FOOTER (SiteFooter) — hover states
   ============================================================ */
.vf-cta { transition: transform 0.2s ease; }
.vf-cta:hover { transform: scale(1.04); color: #FFFFFF; }
.vf-trial:hover { color: #F2F1ED; }
.vf-col-a:hover { color: #FFFFFF; }
.vf-legal-a:hover { color: #F2F1ED; }

/* ============================================================
   Responsive layer — the design is desktop-first with inline
   styles; these utilities collapse fixed grids on small screens
   (same tokens, per the handoff README).
   ============================================================ */
@media (max-width: 900px) {
  .r-stack { grid-template-columns: 1fr !important; }
  .r-hide { display: none !important; }
}
@media (max-width: 720px) {
  .r-pad { padding-left: 22px !important; padding-right: 22px !important; }
  .r-stack-sm { grid-template-columns: 1fr !important; }
}