/* chancery — bearomark.io
   Standalone product site for Bearomark: sealed envelopes, no
   server. Derived from sites/den — same tokens, type, topbar, hero
   grammar, sections, and footer, so the bureau reads as one hand.
   The working surfaces (/verify, /sign) add dropzone + report
   styles on the same tokens. */

@font-face {
  font-family: 'Inter';
  src: url('./assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./assets/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('./assets/fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('./assets/fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./assets/fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --ivory:        #EDE9E2;
  --charcoal:     #1C1C1C;
  --stone:        #7A766F;
  --stone-strong: #5F5A53;
  --line:         rgba(28, 28, 28, 0.12);
  --forest:       #2A4A3D;
  --amber:        #D49A4F;
  --rust:         #B5523A;

  --bp-line:       #2A4A3D;
  --bp-bg:         #EDE9E2;
  --bp-strong:     #1C1C1C;
  --bp-muted:      #5F5A53;
  --bp-faint:      #7A766F;
  --bp-dot:        rgba(42, 74, 61, 0.18);

  /* TUI palette — light theme. */
  --tui-bg:       #F4F0E8;
  --tui-bg-deep:  #E5DFD3;
  --tui-frame:    rgba(42, 74, 61, 0.55);
  --tui-text:     #1C1C1C;
  --tui-muted:    #5F5A53;
  --tui-faint:    #7A766F;
  --tui-divider:  rgba(42, 74, 61, 0.18);
  --tui-tile-bg:  #EDE9E2;
  --tui-tile-edge: rgba(42, 74, 61, 0.22);
  --tui-focus:    #2A4A3D;
  --tui-accent-clean:   rgba(42, 74, 61, 0.55);
  --tui-accent-dirty:   #D49A4F;
  --tui-accent-warn:    #D49A4F;
  --tui-accent-alert:   #B5523A;
  --tui-accent-soft:    rgba(122, 118, 111, 0.5);
  --tui-mod:      #B5851F;
  --tui-add:      #2A4A3D;
  --tui-untr:     #7A766F;
  --tui-ahead:    #2A4A3D;
  --tui-behind:   #B5523A;
  --tui-stash:    #5F5A53;
  --tui-conflict: #B5523A;
  --tui-ci-green: #2A4A3D;
  --tui-ci-amber: #D49A4F;
  --tui-ci-red:   #B5523A;
  --tui-ci-muted: #7A766F;

  --body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', var(--body);
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ivory:        #0F0F0F;
  --charcoal:     #EDE9E2;
  --stone:        rgba(237, 233, 226, 0.55);
  --stone-strong: rgba(237, 233, 226, 0.78);
  --line:         rgba(237, 233, 226, 0.14);
  --forest:       #D49A4F;
  --rust:         #E2785A;

  --bp-line:       #D49A4F;
  --bp-bg:         #1C1C1C;
  --bp-strong:     #EDE9E2;
  --bp-muted:      rgba(237, 233, 226, 0.78);
  --bp-faint:      rgba(237, 233, 226, 0.5);
  --bp-dot:        rgba(212, 154, 79, 0.22);

  --tui-bg:       #161616;
  --tui-bg-deep:  #0B0B0B;
  --tui-frame:    rgba(212, 154, 79, 0.55);
  --tui-text:     #EDE9E2;
  --tui-muted:    rgba(237, 233, 226, 0.78);
  --tui-faint:    rgba(237, 233, 226, 0.5);
  --tui-divider:  rgba(212, 154, 79, 0.22);
  --tui-tile-bg:  #1C1C1C;
  --tui-tile-edge: rgba(212, 154, 79, 0.22);
  --tui-focus:    #D49A4F;
  --tui-accent-clean:   rgba(212, 154, 79, 0.45);
  --tui-accent-dirty:   #D49A4F;
  --tui-accent-warn:    #D49A4F;
  --tui-accent-alert:   #E2785A;
  --tui-accent-soft:    rgba(237, 233, 226, 0.25);
  --tui-mod:      #E2B463;
  --tui-add:      #8FB39E;
  --tui-untr:     rgba(237, 233, 226, 0.55);
  --tui-ahead:    #8FB39E;
  --tui-behind:   #E2785A;
  --tui-stash:    rgba(237, 233, 226, 0.7);
  --tui-conflict: #E2785A;
  --tui-ci-green: #8FB39E;
  --tui-ci-amber: #D49A4F;
  --tui-ci-red:   #E2785A;
  --tui-ci-muted: rgba(237, 233, 226, 0.45);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --ivory:        #0F0F0F;
    --charcoal:     #EDE9E2;
    --stone:        rgba(237, 233, 226, 0.55);
    --stone-strong: rgba(237, 233, 226, 0.78);
    --line:         rgba(237, 233, 226, 0.14);
    --forest:       #D49A4F;
    --rust:         #E2785A;

    --bp-line:       #D49A4F;
    --bp-bg:         #1C1C1C;
    --bp-strong:     #EDE9E2;
    --bp-muted:      rgba(237, 233, 226, 0.78);
    --bp-faint:      rgba(237, 233, 226, 0.5);
    --bp-dot:        rgba(212, 154, 79, 0.22);

    --tui-bg:       #161616;
    --tui-bg-deep:  #0B0B0B;
    --tui-frame:    rgba(212, 154, 79, 0.55);
    --tui-text:     #EDE9E2;
    --tui-muted:    rgba(237, 233, 226, 0.78);
    --tui-faint:    rgba(237, 233, 226, 0.5);
    --tui-divider:  rgba(212, 154, 79, 0.22);
    --tui-tile-bg:  #1C1C1C;
    --tui-tile-edge: rgba(212, 154, 79, 0.22);
    --tui-focus:    #D49A4F;
    --tui-accent-clean:   rgba(212, 154, 79, 0.45);
    --tui-accent-dirty:   #D49A4F;
    --tui-accent-warn:    #D49A4F;
    --tui-accent-alert:   #E2785A;
    --tui-accent-soft:    rgba(237, 233, 226, 0.25);
    --tui-mod:      #E2B463;
    --tui-add:      #8FB39E;
    --tui-untr:     rgba(237, 233, 226, 0.55);
    --tui-ahead:    #8FB39E;
    --tui-behind:   #E2785A;
    --tui-stash:    rgba(237, 233, 226, 0.7);
    --tui-conflict: #E2785A;
    --tui-ci-green: #8FB39E;
    --tui-ci-amber: #D49A4F;
    --tui-ci-red:   #E2785A;
    --tui-ci-muted: rgba(237, 233, 226, 0.45);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}
a:hover { text-decoration-color: currentColor; }
/* Content links carry the accent so they read as links everywhere —
   nav and footer keep their quieter treatments. */
.lede a,
.section a,
.steps a,
.fact-list a,
.report a {
  color: var(--forest);
  text-decoration-color: currentColor;
}
.lede a:hover,
.section a:hover,
.steps a:hover,
.fact-list a:hover,
.report a:hover {
  color: var(--charcoal);
}

.wrap {
  width: min(1400px, calc(100vw - 48px));
  margin: 0 auto;
}

/* Topbar ─────────────────────────────────────────── */
.topbar {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
}
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
}
.brand {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  color: var(--forest);
  text-decoration: none;
  letter-spacing: 0.01em;
}
/* Property mark beside the wordmark — same pill as the hub. */
.brand-tag {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--stone);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: 2px;
}
.topnav {
  display: flex;
  gap: 22px;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--stone);
}
.topnav a { text-decoration: none; }
.topnav a:hover { color: var(--charcoal); }
.version-tag {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--forest);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.version-tag:hover {
  color: var(--charcoal);
  border-color: var(--forest);
}
/* site-version — mirrors bearo's name·version pill in the topnav.
   The ▶ glyph is drawn via a CSS triangle so it scales with text. */
