/* Just Steps — design tokens
   Inherited from Verzia Brand Book v1.0; Just Steps surfaces only use:
   Ink, Slate, Paper, Mute, Card. No forest, no functional accents.
*/
:root {
  --ink: #1A1814;
  --slate: #2A2925;
  --paper: #FAF9F6;
  --card: #FFFFFF;
  --mute: #6B6B66;

  --hairline: rgba(26, 24, 20, 0.12);
  --hairline-strong: rgba(26, 24, 20, 0.18);
  --hairline-faint: rgba(26, 24, 20, 0.06);
  --rule-30: rgba(26, 24, 20, 0.30);

  /* Marketing scale (per Verzia Brand Book Part IV) */
  --fs-display: 56px;
  --fs-h1: 36px;
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-lede: 19px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;

  --lh-display: 1.05;
  --lh-h1: 1.15;
  --lh-h2: 1.25;
  --lh-h3: 1.35;
  --lh-lede: 1.5;
  --lh-body: 1.6;
  --lh-small: 1.5;

  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;

  --container: 1200px;
  --reading: 680px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01" on;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-feature-settings: "ss01" on; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; }

button { font-family: inherit; cursor: pointer; }

::selection { background: rgba(26, 24, 20, 0.12); }

/* Common building blocks --------------------------------------------------- */

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--mute);
}

.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  letter-spacing: -0.005em;
  color: var(--slate);
  font-weight: 400;
}

.small { font-size: var(--fs-small); line-height: var(--lh-small); }

.muted { color: var(--mute); }

.hairline-top    { border-top: 0.5px solid var(--hairline); }
.hairline-bottom { border-bottom: 0.5px solid var(--hairline); }

/* Wordmark — Just Steps spec
   Plex Sans Medium · sentence case · slate · -0.022em at display, -0.005em at navbar
*/
.js-wordmark {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: -0.005em;
  font-feature-settings: "ss01" on;
}
.js-wordmark.display { letter-spacing: -0.022em; }

/* Product wordmark and the "product · by Just Steps" lockup.
   Removed from the markup while the product name is held (see Just Steps
   Website Copy v1.4). The rules come back with the product card — do not
   read them as cruft and delete them.

   .verzia        product mark, Plex Sans Semibold in ink
   .lockup*       product / rule / by / parent, per Brand Notes v1.2
*/

/* Primary action — ink button (per system-wide CTA pattern) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: -0.005em;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-6);
  transition: background 120ms cubic-bezier(0.2, 0, 0, 1);
}
.btn-primary:hover { background: #2C2A26; text-decoration: none; }

/* Secondary — ghost */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--mute);
  font-weight: 400;
  font-size: var(--fs-small);
  padding: 10px 16px;
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-6);
  transition: border-color 120ms cubic-bezier(0.2, 0, 0, 1), color 120ms cubic-bezier(0.2, 0, 0, 1);
}
.btn-ghost:hover { border-color: var(--hairline-strong); color: var(--slate); text-decoration: none; }