/* Artisign website — artisign.dev
   Tokens mirror design/design-system/tokens.json one-for-one.
   Change a value there and here, or the design and the site drift apart. */

:root {
  /* color */
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f7fb;
  --color-surface-code: #12141c;
  --color-text: #0f1115;
  --color-text-secondary: #3c4049;
  --color-text-muted: #6b7280;
  --color-text-on-code: #e6e8f0;
  --color-text-on-code-muted: #8b90a3;
  --color-border: #e3e5ea;
  --color-border-strong: #c7cad4;
  --color-accent: #2a3edb;
  --color-accent-hover: #2231b5;
  --color-accent-subtle: #eef1ff;
  --color-success: #1a9c5c;
  --color-footer-bg: #0f1115;
  --color-footer-text: #c7cad4;
  --color-footer-text-muted: #7a7f8e;
  --color-text-on-accent: #ffffff;
  --color-overlay-on-code: rgba(255, 255, 255, 0.08);

  /* spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 80px;
  --spacing-3xl: 120px;

  /* typography */
  --font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --size-caption: 0.8125rem;
  --size-body: 1.0625rem;
  --size-body-lg: 1.25rem;
  --size-code: 0.9375rem;
  --size-headline-section: 2.25rem;
  --size-headline-hero: 3rem;
  --size-eyebrow: 0.9375rem;
  --line-height-tight: 1.15;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;

  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-card: 0 1px 3px rgba(15, 17, 21, 0.08);
  --shadow-frame: 0 24px 48px rgba(15, 17, 21, 0.14);

  /* long-form legal prose: 60–75 characters per line */
  --measure: 68ch;
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-hover);
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Dark footer needs its own focus colour to stay visible. */
.site-footer :focus-visible {
  outline-color: #ffffff;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

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

/* --------------------------------------------------------------- bands */

.band {
  background: var(--color-surface);
  padding: var(--spacing-3xl) var(--spacing-2xl);
}

.band--alt {
  background: var(--color-surface-alt);
}

.band__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.band__inner--wide-gap {
  gap: var(--spacing-xl);
}

.band__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.headline {
  font-size: var(--size-headline-section);
  line-height: var(--line-height-heading);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}

.lede {
  font-size: var(--size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.caption {
  font-size: var(--size-caption);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
  margin: 0;
}

.meta-label {
  font-size: var(--size-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  margin: 0;
}

code {
  font-family: var(--font-family-mono);
}

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: 52px;
  padding: 0 var(--spacing-lg);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-family);
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: 1px solid var(--color-accent);
}

.btn:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-on-accent);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.link-strong {
  color: var(--color-accent);
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.link-strong:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------- code blocks */

.code-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  max-width: 100%;
  background: var(--color-surface-code);
  border-radius: var(--radius-pill);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
}

.code-pill__text {
  font-family: var(--font-family-mono);
  font-size: var(--size-code);
  color: var(--color-text-on-code);
  white-space: pre;
  overflow-x: auto;
}

.terminal {
  background: var(--color-surface-code);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-card);
}

.terminal__lines {
  font-family: var(--font-family-mono);
  font-size: var(--size-code);
  line-height: var(--line-height-body);
  color: var(--color-text-on-code);
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}

/* The copy affordance is inert without JS, so it stays hidden until
   copy.js unhides it. The command itself is always plain selectable text. */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 var(--spacing-md);
  background: var(--color-overlay-on-code);
  color: var(--color-text-on-code-muted);
  font-family: var(--font-family);
  font-size: var(--size-caption);
  font-weight: var(--weight-semibold);
  border: 0;
  cursor: pointer;
}

/* An author `display` beats the UA stylesheet's [hidden] rule, so without
   this the copy buttons stay visible when copy.js never runs. */
.copy-btn[hidden] {
  display: none;
}

.copy-btn:hover {
  color: var(--color-text-on-code);
}

.copy-btn[data-copied="true"] {
  color: var(--color-success);
}

.code-pill .copy-btn {
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
}

.terminal .copy-btn {
  margin-top: var(--spacing-md);
  border-radius: var(--radius-sm);
}

.code-proof {
  background: var(--color-surface-code);
  color: var(--color-text-on-code);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--size-code);
  line-height: var(--line-height-body);
  margin: 0;
  overflow-x: auto;
}

/* ---------------------------------------------------------- screenshot */

.frame {
  display: block;
  max-width: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-frame);
  border: 1px solid var(--color-border);
  line-height: 0;
}

.frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* designed-with-itself.png is illegible below ~900px: the frame scrolls
   horizontally instead of shrinking the image. Deliberate. */
