/* domeniq.app — direction A "Household Ledger". Tokens mirror src/HomeVault.Node/wwwroot/app.css. */

:root {
  color-scheme: light;

  --hv-paper: #F3EDE2;
  --hv-paper-raised: #FBF8F1;
  --hv-paper-sunken: #EAE2D3;
  --hv-ink: #1B1A18;
  --hv-ink-soft: #6B6256;
  --hv-rule: #D9CFBE;
  --hv-rule-strong: #BDB2A1;
  --hv-seal: #9E2F2A;
  --hv-seal-deep: #7F2420;
  --hv-seal-tint: #F2DCD8;
  --hv-slate: #2F4A6D;
  --hv-slate-deep: #243A56;

  --hv-bg: var(--hv-paper);
  --hv-surface: var(--hv-paper-raised);
  --hv-surface-sunken: var(--hv-paper-sunken);
  --hv-text: var(--hv-ink);
  --hv-text-muted: var(--hv-ink-soft);
  --hv-border: var(--hv-rule);
  --hv-border-strong: var(--hv-rule-strong);
  --hv-accent: var(--hv-seal);
  --hv-accent-hover: var(--hv-seal-deep);
  --hv-accent-soft: var(--hv-seal-tint);
  --hv-on-accent: var(--hv-paper);
  --hv-link: var(--hv-slate);
  --hv-link-hover: var(--hv-slate-deep);
  --hv-focus: var(--hv-slate);
  --hv-line: rgba(27, 26, 24, 0.07);

  --hv-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --hv-font-ui: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hv-font-mono: "Azeret Mono", ui-monospace, Consolas, "SFMono-Regular", monospace;

  --hv-radius-sm: 2px;
  --hv-radius: 4px;
  --hv-shadow-card: 0 1px 0 var(--hv-rule), 0 24px 48px -28px rgba(27, 26, 24, 0.4);
  --hv-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 36rem;
}

