/* ============================================================
   Sealform — landing surface
   World: The Carbon Set, light edition. See DESIGN.md.

   The desk is pale, cool onion-skin; documents are crisp white
   sheets on it and the ink is navy and aniline violet — the
   colours a carbon sheet actually leaves behind. Gold appears
   once per viewport and only where certification happens.
   Blue is the action and never decorates.
   ============================================================ */

:root {
  color-scheme: light;

  /* Desk — cool onion-skin, never cream. */
  --paper-050: #fbfbfd;
  --paper-100: #f5f6fa;
  --paper-200: #eceef5;
  --paper-300: #e2e5ef;
  --sheet: #ffffff;

  /* Rules */
  --line: #d6dbe7;
  --line-soft: #e6e9f1;
  --line-strong: #b7bed2;

  /* Ink — navy from the app, the typed impression. */
  --ink-900: #0f1e3d;
  --ink-800: #16294f;
  --ink-700: #2b3852;
  --ink-600: #45526b;
  --ink-500: #58647c;

  /* Aniline — the dye a carbon sheet deposits. */
  --aniline-700: #3a2d91;
  --aniline-600: #4536a8;
  --aniline-500: #5c4bd0;
  --aniline-100: #ebe8fb;

  /* Brand constants, carried unchanged from the app. */
  --brand-600: #1e40af;
  --brand-500: #1d4ed8;
  --brand-400: #3b82f6;
  --gold-500: #b48a26;
  --gold-400: #d4af4e;
  --gold-600: #94711c;
  --ok-600: #15803d;
  --warn-600: #b45309;
  --err-600: #b91c1c;

  --radius-sheet: 2px;
  --radius-control: 3px;

  --shadow-sheet: 0 1px 2px rgba(15, 30, 61, .06), 0 14px 32px -16px rgba(15, 30, 61, .22);
  --shadow-lift: 0 2px 4px rgba(15, 30, 61, .06), 0 30px 60px -24px rgba(15, 30, 61, .32);

  --ease-strike: cubic-bezier(.16, 1, .3, 1);

  --shell: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);

  --font-display: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-typed: "Courier Prime", "Courier New", ui-monospace, monospace;
}

/* ── reset ─────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper-100);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The tooth of the paper. Applied once, at page level. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--aniline-600); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--aniline-700); }

b, strong { font-weight: 600; color: var(--ink-900); }

button, input, select, textarea { font: inherit; color: inherit; }

/* ── browser surfaces ──────────────────────────────────── */

::selection { background: var(--aniline-600); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: 1px;
}

* { scrollbar-color: var(--line-strong) var(--paper-100); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-100); }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--paper-100);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--ink-900);
  color: #fff;
  font-weight: 500;
  border-radius: var(--radius-control);
  transition: top .18s var(--ease-strike);
}
.skip-link:focus { top: 1rem; }

/* ── layout ────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.section { padding-block: clamp(5rem, 11vw, 8.5rem); position: relative; }
.section + .section { border-top: 1px solid var(--line); }
.section--pain,
.section--verify,
.section--access { background: var(--paper-200); }

.section__head { max-width: 40rem; margin-bottom: clamp(2.75rem, 5vw, 4rem); }

.section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink-900);
  text-wrap: balance;
}

.section__lede {
  margin-top: 1.15rem;
  max-width: 42rem;
  color: var(--ink-600);
  text-wrap: pretty;
}

/* ── typed caption ─────────────────────────────────────── */
/* Every specimen on the page carries one, at constant scale. */

.typed-caption {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-typed);
  font-size: .6875rem;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.typed-caption::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--line-strong);
}
.typed-caption--bare { margin-bottom: 1.5rem; }

/* ── buttons ───────────────────────────────────────────── */

.btn {
  --btn-lift: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .68rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(var(--btn-lift));
  transition: transform .16s var(--ease-strike), background-color .16s, border-color .16s, box-shadow .16s, color .16s;
}

