/* Memorat - shared stylesheet for the landing page and the legal pages.
   Extracted from page.src.html so twelve generated documents cannot drift apart.
   Referenced as style.css from the root and ../style.css from a language directory;
   tools/build_landing.py rewrites the path per output. */

  /* ---------------------------------------------------------------------------------------
     Palette: iron-gall ink on laid paper. The neutral is deliberately cool and slightly
     green-biased rather than a stock grey, so it sits under the accent instead of fighting it.
     The accent is a herbarium green: the same hue family as the application's own #30d158,
     dropped far enough in saturation to read as a library rather than as a terminal.
     --flag is reserved. It marks corrections and the honest-limits section, nothing else, so
     that seeing it anywhere on the page means "read this twice".
     --------------------------------------------------------------------------------------- */
  :root {
    --paper:  #efeeea;
    --raised: #f7f6f3;
    --ink:    #191c1f;
    --muted:  #5f6360;
    --rule:   #d3d1c9;
    --accent: #46604f;
    --flag:   #8f4033;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --mono:  "Cascadia Mono", Consolas, "SF Mono", ui-monospace, "Liberation Mono", monospace;

    --measure: 40rem;
    --rail: 11rem;
    --gap: 3rem;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --paper:  #15171a;
      --raised: #1c1f23;
      --ink:    #e8e6e0;
      --muted:  #9aa09b;
      --rule:   #2e3237;
      --accent: #86a891;
      --flag:   #cf7e6c;
    }
  }
  /* The viewer's own toggle has to win in BOTH directions, so each theme is restated as an
     attribute selector. Tokens only - no component ever styles itself inside a media query. */
  :root[data-theme="dark"] {
    --paper:  #15171a;
    --raised: #1c1f23;
    --ink:    #e8e6e0;
    --muted:  #9aa09b;
    --rule:   #2e3237;
    --accent: #86a891;
    --flag:   #cf7e6c;
  }
  :root[data-theme="light"] {
    --paper:  #efeeea;
    --raised: #f7f6f3;
    --ink:    #191c1f;
    --muted:  #5f6360;
    --rule:   #d3d1c9;
    --accent: #46604f;
    --flag:   #8f4033;
  }

  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, li, figure, table, dl, dd, dt { margin: 0; padding: 0; }
  li { list-style: none; }

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

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

  .wrap {
    width: 100%;
    max-width: calc(var(--rail) + var(--gap) + var(--measure) + 3rem);
    margin-inline: auto;
    padding-inline: 1.5rem;
  }

  /* Every band is the same two-column grid: a marginalia rail, then the measure. Sections
     never set their own vertical margins - the parent's `gap` owns all spacing, which is what
     stops the usual collapse-and-double mess between adjacent sections. */
  .band {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--measure));
    gap: 0 var(--gap);
    align-items: start;
  }
  .band > .col { display: flex; flex-direction: column; gap: 1.15rem; grid-column: 2; }
  .band > .rail { grid-column: 1; }

  @media (max-width: 56rem) {
    .band { grid-template-columns: minmax(0, 1fr); }
    .band > .col, .band > .rail { grid-column: 1; }
    .band > .rail { margin-bottom: .5rem; }
  }

  .rail-label {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: .45rem;
    border-top: 1px solid var(--rule);
  }

  /* A genuine side note, set in the margin like an annotation on a proof. */
  .sidenote {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--muted);
    margin-top: .9rem;
  }
  .sidenote strong { color: var(--ink); font-weight: 600; }

  h1, h2, h3 { text-wrap: balance; font-weight: 600; letter-spacing: -.012em; }
  h1 { font-size: clamp(2rem, 5.2vw, 3.05rem); line-height: 1.1; }
  h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.2; }
  h3 { font-size: 1.0625rem; line-height: 1.35; }

  .lede { font-size: 1.1875rem; line-height: 1.55; }
  .muted { color: var(--muted); }
  .small { font-size: .875rem; line-height: 1.55; color: var(--muted); }

  /* ---------- masthead ---------- */
  .masthead {
    border-bottom: 1px solid var(--rule);
    padding-block: 1.1rem;
  }
  .masthead .inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .wordmark {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    text-decoration: none;
  }
  .wordmark b {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .01em;
  }
  .wordmark i {
    font-family: var(--mono);
    font-style: normal;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .switch { display: flex; align-items: center; gap: .1rem; }
  /* Links, not buttons. Each language is its own URL, so switching is navigation, and a
     crawler (or anyone with JavaScript off) can follow it. */
  .switch a {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    padding: .3rem .5rem;
    border-radius: 2px;
  }
  .switch a:hover { color: var(--ink); }
  .switch a[aria-current="page"] {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  /* ---------- rhythm ---------- */
  main { display: flex; flex-direction: column; gap: 4.5rem; padding-block: 3.5rem 4.5rem; }
  @media (max-width: 56rem) { main { gap: 3.5rem; } }

  /* ---------- hero ---------- */
  .hero .col { gap: 1.4rem; }

  .cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

  .btn {
    display: inline-block;
    font: inherit;
    font-size: .9375rem;
    text-decoration: none;
    padding: .6rem 1.15rem;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--raised);
    transition: border-color .15s ease, background-color .15s ease;
  }
  .btn:hover { border-color: var(--accent); }
  .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
  }
  .btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }

  /* ---------- the transcript ----------
     The hero object. Set like a real transcript: monospaced timecode and speaker label in a
     fixed left column, the utterance in the reading face. This is the thing the software
     produces, so it opens the page instead of a screenshot of a window. */
  .transcript {
    background: var(--raised);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    overflow-x: auto;
  }
  .turn {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0 1rem;
    align-items: baseline;
  }
  @media (max-width: 34rem) {
    .turn { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  }
  .who {
    font-family: var(--mono);
    font-size: .6875rem;
    line-height: 1.7;
    letter-spacing: .06em;
    color: var(--muted);
    white-space: nowrap;
  }
  .who b { display: block; color: var(--accent); font-weight: 500; letter-spacing: .1em; }
  .said { font-size: 1rem; }

  /* A substitution, marked the way a corrector marks one: the original struck through, the
     replacement following it. Default state is the FINAL state, so with JavaScript off the
     page shows what the software actually leaves behind. */
  .sub { white-space: nowrap; }
  /* No trailing margin here: .was and .now are never displayed together, so a gap only ever
     lands between the struck word and the punctuation that follows it ("Kowalska , jeszcze"). */
  .sub .was {
    color: var(--flag);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    display: none;
  }
  .sub .now {
    font-family: var(--mono);
    font-size: .8125em;
    letter-spacing: .04em;
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
  }
  /* The state rules live with the demo component further down this file. There used to be a
     `body.demo` pair here from the one-shot animation, and leaving them behind broke the new
     toggle in a way that was invisible in the markup: `body.demo .sub .was` scores (0,3,1)
     against the plain `.sub .was { display: none }` at (0,2,0), so the original text stayed
     visible no matter what the toggle did, and the button appeared to be dead. Deleting
     superseded CSS is not tidying; it is the fix. */

  /* ---------- prose lists ---------- */
  .features { display: flex; flex-direction: column; gap: 1.35rem; }
  .features h3 { margin-bottom: .2rem; }
  .features p { color: var(--muted); }

  /* The workflow genuinely IS an ordered sequence - a recording has to exist before it can be
     transcribed, and speakers have to be separated before a name can be swapped consistently.
     That is the only reason these are numbered. Nothing else on the page is. */
  .steps { display: flex; flex-direction: column; gap: 1.1rem; counter-reset: step; }
  .step { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0 .75rem; }
  .step::before {
    counter-increment: step;
    content: counter(step);
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--accent);
    padding-top: .32rem;
  }
  .step h3 { margin-bottom: .1rem; }
  .step p { color: var(--muted); font-size: .9375rem; }

  /* ---------- honest limits ---------- */
  .limits {
    border-left: 2px solid var(--flag);
    padding-left: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
  }
  .limits strong { color: var(--flag); font-weight: 600; }

  /* ---------- table ---------- */
  .scroll { overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
  th, td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--rule); }
  th {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 400;
  }
  td.cloud { color: var(--flag); }
  td.here { color: var(--accent); }

  /* ---------- pricing ---------- */
  .prices { display: flex; flex-direction: column; gap: 0; }
  .tier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .3rem 1.5rem;
    align-items: baseline;
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--rule);
  }
  .tier:first-child { border-top: 1px solid var(--rule); }
  .tier h3 { grid-column: 1; }
  .amt {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--mono);
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .tier .what { grid-column: 1 / -1; color: var(--muted); font-size: .9375rem; }
  .tier .terms {
    grid-column: 1 / -1;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .05em;
    color: var(--muted);
  }
  .tier.pick .amt, .tier.pick h3 { color: var(--accent); }

  /* ---------- figure ---------- */
  figure { display: flex; flex-direction: column; gap: .6rem; }
  figure img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    border: 1px solid var(--rule);
    border-radius: 3px;
    filter: saturate(.85);
  }
  figcaption { font-size: .8125rem; color: var(--muted); line-height: 1.5; }

  /* ---------- colophon ---------- */
  .colophon {
    border-top: 1px solid var(--rule);
    padding-block: 2.25rem 3rem;
  }
  .colophon .col { gap: .8rem; }
  .colophon p { font-size: .875rem; color: var(--muted); line-height: 1.55; }
  .colophon .motto {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
  }