.site-version {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--stone);
  text-decoration: none;
}
.site-version::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}
.site-version:hover { color: var(--forest); }

/* Hero ───────────────────────────────────────────── */
.hero {
  position: relative;
  flex: 0 0 auto;
  min-height: clamp(560px, 78vh, 740px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background-image: radial-gradient(circle, var(--bp-dot) 0.9px, transparent 1.4px);
  background-size: 20px 20px;
  background-position: 0 0;
}
.tui {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.tui svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero.hero-compact {
  min-height: 0;
}
.hero.hero-compact .hero-inner {
  padding: 72px 0 56px;
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.hero-content {
  max-width: 38ch;
  padding: 32px 0;
}
.kicker {
  margin: 0 0 24px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.kicker-mark {
  display: inline-block;
  margin-right: 0.9em;
  padding-right: 0.9em;
  border-right: 1px solid var(--line);
  letter-spacing: 0.12em;
  color: var(--forest);
}
h1 {
  margin: 0;
  max-width: 14ch;
  font-family: var(--display);
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.lede {
  margin: 24px 0 0;
  max-width: 38ch;
  color: var(--stone-strong);
  font-size: 18px;
  line-height: 1.55;
}
/* Hero install — copy-paste brew command card, matching the
   bearo cover-install layout but in den's lighter theme. */
.hero-install {
  margin-top: 32px;
  max-width: 480px;
  border: 1px solid var(--line);
  background: var(--ivory);
  border-radius: 8px;
  overflow: hidden;
}
.hero-install-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.hero-install-head span { color: var(--forest); }
.hero-install-head a {
  color: var(--stone);
  text-decoration: none;
  letter-spacing: 0.16em;
}
.hero-install-head a:hover { color: var(--forest); }
.hero-install-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  min-height: 56px;
}
.hero-install pre {
  margin: 0;
  padding: 14px 16px;
  color: var(--charcoal);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: pre;
}
.hero-install pre::-webkit-scrollbar { display: none; }
.command-copy {
  appearance: none;
  display: grid;
  place-items: center;
  width: 44px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--stone);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}
.command-copy:hover {
  color: var(--forest);
  background: rgba(42, 74, 61, 0.04);
}
html[data-theme="dark"] .command-copy:hover,
html:not([data-theme="light"]) .command-copy:hover {
  background: rgba(212, 154, 79, 0.08);
}
.command-copy svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.command-copy .check-icon { display: none; }
.command-copy[data-copy-state="copied"] .copy-icon { display: none; }
.command-copy[data-copy-state="copied"] .check-icon { display: block; color: var(--forest); }

.hero-actions {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 6px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.cta-primary {
  background: var(--forest);
  color: var(--ivory);
  border: 1px solid var(--forest);
}
.cta-primary:hover { filter: brightness(1.08); }
.cta-ghost {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--line);
}
.cta-ghost:hover { border-color: var(--charcoal); }
/* CTAs inside content sections: the section link color must not
   repaint the buttons (amber-on-amber in dark). */
.section a.cta-primary,
.section a.cta-primary:hover { color: var(--ivory); }
.section a.cta-ghost { color: var(--charcoal); }

/* Content sections ───────────────────────────────── */
.section {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.section-alt {
  background-image: radial-gradient(circle, var(--bp-dot) 0.9px, transparent 1.4px);
  background-size: 20px 20px;
}
.section-head {
  max-width: 60ch;
  margin-bottom: 48px;
}
.section-no {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.section h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.section-lede {
  margin: 16px 0 0;
  color: var(--stone-strong);
  font-size: 17px;
}
.section-foot {
  margin: 28px 0 0;
  color: var(--stone-strong);
  font-size: 15px;
}
.section-foot code,
.section-lede code {
  color: var(--charcoal);
}

/* Code blocks ───────────────────────────────────── */
.code {
  margin: 0;
  padding: 16px 18px;
  background: var(--tui-bg-deep);
  border: 1px solid var(--tui-tile-edge);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--tui-text);
  overflow-x: auto;
}
.code-block {
  padding: 22px 24px;
  font-size: 14px;
}
.inline-code {
  padding: 1px 6px;
  background: var(--tui-bg-deep);
  border: 1px solid var(--tui-tile-edge);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--charcoal);
}

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin: 0 1px;
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  color: var(--charcoal);
  background: var(--ivory);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  line-height: 1.4;
}

/* Footer ────────────────────────────────────────── */
.bottombar {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--stone);
}
.bottombar .topbar-row { padding: 14px 0; }
.bottombar a { text-decoration: none; }
.bottombar a:hover { color: var(--charcoal); }
.bottombar-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.bottombar-group {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.bottombar-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--stone);
  opacity: 0.55;
  flex: 0 0 auto;
  align-self: center;
}

