/* ==========================================================================
   KRYO base — fonts, reset, typography, utilities, a11y, motion guards
   ========================================================================== */

/* --- Self-hosted fonts (latin subset, OFL) -------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("../assets/fonts/space-grotesk-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../assets/fonts/inter-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("../assets/fonts/inter-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../assets/fonts/jetbrains-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}

/* --- Reset ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px); /* native anchor fallback clears sticky nav */
}

body {
  min-height: 100vh;
  background-color: var(--ink-900);
  color: var(--text-mid);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

a {
  color: var(--cyan-400);
  text-decoration: none;
}

a:hover {
  color: var(--cyan-300);
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* --- Typography ------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-hi);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
  font-weight: 500;
}

p {
  max-width: 65ch;
}

strong {
  color: var(--text-hi);
  font-weight: 600;
}

.lead {
  font-size: var(--step-1);
}

/* The reset zeroes every margin, and each component that stacks paragraphs sets
   its own spacing (.contact-alt, .price-desc, .panel-tag, .acc-panel-inner p).
   The one uncovered case is a lead paragraph followed by body prose, which
   otherwise collides with it. */
.lead + p {
  margin-top: var(--space-4);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cyan-400);
}

.fine-print {
  font-size: var(--step--1);
  color: var(--text-low);
}

.grad-text {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* background-clip: text paints only inside the inline box. Italic serif glyphs
   lean past that box on both sides, so the first and last letters get shaved
   (most visibly the "A" in "AI agents"). Widen the painted box and pull it back
   with a matching negative margin so surrounding words don't shift. */
.serif-it.grad-text {
  padding-inline: 0.14em;
  margin-inline: -0.14em;
}

.mono {
  font-family: var(--font-mono);
}

/* Italic serif accent inside display headlines (dope-style mixed type).
   Instrument Serif has a much smaller x-height than Space Grotesk, so at the same
   font-size it reads as shrunken rather than as a deliberate accent. 1.18em lines
   the two x-heights up; measured against an h2, which is where the mismatch showed
   worst. Changing this changes every mixed-type headline on the site. */
.serif-it {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  line-height: 1;
  letter-spacing: 0;
}

/* Mono micro-label with underscores, e.g. HOW_IT_WORKS >> */
.microlabel {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-low);
}

.microlabel .hot {
  color: var(--cyan-400);
}

/* Barcode tick strip that trails micro-labels */
.tape {
  display: inline-block;
  width: 96px;
  height: 9px;
  margin-left: var(--space-3);
  vertical-align: baseline;
  background: repeating-linear-gradient(90deg,
    currentColor 0 1px, transparent 1px 4px,
    currentColor 4px 6px, transparent 6px 9px);
  opacity: 0.45;
}

/* --- Layout utilities -------------------------------------------------------- */
.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.container--narrow {
  width: min(var(--container-narrow), 100% - var(--gutter) * 2);
}

.section {
  padding-block: var(--section-pad);
  scroll-margin-top: var(--nav-h);
}

.section--alt {
  background-color: var(--ink-850);
}

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-7);
}

.section-head .eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.section-head p {
  margin-top: var(--space-4);
}

/* Subtle background grid (decorative) */
.bg-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* --- Accessibility ------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--cyan-400);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: var(--text-on-accent);
}

/* --- Lenis smooth-scroll required rules ----------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* --- Reduced motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}