* {
  box-sizing: border-box;
}

:root {
  --ui-border: var(--dito-color-border);
  --ui-muted: var(--dito-color-secondary-text);
  --ui-canvas: var(--dito-color-soft-gray);
}

.site-header .text-button { font-size: 16px; text-decoration: none; opacity: .75; }
.site-header .text-button:hover { opacity: 1; text-decoration: underline; }
.site-header a.text-button { margin-left: auto; }
.site-header a.text-button + #sign-out { margin-left: 0; }

main {
  max-width: 1298px;
  margin: 28px auto 0;
  padding: 0 28px;
}

.lead {
  margin: 0;
  color: var(--ui-muted);
  font-size: 13px;
}

/* Jeremy's upload page (David, October 5): the choice sits in one white bordered page box. */
.workspace {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: white;
}

.workspace form {
  padding: 24px;
}

/* Gift and kept-purchase notices sit above the slots they concern. */
.workspace > .lead { margin: 24px 24px 0; padding: 10px 14px; border-left: 3px solid var(--dito-color-signal-red); background: var(--dito-color-surface-paper); color: var(--dito-color-ink); font-size: 18px; }
.workspace > .lead:empty { display: none; }
.workspace > .offer { margin: 24px; }

.file-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.file-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--dito-color-white);
  cursor: pointer;
  transition: border-color var(--dito-motion-feedback-min) var(--dito-motion-control-easing);
}
#right-card .file-label { background: var(--dito-color-outcomes-red); }

.file-card:hover, .file-card.dragging {
  border-color: var(--dito-color-signal-red);
  background: var(--dito-color-white);
}

.file-card:focus-within {
  outline: 3px solid var(--dito-color-signal-red);
  outline-offset: 3px;
}

.file-card.selected {
  border-style: solid;
  border-color: var(--ui-border);
  background: var(--dito-color-surface-paper);
}

.file-card input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  background: var(--dito-color-surface-charcoal);
  color: var(--dito-color-white);
  font: 700 14px/1.3 var(--dito-font-body);
  text-align: center;
  text-transform: uppercase;
}
.file-label-description { font-size: 26px; line-height: 1.2; text-wrap: balance; }

.file-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  margin: 12px;
  padding: 24px 16px;
  border: 1.5px dashed var(--ui-border);
  border-radius: 5px;
  background: var(--dito-color-surface-paper);
  text-align: center;
}
.file-card.selected .file-body { border-style: solid; }
.file-card:hover .file-body, .file-card.dragging .file-body { background: var(--dito-color-white); }

.file-card svg {
  flex: none;
  width: 32px;
  height: 38px;
  fill: none;
  stroke: var(--ui-muted);
  stroke-width: 1.4;
}

.file-card strong {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 18px;
  font-weight: 600;
}

.file-hint { color: var(--ui-muted); font-size: 18px; }

.file-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  padding: 12px 20px;
  border: 1px solid var(--dito-color-ink);
  border-radius: 4px;
  background: var(--dito-color-white);
  color: var(--dito-color-ink);
  font: 700 16px/1.25 var(--dito-font-body);
  text-transform: uppercase;
  text-wrap: balance;
}

.comparison-action-area { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#selection-status { max-width: 36ch; margin: 0; color: var(--ui-muted); font-size: 18px; line-height: 1.4; text-align: right; }

.action-row, .comparison-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.action-row {
  justify-content: space-between;
  margin-top: 20px;
}

/* Three stacked supporting lines: privacy, limits, sample report. 18px minimum for reading without squinting. */
.action-row > p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 18px;
  line-height: 1.45;
}
.action-row .input-limits { display: block; margin: 2px 0 0; text-align: left; }
.input-limits span { padding: 0 5px; }

#processing-disclosure:empty { display: none; }

/* The ditoit.com arrival's price line may sit beside the action and wraps above it when space is short. */
.comparison-actions { flex-wrap: wrap; justify-content: flex-end; }

/* The marketing arrival's price, beside the action it pays for, with its environment notes. */
.offer-line {
  max-width: 30ch;
  margin: 0;
  color: var(--dito-color-ink);
  font-size: 18px;
  line-height: 1.4;
  text-align: right;
}

.sample-library { padding: 22px 26px; border-top: 1px solid var(--ui-border); background: var(--dito-color-surface-paper); font-size: 13px; }
.sample-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.sample-heading h2 { margin: 0 0 7px; font: 400 22px var(--dito-font-display); }
.sample-heading p { margin: 0; color: var(--ui-muted); line-height: 1.5; }
.sample-badge { border: 1px solid var(--ui-border); border-radius: 20px; padding: 5px 10px; font-size: 11px; white-space: nowrap; }
.sample-filters, .sample-choice { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; align-items: end; margin-bottom: 14px; }
.sample-choice { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 8px; }
.sample-filters > div, .sample-choice > div { min-width: 0; }
.sample-library label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.sample-library select, .sample-library input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--dito-color-white); color: var(--dito-color-ink); font: 14px var(--dito-font-body); padding: 9px 11px; }
.sample-library select { padding-right: 26px; }
.sample-library #try-sample { min-height: 44px; font-size: 13px; }
#sample-count { color: var(--ui-muted); font-size: 12px; margin: 0 0 14px; }
#sample-description, #sample-answer p { margin: 0 0 10px; line-height: 1.6; }
#sample-answer { padding: 11px 0; border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
#sample-answer summary { cursor: pointer; font-weight: 600; }
#sample-answer[open] summary { margin-bottom: 10px; }
.sample-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 8px; font-size: 12px; }
.sample-downloads a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dito-color-deep-red); text-underline-offset: 3px; }
.sample-result-label { margin: 0 0 10px; color: var(--ui-muted); font-size: 12px; }

.progress, .error {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--ui-border);
  border-radius: var(--dito-control-radius);
  font-size: 14px;
}

.progress {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--dito-color-surface-paper);
  color: var(--dito-color-ink);
}

.progress { flex-wrap: wrap; }
.progress #progress-text { flex: 1 1 100%; }
.progress-bar { flex: 1 1 100%; height: 3px; overflow: hidden; border-radius: 3px; background: var(--ui-border); }
.progress-bar i { display: block; width: 100%; height: 100%; background: var(--dito-color-signal-red); transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform var(--dito-motion-detail) var(--dito-motion-settle-easing); }

.error {
  font-size: 18px;
  overflow-wrap: anywhere;
  border-color: var(--dito-color-signal-red);
  background: var(--dito-color-white);
  color: var(--dito-color-deep-red);
}