/* ---------------------------------------------------------------------------------------
   Legal pages: privacy notice, terms, imprint.

   These are read by a data protection officer or a procurement lawyer looking for one
   specific clause, not read straight through. So they are set for SCANNING: numbered
   sections that can be cited ("point 4.2"), a definition list for the company details a
   German Impressum has to expose, and a measure a little wider than the landing page
   because legal prose is denser and breaks badly when it is too narrow.
   --------------------------------------------------------------------------------------- */
.legal { --measure: 44rem; }
.legal .col { gap: 1.6rem; }

.legal h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: .2rem; }
.legal .updated {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Numbered so a reader can cite a clause. The counter is on the section list, not on the
   headings, so inserting a section renumbers everything below it automatically. */
.clauses { display: flex; flex-direction: column; gap: 1.9rem; counter-reset: clause; }
.clause { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0 .8rem; }
.clause::before {
  counter-increment: clause;
  content: counter(clause) ".";
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--accent);
  padding-top: .3rem;
  font-variant-numeric: tabular-nums;
}
.clause h2 { font-size: 1.125rem; line-height: 1.35; margin-bottom: .5rem; }
.clause > div > * + * { margin-top: .7rem; }
.clause p, .clause li { color: var(--ink); }
.clause ul { display: flex; flex-direction: column; gap: .45rem; }
.clause li { padding-left: 1.1rem; position: relative; }
.clause li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .38rem; height: 1px;
  background: var(--accent);
}

