/* Design tokens — extracted from Figma file PQpRlxsE4hwyqmPvBw9E9K
   "Design System — Conversion Architects" (node 4:338) + per-node styles. */

:root {
  /* Brand palette */
  --obsidian: #111111;
  --off-white: #f4f2ed;
  --orange: #fa541a;
  --sky-blue: #cbdce6;
  --lime: #f6ff8a;
  --arena: #c2b887;
  --sage: #b7bcb3;   /* v4 adds this to the palette */
  --muted: #5d5d58;
  --white: #ffffff;

  /* --muted reads at 2.85:1 on --obsidian, below the 4.5:1 floor for body
     text. This is its counterpart for dark sections: off-white at 70%, 8.5:1. */
  --muted-on-dark: #b0aeab;

  /* Type stacks */
  --font-sans: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  --font-onest: "Onest", var(--font-sans);
  --font-inter: "Inter", var(--font-sans);
  --font-mono: "Intel One Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Calibration: Figma and the browser resolve half-leading from different
     font metrics, so glyphs land lower in the browser. The gap is proportional
     to font size and independent of line-height, hence em. Measured from pixel
     diffs at 68px (-8px) and 18px (-2px). */
  --figma-baseline-shift: -0.115em;
  --figma-baseline-shift-inter: -0.03em; /* Inter has its own metrics */
  --figma-baseline-shift-mono: -0.115em;  /* Intel One Mono — calibrated below */

  /* Layout */
  --page-width: 1440px;
  --gutter: 80px;
}

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

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  background: var(--off-white);
  color: var(--obsidian);
  font-family: var(--font-sans);
}

img { display: block; max-width: none; }

/* The Figma file only contains a 1440 frame, so the canvas stays 1440 wide and
   is scaled down to the viewport instead of reflowing. Proportional scaling
   keeps every measurement exactly as designed; a fluid rebuild would mean
   inventing breakpoints the design does not define. */
.fit {
  width: calc(var(--page-width) * var(--fit, 1));
  margin: 0 auto;
  overflow: hidden; /* Figma frames clip; several rules overshoot 1440 */
}

.page {
  width: var(--page-width);
  transform: scale(var(--fit, 1));
  transform-origin: top left;
}

/* ---- Type scale (Figma text styles) ---- */
.t-display-l { font-size: 68px; font-weight: 500; line-height: 0.98; letter-spacing: 0; }
.t-body-m    { font-size: 18px; font-weight: 400; line-height: 1.5;  letter-spacing: 0; }
.t-button    { font-size: 16px; font-weight: 700; line-height: 1.2;  letter-spacing: 0; }
.t-caption   { font-size: 13px; font-weight: 400; line-height: 1.4;  letter-spacing: 0; }
.t-label     { font-size: 12px; font-weight: 400; line-height: 1.2;  letter-spacing: 0; }

/* ---- Shared primitives ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  background: var(--orange);
  color: var(--white);
}

/* Outlined nav button. Note: the Figma design specifies white label text on
   the off-white page background — kept as designed. */
.btn--outline {
  background: transparent;
  /* inset shadow, not border: Figma strokes are drawn inside the frame and
     must not add to its measured size (164x50 for the nav button) */
  box-shadow: inset 0 0 0 1px var(--muted);
  color: var(--white);
}

/* ---- Navigation primitives (shared by both home layouts) ---- */
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__link {
  color: var(--obsidian);
  text-decoration: none;
  white-space: nowrap;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  /* pinned right: the links row is a fixed-width Figma frame, and letting the
     buttons flow leaves them a few px short of the 64px page gutter */
  margin-left: auto;
}

/* Figma button frames are fixed size — let them be, rather than letting text
   metrics decide the width. */
.nav__actions .btn { justify-content: center; }

.nav__chevron { width: 24px; height: 24px; }

.pill {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--muted);
  border-radius: 100px;
  padding: 12px 16px;
  color: var(--obsidian);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

/* Glyph-level calibration for label text (see --figma-baseline-shift). */
.btn > span,
.pill > span,
.nav__link {
  transform: translateY(var(--figma-baseline-shift));
}

.pill--accent {
  box-shadow: inset 0 0 0 1px var(--orange);
  color: var(--orange);
  font-weight: 700;
}

/* ---- Section reveal (added after the build; not in the Figma file) ----

   Uses the independent `translate` property, not `transform`: 50 rules across
   this stylesheet already set `transform: translateY(var(--figma-baseline-shift))`
   to calibrate glyph position against Figma, and `translate` composes with
   those instead of overwriting them.

   The hidden state is scoped to `html.reveal`, a class only added by script
   when motion is allowed — so with JS off, or reduced motion on, every section
   renders at its resting state and nothing is stranded at opacity 0. The first
   section is never animated: it is the frame the page opens on. */

html.reveal .page > section + section > *,
html.reveal .page > footer > * {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    translate 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.reveal .page > .is-in > * {
  opacity: 1;
  translate: 0 0;
}

/* A short stagger reads as one considered movement; past the fourth element it
   would read as a queue, so the rest share the last delay. */
html.reveal .page > section + section > *:nth-child(2),
html.reveal .page > footer > *:nth-child(2) { transition-delay: 70ms; }

html.reveal .page > section + section > *:nth-child(3),
html.reveal .page > footer > *:nth-child(3) { transition-delay: 140ms; }

html.reveal .page > section + section > *:nth-child(n + 4),
html.reveal .page > footer > *:nth-child(n + 4) { transition-delay: 210ms; }