/* fehlo.de. Modelled on Apple's product pages: system type, black sections for the product,
   light grey for the reading parts, the orange full stop as the only accent. Scroll effects
   live under .motion, which site.js sets unless the visitor asked for reduced motion, so the
   page reads complete without JavaScript.

   Spielwiese build 2026-10-29: the zoom tour became a scroll-scrubbed stack of five cards
   that opens piece by piece, the hero receives a live error-notification stream, the DSN
   example types itself, and small Apple-style transitions (blur reveals, press feedback,
   smooth FAQ) were added. Colours, type, spacing and copy stay as they were. */

:root {
  --black: #000;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #6e6e73;
  --ink-dim: #3a3a3c;
  --line-dark: #2c2c2e;
  --paper: #f5f5f7;
  --paper-ink: #1d1d1f;
  --paper-ink-2: #6e6e73;
  --paper-line: #d2d2d7;
  --card-light: #fff;
  --signal: #ff5c39;
  --max: 1080px;
  --nav: 52px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.3, 1.2, 0.3, 1);

  /* Names the legal pages use. */
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --line: var(--line-dark);
  --night: var(--black);
  --night-2: #0d0d0f;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav) + 16px);
}

/* No page may scroll sideways; single scroll containers (gallery, tables) keep their own. */
html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

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

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.center {
  text-align: center;
}

.skip {
  position: absolute;
  left: -999px;
}

.skip:focus {
  left: 16px;
  top: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--black);
  padding: 8px 12px;
  border-radius: 8px;
}

:focus-visible {
  outline: 2px solid #2997ff;
  outline-offset: 2px;
}

::selection {
  background: rgba(255, 92, 57, 0.28);
}

.dot {
  color: var(--signal);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--nav);
}

.nav .logo img {
  height: 22px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: #d2d2d7;
}

.nav-links a {
  text-decoration: none;
}

.nav-links a:hover {
  color: #fff;
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang {
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 8px;
}

.lang:hover {
  color: var(--ink);
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--ink);
  height: 36px;
  width: 36px;
  cursor: pointer;
}

/* Over the light sections the bar turns light, as on Apple's pages. */
.logo .on-light {
  display: none;
}

.site-header.light {
  background: rgba(245, 245, 247, 0.8);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.site-header.light .logo .on-dark {
  display: none;
}

.site-header.light .logo .on-light {
  display: block;
}

.site-header.light .nav-links,
.site-header.light .lang,
.site-header.light .btn-ghost,
.site-header.light .menu-toggle {
  color: var(--paper-ink);
}

.site-header.light .btn-primary {
  background: var(--paper-ink);
  color: #fff;
}

.site-header {
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* ---------- buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 980px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  color: var(--ink);
  background: transparent;
  transition: transform 0.18s var(--ease), background 0.18s ease, color 0.18s ease;
}

.btn:active {
  transform: scale(0.96);
}

.btn-primary {
  background: var(--ink);
  color: var(--black);
}

.btn-primary:hover {
  background: #fff;
}

.btn-ghost {
  color: var(--ink-2);
}

.btn-ghost:hover {
  color: var(--ink);
}

.btn-lg {
  height: 48px;
  padding: 0 26px;
  font-size: 17px;
}

.btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.more {
  color: var(--ink);
  font-size: 17px;
  text-decoration: none;
}

.more::after {
  content: " \203A";
}

.more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- type ---------- */

h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
}

.display {
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.05;
}

.intro {
  margin: 20px auto 0;
  max-width: 680px;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.38;
  color: var(--ink-2);
  font-weight: 500;
}

.small {
  font-size: 14px;
  color: var(--ink-3);
}

section {
  padding: 140px 0;
}

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

.hero {
  padding: 120px 0 0;
  text-align: center;
  overflow: hidden;
}

.hero h1 {
  margin: 0 auto;
  max-width: 980px;
  font-family: var(--font-display);
  font-size: clamp(46px, 8vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.hero .intro {
  margin-top: 24px;
}

.hero .ctas {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* The full stop beats like a live monitor. */
.motion .hero .dot {
  animation: dot-pulse 2.8s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Hero copy enters with a slight stagger. */
.motion .hero .intro.reveal {
  transition-delay: 0.1s;
}

.motion .hero .ctas.reveal {
  transition-delay: 0.2s;
}

.hero-shot {
  margin: 80px auto 0;
  max-width: var(--max);
  padding: 0 24px;
  perspective: 1600px;
}

.hero-shot .frame {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--line-dark);
  overflow: hidden;
  background: #111214;
  transform-origin: 50% 0;
}

.hero-shot img {
  width: 100%;
  height: auto;
}

.motion .hero-shot .frame {
  transform: rotateX(calc((1 - var(--t, 1)) * 22deg)) scale(calc(0.84 + var(--t, 1) * 0.16) * var(--t2, 1));
  will-change: transform;
}

/* Live error notifications drifting over the screenshot, macOS-style. */
.toasts {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(320px, 64%);
  pointer-events: none;
}

.toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 13px;
  border-radius: 13px;
  background: rgba(20, 20, 22, 0.82);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0;
  transform: translateX(18px) scale(0.95);
  transition: opacity 0.45s ease, transform 0.55s var(--spring);
}

.toast.in {
  opacity: 1;
  transform: none;
}

.toast.out {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
}

.toast .tdot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
}

.toast small {
  display: block;
  color: var(--ink-3);
  font-size: 10px;
}

/* ---------- reveal ---------- */

.motion .reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(12px);
  transition: opacity 0.8s ease, transform 0.95s var(--ease), filter 0.95s var(--ease);
}

.motion .reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- statement ---------- */

.statement {
  padding: 120px 0 160px;
}

.statement p {
  margin: 0 auto;
  max-width: 920px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-align: center;
}

.motion .statement .w {
  color: var(--ink-dim);
  transition: color 0.35s ease;
}

.motion .statement .w.on {
  color: var(--ink);
}

/* ---------- tour: the error gallery ---------- */

.tour {
  padding: 0 0 60px;
}

.tour-head {
  text-align: center;
  padding-bottom: 28px;
}

.tour-head .intro {
  font-size: clamp(17px, 1.7vw, 21px);
}

.deck-sticky {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 0 24px;
}

/* The scrubbed stack needs the animation script; with reduced motion or without
   JavaScript the five cards simply read one after the other. */
.motion .deck-track {
  height: 460vh;
}

.motion .deck-sticky {
  position: sticky;
  top: var(--nav);
  height: calc(100svh - var(--nav));
  /* Heading, deck and dots share one screen, so the heading stays in view while scrolling. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: clamp(10px, 2.2vh, 22px);
  padding-top: clamp(14px, 3vh, 34px);
  padding-bottom: 10px;
}

.motion .deck-sticky .tour-head {
  padding: 0;
}

.motion .deck-sticky .tour-head .display {
  font-size: clamp(28px, min(5.2vw, 6.4vh), 64px);
}

.motion .deck-sticky .tour-head .intro {
  margin-top: 10px;
  font-size: clamp(15px, min(1.6vw, 2.2vh), 19px);
}

/* Without JavaScript every card simply reads one after the other. */
.deck {
  position: relative;
  width: min(var(--max), 100%);
  display: grid;
  gap: 26px;
}

/* The top band stays free so the cards already read peek out above the active one. */
.motion .deck {
  height: 100%;
  max-height: 600px;
  align-self: center;
  overflow: hidden;
}

.layer {
  border-radius: 26px;
  background: linear-gradient(180deg, #161618, #101012);
  border: 1px solid var(--line-dark);
  padding: clamp(22px, 3.4vw, 46px);
  display: grid;
  grid-template-columns: minmax(230px, 2fr) 3fr;
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
}

.motion .deck .layer {
  position: absolute;
  inset: 30px 0 0;
  transform-origin: 50% 0;
  will-change: transform;
  backface-visibility: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* Cards that are already behind the active one dim a little, like a stack of windows. */
.motion .deck .layer::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: #000;
  opacity: var(--dim, 0);
  pointer-events: none;
}

.kick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.kick span {
  color: var(--signal);
  font-size: 13px;
}

.kick::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-dark);
}

.layer-text h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.layer-text p {
  margin: 0;
  max-width: 36ch;
  color: var(--ink-2);
  font-size: 15.5px;
}

.layer-shot {
  min-width: 0;
}

/* 1 · the event */
.ev-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.chip {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 7px;
}

.chip-error {
  color: #ff6b5e;
  background: rgba(255, 69, 58, 0.12);
  border: 1px solid rgba(255, 69, 58, 0.35);
}

.ev-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}

.ev-name {
  margin: 16px 0 2px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.2;
}

.ev-sub {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}

.ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  padding: 4px 10px;
  border: 1px solid var(--line-dark);
  border-radius: 99px;
  background: var(--night-2);
}

.spark {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 54px;
  margin-top: 20px;
}

.spark i {
  flex: 1;
  height: var(--h);
  border-radius: 2px;
  background: #26262a;
}

