/* Animated feature demos.
 *
 * Inline SVG and CSS rather than GIF or video: a few KB, sharp at any density,
 * no player, and editable in a text editor. Loaded only by index.html.
 *
 * These are DIAGRAMS, not screenshots. They are deliberately abstracted so nobody
 * mistakes them for the real interface: real product screenshots stay in the
 * feature sections further down the page.
 *
 * Every animation is decorative. The end state is the meaningful one, so
 * prefers-reduced-motion drops straight to it (see the block at the bottom) and
 * each demo is aria-hidden with a text equivalent beside it.
 */

.demo {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; box-shadow: var(--shadow); overflow: hidden; position: relative;
}
.demo-bar { display: flex; gap: 6px; margin-bottom: 16px; }
.demo-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.demo-label { position: absolute; top: 18px; right: 20px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* ---------- 1. The AI writes it ---------- */
.demo-write .prompt {
  border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 14px;
  font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden;
}
/* The caret has to stop at the end of the STRING, and `width: 100%` resolves
   against the box rather than the text, which parks it in empty space. The end
   width is therefore measured: 48 characters of Inter at this size occupy 38.2ch.
   Re-measure if the sentence or the font changes. */
.demo-write .prompt span {
  display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  border-right: 2px solid var(--violet); max-width: 100%;
  width: 0; animation: dd-type 8s steps(48) infinite;
}
@keyframes dd-type {
  0% { width: 0 }
  22%, 92% { width: 38.2ch }
  100% { width: 38.2ch }
}
.demo-write .prompt span { animation-name: dd-type, dd-caret; animation-duration: 8s, .9s; animation-timing-function: steps(48), steps(2); animation-iteration-count: infinite, infinite; }
@keyframes dd-caret { 0%, 100% { border-right-color: var(--violet) } 50% { border-right-color: transparent } }
.demo-write .doc { margin-top: 14px; display: grid; gap: 9px; min-height: 96px; }
.demo-write .doc > * { opacity: 0; animation: dd-rise 8s ease-out infinite; }
@keyframes dd-rise {
  0%, 44% { opacity: 0; transform: translateY(6px) }
  52%, 92% { opacity: 1; transform: none }
  100% { opacity: 0; transform: none }
}
.demo-write .t { height: 13px; border-radius: 4px; background: var(--ink); width: 58%; }
.demo-write .l { height: 8px; border-radius: 4px; background: var(--bg-2); }
.demo-write .l.s { width: 82% } .demo-write .l.m { width: 93% }
.demo-write .row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
.demo-write .row b { color: var(--ink); }
.demo-write .sig { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--violet); }
.demo-write .sig::before { content: ""; width: 46px; height: 1px; background: var(--violet); }
.demo-write .doc > :nth-child(1) { animation-delay: 0s }
.demo-write .doc > :nth-child(2) { animation-delay: .12s }
.demo-write .doc > :nth-child(3) { animation-delay: .24s }
.demo-write .doc > :nth-child(4) { animation-delay: .36s }
.demo-write .doc > :nth-child(5) { animation-delay: .48s }

