/* ============================================================================
   Contracts (contracts.html). Page-local styles. Shared tokens: forge.css.
   Grammar: chaptered editorial on paper for the whole page (a document world).
   The folio in the margin carries the chapter number and title.
   Anchors: title page split, chapters lead with a hanging numeral, the
   split chapter is a working spread, the demo trails, the PDF fans, the
   colophon centres.
   ========================================================================== */

.ct { position: relative; color: var(--ink); --sheet: #ffffff; --tint: #eeebf6; --sig-ink: #26225f; }
:root[data-theme="light"] .ct { --tint: #f5f3fa; }

/* the nav sits on paper at the top of this page: give it paper ink until it turns solid */
body[data-page="contracts"] .nav:not(.is-solid):not(.is-open) :is(.nav__brand, .nav__link, .nav__login, .nav__icon) { color: var(--paper-ink-2); }
body[data-page="contracts"] .nav:not(.is-solid):not(.is-open) .nav__brand { color: var(--paper-ink); }
body[data-page="contracts"] .nav:not(.is-solid):not(.is-open) .nav__brand .mark { color: #5b45f0; }
body[data-page="contracts"] .nav:not(.is-solid):not(.is-open) :is(.nav__link[aria-current="page"], .nav__link:hover, .nav__login:hover, .nav__icon:hover) { color: var(--paper-ink); background: rgb(22 19 31 / 0.06); }
body[data-page="contracts"] .nav:not(.is-solid):not(.is-open) .nav__burger span { background: var(--paper-ink); }

/* -------------------------------------------------------------- folio -- */
.folio { position: fixed; z-index: 20; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 100px); height: 44px; padding: 0 16px 0 6px;
  border-radius: var(--r-pill); background: rgb(255 255 255 / 0.86); border: 1px solid var(--paper-line); box-shadow: var(--e2);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  color: var(--paper-ink); text-decoration: none; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.folio.is-on { opacity: 1; transform: none; pointer-events: auto; }
.folio__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper-ink); color: var(--paper); font-family: var(--f-display); font-weight: 600; font-size: 1rem; }
.folio__t { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folio__t.is-swap, .folio__n.is-swap { animation: folio-swap var(--d-3) var(--ease-out); }
@keyframes folio-swap { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 1400px) {
  /* in the margin: vertical, like a running head on a printed page */
  .folio { left: 22px; top: 50%; bottom: auto; height: auto; max-width: none; padding: 14px 0; flex-direction: column; gap: 14px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: translateY(-50%); }
  .folio.is-on { transform: translateY(-50%); }
  .folio__n { width: auto; height: auto; background: none; color: var(--paper-ink); font-size: 2.25rem; line-height: 1; }
  .folio__t { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper-ink-2); }
  .folio::after { content: ""; order: 1; width: 1px; height: 64px; background: var(--paper-line); }
  .folio__t { order: 2; }
}

/* --------------------------------------------------------- title page -- */
.tp { padding: calc(var(--nav-h) + clamp(40px, 8vh, 96px)) 0 var(--section); border-bottom: 1px solid var(--line); }
.tp__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.tp__copy .label { color: var(--paper-ink-2); }
.tp__copy .d-hero { margin-top: var(--s-5); max-width: 12ch; }
.tp__copy .lede { margin-top: var(--s-5); color: var(--paper-ink-2); }
.tp__copy .btn-row { margin-top: var(--s-6); }
.ct .btn--ghost { color: var(--paper-ink); border-color: rgb(22 19 31 / 0.22); }
@media (hover: hover) and (pointer: fine) { .ct .btn--ghost:hover { border-color: var(--paper-ink-2); background: rgb(22 19 31 / 0.04); } }

.plate { margin: 0; }
.plate__img { border-radius: var(--r-lg); overflow: hidden; background: #050314; aspect-ratio: 1168 / 880;
  box-shadow: 0 2px 4px rgb(30 20 80 / 0.10), 0 30px 60px -20px rgb(30 20 80 / 0.40), 0 70px 120px -50px rgb(30 20 80 / 0.35); }
.plate__img { position: relative; }
.plate__img img { width: 100%; height: 100%; object-fit: cover; }
.plate__img .vid { position: absolute; inset: 0; background: transparent; }
.plate__img .vid > img, .plate__img .vid > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the signing clip under the four steps: a hand signs a tablet, a seal stamps it */
.sign__plate { margin-top: var(--s-7); max-width: 440px; }
.sign__plate .plate__img { aspect-ratio: 16 / 10; transform: rotate(-1.2deg); }
.plate figcaption { margin-top: 14px; max-width: 40ch; font-size: var(--t-sm); color: var(--paper-ink-2); }
.tp__plate .plate__img { transform: rotate(2deg); }

.toc { margin-top: clamp(56px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s-5); }
.toc__h { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper-ink-2); padding-top: 18px; }
.toc ol { border-top: 1px solid var(--paper-ink); }
.toc a { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--paper-ink); }
.toc__n { font-family: var(--f-display); font-weight: 600; font-size: var(--t-xl); line-height: 1; }
.toc__t { font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.03em; }
.toc__d { font-size: var(--t-sm); color: var(--paper-ink-2); text-align: right; }
.toc a .toc__t { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--d-3) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .toc a:hover .toc__t { background-size: 100% 1px; } }

