:root {
  /* Image wordmarks retain accessible text without visible duplicate glyphs. */
  --pn-fs-hidden: 0; --pn-lh-hidden: 0;
  color-scheme: light;
  --pn-ink-25: #fafafb;
  --pn-ink-50: #f5f6f8;
  --pn-ink-100: #eceef2;
  --pn-ink-200: #dde0e6;
  --pn-ink-300: #c2c7d0;
  --pn-ink-400: #9aa1ad;
  --pn-ink-500: #68717f;
  --pn-ink-600: #57606e;
  --pn-ink-700: #414a57;
  --pn-ink-800: #2c3441;
  --pn-ink-900: #1b2230;
  --pn-ink-950: #10141c;
  --pn-aurum-50: #fbf6e8;
  --pn-aurum-100: #f6eccb;
  --pn-aurum-200: #eddca0;
  --pn-aurum-300: #e2c86f;
  --pn-aurum-400: #d5b043;
  --pn-aurum-500: #c29222;
  --pn-aurum-600: #a67a18;
  --pn-aurum-650: #966d14;
  --pn-aurum-700: #85610f;
  --pn-aurum-800: #64490c;
  --pn-success-50: #e9f6ec;
  --pn-success-100: #cfebd8;
  --pn-success-200: #a9dbb9;
  --pn-success-300: #7bc990;
  --pn-success-500: #2e9c4f;
  --pn-success-600: #238243;
  --pn-success-700: #176230;
  --pn-success-800: #124d27;
  /* Warning is amber, never a second red (SYS2-09): beside danger
     (#9a1926 on #fbe9eb) it must read as "care needed" without its icon,
     for color-blind readers too, and it gives Sandbox its amber dot. */
  --pn-warning-50: #fdf4e1;
  --pn-warning-100: #f1d9a7;
  --pn-warning-200: #e6bd6c;
  --pn-warning-500: #c27c0e;
  --pn-warning-600: #a5650a;
  --pn-warning-700: #8a4b00;
  --pn-warning-800: #6b3a00;
  --pn-danger-50: #fbe9eb;
  --pn-danger-100: #f6d2d6;
  --pn-danger-200: #eda6ae;
  --pn-danger-300: #e27582;
  --pn-danger-500: #d83143;
  --pn-danger-600: #c11f2f;
  --pn-danger-700: #9a1926;
  --pn-danger-800: #77141e;
  --pn-info-50: #eaf0fb;
  --pn-info-100: #d6e2f7;
  --pn-info-500: #3d6fc0;
  --pn-info-600: #2c55b8;
  --pn-info-700: #24449a;
  --pn-info-800: #1c3475;

  --pn-status-success-bg: #e9f6ec;
  --pn-status-success-border: #cfebd8;
  --pn-status-success-solid: #2e9c4f;
  --pn-status-success-fg: #176230;
  --pn-status-warning-bg: #fdf4e1;
  --pn-status-warning-border: #f1d9a7;
  --pn-status-warning-solid: #c27c0e;
  --pn-status-warning-fg: #8a4b00;
  --pn-status-danger-bg: #fbe9eb;
  --pn-status-danger-border: #f6d2d6;
  --pn-status-danger-solid: #d83143;
  --pn-status-danger-fg: #9a1926;
  /* Label color for a filled status pill, measured against the solid it
     sits on. White clears 4.5:1 on danger in both palettes (4.73 light,
     5.99 dark), but the amber warning solid does not: it takes ink in
     both (5.43 light, 6.43 dark; white is only 3.40). Warning text is
     6.22:1 on its tint and 6.80:1 on a surface in light, 9.48:1 and
     10.41:1 in dark. */
  --pn-status-danger-on-solid: #ffffff;
  --pn-status-warning-on-solid: var(--pn-ink-950);
  --pn-status-success-on-solid: var(--pn-ink-950);
  --pn-status-info-on-solid: #ffffff;
  --pn-status-info-bg: #eaf0fb;
  --pn-status-info-border: #d6e2f7;
  --pn-status-info-solid: #3d6fc0;
  --pn-status-info-fg: #24449a;
  --pn-accent-bg: var(--pn-aurum-50);
  --pn-accent-border: var(--pn-aurum-200);
  --pn-accent-solid: var(--pn-aurum-600);
  --pn-accent-fg: var(--pn-aurum-800);
  /* Environment identity (D-ENV): one chip and a 3 px rule in both
     environments. Sandbox reuses the warning family (amber dot, tinted chip);
     Live is a deep green solid that is never painted as danger. White on
     --pn-env-live is 7.43:1 light and 4.83:1 dark; both rules clear 3:1
     against their page. Neutral marks a page whose true scope is not the
     selected environment (scopeOverride) and the review connection. */
  --pn-env-sandbox: var(--pn-status-warning-solid);
  --pn-env-sandbox-bg: var(--pn-status-warning-bg);
  --pn-env-sandbox-border: var(--pn-status-warning-border);
  --pn-env-sandbox-fg: var(--pn-status-warning-fg);
  --pn-env-live: var(--pn-success-700);
  --pn-env-live-on: var(--pn-white-invariant);
  --pn-env-neutral: var(--pn-ink-500);
  --pn-env-rule: 3px;

  --pn-chart-c1: #b8831a;
  --pn-chart-c2: #0b9384;
  --pn-chart-c3: #7a4e9e;
  --pn-chart-c4: #c05b33;
  --pn-chart-c5: #3d6fc0;
  --pn-chart-c6: #d06287;
  --pn-chart-other: #9aa1ad;
  --pn-chart-rail-ecocash: var(--pn-chart-c1);
  --pn-chart-rail-zimswitch: var(--pn-chart-c2);
  --pn-chart-rail-zipit: var(--pn-chart-c2);
  --pn-chart-rail-omari: var(--pn-chart-c3);
  --pn-chart-rail-innbucks: var(--pn-chart-c4);
  --pn-chart-rail-card: var(--pn-chart-c5);
  --pn-chart-rail-cards: var(--pn-chart-c5);
  --pn-chart-rail-onemoney: var(--pn-chart-c6);
  --pn-bg-page: var(--pn-ink-25);
  --pn-bg-surface: var(--pn-white-invariant);
  --pn-bg-raised: var(--pn-white-invariant);
  --pn-bg-sunken: var(--pn-ink-50);
  --pn-bg-wash-hover: var(--pn-ink-50);
  --pn-bg-wash-selected: var(--pn-ink-100);
  --pn-text-primary: var(--pn-ink-900);
  --pn-text-secondary: var(--pn-ink-600);
  --pn-text-muted: var(--pn-ink-500);
  --pn-text-placeholder: var(--pn-ink-400);
  --pn-text-on-action: var(--pn-white-invariant);
  --pn-text-link: var(--pn-aurum-700);
  --pn-border-hairline: var(--pn-ink-200);
  --pn-border-strong: var(--pn-ink-300);
  --pn-border-default: var(--pn-border-strong);
  /* The hairline's width (doc 08 §6), the partner of the --pn-border-hairline
     color and the one length below the spacing scale's 2 px step. A spacing
     value that must equal a hairline (a grid gap painted in the hairline color
     between cells, or the 1 px that seats a 14 px icon on a 16 px caption
     line) takes this token, never arithmetic on --pn-space-05. Theme-invariant. */
  --pn-border-width-hairline: 1px;
  --pn-action-primary-bg: var(--pn-ink-900);
  --pn-action-primary-bg-hover: var(--pn-ink-800);
  --pn-action-primary-bg-active: var(--pn-ink-950);
  --pn-focus-ring: var(--pn-aurum-600);
  --pn-accent: var(--pn-aurum-500);
  --pn-white-invariant: #fff;
  /* Self-contained email documents retain these reviewed dark-text tones. */
  --pn-email-text-secondary: #c8ced8;
  --pn-email-text-body: #e8eaee;
  --pn-print-ink: #000;
  --pn-print-ink-soft: #111;
  --pn-print-border: #777;
  --pn-print-border-light: #aaa;
  --pn-brand-ecocash-red: #ED1C24;
  --pn-brand-ecocash-blue: #005BAB;
  --pn-scrim: rgb(16 20 28 / 56%);
  --pn-scrim-strong: rgb(8 11 16 / 82%);
  --pn-text-on-dark: var(--pn-white-invariant);
  --pn-text-on-dark-secondary: rgb(255 255 255 / 84%);
  --pn-text-on-dark-muted: rgb(255 255 255 / 64%);
  --pn-text-on-dark-disabled: rgb(255 255 255 / 56%);
  --pn-on-dark-border-faint: rgb(255 255 255 / 9%);
  --pn-on-dark-border-subtle: rgb(255 255 255 / 14%);
  --pn-on-dark-border-strong: rgb(255 255 255 / 24%);
  --pn-on-dark-surface-subtle: rgb(255 255 255 / 5%);
  --pn-on-dark-surface-soft: rgb(255 255 255 / 10%);
  --pn-on-dark-surface-emphasis: rgb(255 255 255 / 18%);
  --pn-on-dark-surface-raised: rgb(16 20 28 / 72%);
  --pn-aurum-ring: rgb(226 200 111 / 25%);
  --pn-aurum-ring-soft: rgb(226 200 111 / 4%);
  --pn-aurum-ring-faint: rgb(226 200 111 / 3%);
  --pn-aurum-surface-subtle: rgb(194 146 34 / 12%);
  --pn-aurum-glow-faint: rgb(194 146 34 / 10%);
  --pn-aurum-glow: rgb(194 146 34 / 18%);
  --pn-aurum-glow-strong: rgb(194 146 34 / 28%);
  --pn-success-glow: rgb(46 156 79 / 10%);
  --pn-danger-glow: rgb(216 49 67 / 16%);
  --pn-shadow-color-faint: rgb(16 20 28 / 4%);
  --pn-shadow-color-soft: rgb(16 20 28 / 8%);
  --pn-shadow-color-medium: rgb(16 20 28 / 13%);
  --pn-shadow-color-strong: rgb(16 20 28 / 22%);
  --pn-shadow-color-overlay: rgb(0 0 0 / 35%);

  --pn-radius-sm: 6px;
  --pn-radius-md: 8px;
  --pn-radius-lg: 12px;
  --pn-radius-xl: 16px;
  --pn-radius-full: 999px;
  --pn-shadow-e1: 0 1px 2px rgb(16 20 28 / 6%);
  --pn-shadow-xs: var(--pn-shadow-e1);
  --pn-shadow-e2: 0 2px 8px rgb(16 20 28 / 8%), 0 1px 2px rgb(16 20 28 / 5%);
  --pn-shadow-e3: 0 8px 24px rgb(16 20 28 / 12%), 0 2px 6px rgb(16 20 28 / 6%);
  --pn-shadow-overlay: 0 24px 80px rgb(0 0 0 / 35%);
  --pn-dur-instant: 80ms;
  --pn-dur-fast: 140ms;
  --pn-dur-standard: 220ms;
  --pn-dur-entrance: 320ms;
  --pn-dur-emphatic: 560ms;
  /* Choreography roles (D-MOTION, doc 08 §7): a state change fades in with a
     4 px rise; the success check draws once; the site's one-time rail line
     draws; a heading focused by the page lands with an underline that fades.
     Exits use --pn-dur-fast with --pn-ease-accel, always shorter than the
     entrance. */
  --pn-dur-state: 180ms;
  --pn-dur-check: 360ms;
  --pn-dur-rail: 600ms;
  --pn-dur-focus-landing: 1200ms;
  --pn-dur-shimmer: 1400ms;
  --pn-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --pn-ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --pn-ease-accel: cubic-bezier(0.3, 0, 1, 1);
  /* Layers (P-S06). Every stacked surface takes one of these; nothing in the
     product sits above the skip link, and a toast never covers an overlay. */
  --pn-layer-sticky: 10;
  --pn-layer-chrome: 20;
  --pn-layer-scrim: 30;
  --pn-layer-nav: 40;
  --pn-layer-menu: 50;
  --pn-layer-toast: 70;
  --pn-layer-overlay: 80;
  --pn-layer-skip-link: 100;
  --pn-font-display: "Bricolage Grotesque Variable", "Arial Narrow", sans-serif;
  --pn-font-ui: "Inter Variable", Inter, system-ui, sans-serif;
  --pn-font-body: var(--pn-font-ui);
  --pn-font-sans: var(--pn-font-ui);
  --pn-font-mono: "JetBrains Mono Variable", ui-monospace, monospace;

  /* Type scale (docs/08 §4.2). --pn-fs-floor is the absolute minimum rendered
     text size anywhere; scripts/typography_contract.mjs enforces it. The display
     face is never used below 20px. */
  --pn-fs-floor: 11px;
  --pn-fs-display-xl: 48px; --pn-lh-display-xl: 56px;
  --pn-fs-display-lg: 38px; --pn-lh-display-lg: 46px;
  --pn-fs-display-md: 30px; --pn-lh-display-md: 38px;
  --pn-fs-heading-xl: 24px; --pn-lh-heading-xl: 32px;
  --pn-fs-heading-lg: 20px; --pn-lh-heading-lg: 28px;
  --pn-fs-heading-md: 16px; --pn-lh-heading-md: 24px;
  --pn-fs-heading-sm: 14px; --pn-lh-heading-sm: 20px;
  --pn-fs-body-lg: 16px; --pn-lh-body-lg: 24px;
  --pn-fs-body-md: 14px; --pn-lh-body-md: 22px;
  --pn-fs-body-sm: 13px; --pn-lh-body-sm: 20px;
  --pn-fs-caption: 12px; --pn-lh-caption: 16px;
  --pn-fs-overline: 11px; --pn-lh-overline: 16px; --pn-ls-overline: .06em;
  --pn-fs-money-xl: 34px; --pn-lh-money-xl: 40px;
  --pn-fs-money-lg: 24px; --pn-lh-money-lg: 32px;
  --pn-fs-money-md: 14px; --pn-lh-money-md: 22px;
  --pn-fs-mono-md: 13px; --pn-lh-mono-md: 20px;
  --pn-fs-mono-sm: 12px; --pn-lh-mono-sm: 16px;
  /* Control text follows the shell density, never the surrounding copy:
     dashboard 14 px, console 13 px, payer surfaces 16 px. */
  --pn-fs-control: var(--pn-fs-body-md); --pn-lh-control: var(--pn-lh-body-sm);
  /* Responsive display roles are explicit exceptions to the fixed
     application scale. The editorial pair is public-surface-only. */
  --pn-fs-fluid-display: clamp(var(--pn-fs-display-md), 4vw, var(--pn-fs-display-xl));
  --pn-lh-fluid-display: 1.08;
  --pn-fs-editorial-section: clamp(var(--pn-fs-display-lg), 5vw, 68px);
  --pn-lh-editorial-tight: 1;
  --pn-fs-editorial-hero: clamp(58px, 9vw, 128px);
  --pn-lh-editorial-compressed: .92;
  --pn-fs-body-fluid: clamp(var(--pn-fs-body-lg), 1.5vw, 20px);

  /* Spacing scale (docs/08 §5.1): 4px base. Component-internal spacing uses
     4/8/12/16; layout spacing uses 16/24/32/48. */
  --pn-space-05: 2px;
  --pn-space-1: 4px;
  --pn-space-2: 8px;
  --pn-space-3: 12px;
  --pn-space-4: 16px;
  --pn-space-5: 20px;
  --pn-space-6: 24px;
  --pn-space-8: 32px;
  --pn-space-10: 40px;
  --pn-space-12: 48px;
  --pn-space-16: 64px;
  --pn-space-20: 80px;
  --pn-space-24: 96px;
  /* Editorial/public sections deliberately compose the base scale instead of
     introducing one-off 120–190 px padding values in individual surfaces. */
  --pn-space-section-sm: calc(var(--pn-space-24) + var(--pn-space-8));
  --pn-space-section-md: calc(var(--pn-space-24) + var(--pn-space-16));
  --pn-space-section-lg: calc(var(--pn-space-24) * 2);

  /* Component tier (docs/08 §5.3/§5.4/§10). */
  --pn-sidebar-w: 264px;
  --pn-sidebar-w-console: 240px;
  --pn-sidebar-w-collapsed: 68px;
  --pn-topbar-h: 64px;
  --pn-content-max-dashboard: 1200px;
  --pn-content-max-console: 1440px;
  --pn-content-max-public: 1240px;
  --pn-content-max-reading: 900px;
  --pn-table-row-comfortable: 52px;
  --pn-table-row-standard: 44px;
  --pn-table-row-compact: 36px;
  --pn-table-header-h: 40px;
  --pn-input-h: 44px;
  --pn-button-h-sm: 32px;
  --pn-button-h-md: 36px;
  --pn-button-h-lg: 40px;
  --pn-button-h-xl: 48px;
  /* A coarse pointer (touch) never gets a target under 44 px (WCAG 2.5.5),
     whatever the control's size on a mouse-driven layout. */
  --pn-target-coarse: 44px;
  /* Overlay widths (P-S06): Modal sm/md/lg and the right-edge Drawer. */
  --pn-modal-w-sm: 480px;
  --pn-modal-w-md: 640px;
  --pn-modal-w-lg: 880px;
  --pn-drawer-w-sm: 480px;
  --pn-drawer-w-md: 520px;
  --pn-drawer-w-lg: 720px;
  /* The narrowest layout each family supports. Payer pages reflow down to
     240 px (small feature phones and 200% zoom); workspaces start at 320. */
  --pn-page-min-w: 320px;
  --pn-page-min-w-payer: 240px;

  /* Editorial tier: the marketing site's warm paper dialect, tokenized so the
     palette cannot drift (near-duplicate warm grays are consolidated). */
  --pn-ed-paper: #edeae1;
  --pn-ed-paper-raised: #fbfaf7;
  --pn-ed-paper-sunken: #e9e5da;
  --pn-ed-line: #d8d4ca;
  --pn-ed-line-strong: #cbc7bc;
  --pn-ed-ink: #565b57;
  --pn-ed-ink-soft: #5f6359;
  /* The warm canvas behind the public site's header, heroes and footer (the
     V3 ground color, previously repeated as a raw hex in page stylesheets).
     Contrast on it: ink-900 14.12:1, --pn-ed-ink 6.14:1, --pn-accent-fg
     7.44:1, focus ring (aurum-600) 3.43:1. */
  --pn-ed-canvas: #f4f1e9;
  /* The one warm highlight on paper: a chosen option or a caution callout. */
  --pn-ed-highlight: var(--pn-aurum-100);
  --pn-ed-highlight-line: var(--pn-aurum-700);
}

