* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 8% 10%, rgba(22, 136, 255, 0.16), transparent 34rem),
    radial-gradient(circle at 92% 20%, rgba(255, 122, 24, 0.09), transparent 30rem),
    linear-gradient(180deg, #030507 0%, #07111d 52%, #030507 100%);
  color: #f4f7fb;
}

button,
input {
  font: inherit;
}

.signacore-app {
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px 24px 56px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
  gap: 24px;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #20d6e5;
}

.workspace-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  margin-bottom: 10px;
}

.workspace-brand .eyebrow {
  margin: 0;
}

.workspace-brand img {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(218, 232, 248, 0.18);
  border-radius: 10px;
  object-fit: cover;
}

.workspace-brand-source {
  margin: 3px 0 0;
  color: #8aa0b6;
  font-size: 0.75rem;
  line-height: 1.2;
}

.hero-title {
  margin: 0;
  max-width: 760px;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 0.96;
}

.hero-copy,
.panel-copy,
.muted-copy {
  color: #9cadbd;
  line-height: 1.55;
}

.account-hint {
  margin: 14px 0 0;
  color: #9cadbd;
  font-size: 0.92rem;
  line-height: 1.5;
}

.account-hint a {
  color: #6ee7f9;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.signer-support {
  margin-top: 16px;
  padding: 4px 4px 0;
  color: #8aa0b6;
  font-size: 0.82rem;
  line-height: 1.55;
}

.signer-support h2 {
  margin: 0 0 6px;
  color: #dbeafe;
  font-family: inherit;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

.signer-support p { margin: 0; }

.signer-support a {
  color: #6ee7f9;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(110, 231, 249, 0.45);
  text-underline-offset: 3px;
}

.signer-support a:hover { text-decoration-color: #6ee7f9; }

.hero-panel,
.panel,
.modal-card,
.notice {
  border: 1px solid rgba(34, 56, 92, 0.12);
  background: rgba(9, 19, 29, 0.82);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.hero-panel,
.panel {
  border-radius: 18px;
  padding: 24px;
}

.hero-panel {
  display: grid;
  gap: 18px;
}

.hero-metric {
  display: grid;
  gap: 6px;
}

.hero-metric-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8aa0b6;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(32, 214, 229, 0.12);
  color: #6ee7f9;
}

.notice {
  margin-bottom: 24px;
  padding: 16px 18px;
  border-radius: 18px;
}

.notice-error {
  border-color: rgba(255, 122, 122, 0.24);
  background: rgba(127, 29, 29, 0.18);
  color: #fecaca;
}

.notice-success {
  border-color: rgba(32, 214, 229, 0.22);
  background: rgba(32, 214, 229, 0.1);
  color: #a7f3d0;
}

.workflow-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
}

/* Before the code is verified the document panel is hidden, and the second column it was holding
   open sat empty - a wide black void beside a narrow card, which is the first thing a signer sees
   and the last impression to want. Until the document is unlocked this is one task, so it gets one
   column, centred and wide enough to read. */
.workflow-grid:has(> .document-panel[hidden]) {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.workflow-grid:has(> .document-panel[hidden]) .workflow-sidebar {
  gap: 20px;
}

.workflow-sidebar {
  display: grid;
  gap: 18px;
  align-content: start;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.field span {
  font-size: 13px;
  font-weight: 700;
  color: #cbd7e3;
}

.text-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(218, 232, 248, 0.18);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.96);
  color: #07111d;
}

.primary-button,
.secondary-button,
.icon-button,
.mode-button {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.primary-button:hover,
.secondary-button:hover,
.icon-button:hover,
.mode-button:hover {
  transform: translateY(-1px);
}

.primary-button:disabled,
.secondary-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.primary-button {
  width: 100%;
  background: linear-gradient(135deg, #f8fafc, #d6efff);
  color: #07111d;
  box-shadow: 0 14px 34px rgba(32, 214, 229, 0.12);
}

.secondary-button,
.mode-button {
  width: 100%;
  border: 1px solid rgba(218, 232, 248, 0.16);
  background: rgba(248, 250, 252, 0.08);
  color: #f8fafc;
}

.field-list {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.field-list-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.06);
  border: 1px solid rgba(218, 232, 248, 0.1);
}

.field-list-item strong {
  font-size: 13px;
}

.field-status {
  font-size: 12px;
  color: #8aa0b6;
}

.field-status-complete {
  color: #6ee7b7;
}

.document-shell {
  padding: 22px;
}

.document-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.document-header h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
}

.pages-root {
  display: grid;
  gap: 26px;
}

.page-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #111827;
  border: 1px solid rgba(218, 232, 248, 0.18);
}

