/* HumanCodeable design tokens — generated by build_brand.py. Do not edit by hand. */
@font-face{font-family:'Raleway';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/raleway-300.woff2') format('woff2');}
@font-face{font-family:'Raleway';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/raleway-400.woff2') format('woff2');}
@font-face{font-family:'Raleway';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/raleway-500.woff2') format('woff2');}
@font-face{font-family:'Raleway';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/raleway-600.woff2') format('woff2');}
@font-face{font-family:'Raleway';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/raleway-700.woff2') format('woff2');}
@font-face{font-family:'Raleway';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/raleway-800.woff2') format('woff2');}
@font-face{font-family:'Courgette';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/courgette-400.woff2') format('woff2');}

:root{
  /* brand */
  --hc-cyan:#2FBFF5;
  --hc-cyan-text:#0B87B8;
  --hc-grey:#707070;
  --hc-ink:#111417;
  --hc-black:#000000;
  --hc-paper:#FFFFFF;
  --hc-surface:#F2F4F6;
  --hc-line:#DFE3E6;
  --hc-dim:#5A6067;

  /* ramps */
  --hc-cyan-50:#EAF8FE;
  --hc-cyan-100:#CFF0FD;
  --hc-cyan-200:#A5E4FB;
  --hc-cyan-300:#6DD3F8;
  --hc-cyan-400:#2FBFF5;
  --hc-cyan-500:#12A6DE;
  --hc-cyan-600:#0B87B8;
  --hc-cyan-700:#0A6D94;
  --hc-cyan-800:#0C5876;
  --hc-cyan-900:#0E4A62;
  --hc-grey-50:#F7F8F9;
  --hc-grey-100:#EDEFF1;
  --hc-grey-200:#DFE3E6;
  --hc-grey-300:#C8CDD2;
  --hc-grey-400:#9AA1A8;
  --hc-grey-500:#707070;
  --hc-grey-600:#5A6067;
  --hc-grey-700:#41474D;
  --hc-grey-800:#2A2F34;
  --hc-grey-900:#111417;

  /* semantic */
  --hc-success:#1B9E5A;
  --hc-warning:#B8730B;
  --hc-danger:#C6362F;
  --hc-info:#0B87B8;

  /* type */
  --hc-font-sans:'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hc-font-script:'Courgette', cursive;
  --hc-font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hc-display-size:60px;
  --hc-display-lh:1.08;
  --hc-display-weight:800;
  --hc-display-ls:-0.03em;
  --hc-h1-size:44px;
  --hc-h1-lh:1.14;
  --hc-h1-weight:800;
  --hc-h1-ls:-0.025em;
  --hc-h2-size:32px;
  --hc-h2-lh:1.2;
  --hc-h2-weight:700;
  --hc-h2-ls:-0.02em;
  --hc-h3-size:22px;
  --hc-h3-lh:1.3;
  --hc-h3-weight:600;
  --hc-h3-ls:-0.01em;
  --hc-h4-size:18px;
  --hc-h4-lh:1.35;
  --hc-h4-weight:600;
  --hc-h4-ls:0;
  --hc-lede-size:19px;
  --hc-lede-lh:1.6;
  --hc-lede-weight:400;
  --hc-lede-ls:0;
  --hc-body-size:16px;
  --hc-body-lh:1.65;
  --hc-body-weight:400;
  --hc-body-ls:0;
  --hc-small-size:14px;
  --hc-small-lh:1.55;
  --hc-small-weight:400;
  --hc-small-ls:0;
  --hc-label-size:12px;
  --hc-label-lh:1.4;
  --hc-label-weight:700;
  --hc-label-ls:0.08em;
  --hc-mono-size:13px;
  --hc-mono-lh:1.5;
  --hc-mono-weight:400;
  --hc-mono-ls:0;

  /* space */
  --hc-space-0:2px;
  --hc-space-1:4px;
  --hc-space-2:8px;
  --hc-space-3:12px;
  --hc-space-4:16px;
  --hc-space-5:24px;
  --hc-space-6:32px;
  --hc-space-7:48px;
  --hc-space-8:64px;
  --hc-space-9:96px;
  --hc-space-10:128px;

  /* radius */
  --hc-radius-sm:5px;
  --hc-radius-md:9px;
  --hc-radius-lg:13px;
  --hc-radius-xl:20px;
  --hc-radius-pill:999px;

  /* shadow */
  --hc-shadow-sm:0 1px 2px rgba(17,20,23,.06);
  --hc-shadow-md:0 4px 14px rgba(17,20,23,.08);
  --hc-shadow-lg:0 12px 34px rgba(17,20,23,.10);
  --hc-shadow-glow:0 0 22px rgba(47,191,245,.55);

  /* motion */
  --hc-motion-fast:120ms;
  --hc-motion-base:180ms;
  --hc-motion-slow:320ms;
  --hc-motion-ease:cubic-bezier(.2,.7,.3,1);

  --hc-container:1180px;
}

/* ---- the wordmark, as type rather than an image -------------------------
   Renders crisply at any size and recolours for dark backgrounds.
   Markup:  <span class="hc-logo">Human<b>&gt;codeable_</b></span>          */
.hc-logo{display:inline-flex;flex-direction:column;line-height:.9;
  font-family:var(--hc-font-sans);letter-spacing:-.01em;--hc-logo-size:22px}
.hc-logo>:first-child,.hc-logo{font-size:var(--hc-logo-size)}
.hc-logo::first-line{}
.hc-logo .script,.hc-logo>span{font-family:var(--hc-font-script);color:var(--hc-cyan);
  font-size:1em;text-shadow:var(--hc-shadow-glow);padding-left:.06em}
.hc-logo b{font-family:var(--hc-font-sans);font-weight:300;color:var(--hc-grey);
  font-size:.86em;letter-spacing:-.02em;margin-top:-.12em}
.hc-logo.on-dark b{color:var(--hc-grey-300)}
.hc-logo.sm{--hc-logo-size:17px}
.hc-logo.lg{--hc-logo-size:40px}
.hc-logo.xl{--hc-logo-size:72px}
.hc-logo.flat .script,.hc-logo.flat>span{text-shadow:none}