@charset "UTF-8";
/* ==========================================================================
   Caseform — design system stylesheet
   Caseform AI Limited · SC852128
   Fonts are self-hosted: no third-party request is made when this page loads.
   Layer order: fonts → tokens → reset → primitives → components → utilities.
   No inline styles are used anywhere in the markup.
   ========================================================================== */

/* ---------------------------------------------------------------- 0. FONTS */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/inter-light.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-medium.woff2") format("woff2");
}

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  color-scheme: light dark;

  /* -- brand constants (never redefined by theme) ------------------------ */
  --cf-brand-black: #000000;
  --cf-brand-white: #ffffff;

  /* -- neutral ramp ------------------------------------------------------ */
  --cf-n-000: #ffffff;
  --cf-n-050: #f5f4f2;
  --cf-n-100: #eae8e5;
  --cf-n-200: #dddad5;
  --cf-n-300: #c2bfba;
  --cf-n-400: #9b9a97;
  --cf-n-500: #6d6d71;
  --cf-n-600: #57585c;
  --cf-n-700: #3a3b3e;
  --cf-n-800: #202126;
  --cf-n-900: #101114;
  --cf-n-950: #08080a;

  /* -- functional colour (used for meaning, never decoration) ------------ */
  --cf-signal: #2e5aac;
  --cf-signal-strong: #1e3e7b;
  --cf-caution: #8a5a12;
  --cf-caution-tint: #fbf3e6;

  /* -- semantic surfaces (light theme is the default) -------------------- */
  --cf-paper: var(--cf-n-000);
  --cf-surface: var(--cf-n-050);
  --cf-hairline: var(--cf-n-200);
  --cf-hairline-strong: var(--cf-n-300);
  --cf-boundary: #8d8d92;            /* interactive borders: 3.30:1 on paper */
  --cf-ink: #0b0b0c;
  --cf-ink-2: var(--cf-n-700);
  --cf-ink-3: var(--cf-n-500);
  --cf-link: var(--cf-signal);
  --cf-link-hover: var(--cf-signal-strong);
  --cf-focus: var(--cf-signal);
  --cf-inverse-paper: var(--cf-brand-black);
  --cf-inverse-ink: var(--cf-brand-white);
  --cf-inverse-ink-2: rgba(255, 255, 255, 0.72);
  --cf-inverse-hairline: rgba(255, 255, 255, 0.18);
  --cf-inverse-boundary: rgba(255, 255, 255, 0.42);   /* 3.94:1 on brand black */

  /* -- typography -------------------------------------------------------- */
  --cf-font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --cf-font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas,
    "Liberation Mono", monospace;

  --cf-w-light: 300;
  --cf-w-regular: 400;
  --cf-w-medium: 500;
  --cf-w-semibold: 600;

  /* fluid scale, 320px → 1280px viewport */
  --cf-t-micro: 0.6875rem;                                   /* 11px  */
  --cf-t-small: 0.8125rem;                                   /* 13px  */
  --cf-t-body: 1rem;                                         /* 16px  */
  --cf-t-body-lg: 1.125rem;                                  /* 18px  */
  --cf-t-h4: clamp(1.125rem, 0.99rem + 0.42vw, 1.3125rem);
  --cf-t-h3: clamp(1.375rem, 1.16rem + 0.73vw, 1.75rem);
  --cf-t-h2: clamp(1.75rem, 1.36rem + 1.35vw, 2.5rem);
  --cf-t-h1: clamp(2.25rem, 1.55rem + 2.4vw, 3.5rem);
  --cf-t-display: clamp(2.75rem, 1.6rem + 4vw, 5rem);

  --cf-lh-tight: 1.1;
  --cf-lh-snug: 1.25;
  --cf-lh-normal: 1.55;
  --cf-lh-loose: 1.7;

  --cf-track-display: -0.02em;
  --cf-track-heading: -0.01em;
  --cf-track-eyebrow: 0.16em;
  --cf-track-wordmark: 0.14em;

  /* -- space: 4px base, 8pt rhythm --------------------------------------- */
  --cf-s-1: 0.25rem;
  --cf-s-2: 0.5rem;
  --cf-s-3: 0.75rem;
  --cf-s-4: 1rem;
  --cf-s-5: 1.5rem;
  --cf-s-6: 2rem;
  --cf-s-7: 3rem;
  --cf-s-8: 4rem;
  --cf-s-9: 6rem;
  --cf-s-10: 8rem;

  /* -- shape, line, motion ----------------------------------------------- */
  --cf-radius-sm: 2px;
  --cf-radius-md: 4px;
  --cf-border: 1px;
  --cf-measure: 62ch;
  --cf-measure-tight: 46ch;
  --cf-container: 68rem;
  --cf-container-narrow: 44rem;
  --cf-gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3rem);

  --cf-ease: cubic-bezier(0.2, 0, 0.1, 1);
  --cf-dur-1: 120ms;
  --cf-dur-2: 200ms;
  --cf-dur-3: 320ms;

}

