/* fimodo landing page. Tokens follow DESIGN.md ("Ruhige Ablage") and apps/web/src/styles.css:
   warm ground, white papers, ink for the one action, iris only for marks, the platform's own face. */
:root {
  color-scheme: light dark;
  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', system-ui, Roboto,
    'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --canvas: #f4f3ef;
  --surface: #ffffff;
  --fill: rgb(118 113 100 / 0.1);
  --fill-strong: rgb(118 113 100 / 0.17);
  --line: rgb(60 55 40 / 0.11);
  --line-strong: rgb(60 55 40 / 0.24);
  --ink: #1d1d1f;
  --ink-2: #56555a;
  --mute: #5f5e63;
  --material: rgb(244 243 239 / 0.76);
  --primary: #1d1d1f;
  --on-primary: #ffffff;
  --accent: #5148d4;
  --accent-strong: #3f36bd;
  --accent-wash: rgb(81 72 212 / 0.1);
  --highlight: rgb(255 199 0 / 0.38);
  --warn: #8a5300;
  --warn-wash: #fcf2df;
  --warn-line: #ecc98c;

  /* Paper stays paper in both themes, so everything printed on it keeps its own ink. */
  --paper: #ffffff;
  --paper-ink: #1d1d1f;
  --paper-ink-2: #56555a;
  --paper-mute: #5f5e63;
  --paper-fill: rgb(118 113 100 / 0.11);
  --paper-line: rgb(118 113 100 / 0.16);
  --paper-accent: #5148d4;
  --paper-highlight: rgb(255 199 0 / 0.42);

  --shadow-paper:
    0 0 0 1px rgb(30 25 15 / 0.07), 0 1px 2px rgb(30 25 15 / 0.06), 0 4px 10px rgb(30 25 15 / 0.06);
  --shadow-lift:
    0 0 0 1px rgb(30 25 15 / 0.07), 0 2px 4px rgb(30 25 15 / 0.06), 0 14px 28px rgb(30 25 15 / 0.12);
  --shadow-sheet:
    0 0 0 1px rgb(30 25 15 / 0.06), 0 2px 6px rgb(30 25 15 / 0.06), 0 24px 56px rgb(30 25 15 / 0.14);

  --radius-paper: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --gutter: 2rem;
  --section: clamp(4.5rem, 3rem + 6vw, 8rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #121212;
    --surface: #1c1c1e;
    --fill: rgb(255 255 255 / 0.08);
    --fill-strong: rgb(255 255 255 / 0.14);
    --line: rgb(255 255 255 / 0.09);
    --line-strong: rgb(255 255 255 / 0.2);
    --ink: #f5f5f7;
    --ink-2: #b6b6bc;
    --mute: #9c9ca2;
    --material: rgb(18 18 18 / 0.76);
    --primary: #f5f5f7;
    --on-primary: #1c1c1e;
    --accent: #9b96ff;
    --accent-strong: #b5b1ff;
    --accent-wash: rgb(155 150 255 / 0.16);
    --highlight: rgb(255 214 10 / 0.32);
    --warn: #f2b45a;
    --warn-wash: rgb(242 180 90 / 0.12);
    --warn-line: rgb(242 180 90 / 0.38);

    --paper: #ecebe7;
    --paper-fill: rgb(90 85 72 / 0.13);
    --paper-line: rgb(90 85 72 / 0.2);

    --shadow-paper: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 8px rgb(0 0 0 / 0.45);
    --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 32px rgb(0 0 0 / 0.55);
    --shadow-sheet: 0 0 0 1px rgb(255 255 255 / 0.08), 0 28px 64px rgb(0 0 0 / 0.6);
  }
}

/* Base */

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

html {
  font-family: var(--font);
  font-size: 100%;
  line-height: 1.45;
  color: var(--ink);
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  scrollbar-color: var(--line-strong) transparent;
}

