/* KRYON public site — colour, type, shape and motion all come from tokens.css. */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, p, ul, ol, figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0;
}

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.wrap {
  width: min(1080px, 100% - 40px);
  margin-inline: auto;
}

/* --- header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 62px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 680;
  letter-spacing: -0.02em;
}

.logo:hover {
  text-decoration: none;
}

.logo__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 14px;
  font-weight: 700;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav a {
  padding: 7px 12px;
  border-radius: 0;
  color: var(--text-muted);
  font-size: 14.5px;
  font-weight: 500;
}

.site-nav a:hover {
  background: var(--bg-alt);
  color: var(--text);
  text-decoration: none;
}

/* --- buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 0;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 570;
  cursor: pointer;
}

.btn:hover {
  text-decoration: none;
  border-color: var(--text-subtle);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--sm {
  padding: 7px 13px;
  font-size: 14px;
}

/* --- hero ------------------------------------------------------------------- */

.hero {
  padding: 76px 0 64px;
  background: var(--bg);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 0;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 560;
}

.hero h1 {
  margin: 18px 0 16px;
  font-size: var(--fs-3xl);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.hero__lead {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 52ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.fact__value {
  font-size: 24px;
  font-weight: 660;
  letter-spacing: -0.02em;
}

.fact__label {
  font-size: 13.5px;
  color: var(--text-subtle);
}

.preview {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.preview__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-subtle);
}

.preview__dot {
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--ok);
}

.preview__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  background: var(--bg-alt);
}

.preview__msg {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14.5px;
  border-radius: 0;
}

.preview__msg--user {
  align-self: flex-end;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  border-radius: 0;
  border-radius: 0;
}

.preview__saved {
  align-self: flex-start;
  padding: 7px 13px;
  border-radius: 0;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 13.5px;
  font-weight: 560;
}

/* --- sections --------------------------------------------------------------- */

.section {
  padding: 68px 0;
}

.section--alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.section__head {
  max-width: 62ch;
  margin-bottom: 34px;
}

.section__title {
  font-size: var(--fs-2xl);
  letter-spacing: -0.025em;
  font-weight: 700;
}

.section__title--sm {
  font-size: 20px;
}

.section__lead {
  margin-top: 10px;
  color: var(--text-muted);
}

.mt-24 {
  margin-top: 24px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--accent-soft);
  color: var(--accent-text);
  margin-bottom: 13px;
}

/* 16px for a 16-unit grid: one unit is one pixel, which is the only size at
   which a pixel icon is a pixel icon rather than a smudge. */
.card__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentcolor;
  fill: none;
  stroke-width: 1;
  shape-rendering: crispEdges;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.card h3 {
  font-size: 16.5px;
  font-weight: 620;
  letter-spacing: -0.01em;
  margin-bottom: 7px;
}

.card p {
  color: var(--text-muted);
  font-size: 14.5px;
}

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.step {
  position: relative;
  padding-top: 42px;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 14px;
  font-weight: 660;
}

.step h3 {
  font-size: 16px;
  font-weight: 620;
  margin-bottom: 6px;
}

.step p {
  color: var(--text-muted);
  font-size: 14.5px;
}

/* --- demo ------------------------------------------------------------------- */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 36px;
  align-items: start;
}

.demo__list li {
  display: flex;
  gap: 11px;
  padding: 9px 0;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.demo__list li:last-child {
  border-bottom: 0;
}

.demo__check {
  color: var(--ok);
  flex: none;
  font-weight: 700;
}

.demo__panel {
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* --- code ------------------------------------------------------------------- */

.code {
  margin: 0;
  padding: 16px 18px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}

.note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-subtle);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.pill {
  padding: 4px 11px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-muted);
}

/* --- footer ----------------------------------------------------------------- */

.site-footer {
  padding: 34px 0;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 14px;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.site-footer nav {
  margin-left: auto;
  display: flex;
  gap: 16px;
}

/* --- responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__grid,
  .demo {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding: 52px 0 44px;
  }

  .section {
    padding: 48px 0;
  }
}

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

/* --- pixel chrome ----------------------------------------------------------- */

/* The chrome is drawn, not typeset.  A pixel face is a picture of letters on a
   fixed grid: smoothing it, tightening its tracking or letting the browser
   synthesise a weight all turn it back into a blur, so none of that happens
   here.  Body copy keeps Manrope, which is made to be read in paragraphs. */

.logo,
.logo__mark,
.site-nav a,
.site-footer,
.site-footer nav,
.btn,
.eyebrow,
.pill,
.note,
.fact__value,
.fact__label,
/* The interface used to be set in a pixel face, which needed its kerning off and
   its tracking zeroed so the drawing stayed on its own grid.  Every one of these
   is ordinary type now, and those two settings are gone with the face: kept, they
   would only space a normal grotesk wrongly. */
.preview__head,
.preview__saved,
.card h3,
.step h3,
.step::before,
.demo__check,
.demo__list li,
.section__title,
.section__title--sm,
.hero h1 {
  font-family: var(--font);
  font-synthesis: none;
}

/* The wordmark, a step number and a headline figure are the short strings that
   carry the brand. */
.logo,
.logo__mark,
.step::before,
.fact__value {
  font-family: var(--font);
  font-weight: 400;
}

.hero__lead,
.section__lead,
.card p,
.step p,
.demo__panel,
.code,
.preview__body,
.preview__msg {
  font-family: var(--font);
}

/* --- pixel shadows ---------------------------------------------------------- */

/* A soft box-shadow is a picture of a light source.  A pixel shadow is a second
   rectangle one step down and to the right, and it is what the tokens carry. */
.btn,
.card,
.preview,
.pill {
  box-shadow: var(--shadow-sm);
}