@media (prefers-color-scheme: dark) {
  :root {
    --cf-paper: #0d0e11;
    --cf-surface: #15171b;
    --cf-hairline: #26282d;
    --cf-hairline-strong: #35383e;
    --cf-boundary: #6a6a70;
    --cf-ink: #f4f4f5;
    --cf-ink-2: #c9cbd0;
    --cf-ink-3: #9a9da4;
    --cf-link: #8fb0f0;
    --cf-link-hover: #b3c9f6;
    --cf-focus: #8fb0f0;
    --cf-caution: #e0b878;
    --cf-caution-tint: #221c12;
    --cf-inverse-paper: var(--cf-brand-black);
    --cf-inverse-ink: var(--cf-brand-white);
  }
}

/* ---------------------------------------------------------------- 2. RESET */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--cf-paper);
  color: var(--cf-ink);
  font-family: var(--cf-font-sans);
  font-size: var(--cf-t-body);
  font-weight: var(--cf-w-regular);
  line-height: var(--cf-lh-normal);
  font-feature-settings: "cv05" 1, "ss01" 1, "tnum" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
svg { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
strong, b { font-weight: var(--cf-w-semibold); }

:where(a) {
  color: var(--cf-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
:where(a:hover) { color: var(--cf-link-hover); }

:focus-visible {
  outline: 2px solid var(--cf-focus);
  outline-offset: 2px;
  border-radius: var(--cf-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------- 3. PRIMITIVES */
.cf-container {
  width: 100%;
  max-width: var(--cf-container);
  margin-inline: auto;
  padding-inline: var(--cf-gutter);
}
.cf-container--narrow { max-width: var(--cf-container-narrow); }

.cf-section { padding-block: var(--cf-s-9); }
.cf-section--tight { padding-block: var(--cf-s-7); }
.cf-section + .cf-section { border-top: var(--cf-border) solid var(--cf-hairline); }

.cf-stack > * + * { margin-top: var(--cf-s-4); }
.cf-stack--lg > * + * { margin-top: var(--cf-s-6); }
.cf-stack--sm > * + * { margin-top: var(--cf-s-2); }

.cf-prose { max-width: var(--cf-measure); }
.cf-prose p + p { margin-top: var(--cf-s-4); }

.cf-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cf-skip-link {
  position: absolute;
  inset-inline-start: var(--cf-s-4);
  inset-block-start: -100%;
  z-index: 100;
  padding: var(--cf-s-2) var(--cf-s-4);
  background-color: var(--cf-paper);
  border: var(--cf-border) solid var(--cf-ink);
  border-radius: var(--cf-radius-md);
  text-decoration: none;
}
.cf-skip-link:focus { inset-block-start: var(--cf-s-4); }

/* --------------------------------------------------------- 4. TYPOGRAPHY */
.cf-display {
  font-size: var(--cf-t-display);
  font-weight: var(--cf-w-light);
  line-height: var(--cf-lh-tight);
  letter-spacing: var(--cf-track-display);
}
.cf-h1 { font-size: var(--cf-t-h1); font-weight: var(--cf-w-light); line-height: var(--cf-lh-tight); letter-spacing: var(--cf-track-display); }
.cf-h2 { font-size: var(--cf-t-h2); font-weight: var(--cf-w-light); line-height: var(--cf-lh-snug); letter-spacing: var(--cf-track-heading); }
.cf-h3 { font-size: var(--cf-t-h3); font-weight: var(--cf-w-regular); line-height: var(--cf-lh-snug); letter-spacing: var(--cf-track-heading); }
.cf-h4 { font-size: var(--cf-t-h4); font-weight: var(--cf-w-medium); line-height: var(--cf-lh-snug); }

.cf-lead { max-width: var(--cf-measure-tight); font-size: var(--cf-t-body-lg); font-weight: var(--cf-w-light); line-height: var(--cf-lh-loose); color: var(--cf-ink-2); }
.cf-small { font-size: var(--cf-t-small); }
.cf-fine { font-size: var(--cf-t-micro); line-height: var(--cf-lh-normal); color: var(--cf-ink-3); }
.cf-muted { color: var(--cf-ink-3); }
.cf-mono { font-family: var(--cf-font-mono); font-size: 0.9em; letter-spacing: -0.01em; }

.cf-eyebrow {
  font-size: var(--cf-t-micro);
  font-weight: var(--cf-w-medium);
  letter-spacing: var(--cf-track-eyebrow);
  text-transform: uppercase;
  color: var(--cf-ink-3);
}

.cf-rule {
  width: 3.5rem;
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--cf-border) solid var(--cf-hairline-strong);
}

/* -------------------------------------------------------------- 5. BRAND */
.cf-logo { display: inline-block; color: currentColor; }

/* Clear space (half the mark's height on every side) is the responsibility of the
   surrounding layout: give the logo's container that much padding or margin. It
   cannot live on .cf-logo itself, because the mask fills the border box. */

/* ---------------------------------------------------------- 6. COMPONENTS */

/* 6.1 Button ------------------------------------------------------------- */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-s-2);
  min-height: 2.75rem;
  padding: var(--cf-s-3) var(--cf-s-5);
  border: var(--cf-border) solid transparent;
  border-radius: var(--cf-radius-md);
  font-size: var(--cf-t-small);
  font-weight: var(--cf-w-medium);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cf-dur-2) var(--cf-ease),
              color var(--cf-dur-2) var(--cf-ease),
              border-color var(--cf-dur-2) var(--cf-ease);
}
.cf-btn--primary {
  background-color: var(--cf-ink);
  border-color: var(--cf-ink);
  color: var(--cf-paper);
}
.cf-btn--primary:hover { background-color: var(--cf-n-700); border-color: var(--cf-n-700); color: var(--cf-paper); }
.cf-btn--secondary {
  background-color: transparent;
  border-color: var(--cf-boundary);
  color: var(--cf-ink);
}
.cf-btn--secondary:hover { border-color: var(--cf-ink); color: var(--cf-ink); }
.cf-btn--quiet { background: none; border-color: transparent; color: var(--cf-ink-2); padding-inline: var(--cf-s-2); }
.cf-btn--quiet:hover { color: var(--cf-ink); }
.cf-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* 6.2 Field -------------------------------------------------------------- */
.cf-field { display: flex; flex-direction: column; gap: var(--cf-s-2); }
.cf-label { font-size: var(--cf-t-small); font-weight: var(--cf-w-medium); }
.cf-input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--cf-s-3) var(--cf-s-4);
  background-color: var(--cf-paper);
  border: var(--cf-border) solid var(--cf-boundary);
  border-radius: var(--cf-radius-md);
  transition: border-color var(--cf-dur-1) var(--cf-ease);
}
.cf-input::placeholder { color: var(--cf-ink-3); }
.cf-input:hover { border-color: var(--cf-ink-3); }
.cf-input:focus-visible { border-color: var(--cf-focus); }
.cf-hint { font-size: var(--cf-t-small); color: var(--cf-ink-3); }

