/*
 * sayform3d.com landing page. The colour values are a copy of the ones this page uses from
 * frontend/src/brand/tokens.css (backend/tests/test_landing_files.py fails when they drift apart);
 * the rules of docs/brand.md apply. No external requests: the fonts are self-hosted (SIL OFL 1.1, see fonts/).
 */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("/fonts/familjen-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens (light) ---------- */
:root {
  color-scheme: light dark;
  --sf-bg: #f4f6f5;
  --sf-surface: #ffffff;
  --sf-surface-sunken: #e8edec;
  --sf-line: #d2dad9;
  --sf-line-strong: #768284;
  --sf-ink: #172022;
  --sf-ink-muted: #4c595b;
  --sf-ink-subtle: #5e6b6d;
  --sf-petrol-fg: #0f6e7c;
  --sf-petrol-strong: #0a5560;
  --sf-on-petrol: #ffffff;
  --sf-petrol-tint: #dcf0f2;
  --sf-petrol-fill: #14808f;
  --sf-rasp-fill: #d6336c;
  --sf-lilac-fill: #8c76f0;
  --sf-sun-fill: #f4b400;
  --sf-on-sun: #172022;
  --sf-focus: #5b43d6;
  --sf-shadow-2: 0 6px 16px -4px rgb(23 32 34 / 0.12), 0 2px 4px rgb(23 32 34 / 0.05);

  --font-display: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --gutter: 16px;
}

/* ---------- tokens (dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --sf-bg: #0f1516;
    --sf-surface: #172022;
    --sf-surface-sunken: #0a0f10;
    --sf-line: #283335;
    --sf-line-strong: #718283;
    --sf-ink: #e8edec;
    --sf-ink-muted: #a6b2b1;
    --sf-ink-subtle: #8f9c9b;
    --sf-petrol-fg: #4fb8c4;
    --sf-petrol-strong: #7acdd6;
    --sf-on-petrol: #0b1a1c;
    --sf-petrol-tint: #12343a;
    --sf-petrol-fill: #4fb8c4;
    --sf-rasp-fill: #ff7aa2;
    --sf-lilac-fill: #b9a9fa;
    --sf-sun-fill: #f4b400;
    --sf-on-sun: #172022;
    --sf-focus: #b9a9fa;
    --sf-shadow-2: 0 6px 16px -4px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
  }
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--sf-bg);
  color: var(--sf-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* layer lines: the bottom of the page looks like the side of a print */
body::before {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 24vh;
  z-index: -1;
  background: repeating-linear-gradient(to bottom, var(--sf-line) 0 1px, transparent 1px 7px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
  opacity: 0.6;
  pointer-events: none;
}

p { margin: 0; }
[lang="de"] p, p:not([lang]) { hyphens: auto; }

.name { hyphens: none; white-space: nowrap; }

a { color: var(--sf-petrol-fg); text-underline-offset: 0.18em; }

:focus-visible {
  outline: 2px solid var(--sf-focus);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 12px 16px;
  background: var(--sf-surface);
  border-radius: 4px;
  box-shadow: var(--sf-shadow-2);
  z-index: 10;
}
.skip:focus { top: 12px; }

/* ---------- header ---------- */
.top {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px var(--gutter) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 4px;
}

.lockup { display: block; height: 26px; width: auto; }
.lk-ink { fill: var(--sf-ink); }
.lk-corner { fill: var(--sf-petrol-fill); }

/* ---------- hero ---------- */
.hero {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--gutter) 24px;
  display: grid;
  gap: 40px;
  align-content: center;
}

.copy { max-width: 40rem; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--sf-line);
  border-radius: 999px;
  background: var(--sf-surface);
  color: var(--sf-ink-muted);
  font-size: 14px;
  line-height: 1.3;
}
.status .sep { color: var(--sf-ink-subtle); }

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sf-sun-fill);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-sun-fill) 28%, transparent);
  animation: blink 2.4s var(--ease-standard) infinite;
}

