@font-face {
  font-family: Allura;
  src: url("/static/fonts/allura.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "Great Vibes";
  src: url("/static/fonts/greatvibes.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: Caveat;
  src: url("/static/fonts/caveat.ttf") format("truetype");
  font-display: block;
  font-weight: 400 700;
}
.font-allura {
  font-family: Allura, cursive;
}
.sign-mode {
  background: #f6f8f8;
}
.sign-mode main {
  max-width: 1390px;
  padding-top: 36px;
}
.sign-mode header .brand {
  color: #173e45;
  font-size: 29px;
}
.wizard-heading {
  text-align: center;
  margin: 5px auto 28px;
  max-width: 820px;
}
.wizard-heading .eyebrow {
  display: block;
  letter-spacing: 1.5px;
  line-height: 1.6;
}
.wizard-heading h1 {
  font-size: 34px;
  letter-spacing: -1.2px;
  margin: 13px 0;
}
.wizard-heading .muted {
  margin: 0;
  font-size: 14px;
}
.wizard-steps {
  display: flex;
  list-style: none;
  max-width: 730px;
  margin: 0 auto 38px;
  padding: 0;
  justify-content: space-between;
  position: relative;
}
.wizard-steps:before {
  content: "";
  height: 1px;
  background: #dfe7e5;
  position: absolute;
  top: 15px;
  left: 30px;
  right: 30px;
}
.wizard-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #8b9c9e;
  background: #f6f8f8;
  z-index: 1;
  padding: 0 12px;
}
.wizard-steps li span {
  border: 1px solid #d8e2e0;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  font-size: 12px;
}
.wizard-steps .current {
  color: #167a63;
  font-weight: 650;
}
.wizard-steps .current span {
  background: #17886e;
  color: #fff;
  border-color: #17886e;
  box-shadow: 0 0 0 4px #17886e10;
}
.wizard-steps .done {
  color: #357e6c;
}
.wizard-steps .done span {
  background: #e6f2ee;
  border-color: #e6f2ee;
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 740px;
  margin: 60px auto 0;
}
.method-card {
  padding: 33px 28px 23px;
  background: #fff;
  border: 1px solid #dfe7e5;
  border-radius: 15px;
  text-align: left;
  color: #21464d;
  transition:
    transform 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.method-card:hover,
.method-card.selected {
  border-color: #17886e;
  transform: translateY(-4px);
  box-shadow: 0 10px 35px #123e450a;
}
.method-icon {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background: #edf6f2;
  color: #17886e;
  display: grid;
  place-items: center;
  font-size: 31px;
  margin-bottom: 28px;
}
.method-icon.font-allura {
  font-size: 41px;
}
.method-card h2 {
  font-size: 20px;
  margin: 0 0 13px;
}
.method-card p {
  font-size: 13px;
  line-height: 1.8;
  color: #7a8e91;
  margin: 0 0 28px;
}
.method-tag {
  border-top: 1px solid #edf1f0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 18px;
  font-size: 11px;
  color: #5b8580;
  margin-top: auto;
}
.method-tag b {
  font-size: 18px;
  font-weight: 400;
}
.wizard-reassurance {
  text-align: center;
  font-size: 12px;
  color: #839896;
  margin: 32px 0 65px;
}
.artwork-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  max-width: 1130px;
  margin: auto;
}
.artwork-card {
  padding: 30px;
}
.artwork-card .toolbar {
  padding-bottom: 4px;
}
.artwork-card .toolbar h2 {
  margin-bottom: 0;
}
.artwork-card label {
  margin-top: 24px;
}
.artwork-card input {
  padding: 14px;
  font-size: 15px;
}
.font-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.font-option {
  min-width: 0;
  background: white;
  border: 1px solid #dce5e2;
  border-radius: 9px;
  padding: 22px 12px 12px;
  color: #183f52;
  overflow: hidden;
}
.font-option span {
  font-size: 29px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 49px;
}
.font-option small {
  display: block;
  font-size: 10px;
  color: #7e9395;
  margin-top: 10px;
}
.font-option.selected {
  background: #f1f8f5;
  border: 1.5px solid #17886e;
}
.color-swatches {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.swatch {
  border: 3px solid #fff;
  outline: 1px solid transparent;
  border-radius: 50%;
  padding: 0;
  width: 34px;
  height: 34px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
}
.swatch.selected {
  outline-color: var(--ink);
}
#color-name {
  color: #7b9293;
  font-size: 11px;
  margin-left: 4px;
}
.initials-setup {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 25px;
  border-top: 1px solid #e8eeeb;
  margin-top: 26px;
  align-items: center;
}
.initials-setup input {
  max-width: 160px;
}
.initials-setup p {
  font-size: 11px;
  margin-bottom: 0;
}
.initials-sample {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background: #f8faf9;
  border-radius: 7px;
}
.initials-sample img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.artwork-result {
  align-self: start;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.artwork-result .primary {
  width: 100%;
  margin-top: 15px;
}
.art-preview {
  height: 160px;
  padding: 25px 10px;
  margin: 20px 0 0;
  border-bottom: 1px dashed #b8cdc6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg, #f7faf9, #fff);
}
.art-preview img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.art-preview span {
  font-size: 12px;
  color: #b0bfbb;
}
.artwork-result > .muted {
  font-size: 12px;
}
.segmented {
  background: #f1f5f3;
  display: flex;
  border-radius: 8px;
  padding: 4px;
  margin: 24px 0 16px;
  gap: 4px;
}
.segmented button {
  border: 0;
  background: none;
  border-radius: 5px;
  padding: 10px 15px;
  color: #72918a;
  font-size: 12px;
  flex: 1;
}
.segmented .selected {
  background: white;
  box-shadow: 0 1px 4px #123e4512;
  color: #18765e;
}
.drawing-pad {
  position: relative;
  border: 1px dashed #bad0c6;
  border-radius: 9px;
  background: repeating-linear-gradient(0deg, #fff, #fff 39px, #f3f7f5 40px);
  aspect-ratio: 3/1;
  width: 100%;
  overflow: hidden;
}
.drawing-pad canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  position: relative;
  z-index: 1;
}
.drawing-pad > span {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  text-align: center;
  color: #acbeb6;
  font-size: 24px;
  pointer-events: none;
  font-family: Allura;
}
.upload-zone {
  min-height: 220px;
  border: 1px dashed #b8cdc5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: #f8fbf9;
  cursor: pointer;
  padding: 25px;
  text-align: center;
}
.upload-zone > span {
  font-size: 40px;
  font-weight: 400;
  color: #3b9377;
}
.upload-zone strong {
  font-size: 14px;
}
.upload-zone small {
  color: #8a9e98;
  font-weight: 400;
}
.upload-zone input {
  max-width: 100%;
  font-size: 12px;
  border: 0;
}
.placement-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  align-items: start;
  gap: 24px;
  max-width: 1240px;
  margin: auto;
}
.document-stage {
  padding: 18px;
  min-width: 0;
}
.document-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #77928c;
  gap: 12px;
  margin: 0 0 16px;
}
.document-toolbar select {
  width: auto;
  font-size: 12px;
  padding: 9px;
}
.document-toolbar .secondary {
  padding: 8px 12px;
}
.document-surface {
  background: #e9eeed;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  min-height: 300px;
}
.mark-page {
  position: relative;
  display: inline-block;
  vertical-align: top;
  line-height: 0;
  background: white;
  box-shadow: 0 5px 22px #193f4510;
  width: 100%;
}
.mark-page > .document-page {
  display: block;
  width: 100%;
  height: auto;
}
.signature-mark {
  position: absolute;
  cursor: move;
  border: 1px dashed transparent;
  touch-action: none;
  box-sizing: content-box;
  margin: -1px;
  z-index: 2;
  outline: none;
}
.signature-mark:hover {
  border-color: #52a78d;
  background: #27a58008;
}
.signature-mark.selected {
  border-color: #19866c;
  background: #1da17f08;
}
.signature-mark > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
}
.mark-label {
  position: absolute;
  top: -24px;
  left: -1px;
  background: #17886e;
  color: white;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 4px 4px 0 0;
  font:
    10px ui-sans-serif,
    sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.signature-mark.selected .mark-label {
  opacity: 1;
}
.resize-mark {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid white;
  background: #19866c;
  box-shadow: 0 0 0 1px #19866c;
  border-radius: 50%;
  bottom: -7px;
  right: -7px;
  cursor: nwse-resize;
  opacity: 0;
}
.signature-mark.selected .resize-mark {
  opacity: 1;
}
.mark-tools {
  padding: 23px;
  position: sticky;
  top: 20px;
  min-width: 0;
}
.mark-tools h2 {
  margin-bottom: 8px;
}
.mark-tools > .muted {
  font-size: 12px;
  margin-top: 0;
}
.asset-tile {
  background: #fbfdfc;
  width: 100%;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 6px 0;
  text-align: left;
  touch-action: none;
  color: #3f6760;
}
.asset-tile span {
  display: block;
  font-size: 10px;
  font-weight: 600;
}
.asset-tile img {
  display: block;
  width: 100%;
  height: 48px;
  object-fit: contain;
  padding: 8px 0;
}
.asset-tile small {
  font-size: 10px;
  color: #80a196;
}
.asset-tile:hover {
  border-color: #339b7c;
  background: #f3faf6;
}
.mark-tools #initials-all {
  width: 100%;
  font-size: 11px;
  padding: 10px 8px;
  margin-top: 12px;
}
.mark-tools label {
  font-size: 11px;
}
.mark-tools select {
  font-size: 11px;
}
.mark-tools hr,
.validation-card hr {
  border: 0;
  border-top: 1px solid #e5ece8;
  margin: 22px 0;
}
.selected-mark-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  font-size: 11px;
}
.selected-mark-title .link {
  font-size: 10px;
  color: #a66560;
}
.mark-tools input[type="range"] {
  padding: 0;
  accent-color: #17886e;
  border: 0;
}
.mark-tools .link {
  font-size: 11px;
}
.mark-list {
  display: grid;
  gap: 4px;
  max-height: 145px;
  overflow: auto;
  margin: 14px 0;
}
.mark-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  background: #f7f9f8;
  border-radius: 4px;
  padding: 9px;
  color: #4a7165;
  font-size: 10px;
}
.mark-list-item.selected {
  background: #eaf5ef;
}
.mark-list-item small {
  font-size: 9px;
  color: #8ca498;
}
.next-step-card {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #e5ece8;
}
.next-step-card p {
  font-size: 11px;
  line-height: 1.8;
}
.next-step-card .primary {
  width: 100%;
  font-size: 12px;
}
.drag-ghost {
  position: fixed;
  pointer-events: none;
  width: 140px;
  height: 65px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  z-index: 100;
  filter: drop-shadow(0 3px 5px #17453855);
}
.validation-card {
  padding: 25px;
  position: sticky;
  top: 20px;
}
.validation-card h2 {
  font-size: 18px;
  line-height: 1.4;
  margin: 12px 0;
}
.validation-icon {
  width: 35px;
  height: 35px;
  background: #e9f5ee;
  color: #27896c;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
}
.validation-card .muted {
  font-size: 12px;
}
.validation-card .primary {
  width: 100%;
  font-size: 12px;
}
.validation-card .link {
  font-size: 11px;
}
.validation-card .consent {
  font-size: 11px;
  line-height: 1.7;
}
.validation-card .consent input {
  flex-shrink: 0;
}
#validation-code {
  font-size: 25px;
  letter-spacing: 8px;
  text-align: center;
  padding: 14px 5px;
  font-family: ui-monospace, monospace;
}
#code-status {
  line-height: 1.7;
  color: #418269;
}
.validation-note {
  border-top: 1px solid #e5ece8;
  margin-top: 22px;
  padding-top: 14px;
}
#wizard-error:empty {
  margin: 0;
}
.wizard-success {
  max-width: 580px;
  text-align: center;
  margin: 40px auto;
  padding: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 15px;
}
.success-check {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e9f6ee;
  color: #17886e;
  font-size: 38px;
  margin: 0 0 10px;
}
.wizard-success h2 {
  font-size: 27px;
  margin: 0;
}
.wizard-success .muted {
  margin: 0;
  max-width: 400px;
}
.wizard-success .primary,
.wizard-success .secondary {
  width: 100%;
  max-width: 350px;
}
.wizard-success details {
  width: 100%;
  font-size: 11px;
  color: #829b93;
  border-top: 1px solid #e5ece8;
  padding-top: 20px;
  margin-top: 10px;
}
.wizard-success summary {
  cursor: pointer;
}
.wizard-success .hash {
  text-align: left;
}
@media (max-width: 1000px) {
  .sign-mode main {
    padding: 30px 24px;
  }
  .artwork-layout {
    grid-template-columns: 1fr 300px;
  }
  .font-options {
    grid-template-columns: 1fr;
  }
  .font-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    gap: 15px;
  }
  .font-option span {
    height: auto;
    font-size: 29px;
  }
  .font-option small {
    margin: 0;
  }
  .placement-layout {
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 15px;
  }
  .mark-tools,
  .validation-card {
    padding: 18px;
  }
  .document-surface {
    padding: 16px;
  }
  .method-grid {
    gap: 14px;
  }
  .method-card {
    padding: 25px 20px;
  }
  .initials-setup {
    grid-template-columns: 1fr 100px;
  }
  .wizard-heading h1 {
    font-size: 29px;
  }
}
@media (max-width: 700px) {
  .sign-mode main {
    padding: 26px 15px;
  }
  .wizard-heading {
    text-align: left;
    margin-bottom: 22px;
  }
  .wizard-heading h1 {
    font-size: 28px;
    letter-spacing: -1px;
  }
  .wizard-heading .eyebrow {
    font-size: 9px;
  }
  .wizard-heading .muted {
    font-size: 12px;
  }
  .wizard-steps {
    margin-bottom: 25px;
    max-width: 100%;
    gap: 0;
  }
  .wizard-steps li {
    padding: 0 5px;
    flex-direction: column;
    font-size: 10px;
    gap: 8px;
    min-width: 45px;
  }
  .wizard-steps li span {
    width: 27px;
    height: 27px;
    font-size: 11px;
  }
  .wizard-steps:before {
    top: 13px;
  }
  .method-grid {
    grid-template-columns: 1fr;
    margin-top: 10px;
    gap: 13px;
  }
  .method-card {
    min-height: 0;
    padding: 20px;
    position: relative;
  }
  .method-icon {
    position: absolute;
    width: 46px;
    height: 46px;
    left: 20px;
    top: 21px;
    margin: 0;
    font-size: 26px;
  }
  .method-icon.font-allura {
    font-size: 34px;
  }
  .method-card h2,
  .method-card p {
    margin-left: 65px;
  }
  .method-card h2 {
    font-size: 17px;
    margin-bottom: 8px;
  }
  .method-card p {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .method-tag {
    padding-top: 12px;
    font-size: 10px;
  }
  .wizard-reassurance {
    font-size: 11px;
    line-height: 1.7;
    margin: 22px 10px;
  }
  .artwork-layout,
  .placement-layout {
    grid-template-columns: 1fr;
  }
  .artwork-card {
    padding: 20px;
  }
  .artwork-card .toolbar {
    flex-direction: row;
    align-items: center;
  }
  .artwork-card .toolbar h2 {
    font-size: 18px;
  }
  .artwork-card .toolbar .link {
    font-size: 10px;
  }
  .artwork-result {
    padding: 24px;
  }
  .art-preview {
    height: 120px;
    margin-top: 5px;
  }
  .font-options {
    grid-template-columns: 1fr;
  }
  .font-option span {
    font-size: 32px;
  }
  .initials-setup {
    gap: 15px;
    grid-template-columns: 1fr 105px;
  }
  .initials-setup input {
    max-width: 130px;
  }
  .drawing-pad {
    aspect-ratio: 3/1;
  }
  .segmented button {
    padding: 10px 8px;
    font-size: 11px;
  }
  .mark-tools,
  .validation-card {
    position: static;
    padding: 20px;
  }
  .mark-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
  }
  .mark-tools > h2,
  .mark-tools > p,
  .mark-tools > #initials-all,
  .mark-tools > label,
  .mark-tools > select,
  .mark-tools > hr,
  .mark-tools > #mark-details,
  .mark-tools > #mark-list,
  .mark-tools > #edit-art,
  .mark-tools > .next-step-card {
    grid-column: 1/-1;
  }
  .asset-tile {
    grid-column: auto;
  }
  .asset-tile img {
    height: 52px;
  }
  .asset-tile small {
    font-size: 9px;
  }
  .document-stage {
    padding: 10px;
  }
  .document-toolbar {
    font-size: 10px;
    gap: 5px;
  }
  .document-toolbar .row {
    gap: 5px;
  }
  .document-toolbar select {
    padding: 7px;
    font-size: 11px;
  }
  .document-toolbar .secondary {
    padding: 7px 10px;
  }
  .document-surface {
    padding: 14px 10px;
    min-height: 200px;
  }
  .document-stage > #read-progress {
    font-size: 10px;
    margin-bottom: 0;
  }
  .mark-label {
    font-size: 8px;
    top: -21px;
    padding: 4px;
  }
  .resize-mark {
    width: 15px;
    height: 15px;
  }
  .signature-mark {
    min-height: 8px;
  }
  .wizard-success {
    margin: 20px auto;
    padding: 28px 22px;
  }
  .wizard-success h2 {
    font-size: 24px;
  }
  .wizard-success .primary,
  .wizard-success .secondary {
    font-size: 12px;
    padding: 14px;
  }
  .validation-card h2 {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .method-card {
    transition: none;
  }
}