.spark i.hot {
  background: rgba(255, 69, 58, 0.8);
}

.spark-label {
  position: absolute;
  right: 0;
  top: -17px;
  font-family: var(--mono);
  font-size: 10px;
  color: #48484c;
}

.motion .layer .spark i {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease);
}

.motion .layer.seen .spark i {
  transform: scaleY(1);
}

/* 2 · the line */
.code-win {
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: var(--night-2);
  overflow: hidden;
}

.code-win .bar,
.fix .bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}

.win-dots {
  display: inline-flex;
  gap: 6px;
}

.win-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2c2c2e;
}

.win-dots i:nth-child(1) { background: rgba(255, 95, 87, 0.85); }
.win-dots i:nth-child(2) { background: rgba(254, 188, 46, 0.85); }
.win-dots i:nth-child(3) { background: rgba(40, 200, 64, 0.85); }

.code-lines {
  margin: 0;
  padding: 12px 0;
  font-size: 12.5px;
  line-height: 1.95;
  overflow-x: auto;
}

.code-lines .ln {
  display: block;
  padding-right: 16px;
  white-space: pre;
  color: var(--ink-2);
}

.code-lines .ln em {
  font-style: normal;
  color: #48484c;
  padding: 0 12px 0 16px;
  user-select: none;
}

.code-lines .t {
  color: #ff7a54;
}

.code-lines .ln.hit {
  background: rgba(255, 69, 58, 0.09);
  box-shadow: inset 3px 0 0 #ff453a;
  color: var(--ink);
}

.code-lines .here {
  margin-left: 10px;
  font-weight: 600;
  font-size: 10.5px;
  color: #ff6b5e;
}

.frames {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line-dark);
  display: grid;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}

.frames .top {
  color: var(--ink);
}

.motion .layer .code-lines .ln {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s ease, transform 0.55s var(--ease);
}

.motion .layer .code-lines .ln:nth-child(1) { transition-delay: 0.05s; }
.motion .layer .code-lines .ln:nth-child(2) { transition-delay: 0.11s; }
.motion .layer .code-lines .ln:nth-child(3) { transition-delay: 0.17s; }
.motion .layer .code-lines .ln:nth-child(4) { transition-delay: 0.23s; }
.motion .layer .code-lines .ln:nth-child(5) { transition-delay: 0.29s; }
.motion .layer .code-lines .ln:nth-child(6) { transition-delay: 0.35s; }

.motion .layer.seen .code-lines .ln {
  opacity: 1;
  transform: none;
}

/* 3 · the values */
.vars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}

.v {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 11px;
  background: var(--night-2);
  font-family: var(--mono);
  font-size: 12.5px;
}

.v dt {
  color: var(--ink-3);
}

.v dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.v.scrub dd {
  color: var(--signal);
}

.badge {
  flex: none;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2.5px 8px;
  border-radius: 99px;
  color: #ff9f8a;
  background: rgba(255, 92, 57, 0.12);
  border: 1px solid rgba(255, 92, 57, 0.3);
}

.vars-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.motion .layer .v {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.5s var(--ease);
}

.motion .layer .v:nth-child(1) { transition-delay: 0.05s; }
.motion .layer .v:nth-child(2) { transition-delay: 0.12s; }
.motion .layer .v:nth-child(3) { transition-delay: 0.19s; }
.motion .layer .v:nth-child(4) { transition-delay: 0.26s; }
.motion .layer .v:nth-child(5) { transition-delay: 0.33s; }
.motion .layer .v:nth-child(6) { transition-delay: 0.4s; }

.motion .layer.seen .v {
  opacity: 1;
  transform: none;
}

/* 4 · the distribution */
.dist {
  display: grid;
  gap: 18px;
}

.d-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr minmax(64px, auto);
  gap: 16px;
  align-items: center;
}

.d-k {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
}

.d-bar {
  height: 6px;
  border-radius: 3px;
  background: #26262a;
  overflow: hidden;
}

.d-bar i {
  display: block;
  height: 100%;
  width: calc(var(--v) * 100%);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--signal), #ff8a64);
}

.d-n {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.motion .layer .d-bar i {
  width: 0;
  transition: width 0.8s var(--ease);
}

.motion .layer.seen .d-bar i {
  width: calc(var(--v) * 100%);
}

/* 5 · the fix prompt */
.fix {
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: var(--night-2);
  overflow: hidden;
}

.fix-prompt {
  margin: 0;
  padding: 16px 18px;
  min-height: 158px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.fix-prompt::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--signal);
  opacity: 0;
}

.motion .layer.live .fix-prompt.typing::after,
.motion .layer.live .fix-prompt.cur::after {
  opacity: 1;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.fix-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-dark);
}

.fix-tools {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}

.fix-note {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 12px;
  color: var(--ink-3);
}

/* gallery step dots */
.deck-dots {
  display: flex;
  gap: 2px;
}

.deck-dots:empty {
  display: none;
}

/* 8px dot, 24px touch target. */
.deck-dots button {
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: #2c2c2e;
  background-clip: content-box;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s ease;
}

.deck-dots button:hover {
  transform: scale(1.4);
}

.deck-dots button.on {
  background-color: var(--signal);
}

/* ---------- switch ---------- */

.switch .code-card {
  margin: 56px auto 0;
  max-width: 760px;
  text-align: left;
}

.switch .small {
  margin: 28px auto 0;
  max-width: 620px;
}

.code-card {
  border: 1px solid var(--line-dark);
  border-radius: 18px;
  background: #0d0d0f;
  overflow: hidden;
}

.code-card .bar {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-dark);
  font-size: 13px;
  color: var(--ink-3);
  font-family: var(--mono);
}

.code-card pre {
  margin: 0;
  padding: 20px 0;
  font-size: clamp(12px, 1.5vw, 15px);
  line-height: 1.8;
  overflow-x: auto;
}

.code-card pre span {
  display: block;
  padding: 0 20px;
  white-space: pre;
}

.code-card .del {
  background: rgba(255, 69, 58, 0.14);
  color: #ff9f99;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 159, 153, 0.6);
}

.code-card .add {
  background: rgba(48, 209, 88, 0.14);
  color: #8ce99a;
}

.dsn .del,
.dsn .add {
  transition: background 0.6s ease 0.3s, color 0.6s ease 0.3s, text-decoration-color 0.6s ease 0.3s, max-height 0.7s var(--ease) 0.9s, opacity 0.7s ease 0.9s;
  max-height: 2em;
  overflow: hidden;
}

.motion .dsn:not(.in) .del {
  background: transparent;
  color: inherit;
  text-decoration-color: transparent;
}

.motion .dsn:not(.in) .add {
  max-height: 0;
  opacity: 0;
}

/* Block cursor while the DSN example types itself. */
.motion .dsn pre span.cur {
  display: inline;
  padding: 0;
}

.motion .dsn pre span.cur::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: -0.22em;
  background: var(--ink);
  animation: blink 1s steps(1) infinite;
}

/* While typing, the diff lines appear with the text instead of growing afterwards. */
.motion .dsn.typing .add {
  max-height: 2em;
  opacity: 1;
  transition: background 0.6s ease, color 0.6s ease, text-decoration-color 0.6s ease;
}

.motion .dsn.typing .del {
  transition: background 0.6s ease, color 0.6s ease, text-decoration-color 0.6s ease;
}

/* ---------- gallery ---------- */

.gallery-section {
  padding-bottom: 120px;
}

.gallery-section h2 {
  margin-bottom: 56px;
}

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 560px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 max(24px, calc((100vw - var(--max)) / 2 + 24px));
  padding: 0 max(24px, calc((100vw - var(--max)) / 2 + 24px)) 8px;
  scrollbar-width: none;
  cursor: grab;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.gallery.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.tile {
  margin: 0;
  scroll-snap-align: start;
  border-radius: 24px;
  background: #161618;
  overflow: hidden;
}

@media (hover: hover) {
  .tile {
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  }

  .tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.4);
  }
}

.tile-shot {
  aspect-ratio: 16 / 10;
  background: var(--img) var(--pos, 0 0) / var(--size, 200%) auto no-repeat;
  background-color: #111214;
}

.tile figcaption {
  padding: 22px 26px 28px;
  color: var(--ink-2);
  font-size: 17px;
}

.tile figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

.gallery-nav {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.gallery-nav button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #2c2c2e;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s ease;
}

.gallery-nav button:hover {
  background: #3a3a3c;
}

.gallery-nav button:active {
  transform: scale(0.9);
}

.gallery-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

.features {
  margin: 96px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 64px;
}

.features dt {
  font-weight: 600;
  font-size: 19px;
}

.features dd {
  margin: 6px 0 0;
  color: var(--ink-2);
}

/* ---------- paper (light) sections ---------- */

.paper {
  background: var(--paper);
  color: var(--paper-ink);
  color-scheme: light;
}

.paper + .paper {
  padding-top: 0;
}

.paper .intro,
.paper .prose p,
.paper .list {
  color: var(--paper-ink-2);
}

