/*
 * MAH Design System — generated from Figma tokens.
 *
 * Source: docs/MAHDS/ (Figma export, "Mode 1" + dual breakpoint modes).
 * Generator: scripts/build-mahds/build.php
 *
 * To regenerate:
 *   php scripts/build-mahds/build.php > data/wordpress/wp-content/themes/zmblocks-demo/zmblocks-classes/mahds.css
 *
 * Responsive tokens use clamp(428px, vw-interpolation, 1440px) — no @media queries.
 * Brand overrides activate via body.brand-{slug} class (zm-brand mu-plugin).
 *
 * DO NOT EDIT BY HAND — regenerate from JSON instead.
 */

/* ======================================================================
 * Design tokens (:root)
 * ====================================================================== */

:root {

    /* Size scale (px → rem) */
    --mds-size-1: 0.0625rem;
    --mds-size-2: 0.125rem;
    --mds-size-3: 0.25rem;
    --mds-size-4: 0.5rem;
    --mds-size-5: 0.75rem;
    --mds-size-6: 1rem;
    --mds-size-7: 1.25rem;
    --mds-size-8: 1.5rem;
    --mds-size-9: 1.75rem;
    --mds-size-10: 2rem;
    --mds-size-11: 2.25rem;
    --mds-size-12: 2.5rem;
    --mds-size-13: 2.75rem;
    --mds-size-14: 3rem;
    --mds-size-15: 3.5rem;
    --mds-size-16: 4rem;
    --mds-size-17: 4.5rem;
    --mds-size-18: 5rem;
    --mds-size-19: 6rem;
    --mds-size-20: 7rem;
    --mds-size-21: 8rem;
    --mds-size-22: 9rem;
    --mds-size-23: 10rem;
    --mds-size-none: 0rem;

    /* Border radius */
    --mds-radius-none: 0rem;
    --mds-radius-2xs: 0.0625rem;
    --mds-radius-xs: 0.125rem;
    --mds-radius-sm: 0.25rem;
    --mds-radius-md: 0.5rem;
    --mds-radius-lg: 0.75rem;
    --mds-radius-xl: 1rem;
    --mds-radius-2xl: 1.25rem;
    --mds-radius-full: 9999px;

    /* Responsive spacing — clamp(428px, …, 1440px) */
    --mds-spacing-10: clamp(10rem, 7.357rem + 9.8814vw, 16.25rem);
    --mds-spacing-9: clamp(5rem, 1.828rem + 11.8577vw, 12.5rem);
    --mds-spacing-9-body-component: clamp(1.5rem, -3.152rem + 17.3913vw, 12.5rem);
    --mds-spacing-8: clamp(5rem, 2.885rem + 7.9051vw, 10rem);
    --mds-spacing-7: clamp(3rem, 2.154rem + 3.1621vw, 5rem);
    --mds-spacing-6: clamp(2rem, 1.577rem + 1.5810vw, 3rem);
    --mds-spacing-5: clamp(1.5rem, 1.289rem + 0.7905vw, 2rem);
    --mds-spacing-4: 1.5rem;
    --mds-spacing-3: 1rem;
    --mds-spacing-2: 0.5rem;
    --mds-spacing-1: 0.25rem;
    --mds-spacing-minus-4: -1.5rem;
    --mds-spacing-minus-6: clamp(-3rem, -1.577rem + -1.5810vw, -2rem);
    --mds-spacing-minus-7: clamp(-5rem, -0.01976rem + -5.5336vw, -1.5rem);
    --mds-spacing-minus-8: clamp(-10rem, -0.03953rem + -11.0672vw, -3rem);
    --mds-spacing-minus-9: clamp(-12.5rem, -1.828rem + -11.8577vw, -5rem);

    /* Typography families & weights */
    --mds-font-heading: "Inter", system-ui, sans-serif;
    --mds-font-body: "Inter", system-ui, sans-serif;
    --mds-font-weight-regular: 400;
    --mds-font-weight-light: 300;
    --mds-font-weight-bold: 700;

    /* Letter spacing */
    --mds-letter-spacing-tight: -0.025em;
    --mds-letter-spacing-normal: 0;
    --mds-letter-spacing-wide: 0.025em;
    --mds-letter-spacing-wider: 0.05em;
    --mds-letter-spacing-widest: 0.1em;

    /* Typography scale — clamp(428px, …, 1440px) */

    /* Font sizes */
    --mds-text-h1: clamp(2.375rem, 2.164rem + 0.7905vw, 2.875rem);
    --mds-text-h2: clamp(1.875rem, 1.664rem + 0.7905vw, 2.375rem);
    --mds-text-h3: clamp(1.5rem, 1.341rem + 0.5929vw, 1.875rem);
    --mds-text-h4: 1.375rem;
    --mds-text-h5: 1.125rem;
    --mds-text-xl: 1.25rem;
    --mds-text-l: 1rem;
    --mds-text-base: 0.875rem;
    --mds-text-sm: 0.75rem;

    /* Line heights (matched to font sizes) */
    --mds-leading-h1: clamp(2.875rem, 2.505rem + 1.3834vw, 3.75rem);
    --mds-leading-h2: clamp(2.5rem, 2.183rem + 1.1858vw, 3.25rem);
    --mds-leading-h3: clamp(2rem, 1.789rem + 0.7905vw, 2.5rem);
    --mds-leading-h4: clamp(1.875rem, 1.822rem + 0.1976vw, 2rem);
    --mds-leading-h5: 1.75rem;
    --mds-leading-xl: 1.75rem;
    --mds-leading-l: 1.5rem;
    --mds-leading-base: 1.375rem;
    --mds-leading-sm: 1.25rem;

    /* Layout container max-widths */
    --mds-container-sm: 40rem;
    --mds-container-md: 48rem;
    --mds-container-lg: 64rem;
    --mds-container-xl: 80rem;
    --mds-container-2xl: 96rem;

    /* Grid gutter & margin — clamp(428px, …, 1440px) */
    --mds-grid-margin: clamp(0rem, 2.134rem + -2.3715vw, 1.5rem);
    --mds-grid-gutter: clamp(1rem, 0.4978rem + 1.8775vw, 2.188rem);
}

/* ======================================================================
 * Per-brand color overrides
 * ====================================================================== */

.brand-allflex {
    --mds-color-primary-teal: #005587;
    --mds-color-primary-blue: #0C2340;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #009CDE;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #71C5E8;
    --mds-color-tertiary-pastel-blue: #71C5E8;
    --mds-color-tertiary-rich-blue: #5C3161;
    --mds-color-button-teal-default: #005587;
    --mds-color-button-teal-hover: #004A75;
    --mds-color-button-teal-pressed: #004066;
    --mds-color-button-blue-default: #0C2340;
    --mds-color-button-blue-hover: #071526;
    --mds-color-button-blue-pressed: #02070D;
    --mds-color-button-vista-blue-default: #71C5E8;
    --mds-color-button-vista-blue-hover: #47B4E1;
    --mds-color-button-vista-blue-pressed: #229FD3;
    --mds-color-link-teal-default: #044667;
    --mds-color-link-teal-hover: #03324A;
    --mds-color-link-teal-active: #022131;
    --mds-color-shade-teal-1: #CEEDFD;
    --mds-color-shade-teal-2: #9DDCFB;
    --mds-color-shade-teal-3: #3BB8F7;
    --mds-color-shade-teal-4: #0996DD;
    --mds-color-shade-teal-5: #066493;
    --mds-color-shade-teal-6: #044667;
    --mds-color-shade-teal-7: #03324A;
    --mds-color-shade-teal-8: #022131;
    --mds-color-shade-teal-9: #011119;
    --mds-color-shade-teal-10: #000000;
    --mds-color-text-body: #565656;
}

.brand-bovilis-cryptium {
    --mds-color-primary-teal: #0C2340;
    --mds-color-primary-blue: #151515;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #F9B300;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #F9B300;
    --mds-color-tertiary-pastel-blue: #F9B300;
    --mds-color-tertiary-rich-blue: #F9B300;
    --mds-color-button-teal-default: #0C2340;
    --mds-color-button-teal-hover: #08172B;
    --mds-color-button-teal-pressed: #040C15;
    --mds-color-button-blue-default: #151515;
    --mds-color-button-blue-hover: #333333;
    --mds-color-button-blue-pressed: #0D0C0C;
    --mds-color-button-vista-blue-default: #F9B300;
    --mds-color-button-vista-blue-hover: #FFCA43;
    --mds-color-button-vista-blue-pressed: #FFCF54;
    --mds-color-link-teal-default: #0C2340;
    --mds-color-link-teal-hover: #08172B;
    --mds-color-link-teal-active: #040C15;
    --mds-color-shade-teal-1: #BFD6F3;
    --mds-color-shade-teal-2: #94BAEB;
    --mds-color-shade-teal-3: #699FE3;
    --mds-color-shade-teal-4: #3E83DB;
    --mds-color-shade-teal-5: #246AC1;
    --mds-color-shade-teal-6: #1C5296;
    --mds-color-shade-teal-7: #143B6B;
    --mds-color-shade-teal-8: #0C2340;
    --mds-color-shade-teal-9: #08172B;
    --mds-color-shade-teal-10: #040C15;
    --mds-color-text-body: #565656;
}