.has-result:not(.is-comparing) .workspace { display: none; }
#results { margin: 8px 0 28px; }
/* The pair in the upload slots' words, with the quiet way to start over; the paid next-use line sits below the report download. */
.result-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; padding: 0 0 18px; }
.result-files > div { min-width: 0; flex: 1; }
.result-files > div > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-bottom: 4px; color: var(--ui-muted); font-size: 13px; }
.result-file-role { color: var(--dito-color-surface-charcoal); font: 700 12px/1.4 var(--dito-font-body); letter-spacing: var(--dito-label-letter-spacing); text-transform: uppercase; }
.result-files > div + div .result-file-role { color: var(--dito-color-outcomes-red); }
.result-file-description::before { content: "·" / ""; margin-right: 8px; }
.result-files b { display: block; overflow-wrap: anywhere; font-size: 15px; font-weight: 400; }
.result-files button { flex-shrink: 0; min-height: var(--dito-touch-target); font-size: 14px; }
#results > .repeat-offer { margin: 18px 0 0; font-size: 18px; line-height: 1.5; color: var(--ui-muted); }
.result-summary { padding: 26px 30px 22px; border: 1px solid var(--ui-border); border-left: 3px solid var(--dito-color-signal-red); border-radius: 7px; background: var(--dito-color-white); color: var(--dito-color-ink); margin-bottom: 20px; }
.result-summary:is(.unchanged, .identical) { border-left-color: var(--dito-color-ink); }
/* Without listed changes (identical, unchanged or a free incomplete result) the summary and the report are one
   centered card: what was established, then the report with its one download last. No empty half, no dead end. */
#results:has(> .report-overview[data-layout="single"]) > :is(.result-files, .report-overview, .repeat-offer, .sample-result-label, .additional-reading) { width: 100%; max-width: 820px; margin-inline: auto; }
.report-overview[data-layout="single"] { display: block; margin-top: 4px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--dito-color-white); box-shadow: 0 20px 55px -25px #11111133; }
.report-overview[data-layout="single"] .result-summary { margin: 0; padding: 36px 40px 30px; border: 0; border-radius: 0; }
.report-overview[data-layout="single"] .result-heading p { margin-top: 10px; max-width: 56ch; color: var(--ui-muted); font-size: 18px; }
/* A clean result earns a quiet ink check, drawn in after the heading settles. */
.report-overview[data-layout="single"] .result-summary:is(.identical, .unchanged) .result-heading::before {
  content: ""; display: block; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%;
  background: var(--dito-color-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.report-overview[data-layout="single"] .report-section { position: static; padding: 26px 40px 32px; border: 0; border-top: 1px solid var(--ui-border); border-radius: 0; background: var(--dito-color-surface-paper); box-shadow: none; }
/* Two files that are not versions of one document: stop before scanning and let the customer choose. */
.relation-stop, .offer { max-width: 760px; margin: 8px 0 28px; padding: 28px 30px; border: 1px solid var(--ui-border); border-left: 3px solid var(--dito-color-signal-red); border-radius: 7px; background: var(--dito-color-white); }
.relation-stop h2, .offer h2 { margin: 0 0 10px; font: 400 clamp(28px, 3vw, 38px)/1.15 var(--dito-font-display); letter-spacing: -.02em; }
.relation-stop h2:focus, .offer h2:focus { outline: none; }
.relation-stop p, .offer > p { margin: 0 0 22px; font-size: 17px; line-height: 1.55; color: var(--ui-muted); }
.relation-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 720px) { .relation-stop, .offer { padding: 22px 18px; } .relation-actions > * { flex: 1 1 100%; } }

/* The report offer (David, October 5): the /member purchase language. A white page head (eyebrow, Georgia heading,
   lead), then the Ink stage holding one white summary: its title row with the quiet Choose other files, the pair in
   the upload slots' words, what the report holds, the files' privacy and the recurring choice, then the one red action
   as the last element. The stage runs to the foot of the page, as the /member chooser does. */
#results:has(> .offer-sale) { display: flex; flex: 1 0 auto; flex-direction: column; margin-bottom: 0; }
html:has(.offer-sale) { background: var(--dito-color-ink); }
.offer.offer-sale { display: flex; flex: 1 0 auto; flex-direction: column; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.offer-sale > .sample-result-label { margin: 0 0 6px; font-size: 12px; }
.offer-head { padding: 14px 0 30px; }
.offer-eyebrow { margin: 0 0 12px; color: var(--ui-muted); font: 700 13px/1.4 var(--dito-font-body); letter-spacing: var(--dito-label-letter-spacing); text-transform: uppercase; }
.offer-sale h2 { margin: 0; font: 400 clamp(34px, 3.4vw, 44px)/1.12 var(--dito-font-display); letter-spacing: -.02em; }
.offer-lead { max-width: 60ch; margin: 12px 0 0; color: var(--ui-muted); font-size: 17px; line-height: 1.5; }
.offer-stage { position: relative; isolation: isolate; flex: 1 0 auto; padding: 36px 0 40px; }
.offer-stage::before, body:has(.offer-sale) footer::before { content: ""; position: absolute; z-index: -1; inset: 0 calc((100% - 100vw) / 2); background: var(--dito-color-ink); }
/* On the stage the footer is the same Ink; its rule moves inside the full-bleed band so no white seam shows. */
body:has(.offer-sale) footer { position: relative; isolation: isolate; border-top-color: transparent; color: var(--dito-color-dark-field-text); }
body:has(.offer-sale) footer::before { top: -1px; box-shadow: inset 0 1px 0 var(--dito-color-border-dark); }
.offer-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; padding: 26px 32px 32px; border-radius: 2px; background: var(--dito-color-white); color: var(--dito-color-ink); }
.offer-card > * { grid-column: 1 / -1; }
.offer-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-bottom: 18px; border-bottom: 1px solid var(--ui-border); }
.offer-card h3 { margin: 0; font: 400 28px/1.15 var(--dito-font-display); letter-spacing: -.02em; }
.offer-card .offer-change { min-height: var(--dito-touch-target); padding: 8px 0; color: var(--ui-muted); font: 400 16px/1.4 var(--dito-font-body); }
.offer-card .offer-change:hover { color: var(--dito-color-ink); }
.offer-documents { display: grid; grid-template-columns: subgrid; row-gap: 16px; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--ui-border); }
.offer-document { display: grid; align-content: start; gap: 6px; min-width: 0; }
/* Each file keeps its upload slot's mark: charcoal for the original, Outcomes Red for the signing copy. */
.offer-document dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--ui-muted); font-size: 15px; }
.offer-document-role { color: var(--dito-color-surface-charcoal); font: 700 14px/1.4 var(--dito-font-body); letter-spacing: var(--dito-label-letter-spacing); text-transform: uppercase; }
.offer-document + .offer-document .offer-document-role { color: var(--dito-color-outcomes-red); }
.offer-document-description::before { content: "·" / ""; margin-right: 8px; }
.offer-document dd { display: grid; gap: 2px; margin: 0; }
.offer-document-name { font-size: 18px; line-height: 1.45; overflow-wrap: anywhere; }
.offer-document-pages { color: var(--ui-muted); font-size: 18px; }
.offer-includes { display: grid; grid-template-columns: subgrid; row-gap: 8px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--ui-border); list-style: none; }
.offer-includes li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.5; }
.offer-includes li::before { content: ""; position: absolute; top: 11px; left: 2px; width: 8px; height: 2px; background: var(--dito-color-signal-red); }
/* The purchase keeps createPurchase's controls in its order: facts and the recurring choice, status, then the action. */
.offer-card .purchase { gap: 0; }
.offer-card .purchase .report-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "note membership" "status status" "actions actions"; gap: 0 32px; padding-top: 18px; }
.offer-card .purchase-privacy { grid-area: note; align-self: center; max-width: 64ch; color: var(--ui-muted); font-size: 18px; line-height: 1.5; }
.purchase-membership { grid-area: membership; display: grid; justify-items: end; align-self: center; gap: 2px; color: var(--dito-color-ink); text-align: right; text-decoration: none; }
.purchase-membership-name { font-size: 16px; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; }
.purchase-membership-terms { max-width: 36ch; color: var(--ui-muted); font-size: 18px; line-height: 1.4; }
.purchase-membership:hover .purchase-membership-name { text-decoration-thickness: 2px; }
.offer-card .purchase .report-status { grid-area: status; margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid var(--dito-color-signal-red); background: var(--dito-color-surface-paper); color: var(--dito-color-ink); font-size: 16px; line-height: 1.5; }
.offer-card .purchase .report-actions { grid-area: actions; margin-top: 20px; }
.offer-card .purchase .report-actions > .primary { min-height: var(--dito-control-height); }