/* Continuous document: unrevealed pages never contain legible PDF content. */
.continuous-document { display:flex; flex-direction:column; gap:32px; }
.sheet-section { width:100%; min-width:0; scroll-margin-top:30px; }
.sheet-caption { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; color:#526c72; font-size:13px; }
.page-state { color:#14856f; }
.mark-page { overflow:hidden; background:white; }
.page-mist { position:absolute; inset:9%; opacity:.18; filter:blur(5px); background:repeating-linear-gradient(to bottom,#9aaeb0 0 6px,transparent 6px 28px); }
.blurred-page { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; opacity:.6; }
.reveal-page { position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border:0; border-radius:0; background:#f4f9f955; color:#244d54; cursor:pointer; }
.reveal-page strong { font-size:20px; }
.reveal-page small { max-width:230px; white-space:normal; line-height:1.5; }
.eye-icon { width:68px; height:68px; display:grid; place-items:center; background:white; border-radius:50%; box-shadow:0 8px 30px #123b4720; }
.eye-icon svg { width:32px; height:32px; }
.reveal-page:hover .eye-icon, .reveal-page:focus-visible .eye-icon { background:#d8f2e9; }
.document-stage { align-self:start; }
.mark-tools, .validation-card { position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto; }
@media(max-width:700px) { .mark-tools, .validation-card { position:static; max-height:none; } .sheet-caption { font-size:11px; } .document-toolbar { flex-wrap:wrap; } }

.reveal-page { line-height:1.4; }

.asset-tile, .asset-tile img, .signature-mark img { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
.asset-tile img, .signature-mark img { pointer-events:none; }
.asset-tile.armed { outline:2px solid #17866c; background:#e5f6ef; }
.mark-page.drop-target { outline:3px solid #17866c; outline-offset:3px; }
.drag-ghost { pointer-events:none !important; z-index:9999; }
.photo-card { max-width:760px; margin:0 auto; padding:32px; }
.photo-privacy { background:#f2f7f5; padding:18px; border-radius:10px; margin:20px 0; line-height:1.6; }
.photo-privacy summary { cursor:pointer; color:#173d47; font-weight:600; }
.camera-frame { position:relative; max-width:560px; margin:20px auto; border-radius:16px; overflow:hidden; background:#173d47; aspect-ratio:4/3; }
.camera-frame video { width:100%; height:100%; object-fit:contain; transform:scaleX(-1); }
.face-guide { position:absolute; inset:12% 29%; border:3px dashed #b0ecdb; border-radius:50%; pointer-events:none; }
.camera-countdown { position:absolute; inset:25% 0; text-align:center; font-size:74px; font-weight:700; color:white; text-shadow:0 2px 10px #173d47; }
.photo-progress { margin-top:24px; color:#17866c; font-weight:600; }
.photo-thumbnails { display:flex; gap:14px; margin:22px 0; }
.photo-thumbnails figure { margin:0; flex:1; min-width:0; }
.photo-thumbnails img { width:100%; border-radius:8px; }
.photo-thumbnails figcaption { text-align:center; color:#17866c; font-size:12px; }
@media(max-width:700px){.photo-card{padding:20px}.photo-card .eyebrow{line-height:1.7}.photo-thumbnails{gap:7px}}

/* The floating artwork uses the exact page rectangle, never a fixed image height. */
.drag-ghost { object-fit:fill; transform:none; max-width:none; max-height:none; margin:0; padding:0; opacity:1; border:0; border-radius:0; filter:none; }
.drag-ghost.on-page { outline:1px solid #17866c; box-shadow:0 0 0 3px #17866c22; }
.document-divider { font-size:18px; margin:24px 0 14px; color:#173d47; overflow-wrap:anywhere; }
.document-divider small { display:block; font-size:12px; color:#638080; margin-top:5px; }
.document-jump-label { margin:0; font-size:12px; }
.preview-loading { position:absolute; top:45%; left:10%; right:10%; text-align:center; color:#638080; }
.document-downloads { display:grid; gap:10px; margin:16px 0; }
#mark-width { white-space:nowrap; }

/* Verification takes focus after the prepared-document checklist. */
.verification-focus { max-width:620px; margin:0 auto; padding:36px; position:static; max-height:none; overflow:visible; }
.verification-focus h2 { font-size:24px; margin:12px 0; }
.verification-focus .muted, .verification-focus .primary { font-size:14px; }
.verification-focus .primary { width:100%; }
.verification-focus .link { display:block; margin:20px auto 0; font-size:13px; }
.verification-focus .consent { font-size:13px; line-height:1.65; }
.verification-symbol { width:56px; height:56px; display:grid; place-items:center; border-radius:16px; background:#e6f2ee; color:#17866c; font-size:28px; }
.document-checklist { list-style:none; padding:0; margin:24px 0; }
.document-check { display:flex; align-items:flex-start; gap:14px; padding:20px 0; border-bottom:1px solid #e2ebe8; }
.document-check > div { flex:1; min-width:0; }
.document-check h3 { margin:0 0 7px; font-size:16px; overflow-wrap:anywhere; }
.document-check p { margin:0 0 5px; color:#357e6c; font-size:13px; }
.document-check small { color:#738b8b; font-size:12px; }
.check-badge { display:grid; place-items:center; flex-shrink:0; width:28px; height:28px; background:#e6f2ee; color:#17866c; border-radius:50%; }
.check-status { color:#357e6c; font-size:11px; padding:5px 8px; border-radius:20px; background:#f0f7f4; }
@media(max-width:700px){
 .verification-focus { padding:24px; }
 .verification-focus h2 { font-size:22px; }
 .document-check { flex-wrap:wrap; gap:10px; }
 .check-status { display:none; }
 .wizard-steps li { min-width:0; flex:1; padding:0 2px; font-size:9px; }
}

/* Keep the signing flow in sight while the pages scroll underneath it. */
.sign-mode main { --flow-offset:84px; }
.wizard-progress { position:sticky; top:0; z-index:15; background:#f6f8f8; margin:0 0 28px; padding:16px 0; border-bottom:1px solid #e2ebe8; }
.wizard-progress .wizard-steps { margin:0 auto; }
.sign-mode .mark-tools { top:var(--flow-offset); max-height:calc(100svh - var(--flow-offset) - 16px); }
.sheet-section, .document-divider { scroll-margin-top:var(--flow-offset); }
.sign-mode main :is(button,input,select,textarea) { scroll-margin-top:var(--flow-offset); }
.document-divider .document-icon { width:28px; height:34px; }
.document-check h3 .document-icon { width:19px; height:23px; }
.document-downloads button { display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; }
@media(max-width:700px){
 .sign-mode main { --flow-offset:94px; }
 .wizard-progress { padding:14px 0; margin-bottom:20px; }
 .sign-mode .mark-tools { max-height:none; }
}

/* Camera feedback remains legible on both dark and bright backgrounds. */
.face-contour { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.guide-badge { position:absolute; top:12px; left:12px; border-radius:20px; padding:7px 12px; background:#173e44e8; color:white; font-size:12px; }
.camera-frame[data-guide="ready"] .guide-badge { background:#106b53; }
.camera-frame[data-guide="adjust"] .guide-badge { background:#725015; }
.live-guidance { max-width:560px; margin:0 auto 22px; padding:14px 4px 0; }
#guide-text { margin:0 0 16px; min-height:2.8em; font-weight:600; color:var(--ink); }
.turn-guide { height:12px; position:relative; background:#e3ebec; border-radius:12px; margin:0 8px; }
.turn-target { position:absolute; top:0; height:100%; background:#61c3a3; border-radius:8px; }
.turn-marker { position:absolute; top:-5px; width:8px; height:22px; transform:translateX(-50%); background:#173e44; border:2px solid white; border-radius:5px; box-shadow:0 1px 4px #173e4470; }
.turn-labels { display:flex; justify-content:space-between; margin:10px 0 12px; color:#476970; font-size:12px; }
.live-guidance small { display:block; color:#627e83; line-height:1.6; }

.signature-suggestion { position:absolute; z-index:2; border:2px dashed #17886e; background:#e4f3ebc9; color:#106c55; font-size:clamp(9px,1.2vw,14px); padding:4px; border-radius:3px; }

.mechanism-terms { margin: 1.2rem 0; padding: 1rem; border: 1px solid var(--line, #dce7e8); border-radius: 12px; background: #f5f9f8; }
.mechanism-terms summary { cursor: pointer; font-weight: 600; line-height: 1.5; }
.mechanism-terms p { font-size: .95rem; line-height: 1.65; margin: 1rem 0; }
.mechanism-terms small { color: #567477; }

/* Keep deletion discoverable on touch devices and without hover. */
.delete-mark {
  position:absolute; top:2px; right:2px; display:grid; place-items:center;
  width:32px; height:32px; padding:6px; border:1px solid #e4c4c0;
  border-radius:8px; background:#fff; color:#a13e34; cursor:pointer;
  box-shadow:0 2px 6px #183c471a; z-index:3; touch-action:manipulation;
}
.delete-mark:hover, .remove-mark-action:hover { background:#fff0ed; }
.delete-mark:focus-visible, .remove-mark-action:focus-visible { outline:3px solid #a13e34; outline-offset:2px; }
.remove-mark-action { display:inline-flex; align-items:center; gap:6px; border:1px solid #e4c4c0; border-radius:8px; background:#fff; color:#a13e34; padding:8px 10px; cursor:pointer; }
@media(pointer:coarse) { .delete-mark { width:40px; height:40px; } }

.identity-scope { padding:14px 16px; background:#edf5f3; border-radius:10px; color:#315e59; font-size:.9rem; line-height:1.6; }
.identity-card small { display:block; color:#667f85; margin:6px 0 16px; }
.identity-card input[readonly] { background:#f2f5f5; }