/* Russian: Fraunces has no Cyrillic, Piazzolla takes the display role. Golos Text covers the body. */
html[lang="ru"] {
  --hv-font-display: "Piazzolla", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

/* Hebrew: Frank Ruhl Libre for display, Assistant for the body. Fraunces stays only in the Latin wordmark. */
html[lang="he"] {
  --hv-font-display: "Frank Ruhl Libre", "Frank Ruhl", "David", Georgia, serif;
  --hv-font-ui: "Assistant", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html[lang="he"] h1,
html[lang="he"] h2,
html[lang="he"] h3,
html[lang="he"] .terms dt,
html[lang="he"] .stage-t,
html[lang="he"] .closing-line,
html[lang="he"] .foot-note {
  letter-spacing: 0;
  font-style: normal;
}

html[lang="he"] .wordmark,
html[lang="ru"] .wordmark {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
}

html[lang="he"] .wordmark em,
html[lang="ru"] .wordmark em {
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --hv-bg: #1B1A18;
    --hv-surface: #24221F;
    --hv-surface-sunken: #141311;
    --hv-text: #F3EDE2;
    --hv-text-muted: #BDB2A1;
    --hv-border: #3A3631;
    --hv-border-strong: #57514A;
    --hv-accent: #C94A43;
    --hv-accent-hover: #D9625B;
    --hv-accent-soft: #3A2422;
    --hv-on-accent: #F3EDE2;
    --hv-link: #9DB5D6;
    --hv-link-hover: #C2D2E8;
    --hv-focus: #9DB5D6;
    --hv-line: rgba(243, 237, 226, 0.06);
    --hv-shadow-card: 0 1px 0 #3A3631, 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  }
}

/* The dark panel remaps the same tokens for its own subtree, so children need no special rules. */
.ink {
  color-scheme: dark;
  --hv-bg: #1B1A18;
  --hv-surface: #24221F;
  --hv-surface-sunken: #141311;
  --hv-text: #F3EDE2;
  --hv-text-muted: #BDB2A1;
  --hv-border: #3A3631;
  --hv-border-strong: #57514A;
  --hv-accent: #E07A72;
  --hv-accent-soft: #3A2422;
  --hv-link: #9DB5D6;
  --hv-link-hover: #C2D2E8;
  --hv-focus: #9DB5D6;
  --hv-line: rgba(243, 237, 226, 0.06);
}

/* Base */

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

html {
  background: var(--hv-bg);
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  font-family: var(--hv-font-ui);
  font-size-adjust: from-font;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  color: var(--hv-text);
  background: var(--hv-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--hv-font-display);
  font-size-adjust: from-font;
  font-weight: 600;
  font-variation-settings: "opsz" 72, "SOFT" 30, "WONK" 0;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

p { margin: 0; }

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

a:hover { color: var(--hv-link-hover); }

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

::selection { background: var(--hv-accent-soft); }

.wrap {
  width: min(100% - 2 * var(--gutter), 72rem);
  margin-inline: auto;
}

.caption {
  font-family: var(--hv-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hv-text-muted);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.4rem;
  border: 1px solid var(--hv-text);
  border-radius: var(--hv-radius-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--hv-text);
  background: transparent;
  transition: background-color 0.2s var(--hv-ease-out), color 0.2s var(--hv-ease-out), border-color 0.2s var(--hv-ease-out), translate 0.2s var(--hv-ease-out);
}

.button:hover {
  color: var(--hv-text);
  background: var(--hv-surface-sunken);
  translate: 0 -1px;
}

.button-seal {
  border-color: var(--hv-accent);
  background: var(--hv-accent);
  color: var(--hv-on-accent);
}

.button-seal:hover {
  border-color: var(--hv-accent-hover);
  background: var(--hv-accent-hover);
  color: var(--hv-on-accent);
}

/* Wordmark */

.wordmark {
  font-family: var(--hv-font-display);
  font-weight: 500;
  font-size: 1.75rem;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--hv-text);
  text-decoration: none;
}

.wordmark em {
  font-style: italic;
  color: var(--hv-accent);
}

.wordmark.small { font-size: 1.5rem; }

/* Header */

.top {
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 1.25rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-inline-start: auto;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hv-text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav a:hover {
  color: var(--hv-text);
  border-bottom-color: var(--hv-accent);
}

.top-cta { min-height: 44px; }

/* Language switcher: three short links, the current one underlined in seal. */
.langs {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--hv-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.langs a,
.langs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.4rem;
  color: var(--hv-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.langs a:hover { color: var(--hv-text); }

.langs [aria-current="page"] {
  color: var(--hv-text);
  border-bottom-color: var(--hv-accent);
}

@media (max-width: 48rem) {
  .top-cta { display: none; }
  .nav { width: 100%; margin-inline-start: 0; }
  .langs { margin-inline-start: auto; }
}

/* Hero: paper, ruled lines, a seal margin line, a soft vignette at the top right. */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 8vw, 7rem);
  background-image:
    radial-gradient(ellipse 60% 50% at 85% 0%, var(--hv-accent-soft), transparent 70%),
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--hv-line) 31px, var(--hv-line) 32px);
  border-bottom: 1px solid var(--hv-border);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero-grid::before {
  content: "";
  position: absolute;
  top: -2rem;
  bottom: -2rem;
  inset-inline-start: -1.25rem;
  width: 1px;
  background: var(--hv-accent);
  opacity: 0.45;
}

[dir="rtl"] .hero {
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 0%, var(--hv-accent-soft), transparent 70%),
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--hv-line) 31px, var(--hv-line) 32px);
}

@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid::before { display: none; }
}

.hero-copy { display: grid; gap: 1.5rem; }

.eyebrow {
  font-family: var(--hv-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hv-accent);
}