.btn--action {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 30, 61, .18);
}
.btn--action:hover { --btn-lift: -1px; background: var(--brand-600); color: #fff; box-shadow: 0 6px 14px -6px rgba(29, 78, 216, .55); }
.btn--action:active { --btn-lift: 0; }

.btn--outline {
  border-color: var(--line-strong);
  color: var(--ink-900);
  background: var(--sheet);
}
.btn--outline:hover { border-color: var(--ink-900); color: var(--ink-900); --btn-lift: -1px; }

.btn--quiet { color: var(--ink-600); text-decoration: none; }
.btn--quiet:hover { color: var(--ink-900); }

.btn--lg { padding: .9rem 1.55rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* ── masthead ──────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 246, 250, .84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.masthead.is-stuck { border-bottom-color: var(--line); background: rgba(245, 246, 250, .95); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 4.25rem;
}

.masthead__brand { flex: none; display: flex; align-items: center; }
.masthead__brand img { height: 22px; width: auto; }

.masthead__nav {
  display: flex;
  gap: 1.6rem;
  margin-inline-start: auto;
  font-size: .9375rem;
}
.masthead__nav a {
  color: var(--ink-600);
  text-decoration: none;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .16s, border-color .16s;
}
.masthead__nav a:hover { color: var(--ink-900); border-bottom-color: var(--aniline-500); }

.masthead__actions { display: flex; align-items: center; gap: .9rem; }

.masthead__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  margin-inline-start: auto;
  padding: 0 9px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.masthead__toggle span {
  height: 1.5px;
  background: var(--ink-900);
  transition: transform .2s var(--ease-strike), opacity .2s;
}
.masthead__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.masthead__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.masthead__mobile {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .75rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--paper-100);
}
.masthead__mobile[hidden] { display: none; }
.masthead__mobile a {
  padding: .7rem 0;
  color: var(--ink-700);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.masthead__mobile a:last-child { border-bottom: 0; margin-top: .9rem; color: #fff; }

/* ── hero ──────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}

/* A faint wash of aniline where the sheets lie. */
.hero::before {
  content: "";
  position: absolute;
  top: -22%; left: 58%;
  width: min(1000px, 105vw);
  aspect-ratio: 1;
  transform: translateX(-42%);
  background: radial-gradient(circle, rgba(92, 75, 208, .13), rgba(92, 75, 208, .04) 42%, transparent 66%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink-900);
  text-wrap: balance;
}

.hero__lede {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-size: 1.125rem;
  color: var(--ink-600);
  text-wrap: pretty;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }

.hero__meta {
  margin-top: 1.6rem;
  font-family: var(--font-typed);
  font-size: .75rem;
  line-height: 1.7;
  letter-spacing: .045em;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.hero__meta b { color: var(--ink-900); font-weight: 700; }

/* ── registration: the signature interaction ───────────── */

.registration { position: relative; }

.registration__stage {
  position: relative;
  aspect-ratio: 1 / 1.24;
  border-radius: var(--radius-sheet);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  touch-action: pan-y;
  cursor: ew-resize;
  isolation: isolate;
  /* the light table under both sheets */
  background: linear-gradient(160deg, var(--paper-300), var(--paper-200) 55%, var(--paper-300));
  padding: clamp(.75rem, 2vw, 1.4rem);
}

.registration__layer { position: absolute; inset: clamp(.75rem, 2vw, 1.4rem); }

.registration__layer--scan {
  /* driven by --reg, the divider position, in % */
  clip-path: inset(0 calc(100% - var(--reg, 52%)) 0 0);
  z-index: 2;
}

/* The scan: genuinely faded, genuinely soft. Same geometry — that is the proof. */
.registration__layer--scan .doc {
  filter: grayscale(1) contrast(.66) brightness(1.06) blur(.4px);
}
.registration__layer--scan::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(0, 0, 0, .09), transparent 46%),
    radial-gradient(ellipse at 84% 76%, rgba(0, 0, 0, .11), transparent 44%),
    linear-gradient(103deg, transparent 62%, rgba(0, 0, 0, .06));
  mix-blend-mode: multiply;
}

.registration__scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(92, 75, 208, .45), transparent);
  animation: scan-travel 6.5s var(--ease-strike) infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes scan-travel {
  0%, 8%   { top: 4%; opacity: 0; }
  14%      { opacity: .9; }
  76%      { opacity: .9; }
  86%, 100%{ top: 96%; opacity: 0; }
}

.registration__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--reg, 52%);
  width: 2px;
  margin-left: -1px;
  z-index: 6;
  background: var(--ink-900);
  cursor: ew-resize;
}
.registration__divider:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 3px; }

/* the ruled registration scale, ticked like a print register mark */
.registration__scale {
  position: absolute;
  inset: 0;
  left: -3px;
  width: 8px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ink-900) 0 1px,
    transparent 1px 9px
  );
  opacity: .45;
}

.registration__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink-900);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 30, 61, .35);
}

.registration__tag {
  position: absolute;
  bottom: clamp(1.4rem, 3vw, 2.2rem);
  z-index: 7;
  padding: .3rem .55rem;
  font-family: var(--font-typed);
  font-size: .625rem;
  letter-spacing: .09em;
  border-radius: 2px;
  background: rgba(15, 30, 61, .88);
  color: #fff;
  pointer-events: none;
}
.registration__tag--left { left: clamp(1.4rem, 3vw, 2.2rem); }
.registration__tag--right { right: clamp(1.4rem, 3vw, 2.2rem); }

.registration figcaption { margin-top: 1rem; }

/* ── the document specimen ─────────────────────────────── */

.doc {
  position: relative;
  height: 100%;
  padding: clamp(1.1rem, 2.6vw, 1.9rem) clamp(1rem, 2.4vw, 1.7rem);
  background: var(--sheet);
  color: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
  font-size: clamp(.5rem, 1.06vw, .66rem);
  line-height: 1.5;
  overflow: hidden;
  /* a struck letter bleeds a little into the fibre */
  text-shadow: 0 0 .4px rgba(69, 54, 168, .28);
}

.doc__crest { color: var(--gold-500); height: 1.55em; margin-bottom: .5rem; }
.doc__crest svg { width: 1.55em; height: 1.55em; }
.doc__crest--note {
  font-family: var(--font-typed);
  font-size: .95em;
  line-height: 1.55em;
  color: var(--ink-900);
}

.doc__authority {
  font-family: var(--font-typed);
  font-size: .86em;
  letter-spacing: .05em;
  color: #4a4566;
}

