/* Decorative editorial covers: schematic illustrations, never product screenshots. */
.catalogue-visual{
  --visual-ink:#527993;
  --visual-tint:#dfebf3;
  --visual-mid:#a2bfd2;
  --visual-accent:#f2c675;
  --visual-bg:#eff4f7;
  --visual-halo:#e3edf3;
  display:block;
  width:100%;
  aspect-ratio:2/1;
  overflow:hidden;
  background:var(--visual-bg);
  color:var(--visual-ink);
  isolation:isolate;
}
.catalogue-visual--orders{--visual-ink:#637f7d;--visual-tint:#e3ece9;--visual-mid:#a9c3bb;--visual-bg:#f0f4f1;--visual-halo:#e3ece6;--visual-accent:#dcc997}
.catalogue-visual--reports{--visual-ink:#747486;--visual-tint:#e7e6ec;--visual-mid:#b6b4c6;--visual-bg:#f3f2f5;--visual-halo:#e9e7ef;--visual-accent:#d7bf95}
.catalogue-visual--production{--visual-ink:#807868;--visual-tint:#ece7de;--visual-mid:#c6bca7;--visual-bg:#f5f2ec;--visual-halo:#eae5da;--visual-accent:#c7d3c1}
.catalogue-visual--tools{--visual-ink:#637e95;--visual-tint:#e2eaf1;--visual-mid:#b2c2d2;--visual-bg:#f0f3f7;--visual-halo:#e5eaf2;--visual-accent:#d9c4a6}
.catalogue-visual--integration{--visual-ink:#577991;--visual-tint:#e0ebf2;--visual-mid:#a7c0d2;--visual-bg:#edf3f7;--visual-halo:#e0ebf2}
.catalogue-visual svg{display:block;width:100%;height:100%;overflow:visible}
.visual-drawing{stroke:var(--visual-ink);stroke-width:1.8}
.visual-paper{fill:#fff;stroke:var(--visual-mid);stroke-width:1.4}
.visual-shadow{fill:var(--visual-ink);opacity:.07;stroke:none}
.visual-tint,.visual-box{fill:var(--visual-tint)}
.visual-mid{fill:var(--visual-mid);stroke:none}
.visual-accent{fill:var(--visual-accent);stroke:none}
.visual-halo{fill:var(--visual-halo)}
.visual-background-rule{stroke:var(--visual-mid);stroke-width:1;opacity:.3}
.visual-rule{stroke:var(--visual-mid);stroke-width:2}
.visual-strong-rule{stroke:var(--visual-ink);stroke-width:4}
.visual-dot{fill:var(--visual-ink);stroke:#fff;stroke-width:2}
.visual-dashed{stroke:var(--visual-mid);stroke-dasharray:4 6}
.visual-route,.visual-chart-line{stroke-width:3;stroke:var(--visual-ink)}
.visual-shelf{stroke:var(--visual-mid);stroke-width:5}
.visual-signal{stroke:var(--visual-mid);stroke-width:2}
.visual-barcode{fill:var(--visual-ink);stroke:none}
.visual-glass{fill:var(--visual-tint);stroke-width:3}
.visual-connector{stroke:var(--visual-mid);stroke-width:2}
.visual-partner-mark{stroke:var(--visual-ink);stroke-width:1.5;opacity:.75}
.visual-partner-name{fill:var(--ink);stroke:none;font-family:var(--font);font-size:29px;font-weight:650;letter-spacing:-1px}
.visual-partner-sub{fill:var(--muted);stroke:none;font-family:var(--font);font-size:16px;font-weight:450;letter-spacing:0}
.visual-system-name{fill:var(--visual-ink);stroke:none;font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:.3px}
/* Official marks are separate images: no inherited SVG strokes or visual effects.
   142px panel minus 28px padding and borders leaves a 112px Fortnox mark
   (25.2px high), above the guide's 22px minimum. Padding exceeds its F width. */
.catalogue-visual--official{position:relative;container-type:inline-size}
.visual-integration-layout{position:absolute;inset:14% 5%;display:grid;grid-template-columns:minmax(32px,.24fr) minmax(12px,.12fr) minmax(142px,1fr);align-items:center}
.visual-own-system{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.catalogue-visual .visual-own-system svg{width:100%;height:auto;max-width:72px}
.visual-own-system span{font-size:clamp(9px,2.7cqi,14px);font-weight:600;line-height:1.2;color:var(--visual-ink)}
.catalogue-visual .visual-official-connector{width:100%;height:36px;overflow:hidden}
.visual-official-panel{display:flex;align-items:center;justify-content:center;min-width:0;min-height:66px;height:100%;max-height:134px;padding:max(14px,10%);border:1px solid var(--visual-mid);border-radius:12px;background:#fff}
.visual-official-panel .visual-official-logo{display:block;width:100%;max-width:220px;height:auto;flex:none;filter:none;box-shadow:none;transform:none}
.catalogue-card{--card-inset:28px}
.catalogue-card>.catalogue-visual{width:calc(100% + 2*var(--card-inset));margin:calc(-1*var(--card-inset)) calc(-1*var(--card-inset)) 25px;border-radius:17px 17px 0 0;flex:none}
.catalogue-card .card-meta{margin-bottom:16px}
.detail-visual{max-width:680px;border:1px solid var(--line);border-radius:14px;margin-top:32px}
.integration-grid>a{--integration-inset:34px;flex-direction:column;align-items:stretch;gap:22px;justify-content:start;min-width:0}
.integration-grid .integration-name{overflow-wrap:anywhere}
.integration-grid>a>.catalogue-visual{width:calc(100% + 2*var(--integration-inset));margin:calc(-1*var(--integration-inset)) calc(-1*var(--integration-inset)) 5px;border-radius:17px 17px 0 0;flex:none}
.integration-grid .integration-bottom{margin-top:auto}
@media(max-width:1000px){.integration-grid>a{--integration-inset:24px;padding:24px}}
@media(max-width:760px){.integration-grid>a{flex-direction:column;align-items:stretch;gap:20px}.integration-grid>a>.catalogue-visual{aspect-ratio:2.5/1}.integration-grid>a>.catalogue-visual svg{object-fit:contain}}
@media(max-width:540px){.catalogue-card{--card-inset:25px}}
@media(forced-colors:active){.catalogue-visual{display:none}}