/* Bryan Canning design system tokens (from the design system artifact, version 1793202477-12ef). */
:root, [data-theme="light"] {
  --bc-paper: #efe9dc;
  --bc-paper-light: #f4f1ea;
  --bc-paper-hover: #e6dfd0;
  --bc-paper-faint: #ddd5c4;
  --bc-ink: #111111;
  --bc-red: #d62f1f;
  --bc-red-deep: #5c0f09;
  --bc-red-ghost: rgba(92, 15, 9, 0.35);
  --bc-yellow: #f2b705;
  --surface-page: var(--bc-paper);
  --surface-card-hover: var(--bc-paper-hover);
  --surface-inverse: var(--bc-ink);
  --surface-accent: var(--bc-red);
  --text-body: var(--bc-ink);
  --text-inverse: var(--bc-paper);
  --text-accent: var(--bc-red);
  --text-on-accent: var(--bc-red-deep);
  --rule: var(--bc-ink);
  --tile-bg: var(--bc-ink);
  --tile-fg: var(--bc-paper);
  --tile-bg-active: var(--bc-red);
  --numeral-faint: var(--bc-paper-faint);
}
:root {
  --gutter-desktop: 48px;
  --gutter-tablet: 31px;
  --gutter-mobile: 20px;
  --col-gap-desktop: 20px;
  --col-gap-tablet: 13px;
  --space-2: 2px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-80: 80px;
  --space-110: 110px;
  --radius: 0;
  --tap-min: 44px;
  --dot-sm: 9px;
  --dot-md: 11px;
  --dot-lg: 14px;
  --rule-hair: 1px;
  --rule-mid: 3px;
  --rule-heavy: 6px;
  --grid-columns: 12;
  --frame-desktop: 1280px;
  --frame-tablet: 834px;
  --frame-mobile: 390px;
  --fs-micro: 11px;
  --fs-label: 13px;
  --fs-ui: 15px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-button: 22px;
  --fs-h4: 24px;
  --fs-hook: 42px;
  --fs-h3: 44px;
  --fs-h2: 64px;
  --fs-h1: 68px;
  --fs-display: 210px;
  --fs-display-thin: 300px;
  --fs-mega-thin: 660px;
  --lh-tight: 0.78;
  --lh-display: 0.92;
  --lh-heading: 0.95;
  --lh-body: 1.45;
  --lh-copy: 1.5;
  --weight-thin: 100;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-cond-bold: 700;
  --weight-cond-black: 900;
  --tracking-thin: -0.03em;
  --tracking-display: 0.04em;
  --font-thin: 'helvetica-neue-lt-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'helvetica-neue-lt-pro', 'helvetica-lt-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-cond: 'helvetica-neue-lt-pro-cond', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.mega-thin { font-family: var(--font-thin); font-size: 660px; font-weight: 100; line-height: 0.78; letter-spacing: -0.03em; }
.display-thin { font-family: var(--font-thin); font-size: 300px; font-weight: 100; line-height: 0.78; letter-spacing: -0.03em; }
.display { font-family: var(--font-cond); font-size: 210px; font-weight: 900; line-height: 0.92; letter-spacing: 0.04em; }
.h1 { font-family: var(--font-cond); font-size: 68px; font-weight: 900; line-height: 0.92; }
.h2 { font-family: var(--font-cond); font-size: 64px; font-weight: 900; line-height: 0.95; }
.h3 { font-family: var(--font-cond); font-size: 44px; font-weight: 900; line-height: 0.95; }
.hook { font-family: var(--font-cond); font-size: 42px; font-weight: 900; line-height: 0.95; }
.h4 { font-family: var(--font-cond); font-size: 24px; font-weight: 900; line-height: 0.95; }
.lead { font-family: var(--font-body); font-size: 18px; font-weight: 400; line-height: 1.45; }
.body { font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.5; }
.button { font-family: var(--font-cond); font-size: 22px; font-weight: 700; }
.ui { font-family: var(--font-cond); font-size: 15px; font-weight: 700; }
.label { font-family: var(--font-body); font-size: 13px; font-weight: 300; }
.micro { font-family: var(--font-body); font-size: 11px; font-weight: 400; line-height: 1.35; }