/* ============================================================
   Keystone — Early Access landing page
   Page chrome, animations, input focus, responsive behaviour.
   ============================================================ */

html, body { margin: 0; }
* { box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--clay-100); }

img { display: block; }
a { color: inherit; }

/* Ensure [hidden] wins over inline display values (form/success toggle) */
[hidden] { display: none !important; }

/* Honeypot field — hidden from people, catches bots */
.ks-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Demo animations */
@keyframes ksPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ksScreenIn { from { opacity: .25; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ksBubbleIn { from { opacity: .3; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

/* In-phone scroll areas: hide scrollbars */
.ks-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.ks-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* Email capture inputs — focus rings matching the design canvas */
.ks-email-light:focus {
  outline: none;
  border-color: var(--clay-600);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(194, 91, 63, .5);
}
.ks-email-dark:focus {
  outline: none;
  border-color: var(--wheat-500);
  box-shadow: 0 0 0 2px var(--pine-900), 0 0 0 4px rgba(216, 162, 74, .55);
}

/* Nav links */
.ks-nav a:hover { color: var(--ink); }
.ks-navcta:hover { background: var(--clay-700) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ks-h1 { font-size: 44px !important; }
  .ks-section-h2 { font-size: 32px !important; }
  .ks-grid-2 { grid-template-columns: 1fr !important; }
  .ks-grid-3 { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 720px) {
  .ks-nav-links { display: none !important; }
  .ks-phones { grid-template-columns: 1fr !important; justify-items: center; }
  .ks-grid-3 { grid-template-columns: 1fr !important; }
  .ks-email-form { flex-wrap: wrap; }
  .ks-email-form .ks-btn { width: 100%; }
}

@media (max-width: 560px) {
  .ks-h1 { font-size: 36px !important; }
  .ks-section-h2 { font-size: 28px !important; }
  .ks-section-pad { padding-top: 64px !important; padding-bottom: 64px !important; }
}