.doc__title {
  margin-top: .75em;
  font-family: var(--font-display);
  font-size: 2.5em;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--ink-900);
}
.doc__subtitle { font-size: 1.05em; font-style: italic; color: #4a4566; margin-top: .2em; }

.doc__fields {
  margin-top: 1.5em;
  display: grid;
  gap: .1em;
  border-top: 1px solid #b9bfd4;
}
.doc__fields--tight { margin-top: 1em; }

.doc__field {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap: .8em;
  padding: .48em 0;
  border-bottom: 1px solid #d3d8e6;
}
.doc__field dt {
  font-family: var(--font-typed);
  font-size: .88em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #625e80;
}
.doc__field dd {
  margin: 0;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.doc__table {
  margin-top: 1.5em;
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.doc__table th,
.doc__table td {
  padding: .42em .6em;
  border: 1px solid #b9bfd4;
  text-align: left;
}
.doc__table th {
  font-family: var(--font-typed);
  font-size: .86em;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #eef0f6;
  color: #4a4566;
}
.doc__table td:last-child,
.doc__table th:last-child { text-align: center; width: 3.4em; }
.doc__table td:nth-child(2) { width: 6.5em; }

.doc__foot {
  margin-top: 1.7em;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
}
/* what the product actually writes where a signature was */
.doc__note {
  display: block;
  margin-bottom: .55em;
  font-family: var(--font-typed);
  font-size: .95em;
  letter-spacing: .02em;
  color: var(--ink-900);
}
.doc__rule { display: block; width: 8em; height: 1px; background: #625e80; }
.doc__signlabel {
  display: block;
  margin-top: .35em;
  font-family: var(--font-typed);
  font-size: .82em;
  letter-spacing: .05em;
  color: #625e80;
}
.doc__stamp { color: var(--gold-500); opacity: .85; transform: rotate(-7deg); }

.doc__caret {
  display: inline-block;
  vertical-align: -.15em;
  margin-left: 1px;
  width: 1px; height: 1.15em;
  background: var(--brand-500);
  animation: caret-blink 1.15s steps(2, start) infinite;
}
@keyframes caret-blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }

/* the scan has lost its ink and its rules */
.doc--scan { background: #e9e9ea; border-color: #c6c6c8; text-shadow: none; }
.doc--scan .doc__crest,
.doc--scan .doc__stamp { color: #8f8f93; }
.doc--scan .doc__table th,
.doc--scan .doc__table td { border-color: #b4b4b8; }
.doc--scan .doc__table th { background: #dcdcde; }

/* ── pain: the ledger ──────────────────────────────────── */

.ledger {
  max-width: 46rem;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
}

.ledger__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: .82rem 0;
  border-bottom: 1px dotted var(--line-strong);
}
.ledger__row:first-child { padding-top: 0; }

.ledger__what { color: var(--ink-800); }
.ledger__note {
  font-family: var(--font-typed);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.ledger__row--last {
  border-bottom: 0;
  padding-bottom: 0;
  margin-top: .4rem;
}
.ledger__row--last .ledger__what {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--aniline-600);
}

.counterpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .9rem;
  max-width: 46rem;
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: 1.125rem;
  color: var(--ink-600);
}
.counterpoint__figure {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.counterpoint__basis {
  flex-basis: 100%;
  font-family: var(--font-typed);
  font-size: .6875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ── mechanism ─────────────────────────────────────────── */

.rebuild {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.rebuild__item {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.rebuild__item:first-child { padding-top: 0; border-top: 0; }
.rebuild__item h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-900);
}
.rebuild__item p { margin-top: .5rem; color: var(--ink-600); max-width: 34rem; }
.rebuild__item i { font-family: var(--font-typed); font-style: normal; font-size: .92em; color: var(--aniline-600); }

.rebuild__proof { position: sticky; top: 6rem; }

.sheet {
  position: relative;
  padding: 1.6rem 1.4rem;
  background: var(--sheet);
  color: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-lift);
  font-size: .8125rem;
  line-height: 1.5;
  text-shadow: 0 0 .4px rgba(69, 54, 168, .28);
}
.sheet--slim .doc__authority { font-size: .78rem; letter-spacing: .07em; }
.sheet .doc__field dd { font-size: .8125rem; }
.rebuild__proof figcaption { margin-top: 1.4rem; }

.callout {
  position: absolute;
  right: 1rem;
  bottom: -.85rem;
  padding: .3rem .6rem;
  font-family: var(--font-typed);
  font-size: .625rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--aniline-600);
  border-radius: 2px;
}

/* ── verification ──────────────────────────────────────── */

.verify {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.verify__panel {
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
}

.verify__rows { border-top: 1px solid var(--line); }

.verify__row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) minmax(0, 1.05fr) auto;
  align-items: center;
  gap: .9rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}

/* three genuinely different states — solid, hollow, broken */
.verify__state { width: 10px; height: 10px; border-radius: 50%; }
.verify__row--ok   .verify__state { background: var(--ok-600); }
.verify__row--err  .verify__state { background: transparent; border: 1.5px solid var(--err-600); }
.verify__row--warn .verify__state {
  background: transparent;
  border: 1.5px dashed var(--warn-600);
  border-radius: 1px;
}

.verify__field {
  font-family: var(--font-typed);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.verify__value { font-size: .9375rem; color: var(--ink-900); letter-spacing: .01em; }
.verify__row--warn .verify__value b {
  color: var(--warn-600);
  font-weight: 600;
  border-bottom: 1.5px solid var(--warn-600);
}
.verify__row--err .verify__value { color: var(--ink-500); font-style: italic; }

.verify__verdict {
  font-family: var(--font-typed);
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
}
.verify__row--ok   .verify__verdict { color: var(--ok-600); }
.verify__row--warn .verify__verdict { color: var(--warn-600); }
.verify__row--err  .verify__verdict { color: var(--err-600); }

.verify__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .9rem;
  margin-top: 1.3rem;
}
.verify__count { font-size: 1rem; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.verify__rest {
  font-family: var(--font-typed);
  font-size: .6875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--warn-600);
}

.verify__argument { padding-top: .5rem; }

/* the one gold mark in this viewport, at the moment of certification */
.seal { color: var(--gold-600); margin-bottom: 1.5rem; }
.seal.is-stamped { animation: seal-stamp .62s var(--ease-strike) both; }
@keyframes seal-stamp {
  0%   { transform: scale(1.5) rotate(-8deg); opacity: 0; }
  58%  { transform: scale(.96) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.verify__claim {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink-900);
  text-wrap: balance;
}
.verify__body { margin-top: .9rem; color: var(--ink-600); }
.verify__body em { color: var(--aniline-600); font-style: italic; }

/* ── translation variants ──────────────────────────────── */

.variants { display: flex; flex-wrap: wrap; gap: .9rem; align-items: stretch; }

.variant {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 9.5rem;
  padding: 1.1rem 1.3rem;
  text-align: left;
  background: transparent;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sheet);
  color: var(--ink-500);
  cursor: pointer;
  transition: border-color .18s, color .18s, background-color .18s, transform .16s var(--ease-strike), box-shadow .18s;
}
.variant:hover { border-color: var(--aniline-500); color: var(--ink-800); transform: translateY(-1px); }

/* the committed choice is struck solid; the alternates stay dashed */
.variant.is-chosen {
  border-style: solid;
  border-color: var(--ink-900);
  background: var(--sheet);
  color: var(--ink-900);
  transform: none;
  box-shadow: var(--shadow-sheet);
}

.variant__code {
  font-family: var(--font-typed);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}
.variant__name { font-size: .875rem; }

.variants__hint {
  flex-basis: 100%;
  margin-top: .4rem;
  font-family: var(--font-typed);
  font-size: .6875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ── workspace ─────────────────────────────────────────── */

.workspace {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  overflow: hidden;
}
.workspace__item { padding: clamp(1.5rem, 3vw, 2.1rem); background: var(--sheet); }
.workspace__item--wide { grid-column: 1 / -1; background: var(--paper-050); }
.workspace__item h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink-900);
}
.workspace__item p { margin-top: .55rem; color: var(--ink-600); font-size: .9375rem; max-width: 40rem; }

/* ── access ────────────────────────────────────────────── */

.access {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.access__facts {
  margin-top: 2.2rem;
  border-top: 1px solid var(--line);
}
.access__facts > div {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--line);
}
.access__facts dt {
  font-family: var(--font-typed);
  font-size: .6875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.access__facts dd { margin: 0; font-size: .9375rem; color: var(--ink-800); }

.access__form {
  padding: clamp(1.5rem, 3.5vw, 2.3rem);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-lift);
}

.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  margin-bottom: .4rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-800);
}
.field__opt {
  font-family: var(--font-typed);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .68rem .8rem;
  background: var(--paper-050);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--ink-900);
  caret-color: var(--aniline-600);
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.field textarea { resize: vertical; min-height: 5rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-500); }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%2358647c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-right: 2.2rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--sheet);
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}

