/* Components layer — design/components.json entries: navbar, button-primary,
   signup-pill, stat-item. Values are pulled from src/assets/layout-1706-3389.json
   (exact Figma geometry) and src/assets/tokens.figma-1706-3389.css (the real
   palette/type) — never guessed from the ref screenshots.
   Sections and pages compose these classes; nothing here duplicates a style
   a component already owns. */

/* Figma lays out type without kerning pairs; matching that here keeps glyph
   advances identical to the exported reference instead of drifting letter
   by letter across a string. */
.btn, .signup-pill, .nav-link, .navbar__login,
.stat-item__number, .stat-item__label {
  font-kerning: none;
}

/* ============ Button ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--figma-font-1), sans-serif;
  font-weight: 700;
  font-size: var(--figma-type-18-700);
  line-height: 1.5;
  text-decoration: none;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--figma-color-6);
  color: var(--figma-color-8);
}

/* Size modifiers — button-primary (node 1706:7637) is the md/default size,
   padding taken straight from the Figma box (32px/18px). */
.btn--sm { padding: 12px 24px; font-size: 16px; }
.btn--md, .btn { padding: 18px 32.5px; }  /* frame box is 206px wide; 32px lands at 205 */
.btn--lg { padding: 22px 40px; font-size: 20px; }

/* ============ Signup pill (node 1706:7644) ============ */
.signup-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background: var(--figma-color-8);
  box-shadow: inset 0 0 0 1px var(--figma-color-6);
  border-radius: 15px;
  color: var(--figma-color-6);
  font-family: var(--figma-font-1), sans-serif;
  font-weight: 700;
  font-size: var(--figma-type-18-700);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

/* ============ Stat item (icon + number + label) ============ */
.stat-item {
  display: flex;
  align-items: flex-start;
  gap: 36px;              /* badge ends x=503, number starts x=539 */
}
.stat-item__icon {
  /* Figma exports pad the artwork: the badge is 256px inside a 448px canvas,
     so the FILE renders at 224px for a 128px badge, clipped back by the
     measured padding. Sizing the file itself to 128px shrinks the badge to
     73px - the mistake that made this component measure 12% off. */
  display: block;
  width: 224px;
  height: 224px;
  margin: -28px -62px 0 -34px;  /* right: pull the padded canvas back to the badge edge */
  clip-path: inset(28px 0 0 34px);
}
.stat-item__body {
  display: flex;
  flex-direction: column;
  margin-top: 18px;       /* number box y=1078, badge top y=1060 */
}
.stat-item__number {
  margin: 0;
  font-family: var(--figma-font-2), sans-serif;
  font-weight: 600;
  font-size: var(--figma-type-48-600);
  line-height: 1.3;
  color: var(--figma-color-3);
}
.stat-item__label {
  margin: 12px 0 0 7px;   /* number x=539, label x=546 in the frame */
  font-family: var(--figma-font-1), sans-serif;
  font-weight: 400;
  font-size: var(--figma-type-18-400);
  line-height: 1.8;
  color: var(--figma-color-7);
}

/* ============ Navbar (frame 1706:3389, node 0..1920x130) ============ */
.navbar {
  width: 100%;
  background: var(--figma-color-8);
}
.navbar__inner {
  position: relative;
  max-width: 1170px;
  height: 130px;
  margin-inline: auto;
}

/* Logo — the design ships it as one asset; never redraw it (gate: provenance) */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img {
  display: block;
  width: 179px;
  height: 40px;
}


/* Placement belongs to the consumer, not the component: the logo class stays
   position-free so a section can put it anywhere. */
.navbar__inner .logo {
  position: absolute;
  left: 0;                /* inner starts at frame x=375, logo sits at 375 */
  top: 52px;
}

.navbar__nav-list {
  position: absolute;
  left: 350px;            /* Home starts at frame x=725, inner starts at 375 */
  top: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;               /* caret box = 6 + 14 = the 20px the design adds */
  font-family: var(--figma-font-1), sans-serif;
  font-weight: 400;
  font-size: var(--figma-type-18-400);
  line-height: 1.8;
  color: var(--figma-color-3);
  text-decoration: none;
}
.nav-link.is-active {
  color: var(--figma-color-6);
}
.nav-link__caret {
  width: 14px;            /* 6px gap + 14px caret = the design's 20px */
  height: 14px;
}

/* Login / signup actions */
.navbar__actions {
  position: absolute;
  left: 952px;
  top: 42px;
  display: flex;
  align-items: center;
  gap: 38px;
}
.navbar__login {
  font-family: var(--figma-font-1), sans-serif;
  font-weight: 700;
  font-size: var(--figma-type-18-700);
  line-height: 1.5;
  color: var(--figma-color-6);
  text-decoration: none;
}