/* domeniq.app — direction A "Household Ledger". Tokens mirror src/DomenIQ.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;
  }
}

/* Install: the three steps, the SmartScreen drawing and the small print. */

.smartscreen-fig {
  grid-column: 2;
  margin: 1rem 0 0;
}

.smartscreen {
  display: block;
  width: 100%;
  max-width: 22.5rem;
  height: auto;
  color: var(--hv-text);
  font-family: system-ui, "Segoe UI", sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}

.smartscreen .ss-win { fill: var(--hv-surface); stroke: var(--hv-border-strong); stroke-width: 1.5; }
.smartscreen .ss-bar { fill: var(--hv-surface-sunken); stroke: none; }
.smartscreen .ss-x { stroke: var(--hv-text-muted); stroke-width: 1.5; fill: none; }
.smartscreen .ss-head { fill: currentColor; font-size: 18px; font-weight: 600; }
.smartscreen .ss-body { fill: var(--hv-text-muted); font-size: 12px; }
.smartscreen .ss-link { fill: currentColor; font-size: 13px; text-decoration: underline; }
.smartscreen .ss-btn { fill: var(--hv-accent); stroke: var(--hv-accent-hover); stroke-width: 1.5; }
.smartscreen .ss-btn-t { fill: var(--hv-on-accent); font-size: 13px; font-weight: 600; }

.smartscreen-fig figcaption {
  margin-top: 0.5rem;
  max-width: 22.5rem;
  font-size: 0.8125rem;
  color: var(--hv-text-muted);
}

.requirements {
  margin-top: 1.5rem;
  font-family: var(--hv-font-mono);
  font-size: 0.875rem;
  color: var(--hv-text-muted);
}

.small-link {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

@media (max-width: 40rem) {
  .smartscreen-fig { grid-column: 1 / -1; }
}

/* Links that leave the site: a small arrow after the label. */

.ext::after {
  content: "\2009\2197";
  font-family: var(--hv-font-ui);
}

[dir="rtl"] .ext::after { content: "\2009\2196"; }

/* The nav's ::after is the hover underline; an outbound nav link keeps its arrow in the label instead. */
.nav a.ext::after {
  content: "";
}

.nav a.ext::before {
  content: "\2197";
  order: 1;
  margin-inline-start: 0.25em;
  font-size: 0.8em;
  color: var(--hv-text-muted);
}

[dir="rtl"] .nav a.ext::before { content: "\2196"; }

.nav a[aria-current="page"]::after { scale: 1 1; }

/* Phone app: the "coming soon" mark in the caption, and the notify link under the terms. */

.soon { color: var(--hv-accent); }

.phone-notify { margin-top: 2rem; }

/* Roadmap: finished stages read quietly, the stage in progress keeps the stamp. */

.stages li.done .stage-s { color: var(--hv-text-muted); }

.stages li.done .stage-n::after {
  content: " \2713";
  color: var(--hv-accent);
}

/* AI plans page */

.page-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem); }

.page-hero .hero-copy { max-width: 48rem; }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.plans > :nth-child(2) { --i: 1; }
.plans > :nth-child(3) { --i: 2; }
.plans > :nth-child(4) { --i: 3; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--hv-surface);
  border: 1px solid var(--hv-border);
  border-radius: var(--hv-radius);
}

.plan-featured {
  border-color: var(--hv-accent);
  box-shadow: var(--hv-shadow-card);
}

/* The stamp sits on the card's top edge, so a long plan name never runs under it. */
.plan-stamp {
  position: absolute;
  top: -0.9rem;
  inset-inline-end: 1.1rem;
  background: var(--hv-surface);
}

.plan-name {
  font-size: 1.5rem;
  font-variation-settings: "opsz" 48, "SOFT" 30, "WONK" 0;
}

.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

.plan-amount {
  font-family: var(--hv-font-mono);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  unicode-bidi: plaintext;
}

.plan-per {
  font-size: 0.875rem;
  color: var(--hv-text-muted);
}

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

.plan-note {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--hv-text-muted);
}

.plan .button { width: 100%; }

.closing-top {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .plan-featured .plan-stamp {
      animation: stamp auto linear both;
      animation-timeline: view();
      animation-range: entry 50% entry 100%;
    }
  }
}

/* Four short terms in one row where there is room for them. */
.terms-4 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }

/* The rows are written in one by one only on the hero card; plan cards show theirs at once. */
.plan .rows > div { animation: none; }

/* Questions on the home page: two columns of a heading and its answer, plain HTML so the text is easy to quote. */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 2rem 3rem;
}

.faq-item {
  padding-top: 1rem;
  border-top: 1px solid var(--hv-border);
}

.faq-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-variation-settings: "opsz" 36, "SOFT" 40;
}

.faq-item p {
  max-width: var(--measure);
  font-size: 0.9375rem;
  color: var(--hv-text-muted);
}

/* The 404 page: the hero alone, tall enough that the footer does not ride up under it. */
.not-found { min-height: 60vh; display: grid; align-content: center; }