/* Landing page styles. Most layout is inline on the elements (ported from the
   design); this file holds the reset, web font, keyframes, and responsive rules. */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&display=swap');

html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
::selection { background: #dcd2f7; }
body {
  color: #1a1a18;
  background: #fff;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The scan pill: make the input + button behave like the design's readonly mock. */
.scanForm { margin: 0; }
.scanForm input { font: inherit; }
.scanForm button[disabled] { opacity: .6; cursor: default; }

@keyframes ciQuote { 0%{opacity:0; transform:translateY(8px);} 4%{opacity:1; transform:translateY(0);} 29%{opacity:1; transform:translateY(0);} 34%{opacity:0; transform:translateY(-8px);} 100%{opacity:0; transform:translateY(-8px);} }
@keyframes ciDot { 0%{background:#d6d5cf; width:7px;} 4%{background:#4f8a2f; width:22px;} 29%{background:#4f8a2f; width:22px;} 34%{background:#d6d5cf; width:7px;} 100%{background:#d6d5cf; width:7px;} }
@keyframes ciBar { 0%{width:0%;} 100%{width:100%;} }
@keyframes ciGlobeSpin { from{ transform:scaleX(1); } 50%{ transform:scaleX(-1); } to{ transform:scaleX(1); } }
@keyframes ciGlobeBlink { 0%,100%{ opacity:0; } 8%{ opacity:.95; } 40%{ opacity:0; } }

.ci-msg { color:#a32d2d; font-size:13px; margin:14px auto 0; max-width:560px; }

/* Responsive: the design is desktop-first with fixed grids. Stack them on small
   screens so the page stays usable on mobile. */
@media (max-width: 820px) {
  .ci-hero h1 { font-size: 38px !important; }
  .ci-h2 { font-size: 32px !important; letter-spacing: -1px !important; }
  .ci-2col { grid-template-columns: 1fr !important; }
  .ci-2col > div[style*="border-left"], .ci-2col > div[style*="border-right"] { border-left: none !important; border-right: none !important; border-top: 1px solid #e7e6e1 !important; }
  .ci-3col { grid-template-columns: 1fr !important; }
  .ci-globeband { flex-direction: column !important; gap: 24px !important; text-align: center; }
  .ci-flowrow { grid-template-columns: 1fr !important; gap: 4px !important; }
  .ci-flowrow > div[style*="dotted"] { display: none !important; }
  .ci-verts { flex-wrap: wrap; }
  section, header, nav, footer { padding-left: 20px !important; padding-right: 20px !important; }
}