/* The width and height attributes carry the page's proportions, from which the browser derives
   the aspect ratio, so the box is the right height from the first paint rather than growing when
   the image arrives. "height: auto" is what preserves that ratio. */
.page-image {
  display: block;
  width: 100%;
  height: auto;
}

.page-overlay {
  position: absolute;
  inset: 0;
}

.field-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  container-type: size;
  border: 0;
  border-radius: 2px;
  /* The printed box on the page is the boundary; the field only tints to locate itself. */
  background: rgba(37, 99, 235, 0.1);
  box-shadow: inset 0 -1px 0 rgba(37, 99, 235, 0.35);
  transition: background 120ms ease, box-shadow 120ms ease;
}

.field-overlay-signature {
  box-shadow: inset 0 -1px 0 rgba(136, 43, 43, 0.5);
}

.field-overlay-required {
  background: rgba(37, 99, 235, 0.14);
}

.field-overlay:hover {
  background: rgba(37, 99, 235, 0.18);
}

.field-overlay:focus-within {
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.85);
}

/* A completed field stops advertising itself and reads as ink on the page. */
.field-overlay.field-filled {
  background: transparent;
  box-shadow: none;
}

.field-overlay.field-error {
  background: rgba(190, 40, 40, 0.16);
  box-shadow: inset 0 -1px 0 rgba(190, 40, 40, 0.7);
}

/* "Highlight fields" off: nothing but the signer's own ink. */
.pages-root-plain .field-overlay {
  background: transparent;
  box-shadow: none;
}

.pages-root-plain .field-overlay:focus-within {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.7);
}

.field-overlay input,
.field-overlay textarea,
.signature-field-button {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* A dropdown reads as the page's own printed box: the arrow only appears on interaction, so the
   completed document looks typed rather than like a web form. */
.dropdown-input {
  width: 100%;
  height: 100%;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(7px, 72cqh, var(--field-font-size, 12px));
  line-height: 1;
  appearance: none;
  cursor: pointer;
  outline: none;
}

.dropdown-input:focus {
  appearance: auto;
}

/* The radio is drawn by the page underneath; this only carries the mark and the hit area. */
.radio-input {
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.radio-input::after {
  content: "";
  display: block;
  width: 62%;
  height: 62%;
  margin: 19% auto;
  border-radius: 50%;
  background: #111827;
  opacity: 0;
  transition: opacity 90ms ease;
}

.radio-input:checked::after {
  opacity: 1;
}

.checkbox-input {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.checkbox-input svg {
  width: 82%;
  height: 82%;
  fill: none;
  stroke: #111827;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 90ms ease;
}

.checkbox-input[aria-checked="true"] svg {
  opacity: 1;
}

.highlight-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: #9cadbd;
  white-space: nowrap;
  cursor: pointer;
}

.highlight-toggle input {
  width: 14px;
  height: 14px;
  accent-color: #2563eb;
}

.signature-field-button {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 3px;
  background: transparent;
}

.text-field-input {
  padding: 0 1.5px;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(7px, 72cqh, var(--field-font-size, 12px));
  font-weight: 400;
  line-height: 0.98;
  outline: none;
}

/* Labels live in the page's own print; showing one in every box would bury the form. */
.text-field-input::placeholder {
  color: transparent;
}

.text-field-input:focus::placeholder {
  color: rgba(17, 24, 39, 0.35);
}

/* Comb fields: one glyph per printed cell.
   The parent sets container-type: size, so 100cqw is the field width. A monospace face makes
   1ch the exact glyph advance, so advance + letter-spacing lands each character on the cell
   pitch, and the indent centres the first one. */
.comb-field-input {
  --comb-cell: calc(100cqw / var(--comb-cells, 1));
  font-family: "Courier New", Courier, monospace;
  letter-spacing: calc(var(--comb-cell) - 1ch);
  text-indent: calc((var(--comb-cell) - 1ch) / 2);
  padding: 0;
}

.multiline-field-input {
  width: 100%;
  height: 100%;
  border: 0;
  resize: none;
  line-height: 1.25;
  font-size: clamp(7px, 18cqh, var(--field-font-size, 11px));
}

.signature-field-button {
  padding: 0 2px;
  font-size: clamp(7px, 34cqh, var(--field-button-size, 10px));
  font-weight: 700;
  color: rgba(7, 17, 29, 0.88);
  background: rgba(255, 255, 255, 0.04);
}

.signature-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.field-error {
  box-shadow: 0 0 0 2px rgba(189, 40, 40, 0.18);
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 20;
}

[hidden],
.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 28, 0.58);
}

.modal-card {
  position: relative;
  width: min(760px, 100%);
  border-radius: 24px;
  padding: 24px;
}