h1 {
  font-size: clamp(2.375rem, 1.4rem + 3.4vw, 4.375rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.lede {
  max-width: var(--measure);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--hv-text-muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--hv-font-mono);
  font-size: 0.8125rem;
  color: var(--hv-text-muted);
}

.facts li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 0.6rem;
  border-radius: 50%;
  background: var(--hv-accent);
  vertical-align: middle;
}

/* The ledger card: one real entry, not a screenshot. */

.ledger-card {
  position: relative;
  margin: 0;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--hv-surface);
  border: 1px solid var(--hv-border);
  border-radius: var(--hv-radius);
  box-shadow: var(--hv-shadow-card);
  display: grid;
  gap: 1.1rem;
  container-type: inline-size;
}

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

.card-title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
}

.rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
}

@container (max-width: 26rem) {
  .rows { grid-template-columns: minmax(0, 1fr); }
}

.rows div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dotted var(--hv-border-strong);
  font-size: 0.9375rem;
}

.rows dt { color: var(--hv-text-muted); }

.rows dd {
  margin: 0;
  font-family: var(--hv-font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  unicode-bidi: plaintext;
}

.rows dd.seal { color: var(--hv-accent); }

.card-foot {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: var(--hv-text-muted);
}

.card-foot svg { flex: none; color: var(--hv-link); }

.verified {
  flex: none;
  padding: 0.35rem 0.6rem;
  border: 2px solid var(--hv-accent);
  color: var(--hv-accent);
  font-family: var(--hv-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  rotate: -6deg;
}

/* Sections */

.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  border-bottom: 1px solid var(--hv-border);
}

.section-head {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head h2 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 1;
  letter-spacing: -0.025em;
}

.section-lede {
  max-width: var(--measure);
  font-size: 1.0625rem;
  color: var(--hv-text-muted);
}

/* What it keeps: four columns divided by hairlines, numbered like ledger accounts. */

.keeps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--hv-border);
  counter-reset: keep;
}

.keep {
  position: relative;
  padding: 1.75rem 1.5rem 2rem 0;
  border-bottom: 1px solid var(--hv-border);
  counter-increment: keep;
}

.keep + .keep { padding-inline-start: 1.5rem; }

.keep + .keep::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  inset-inline-start: 0;
  width: 1px;
  background: var(--hv-border);
}

.keep h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.keep h3::before {
  content: counter(keep, decimal-leading-zero);
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--hv-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--hv-accent);
}

.keep p {
  font-size: 0.9375rem;
  color: var(--hv-text-muted);
}

@media (max-width: 40rem) {
  .keep + .keep { padding-inline-start: 0; }
  .keep + .keep::before { display: none; }
}

/* How it works: ledger lines with a seal number in the margin. */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--hv-border);
}

.steps li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding-block: 1.75rem;
  border-bottom: 1px dotted var(--hv-border-strong);
  counter-increment: step;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--hv-font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hv-accent);
  padding-top: 0.5rem;
}

.steps h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}

.steps p {
  max-width: var(--measure);
  color: var(--hv-text-muted);
}

/* Privacy: the dark panel. Tokens are remapped on .ink, the background shows the safe's rings. */

.ink {
  color: var(--hv-text);
  background-color: var(--hv-bg);
  background-image: radial-gradient(ellipse 50% 40% at 0% 0%, rgba(224, 122, 114, 0.14), transparent 70%);
  border-bottom: 0;
}

[dir="rtl"] .ink {
  background-image: radial-gradient(ellipse 50% 40% at 100% 0%, rgba(224, 122, 114, 0.14), transparent 70%);
}

.terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2rem 3rem;
  margin: 0;
}

.terms div {
  padding-top: 1rem;
}

.terms dt {
  font-family: var(--hv-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.terms dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--hv-text-muted);
}

/* Roadmap: a ledger table. */

.stages {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hv-border);
}

.stages li {
  display: grid;
  grid-template-columns: 3rem minmax(10rem, 16rem) minmax(0, 1fr) auto;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding-block: 1rem;
  border-bottom: 1px dotted var(--hv-border-strong);
}