/* Theme switcher ────────────────────────────────── */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--stone);
  white-space: nowrap;
}
.theme-switch button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color 200ms ease;
}
.theme-switch button:hover,
.theme-switch button[aria-pressed="true"] { color: var(--charcoal); }
.theme-switch button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
.theme-switch span { color: var(--stone); }

/* Responsive ────────────────────────────────────── */
@media (max-width: 960px) {
  .wrap { width: calc(100vw - 48px); }
  .topbar-row { padding: 16px 0; gap: 16px; flex-wrap: wrap; }
  .topnav { font-size: 12px; gap: 14px; flex-wrap: wrap; }
  .version-tag { font-size: 10px; padding: 2px 7px; }

  /* Stack: copy first, TUI below. */
  .hero {
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
    padding: 28px 0 0;
    background-size: 14px 14px;
  }
  .hero-inner { padding: 24px 0 36px; }
  .hero-content { max-width: none; padding: 0; }
  h1 { font-size: clamp(30px, 8.4vw, 44px); max-width: none; letter-spacing: -0.01em; }
  .lede { font-size: 16px; margin-top: 18px; max-width: none; }
  .hero-actions { margin-top: 24px; }

  .tui {
    position: relative;
    inset: auto;
    height: clamp(360px, 86vw, 520px);
    margin: 0 0 8px;
  }

  .section { padding: 56px 0; }
  .section-head { margin-bottom: 32px; }

  .install-grid { grid-template-columns: 1fr; gap: 18px; }
  .install-card { padding: 22px; min-width: 0; }
  .install-card .code { min-width: 0; padding: 14px 16px; font-size: 12px; }

  .keys-grid { grid-template-columns: 1fr; gap: 28px; }
  .key-group dl { grid-template-columns: minmax(120px, auto) 1fr; column-gap: 14px; }

  .bottombar .topbar-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 0 24px;
  }
  .bottombar-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }
  .bottombar-divider { display: none; }
}