h1 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(39px, 10.5vw, 76px);
  line-height: 1.02;
  text-wrap: balance;
}

.lead {
  margin-top: 20px;
  max-width: 34rem;
  font-size: 18px;
  color: var(--sf-ink);
  text-wrap: pretty;
}
.lead.en {
  margin-top: 8px;
  font-size: 16px;
  color: var(--sf-ink-muted);
}

.cta { margin-top: 32px; }

.button {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  min-height: 56px;
  padding: 10px 20px 10px 22px;
  border-radius: 8px;
  background: var(--sf-petrol-fg);
  color: var(--sf-on-petrol);
  text-decoration: none;
  box-shadow: var(--sf-shadow-2);
  transition: background-color 140ms var(--ease-standard), transform 140ms var(--ease-standard);
}
.button:hover { background: var(--sf-petrol-strong); }
.button:active { transform: translateY(1px); }

.button-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}
.button-sub {
  grid-row: 2;
  font-size: 14px;
  line-height: 1.3;
  opacity: 0.86;
}
.arrow {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms var(--ease-standard);
}
.button:hover .arrow { transform: translateX(3px); }

.note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--sf-ink-subtle);
}

/* ---------- the print ---------- */
.art {
  margin: 0;
  justify-self: center;
  width: min(60vw, 280px);
}

.print { display: block; width: 100%; height: auto; overflow: visible; }

.f-petrol { fill: var(--sf-petrol-fill); }
.f-sun { fill: var(--sf-sun-fill); }
.f-lilac { fill: var(--sf-lilac-fill); }
.f-rasp { fill: var(--sf-rasp-fill); }

.ghost path {
  fill: none;
  stroke: var(--sf-line-strong);
  stroke-width: 0.12;
  stroke-dasharray: 0.45 0.35;
}

.bed { stroke: var(--sf-ink-subtle); stroke-width: 0.3; stroke-linecap: round; }
.rail { stroke: var(--sf-ink-subtle); stroke-width: 0.12; stroke-dasharray: 0.3 0.3; }
.carriage { fill: var(--sf-ink); }

/* The print stops at y = 9.6 (about two thirds) and the head keeps moving: "happening soon". The final state is
   the static default, so a browser without these animations, and reduced motion, shows the same picture. */
.print-height { transform: translateY(9.6px); animation: rise 2.6s var(--ease-standard) both; }
.gantry { transform: translateY(9.6px); animation: rise 2.6s var(--ease-standard) both; }
.head { transform: translateX(16px); animation: travel 3.2s ease-in-out 2.6s infinite alternate both; }

@keyframes rise { from { transform: translateY(31px); } }
@keyframes travel { from { transform: translateX(16px); } 50% { transform: translateX(4px); } to { transform: translateX(28px); } }
@keyframes blink { 50% { opacity: 0.35; } }

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

/* ---------- footer ---------- */
.foot {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px var(--gutter) 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  font-size: 14px;
  color: var(--sf-ink-subtle);
}
.foot nav { display: flex; gap: 8px; }
.foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  margin-left: -8px;
  color: var(--sf-ink-muted);
}
.foot .copyright { margin-left: auto; }

/* ---------- wider screens: text left, print right ---------- */
@media (min-width: 900px) {
  .lockup { height: 30px; }
  .top { padding-top: 32px; }
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 48px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .art { width: min(100%, 420px); }
  .lead { font-size: 20px; }
}

/* ---------- legal pages ---------- */
.legal {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px var(--gutter) 48px;
}
.legal article { max-width: 68ch; }
.legal h1 { font-size: clamp(31px, 7vw, 49px); margin-top: 0; }
.legal h2 {
  margin: 32px 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.legal p, .legal ul { margin: 0 0 12px; }
.legal ul { padding-left: 1.25em; }
.legal address { font-style: normal; margin-bottom: 12px; }
.legal .back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; }
.legal .en-note { color: var(--sf-ink-muted); }