.prose p {
  margin: 20px 0 0;
  max-width: 680px;
  font-size: 19px;
  line-height: 1.5;
}

.prose a {
  text-underline-offset: 3px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.split .prose p:first-child {
  margin-top: 0;
}

.list {
  margin: 20px 0 0;
  padding-left: 1.2em;
  max-width: 680px;
  font-size: 19px;
}

.list li {
  margin: 10px 0;
  padding-left: 4px;
}

.note {
  color: #86868b;
}

.paper .more {
  color: var(--paper-ink);
}

.compare-more {
  margin: 28px 0 0;
}

.features dd a,
.switch .small a {
  color: inherit;
  text-underline-offset: 3px;
}

/* Table rows rise one after the other. */
.motion .reveal-table tbody tr {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.6s var(--ease);
  transition-delay: calc(var(--r, 0) * 45ms);
}

.motion .reveal-table.in tbody tr {
  opacity: 1;
  transform: none;
}

/* ---------- tables ---------- */

.table {
  margin-top: 48px;
  border-radius: 18px;
  background: var(--card-light);
  overflow: hidden;
}

.table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.table th,
.table td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8ed;
  vertical-align: top;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table thead th {
  font-size: 13px;
  color: #86868b;
  font-weight: 600;
}

.table td:first-child {
  color: var(--paper-ink-2);
  width: 30%;
}

.table td.us,
.table td.plan {
  color: var(--paper-ink);
  font-weight: 600;
}

.table td.them {
  color: var(--paper-ink-2);
}

.table td.num,
.table th.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.prices td:first-child {
  width: auto;
}

@media (min-width: 961px) {
  .prices th,
  .prices td {
    padding-left: 12px;
    padding-right: 12px;
  }

  .prices th:first-child,
  .prices td:first-child {
    padding-left: 20px;
  }

  .prices th:last-child,
  .prices td:last-child {
    padding-right: 20px;
  }

  .prices td.plan {
    width: 180px;
  }

  .prices td.wrap {
    white-space: normal;
  }
}

.prices .plan-extra {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--paper-ink-2);
}

.table sup a {
  color: #86868b;
  text-decoration: none;
}

.footnotes {
  margin-top: 18px;
  font-size: 13px;
  color: #86868b;
  display: grid;
  gap: 5px;
}

.footnotes a {
  color: inherit;
}

/* ---------- faq ---------- */

.faq {
  margin-top: 40px;
  max-width: 820px;
  border-top: 1px solid var(--paper-line);
}

.faq details {
  border-bottom: 1px solid var(--paper-line);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  font-size: 19px;
  font-weight: 600;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 17px;
  font-size: 24px;
  font-weight: 400;
  color: #86868b;
  transition: transform 0.4s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(135deg);
}

.faq .faq-a {
  overflow: hidden;
}

.faq details p {
  margin: -6px 0 24px;
  color: var(--paper-ink-2);
  max-width: 720px;
}

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

.site-footer {
  background: var(--paper);
  color: var(--paper-ink-2);
  color-scheme: light;
  border-top: 1px solid var(--paper-line);
  padding: 44px 0 36px;
  font-size: 12px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.3fr 1fr 1fr;
  gap: 32px;
}

.footer-grid h2 {
  margin: 0 0 10px;
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.47;
  letter-spacing: 0;
  color: var(--paper-ink);
  font-weight: 600;
}

.footer-brand p {
  margin: 12px 0 0;
  max-width: 280px;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.footer-grid a,
.footer-bottom a {
  text-decoration: none;
}

.footer-grid a:hover,
.footer-bottom a:hover {
  text-decoration: underline;
}

.footer-grid .logo img {
  height: 20px;
  width: auto;
}

.footer-bottom {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--paper-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- legal pages ---------- */

.legal {
  padding: 72px 0 96px;
  min-height: calc(100svh - var(--nav) - 110px);
}

.legal .wrap {
  max-width: 780px;
}

.legal h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 44px);
  hyphens: auto;
  overflow-wrap: break-word;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.legal .updated {
  color: var(--ink-3);
  font-size: 14px;
  margin: 0 0 40px;
}

.legal h2 {
  font-size: 22px;
  margin: 40px 0 10px;
}

.legal h3 {
  font-size: 17px;
  margin: 24px 0 6px;
}

.legal p,
.legal li {
  color: var(--ink-2);
  overflow-wrap: break-word;
}

.legal address {
  font-style: normal;
  color: var(--ink-2);
}

.legal pre {
  white-space: pre-wrap;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--night-2);
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  padding: 16px;
}

.legal .table {
  background: #161618;
}

.legal .table td,
.legal .table th {
  border-bottom-color: var(--line-dark);
}

.legal .table td:first-child,
.legal .table td.them {
  color: var(--ink-2);
}

.legal .table td.us {
  color: var(--ink);
}

/* ---------- subpages: landing pages and guides ---------- */

.page-hero {
  padding: 56px 0 96px;
}

.page-hero h1 {
  margin: 0;
  max-width: 920px;
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
  overflow-wrap: break-word;
}

.page-hero .intro {
  margin: 24px 0 0;
  max-width: 760px;
}

.page-hero .ctas {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.page-hero .related {
  margin: 28px 0;
}

.page-hero .intro a {
  text-underline-offset: 3px;
}

.crumbs {
  margin-bottom: 40px;
  font-size: 13px;
  color: var(--ink-3);
}

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

.crumbs li + li::before {
  content: "\203A";
  margin: 0 8px;
  color: var(--ink-dim);
}

.crumbs a {
  text-decoration: none;
  color: var(--ink-2);
}

.crumbs a:hover {
  color: var(--ink);
}

.band {
  padding: 120px 0;
  border-top: 1px solid var(--line-dark);
}

.shot-band {
  padding: 0 0 120px;
}

.frame {
  border-radius: 18px;
  border: 1px solid var(--line-dark);
  overflow: hidden;
  background: #111214;
}

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

.doc {
  padding: 96px 0;
}

.paper.doc + .paper.doc {
  padding-top: 0;
}

.doc-wrap > p,
.doc-wrap > ul,
.doc-wrap > ol,
.doc-wrap > h2,
.doc-wrap > h3,
.doc-wrap > blockquote,
.doc-wrap > .sources {
  max-width: 760px;
}

.doc-wrap > .table,
.doc-wrap > .code-card,
.doc-wrap > .faq {
  max-width: 900px;
}

.doc sup {
  line-height: 0;
  font-size: 0.7em;
}

.doc sup a {
  color: #86868b;
  text-decoration: none;
  padding: 0 1px;
}

.doc h2 {
  margin: 72px 0 0;
  font-size: clamp(28px, 3.4vw, 40px);
}

.doc-wrap > h2:first-child,
.doc-wrap > .lead + h2 {
  margin-top: 0;
}

.doc h3 {
  margin: 40px 0 0;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
}

.doc p,
.doc .list,
.doc .steps {
  color: var(--paper-ink-2);
  font-size: 18px;
  line-height: 1.55;
  max-width: 760px;
}

.doc p {
  margin: 18px 0 0;
}

.doc a {
  color: var(--paper-ink);
  text-underline-offset: 3px;
}

.doc strong {
  color: var(--paper-ink);
  font-weight: 600;
}

.doc .lead {
  margin: 0 0 56px;
  font-size: 15px;
  color: #86868b;
}

.doc .note-line {
  margin-top: 14px;
  font-size: 14px;
  color: #86868b;
}

.doc .table {
  margin-top: 28px;
}

.doc .table td:first-child {
  width: 26%;
}

.doc code,
.page-hero code {
  font-size: 0.88em;
  background: #e8e8ed;
  color: var(--paper-ink);
  padding: 1px 5px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}

.page-hero code {
  background: #1d1d1f;
  color: var(--ink);
}

.doc .code-card code {
  background: none;
  padding: 0 20px;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
  overflow-wrap: normal;
}

.doc .code-card {
  margin-top: 20px;
  color: var(--ink);
}

.code-card pre > code {
  display: block;
  padding: 0 20px;
  white-space: pre;
  width: max-content;
  min-width: 100%;
}

.doc .code-card pre {
  font-size: 14px;
  line-height: 1.65;
}

.steps {
  margin: 20px 0 0;
  padding-left: 1.4em;
}

.steps li {
  margin: 14px 0;
  padding-left: 6px;
}

.template {
  margin: 20px 0 0;
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--card-light);
  border: 1px solid #e8e8ed;
}

.template p:first-child {
  margin-top: 0;
}

.doc .faq {
  margin-top: 28px;
}

.doc .faq summary {
  font-size: 18px;
}

.doc .faq details p {
  margin: -6px 0 24px;
  font-size: 17px;
}

.sources {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--paper-line);
}

.doc .sources h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0;
}

.sources ol {
  margin: 10px 0 0;
  padding-left: 1.4em;
  font-size: 13px;
  line-height: 1.5;
  color: #86868b;
  display: grid;
  gap: 6px;
}

.sources ol a,
.doc .sources ol a {
  color: inherit;
  overflow-wrap: anywhere;
}