body {
  margin: 0;
  background: var(--canvas);
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

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

::selection {
  background: var(--accent-wash);
  color: var(--ink);
}

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

mark {
  background: var(--highlight);
  color: inherit;
  padding: 0 0.12em;
}

/* The page's one colour moment: a highlighter stroke over what was found. It is drawn once,
   with chisel-cut ends, and draws again whenever a new answer appears. */
.marker {
  --marker: var(--highlight);
  padding: 0 0.1em;
  margin-inline: -0.1em;
  background: linear-gradient(
      100deg,
      transparent 0.06em,
      var(--marker) 0.2em,
      var(--marker) calc(100% - 0.2em),
      transparent calc(100% - 0.04em)
    )
    0 58% / 100% 0.74em no-repeat;
  animation: marker-draw 640ms var(--ease-out) 380ms both;
}

.sheet .marker {
  --marker: var(--paper-highlight);
}

@keyframes marker-draw {
  from {
    background-size: 0% 0.74em;
  }
}

.icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.frame {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  text-decoration: none;
}

.skip:hover {
  color: var(--on-primary);
}

.skip:focus {
  top: 0.5rem;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    opacity 150ms var(--ease-out),
    background-color 150ms var(--ease-out),
    transform 150ms var(--ease-out);
}

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

.btn-primary,
.btn-primary:hover {
  background: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  opacity: 0.86;
}

.btn-secondary,
.btn-secondary:hover {
  background: var(--fill);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--fill-strong);
}

/* On a white plan card the plain fill reads as disabled, so it starts one step stronger. */
.plan .btn-secondary {
  background: var(--fill-strong);
}

.plan .btn-secondary:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.btn-lg {
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* Bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--line);
}

.bar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 3.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  height: 2.5rem;
  color: var(--ink);
  border-radius: var(--radius-sm);
}

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

.wordmark svg {
  height: 1.25rem;
  width: auto;
  fill: currentColor;
}

.wordmark .dot {
  fill: var(--accent);
}

.nav {
  display: flex;
  gap: 0.25rem;
}

.nav a,
.link-quiet {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 150ms var(--ease-out),
    color 150ms var(--ease-out);
}

.nav a:hover,
.link-quiet:hover {
  background: var(--fill);
  color: var(--ink);
}

.bar-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.5rem;
}

/* The kitchen table */

.table {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  min-height: min(calc(100svh - 3.25rem), 62rem);
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--gutter) clamp(4rem, 9vh, 6rem);
  overflow: clip;
  isolation: isolate;
}

