/* Import Sage UI and CarbonIcons fonts */
@font-face {
  font-family: "CarbonIcons";
  src: url("./assets/carbon-icons-webfont.woff2") format("woff2"),
    url("./assets/carbon-icons-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sage UI";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/sageui-regular.woff2") format("woff2"),
    url("./assets/sageui-regular.woff") format("woff"),
    url("./assets/sageui-regular.ttf") format("truetype"),
    url("./assets/sageui-regular.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Sage UI";
  font-style: normal;
  font-weight: 500;
  src: url("./assets/sageui-medium.woff2") format("woff2"),
    url("./assets/sageui-medium.woff") format("woff"),
    url("./assets/sageui-medium.ttf") format("truetype"),
    url("./assets/sageui-medium.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Sage UI";
  font-style: normal;
  font-weight: 700;
  src: url("./assets/sageui-bold.woff2") format("woff2"),
    url("./assets/sageui-bold.woff") format("woff"),
    url("./assets/sageui-bold.ttf") format("truetype"),
    url("./assets/sageui-bold.otf") format("opentype");
  font-display: swap;
}
/**
 * Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
 */

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --global-borderwidth-none: 0;
  --global-borderwidth-xs: 1px;
  --global-borderwidth-s: 2px;
  --global-borderwidth-m: 3px;
  --global-borderwidth-l: 4px;
  --global-borderwidth-xl: 6px;
  --global-borderwidth-xxl: 8px;
  --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
  --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;
  --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;
  --global-font-fluid-subheading-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;
  --global-font-fluid-subheading-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.25 Sage UI;
  --global-font-fluid-section-heading-s: 700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.25 Sage UI;
  --global-font-fluid-section-heading-m: 700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
  --global-font-fluid-body-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-body-regular-m: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
  --global-font-fluid-body-regular-l: 400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
  --global-font-fluid-body-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-body-medium-m: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
  --global-font-fluid-body-medium-l: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
  --global-font-fluid-comp-medium-xs: 500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;
  --global-font-fluid-comp-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-comp-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-comp-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
  --global-font-fluid-comp-regular-xs: 400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)/1.5 Sage UI;
  --global-font-fluid-comp-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-comp-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-comp-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
  --global-font-fluid-comp-icon-s: 20px sage-icons;
  --global-font-fluid-comp-icon-m: 20px sage-icons;
  --global-font-fluid-comp-icon-l: 20px sage-icons;
  --global-font-fluid-comp-lined-regular-s: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-comp-lined-regular-m: 400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-comp-lined-regular-l: 400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
  --global-font-fluid-comp-lined-medium-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-comp-lined-medium-m: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-comp-lined-medium-l: 500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)/1.5 Sage UI;
  --global-font-fluid-comp-placeholder-xs: 500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)/1.5 Sage UI;
  --global-font-fluid-comp-placeholder-s: 500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem)/1.5 Sage UI;
  --global-font-fluid-comp-placeholder-m: 500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)/1.5 Sage UI;
  --global-font-fluid-comp-placeholder-ml: 500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.5 Sage UI;
  --global-font-fluid-comp-placeholder-l: 500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.5 Sage UI;
  --global-font-fluid-comp-placeholder-xl: 500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)/1.5 Sage UI;
  --global-font-fluid-comp-placeholder-xxl: 500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)/1.5 Sage UI;
  --global-font-static-heading-s: 500 21px/1.25 Sage UI;
  --global-font-static-heading-m: 700 24px/1.25 Sage UI;
  --global-font-static-heading-l: 700 30px/1.25 Sage UI;
  --global-font-static-subheading-m: 500 16px/1.25 Sage UI;
  --global-font-static-subheading-l: 500 18px/1.25 Sage UI;
  --global-font-static-section-heading-s: 700 16px/1.25 Sage UI;
  --global-font-static-section-heading-m: 700 21px/1.25 Sage UI;
  --global-font-static-body-regular-s: 400 14px/1.5 Sage UI;
  --global-font-static-body-regular-m: 400 14px/1.5 Sage UI;
  --global-font-static-body-regular-l: 400 16px/1.5 Sage UI;
  --global-font-static-body-medium-s: 500 14px/1.5 Sage UI;
  --global-font-static-body-medium-m: 500 14px/1.5 Sage UI;
  --global-font-static-body-medium-l: 500 16px/1.5 Sage UI;
  --global-font-static-comp-medium-xs: 500 13px/1.5 Sage UI;
  --global-font-static-comp-medium-s: 500 14px/1.5 Sage UI;
  --global-font-static-comp-medium-m: 500 14px/1.5 Sage UI;
  --global-font-static-comp-medium-l: 500 16px/1.5 Sage UI;
  --global-font-static-comp-regular-xs: 400 13px/1.5 Sage UI;
  --global-font-static-comp-regular-s: 400 14px/1.5 Sage UI;
  --global-font-static-comp-regular-m: 400 14px/1.5 Sage UI;
  --global-font-static-comp-regular-l: 400 16px/1.5 Sage UI;
  --global-font-static-comp-icon-s: 20px sage-icons;
  --global-font-static-comp-icon-m: 20px sage-icons;
  --global-font-static-comp-icon-l: 20px sage-icons;
  --global-font-static-comp-lined-regular-s: 400 14px/1.5 Sage UI;
  --global-font-static-comp-lined-regular-m: 400 14px/1.5 Sage UI;
  --global-font-static-comp-lined-regular-l: 400 16px/1.5 Sage UI;
  --global-font-static-comp-lined-medium-s: 500 14px/1.5 Sage UI;
  --global-font-static-comp-lined-medium-m: 500 14px/1.5 Sage UI;
  --global-font-static-comp-lined-medium-l: 500 16px/1.5 Sage UI;
  --global-font-static-comp-placeholder-xs: 500 12px/1.5 Sage UI;
  --global-font-static-comp-placeholder-s: 500 14px/1.5 Sage UI;
  --global-font-static-comp-placeholder-m: 500 18px/1.5 Sage UI;
  --global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;
  --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;
  --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;
  --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;
  --global-modifier-button-active: 0.30;
  --global-modifier-button-active-alt: 0.15;
  --global-modifier-button-hover: 0.15;
  --global-modifier-button-hover-alt: 0.10;
  --global-modifier-input-disabled-fg: 0.3;
  --global-modifier-input-disabled-bg: 0.05;
  --global-radius-none: 0;
  --global-radius-container-3-xs: 1px;
  --global-radius-container-2-xs: 2px;
  --global-radius-container-xs: 4px;
  --global-radius-container-s: 6px;
  --global-radius-container-m: 8px;
  --global-radius-container-l: 16px;
  --global-radius-container-xl: 24px;
  --global-radius-container-2-xl: 32px;
  --global-radius-container-3-xl: 40px;
  --global-radius-container-4-xl: 80px;
  --global-radius-container-circle: 999px;
  --global-radius-action-2-xs: 1px;
  --global-radius-action-xs: 2px;
  --global-radius-action-s: 4px;
  --global-radius-action-m: 8px;
  --global-radius-action-l: 16px;
  --global-radius-action-xl: 20px;
  --global-radius-action-2-xl: 24px;
  --global-radius-action-circle: 999px;
  --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
  --global-depth-lvl1: 0 1px 2px 0 #0000001A, 2px 2px 10px 0 #00000033;
  --global-depth-lvl2: 0 2px 3px 0 #0000001A, 6px 6px 30px 0 #00000026;
  --global-depth-lvl3: 0 3px 4px 0 #0000001A, 10px 10px 60px 0 #0000001A;
  --global-depth-sticky-b: 0 -1px 2px 0 #0000001A, 2px -2px 10px 0 #00000033;
  --global-depth-sticky-l: -2px 0 2px 0 #0000001A, -5px 0 5px 0 #0000001A;
  --global-depth-sticky-r: 2px 0 2px 0 #0000001A, 5px 0 5px 0 #0000001A;
  --global-size-none: 0px;
  --global-size-6-xs: 2px;
  --global-size-5-xs: 4px;
  --global-size-4-xs: 8px;
  --global-size-3-xs: 16px;
  --global-size-2-xs: 20px;
  --global-size-xs: 24px;
  --global-size-s: 32px;
  --global-size-m: 40px;
  --global-size-l: 48px;
  --global-size-xl: 56px;
  --global-size-2-xl: 64px;
  --global-size-3-xl: 72px;
  --global-size-4-xl: 80px;
  --global-space-none: 0px;
  --global-space-layout-3-xs: 8px;
  --global-space-layout-2-xs: 16px;
  --global-space-layout-xs: 24px;
  --global-space-layout-s: 32px;
  --global-space-layout-m: 40px;
  --global-space-layout-l: 48px;
  --global-space-layout-xl: 56px;
  --global-space-layout-2-xl: 64px;
  --global-space-layout-3-xl: 72px;
  --global-space-layout-4-xl: 80px;
  --global-space-comp-2-xs: 2px;
  --global-space-comp-xs: 4px;
  --global-space-comp-s: 8px;
  --global-space-comp-m: 12px;
  --global-space-comp-l: 16px;
  --global-space-comp-xl: 24px;
  --global-space-comp-2-xl: 32px;
}