.doc .sources p {
  font-size: 13px;
  color: #86868b;
}

.related {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.doc .related .more {
  color: var(--paper-ink);
  font-size: 19px;
}

.related-section {
  padding-bottom: 120px;
}

.not-found {
  min-height: calc(100svh - var(--nav) - 200px);
  padding-top: 120px;
}

.not-found .intro a {
  color: var(--ink);
}

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

@media (max-width: 900px) {
  section {
    padding: 100px 0;
  }

  .nav-links,
  .nav-right .btn-ghost {
    display: none;
  }

  .menu-toggle {
    display: inline-grid;
    place-items: center;
  }

  .site-header.open .nav-links {
    display: flex;
    position: absolute;
    top: var(--nav);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(0, 0, 0, 0.94);
    padding: 8px 24px 20px;
  }

  .site-header.open .nav-links a {
    padding: 12px 0;
    font-size: 17px;
  }

  .split,
  .features {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .table td,
  .table th {
    padding: 12px 14px;
    font-size: 14px;
  }

  .table td:first-child {
    width: auto;
  }

  /* The gallery cards stack their text above the visual. */
  .layer {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 18px;
    align-content: center;
  }

  .layer-text p {
    max-width: none;
  }

  .layer-text h3 {
    font-size: clamp(19px, 5vw, 24px);
  }

  .motion .deck {
    max-height: 720px;
  }

  .d-row {
    grid-template-columns: minmax(110px, 150px) 1fr minmax(56px, auto);
    gap: 10px;
  }

  .code-lines {
    font-size: 11px;
  }

  .fix-prompt {
    font-size: 11.5px;
    min-height: 132px;
  }
}

@media (max-width: 640px) {
  .wrap {
    padding: 0 16px;
  }

  .hero {
    padding-top: 72px;
  }

  .page-hero {
    padding: 32px 0 72px;
  }

  .crumbs {
    margin-bottom: 28px;
  }

  .doc {
    padding: 72px 0;
  }

  .doc h2 {
    margin-top: 56px;
  }

  .doc p,
  .doc .list,
  .doc .steps {
    font-size: 17px;
  }

  .doc .code-card pre {
    font-size: 13px;
  }

  .band {
    padding: 88px 0;
  }

  .shot-band {
    padding-bottom: 72px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-shot {
    margin-top: 56px;
    padding: 0 16px;
  }

  .nav-right .btn-primary {
    display: none;
  }

  .tile figcaption {
    padding: 18px 20px 22px;
    font-size: 16px;
  }

  .deck-sticky {
    padding-left: 16px;
    padding-right: 16px;
  }

  .layer {
    padding: 18px;
  }

  .toasts {
    width: 78%;
  }

  /* Each card has to fit the sticky deck on a phone: smaller code, one stack frame,
     no side note in the code line (the line is already highlighted). */
  .motion .deck .layer {
    inset: 18px 0 0;
  }

  .layer {
    gap: 14px;
  }

  .kick {
    margin-bottom: 10px;
  }

  .layer-text h3 {
    margin-bottom: 6px;
  }

  .layer-text p {
    font-size: 14px;
    line-height: 1.42;
  }

  .code-win .bar,
  .fix .bar {
    padding: 8px 12px;
  }

  .code-lines {
    padding: 8px 0;
    font-size: 10.5px;
    line-height: 1.7;
  }

  .code-lines .ln em {
    padding: 0 8px 0 10px;
  }

  .code-lines .here,
  .frames li:not(.top) {
    display: none;
  }

  .frames {
    padding: 8px 12px;
    font-size: 11px;
  }

  .vars {
    gap: 6px;
  }

  .v {
    padding: 7px 10px;
    font-size: 11px;
    gap: 2px 8px;
  }

  .vars-note {
    margin-top: 8px;
    font-size: 11.5px;
  }

  .fix-prompt {
    padding: 10px 12px;
    font-size: 10.5px;
    line-height: 1.6;
    min-height: 0;
  }

  .fix-actions {
    padding: 8px 12px;
    gap: 10px;
  }

  .fix-note {
    display: none;
  }

  .site-header.open.light .nav-links {
    background: rgba(245, 245, 247, 0.97);
  }

  .table:not(.prices) {
    overflow-x: auto;
  }

  .table:not(.prices) table {
    min-width: 560px;
  }
}

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

/* Pricing below 960px: one block per plan instead of a table that hides the prices. */
@media (max-width: 960px) {
  .prices table,
  .prices tbody,
  .prices tr,
  .prices td {
    display: block;
  }

  .prices thead {
    display: none;
  }

  .prices tr {
    padding: 16px 18px;
    border-bottom: 1px solid #e8e8ed;
  }

  .prices tr:last-child {
    border-bottom: 0;
  }

  .prices td,
  .prices td.num {
    border: 0;
    padding: 2px 0;
    text-align: left;
    width: auto;
  }

  .prices td:empty {
    display: none;
  }

  .prices td.plan {
    font-size: 17px;
    margin-bottom: 4px;
  }

  .prices td[data-label]::before {
    content: attr(data-label) ": ";
    color: #86868b;
  }
}

/* =====================================================================
   v2 (30.10.2026): "von rot auf grün". A soft orange glow as the only accent, mono
   eyebrows and terminal details for the coder feel, Apple-like calm everywhere else.
   ===================================================================== */

:root {
  --signal-soft: rgba(255, 92, 57, 0.14);
  --signal-faint: rgba(255, 92, 57, 0.06);
  --red: #ff453a;
  --green: #30d158;
}

/* Mono eyebrow above the section headings. */
.eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(255, 122, 84, 0.9);
}

.paper .eyebrow {
  color: #c2410c;
}

.btn-primary {
  transition: transform 0.18s var(--ease), background 0.18s ease, color 0.18s ease, box-shadow 0.35s ease;
}

.btn-primary:hover {
  box-shadow: 0 0 0 6px var(--signal-faint), 0 8px 30px rgba(255, 92, 57, 0.18);
}

/* ---------- tour: the active card catches a soft orange edge ---------- */

.motion .deck .layer {
  transition: border-color 0.6s ease;
}

.motion .deck .layer.live {
  border-color: rgba(255, 92, 57, 0.26);
}

.deck-dots button.on {
  box-shadow: 0 0 12px rgba(255, 92, 57, 0.6);
  background-clip: content-box;
}

/* ---------- switch ---------- */

.switch {
  position: relative;
  isolation: isolate;
}

.switch::before {
  content: "";
  position: absolute;
  inset: 20% 10% auto;
  height: 60%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, var(--signal-faint), transparent 70%);
  pointer-events: none;
}

/* ---------- feature gallery: travels sideways while the page scrolls ---------- */

.gallery {
  position: relative;
}

.hs-progress {
  display: none;
  flex: 1;
  align-self: center;
  height: 2px;
  border-radius: 2px;
  background: #2c2c2e;
  overflow: hidden;
}

.hs-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 92, 57, 0.4), var(--signal));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

.hs-on .gallery-section {
  padding-top: 40px;
}

.hs-on .hs-sticky {
  position: sticky;
  top: var(--nav);
  height: calc(100svh - var(--nav));
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hs-on .gallery-section h2 {
  margin-bottom: clamp(20px, 4vh, 48px);
}

.hs-on .gallery {
  overflow: visible;
  scroll-snap-type: none;
  cursor: default;
  /* Tiles shrink on low screens so heading, tile and caption fit one screen. */
  grid-auto-columns: min(82vw, 560px, calc((100svh - var(--nav) - 330px) * 1.6));
  will-change: transform;
}

.hs-on .gallery-nav button {
  display: none;
}

.hs-on .hs-progress {
  display: block;
}

.tile {
  border: 1px solid #1f1f22;
}

/* ---------- feature cards with small animated code icons ---------- */

.features {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.features > div {
  padding: 22px 22px 24px;
  border-radius: 20px;
  border: 1px solid #1f1f22;
  background: linear-gradient(180deg, #111113, #0b0b0c);
  transition: border-color 0.4s ease, transform 0.5s var(--ease), box-shadow 0.5s ease;
}

@media (hover: hover) {
  .features > div:hover {
    border-color: rgba(255, 92, 57, 0.3);
    box-shadow: 0 18px 50px rgba(255, 92, 57, 0.07);
    transform: translateY(-3px);
  }
}

.features dt {
  display: grid;
  gap: 14px;
  font-size: 17px;
}

.features dd {
  font-size: 15px;
  line-height: 1.5;
}

.ficon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--signal-faint);
  border: 1px solid rgba(255, 92, 57, 0.18);
  color: #ff8a6a;
}

.ficon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.ficon .ping,
.ficon .s1,
.ficon .s2 {
  stroke: none;
}

.ficon .ping {
  fill: var(--red);
}

.ficon .s1,
.ficon .s2 {
  fill: var(--green);
}

/* Higher specificity than the animation shorthands below, which reset the play state. */
.motion .features:not(.in) .ficon * {
  animation-play-state: paused;
}

.motion .ficon .bell {
  transform-origin: 12px 5px;
  animation: ic-bell 3.2s ease-in-out infinite;
}

.motion .ficon .ping {
  transform-origin: 18px 6px;
  animation: ic-ping 3.2s ease-out infinite;
}

.motion .ficon .s1 {
  animation: ic-blink 2.4s steps(1) infinite;
}

.motion .ficon .s2 {
  animation: ic-blink 2.4s steps(1) 1.2s infinite;
}

.motion .ficon .key {
  stroke-dasharray: 9;
  animation: ic-draw 3s ease-in-out infinite;
}

.motion .ficon .scan {
  stroke: #ffb39e;
  animation: ic-scan 2.4s ease-in-out infinite;
}

.motion .ficon .flow {
  stroke-dasharray: 2.5 2.5;
  animation: ic-flow 1.2s linear infinite;
}

.motion .ficon .caret {
  animation: ic-blink 1.1s steps(1) infinite;
}

.motion .ficon .commit {
  fill: currentColor;
  animation: ic-commit 2.6s ease-in-out infinite;
}

.motion .ficon .keycap {
  transform-origin: 12px 12px;
  animation: ic-press 2.8s ease-in-out infinite;
}

@keyframes ic-bell {
  0%, 60%, 100% { transform: rotate(0); }
  66% { transform: rotate(14deg); }
  74% { transform: rotate(-11deg); }
  82% { transform: rotate(6deg); }
  90% { transform: rotate(-3deg); }
}

@keyframes ic-ping {
  0%, 58% { transform: scale(0); opacity: 0; }
  66% { transform: scale(1.2); opacity: 1; }
  76%, 100% { transform: scale(1); opacity: 1; }
}

@keyframes ic-blink {
  50% { opacity: 0.2; }
}

@keyframes ic-draw {
  0% { stroke-dashoffset: 9; }
  40%, 80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -9; }
}

