/* landing_v2.css — chrome the STBM v2 marketing landing needs beyond the inline
 * layout styles carried verbatim from the Claude Design source: base reset,
 * the streamwave headline keyframe, real :hover states (the design authored
 * style-hover attributes that only the design runtime understood), responsive
 * behaviour, and a prefers-reduced-motion fallback.
 *
 * Inline style="..." attributes carry the per-element layout (allowed by the
 * landing CSP style-src 'unsafe-inline'); this stylesheet only adds behaviour
 * that inline attributes cannot express (keyframes, pseudo-classes, media
 * queries). Responsive/hover overrides use !important because they must win
 * over the element's own inline style. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
canvas { image-rendering: pixelated; display: block; }
a { text-decoration: none; color: inherit; }
::selection { background: #E8542B; color: #fff; }
input::placeholder { color: #A39E93; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

@keyframes streamwave {
  0%   { background-position: 250% 0, -120% 0, 0 0; }
  100% { background-position: -250% 0, 340% 0, 0 0; }
}

/* ---- hover states (replacing the design's style-hover attributes) ---- */
.hv-ink:hover { color: #191817 !important; }
.hv-getstarted:hover { background: #33312C !important; }
.hv-cta:hover { background: #C8421E !important; }
.hv-white-cta:hover { background: #FFE9E0 !important; }
.hv-underline:hover { border-color: #191817 !important; }
.hv-card:hover { border-color: #4A463F !important; }
.hv-footer:hover { color: #F4F1EB !important; }
.hv-ann:hover { border-color: #fff !important; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .v2-nav-links { display: none !important; }
  .v2-people-grid { grid-template-columns: 1fr !important; }
  .v2-an-body { grid-template-columns: 1fr !important; }
  .v2-automations-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .v2-automations-sticky { position: static !important; }
  .v2-cta-grid { grid-template-columns: 1fr !important; }
  .v2-cta-canvas-wrap { display: none !important; }
  .v2-footer-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 720px) {
  .v2-hero-title { font-size: 40px !important; }
  .v2-pricing-grid { grid-template-columns: 1fr !important; }
  .v2-kanban-grid { grid-template-columns: 1fr 1fr !important; }
  /* wide app-mock tables/rows scroll inside their own container */
  .v2-scroll-x { overflow-x: auto !important; }
  .v2-scroll-x > * { min-width: 640px; }
  .v2-an-kpis { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .v2-hero-title { font-size: 32px !important; }
  .v2-footer-grid { grid-template-columns: 1fr !important; }
  .v2-kanban-grid { grid-template-columns: 1fr !important; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .v2-hero-title {
    animation: none !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #191817 !important;
    color: #191817 !important;
  }
  * { transition: none !important; }
}