.modal-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.icon-button {
  width: 48px;
  background: rgba(248, 250, 252, 0.08);
  color: #f8fafc;
  font-size: 26px;
}

.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}

.mode-button-active {
  background: #f8fafc;
  color: #07111d;
}

.signature-canvas,
.typed-preview {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(218, 232, 248, 0.16);
  background: #fff;
}

.signature-canvas {
  min-height: 220px;
  touch-action: none;
}

.typed-preview {
  min-height: 160px;
  display: grid;
  place-items: center;
  padding: 20px;
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-family: cursive;
  color: #07111d;
}

.reuse-signature-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: #cbd7e3;
  font-size: 14px;
  font-weight: 700;
}

.reuse-signature-row input {
  width: 18px;
  height: 18px;
  accent-color: #20d6e5;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.modal-actions .secondary-button,
.modal-actions .primary-button {
  width: auto;
  padding: 0 18px;
}

@media (max-width: 1080px) {
  .hero,
  .workflow-grid {
    grid-template-columns: 1fr;
  }

  .workflow-sidebar {
    order: 2;
  }

  .document-panel {
    order: 1;
  }
}

@media (max-width: 900px) {
  /* The document sits inside a panel, so the blur behind it covers everything being scrolled and
     has to be re-sampled each frame. On a phone that cost lands on the one gesture that matters,
     and the panels read the same without it. */
  .hero-panel,
  .panel,
  .modal-card,
  .notice {
    backdrop-filter: none;
    background: rgba(9, 19, 29, 0.94);
  }
}

@media (max-width: 640px) {
  .signacore-app {
    padding: 18px 14px 32px;
  }

  .hero-panel,
  .panel,
  .modal-card {
    padding: 18px;
    border-radius: 18px;
  }

  .modal {
    padding: 12px;
  }
}

.document-body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.page-rail {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(218, 232, 248, 0.12);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.04);
}

.page-rail-head {
  display: grid;
  gap: 8px;
}

.page-counter {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #cbd7e3;
}

.page-rail-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.rail-button {
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(218, 232, 248, 0.16);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.06);
  color: #f8fafc;
  cursor: pointer;
}