@keyframes ic-scan {
  0%, 100% { transform: translateY(-1px); opacity: 0.4; }
  50% { transform: translateY(7px); opacity: 1; }
}

@keyframes ic-flow {
  to { stroke-dashoffset: -10; }
}

@keyframes ic-commit {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
}

@keyframes ic-press {
  0%, 70%, 100% { transform: scale(1); }
  78% { transform: scale(0.88); }
  86% { transform: scale(1); }
}

/* ---------- privacy: dark, with an event that redacts itself ---------- */

.privacy {
  position: relative;
  isolation: isolate;
  border-top: 1px solid #141416;
}

.privacy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 80% 70%, var(--signal-faint), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  pointer-events: none;
}

.privacy .prose p {
  color: var(--ink-2);
}

.privacy .prose a {
  color: var(--ink);
}

.redact {
  margin-top: 64px;
}

.redact .bar {
  display: flex;
  justify-content: space-between;
}

.redact-dest {
  color: #6ee08a;
}

.redact pre {
  overflow-x: auto;
}

.redact .x {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 69, 58, 0.8);
  color: #6e6e73;
}

.redact .r {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 6px;
  font-weight: 600;
  color: #ffb39e;
  background: rgba(255, 92, 57, 0.14);
}

/* Transitions only on the way in, so the start state is set at once on load. */
.redact.in .x {
  transition: color 0.5s ease, text-decoration-color 0.5s ease;
}

.redact.in .r {
  transition: opacity 0.5s ease, transform 0.6s var(--spring);
}

.motion .redact:not(.in) .x {
  color: #ffd60a;
  text-decoration-color: transparent;
}

.motion .redact:not(.in) .r {
  opacity: 0;
  transform: translateX(-6px) scale(0.9);
}

.motion .redact.in pre span:nth-child(5) * { transition-delay: 0.5s; }
.motion .redact.in pre span:nth-child(6) * { transition-delay: 1.1s; }
.motion .redact.in pre span:nth-child(9) * { transition-delay: 1.7s; }

.redact-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}

.ok-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(48, 209, 88, 0.7);
}

/* ---------- faq ---------- */

.faq summary {
  transition: color 0.25s ease;
}

.faq summary:hover {
  color: #000;
}

.faq summary::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 32px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.4s var(--spring);
}

.faq details[open] summary::before {
  opacity: 1;
  transform: none;
}

/* ---------- closing call to action ---------- */

.cta {
  position: relative;
  isolation: isolate;
  padding: 160px 0 170px;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 55% at 50% 60%, rgba(255, 92, 57, 0.13), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 55%, #000 25%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 50% 55%, #000 25%, transparent 75%);
  pointer-events: none;
}

.cta-term {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 28px;
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid #262629;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cta-term em {
  font-style: normal;
  color: var(--signal);
}

.cta-term i {
  width: 0.55em;
  height: 1.1em;
  background: var(--ink);
  animation: blink 1s steps(1) infinite;
}

.cta .ctas {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

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

@media (max-width: 1080px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .motion .deck-sticky .tour-head .intro {
    display: none;
  }
}

@media (max-height: 760px) {
  .motion .deck-sticky .tour-head .intro {
    display: none;
  }
}

@media (max-height: 640px) {
  .motion .deck-sticky .eyebrow {
    display: none;
  }
}

@media (max-width: 640px) {
  .features {
    grid-template-columns: minmax(0, 1fr);
  }

  .redact {
    margin-top: 40px;
  }

  .redact pre {
    font-size: 11px;
  }

  .cta {
    padding: 110px 0 120px;
  }

  .cta-term {
    font-size: 11.5px;
  }

  .faq summary::before {
    left: -12px;
  }

}

/* ---------- hero: the Fehlo screen, live ----------
   The screenshot stays the fallback (no JavaScript, reduced motion). With motion the same
   screen is rebuilt in HTML at its native 1440 x 900 and scaled to the frame (--k), so every
   number, line and button can move. Phones see the error column only (.crop). */

.hero-shot {
  position: relative;
}

/* A soft glow behind the frame follows the error: red while it is open, green once solved. */
.hero-shot::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 18%;
  bottom: -4%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 92, 57, 0.13);
  filter: blur(80px);
  transition: background 1.4s ease;
  pointer-events: none;
}

.hero-shot[data-phase="solved"]::before {
  background: rgba(48, 209, 88, 0.1);
}

.appshot {
  display: none;
}

.motion .hero-shot .frame.is-live img {
  display: none;
}

.motion .frame.is-live .appshot {
  display: block;
  position: relative;
  height: calc(900px * var(--k, 0.716));
  overflow: hidden;
  text-align: left;
  color: #e8eaec;
}

.lv {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  display: grid;
  grid-template-columns: 230px 930px 280px;
  grid-template-rows: 48px 852px;
  font-family: var(--font);
  font-size: 14.6px;
  line-height: 1.35;
  background: #131517;
  transform: scale(var(--k, 0.716));
  transform-origin: 0 0;
  -webkit-font-smoothing: antialiased;
}

/* Phones: zoom into the error column (x 246 to 906, 840 high). */
.crop .lv {
  transform: scale(var(--k)) translateX(-246px);
}

.motion .frame.is-live.crop .appshot {
  height: calc(840px * var(--k));
}

.lv svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.lv code,
.lv pre,
.lv-code,
.lv-vars {
  font-family: var(--mono);
}

/* Sidebar */
.lv-side {
  grid-row: 1 / 3;
  position: relative;
  padding: 16px 8px;
  background: #0c0b0e;
  border-right: 1px solid #1e1f23;
  color: #e8eaec;
}

.lv-org,
.lv-search,
.lv-nav span,
.lv-user {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 31px;
  padding: 0 8px;
  border-radius: 7px;
}

.lv-org b {
  flex: 1;
  font-size: 14.5px;
  font-weight: 600;
}

.lv-org svg {
  width: 15px;
  height: 15px;
  color: #8b8f98;
}

.lv-av {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #e8eaec;
  color: #0c0b0e;
  font-size: 12px;
  font-weight: 700;
}

.lv-search {
  margin: 10px 0 6px;
  color: #c9ccd1;
}

.lv-search kbd {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid #2a2c31;
  border-radius: 5px;
  font: 11px var(--mono);
  color: #8b8f98;
}

.lv-nav {
  display: grid;
  gap: 1px;
}

.lv-nav span {
  color: #d9dbdf;
}

.lv-nav svg {
  color: #8b8f98;
}

.lv-nav .on {
  background: #25262c;
  color: #fff;
}

.lv-nav .on svg {
  color: #fff;
}

.lv-nav small {
  display: block;
  padding: 12px 8px 6px;
  font-size: 12px;
  color: #7c8089;
}

.lv-user {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 14px;
  gap: 32px;
  color: #c9ccd1;
}

.lv-user .lv-av {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
}

/* Top bar */
.lv-top {
  grid-column: 2 / 4;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 22px;
  background: #101213;
  border-bottom: 1px solid #1e1f23;
}

.lv-crumb {
  margin: 0;
  font-size: 13px;
  color: #8b8f98;
}