/* Bearomark hero — den's hero assumes right-side art and caps the
   headline at 14ch. Here the headline gets room, and the art slot is
   the product's own verdict card (the exact .report the /verify page
   renders — real UI, not decoration). */
.hero-content h1 { max-width: 18ch; }
.hero-content { max-width: 620px; }
.hero-content .lede { max-width: 46ch; }
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: 64px;
  align-items: center;
}
.hero-sample {
  display: grid;
}
.hs-face {
  grid-area: 1 / 1;
  opacity: 0;
}
.hs-face .report {
  margin-top: 0;
  max-width: none;
  background: var(--tui-bg);
  border-color: var(--tui-tile-edge);
  padding: 26px 30px;
  /* FIXED frame: the typer fills it top-down; the card never moves. */
  height: 380px;
  overflow: hidden;
  box-sizing: border-box;
}
/* Two faces of the same envelope on the shared 12s beat, each one
   alive inside its window. Face A plays the guest's moment: the
   sealed-by line lands, the contract writes in, the passkey button
   arrives and is pressed. Face B answers with the math: the ledger
   writes itself, verdict last. Reduced motion holds the verdict. */
.hs-ui   { animation: hs-face-a 12s ease-in-out infinite; }
.hs-tech { animation: hs-face-b 12s ease-in-out infinite; }
/* Seamless crossfade: one face is always on stage. A holds the
   first half, hands to B mid-cycle, and B hands back to A exactly
   across the loop seam — no empty frame, ever. */
