/* Shared by the English and German marketing pages. Extracted so the two
   cannot drift apart: there is no build step here, and two copies of a
   hundred lines of CSS is how that starts. The demo page keeps its own —
   it is deliberately a different world. */
  /* The same world as the product: dusk on the ridge. The dark ground carries
     this page because it is read once — unlike the dashboard, which holds text
     all day and stays light. */
  :root {
    --dusk:      #101826;
    --dusk-2:    #17212f;
    --firn:      #eef2f5;
    --slate:     #1d2a36;
    --stone:     #5f7180;
    --haze:      #8fa3b3;
    --alpenglow: #ef5b25;
    --glacier:   #8fb3c4;
    --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
    /* Für die Maschinerie: die Bildunterschrift sagt, wer den Satz geschrieben
       hat. Sie ist nicht Teil der Stimme, also auch nicht Teil der Schrift. */
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --gutter: clamp(20px, 5vw, 72px);
    --measure: 60ch;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0;
    background: var(--dusk);
    color: #d3dee5;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--alpenglow); outline-offset: 3px; }
  h1, h2, h3 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; margin: 0; }
  .tnum { font-variant-numeric: tabular-nums; }

  /* The mark is the route. */
  .mark { text-decoration: none; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: #fff; letter-spacing: -0.035em; }

  nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
  .nav-links { display: flex; gap: 26px; font-size: 15px; font-weight: 600; color: var(--haze); }
  .nav-links a { text-decoration: none; }
  .nav-links a:hover { color: #fff; }
  @media (max-width: 680px) { .nav-links { display: none; } }

  .btn {
    display: inline-block; border: 0; cursor: pointer; text-decoration: none;
    background: var(--alpenglow); color: #fff;
    font: 700 15px/1 var(--sans); padding: 13px 22px; border-radius: 8px;
  }
  .btn:hover { background: #d94d1a; }
  .btn-quiet { background: transparent; color: #fff; border: 1px solid #33475c; }
  .btn-quiet:hover { background: #1b2837; }

  /* ── Einstieg ────────────────────────────────────────────────────────── */
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .cta-note { font-size: 14px; color: var(--stone); }

  .profile { display: block; width: 100%; height: auto; margin: clamp(6px, 2vw, 18px) 0 0; }
  @keyframes climb { to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .above { animation: none; stroke-dashoffset: 0; } }
  .waypoint { fill: var(--alpenglow); }
  .wp-label { font: 600 12px var(--sans); fill: #a9bcc7; }

  /* ── Sections ────────────────────────────────────────────────────────── */
  section { padding: clamp(44px, 6vw, 76px) 0; }
  .lit { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--haze); margin-bottom: 14px; }
  .lit::before { content: ""; width: 16px; height: 3px; background: var(--alpenglow); }
  h2 { font-size: clamp(28px, 4vw, 40px); color: #fff; }
  .lede { color: var(--haze); max-width: var(--measure); margin: 14px 0 0; }

  /* The snippet is the promise, so it is shown in full rather than described. */
  .snippet {
    margin-top: 34px; background: #0b131f; border: 1px solid #24313f;
    border-radius: 10px; padding: 20px 22px; overflow-x: auto;
    font: 13px/1.75 ui-monospace, "SF Mono", Menlo, monospace; color: #cfe0e6;
    white-space: pre;
  }
  .snippet .a { color: #f0b5ae; }

  footer { border-top: 1px solid #24313f; padding: 40px 0 64px; color: var(--stone); font-size: 14px; }
  .foot-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }

/* Language switch. The current language is a <b>, not a link — a link to the
   page you are on is a small lie the keyboard notices. */
.nav-right { display: flex; align-items: center; gap: 18px; }
.lang { display: flex; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.lang b { color: #fff; }
.lang a { color: var(--stone); text-decoration: none; }
.lang a:hover { color: #fff; }

/* ─────────────────────────────────────────────────────────────────────────
   Die Firnlinie.

   Ein Bild statt zwei: Die Route der Marke bekommt eine waagrechte Linie.
   Darunter ist sie gletscherblau und die Fläche schraffiert — die Fragen, die
   die Seite selbst beantwortet. Wo die Route sie durchstösst, wechselt sie auf
   Alpenglühen; ab da liegen die Wegmarken. Trichter und Grat sind dasselbe
   Diagramm. `firn` steht oben schon als Farbe: der Begriff kommt aus der
   Sprache, in der diese Seite ohnehin geschrieben ist.
   ───────────────────────────────────────────────────────────────────────── */
.below { fill: none; stroke: var(--glacier); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.above {
  fill: none; stroke: var(--alpenglow); stroke-width: 2.6;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: climb 1.9s cubic-bezier(.33,.1,.25,1) .35s forwards;
}
.firn { stroke: var(--glacier); stroke-width: 1; stroke-dasharray: 4 6; opacity: .55; }
.split-mark { stroke: #3b4d60; stroke-width: 1; stroke-dasharray: 3 5; }
.zone { font: 500 13px var(--sans); }
.zone.cold { fill: var(--glacier); }
.zone.warm { fill: #e2b8a4; }
.zone-n { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.firn-label { font: 500 12px var(--mono); fill: var(--glacier); opacity: .95; }
.figcap { margin: 14px 0 0; font-size: 13.5px; color: var(--stone); max-width: 68ch; }

/* Die eine Zahl bekommt die einzige grosse Zahl der Seite. */
.rate { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.rate .big { font-size: clamp(56px, 9vw, 104px); font-weight: 800; letter-spacing: -0.05em; color: var(--alpenglow); line-height: 0.85; font-variant-numeric: tabular-nums; }
.rate .parts { font-family: var(--mono); font-size: 13px; color: var(--haze); line-height: 1.8; }

.plumb { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px 32px; margin-top: 30px; }
.plumb div b { display: block; font-size: 21px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.plumb div span { font-size: 14px; color: var(--haze); }

/* ─────────────────────────────────────────────────────────────────────────
   Der Einstieg: das Produkt zeigen, nicht umschreiben.

   Die vorige Fassung begann mit „Das hier sind keine Funktionen" — eine
   Aussage über die Seite, nicht über das Produkt — und danach mit einem
   Diagramm, das eine Bildunterschrift braucht. Wer echohatch nicht kannte,
   hatte nach dem ersten Bildschirm kein Substantiv gelesen, das sagt, was
   das Ding ist. Jetzt steht das Widget im ersten Bild und der Satz daneben.
   ───────────────────────────────────────────────────────────────────────── */
.opener { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; padding: clamp(26px, 4vw, 48px) 0 clamp(30px, 5vw, 58px); }
@media (max-width: 900px) { .opener { grid-template-columns: 1fr; } }
.opener h1 { font-size: clamp(31px, 4.6vw, 52px); color: #fff; max-width: 18ch; }
.opener .lede { font-size: clamp(17px, 1.8vw, 20px); color: var(--haze); max-width: 46ch; margin: 18px 0 26px; }
.opener .lede b { color: #fff; font-weight: 700; }

/* Das Widget, so wie es auf einer fremden Seite steht. */
.site { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; color: #1b1b1b; }
.site .bar { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: #eef1f3; border-bottom: 1px solid #dfe4e8; }
.site .bar i { width: 9px; height: 9px; border-radius: 50%; background: #cbd3d9; display: block; }
.site .bar span { margin-left: 8px; font: 11.5px var(--mono); color: #7c8b96; }
.site .body { padding: 18px 20px 20px; }
.site h4 { margin: 0 0 3px; font-size: 15px; font-weight: 700; }
.site .field { margin-top: 10px; border: 1px solid #d9dee2; border-radius: 8px; padding: 9px 11px; font-size: 13.5px; color: #4a5560; background: #fbfcfd; }
.site .field.typed { color: #1b1b1b; }
.panel { margin-top: 12px; background: #f7f7f6; border-radius: 11px; padding: 15px 17px; font-size: 13.5px; line-height: 1.5; }
.panel .pq { font-weight: 700; font-size: 12.5px; margin: 0 0 4px; }
.panel .pa { margin: 0; }
.panel .psrc { display: inline-block; margin-top: 9px; font-size: 12px; color: #444; }
.panel .prow { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.panel .pbtn { border: 1px solid #d4d4d4; background: #fff; border-radius: 7px; padding: 5px 9px; font: 500 11.5px var(--sans); }

/* Der Ablauf in drei Bildern, direkt unter dem Einstieg. */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .steps3 { grid-template-columns: 1fr; } }
.steps3 > div { border: 1px solid var(--line); border-radius: 13px; padding: 19px; background: var(--dusk-2); }
.steps3 .n { font: 700 11px var(--mono); color: var(--alpenglow); letter-spacing: 0.11em; text-transform: uppercase; }
.steps3 h3 { margin-top: 9px; font-size: 18px; color: #fff; }
.steps3 p { margin: 8px 0 0; font-size: 14.5px; color: var(--haze); }
.steps3 .art { margin-top: 15px; border-radius: 9px; padding: 12px 13px; font-size: 12.5px; line-height: 1.45; }
.steps3 .art.light { background: #f7f7f6; color: #1b1b1b; }
.steps3 .art.dark { background: #0b131f; border: 1px solid var(--line); color: #cfe0e6; }
.steps3 .art .who { font: 11px var(--mono); color: #7c8b96; margin-bottom: 5px; }

/* ── Die Breite: was ein Arbeitsbereich tatsächlich tut ──────────────────
   Nicht eine Liste von Funktionen, sondern vier Dinge, die man den ganzen
   Tag tut, und darin benannt, was dafür da ist. Eine Zeile je Sache: Wer
   die Überschriften überfliegt, weiss den Umfang; wer eine Zeile liest,
   weiss, was sie ihm abnimmt. */
/* Die Spalte in `ch` zu bemessen war falsch: `ch` rechnet gegen die
   Schriftgrösse des Containers, die Überschrift ist aber fast doppelt so
   gross — „Wiederverwenden" lief damit aus seiner Spalte heraus und in den
   Text daneben. Jetzt eine Breite in Pixeln, die das längste Wort trägt, und
   Umbruch als Netz darunter. */
.doing { display: grid; grid-template-columns: minmax(0, 268px) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); padding: clamp(30px, 4vw, 52px) 0; border-top: 1px solid var(--line); align-items: start; }
@media (max-width: 900px) { .doing { grid-template-columns: 1fr; gap: 14px; } }
.doing > h2 { font-size: clamp(23px, 2.3vw, 28px); color: #fff; position: sticky; top: 28px; overflow-wrap: break-word; hyphens: auto; }
.doing .claim { font-size: clamp(17px, 1.7vw, 19px); color: #c2d0da; max-width: 60ch; margin: 0 0 22px; font-weight: 600; line-height: 1.4; }
.can { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 20px 30px; }
.can div b { display: block; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.can div span { display: block; margin-top: 4px; font-size: 14px; color: var(--haze); }
.can div span code { font-family: var(--mono); font-size: 12.5px; color: var(--glacier); }