.lv-crumb i {
  margin: 0 4px;
  font-style: normal;
}

.lv-crumb code {
  font-size: 12.5px;
  color: #e8eaec;
}

.lv-actions {
  position: absolute;
  top: 10px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.crop .lv-actions {
  right: 550px;
}

.lv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 10px;
  border: 1px solid #2a2c31;
  border-radius: 6px;
  background: #161819;
  font-size: 13px;
  font-weight: 500;
  color: #e8eaec;
  white-space: nowrap;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.5s ease, transform 0.25s var(--spring), color 0.35s ease;
}

.lv-btn svg {
  width: 14px;
  height: 14px;
}

.lv-split {
  display: inline-flex;
}

.lv-done {
  border-radius: 6px 0 0 6px;
  background: #e7e9eb;
  border-color: #e7e9eb;
  color: #101213;
}

.lv-more {
  padding: 0 6px;
  border-radius: 0 6px 6px 0;
  border-left-color: #c9ccd1;
  background: #e7e9eb;
  border-color: #e7e9eb;
  color: #101213;
}

.lv-dots {
  margin-left: 12px;
  color: #8b8f98;
  letter-spacing: 1px;
}

/* The pointer presses a button: it dips, then the soft orange (fix) or green (solved) holds. */
.lv-btn.press {
  transform: scale(0.94);
}

.lv-fix.hot {
  border-color: rgba(255, 122, 84, 0.55);
  background: #22170f;
  box-shadow: 0 0 0 3px rgba(255, 92, 57, 0.14), 0 0 26px rgba(255, 92, 57, 0.22);
}

[data-phase="solved"] .lv-done,
[data-phase="solved"] .lv-more {
  background: #30d158;
  border-color: #30d158;
  color: #04210d;
}

.lv-pop {
  position: absolute;
  z-index: 5;
  top: 46px;
  right: 22px;
  width: 440px;
  padding: 14px 16px 12px;
  border: 1px solid #2c2e33;
  border-radius: 12px;
  background: rgba(22, 24, 26, 0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.crop .lv-pop {
  right: 550px;
}

.lv-pop.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

.lv-pop-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
}

.lv-pop-h svg {
  width: 15px;
  height: 15px;
  color: #30d158;
}

.lv-pop-t {
  min-height: calc(4 * 1.55em);
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #0c0d0f;
  font-size: 11.5px;
  line-height: 1.55;
  color: #c9ccd1;
  white-space: pre-wrap;
}

.lv-pop-t::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: #ff7a54;
  animation: lv-caret 1s steps(1) infinite;
}

@keyframes lv-caret {
  50% { opacity: 0; }
}

.lv-pop-f {
  margin: 9px 0 0;
  font-size: 11.5px;
  color: #8b8f98;
}

/* Main column */
.lv-main {
  padding: 20px 28px 0 30px;
  overflow: hidden;
}

.lv-tags {
  display: flex;
  gap: 6px;
  margin: 0;
}

.lv-tag {
  padding: 2px 7px;
  border-radius: 5px;
  background: #202226;
  font-size: 12.5px;
  font-weight: 500;
  color: #c9ccd1;
}

.lv-err {
  background: #3a1c1e;
  color: #ff6b6b;
}

.lv-solved {
  display: none;
  background: #12301c;
  color: #4ade80;
}

[data-phase="solved"] .lv-err {
  display: none;
}

[data-phase="solved"] .lv-solved {
  display: inline-block;
  animation: lv-pop-in 0.5s var(--spring);
}

@keyframes lv-pop-in {
  from { opacity: 0; transform: scale(0.8); }
}

.lv-title {
  margin: 14px 0 0;
  font-size: 19.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.lv-sub {
  margin: 9px 0 0;
  color: #c9ccd1;
}

.lv-tabs {
  display: flex;
  gap: 22px;
  margin: 26px 0 0;
  padding: 0 10px;
  border-bottom: 1px solid #25272b;
  color: #c9ccd1;
}

.lv-tabs span {
  padding-bottom: 10px;
}

.lv-tabs .on {
  margin-bottom: -1px;
  border-bottom: 2px solid #e7e9eb;
  color: #fff;
}

.lv-tabs b {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 5px;
  background: #1d1e22;
  font-size: 11.5px;
  font-weight: 500;
}

.lv-evrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 42px;
  border-bottom: 1px solid #25272b;
  font-size: 12.5px;
  color: #8b8f98;
}

.lv-pager {
  display: flex;
  gap: 7px;
}

.lv-pager .lv-btn {
  background: transparent;
  color: #6f737c;
  height: 25px;
}

.lv-pager .on {
  color: #e8eaec;
}

.lv-sthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 26px 0 12px;
}

.lv-seg {
  display: flex;
  padding: 3px;
  border-radius: 7px;
  background: #1b1d20;
  font-size: 13px;
  color: #c9ccd1;
}

.lv-seg span {
  padding: 4px 10px;
  border-radius: 5px;
}

.lv-seg .on {
  background: #26282c;
  color: #fff;
}

.lv-card {
  border: 1px solid #25272b;
  border-radius: 9px;
  overflow: hidden;
}

.lv-exc {
  display: grid;
  gap: 3px;
  padding: 8px 20px 6px;
  background: #17191a;
  border-bottom: 1px solid #25272b;
}

.lv-exc b {
  font-weight: 600;
}

.lv-exc span {
  color: #c9ccd1;
}

.lv-frame {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 33px;
  padding: 0 14px 0 14px;
  border-bottom: 1px solid #1f2124;
  font-size: 12.5px;
  color: #8b8f98;
}

.lv-frame svg {
  width: 13px;
  height: 13px;
}

.lv-frame code {
  color: #e8eaec;
}

.lv-frame i {
  font: 12.5px var(--mono);
}

.lv-frame em {
  margin-left: auto;
  font: 12.5px var(--mono);
  font-style: normal;
}

.lv-code {
  margin: 0;
  padding: 7px 0;
  list-style: none;
  counter-reset: ln 11;
  font-size: 12.5px;
  line-height: 20.6px;
  border-bottom: 1px solid #1f2124;
}

.lv-code li {
  position: relative;
  counter-increment: ln;
  height: 20.6px;
  padding-left: 58px;
  white-space: pre;
  transition: background 0.4s ease, opacity 0.5s ease;
}

.lv-code li::before {
  content: counter(ln);
  position: absolute;
  left: 0;
  width: 56px;
  text-align: right;
  color: #6f737c;
}

.lv-code .hl {
  background: #2e2815;
}

/* A reading sweep runs down the frame to the failing line. */
.lv-code li.scan {
  background: rgba(255, 255, 255, 0.05);
  transition: none;
}

.lv-code .hl.glow {
  background: #4a3a14;
  box-shadow: inset 3px 0 0 #ffb224;
}

[data-phase="solved"] .lv-code .hl {
  background: #122a1a;
  box-shadow: inset 3px 0 0 #30d158;
}

.lv-vars {
  margin: 0;
  padding: 2px 18px 6px;
  font-size: 12.5px;
  border-bottom: 1px solid #1f2124;
}

.lv-vars div {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  height: 33px;
  padding: 0 8px;
  border-bottom: 1px solid #1f2124;
  transition: background 0.5s ease;
}

.lv-vars div:last-child {
  border-bottom: 0;
}

.lv-vars dt {
  color: #b5b8be;
}

.lv-vars dd {
  margin: 0;
  color: #e8eaec;
}

.lv-vars div.flash {
  background: rgba(255, 255, 255, 0.045);
  transition: none;
}

.lv-vars .key.flash dd {
  color: #ffb224;
}

/* Right panel */
.lv-right {
  padding: 22px 20px 0 21px;
  background: #101213;
  border-left: 1px solid #1e1f23;
  overflow: hidden;
}

.lv-label {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: #8b8f98;
}

.lv-assign {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
}

.lv-assign > svg {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: #8b8f98;
}

.lv-av-p {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #4b4d4f;
  color: #c9ccd1;
}

.lv-av-p svg {
  width: 13px;
  height: 13px;
}

.lv-kv {
  margin: 0 0 22px;
}

.lv-kv div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 27.5px;
}

.lv-kv dt {
  color: #c9ccd1;
}

.lv-kv dd {
  margin: 0;
}

.lv-kv code {
  font-size: 12.5px;
  font-weight: 700;
}

.lv-n {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 0.6s ease, transform 0.5s var(--spring);
}

.lv-n.bump {
  color: #ffb224;
  transform: translateY(-1px) scale(1.12);
  transition: none;
}

.lv-seen.bump {
  color: #ffb224;
  transition: none;
}

.lv-seen {
  transition: color 0.8s ease;
}

.lv-dist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lv-dist li {
  display: flex;
  justify-content: space-between;
  position: relative;
  height: 36px;
  font-size: 13px;
}

.lv-dist i {
  margin-right: 6px;
  font-style: normal;
  color: #8b8f98;
}

.lv-dist em {
  font-style: normal;
  color: #8b8f98;
  font-size: 12.5px;
}