/* The real table under the letters; in dark mode the same table at dusk. */
.table::before,
.close::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--canvas) url('img/tisch.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 82%, transparent);
  mask-image: linear-gradient(#000 82%, transparent);
}

/* The closing section shows the same table as the hero, now cleared of letters. */
.close::before {
  -webkit-mask-image: linear-gradient(transparent, #000 18%);
  mask-image: linear-gradient(transparent, #000 18%);
}

@media (prefers-color-scheme: dark) {
  .table::before,
  .close::before {
    filter: brightness(0.5) saturate(0.9);
  }
}

.pile {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.letter {
  position: absolute;
  width: clamp(9rem, 16vw, 15rem);
  aspect-ratio: 210 / 297;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-paper);
  transition:
    transform 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out);
}

/* Example documents are generated scans of fictional letters (img/briefe, provenance in
   .impeccable/assets/landing/briefe). They fill their paper and keep the paper's corner and shadow. */
.scan {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-color-scheme: dark) {
  /* Paper stays paper, dimmed slightly so it does not glare on the dark ground. */
  .scan {
    filter: brightness(0.92);
  }
}

.demo-hit mark {
  background: var(--paper-highlight);
  color: var(--paper-ink);
}

.letter-1 {
  left: 4%;
  top: 6%;
  transform: rotate(-7deg);
}
.letter-6 {
  left: 11%;
  top: 37%;
  transform: rotate(4deg);
}
.letter-5 {
  left: 3%;
  bottom: 3%;
  transform: rotate(-3deg);
}
.letter-2 {
  right: 9%;
  top: 4%;
  transform: rotate(6deg);
}
.letter-3 {
  right: 3%;
  top: 35%;
  z-index: 1;
  transform: rotate(-3deg);
}
.letter-4 {
  right: 11%;
  bottom: 2%;
  transform: rotate(4deg);
}

/* The answer's source letter rises out of the pile, its passage marked. */
.letter-3.is-found {
  transform: translateY(-0.5rem) rotate(-1deg);
  box-shadow:
    0 0 0 3px var(--paper-accent),
    var(--shadow-lift);
}

.sheet {
  position: relative;
  z-index: 2;
  width: min(38rem, 100%);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-sheet);
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--paper-mute);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.sheet h1 {
  margin-top: clamp(1.75rem, 4.5vh, 2.75rem);
  font-size: clamp(2.375rem, 1.4rem + 3.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.sheet-lede {
  max-width: 32em;
  margin-top: 1.25rem;
  color: var(--paper-ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
}

.sheet-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
}

.sheet .btn-primary,
.close-sheet .btn-primary {
  background: var(--paper-ink);
  color: #ffffff;
}

.sheet :focus-visible,
.close-sheet :focus-visible {
  outline-color: var(--paper-accent);
}

.sheet-note {
  color: var(--paper-ink-2);
  font-size: 0.9375rem;
}

.demo-search {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  padding: 0.55rem 1rem;
  border-radius: 11px;
  background: var(--paper-fill);
  color: var(--paper-ink);
  font-size: 1rem;
  text-decoration: none;
  transition: box-shadow 150ms var(--ease-out);
}

.demo-search:hover {
  color: var(--paper-ink);
  box-shadow: 0 0 0 1px var(--paper-line);
}

.demo-search .icon {
  flex: none;
  color: var(--paper-mute);
}

.demo-query {
  flex: 1;
  min-width: 0;
}

/* The field is a link to the worked example further down, and says so: it is not an input. */
.demo-go {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  color: var(--paper-accent);
  font-size: 0.875rem;
  font-weight: 600;
}

.demo-search .demo-go .icon {
  width: 1rem;
  height: 1rem;
  color: inherit;
  stroke-width: 2;
  transition: transform 150ms var(--ease-out);
}

.demo-search:hover .demo-go .icon {
  transform: translateY(2px);
}

.demo-query.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--paper-accent);
  animation: caret 1s steps(1) infinite;
}

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

.demo-hit {
  margin-top: 0.75rem;
  padding-inline: 0.25rem;
  color: var(--paper-ink-2);
  font-size: 0.9375rem;
  transition:
    opacity 260ms var(--ease-out),
    transform 260ms var(--ease-out);
}

.demo-hit-source {
  display: block;
  color: var(--paper-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.demo-hit.is-pending {
  opacity: 0;
  transform: translateY(0.25rem);
}

.sample-note {
  margin-top: 1.25rem;
  color: var(--paper-mute);
  font-size: 0.75rem;
  text-align: right;
}

/* Sections */

.section {
  padding-block: var(--section);
}

.section-surface {
  background: var(--surface);
}

.intro {
  max-width: 42rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

h2 {
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.intro p,
.ask-copy > p:first-of-type,
.share-copy p {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: 1.1875rem;
  line-height: 1.5;
}

/* A centred statement breaks the run of left-aligned intros where the page changes subject. */
.intro.statement {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.statement h2 {
  font-size: clamp(2.375rem, 1.4rem + 3.4vw, 3.75rem);
}

.statement p {
  max-width: 34em;
  margin-inline: auto;
}

.statement .struck {
  margin-top: 2rem;
  color: var(--mute);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Each word is crossed out by hand, at its own slant. */
.struck s {
  position: relative;
  margin-inline: 0.35em;
  text-decoration: none;
}

.struck s::after {
  content: '';
  position: absolute;
  inset-inline: -0.12em;
  top: 52%;
  height: 0.09em;
  background: var(--ink);
  border-radius: var(--radius-pill);
  transform: rotate(-3deg);
}

.struck s:nth-child(2)::after {
  transform: rotate(2deg);
}

.struck s:nth-child(3)::after {
  transform: rotate(-1.5deg);
}

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

.fine {
  color: var(--mute);
  font-size: 0.875rem;
}

/* Gallery: the pile becomes the archive */

.month {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.papers + .month {
  margin-top: 3rem;
}

.papers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 2rem 1.5rem;
}

.paper {
  aspect-ratio: 210 / 297;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-paper);
}

.gallery > .sample-note {
  margin-top: 1.5rem;
  color: var(--mute);
  text-align: left;
}

.card-title {
  display: -webkit-box;
  margin-top: 0.75rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.card-meta {
  margin-top: 0.15rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* With the script, the papers start as a heap and settle into the grid once seen. */
.gallery.is-heaped .paper {
  transition: none;
}

.gallery.is-heaped .card p {
  opacity: 0;
}

.gallery.is-settling .paper {
  transition: transform 900ms var(--ease-out);
}

.gallery.is-settling .card p {
  transition: opacity 400ms var(--ease-out) 650ms;
}

/* The three ways in sit on one line under the photo, like stops on a strip. */
.intake {
  margin-top: clamp(5rem, 3.5rem + 5vw, 9rem);
}

.intake h3 {
  margin-bottom: 1.5rem;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.intake-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--fill);
  border-radius: var(--radius-lg);
}

.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 3rem 0 1.5rem;
  border-top: 1px solid var(--line-strong);
}

.ways li {
  padding-right: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.way-node {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  background: var(--canvas);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px var(--line-strong);
}

.ways .icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--ink);
  stroke-width: 1.6;
}

.way-title {
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ways li p:not(.way-title) {
  max-width: 34em;
  margin-top: 0.2rem;
  color: var(--ink-2);
}

/* Asking */

.ask {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 2rem + 4vw, 6rem);
  align-items: start;
}

.questions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 2rem 0;
}

.q {
  min-height: 2.5rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 150ms var(--ease-out),
    color 150ms var(--ease-out),
    transform 150ms var(--ease-out);
}

.q:hover {
  background: var(--fill-strong);
}

.q:active {
  transform: scale(0.97);
}

.q[aria-pressed='true'] {
  background: var(--primary);
  color: var(--on-primary);
}

.answer {
  display: grid;
}

.answer-panel {
  animation: drop-in 260ms var(--ease-out);
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
}

.answer-text {
  max-width: 30em;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.answer-text .marker {
  font-weight: 650;
}

.source {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 2rem;
}

.source-paper,
.view-paper {
  width: min(17rem, 100%);
  aspect-ratio: 210 / 297;
  flex: none;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-lift);
}

.source-meta {
  max-width: 24rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.source-meta span {
  display: block;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Large enough that the marked passage on the source letter can be read. */
.answer .source-paper {
  width: min(24rem, 100%);
}

.answer .sample-note {
  color: var(--mute);
  text-align: left;
}

/* Security: the one dark band. It is the dark theme laid out locally, on the paper ink, so the
   claim reads as the page's peak in both themes. */

.band {
  --ink: #f5f5f7;
  --ink-2: #b6b6bc;
  --mute: #9c9ca2;
  --line: rgb(255 255 255 / 0.12);
  --accent: #9b96ff;
  --accent-strong: #b5b1ff;
  --accent-wash: rgb(155 150 255 / 0.16);
  --primary: #f5f5f7;
  --on-primary: #1c1c1e;
  --paper: #ecebe7;
  --shadow-paper: 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 8px rgb(0 0 0 / 0.45);
  --shadow-lift: 0 0 0 1px rgb(255 255 255 / 0.08), 0 16px 32px rgb(0 0 0 / 0.55);
  color-scheme: dark;
  padding-block: calc(var(--section) * 1.2);
  background: var(--paper-ink);
  color: var(--ink);
}

.band .scan {
  filter: brightness(0.92);
}

/* On the dark ground the band is barely raised, so hairlines mark where it begins and ends. */
@media (prefers-color-scheme: dark) {
  .band {
    box-shadow:
      inset 0 1px rgb(255 255 255 / 0.07),
      inset 0 -1px rgb(255 255 255 / 0.07);
  }
}

.band h2 {
  font-size: clamp(2.375rem, 1.4rem + 3.4vw, 3.75rem);
  line-height: 1.02;
}

.h2-lead {
  display: block;
  color: var(--ink-2);
}

.security {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 2rem + 4vw, 6rem);
  align-items: center;
}

.security .intro {
  margin-bottom: 0;
}

.band-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2.25rem;
}

.band-note {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.views {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 19rem));
  justify-content: end;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}

.views-note {
  grid-column: 1 / -1;
  margin-top: calc(-1 * clamp(1.5rem, 1rem + 3vw, 4rem) + 0.5rem);
  color: var(--mute);
  text-align: left;
}

.view figcaption {
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.view-paper {
  box-shadow: var(--shadow-paper);
}

/* The second copy of the letter lies under its ciphertext. On the way into view the ciphertext
   closes over it from the top, behind an iris seam whose rows scramble (main.js); --seal is the
   share already sealed and rests at 1, the final state, without the script. */
.view-sealed {
  --seal: 1;
  position: relative;
  container-type: inline-size;
}

.view-cipher {
  position: absolute;
  inset: 0;
  padding: 1.25rem;
  overflow: hidden;
  background: var(--paper);
  color: var(--paper-mute);
  font-family: var(--font-mono);
  /* Forty characters per row fill the paper's width at any size. */
  font-size: calc((100cqi - 2.5rem) / 24.4);
  line-height: 1.62;
  word-break: break-all;
  user-select: none;
  clip-path: inset(0 0 calc(100% - var(--seal) * 100%) 0);
}

.cipher-row {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.cipher-row.is-scrambling {
  color: var(--paper-accent);
}

.view-sealed::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: calc(var(--seal) * 100% - 1px);
  height: 2px;
  background: var(--paper-accent);
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}

.view-sealed.is-sealing::after {
  opacity: 1;
}

.promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 1rem + 4vw, 5rem);
  margin-top: clamp(3.5rem, 3rem + 3vw, 5.5rem);
}

.promises div {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.promises dt {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.promises dd {
  max-width: 36em;
  margin-top: 0.4rem;
  color: var(--ink-2);
}

/* Sharing */

/* Mirrored against the sections around it: the demo leads, the copy answers. */
.share {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 2rem + 4vw, 6rem);
  align-items: center;
}

.share-copy {
  order: 2;
}

.collection-demo {
  padding: 1.5rem 2rem 2rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--line);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.3rem 0.85rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out);
}

.chip:hover {
  background: var(--fill-strong);
}

.chip .count {
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.chip[aria-selected='true'] {
  background: var(--primary);
  color: var(--on-primary);
}

.collection {
  margin-top: 1.75rem;
  animation: drop-in 220ms var(--ease-out);
}

.col-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.col-title {
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.col-sub {
  margin-top: 0.25rem;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.avatars {
  display: flex;
  padding-left: 0.4rem;
}

.avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: -0.4rem;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--surface);
}

.mini-papers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.collection-demo > .sample-note {
  margin-top: 1.5rem;
  color: var(--mute);
  text-align: left;
}

.mini {
  aspect-ratio: 210 / 297;
  margin-bottom: 0.6rem;
  overflow: hidden;
  background: var(--paper);
  border-radius: 4px;
  box-shadow: var(--shadow-paper);
}

/* Plans */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 2rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--line);
}

