/* Generated from docs/DESIGN.md by plain-sight-mockup/scripts/tokens-css.mjs. Don't edit by hand:
   change DESIGN.md and run the script again. */
:root {
  /* colors */
  --color-ground: #0B1018;
  --color-ground-alt: #141B25;
  --color-ink: #F2F5F8;
  --color-ink-muted: #9FAAB8;
  --color-anchor: #55607E;
  --color-anchor-deep: #485678;
  --color-anchor-lift: #9AB1BF;
  --color-on-anchor: #FFFFFF;
  --color-on-anchor-muted: #DCE3EC;
  --color-rule: #273243;
  --color-rule-anchor: #8A95AE;

  /* typography */
  --font-display: Outfit, 'Helvetica Neue', Arial, sans-serif;
  --text-display: clamp(2.25rem, 1rem + 8vw, 7.5rem);
  --font-weight-display: 800;
  --leading-display: 0.96;
  --tracking-display: -0.03em;
  --font-h2: Outfit, 'Helvetica Neue', Arial, sans-serif;
  --text-h2: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  --font-weight-h2: 700;
  --leading-h2: 1.06;
  --tracking-h2: -0.02em;
  --font-h3: Outfit, 'Helvetica Neue', Arial, sans-serif;
  --text-h3: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem);
  --font-weight-h3: 700;
  --leading-h3: 1.25;
  --tracking-h3: -0.01em;
  --font-figure: Outfit, 'Helvetica Neue', Arial, sans-serif;
  --text-figure: clamp(4.5rem, 2rem + 11vw, 9rem);
  --font-weight-figure: 800;
  --leading-figure: 0.84;
  --tracking-figure: -0.045em;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text-body: clamp(1rem, 0.95rem + 0.22vw, 1.1875rem);
  --font-weight-body: 400;
  --leading-body: 1.6;
  --font-lede: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text-lede: clamp(1.125rem, 1rem + 0.58vw, 1.4375rem);
  --font-weight-lede: 400;
  --leading-lede: 1.5;
  --font-quote: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text-quote: clamp(1.1875rem, 1rem + 0.85vw, 1.625rem);
  --font-weight-quote: 500;
  --leading-quote: 1.42;
  --tracking-quote: -0.005em;
  --font-label: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text-label: 0.8125rem;
  --font-weight-label: 600;
  --leading-label: 1.3;
  --tracking-label: 0.1em;
  --font-button: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text-button: 0.9375rem;
  --font-weight-button: 600;
  --leading-button: 1.2;
  --tracking-button: 0.01em;
  --font-number: Outfit, 'Helvetica Neue', Arial, sans-serif;
  --text-number: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --font-weight-number: 700;
  --leading-number: 1.1;
  --tracking-number: -0.01em;

  /* radius */
  --radius-sm: 0px;
  --radius-md: 0px;

  /* spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 88px;
  --spacing-section: clamp(80px, 5vw + 56px, 144px);
}

.t-display { font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--font-weight-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.t-h2 { font-family: var(--font-h2); font-size: var(--text-h2); font-weight: var(--font-weight-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
.t-h3 { font-family: var(--font-h3); font-size: var(--text-h3); font-weight: var(--font-weight-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
.t-figure { font-family: var(--font-figure); font-size: var(--text-figure); font-weight: var(--font-weight-figure); line-height: var(--leading-figure); letter-spacing: var(--tracking-figure); }
.t-body { font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--font-weight-body); line-height: var(--leading-body); }
.t-lede { font-family: var(--font-lede); font-size: var(--text-lede); font-weight: var(--font-weight-lede); line-height: var(--leading-lede); }
.t-quote { font-family: var(--font-quote); font-size: var(--text-quote); font-weight: var(--font-weight-quote); line-height: var(--leading-quote); letter-spacing: var(--tracking-quote); }
.t-label { font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--font-weight-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); }
.t-button { font-family: var(--font-button); font-size: var(--text-button); font-weight: var(--font-weight-button); line-height: var(--leading-button); letter-spacing: var(--tracking-button); }
.t-number { font-family: var(--font-number); font-size: var(--text-number); font-weight: var(--font-weight-number); line-height: var(--leading-number); letter-spacing: var(--tracking-number); }
.c-button-outline { background-color: transparent; color: var(--color-anchor-lift); font-family: var(--font-button); font-size: var(--text-button); font-weight: var(--font-weight-button); line-height: var(--leading-button); letter-spacing: var(--tracking-button); border-radius: var(--radius-sm); padding: 17px 28px; }
.c-button-solid { background-color: var(--color-anchor); color: var(--color-on-anchor); font-family: var(--font-button); font-size: var(--text-button); font-weight: var(--font-weight-button); line-height: var(--leading-button); letter-spacing: var(--tracking-button); border-radius: var(--radius-sm); padding: 18px 28px; }
.c-service-row { background-color: transparent; color: var(--color-ink); border-radius: var(--radius-sm); padding: 22px 0; }