.lv-dist li::before,
.lv-dist li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 9px;
  height: 3px;
  border-radius: 2px;
}

.lv-dist li::before {
  right: 0;
  background: #24262a;
}

.lv-dist li::after {
  width: calc(var(--v) * 100%);
  background: #7e818d;
  transition: width 1.1s var(--ease) var(--bar-delay, 0s);
}

.appshot.build .lv-dist li::after {
  width: 0;
  transition: none;
}

.appshot.build .lv-code li,
.appshot.build .lv-vars div,
.appshot.build .lv-frame:not(.open) {
  opacity: 0;
  transition: none;
}

.lv-vars div,
.lv-frame {
  transition: opacity 0.5s ease, background 0.5s ease;
}

/* Pointer: constant on-screen size whatever the scale. */
.lv-cursor {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  width: calc(22px / var(--k, 0.716)) !important;
  height: calc(22px / var(--k, 0.716)) !important;
  fill: #fff !important;
  stroke: #000 !important;
  stroke-width: 1.4 !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  opacity: 0;
  transform: translate(var(--cx, 1000px), var(--cy, 600px));
  transition: transform 1.1s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.4s ease;
  pointer-events: none;
}

.lv-cursor.on {
  opacity: 1;
}

.lv-cursor.click {
  transition: transform 0.15s ease, opacity 0.4s ease;
}

/* Loop seam: the screen dims for a breath and comes back open. */
.appshot .lv {
  transition: opacity 0.6s ease, filter 0.6s ease;
}

.appshot.rest .lv {
  opacity: 0.25;
  filter: blur(2px);
}

/* Notifications sit bottom right, clear of the buttons the pointer uses. */
.frame.is-live .toasts {
  text-align: left;
  top: auto;
  bottom: 14px;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .frame.is-live .toasts {
    right: 10px;
    bottom: 10px;
    width: min(270px, 82%);
  }
}

/* ---------- comparison: two columns, Fehlo's lit in soft orange ---------- */

.compare {
  text-align: center;
}

.compare .intro {
  margin-left: auto;
}

.vs {
  --label: 210px;
  --gap: 20px;
  position: relative;
  isolation: isolate;
  margin: 72px auto 0;
  max-width: 1000px;
  text-align: left;
}

/* The Fehlo column carries a soft orange wash from the head to the last row. */
.vs::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(var(--label) + var(--gap));
  width: calc((100% - var(--label) - 2 * var(--gap)) / 2);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 92, 57, 0.09), rgba(255, 92, 57, 0.035));
  box-shadow: inset 0 0 0 1px rgba(255, 92, 57, 0.14);
}

.vs-head,
.vs-row {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gap);
}

.vs-head {
  align-items: center;
  padding: 30px 0 26px;
}

.vs-head span {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 28px;
}

.vs-us img {
  width: auto;
  height: 28px;
}

.vs-them {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #86868b;
}

.vs-rows {
  margin: 0;
}

.vs-row {
  align-items: baseline;
  padding: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.vs-row:last-child {
  padding-bottom: 30px;
}

.vs-row dt {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--paper-ink);
}

.vs-row dd {
  margin: 0;
  padding: 0 28px;
  font-size: 15px;
  line-height: 1.45;
}

.vs-row b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vs-row .us {
  color: #6e6e73;
}

.vs-row .us b {
  color: var(--paper-ink);
}

/* A small check before each Fehlo value. */
.vs-row .us b::before {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.34em;
  margin: 0 0.4em 0.2em 0;
  border-left: 2.5px solid #e8542f;
  border-bottom: 2.5px solid #e8542f;
  transform: rotate(-45deg);
}

.vs-row .them {
  color: #a1a1a6;
}

.vs-row .them b {
  color: #86868b;
}

.vs-row sup {
  font-size: 0.7em;
}

.vs-row sup a {
  color: inherit;
}

.vs-who {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.motion .vs .vs-row {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.8s var(--ease);
}

.motion .vs.in .vs-row {
  opacity: 1;
  transform: none;
}

.motion .vs.in .vs-row:nth-child(2) { transition-delay: 0.07s; }
.motion .vs.in .vs-row:nth-child(3) { transition-delay: 0.14s; }
.motion .vs.in .vs-row:nth-child(4) { transition-delay: 0.21s; }
.motion .vs.in .vs-row:nth-child(5) { transition-delay: 0.28s; }
.motion .vs.in .vs-row:nth-child(6) { transition-delay: 0.35s; }
.motion .vs.in .vs-row:nth-child(7) { transition-delay: 0.42s; }

.motion .vs::before {
  transform: scaleY(0.96);
  opacity: 0;
  transition: opacity 0.9s ease, transform 1.1s var(--ease);
}

.motion .vs.in::before {
  transform: none;
  opacity: 1;
}

.compare .compare-more {
  margin-top: 44px;
}

.compare .footnotes {
  margin: 36px auto 0;
  max-width: 920px;
  text-align: left;
}

/* ---------- agencies: dark, one team per customer, a status page in their name ---------- */

.agency {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.agency::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -10%;
  top: 10%;
  width: 70%;
  height: 80%;
  border-radius: 50%;
  background: rgba(255, 92, 57, 0.07);
  filter: blur(90px);
  pointer-events: none;
}

.agency-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}

.agency .intro {
  margin: 22px 0 0;
}

.agency-points {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 22px;
}

.agency-points li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.agency-points p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}

.agency-points b {
  color: var(--ink);
  font-weight: 600;
}

.agency-points a {
  color: var(--ink);
}

.ap-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ff8a66;
}

.ap-ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.motion .agency-points li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.8s var(--ease);
}

.motion .agency-points.in li {
  opacity: 1;
  transform: none;
}

.motion .agency-points.in li:nth-child(2) { transition-delay: 0.08s; }
.motion .agency-points.in li:nth-child(3) { transition-delay: 0.16s; }
.motion .agency-points.in li:nth-child(4) { transition-delay: 0.24s; }

/* The example: the agency's team list, and the status page of the selected customer. */
.agency-demo {
  position: relative;
}

.ad-win {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  border-radius: 20px;
  overflow: hidden;
  background: #141518;
  border: 1px solid #2a2b30;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}

.ad-teams {
  padding: 16px 10px;
  border-right: 1px solid #222327;
  background: #0f1012;
}

.ad-label {
  margin: 0 8px 10px;
  font-size: 13px;
  font-weight: 600;
}

.ad-label i {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-3);
}

.ad-teams ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.ad-teams li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border-radius: 11px;
  transition: background 0.45s ease;
}

.ad-teams li.on {
  background: rgba(255, 255, 255, 0.08);
}

.ad-teams li b,
.ad-brand b {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ad-teams li span {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-teams small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
}

.ad-teams li i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.15);
}

.ad-status {
  margin: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.ad-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  background: #ececf0;
  border-bottom: 1px solid #dcdce1;
}

.ad-url {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 24px;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  color: #3a3a3c;
  white-space: nowrap;
  overflow: hidden;
}

.ad-url svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #86868b;
  stroke-width: 2;
}

.ad-page {
  padding: 22px 22px 18px;
  transition: opacity 0.35s ease;
}

.ad-page.swap {
  opacity: 0;
}

.ad-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.ad-ok {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 16px;
  padding: 11px 14px;
  border-radius: 11px;
  background: #e9f9ee;
  color: #13692d;
  font-size: 14px;
  font-weight: 600;
}

.ad-ok i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22a447;
  box-shadow: 0 0 0 4px rgba(34, 164, 71, 0.18);
}

.ad-mons {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.ad-mons li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  font-size: 13px;
}

.ad-mons span {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-mons em {
  font-style: normal;
  color: #6e6e73;
}

/* 45 days as small green ticks; drawn from left to right when the demo comes in. */
.ad-mons u {
  grid-column: 1 / -1;
  height: 18px;
  background: repeating-linear-gradient(90deg, #34c759 0 calc(100% / 45 - 2px), transparent calc(100% / 45 - 2px) calc(100% / 45));
  border-radius: 2px;
  clip-path: inset(0 0 0 0);
}

.motion .ad-mons u {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease);
}

.motion .agency-demo.in .ad-mons u {
  clip-path: inset(0 0 0 0);
}

.motion .agency-demo.in .ad-mons li:nth-child(2) u { transition-delay: 0.12s; }
.motion .agency-demo.in .ad-mons li:nth-child(3) u { transition-delay: 0.24s; }

.ad-foot {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: #a1a1a6;
}

.ad-note {
  margin: 16px 0 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 12.5px;
  color: rgba(255, 122, 84, 0.9);
}

.motion .agency-demo .ad-win {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.8s ease, transform 1.1s var(--spring);
}

.motion .agency-demo.in .ad-win {
  opacity: 1;
  transform: none;
}

.motion .agency-demo .ad-status {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease 0.25s, transform 0.9s var(--spring) 0.25s;
}

.motion .agency-demo.in .ad-status {
  opacity: 1;
  transform: none;
}

/* ---------- pricing: plan cards, monthly or yearly, and which plan fits ---------- */

.pricing {
  text-align: center;
}

.pricing .intro {
  margin-left: auto;
}

.incl {
  margin: 36px auto 0;
  max-width: 860px;
}

.incl p {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: #86868b;
}

.incl ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.incl li {
  padding: 6px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e3e3e8;
  font-size: 14px;
  color: var(--paper-ink);
}

.price-ctl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px 32px;
  margin: 64px 0 22px;
  text-align: left;
}