.stage-n {
  font-family: var(--hv-font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hv-text-muted);
}

.stage-t {
  font-family: var(--hv-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  font-variation-settings: "opsz" 36, "SOFT" 40;
}

.stage-d {
  font-size: 0.9375rem;
  color: var(--hv-text-muted);
}

.stage-s {
  justify-self: end;
  font-family: var(--hv-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stages li.now .stage-n { color: var(--hv-accent); }

.stages li.now .stage-s {
  padding: 0.3rem 0.55rem;
  border: 2px solid var(--hv-accent);
  color: var(--hv-accent);
  rotate: -4deg;
}

@media (max-width: 48rem) {
  .stages li {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
  }
  .stage-d {
    grid-column: 2 / -1;
  }
}

.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hv-border);
}

.closing-line {
  font-family: var(--hv-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
  letter-spacing: -0.01em;
  color: var(--hv-text);
}

/* Footer */

.foot {
  padding-block: 2.5rem 3rem;
}

.foot-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
}

.foot-note {
  font-family: var(--hv-font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
  font-size: 1.0625rem;
  color: var(--hv-text-muted);
}

.foot-meta {
  grid-column: 1 / -1;
  font-family: var(--hv-font-mono);
  font-size: 0.75rem;
  color: var(--hv-text-muted);
}

.foot-meta a { color: inherit; }

@media (max-width: 40rem) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Motion.
   One orchestrated page load: the margin line draws, the copy rises line by line, the card settles on the
   desk, its rows are written in one after another, and the stamp lands last. Then, while scrolling: a seal
   ruler along the top tracks progress, columns and rows rise in sequence, hairlines draw themselves, and the
   "in progress" stamp lands when the roadmap comes into view. Everything is opacity, transform or clip-path,
   everything is off under prefers-reduced-motion, and browsers without scroll-driven animations get a short
   IntersectionObserver fallback (html.io) for the rises only. */

@keyframes rise {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes stamp {
  from { opacity: 0; scale: 1.4; }
  to { opacity: 1; scale: 1; }
}

@keyframes settle {
  from { opacity: 0; translate: 0 28px; rotate: 1.5deg; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

@keyframes draw-y {
  from { scale: 1 0; }
  to { scale: 1 1; }
}

@keyframes draw-x {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@keyframes write {
  from { opacity: 0.2; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes write-rtl {
  from { opacity: 0.2; clip-path: inset(0 0 0 100%); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes ink-in {
  from { opacity: 0; scale: 1.25; filter: blur(2px); }
  to { opacity: 1; scale: 1; filter: blur(0); }
}

@keyframes drift {
  from { translate: 0 -48px; }
  to { translate: 0 48px; }
}

/* Position in a group, read by the stagger rules below. Set in CSS so the markup stays plain. */
.keeps > :nth-child(2), .steps > :nth-child(2), .terms > :nth-child(2), .stages > :nth-child(2), .rows > :nth-child(2) { --i: 1; }
.keeps > :nth-child(3), .steps > :nth-child(3), .terms > :nth-child(3), .stages > :nth-child(3), .rows > :nth-child(3) { --i: 2; }
.keeps > :nth-child(4), .steps > :nth-child(4), .terms > :nth-child(4), .stages > :nth-child(4), .rows > :nth-child(4) { --i: 3; }
.steps > :nth-child(5), .terms > :nth-child(5), .stages > :nth-child(5) { --i: 4; }
.terms > :nth-child(6), .stages > :nth-child(6) { --i: 5; }
.stages > :nth-child(7) { --i: 6; }

/* The scroll ruler: invisible until a scroll timeline drives it. */
.progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 10;
  width: 100%;
  height: 2px;
  background: var(--hv-accent);
  transform-origin: 0 50%;
  scale: 0 1;
  pointer-events: none;
}

[dir="rtl"] .progress { transform-origin: 100% 50%; }

/* Hairlines that will draw themselves: the term rules and the column dividers. */
.terms div {
  position: relative;
  border-top: 0;
}

.terms div::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--hv-border-strong);
  transform-origin: 0 50%;
}

[dir="rtl"] .terms div::before,
[dir="rtl"] .keep + .keep::before { transform-origin: 100% 0; }

.keep + .keep::before { transform-origin: 0 0; }

/* The safe's rings sit on their own layer so they can drift with the scroll. */
.ink {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ink::before {
  content: "";
  position: absolute;
  inset: -80px -60px;
  z-index: -1;
  background-image: repeating-radial-gradient(circle at 100% 100%, transparent 0, transparent 56px, var(--hv-line) 56px, var(--hv-line) 57px);
  pointer-events: none;
}

[dir="rtl"] .ink::before {
  background-image: repeating-radial-gradient(circle at 0% 100%, transparent 0, transparent 56px, var(--hv-line) 56px, var(--hv-line) 57px);
}

/* Micro-interactions: the nav underline grows from the reading side, buttons press. */
.nav a {
  position: relative;
  border-bottom: 0;
}

.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--hv-accent);
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale 0.3s var(--hv-ease-out);
}

[dir="rtl"] .nav a::after { transform-origin: 100% 50%; }

.nav a:hover::after,
.nav a:focus-visible::after { scale: 1 1; }

.button:active { translate: 0 0; scale: 0.985; }

@media (prefers-reduced-motion: no-preference) {

  /* Page load */

  .stagger > * {
    animation: rise 0.9s var(--hv-ease-out) both;
    animation-delay: calc(0.12s * var(--i, 0));
  }

  .top .wordmark em {
    display: inline-block;
    animation: ink-in 0.7s var(--hv-ease-out) 0.5s both;
  }

  .hero-grid::before {
    animation: draw-y 1.2s var(--hv-ease-out) 0.15s both;
    transform-origin: 50% 0;
  }

  .ledger-card {
    animation: settle 1.1s var(--hv-ease-out) 0.35s both;
  }

  .rows > div {
    animation: write 0.55s var(--hv-ease-out) both;
    animation-delay: calc(1.05s + 0.14s * var(--i, 0));
  }

  [dir="rtl"] .rows > div { animation-name: write-rtl; }

  .verified {
    animation: stamp 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 1.9s both;
  }

  /* While scrolling. Progressive enhancement: without support the content simply shows. */

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .progress {
      animation: draw-x auto linear both;
      animation-timeline: scroll(root block);
    }

    .reveal,
    .stages > li {
      animation: rise auto linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 7%) entry calc(45% + var(--i, 0) * 7%);
    }

    .terms div { view-timeline: --term block; }

    .terms div::before {
      animation: draw-x auto linear both;
      animation-timeline: --term;
      animation-range: entry 10% entry 70%;
    }

    .keep { view-timeline: --keep block; }

    .keep + .keep::before {
      animation: draw-y auto linear both;
      animation-timeline: --keep;
      animation-range: entry 0% entry 80%;
    }

    .ink { view-timeline: --ink block; }

    .ink::before {
      animation: drift auto linear both;
      animation-timeline: --ink;
      animation-range: cover 0% cover 100%;
    }

    .stages li.now { view-timeline: --now block; }

    .stages li.now .stage-s {
      animation: stamp auto linear both;
      animation-timeline: --now;
      animation-range: entry 40% entry 100%;
    }
  }

  /* Fallback rises for browsers without scroll timelines, toggled by the inline script. */

  html.io .reveal,
  html.io .stages > li {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 0.7s var(--hv-ease-out), translate 0.7s var(--hv-ease-out);
    transition-delay: calc(90ms * var(--i, 0));
  }

  html.io .in {
    opacity: 1;
    translate: 0 0;
  }
}