:root {
  color-scheme: light;
  --canvas: #f4f1ea;
  --paper: #fffefa;
  --ink: #28302a;
  --muted: #777e75;
  --soft-muted: #a1a49b;
  --line: #e4e1d8;
  --green: #365c45;
  --green-soft: #eaf0e8;
  --clay: #bd6348;
  --sand: #ede6d8;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "DM Sans", "Helvetica Neue", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--canvas); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible, summary:focus-visible { outline: 3px solid #87a990; outline-offset: 3px; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.page-shell { width: min(1150px, calc(100% - 72px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
.site-header { height: 69px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfdcd3; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -1px; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px 8px 8px 2px; background: var(--clay); color: white; font-family: var(--serif); font-size: 21px; line-height: 1; }
.brand-period, .heading-period { color: var(--clay); }
.header-note, .eyebrow, .section-eyebrow, .source-heading, .source-page, .step-kicker-label, .step-counter strong, .walkthrough-footer, .batch-label, .choice-status, .module-count { font-family: var(--mono); letter-spacing: .08em; }
.header-note { display: flex; align-items: center; gap: 8px; color: #858a80; font-size: 8px; }
.live-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #799276; }
.header-divider { color: #bcb9af; }

.eyebrow { margin: 0; display: flex; align-items: center; gap: 8px; color: #7f867c; font-size: 9px; }
.eyebrow-line { width: 17px; height: 1px; display: inline-block; background: var(--clay); }
h1 { margin: 20px 0 13px; color: var(--ink); font-family: var(--serif); font-size: clamp(42px, 5.5vw, 66px); font-weight: 500; letter-spacing: -2.8px; line-height: 1.04; }
.section-eyebrow { color: #8d9188; font-size: 8px; }
.batch-label { color: #9a9c93; font-size: 7px; }
.home-screen { flex: 1; padding: 70px 4.5% 28px; }
.home-hero { max-width: 760px; }
.home-hero h1 { max-width: 720px; margin: 18px 0 12px; font-size: clamp(42px, 5vw, 62px); letter-spacing: -2.6px; }
.home-lede { max-width: 520px; margin: 0; color: #737970; font-size: 13px; line-height: 1.75; }
.home-section-heading { margin-top: 54px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.home-section-heading h2, .panel-heading h2 { margin: 7px 0 0; color: var(--ink); font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.4px; }
.fictional-tag { padding: 6px 8px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e0e5dc; border-radius: 20px; color: #7d8579; font-family: var(--mono); font-size: 7px; letter-spacing: .06em; white-space: nowrap; }
.fictional-tag .live-dot { width: 5px; height: 5px; }
.home-choice-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.workflow-choice { min-height: 252px; padding: 22px 23px 18px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: 0 5px 18px #31362a08; }
.create-choice { background: #faf9f5; }
.choice-topline { display: flex; align-items: center; gap: 10px; }
.choice-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 5px; font-family: var(--mono); font-size: 9px; }
.invoice-icon { background: #f4ebe2; color: #a45c43; }
.create-icon { background: #e8efe5; color: var(--green); font-size: 17px; }
.choice-status { color: #999c93; font-size: 7px; }
.workflow-choice h3 { margin: 17px 0 7px; color: var(--ink); font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.35px; }
.workflow-choice p { max-width: 470px; margin: 0; color: #777e75; font-size: 10px; line-height: 1.7; }
.choice-meta { margin-top: 13px; display: flex; align-items: center; gap: 7px; color: #91968c; font-size: 8px; }
.meta-dot { color: #c1beb3; }
.choice-action, .preview-workflow { min-height: 36px; margin-top: auto; padding: 0 13px; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--green); border-radius: 4px; background: var(--green); color: white; font-size: 9px; font-weight: 600; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.choice-action { align-self: flex-start; margin-top: 18px; }
.choice-action:not(:disabled):hover, .preview-workflow:not(:disabled):hover { transform: translateY(-1px); border-color: #294936; background: #294936; }
.choice-action:disabled, .preview-workflow:disabled { cursor: wait; opacity: .55; }
.secondary-action { border-color: #d9e0d5; background: transparent; color: var(--green); }
.secondary-action:hover { background: #edf2e9; }
.home-footnote { min-height: 46px; margin-top: 25px; display: flex; align-items: center; gap: 8px; border-top: 1px solid #e3e0d7; color: #858a80; font-size: 8px; }
.footnote-mark { color: var(--clay); }
.footnote-spacer { flex: 1; }
.subpage-top { display: flex; align-items: center; justify-content: space-between; }
.composer-screen { flex: 1; padding: 24px 4.5% 25px; }
.composer-heading { margin-top: 27px; }
.composer-heading h1 { margin: 11px 0 8px; font-size: clamp(34px, 4vw, 46px); letter-spacing: -1.8px; }
.composer-lede { max-width: 540px; margin: 0; color: #777e75; font-size: 11px; line-height: 1.65; }
.composer-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 16px; }
.module-library, .workflow-order-panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: 0 5px 18px #31362a08; }
.workflow-order-panel { background: #faf9f5; }
.panel-heading { min-height: 35px; display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.panel-heading h2 { font-size: 18px; }
.module-count, .selected-count { color: #a0a299; font-size: 7px; white-space: nowrap; }
.module-options { margin-top: 13px; display: grid; gap: 7px; }
.module-option { min-height: 56px; padding: 8px 9px; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #efede6; border-radius: 4px; background: #fffefa; }
.module-option-number { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #f0f2ec; color: #7c8977; font-family: var(--mono); font-size: 7px; }
.module-option strong, .module-option small, .order-item-copy strong, .order-item-copy small { display: block; }
.module-option strong, .order-item-copy strong { color: #4d544a; font-size: 9px; font-weight: 600; }
.module-option small, .order-item-copy small { margin-top: 3px; color: #999c93; font-size: 7px; line-height: 1.45; }
.module-add { min-width: 47px; min-height: 26px; padding: 0 7px; border: 1px solid #dfe4db; border-radius: 4px; background: #f8faf6; color: var(--green); font-size: 8px; }
.module-add:not(:disabled):hover { border-color: #aec0aa; background: #edf3e9; }
.module-add:disabled { border-color: transparent; background: transparent; color: #9ca39a; cursor: default; }
.order-hint { margin: 8px 0 13px; color: #969990; font-size: 8px; line-height: 1.5; }
.workflow-order { margin: 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.workflow-order-item { min-height: 47px; padding: 7px 8px; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #e9e8e0; border-radius: 4px; background: #fffefa; }
.order-number { color: #a4a79e; font-family: var(--mono); font-size: 8px; }
.order-actions { display: flex; align-items: center; gap: 3px; }
.order-actions button { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #788174; font-size: 12px; }
.order-actions button:not(:disabled):hover { border-color: #e4e6de; background: #f5f7f2; }
.order-actions button:disabled { color: #d2d3cb; cursor: default; }
.order-actions .remove-module { color: #a47a6c; font-size: 15px; }
.empty-order { min-height: 164px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #92978e; text-align: center; }
.empty-order > span { width: 28px; height: 28px; margin-bottom: 8px; display: grid; place-items: center; border: 1px dashed #bfc9bb; border-radius: 50%; color: var(--green); font-size: 16px; }
.empty-order strong { color: #61695f; font-size: 9px; font-weight: 500; }
.empty-order small { margin-top: 5px; font-size: 8px; }
.preview-workflow { width: 100%; margin-top: 14px; }
.composer-disclaimer { margin: 15px 0 0; display: flex; align-items: center; gap: 7px; color: #969990; font-size: 8px; }
.composer-disclaimer span { color: var(--clay); }

.walkthrough { flex: 1; padding: 24px 4.5% 20px; }
.walkthrough-top { display: flex; align-items: center; justify-content: space-between; }
.back-link { padding: 4px 0; display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #7d8379; font-size: 10px; }
.back-link:hover { color: var(--green); }
.demo-chip { padding: 6px 8px; display: flex; align-items: center; gap: 6px; border: 1px solid #e0e5dc; border-radius: 20px; background: #f8faf6; color: #7d8579; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
.demo-chip .live-dot { width: 5px; height: 5px; }
.walkthrough-heading { margin-top: 19px; display: flex; align-items: end; justify-content: space-between; }
.walkthrough-heading h1 { margin: 10px 0 0; font-size: clamp(29px, 3.5vw, 42px); letter-spacing: -1.7px; }
.step-counter { padding-bottom: 4px; text-align: right; }
.step-counter strong { display: block; color: #667164; font-size: 9px; font-weight: 500; }
.step-counter strong span { color: #a5a89e; }
.step-counter > span { margin-top: 5px; display: block; color: #999d93; font-size: 8px; }
.progress-track { height: 3px; margin-top: 18px; overflow: hidden; border-radius: 4px; background: #e5e3da; }
.progress-track div { width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width .3s ease; }
.step-dots { margin: 10px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; list-style: none; }
.step-dots li { min-width: 0; display: flex; align-items: center; gap: 6px; color: #a2a49b; font-size: 8px; }
.step-dot { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; border: 1px solid #d8d9d0; border-radius: 50%; background: var(--canvas); color: #999d92; font-family: var(--mono); font-size: 7px; }
.step-dots li.current { color: var(--green); font-weight: 600; }
.step-dots li.current .step-dot { border-color: var(--green); background: var(--green); color: white; }
.step-dots li.completed { color: #6f7d6c; }
.step-dots li.completed .step-dot { border-color: #c8d5c5; background: #e3ece1; color: var(--green); }
.step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.walkthrough-grid { min-height: 402px; display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: 0 5px 18px #31362a08; }
.source-panel { padding: 17px 19px 15px; border-right: 1px solid var(--line); background: #faf9f5; }
.source-heading { margin: 1px 0 12px; font-size: 8px; }
.source-page { color: #b1b2a9; font-size: 7px; }
.source-message { position: relative; min-height: 214px; padding: 15px; border: 1px solid #e8e4db; border-radius: 2px; background: #fffefa; box-shadow: 0 2px 6px #222c2208; }
.source-message-head { display: flex; align-items: center; gap: 8px; }
.message-avatar { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #dedfd5; border-radius: 50%; background: #f4f5ef; color: #71816e; font-family: var(--serif); font-size: 11px; }
.source-message-head strong, .source-message-head small { display: block; }
.source-message-head strong { color: #535950; font-size: 8px; font-weight: 600; }
.source-message-head small { margin-top: 3px; color: #a0a299; font-size: 7px; }
.message-kind { margin-left: auto; color: #a0a299; font-family: var(--mono); font-size: 6px; letter-spacing: .1em; }
.source-message-rule { height: 1px; margin: 13px 0 12px; background: #eeece5; }
.message-subject { margin: 0; color: #535950; font-family: var(--serif); font-size: 12px; }
.message-copy { margin: 12px 0 0; color: #83887f; font-size: 8px; line-height: 1.7; }
.human-review-card { padding: 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #e3e9df; border-radius: 5px; background: #f7f9f4; }
.review-symbol { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 50%; background: #e4ecdf; color: var(--green); font-size: 11px; }
.human-review-card strong { color: #4d5d4b; font-size: 9px; font-weight: 600; }
.human-review-card p { margin: 5px 0 0; color: #7e877b; font-size: 8px; line-height: 1.55; }
.document-preview { position: relative; min-height: 266px; padding: 19px 17px 16px; border: 1px solid #e8e4db; border-radius: 2px; background: #fffefa; box-shadow: 0 2px 6px #222c2208; }
.doc-brand { color: #4a5048; font-family: var(--serif); font-size: 13px; letter-spacing: .1em; }
.doc-brand small { margin-top: 2px; display: block; color: #96958b; font-family: var(--mono); font-size: 6px; letter-spacing: .14em; }
.doc-address { margin-top: 12px; color: #858980; font-size: 8px; line-height: 1.55; }
.doc-rule { height: 1px; margin: 13px 0; background: #eeece5; }
.doc-label { margin: 0 0 9px; color: #a65c43; font-family: var(--mono); font-size: 7px; letter-spacing: .14em; }
.doc-pair { margin-top: 8px; display: flex; justify-content: space-between; gap: 7px; color: #969990; font-size: 7px; }
.doc-pair strong { color: #535950; font-family: var(--mono); font-size: 7px; font-weight: 400; text-align: right; }
.doc-pair[data-read-match], .doc-total[data-read-match] { margin-right: -5px; margin-left: -5px; padding-right: 5px; padding-left: 5px; border-radius: 3px; transition: background-color .25s ease, box-shadow .25s ease; }
.doc-pair.is-read-highlight, .doc-total.is-read-highlight { background: #e7efdf; box-shadow: 0 0 0 1px #c8d8c2; }
.doc-rule-short { width: 42%; margin: 11px 0 7px auto; }
.doc-total { display: flex; justify-content: space-between; color: #575d54; font-size: 8px; }
.doc-total strong { font-family: var(--mono); font-size: 9px; font-weight: 500; }
.doc-demo-stamp { position: absolute; right: 14px; bottom: 12px; padding: 3px 4px; transform: rotate(-4deg); border: 1px solid #d7dfd4; color: #87947f; font-family: var(--mono); font-size: 6px; letter-spacing: .1em; }
.source-file { margin-top: 13px; display: flex; align-items: center; gap: 8px; }
.file-icon { width: 25px; height: 29px; display: grid; place-items: center; border: 1px solid #e5ded1; border-radius: 3px; background: var(--paper); color: #ae654f; font-family: var(--mono); font-size: 6px; }
.source-file strong, .source-file small { display: block; }
.source-file strong { color: #565c53; font-size: 8px; font-weight: 500; }
.source-file small { margin-top: 3px; color: #999c93; font-size: 7px; }
.source-check { margin-left: auto; color: #6a8b68; font-size: 11px; }
.source-note { margin: 12px 0 0; color: #9a9c93; font-size: 8px; line-height: 1.55; }

.step-panel { min-width: 0; padding: 24px 28px 16px; display: flex; flex-direction: column; }
.step-kicker { display: flex; align-items: center; gap: 8px; color: #858a80; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.step-kicker-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #e9efe5; color: var(--green); font-size: 8px; letter-spacing: 0; }
.step-panel h2 { margin: 15px 0 8px; color: var(--ink); font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); font-weight: 500; letter-spacing: -.8px; line-height: 1.15; }
.step-intro { max-width: 525px; margin: 0; color: #747970; font-size: 11px; line-height: 1.65; }
.step-output { min-height: 125px; margin-top: 17px; }
.received-card { min-height: 79px; padding: 13px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid #e8e6de; border-radius: 5px; background: #fffefa; }
.received-icon { width: 33px; height: 37px; display: grid; place-items: center; border: 1px solid #eadfd3; border-radius: 3px; color: #a95c43; font-family: var(--mono); font-size: 7px; }
.received-card strong, .received-card small { display: block; }
.received-card strong { color: #4a5048; font-size: 9px; font-weight: 600; }
.received-card small { margin-top: 5px; color: #969990; font-size: 8px; }
.received-card .received-ok { margin-left: auto; color: #6b8d69; font-size: 12px; }
.stage-callout { padding: 12px 13px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid #e3e9df; border-radius: 5px; background: #f4f8f1; }
.stage-callout-icon { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; border-radius: 50%; background: #e2ebdf; color: var(--green); font-size: 9px; }
.stage-callout strong, .stage-callout small { display: block; }
.stage-callout strong { color: #4e6850; font-size: 9px; font-weight: 600; }
.stage-callout small { margin-top: 4px; color: #7e8d7a; font-size: 8px; line-height: 1.5; }
.text-fragment { padding: 13px 14px; border-left: 2px solid #b8c8b4; background: #f8f8f3; color: #6f756b; font-family: var(--mono); font-size: 8px; line-height: 1.9; }
.text-fragment mark { padding: 1px 2px; background: #efefe9; color: #475e46; }
.text-fragment mark[data-read-match] { border-radius: 2px; transition: background-color .25s ease, box-shadow .25s ease; }
.text-fragment mark.is-read-highlight { background: #d2e4c8; box-shadow: 0 0 0 2px #d2e4c8; }
.extraction-table { border: 1px solid #e8e6de; border-radius: 5px; background: #fffefa; }
.extraction-row { min-height: 36px; padding: 7px 11px; display: grid; grid-template-columns: 1fr 1.3fr 52px; align-items: center; gap: 8px; border-bottom: 1px solid #f0eee8; font-size: 8px; }
.extraction-row:last-child { border-bottom: 0; }
.extraction-row > span:first-child { color: #92968d; }
.extraction-row strong { min-width: 0; overflow: hidden; color: #4c524a; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.confidence { color: #638263; font-family: var(--mono); font-size: 7px; text-align: right; }
.check-list { display: grid; gap: 8px; }
.check-row { padding: 9px 10px; display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 8px; border: 1px solid #eae8e1; border-radius: 4px; background: #fffefa; }
.check-mark { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: #e7efe4; color: #547852; font-size: 8px; }
.check-row strong { color: #565c53; font-size: 8px; font-weight: 500; }
.check-row small { color: #999c93; font-size: 7px; }
.booking-card { padding: 13px 14px; border: 1px solid #e5e4dc; border-radius: 5px; background: #fffefa; }
.booking-card-head { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; color: #92958c; font-family: var(--mono); font-size: 7px; letter-spacing: .07em; }
.booking-badge { padding: 3px 5px; border-radius: 3px; background: #edf2e9; color: #698063; font-size: 6px; }
.booking-row { padding: 7px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #f0eee8; color: #858980; font-size: 8px; }
.booking-row strong { color: #4d544a; font-weight: 500; }
.approval-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.approval-field label { margin-bottom: 5px; display: block; color: #8d9187; font-size: 8px; }
.approval-field input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #e5e4dc; border-radius: 4px; background: white; color: #41483f; font: 10px var(--sans); }
.approval-field input:focus { border-color: #9ab09a; outline: none; box-shadow: 0 0 0 2px #edf2e9; }
.human-note { margin-top: 10px; padding: 9px 10px; display: flex; align-items: center; gap: 7px; border-radius: 4px; background: #f6f2e9; color: #81775f; font-size: 8px; line-height: 1.5; }
.human-note span { color: #9e7b3e; }
.approve-action { min-height: 34px; margin-top: 11px; padding: 0 13px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--green); border-radius: 4px; background: var(--green); color: white; font-size: 9px; font-weight: 600; }
.approve-action:hover { border-color: #294936; background: #294936; }
.done-mark { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; background: #e8f0e5; color: var(--green); font-size: 17px; }
.done-summary { margin-top: 10px; padding: 12px 14px; border: 1px solid #e5e6dd; border-radius: 5px; background: #fffefa; }
.done-summary strong, .done-summary small { display: block; }
.done-summary strong { color: #485047; font-size: 9px; font-weight: 600; }
.done-summary small { margin-top: 5px; color: #888d83; font-size: 8px; }
.time-saved { margin-top: 10px; padding: 8px 11px; display: flex; align-items: baseline; gap: 8px; border-left: 2px solid #8ea88b; background: #f3f7ef; }
.time-saved strong { color: #456347; font-family: var(--serif); font-size: 17px; font-weight: 500; white-space: nowrap; }
.time-saved span { color: #6f7b6b; font-size: 8px; }
.time-saved small { margin-left: auto; color: #93998e; font-size: 7px; text-align: right; }
.done-actions { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; }
.download-button, .run-again-button { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--green); border-radius: 4px; background: var(--green); color: white; font-size: 9px; text-decoration: none; }
.run-again-button { border-color: #e4e2da; background: transparent; color: #747a70; }

.tech-details { margin-top: auto; padding-top: 8px; border-top: 1px solid #eeece5; }
.tech-details summary, .completed-details summary { display: flex; align-items: center; gap: 7px; color: #7a8177; font-size: 8px; cursor: pointer; list-style: none; }
.tech-details summary::-webkit-details-marker, .completed-details summary::-webkit-details-marker { display: none; }
.tech-details summary:hover, .completed-details summary:hover { color: var(--green); }
.details-plus { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #dfe2d9; border-radius: 50%; color: #748771; font-size: 11px; line-height: 1; }
.tech-details[open] .details-plus { transform: rotate(45deg); }
.tech-details > div { margin: 9px 0 1px 22px; color: #8a8e85; font-size: 8px; line-height: 1.6; }
.completed-details { margin-top: 9px; padding-top: 9px; border-top: 1px solid #eeece5; }
.completed-details summary { justify-content: space-between; }
.completed-details ol { margin: 7px 0 0; padding-left: 17px; color: #8a8e85; font-size: 8px; line-height: 1.9; }
.step-navigation { min-height: 38px; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.previous-step { padding: 6px 0; border: 0; background: transparent; color: #858a81; font-size: 8px; }
.previous-step:disabled { visibility: hidden; }
.nav-note { color: #a0a198; font-size: 7px; text-align: center; }
.next-step { min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--green); border-radius: 4px; background: var(--green); color: white; font-size: 8px; font-weight: 600; white-space: nowrap; }
.next-step:hover, .download-button:hover { border-color: #294936; background: #294936; }
.walkthrough-footer { min-height: 40px; margin-top: 8px; display: flex; align-items: center; justify-content: space-between; color: #999c93; font-size: 7px; }
.footer-star { margin-right: 4px; color: var(--clay); }
.footer-dot { padding: 0 4px; color: #c1beb3; }
.toast { position: fixed; right: 20px; bottom: 19px; z-index: 5; max-width: min(400px, calc(100vw - 30px)); padding: 10px 14px; transform: translateY(12px); border: 1px solid #34493a; border-radius: 5px; background: #283a2f; color: #f6f4ed; font-size: 10px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.visible { transform: translateY(0); opacity: 1; }

@media (min-width: 1400px) { .home-screen { padding-top: 90px; } .walkthrough { padding-top: 35px; } .walkthrough-grid { min-height: 432px; } .document-preview { min-height: 286px; } .step-panel { padding: 29px 36px 18px; } }
@media (max-width: 820px) { .page-shell { width: min(100% - 40px, 680px); } .home-screen { padding: 52px 0 24px; } .home-section-heading { margin-top: 39px; } .workflow-choice { padding: 18px; } .composer-screen { padding-right: 0; padding-left: 0; } .composer-grid { gap: 10px; } .module-library, .workflow-order-panel { padding: 13px; } .walkthrough { padding-right: 0; padding-left: 0; } .walkthrough-grid { grid-template-columns: minmax(185px, .65fr) minmax(0, 1.35fr); } .source-panel { padding-right: 13px; padding-left: 13px; } .step-panel { padding-right: 19px; padding-left: 19px; } .step-dots { gap: 5px; } .step-dots li { gap: 4px; font-size: 7px; } }
@media (max-width: 600px) { .page-shell { width: calc(100% - 28px); } .site-header { height: 57px; } .header-note { gap: 5px; font-size: 6px; } .brand { font-size: 18px; } .home-screen { padding-top: 37px; } .home-hero h1 { margin-top: 15px; font-size: clamp(39px, 11vw, 54px); letter-spacing: -2px; } .home-lede { font-size: 11px; } .home-section-heading { margin-top: 30px; align-items: start; } .home-section-heading h2 { max-width: 240px; font-size: 19px; } .fictional-tag { padding: 5px 6px; font-size: 6px; } .home-choice-grid { grid-template-columns: 1fr; gap: 10px; } .workflow-choice { min-height: 224px; padding: 16px; } .workflow-choice h3 { margin-top: 13px; font-size: 20px; } .home-footnote { align-items: flex-start; padding: 12px 0; flex-wrap: wrap; font-size: 8px; line-height: 1.45; } .footnote-spacer { display: none; } .batch-label { width: 100%; padding-left: 18px; }
  .composer-screen { padding-top: 18px; } .composer-heading { margin-top: 21px; } .composer-heading h1 { font-size: 34px; } .composer-grid { grid-template-columns: 1fr; } .module-library, .workflow-order-panel { padding: 14px; } .workflow-order-panel { min-height: 260px; } .composer-disclaimer { align-items: flex-start; line-height: 1.5; }
  .walkthrough { padding-top: 18px; } .walkthrough-heading { margin-top: 17px; align-items: end; gap: 7px; } .walkthrough-heading h1 { max-width: 300px; font-size: 31px; line-height: 1.1; } .step-counter strong { font-size: 7px; } .step-counter > span { max-width: 67px; font-size: 7px; } .step-dots { margin-bottom: 13px; } .step-dots li { display: grid; justify-items: center; gap: 4px; } .step-name { max-width: 48px; font-size: 6px; text-align: center; }
  .walkthrough-grid { grid-template-columns: 1fr; } .source-panel { padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--line); } .source-heading { margin-bottom: 8px; } .document-preview { min-height: 210px; padding: 13px 14px; } .doc-address { margin-top: 7px; } .doc-rule { margin: 9px 0; } .doc-pair { margin-top: 6px; } .doc-demo-stamp { bottom: 8px; } .source-file { margin-top: 9px; } .source-note { display: none; } .step-panel { min-height: 355px; padding: 17px 15px 13px; } .step-panel h2 { margin-top: 11px; font-size: 26px; } .step-intro { font-size: 10px; } .step-output { min-height: 117px; margin-top: 13px; } .tech-details { margin-top: auto; } .nav-note { max-width: 105px; line-height: 1.4; } .walkthrough-footer { gap: 8px; font-size: 6px; } }
@media (max-width: 380px) { .header-note { font-size: 0; } .header-note .live-dot { width: 7px; height: 7px; } .header-divider { display: none; } .step-dots { gap: 2px; } .step-name { max-width: 42px; font-size: 5px; } .extraction-row { grid-template-columns: .8fr 1.25fr 42px; padding-right: 7px; padding-left: 7px; font-size: 7px; } .check-row { grid-template-columns: 16px 1fr; } .check-row small { grid-column: 2; } .step-navigation { gap: 4px; } .previous-step, .next-step { font-size: 7px; } .next-step { padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

@media (min-width: 821px) { .home-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .home-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.email-icon { background: #e9eee9; color: #5e7660; }
.email-source-message { min-height: 240px; padding: 12px; overflow: hidden; }
.email-source-message .source-message-head { align-items: flex-start; }
.email-source-message .source-message-head > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.email-source-message .source-message-head small { color: #687067; font-size: 8px; }
.email-source-message .message-subject { line-height: 1.4; }
.email-source-message .message-copy { max-height: 145px; overflow: auto; color: #626a60; font-size: 9px; line-height: 1.6; white-space: normal; }
.email-source-files { display: grid; gap: 5px; margin-top: 8px; }
.email-source-files .source-file { min-width: 0; margin: 0; }
.email-source-files .source-file > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.email-source-files .source-file strong { font-size: 7px; }
.email-source-files .source-file small { color: #697066; font-size: 8px; }
.email-sender { margin-top: 9px; padding: 8px 10px; border-left: 2px solid #b8c8b4; background: #f8f8f3; }
.email-sender strong, .email-sender small { display: block; overflow-wrap: anywhere; }
.email-sender strong { color: #535950; font-size: 8px; font-weight: 600; }
.email-sender small { margin-top: 4px; color: #687067; font-size: 8px; }
.email-classification { position: relative; padding: 12px; border: 1px solid #e5e6dd; border-radius: 5px; background: #fffefa; }
.class-label, .task-attachments > span:first-child { color: #697066; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.email-classification > strong { display: block; margin-top: 7px; color: #4d544a; font-size: 9px; font-weight: 600; }
.classification-pill, .task-status { display: inline-flex; padding: 4px 6px; border-radius: 3px; background: #edf2e9; color: #4f684b; font-family: var(--mono); font-size: 7px; letter-spacing: .06em; }
.email-classification .classification-pill { margin-top: 9px; }
.review-flag { margin-top: 9px; padding: 10px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid #efe4d1; border-radius: 4px; background: #fbf7ef; }
.review-flag > span:first-child { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; border-radius: 50%; background: #f1e5cd; color: #8b6c35; font-size: 9px; font-weight: 600; }
.review-flag strong, .review-flag small { display: block; }
.review-flag strong { color: #625334; font-size: 9px; font-weight: 600; }
.review-flag small { margin-top: 4px; color: #756849; font-size: 8px; line-height: 1.5; }
.prominent-review-flag { margin-top: 0; padding: 13px; }
.prominent-review-flag strong { font-size: 9px; }
.prominent-review-flag small { font-size: 8px; }
.email-extraction .extraction-row { grid-template-columns: .8fr 1.7fr; }
.email-task-card { padding: 12px; border: 1px solid #e5e4dc; border-radius: 5px; background: #fffefa; }
.email-task-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.email-task-head strong { color: #4d544a; font-size: 9px; font-weight: 600; }
.email-task-card > p { margin: 8px 0 11px; color: #747970; font-size: 8px; line-height: 1.5; }
.task-meta { display: grid; grid-template-columns: 1.5fr .7fr 1fr; gap: 7px; }
.task-meta > span { min-width: 0; padding: 7px; border: 1px solid #efede6; border-radius: 3px; }
.task-meta small, .task-meta strong { display: block; }
.task-meta small { color: #697066; font-family: var(--mono); font-size: 7px; letter-spacing: .06em; }
.task-meta strong { margin-top: 5px; overflow-wrap: anywhere; color: #4d544a; font-size: 8px; font-weight: 500; }
.task-attachments { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.task-attachments > span:first-child { width: 100%; }
.attachment-chip { padding: 4px 6px; border: 1px solid #eae8e1; border-radius: 3px; background: #faf9f5; color: #5f665d; font-size: 8px; overflow-wrap: anywhere; }
.attachment-chip > span { color: #6b8d69; }
.reply-label { margin-bottom: 6px; display: block; color: #5f665d; font-size: 9px; font-weight: 600; }
.reply-draft { width: 100%; min-height: 112px; padding: 9px 10px; resize: vertical; border: 1px solid #e5e4dc; border-radius: 4px; background: #fffefa; color: #444b42; font: 9px/1.65 var(--sans); }
.reply-draft:focus { border-color: #9ab09a; outline: none; box-shadow: 0 0 0 2px #edf2e9; }
.reply-note { margin-top: 7px; color: #626a60; font-size: 8px; }
.reply-note > span { margin-right: 4px; color: #9e7b3e; }
.review-reply-label { margin-top: 10px; }

@media (max-width: 600px) {
  .email-source-message { min-height: 0; }
  .email-source-message .message-copy { max-height: 120px; }
  .task-meta { grid-template-columns: 1.2fr .7fr 1fr; }
}