.field.is-invalid input,
.field.is-invalid select { border-color: var(--err-600); }
.field__error {
  margin-top: .38rem;
  font-size: .8125rem;
  color: var(--err-600);
}

#accessSubmit { margin-top: .4rem; }
#accessSubmit[disabled] { opacity: .6; cursor: progress; }

.access__status {
  margin-top: .9rem;
  font-size: .9375rem;
  min-height: 1.4rem;
}
.access__status.is-ok { color: var(--ok-600); }
.access__status.is-err { color: var(--err-600); }

.access__fineprint {
  margin-top: 1rem;
  font-size: .8125rem;
  color: var(--ink-500);
}

/* ── footer ────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--paper-100);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
}
.footer__brand img { height: 20px; width: auto; }
.footer__brand p { margin-top: 1rem; max-width: 24rem; font-size: .9375rem; color: var(--ink-600); }

.footer__nav { display: flex; gap: clamp(2rem, 6vw, 4rem); }
.footer__nav h3 {
  margin-bottom: .8rem;
  font-family: var(--font-typed);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.footer__nav a {
  display: block;
  padding: .28rem 0;
  font-size: .9375rem;
  color: var(--ink-700);
  text-decoration: none;
}
.footer__nav a:hover { color: var(--ink-900); text-decoration: underline; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  padding-block: 1.4rem 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-typed);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ── entrances: the typebar strike ─────────────────────── */
/* Starts from a visible default so a failed observer never hides content. */

.strike { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .strike { opacity: 0; }
  .js .strike.is-struck { animation: strike .24s var(--ease-strike) both; }
}
@keyframes strike {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── responsive ────────────────────────────────────────── */

@media (max-width: 1040px) {
  .rebuild,
  .verify,
  .access { grid-template-columns: minmax(0, 1fr); }
  .rebuild__proof { position: static; max-width: 30rem; }
  .verify__argument { padding-top: 0; }
  .workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { max-width: 38rem; }
  .registration__stage { aspect-ratio: 1 / 1.1; max-width: 34rem; }
  .masthead__nav,
  .masthead__actions { display: none; }
  .masthead__toggle { display: flex; }
}

@media (min-width: 901px) {
  .masthead__mobile { display: none; }
}

@media (max-width: 680px) {
  body { font-size: 1rem; }
  .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace__item--wide { grid-column: auto; }
  .verify__row {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    row-gap: .3rem;
  }
  .verify__value { grid-column: 2 / -1; }
  .variant { min-width: 0; flex: 1 1 7rem; }
  .registration__stage { aspect-ratio: 1 / 1.2; }
  .hero__actions .btn { flex: 1 1 12rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .registration__scanline { display: none; }
  .js .strike { opacity: 1; }
}

/* ============================================================
   The recording — a rebuilt frame of app.sealform.app.

   This is the one place on the landing surface where the product
   app is quoted verbatim, so it carries the app's own tokens,
   scoped to the stage and nowhere else. The landing page is not
   repainted by them; see the note at the top of DESIGN.md.
   Everything inside the stage is sized in em from one root size,
   so the whole screen scales as one object.
   ============================================================ */

.demo { margin-top: clamp(2rem, 4vw, 3rem); }

.demo__frame {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--sheet);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

@supports (container-type: inline-size) {
  .demo__frame { container-type: inline-size; }
}

/* ── browser chrome ────────────────────────────────────── */

.demo__chrome {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .55rem .85rem;
  background: var(--paper-200);
  border-bottom: 1px solid var(--line);
}

.demo__lights { display: flex; gap: .35rem; }
.demo__lights i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.demo__address {
  font-family: var(--font-typed);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--ink-500);
  padding: .15rem .7rem;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* ── the stage ─────────────────────────────────────────── */

.demo__stage {
  --a-paper: #f6f8fb;
  --a-raised: #ffffff;
  --a-line: #d7e0ea;
  --a-line-soft: #e9eef5;
  --a-ink-900: #0b1526;
  --a-ink-700: #2b3852;
  --a-ink-500: #4f5d76;
  --a-ink-300: #7c88a0;
  --a-navy: #0f1e3d;
  --a-brand: #1d4ed8;
  --a-brand-400: #3b82f6;
  --a-brand-50: #eff4ff;
  --a-ok: #15803d;
  --a-warn: #b45309;
  --a-err: #b91c1c;
  --a-card: 0 1px 2px rgba(15, 30, 61, .05), 0 10px 30px -12px rgba(15, 30, 61, .12);
  --a-pop: 0 2px 6px rgba(15, 30, 61, .07), 0 24px 48px -16px rgba(15, 30, 61, .2);

  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--a-paper);
  color: var(--a-ink-900);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  contain: paint;
}

@supports (container-type: inline-size) {
  .demo__stage { font-size: clamp(8px, 1.32cqw, 13px); }
}

.demo__stage svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.dapp {
  display: grid;
  grid-template-columns: 13em minmax(0, 1fr);
  height: 100%;
}

/* ── sidebar ───────────────────────────────────────────── */

.dapp__rail {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  padding: 1.4em 1.1em;
  background: var(--a-raised);
  border-right: 1px solid var(--a-line);
}

.dapp__brand {
  font-family: var(--font-display);
  font-size: 1.45em;
  font-weight: 560;
  letter-spacing: -.01em;
  color: var(--a-navy);
}

.dapp__cta {
  display: block;
  padding: .62em 1em;
  border-radius: .45em;
  background: var(--a-brand);
  color: #fff;
  font-size: .88em;
  font-weight: 600;
  text-align: center;
}

.dapp__nav { display: grid; gap: .18em; }

.dapp__navitem {
  display: flex;
  align-items: center;
  gap: .65em;
  padding: .5em .7em;
  border-radius: .45em;
  font-size: .9em;
  color: var(--a-ink-500);
}
.dapp__navitem.is-active { background: var(--a-brand-50); color: var(--a-brand); font-weight: 600; }
.dapp__navitem svg { width: 1.08em; height: 1.08em; }

.dapp__user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .6em;
  padding-top: 1em;
  border-top: 1px solid var(--a-line-soft);
}
.dapp__user i {
  display: grid;
  place-items: center;
  width: 2em; height: 2em;
  border-radius: 50%;
  background: var(--a-navy);
  color: #fff;
  font-style: normal;
  font-size: .8em;
  font-weight: 600;
}
.dapp__user span { display: grid; min-width: 0; }
.dapp__user b { font-size: .82em; font-weight: 600; color: var(--a-ink-900); }
.dapp__user small { font-size: .72em; color: var(--a-ink-300); }