.brand-bovilis-global {
    --mds-color-primary-teal: #00693C;
    --mds-color-primary-blue: #151515;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #34B233;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #34B233;
    --mds-color-tertiary-pastel-blue: #34B233;
    --mds-color-tertiary-rich-blue: #34B233;
    --mds-color-button-teal-default: #00693C;
    --mds-color-button-teal-hover: #00522F;
    --mds-color-button-teal-pressed: #00331D;
    --mds-color-button-blue-default: #151515;
    --mds-color-button-blue-hover: #333333;
    --mds-color-button-blue-pressed: #0D0C0C;
    --mds-color-button-vista-blue-default: #34B233;
    --mds-color-button-vista-blue-hover: #4ECC4D;
    --mds-color-button-vista-blue-pressed: #75D774;
    --mds-color-link-teal-default: #00693C;
    --mds-color-link-teal-hover: #00522F;
    --mds-color-link-teal-active: #00331D;
    --mds-color-shade-teal-1: #CCFFE9;
    --mds-color-shade-teal-2: #99FFD3;
    --mds-color-shade-teal-3: #66FFBD;
    --mds-color-shade-teal-4: #33FFA8;
    --mds-color-shade-teal-5: #00CC75;
    --mds-color-shade-teal-6: #00693C;
    --mds-color-shade-teal-7: #004D2C;
    --mds-color-shade-teal-8: #00331D;
    --mds-color-shade-teal-9: #001A0F;
    --mds-color-shade-teal-10: #000000;
    --mds-color-text-body: #565656;
}

.brand-bravecto-injectable {
    --mds-color-primary-teal: #C8102E;
    --mds-color-primary-blue: #2E1362;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #CD885A;
    --mds-color-secondary-gray: #DCDDDE;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #CD885A;
    --mds-color-tertiary-pastel-blue: #FFFFFF;
    --mds-color-tertiary-rich-blue: #582C83;
    --mds-color-button-teal-default: #582C83;
    --mds-color-button-teal-hover: #4D2673;
    --mds-color-button-teal-pressed: #3E1F5C;
    --mds-color-button-blue-default: #2E1362;
    --mds-color-button-blue-hover: #3C1980;
    --mds-color-button-blue-pressed: #2E1362;
    --mds-color-button-vista-blue-default: #CD885A;
    --mds-color-button-vista-blue-hover: #D9A582;
    --mds-color-button-vista-blue-pressed: #E5C1A9;
    --mds-color-link-teal-default: #582C83;
    --mds-color-link-teal-hover: #4D2673;
    --mds-color-link-teal-active: #3E1F5C;
    --mds-color-shade-teal-1: #F1E9F7;
    --mds-color-shade-teal-2: #D9C3E9;
    --mds-color-shade-teal-3: #AA79CE;
    --mds-color-shade-teal-4: #9253C0;
    --mds-color-shade-teal-5: #783CA5;
    --mds-color-shade-teal-6: #582C83;
    --mds-color-shade-teal-7: #4D2673;
    --mds-color-shade-teal-8: #3E1F5C;
    --mds-color-shade-teal-9: #241235;
    --mds-color-shade-teal-10: #0A050F;
    --mds-color-text-body: #565656;
}

.brand-bravecto-portfolio {
    --mds-color-primary-teal: #582C83;
    --mds-color-primary-blue: #2E1362;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #FFFFFF;
    --mds-color-secondary-gray: #DCDDDE;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #FFFFFF;
    --mds-color-tertiary-pastel-blue: #FFFFFF;
    --mds-color-tertiary-rich-blue: #C8102E;
    --mds-color-button-teal-default: #582C83;
    --mds-color-button-teal-hover: #4D2673;
    --mds-color-button-teal-pressed: #3E1F5C;
    --mds-color-button-blue-default: #2E1362;
    --mds-color-button-blue-hover: #3C1980;
    --mds-color-button-blue-pressed: #2E1362;
    --mds-color-button-vista-blue-default: #FFFFFF;
    --mds-color-button-vista-blue-hover: #DEDEDE;
    --mds-color-button-vista-blue-pressed: #C4C4C4;
    --mds-color-link-teal-default: #582C83;
    --mds-color-link-teal-hover: #4D2673;
    --mds-color-link-teal-active: #3E1F5C;
    --mds-color-shade-teal-1: #F1E9F7;
    --mds-color-shade-teal-2: #D9C3E9;
    --mds-color-shade-teal-3: #AA79CE;
    --mds-color-shade-teal-4: #9253C0;
    --mds-color-shade-teal-5: #783CA5;
    --mds-color-shade-teal-6: #582C83;
    --mds-color-shade-teal-7: #4D2673;
    --mds-color-shade-teal-8: #3E1F5C;
    --mds-color-shade-teal-9: #241235;
    --mds-color-shade-teal-10: #0A050F;
    --mds-color-text-body: #565656;
}

.brand-caninsulin {
    --mds-color-primary-teal: #007DBA;
    --mds-color-primary-blue: #151515;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #F3D54E;
    --mds-color-secondary-gray: #DCDDDE;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #3AB689;
    --mds-color-tertiary-pastel-blue: #3AB689;
    --mds-color-tertiary-rich-blue: #3AB689;
    --mds-color-button-teal-default: #007DBA;
    --mds-color-button-teal-hover: #006799;
    --mds-color-button-teal-pressed: #005680;
    --mds-color-button-blue-default: #151515;
    --mds-color-button-blue-hover: #333333;
    --mds-color-button-blue-pressed: #151515;
    --mds-color-button-vista-blue-default: #339E77;
    --mds-color-button-vista-blue-hover: #3EC191;
    --mds-color-button-vista-blue-pressed: #65CDA7;
    --mds-color-link-teal-default: #007DBA;
    --mds-color-link-teal-hover: #006799;
    --mds-color-link-teal-active: #005680;
    --mds-color-shade-teal-1: #CCEEFF;
    --mds-color-shade-teal-2: #99DEFF;
    --mds-color-shade-teal-3: #66CDFF;
    --mds-color-shade-teal-4: #33BCFF;
    --mds-color-shade-teal-5: #00ABFF;
    --mds-color-shade-teal-6: #007DBA;
    --mds-color-shade-teal-7: #004566;
    --mds-color-shade-teal-8: #002233;
    --mds-color-shade-teal-9: #00111A;
    --mds-color-shade-teal-10: #000000;
    --mds-color-text-body: #565656;
}

.brand-circumvent {
    --mds-color-primary-teal: #81242F;
    --mds-color-primary-blue: #000000;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #F9DD00;
    --mds-color-secondary-gray: #DCDDDE;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #10847D;
    --mds-color-tertiary-pastel-blue: #FFFFFF;
    --mds-color-tertiary-rich-blue: #FFFFFF;
    --mds-color-button-teal-default: #81242F;
    --mds-color-button-teal-hover: #581820;
    --mds-color-button-teal-pressed: #300D11;
    --mds-color-button-blue-default: #000000;
    --mds-color-button-blue-hover: #1A1A1A;
    --mds-color-button-blue-pressed: #333333;
    --mds-color-button-vista-blue-default: #10847D;
    --mds-color-button-vista-blue-hover: #16B1A8;
    --mds-color-button-vista-blue-pressed: #1BDFD3;
    --mds-color-link-teal-default: #81242F;
    --mds-color-link-teal-hover: #581820;
    --mds-color-link-teal-active: #300D11;
    --mds-color-shade-teal-1: #E9AFB6;
    --mds-color-shade-teal-2: #D2606D;
    --mds-color-shade-teal-3: #C73849;
    --mds-color-shade-teal-4: #9F2D3A;
    --mds-color-shade-teal-5: #81242F;
    --mds-color-shade-teal-6: #641C24;
    --mds-color-shade-teal-7: #50161D;
    --mds-color-shade-teal-8: #3C1116;
    --mds-color-shade-teal-9: #280B0F;
    --mds-color-shade-teal-10: #140607;
    --mds-color-text-body: #565656;
}

.brand-exzolt {
    --mds-color-primary-teal: #003B5C;
    --mds-color-primary-blue: #000000;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #0095C8;
    --mds-color-secondary-gray: #DCDDDE;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #0095C8;
    --mds-color-tertiary-pastel-blue: #0095C8;
    --mds-color-tertiary-rich-blue: #0095C8;
    --mds-color-button-teal-default: #003B5C;
    --mds-color-button-teal-hover: #002133;
    --mds-color-button-teal-pressed: #00101A;
    --mds-color-button-blue-default: #000000;
    --mds-color-button-blue-hover: #1A1A1A;
    --mds-color-button-blue-pressed: #333333;
    --mds-color-button-vista-blue-default: #0095C8;
    --mds-color-button-vista-blue-hover: #00BEFF;
    --mds-color-button-vista-blue-pressed: #33CBFF;
    --mds-color-link-teal-default: #003B5C;
    --mds-color-link-teal-hover: #002133;
    --mds-color-link-teal-active: #00101A;
    --mds-color-shade-teal-1: #99DAFF;
    --mds-color-shade-teal-2: #3DB9FF;
    --mds-color-shade-teal-3: #0089D6;
    --mds-color-shade-teal-4: #0069A3;
    --mds-color-shade-teal-5: #004870;
    --mds-color-shade-teal-6: #003B5C;
    --mds-color-shade-teal-7: #00314D;
    --mds-color-shade-teal-8: #00273D;
    --mds-color-shade-teal-9: #001A29;
    --mds-color-shade-teal-10: #00101A;
    --mds-color-text-body: #565656;
}