[data-theme="dark"] {
  color-scheme: dark;
  --pn-bg-page: var(--pn-ink-950);
  --pn-bg-surface: #171c26;
  --pn-bg-raised: #1d2330;
  --pn-bg-sunken: #0b0e14;
  --pn-bg-wash-hover: #1d2330;
  --pn-bg-wash-selected: #232a3a;
  --pn-text-primary: #eceef2;
  --pn-text-secondary: #a6aebb;
  --pn-text-muted: #828b99;
  --pn-text-placeholder: #5e6774;
  --pn-text-on-action: var(--pn-ink-950);
  --pn-text-link: var(--pn-aurum-300);
  --pn-border-hairline: #2a3140;
  --pn-border-strong: #39424f;
  --pn-action-primary-bg: #eceef2;
  --pn-action-primary-bg-hover: #dde0e6;
  --pn-action-primary-bg-active: #c2c7d0;
  --pn-focus-ring: var(--pn-aurum-400);
  --pn-accent: var(--pn-aurum-400);
  --pn-scrim: rgb(0 0 0 / 70%);
  --pn-status-success-fg: #63c983;
  --pn-status-success-bg: #12271b;
  --pn-status-success-border: #285b38;
  --pn-status-success-solid: #238243;
  --pn-status-warning-fg: #f0c46a;
  --pn-status-warning-bg: #2b2312;
  --pn-status-warning-border: #5a4520;
  --pn-status-warning-solid: #d08a14;
  --pn-status-danger-fg: #f0788a;
  --pn-status-danger-on-solid: #ffffff;
  --pn-status-warning-on-solid: var(--pn-ink-950);
  --pn-status-success-on-solid: #ffffff;
  --pn-status-info-on-solid: #ffffff;
  --pn-status-danger-bg: #2e161c;
  --pn-status-danger-border: #6d2631;
  --pn-status-danger-solid: #c11f2f;
  --pn-status-info-fg: #84a9ee;
  --pn-status-info-bg: #15223b;
  --pn-status-info-border: #294b80;
  --pn-status-info-solid: #2c55b8;
  --pn-accent-bg: #2a2110;
  --pn-accent-border: #614914;
  --pn-accent-solid: var(--pn-aurum-400);
  --pn-accent-fg: var(--pn-aurum-300);
  --pn-env-live: var(--pn-success-600);
  --pn-env-neutral: var(--pn-ink-400);
  --pn-chart-c1: #b78b28;
  --pn-chart-c2: #21a392;
  --pn-chart-c3: #a175cc;
  --pn-chart-c4: #d06f42;
  --pn-chart-c5: #5e8fde;
  --pn-chart-c6: #d26c8a;
  --pn-chart-other: #5e6774;
  /* Doc 08 §6: on dark surfaces a soft drop shadow vanishes. Elevation reads
     from a deeper shadow plus a faint top highlight on the raised edge. */
  --pn-shadow-color-faint: rgb(0 0 0 / 18%);
  --pn-shadow-color-soft: rgb(0 0 0 / 28%);
  --pn-shadow-color-medium: rgb(0 0 0 / 38%);
  --pn-shadow-color-strong: rgb(0 0 0 / 50%);
  --pn-shadow-e1: 0 1px 2px rgb(0 0 0 / 32%), inset 0 1px 0 rgb(255 255 255 / 3%);
  --pn-shadow-e2: 0 2px 10px rgb(0 0 0 / 36%), 0 1px 2px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 4%);
  --pn-shadow-e3: 0 12px 32px rgb(0 0 0 / 44%), 0 2px 8px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 5%);
  --pn-shadow-overlay: 0 24px 80px rgb(0 0 0 / 60%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    /* --pn-dur-instant was the one duration left un-zeroed, so anything built on
       it kept animating for a reader who had asked the whole product to stop.
       Doc 08 §7.3 admits no exceptions: "No parallax, ever, for anyone." */
    --pn-dur-instant: 0ms;
    --pn-dur-fast: 0ms;
    --pn-dur-standard: 0ms;
    --pn-dur-entrance: 0ms;
    --pn-dur-emphatic: 0ms;
    --pn-dur-state: 0ms;
    --pn-dur-check: 0ms;
    --pn-dur-rail: 0ms;
    --pn-dur-focus-landing: 0ms;
    --pn-dur-shimmer: 0ms;
  }
}

