.spec-panel { padding: 0 24px 44px; }
      .spec-title { font-size: 25px; }
      /* Same reasoning as the checklist: no hover on touch, so the review
         desk arrives already resolved. */
      .rev-row {
        flex-wrap: wrap;
        gap: 5px 10px;
        padding: 8px 2px;
      }
      .rev-q { flex: 1 1 100%; font-size: 14px; color: var(--ink); }
      .rev-a {
        flex: 1 1 auto;
        text-align: left;
        color: var(--graphite);
        font-size: 11px;
      }
      .rev-n { opacity: 1; color: #8f8f89; }
      .rev-state { font-size: 9px; width: 92px; }
      .is-auto .rev-state {
        border-color: var(--ink);
        background: var(--ink);
        color: #ffffff;
      }
      .is-learning .rev-state {
        border-style: dashed;
        border-color: var(--ink);
        color: var(--ink);
      }
      .is-always .rev-state {
        border-style: dotted;
        border-color: var(--graphite);
        color: var(--graphite);
      }
      .spec-inline { margin-bottom: 26px; }
      .spec-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 40px;
        padding: 16px 18px;
      }
      body {
        padding: 0;
        background: var(--paper);
      }
      .page {
        box-shadow: none;
      }
      .hero, .dossier-section {
        padding: 48px 24px;
      }
      /* Same tightening as desktop, hero only — .dossier-section keeps its top. */
      .hero { padding-top: 16px; }
      .hero-title {
        font-size: 32px;
        margin-bottom: 32px;
      }
      .document-viewer {
        margin: 0 -24px;
        border-left: none;
        border-right: none;
      }
      .viewer-header {
        padding: 12px 24px;
      }
      .viewer-body {
        padding: 32px 24px;
      }
      .dense-text {
        font-size: 20px;
      }
      .cap-tabs {
        gap: 2px 18px;
        font-size: 10px;
        margin-bottom: 20px;
      }
      /* One word each on touch: the five full labels wrap to three lines
         at 430px and the bar stops reading as a bar. */
      .cap-full  { display: none; }
      .cap-short { display: inline; }
      /* Touch has no hover, so the citations that the pointer would
         have revealed are simply shown, on their own line. */
      .q-row {
        flex-wrap: wrap;
        gap: 2px 12px;
      }
      .q-cite {
        width: 100%;
        text-align: left;
        white-space: normal;
        opacity: 1;
        color: #a9a9a3;
      }
      .q-foot {
        flex-direction: column;
        gap: 4px;
      }
      /* 104 pages will not stack into rows, and touch has no hover,
         so the strip scrolls by hand with the cuts already shown. */
      .strip-viewport {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: none;
        mask-image: none;
      }
      .split-strip,
      .strip-viewport:hover .split-strip {
        transform: none;
        transition: none;
      }
      .doc-run {
        outline-color: rgba(217, 37, 37, 0.55);
        background: rgba(217, 37, 37, 0.03);
      }
      .doc-run::after { opacity: 1; transform: none; }
      .pg {
        --sk: #c6c6c0;
        background-color: #ffffff;
        border-color: #d8d8d2;
      }
      /* Requirement, document and verdict stack rather than squeeze. */
      .match-row {
        flex-wrap: wrap;
        gap: 5px 10px;
        padding: 8px 2px;
      }
      /* There is no hover on touch, so the checklist arrives resolved
         rather than waiting for a gesture that never comes. */
      .match-group {
        margin-top: 14px;
        color: var(--graphite);
      }
      .match-req { color: var(--ink); }
      .match-doc { color: var(--graphite); font-size: 11px; }
      .match-pp { color: #8f8f89; }
      .match-state { font-size: 9px; width: 92px; }
      .is-approved .match-state { border-color: var(--ink); color: var(--ink); }
      .is-recommended .match-state {
        border-style: dashed;
        border-color: var(--ink);
        color: var(--ink);
      }
      .is-pending .match-state {
        border-style: dotted;
        border-color: var(--graphite);
        color: var(--graphite);
      }
      .is-superseded .match-state { border-color: #b8b8b2; color: #8f8f89; }
      .is-superseded .match-doc { color: #8f8f89; text-decoration: line-through; }
      .is-unassigned .match-req { color: var(--graphite); font-style: italic; }
      .is-unassigned .match-state {
        border-style: dashed;
        border-color: var(--graphite);
        color: var(--graphite);
      }
      .is-gap { border-bottom-color: var(--accent); }
      .is-gap .match-doc { color: var(--accent); }
      .is-gap .match-state {
        border-color: var(--accent);
        background: var(--accent);
        color: #ffffff;
      }
      .match-req {
        flex: 1 1 100%;
        font-size: 14px;
      }
      .match-doc {
        flex: 1 1 auto;
        text-align: left;
      }
      .intake-trigger {
        padding: 20px 24px;
        margin-top: 32px;
      }
      
      .pipeline {
        grid-template-columns: 1fr;
      }
      .pipe-step {
        padding: 24px;
      }
      .pipe-meta {
        margin-bottom: 16px;
      }
      
      .output-split {
        grid-template-columns: 1fr;
        border-left: none;
        border-right: none;
        margin: 0 -24px;
      }
      .output-text, .output-code {
        padding: 32px 24px;
      }

      .logo-strip-section {
        padding: 28px 24px;
      }
      /* Two rows is fine here, so the marks only need to shrink enough that the
         six split 3+3 or 4+2 instead of trailing a lone one. */
      .logo-strip {
        gap: 18px 16px;
        --u: 0.58px;
      }
      .logo-strip-label { margin-bottom: 20px; }
      
      
      .takeover {
        padding: 24px;
        inset: 12px;
      }
      .dropbox {
        padding: 24px;
      }
      .dropbox h2 {
        font-size: 24px;
      }