/* ---------- 2. Priced by code ---------- */
.demo-price table { width: 100%; border-collapse: collapse; font-size: 13px; }
.demo-price td { padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.demo-price td:last-child { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.demo-price tr { opacity: 0; animation: dd-fade 7s ease-out infinite; }
.demo-price tr:nth-child(1) { animation-delay: .2s }
.demo-price tr:nth-child(2) { animation-delay: .5s }
.demo-price tr:nth-child(3) { animation-delay: .8s }
.demo-price tr:nth-child(4) { animation-delay: 1.1s }
@keyframes dd-fade { 0%,2% { opacity: 0 } 10%,92% { opacity: 1 } 100% { opacity: 0 } }
.demo-price .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-family: var(--display); font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.demo-price .total small { font-family: var(--font); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.demo-price .total b { opacity: 0; animation: dd-land 7s cubic-bezier(.2,.9,.3,1) 1.5s infinite; }
@keyframes dd-land {
  0%,18% { opacity: 0; transform: translateY(5px) }
  24%,90% { opacity: 1; transform: none }
  100% { opacity: 0 }
}
.demo-price .stamp { margin-top: 10px; font-size: 11px; color: var(--green); opacity: 0; animation: dd-fade 7s ease-out 2s infinite; }

/* ---------- 3. Watch it being read ---------- */
.demo-read .page { position: relative; display: grid; gap: 10px; }
.demo-read .sec { display: grid; gap: 6px; padding: 9px 11px; border-radius: 9px; border: 1px solid transparent; }
.demo-read .sec .l { height: 7px; border-radius: 4px; background: var(--bg-2); }
.demo-read .sec .l:nth-child(2) { width: 76% }
.demo-read .sec .cap { font-size: 11px; color: var(--faint); display: flex; justify-content: space-between; }
.demo-read .sec .cap em { font-style: normal; opacity: 0; }
.demo-read .sec { animation: dd-readsec 9s ease-in-out infinite; }
.demo-read .sec .cap em { animation: dd-time 9s ease-in-out infinite; }
.demo-read .sec:nth-child(1), .demo-read .sec:nth-child(1) .cap em { animation-delay: .3s }
.demo-read .sec:nth-child(2), .demo-read .sec:nth-child(2) .cap em { animation-delay: 1.9s }
.demo-read .sec:nth-child(3), .demo-read .sec:nth-child(3) .cap em { animation-delay: 3.5s }
@keyframes dd-readsec {
  0%,3% { background: transparent; border-color: transparent }
  8%,20% { background: var(--violet-soft); border-color: color-mix(in srgb, var(--violet) 28%, transparent) }
  30%,100% { background: transparent; border-color: var(--line) }
}
@keyframes dd-time { 0%,7% { opacity: 0 } 14%,92% { opacity: 1; color: var(--violet) } 100% { opacity: 0 } }
.demo-read .fwd { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); opacity: 0; animation: dd-fade 9s ease-out 5.4s infinite; }
.demo-read .fwd i { width: 20px; height: 20px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; font-size: 10px; font-style: normal; font-weight: 700; }
.demo-read .nudge { margin-top: 10px; border: 1px dashed var(--line-2); border-radius: 9px; padding: 9px 11px; font-size: 12px; color: var(--text); opacity: 0; animation: dd-fade 9s ease-out 6.6s infinite; }
.demo-read .nudge b { color: var(--violet); }

/* Decorative only: honour the setting and show the end state. */
@media (prefers-reduced-motion: reduce) {
  .demo *, .demo *::before, .demo *::after { animation: none !important; transition: none !important; }
  /* auto, not 100%: shrink-to-fit guarantees the whole sentence is visible whatever
     the container is. 100% clipped it at the box width and cut the text off. */
  .demo-write .prompt span { width: auto !important; max-width: none !important; border-right-color: transparent; }
  .demo-write .doc > *, .demo-price tr, .demo-price .total b, .demo-price .stamp,
  .demo-read .sec .cap em, .demo-read .fwd, .demo-read .nudge { opacity: 1 !important; transform: none !important; }
  .demo-read .sec { border-color: var(--line) !important; }
}

/* ---------- 4. Signed, and provable ---------- */
.demo-sign .party {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.demo-sign .party b { color: var(--ink); font-weight: 600; }
/* `content` is not animatable, so the two states are two elements stacked in one
   grid cell and cross-faded. An earlier version animated only the colour, which
   left the label reading "Waiting" in green after the signature was drawn. */
.demo-sign .party .state { margin-left: auto; display: inline-grid; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.demo-sign .party .state em { grid-area: 1 / 1; font-style: normal; text-align: right; }
.demo-sign .party .state .w { color: var(--faint); animation: dd-state-out 12s steps(1) infinite; }
.demo-sign .party .state .s { color: var(--green); opacity: 0; animation: dd-state-in 12s steps(1) infinite; }
.demo-sign .party:nth-child(3) .state em { animation-delay: 0s }
.demo-sign .party:nth-child(4) .state em { animation-delay: 3.6s }
@keyframes dd-state-out { 0%, 21% { opacity: 1 } 22%, 100% { opacity: 0 } }
@keyframes dd-state-in  { 0%, 21% { opacity: 0 } 22%, 100% { opacity: 1 } }

/* The signature is drawn rather than faded in: stroke-dashoffset is the only
   honest way to show a pen moving. */
.demo-sign svg { display: block; height: 42px; overflow: visible; }
.demo-sign svg path {
  fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: dd-draw 12s cubic-bezier(.4,.05,.35,1) infinite;
}
.demo-sign .sig-2 svg path { stroke: var(--ink); animation-delay: 3.6s; }
@keyframes dd-draw {
  0%, 8% { stroke-dashoffset: 420 }
  22%, 92% { stroke-dashoffset: 0 }
  100% { stroke-dashoffset: 0 }
}
.demo-sign .sig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0 4px; }
.demo-sign .sig-row > div { border-bottom: 1px solid var(--line-2); padding-bottom: 4px; }
.demo-sign .sig-row span { display: block; margin-top: 7px; font-size: 11px; color: var(--faint); }
.demo-sign .cert {
  margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  display: grid; gap: 5px; opacity: 0; animation: dd-fade 12s ease-out 7.4s infinite;
}
.demo-sign .cert .top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--green); }
.demo-sign .cert code { font-size: 11px; color: var(--muted); word-break: break-all; }

/* ---------- 5. The client page fills itself ---------- */
.demo-hub .hub-head { display: flex; align-items: baseline; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.demo-hub .hub-head b { font-size: 15px; color: var(--ink); }
.demo-hub .hub-head span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.demo-hub .item {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
  opacity: 0; animation: dd-drop 14s cubic-bezier(.2,.9,.3,1) infinite;
}
.demo-hub .item i {
  width: 26px; height: 26px; border-radius: 7px; background: var(--bg-2); color: var(--muted);
  display: grid; place-items: center; font-size: 11px; font-style: normal; flex: 0 0 auto;
}
.demo-hub .item .when { margin-left: auto; font-size: 11px; color: var(--faint); white-space: nowrap; }
.demo-hub .item.signed i { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.demo-hub .item:nth-child(2) { animation-delay: .6s }
.demo-hub .item:nth-child(3) { animation-delay: 2.2s }
.demo-hub .item:nth-child(4) { animation-delay: 3.8s }
.demo-hub .item:nth-child(5) { animation-delay: 5.4s }
@keyframes dd-drop {
  0%, 3% { opacity: 0; transform: translateY(-7px) }
  9%, 93% { opacity: 1; transform: none }
  100% { opacity: 0; transform: none }
}
.demo-hub .alert {
  margin-top: 13px; border-radius: 10px; padding: 10px 12px; font-size: 12px;
  background: color-mix(in srgb, var(--brass) 12%, transparent); color: #7a5a25;
  opacity: 0; animation: dd-fade 14s ease-out 7.4s infinite;
}
.demo-hub .alert b { color: #5e4419; }
.demo-hub .nothing { margin-top: 13px; font-size: 12px; color: var(--faint); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .demo-sign svg path { stroke-dashoffset: 0 !important; }
  .demo-sign .cert, .demo-hub .item, .demo-hub .alert { opacity: 1 !important; transform: none !important; }
  .demo-sign .party .state .w { opacity: 0 !important; }
  .demo-sign .party .state .s { opacity: 1 !important; }
}

/* ---------- 6. The draft, with the pre-send review ---------- */
.demo-draft { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; padding: 0; }
.demo-draft .doc-col { padding: 20px; border-right: 1px solid var(--line); display: grid; gap: 9px; align-content: start; }
.demo-draft .doc-col .t { height: 12px; width: 62%; border-radius: 4px; background: var(--ink); }
.demo-draft .doc-col .l { height: 7px; border-radius: 4px; background: var(--bg-2); }
.demo-draft .doc-col .l.a { width: 94% } .demo-draft .doc-col .l.b { width: 80% }
.demo-draft .doc-col .row { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 7px; margin-top: 3px; }
.demo-draft .doc-col .row b { color: var(--ink); }
.demo-draft .doc-col > * { opacity: 0; animation: dd-rise2 11s ease-out infinite; }
.demo-draft .doc-col > :nth-child(1) { animation-delay: .2s }
.demo-draft .doc-col > :nth-child(2) { animation-delay: .35s }
.demo-draft .doc-col > :nth-child(3) { animation-delay: .5s }
.demo-draft .doc-col > :nth-child(4) { animation-delay: .65s }
.demo-draft .doc-col > :nth-child(5) { animation-delay: .8s }
@keyframes dd-rise2 { 0%,2% { opacity: 0; transform: translateY(5px) } 9%,93% { opacity: 1; transform: none } 100% { opacity: 0 } }
.demo-draft .side { padding: 18px 16px; display: grid; gap: 9px; align-content: start; background: var(--bg); }
.demo-draft .side .hd { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.demo-draft .side .item { display: flex; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--text); opacity: 0; animation: dd-rise2 11s ease-out infinite; }
.demo-draft .side .item i { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 700; }
.demo-draft .side .item.q i { background: var(--violet-soft); color: var(--violet); }
.demo-draft .side .item.r i { background: color-mix(in srgb, var(--brass) 22%, transparent); color: #7a5a25; }
.demo-draft .side .item:nth-of-type(1) { animation-delay: 2.0s }
.demo-draft .side .item:nth-of-type(2) { animation-delay: 2.5s }
.demo-draft .side .item:nth-of-type(3) { animation-delay: 3.0s }
.demo-draft .side .item:nth-of-type(4) { animation-delay: 3.5s }

/* ---------- 7. What the recipient opens ---------- */
.demo-recipient .rc-head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.demo-recipient .rc-head .sq { width: 24px; height: 24px; border-radius: 7px; background: var(--ink); }
.demo-recipient .rc-head b { font-size: 14px; color: var(--ink); }
.demo-recipient .rc-head span { margin-left: auto; font-size: 11px; color: var(--faint); }
.demo-recipient .parties { display: grid; gap: 7px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.demo-recipient .party { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); opacity: 0; animation: dd-fade 11s ease-out infinite; }
.demo-recipient .party:nth-child(1) { animation-delay: .4s } .demo-recipient .party:nth-child(2) { animation-delay: .8s }
.demo-recipient .party i { width: 20px; height: 20px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; font-size: 9px; font-style: normal; font-weight: 700; }
.demo-recipient .party em { margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.demo-recipient .body { display: grid; gap: 8px; padding-top: 12px; }
.demo-recipient .body .l { height: 7px; border-radius: 4px; background: var(--bg-2); opacity: 0; animation: dd-fade 11s ease-out 1.2s infinite; }
.demo-recipient .body .l:nth-of-type(2) { width: 88% } .demo-recipient .body .l:nth-of-type(3) { width: 72% }
.demo-recipient .note { margin-top: 12px; border: 1px solid var(--line-2); border-radius: 9px; padding: 9px 11px; font-size: 11px; color: var(--text); opacity: 0; animation: dd-fade 11s ease-out 4.2s infinite; }
.demo-recipient .note b { color: var(--violet); display: block; margin-bottom: 2px; }
.demo-recipient .sign { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 15px; font-size: 12px; font-weight: 600; opacity: 0; animation: dd-fade 11s ease-out 6.2s infinite; }

/* ---------- 8. The same brief as a designed page ---------- */
.demo-richpage .cover { border-radius: 10px; background: var(--ink); color: #fff; padding: 18px 16px; opacity: 0; animation: dd-rise2 12s ease-out .3s infinite; }
.demo-richpage .cover .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-light); }
.demo-richpage .cover b { display: block; font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 1.15; margin-top: 5px; }
.demo-richpage .cover span { display: block; margin-top: 7px; font-size: 11px; color: rgba(255,255,255,.62); }
.demo-richpage .toc { display: grid; gap: 6px; margin-top: 12px; }
.demo-richpage .toc div { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); opacity: 0; animation: dd-rise2 12s ease-out infinite; }
.demo-richpage .toc div::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); flex: 0 0 auto; }
.demo-richpage .toc div::after { content: ""; flex: 1; border-bottom: 1px dotted var(--line-2); }
.demo-richpage .toc div:nth-child(1) { animation-delay: 1.4s }
.demo-richpage .toc div:nth-child(2) { animation-delay: 1.7s }
.demo-richpage .toc div:nth-child(3) { animation-delay: 2.0s }
.demo-richpage .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.demo-richpage .cards div { border: 1px solid var(--line); border-radius: 9px; padding: 10px; font-size: 11px; color: var(--muted); opacity: 0; animation: dd-rise2 12s ease-out infinite; }
.demo-richpage .cards div b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); margin-bottom: 2px; }
.demo-richpage .cards div:nth-child(1) { animation-delay: 2.6s } .demo-richpage .cards div:nth-child(2) { animation-delay: 2.9s }

