/* ==========================================================================
   ACCOMPLY.AI — INNER PAGE COMPONENTS
   Prose, split layouts, and the per-page distinctive diagrams:
   ledger scan (accounting) and control hub (compliance).
   ========================================================================== */

.prose{ max-width: 760px; }
.prose p{ margin-bottom: 18px; font-size: 15.5px; line-height: 1.75; color: var(--ink-dim); }
.prose h3{ margin: 40px 0 14px; }
.prose ul{ margin: 0 0 22px; }
.prose li{ padding-left: 24px; position: relative; margin-bottom: 11px; font-size: 15px; color: var(--ink-dim); line-height: 1.6; }
.prose li::before{ content: '→'; position: absolute; left: 0; color: var(--accent2); font-family: var(--font-mono); }
.on-paper .prose p, .on-paper .prose li{ color: var(--paper-ink-dim); }

.split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.split.rev{ direction: rtl; } .split.rev > *{ direction: ltr; }

.list-check{ display: flex; flex-direction: column; gap: 0; }
.list-check li{ display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-dim); align-items: flex-start; font-size: 14.5px; color: var(--ink-dim); }
.on-paper .list-check li{ border-color: var(--paper-line-dim); color: var(--paper-ink-dim); }
.list-check li .node{ margin-top: 5px; flex: none; }

/* ---------------- ledger scan (accounting) — kept as a dark console panel ---------------- */
.ledger{ font-family: var(--font-mono); font-size: 12.5px; border: 1px solid var(--line-mid-dk); border-radius: var(--radius-md); overflow: hidden; background: var(--black-2); box-shadow: 0 24px 56px -26px rgba(28,34,48,.32); }
.ledger-head{ display: flex; justify-content: space-between; padding: 12px 18px; background: var(--black-3); color: var(--ink-dimmer-dk); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.ledger-row{ display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line-dim-dk); color: var(--ink-dim-dk); transition: background var(--dur-med); }
.ledger-row .status{ color: var(--iris-pale); display: flex; align-items: center; gap: 8px; }
.ledger-row.is-live{ background: var(--black-4); }
.ledger-row.is-live .status{ color: var(--iris-light); }
.ledger-row .status .node{ width: 6px; height: 6px; }

/* ---------------- control hub (compliance) — kept as a dark console panel ---------------- */
.hub-wrap{ display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 20px 44px rgba(28,34,48,.18)); }
.hub-center{ padding: 22px 34px; border: 1px solid var(--iris-light); border-radius: var(--radius-md); background: var(--black-3); color: var(--white); font-family: var(--font-mono); text-align: center; position: relative; }
.hub-center .t{ font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.hub-center .s{ font-size: 10px; color: var(--ink-dimmer-dk); margin-top: 6px; }
.hub-spokes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; width: 100%; }
.hub-chip{ padding: 14px 14px; border: 1px solid var(--line-mid-dk); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11.5px; text-align: center; color: var(--ink-dim-dk); background: var(--black-2); position: relative; letter-spacing: .01em; }
.hub-chip::before{ content: ''; position: absolute; top: -16px; left: 50%; width: 1px; height: 16px; background: var(--line-mid-dk); transform: translateX(-50%); }
@media (max-width: 640px){ .hub-spokes{ grid-template-columns: repeat(2, 1fr); } }

/* generic page cta strip */
.page-cta{ text-align: center; }

@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
}