.brand-innovax {
    --mds-color-primary-teal: #232F5D;
    --mds-color-primary-blue: #0C2340;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #4BAFB4;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #009FE3;
    --mds-color-tertiary-pastel-blue: #E9BD29;
    --mds-color-tertiary-rich-blue: #921F30;
    --mds-color-button-teal-default: #232F5D;
    --mds-color-button-teal-hover: #151C38;
    --mds-color-button-teal-pressed: #070913;
    --mds-color-button-blue-default: #0C2340;
    --mds-color-button-blue-hover: #071526;
    --mds-color-button-blue-pressed: #02070D;
    --mds-color-button-vista-blue-default: #009FE3;
    --mds-color-button-vista-blue-hover: #1ABAFF;
    --mds-color-button-vista-blue-pressed: #4DCAFF;
    --mds-color-link-teal-default: #232F5D;
    --mds-color-link-teal-hover: #151C38;
    --mds-color-link-teal-active: #070913;
    --mds-color-shade-teal-1: #EAFAF7;
    --mds-color-shade-teal-2: #C0F1E8;
    --mds-color-shade-teal-3: #96E8D9;
    --mds-color-shade-teal-4: #6DDFCA;
    --mds-color-shade-teal-5: #20927E;
    --mds-color-shade-teal-6: #166456;
    --mds-color-shade-teal-7: #125448;
    --mds-color-shade-teal-8: #0E3F36;
    --mds-color-shade-teal-9: #092A24;
    --mds-color-shade-teal-10: #051512;
    --mds-color-text-body: #565656;
}

.brand-corporate {
    --mds-color-primary-teal: #00857C;
    --mds-color-primary-blue: #0C2340;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #6ECEB2;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #688CE8;
    --mds-color-tertiary-pastel-blue: #69B8F7;
    --mds-color-tertiary-rich-blue: #5450E4;
    --mds-color-button-teal-default: #00857C;
    --mds-color-button-teal-hover: #006A63;
    --mds-color-button-teal-pressed: #00504A;
    --mds-color-button-blue-default: #0C2340;
    --mds-color-button-blue-hover: #3D4F66;
    --mds-color-button-blue-pressed: #0C2340;
    --mds-color-button-vista-blue-default: #688CE8;
    --mds-color-button-vista-blue-hover: #A4BAF1;
    --mds-color-button-vista-blue-pressed: #C3D1F6;
    --mds-color-link-teal-default: #007E73;
    --mds-color-link-teal-hover: #00665D;
    --mds-color-link-teal-active: #004D46;
    --mds-color-shade-teal-1: #E6F3F2;
    --mds-color-shade-teal-2: #CCE7E5;
    --mds-color-shade-teal-3: #99CECB;
    --mds-color-shade-teal-4: #66B6B0;
    --mds-color-shade-teal-5: #339D96;
    --mds-color-shade-teal-6: #00857C;
    --mds-color-shade-teal-7: #006A63;
    --mds-color-shade-teal-8: #00504A;
    --mds-color-shade-teal-9: #003532;
    --mds-color-shade-teal-10: #001B19;
    --mds-color-text-body: #545454;
}

.brand-mometamax {
    --mds-color-primary-teal: #3576B1;
    --mds-color-primary-blue: #0C2340;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #BFDFF8;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #F6D550;
    --mds-color-tertiary-pastel-blue: #BEE9E8;
    --mds-color-tertiary-rich-blue: #7C79B2;
    --mds-color-button-teal-default: #3576B1;
    --mds-color-button-teal-hover: #2F699D;
    --mds-color-button-teal-pressed: #224C72;
    --mds-color-button-blue-default: #0C2340;
    --mds-color-button-blue-hover: #071526;
    --mds-color-button-blue-pressed: #02070D;
    --mds-color-button-vista-blue-default: #BFDFF8;
    --mds-color-button-vista-blue-hover: #A3D1F5;
    --mds-color-button-vista-blue-pressed: #8CC6F2;
    --mds-color-link-teal-default: #0C2340;
    --mds-color-link-teal-hover: #08172B;
    --mds-color-link-teal-active: #040C15;
    --mds-color-shade-teal-1: #EBF3F9;
    --mds-color-shade-teal-2: #C4DAED;
    --mds-color-shade-teal-3: #9DC1E2;
    --mds-color-shade-teal-4: #76A8D6;
    --mds-color-shade-teal-5: #4E8FCA;
    --mds-color-shade-teal-6: #3576B1;
    --mds-color-shade-teal-7: #295C89;
    --mds-color-shade-teal-8: #1D4162;
    --mds-color-shade-teal-9: #12273B;
    --mds-color-shade-teal-10: #060D14;
    --mds-color-text-body: #565656;
}

.brand-nobivac {
    --mds-color-primary-teal: #87027B;
    --mds-color-primary-blue: #151515;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #8BC400;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #F2CD00;
    --mds-color-tertiary-pastel-blue: #0097A8;
    --mds-color-tertiary-rich-blue: #565294;
    --mds-color-button-teal-default: #87027B;
    --mds-color-button-teal-hover: #65015C;
    --mds-color-button-teal-pressed: #4B0145;
    --mds-color-button-blue-default: #151515;
    --mds-color-button-blue-hover: #333333;
    --mds-color-button-blue-pressed: #0D0C0C;
    --mds-color-button-vista-blue-default: #F2CD00;
    --mds-color-button-vista-blue-hover: #FFDD24;
    --mds-color-button-vista-blue-pressed: #FFE557;
    --mds-color-link-teal-default: #87027B;
    --mds-color-link-teal-hover: #65015C;
    --mds-color-link-teal-active: #4B0145;
    --mds-color-shade-teal-1: #FEB4F7;
    --mds-color-shade-teal-2: #FD81F2;
    --mds-color-shade-teal-3: #FC1DE8;
    --mds-color-shade-teal-4: #D803C5;
    --mds-color-shade-teal-5: #BA03A9;
    --mds-color-shade-teal-6: #87027B;
    --mds-color-shade-teal-7: #55014E;
    --mds-color-shade-teal-8: #230120;
    --mds-color-shade-teal-9: #190017;
    --mds-color-shade-teal-10: #000000;
    --mds-color-text-body: #565656;
}

.brand-numelvi {
    --mds-color-primary-teal: #00857C;
    --mds-color-primary-blue: #2C2A29;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #49C6BB;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #00ADA3;
    --mds-color-tertiary-pastel-blue: #E9E9DA;
    --mds-color-tertiary-rich-blue: #E03A75;
    --mds-color-button-teal-default: #00857C;
    --mds-color-button-teal-hover: #006A63;
    --mds-color-button-teal-pressed: #00504A;
    --mds-color-button-blue-default: #2C2A29;
    --mds-color-button-blue-hover: #454240;
    --mds-color-button-blue-pressed: #0D0C0C;
    --mds-color-button-vista-blue-default: #00ADA3;
    --mds-color-button-vista-blue-hover: #1CE7DB;
    --mds-color-button-vista-blue-pressed: #82DBD6;
    --mds-color-link-teal-default: #007E73;
    --mds-color-link-teal-hover: #00665D;
    --mds-color-link-teal-active: #004D46;
    --mds-color-shade-teal-1: #E0FFFD;
    --mds-color-shade-teal-2: #99FFF9;
    --mds-color-shade-teal-3: #47FFF4;
    --mds-color-shade-teal-4: #14FFF1;
    --mds-color-shade-teal-5: #00E0D3;
    --mds-color-shade-teal-6: #00ADA3;
    --mds-color-shade-teal-7: #009990;
    --mds-color-shade-teal-8: #007A73;
    --mds-color-shade-teal-9: #004743;
    --mds-color-shade-teal-10: #001413;
    --mds-color-text-body: #565656;
}

.brand-protect-and-connect {
    --mds-color-primary-teal: #007A73;
    --mds-color-primary-blue: #151515;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #FBA8D0;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #FF69B4;
    --mds-color-tertiary-pastel-blue: #F87C56;
    --mds-color-tertiary-rich-blue: #007A73;
    --mds-color-button-teal-default: #00313C;
    --mds-color-button-teal-hover: #002730;
    --mds-color-button-teal-pressed: #00151A;
    --mds-color-button-blue-default: #151515;
    --mds-color-button-blue-hover: #333333;
    --mds-color-button-blue-pressed: #0D0C0C;
    --mds-color-button-vista-blue-default: #FF69B4;
    --mds-color-button-vista-blue-hover: #FBA8D0;
    --mds-color-button-vista-blue-pressed: #FDD8EA;
    --mds-color-link-teal-default: #00313C;
    --mds-color-link-teal-hover: #002730;
    --mds-color-link-teal-active: #00151A;
    --mds-color-shade-teal-1: #D6F8FF;
    --mds-color-shade-teal-2: #A3EEFF;
    --mds-color-shade-teal-3: #70E5FF;
    --mds-color-shade-teal-4: #0AD2FF;
    --mds-color-shade-teal-5: #00AFD6;
    --mds-color-shade-teal-6: #0085A3;
    --mds-color-shade-teal-7: #005C70;
    --mds-color-shade-teal-8: #00313C;
    --mds-color-shade-teal-9: #00151A;
    --mds-color-shade-teal-10: #000000;
    --mds-color-text-body: #565656;
}