/* ── main column ───────────────────────────────────────── */

.dapp__main {
  display: flex;
  flex-direction: column;
  gap: 1.15em;
  padding: 1.8em 2em;
  min-width: 0;
  overflow: hidden;
}

.dapp__intro h3 {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.9em;
  line-height: 1.15;
  color: var(--a-ink-900);
}
.dapp__intro p {
  margin-top: .35em;
  max-width: 30em;
  font-size: .92em;
  color: var(--a-ink-500);
}

.demo__stage:not([data-scene="idle"]) .dapp__intro { display: none; }

/* ── dropzone ──────────────────────────────────────────── */

.dapp__drop {
  display: grid;
  justify-items: center;
  gap: .9em;
  padding: 3em 1.5em;
  text-align: center;
  border: 2px dashed var(--a-line);
  border-radius: .9em;
  background: var(--a-raised);
  box-shadow: var(--a-card);
  transition: border-color .2s var(--ease-strike), background-color .2s var(--ease-strike),
              padding .32s var(--ease-strike), box-shadow .2s var(--ease-strike);
}

.dapp__drop.is-over {
  border-color: var(--a-brand-400);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(59, 130, 246, .14), transparent 70%),
    var(--a-brand-50);
  box-shadow: var(--a-pop);
}

.dapp__dropicon {
  display: grid;
  place-items: center;
  width: 3em; height: 3em;
  border-radius: 50%;
  background: var(--a-brand-50);
  color: var(--a-brand);
}
.dapp__dropicon svg { width: 1.45em; height: 1.45em; }

.dapp__droptext { display: grid; gap: .25em; }
.dapp__droptext b { font-size: .92em; font-weight: 600; color: var(--a-ink-900); }
.dapp__droptext small { font-size: .8em; color: var(--a-ink-500); }

.dapp__dropmore, .dapp__iconplus { display: none; }

.demo__stage:not([data-scene="idle"]) .dapp__drop { padding: 1.3em 1.5em; }
.demo__stage:not([data-scene="idle"]) .dapp__dropcta,
.demo__stage:not([data-scene="idle"]) .dapp__droptext small,
.demo__stage:not([data-scene="idle"]) .dapp__iconup { display: none; }
.demo__stage:not([data-scene="idle"]) .dapp__dropmore { display: block; }
.demo__stage:not([data-scene="idle"]) .dapp__iconplus { display: block; }
.demo__stage:not([data-scene="idle"]) .dapp__dropicon { width: 2.3em; height: 2.3em; }

/* ── folder + language pickers ─────────────────────────── */

.dapp__pickers { display: flex; gap: .8em; }

.dapp__picker {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .6em .85em;
  border: 1px solid var(--a-line);
  border-radius: .6em;
  background: var(--a-raised);
}

.dapp__pickicon {
  display: grid;
  place-items: center;
  width: 2em; height: 2em;
  flex: none;
  border-radius: 50%;
  background: var(--a-brand-50);
  color: var(--a-brand);
}
.dapp__pickicon svg { width: 1.05em; height: 1.05em; }

.dapp__pickbody { min-width: 0; flex: 1; display: grid; }
.dapp__pickbody small {
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--a-ink-500);
}
.dapp__select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  font-size: .86em;
  font-weight: 500;
  color: var(--a-ink-900);
  white-space: nowrap;
  overflow: hidden;
}
.dapp__select svg { flex: none; width: 1em; height: 1em; color: var(--a-ink-300); }

.dapp__langde { display: none; }
.demo__stage[data-lang="de"] .dapp__langnone { display: none; }
.demo__stage[data-lang="de"] .dapp__langde { display: inline; }

.dapp__menu {
  position: absolute;
  z-index: 4;
  top: calc(100% + .3em);
  left: 0;
  right: 0;
  display: grid;
  padding: .3em;
  margin: 0;
  list-style: none;
  border: 1px solid var(--a-line);
  border-radius: .6em;
  background: var(--a-raised);
  box-shadow: var(--a-pop);
  opacity: 0;
  transform: translateY(-.3em) scale(.985);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .16s var(--ease-strike), transform .16s var(--ease-strike);
}
.dapp__menu li {
  padding: .45em .7em;
  border-radius: .35em;
  font-size: .85em;
  color: var(--a-ink-700);
}
.demo__stage[data-menu="open"] .dapp__menu { opacity: 1; transform: none; }
.demo__stage[data-menu="open"] .dapp__menu li.is-hover { background: var(--a-brand-50); color: var(--a-brand); font-weight: 600; }

/* ── conversion tickets ────────────────────────────────── */

.dapp__queue { min-width: 0; }
.dticket { display: none; }

.demo__stage[data-scene="staged"] .dticket--staged,
.demo__stage[data-scene="running"] .dticket--running,
.demo__stage[data-scene="done"] .dticket--done,
.demo__stage[data-scene="downloaded"] .dticket--done { display: grid; }