@media (max-width: 760px) {
  .offer-head { padding: 4px 0 22px; }
  .offer-sale h2 { font-size: 30px; }
  .offer-lead { font-size: 16px; }
  .offer-stage { padding: 18px 0 24px; }
  .offer-card { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 16px; }
  .offer-card-head { padding-bottom: 10px; }
  .offer-card h3 { font-size: 24px; }
  .offer-documents { row-gap: 12px; padding: 14px 0; }
  .offer-document + .offer-document { padding-top: 12px; border-top: 1px solid var(--ui-border); }
  .offer-document-name { font-size: 16px; }
  .offer-includes { row-gap: 4px; padding: 14px 0; }
  .offer-includes li { font-size: 15px; }
  .offer-card .purchase .report-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "note" "membership" "status" "actions"; padding-top: 14px; }
  .offer-card .purchase-privacy { font-size: 18px; }
  .purchase-membership { justify-items: start; margin-top: 10px; text-align: left; }
  .offer-card .purchase .report-status { margin-top: 14px; font-size: 15px; }
  .offer-card .purchase .report-actions { margin-top: 16px; }
  /* The action and its price stay on one line at 320–390. */
  .offer-card .purchase .report-actions > .primary { padding-inline: 12px; font-size: 16px; }
  /* The shared phone bar pins report actions for long results; this short offer keeps its one action in place. */
  .offer-card .purchase .report-actions { position: static; z-index: auto; padding: 0; border-top: 0; background: none; box-shadow: none; }
  #results:has(> .offer-sale) { padding-bottom: 0; }
}
.result-heading h2 { margin: 0 0 8px; font: 400 clamp(30px, 3vw, 40px)/1.12 var(--dito-font-display); letter-spacing: -.02em; }
.result-heading p { margin: 0; font-size: 16px; line-height: 1.5; }

.result-scope { margin: 8px 0 0; color: var(--ui-muted); font-size: 14px; line-height: 1.5; }
.coverage-summary { margin-top: 20px; border-top: 1px solid var(--ui-border); padding-top: 18px; max-width: 76ch; }
.coverage-item + .coverage-item { margin-top: 16px; }
.coverage-item strong { font-size: 16px; line-height: 1.5; }
.coverage-pages { display: inline-block; margin-left: 12px; padding: 2px 8px; background: var(--dito-color-surface-paper); border: 1px solid var(--ui-border); border-radius: 4px; font-size: 14px; }
.coverage-item p, .coverage-details p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; }
.coverage-details { margin-top: 8px; font-size: 14px; }
.coverage-details summary { min-height: 44px; padding: 12px 0; cursor: pointer; width: fit-content; }
.coverage-details ul { list-style: none; margin: 8px 0; padding: 0; }
.coverage-details li + li { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ui-border); }
.coverage-details strong { font-size: 14px; }
.technical summary, .page-evidence summary { width: fit-content; min-height: 44px; padding: 12px 0; cursor: pointer; }
.review-navigation-controls button, .technical button { padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: 4px; background: white; color: var(--dito-color-surface-charcoal); font-size: 12px; }

.review-layout {
  display: grid;
  grid-template-columns: 162px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.page-navigation {
  position: sticky;
  top: 16px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--dito-color-white);
}

.page-navigation h3 {
  margin: 0;
  padding: 13px 13px 0;
  color: var(--dito-color-surface-charcoal);
  font: 700 13px/1.4 var(--dito-font-body);
  letter-spacing: var(--dito-label-letter-spacing);
  text-transform: uppercase;
}

.page-nav-summary {
  margin: 0;
  padding: 4px 13px 11px;
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-muted);
  font-size: 12px;
}

.page-nav-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 6px;
}

.page-nav-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 61px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--dito-color-surface-charcoal);
  font-size: 12px;
  text-align: left;
}

.page-nav-item:hover {
  background: var(--ui-canvas);
}

.page-nav-item[aria-current="true"] {
  border-color: var(--dito-color-signal-red);
  background: var(--dito-color-change-tint);
  color: var(--dito-color-deep-red);
}

.page-nav-item.unchanged[aria-current="true"], .page-nav-item.failed[aria-current="true"] {
  border-color: var(--dito-color-ink);
  background: var(--ui-canvas);
  color: var(--dito-color-ink);
}

.page-nav-number {
  font-size: 12px;
  font-weight: 600;
}

.page-nav-label {
  font-size: 12px;
  line-height: 1.35;
}