@keyframes hs-face-a {
  0%, 44% { opacity: 1; }
  50%, 94% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hs-face-b {
  0%, 44% { opacity: 0; }
  50%, 94% { opacity: 1; }
  100% { opacity: 0; }
}
/* Face A choreography */
.hs-ui .report h3,
.hs-ui .notice,
.hs-ui .doc-preview,
.hs-ui .hero-actions { opacity: 0; }
.hs-ui .report h3    { animation: hs-a1 12s linear infinite; }
.hs-ui .notice       { animation: hs-a2 12s linear infinite; }
.hs-ui .doc-preview  { animation: hs-a3 12s linear infinite; }
.hs-ui .hero-actions { animation: hs-a4 12s linear infinite; }

/* The sealed-by header rides the cross-fade seam (94%→100%) so face
   A never returns as a bare frame — the rest of the card still
   writes in after the loop restarts. */
@keyframes hs-a1 { 0%, 49% { opacity: 1; } 52%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hs-a2 { 0%, 3% { opacity: 0; } 5%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hs-a3 { 0%, 1% { opacity: 0; } 4%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* The contract frame is FIXED size; its lines write in. */
.hs-ui .doc-preview {
  height: 150px;
  overflow: hidden;
  margin-top: 12px;
}
.hs-ui .hero-actions { margin-top: 16px; }
.hs-ui .cta { position: relative; pointer-events: none; }
/* The house tap-target: deep-black dot + pulsing ring, fingertip-
   offset on the amber CTA — the exact vocabulary of bearo's unlock
   button, /support CTA, and slash-menu pointer. Appears once the
   button has landed, pulses while the face is live. */
.hs-pointer {
  position: absolute;
  top: 50%;
  left: 62%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  animation: hs-pointer-show 12s linear infinite;
}
.hs-pointer-dot,
.hs-pointer-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.hs-pointer-dot {
  background: #1C1C1C;
}
.hs-pointer-ring {
  border: 2px solid #1C1C1C;
  opacity: 0;
  animation: hs-pointer-pulse 1.8s ease-out infinite;
}
@keyframes hs-pointer-show {
  0%, 26% { opacity: 0; }
  28%, 47% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@keyframes hs-pointer-pulse {
  0%   { transform: scale(0.7); opacity: 0.85; }
  100% { transform: scale(2.6); opacity: 0; }
}
.hs-ui .doc-rendered h5,
.hs-ui .doc-rendered p { opacity: 0; }
.hs-ui .doc-rendered h5              { animation: hs-a3l1 12s linear infinite; }
.hs-ui .doc-rendered p:nth-of-type(1) { animation: hs-a3l2 12s linear infinite; }
.hs-ui .doc-rendered p:nth-of-type(2) { animation: hs-a3l3 12s linear infinite; }
.hs-ui .doc-rendered p:nth-of-type(3) { animation: hs-a3l4 12s linear infinite; }
@keyframes hs-a3l1 { 0%, 6% { opacity: 0; transform: translateY(4px); } 8%, 49% { opacity: 1; transform: translateY(0); } 50%, 100% { opacity: 0; } }
@keyframes hs-a3l2 { 0%, 9% { opacity: 0; transform: translateY(4px); } 11%, 49% { opacity: 1; transform: translateY(0); } 50%, 100% { opacity: 0; } }
@keyframes hs-a3l3 { 0%, 12% { opacity: 0; transform: translateY(4px); } 14%, 49% { opacity: 1; transform: translateY(0); } 50%, 100% { opacity: 0; } }
@keyframes hs-a3l4 { 0%, 15% { opacity: 0; transform: translateY(4px); } 17%, 49% { opacity: 1; transform: translateY(0); } 50%, 100% { opacity: 0; } }
@keyframes hs-a4 { 0%, 20% { opacity: 0; transform: translateY(6px); } 24%, 49% { opacity: 1; transform: translateY(0); } 50%, 100% { opacity: 0; } }
/* Face B — the ledger TYPES itself, char by char, driven by the
   loop typer in index.html (the /support typing grammar). Default
   markup shows the finished card, so no-JS and reduced motion are
   already the final state. */
.hs-tech .sig-list li {
  border-top-color: transparent;
  transition: border-top-color 300ms ease;
}
.hs-tech .sig-list li.hs-typed {
  border-top-color: var(--line);
}
@media (prefers-reduced-motion: reduce) {
  .hs-ui, .hs-tech,
  .hs-ui .report h3, .hs-ui .notice, .hs-ui .doc-preview, .hs-ui .hero-actions,
  .hs-ui .doc-rendered h5, .hs-ui .doc-rendered p {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .hs-ui { display: none; }
  .hs-pointer, .hs-pointer-ring { animation: none !important; opacity: 0; }
  .hs-tech .sig-list li { border-top-color: var(--line); }
}

@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-sample { display: none; }
}

/* Quiet sub-heading inside a section — same voice as the section
   number, so a merged block doesn't repeat the big-heading band. */
.section-sub {
  margin: 64px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Marketing grids — the same fact/step rows, set side by side so the
   sections read as cards instead of a spec sheet. */
.fact-list.grid-3,
.steps.grid-3 {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 48px;
}
.fact-list.grid-2 {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}
@media (max-width: 900px) {
  .fact-list.grid-3,
  .steps.grid-3,
  .fact-list.grid-2 { grid-template-columns: 1fr; }
}

/* §02 invitation — the exact text "Copy invitation" puts on the
   sender's clipboard, framed like the house app mocks: titlebar +
   plain pasted text. */
.invite-card {
  align-self: center;
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--tui-tile-edge);
  border-radius: 10px;
  background: var(--tui-bg);
  overflow: hidden;
}
.invite-body {
  padding: 20px 24px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--tui-muted);
}
.invite-body p { margin: 0 0 14px; }
.invite-body p:last-child { margin-bottom: 0; }
.invite-fp { color: var(--amber); }

/* Hero still + § 01 walkthrough surfaces — the real bearo frames
   (note, ceremony dialog, custody). The hero holds one still beat;
   the walkthrough below animates the whole flow. ─────────────── */
.send-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 64px;
  align-items: center;
}
.sf-frame {
  position: relative;
  height: 320px;
  border: 1px solid var(--tui-tile-edge);
  border-radius: 10px;
  background: var(--tui-bg);
  overflow: hidden;
}
.sf-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--tui-divider);
  background: var(--tui-bg-deep);
}
.sf-titlebar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tui-divider);
}
.sf-titlebar em {
  margin-left: 8px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tui-muted);
}
.sf-stage {
  position: absolute;
  inset: 37px 0 0 0;
  padding: 20px 24px;
  opacity: 0;
}
.sf-still { opacity: 1; }
.sf-frame-still { height: 250px; }
/* The home page's § 03 keeps the 12s three-beat loop. */
.sf-note   { animation: sf-s1 12s linear infinite; }
.sf-ceremony { animation: sf-s2 12s linear infinite; display: grid; place-items: center; }
.sf-custody  { animation: sf-s3 12s linear infinite; }
@keyframes sf-s1 { 0%, 2%  { opacity: 0; } 5%, 28%  { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes sf-s2 { 0%, 31% { opacity: 0; } 34%, 60% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes sf-s3 { 0%, 63% { opacity: 0; } 66%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
.sf-doc-h {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tui-text);
  margin: 0 0 10px;
}
.sf-doc-p {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--tui-muted);
  margin: 0 0 8px;
}
.sf-dialog {
  width: 82%;
  border: 1px solid var(--tui-tile-edge);
  border-radius: 8px;
  background: var(--tui-tile-bg);
  padding: 16px 18px;
}
.sf-dialog h4 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--tui-text);
}
.sf-dialog p {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tui-muted);
}
.sf-dialog code { font-family: var(--mono); color: var(--tui-text); }
.sf-dialog label {
  display: block;
  margin-bottom: 8px;
}
.sf-dialog label span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tui-faint);
  margin-bottom: 3px;
}
.sf-dialog label i {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tui-text);
  border: 1px solid var(--tui-divider);
  border-radius: 5px;
  padding: 5px 8px;
}
.sf-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.sf-dialog-actions b,
.sf-custody-actions b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  border: 1px solid var(--tui-divider);
  border-radius: 5px;
  padding: 4px 12px;
  color: var(--tui-muted);
}
.sf-dialog-actions .sf-primary,
.sf-custody-actions .sf-primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #1C1C1C;
}
.sf-custody-name {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--tui-text);
  margin: 6px 0 10px;
}
.sf-custody-meta { margin: 0 0 12px; }
.sf-custody-fp {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--stone);
}
.sf-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  border: 1px solid var(--tui-divider);
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--tui-muted);
  margin-right: 6px;
}
.sf-when {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tui-faint);
}
.sf-custody-ok {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--forest);
  margin: 0 0 14px;
}
html[data-theme='dark'] .sf-custody-ok { color: #8FB39E; }
.sf-custody-actions { display: flex; gap: 8px; }
@media (max-width: 980px) {
  .send-split { grid-template-columns: 1fr; }
  .send-flow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-stage { animation: none !important; }
  .sf-custody { opacity: 1; }
}

/* § 01 walkthrough — the charter-flow pattern from the bearo site:
   three step buttons over one constant frame; the active step decides
   what the frame shows. Step 0 keeps the note visible under the
   ceremony dialog's scrim; step 1 swaps in the outgoing message;
   step 2 the returned envelope. Default (no-JS) shows step 2. */
.send-walk {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 680px);
  gap: 64px;
  align-items: center;
}
.send-walk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.send-walk-steps button {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 4px 0 4px 18px;
  border: 0;
  border-left: 2px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.send-walk-steps button.is-active {
  opacity: 1;
  border-left-color: var(--amber);
}
.send-walk-steps button:focus { outline: none; }
.send-walk-steps button:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 2px;
}
.send-walk-steps b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  line-height: 1.9;
  color: var(--stone);
}
.send-walk-steps button.is-active b { color: var(--amber); }
.send-walk-steps strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.send-walk-steps small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--stone-strong);
}
.send-walk-stage { width: 100%; }
.send-walk-stage .sf-frame { height: 360px; }
.sw-t-mail { display: none; }
.send-walk.is-step-1 .sw-t-file { display: none; }
.send-walk.is-step-1 .sw-t-mail { display: inline; }
.sw-body {
  position: absolute;
  inset: 37px 0 0 0;
  display: grid;
}
.sw-scene {
  grid-area: 1 / 1;
  padding: 20px 24px;
  opacity: 0;
  transition: opacity 400ms ease;
}
.sw-custody { opacity: 1; }
.send-walk.is-step-0 .sw-note { opacity: 1; }
.send-walk.is-step-0 .sw-custody,
.send-walk.is-step-1 .sw-custody { opacity: 0; }
.send-walk.is-step-1 .sw-mail { opacity: 1; }
.sw-scrim {
  position: absolute;
  inset: 37px 0 0 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.sw-overlay {
  position: absolute;
  inset: 37px 0 0 0;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.send-walk.is-step-0 .sw-scrim,
.send-walk.is-step-0 .sw-overlay { opacity: 1; }
.sw-mail-row { margin: 0 0 8px; }
.sw-mail-row span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tui-faint);
  margin-bottom: 3px;
}
.sw-mail-row i {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tui-text);
  border: 1px solid var(--tui-divider);
  border-radius: 5px;
  padding: 5px 8px;
}
.sw-attach {
  display: inline-block;
  margin: 4px 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
  border: 1px solid var(--tui-divider);
  border-radius: 5px;
  padding: 4px 10px;
}
@media (max-width: 980px) {
  .send-walk { grid-template-columns: 1fr; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-scene,
  .sw-scrim,
  .sw-overlay { transition: none; }
}

/* /send — a real surface held still: the guest's signing card
   outside the hero loop, framed like the app mocks. */
.mock-card {
  align-self: center;
  width: 100%;
  max-width: 560px;
}
.mock-card .report {
  margin-top: 0;
  max-width: none;
  background: var(--tui-bg);
  border-color: var(--tui-tile-edge);
  padding: 26px 30px;
}
.mock-card .cta { pointer-events: none; }
.mock-card .hero-actions { margin-top: 16px; }
.section > .wrap > .hero-actions { margin-top: 40px; }
/* /send — the app-behind-sending strip: bearo's version chip plus
   one straight line about the vault, above the closing CTAs. */
.bearo-strip {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.bearo-strip p {
  margin: 12px 0 0;
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--stone-strong);
}
.section > .wrap > .bearo-strip + .hero-actions { margin-top: 28px; }
@media (max-width: 980px) {
  .mock-card { max-width: none; }
}

/* Working surfaces — /verify and /sign ───────────── */
button.cta {
  font: inherit;
  font-family: var(--mono);
  cursor: pointer;
}
button.cta:disabled {
  opacity: 0.5;
  cursor: default;
}

.dropzone {
  display: block;
  margin-top: 32px;
  max-width: 640px;
  border: 1.5px dashed var(--stone);
  border-radius: 8px;
  padding: 44px 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--stone-strong);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.dropzone.dragging,
.dropzone:hover {
  border-color: var(--forest);
  color: var(--charcoal);
}
.dropzone input { display: none; }

.report {
  margin-top: 32px;
  max-width: 640px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 24px;
  background: var(--ivory);
}
.report h3 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
}
.report .mono {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--stone);
  word-break: break-all;
  margin: 0 0 12px;
}
.sig-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.sig-list li {
  border-top: 1px solid var(--line);
  padding: 12px 0;
  font-size: 14px;
}
.sig-list .who { font-weight: 600; }
.sig-list .meta {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--stone);
  margin-top: 2px;
}
.verdict {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ok  { color: var(--forest); }
.bad { color: var(--rust); }
.notice {
  color: var(--stone-strong);
  font-size: 14px;
  margin: 12px 0 0;
}
.error {
  color: var(--rust);
  font-size: 14px;
  margin: 16px 0 0;
}
.browser-guard {
  margin-top: 24px;
  max-width: 640px;
  border: 1px solid var(--rust);
  border-radius: 8px;
  padding: 16px 20px;
  background: var(--ivory);
  font-size: 14px;
  color: var(--stone-strong);
}
.browser-guard strong { color: var(--charcoal); }
.browser-guard .guard-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--stone-strong);
  background: transparent;
}
.doc-preview {
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  max-height: 320px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--stone-strong);
}
.doc-rendered {
  font-family: var(--body);
  font-size: 15px;
  white-space: normal;
  color: var(--charcoal);
}
/* The document, on the page. The stage's own frame — hairline
   above, hairline below, the facts column beside — is its boundary;
   no box inside it. Reading width of an A4 page, left on the page's
   content column, type at document size; height follows the text.
   PDFs keep page proportions because the viewer needs a height. */