.dticket {
  gap: 1em;
  padding: 1.1em 1.2em;
  border: 1px solid var(--a-line);
  border-radius: .9em;
  background: var(--a-raised);
  box-shadow: var(--a-card);
  animation: dapp-rise .28s var(--ease-strike) both;
}

.dticket--staged { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }

.dticket__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1em; }

.dticket__icon {
  display: grid;
  place-items: center;
  width: 2.3em; height: 2.3em;
  flex: none;
  border-radius: 50%;
  background: var(--a-brand-50);
  color: var(--a-brand);
}
.dticket__icon svg { width: 1.2em; height: 1.2em; }
.dticket__icon--spin svg { animation: dapp-spin 1s linear infinite; }
.dticket__icon--seal { width: 2.8em; height: 2.8em; }
.dticket__icon--seal svg { width: 1.5em; height: 1.5em; }

.dticket__id { min-width: 0; display: grid; }
.dticket__id b { font-size: .92em; font-weight: 600; color: var(--a-ink-900); }
.dticket__id small { font-size: .82em; color: var(--a-ink-500); font-variant-numeric: tabular-nums; }
.dticket__id em {
  font-style: normal;
  font-size: .7em;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--a-brand);
}
.dticket__name { font-family: var(--font-display); font-size: 1.25em !important; font-weight: 560 !important; line-height: 1.2; }

.dbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .55em 1.05em;
  border-radius: .45em;
  font-size: .82em;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .12s var(--ease-strike), box-shadow .12s var(--ease-strike);
}
.dbtn svg { width: 1.15em; height: 1.15em; }
.dbtn--primary { background: var(--a-brand); color: #fff; }
.dbtn--ghost { border: 1px solid var(--a-line); color: var(--a-ink-700); background: var(--a-raised); }
.dbtn.is-pressed { transform: translateY(1px) scale(.985); box-shadow: inset 0 1px 3px rgba(15, 30, 61, .22); }

/* ── the stepper ───────────────────────────────────────── */

.dstepper { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.dstepper li {
  position: relative;
  flex: 1 1 0;
  display: grid;
  justify-items: center;
  gap: .45em;
  text-align: center;
}
.dstepper li::after {
  content: "";
  position: absolute;
  top: .85em;
  left: calc(50% + 1.2em);
  right: calc(-50% + 1.2em);
  height: 2px;
  border-radius: 2px;
  background: var(--a-line);
  transition: background-color .3s var(--ease-strike);
}
.dstepper li:last-child::after { display: none; }
.dstepper li.is-done::after { background: var(--a-brand-400); }

.dstepper i {
  width: 1.7em; height: 1.7em;
  border-radius: 50%;
  border: 2px solid var(--a-line);
  background: var(--a-raised);
  transition: border-color .3s var(--ease-strike), background-color .3s var(--ease-strike);
}
.dstepper li.is-done i,
.dstepper li.is-active i { border-color: var(--a-brand); background: var(--a-brand-50); }
.dstepper li.is-active i { animation: dapp-stamp .42s var(--ease-strike) both; }

.dstepper span {
  max-width: 6.5em;
  font-size: .72em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--a-ink-300);
  transition: color .3s var(--ease-strike);
}
.dstepper li.is-active span { color: var(--a-ink-900); }

.dticket__notice {
  margin: 0;
  padding: .6em .8em;
  border-radius: .45em;
  background: var(--a-brand-50);
  font-size: .78em;
  color: var(--a-ink-700);
}

/* ── the finished ticket ───────────────────────────────── */

.dticket--done { border-color: var(--a-brand-400); }
.demo__stage[data-scene="done"] .dticket--done .dticket__icon--seal,
.demo__stage[data-scene="downloaded"] .dticket--done .dticket__icon--seal { animation: dapp-stamp .5s var(--ease-strike) both; }

.dticket__downloads { display: flex; flex-wrap: wrap; gap: .6em; }
.dbtn--wide { padding-inline: 1.3em; }

.dverify {
  display: grid;
  gap: .35em;
  padding: .85em 1em;
  border: 1px solid var(--a-line-soft);
  border-radius: .6em;
  background: var(--a-paper);
}
.dverify__head {
  display: flex;
  align-items: center;
  gap: .5em;
  padding-bottom: .5em;
  margin-bottom: .2em;
  border-bottom: 1px solid var(--a-line-soft);
  font-size: .78em;
  font-weight: 600;
  color: var(--a-ink-700);
}
.dverify__head svg { flex: none; width: 1.15em; height: 1.15em; color: var(--a-warn); }

.dverify__row {
  display: grid;
  grid-template-columns: .6em 9em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .7em;
  font-size: .78em;
  color: var(--a-ink-700);
}
.dverify__row b { font-weight: 500; color: var(--a-ink-500); }
.dverify__row > span { min-width: 0; font-weight: 600; color: var(--a-ink-900); font-variant-numeric: tabular-nums; }
.dverify__row i { width: .5em; height: .5em; border-radius: 50%; align-self: center; }
.dverify__row em { font-style: normal; font-size: .92em; }
.dverify__row--ok i { background: var(--a-ok); } .dverify__row--ok em { color: var(--a-ok); }
.dverify__row--err i { background: var(--a-err); } .dverify__row--err em { color: var(--a-err); }
.dverify__row--warn i { background: var(--a-warn); } .dverify__row--warn em { color: var(--a-warn); }

/* ── the cursor, the dragged file, the download bubble ─── */

.demo__cursor {
  position: absolute;
  top: 0; left: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cx, 50%), var(--cy, 90%), 0);
  transition: transform .55s cubic-bezier(.33, .02, .18, 1), opacity .3s var(--ease-strike);
}
.demo__cursor.is-visible { opacity: 1; }
.demo__cursor.is-warping { transition: opacity .3s var(--ease-strike); }
.demo__cursor svg {
  width: 2.05em; height: 2.05em;
  fill: var(--a-navy);
  stroke: #fff;
  stroke-width: 1.4;
  filter: drop-shadow(0 2px 4px rgba(15, 30, 61, .35));
}

.demo__click {
  position: absolute;
  top: .15em; left: .15em;
  width: 1.6em; height: 1.6em;
  margin: -.8em 0 0 -.8em;
  border-radius: 50%;
  border: 2px solid var(--a-brand-400);
  opacity: 0;
}
.demo__cursor.is-clicking .demo__click { animation: dapp-click .45s var(--ease-strike) both; }