.review-stage, .page-viewport {
  min-width: 0;
}

.review-navigation-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-left: auto;
}

.review-deck { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: 4px; background: var(--ui-canvas); }
.review-deck-status { margin: 0; font-size: 14px; line-height: 1.5; }
.review-deck-status:focus-visible { outline: 3px solid var(--dito-color-signal-red); outline-offset: 3px; }
/* Horizontal swipes belong to the flagged deck. touch-action stops at the nearest scroll container, so the page
   scrollers need it too. */
.review-stage :is(.page-viewport, .preview-scroll) { touch-action: pan-y pinch-zoom; }
.page-position {
  color: var(--ui-muted);
  font-size: 12px;
}

.page-result {
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--dito-color-white);
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--ui-border);
}

.page-heading h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  font-size: 13px;
}

.outcome-tag {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--dito-color-change-tint);
  color: var(--dito-color-deep-red);
  font: 700 12px/1.4 var(--dito-font-body);
  letter-spacing: var(--dito-label-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

.outcome-tag.neutral {
  background: var(--ui-canvas);
  color: var(--ui-muted);
}

[data-outcome="failed"] .outcome-tag {
  background: var(--dito-color-ink);
  color: var(--dito-color-white);
}

.page-note {
  margin: 0;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--dito-color-surface-paper);
  color: var(--ui-muted);
  font-size: 12px;
}

[data-outcome="failed"] .page-note {
  color: var(--dito-color-ink);
}

.page-evidence {
  padding: 0 16px;
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-muted);
  font-size: 12px;
}

.page-evidence p {
  margin: 0 0 12px;
}

.preview-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  background: var(--ui-canvas);
}

.preview {
  min-width: 0;
  margin: 0;
  padding: 0 14px 14px;
}

.preview + .preview {
  border-left: 1px solid var(--ui-border);
}

.preview figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  align-items: center;
  margin: 0 -14px 14px;
  padding: 14px 18px;
  background: var(--dito-color-surface-charcoal);
  color: var(--dito-color-white);
  font-size: 14px;
}
.preview + .preview figcaption { background: var(--dito-color-outcomes-red); }

.preview figcaption b {
  color: inherit;
  font-weight: 600;
}

.preview figcaption span {
  overflow: hidden;
  max-width: 75%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ui-border);
  background: var(--dito-color-white);
  box-shadow: 0 2px 5px #1111110a;
}

.missing-page {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 20px;
  border: 1px dashed var(--ui-border);
  background: var(--ui-canvas);
  color: var(--ui-muted);
  font-size: 12px;
  text-align: center;
}

.technical {
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px solid var(--ui-border);
  color: var(--ui-muted);
  font-size: 12px;
}

.technical dl {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  margin: 5px 0 14px;
}

.technical dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.technical code {
  font-size: 12px;
}

/* Jeremy's footer row: the dito mark with its line, then the policies. 18px minimum. */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 22px 0 24px;
  color: var(--ui-muted);
  font-size: 18px;
}

footer p {
  margin: 0;
}

footer p span {
  padding: 0 4px;
}