.cf-check { display: flex; gap: var(--cf-s-3); align-items: flex-start; }
.cf-check input { margin-top: 0.28em; width: 1rem; height: 1rem; accent-color: var(--cf-ink); flex: none; }
.cf-check span { font-size: var(--cf-t-small); color: var(--cf-ink-2); }

/* 6.3 Inverse (brand black) panel --------------------------------------- */
.cf-inverse {
  background-color: var(--cf-inverse-paper);
  color: var(--cf-inverse-ink);
}
.cf-inverse .cf-lead,
.cf-inverse .cf-muted,
.cf-inverse .cf-fine { color: var(--cf-inverse-ink-2); }
.cf-inverse .cf-eyebrow { color: var(--cf-inverse-ink-2); }
.cf-inverse .cf-rule { border-top-color: var(--cf-inverse-hairline); }
.cf-inverse a { color: var(--cf-inverse-ink); }
.cf-inverse .cf-btn--primary { background-color: var(--cf-brand-white); border-color: var(--cf-brand-white); color: var(--cf-brand-black); }
.cf-inverse .cf-btn--primary:hover { background-color: var(--cf-n-200); border-color: var(--cf-n-200); }
.cf-inverse .cf-btn--secondary { border-color: var(--cf-inverse-boundary); color: var(--cf-inverse-ink); }
.cf-inverse .cf-btn--secondary:hover { border-color: var(--cf-inverse-ink); }
.cf-inverse .cf-input {
  background-color: transparent;
  border-color: var(--cf-inverse-boundary);
  color: var(--cf-inverse-ink);
}
.cf-inverse .cf-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.cf-inverse :focus-visible { outline-color: var(--cf-brand-white); }