.demo__file {
  position: absolute;
  top: 0; left: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .5em .8em;
  border: 1px solid var(--a-line);
  border-radius: .4em;
  background: var(--a-raised);
  box-shadow: var(--a-pop);
  font-size: .82em;
  font-weight: 500;
  color: var(--a-ink-900);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cx, 50%), var(--cy, 90%), 0) rotate(-3deg) scale(.9);
  transition: transform .55s cubic-bezier(.33, .02, .18, 1), opacity .28s var(--ease-strike);
}
.demo__file.is-visible { opacity: 1; transform: translate3d(var(--cx, 50%), var(--cy, 90%), 0) rotate(-3deg) scale(1); }
.demo__file.is-warping { transition: opacity .28s var(--ease-strike); }
.demo__file svg { width: 1.1em; height: 1.1em; color: var(--a-brand); }

.demo__download {
  position: absolute;
  z-index: 9;
  right: 1.2em;
  bottom: 1.2em;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .7em .95em;
  border: 1px solid var(--a-line);
  border-radius: .5em;
  background: var(--a-raised);
  box-shadow: var(--a-pop);
  opacity: 0;
  transform: translateY(.8em);
  pointer-events: none;
  transition: opacity .26s var(--ease-strike), transform .26s var(--ease-strike);
}
.demo__stage[data-scene="downloaded"] .demo__download { opacity: 1; transform: none; }
.demo__download svg { width: 1.2em; height: 1.2em; color: var(--a-ok); }
.demo__download span { display: grid; }
.demo__download b { font-size: .82em; font-weight: 600; color: var(--a-ink-900); }
.demo__download small { font-size: .74em; color: var(--a-ink-500); }

/* ── transport ─────────────────────────────────────────── */

.demo__controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.35rem);
  max-width: 62rem;
  margin: 1.1rem auto 0;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}

.demo__play {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.15rem; height: 2.15rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--sheet);
  color: var(--ink-900);
  cursor: pointer;
  transition: border-color .16s var(--ease-strike), transform .12s var(--ease-strike);
}
.demo__play:hover { border-color: var(--ink-900); transform: translateY(-1px); }
.demo__play svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo__iplay { fill: currentColor; stroke: none; display: none; }
.demo.is-paused .demo__iplay { display: block; }
.demo.is-paused .demo__ipause { display: none; }

.demo__beats {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: .25rem clamp(.35rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: beat;
}
.demo__beats button {
  padding: .2rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-typed);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-500);
  transition: color .2s var(--ease-strike);
}
.demo__beats button::before {
  counter-increment: beat;
  content: counter(beat, decimal-leading-zero) " ";
  color: var(--line-strong);
}
.demo__beats button:hover { color: var(--ink-900); }
.demo__beats li.is-current button { color: var(--aniline-600); }
.demo__beats li.is-current button::before { color: var(--aniline-500); }

.demo__rail {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: transparent;
  overflow: hidden;
}
.demo__rail i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--aniline-600);
  transform-origin: left center;
}

/* The written account of the same sequence — the demo is aria-hidden,
   so this is what a screen reader gets, and what shows without JS. */