.bill {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.bill button {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 500 15px var(--font);
  color: #6e6e73;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.bill button.on {
  background: var(--paper-ink);
  color: #fff;
}

/* The switch needs the script; without it the cards already show both prices. */
html:not(.js) .bill button {
  display: none;
}

html:not(.js) .bill-hint {
  margin-left: 0;
}

.bill-hint {
  margin-left: 10px;
  font-size: 13px;
  color: #c2410c;
}

.fit {
  display: none;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: #6e6e73;
}

.js .fit {
  display: flex;
}

.fit input {
  width: 180px;
  accent-color: #e8542f;
}

.fit output {
  min-width: 110px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--paper-ink);
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  text-align: left;
}

.plan,
.dedicated {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #e3e3e8;
  transition: border-color 0.45s ease, box-shadow 0.45s ease, transform 0.6s var(--spring);
}

.plan h3,
.dedicated h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
}

.price .amt {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.price .per,
.price .from {
  font-size: 15px;
  color: #86868b;
}

.price-alt {
  min-height: 1.4em;
  margin: 8px 0 0;
  font-size: 13.5px;
  color: #86868b;
}

/* Changing the billing period rolls the price. */
.price.roll .amt {
  animation: price-roll 0.5s var(--spring);
}

@keyframes price-roll {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(4px); }
}

.quota {
  margin: 22px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid #ececf0;
  display: grid;
  gap: 9px;
}

.quota li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  font-size: 14px;
}

.quota span {
  color: #6e6e73;
}

.quota b {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.plan-extra {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 92, 57, 0.06);
  font-size: 13px;
  line-height: 1.45;
  color: #9a3412;
}

.plan-cta {
  height: 42px;
  font-size: 15px;
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
  text-align: center;
  background: var(--paper-ink);
  color: #fff;
}

.plan .quota + .plan-cta,
.plan .plan-extra + .plan-cta {
  margin-top: 22px;
}

/* Cards share one height; the button sits on the bottom edge. */
.plan .plan-extra {
  margin-bottom: auto;
}

.plan:not(:has(.plan-extra)) .quota {
  margin-bottom: auto;
}

.plan-dark {
  background: #111113;
  border-color: #111113;
  color: var(--ink);
}

.plan-dark .quota {
  border-top-color: #2a2a2e;
}

.plan-dark .quota span,
.plan-dark .price .per,
.plan-dark .price-alt {
  color: var(--ink-3);
}

.plan-dark .plan-extra {
  background: rgba(255, 92, 57, 0.12);
  color: #ffb199;
}

.plan-dark .plan-extra .note {
  color: #a1a1a6;
}

.plan-dark .plan-cta {
  background: #fff;
  color: #111113;
}

/* The plan that fits the chosen amount of errors. */
.plan.fits,
.dedicated.fits {
  border-color: #e8542f;
  box-shadow: 0 0 0 1px #e8542f, 0 24px 60px rgba(232, 84, 47, 0.16);
  transform: translateY(-6px);
}

.plan.fits::after,
.dedicated.fits::after {
  content: "passt";
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e8542f;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.dedicated {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px 36px;
  margin-top: 14px;
  text-align: left;
}

.dedicated.fits::after {
  top: -11px;
  right: 24px;
}

.dedicated div p {
  margin: 6px 0 0;
  font-size: 15px;
  color: #6e6e73;
}

.dedicated .price {
  margin: 0;
}

.dedicated .price .amt {
  font-size: 34px;
}

.dedicated .plan-cta {
  margin: 0;
  padding-left: 22px;
  padding-right: 22px;
}

.pricing .footnotes {
  margin: 28px auto 0;
  max-width: 820px;
  text-align: center;
}

.fine {
  margin: 14px auto 0;
  max-width: 820px;
}

.fine summary {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #c2410c;
  cursor: pointer;
}

.fine .footnotes {
  text-align: left;
  margin-top: 16px;
  gap: 10px;
}

.motion .plans .plan {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.9s var(--spring), border-color 0.45s ease, box-shadow 0.45s ease;
}

.motion .plans.in .plan {
  opacity: 1;
  transform: none;
}

.motion .plans.in .plan.fits {
  transform: translateY(-6px);
}

.motion .plans.in .plan:nth-child(2) { transition-delay: 0.07s, 0.07s, 0s, 0s; }
.motion .plans.in .plan:nth-child(3) { transition-delay: 0.14s, 0.14s, 0s, 0s; }
.motion .plans.in .plan:nth-child(4) { transition-delay: 0.21s, 0.21s, 0s, 0s; }

@media (hover: hover) {
  .plan:hover {
    border-color: #d2d2d7;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  }

  .plan-dark:hover {
    border-color: #111113;
  }
}

@media (max-width: 1080px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agency-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }

  .agency-demo {
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .vs {
    --gap: 8px;
    margin-top: 48px;
  }

  .vs::before {
    left: 0;
    width: calc(50% - 4px);
    border-radius: 18px;
  }

  .vs-head,
  .vs-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .vs-blank {
    display: none !important;
  }

  .vs-head {
    padding: 18px 0 14px;
  }

  .vs-head span,
  .vs-row dd {
    padding: 0 12px;
  }

  .vs-row dt {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    padding: 0 12px;
    font-size: 13px;
    color: #86868b;
  }

  .vs-us img {
    height: 22px;
  }

  .vs-them {
    font-size: 19px;
  }

  .vs-row {
    padding: 16px 0 18px;
  }

  .vs-row dd {
    font-size: 13.5px;
  }

  .vs-row b {
    font-size: 16.5px;
  }

  .agency-points p {
    font-size: 16px;
  }

  .ad-win {
    grid-template-columns: minmax(0, 1fr);
  }

  .ad-teams {
    padding: 12px 10px 10px;
    border-right: 0;
    border-bottom: 1px solid #222327;
  }

  .ad-teams ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ad-teams li {
    gap: 8px;
    padding: 6px;
  }

  .ad-teams li b {
    width: 26px;
    height: 26px;
    font-size: 10.5px;
  }

  .ad-teams small,
  .ad-teams li i {
    display: none;
  }

  .ad-status {
    margin: 12px;
  }

  .ad-page {
    padding: 18px 16px 14px;
  }

  .ad-note {
    font-size: 11.5px;
  }

  .price-ctl {
    margin-top: 44px;
    flex-direction: column;
    align-items: stretch;
  }

  .bill-hint {
    margin: 6px 0 0 4px;
    flex-basis: 100%;
  }

  .fit {
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  .fit-q {
    flex-basis: 100%;
  }

  .fit input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .price .amt {
    font-size: 40px;
  }

  .dedicated {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }
}

/* Very low windows (phones held sideways): a card cannot fit the sticky deck, so the
   cards read one after the other there as well, fully drawn. */
@media (max-height: 500px) {
  .motion .deck-track {
    height: auto;
  }

  .motion .deck-sticky {
    position: static;
    height: auto;
    display: grid;
    padding-top: 0;
  }

  .motion .deck-sticky .tour-head .intro {
    display: block;
  }

  .motion .deck {
    height: auto;
    overflow: visible;
  }

  .motion .deck .layer {
    position: relative;
    inset: auto;
    transform: none !important;
    box-shadow: none;
  }

  .motion .deck .layer::after,
  .deck-dots {
    display: none;
  }

  .motion .layer .spark i,
  .motion .layer .code-lines .ln,
  .motion .layer .v {
    opacity: 1;
    transform: none;
  }

  .motion .layer .d-bar i {
    width: calc(var(--v) * 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Phones: a card does not need the whole screen height. */
@media (max-width: 640px) {
  .motion .deck {
    max-height: 520px;
  }
}

/* Small phones: the heading now shares the screen with the deck, so the cards get denser. */
@media (max-width: 640px) {
  .vars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vars-note {
    display: none;
  }
}

@media (max-width: 640px) and (max-height: 600px) {
  .motion .deck .layer-text p:not(.kick) {
    display: none;
  }
}

@media (max-width: 900px) {
  /* Card text and visual read as one block, centred in the card. */
  .layer {
    grid-template-rows: auto auto;
    align-content: center;
  }
}

@media (max-width: 640px) {
  .redact pre span {
    padding: 0 14px;
  }

  .redact .r {
    margin-left: 6px;
    padding: 0 6px;
  }

  .features > div {
    padding: 16px 18px 18px;
    border-radius: 16px;
  }

  .features dt {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .ficon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .ficon svg {
    width: 19px;
    height: 19px;
  }

  .features dd {
    margin-top: 8px;
  }

}