/* GhostCard v2. Load fonts.css separately before this file. */
:root {
  --gc-violet: #B600FF;
  --gc-ink: #050507;
  --gc-carbon: #111116;
  --gc-chalk: #F5F3FA;
  --gc-ash: #AAA5B5;
  --gc-lilac: #D7ADFF;
  --gc-graphite: #29262F;

  --gc-background: var(--gc-ink);
  --gc-surface: var(--gc-carbon);
  --gc-text: var(--gc-chalk);
  --gc-text-secondary: var(--gc-ash);
  --gc-link: var(--gc-lilac);
  --gc-border-decorative: var(--gc-graphite);
  --gc-border-control: var(--gc-ash);
  --gc-focus: var(--gc-lilac);
  --gc-action-background: var(--gc-lilac);
  --gc-action-text: var(--gc-ink);

  --gc-font-display: "Space Grotesk", Arial, sans-serif;
  --gc-font-body: "DM Sans", Arial, sans-serif;
  --gc-weight-display: 500;
  --gc-weight-body: 400;
  --gc-weight-label: 500;
  --gc-size-hero: clamp(2.75rem, 6vw, 5rem);
  --gc-size-heading: clamp(2rem, 4vw, 3rem);
  --gc-size-body: 1rem;
  --gc-size-label: .875rem;
  --gc-content-width: 75rem;
  --gc-gutter: clamp(1.25rem, 5vw, 4rem);
  --gc-space-unit: .5rem;
  --gc-radius-control: .5rem;
}

/* Optional classes. No global reset or element selectors are applied. */
.gc-theme {
  color-scheme: dark;
  background: var(--gc-background);
  color: var(--gc-text);
  font: var(--gc-weight-body) var(--gc-size-body)/1.6 var(--gc-font-body);
  font-optical-sizing: auto;
}
.gc-container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--gc-content-width) + 2 * var(--gc-gutter));
  margin-inline: auto;
  padding-inline: var(--gc-gutter);
}
.gc-hero-heading,
.gc-heading {
  margin: 0;
  color: var(--gc-text);
  font-family: var(--gc-font-display);
  font-weight: var(--gc-weight-display);
  text-wrap: balance;
}
.gc-hero-heading {
  font-size: var(--gc-size-hero);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.gc-heading {
  font-size: var(--gc-size-heading);
  line-height: 1.1;
  letter-spacing: -.035em;
}
.gc-copy { max-width: 62ch; }
.gc-copy--secondary { color: var(--gc-text-secondary); }
.gc-label {
  font: var(--gc-weight-label) var(--gc-size-label)/1.4 var(--gc-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gc-image {
  display: block;
  width: 100%;
  height: auto;
}
.gc-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--gc-radius-control);
  background: var(--gc-action-background);
  color: var(--gc-action-text);
  font: var(--gc-weight-label) 1rem/1.5 var(--gc-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.gc-button:hover { background: var(--gc-chalk); }
.gc-button:active { background: var(--gc-ash); }
.gc-button--secondary {
  background: transparent;
  color: var(--gc-chalk);
  border-color: var(--gc-border-control);
}
.gc-button--secondary:hover { background: var(--gc-carbon); }
.gc-button--secondary:active { background: var(--gc-graphite); }
.gc-button:disabled {
  background: var(--gc-carbon);
  color: var(--gc-ash);
  border-color: var(--gc-graphite);
  cursor: not-allowed;
}
.gc-link {
  color: var(--gc-link);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.gc-link:hover { color: var(--gc-chalk); }
.gc-button:focus-visible,
.gc-link:focus-visible {
  outline: 3px solid var(--gc-focus);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .gc-button { transition: none; }
}