.doc-sheet {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 210mm;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 16px;
  line-height: 1.6;
}
.doc-sheet.doc-pdf {
  aspect-ratio: 210 / 297;
  border: 1px solid var(--line);
  background: var(--ivory);
}
.doc-sheet h3 { font-size: 26px; margin: 0 0 12px; }
.doc-sheet h4 { font-size: 21px; margin: 24px 0 10px; }
.doc-sheet h5 { font-size: 17px; margin: 20px 0 8px; }
.doc-sheet h6 { font-size: 16px; margin: 18px 0 6px; }
.doc-sheet p { margin: 0 0 14px; }
.doc-sheet ul,
.doc-sheet ol { margin: 0 0 14px; padding-left: 24px; }
.doc-sheet li { margin: 5px 0; }
.doc-sheet hr { margin: 22px 0; }
.doc-sheet code { font-size: 0.9em; }
/* Underlined text-button — the browser guard's copy / share links. */
.doc-toggle {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--stone);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.doc-toggle:hover { color: var(--charcoal); }
/* The signing stage — document center, facts beside, action pinned.
   Wide: the sheet takes the page; the side column sticks to the
   viewport, the facts scroll inside it, the sign action sits at its
   foot — always visible. Narrow: facts as a card above the sheet;
   the action as a fixed bottom bar, reachable the whole way down. */
