/* ---------------------------------------------------------------
   Design tokens — measured from the reference layout at 1440px.
   Every value here is a real computed value, not an approximation.
   --------------------------------------------------------------- */

/* Self-hosted so the variable axis stays intact and there is no third-party
   request on LCP. font-display:swap would reflow the 72px display type, so
   this uses optional and accepts a fallback render on a cold cache. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- ink / surface --- */
  --ink:          #111412;
  --ink-deep:     #001C17;
  --ink-card:     #242B25;
  --ink-card-2:   #171C18;
  --paper:        #FFFEFD;

  /* --- text --- */
  --muted:        #4E5B51;
  --muted-2:      #657568;
  --on-dark:      #FFFEFD;
  --on-dark-dim:  rgba(255, 254, 253, 0.7);

  /* --- green scale --- */
  --green:        #2AE855;
  --green-bright: #59F77D;
  --green-mid:    #0FD03B;
  --green-deep:   #006918;
  --mint:         #E7FAEB;
  --mint-2:       #BAF5C8;

  /* --- accents (testimonial cards) --- */
  --peach:        #FFEDD4;
  --lilac:        #F2EBFE;
  --violet:       #A875FF;
  --amber:        #FFC800;
  --sky:          #7FC4FF;
  --rust:         #9F2D00;
  --purple:       #2F0D68;

  /* --- lines / washes --- */
  --line:         #E6EDE8;
  --line-2:       #D8E3DA;
  --wash:         #EEF3EF;

  /* --- layout --- */
  --container:    1352px;
  --gutter:       44px;
  --gap:          32px;
  --gap-lg:       40px;

  /* --- radii --- */
  --r-sm:         12px;
  --r-md:         16px;
  --r-lg:         20px;
  --r-xl:         24px;
  --r-pill:       9999px;

  /* --- type --- */
  --font: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------
   Reset — minimal, deliberately not normalize.css
   --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------------------------------------------------------------
   Type scale — the negative tracking is load-bearing. Do not drop it.
   --------------------------------------------------------------- */

.t-hero {
  font-size: 72px;
  line-height: 88px;
  letter-spacing: -2.88px;
  font-weight: 600;
}

.t-h2 {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -1.44px;
  font-weight: 600;
}

.t-h2-sm {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -1.44px;
  font-weight: 600;
}

.t-h3 {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.96px;
  font-weight: 600;
}

.t-card-h {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.48px;
  font-weight: 600;
}

.t-quote {
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: -0.72px;
  font-weight: 600;
}

.t-stat {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.72px;
  font-weight: 600;
}

.t-body   { font-size: 16px; line-height: 24px; font-weight: 400; }
.t-nav    { font-size: 16px; line-height: 28px; letter-spacing: -0.4px; font-weight: 500; }

.t-eyebrow {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.4px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------- */

/* Sections carry the 24px outer padding; the container is the measured
   1352px content width and adds none of its own. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

/* ---------------------------------------------------------------
   Buttons — pill, 49px tall, flat
   --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  min-height: 49px;
  border-radius: var(--r-pill);
  font-size: 16px;
  line-height: 22.8571px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn--primary {
  background: var(--green);
  color: var(--ink);
}
.btn--primary:hover { background: var(--green-mid); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--on-dark {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.btn--on-dark:hover { background: var(--on-dark); color: var(--ink); }

/* ---------------------------------------------------------------
   Cards — flat. There is no box-shadow anywhere on this page.
   --------------------------------------------------------------- */

.card {
  border-radius: var(--r-lg);
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.card--wash   { background: var(--wash); border-color: transparent; }
.card--mint   { background: var(--mint-2); border-color: transparent; }
.card--peach  { background: var(--peach);  border-color: transparent; }
.card--lilac  { background: var(--lilac);  border-color: transparent; }
.card--dark   { background: var(--ink-card); border-color: transparent; color: var(--on-dark); }

.a11y-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}