.plan h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.price {
  margin-top: 1.25rem;
  color: var(--ink-2);
}

.amount {
  color: var(--ink);
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.price-alt {
  color: var(--mute);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.plan ul {
  margin: 1.5rem 0 2rem;
}

.plan li {
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
}

.plan .btn {
  margin-top: auto;
  min-height: 2.75rem;
}

.plans-fine {
  margin-top: 1.25rem;
}

/* FAQ */

/* The questions follow the prices as one decision, so the gap between them is halved. */
#fragen-antworten {
  padding-top: calc(var(--section) * 0.5);
}

/* One centred reading column; the questions are read, not compared. */
.faq {
  max-width: calc(46rem + 2 * var(--gutter));
}

.faq h2 {
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
}

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

.faq-list details:first-child {
  border-top: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
}

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

.faq-list summary::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  margin-right: 0.3rem;
  border-right: 1.75px solid var(--ink-2);
  border-bottom: 1.75px solid var(--ink-2);
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}

.faq-list details[open] summary::after {
  transform: translateY(0.15rem) rotate(225deg);
}

.faq-list details p {
  max-width: 40em;
  padding-bottom: 1.25rem;
  color: var(--ink-2);
}

/* Close: one more sheet on the table */

.close {
  position: relative;
  display: grid;
  justify-items: center;
  padding: var(--section) var(--gutter) calc(var(--section) + 1rem);
  overflow: clip;
  /* Own stacking context so the papers under the sheet stay above the page ground. */
  isolation: isolate;
}