@media (prefers-reduced-motion: reduce) {
  .demo-draft .doc-col > *, .demo-draft .side .item,
  .demo-recipient .party, .demo-recipient .body .l, .demo-recipient .note, .demo-recipient .sign,
  .demo-richpage .cover, .demo-richpage .toc div, .demo-richpage .cards div { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 620px) { .demo-draft { grid-template-columns: 1fr; } .demo-draft .doc-col { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ═══════════════════════════════════════════════════════════════════════
   SIZE. These are meant to be small, playful things you notice, not
   panels. They were 32-56% of the viewport each, eight of them, across a
   page 11.6 screens long. Scaled back here in one place so they stay in
   proportion to the copy rather than competing with it.
   ═══════════════════════════════════════════════════════════════════════ */
.demo { padding: 14px; border-radius: 13px; }
.demo-bar { margin-bottom: 11px; }
.demo-bar i { width: 7px; height: 7px; }
.demo-label { top: 13px; right: 15px; font-size: 10px; }

.demo-price table { font-size: 11.5px; }
.demo-price td { padding: 5px 0; }
.demo-price .total { font-size: 19px; margin-top: 8px; }
.demo-price .stamp { font-size: 10px; margin-top: 7px; }

.demo-read .sec { padding: 6px 9px; gap: 5px; }
.demo-read .sec .l { height: 6px; }
.demo-read .sec .cap { font-size: 10px; }
.demo-read .fwd, .demo-read .nudge { font-size: 11px; margin-top: 9px; }
.demo-read .nudge { padding: 7px 9px; }

.demo-draft .doc-col { padding: 14px; gap: 7px; }
.demo-draft .side { padding: 13px 12px; gap: 7px; }
.demo-draft .side .item { font-size: 11px; }

.demo-recipient .rc-head b { font-size: 13px; }
.demo-recipient .party { font-size: 11px; }
.demo-recipient .note { font-size: 10.5px; padding: 7px 9px; margin-top: 9px; }
.demo-recipient .sign { font-size: 11px; padding: 6px 13px; margin-top: 8px; }

.demo-sign .party { font-size: 12px; padding: 8px 0; }
.demo-sign svg { height: 34px; }
.demo-sign .cert { margin-top: 12px; padding: 9px 11px; }

.demo-hub .item { padding: 8px 0; font-size: 12px; }
.demo-hub .item i { width: 22px; height: 22px; }
.demo-hub .alert { font-size: 11px; padding: 8px 10px; margin-top: 10px; }
.demo-hub .nothing { font-size: 11px; margin-top: 10px; }

.demo-richpage .cover { padding: 14px 13px; }
.demo-richpage .cover b { font-size: 17px; }
.demo-richpage .cards div b { font-size: 15px; }