/* Company identification. A German Impressum has to state specific fields, and a reader is
   looking for one of them, so they are a labelled table rather than a paragraph. */
.identity { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .5rem 1.2rem; }
.identity dt {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .18rem;
}
.identity dd { margin: 0; }
@media (max-width: 34rem) {
  .identity { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .identity dd { margin-bottom: .7rem; }
}

/* An unfilled company detail. Deliberately loud: this is the one thing on the site that
   cannot go live wrong, and check_landing.py --publish refuses to pass while any remain. */
.todo {
  font-family: var(--mono);
  font-size: .8125em;
  color: var(--flag);
  border: 1px dashed var(--flag);
  border-radius: 2px;
  padding: .05rem .35rem;
}

/* Footer legal links */
.legal-links { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.legal-links a { color: var(--muted); text-decoration: none; font-size: .875rem; }
.legal-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------------------------------------------------------------------------------------
   The hero demo.

   This replaced a one-shot animation that fired 1.1s after load. Anyone who arrived mid-scroll
   or read the headline first simply never saw the product's one distinguishing feature happen.
   A control has no timing to miss.
   --------------------------------------------------------------------------------------- */
.demo {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--raised);
  overflow: hidden;
}
.demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .55rem .7rem .55rem .9rem;
  border-bottom: 1px solid var(--rule);
}
.demo-file {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.demo-toggle { display: flex; gap: 2px; }
.demo-toggle button {
  font: inherit;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .05em;
  padding: .32rem .6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.demo-toggle button:hover { color: var(--ink); }
.demo-toggle button[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--rule);
  background: var(--paper);
}
.demo .transcript { border: 0; border-radius: 0; background: none; }

.demo-foot {
  display: flex;
  align-items: baseline;
  gap: .3rem 1rem;
  flex-wrap: wrap;
  padding: .6rem .9rem .75rem;
  border-top: 1px solid var(--rule);
}
.demo-count { font-family: var(--mono); font-size: .75rem; color: var(--accent); }
.demo-count b { font-weight: 600; }
.demo-note { font-size: .8125rem; color: var(--muted); }

/* Default (and no-JS) state shows the FINISHED transcript, so the page never depends on a
   script to tell the truth about what the software leaves behind. `raw` is opt-in. */
.sub .was { display: none; }
.demo.raw .sub .was { display: inline; }
.demo.raw .sub .now { display: none; }
.sub .now { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .sub .now, .sub .was { transition: opacity .18s ease; }
}

/* ---------------------------------------------------------------------------------------
   Product screenshots
   --------------------------------------------------------------------------------------- */
.shot { display: flex; flex-direction: column; gap: .55rem; }
.shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.shot figcaption { font-size: .8125rem; line-height: 1.5; color: var(--muted); }

/* ---------------------------------------------------------------------------------------
   Study cost calculator. Bars are proportional, so the comparison is visible before the
   numbers are read.
   --------------------------------------------------------------------------------------- */
.calc { display: flex; flex-direction: column; gap: 1.3rem; }
.calc-input { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.calc-input > span { font-size: .9375rem; color: var(--muted); }
.calc-input input[type="range"] {
  flex: 1 1 14rem;
  accent-color: var(--accent);
  height: 1.4rem;
}
.calc-input output {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  color: var(--ink);
  min-width: 2.2rem;
  text-align: right;
}

.calc-rows { display: flex; flex-direction: column; gap: .9rem; }
.calc-row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
  gap: .35rem .9rem;
  align-items: center;
}
@media (max-width: 44rem) {
  .calc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .calc-bar { grid-column: 1 / -1; grid-row: 2; }
}
.calc-what { font-size: .9375rem; color: var(--muted); }
.calc-bar { display: block; height: .5rem; background: var(--rule); border-radius: 99px; overflow: hidden; }
.calc-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--flag);
}
@media (prefers-reduced-motion: no-preference) {
  .calc-bar i { transition: width .25s ease; }
}
.calc-row.is-us .calc-bar i { background: var(--accent); }
.calc-row.is-us .calc-what, .calc-row.is-us .calc-amt { color: var(--ink); }
.calc-amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .9375rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------
   Click-to-enlarge screenshots.

   The shots are captured at 1800px and displayed at roughly a third of that, so the detail a
   buyer actually wants to inspect (the entity labels, which layer found each one, the wording
   of the disclaimer in the footer of the dialog) is present but unreadable until enlarged.
   The wrapper is a real <button>, not a div with a click handler, so it is reachable and
   operable from the keyboard without reimplementing any of that.
   --------------------------------------------------------------------------------------- */
.shot-zoom {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  border-radius: 4px;
}
.shot-zoom img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 4px; }

.shot-hint {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem .5rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  color: var(--muted);
  border: 1px solid var(--rule);
  opacity: 0;
  pointer-events: none;
}
.shot-zoom:hover .shot-hint,
.shot-zoom:focus-visible .shot-hint { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .shot-hint { transition: opacity .15s ease; }
}
/* Touch has no hover, so the affordance would never appear on a phone. */
@media (hover: none) {
  .shot-hint { opacity: 1; }
}

.lightbox {
  border: 0;
  padding: 0;
  background: none;
  max-width: 96vw;
  max-height: 94vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgb(0 0 0 / .82); }
.lightbox img {
  display: block;
  max-width: 96vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 12px 48px rgb(0 0 0 / .5);
}
.lightbox-close {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  width: 2rem;
  height: 2rem;
  line-height: 1;
  font-size: 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
@media (max-width: 40rem) {
  .lightbox-close { top: .4rem; right: .4rem; }
}