/* ===========================================================
   SMARTvoice v2: landing page + book a demo
   Layout/colour live in inline styles on the elements (carried
   over verbatim from the approved Claude Design comp). This file
   supplies only what inline styles cannot express: base document
   styles, keyframes, hover/focus states, and responsive rules.
   =========================================================== */

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #16273a;
  -webkit-font-smoothing: antialiased;
}

/* In-page jumps to the demo form must clear the sticky header (60px tall,
   51px at narrow widths) rather than landing underneath it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body.sv2-body-landing { background: #fff; }
body.sv2-body-demo { background: #f4f8fc; }

a { color: #1159a2; }
a:hover { color: #0c4278; }
::selection { background: #cfe0f2; }

*, *::before, *::after { box-sizing: border-box; }

/* ===== KEYFRAMES ===== */
@keyframes svFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes svPulseRing {
  0%   { transform: scale(1);    opacity: .55; }
  80%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

@keyframes svPhoneRing {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(-14deg); }
  93% { transform: rotate(12deg); }
  96% { transform: rotate(-8deg); }
  98% { transform: rotate(5deg); }
}

@keyframes svFaqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== HOVER / FOCUS STATES ===== */
.sv2-back:hover { text-decoration: underline; }

/* Wordmark colour is set inline, so the hover needs to outrank it. */
.sv2-wordmark-link:hover .sv2-wordmark { color: #0c4278 !important; }

.sv2-btn-white:hover {
  background: #eaf2fb;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(4, 26, 49, 0.4);
}

.sv2-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(17, 89, 162, 0.12);
}

.sv2-stat:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.14);
}

.sv2-faq-q:hover { background: #f4f8fc; }

.sv2-input:focus {
  outline: 2px solid #1159a2;
  outline-offset: 1px;
  border-color: #1159a2;
}

.sv2-submit:hover {
  background: #0c4278;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 89, 162, 0.3);
}

/* Keyboard focus should be as obvious as mouse hover. */
.sv2-btn-white:focus-visible,
.sv2-submit:focus-visible,
.sv2-faq-q:focus-visible {
  outline: 3px solid #1159a2;
  outline-offset: 2px;
}

.sv2-btn-white:focus-visible { outline-color: #fff; }

/* ===== RESPONSIVE =====
   The comp is authored at desktop width with fixed type sizes;
   these rules scale it down without altering the desktop design. */
@media (max-width: 900px) {
  .sv2-hero { padding: 64px 24px 56px !important; }
  .sv2-hero h1 { font-size: 40px !important; letter-spacing: -1px !important; }
  .sv2-hero-eyebrow { font-size: 24px !important; margin-bottom: 16px !important; }
  .sv2-hero p { font-size: 17px !important; }
  .sv2-section { padding: 56px 24px !important; }
  .sv2-section h2 { font-size: 28px !important; letter-spacing: -0.5px !important; }
  .sv2-split { gap: 40px !important; }
  .sv2-quote { font-size: 20px !important; }
  .sv2-cta h2 { font-size: 30px !important; }
  .sv2-demo-section { padding: 48px 24px 64px !important; }
  .sv2-demo-section h1 { font-size: 30px !important; }
  .sv2-demo-grid { gap: 32px !important; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 72px; }
  .sv2-header-inner { padding: 14px 20px !important; }
  .sv2-wordmark { font-size: 22px !important; }
  .sv2-hero h1 { font-size: 32px !important; }
  .sv2-hero-eyebrow { font-size: 20px !important; margin-bottom: 14px !important; }
  .sv2-hero-ctas a { width: 100%; justify-content: center; }
  .sv2-trustbar { padding: 14px 20px !important; }
  .sv2-trustbar-inner { justify-content: flex-start !important; }
  .sv2-cta-phone {
    font-size: 17px !important;
    padding: 14px 22px !important;
    border-radius: 16px !important;
  }
  .sv2-cta-phone span[aria-hidden] { border-radius: 16px !important; }
  .sv2-form { padding: 26px 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}