/**
 * Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
 */

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --mode-color-none: #fff0;
  --mode-color-ai-stop-1: #13a038;
  --mode-color-ai-stop-2: #149197;
  --mode-color-ai-stop-3: #a87cfb;
  --mode-color-ai-alt-stop-1: #00d639;
  --mode-color-ai-alt-stop-2: #00d6de;
  --mode-color-ai-alt-stop-3: #9d60ff;
  --mode-color-brand-default: #000000;
  --mode-color-brand-default-alt: #000000;
  --mode-color-brand-with-default-alt: #FFFFFF;
  --mode-color-brand-inverse-default: #00d639;
  --mode-color-brand-inverse-default-alt: #FFFFFF;
  --mode-color-brand-inverse-with-default-alt: #000000;
  --mode-color-brand-copilot-default: #000000;
  --mode-color-brand-copilot-monochrome: #000000;
  --mode-color-brand-copilot-with-default: #00d639;
  --mode-color-brand-copilot-inverse-default: #FFFFFF;
  --mode-color-brand-copilot-inverse-monochrome: #FFFFFF;
  --mode-color-brand-copilot-inverse-with-default: #00d639;
  --mode-color-colorcode-blue-deep: #0071c3;
  --mode-color-colorcode-blue-muted: #e4eeff;
  --mode-color-colorcode-teal-deep: #007C7B;
  --mode-color-colorcode-teal-muted: #C8F5F5;
  --mode-color-colorcode-green-deep: #00811F;
  --mode-color-colorcode-green-muted: #D1F6D6;
  --mode-color-colorcode-lime-deep: #627600;
  --mode-color-colorcode-lime-muted: #e8f1d4;
  --mode-color-colorcode-orange-deep: #d64309;
  --mode-color-colorcode-orange-muted: #ffeaca;
  --mode-color-colorcode-red-deep: #db004e;
  --mode-color-colorcode-red-muted: #ffe8ea;
  --mode-color-colorcode-pink-deep: #c72699;
  --mode-color-colorcode-pink-muted: #fee8f5;
  --mode-color-colorcode-purple-deep: #8f4bd7;
  --mode-color-colorcode-purple-muted: #F3EBFE;
  --mode-color-colorcode-slate-deep: #527386;
  --mode-color-colorcode-slate-muted: #e4eff5;
  --mode-color-colorcode-gray-severe: #304658;
  --mode-color-colorcode-gray-deep: #6a7986;
  --mode-color-colorcode-gray-muted: #e8eaec;
  --mode-color-generic-bg-nought: #FFFFFF;
  --mode-color-generic-bg-faint: #f4f5f6;
  --mode-color-generic-bg-delicate: #e8eaec;
  --mode-color-generic-bg-soft: #dde0e3;
  --mode-color-generic-bg-moderate: #d1d6da;
  --mode-color-generic-bg-firm: #c6ccd1;
  --mode-color-generic-bg-harsh: #bac1c7;
  --mode-color-generic-bg-severe: #afb7be;
  --mode-color-generic-bg-extreme: #000000;
  --mode-color-generic-bg-inverse-nought: #000000;
  --mode-color-generic-bg-inverse-faint: #ffffff0d;
  --mode-color-generic-bg-inverse-delicate: #ffffff1a;
  --mode-color-generic-bg-inverse-soft: #ffffff26;
  --mode-color-generic-bg-inverse-moderate: #fff3;
  --mode-color-generic-bg-inverse-firm: #ffffff40;
  --mode-color-generic-bg-inverse-harsh: #ffffff4d;
  --mode-color-generic-bg-inverse-severe: #ffffff59;
  --mode-color-generic-bg-inverse-extreme: #FFFFFF;
  --mode-color-generic-txt-extreme: #000000;
  --mode-color-generic-txt-severe: #000000f2;
  --mode-color-generic-txt-moderate: #000000a6;
  --mode-color-generic-txt-soft: #0000008c;
  --mode-color-generic-txt-delicate: #0000006b;
  --mode-color-generic-txt-faint: #0000004d;
  --mode-color-generic-txt-nought: #FFFFFF;
  --mode-color-generic-txt-inverse-extreme: #FFFFFF;
  --mode-color-generic-txt-inverse-severe: #fffffff2;
  --mode-color-generic-txt-inverse-moderate: #ffffffab;
  --mode-color-generic-txt-inverse-soft: #ffffff8c;
  --mode-color-generic-txt-inverse-delicate: #ffffff6b;
  --mode-color-generic-txt-inverse-faint: #ffffff4d;
  --mode-color-generic-txt-inverse-nought: #000000;
  --mode-color-generic-fg-nought: #FFFFFF;
  --mode-color-generic-fg-delicate: #e8eaec;
  --mode-color-generic-fg-soft: #a3adb5;
  --mode-color-generic-fg-moderate: #8c98a2;
  --mode-color-generic-fg-firm: #75838f;
  --mode-color-generic-fg-extreme: #000000;
  --mode-color-generic-fg-inverse-nought: #000000;
  --mode-color-generic-fg-inverse-delicate: #181818;
  --mode-color-generic-fg-inverse-soft: #505050;
  --mode-color-generic-fg-inverse-moderate: #616161;
  --mode-color-generic-fg-inverse-firm: #6f6f6f;
  --mode-color-generic-fg-inverse-extreme: #FFFFFF;
  --mode-color-generic-surface-nought: #FFFFFF;
  --mode-color-generic-surface-faint: #f4f5f6;
  --mode-color-generic-surface-harsh: #475a6a;
  --mode-color-generic-surface-severe: #304658;
  --mode-color-action-ai-grad-active: linear-gradient(90deg, #13a03826 0%, #14919726 40%, #a87cfb26 90%);
  --mode-color-action-ai-grad-hover: linear-gradient(90deg, #13a03814 0%, #14919714 40%, #a87cfb14 90%);
  --mode-color-action-ai-grad-default: linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%);
  --mode-color-action-ai-active-stop-1: #13a03826;
  --mode-color-action-ai-active-stop-2: #14919726;
  --mode-color-action-ai-active-stop-3: #a87cfb26;
  --mode-color-action-ai-hover-stop-1: #13a03814;
  --mode-color-action-ai-hover-stop-2: #14919714;
  --mode-color-action-ai-hover-stop-3: #a87cfb14;
  --mode-color-action-danger-active: #a30037;
  --mode-color-action-danger-default: #db004e;
  --mode-color-action-danger-default-alt: #c40044;
  --mode-color-action-danger-hover: #c40044;
  --mode-color-action-danger-hover-alt: #db004e26;
  --mode-color-action-danger-hover-alt2: #a30037;
  --mode-color-action-danger-with-active: #FFFFFF;
  --mode-color-action-danger-with-default: #FFFFFF;
  --mode-color-action-danger-inverse-active: #ff728d;
  --mode-color-action-danger-inverse-default: #f50059;
  --mode-color-action-danger-inverse-default-alt: #ff3e6a;
  --mode-color-action-danger-inverse-hover: #ff3e6a;
  --mode-color-action-danger-inverse-hover-alt: #f5005926;
  --mode-color-action-danger-inverse-hover-alt2: #ff728d;
  --mode-color-action-danger-inverse-with-active: #000000;
  --mode-color-action-danger-inverse-with-default: #000000;
  --mode-color-action-data-entry-default: #FFFFFF;
  --mode-color-action-data-entry-with-active: #000000;
  --mode-color-action-data-entry-with-active-alt: #FFFFFF;
  --mode-color-action-data-entry-with-hover: #000000;
  --mode-color-action-data-entry-hover-alt: #f4f5f6;
  --mode-color-action-data-entry-with-default: #75838f;
  --mode-color-action-data-entry-default-alt: #e8eaec;
  --mode-color-action-data-entry-txt: #000000f2;
  --mode-color-action-data-entry-txt-alt: #0000008c;
  --mode-color-action-data-entry-inverse-default: #000000;
  --mode-color-action-data-entry-inverse-with-default: #a3adb5;
  --mode-color-action-data-entry-inverse-txt: #fffffff2;
  --mode-color-action-data-entry-inverse-txt-alt: #ffffff8c;
  --mode-color-action-focus-default: #000000;
  --mode-color-action-focus-txt: #000000;
  --mode-color-action-focus-with-default: #FFB500;
  --mode-color-action-focus-with-default-alt: #ffd274;
  --mode-color-action-focus-inverse-default: #FFB500;
  --mode-color-action-focus-inverse-txt: #FFFFFF;
  --mode-color-action-focus-inverse-with-default: #000000;
  --mode-color-action-focus-inverse-with-default-alt: #885e00;
  --mode-color-action-inactive-default: #0000004d;
  --mode-color-action-inactive-mask: #0006;
  --mode-color-action-inactive-default-alt: #eeeeee;
  --mode-color-action-inactive-txt: #0000006b;
  --mode-color-action-inactive-txt-alt: #FFFFFF;
  --mode-color-action-inactive-icon: #0000006b;
  --mode-color-action-inactive-icon-alt: #0000008c;
  --mode-color-action-inactive-inverse-default: #ffffff4d;
  --mode-color-action-inactive-inverse-txt: #ffffff6b;
  --mode-color-action-inactive-inverse-txt-alt: #000000;
  --mode-color-action-grayscale-active: #000000;
  --mode-color-action-grayscale-active-alt: #00000026;
  --mode-color-action-grayscale-default: #000000e6;
  --mode-color-action-grayscale-default-alt: #000000ab;
  --mode-color-action-grayscale-hover-alt: #0000001a;
  --mode-color-action-grayscale-hover: #00000026;
  --mode-color-action-grayscale-with-active: #FFFFFF;
  --mode-color-action-grayscale-with-active-alt: #000000;
  --mode-color-action-grayscale-with-default: #FFFFFF;
  --mode-color-action-grayscale-with-hover: #000000;
  --mode-color-action-grayscale-inverse-active: #FFFFFF;
  --mode-color-action-grayscale-inverse-active-alt: #ffffff26;
  --mode-color-action-grayscale-inverse-default: #ffffffe6;
  --mode-color-action-grayscale-inverse-default-alt: #ffffffab;
  --mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;
  --mode-color-action-grayscale-inverse-hover: #ffffff26;
  --mode-color-action-grayscale-inverse-with-active: #000000;
  --mode-color-action-grayscale-inverse-with-active-alt: #FFFFFF;
  --mode-color-action-grayscale-inverse-with-default: #000000;
  --mode-color-action-grayscale-inverse-with-hover: #FFFFFF;
  --mode-color-action-nav-active: #253b4e26;
  --mode-color-action-nav-default: #FFFFFF;
  --mode-color-action-nav-default-alt: #f4f5f6;
  --mode-color-action-nav-hover: #253b4e1a;
  --mode-color-action-nav-with-active: #000000;
  --mode-color-action-nav-with-default: #000000f2;
  --mode-color-action-nav-with-hover: #000000;
  --mode-color-action-nav-inverse-active: #ffffff26;
  --mode-color-action-nav-inverse-default: #000000;
  --mode-color-action-nav-inverse-default-alt: #0b0b0b;
  --mode-color-action-nav-inverse-hover: #ffffff1a;
  --mode-color-action-nav-inverse-with-active: #FFFFFF;
  --mode-color-action-nav-inverse-with-default: #fffffff2;
  --mode-color-action-nav-inverse-with-hover: #FFFFFF;
  --mode-color-action-main-active: #005e14;
  --mode-color-action-main-active-alt: #00811f4d;
  --mode-color-action-main-default: #00811f;
  --mode-color-action-main-default-alt: #00811fcc;
  --mode-color-action-main-default-alt2: #007219;
  --mode-color-action-main-default-alt3: #00811f08;
  --mode-color-action-main-hover: #007219;
  --mode-color-action-main-hover-alt: #00811f26;
  --mode-color-action-main-hover-alt2: #005e14;
  --mode-color-action-main-with-active: #FFFFFF;
  --mode-color-action-main-with-default: #FFFFFF;
  --mode-color-action-main-with-hover: #FFFFFF;
  --mode-color-action-main-inverse-active: #8fff98;
  --mode-color-action-main-inverse-active-alt: #00f1424d;
  --mode-color-action-main-inverse-default: #00f142;
  --mode-color-action-main-inverse-default-alt: #00f142cc;
  --mode-color-action-main-inverse-default-alt2: #46fb5e;
  --mode-color-action-main-inverse-default-alt3: #00f14208;
  --mode-color-action-main-inverse-hover: #46fb5e;
  --mode-color-action-main-inverse-hover-alt: #00f14226;
  --mode-color-action-main-inverse-hover-alt2: #8fff98;
  --mode-color-action-main-inverse-with-active: #000000;
  --mode-color-action-main-inverse-with-default: #000000;
  --mode-color-action-main-inverse-with-hover: #000000;
  --mode-color-status-ai-default: #FFFFFF;
  --mode-color-status-ai-default-alt: #000000;
  --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038  0%, #149197 40%, #a87cfb 90%);
  --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038  0%, #149197 40%, #a87cfb 90%);
  --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639  0%, #00d6de 40%, #9d60ff 90%);
  --mode-color-status-ai-inverse-default-vertical: linear-gradient(180deg, #00d639  0%, #00d6de 40%, #9d60ff 90%);
  --mode-color-status-callout-default-alt: #e0ffe2;
  --mode-color-status-callout-hover-alt: #b7ffbd;
  --mode-color-status-skeleton-stop-1: #75838f;
  --mode-color-status-skeleton-stop-2: #d1d6da;
  --mode-color-status-warning-default: #d64309;
  --mode-color-status-warning-default-alt: #fff7eb;
  --mode-color-status-warning-hover: #b33400;
  --mode-color-status-warning-hover-alt: #ffeaca;
  --mode-color-status-warning-txt: #b33400;
  --mode-color-status-warning-inverse-default: #e24300;
  --mode-color-status-warning-inverse-default-alt: #1d0300;
  --mode-color-status-warning-inverse-hover: #e5631c;
  --mode-color-status-warning-inverse-hover-alt: #360900;
  --mode-color-status-warning-inverse-txt: #e5631c;
  --mode-color-status-txt-with-default: #FFFFFF;
  --mode-color-status-txt-with-default-alt: #000000f2;
  --mode-color-status-txt-with-hover: #FFFFFF;
  --mode-color-status-txt-with-hover-alt: #000000;
  --mode-color-status-txt-loading: #747474;
  --mode-color-status-txt-inverse-with-default: #000000;
  --mode-color-status-txt-inverse-with-default-alt: #fffffff2;
  --mode-color-status-txt-inverse-with-hover: #000000;
  --mode-color-status-txt-inverse-with-hover-alt: #FFFFFF;
  --mode-color-status-custom-blue-default: #0071c3;
  --mode-color-status-custom-blue-default-alt: #f5f8ff;
  --mode-color-status-custom-blue-hover: #0063ad;
  --mode-color-status-custom-blue-hover-alt: #e4eeff;
  --mode-color-status-custom-teal-default: #007C7B;
  --mode-color-status-custom-teal-default-alt: #E8FCFC;
  --mode-color-status-custom-teal-hover: #006D6C;
  --mode-color-status-custom-teal-hover-alt: #C8F5F5;
  --mode-color-status-custom-green-default: #00811F;
  --mode-color-status-custom-green-default-alt: #EEFCEF;
  --mode-color-status-custom-green-hover: #007219;
  --mode-color-status-custom-green-hover-alt: #D1F6D6;
  --mode-color-status-custom-lime-default: #627600;
  --mode-color-status-custom-lime-default-alt: #f6f9f0;
  --mode-color-status-custom-lime-hover: #576900;
  --mode-color-status-custom-lime-hover-alt: #e8f1d4;
  --mode-color-status-custom-orange-default: #d64309;
  --mode-color-status-custom-orange-default-alt: #fff7eb;
  --mode-color-status-custom-orange-hover: #b33400;
  --mode-color-status-custom-orange-hover-alt: #ffeaca;
  --mode-color-status-custom-orange-txt: #b33400;
  --mode-color-status-custom-red-default: #db004e;
  --mode-color-status-custom-red-default-alt: #fff5f6;
  --mode-color-status-custom-red-hover: #c40044;
  --mode-color-status-custom-red-hover-alt: #ffe8ea;
  --mode-color-status-custom-pink-default: #c72699;
  --mode-color-status-custom-pink-default-alt: #fff5fa;
  --mode-color-status-custom-pink-hover: #b02086;
  --mode-color-status-custom-pink-hover-alt: #fee8f5;
  --mode-color-status-custom-purple-default: #8f4bd7;
  --mode-color-status-custom-purple-default-alt: #f9f6ff;
  --mode-color-status-custom-purple-hover: #803ec5;
  --mode-color-status-custom-purple-hover-alt: #F3EBFE;
  --mode-color-status-custom-gray-default: #6f6f6f;
  --mode-color-status-custom-gray-default-alt: #f8f8f8;
  --mode-color-status-custom-gray-hover: #616161;
  --mode-color-status-custom-gray-hover-alt: #eeeeee;
  --mode-color-status-custom-slate-default: #536574;
  --mode-color-status-custom-slate-default-alt: #f4f5f6;
  --mode-color-status-custom-slate-hover: #475a6a;
  --mode-color-status-custom-slate-hover-alt: #e8eaec;
  --mode-color-status-priority-default: #8f4bd7;
  --mode-color-status-priority-default-alt: #f9f6ff;
  --mode-color-status-priority-hover: #803ec5;
  --mode-color-status-priority-hover-alt: #F3EBFE;
  --mode-color-status-priority-inverse-default: #9463d7;
  --mode-color-status-priority-inverse-default-alt: #10041f;
  --mode-color-status-priority-inverse-hover: #a375dd;
  --mode-color-status-priority-inverse-hover-alt: #220c3a;
  --mode-color-status-inactive-default: #75838f;
  --mode-color-status-inactive-with-default: #0000008c;
  --mode-color-status-inactive-inverse-default: #6f6f6f;
  --mode-color-status-inactive-inverse-with-default: #ffffff8c;
  --mode-color-status-info-default: #0071c3;
  --mode-color-status-info-default-alt: #f5f8ff;
  --mode-color-status-info-hover: #0063ad;
  --mode-color-status-info-hover-alt: #e4eeff;
  --mode-color-status-info-inverse-default: #007fd9;
  --mode-color-status-info-inverse-default-alt: #000b1c;
  --mode-color-status-info-inverse-hover: #008ef4;
  --mode-color-status-info-inverse-hover-alt: #001932;
  --mode-color-status-negative-default: #db004e;
  --mode-color-status-negative-default-alt: #fff5f6;
  --mode-color-status-negative-hover: #c40044;
  --mode-color-status-negative-hover-alt: #ffe8ea;
  --mode-color-status-negative-inverse-default: #f50059;
  --mode-color-status-negative-inverse-default-alt: #1e0005;
  --mode-color-status-negative-inverse-hover: #ff3e6a;
  --mode-color-status-negative-inverse-hover-alt: #3c000f;
  --mode-color-status-neutral-default: #6f6f6f;
  --mode-color-status-neutral-default-alt: #f8f8f8;
  --mode-color-status-neutral-hover: #616161;
  --mode-color-status-neutral-hover-alt: #eeeeee;
  --mode-color-status-neutral-inverse-default: #7c7c7c;
  --mode-color-status-neutral-inverse-default-alt: #0b0b0b;
  --mode-color-status-neutral-inverse-hover: #8b8b8b;
  --mode-color-status-neutral-inverse-hover-alt: #181818;
  --mode-color-status-positive-default: #00811F;
  --mode-color-status-positive-default-alt: #EEFCEF;
  --mode-color-status-positive-hover: #007219;
  --mode-color-status-positive-hover-alt: #D1F6D6;
  --mode-color-status-positive-inverse-default: #019127;
  --mode-color-status-positive-inverse-default-alt: #001001;
  --mode-color-status-positive-inverse-hover: #007219;
  --mode-color-status-positive-inverse-hover-alt: #001f03;
}

/**
 * Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
 */

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --focus-bg: var(--mode-color-action-focus-with-default-alt);
  --focus-borderalt: var(--mode-color-action-focus-default);
  --focus-border: var(--mode-color-action-focus-with-default);
  --focus-label: var(--mode-color-action-focus-txt);
  --focus-inverse-bg: var(--mode-color-action-focus-inverse-with-default-alt);
  --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);
  --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);
  --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);
}