.frame--wide {
  max-width: none;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.frame--wide__scroll {
  min-width: 900px;
}

/* ------------------------------------------------------------ features */

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.feature__headline {
  font-size: var(--size-body-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.feature__body {
  font-size: var(--size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---------------------------------------------------------------- hero */

.hero {
  padding: var(--spacing-2xl);
  gap: var(--spacing-xl);
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

.hero__text {
  flex: 0 0 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.hero__wordmark {
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.hero__headline {
  font-size: var(--size-headline-hero);
  line-height: var(--line-height-tight);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}

.hero__pitch {
  font-size: var(--size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.hero__actions {
  gap: var(--spacing-md);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.hero__subline {
  font-size: var(--size-caption);
  color: var(--color-text-muted);
}

.hero__media {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* -------------------------------------------------------- how it works */

.step {
  gap: var(--spacing-xl);
  display: flex;
  align-items: center;
}

.step__text {
  flex: 1;
  min-width: 0;
}

.step__media {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* ----------------------------------------------------- differentiators */

.diff-grid {
  gap: var(--spacing-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.diff-cell {
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* -------------------------------------------------------------- limits */

.limits {
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.limits li {
  font-size: var(--size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.limits strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* -------------------------------------------------------- install step */

.install-step {
  gap: var(--spacing-sm);
  display: flex;
  flex-direction: column;
}

.closing {
  gap: var(--spacing-md);
  display: flex;
  flex-direction: column;
}

.closing__links {
  gap: var(--spacing-lg);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------- footer */

.site-footer {
  background: var(--color-footer-bg);
  padding: var(--spacing-xl) var(--spacing-2xl);
}

.site-footer__inner {
  gap: var(--spacing-lg);
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.site-footer__top {
  gap: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-footer__brand {
  color: var(--color-footer-text);
  font-size: var(--size-body);
}

.site-footer__links {
  gap: var(--spacing-lg);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-link {
  color: var(--color-footer-text);
  font-size: var(--size-caption);
  font-weight: var(--weight-regular);
  text-decoration: none;
}

.footer-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer__legal {
  color: var(--color-footer-text-muted);
  font-size: var(--size-caption);
}

/* ---------------------------------------------------------- legal page */

.legal-header {
  padding: var(--spacing-lg) var(--spacing-2xl);
  border-bottom: 1px solid var(--color-border);
}

.legal-header__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.legal-header__wordmark {
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
}

.legal-header__wordmark:hover {
  text-decoration: underline;
}

.legal {
  padding: var(--spacing-2xl);
}

.legal__inner {
  max-width: var(--measure);
  margin: 0 auto;
}

/* German compound nouns are wider than a phone viewport at heading sizes:
   "Datenschutzerklärung" measures 351px at 28px against 350px of available
   width on a 390px screen. hyphens gives a clean syllable break where the
   browser ships a German dictionary (the pages declare lang="de"), but a
   headless Chromium does not, so overflow-wrap is the guarantee that it
   never overflows — and the h1 below is sized so neither has to fire. */
.legal h1,
.legal h2,
.legal h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

.legal p,
.legal li,
.legal address {
  overflow-wrap: break-word;
}

.legal h1 {
  font-size: var(--size-headline-hero);
  line-height: var(--line-height-tight);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--spacing-md);
}

.legal h2 {
  font-size: var(--size-headline-section);
  line-height: var(--line-height-heading);
  font-weight: var(--weight-bold);
  margin: var(--spacing-xl) 0 var(--spacing-sm);
}

.legal h3 {
  font-size: var(--size-body-lg);
  line-height: var(--line-height-heading);
  font-weight: var(--weight-semibold);
  margin: var(--spacing-lg) 0 var(--spacing-xs);
}

.legal p,
.legal li {
  font-size: var(--size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.legal p {
  margin: 0 0 var(--spacing-md);
}

.legal ul {
  margin: 0 0 var(--spacing-md);
  padding-left: 1.25em;
}

.legal li {
  margin-bottom: var(--spacing-xs);
}

.legal__intro {
  font-size: var(--size-body-lg);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-lg);
}

.legal__updated {
  font-size: var(--size-caption);
  color: var(--color-text-muted);
  margin: var(--spacing-xl) 0 0;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

/* An address block, not italic prose. */
.legal address {
  font-style: normal;
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-md);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .band {
    padding: var(--spacing-2xl) var(--spacing-md);
  }

  .hero {
    padding: var(--spacing-xl) var(--spacing-md);
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-lg);
  }

  .hero__text {
    flex: 1 1 auto;
  }

  .hero__headline {
    font-size: 2.25rem;
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__media {
    justify-content: flex-start;
  }

  /* Always text first, then image — the left/right alternation of step-2
     is not preserved in a single column. */
  .step {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-lg);
  }

  .step__media {
    order: 2;
    justify-content: flex-start;
  }

  .step__text {
    order: 1;
  }

  .headline {
    font-size: 1.75rem;
  }

  .site-footer {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .legal,
  .legal-header {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .legal h1 {
    font-size: 2.25rem;
  }

  .legal h2 {
    font-size: 1.75rem;
  }
}

@media (max-width: 700px) {
  .diff-grid {
    grid-template-columns: 1fr;
  }
}

/* Phone widths: the German legal headings need a smaller step to fit on
   one or two lines rather than relying on hyphenation for every heading. */
@media (max-width: 480px) {
  /* The longest word on these pages needs about 12.5px of width per 1px of
     font-size. 6.4vw keeps it inside the measure from 320px upward, where a
     fixed step would still break "Datenschutzerklärung" mid-word. */
  .legal h1 {
    font-size: clamp(1.25rem, 6.4vw, 1.75rem);
  }

  /* Same reasoning for h2, with its own ratio: "Verbraucherstreitbeilegung"
     has no hyphen to break at and, at bold weight, needs 15.7px of width per
     1px of font-size — 17.8px is the largest that fits a 320px screen. */
  .legal h2 {
    font-size: clamp(1.0625rem, 5.4vw, 1.375rem);
  }

  .legal h3 {
    font-size: 1.0625rem;
  }
}

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