@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url('/errors/inter.woff2') format('woff2-variations')}
@font-face{font-family:"Bricolage Grotesque Variable";font-style:normal;font-weight:500 800;font-display:swap;src:url('/errors/bricolage.woff2') format('woff2')}
@font-face{font-family:"JetBrains Mono Variable";font-style:normal;font-weight:100 800;font-display:swap;src:url('/problems/jetbrains-mono.woff2') format('woff2-variations')}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--pn-bg-surface);color:var(--pn-text-primary);font-family:var(--pn-font-ui);font-feature-settings:"tnum" 1,"lnum" 1}
body{margin:0;min-width:0;background:var(--pn-bg-surface);font-size:var(--pn-fs-body-md);line-height:var(--pn-lh-body-md)}
a{color:var(--pn-text-link);text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--pn-focus-ring);outline-offset:2px}
code{font-family:var(--pn-font-mono);font-size:var(--pn-fs-mono-sm);overflow-wrap:anywhere}
.pp-skip{position:fixed;z-index:20;top:8px;left:8px;transform:translateY(-160%);border-radius:var(--pn-radius-md);padding:var(--pn-space-2) var(--pn-space-3);background:var(--pn-ink-950);color:var(--pn-white-invariant);text-decoration:none}
.pp-skip:focus{transform:translateY(0)}
.pp-header{position:sticky;z-index:10;top:0;min-height:64px;display:grid;grid-template-columns:250px minmax(280px,560px) 1fr;gap:var(--pn-space-8);align-items:center;padding:0 var(--pn-space-6);background:var(--pn-ink-950);color:var(--pn-white-invariant)}
.pp-home{display:flex;align-items:center;min-height:44px;text-decoration:none}
.pp-wordmark{display:inline-block;width:calc(30px * 6.0345);height:30px;background:url("/brand/perionpayments-wordmark-inverse.png") left center/contain no-repeat;filter:drop-shadow(0 1px 10px var(--pn-aurum-glow-faint))}
.pp-monogram{display:none;width:34px;aspect-ratio:1;border-radius:var(--pn-radius-md);background:url("/icon-192.png") center/cover no-repeat}
.pp-search{height:34px;display:grid;grid-template-columns:17px 1fr auto;gap:var(--pn-space-2);align-items:center;border:1px solid var(--pn-ink-800);border-radius:var(--pn-radius-md);padding:0 var(--pn-space-3);background:var(--pn-ink-900);color:var(--pn-ink-400);font-size:var(--pn-fs-caption);text-decoration:none}
.pp-search:hover{border-color:var(--pn-ink-700);color:var(--pn-ink-300)}
.pp-search kbd{border:1px solid var(--pn-ink-700);border-radius:var(--pn-radius-sm);padding:var(--pn-space-05) var(--pn-space-1);font:inherit}
.pp-links{justify-self:end;display:flex;gap:var(--pn-space-5);align-items:center}
.pp-links a{color:var(--pn-ink-300);font-size:var(--pn-fs-caption);text-decoration:none}
.pp-links a:hover{color:var(--pn-white-invariant)}
.pp-theme{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--pn-ink-700);border-radius:var(--pn-radius-sm);padding:0;background:var(--pn-ink-900);color:var(--pn-ink-300);cursor:pointer}
.pp-theme[hidden]{display:none}
.pp-theme:hover{color:var(--pn-aurum-300)}
:root[data-theme="dark"] .pp-theme-icon--moon,:root:not([data-theme="dark"]) .pp-theme-icon--sun{display:none}
.pp-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pp-layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 64px);background:linear-gradient(90deg,var(--pn-bg-sunken) 0 249px,var(--pn-border-hairline) 249px 250px,transparent 250px)}
.pp-navigation{position:sticky;top:64px;height:calc(100vh - 64px);display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--pn-border-hairline);padding:var(--pn-space-6) var(--pn-space-4);background:var(--pn-bg-sunken)}
.pp-navigation-head{display:flex;justify-content:space-between;align-items:center;gap:var(--pn-space-2);padding:0 var(--pn-space-2) var(--pn-space-4);border-bottom:1px solid var(--pn-border-hairline);font-size:var(--pn-fs-body-sm)}
.pp-navigation-head b{margin-left:auto;color:var(--pn-accent-fg);white-space:nowrap}
.pp-navigation-head button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--pn-radius-sm);padding:0;background:transparent;color:var(--pn-text-secondary);cursor:pointer}
.pp-navigation-head button[hidden]{display:none}
.pp-navigation nav{flex:1;overflow:auto}
.pp-navigation section{margin-top:var(--pn-space-5)}
.pp-navigation h2{margin:0 var(--pn-space-2) var(--pn-space-2);color:var(--pn-text-muted);font-size:var(--pn-fs-overline);letter-spacing:.08em}
.pp-navigation nav a{min-height:30px;display:flex;align-items:center;border-radius:var(--pn-radius-sm);padding:0 var(--pn-space-2);color:var(--pn-text-secondary);font-size:var(--pn-fs-caption);text-decoration:none}
.pp-navigation nav a:hover{background:var(--pn-bg-wash-selected);color:var(--pn-text-primary)}
.pp-navigation nav a[aria-current="page"]{background:var(--pn-accent-bg);box-shadow:inset 3px 0 0 var(--pn-accent-solid);color:var(--pn-text-primary);font-weight:600}
.pp-navigation-trigger,.pp-navigation-backdrop{display:none}
.pp-main{min-width:0;width:min(100%,920px);padding:var(--pn-space-20) clamp(var(--pn-space-8),6vw,var(--pn-space-20)) var(--pn-space-16)}
.pp-breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--pn-space-1) var(--pn-space-2);margin:0 0 var(--pn-space-4);padding:0;list-style:none;color:var(--pn-text-muted);font-size:var(--pn-fs-body-sm);line-height:var(--pn-lh-body-sm)}
.pp-breadcrumb li+li::before{content:"\203A";margin-right:var(--pn-space-2);color:var(--pn-text-muted)}
.pp-breadcrumb [aria-current="page"]{color:var(--pn-accent-fg);font-weight:600}
h1{margin:0 0 var(--pn-space-4);font:600 var(--pn-fs-display-lg)/var(--pn-lh-display-lg) var(--pn-font-display);letter-spacing:-.035em;overflow-wrap:anywhere}
h2{margin:0 0 var(--pn-space-2);font-size:var(--pn-fs-body-md);line-height:var(--pn-lh-body-md)}
p{margin:0}
.pp-lead{max-width:720px;color:var(--pn-text-secondary)}
.pp-facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pn-space-2);margin-bottom:var(--pn-space-2)}
.pp-chip{display:inline-flex;align-items:center;min-height:24px;border:1px solid var(--pn-border-hairline);border-radius:var(--pn-radius-full);padding:0 var(--pn-space-2);background:var(--pn-bg-sunken);color:var(--pn-text-secondary);font:500 var(--pn-fs-mono-sm)/var(--pn-lh-mono-sm) var(--pn-font-mono);white-space:nowrap}
.pp-chip--code{color:var(--pn-text-primary)}
.pp-section{margin-top:var(--pn-space-6);padding-top:var(--pn-space-5);border-top:1px solid var(--pn-border-hairline)}
.pp-section p{color:var(--pn-text-secondary)}
.pp-section strong{color:var(--pn-text-primary)}
.pp-section p code,.pp-dont code{color:var(--pn-text-primary)}
.pp-section p>code:last-child,.pp-dont li>code:last-child{color:var(--pn-text-muted)}
.pp-next p{border-left:3px solid var(--pn-accent-solid);border-radius:var(--pn-radius-md);padding:var(--pn-space-3) var(--pn-space-4);background:var(--pn-accent-bg);color:var(--pn-text-primary);font-weight:500}
.pp-dont{margin:0;padding-left:var(--pn-space-5);color:var(--pn-text-secondary)}
.pp-dont li+li{margin-top:var(--pn-space-1)}
.pp-code{margin:var(--pn-space-3) 0 0;overflow:auto;border:1px solid var(--pn-border-hairline);border-radius:var(--pn-radius-md);padding:var(--pn-space-4) var(--pn-space-5);background:var(--pn-bg-sunken);color:var(--pn-text-secondary);font:var(--pn-fs-mono-sm)/var(--pn-lh-mono-sm) var(--pn-font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.pp-code code{font-size:inherit}
.pp-list{display:grid;gap:var(--pn-space-2);margin:0;padding:0;list-style:none}
.pp-list a{display:grid;gap:var(--pn-space-05);min-height:44px;border:1px solid var(--pn-border-hairline);border-radius:var(--pn-radius-md);padding:var(--pn-space-3) var(--pn-space-4);background:var(--pn-bg-surface);color:var(--pn-text-primary);text-decoration:none}
.pp-list a:hover{border-color:var(--pn-accent-solid);background:var(--pn-bg-wash-hover)}
.pp-list-title{font-weight:600}
.pp-list-meta{color:var(--pn-text-muted);font-size:var(--pn-fs-body-sm);line-height:var(--pn-lh-body-sm)}
.pp-back{margin-top:var(--pn-space-8);font-size:var(--pn-fs-body-sm)}
.pp-main:has(.pp-list--index){width:min(100%,1080px)}
.pp-count{color:var(--pn-text-muted);font-size:var(--pn-fs-body-md);font-weight:500}
.pp-jump ul{display:flex;flex-wrap:wrap;gap:var(--pn-space-2);margin:var(--pn-space-5) 0 0;padding:0;list-style:none}
.pp-jump a{display:inline-flex;align-items:center;gap:var(--pn-space-2);min-height:36px;border:1px solid var(--pn-border-hairline);border-radius:var(--pn-radius-full);padding:0 var(--pn-space-3);color:var(--pn-text-primary);font-size:var(--pn-fs-body-sm);text-decoration:none}
.pp-jump a span{color:var(--pn-text-muted)}
.pp-filter{display:flex;flex-wrap:wrap;align-items:end;gap:var(--pn-space-3) var(--pn-space-4);margin-top:var(--pn-space-5)}
.pp-filter[hidden]{display:none}
.pp-filter label{display:grid;gap:var(--pn-space-1);font-size:var(--pn-fs-body-sm);font-weight:600}
.pp-filter select{min-height:44px;border:1px solid var(--pn-border-strong);border-radius:var(--pn-radius-md);padding:0 var(--pn-space-3);background:var(--pn-bg-surface);color:var(--pn-text-primary);font:inherit;font-weight:400}
.pp-filter-count{margin:0;color:var(--pn-text-muted);font-size:var(--pn-fs-body-sm)}
@media (min-width:900px){.pp-list--index{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pp-footer{border-top:1px solid var(--pn-border-hairline);padding:var(--pn-space-5) var(--pn-space-4) var(--pn-space-8);color:var(--pn-text-muted);font-size:var(--pn-fs-body-sm);text-align:center}
@media (max-width:1024px){.pp-header{grid-template-columns:auto minmax(0,1fr);gap:var(--pn-space-4)}.pp-links a{display:none}}
@media (max-width:768px){
.pp-header{grid-template-columns:34px minmax(0,1fr) 44px auto;gap:var(--pn-space-2);padding:0 var(--pn-space-3)}.pp-links{grid-column:4;grid-row:1}.pp-theme{width:44px;height:44px}.pp-wordmark{display:none}.pp-monogram{display:inline-block}
.pp-search{grid-column:3;grid-row:1;width:44px;height:44px;grid-template-columns:1fr;justify-items:center;padding:0}.pp-search span,.pp-search kbd{display:none}
.pp-navigation-trigger:not([hidden]){grid-column:2;grid-row:1;min-width:0;min-height:44px;display:flex;gap:var(--pn-space-2);justify-content:space-between;align-items:center;border:1px solid var(--pn-ink-700);border-radius:var(--pn-radius-md);padding:0 var(--pn-space-3);background:var(--pn-ink-900);color:var(--pn-white-invariant);font:600 var(--pn-fs-body-sm)/var(--pn-lh-body-sm) var(--pn-font-ui);cursor:pointer}
.pp-navigation-trigger__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-navigation-trigger svg{flex:none;color:var(--pn-ink-300)}
.pp-navigation-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.pp-layout{display:block;background:none}
.pp-navigation{position:fixed;z-index:40;top:64px;bottom:0;left:0;width:min(320px,calc(100vw - 38px));height:auto;display:none;box-shadow:var(--pn-shadow-overlay)}
.pp-navigation.is-open{display:flex}
.pp-navigation nav a{min-height:44px}
.pp-navigation-backdrop:not([hidden]){position:fixed;z-index:30;inset:64px 0 0;display:block;border:0;padding:0;background:var(--pn-scrim-strong);cursor:default}
.pp-main{width:100%;padding:var(--pn-space-12) var(--pn-space-4)}
.pp-breadcrumb [aria-current="page"]{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media (forced-colors:active){.pp-wordmark,.pp-monogram{background:none;width:auto;height:auto;aspect-ratio:auto}.pp-wordmark::after,.pp-monogram::after{content:"PerionPayments";color:CanvasText}.pp-chip,.pp-list a,.pp-code{border-color:CanvasText}.pp-next p{border-left-color:CanvasText}}
@media print{.pp-header,.pp-skip,.pp-back,.pp-footer,.pp-navigation{display:none}.pp-layout{display:block}html,body{background:var(--pn-white-invariant);color:var(--pn-print-ink)}}