.close-sheet {
  position: relative;
  width: min(36rem, 100%);
  padding: clamp(2rem, 1.25rem + 3vw, 3.5rem);
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-sheet);
  text-align: center;
}

.close-sheet p {
  margin: 1rem auto 2rem;
  max-width: 26em;
  color: var(--paper-ink-2);
  font-size: 1.125rem;
}

/* Legal pages: one narrow reading column */

.bar-inner-simple {
  grid-template-columns: 1fr auto;
}

.legal-frame {
  max-width: 46rem;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--section);
}

.legal h1 {
  margin-top: 2rem;
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.legal h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.legal h3 {
  margin: 1.75rem 0 0.4rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.legal p,
.legal li {
  max-width: 65ch;
  color: var(--ink-2);
  line-height: 1.6;
}

.legal ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.legal li + li {
  margin-top: 0.5rem;
}

.legal-lede {
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  line-height: 1.5;
}

.legal-date {
  margin-top: 3rem;
  font-size: 0.875rem;
}

/* Notices take a full outline and wash, never a side stripe. */
.draft-note {
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-wash);
  color: var(--warn);
  font-size: 0.9375rem;
}

.legal .draft-note {
  color: var(--warn);
}

.todo {
  padding: 0 0.2em;
  border-radius: 4px;
  background: var(--warn-wash);
  color: var(--warn);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Footer */

.footer {
  padding-block: 2rem 2.5rem;
  box-shadow: 0 -1px 0 var(--line);
  color: var(--ink-2);
  font-size: 0.875rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

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

.footer a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Responsive */

@media (min-width: 64.01rem) {
  .papers {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 64rem) {
  .views {
    justify-content: start;
  }

  .nav {
    display: none;
  }

  .bar-inner {
    grid-template-columns: 1fr auto;
  }

  .letter-6 {
    display: none;
  }

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

  .share-copy {
    order: 0;
  }
}

@media (max-width: 48rem) {
  .table {
    padding-top: 8.5rem;
  }

  /* On narrow screens the strip turns into a list: node beside the text, hairlines between. */
  .ways {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 1.5rem;
    border-top: 0;
  }

  .ways li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--line);
  }

  .way-node {
    margin-top: 0;
  }

  .way-title {
    margin-top: 0.55rem;
  }

  .intake-photo {
    aspect-ratio: 4 / 3;
  }

  .letter {
    width: 8.5rem;
  }

  /* Only the letterheads peek out above the sheet on phones. */
  .letter-4,
  .letter-5 {
    display: none;
  }

  .letter-1 {
    left: -1.25rem;
    top: 1.75rem;
  }

  .letter-2 {
    right: -1.5rem;
    top: 1rem;
  }

  .letter-3 {
    right: auto;
    left: calc(50% - 4.25rem);
    top: 2.25rem;
  }

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

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

  .views {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .view-cipher {
    padding: 0.75rem;
    font-size: calc((100cqi - 1.5rem) / 24.4);
  }

  .source-paper {
    width: min(16rem, 100%);
  }

  .collection-demo {
    padding: 1.25rem 1.25rem 1.5rem;
  }

  .mini-papers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  :root {
    --gutter: 1rem;
  }

  .link-quiet {
    display: none;
  }

  .sheet-head {
    flex-direction: column;
    gap: 0.15rem;
  }

  .demo-go-label {
    display: none;
  }
}

/* The smallest phones (320px) would push "wiedergefunden." past the sheet's edge. */
@media (max-width: 22.5rem) {
  .sheet h1,
  .statement h2,
  .band h2 {
    font-size: 2rem;
  }
}

/* Touch targets answer to at least 44px however compact they are drawn. */
@media (pointer: coarse) {
  .btn,
  .chip,
  .nav a,
  .link-quiet {
    position: relative;
  }

  .btn::after,
  .chip::after,
  .link-quiet::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 2.75rem);
    height: max(100%, 2.75rem);
    transform: translate(-50%, -50%);
  }

  .chips {
    gap: 0.75rem;
  }
}

/* Nothing travels; every state change still shows. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .letter-3.is-found {
    transform: rotate(-3deg);
  }

  .marker {
    animation: none;
  }

  .answer-panel,
  .collection {
    animation-name: fade-in;
  }

  .demo-hit.is-pending {
    transform: none;
  }

  .btn:active,
  .q:active {
    transform: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@media print {
  .bar,
  .pile {
    display: none;
  }

  .gallery .paper {
    transform: none !important;
  }

  .gallery .card p {
    opacity: 1 !important;
  }
}