.demo__steps {
  max-width: 62rem;
  margin: 1.15rem auto 0;
  padding: 0;
  display: grid;
  gap: .4rem;
  counter-reset: demostep;
  font-size: .9375rem;
  color: var(--ink-600);
}
.demo__steps li {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: baseline;
}
.demo__steps li::before {
  counter-increment: demostep;
  content: counter(demostep, decimal-leading-zero);
  font-family: var(--font-typed);
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--ink-500);
}
.js .demo__steps {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.demo figcaption { margin-top: 1.25rem; max-width: 62rem; margin-inline: auto; }

/* ── keyframes ─────────────────────────────────────────── */

@keyframes dapp-rise {
  from { opacity: 0; transform: translateY(.5em); }
  to   { opacity: 1; transform: none; }
}
@keyframes dapp-spin { to { transform: rotate(360deg); } }
@keyframes dapp-stamp {
  0%   { transform: scale(1.45) rotate(-8deg); opacity: .35; }
  55%  { transform: scale(.94) rotate(2deg); opacity: 1; }
  100% { transform: none; }
}
@keyframes dapp-click {
  0%   { opacity: .9; transform: scale(.25); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* ── responsive ────────────────────────────────────────── */

@media (max-width: 760px) {
  /* Below this the rebuilt screen stops being readable as a screen.
     The sidebar goes, the stage gets taller, and the written account
     of the sequence comes back as the primary telling. */
  .demo__stage { aspect-ratio: 4 / 5; font-size: 10px; }
  .dapp { grid-template-columns: minmax(0, 1fr); }
  .dapp__rail { display: none; }
  .dapp__main { padding: 1.4em 1.2em; gap: .9em; }
  .dapp__pickers { flex-wrap: wrap; }
  .dstepper span { display: none; }
  .demo__beats { display: none; }
  .js .demo__steps {
    position: static;
    width: auto; height: auto;
    margin: 1.15rem auto 0;
    clip-path: none;
    white-space: normal;
  }
}

@supports (container-type: inline-size) {
  @media (max-width: 760px) {
    .demo__stage { font-size: clamp(8px, 2.55cqw, 12px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo__cursor, .demo__file { display: none; }
  .dticket__icon--spin svg { animation: none; }
}

/* ============================================================
   The second recording — the translated preview.

   The same finished ticket, opened to the app's own preview.
   What the visitor should see: the words re-strike in the new
   language while every rule, cell and value stays exactly where
   it was. Values carry no data-t, so they never re-strike.
   ============================================================ */

.demo--prevod { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.demo__stage--preview { aspect-ratio: 16 / 10; }

.dprev {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: .85em;
  height: 100%;
  padding: 1.5em 2em 0;
}

.dprev__ticket {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1em;
  padding: .95em 1.2em;
  border: 1px solid var(--a-brand-400);
  border-radius: .9em;
  background: var(--a-raised);
  box-shadow: var(--a-card);
}
.dprev__downloads { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55em; }

.dprev__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding-top: .9em;
  border-top: 1px solid var(--a-line);
}
.dprev__head b {
  font-family: var(--font-display);
  font-size: 1.3em;
  font-weight: 560;
  color: var(--a-ink-900);
}

.dprev__toggle {
  display: inline-flex;
  gap: .25em;
  padding: .25em;
  border: 1px solid var(--a-line);
  border-radius: 999px;
  background: var(--a-raised);
}
.dprev__opt {
  padding: .32em .9em;
  border-radius: 999px;
  font-size: .78em;
  font-weight: 600;
  color: var(--a-ink-500);
  white-space: nowrap;
  transition: background-color .2s var(--ease-strike), color .2s var(--ease-strike), transform .12s var(--ease-strike);
}
.demo__stage[data-view="bs"] #prevodOptBs,
.demo__stage[data-view="tr"] #prevodOptTr { background: var(--a-brand); color: #fff; }
.dprev__opt.is-pressed { transform: scale(.95); }

.dprev__meta { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.dprev__meta small { font-size: .74em; color: var(--a-ink-500); }
.dprev__status > span {
  display: none;
  padding: .28em .8em;
  border-radius: 999px;
  font-size: .72em;
  font-weight: 600;
}
.dprev__ready { background: #eaf6ef; color: var(--a-ok); }
.dprev__loading { background: var(--a-brand-50); color: var(--a-brand); }
.demo__stage[data-status="ready"] .dprev__ready,
.demo__stage[data-status="loading"] .dprev__loading { display: inline-block; }

/* The preview well runs off the bottom of the frame: the page continues. */
.dprev__canvas {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--a-line);
  border-bottom: 0;
  border-radius: .6em .6em 0 0;
  background: var(--a-line-soft);
}
.dprev__scroll {
  padding: 1.6em 0 3em;
  transition: transform 1.1s cubic-bezier(.45, .05, .2, 1);
}
.dprev__scroll.is-warping { transition: none; }

/* ── the Word page, as docx-preview draws it ───────────── */

.wpage {
  width: min(44em, calc(100% - 3em));
  margin-inline: auto;
  padding: 3.2em 3.4em 3.6em;
  background: #fff;
  box-shadow: 0 .6em 1.8em rgba(28, 26, 23, .16);
  font-family: "Times New Roman", Times, "Liberation Serif", serif;
  line-height: 1.35;
  color: #111;
}
.wpage > * { transition: opacity .12s linear; }
.demo__stage[data-status="loading"] .wpage > * { opacity: .28; }

.wpage__note { font-size: .82em; color: #333; }
.wpage__auth { text-align: center; font-size: .8em; letter-spacing: .02em; }
.wpage__note + .wpage__auth { margin-top: .6em; }
.wpage__title { margin-top: .8em; text-align: center; font-size: 1.75em; font-weight: 700; letter-spacing: .08em; }
.wpage__sub { text-align: center; font-style: italic; font-size: .95em; }

.wpage__fields { width: 100%; margin-top: 1.4em; border-collapse: collapse; font-size: .9em; }
.wpage__fields th { width: 42%; padding: .28em 0; text-align: left; font-weight: 400; }
.wpage__fields td { padding: .28em 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.wpage__grades { width: 100%; margin-top: 1.3em; border-collapse: collapse; font-size: .88em; }
.wpage__grades th,
.wpage__grades td { padding: .3em .5em; border: 1px solid #222; text-align: left; }
.wpage__grades th { font-weight: 700; text-align: center; background: #f2f2f2; }
.wpage__grades td:nth-child(2) { width: 26%; }
.wpage__grades td:last-child,
.wpage__grades th:last-child { width: 15%; text-align: center; }

.wpage__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
  margin-top: 2.4em;
  font-size: .88em;
}
.wpage__sign { display: grid; justify-items: center; gap: .3em; min-width: 14em; }
.wpage__sign i { display: block; width: 100%; height: 1px; background: #222; }

/* Re-rendered words arrive by impression, in reading order. */
.wpage [data-t] { display: inline-block; transform-origin: 0 50%; }
.wpage p[data-t] { display: block; }
.wpage .wpage__auth,
.wpage .wpage__title,
.wpage .wpage__sub { transform-origin: 50% 50%; }
.wpage .is-restruck { animation: wpage-strike .3s var(--ease-strike) both; }
/* The global reduced-motion rule shortens durations but not the stagger
   delays, and a both-fill would hold late words invisible; skip it. */
@media (prefers-reduced-motion: reduce) {
  .wpage .is-restruck { animation: none; }
}
@keyframes wpage-strike {
  0%   { opacity: 0; transform: scale(1.035); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

.demo__download.is-visible { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .demo__stage--preview { aspect-ratio: 4 / 5; }
  .dprev { padding: 1.2em 1.1em 0; gap: .7em; }
  .dprev__ticket { grid-template-columns: auto minmax(0, 1fr); }
  .dprev__downloads { grid-column: 1 / -1; justify-content: flex-start; }
  .dprev__meta small { display: none; }
  .dprev__meta { justify-content: flex-end; }
  .wpage { width: calc(100% - 1.6em); padding: 2em 1.6em 2.4em; }
}

/* ── questions ─────────────────────────────────────────── */

.faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.faq__head { margin-bottom: 0; position: sticky; top: 6rem; }

.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  position: relative;
  display: block;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  transition: color .16s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--aniline-700); }

/* a ruled plus that loses its upright when open */
.faq__item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .2rem;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--ink-900), var(--ink-900)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--ink-900), var(--ink-900)) center / 1.5px 14px no-repeat;
}
.faq__item[open] summary::after {
  background: linear-gradient(var(--aniline-600), var(--aniline-600)) center / 14px 1.5px no-repeat;
}

.faq__item p {
  max-width: 40rem;
  padding: 0 2.5rem 1.35rem 0;
  font-size: .9875rem;
  color: var(--ink-600);
  text-wrap: pretty;
}
.faq__item p i { font-family: var(--font-typed); font-style: normal; font-size: .92em; color: var(--aniline-600); }

@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] p { animation: strike .24s var(--ease-strike) both; }
}

@media (max-width: 1040px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .faq__head { position: static; }
}