/* Self-hosted brand faces. Generated by scripts/fonts.mjs. */
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/inter-latin-300-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/noto-serif-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/noto-serif-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Noto Serif";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/noto-serif-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* =====================================================================
   LifebookOS — Design tokens (colors, type, motion, radius, shadows)
   Source of truth: extracted from the LifebookOS Website Figma file.
   Brand: editorial/serif headlines + clean Inter body, anchored by
   a single signature orange. Warm cream + near-black sections.
   ===================================================================== */


:root {
  /* ------------------------------------------------------------------
     Brand
     ------------------------------------------------------------------ */
  --brand-orange:        rgb(255, 114, 0);    /* #FF7200 — primary accent */
  --brand-orange-deep:   rgb(150,  73, 0);    /* #964900 — muted/text variant */
  --brand-orange-tint:   rgb(253, 210, 100);  /* warm highlight */
  --brand-orange-glow:   rgba(217, 119, 6, 0.20);
  --brand-orange-line:   rgba(150,  73, 0, 0.10);

  /* secondary editorial accents — used sparingly */
  --brand-yellow:        rgb(255, 212, 0);
  --brand-yellow-bright: rgb(255, 234, 0);

  /* ------------------------------------------------------------------
     Neutrals — warm scale
     ------------------------------------------------------------------ */
  --black:        rgb(0, 0, 0);
  --ink:          rgb(26, 26, 28);            /* primary body text */
  --ink-soft:     rgb(30, 41, 59);            /* hero serif (slate) */
  --ink-muted:    rgb(44, 44, 44);            /* card body */
  --ink-low:      rgb(64, 64, 64);            /* secondary text, footer */
  --ink-faint:    rgb(150, 150, 150);
  --ink-disabled: rgb(178, 178, 178);

  --paper:        rgb(255, 255, 255);
  --paper-warm:   rgb(253, 252, 251);
  --paper-cream:  rgb(252, 249, 248);         /* hero cream */
  --paper-sand:   rgb(247, 243, 235);         /* lesson card cream */
  --paper-ash:    rgb(244, 244, 244);         /* "The Gap" section */
  --paper-stone:  rgb(235, 231, 231);         /* page chrome warm gray */
  --paper-rule:   rgb(217, 217, 217);
  --paper-border: rgb(196, 196, 196);

  --shell-dark:   rgb(49, 48, 48);            /* Architects panel */
  --shell-onyx:   rgb(26, 26, 28);            /* photo wall */
  --shell-black:  rgb(21, 21, 21);            /* pricing */
  --shell-edge:   rgb(53, 51, 51);

  /* warm browns (eyebrow + sub-copy) */
  --umber:        rgb(138, 114, 100);
  --umber-deep:   rgb( 86,  67,  54);
  --umber-line:   rgb(221, 193, 176);

  /* ------------------------------------------------------------------
     Semantic
     ------------------------------------------------------------------ */
  --fg:           var(--ink);
  --fg-muted:     var(--ink-low);
  --fg-faint:     var(--ink-disabled);
  --fg-inverse:   var(--paper);

  --bg:           var(--paper);
  --bg-alt:       var(--paper-ash);
  --bg-cream:     var(--paper-sand);
  --bg-dark:      var(--shell-onyx);
  --bg-black:     var(--shell-black);

  --accent:       var(--brand-orange);
  --accent-deep:  var(--brand-orange-deep);

  --border:       rgb(0, 0, 0);
  --border-soft:  var(--paper-border);
  --border-hair:  rgba(255, 255, 255, 0.10);

  /* ------------------------------------------------------------------
     Type families
     ------------------------------------------------------------------ */
  --font-serif: "Noto Serif", "Times New Roman", Georgia, serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ------------------------------------------------------------------
     Type scale (Figma-derived display + body sizes)
     ------------------------------------------------------------------ */
  --fs-hero:      70px;   /* Noto Serif — full hero */
  --fs-display:   48px;   /* Noto Serif — section banner quote */
  --fs-h1:        42px;   /* Noto Serif — section heading */
  --fs-h2:        32px;   /* Noto Serif — sub-section */
  --fs-h3:        24px;   /* Noto Serif — card heading */
  --fs-h4:        20px;   /* Inter Semi Bold — utility heading */
  --fs-lead:      24px;   /* Inter Light — hero subhead */
  --fs-body-lg:   18px;   /* Inter Regular */
  --fs-body:      16px;   /* Inter Regular — default */
  --fs-body-sm:   14px;   /* Inter Regular */
  --fs-caption:   12px;
  --fs-micro:     10px;   /* Inter Bold uppercase eyebrow */

  /* leading */
  --lh-tight:     1.05;
  --lh-snug:      1.20;
  --lh-display:   1.33;
  --lh-body:      1.625; /* 26/16 */
  --lh-loose:     1.85;

  /* tracking */
  --tr-eyebrow:   0.18em; /* 3px @ 16px — Inter Bold caps */
  --tr-eyebrow-sm:0.30em; /* 3px @ 10px */
  --tr-button:    0.18em; /* 2.5px @ 14px */
  --tr-tight:    -0.02em;
  --tr-display:  -0.014em;

  /* ------------------------------------------------------------------
     Spacing (8-pt + editorial breathing room)
     ------------------------------------------------------------------ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  60px;
  --space-9:  80px;
  --space-10:120px;
  --space-11:150px;        /* section v-padding desktop */

  /* ------------------------------------------------------------------
     Radii — Figma uses three flavors
     ------------------------------------------------------------------ */
  --r-card:     8px;
  --r-card-lg: 10px;
  --r-chip:    10px;   /* numbered step badges */
  --r-pill:    200px;  /* CTA buttons + chips */
  --r-circle:  9999px;

  /* ------------------------------------------------------------------
     Elevation
     ------------------------------------------------------------------ */
  --shadow-card:   0 1px 2px rgba(82, 82, 82, 0.08), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-lift:   0 10px 28px rgba(0, 0, 0, 0.10);
  --shadow-image:  0 25px 50px -12px rgba(0, 0, 0, 0.30);
  --shadow-popup: 12px 11px 21px 6px rgba(0, 0, 0, 0.25);

  /* ------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --site-width: 1268px;
  --gutter-x:   84px;
}

/* =====================================================================
   Semantic element styles
   ===================================================================== */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--paper);
}

/* — display + heads (serif) — */
.hero-display {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1.0;
  color: var(--ink-soft);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.33; /* 56/42 */
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.33;
  color: var(--ink);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

/* — eyebrow / kicker — */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow-sm);
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--lg {
  font-size: var(--fs-body);
  letter-spacing: var(--tr-eyebrow);
}
.eyebrow--mono {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.1em;
  color: var(--umber);
}

/* — body — */
p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
}
.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink);
}
.muted { color: var(--fg-muted); }
.small { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-muted); }

/* — code / mono — */
code, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--umber);
}