/**
 * Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
 */

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --link-destructive-label-default: var(--mode-color-action-danger-default-alt);
  --link-destructive-label-hover: var(--mode-color-action-danger-hover-alt2);
  --link-destructive-inverse-label-default: var(--mode-color-action-danger-inverse-default-alt);
  --link-destructive-inverse-label-hover: var(--mode-color-action-danger-inverse-hover-alt2);
  --link-typical-label-default: var(--mode-color-action-main-default-alt2);
  --link-typical-label-hover: var(--mode-color-action-main-hover-alt2);
  --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);
  --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);
  --link-subtle-label-hover: var(--mode-color-action-grayscale-active);
  --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);
  --link-subtle-label-default: var(--mode-color-action-grayscale-default);
  --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
}


:root {
  --font-body: 'Sage UI', 'Segoe UI', Arial, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-sub: #666666;
  --color-primary: #161616;
  --color-accent: #1f7a5d;
  --color-border: #e6e6e6;
  --color-muted: #f7f7f8;
  
  --spacing-unit: 8px;
  --container-width: 1200px;
  --sidebar-width: 280px;
}

* { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-muted);
  line-height: 1.65;
}

.top-bar {
  height: 44px;
  background: #050505;
  color: #f2f2f2;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.top-bar-content {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

.top-bar-label {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge {
  background: #2d2d2d;
  color: #f2f2f2;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.top-bar-button {
  background: #f2f2f2;
  color: #111;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.layout {
  display: flex;
  min-height: 100vh;
  background: var(--color-muted);
}

.sidebar {
  width: var(--sidebar-width);
  border-right: 1px solid var(--color-border);
  padding: 0;
  box-sizing: border-box;
  position: sticky;
  top: 44px;
  height: calc(100vh - 44px);
  overflow-y: auto;
  background: #ffffff;
}

.sidebar-logo {
  width: 100%;
  height: auto;
  margin: 8px 0 18px;
  display: block;
  border: none;
}

.main-content {
  flex: 1;
  padding: 48px 72px 80px;
  max-width: calc(100vw - var(--sidebar-width));
  background: #fff;
}

.main-content > header,
.main-content > .content {
  max-width: 980px;
  margin: 0 auto;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--color-primary);
  display: block;
  margin-bottom: 24px;
}

.nav-item {
  display: block;
  padding: 10px 12px;
  margin: 2px 0;
  color: #111111;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}

.nav-item.active {
  color: #111111;
  background: #dedede;
  border: none;
  font-weight: 600;
}

.nav-category {
  margin-bottom: 6px;
}

.nav-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  color: #111111;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  text-decoration: none;
}

.nav-toggle .chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  order: 2;
  margin-left: auto;
}