.brand-scalibor {
    --mds-color-primary-teal: #000000;
    --mds-color-primary-blue: #000000;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #FDB813;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #FDB813;
    --mds-color-tertiary-pastel-blue: #FDB813;
    --mds-color-tertiary-rich-blue: #0095C8;
    --mds-color-button-teal-default: #000000;
    --mds-color-button-teal-hover: #1A1A1A;
    --mds-color-button-teal-pressed: #333333;
    --mds-color-button-blue-default: #000000;
    --mds-color-button-blue-hover: #1A1A1A;
    --mds-color-button-blue-pressed: #333333;
    --mds-color-button-vista-blue-default: #FDB813;
    --mds-color-button-vista-blue-hover: #CC9600;
    --mds-color-button-vista-blue-pressed: #997000;
    --mds-color-link-teal-default: #000000;
    --mds-color-link-teal-hover: #000000;
    --mds-color-link-teal-active: #000000;
    --mds-color-shade-teal-1: #FFFFFF;
    --mds-color-shade-teal-2: #E5E5E5;
    --mds-color-shade-teal-3: #CCCCCC;
    --mds-color-shade-teal-4: #B2B2B2;
    --mds-color-shade-teal-5: #999999;
    --mds-color-shade-teal-6: #666666;
    --mds-color-shade-teal-7: #4D4D4D;
    --mds-color-shade-teal-8: #333333;
    --mds-color-shade-teal-9: #1A1A1A;
    --mds-color-shade-teal-10: #000000;
    --mds-color-text-body: #565656;
}

.brand-sensehub {
    --mds-color-primary-teal: #2F57B6;
    --mds-color-primary-blue: #0C2340;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #009CDE;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F1F2F9;
    --mds-color-tertiary-vista-blue: #009CDE;
    --mds-color-tertiary-pastel-blue: #009CDE;
    --mds-color-tertiary-rich-blue: #009CDE;
    --mds-color-button-teal-default: #2F57B6;
    --mds-color-button-teal-hover: #2A4EA2;
    --mds-color-button-teal-pressed: #1F3A7A;
    --mds-color-button-blue-default: #0C2340;
    --mds-color-button-blue-hover: #071526;
    --mds-color-button-blue-pressed: #02070D;
    --mds-color-button-vista-blue-default: #009CDE;
    --mds-color-button-vista-blue-hover: #14B9FF;
    --mds-color-button-vista-blue-pressed: #47C8FF;
    --mds-color-link-teal-default: #2F57B6;
    --mds-color-link-teal-hover: #2A4EA2;
    --mds-color-link-teal-active: #1F3A7A;
    --mds-color-shade-teal-1: #EBEFFA;
    --mds-color-shade-teal-2: #C2D0EF;
    --mds-color-shade-teal-3: #9AB0E5;
    --mds-color-shade-teal-4: #7190DA;
    --mds-color-shade-teal-5: #4971D0;
    --mds-color-shade-teal-6: #2F57B6;
    --mds-color-shade-teal-7: #25448E;
    --mds-color-shade-teal-8: #1A3065;
    --mds-color-shade-teal-9: #101D3D;
    --mds-color-shade-teal-10: #050A14;
    --mds-color-text-body: #565656;
}

.brand-sphereon {
    --mds-color-primary-teal: #0165A4;
    --mds-color-primary-blue: #000000;
    --mds-color-primary-white: #FFFFFF;
    --mds-color-secondary-light-teal: #FFFFFF;
    --mds-color-secondary-gray: #CAC9C8;
    --mds-color-secondary-off-white: #F7F7F7;
    --mds-color-tertiary-vista-blue: #FFFFFF;
    --mds-color-tertiary-pastel-blue: #FFFFFF;
    --mds-color-tertiary-rich-blue: #FFFFFF;
    --mds-color-button-teal-default: #0165A4;
    --mds-color-button-teal-hover: #015489;
    --mds-color-button-teal-pressed: #014570;
    --mds-color-button-blue-default: #000000;
    --mds-color-button-blue-hover: #1A1A1A;
    --mds-color-button-blue-pressed: #333333;
    --mds-color-button-vista-blue-default: #FFFFFF;
    --mds-color-button-vista-blue-hover: #F7F7F7;
    --mds-color-button-vista-blue-pressed: #E5E5E5;
    --mds-color-link-teal-default: #015489;
    --mds-color-link-teal-hover: #014570;
    --mds-color-link-teal-active: #013556;
    --mds-color-shade-teal-1: #D6EFFF;
    --mds-color-shade-teal-2: #71C8FE;
    --mds-color-shade-teal-3: #0CA0FE;
    --mds-color-shade-teal-4: #0183D5;
    --mds-color-shade-teal-5: #0165A4;
    --mds-color-shade-teal-6: #014E7F;
    --mds-color-shade-teal-7: #013E65;
    --mds-color-shade-teal-8: #002F4C;
    --mds-color-shade-teal-9: #001F33;
    --mds-color-shade-teal-10: #001019;
    --mds-color-text-body: #565656;
}


/* ======================================================================
 * Utility classes
 * ====================================================================== */

/* ─── Color utilities ─────────────────────────────────────── */