/* 6.4 Header ------------------------------------------------------------- */
.cf-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: var(--cf-border) solid var(--cf-inverse-hairline);
  background-color: var(--cf-inverse-paper);
  color: var(--cf-inverse-ink);
}
.cf-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-s-4);
  min-height: 4.25rem;
}

/* 6.5 Hero --------------------------------------------------------------- */
.cf-hero { padding-block: clamp(3.5rem, 1.5rem + 8vw, 8rem); text-align: center; }
.cf-hero__lockup { margin-inline: auto;  }
.cf-hero__tagline {
  margin-top: var(--cf-s-5);
  font-size: var(--cf-t-small);
  font-weight: var(--cf-w-light);
  letter-spacing: var(--cf-track-eyebrow);
  text-transform: uppercase;
  color: var(--cf-inverse-ink-2);
}
.cf-hero__body { max-width: 40rem; margin-inline: auto; margin-top: var(--cf-s-6); }

/* 6.6 Waitlist form ------------------------------------------------------ */
.cf-waitlist { max-width: 30rem; margin-inline: auto; margin-top: var(--cf-s-7); text-align: start; }
.cf-waitlist__row { display: flex; flex-wrap: wrap; gap: var(--cf-s-2); }
.cf-waitlist__row .cf-input { flex: 1 1 14rem; }

/* 6.7 Principle grid ----------------------------------------------------- */
.cf-grid {
  display: grid;
  gap: var(--cf-s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 38rem) { .cf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .cf-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 62rem) { .cf-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.cf-item { padding-top: var(--cf-s-4); border-top: var(--cf-border) solid var(--cf-hairline); }
.cf-item__index { font-family: var(--cf-font-mono); font-size: var(--cf-t-micro); color: var(--cf-ink-3); }
.cf-item h3 { margin-top: var(--cf-s-3); }
.cf-item p { margin-top: var(--cf-s-3); color: var(--cf-ink-2); }

/* 6.8 Definition rows ---------------------------------------------------- */
.cf-defs { display: grid; gap: 0; }
.cf-defs > div {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: var(--cf-s-4);
  padding-block: var(--cf-s-4);
  border-top: var(--cf-border) solid var(--cf-hairline);
}
.cf-defs dt { font-size: var(--cf-t-small); font-weight: var(--cf-w-medium); color: var(--cf-ink-3); }
.cf-defs dd { margin: 0; }
@media (max-width: 34rem) {
  .cf-defs > div { grid-template-columns: 1fr; gap: var(--cf-s-1); }
}

/* 6.9 Notice ------------------------------------------------------------- */
.cf-notice {
  padding: var(--cf-s-4) var(--cf-s-5);
  border: var(--cf-border) solid var(--cf-hairline);
  border-inline-start: 3px solid var(--cf-caution);
  border-radius: var(--cf-radius-sm);
  background-color: var(--cf-caution-tint);
  font-size: var(--cf-t-small);
}

/* 6.10 Footer ------------------------------------------------------------ */
.cf-footer { padding-block: var(--cf-s-7); background-color: var(--cf-surface); border-top: var(--cf-border) solid var(--cf-hairline); }
.cf-footer__top { display: flex; flex-wrap: wrap; gap: var(--cf-s-6); justify-content: space-between; align-items: flex-start; }
.cf-footer__nav { display: flex; flex-wrap: wrap; gap: var(--cf-s-2) var(--cf-s-5); }
.cf-footer__nav a { color: var(--cf-ink-2); font-size: var(--cf-t-small); text-decoration: none; }
.cf-footer__nav a:hover { color: var(--cf-ink); text-decoration: underline; }
.cf-footer__legal { margin-top: var(--cf-s-6); padding-top: var(--cf-s-5); border-top: var(--cf-border) solid var(--cf-hairline); }
.cf-footer__legal > * + * { margin-top: var(--cf-s-2); }