@charset "UTF-8";
/* ==========================================================================
   Caseform — page styles for the pre-launch home page.
   Depends on caseform.css (tokens + components). Load this second.
   ========================================================================== */

/* --------------------------------------------------------------- logo art
   One source file per asset. The SVG is used as a mask and painted with
   `currentColor`, so the same file works in black, white or any brand tint
   without shipping a second, recoloured copy.
   -------------------------------------------------------------------- */
.cf-logo {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.cf-logo--wordmark {
  -webkit-mask-image: url("../img/caseform-wordmark.svg");
          mask-image: url("../img/caseform-wordmark.svg");
  width: var(--cf-logo-w, 8.5rem);
  aspect-ratio: 2728 / 356;
}

.cf-logo--mark {
  -webkit-mask-image: url("../img/caseform-mark.svg");
          mask-image: url("../img/caseform-mark.svg");
  width: var(--cf-logo-w, 6rem);   /* 96 px: the mark's minimum legible size */
  aspect-ratio: 1128 / 1038;
}

.cf-logo--lockup {
  -webkit-mask-image: url("../img/caseform-lockup.svg");
          mask-image: url("../img/caseform-lockup.svg");
  width: var(--cf-logo-w, 14rem);
  aspect-ratio: 2728 / 1232;
}

/* Without mask support, `background-color: currentColor` would paint a solid
   rectangle. Clear it on all three variants and substitute a text wordmark. */
@supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
  .cf-logo { background-color: transparent; width: auto; aspect-ratio: auto; }
  .cf-logo::after {
    content: "CASEFORM";
    font-weight: var(--cf-w-light);
    letter-spacing: var(--cf-track-wordmark);
    font-size: var(--cf-t-h3);
    color: currentColor;
  }
}

/* ------------------------------------------------------------------ header */
.cf-header__logo { --cf-logo-w: 7.25rem; }
.cf-header__logo,
.cf-footer__logo { text-decoration: none; }
.cf-footer__logo { --cf-logo-w: 6.5rem; color: var(--cf-ink); }

.cf-header .cf-btn--secondary {
  border-color: var(--cf-inverse-boundary);
  color: var(--cf-brand-white);
}
.cf-header .cf-btn--secondary:hover { border-color: var(--cf-brand-white); }
.cf-header :focus-visible { outline-color: var(--cf-brand-white); }

@media (max-width: 26rem) {
  .cf-header__cta { display: none; }
}

/* -------------------------------------------------------------------- hero
   The lockup is deliberately smaller than it wants to be. On a 1280x800 laptop
   and on a phone, every pixel it takes pushes the waitlist field - the only
   thing this page is for - below the fold. Measured, not guessed.
   -------------------------------------------------------------------- */
.cf-hero__lockup { color: var(--cf-brand-white); --cf-logo-w: clamp(13rem, 9rem + 13vw, 19rem); }

/* Short viewports (a small phone in portrait, or any phone in landscape) have
   no room to spare. Take it out of the logo rather than out of the form. */
@media (max-height: 44em) {
  .cf-hero { padding-block: var(--cf-s-5); }
  .cf-hero__lockup { --cf-logo-w: clamp(8.5rem, 28vw, 12rem); }
}

.cf-hero__audience {
  max-width: 34rem;
  margin-inline: auto;
  color: var(--cf-inverse-ink-2);
  font-size: var(--cf-t-body);
}

.cf-hero__tagline {
  /* the tagline is set to the width of the wordmark in the print lockup;
     on screen we simply track it out and let it wrap on small viewports */
  max-width: 34rem;
  margin-inline: auto;
}

.cf-hero .cf-waitlist .cf-label { color: var(--cf-brand-white); }
.cf-hero .cf-fine,
.cf-hero .cf-check span { color: rgba(255, 255, 255, 0.72); }
.cf-hero .cf-check a { color: var(--cf-brand-white); }
.cf-hero .cf-check input { accent-color: var(--cf-brand-white); }

/* --------------------------------------------------------------- statement
   One full-width line of type, black, between the two pale sections. It gives
   the lower half of the page a single visual event and carries the sentence
   that does the most work in the whole document.
   -------------------------------------------------------------------- */
.cf-statement { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }

.cf-statement__text {
  max-width: 28ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.75rem);
  font-weight: var(--cf-w-light);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cf-brand-white);
}

@media print {
  .cf-statement__text { color: #000; }
}

/* ----------------------------------------------------------------- notice */
.cf-notice { max-width: var(--cf-measure); }

/* ------------------------------------------------------------------ print */
@media print {
  .cf-header,
  .cf-waitlist { display: none; }
  body { background: #fff; color: #000; }
  .cf-inverse { background: #fff; color: #000; }
  .cf-hero__lockup { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}