.rail-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.page-thumbs {
  display: grid;
  gap: 8px;
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.page-thumb {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.page-thumb img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #fff;
}

.page-thumb-number {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(7, 17, 29, 0.78);
  color: #f8fafc;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
}

.page-thumb-current {
  border-color: #2563eb;
}

.page-rail .secondary-button {
  min-height: 36px;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .document-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-rail {
    position: static;
  }

  .page-thumbs {
    grid-auto-flow: column;
    grid-auto-columns: 96px;
    max-height: none;
    overflow-x: auto;
  }
}

/* The progress list scrolls on its own so the submit control is never scrolled away. */
.progress-panel {
  position: sticky;
  top: 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  max-height: calc(100vh - 36px);
}

.progress-header h2 {
  margin: 0 0 4px;
}

.progress-summary {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #9cadbd;
}

.progress-panel .field-list {
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.progress-footer {
  padding-top: 14px;
  border-top: 1px solid rgba(218, 232, 248, 0.12);
}

/* The sheet exists so a field can be filled at a legible size; anything under 16px would bring
   back the zoom it is here to avoid. */
.field-sheet-input {
  font-size: 16px;
}

.field-sheet-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

@media (max-width: 900px) {
  /* Rises from the bottom, within thumb reach and clear of the keyboard. */
  .field-sheet {
    align-items: end;
    padding: 0;
  }

  .field-sheet-card {
    width: 100%;
    max-width: none;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

.modal-card-narrow {
  max-width: 460px;
}

.submit-issue-list {
  display: grid;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 14px 0 4px;
}

.submit-issue {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(218, 232, 248, 0.12);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.06);
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
}

.submit-issue:hover {
  border-color: rgba(32, 214, 229, 0.4);
}

.submit-issue strong {
  font-size: 13px;
}

.submit-issue span {
  font-size: 12px;
  color: #8aa0b6;
}

@media (max-width: 900px) {
  /* On a narrow screen the panel cannot be sticky, so the submit control is pinned instead. */
  .progress-panel {
    position: static;
    max-height: none;
  }

  .progress-footer {
    position: sticky;
    bottom: 0;
    margin: 0 -24px -24px;
    padding: 14px 24px;
    border-radius: 0 0 18px 18px;
    /* Opaque rather than blurred: a backdrop filter behind a sticky bar is recomposited against
       the page on every frame, which is what makes a long document stutter under a finger. */
    background: #0b1521;
  }
}

/* --- After signing: the document is a record, not a form --- */

.signed-panel h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.signed-panel .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  text-decoration: none;
}

/* The signer's own entries stay legible; only the invitation to edit is withdrawn. */
.pages-root-signed .field-overlay {
  background: transparent;
  box-shadow: none;
}

.pages-root-signed .field-overlay input,
.pages-root-signed .field-overlay textarea,
.pages-root-signed .field-overlay select,
.pages-root-signed .signature-field-button {
  color: #111827;
  opacity: 1;
  cursor: default;
}

.pages-root-signed .checkbox-input,
.pages-root-signed .radio-input {
  cursor: default;
}

/* --- Narrow screens: the field list becomes a rail in the margin --- */

/* Hidden on a wide screen, where the full field list is on show and has room to be. */
.field-rail {
  display: none;
}

@media (max-width: 900px) {
  .field-rail {
    position: fixed;
    top: 50%;
    right: 4px;
    z-index: 6;
    display: grid;
    gap: 5px;
    max-height: 70dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 4px;
    border: 1px solid rgba(218, 232, 248, 0.14);
    border-radius: 999px;
    background: rgba(9, 19, 29, 0.92);
    transform: translateY(-50%);
    scrollbar-width: none;
  }

  .field-rail::-webkit-scrollbar {
    display: none;
  }

  .rail-mark {
    width: 22px;
    height: 22px;
    flex: none;
    padding: 0;
    border: 1px solid rgba(218, 232, 248, 0.2);
    border-radius: 50%;
    background: transparent;
    color: #cbd7e3;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
  }

  /* A required field still waiting is the only thing worth drawing the eye. */
  .rail-mark-required {
    border-color: rgba(32, 214, 229, 0.55);
    color: #20d6e5;
  }

  .rail-mark-complete {
    border-color: rgba(63, 185, 80, 0.5);
    background: rgba(63, 185, 80, 0.16);
    color: #7ee493;
  }

  /* The list scrolls within itself, so on a phone it swallows the page's own scrolling. The rail
     carries the same information without taking the gesture. */
  .progress-panel .progress-header,
  .progress-panel .field-list {
    display: none;
  }

  /* Pinned so the document can be reached from any page without scrolling back for the thumbnails
     or forward for the button. */
  .page-rail {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(9, 19, 29, 0.96);
  }

  /* The sidebar sits after the document in the narrow layout, so a footer stuck inside it only
     pins once you have scrolled the whole document. Fixed to the viewport instead, the submit
     control is reachable from wherever the reader is. */
  .progress-panel {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .progress-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(218, 232, 248, 0.14);
    border-radius: 0;
    background: #0b1521;
  }

  /* Clears the pinned control, so the end of the document is not hidden behind it. */
  .signacore-app {
    padding-bottom: 88px;
  }

  .field-rail {
    max-height: 58dvh;
  }
}

/* ---------------------------------------------------------------- the door, with no document

   The landing page has no document panel at all, so it cannot borrow the signing layout: that
   grid holds a column open for a document, and here there is never one to put in it. Its own
   grid instead - as many cards as fit, centred, filling the width rather than hugging one edge. */
.landing {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 0 72px;
}

.landing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}

.landing-cards .panel { height: 100%; }

/* Two up rather than as many as fit: four text-heavy cards at three across leaves one orphaned
   on its own row, and these are paragraphs rather than tiles. */
@media (min-width: 880px) {
  .landing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The panel copy had no link colour of its own, so the two links on this page fell back to the
   browser's dark blue on a near-black card and were all but invisible. */
.landing .panel-copy a {
  color: #6ee7f9;
  text-decoration: underline;
  text-decoration-color: rgba(110, 231, 249, 0.45);
  text-underline-offset: 3px;
}

.landing .panel-copy a:hover { text-decoration-color: #6ee7f9; }

@media (max-width: 720px) {
  .landing { padding-bottom: 48px; }
  .landing-cards { grid-template-columns: 1fr; gap: 16px; }
}

/* ------------------------------------------------- what the sender already filled in
   Part of the agreement rather than part of the work. Drawn on the page where it belongs, in
   the ink of the document rather than the blue of a field waiting for an answer, and carrying
   no control: there is nothing here to focus, tab into, or change. */
.field-overlay-sender {
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.sender-answered-value {
  display: block;
  width: 100%;
  padding: 0 2px;
  overflow: hidden;
  color: #16202e;
  font-size: var(--field-font-size, 11px);
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sender-answered-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Only shown on a document the sender chose to lock. Marked out rather than set as more body
   copy, because it is the answer to a question the signer is about to ask. */
.access-code-notice {
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
  border: 1px solid rgba(255, 122, 24, 0.3);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 122, 24, 0.08);
  color: #f3d7bf;
  font-size: 0.92rem;
  line-height: 1.5;
}