/* ----------------------------------------------------------- chapters -- */
.ch { padding-block: var(--section); border-bottom: 1px solid var(--line); scroll-margin-top: var(--nav-h); }
.ch--alt { background: var(--tint); }
.ch__head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: var(--s-5); align-items: start; margin-bottom: clamp(36px, 5vw, 72px); }
.ch__n { font-family: var(--f-display); font-weight: 500; font-size: clamp(5rem, 3rem + 8vw, 11rem); line-height: 0.78; letter-spacing: -0.035em; color: var(--paper-ink); }
.ch__head .lede { margin-top: var(--s-5); max-width: 52ch; color: var(--paper-ink-2); }
.ch__head > div { padding-top: 0.3em; }
.ch .wrap > :not(.ch__head) { margin-left: calc((100% - var(--s-5)) * 2 / 12 + var(--s-5)); }

/* 1. agreements ledger */
.agr { border-top: 1px solid var(--paper-ink); }
.agr__row { border-bottom: 1px solid var(--line); }
.agr__row summary { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto 24px; align-items: center; gap: var(--s-5); padding: 22px 0; cursor: pointer; list-style: none; }
.agr__row summary::-webkit-details-marker { display: none; }
.agr__name b { display: block; font-family: var(--f-display); font-weight: 600; font-size: var(--t-xl); letter-spacing: -0.03em; line-height: 1.15; color: var(--paper-ink); }
.agr__name small { display: block; margin-top: 4px; font-size: var(--t-sm); color: var(--paper-ink-2); }
.agr__sum { color: var(--paper-ink-2); font-size: var(--t-base); }
.agr__state { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: rgb(18 135 90 / 0.10); color: #0d6b47; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.agr__state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #12875a; }
.agr__row summary .i { color: var(--paper-ink-2); transition: transform var(--d-2) var(--ease-out); }
.agr__row[open] summary .i { transform: rotate(45deg); color: #5b45f0; }
@media (hover: hover) and (pointer: fine) { .agr__row summary:hover .agr__name b { color: #5b45f0; } }
.agr__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto 24px; gap: var(--s-5); padding: 0 0 26px; animation: faq-in var(--d-3) var(--ease-out); }
.agr__body p { grid-column: 2 / 4; font-size: var(--t-sm); color: var(--paper-ink-2); }
.clauses { counter-reset: cl; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--paper-ink); }
.clauses li { counter-increment: cl; display: flex; gap: 10px; }
.clauses li::before { content: counter(cl) "."; min-width: 1.4em; font-variant-numeric: tabular-nums; color: var(--paper-ink-2); }
.aside-note { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--s-6); max-width: 60ch; font-size: var(--t-sm); color: var(--paper-ink-2); }
.aside-note .i { width: 18px; height: 18px; margin-top: 2px; color: #5b45f0; }

/* 2. split contract: the flow, then the working spread */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--paper-ink); margin-bottom: clamp(48px, 7vw, 96px); counter-reset: fl; }
.flow li { counter-increment: fl; position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 6px; padding: 20px 20px 0 0; }
.flow li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.flow__k { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper-ink-2); }
.flow__k::before { content: counter(fl) "  "; white-space: pre; color: var(--paper-ink); font-weight: 600; }
.flow b { font-weight: 600; font-size: var(--t-base); color: var(--paper-ink); }
.flow__art { display: flex; align-items: center; min-height: 92px; margin-top: 10px; }
.flow__art--chat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
.fb { padding: 6px 11px; border-radius: 14px; border-top-left-radius: 4px; background: var(--sheet); border: 1px solid var(--line); font-size: 0.8125rem; box-shadow: var(--e1); }
.fb--b { margin-left: 18px; background: rgb(91 69 240 / 0.08); }
.fcard { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: var(--r-md); background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--e2); }
.fcard .i { width: 34px; height: 34px; padding: 8px; border-radius: var(--r-sm); background: rgb(91 69 240 / 0.10); color: #5b45f0; }
.fcard b { display: block; font-size: var(--t-sm); }
.fcard small { display: block; font-size: 0.75rem; color: var(--paper-ink-2); }
.fnums { font-family: var(--f-display); font-weight: 600; font-size: var(--t-xl); letter-spacing: -0.03em; color: var(--paper-ink); }
.fsig { display: flex; gap: 8px; }
.fsig i { display: block; width: 52px; height: 30px; border-bottom: 1.5px solid var(--paper-ink); background: no-repeat center 70% / 80% auto url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M2 15c6-10 9-12 10-6s-2 8 2 3 6-9 8-3 3 5 7 0 5-6 8-1 8 3 21-4' fill='none' stroke='%2326225f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.split__calc .body { margin: var(--s-4) 0 var(--s-6); color: var(--paper-ink-2); }
.split__calc .d-3 { max-width: 18ch; }
.split__doc { position: sticky; top: calc(var(--nav-h) + 32px); }

/* the live contract (same markup as Home) */
.doc { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-md); background: var(--sheet); color: var(--paper-ink); border: 1px solid var(--paper-line); box-shadow: 0 2px 4px rgb(40 30 90 / 0.05), 0 30px 60px -24px rgb(40 30 90 / 0.25); }
.doc__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s-4); border-bottom: 1px solid var(--paper-line); }
.doc__title { margin-top: var(--s-5); font-family: var(--f-display); font-weight: 600; font-size: var(--t-xl); letter-spacing: -0.03em; line-height: 1.15; }
.doc__p { margin-top: var(--s-4); color: var(--paper-ink-2); font-size: var(--t-sm); }
.doc__table { width: 100%; margin-top: var(--s-5); border-collapse: collapse; }
.doc__table th, .doc__table td { padding: 12px 0; border-top: 1px solid var(--paper-line); text-align: left; font-weight: 500; font-size: var(--t-sm); }
.doc__table th { display: grid; grid-template-columns: 18px 1fr; align-items: center; }
.doc__table th i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.doc__table th small { grid-column: 2; display: block; color: #6b6680; font-weight: 400; font-size: 0.75rem; }
.doc__table td { text-align: right; font-family: var(--f-display); font-weight: 600; font-size: var(--t-xl); letter-spacing: -0.03em; white-space: nowrap; }
.ct [data-doc] { display: inline-block; padding: 0 4px; border-radius: 6px; transition: background-color 700ms var(--ease-out); }
.ct [data-doc].is-flash { background: rgb(91 69 240 / 0.18); transition-duration: 0ms; }
.doc__fine { margin-top: var(--s-5); font-size: 0.75rem; color: #6b6680; }
.doc__sigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.sig { padding-top: 6px; border-top: 1px solid var(--paper-ink); }
.sig i, .pg__sig i { display: block; height: 34px; font-family: var(--f-display); font-style: normal; font-weight: 500; font-size: 1.5rem; line-height: 34px; color: var(--sig-ink); transform: skewX(-12deg); transform-origin: 0 100%; opacity: 0.18; }
.sig.is-signed i { opacity: 1; }
.sig small { display: block; margin-top: 4px; font-size: 0.6875rem; color: #6b6680; }

/* 3. sign it yourself */
.sign { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sign__title { margin-bottom: var(--s-5); }
.sign__steps { counter-reset: st; border-top: 1px solid var(--paper-ink); }
.sign__steps li { counter-increment: st; display: grid; grid-template-columns: 2.2rem 1fr; gap: 2px 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.sign__steps li::before { content: counter(st); grid-row: span 2; font-family: var(--f-display); font-weight: 600; font-size: var(--t-xl); line-height: 1.1; color: var(--paper-ink); }
.sign__steps b { font-weight: 600; color: var(--paper-ink); }
.sign__steps span { font-size: var(--t-sm); color: var(--paper-ink-2); }

.demo { display: grid; gap: var(--s-4); }
.demo__paper { position: relative; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-md); background: var(--sheet); border: 1px solid var(--paper-line); box-shadow: 0 2px 4px rgb(40 30 90 / 0.05), 0 40px 80px -30px rgb(40 30 90 / 0.30); }
.demo__flag { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--paper-line); font-size: var(--t-sm); font-weight: 600; color: var(--paper-ink); }
.demo__flag > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.demo__flag .i { width: 17px; height: 17px; color: #5b45f0; }

.clause { position: relative; padding: 18px 18px 16px; border-radius: var(--r-sm); background: #faf9fd; border: 1px dashed rgb(91 69 240 / 0.35); transition: background-color var(--d-3) var(--ease-out), border-color var(--d-3) var(--ease-out); }
.clause__h { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper-ink-2); }
.clause__t { margin-top: 8px; font-size: var(--t-lg); line-height: 1.6; color: var(--paper-ink); text-wrap: pretty; }
.clause__t b { font-weight: 650; font-variant-numeric: tabular-nums; }
.clause__in { width: 15ch; max-width: 100%; padding: 0 3px; border: 0; border-bottom: 1.5px dotted #5b45f0; border-radius: 3px 3px 0 0; background: rgb(91 69 240 / 0.07); font: inherit; font-weight: 600; color: #4a35dd; }
.clause__in:focus { outline: 2px solid #5b45f0; outline-offset: 2px; }
.clause__lock { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); background: var(--paper-ink); color: #fff; font-size: 0.75rem; font-weight: 600; opacity: 0; transform: translateY(-4px) scale(0.96); transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.clause__lock .i { width: 14px; height: 14px; }
.fp { display: grid; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--paper-line); }
.fp__k { font-size: 0.75rem; color: var(--paper-ink-2); }
.fp__v, .audit code, .onechar code, .pg__hash { font-family: var(--f-mono); font-size: 0.75rem; line-height: 1.5; letter-spacing: 0; color: var(--paper-ink); overflow-wrap: anywhere; word-break: break-all; }
.fp__v.is-tick { animation: tick 360ms var(--ease-out); }
@keyframes tick { from { color: #5b45f0; } }
/* locked: the text visibly freezes */
.demo.is-locked .clause { background: #f1eff7; border-style: solid; border-color: var(--paper-ink); }
.demo.is-locked .clause__in { background: none; border-bottom-color: transparent; color: var(--paper-ink); }
.demo.is-locked .clause__lock { opacity: 1; transform: none; }
.demo.is-locked .clause__t { color: #2e2a40; }

.sigform { display: grid; gap: 18px; margin-top: 22px; }
.field { display: grid; gap: 8px; }
.field > span:first-child, .field__row { font-size: 0.8125rem; font-weight: 600; color: var(--paper-ink-2); }
.field__row { display: flex; justify-content: space-between; align-items: center; }
.field input[type="text"] { height: 48px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid rgb(22 19 31 / 0.2); background: #fff; font-size: var(--t-base); color: var(--paper-ink); }
.field input[type="text"]:focus { outline: 2px solid #5b45f0; outline-offset: 1px; border-color: transparent; }
.field input::placeholder { color: #8a85a0; }
.tabs { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: #f1eff7; border: 1px solid var(--paper-line); }
.tabs button { height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; font-size: 0.8125rem; font-weight: 600; color: var(--paper-ink-2); }
.tabs button[aria-selected="true"] { background: #fff; color: var(--paper-ink); box-shadow: var(--e1); }
.pad { position: relative; height: 150px; border-radius: var(--r-sm); border: 1px solid rgb(22 19 31 / 0.2); background: #fff; touch-action: none; overflow: hidden; }
.pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.pad__line { position: absolute; left: 20px; right: 20px; bottom: 34px; height: 1px; background: rgb(22 19 31 / 0.18); pointer-events: none; }
.pad__hint { position: absolute; left: 22px; bottom: 40px; font-size: 0.8125rem; color: #8a85a0; pointer-events: none; transition: opacity var(--d-2) var(--ease-out); }
.pad.has-ink .pad__hint { opacity: 0; }
.pad__clear { position: absolute; right: 8px; top: 8px; height: 30px; padding: 0 10px; border-radius: var(--r-xs); border: 1px solid var(--paper-line); background: #fff; font-size: 0.75rem; font-weight: 600; color: var(--paper-ink-2); }
.typed input { width: 100%; height: 72px !important; font-family: var(--f-display); font-weight: 500; font-size: 2rem !important; color: var(--sig-ink) !important; }
.consent { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--t-sm); font-weight: 500; color: var(--paper-ink); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 0; accent-color: #5b45f0; }
.sigform__err { min-height: 0; font-size: var(--t-sm); color: #b3361d; }
.sigform__err:empty { display: none; }
.sigform__go { justify-self: start; }
.sigform__go .i { width: 18px; height: 18px; }

.signed { margin-top: 22px; display: grid; gap: 12px; animation: faq-in var(--d-4) var(--ease-out); }
.signed__ok { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #0d6b47; }
.signed__ok .i { width: 18px; height: 18px; }
.signed__sig { padding: 8px 0 6px; border-bottom: 1px solid var(--paper-ink); max-width: 340px; }
.signed__sig img { height: 64px; width: auto; }
.signed__sig span { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--paper-ink-2); }

.audit { padding: 22px 24px; border-radius: var(--r-md); background: var(--paper-ink); color: #efecf7; box-shadow: var(--e3); animation: audit-in var(--d-4) var(--ease-out); }
@keyframes audit-in { from { opacity: 0; transform: translateY(14px); } }
.audit__h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgb(239 236 247 / 0.14); font-weight: 600; font-size: var(--t-sm); }
.audit .tag-example { color: #aba6c2; }
.audit__rows div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid rgb(239 236 247 / 0.09); font-size: var(--t-sm); }
.audit__rows dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: var(--track-label); text-transform: uppercase; color: #aba6c2; padding-top: 2px; }
.audit__rows dd { margin: 0; color: #efecf7; }
.audit__rows dd small { color: #aba6c2; }
.audit code { color: #c9c2ff; }
.audit .btn { margin-top: 16px; color: #efecf7; border-color: rgb(239 236 247 / 0.22); }

/* 4. audit trail */
.trail { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ledger { margin: 0; border-top: 1px solid var(--paper-ink); }
.ledger div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ledger dt { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; color: var(--paper-ink); }
.ledger dd { margin: 0; color: var(--paper-ink-2); }
.onechar { margin: 0; padding: 24px; border-radius: var(--r-md); background: var(--sheet); border: 1px solid var(--paper-line); box-shadow: var(--e2); position: sticky; top: calc(var(--nav-h) + 32px); }
.onechar figcaption { font-size: var(--t-sm); color: var(--paper-ink-2); }
.onechar figcaption b { color: var(--paper-ink); }
.onechar__row { display: grid; gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--paper-line); }
.onechar__txt { font-weight: 600; font-size: var(--t-lg); color: var(--paper-ink); }
.onechar mark { background: rgb(217 71 42 / 0.16); color: #b3361d; border-radius: 3px; padding: 0 1px; }
.onechar__try { display: grid; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--paper-ink); }
.onechar__try label { font-size: 0.8125rem; font-weight: 600; color: var(--paper-ink-2); }
.onechar__try input { height: 44px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid rgb(22 19 31 / 0.2); background: #fff; font-size: var(--t-base); color: var(--paper-ink); }
.onechar__try input:focus { outline: 2px solid #5b45f0; outline-offset: 1px; }

/* 5. final PDF: three real pages, fanned */
.pdf { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pages { position: relative; aspect-ratio: 1.62 / 1; }
.pg { position: absolute; top: 4%; width: 41%; aspect-ratio: 1 / 1.414; padding: 6% 5% 9%; border-radius: 4px; background: #fff; color: var(--paper-ink); border: 1px solid var(--paper-line);
  box-shadow: 0 1px 2px rgb(40 30 90 / 0.08), 0 24px 50px -20px rgb(40 30 90 / 0.35); overflow: hidden; font-size: clamp(0.5rem, 0.35rem + 0.42vw, 0.75rem); line-height: 1.45;
  transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out); }
.pg--1 { left: 0; transform: rotate(-5deg); z-index: 1; }
.pg--2 { left: 29.5%; top: 0; transform: rotate(-0.5deg); z-index: 2; }
.pg--3 { left: 59%; transform: rotate(4.5deg); z-index: 3; }
.pg:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pg:hover { z-index: 6; transform: translateY(-14px) rotate(0deg); box-shadow: 0 2px 4px rgb(40 30 90 / 0.08), 0 40px 70px -24px rgb(40 30 90 / 0.45); }
}
.pg:focus { z-index: 6; }
.pg__k { font-weight: 700; font-size: 1.25em; }
.pg__t { margin-top: 0.6em; font-family: var(--f-display); font-weight: 600; font-size: 1.55em; line-height: 1.15; letter-spacing: -0.02em; }
.pg__l { height: 0.5em; margin-top: 0.9em; border-radius: 2px; background: #e7e4ef; }
.pg__l--s { width: 60%; }
.pg__tb { width: 100%; margin-top: 1em; border-collapse: collapse; }
.pg--1 .pg__tb { width: 66%; }
.pg__tb th, .pg__tb td { padding: 0.45em 0; border-top: 1px solid var(--paper-line); text-align: left; font-weight: 500; }
.pg__tb td { text-align: right; font-weight: 700; }
.pg__tb [data-doc] { padding: 0 2px; }
.pg__sig { margin-top: 1.4em; padding-bottom: 0.3em; border-bottom: 1px solid var(--paper-ink); }
.pg__sig i { height: auto; font-size: 2.1em; line-height: 1.3; opacity: 1; }
.pg__sig img { height: 3.2em; width: auto; }
.pg__sig small { display: block; font-size: 0.85em; color: #6b6680; }
.pg__sig.is-you { background: rgb(91 69 240 / 0.06); box-shadow: 0 0 0 4px rgb(91 69 240 / 0.06); border-radius: 2px; }
.pg__m { margin-top: 0.8em; color: #6b6680; }
.pg__hash { display: block; margin-top: 0.3em; font-size: 0.9em; }
.pg__entry { display: grid; gap: 0.15em; margin-top: 1em; padding-top: 0.8em; border-top: 1px solid var(--paper-line); color: #4d4862; }
.pg__entry b { color: var(--paper-ink); }
.pg__entry--s { opacity: 0.7; }
.pg__f { position: absolute; left: 5%; right: 5%; bottom: 4%; padding-top: 0.5em; border-top: 1px solid var(--paper-line); font-size: 0.85em; color: #6f6a85; }
.pdf__side { display: grid; gap: var(--s-6); }
.plate--sm .plate__img { transform: rotate(-1.5deg); max-width: 420px; }
.pdf__list { display: grid; border-top: 1px solid var(--paper-ink); }
.pdf__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); color: var(--paper-ink-2); }
.pdf__list .i { width: 19px; height: 19px; margin-top: 2px; color: #5b45f0; }
.pdf__list b { display: block; color: var(--paper-ink); font-weight: 600; font-size: var(--t-base); }
.pdf__you { display: flex; gap: 8px; align-items: center; color: #0d6b47; font-weight: 600; }
.pdf__you .i { width: 17px; height: 17px; }

/* --------------------------------------------------------------- close -- */
/* Round 3: the colophon became a film band (shared .film). The safe sits right of centre in the clip,
   so the media is pushed right and fades in from the left, leaving the copy column clean. */
#ch-5 { padding-bottom: calc(var(--section) * 0.7); border-bottom: 0; }
.ct-film { --ink: #efecf7; --ink-2: #c9c4dc; --ink-3: #aba6c2; --line: rgb(239 236 247 / 0.12); --line-2: rgb(239 236 247 / 0.22); min-height: clamp(28rem, 42vw, 44rem); }
.ct-film .film__media { left: 26%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%); }
.ct-film .film__copy > * { max-width: 34rem; }
.ct-film .film__copy .d-2 { max-width: 14ch; }
.ct-film .btn-row { margin-top: var(--s-6); }
.ct-film__fine { margin-top: var(--s-5); color: #aba6c2; }
.ct-film__fine a { color: #efecf7; }

/* --------------------------------------------------------- responsive -- */
@media (max-width: 1100px) {
  .ch .wrap > :not(.ch__head) { margin-left: 0; }
  .ch__head { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .ch__n { font-size: clamp(4.5rem, 3rem + 6vw, 7rem); }
  .split, .sign, .trail, .pdf { grid-template-columns: minmax(0, 1fr); }
  .split__doc, .onechar { position: static; }
  .pdf .pages { max-width: 720px; }
}
@media (max-width: 860px) {
  .tp__grid { grid-template-columns: 1fr; }
  .tp__plate { max-width: 520px; }
  .toc { grid-template-columns: 1fr; gap: 0; }
  .toc__h { padding: 0 0 12px; }
  .toc__d { display: none; }
  .agr__row summary { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 12px; }
  .agr__sum { grid-column: 1; font-size: var(--t-sm); }
  .agr__state { grid-column: 1; justify-self: start; }
  .agr__row summary .i { grid-column: 2; grid-row: 1; }
  .agr__body { grid-template-columns: 1fr; gap: var(--s-4); }
  .agr__body p { grid-column: 1; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li:nth-child(3) { padding-left: 0; border-left: 0; }
  .flow li { padding-bottom: 20px; }
  .flow li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .tp { padding-top: calc(var(--nav-h) + 28px); }
  .tp__copy .d-hero { font-size: clamp(2.6rem, 12.6vw, 3.4rem); }
  .flow { grid-template-columns: 1fr; }
  .flow li, .flow li + li { padding-left: 0; border-left: 0; }
  .flow li + li { border-top: 1px solid var(--line); }
  .flow__art { min-height: 0; margin-bottom: 4px; }
  .doc__sigs { grid-template-columns: 1fr 1fr; }
  .doc__sigs .sig:last-child { grid-column: span 2; }
  .clause__lock { position: static; margin-top: 10px; display: none; }
  .demo.is-locked .clause__lock { display: inline-flex; }
  .audit { padding: 18px; }
  .audit__rows div { grid-template-columns: 1fr; gap: 2px; }
  .ledger div { grid-template-columns: 1fr; gap: 4px; }
  .pages { aspect-ratio: 1.1 / 1; }
  .pg { width: 56%; }
  .pg--2 { left: 22%; } .pg--3 { left: 44%; }
  .ct-film .film__media { left: 0; -webkit-mask-image: none; mask-image: none; }
  .ct-film .film__media > img, .ct-film .film__media > video { object-position: 64% 30%; }
  .ct-film .btn-row .btn { width: 100%; }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .folio, .clause__lock, .pg { transition-duration: 1ms; }
  .audit, .signed, .agr__body, .folio__t.is-swap, .folio__n.is-swap, .fp__v.is-tick { animation: none; }
}