/* V2 layout. Foundation values and interaction primitives live in design-system.css. */
.wrap { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: var(--space-24); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.header-shell,.hero-v2,.operations,.site-footer { background:var(--color-inverse); color:var(--color-inverse-text); }
.site-header { display:flex; align-items:center; gap:32px; min-height:96px; border-bottom:1px solid var(--color-inverse-border); }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:20px; font-weight:650; letter-spacing:-.6px; white-space:nowrap; }
.brand img { border-radius:8px; }
.brand-light { font-weight:450; }
.site-header nav { display:flex; gap:32px; margin-left:auto; font-size:14px; color:var(--color-inverse-secondary); }
.site-header nav a { min-height:44px; display:flex; align-items:center; }
.site-header nav a:hover { color:var(--color-inverse-text); }
.hero-v2 { overflow:clip; }
.hero-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:64px; padding-block:64px 80px; }
.hero-copy { min-width:0; }
.availability { font-size:14px; color:var(--color-inverse-secondary); margin-bottom:24px; }
.hero-copy h1 { font-size:clamp(48px,4.85vw,70px); font-weight:600; line-height:1.055; letter-spacing:-.055em; max-width:610px; }
.hero-description { max-width:440px; font-size:18px; line-height:1.65; color:var(--color-inverse-secondary); margin-top:28px; }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:32px; }
.hero-actions .text-link { font-size:15px; }
.hero-invitation { max-width:390px; font-size:14px; line-height:1.7; color:var(--color-inverse-secondary); margin-top:20px; }
.hero-footnote { display:flex; gap:12px; align-items:center; color:var(--color-inverse-secondary); font-size:12px; margin-top:28px; }
.hero-evidence { height:610px; position:relative; min-width:0; isolation:isolate; }
.hero-sheet { position:absolute; top:12px; left:0; width:520px; z-index:2; transform:rotate(-3deg) scale(.84); transform-origin:top left; box-shadow:var(--shadow-paper); }
.hero-ticket { position:absolute; width:183px; right:0; top:-15px; height:570px; overflow:hidden; transform:rotate(4deg); border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-paper); z-index:1; }
.invoice-document { color:var(--color-print); background:var(--color-paper); font-family:var(--font-mono); font-variant-numeric:tabular-nums; padding:20px 17px 15px; position:relative; }
.invoice-sheet { border:1px solid var(--color-paper-rule); }
.invoice-sheet::after { content:''; position:absolute; right:0; top:0; width:17px; height:17px; border-left:1px solid var(--color-border); border-bottom:1px solid var(--color-border); background:linear-gradient(45deg,var(--color-subtle) 49%,var(--color-paper) 51%); }
.invoice-letterhead { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:15px; }
.invoice-letterhead>div:first-child>b { display:block; font:700 13px/1.1 Georgia,serif; letter-spacing:-.3px; }
.invoice-letterhead span { display:block; font-size:6.5px; line-height:1.8; }
.invoice-letterhead>div:first-child>span { margin-top:7px; }
.invoice-id { min-width:82px; font-size:7px; border:1px solid var(--color-print); }
.invoice-id>b { display:block; padding:2px 5px; background:var(--color-print); color:var(--color-paper); font-weight:500; }
.invoice-id>span { padding:1px 5px; }
.invoice-meta { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:11px; font-size:6.5px; line-height:1.8; }
.invoice-meta>div { border:1px solid var(--color-paper-rule); }
.invoice-meta b { display:block; background:var(--color-print); color:var(--color-paper); font-weight:500; padding:1px 5px; }
.invoice-meta span { display:block; padding-inline:5px; }
.invoice-terms { display:flex; justify-content:space-between; gap:8px; border-block:1px solid var(--color-paper-rule); font-size:6px; padding-block:5px; }
.invoice-terms b { font-weight:500; }
.invoice-table { border-collapse:collapse; width:100%; table-layout:auto; font-size:6.5px; letter-spacing:-.25px; line-height:1.65; }
.invoice-table thead { background:var(--color-print); color:var(--color-paper); }
.invoice-table th { font-weight:500; text-align:left; padding:2px; white-space:nowrap; }
.invoice-table td { padding:2px; vertical-align:top; white-space:nowrap; }
.invoice-table td:nth-child(3) { font-size:.83em; letter-spacing:-.35px; }
.invoice-table td:nth-child(4) { white-space:normal; min-width:92px; }
.invoice-table td:nth-last-child(-n+4),.invoice-table th:nth-last-child(-n+4) { text-align:right; }
.invoice-table tbody tr:nth-child(even) { background:var(--color-subtle); }
.invoice-table tbody .invoice-selected { background:var(--color-evidence-soft); outline:1px solid var(--color-evidence); outline-offset:-1px; }
.invoice-totals { display:flex; justify-content:space-between; gap:8px; font-size:6.5px; border-top:1px solid var(--color-print); padding-top:8px; margin-top:4px; }
.invoice-payment { display:flex; justify-content:space-between; gap:8px; border-top:1px dashed var(--color-paper-rule); font-size:6.5px; padding-top:8px; margin-top:12px; }
.invoice-bottom { font-size:5px; margin-top:8px; text-align:center; color:var(--color-secondary); }
.invoice-thermal { padding:20px 10px; }
.invoice-thermal .invoice-letterhead { display:block; text-align:center; }
.invoice-thermal .invoice-letterhead>div:first-child>b { font:600 9px/1.3 var(--font-mono); letter-spacing:0; }
.invoice-thermal .invoice-letterhead span { font-size:5px; }
.invoice-thermal .invoice-id { border:0; margin-top:7px; }
.invoice-thermal .invoice-id>b { background:none; color:var(--color-print); font-size:5px; }
.invoice-thermal .invoice-meta { gap:4px; font-size:4.8px; }
.invoice-thermal .invoice-meta>div { border:0; }
.invoice-thermal .invoice-meta b { padding:0; background:none; color:var(--color-print); font-size:4px; }
.invoice-thermal .invoice-meta span { padding:0; }
.invoice-thermal .invoice-terms { font-size:4px; border-style:dashed; }
.invoice-thermal .invoice-table { font-size:4.4px; letter-spacing:-.3px; line-height:1.8; }
.invoice-thermal .invoice-table th,.invoice-thermal .invoice-table td { padding:2px .7px; }
.invoice-thermal .invoice-table thead { background:none; color:var(--color-print); border-bottom:1px dashed var(--color-paper-rule); }
.invoice-thermal .invoice-table td:nth-child(4) { min-width:38px; max-width:49px; }
.invoice-thermal .invoice-table td:nth-child(3) { font-size:3.7px; letter-spacing:-.5px; }
.invoice-thermal .invoice-table tbody tr:nth-child(even) { background:transparent; }
.invoice-thermal .invoice-totals { display:block; text-align:right; font-size:5px; }
.invoice-thermal .invoice-totals>span,.invoice-thermal .invoice-totals>strong { display:block; margin-top:3px; }
.invoice-thermal .invoice-payment { display:block; font-size:5px; }
.invoice-thermal .invoice-payment>* { display:block; margin-top:3px; }
.invoice-thermal .invoice-bottom { font-size:4px; }
.invoice-thermal .invoice-table td:nth-child(3) { font-size:1em; letter-spacing:inherit; white-space:normal; min-width:38px; }
.invoice-thermal .invoice-table td:nth-child(4) { font-size:.78em; white-space:nowrap; min-width:0; max-width:none; }
.hero-check { position:absolute; z-index:3; left:66px; right:-10px; bottom:31px; padding:20px 22px; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-panel); box-shadow:var(--shadow-panel); }
.hero-check-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:var(--color-secondary); }
.hero-check>strong { display:block; font-size:18px; font-weight:600; margin-top:12px; }
.hero-check>strong>span { font-size:12px; font-weight:400; color:var(--color-secondary); margin-left:5px; }
.hero-check-quantities { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.hero-check-quantities>span { font-size:12px; color:var(--color-secondary); }
.hero-check-quantities b { display:block; font-size:28px; color:var(--color-text); line-height:1.4; font-weight:550; font-variant-numeric:tabular-nums; }
.hero-check-quantities small { font-size:12px; font-weight:400; }
.hero-check-quantities>svg { color:var(--color-border-strong); width:18px; }
.hero-check-quantities .hero-difference { border-left:1px solid var(--color-border); padding-left:20px; }
.hero-difference b { color:var(--color-warning); font-size:26px; }
.hero-evidence-note { position:absolute; bottom:0; right:0; font-size:11px; color:var(--color-inverse-secondary); }
.demo-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:64px; margin-bottom:40px; }
.demo-intro h2 { font-size:48px; line-height:1.1; letter-spacing:-2px; font-weight:550; }
.demo-intro h2 [data-received-cases] { color:var(--color-warning); }
.delivery-demo[data-has-difference=false] .demo-intro h2 [data-received-cases] { color:var(--color-text); }
.demo-intro>p { max-width:350px; color:var(--color-secondary); font-size:16px; line-height:1.8; }
.demo-shell { border:1px solid var(--color-border); background:var(--color-surface); border-radius:var(--radius-panel); overflow:hidden; }
.demo-stage-nav { display:grid; grid-template-columns:repeat(3,1fr); background:var(--color-surface); border-bottom:1px solid var(--color-border); padding:0 24px; gap:24px; }
.demo-stage-nav button { border:0; border-bottom:3px solid transparent; background:none; padding:20px 0 17px; font-size:16px; color:var(--color-secondary); display:flex; align-items:center; gap:12px; min-height:72px; text-align:left; }
.demo-stage-nav button>span { display:grid; place-items:center; width:25px; height:25px; border:1px solid var(--color-border-strong); border-radius:50%; font-size:12px; }
.demo-stage-nav button[aria-pressed=true] { border-bottom-color:var(--color-text); color:var(--color-text); font-weight:600; }
.demo-stage-nav button[aria-pressed=true]>span { background:var(--color-text); color:var(--color-surface); border-color:var(--color-text); }
.demo-stage-nav button:hover { color:var(--color-text); }
.demo-workspace { display:grid; grid-template-columns:1.15fr .85fr; }
.invoice-workspace { background:var(--color-subtle); border-right:1px solid var(--color-border); min-width:0; }
.source-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid var(--color-border); }
.source-toolbar h3 { font-size:14px; font-weight:600; }
.source-toolbar>div:first-child>span { font-size:12px; color:var(--color-secondary); display:block; margin-top:3px; }
.format-selector { display:flex; background:var(--color-page); border:1px solid var(--color-border-strong); border-radius:var(--radius-control); padding:3px; }
.format-selector button { min-height:44px; border:0; border-radius:var(--radius-small); padding:8px 12px; font-size:14px; color:var(--color-secondary); background:transparent; }
.format-selector button[aria-pressed=true] { background:var(--color-surface); color:var(--color-text); box-shadow:0 1px 3px rgb(18 27 22 / 10%); font-weight:550; }
.format-selector button:hover { color:var(--color-text); }
.document-viewport { height:550px; padding:28px 30px 20px; overflow:auto; }
#demo-source { max-width:570px; margin:auto; }
#demo-source .invoice-document { box-shadow:var(--shadow-panel); }
#demo-source .invoice-table { font-size:7.5px; }
#demo-source .invoice-letterhead>div:first-child>b { font-size:15px; }
#demo-source .invoice-meta { font-size:7px; }
#demo-source[data-format=thermal] { max-width:300px; }
#demo-source .invoice-thermal .invoice-letterhead>div:first-child>b { font:600 11px/1.3 var(--font-mono); }
#demo-source .invoice-thermal .invoice-table { font-size:6.5px; }
#demo-source .invoice-thermal .invoice-table td:nth-child(3) { font-size:5px; }
#demo-source .invoice-thermal .invoice-table td:nth-child(4) { max-width:75px; min-width:65px; }
#demo-source .invoice-thermal .invoice-meta { font-size:7px; }
#demo-source .invoice-thermal .invoice-letterhead span { font-size:7px; }
#demo-source .invoice-thermal .invoice-terms { font-size:6px; }
#demo-source .invoice-thermal .invoice-totals,#demo-source .invoice-thermal .invoice-payment { font-size:7px; }
#demo-source .invoice-thermal .invoice-table td:nth-child(3) { font-size:1em; white-space:normal; min-width:65px; }
#demo-source .invoice-thermal .invoice-table td:nth-child(4) { font-size:.78em; white-space:nowrap; min-width:0; max-width:none; }
.source-line-lens { border-top:1px solid var(--color-border); border-left:3px solid var(--color-evidence); background:var(--color-surface); padding:20px 24px; }
.source-lens-heading { display:flex; gap:8px; align-items:center; font-size:12px; }
.source-lens-heading>b { font-weight:550; }
.source-lens-heading>span:last-child { margin-left:auto; color:var(--color-secondary); }
.source-key { width:8px; height:8px; background:var(--color-evidence); }
.source-line-lens>p { font:500 13px/1.8 var(--font-mono); margin-top:12px; }
.source-lens-values { display:flex; justify-content:space-between; gap:12px; margin-top:12px; font-size:12px; color:var(--color-secondary); }
.source-lens-values b { display:block; font:500 14px/1.6 var(--font-mono); color:var(--color-text); }
.receiving-workspace { padding:24px 32px; display:flex; flex-direction:column; min-width:0; }
.receiving-heading { display:flex; gap:9px; align-items:center; font-size:14px; font-weight:600; }
.receiving-heading img { border-radius:6px; }
.receiving-heading .badge { margin-left:auto; font-weight:400; }
.receiving-context { margin-top:28px; }
.receiving-context h3 { font-size:28px; letter-spacing:-.8px; font-weight:550; }
.receiving-context p { font-size:13px; color:var(--color-secondary); line-height:1.8; margin-top:12px; }
.receiving-product { border-block:1px solid var(--color-border); padding-block:20px; margin-top:24px; }
.product-category { font-size:12px; color:var(--color-secondary); }
.receiving-product h4 { font-size:22px; letter-spacing:-.5px; font-weight:550; margin-top:8px; }
.receiving-product p { font-size:14px; color:var(--color-secondary); margin-top:10px; line-height:1.7; }
.stage-content { animation:panel-enter var(--duration-standard) var(--ease-standard); }
.read-fields { margin:0; padding-top:10px; }
.read-fields>div { display:flex; justify-content:space-between; gap:20px; padding-block:12px; font-size:14px; }
.read-fields dt { color:var(--color-secondary); }
.read-fields dd { margin:0; font-weight:550; font-variant-numeric:tabular-nums; }
.price-explanation { border-top:1px solid var(--color-border); margin-top:8px; font-size:13px; }
.price-explanation summary { cursor:pointer; padding-block:15px; color:var(--color-secondary); }
.price-explanation dl { margin:0 0 12px; background:var(--color-subtle); border-radius:var(--radius-small); padding:10px 14px; }
.price-explanation dl>div { display:flex; justify-content:space-between; gap:16px; padding-block:5px; }
.price-explanation dd { margin:0; font-variant-numeric:tabular-nums; }
.stage-content>.button { width:100%; margin-top:16px; font-size:15px; }
.demo-disclosure { font-size:12px; color:var(--color-secondary); margin-top:auto; padding-top:24px; }
.count-field { padding-top:24px; }
.count-field label { font-size:14px; font-weight:550; }
.quantity-control { display:flex; align-items:center; margin-top:12px; gap:12px; }
.quantity-control button { width:48px; height:50px; background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:var(--radius-control); font-size:24px; color:var(--color-text); }
.quantity-control button:hover { background:var(--color-subtle); }
.quantity-control input { width:90px; text-align:center; font:500 26px/1 var(--font-sans); appearance:textfield; }
.quantity-control input::-webkit-inner-spin-button { appearance:none; }
.count-field>p { font-size:12px; color:var(--color-secondary); margin-top:10px; }
.count-field>.field-error { color:var(--color-error); }
.discrepancy-result { margin-top:24px; padding:16px; border:1px solid var(--color-warning); border-radius:var(--radius-control); background:var(--color-warning-soft); color:var(--color-warning); }
.discrepancy-result>div { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; }
.discrepancy-result strong { font-size:28px; font-weight:550; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.discrepancy-result p { font-size:12px; margin-top:6px; }
.discrepancy-result.no-difference { border-color:var(--color-border-strong); background:var(--color-subtle); color:var(--color-text); }
.recorded-check { display:flex; gap:8px; align-items:center; color:var(--color-success); margin-top:24px; }
.recorded-check h4 { font-size:18px; font-weight:550; }
.recorded-check svg { width:24px; height:24px; padding:4px; background:var(--color-success-soft); border-radius:50%; }
.recorded-activity { display:flex; gap:10px; padding-top:18px; margin-top:12px; border-top:1px solid var(--color-border); font-size:12px; color:var(--color-secondary); }
.recorded-activity svg { width:16px; height:16px; margin-top:3px; }
.recorded-activity span { display:block; margin-top:3px; }
.reset-demo { border:0; background:none; padding:8px 0; margin-top:16px; font-size:14px; }
.demo-takeaways { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:28px; }
.demo-takeaways p { font-size:14px; line-height:1.85; color:var(--color-secondary); }
.demo-takeaways strong { color:var(--color-text); font-weight:550; }
/* Existing lower-page content uses the same foundations. A full V2 content pass is deferred. */
.section-top { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.section-label,.eyebrow { font:500 14px/1.6 var(--font-sans); letter-spacing:0; text-transform:none; }
.operations .section-label { color:var(--color-inverse-secondary); }
.operations-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:64px; margin-top:24px; }
.operations-heading h2 { font-size:44px; line-height:1.12; letter-spacing:-1.8px; font-weight:550; }
.operations-heading h2>span { color:var(--color-inverse-secondary); }
.operations-heading>p { max-width:320px; font-size:16px; color:var(--color-inverse-secondary); }
.dashboard { display:grid; grid-template-columns:190px 1fr; border:1px solid var(--color-border-strong); border-radius:var(--radius-panel); overflow:hidden; margin-top:48px; background:var(--color-surface); color:var(--color-text); }
.dashboard-sidebar { display:flex; flex-direction:column; gap:8px; padding:24px 16px; border-right:1px solid var(--color-border); background:var(--color-subtle); }
.dash-brand { display:flex; align-items:center; gap:8px; font-size:11px; }
.dash-brand img { border-radius:6px; }
.sidebar-label { font-size:10px; color:var(--color-secondary); margin:32px 10px 8px; }
.dash-nav { display:flex; align-items:center; gap:10px; padding:12px 10px; border-radius:var(--radius-control); color:var(--color-secondary); font-size:12px; }
.dash-nav svg { width:16px; height:16px; }
.dash-nav.selected { background:var(--color-border); color:var(--color-text); }
.sidebar-foot { display:flex; gap:10px; align-items:center; margin-top:auto; padding-top:48px; font-size:12px; }
.avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--color-border); font-size:11px; }
.sidebar-foot small { display:block; color:var(--color-secondary); }
.dashboard-main { padding:28px; min-width:0; }
.dash-top { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--color-secondary); }
.preview-badge { font-size:10px; border:1px solid var(--color-border); padding:3px 6px; border-radius:var(--radius-small); }
.dash-heading { display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:20px; }
.dash-heading h3 { font-size:28px; letter-spacing:-.8px; font-weight:550; }
.dash-heading p { font-size:12px; color:var(--color-secondary); margin-top:8px; }
.store-select { display:flex; gap:8px; align-items:center; }
.store-select>svg { width:16px; }
.store-select select { min-height:44px; font-size:12px; padding:8px; }
.dash-stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--color-border); border-radius:var(--radius-control); margin-top:24px; }
.dash-stats>div { padding:20px; }
.dash-stats>div+div { border-left:1px solid var(--color-border); }
.dash-stats span { display:block; font-size:12px; color:var(--color-secondary); }
.dash-stats b { font-size:36px; font-weight:500; display:flex; align-items:center; gap:12px; margin-top:10px; }
.dash-stats small { display:block; font-size:10px; color:var(--color-secondary); margin-top:6px; }
.dash-stats svg { color:var(--color-warning); }
.dash-records { margin-top:28px; }
.records-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.records-head h4 { font-size:14px; font-weight:550; }
.records-head>span { font-size:10px; color:var(--color-secondary); }
.data-header,.data-row { display:grid; grid-template-columns:2fr 1fr 1fr .8fr; gap:12px; align-items:center; }
.data-header { font-size:9px; color:var(--color-secondary); padding-bottom:10px; border-bottom:1px solid var(--color-border); }
.data-row { font-size:11px; padding-block:16px; border-bottom:1px solid var(--color-border); }
.data-row>span:first-child { display:flex; align-items:center; gap:10px; }
.data-row b { font-size:11px; font-weight:550; }
.data-row small { display:block; font-size:9px; color:var(--color-secondary); margin-top:5px; font-weight:400; }
.supplier-avatar { display:grid; place-items:center; height:30px; width:30px; border-radius:var(--radius-control); background:var(--color-subtle); font:10px var(--font-mono); flex-shrink:0; }
.record-tag { padding:4px 6px; border-radius:var(--radius-small); background:var(--color-success-soft); color:var(--color-success); font-style:normal; font-size:10px; white-space:nowrap; }
.record-tag.neutral { background:var(--color-subtle); color:var(--color-secondary); }
.data-row>strong { font:11px var(--font-mono); text-align:right; }
.data-header>span:last-child { text-align:right; }
.activity-line { display:flex; gap:10px; align-items:center; padding-top:20px; font-size:11px; }
.activity-line small { display:block; font-size:10px; color:var(--color-secondary); margin-top:4px; }
.activity-line>span:last-child { margin-left:auto; font-size:10px; color:var(--color-secondary); }
.activity-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--color-subtle); }
.activity-icon svg { width:14px; height:14px; }
.operation-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:32px; }
.operation-benefits>div { display:flex; gap:12px; align-items:flex-start; }
.operation-benefits svg { margin-top:2px; color:var(--color-inverse-secondary); }
.operation-benefits b { font-size:14px; font-weight:550; display:block; }
.operation-benefits small { display:block; font-size:13px; color:var(--color-inverse-secondary); margin-top:8px; }
.purchase-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; }
.club-card,.cost-card { padding:40px; border:1px solid var(--color-border); border-radius:var(--radius-panel); background:var(--color-surface); }
.club-card .eyebrow,.cost-card .eyebrow { color:var(--color-secondary); font-size:12px; }
.purchase-grid h2 { font-size:36px; letter-spacing:-1.2px; font-weight:550; margin-top:20px; }
.purchase-grid p { margin-top:20px; color:var(--color-secondary); }
.club-example { display:flex; align-items:center; justify-content:center; gap:48px; margin-top:40px; }
.case-box { width:132px; height:140px; padding:44px 13px 12px; position:relative; border:1px solid var(--color-border-strong); background:var(--color-subtle); color:var(--color-text); transform:rotate(-5deg); }
.box-tape { width:24px; height:27px; position:absolute; top:0; left:48px; background:var(--color-border); }
.case-box>span { display:block; font-size:11px; font-weight:650; }
.case-box>b { display:block; font:8px var(--font-mono); margin-top:9px; }
.box-bars { width:52px; height:13px; margin-top:9px; background:repeating-linear-gradient(90deg,var(--color-text) 0 1px,transparent 1px 3px,var(--color-text) 3px 5px,transparent 5px 7px); }
.unit-calculation>span { display:block; font:10px var(--font-mono); color:var(--color-secondary); }
.unit-calculation>b,.unit-calculation>strong { display:block; font-size:28px; font-weight:550; margin-top:8px; }
.unit-calculation small { font-size:12px; font-weight:400; }
.calc-rule { border-top:1px solid var(--color-border); margin-block:16px; }
.club-caption { display:flex; gap:8px; align-items:center; font-size:12px; border-top:1px solid var(--color-border); padding-top:20px; margin-top:28px; }
.club-caption svg { width:16px; height:16px; }
.calculator { margin-top:28px; }
.calculator-inputs { display:flex; gap:16px; align-items:flex-end; }
.calculator-inputs>label { flex:1; min-width:0; font-size:13px; color:var(--color-secondary); }
.calculator-inputs input { display:block; width:100%; margin-top:8px; font-family:var(--font-mono); }
.input-unit { display:block; position:relative; }
.input-unit>span { position:absolute; left:12px; top:13px; font:16px var(--font-mono); }
.input-unit input { padding-left:28px; }
.times { padding-bottom:12px; color:var(--color-secondary); }
.calculator-result { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--color-border); padding-top:24px; margin-top:24px; gap:12px; }
.calculator-result>span { font-size:11px; color:var(--color-secondary); max-width:110px; }
.calculator-result output { font-size:48px; font-weight:550; letter-spacing:-2px; }
.example-note { font-size:11px; color:var(--color-secondary); }
.cost-card .example-note { font-size:11px; margin-top:16px; }
.waitlist { border-block:1px solid var(--color-border); background:var(--color-subtle); }
.waitlist-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:96px; }
.waitlist h2 { font-size:64px; letter-spacing:-3px; font-weight:550; margin-top:24px; }
.waitlist h2 span { color:var(--color-secondary); }
.waitlist-copy>p { font-size:20px; max-width:350px; line-height:1.7; margin-top:24px; }
.join-details { display:flex; flex-direction:column; gap:16px; margin-top:32px; }
.join-details>div { display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--color-secondary); }
.join-details svg { width:18px; height:18px; margin-top:2px; }
.waitlist-brand { display:flex; gap:12px; align-items:center; border-top:1px solid var(--color-border); padding-top:24px; margin-top:40px; max-width:350px; font-size:13px; color:var(--color-secondary); }
.waitlist-brand img { border-radius:var(--radius-panel); }
.form-card { background:var(--color-surface); padding:32px; border:1px solid var(--color-border); border-radius:var(--radius-panel); }
.form-top h3 { font-size:24px; font-weight:550; letter-spacing:-.6px; }
.form-top p { font-size:14px; color:var(--color-secondary); margin-top:8px; }
.preview-notice { background:var(--color-warning-soft); color:var(--color-warning); border:1px solid var(--color-border); border-radius:var(--radius-small); padding:12px; font-size:12px; margin-top:20px; }
.preview-notice>span { display:block; font-size:10px; font-weight:650; margin-bottom:4px; }
#waitlist-form { margin-top:24px; }
#waitlist-form label { display:block; font-size:14px; font-weight:500; }
#waitlist-form input { display:block; width:100%; margin-top:8px; }
#waitlist-form>label,#waitlist-form>.form-field { margin-top:20px; }
.form-field { min-width:0; }
.name-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.optional { color:var(--color-secondary); font-weight:400; }
.form-consent { font-size:12px; color:var(--color-secondary); line-height:1.8; margin-top:24px; }
.form-consent a { text-decoration:underline; text-underline-offset:3px; }
#signup-submit { width:100%; margin-top:24px; }
.form-foot { color:var(--color-secondary); font-size:11px; text-align:center; margin-top:12px; }
.form-status { font-size:13px; color:var(--color-success); }
.form-status:not(:empty) { padding:16px; margin-top:16px; background:var(--color-success-soft); border-radius:var(--radius-control); }
.faq { display:grid; grid-template-columns:1fr 1.3fr; gap:96px; }
.faq-intro h2 { font-size:44px; letter-spacing:-1.5px; font-weight:550; margin-top:24px; }
.faq-intro>p:last-child { font-size:14px; color:var(--color-secondary); line-height:1.9; margin-top:24px; }
.faq-intro a { text-decoration:underline; text-underline-offset:4px; }
.faq-list { border-top:1px solid var(--color-border); }
.faq-list details { border-bottom:1px solid var(--color-border); padding-block:24px; }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:24px; list-style:none; cursor:pointer; font-size:16px; font-weight:550; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary>span { font-size:24px; color:var(--color-secondary); line-height:1; font-weight:400; }
.faq-list details[open] summary>span { transform:rotate(45deg); }
.faq-list details>p { margin-top:16px; font-size:15px; line-height:1.85; color:var(--color-secondary); }
.site-footer { padding-block:40px 24px; }
.footer-main { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:32px; border-bottom:1px solid var(--color-inverse-border); }
.footer-main>span { color:var(--color-inverse-secondary); font-size:14px; }
.footer-cta { display:flex; gap:12px; align-items:center; min-height:44px; font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.footer-bottom { display:flex; gap:24px; align-items:center; justify-content:space-between; margin-top:24px; color:var(--color-inverse-secondary); font-size:12px; }
.footer-bottom>div { display:flex; gap:24px; }
.footer-bottom a { padding-block:8px; }
.footer-bottom a:hover { color:var(--color-inverse-text); }
.footer-preview { font-size:11px; }
.utility-header { color:var(--color-inverse-text); background:var(--color-inverse); padding-block:24px; }
.utility-content { max-width:760px; margin:64px auto; padding-inline:24px; }
.utility-content h1 { font-size:48px; letter-spacing:-2px; margin-block:24px; }
.utility-content h2 { font-size:24px; margin:32px 0 12px; }
.utility-content p { margin-top:16px; color:var(--color-secondary); }
.utility-content a:not(.button) { text-decoration:underline; text-underline-offset:4px; }
.utility-content .button { margin-top:24px; }
.system-page { padding-block:64px; }
.system-page h1 { font-size:48px; letter-spacing:-2px; margin-block:16px; }
.system-page>p { max-width:760px; color:var(--color-secondary); }
.system-panel { margin-top:40px; padding:32px; border:1px solid var(--color-border); border-radius:var(--radius-panel); background:var(--color-surface); }
.system-panel h2 { font-size:24px; margin-bottom:24px; }
.system-row { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.system-panel.inverse { background:var(--color-inverse); color:var(--color-inverse-text); }
.system-inputs { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.system-inputs label { display:block; font-size:14px; }
.system-inputs input { display:block; width:100%; margin-top:8px; }
.system-swatches { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.system-swatch { min-height:110px; padding:16px; border-radius:var(--radius-control); border:1px solid var(--color-border); display:flex; align-items:flex-end; font-size:12px; }
@keyframes panel-enter { from { opacity:.5; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1150px) {
 .wrap { width:calc(100% - 64px); }
 .hero-layout { gap:40px; }
 .hero-copy h1 { font-size:58px; }
 .hero-evidence { height:580px; }
 .hero-sheet { width:470px; }
 .hero-ticket { width:160px; }
 .hero-check { left:24px; right:-8px; padding:18px; }
 .hero-check>strong { font-size:16px; }
 .hero-check-heading .badge { font-size:10px; }
 .hero-check-quantities { gap:10px; }
 .hero-check-quantities b { font-size:25px; }
 .hero-check-quantities .hero-difference { padding-left:14px; }
 .hero-difference b { font-size:24px; }
 .hero-actions { gap:16px; }
 .hero-actions .text-link { font-size:14px; }
 .document-viewport { padding:24px 20px; }
 .receiving-workspace { padding:24px; }
 .source-toolbar { padding:20px; gap:12px; }
 .format-selector button { padding:8px; font-size:14px; }
 .waitlist-layout,.faq { gap:64px; }
}
@media(max-width:960px) {
 .site-header { gap:24px; min-height:88px; }
 .site-header nav { gap:20px; }
 .brand { font-size:18px; }
 .hero-layout { grid-template-columns:minmax(0,1fr); gap:48px; padding-block:48px 64px; }
 .hero-copy { max-width:700px; }
 .hero-copy h1 { font-size:68px; max-width:650px; }
 .hero-description { max-width:530px; }
 .hero-evidence { width:620px; max-width:100%; height:600px; margin-inline:auto; }
 .hero-sheet { width:540px; }
 .hero-ticket { width:185px; }
 .hero-check { left:95px; right:0; }
 .demo-intro { gap:32px; }
 .demo-intro h2 { font-size:42px; }
 .demo-intro>p { max-width:280px; font-size:15px; }
 .demo-workspace { grid-template-columns:1fr; }
 .invoice-workspace { border-right:0; border-bottom:1px solid var(--color-border); }
 .document-viewport { height:480px; padding:24px 48px; }
 #demo-source { max-width:500px; }
 .receiving-workspace { padding:32px; }
 .receiving-context { margin-top:24px; }
 .receiving-product { margin-top:20px; }
 .receiving-product p br { display:none; }
 .receiving-product p br::after { content:' '; }
 .read-fields>div { font-size:16px; }
 .stage-content>.button { max-width:360px; }
 .demo-disclosure { padding-top:20px; }
 .demo-takeaways { gap:32px; }
 .dashboard { grid-template-columns:150px 1fr; }
 .dashboard-main { padding:24px 20px; }
 .dash-brand { font-size:9px; }
 .dash-stats>div { padding:16px 12px; }
 .dash-stats span { font-size:10px; }
 .data-header,.data-row { grid-template-columns:2fr .8fr .8fr; gap:8px; }
 .data-header>span:nth-child(2),.data-row>span:nth-child(2) { display:none; }
 .operations-heading { gap:32px; }
 .operations-heading h2 { font-size:38px; }
 .operations-heading>p { max-width:260px; font-size:15px; }
 .club-card,.cost-card { padding:28px; }
 .purchase-grid h2 { font-size:30px; }
 .club-example { gap:24px; }
 .case-box { width:115px; }
 .box-tape { left:40px; }
 .unit-calculation>span { font-size:9px; }
 .unit-calculation>b,.unit-calculation>strong { font-size:25px; }
 .calculator-inputs { gap:10px; }
 .calculator-inputs>label { font-size:11px; }
 .waitlist-layout { gap:40px; }
 .waitlist h2 { font-size:56px; }
 .form-card { padding:26px; }
 .form-top h3 { font-size:22px; }
 .faq { gap:48px; }
 .faq-intro h2 { font-size:38px; }
 .footer-main>span { display:none; }
}
@media(max-width:640px) {
 .wrap { width:calc(100% - 40px); }
 .section { padding-block:64px; }
 .site-header { min-height:80px; gap:12px; }
 .site-header nav { display:none; }
 .site-header>.button { margin-left:auto; padding-inline:12px; }
 .brand { gap:8px; font-size:16px; letter-spacing:-.4px; }
 .brand img { width:30px; height:30px; border-radius:6px; }
 .hero-layout { padding-block:36px 40px; gap:36px; }
 .availability { margin-bottom:20px; }
 .hero-copy h1 { font-size:clamp(43px,11.5vw,65px); line-height:1.065; max-width:530px; }
 .hero-description { font-size:17px; margin-top:24px; }
 .hero-actions { gap:12px 20px; margin-top:28px; }
 .hero-actions>.button { padding-inline:20px; }
 .hero-actions .text-link { font-size:14px; }
 .hero-invitation { font-size:13px; margin-top:18px; }
 .hero-footnote { font-size:12px; margin-top:20px; }
 .hero-evidence { height:465px; width:390px; }
 .hero-sheet { width:365px; top:10px; left:5px; }
 .hero-sheet .invoice-document { padding:14px 12px; }
 .hero-sheet .invoice-letterhead { margin-bottom:9px; }
 .hero-sheet .invoice-letterhead>div:first-child>b { font-size:9px; }
 .hero-sheet .invoice-letterhead span { font-size:4.5px; }
 .hero-sheet .invoice-id { min-width:63px; font-size:5px; }
 .hero-sheet .invoice-meta { font-size:4.5px; gap:8px; margin-bottom:8px; }
 .hero-sheet .invoice-terms { font-size:4px; }
 .hero-sheet .invoice-table { font-size:4.6px; letter-spacing:-.15px; line-height:1.5; }
 .hero-sheet .invoice-table td,.hero-sheet .invoice-table th { padding:1.5px; }
 .hero-sheet .invoice-table td:nth-child(4) { min-width:60px; }
 .hero-sheet .invoice-totals,.hero-sheet .invoice-payment { font-size:4.5px; }
 .hero-sheet .invoice-bottom { font-size:3.5px; }
 .hero-ticket { width:133px; top:-5px; right:0; height:415px; }
 .hero-ticket .invoice-document { padding:14px 7px; }
 .hero-ticket .invoice-letterhead>div:first-child>b { font-size:7px; }
 .hero-ticket .invoice-letterhead span { font-size:4px; }
 .hero-ticket .invoice-meta { font-size:3.5px; }
 .hero-ticket .invoice-table { font-size:3.3px; }
 .hero-ticket .invoice-table td:nth-child(3) { font-size:2.5px; }
 .hero-ticket .invoice-table td:nth-child(4) { min-width:24px; max-width:34px; }
 .hero-ticket .invoice-table td:nth-child(3) { font-size:1em; white-space:normal; min-width:24px; }
 .hero-ticket .invoice-table td:nth-child(4) { font-size:.78em; white-space:nowrap; min-width:0; max-width:none; }
 .hero-check { left:15px; right:0; bottom:29px; padding:16px; }
 .hero-check-heading { font-size:11px; }
 .hero-check-heading .badge { font-size:10px; padding:2px 5px; }
 .hero-check>strong { font-size:16px; margin-top:10px; }
 .hero-check>strong>span { font-size:11px; }
 .hero-check-quantities { gap:10px; margin-top:12px; }
 .hero-check-quantities>span { font-size:11px; }
 .hero-check-quantities b { font-size:26px; }
 .hero-check-quantities small { font-size:10px; }
 .hero-check-quantities>svg { width:14px; height:14px; }
 .hero-check-quantities .hero-difference { padding-left:12px; }
 .hero-difference b { font-size:24px; }
 .hero-evidence-note { font-size:10px; left:15px; right:auto; }
 .demo-intro { display:block; margin-bottom:28px; }
 .demo-intro h2 { font-size:38px; letter-spacing:-1.6px; }
 .demo-intro>p { margin-top:20px; max-width:none; font-size:16px; }
 .demo-stage-nav { gap:12px; padding-inline:16px; }
 .demo-stage-nav button { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-block:16px 13px; font-size:14px; line-height:1.4; min-height:92px; }
 .demo-stage-nav button>span { width:22px; height:22px; font-size:11px; }
 .source-toolbar { padding:16px; align-items:flex-start; gap:12px; }
 .source-toolbar>div:first-child { padding-top:5px; }
 .source-toolbar h3 { font-size:12px; }
 .source-toolbar>div:first-child>span { font-size:10px; }
 .format-selector { padding:2px; }
 .format-selector button { font-size:14px; min-height:44px; padding:7px; }
 .document-viewport { height:370px; padding:20px 14px; }
 #demo-source .invoice-document { padding:15px 10px; }
 #demo-source .invoice-letterhead>div:first-child>b { font-size:10px; }
 #demo-source .invoice-letterhead span { font-size:5px; }
 #demo-source .invoice-id { min-width:65px; }
 #demo-source .invoice-meta { font-size:5px; gap:8px; }
 #demo-source .invoice-terms { font-size:4.5px; }
 #demo-source .invoice-table { font-size:4.9px; letter-spacing:-.15px; }
 #demo-source .invoice-table td,#demo-source .invoice-table th { padding:1.5px; }
 #demo-source .invoice-table td:nth-child(4) { min-width:60px; }
 #demo-source .invoice-totals,#demo-source .invoice-payment { font-size:5px; }
 #demo-source[data-format=thermal] { max-width:260px; }
 #demo-source .invoice-thermal .invoice-table { font-size:6px; }
 #demo-source .invoice-thermal .invoice-table td:nth-child(4) { min-width:55px; }
 #demo-source .invoice-thermal .invoice-meta { font-size:6px; }
 #demo-source .invoice-thermal .invoice-table td:nth-child(3) { min-width:55px; }
 #demo-source .invoice-thermal .invoice-table td:nth-child(4) { min-width:0; }
 .source-line-lens { padding:16px; }
 .source-lens-heading { gap:6px; font-size:11px; flex-wrap:wrap; }
 .source-lens-heading>span:last-child { font-size:10px; }
 .source-line-lens>p { font-size:12px; line-height:1.8; }
 .source-lens-values { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; font-size:10px; }
 .source-lens-values b { font-size:12px; }
 .receiving-workspace { padding:24px 20px; }
 .receiving-heading { font-size:13px; }
 .receiving-heading .badge { font-size:11px; }
 .receiving-context h3 { font-size:28px; }
 .receiving-product h4 { font-size:23px; }
 .receiving-product p { font-size:14px; }
 .receiving-product p br { display:initial; }
 .read-fields>div { font-size:14px; }
 .price-explanation { font-size:13px; }
 .stage-content>.button { font-size:15px; max-width:none; }
 .demo-takeaways { grid-template-columns:1fr; gap:16px; margin-top:24px; }
 .operations-heading { display:block; margin-top:20px; }
 .operations-heading h2 { font-size:34px; letter-spacing:-1.3px; }
 .operations-heading>p { margin-top:20px; max-width:none; font-size:16px; }
 .dashboard { grid-template-columns:1fr; margin-top:32px; }
 .dashboard-sidebar { display:none; }
 .dashboard-main { padding:20px 16px; }
 .dash-top { font-size:9px; }
 .preview-badge { font-size:8px; }
 .dash-heading { gap:10px; }
 .dash-heading h3 { font-size:24px; }
 .dash-heading p { font-size:10px; }
 .store-select { gap:4px; }
 .store-select>svg { display:none; }
 .store-select select { font-size:11px; padding:6px; }
 .dash-stats>div { padding:14px 10px; }
 .dash-stats span { font-size:9px; }
 .dash-stats b { font-size:30px; gap:6px; }
 .dash-stats small { font-size:8px; }
 .dash-stats svg { width:15px; }
 .records-head>span { font-size:8px; }
 .data-header { font-size:7px; }
 .data-row { grid-template-columns:1.9fr .8fr .8fr; font-size:9px; }
 .data-row b { font-size:9px; }
 .data-row small { font-size:8px; }
 .data-row>span:first-child { gap:6px; }
 .supplier-avatar { height:25px; width:25px; font-size:8px; }
 .record-tag { font-size:8px; padding:3px 5px; }
 .data-row>strong { font-size:9px; }
 .activity-line { font-size:9px; gap:8px; }
 .activity-line small,.activity-line>span:last-child { font-size:8px; }
 .operation-benefits { grid-template-columns:1fr; gap:24px; }
 .purchase-grid { grid-template-columns:1fr; }
 .purchase-grid h2 { font-size:34px; }
 .club-example { gap:40px; }
 .case-box { width:130px; }
 .box-tape { left:46px; }
 .calculator-inputs>label { font-size:13px; }
 .waitlist-layout { grid-template-columns:1fr; gap:36px; }
 .waitlist h2 { font-size:60px; }
 .waitlist-copy>p { font-size:20px; }
 .waitlist-brand { display:none; }
 .join-details { margin-top:24px; }
 .join-details>div { font-size:12px; }
 .form-card { padding:26px 20px; }
 .form-top h3 { font-size:23px; }
 .form-top p { font-size:14px; }
 .name-fields { gap:12px; }
 #waitlist-form label { font-size:13px; }
 .form-consent { font-size:12px; }
 .faq { grid-template-columns:1fr; gap:32px; }
 .faq-intro h2 { font-size:38px; }
 .faq-list summary { font-size:15px; }
 .footer-main { flex-wrap:wrap; gap:24px; }
 .footer-main .brand { font-size:16px; }
 .footer-cta { font-size:14px; }
 .footer-bottom { flex-wrap:wrap; gap:20px; font-size:11px; }
 .footer-bottom>div { gap:20px; }
 .footer-preview { flex-basis:100%; font-size:10px; }
 .utility-content h1,.system-page h1 { font-size:38px; }
 .system-panel { padding:24px; }
 .system-inputs { grid-template-columns:1fr; }
 .system-swatches { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:370px) {
 .wrap { width:calc(100% - 32px); }
 .brand { font-size:14px; gap:7px; }
 .brand img { width:28px; height:28px; }
 .site-header>.button { padding-inline:10px; font-size:14px; }
 .hero-copy h1 { font-size:42px; }
 .hero-actions { gap:8px 16px; }
 .hero-actions>.button { padding-inline:16px; font-size:15px; }
 .hero-actions .text-link { font-size:14px; }
 .hero-sheet { width:335px; }
 .hero-evidence { height:440px; }
 .hero-check { left:0; padding:14px; }
 .hero-check>strong>span { display:block; margin:2px 0 0; }
 .hero-check-heading .badge { font-size:9px; }
 .hero-check-quantities { gap:8px; }
 .hero-check-quantities b { font-size:23px; }
 .hero-difference b { font-size:23px; }
 .hero-evidence-note { left:0; font-size:9px; }
 .demo-intro h2 { font-size:34px; }
 .demo-stage-nav { gap:10px; padding-inline:12px; }
 .demo-stage-nav button { font-size:14px; }
 .source-toolbar { flex-direction:column; gap:12px; }
 .source-toolbar>div:first-child { display:flex; gap:10px; align-items:center; padding-top:0; }
 .source-toolbar>div:first-child>span { margin:0; }
 .format-selector { width:100%; }
 .format-selector button { flex:1; font-size:14px; }
 .source-lens-values { grid-template-columns:1fr 1fr; gap:12px; font-size:11px; }
 .source-lens-values b { font-size:14px; }
 .receiving-workspace { padding:24px 16px; }
 .name-fields { grid-template-columns:1fr; gap:20px; }
 .club-card,.cost-card { padding:24px; }
 .purchase-grid h2 { font-size:30px; }
 .club-example { gap:24px; }
 .case-box { width:110px; }
 .box-tape { left:37px; }
 .footer-main { align-items:flex-start; flex-direction:column; gap:16px; }
}

/* Compact actions keep the same readable label floor across viewports. */
.stage-content>.button { font-size:16px; }
.hero-check-heading .badge { font-size:12px; }
.source-lens-values b { font-size:14px; }