.background-primary-teal { background-color: var(--mds-color-primary-teal, #00857C); }
.background-primary-blue { background-color: var(--mds-color-primary-blue, #0C2340); }
.background-primary-white { background-color: var(--mds-color-primary-white, #FFFFFF); }
.background-secondary-light-teal { background-color: var(--mds-color-secondary-light-teal, #6ECEB2); }
.background-secondary-gray { background-color: var(--mds-color-secondary-gray, #CAC9C8); }
.background-secondary-off-white { background-color: var(--mds-color-secondary-off-white, #F7F7F7); }
.background-tertiary-vista-blue { background-color: var(--mds-color-tertiary-vista-blue, #688CE8); }
.background-tertiary-pastel-blue { background-color: var(--mds-color-tertiary-pastel-blue, #69B8F7); }
.background-tertiary-rich-blue { background-color: var(--mds-color-tertiary-rich-blue, #5450E4); }
.background-button-teal-default { background-color: var(--mds-color-button-teal-default, #00857C); }
.background-button-teal-hover { background-color: var(--mds-color-button-teal-hover, #006A63); }
.background-button-teal-pressed { background-color: var(--mds-color-button-teal-pressed, #00504A); }
.background-button-blue-default { background-color: var(--mds-color-button-blue-default, #0C2340); }
.background-button-blue-hover { background-color: var(--mds-color-button-blue-hover, #3D4F66); }
.background-button-blue-pressed { background-color: var(--mds-color-button-blue-pressed, #0C2340); }
.background-button-vista-blue-default { background-color: var(--mds-color-button-vista-blue-default, #688CE8); }
.background-button-vista-blue-hover { background-color: var(--mds-color-button-vista-blue-hover, #A4BAF1); }
.background-button-vista-blue-pressed { background-color: var(--mds-color-button-vista-blue-pressed, #C3D1F6); }
.background-link-teal-default { background-color: var(--mds-color-link-teal-default, #007E73); }
.background-link-teal-hover { background-color: var(--mds-color-link-teal-hover, #00665D); }
.background-link-teal-active { background-color: var(--mds-color-link-teal-active, #004D46); }
.background-shade-teal-1 { background-color: var(--mds-color-shade-teal-1, #E6F3F2); }
.background-shade-teal-2 { background-color: var(--mds-color-shade-teal-2, #CCE7E5); }
.background-shade-teal-3 { background-color: var(--mds-color-shade-teal-3, #99CECB); }
.background-shade-teal-4 { background-color: var(--mds-color-shade-teal-4, #66B6B0); }
.background-shade-teal-5 { background-color: var(--mds-color-shade-teal-5, #339D96); }
.background-shade-teal-6 { background-color: var(--mds-color-shade-teal-6, #00857C); }
.background-shade-teal-7 { background-color: var(--mds-color-shade-teal-7, #006A63); }
.background-shade-teal-8 { background-color: var(--mds-color-shade-teal-8, #00504A); }
.background-shade-teal-9 { background-color: var(--mds-color-shade-teal-9, #003532); }
.background-shade-teal-10 { background-color: var(--mds-color-shade-teal-10, #001B19); }
.background-text-body { background-color: var(--mds-color-text-body, #545454); }

.color-primary-teal { color: var(--mds-color-primary-teal, #00857C); }
.color-primary-blue { color: var(--mds-color-primary-blue, #0C2340); }
.color-primary-white { color: var(--mds-color-primary-white, #FFFFFF); }
.color-secondary-light-teal { color: var(--mds-color-secondary-light-teal, #6ECEB2); }
.color-secondary-gray { color: var(--mds-color-secondary-gray, #CAC9C8); }
.color-secondary-off-white { color: var(--mds-color-secondary-off-white, #F7F7F7); }
.color-tertiary-vista-blue { color: var(--mds-color-tertiary-vista-blue, #688CE8); }
.color-tertiary-pastel-blue { color: var(--mds-color-tertiary-pastel-blue, #69B8F7); }
.color-tertiary-rich-blue { color: var(--mds-color-tertiary-rich-blue, #5450E4); }
.color-button-teal-default { color: var(--mds-color-button-teal-default, #00857C); }
.color-button-teal-hover { color: var(--mds-color-button-teal-hover, #006A63); }
.color-button-teal-pressed { color: var(--mds-color-button-teal-pressed, #00504A); }
.color-button-blue-default { color: var(--mds-color-button-blue-default, #0C2340); }
.color-button-blue-hover { color: var(--mds-color-button-blue-hover, #3D4F66); }
.color-button-blue-pressed { color: var(--mds-color-button-blue-pressed, #0C2340); }
.color-button-vista-blue-default { color: var(--mds-color-button-vista-blue-default, #688CE8); }
.color-button-vista-blue-hover { color: var(--mds-color-button-vista-blue-hover, #A4BAF1); }
.color-button-vista-blue-pressed { color: var(--mds-color-button-vista-blue-pressed, #C3D1F6); }
.color-link-teal-default { color: var(--mds-color-link-teal-default, #007E73); }
.color-link-teal-hover { color: var(--mds-color-link-teal-hover, #00665D); }
.color-link-teal-active { color: var(--mds-color-link-teal-active, #004D46); }
.color-shade-teal-1 { color: var(--mds-color-shade-teal-1, #E6F3F2); }
.color-shade-teal-2 { color: var(--mds-color-shade-teal-2, #CCE7E5); }
.color-shade-teal-3 { color: var(--mds-color-shade-teal-3, #99CECB); }
.color-shade-teal-4 { color: var(--mds-color-shade-teal-4, #66B6B0); }
.color-shade-teal-5 { color: var(--mds-color-shade-teal-5, #339D96); }
.color-shade-teal-6 { color: var(--mds-color-shade-teal-6, #00857C); }
.color-shade-teal-7 { color: var(--mds-color-shade-teal-7, #006A63); }
.color-shade-teal-8 { color: var(--mds-color-shade-teal-8, #00504A); }
.color-shade-teal-9 { color: var(--mds-color-shade-teal-9, #003532); }
.color-shade-teal-10 { color: var(--mds-color-shade-teal-10, #001B19); }
.color-text-body { color: var(--mds-color-text-body, #545454); }

.border-color-primary-teal { border-color: var(--mds-color-primary-teal, #00857C); }
.border-color-primary-blue { border-color: var(--mds-color-primary-blue, #0C2340); }
.border-color-primary-white { border-color: var(--mds-color-primary-white, #FFFFFF); }
.border-color-secondary-light-teal { border-color: var(--mds-color-secondary-light-teal, #6ECEB2); }
.border-color-secondary-gray { border-color: var(--mds-color-secondary-gray, #CAC9C8); }
.border-color-secondary-off-white { border-color: var(--mds-color-secondary-off-white, #F7F7F7); }
.border-color-tertiary-vista-blue { border-color: var(--mds-color-tertiary-vista-blue, #688CE8); }
.border-color-tertiary-pastel-blue { border-color: var(--mds-color-tertiary-pastel-blue, #69B8F7); }
.border-color-tertiary-rich-blue { border-color: var(--mds-color-tertiary-rich-blue, #5450E4); }
.border-color-button-teal-default { border-color: var(--mds-color-button-teal-default, #00857C); }
.border-color-button-teal-hover { border-color: var(--mds-color-button-teal-hover, #006A63); }
.border-color-button-teal-pressed { border-color: var(--mds-color-button-teal-pressed, #00504A); }
.border-color-button-blue-default { border-color: var(--mds-color-button-blue-default, #0C2340); }
.border-color-button-blue-hover { border-color: var(--mds-color-button-blue-hover, #3D4F66); }
.border-color-button-blue-pressed { border-color: var(--mds-color-button-blue-pressed, #0C2340); }
.border-color-button-vista-blue-default { border-color: var(--mds-color-button-vista-blue-default, #688CE8); }
.border-color-button-vista-blue-hover { border-color: var(--mds-color-button-vista-blue-hover, #A4BAF1); }
.border-color-button-vista-blue-pressed { border-color: var(--mds-color-button-vista-blue-pressed, #C3D1F6); }
.border-color-link-teal-default { border-color: var(--mds-color-link-teal-default, #007E73); }
.border-color-link-teal-hover { border-color: var(--mds-color-link-teal-hover, #00665D); }
.border-color-link-teal-active { border-color: var(--mds-color-link-teal-active, #004D46); }
.border-color-shade-teal-1 { border-color: var(--mds-color-shade-teal-1, #E6F3F2); }
.border-color-shade-teal-2 { border-color: var(--mds-color-shade-teal-2, #CCE7E5); }
.border-color-shade-teal-3 { border-color: var(--mds-color-shade-teal-3, #99CECB); }
.border-color-shade-teal-4 { border-color: var(--mds-color-shade-teal-4, #66B6B0); }
.border-color-shade-teal-5 { border-color: var(--mds-color-shade-teal-5, #339D96); }
.border-color-shade-teal-6 { border-color: var(--mds-color-shade-teal-6, #00857C); }
.border-color-shade-teal-7 { border-color: var(--mds-color-shade-teal-7, #006A63); }
.border-color-shade-teal-8 { border-color: var(--mds-color-shade-teal-8, #00504A); }
.border-color-shade-teal-9 { border-color: var(--mds-color-shade-teal-9, #003532); }
.border-color-shade-teal-10 { border-color: var(--mds-color-shade-teal-10, #001B19); }
.border-color-text-body { border-color: var(--mds-color-text-body, #545454); }

/* ─── Spacing utilities ───────────────────────────────────── */

.padding-10 { padding: var(--mds-spacing-10); }
.padding-x-10 { padding-inline: var(--mds-spacing-10); }
.padding-y-10 { padding-block: var(--mds-spacing-10); }
.padding-top-10 { padding-top: var(--mds-spacing-10); }
.padding-right-10 { padding-right: var(--mds-spacing-10); }
.padding-bottom-10 { padding-bottom: var(--mds-spacing-10); }
.padding-left-10 { padding-left: var(--mds-spacing-10); }
.margin-10 { margin: var(--mds-spacing-10); }
.margin-x-10 { margin-inline: var(--mds-spacing-10); }
.margin-y-10 { margin-block: var(--mds-spacing-10); }
.margin-top-10 { margin-top: var(--mds-spacing-10); }
.margin-right-10 { margin-right: var(--mds-spacing-10); }
.margin-bottom-10 { margin-bottom: var(--mds-spacing-10); }
.margin-left-10 { margin-left: var(--mds-spacing-10); }
.gap-10 { gap: var(--mds-spacing-10); }
.padding-9 { padding: var(--mds-spacing-9); }
.padding-x-9 { padding-inline: var(--mds-spacing-9); }
.padding-y-9 { padding-block: var(--mds-spacing-9); }
.padding-top-9 { padding-top: var(--mds-spacing-9); }
.padding-right-9 { padding-right: var(--mds-spacing-9); }
.padding-bottom-9 { padding-bottom: var(--mds-spacing-9); }
.padding-left-9 { padding-left: var(--mds-spacing-9); }
.margin-9 { margin: var(--mds-spacing-9); }
.margin-x-9 { margin-inline: var(--mds-spacing-9); }
.margin-y-9 { margin-block: var(--mds-spacing-9); }
.margin-top-9 { margin-top: var(--mds-spacing-9); }
.margin-right-9 { margin-right: var(--mds-spacing-9); }
.margin-bottom-9 { margin-bottom: var(--mds-spacing-9); }
.margin-left-9 { margin-left: var(--mds-spacing-9); }
.gap-9 { gap: var(--mds-spacing-9); }
.padding-9-body-component { padding: var(--mds-spacing-9-body-component); }
.padding-x-9-body-component { padding-inline: var(--mds-spacing-9-body-component); }
.padding-y-9-body-component { padding-block: var(--mds-spacing-9-body-component); }
.padding-top-9-body-component { padding-top: var(--mds-spacing-9-body-component); }
.padding-right-9-body-component { padding-right: var(--mds-spacing-9-body-component); }
.padding-bottom-9-body-component { padding-bottom: var(--mds-spacing-9-body-component); }
.padding-left-9-body-component { padding-left: var(--mds-spacing-9-body-component); }
.margin-9-body-component { margin: var(--mds-spacing-9-body-component); }
.margin-x-9-body-component { margin-inline: var(--mds-spacing-9-body-component); }
.margin-y-9-body-component { margin-block: var(--mds-spacing-9-body-component); }
.margin-top-9-body-component { margin-top: var(--mds-spacing-9-body-component); }
.margin-right-9-body-component { margin-right: var(--mds-spacing-9-body-component); }
.margin-bottom-9-body-component { margin-bottom: var(--mds-spacing-9-body-component); }
.margin-left-9-body-component { margin-left: var(--mds-spacing-9-body-component); }
.gap-9-body-component { gap: var(--mds-spacing-9-body-component); }
.padding-8 { padding: var(--mds-spacing-8); }
.padding-x-8 { padding-inline: var(--mds-spacing-8); }
.padding-y-8 { padding-block: var(--mds-spacing-8); }
.padding-top-8 { padding-top: var(--mds-spacing-8); }
.padding-right-8 { padding-right: var(--mds-spacing-8); }
.padding-bottom-8 { padding-bottom: var(--mds-spacing-8); }
.padding-left-8 { padding-left: var(--mds-spacing-8); }
.margin-8 { margin: var(--mds-spacing-8); }
.margin-x-8 { margin-inline: var(--mds-spacing-8); }
.margin-y-8 { margin-block: var(--mds-spacing-8); }
.margin-top-8 { margin-top: var(--mds-spacing-8); }
.margin-right-8 { margin-right: var(--mds-spacing-8); }
.margin-bottom-8 { margin-bottom: var(--mds-spacing-8); }
.margin-left-8 { margin-left: var(--mds-spacing-8); }
.gap-8 { gap: var(--mds-spacing-8); }
.padding-7 { padding: var(--mds-spacing-7); }
.padding-x-7 { padding-inline: var(--mds-spacing-7); }
.padding-y-7 { padding-block: var(--mds-spacing-7); }
.padding-top-7 { padding-top: var(--mds-spacing-7); }
.padding-right-7 { padding-right: var(--mds-spacing-7); }
.padding-bottom-7 { padding-bottom: var(--mds-spacing-7); }
.padding-left-7 { padding-left: var(--mds-spacing-7); }
.margin-7 { margin: var(--mds-spacing-7); }
.margin-x-7 { margin-inline: var(--mds-spacing-7); }
.margin-y-7 { margin-block: var(--mds-spacing-7); }
.margin-top-7 { margin-top: var(--mds-spacing-7); }
.margin-right-7 { margin-right: var(--mds-spacing-7); }
.margin-bottom-7 { margin-bottom: var(--mds-spacing-7); }
.margin-left-7 { margin-left: var(--mds-spacing-7); }
.gap-7 { gap: var(--mds-spacing-7); }
.padding-6 { padding: var(--mds-spacing-6); }
.padding-x-6 { padding-inline: var(--mds-spacing-6); }
.padding-y-6 { padding-block: var(--mds-spacing-6); }
.padding-top-6 { padding-top: var(--mds-spacing-6); }
.padding-right-6 { padding-right: var(--mds-spacing-6); }
.padding-bottom-6 { padding-bottom: var(--mds-spacing-6); }
.padding-left-6 { padding-left: var(--mds-spacing-6); }
.margin-6 { margin: var(--mds-spacing-6); }
.margin-x-6 { margin-inline: var(--mds-spacing-6); }
.margin-y-6 { margin-block: var(--mds-spacing-6); }
.margin-top-6 { margin-top: var(--mds-spacing-6); }
.margin-right-6 { margin-right: var(--mds-spacing-6); }
.margin-bottom-6 { margin-bottom: var(--mds-spacing-6); }
.margin-left-6 { margin-left: var(--mds-spacing-6); }
.gap-6 { gap: var(--mds-spacing-6); }
.padding-5 { padding: var(--mds-spacing-5); }
.padding-x-5 { padding-inline: var(--mds-spacing-5); }
.padding-y-5 { padding-block: var(--mds-spacing-5); }
.padding-top-5 { padding-top: var(--mds-spacing-5); }
.padding-right-5 { padding-right: var(--mds-spacing-5); }
.padding-bottom-5 { padding-bottom: var(--mds-spacing-5); }
.padding-left-5 { padding-left: var(--mds-spacing-5); }
.margin-5 { margin: var(--mds-spacing-5); }
.margin-x-5 { margin-inline: var(--mds-spacing-5); }
.margin-y-5 { margin-block: var(--mds-spacing-5); }
.margin-top-5 { margin-top: var(--mds-spacing-5); }
.margin-right-5 { margin-right: var(--mds-spacing-5); }
.margin-bottom-5 { margin-bottom: var(--mds-spacing-5); }
.margin-left-5 { margin-left: var(--mds-spacing-5); }
.gap-5 { gap: var(--mds-spacing-5); }
.padding-4 { padding: var(--mds-spacing-4); }
.padding-x-4 { padding-inline: var(--mds-spacing-4); }
.padding-y-4 { padding-block: var(--mds-spacing-4); }
.padding-top-4 { padding-top: var(--mds-spacing-4); }
.padding-right-4 { padding-right: var(--mds-spacing-4); }
.padding-bottom-4 { padding-bottom: var(--mds-spacing-4); }
.padding-left-4 { padding-left: var(--mds-spacing-4); }
.margin-4 { margin: var(--mds-spacing-4); }
.margin-x-4 { margin-inline: var(--mds-spacing-4); }
.margin-y-4 { margin-block: var(--mds-spacing-4); }
.margin-top-4 { margin-top: var(--mds-spacing-4); }
.margin-right-4 { margin-right: var(--mds-spacing-4); }
.margin-bottom-4 { margin-bottom: var(--mds-spacing-4); }
.margin-left-4 { margin-left: var(--mds-spacing-4); }
.gap-4 { gap: var(--mds-spacing-4); }
.padding-3 { padding: var(--mds-spacing-3); }
.padding-x-3 { padding-inline: var(--mds-spacing-3); }
.padding-y-3 { padding-block: var(--mds-spacing-3); }
.padding-top-3 { padding-top: var(--mds-spacing-3); }
.padding-right-3 { padding-right: var(--mds-spacing-3); }
.padding-bottom-3 { padding-bottom: var(--mds-spacing-3); }
.padding-left-3 { padding-left: var(--mds-spacing-3); }
.margin-3 { margin: var(--mds-spacing-3); }
.margin-x-3 { margin-inline: var(--mds-spacing-3); }
.margin-y-3 { margin-block: var(--mds-spacing-3); }
.margin-top-3 { margin-top: var(--mds-spacing-3); }
.margin-right-3 { margin-right: var(--mds-spacing-3); }
.margin-bottom-3 { margin-bottom: var(--mds-spacing-3); }
.margin-left-3 { margin-left: var(--mds-spacing-3); }
.gap-3 { gap: var(--mds-spacing-3); }
.padding-2 { padding: var(--mds-spacing-2); }
.padding-x-2 { padding-inline: var(--mds-spacing-2); }
.padding-y-2 { padding-block: var(--mds-spacing-2); }
.padding-top-2 { padding-top: var(--mds-spacing-2); }
.padding-right-2 { padding-right: var(--mds-spacing-2); }
.padding-bottom-2 { padding-bottom: var(--mds-spacing-2); }
.padding-left-2 { padding-left: var(--mds-spacing-2); }
.margin-2 { margin: var(--mds-spacing-2); }
.margin-x-2 { margin-inline: var(--mds-spacing-2); }
.margin-y-2 { margin-block: var(--mds-spacing-2); }
.margin-top-2 { margin-top: var(--mds-spacing-2); }
.margin-right-2 { margin-right: var(--mds-spacing-2); }
.margin-bottom-2 { margin-bottom: var(--mds-spacing-2); }
.margin-left-2 { margin-left: var(--mds-spacing-2); }
.gap-2 { gap: var(--mds-spacing-2); }
.padding-1 { padding: var(--mds-spacing-1); }
.padding-x-1 { padding-inline: var(--mds-spacing-1); }
.padding-y-1 { padding-block: var(--mds-spacing-1); }
.padding-top-1 { padding-top: var(--mds-spacing-1); }
.padding-right-1 { padding-right: var(--mds-spacing-1); }
.padding-bottom-1 { padding-bottom: var(--mds-spacing-1); }
.padding-left-1 { padding-left: var(--mds-spacing-1); }
.margin-1 { margin: var(--mds-spacing-1); }
.margin-x-1 { margin-inline: var(--mds-spacing-1); }
.margin-y-1 { margin-block: var(--mds-spacing-1); }
.margin-top-1 { margin-top: var(--mds-spacing-1); }
.margin-right-1 { margin-right: var(--mds-spacing-1); }
.margin-bottom-1 { margin-bottom: var(--mds-spacing-1); }
.margin-left-1 { margin-left: var(--mds-spacing-1); }
.gap-1 { gap: var(--mds-spacing-1); }
.padding-minus-4 { padding: var(--mds-spacing-minus-4); }
.padding-x-minus-4 { padding-inline: var(--mds-spacing-minus-4); }
.padding-y-minus-4 { padding-block: var(--mds-spacing-minus-4); }
.padding-top-minus-4 { padding-top: var(--mds-spacing-minus-4); }
.padding-right-minus-4 { padding-right: var(--mds-spacing-minus-4); }
.padding-bottom-minus-4 { padding-bottom: var(--mds-spacing-minus-4); }
.padding-left-minus-4 { padding-left: var(--mds-spacing-minus-4); }
.margin-minus-4 { margin: var(--mds-spacing-minus-4); }
.margin-x-minus-4 { margin-inline: var(--mds-spacing-minus-4); }
.margin-y-minus-4 { margin-block: var(--mds-spacing-minus-4); }
.margin-top-minus-4 { margin-top: var(--mds-spacing-minus-4); }
.margin-right-minus-4 { margin-right: var(--mds-spacing-minus-4); }
.margin-bottom-minus-4 { margin-bottom: var(--mds-spacing-minus-4); }
.margin-left-minus-4 { margin-left: var(--mds-spacing-minus-4); }
.gap-minus-4 { gap: var(--mds-spacing-minus-4); }
.padding-minus-6 { padding: var(--mds-spacing-minus-6); }
.padding-x-minus-6 { padding-inline: var(--mds-spacing-minus-6); }
.padding-y-minus-6 { padding-block: var(--mds-spacing-minus-6); }
.padding-top-minus-6 { padding-top: var(--mds-spacing-minus-6); }
.padding-right-minus-6 { padding-right: var(--mds-spacing-minus-6); }
.padding-bottom-minus-6 { padding-bottom: var(--mds-spacing-minus-6); }
.padding-left-minus-6 { padding-left: var(--mds-spacing-minus-6); }
.margin-minus-6 { margin: var(--mds-spacing-minus-6); }
.margin-x-minus-6 { margin-inline: var(--mds-spacing-minus-6); }
.margin-y-minus-6 { margin-block: var(--mds-spacing-minus-6); }
.margin-top-minus-6 { margin-top: var(--mds-spacing-minus-6); }
.margin-right-minus-6 { margin-right: var(--mds-spacing-minus-6); }
.margin-bottom-minus-6 { margin-bottom: var(--mds-spacing-minus-6); }
.margin-left-minus-6 { margin-left: var(--mds-spacing-minus-6); }
.gap-minus-6 { gap: var(--mds-spacing-minus-6); }
.padding-minus-7 { padding: var(--mds-spacing-minus-7); }
.padding-x-minus-7 { padding-inline: var(--mds-spacing-minus-7); }
.padding-y-minus-7 { padding-block: var(--mds-spacing-minus-7); }
.padding-top-minus-7 { padding-top: var(--mds-spacing-minus-7); }
.padding-right-minus-7 { padding-right: var(--mds-spacing-minus-7); }
.padding-bottom-minus-7 { padding-bottom: var(--mds-spacing-minus-7); }
.padding-left-minus-7 { padding-left: var(--mds-spacing-minus-7); }
.margin-minus-7 { margin: var(--mds-spacing-minus-7); }
.margin-x-minus-7 { margin-inline: var(--mds-spacing-minus-7); }
.margin-y-minus-7 { margin-block: var(--mds-spacing-minus-7); }
.margin-top-minus-7 { margin-top: var(--mds-spacing-minus-7); }
.margin-right-minus-7 { margin-right: var(--mds-spacing-minus-7); }
.margin-bottom-minus-7 { margin-bottom: var(--mds-spacing-minus-7); }
.margin-left-minus-7 { margin-left: var(--mds-spacing-minus-7); }
.gap-minus-7 { gap: var(--mds-spacing-minus-7); }
.padding-minus-8 { padding: var(--mds-spacing-minus-8); }
.padding-x-minus-8 { padding-inline: var(--mds-spacing-minus-8); }
.padding-y-minus-8 { padding-block: var(--mds-spacing-minus-8); }
.padding-top-minus-8 { padding-top: var(--mds-spacing-minus-8); }
.padding-right-minus-8 { padding-right: var(--mds-spacing-minus-8); }
.padding-bottom-minus-8 { padding-bottom: var(--mds-spacing-minus-8); }
.padding-left-minus-8 { padding-left: var(--mds-spacing-minus-8); }
.margin-minus-8 { margin: var(--mds-spacing-minus-8); }
.margin-x-minus-8 { margin-inline: var(--mds-spacing-minus-8); }
.margin-y-minus-8 { margin-block: var(--mds-spacing-minus-8); }
.margin-top-minus-8 { margin-top: var(--mds-spacing-minus-8); }
.margin-right-minus-8 { margin-right: var(--mds-spacing-minus-8); }
.margin-bottom-minus-8 { margin-bottom: var(--mds-spacing-minus-8); }
.margin-left-minus-8 { margin-left: var(--mds-spacing-minus-8); }
.gap-minus-8 { gap: var(--mds-spacing-minus-8); }
.padding-minus-9 { padding: var(--mds-spacing-minus-9); }
.padding-x-minus-9 { padding-inline: var(--mds-spacing-minus-9); }
.padding-y-minus-9 { padding-block: var(--mds-spacing-minus-9); }
.padding-top-minus-9 { padding-top: var(--mds-spacing-minus-9); }
.padding-right-minus-9 { padding-right: var(--mds-spacing-minus-9); }
.padding-bottom-minus-9 { padding-bottom: var(--mds-spacing-minus-9); }
.padding-left-minus-9 { padding-left: var(--mds-spacing-minus-9); }
.margin-minus-9 { margin: var(--mds-spacing-minus-9); }
.margin-x-minus-9 { margin-inline: var(--mds-spacing-minus-9); }
.margin-y-minus-9 { margin-block: var(--mds-spacing-minus-9); }
.margin-top-minus-9 { margin-top: var(--mds-spacing-minus-9); }
.margin-right-minus-9 { margin-right: var(--mds-spacing-minus-9); }
.margin-bottom-minus-9 { margin-bottom: var(--mds-spacing-minus-9); }
.margin-left-minus-9 { margin-left: var(--mds-spacing-minus-9); }
.gap-minus-9 { gap: var(--mds-spacing-minus-9); }

/* ─── Typography utilities ────────────────────────────────── */

/* Font size */
.font-size-h1 { font-size: var(--mds-text-h1); }
.font-size-h2 { font-size: var(--mds-text-h2); }
.font-size-h3 { font-size: var(--mds-text-h3); }
.font-size-h4 { font-size: var(--mds-text-h4); }
.font-size-h5 { font-size: var(--mds-text-h5); }
.font-size-xl { font-size: var(--mds-text-xl); }
.font-size-l { font-size: var(--mds-text-l); }
.font-size-base { font-size: var(--mds-text-base); }
.font-size-sm { font-size: var(--mds-text-sm); }

/* Line height */
.line-height-h1 { line-height: var(--mds-leading-h1); }
.line-height-h2 { line-height: var(--mds-leading-h2); }
.line-height-h3 { line-height: var(--mds-leading-h3); }
.line-height-h4 { line-height: var(--mds-leading-h4); }
.line-height-h5 { line-height: var(--mds-leading-h5); }
.line-height-xl { line-height: var(--mds-leading-xl); }
.line-height-l { line-height: var(--mds-leading-l); }
.line-height-base { line-height: var(--mds-leading-base); }
.line-height-sm { line-height: var(--mds-leading-sm); }

/* Typography (font-size + matched line-height) */
.typography-h1 { font-size: var(--mds-text-h1); line-height: var(--mds-leading-h1); }
.typography-h2 { font-size: var(--mds-text-h2); line-height: var(--mds-leading-h2); }
.typography-h3 { font-size: var(--mds-text-h3); line-height: var(--mds-leading-h3); }
.typography-h4 { font-size: var(--mds-text-h4); line-height: var(--mds-leading-h4); }
.typography-h5 { font-size: var(--mds-text-h5); line-height: var(--mds-leading-h5); }
.typography-xl { font-size: var(--mds-text-xl); line-height: var(--mds-leading-xl); }
.typography-l { font-size: var(--mds-text-l); line-height: var(--mds-leading-l); }
.typography-base { font-size: var(--mds-text-base); line-height: var(--mds-leading-base); }
.typography-sm { font-size: var(--mds-text-sm); line-height: var(--mds-leading-sm); }

/* Font family */
.font-family-heading { font-family: var(--mds-font-heading); }
.font-family-body { font-family: var(--mds-font-body); }

/* ─── Border radius utilities ─────────────────────────────── */

.rounded-none { border-radius: var(--mds-radius-none); }
.rounded-2xs { border-radius: var(--mds-radius-2xs); }
.rounded-xs { border-radius: var(--mds-radius-xs); }
.rounded-sm { border-radius: var(--mds-radius-sm); }
.rounded-md { border-radius: var(--mds-radius-md); }
.rounded-lg { border-radius: var(--mds-radius-lg); }
.rounded-xl { border-radius: var(--mds-radius-xl); }
.rounded-2xl { border-radius: var(--mds-radius-2xl); }
.rounded-full { border-radius: var(--mds-radius-full); }

/* ─── Font weight utilities ───────────────────────────────── */

.font-weight-regular { font-weight: var(--mds-font-weight-regular); }
.font-weight-light { font-weight: var(--mds-font-weight-light); }
.font-weight-bold { font-weight: var(--mds-font-weight-bold); }

/* ─── Letter spacing utilities ────────────────────────────── */

.letter-spacing-tight { letter-spacing: var(--mds-letter-spacing-tight); }
.letter-spacing-normal { letter-spacing: var(--mds-letter-spacing-normal); }
.letter-spacing-wide { letter-spacing: var(--mds-letter-spacing-wide); }
.letter-spacing-wider { letter-spacing: var(--mds-letter-spacing-wider); }
.letter-spacing-widest { letter-spacing: var(--mds-letter-spacing-widest); }


/* ─── Element base reset ──────────────────────────────────────── */

/* Headings: drop UA top/bottom margins; user opts in via utility classes. */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/* Paragraphs likewise — UA margin: 1em 0 conflicts with explicit spacing. */
p {
    margin: 0;
}

/* List defaults reset (use .padding-left-* if you want indentation). */
ul, ol {
    margin: 0;
    padding: 0;
}

/* Figure: drop UA inline margins. */
figure {
    margin: 0;
}

/* ─── Background size ─────────────────────────────────────────── */

.background-size-auto    { background-size: auto; }
.background-size-cover   { background-size: cover; }
.background-size-contain { background-size: contain; }

/* ─── Background position ─────────────────────────────────────── */

.background-position-center       { background-position: center; }
.background-position-top          { background-position: top; }
.background-position-bottom       { background-position: bottom; }
.background-position-left         { background-position: left; }
.background-position-right        { background-position: right; }
.background-position-top-left     { background-position: top left; }
.background-position-top-right    { background-position: top right; }
.background-position-bottom-left  { background-position: bottom left; }
.background-position-bottom-right { background-position: bottom right; }

/* ─── Background repeat ───────────────────────────────────────── */

.background-repeat           { background-repeat: repeat; }
.background-repeat-no-repeat { background-repeat: no-repeat; }
.background-repeat-x         { background-repeat: repeat-x; }
.background-repeat-y         { background-repeat: repeat-y; }
.background-repeat-round     { background-repeat: round; }
.background-repeat-space     { background-repeat: space; }

/* ─── Background attachment ───────────────────────────────────── */

.background-attachment-fixed  { background-attachment: fixed; }
.background-attachment-local  { background-attachment: local; }
.background-attachment-scroll { background-attachment: scroll; }

/* ─── Background origin ───────────────────────────────────────── */

.background-origin-border  { background-origin: border-box; }
.background-origin-padding { background-origin: padding-box; }
.background-origin-content { background-origin: content-box; }

/* ─── Background clip ─────────────────────────────────────────── */

.background-clip-border  { background-clip: border-box; }
.background-clip-padding { background-clip: padding-box; }
.background-clip-content { background-clip: content-box; }
.background-clip-text    { background-clip: text; -webkit-background-clip: text; }

/* ─── Display ─────────────────────────────────────────────────── */

.block         { display: block; }
.inline-block  { display: inline-block; }
.inline        { display: inline; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.inline-grid   { display: inline-grid; }
.hidden        { display: none; }

/* ─── Flexbox ─────────────────────────────────────────────────── */

.flex-row         { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column      { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

.flex-wrap         { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap       { flex-wrap: nowrap; }

.flex-1     { flex: 1 1 0%; }
.flex-auto  { flex: 1 1 auto; }
.flex-none  { flex: none; }
.flex-grow      { flex-grow: 1; }
.flex-grow-0    { flex-grow: 0; }
.flex-shrink    { flex-shrink: 1; }
.flex-shrink-0  { flex-shrink: 0; }

/* ─── Alignment (flex + grid) ─────────────────────────────────── */

.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }

.justify-start    { justify-content: flex-start; }
.justify-end      { justify-content: flex-end; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.justify-evenly   { justify-content: space-evenly; }

.content-start    { align-content: flex-start; }
.content-end      { align-content: flex-end; }
.content-center   { align-content: center; }
.content-between  { align-content: space-between; }
.content-around   { align-content: space-around; }
.content-stretch  { align-content: stretch; }

.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-stretch  { align-self: stretch; }
.self-auto     { align-self: auto; }

.justify-self-start   { justify-self: start; }
.justify-self-end     { justify-self: end; }
.justify-self-center  { justify-self: center; }
.justify-self-stretch { justify-self: stretch; }

.text-align-left   { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right  { text-align: right; }

/* ─── Grid ────────────────────────────────────────────────────── */

.grid-columns-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-columns-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-columns-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-columns-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-columns-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-columns-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-columns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Fluid grid: auto-fits columns ~12rem min, scales by viewport. */
.grid-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(clamp(12rem, 25vw, 20rem), 1fr));
}

.column-span-1    { grid-column: span 1 / span 1; }
.column-span-2    { grid-column: span 2 / span 2; }
.column-span-3    { grid-column: span 3 / span 3; }
.column-span-4    { grid-column: span 4 / span 4; }
.column-span-6    { grid-column: span 6 / span 6; }
.column-span-12   { grid-column: span 12 / span 12; }
.column-span-full { grid-column: 1 / -1; }

.row-span-1    { grid-row: span 1 / span 1; }
.row-span-2    { grid-row: span 2 / span 2; }
.row-span-3    { grid-row: span 3 / span 3; }
.row-span-full { grid-row: 1 / -1; }

/* ─── Sizing (fluid clamp(), no breakpoints) ─────────────────── */

.width-full   { width: 100%; }
.width-auto   { width: auto; }
.width-fit    { width: fit-content; }
.width-screen { width: 100vw; }

.width-xs  { width: clamp(12rem, 20vw, 16rem); }
.width-sm  { width: clamp(16rem, 30vw, 24rem); }
.width-md  { width: clamp(20rem, 40vw, 32rem); }
.width-lg  { width: clamp(24rem, 50vw, 40rem); }
.width-xl  { width: clamp(28rem, 60vw, 48rem); }
.width-2xl { width: clamp(32rem, 70vw, 56rem); }
.width-3xl { width: clamp(36rem, 80vw, 64rem); }

.height-full   { height: 100%; }
.height-auto   { height: auto; }
.height-screen { height: 100vh; }
.height-dvh    { height: 100dvh; }
.height-fit    { height: fit-content; }

.height-xs  { height: clamp(6rem,  10vh, 10rem); }
.height-sm  { height: clamp(10rem, 20vh, 16rem); }
.height-md  { height: clamp(16rem, 35vh, 28rem); }
.height-lg  { height: clamp(20rem, 50vh, 40rem); }
.height-xl  { height: clamp(28rem, 70vh, 56rem); }
.height-hero { height: clamp(20rem, 60vh, 44rem); }

.min-width-0    { min-width: 0; }
.min-width-full { min-width: 100%; }
.min-height-0    { min-height: 0; }
.min-height-full { min-height: 100%; }
.min-height-screen { min-height: 100vh; }
.min-height-dvh    { min-height: 100dvh; }

.max-width-none  { max-width: none; }
.max-width-full  { max-width: 100%; }
.max-width-prose { max-width: 65ch; }
.max-width-sm  { max-width: clamp(20rem, 50vw, 30rem); }
.max-width-md  { max-width: clamp(24rem, 60vw, 40rem); }
.max-width-lg  { max-width: clamp(28rem, 70vw, 48rem); }
.max-width-xl  { max-width: clamp(32rem, 80vw, 56rem); }
.max-width-2xl { max-width: clamp(36rem, 90vw, 72rem); }

/* Container — page-level constraint, fluid padding. */
.container {
    width: 100%;
    max-width: var(--mds-container-2xl);
    margin-inline: auto;
    padding-inline: var(--mds-grid-margin);
}

/* ─── Position ────────────────────────────────────────────────── */

.position-static   { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed    { position: fixed; }
.position-sticky   { position: sticky; }

.inset-0   { inset: 0; }
.inset-auto { inset: auto; }
.top-0     { top: 0; }
.right-0   { right: 0; }
.bottom-0  { bottom: 0; }
.left-0    { left: 0; }

.z-0   { z-index: 0; }
.z-10  { z-index: 10; }
.z-20  { z-index: 20; }
.z-30  { z-index: 30; }
.z-40  { z-index: 40; }
.z-50  { z-index: 50; }
.z-auto { z-index: auto; }

/* ─── Overflow ────────────────────────────────────────────────── */

.overflow-auto    { overflow: auto; }
.overflow-hidden  { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll  { overflow: scroll; }
.overflow-x-auto    { overflow-x: auto; }
.overflow-x-hidden  { overflow-x: hidden; }
.overflow-y-auto    { overflow-y: auto; }
.overflow-y-hidden  { overflow-y: hidden; }

/* ─── Aspect ratio ────────────────────────────────────────────── */

.aspect-auto     { aspect-ratio: auto; }
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-video    { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-wide     { aspect-ratio: 21 / 9; }

/* ─── Object fit / position ───────────────────────────────────── */

.object-contain   { object-fit: contain; }
.object-cover     { object-fit: cover; }
.object-fill      { object-fit: fill; }
.object-none      { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

.object-center { object-position: center; }
.object-top    { object-position: top; }
.object-bottom { object-position: bottom; }
.object-left   { object-position: left; }
.object-right  { object-position: right; }

/* ─── Misc ────────────────────────────────────────────────────── */

.margin-x-auto { margin-inline: auto; }
.margin-y-auto { margin-block: auto; }

.cursor-pointer     { cursor: pointer; }
.cursor-default     { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.user-select-none    { user-select: none; }
.user-select-text    { user-select: text; }