/* The signing pages' hero closes with the site's hairline; the stage
   starts on the section rhythm below it. */
.hero.hero-stage {
  border-bottom: 1px solid var(--line);
}
.sign-stage-wrap {
  padding: 40px 0 48px;
}
.sign-facts .fact-row {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.sign-facts .fact-row .meta {
  display: block;
  margin-top: 2px;
}
.sign-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 24px 40px;
}
.sign-doc {
  min-width: 0;
}
.sign-side {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
}
.sign-facts {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 0;
  max-width: none;
  /* Only ever scrolls on a short viewport — and then quietly. */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.sign-facts::-webkit-scrollbar { width: 6px; }
.sign-facts::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.sign-facts::-webkit-scrollbar-track { background: transparent; }
/* Tighter rhythm than the standalone report card — this panel shares
   the viewport with the sign action and must fit beside a page. */
.sign-facts { padding: 16px 20px; }
.sign-facts h3 { margin-bottom: 4px; }
.sign-facts .sig-list { margin-top: 10px; }
.sign-facts .sig-list li { padding: 8px 0; }
.sign-facts .notice { margin-top: 8px; }
.sign-facts .mono { margin-bottom: 8px; }
.sign-facts .fact-row { margin-top: 8px; padding-top: 8px; }
.sign-facts .doc-details { margin-top: 8px; }
.sign-actions {
  flex: 0 0 auto;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 24px 20px;
  background: var(--ivory);
}
.sign-actions:empty { display: none; }
.sign-actions .field { margin-top: 0; max-width: none; }
.sign-actions .hero-actions { margin-top: 14px; }
.sign-actions .cta { width: 100%; justify-content: center; }
.sign-doc .doc-sheet { margin-top: 0; }
.sign-doc .field { max-width: 210mm; margin: 12px auto 0; }
/* Tables wider than the sheet scroll inside it, never the page. */
.doc-sheet { overflow-x: auto; }
.doc-sheet table {
  width: 100%;
  margin: 4px 0 18px;
  font-size: 15px;
}
.doc-sheet th,
.doc-sheet td {
  padding: 9px 12px;
  min-width: 4ch;
  height: 2.2em;
}
.doc-sheet th { font-weight: 600; }
@media (max-width: 900px) {
  .sign-stage-wrap {
    /* Room for the fixed action bar below the document's end. */
    padding-bottom: 220px;
  }
  .sign-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .sign-side {
    position: static;
    display: contents;
  }
  .sign-facts {
    order: -1;
    overflow: visible;
    padding: 16px 18px;
  }
  .sign-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    margin: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
  }
  .sign-actions form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
  }
  .sign-actions .field { flex: 1 1 180px; }
  .sign-actions .hero-actions { margin-top: 0; flex: 0 0 auto; }
  .sign-actions .cta { width: auto; }
  .sign-actions .notice { flex-basis: 100%; margin: 4px 0 0; }
}
.doc-details {
  margin-top: 14px;
}
.doc-details summary {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--stone);
  cursor: pointer;
  user-select: none;
}
.doc-details .mono {
  margin: 6px 0 0;
  font-size: 11.5px;
  word-break: break-all;
}
.doc-rendered h3,
.doc-rendered h4,
.doc-rendered h5,
.doc-rendered h6 {
  font-family: var(--display);
  font-weight: 500;
  margin: 18px 0 8px;
}
.doc-rendered p { margin: 0 0 12px; }
.doc-rendered ul,
.doc-rendered ol { margin: 0 0 12px; padding-left: 22px; }
.doc-rendered li { margin: 4px 0; }
.doc-rendered hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.doc-rendered table {
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 0.92em;
}
.doc-rendered th,
.doc-rendered td {
  border: 1px solid var(--line);
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
}
.doc-rendered th { font-weight: 600; }
.doc-rendered code {
  font-family: var(--mono);
  font-size: 0.85em;
}

