/* Payroll illustrations. Editable labels, sample values and controls are in each page. */
.product-visual {
  --visual-line: #e0e7f3;
  position: relative;
  min-width: 0;
  padding: 32px;
  color: var(--navy);
  background: linear-gradient(145deg,#fff 45%,#f2f6ff);
  border: 1px solid #e3eaf5;
  border-radius: 18px;
  box-shadow: 0 16px 48px -32px #173d8d38,0 2px 5px #10274e03;
  isolation: isolate;
}
.visual-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:60px; }
.visual-heading>span { max-width:250px; font-size:.87rem; line-height:1.45; font-weight:500; color:#4b5e7c; }
.visual-total { display:block; font-family:var(--head); font-weight:500; color:#244ee4; font-size:clamp(2.3rem,3.7vw,3.8rem); letter-spacing:-.065em; line-height:1.1; white-space:nowrap; font-variant-numeric:tabular-nums; }
.visual-total small { font:400 .43em var(--font); letter-spacing:-.02em; color:#8295c1; }
.visual-canvas { display:block; width:100%; height:auto; overflow:visible; margin:32px auto 0; }
.chart-grid { fill:none; stroke:#dfe7f4; stroke-width:1; }
.chart-value { font-family:var(--font); font-size:17px; font-weight:500; fill:#1c3054; }
.chart-label { font-family:var(--font); font-size:15px; fill:#6a7c98; }
.axis-label { font-size:13px; fill:#8d9cb3; }
.product-visual figcaption { border-top:1px solid var(--visual-line); margin-top:24px; padding-top:15px; color:#64738c; font-size:.71rem; line-height:1.6; }
.visual-explanation { margin-top:22px; font-size:.82rem; line-height:1.7; min-height:3.4em; color:#586a87; }
.visual-controls { display:flex; flex-wrap:wrap; gap:4px; padding:4px; margin-top:24px; background:#eaf0fa; border-radius:9px; }
.visual-controls button { flex:1; border:0; border-radius:6px; background:transparent; color:#61718c; font-size:.72rem; font-weight:500; padding:10px 8px; line-height:1.4; min-height:38px; transition:background .2s,color .2s,box-shadow .2s; }
.visual-controls button[aria-pressed=true] { background:white; color:#244ee4; box-shadow:0 1px 4px #182f7020; }
.visual-controls button:hover { color:#244ee4; background:#ffffff80; }
.visual-controls:has(button:disabled) { display:none; }
.visual-action { display:flex; width:100%; align-items:center; justify-content:space-between; gap:20px; margin-top:22px; padding:13px 16px; border:1px solid #d5e0f4; border-radius:8px; background:#f7faff; color:#244ee4; text-align:left; font-size:.79rem; font-weight:500; }
.visual-action:hover,.visual-action[aria-pressed=true] { background:#edf3ff; border-color:#a4baf2; }
.visual-action span { font-size:1.2rem; }
.visual-action:disabled { display:none; }
/* Exact working-hour values on a zero-based scale. */
.time-column { transition:opacity .25s; }
.time-column.is-muted { opacity:.24; }
.bar-track { fill:#edf2fb; }
.bar-highlight { fill:none; stroke:#bfd6ff; stroke-width:1; opacity:.9; }
.bar-amount { font:500 15px var(--font); fill:white; }
.time-controls button { min-width:32px; padding:9px 6px; }
.time-controls button:first-child { flex:1.55; }
/* Rules are shown as reviewable conditions, with no decorative document stack. */
.rule-composition { margin-top:25px; position:relative; }
.rule-layer { display:flex; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid var(--visual-line); transition:opacity .25s; }
.rule-layer.is-muted { opacity:.5; }
.rule-index { font:500 .72rem var(--head); color:#244ee4; border:1px solid #d5e0fa; background:#f5f8ff; width:31px; height:31px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.rule-layer>div { flex:1; }
.rule-label { display:block; color:#76869f; font-size:.71rem; margin-bottom:6px; }
.rule-layer strong { display:block; font:500 .85rem var(--font); color:#20375e; line-height:1.5; }
.rule-layer svg { width:19px; height:19px; fill:none; stroke:#2b5ce5; stroke-width:1.6; flex-shrink:0; }
.rule-result { display:flex; align-items:center; gap:18px; padding:20px 0 5px; font-size:.86rem; color:#244ee4; }
.rule-result-mark { display:grid; place-items:center; width:31px; height:31px; font-size:1.4rem; font-weight:400; }
/* Approval nodes retain a distinct path for returned inputs. */
.route-bed { fill:none; stroke:#e1e9f8; stroke-width:4; }
.route-line { fill:none; stroke:#4776ed; stroke-width:1.5; stroke-dasharray:4 6; }
.route-halo { fill:#f0f5ff; stroke:#d9e5fc; stroke-width:1; }
.route-station { stroke:#87b1ff; stroke-width:1; }
.route-number { font:500 17px var(--head); fill:white; }
.return-route path { fill:none; stroke:#6989d6; stroke-width:1.4; stroke-dasharray:4 5; }
.return-route text { font:400 14px var(--font); fill:#7487a8; }
.visual-approval.is-return .route-line { opacity:.3; }
.visual-approval .visual-canvas { margin-top:2px; }
.visual-approval .chart-label { font-size:12px; }
.visual-approval .chart-value { font-size:16px; }
/* Interactive commission calculation: x = sales, y = commission in euros. */
.commission-intro { margin-top:12px; font-size:.85rem; line-height:1.65; color:#4b5e7c; }
.commission-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; gap:14px 18px; min-width:0; border:0; padding:0; margin:22px 0 0; }
.commission-settings legend { padding:0; margin-bottom:12px; font:500 .83rem var(--head); color:#24385d; }
.commission-field { display:flex; flex-direction:column; gap:6px; min-width:0; color:#4b5e7c; font-size:.75rem; line-height:1.5; }
.commission-field input,.commission-control input[type=number] { width:100%; min-width:0; padding:9px 11px; border:1px solid #c9d6ef; border-radius:7px; background:#fff; color:#24385d; font:500 1rem var(--head); font-variant-numeric:tabular-nums; }
.visual-commission input[aria-invalid=true] { border-color:#ad3434; }
.commission-error { margin-top:16px; font-size:.8rem; color:#a52b2b; }
.commission-breakdown { margin:20px 0 0; }
.commission-breakdown>div { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--visual-line); padding:10px 0; font-size:.78rem; }
.commission-breakdown dt { min-width:0; color:#4b5e7c; }
.commission-breakdown dt span { display:block; }
.commission-breakdown [data-commission-formula] { margin-top:2px; font-size:.73rem; font-variant-numeric:tabular-nums; }
.commission-breakdown dd { margin:0; color:#24385d; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.visual-commission .visual-canvas { margin-top:22px; }
.visual-commission [hidden] { display:none!important; }
.visual-commission .visual-heading { flex-wrap:wrap; gap:8px 20px; }
.commission-line { fill:none; stroke:#2c59df; stroke-width:2.5; stroke-linecap:round; }
.commission-guide { fill:none; stroke:#8aa7e7; stroke-width:1; stroke-dasharray:3 5; }
.commission-point-halo { fill:#d1e0ff; opacity:.65; }
.commission-point { fill:#244ee4; stroke:white; stroke-width:3; }
.commission-control { margin-top:24px; }
.commission-control label { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:.81rem; color:#6b7e9e; }
.commission-control input[type=number] { width:145px; }
.commission-control input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:5px; margin:26px 0 8px; background:linear-gradient(to right,#315ee6 0%,#315ee6 var(--range-position,50%),#e3ebfa var(--range-position,50%),#e3ebfa 100%); border-radius:4px; cursor:ew-resize; }
.commission-control input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:white; border:5px solid #315ee6; box-shadow:0 1px 6px #244ee435; }
.commission-control input[type=range]::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:white; border:5px solid #315ee6; box-shadow:0 1px 6px #244ee435; }
.commission-control input[type=range]:disabled { display:none; }
/* Connections name their source and their calculation destination. */
.connection-input { fill:none; stroke:#b5c8ed; stroke-width:1.5; }
.integration-source { fill:#fff; stroke:#dce5f5; stroke-width:1; }
.input-dot { fill:#3867e4; }
.dot-1 { fill:#74aaff; }.dot-2 { fill:#183570; }
.integration-track { fill:none; stroke:#dfe7f6; stroke-width:2; }
.integration-track.active { stroke:#315fe8; stroke-width:2.5; }
.integration-junction { stroke:#8ab4ff; stroke-width:1; }
.hub-label { font:500 25px var(--head); fill:white; letter-spacing:-1px; }
.integration-destination { fill:#f5f8ff; stroke:#d8e4fc; stroke-width:1; }
.visual-integrations .chart-value { font-size:14px; }
.visual-integrations .chart-label { font-size:14px; }
/* Compare summary amounts, preserving their actual relative lengths. */
.comparison-values { display:grid; grid-template-columns:1fr 1fr; gap:25px; padding-top:28px; margin-top:22px; border-top:1px solid var(--visual-line); }
.comparison-values span { display:block; color:#7383a0; font-size:.69rem; margin-bottom:12px; }
.comparison-values strong { color:#18315a; font:500 1.65rem var(--head); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.comparison-baseline { fill:none; stroke:#edf2fb; stroke-width:17; stroke-linecap:round; }
.comparison-stream { fill:none; stroke-width:10; stroke-linecap:round; transition:stroke-width .3s; }
.stream-first { stroke:#315ee6; }.stream-second { stroke:#8fb7f4; }
.difference-tick { fill:none; stroke:#9aafd3; stroke-width:1; }
.visual-reconciliation.is-matched .difference-tick { display:none; }
.visual-reconciliation.is-matched .stream-second { stroke:#92bcff; stroke-width:4; }
.visual-reconciliation .visual-canvas { margin-top:22px; }
/* Gross pay: a proportional total and a readable breakdown. */
.pay-breakdown { margin-top:35px; }
.pay-stack { display:flex; height:65px; gap:3px; border-radius:8px; overflow:hidden; margin-bottom:26px; }
.pay-stack span { background:linear-gradient(135deg,#5482f4,#244ee4); }
.pay-stack span:nth-child(2) { background:#a9c9fd; }
.pay-stack span:nth-child(3) { background:linear-gradient(135deg,#2e548f,#122b55); }
.pay-breakdown-row { display:flex; align-items:center; gap:12px; padding:19px 0; border-bottom:1px solid var(--visual-line); font-size:.85rem; color:#5c6f8f; }
.pay-breakdown-row strong { margin-left:auto; color:#17315c; font-weight:500; font-variant-numeric:tabular-nums; }
.pay-swatch { width:8px; height:8px; background:#315ee6; border-radius:2px; }
.swatch-1 { background:#a9c9fd; }.swatch-2 { background:#183968; }
/* Each client has its own record, rules and progress. */
.client-portfolio { margin-top:12px; }
.client-lane { padding:28px 0; border-bottom:1px solid var(--visual-line); }
.client-lane:last-child { border-bottom:0; padding-bottom:8px; }
.client-identity { display:flex; align-items:center; gap:13px; }
.client-monogram { display:grid; place-items:center; width:39px; height:39px; flex-shrink:0; border-radius:10px; background:linear-gradient(135deg,#e8f0ff,#d9e6ff); color:#315de0; border:1px solid #d1dff8; font:500 .92rem var(--head); }
.client-1 .client-monogram { background:linear-gradient(135deg,#4477f0,#234cca); color:white; border-color:#7397f2; }
.client-2 .client-monogram { background:linear-gradient(135deg,#395a8f,#182e50); color:white; border-color:#546e96; }
.client-identity strong { display:block; font:500 .85rem var(--font); color:#1d355d; }
.client-identity>div>span { display:block; font-size:.67rem; color:#8592a9; margin-top:4px; }
.client-state { margin-left:auto; font-size:.66rem; white-space:nowrap; color:#8b6c30; background:#fff8ea; border:1px solid #f1e6ce; border-radius:5px; padding:5px 7px; }
.state-1 { color:#63789d; background:#f0f4fb; border-color:#e1e8f6; }
.state-2 { color:#2a56c6; background:#eef3ff; border-color:#dbe6ff; }
.client-progress { display:flex; gap:4px; padding-left:52px; margin-top:15px; }
.client-progress i { height:3px; flex:1; background:#e8edf6; border-radius:2px; }
.client-progress i.complete { background:#4b79e9; }
/* One full-size interactive example at a time; all remain readable without JS. */
.feature-explorer { display:grid; grid-template-columns:.85fr 1.65fr; gap:65px; align-items:start; }
.feature-choices { display:none; }
.feature-explorer.enhanced .feature-choices { display:flex; flex-direction:column; align-items:stretch; padding-top:20px; }
.feature-choices button { text-align:left; border:0; background:transparent; padding:21px 30px 21px 18px; border-left:2px solid #e3eaf6; font-family:var(--head); font-size:1.06rem; line-height:1.45; color:#748099; position:relative; transition:color .2s,background .2s; }
.feature-choices button[aria-selected=true] { color:#244ee4; background:linear-gradient(90deg,#edf3ff,transparent); border-left-color:#315de5; }
.feature-choices button[aria-selected=true]::after { content:'↗'; position:absolute; right:10px; top:21px; font-family:var(--font); font-size:1rem; }
.feature-canvases { min-width:0; }
.feature-canvas-panel { min-height:680px; padding:28px; background:radial-gradient(ellipse at 65% 25%,#e2ebff,#f5f8ff 65%,#fff); border-radius:22px; }
.feature-canvas-panel .product-visual { max-width:600px; margin:0 auto; }
.feature-caption { padding:28px 14px 4px; }
.feature-caption h3 { font-size:1.25rem; margin-bottom:12px; }
.feature-caption p { font-size:.88rem; max-width:520px; }
.feature-caption .text-link { font-size:.83rem; margin-top:16px; }
.feature-explorer:not(.enhanced) { display:block; }
.feature-explorer:not(.enhanced) .feature-canvas-panel+.feature-canvas-panel { margin-top:30px; }
.page-head-grid>.product-visual,.detail-grid>.product-visual { align-self:center; }
/* Collection and pay transparency diagrams. All labels live in the owning HTML. */
.illustrated-feature-head { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-bottom:48px; }
.illustrated-feature-head .section-head { margin:0; }
.illustrated-feature-head h2 { font-size:clamp(2rem,3.1vw,3rem); }
.process-icon { width:25px; height:25px; flex-shrink:0; }
.visual-heading .process-brand { color:#244ee4; font-family:var(--head); font-size:1rem; text-align:right; }
.collection-sources { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:26px; }
.collection-source { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; color:#425778; font-size:.78rem; line-height:1.5; }
.process-icon-disc { display:grid; place-items:center; width:60px; height:60px; border:1px solid #bdcff8; border-radius:18px; color:#244ee4; background:linear-gradient(135deg,#fff,#e1ebff); box-shadow:0 8px 20px -12px #244ee490; }
.collection-source:nth-child(2) .process-icon-disc { background:linear-gradient(135deg,#5485fa,#244ee4); color:#fff; border-color:#7ea1f6; }
.process-connectors { display:block; width:100%; height:65px; overflow:visible; }
.process-path-bed { fill:none; stroke:#e4ebf9; stroke-width:6; }
.process-path { fill:none; stroke:#91b0ee; stroke-width:1.5; }
.process-arrow { fill:none; stroke:#5681dc; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.collection-hub { display:flex; align-items:center; justify-content:center; gap:14px; min-height:64px; padding:12px; margin:0 15%; color:#fff; border:1px solid #6e94f3; border-radius:12px; background:linear-gradient(125deg,#4779f3,#244ee4); box-shadow:0 12px 25px -16px #244ee4; }
.collection-hub strong { color:inherit; font-size:.88rem; font-weight:500; }
.collection-results { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.collection-result { display:flex; flex-direction:column; align-items:center; gap:7px; border-top:2px solid #8cb4f3; padding:15px 6px 0; text-align:center; color:#244ee4; }
.collection-result strong { color:inherit; font-size:.79rem; font-weight:500; }
.collection-result>span { font-size:.72rem; color:#64738c; }
.collection-result.needs-review { color:#986519; border-color:#e6c88f; }
.document-inputs { display:flex; justify-content:center; flex-wrap:wrap; gap:16px 24px; padding-top:24px; font-size:.78rem; color:#425778; }
.document-inputs>span { display:flex; align-items:center; gap:8px; }
.document-inputs .process-icon { color:#426dde; width:21px; height:21px; }
.document-generation { display:flex; align-items:center; justify-content:center; gap:12px; color:#244ee4; margin:22px 0; }
.document-generation>span { font-size:1.7rem; line-height:1; }
.document-generation strong { font-size:.82rem; font-weight:500; }
.generated-documents { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.generated-document { display:flex; align-items:center; gap:15px; min-height:68px; padding:12px 16px; background:#fff; border:1px solid #dce5f5; border-radius:8px; box-shadow:0 8px 16px -12px #20498455; color:#274167; font-size:.82rem; }
.document-thumbnail { display:grid; place-items:center; width:36px; height:43px; flex-shrink:0; color:#315ee6; background:#edf3ff; border-radius:4px; }
.generated-document:nth-child(2) { margin-left:16px; }
.generated-document:nth-child(3) { margin-left:32px; }
.document-ready { margin-left:auto; color:#426dde; }
.document-ready .process-icon { width:18px; height:18px; }
.document-approval { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid #dce5f5; color:#244ee4; }
.document-approval strong { color:inherit; font-size:.82rem; font-weight:500; }
@media(max-width:1120px) { .illustrated-feature-head { gap:40px; } }
@media(max-width:960px) { .illustrated-feature-head { grid-template-columns:1fr; gap:32px; }.illustrated-feature-head>.product-visual { max-width:600px; width:100%; margin:0 auto; } }
@media(max-width:480px) {
 .collection-sources { gap:8px; }.collection-source { font-size:.73rem; }.process-icon-disc { width:48px; height:48px; border-radius:14px; }
 .collection-hub { margin:0 5%; }.collection-hub strong { font-size:.8rem; }.collection-results { gap:12px; }
 .generated-document { padding:10px; gap:10px; font-size:.76rem; }.generated-document:nth-child(2) { margin-left:8px; }.generated-document:nth-child(3) { margin-left:16px; }
 .document-inputs { gap:12px; font-size:.73rem; }.document-approval strong { font-size:.77rem; }
}
@media(min-width:961px) { .flow-sculpture img { transform:scale(1.07); } }
@media(max-width:1120px) { .feature-explorer { gap:35px; } .product-visual { padding:25px; } .feature-canvas-panel { padding:22px; } }
@media(max-width:760px) {
 .feature-explorer { grid-template-columns:1fr; gap:22px; }
 .feature-explorer.enhanced .feature-choices { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:0; }
 .feature-choices button { border-left:0; border-bottom:1px solid #dce5f5; padding:14px 24px 14px 0; font-size:.88rem; }
 .feature-choices button[aria-selected=true] { background:none; border-bottom-color:#315de5; }
 .feature-choices button[aria-selected=true]::after { top:15px; right:4px; }
 .feature-canvas-panel { min-height:0; }
 .product-visual { max-width:600px; width:100%; margin:0 auto; }
 .page-head-grid>.product-visual { margin-top:8px; }
}
@media(max-width:480px) {
 .feature-canvas-panel { padding:12px; margin:0 -12px; border-radius:16px; }
 .product-visual { padding:21px; border-radius:12px; }
 .visual-heading { gap:14px; min-height:45px; }
 .visual-heading>span { font-size:.76rem; max-width:160px; }
 .visual-total { font-size:2.5rem; }
 .visual-canvas { margin-top:23px; }
 .visual-controls { margin-top:18px; gap:2px; }
 .visual-controls button { font-size:.64rem; padding:8px 4px; }
 .visual-explanation { font-size:.75rem; min-height:0; }
 .product-visual figcaption { font-size:.64rem; margin-top:19px; padding-top:13px; }
 .rule-layer { gap:12px; padding:15px 0; }
 .rule-layer strong { font-size:.75rem; }.rule-label { font-size:.64rem; }
 .rule-result { gap:12px; font-size:.77rem; }
 .visual-action { font-size:.72rem; padding:11px 12px; }
 .comparison-values { gap:14px; }.comparison-values strong { font-size:1.45rem; }
 .comparison-values span { font-size:.64rem; }
 .client-identity { flex-wrap:wrap; gap:10px; }
 .client-state { font-size:.59rem; padding:4px 5px; }
 .client-monogram { width:32px; height:32px; }
 .client-identity strong { font-size:.76rem; }
 .client-identity>div>span { font-size:.6rem; }
 .client-progress { padding-left:42px; }
 .feature-caption { padding:23px 8px 12px; }.feature-caption h3 { font-size:1.16rem; }.feature-caption p { font-size:.83rem; }
 .visual-approval .chart-value { font-size:17px; }
 .visual-approval .chart-label { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .product-visual *,.feature-choices button { transition:none!important; animation:none!important; } }
@media print { .feature-choices,.visual-controls,.visual-action,.commission-control input[type=range] { display:none!important; }.feature-explorer { display:block; }.feature-canvas-panel[hidden] { display:block!important; }.feature-canvas-panel { break-inside:avoid; margin-bottom:25px; } }
/* Keep diagram labels readable when the SVG scales down on a phone. */
@media(max-width:480px) {
 .visual-time .chart-label,.visual-time .bar-amount { font-size:23px; }
 .visual-time .axis-label { font-size:20px; }
 .visual-integrations .chart-label,.visual-integrations .chart-value { font-size:21px; }
 .visual-approval .chart-value { font-size:23px; }
 .visual-approval .chart-label { display:none; }
 .visual-approval .return-route text { font-size:20px; }
 .visual-reconciliation .chart-label { font-size:20px; }
 .visual-commission .chart-label { font-size:21px; }
 .visual-commission .axis-label { font-size:18px; }
}