.nav-category.open .nav-toggle .chevron {
  transform: rotate(45deg);
  margin-top: 0;
}

.nav-toggle:hover,
.nav-item:hover {
  background: #ededed;
  color: #111111;
}

.nav-toggle.active {
  color: #111111;
  background: #dedede;
  border: none;
}

.nav-children {
  display: none;
  margin-left: 8px;
}

.nav-children.open {
  display: block;
}

.nav-children .nav-item,
.nav-children .nav-toggle {
  font-size: 14px;
  color: #222222;
}

.tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
  padding-bottom: 6px;
}

.tab {
  background: none;
  border: none;
  padding: 8px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-sub);
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.tab:hover {
  color: var(--color-primary);
}

.tab.active {
  color: var(--color-primary);
  border-color: var(--color-accent);
}

.tab-panels {
  margin-bottom: 24px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.content h1 {
  font-size: 32px;
  margin-bottom: 16px;
}

.content h2 {
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 12px;
  font-weight: 700;
}

.content h3 {
  font-size: 18px;
  margin-top: 28px;
  margin-bottom: 10px;
}

.content h2,
.content h3 {
  scroll-margin-top: 96px;
}

.content p {
  font-size: 1rem;
  margin: 10px 0 16px;
  color: #2f2f2f;
}

.content ul {
  padding-left: 22px;
  margin: 8px 0 16px;
}

.content li {
  margin-bottom: 6px;
  font-size: 1rem;
}

.content strong {
  font-weight: 700;
}

.content .notion-inline-link {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.content .notion-inline-link > a,
.content .notion-inline-link > button {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.content .notion-inline-link > a > span,
.content .notion-inline-link > button > span {
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}

.content [data-notionds-search-highlight] {
  background: transparent;
  color: inherit;
  padding: 0 0.12em;
  border-radius: 0.2em;
}

.content [data-notionds-search-highlight-active] {
  border-radius: var(--global-radius-action-xs);
  background-color: var(--focus-bg);
  box-shadow: 0 0 0 var(--global-size-5-xs) var(--focus-borderalt);
  outline: none;
  text-decoration: none;
}

.callout {
  background: #fce8df;
  border-left: 4px solid #f1c4ad;
  padding: 16px 18px;
  border-radius: 8px;
  margin: 0 !important;
}

.notion-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}

.notion-table th,
.notion-table td {
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  vertical-align: top;
}

.notion-table th {
  background: #f7f7f7;
  font-weight: 600;
  text-align: left;
}

.notion-columns {
  display: grid;
  grid-template-columns: repeat(var(--notion-columns-per-row, 1), minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0;
  align-items: stretch;
}

.notion-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notion-column > .image-wrapper {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-wrapper {
  --notion-image-crop: 2px;
  margin: 24px 0;
  border-radius: 0;
  background: transparent;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.image-wrapper.img-center {
  display: flex;
  justify-content: center;
  align-items: center;
}


.image-wrapper.img-theme-dark {
  background: #0f0f0f;
}

.content-image {
  width: auto;
  max-width: 100%;
  height: auto;
  background: transparent;
  flex: 0 1 auto;
}

.content-image.img-sized {
  width: auto;
  max-width: 100%;
}

/* Zeroheight design-upload images are exported at 2× resolution; display at half size */
.content-image.zh-upload {
  width: auto;
  max-width: 100%;
  height: auto;
}

.image-wrapper .content-image {
  background: transparent;
  display: block;
  margin: 0;
  clip-path: inset(var(--notion-image-crop));
}

.image-wrapper .content-image[data-size="50"] {
  cursor: zoom-in;
  transition: opacity 0.18s ease;
}

.image-wrapper .content-image[data-size="50"]:hover {
  opacity: 0.92;
}

.image-wrapper[data-sync-height="true"] {
  height: var(--notion-image-frame-height, auto);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.image-wrapper[data-sync-height="true"] .content-image {
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .notion-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.image-wrapper.img-theme-dark .content-image {
  background: transparent;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border: 0;
  background: rgba(10, 10, 10, 0.88);
}

.image-lightbox-content {
  max-width: min(96vw, 1600px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.image-lightbox-content .image-wrapper {
  margin: 0;
  padding: 24px;
  width: auto;
  max-width: 100%;
  overflow: visible;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.image-lightbox-content .content-image {
  margin: 0;
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  background: #ffffff;
}

.image-lightbox-toolbar {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.image-lightbox-spacer {
  display: block;
}

.image-lightbox-caption {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .image-lightbox {
    padding: 20px;
  }

  .image-lightbox-content .image-wrapper {
    padding: 16px;
    border-radius: 14px;
  }

  .image-lightbox-toolbar {
    grid-template-columns: auto;
    justify-items: end;
  }

  .image-lightbox-spacer,
  .image-lightbox-caption {
    display: none;
  }
}

.link-preview {
  margin: 16px 0 28px;
}

.link-preview-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid #e5e5e5;
  overflow: hidden;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.link-preview-media {
  position: relative;
  background: #f1f1f1;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.link-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.link-preview-media.placeholder {
  font-size: 14px;
  font-weight: 600;
  color: #666666;
}

.link-preview-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
  color: #111111;
}

.link-preview-title {
  font-size: 14px;
  font-weight: 600;
}

.link-preview-meta {
  font-size: 12px;
  color: #666666;
}

.video-wrapper {
  width: 100%;
  margin: 24px 0;
}

.video-embed-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.video-embed-container iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.video-source-link {
  display: inline-block;
  margin-top: 10px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.content header {
  margin-bottom: 24px;
}

.content .intro {
  color: var(--color-text-sub);
  margin-bottom: 20px;
}

.nav-group {
    margin-bottom: 24px;
}
.nav-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    margin-bottom: 8px;
    font-weight: 600;
}

h1, h2, h3 { margin-top: 0; }
h1 { font-size: 32px; margin-bottom: 12px; font-weight: 700; }
h2 { font-size: 22px; margin-top: 32px; margin-bottom: 12px; font-weight: 700; }
h3 { font-size: 18px; margin-top: 24px; margin-bottom: 10px; font-weight: 700; }

code {
    background: #f4f4f4;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.content pre {
    background: #2b2626;
    color: #f6f2ee;
    border-radius: 16px;
    padding: 24px;
    margin: 18px 0 24px;
    overflow-x: auto;
    position: relative;
    box-shadow: 0 16px 40px rgba(17, 12, 12, 0.18);
}

.content pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: inherit;
    display: block;
    white-space: pre;
}

.content .code-copy {
    position: absolute;
    top: 12px;
    right: 12px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #f6f2ee;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.content .code-copy:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.content .code-copy:active {
    transform: translateY(0);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 24px 0;
}

/* Target the IMG itself */
nav[data-component="global-header"]
  div[data-element="global-header-logo-wrapper"] > img {
  margin:0;
}

/* Target the H4 color */
nav[data-component="global-header"]
  h4{
    color:#fff;
}