.field {
  display: block;
  margin: 20px 0 0;
  max-width: 380px;
}
.field span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 8px;
}
.field input {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ivory);
  color: var(--charcoal);
}
.field input:focus {
  outline: none;
  border-color: var(--forest);
}
.report .hero-actions { margin-top: 20px; }

/* Numbered flow — same rhythm as the section grammar. */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  max-width: 680px;
}
.steps li {
  counter-increment: step;
  border-top: 1px solid var(--line);
  padding: 16px 0;
  color: var(--stone-strong);
  font-size: 15px;
  line-height: 1.6;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--forest);
  margin-bottom: 4px;
}
.fact-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  max-width: 680px;
}
.fact-list li {
  border-top: 1px solid var(--line);
  padding: 16px 0;
  color: var(--stone-strong);
  font-size: 15px;
  line-height: 1.6;
}
.fact-list li > code:first-child {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--charcoal);
  margin-bottom: 4px;
}
/* Spec-sheet register — full-wrap rows, property left, proof
   right. Shares the grid-3 column lines so the proof column sits
   on the same vertical as the 02 step above. */
.fact-list.fact-rows {
  max-width: none;
}
.fact-list.fact-rows li {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 48px;
  align-items: baseline;
}
.fact-list.fact-rows li > span {
  grid-column: 2 / -1;
}
.fact-list.fact-rows li > code:first-child {
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .fact-list.fact-rows li { grid-template-columns: 1fr; }
  .fact-list.fact-rows li > span { grid-column: auto; }
}