footer a {
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

footer .policy-links { gap: 8px 20px; font-size: 18px; }
footer .policy-links a { display: inline-flex; align-items: center; min-height: 24px; }
.footer-brand:not(img) { width: auto; }
.footer-brand { display: inline-block; width: 64px; height: auto; margin-right: 18px; vertical-align: middle; }

@media (max-width: 1000px) {
  .review-layout { grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
  .page-nav-item { padding: 9px 7px; }
}

@media (max-width: 720px) {
  .site-header { min-height: var(--dito-header-height-mobile); padding: 10px 6%; gap: 12px; flex-wrap: wrap; }
  .wordmark img { width: 80px; }
  .site-header .text-button { font-size: 16px; }
  #sign-out { margin-left: 0; }
  main { padding: 0 16px; }
  .workspace form { padding: 12px; }
  .file-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .file-card { min-height: 0; }
  .file-label { padding: 12px; gap: 4px; font-size: 12px; }
  .file-label-description { font-size: 20px; }
  .file-body { margin: 8px; padding: 12px; gap: 8px; }
  .file-card svg { display: none; }
  .file-action { min-height: 44px; padding: 10px 14px; font-size: 15px; }
  .comparison-action-area { width: 100%; align-items: stretch; }
  #selection-status { max-width: none; text-align: center; }
  .file-card strong { font-size: 18px; }
  .action-row { flex-direction: column; align-items: stretch; gap: 9px; }
  .action-row > p { font-size: 18px; }
  .comparison-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; }
  .comparison-actions .text-button { flex: 1 1 120px; }
  .comparison-actions .primary { flex: 1 1 100%; min-width: 0; white-space: normal; }
  .offer-line { flex: 1 1 100%; max-width: none; text-align: left; }
  .primary { flex: 1; }
  .sample-library { padding: 18px 14px; }
  .sample-heading h2 { font-size: 20px; }
  .sample-badge { display: none; }
  .sample-filters, .sample-choice { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sample-library select, .sample-library input { font-size: 16px; }
  #results { margin-top: 0; }
  .result-files { flex-wrap: wrap; gap: 10px 16px; padding-bottom: 14px; }
  .result-files > div { flex-basis: calc(50% - 8px); }
  .result-files button { padding: 0; min-height: 44px; }
  .result-summary { padding: 22px 18px 18px; margin-bottom: 14px; }
  .result-heading { gap: 10px; }
  .result-heading h2 { font-size: 26px; }
  .result-heading p { font-size: 14px; }
  .result-scope { font-size: 14px; }
  .coverage-pages { margin-left: 0; display: table; margin-top: 6px; }
  .result-tools { gap: 8px 16px; margin-top: 14px; }
  .result-tools .primary { flex: 0 1 auto; }
  .review-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .page-navigation { position: static; }
  .page-navigation h3, .page-nav-summary { display: none; }
  .page-nav-summary { padding: 2px 12px 8px; }
  .page-nav-list { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .page-nav-item { flex: 0 0 120px; min-height: 59px; padding: 8px; }
  .review-navigation-controls { gap: 6px; flex: 1; }
  .review-navigation-controls button { padding: 8px; font-size: 12px; }
  .page-position { font-size: 12px; text-align: center; }
  .page-heading { flex-wrap: wrap; padding: 8px 12px; }
  .page-heading h3 { gap: 7px; font-size: 12px; }
  .page-note { padding: 9px 12px; font-size: 12px; }
  .page-evidence { padding: 0 12px; }
  .preview-pair { grid-template-columns: minmax(0, 1fr); }
  .preview { padding: 0 12px 12px; }
  .preview figcaption { margin: 0 -12px 12px; padding: 12px; }
  .preview + .preview { border-top: 1px solid var(--ui-border); border-left: 0; }
  .technical dl { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .technical dd { margin-bottom: 9px; }
  footer { gap: 8px 16px; padding: 18px 0; }
}

.text-review, .local-reading { margin-top: 24px; border-top: 1px solid var(--dito-color-border); padding-top: 16px; }
.text-review h4, .local-reading h4 { font-size: 18px; margin: 0 0 8px; }
.text-change { margin: 20px 0; }
.page-distinctions > .text-review:first-child { margin-top: 0; border-top: 0; }
.source-heading { margin: 28px 0 12px; }
.text-change h5 { font-size: 15px; margin: 0 0 8px; }
.text-pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.text-pair pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 16px/1.5 var(--dito-font-body); padding: 12px; border-radius: 4px; }
.text-pair .removed { background: var(--ui-canvas); color: var(--ui-muted); border-left: 3px solid var(--ui-muted); }
.text-pair .added { background: var(--dito-color-change-tint); color: var(--dito-color-signal-red); border-left: 3px solid var(--dito-color-signal-red); }
.text-context { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ui-muted); font-size: 14px; }
@media (max-width: 600px) { .text-pair { grid-template-columns: 1fr; gap: 0; } }

/* The review shows one fixed view: full source pages with the measured change framed. No view tools. */
.review-stage { position: relative; }
.text-change[hidden] { display: none; }
.preview-scroll { overflow: auto; padding: 8px; }
.page-surface { position: relative; }
.change-marquee { position: absolute; left: calc(var(--frame-x) - 6px); top: calc(var(--frame-y) - 6px); width: calc(var(--frame-width) + 12px); height: calc(var(--frame-height) + 12px); border: 2px solid var(--dito-color-signal-red); border-radius: 4px; box-shadow: 0 0 0 2px #d92d2012, 0 0 8px 3px #d92d2040, inset 0 0 5px #d92d2018; pointer-events: none; }
.inspection-panel { padding: 0 20px; border-top: 1px solid var(--ui-border); background: var(--dito-color-surface-paper); font-size: 14px; overflow-wrap: anywhere; }
.inspection-panel summary { display: list-item; cursor: pointer; padding: 14px 0; min-height: var(--dito-touch-target); font-weight: 700; }
.inspection-panel[open] { padding-bottom: 20px; }
.inspection-panel h5 { font-size: 14px; margin: 0 0 8px; }
.inspection-side { padding: 16px; margin-top: 14px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--dito-color-white); }
.inspection-side ul { padding-left: 20px; }
.inspection-side li { margin: 8px 0; }
.text-review, .local-reading { padding: 18px; scroll-margin-top: 84px; }
@media (max-width: 720px) { .inspection-panel { padding: 0 12px; } .text-review, .local-reading { padding: 12px; } }

/* Optional interpretation follows the same light evidence surfaces and red action hierarchy. */
.interpretation{margin:20px 0;background:var(--dito-color-white);border:1px solid var(--dito-color-border);border-radius:7px;padding:24px;color:var(--dito-color-ink)}
.interpretation mark{background:var(--dito-color-surface-paper);color:var(--dito-color-ink);text-decoration:underline;text-decoration-color:var(--dito-color-signal-red);text-underline-offset:3px}
.interpretation summary{font:600 20px/1.4 var(--dito-font-body);cursor:pointer;min-height:44px}
.interpretation p{font:16px/1.6 var(--dito-font-body);max-width:76ch}
.interpretation-model,.interpretation-source,.interpretation-allowance{color:var(--dito-color-secondary-text)}
.interpretation form>label:not(.interpretation-consent){display:block;margin:20px 0 8px;font-weight:600}
.interpretation select,.interpretation textarea{width:100%;max-width:100%;font:16px/1.5 var(--dito-font-body);padding:12px;border:1px solid var(--dito-color-border);border-radius:7px;background:var(--dito-color-white);color:var(--dito-color-ink)}
.interpretation-excerpt{margin:20px 0;padding:16px;background:var(--dito-color-surface-paper);border:1px solid var(--dito-color-border);border-radius:7px}
.interpretation pre{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.6 var(--dito-font-body)}
.interpretation-consent{display:flex;align-items:flex-start;gap:12px;margin:20px 0;font:16px/1.6 var(--dito-font-body);cursor:pointer}
.interpretation-consent input{flex:none;width:22px;height:22px;margin:3px 0}
.interpretation-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.interpretation-answer{border-left:3px solid var(--dito-color-signal-red);padding:8px 20px;margin-top:24px;overflow-wrap:anywhere}
.interpretation-answer h3{font:600 22px/1.3 var(--dito-font-body)}
.interpretation-answer p{white-space:pre-wrap}.interpretation-limit{color:var(--dito-color-secondary-text)}
@media(max-width:600px){.interpretation{padding:16px}.interpretation .primary{width:100%}.interpretation-excerpt{padding:12px}}

.local-reading pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.local-reading select { max-width: 100%; min-height: 44px; }

.has-result.is-comparing .file-grid, .has-result.is-comparing #sample-library, .has-result.is-comparing .action-row > p, .has-result.is-comparing #compare, .has-result.is-comparing #marketing-offer,
.is-scanning .file-grid, .is-scanning #sample-library, .is-scanning .action-row > p, .is-scanning #compare, .is-scanning #marketing-offer { display: none; }


/* First comparison: choose the pair, inspect its evidence, then keep the report. */
.selection-heading { margin-bottom: 20px; text-align: center; }
.selection-heading h1 { margin: 0; font: 400 clamp(40px, 3.5vw, 48px)/1.1 var(--dito-font-display); letter-spacing: -.035em; }
.report-jump { display: inline-flex; align-items: center; min-height: var(--dito-touch-target); margin-top: 8px; font-weight: 600; text-underline-offset: 4px; }
/* The report card: the /member summary's white card, its note and status on one line, the download last. */
.report-section { position:sticky; top:16px; margin:0; padding:26px 28px 28px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--dito-color-white); box-shadow: 0 20px 55px -25px #11111133; scroll-margin-top: 24px; }
.report-section .payment-heading h3 { margin: 0; }
.report-note-line { display: grid; }
.report-note-line > * { grid-area: 1 / 1; margin: 0; color: var(--ui-muted); font-size: 15px; line-height: 1.5; transition: opacity var(--dito-motion-detail) var(--dito-motion-settle-easing); }
.report-note-line > .report-status { display: block; color: var(--dito-color-ink); }
.report-note-line > .report-status:empty, .report-note-line:has(> .report-status:not(:empty)) > .report-session-note { opacity: 0; }
.report-section .report-actions > .primary { min-height: var(--dito-control-height); }
.report-section:focus { outline: 3px solid var(--dito-color-signal-red); outline-offset: 3px; }
.additional-reading:empty { display: none; }
/* On phones the report card scrolls with the page: a sticky card would trap its fixed action bar under the deck. */
@media (max-width:760px) { .selection-heading h1 { font-size: 36px; } .report-section { position: static; padding: 20px 16px; } }
@media (max-width:760px) {
  .report-overview[data-layout="single"] .result-summary { padding: 24px 18px 20px; }
  .report-overview[data-layout="single"] .result-heading p { font-size: 16px; }
  .report-overview[data-layout="single"] .result-summary:is(.identical, .unchanged) .result-heading::before { width: 36px; height: 36px; margin-bottom: 14px; background-size: 20px; }
  .report-overview[data-layout="single"] .report-section { padding: 20px 18px 18px; }
  /* A short result keeps its download in the card; the pinned phone bar is for long finding lists. */
  .report-overview[data-layout="single"] .report-actions { position: static; z-index: auto; padding: 0; border-top: 0; background: none; box-shadow: none; }
  #results:has(> .report-overview[data-layout="single"]) { padding-bottom: 0; }
  .offer.kept { padding: 22px 18px 18px; }
  /* Each file takes the full line, so its role and description read as one label. */
  .result-files > div { flex-basis: 100%; }
}
/* Offer and report choreography, in the /member vocabulary: the head settles, the summary card arrives like the account
   panel, a new status eases its space open over the plan duration and a clean result's check lands last. */
@media (prefers-reduced-motion: no-preference) {
  .offer-head > * { animation: dito-settle-in var(--motion-arrive) var(--dito-motion-settle-easing) backwards; }
  .offer-head > .offer-lead { animation-delay: var(--motion-step); }
  .offer-card { animation: dito-document-arrive var(--dito-motion-document-arrive) var(--dito-motion-settle-easing) calc(var(--motion-step) * 2) backwards; }
  .offer-card .purchase .report-status { overflow: clip; overflow-clip-margin: 8px; animation: dito-notice-open var(--dito-motion-plan) var(--dito-motion-control-easing) backwards; }
  .report-overview[data-layout="single"] .result-summary:is(.identical, .unchanged) .result-heading::before { animation: dito-review-check var(--dito-motion-plan) var(--dito-motion-plan-easing) var(--dito-motion-detail) backwards; }
}


/* Comparison journey choreography. Shared keyframes, timing and reduced motion live in customer.css. */
@keyframes dito-fade-in { from { opacity: 0; } }
/* A notice or error eases its space open, like a disclosure, instead of pushing the content below it down at once. */
@keyframes dito-notice-open { from { block-size: 0; padding-block: 0; margin-block: 0; border-block-width: 0; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .workspace { animation: dito-document-arrive var(--dito-motion-document-arrive) var(--dito-motion-settle-easing) var(--motion-step) backwards; }
  .progress { animation: dito-settle-in var(--motion-arrive) var(--dito-motion-settle-easing) backwards; }
  .file-card.selected svg { animation: dito-review-check var(--dito-motion-feedback-max) var(--dito-motion-settle-easing) backwards; }
  /* A transformed ancestor would move the fixed floating toolbar, so the review layout only fades. */
  .review-layout[data-motion] { animation-name: dito-detail-fade; }
  /* Page images and the change frame are measured evidence: they cross-fade only, never shift. */
  .page-viewport > .page-result > :not(.page-heading) { animation: dito-detail-fade var(--dito-motion-detail) var(--dito-motion-settle-easing) backwards; }
  /* Like the marketing marker stroke, the change frame lands after its page settles. It only fades:
     the frame locates measured evidence and must never be displaced, even briefly. */
  .change-marquee { animation: dito-fade-in var(--dito-motion-plan) var(--dito-motion-settle-easing) var(--dito-motion-detail) backwards; }
  /* Each page pair settles in as it finishes, then pulses once like the marketing page-pair check: real work only. */
  #results > [data-motion="arrive"] { animation: dito-settle-in var(--motion-arrive) var(--dito-motion-settle-easing) backwards, dito-page-check var(--dito-motion-page-check) ease var(--motion-arrive); }
  .coverage-item { animation: dito-coverage-read var(--dito-motion-coverage-read) ease calc(var(--motion-step) * 2) backwards; }
  .toolbox[open] { animation: dito-settle-in var(--dito-motion-feedback-max) var(--dito-motion-settle-easing); }
  .toolbox[open]::backdrop { animation: dito-fade-in var(--dito-motion-feedback-max) ease; }
  .review-view-notice, #error { overflow: clip; overflow-clip-margin: 8px; animation: dito-notice-open var(--dito-motion-disclosure) var(--dito-motion-settle-easing) backwards; }
}
@media (max-width: 760px) { .workspace { animation-duration: var(--motion-arrive); } }
/* Findings once (October 1): changes are listed in the result; the page review keeps the evidence. */
.finding-group { display: grid; gap: 8px; margin: 0 0 18px; }
.finding-page-link { justify-self: start; font-size: 18px; }
.page-listed-above { margin: 8px 0 0; color: var(--ui-muted); font-size: 15px; }
/* Secondary path for a visitor without documents at hand (D-015): quiet, never competing with the primary action. */
.sample-report-link { display: inline-flex; align-items: center; min-height: 24px; margin-top: 2px; color: var(--dito-color-secondary-text); font-size: 18px; text-underline-offset: 3px; }
.sample-report-link:hover { color: var(--dito-color-ink); }
.kept { margin: 0 0 18px; }
/* A kept report reads like the report card: title row with its quiet way out, the facts, the download last. */
.offer.kept { max-width: 820px; padding: 28px 32px 32px; border-left-width: 1px; box-shadow: 0 20px 55px -25px #11111133; }
#results > .offer.kept { margin: 8px auto 28px; }
.kept-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-bottom: 10px; }
.kept-head h2 { margin: 0; }
.kept-head .text-button { min-height: var(--dito-touch-target); font-size: 15px; }
.offer.kept > .page-note { margin: 0 0 18px; padding: 0; border: 0; background: none; font-size: 14px; }
.offer.kept > .repeat-offer { margin: 0 0 18px; color: var(--ui-muted); font-size: 14px; }
.offer.kept > .primary { width: 100%; }

/* Scan timeline (David, October 2): the ditoit.com laser walkthrough at lower intensity, on this run's own pages.
   Same art direction: an ink file header and an Outcomes Red one, paper sheets on a charcoal panel, corner marks, a
   faint grid, one reading-direction beam and a traced ring. Live used four beam directions, flares and a 14% trail
   (index.DF69W2s_.css, October 1 capture); here one beam, a softer trail and no flare. --scan-pass is the live
   continuous beam period, played once per finished page pair. Only real work moves it (apps/app/scan.ts). */
.scan {
  --scan-pass: 1.8s; --scan-sheet: 340px;
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, 1fr);
  margin-top: 18px; border-radius: var(--dito-radius-panel) var(--dito-radius-panel) 0 0; overflow: hidden;
  background: var(--dito-color-outcomes-panel); color: var(--dito-color-white);
}
.scan[hidden] { display: none; }
.scan-stage { position: relative; display: grid; align-content: start; gap: 12px; padding: 20px 20px 16px; background: var(--dito-color-ink); }
.scan-papers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scan-paper { display: grid; justify-items: center; gap: 10px; min-width: 0; margin: 0; }
.scan-paper figcaption {
  justify-self: stretch; padding: 9px 12px; border-radius: 4px; background: var(--dito-color-surface-charcoal);
  font: 700 12px/1.25 var(--dito-font-body); letter-spacing: -.04em; text-transform: uppercase; text-align: center;
}
.scan-paper[data-side="revised"] figcaption { background: var(--dito-color-outcomes-red); }
/* The sheet takes the page's proportions (--ratio from scan.ts), so measured frames land on the image exactly. */
.scan-sheet {
  --ratio: .7727; position: relative; width: min(100%, calc(var(--scan-sheet) * var(--ratio))); aspect-ratio: var(--ratio);
  overflow: hidden; background: var(--dito-color-surface-paper); box-shadow: 0 1px 3px #0006;
}
.scan-sheet img { display: block; width: 100%; height: 100%; }
.scan-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; color: var(--dito-color-secondary-text); font-size: 13px; text-align: center; }
.scan-grid { position: absolute; inset: 0; background-image: linear-gradient(#d92d200d 1px, transparent 1px), linear-gradient(90deg, #d92d200d 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }
.scan-corners { position: absolute; inset: 8px; pointer-events: none; }
.scan-corners i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--dito-color-signal-red); opacity: .85; }
.scan-corners i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.scan-corners i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.scan-corners i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.scan-corners i:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
/* A full-height layer whose lower edge is the line; scan.ts moves it by transform only, so the page never moves. */
.scan-beam {
  position: absolute; inset: 0; transform: translateY(-100%); pointer-events: none; opacity: 0;
  background: linear-gradient(transparent 84%, #d92d2014); border-bottom: 1.5px solid var(--dito-color-signal-red);
  box-shadow: 0 2px 8px #d92d2040;
}
.scan-beam[data-on="true"] { opacity: 1; }
.scan-ring {
  position: absolute; left: calc(var(--frame-x) - 1.5%); top: calc(var(--frame-y) - 1.5%);
  width: calc(var(--frame-width) + 3%); height: calc(var(--frame-height) + 3%); min-width: 14px; min-height: 10px;
  border: 2px solid var(--dito-color-outcomes-red); border-radius: 6px; box-shadow: 0 0 0 3px #df281c1f; pointer-events: none;
}
.scan-ring[hidden] { display: none; }
.scan-readout {
  display: flex; align-items: center; gap: 8px; margin: 0; color: var(--dito-color-dark-field-text);
  font: 700 12px/1.35 var(--dito-font-body); letter-spacing: -.04em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.scan-readout::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dito-color-signal-red); }

.scan-timeline { padding: 22px 24px 18px; border-left: 1px solid var(--dito-color-border-dark); min-width: 0; }
.scan-eyebrow { margin: 0 0 6px; color: var(--dito-color-emphasis-red); font: 700 12px/1.3 var(--dito-font-body); letter-spacing: -.04em; text-transform: uppercase; }
.scan-title { margin: 0 0 20px; font: 400 24px/1.2 var(--dito-font-display); overflow-wrap: anywhere; text-wrap: balance; }
.scan-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.scan-steps li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.scan-steps li:last-child { padding-bottom: 0; }
/* The rail joins each marker to the next; the part behind finished work is red. */
.scan-steps li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--dito-color-border-dark); }
.scan-steps li[data-state="done"]:not(:last-child)::after { background: var(--dito-color-signal-red); }
.scan-marker { width: 14px; height: 14px; margin-top: 2px; border: 2px solid var(--dito-color-border-dark); border-radius: 50%; box-sizing: border-box; }
.scan-steps [data-state="active"] .scan-marker { border-color: var(--dito-color-signal-red); background: radial-gradient(circle, var(--dito-color-signal-red) 0 3px, transparent 3.5px); }
.scan-steps [data-state="done"] .scan-marker { border-color: var(--dito-color-signal-red); background: var(--dito-color-signal-red); }
.scan-steps strong { display: block; font: 700 15px/1.35 var(--dito-font-body); }
.scan-steps [data-state="pending"] strong { color: #8A8A8A; font-weight: 400; }
.scan-detail { display: block; margin-top: 3px; color: var(--dito-color-dark-field-text); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.scan-steps [data-state="pending"] .scan-detail { color: #8A8A8A; }
.scan-ticks { display: flex; flex-wrap: wrap; gap: 3px; margin: 10px 0 0; padding: 0; list-style: none; }
.scan-ticks li { display: block; width: 14px; height: 6px; padding: 0; border-radius: 1px; background: var(--dito-color-surface-charcoal); box-shadow: inset 0 0 0 1px var(--dito-color-border-dark); }
.scan-ticks li::after { display: none; }
.scan-ticks [data-outcome="unchanged"] { background: var(--dito-color-dark-field-text); box-shadow: none; }
.scan-ticks [data-outcome="flagged"] { background: var(--dito-color-signal-red); box-shadow: none; }

/* #progress stays the announced line and the real-share bar; under the scan it becomes the panel's footer. */
.scan:not([hidden]) + .progress {
  margin-top: 0; border: 0; border-top: 1px solid var(--dito-color-border-dark); border-radius: 0 0 var(--dito-radius-panel) var(--dito-radius-panel);
  background: var(--dito-color-outcomes-panel); color: var(--dito-color-white); animation: none;
}
.scan:not([hidden]) + .progress .progress-bar { background: var(--dito-color-surface-charcoal); }

@media (prefers-reduced-motion: no-preference) {
  .scan { animation: dito-settle-in var(--motion-arrive) var(--dito-motion-settle-easing) backwards; }
  .scan-ticks [data-outcome] { animation: dito-fade-in var(--dito-motion-detail) ease backwards; }
}
@media (prefers-reduced-motion: reduce) { .scan-beam { display: none; } }
@media (max-width: 900px) {
  .scan { grid-template-columns: 1fr; --scan-sheet: 260px; }
  .scan-timeline { border-left: 0; border-top: 1px solid var(--dito-color-border-dark); }
}
@media (max-width: 760px) {
  .scan { --scan-sheet: 210px; }
  .scan-stage { padding: 14px 14px 12px; }
  .scan-papers { gap: 10px; }
  .scan-paper figcaption { padding: 8px 6px; font-size: 11px; }
  .scan-timeline { padding: 18px 16px 16px; }
  .scan-title { font-size: 21px; margin-bottom: 16px; }
}
@media print { .scan { display: none; } }

/* Merge of Jeremy's upload layout (David, October 5) with the first-screen rule and the 18px readability floor: both
   slots and Check my contract stay above the fold on phones. Wording, headings and slot proportions are unchanged.
   The ditoit.com arrival adds its price line above the action, so on phones its privacy/limits lines follow the action. */
@media (max-width: 720px) {
  body[data-arrival="marketing"] .comparison-action-area { order: 1; }
  body[data-arrival="marketing"] .action-row > p { order: 2; }
}
/* The smallest phones (320×680) tighten the spacing and always place the privacy/limits lines after the action. */
@media (max-width: 360px) {
  main { margin-top: 12px; }
  .workspace form { padding: 10px; }
  .selection-heading { margin-bottom: 12px; }
  .file-body { padding: 8px 12px; }
  .comparison-action-area { order: 1; }
  .action-row > p { order: 2; }
  /* The arrival's price line reads directly under the action it pays for. */
  #marketing-offer { order: 2; }
  /* 16px header links stay on one line beside a smaller wordmark. */
  .site-header { gap: 8px; flex-wrap: nowrap; }
  .wordmark img { width: 60px; }
  .site-header .text-button { white-space: nowrap; }
}

/* Beside an open card checkout, Confirm your report is a quiet link above the one red action (David, October 5: one
   button, nothing below it). Its visibility stays with the purchase logic; only its weight and place change here. */
#results .offer-card .purchase .report-actions > .purchase-confirm { order: -1; align-self: flex-start; width: auto; min-height: var(--dito-touch-target); padding: 8px 0; border: 0; background: none; color: var(--dito-color-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Readability floor on the offer and the result (Jeremy ledger and David's 18px rule, October 5): 18px body and meta,
   20px checklist and action, at every width. Findings keep the same floor in both the list and page review. */
#results .offer-sale :is(.offer-eyebrow, .offer-lead, .offer-change, .offer-document dt, .offer-document-role, .offer-document-name, .offer-document-pages, .purchase-privacy, .purchase-membership-name, .purchase-membership-terms, .report-status, .purchase-confirm, .sample-result-label) { font-size: 18px; }
#results .offer-sale .offer-includes li { font-size: 20px; }
#results .offer-sale .offer-includes li::before { top: 14px; }
#results :is(.offer-card .purchase .report-actions > .primary, .report-section .report-actions > .primary, .offer.kept > .primary) { font-size: 20px; text-wrap: balance; }
#results :is(.result-files > div > span, .result-file-role, .result-files b, .result-files button, .repeat-offer, .result-heading p, .report-note-line > *, .result-scope, .coverage-item strong, .coverage-pages, .coverage-item p, .coverage-details, .coverage-details p, .coverage-details strong, .finding-page-link, .page-listed-above, .sample-result-label) { font-size: 18px; }
#results :is(.report-preview, .page-result) :is(.dito-distinction__label, .dito-distinction__side, .dito-distinction__note, .text-evidence > summary) { font-size: 18px; }
#results > .offer.kept :is(.kept-head .text-button, .page-note, .repeat-offer), #results > .offer.kept > p { font-size: 18px; }
body.has-result footer, body.has-result footer .policy-links { font-size: 18px; }
/* No refund promise or hint on the offer or the result (Jeremy ledger #1): the Refunds policy link steps out of the footer
   on these states; Privacy and Terms remain. */
body.has-result footer a[href="https://ditoit.com/refunds"] { display: none; }
/* Check failed (live-gap P1, October 5): the files could not be opened, so no report exists. No report card and no
   download; one centered card says what happened in plain words, names the pair as chosen, and ends with its one action. */
#results > .check-failed { width: 100%; max-width: 820px; margin: 4px auto 28px; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--dito-color-white); box-shadow: 0 20px 55px -25px #11111133; }
.check-failed > .sample-result-label { margin: 0; padding: 18px 40px 0; font-size: 18px; }
.check-failed .result-summary { margin: 0; padding: 36px 40px 28px; border: 0; border-radius: 0; }
.check-failed h2 { margin: 0; font: 400 clamp(30px, 3vw, 40px)/1.12 var(--dito-font-display); letter-spacing: -.02em; }
.check-failed h2:focus { outline: none; }
.check-failed-reason { max-width: 56ch; margin: 12px 0 0; color: var(--dito-color-ink); font-size: 18px; line-height: 1.5; }
.check-failed-footer { display: grid; gap: 22px; padding: 24px 40px 32px; border-top: 1px solid var(--ui-border); background: var(--dito-color-surface-paper); }
.check-failed-files { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 32px; margin: 0; }
.check-failed-files dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--ui-muted); font-size: 18px; }
.check-failed-files .result-file-role { font-size: 18px; }
.check-failed-files div + div .result-file-role { color: var(--dito-color-outcomes-red); }
.check-failed-files dd { margin: 4px 0 0; font-size: 18px; overflow-wrap: anywhere; }
#results .check-failed-footer > .primary { width: 100%; min-height: var(--dito-control-height); font-size: 20px; }
@media (max-width: 760px) {
  .check-failed > .sample-result-label { padding: 16px 18px 0; }
  .check-failed .result-summary { padding: 24px 18px 20px; }
  .check-failed-footer { padding: 18px; }
  .check-failed-files { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  #results > .check-failed { animation: dito-document-arrive var(--dito-motion-document-arrive) var(--dito-motion-settle-easing) backwards; }
}
/* The footer's black dito mark reads white on the offer's Ink stage. */
body:has(.offer-sale) .footer-brand { filter: invert(1); }