/* ============================================================================
   MANKIEWICZ — Webfonts
   Body / UI face: Lab Grotesque (self-hosted, user-supplied: Light/Regular/Bold/Black)
   Display / Headlines: Absolut Pro Reduced (proprietary, UNAVAILABLE) —
     substituted with Manrope from Google Fonts. FLAGGED — see readme.md.
   ============================================================================ */

/* Display-face substitute (Absolut Pro Reduced ≈ Manrope) + body fallback. */
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c8707d1a-23a1-4eeb-be0a-13aa884c1a3d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ebd458db-7110-4688-a6d1-06f1ca10889d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("928a4a65-8359-47bc-b048-1fbb9cd32a42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d67d6abc-6817-49a0-a37e-0a57946bb37d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("c8707d1a-23a1-4eeb-be0a-13aa884c1a3d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ebd458db-7110-4688-a6d1-06f1ca10889d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("928a4a65-8359-47bc-b048-1fbb9cd32a42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("d67d6abc-6817-49a0-a37e-0a57946bb37d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c8707d1a-23a1-4eeb-be0a-13aa884c1a3d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ebd458db-7110-4688-a6d1-06f1ca10889d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("928a4a65-8359-47bc-b048-1fbb9cd32a42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d67d6abc-6817-49a0-a37e-0a57946bb37d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c8707d1a-23a1-4eeb-be0a-13aa884c1a3d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("ebd458db-7110-4688-a6d1-06f1ca10889d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("928a4a65-8359-47bc-b048-1fbb9cd32a42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d67d6abc-6817-49a0-a37e-0a57946bb37d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("a4b367e6-17fa-445e-a7a4-9e4c09137c76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("6eb03e6c-3cf3-43e5-8c22-f698f80001a2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("2cc2be00-93ed-4972-8ea6-824fc25b853a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("65d916fb-e7b9-4742-99e4-a8af992b1019.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ae0e1455-c6b2-4cd6-a91f-7a53f1e9d636.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("58ef4e08-7812-48be-a8d2-05e8d2dfe869.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("a4b367e6-17fa-445e-a7a4-9e4c09137c76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("6eb03e6c-3cf3-43e5-8c22-f698f80001a2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("2cc2be00-93ed-4972-8ea6-824fc25b853a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("65d916fb-e7b9-4742-99e4-a8af992b1019.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ae0e1455-c6b2-4cd6-a91f-7a53f1e9d636.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("58ef4e08-7812-48be-a8d2-05e8d2dfe869.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("a4b367e6-17fa-445e-a7a4-9e4c09137c76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("6eb03e6c-3cf3-43e5-8c22-f698f80001a2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("2cc2be00-93ed-4972-8ea6-824fc25b853a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("65d916fb-e7b9-4742-99e4-a8af992b1019.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("ae0e1455-c6b2-4cd6-a91f-7a53f1e9d636.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("58ef4e08-7812-48be-a8d2-05e8d2dfe869.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("a4b367e6-17fa-445e-a7a4-9e4c09137c76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("6eb03e6c-3cf3-43e5-8c22-f698f80001a2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2cc2be00-93ed-4972-8ea6-824fc25b853a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("65d916fb-e7b9-4742-99e4-a8af992b1019.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("ae0e1455-c6b2-4cd6-a91f-7a53f1e9d636.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("58ef4e08-7812-48be-a8d2-05e8d2dfe869.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: 'Lab Grotesque';
  src: url("32fd5f94-5166-47f7-9106-98c459f45f26.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lab Grotesque';
  src: url("a23a4ccf-fc3d-4603-a229-5b59b2029db3.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lab Grotesque';
  src: url("1efefd36-6445-4b16-b1f1-93e7bf7f3b0e.woff") format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lab Grotesque';
  src: url("c64e1b25-795c-4119-8ffa-9aac99a6f5bd.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* ============================================================================
   MANKIEWICZ — Color tokens
   Source of truth: compiled main-mankiewicz.css + Bootstrap 5.3 brand override.
   The brand is carried by ONE deep blue (#002595) over cool grays + white.
   Color is restrained: blue + gray + white is the everyday palette; functional
   accents (orange/magenta/green) appear sparingly.
   ============================================================================ */

:root {
  /* ---- Brand blue ramp -------------------------------------------------- */
  --mk-blue:          #002595;   /* signature deep Mankiewicz blue (primary)  */
  --mk-blue-dark:     #001862;   /* hover / pressed state of primary blue     */
  --mk-blue-mid:      #0C35AA;   /* secondary blue (slider arrows, radio fill)*/
  --mk-blue-bright:   #178FE5;   /* inset highlight / bright link             */
  --mk-blue-sky:      #33AAFF;   /* light interactive blue                    */
  --mk-blue-tint:     #D5E9F7;   /* pale blue surface tint                    */
  --mk-blue-subtle:   #CCD9FF;   /* subtle primary background / row hover     */
  --mk-link-text:     #0000EE;   /* RTE body link color (classic web link)    */

  /* ---- Neutrals (cool) -------------------------------------------------- */
  --mk-ink:           #272727;   /* body text                                 */
  --mk-ink-soft:      #292B2D;   /* near-black UI text (footer, headings)      */
  --mk-gray:          #6C757D;   /* muted / secondary text                    */
  --mk-gray-line:     #777779;   /* form underlines, strong dividers          */
  --mk-divider:       #E4E4E8;   /* hairline borders / dividers (2px)         */
  --mk-surface:       #F2F2F5;   /* page background (cool light gray)         */
  --mk-surface-2:     #F5F5F5;   /* alt light surface                        */
  --mk-zebra:         #F2F2F2;   /* data-table odd-row stripe                */
  --mk-row-hover:     #CCD9FF;   /* data-table row hover                     */
  --mk-white:         #FFFFFF;
  --mk-black:         #000000;
  --mk-night:         #070E30;   /* tile / brand dark navy                   */

  /* ---- Functional / accent --------------------------------------------- */
  --mk-orange:        #FF8000;   /* warning / highlight accent (website)      */
  --mk-magenta:       #FF005F;   /* error (form errors)                      */
  --mk-green:         #6CB31D;   /* success (website)                        */
  --mk-teal:          #42E1B8;   /* success message background (website)      */
  --mk-radio-fill:    #0C35AA;   /* checkbox / radio checked fill            */
  /* Bootstrap 5.3 semantic set (application UI palette) */
  --mk-secondary:     #69C0AC;   /* mint secondary                          */
  --mk-success:       #198754;
  --mk-danger:        #DC3545;
  --mk-warning:       #FFC107;
  --mk-info:          #0DCAF0;

  /* ---- Semantic aliases ------------------------------------------------- */
  --bg:               var(--mk-white);
  --bg-muted:         var(--mk-surface);
  --surface-card:     var(--mk-white);
  --fg1:              var(--mk-ink);      /* primary text                    */
  --fg2:              var(--mk-gray);     /* secondary text                  */
  --fg-brand:         var(--mk-blue);     /* brand-colored text / links      */
  --text-body:        var(--mk-ink);
  --text-muted:       var(--mk-gray);
  --link:             var(--mk-blue);
  --link-hover:       var(--mk-blue-dark);
  --border:           var(--mk-divider);
  --border-strong:    var(--mk-gray-line);
  --success:          var(--mk-green);
  --error:            var(--mk-magenta);
  --warning:          var(--mk-orange);
  --info:             var(--mk-blue);
}


/* ============================================================================
   MANKIEWICZ — Typography tokens + element helpers
   Two-typeface system:
     • Body / UI       — "Lab Grotesque"       (self-hosted)
     • Display / Heads — "Absolut Pro Reduced"  (proprietary; substitute Manrope)
   16px base; site uses rem. Headlines bold, line-height 1.2, scale up across
   breakpoints. All-caps reserved for small overline / tab labels.
   ============================================================================ */

:root {
  /* ---- Families --------------------------------------------------------- */
  --font-body: "Lab Grotesque", "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", "Absolut Pro Reduced", "Lab Grotesque", "Hanken Grotesk", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Scale (desktop ≥1240px peak; see fluid clamps in helpers) -------- */
  --fs-h-xl:  4.375rem;   /* 70px — hero headline (headline--xl)            */
  --fs-h-lg:  3.75rem;    /* 60px — large section headline (headline--lg)  */
  --fs-h-md:  2.5rem;     /* 40px — standard headline (headline--md / h2)  */
  --fs-h-sm:  1.5625rem;  /* 25px — small headline (headline--sm / h3)     */
  --fs-copy:  1.0625rem;  /* 17px — body copy                              */
  --fs-tiny:  0.875rem;   /* 14px — captions, overlines, tags, buttons     */

  --lh-head:  1.2;        /* @kind font */
  --lh-copy:  1.5294;     /* @kind font */ /* 26px on 17px */
  --lh-tiny:  1.2143;     /* @kind font */ /* 17px on 14px */

  --fw-light:   300;      /* @kind font */
  --fw-regular: 400;      /* @kind font */
  --fw-medium:  500;      /* @kind font */
  --fw-bold:    700;      /* @kind font */
  --fw-black:   900;      /* @kind font */

  --tracking-nav:      0.0625rem;  /* 1px nav letter-spacing       */
  --tracking-overline: 0.04em;     /* small all-caps label spacing  */
}

/* ============================================================================
   ELEMENT HELPERS — apply via .mk- classes (or copy into a scoped reset).
   ============================================================================ */

.mk-body {
  font-family: var(--font-body);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Headlines use the display face, bold, tight leading, and scale fluidly. */
.mk-h1, .headline--xl {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  font-size: clamp(2.1875rem, 1.2rem + 4.4vw, var(--fs-h-xl)); /* 35→70 */
  color: var(--fg-brand);
  margin: 0;
}
.mk-h2, .headline--lg {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  font-size: clamp(1.5625rem, 0.9rem + 3vw, var(--fs-h-lg)); /* 25→60 */
  margin: 0;
}
.mk-h3, .headline--md {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  font-size: clamp(1.5625rem, 1.1rem + 1.6vw, var(--fs-h-md)); /* 25→40 */
  margin: 0;
}
.mk-h4, .headline--sm {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, var(--fs-h-sm)); /* 20→25 */
  margin: 0;
}

.mk-copy, .mk-p {
  font-family: var(--font-body);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  color: var(--fg1);
}

.mk-lead {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--fg1);
}

/* Overline / topline — small label above headlines, brand blue, bold */
.mk-topline {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-overline);
  color: var(--fg-brand);
}

.mk-tiny {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tiny);
  color: var(--fg2);
}

.mk-mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

a.mk-link {
  color: var(--link);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: color var(--ease);
}
a.mk-link:hover { color: var(--link-hover); }


/* ============================================================================
   MANKIEWICZ — Layout, radius, elevation & motion tokens
   Square geometry, thin hairlines, restrained shadows, one universal 300ms ease.
   ============================================================================ */

:root {
  /* ---- Spacing (Bootstrap-derived grid; 30px gutter) -------------------- */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.875rem;  /* 30px — grid gutter            */
  --space-7:   2.5rem;    /* 40px — desktop content padding */
  --space-8:   3.75rem;   /* 60px */
  --space-9:   5rem;      /* 80px — section vertical rhythm  */

  --gutter:       1.875rem;  /* 30px grid gutter              */
  --content-pad:  2.5rem;    /* 40px desktop content padding  */
  --maxw:         90rem;     /* 1440px content max width       */
  --maxw-shell:   100rem;    /* 1600px outer shell             */

  /* ---- Radius — SQUARE by default --------------------------------------- */
  --radius-0:     0;        /* DEFAULT — buttons, cards, inputs are square    */
  --radius-pill:  50rem;    /* status badges only                             */
  --radius-round: 50%;      /* circular controls (back-to-top, slider dots)   */

  /* ---- Elevation — minimal; lift on hover, not by default --------------- */
  --shadow-card-hover: 0 2px 15px 0 rgba(39, 39, 39, 0.25);
  --shadow-card-soft:  0 2px 15px 0 rgba(39, 39, 39, 0.18);
  --shadow-blue-soft:  0 0 24px 0 rgba(12, 53, 170, 0.20);  /* back-to-top glow */
  --shadow-blue-lift:  12px 10px 16px 0 rgba(12, 53, 170, 0.20); /* swatch hover */
  --shadow-menu:       0 1px 15px 0 rgba(39, 39, 39, 0.27);

  /* ---- Motion — understated; fades + small nudges, no bounce ------------ */
  --ease:        300ms;                  /* @kind other */ /* universal transition duration */
  --ease-fn:     cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --nudge:       5px;                     /* arrow-link hover travel           */
}


/* ============================================================================
   MANKIEWICZ — Component CSS
   Styling the reusable primitives. Square corners, 2px hairlines, fill-on-hover,
   300ms transitions, restrained shadows. Badges are the ONE rounded component.
   These classes back the React primitives in /components.
   ============================================================================ */

/* ============================================================================
   BUTTON — square, 2px border, fill-on-hover. No border-radius.
   ============================================================================ */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  line-height: 2.25rem;             /* 36px */
  padding: 0 1.75rem;               /* 0 28px */
  border: 2px solid var(--mk-blue);
  background: rgba(255, 255, 255, 0.3);
  color: var(--mk-blue);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.mk-btn:hover,
.mk-btn:focus-visible { background: var(--mk-blue); color: #fff; outline: none; }

.mk-btn--primary { background: var(--mk-blue); color: #fff; }
.mk-btn--primary:hover { background: var(--mk-blue-dark); border-color: var(--mk-blue-dark); }

.mk-btn--light { border-color: #fff; color: #fff; background: transparent; }
.mk-btn--light:hover { background: #fff; color: var(--mk-blue); }

.mk-btn--text { border-color: transparent; background: none; padding: 0 0.5rem; }
.mk-btn--text:hover { background: var(--mk-surface); color: var(--mk-blue); }

.mk-btn--sm { line-height: 1.75rem; font-size: 0.8125rem; padding: 0 1.25rem; }
.mk-btn--lg { line-height: 2.875rem; font-size: var(--fs-copy); padding: 0 2.25rem; }
.mk-btn--block { display: flex; width: 100%; }

.mk-btn:disabled,
.mk-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.mk-btn__icon { display: inline-flex; width: 1.125em; height: 1.125em; }
.mk-btn__icon svg { width: 100%; height: 100%; }

/* ============================================================================
   ARROW LINK — text + right-nudging arrow on hover
   ============================================================================ */
.mk-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  color: var(--mk-blue);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  transition: color var(--ease);
}
.mk-arrow svg { width: 1.125rem; height: 1.125rem; transition: transform var(--ease); }
.mk-arrow:hover { color: var(--mk-blue-dark); }
.mk-arrow:hover svg { transform: translateX(var(--nudge)); }
.mk-arrow--light { color: #fff; }
.mk-arrow--light:hover { color: rgba(255, 255, 255, 0.85); }

/* ============================================================================
   FLOATING-LABEL FIELD — bottom border only, gray fill, label floats blue
   ============================================================================ */
.mk-field {
  position: relative;
  display: block;
  background: var(--mk-surface-2);
}
.mk-field__control {
  width: 100%;
  box-sizing: border-box;
  background: var(--mk-zebra);
  border: none;
  border-bottom: 1px solid var(--mk-gray-line);
  border-radius: 0;
  padding: 1.4rem 0.75rem 0.5rem;
  min-height: 3.75rem;              /* 60px */
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg1);
  outline: none;
  transition: border-color var(--ease);
}
textarea.mk-field__control { min-height: 7rem; resize: vertical; line-height: 1.5; }
.mk-field__control:focus { border-bottom-color: var(--mk-blue); box-shadow: none; }
.mk-field__label {
  position: absolute;
  left: 0.75rem;
  top: 1.15rem;
  color: var(--fg1);
  font-size: 1rem;
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--ease), color var(--ease);
}
.mk-field.is-filled .mk-field__label,
.mk-field:focus-within .mk-field__label {
  transform: translateY(-0.75rem) scale(0.7);
  color: var(--mk-blue);
}
.mk-field.is-error .mk-field__control { border-bottom-color: var(--mk-magenta); }
.mk-field__error {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--mk-magenta);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
  padding: 0.35rem 0.6rem;
}

/* Square checkbox / radio — accent fill, no colored focus shadow */
.mk-check {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg1);
  cursor: pointer;
}
.mk-check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 1px solid var(--mk-gray-line);
  border-radius: 0;
  accent-color: var(--mk-radio-fill);
}
.mk-check input[type="radio"] { border-radius: 50%; }
.mk-check input:focus { box-shadow: none; outline: none; }
.mk-check input:disabled { opacity: 0.5; }
.mk-check.is-disabled { opacity: 0.55; cursor: not-allowed; }

/* ============================================================================
   BADGE — the ONE rounded component (pill, 50rem)
   ============================================================================ */
.mk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.4em 0.8em;
  white-space: nowrap;
}
.mk-badge--primary { background: var(--mk-blue);     color: #fff; }
.mk-badge--success { background: var(--mk-success);  color: #fff; }
.mk-badge--danger  { background: var(--mk-danger);   color: #fff; }
.mk-badge--warning { background: var(--mk-warning);  color: var(--mk-ink); }
.mk-badge--info    { background: var(--mk-info);     color: var(--mk-ink); }
.mk-badge--subtle  { background: var(--mk-blue-subtle); color: var(--mk-blue); }
.mk-badge--neutral { background: var(--mk-divider);  color: var(--mk-ink); }

/* ============================================================================
   TAG — square content chip (stays square, unlike badges)
   ============================================================================ */
.mk-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-radius: 0;
  border: 1px solid var(--mk-divider);
  background: var(--mk-surface);
  color: var(--mk-ink);
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  line-height: 1;
  padding: 0.45em 0.75em;
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
a.mk-tag:hover, button.mk-tag:hover { border-color: var(--mk-blue); color: var(--mk-blue); }
.mk-tag--solid { background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; }

/* ============================================================================
   CARD — flat white block, square corners, 2px hairline, lift on hover
   ============================================================================ */
.mk-card {
  background: var(--surface-card);
  border: 2px solid var(--mk-divider);
  border-radius: 0;
  padding: 1.875rem;
  transition: box-shadow var(--ease), transform var(--ease);
}
.mk-card--link { cursor: pointer; }
.mk-card--link:hover { box-shadow: var(--shadow-card-hover); }
.mk-card--blue { background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; }
.mk-card--gray { background: var(--mk-surface); border-color: var(--mk-surface); }
.mk-card--flat { border-color: transparent; }

/* ============================================================================
   TABLE — striped #f2f2f2, hover #ccd9ff, Light-300 headers over a blue rule
   ============================================================================ */
.mk-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg1);
}
.mk-table th {
  font-weight: var(--fw-light);          /* Lab Grotesque Light */
  letter-spacing: 0.02rem;
  text-align: left;
  padding: 0.7rem;
  line-height: 1.2;
  border-bottom: 2px solid var(--mk-blue);
}
.mk-table td {
  padding: 0.7rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.mk-table tbody tr:nth-child(odd) { background: var(--mk-zebra); }
.mk-table tbody tr:hover { background: var(--mk-row-hover); }
.mk-table--compact th, .mk-table--compact td { padding: 0.45rem 0.6rem; }

/* ============================================================================
   DIVIDER
   ============================================================================ */
.mk-hr { border: 0; border-top: 2px solid var(--mk-divider); margin: 1.875rem 0; }

/* ============================================================================
   FACT BOX (Faktenbox · ce-facts-box-teaser)
   Centered icon + headline + short copy tile, used in grids of 2–4.
   Variants: gray | blue | light. Align: top | middle.
   ============================================================================ */
.mk-factbox-grid { display: grid; gap: 1.875rem; }
.mk-factbox-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.mk-factbox-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.mk-factbox-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
  .mk-factbox-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
  .mk-factbox-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) { .mk-factbox-grid { grid-template-columns: 1fr !important; } }

.mk-factbox {
  display: flex;
  flex: 1 0 auto;
  transition: background-color var(--ease), box-shadow var(--ease);
  color: var(--mk-ink);
  text-decoration: none;
}
.mk-factbox--gray  { background: var(--mk-surface); }
.mk-factbox--blue  { background: var(--mk-blue); color: #fff; }
.mk-factbox--light { background: var(--mk-surface); color: var(--mk-blue); }
.mk-factbox--link  { cursor: pointer; }
.mk-factbox--gray.mk-factbox--link:hover  { background: var(--mk-divider); }
.mk-factbox--blue.mk-factbox--link:hover  { background: var(--mk-blue-dark); color: #fff; }
.mk-factbox--light.mk-factbox--link:hover { background: var(--mk-divider); color: var(--mk-blue); }

.mk-factbox__content { display: flex; gap: 1.25rem; padding: 1.25rem; width: 100%; }
.mk-factbox__icon { flex: none; color: var(--mk-blue); }
.mk-factbox--blue .mk-factbox__icon { color: #fff; }
.mk-factbox__icon img,
.mk-factbox__icon svg { width: 3.75rem !important; height: 3.75rem !important; stroke-width: 1.5; }
.mk-factbox__title { margin: 0 0 0.625rem; }
.mk-factbox--blue .mk-factbox__title  { color: #fff; }
.mk-factbox--light .mk-factbox__title { color: var(--mk-blue); }
.mk-factbox__text { max-width: 49rem; font-size: var(--fs-copy); line-height: var(--lh-copy); }
.mk-factbox__text p { margin: 0; }

.mk-factbox--middle .mk-factbox__content,
.mk-factbox--middle .mk-factbox__text-wrapper { align-self: center; }

@media (min-width: 480px) { .mk-factbox__content { padding-left: 1.875rem; padding-right: 1.875rem; } }
@media (min-width: 769px) { .mk-factbox__content { gap: 1.625rem; } }
@media (min-width: 1240px) {
  .mk-factbox__content { flex-wrap: wrap; padding: 5rem 1.875rem; text-align: center; }
  .mk-factbox__icon { margin-top: -1.25rem; display: flex; justify-content: center; width: 100%; }
  .mk-factbox__text-wrapper { width: 100%; }
  .mk-factbox__text { max-width: 25rem; margin-left: auto; margin-right: auto; }
  .mk-factbox--middle .mk-factbox__text-wrapper { align-self: initial; }
}


/* ============================================================================
   MANKIEWICZ — Design System · global entry point
   Consumers link THIS one file. It is a list of @imports only.
   Everything reachable from here ships to consumers (tokens + fonts + helpers).
   ============================================================================ */

/* ============================================================================
   MANKIEWICZ — Webfonts
   Body / UI face: Lab Grotesque (self-hosted, user-supplied: Light/Regular/Bold/Black)
   Display / Headlines: Absolut Pro Reduced (proprietary, UNAVAILABLE) —
     substituted with Manrope from Google Fonts. FLAGGED — see readme.md.
   ============================================================================ */

/* Display-face substitute (Absolut Pro Reduced ≈ Manrope) + body fallback. */
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c8707d1a-23a1-4eeb-be0a-13aa884c1a3d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ebd458db-7110-4688-a6d1-06f1ca10889d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("928a4a65-8359-47bc-b048-1fbb9cd32a42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("d67d6abc-6817-49a0-a37e-0a57946bb37d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("c8707d1a-23a1-4eeb-be0a-13aa884c1a3d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ebd458db-7110-4688-a6d1-06f1ca10889d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("928a4a65-8359-47bc-b048-1fbb9cd32a42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("d67d6abc-6817-49a0-a37e-0a57946bb37d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c8707d1a-23a1-4eeb-be0a-13aa884c1a3d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ebd458db-7110-4688-a6d1-06f1ca10889d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("928a4a65-8359-47bc-b048-1fbb9cd32a42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("d67d6abc-6817-49a0-a37e-0a57946bb37d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c8707d1a-23a1-4eeb-be0a-13aa884c1a3d.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("ebd458db-7110-4688-a6d1-06f1ca10889d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("928a4a65-8359-47bc-b048-1fbb9cd32a42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("d67d6abc-6817-49a0-a37e-0a57946bb37d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("a4b367e6-17fa-445e-a7a4-9e4c09137c76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("6eb03e6c-3cf3-43e5-8c22-f698f80001a2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("2cc2be00-93ed-4972-8ea6-824fc25b853a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("65d916fb-e7b9-4742-99e4-a8af992b1019.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ae0e1455-c6b2-4cd6-a91f-7a53f1e9d636.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("58ef4e08-7812-48be-a8d2-05e8d2dfe869.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("a4b367e6-17fa-445e-a7a4-9e4c09137c76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("6eb03e6c-3cf3-43e5-8c22-f698f80001a2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("2cc2be00-93ed-4972-8ea6-824fc25b853a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("65d916fb-e7b9-4742-99e4-a8af992b1019.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ae0e1455-c6b2-4cd6-a91f-7a53f1e9d636.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("58ef4e08-7812-48be-a8d2-05e8d2dfe869.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("a4b367e6-17fa-445e-a7a4-9e4c09137c76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("6eb03e6c-3cf3-43e5-8c22-f698f80001a2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("2cc2be00-93ed-4972-8ea6-824fc25b853a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("65d916fb-e7b9-4742-99e4-a8af992b1019.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("ae0e1455-c6b2-4cd6-a91f-7a53f1e9d636.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("58ef4e08-7812-48be-a8d2-05e8d2dfe869.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("a4b367e6-17fa-445e-a7a4-9e4c09137c76.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("6eb03e6c-3cf3-43e5-8c22-f698f80001a2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("2cc2be00-93ed-4972-8ea6-824fc25b853a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("65d916fb-e7b9-4742-99e4-a8af992b1019.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("ae0e1455-c6b2-4cd6-a91f-7a53f1e9d636.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("58ef4e08-7812-48be-a8d2-05e8d2dfe869.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: 'Lab Grotesque';
  src: url("32fd5f94-5166-47f7-9106-98c459f45f26.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lab Grotesque';
  src: url("a23a4ccf-fc3d-4603-a229-5b59b2029db3.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lab Grotesque';
  src: url("1efefd36-6445-4b16-b1f1-93e7bf7f3b0e.woff") format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lab Grotesque';
  src: url("c64e1b25-795c-4119-8ffa-9aac99a6f5bd.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   MANKIEWICZ — Color tokens
   Source of truth: compiled main-mankiewicz.css + Bootstrap 5.3 brand override.
   The brand is carried by ONE deep blue (#002595) over cool grays + white.
   Color is restrained: blue + gray + white is the everyday palette; functional
   accents (orange/magenta/green) appear sparingly.
   ============================================================================ */

:root {
  /* ---- Brand blue ramp -------------------------------------------------- */
  --mk-blue:          #002595;   /* signature deep Mankiewicz blue (primary)  */
  --mk-blue-dark:     #001862;   /* hover / pressed state of primary blue     */
  --mk-blue-mid:      #0C35AA;   /* secondary blue (slider arrows, radio fill)*/
  --mk-blue-bright:   #178FE5;   /* inset highlight / bright link             */
  --mk-blue-sky:      #33AAFF;   /* light interactive blue                    */
  --mk-blue-tint:     #D5E9F7;   /* pale blue surface tint                    */
  --mk-blue-subtle:   #CCD9FF;   /* subtle primary background / row hover     */
  --mk-link-text:     #0000EE;   /* RTE body link color (classic web link)    */

  /* ---- Neutrals (cool) -------------------------------------------------- */
  --mk-ink:           #272727;   /* body text                                 */
  --mk-ink-soft:      #292B2D;   /* near-black UI text (footer, headings)      */
  --mk-gray:          #6C757D;   /* muted / secondary text                    */
  --mk-gray-line:     #777779;   /* form underlines, strong dividers          */
  --mk-divider:       #E4E4E8;   /* hairline borders / dividers (2px)         */
  --mk-surface:       #F2F2F5;   /* page background (cool light gray)         */
  --mk-surface-2:     #F5F5F5;   /* alt light surface                        */
  --mk-zebra:         #F2F2F2;   /* data-table odd-row stripe                */
  --mk-row-hover:     #CCD9FF;   /* data-table row hover                     */
  --mk-white:         #FFFFFF;
  --mk-black:         #000000;
  --mk-night:         #070E30;   /* tile / brand dark navy                   */

  /* ---- Functional / accent --------------------------------------------- */
  --mk-orange:        #FF8000;   /* warning / highlight accent (website)      */
  --mk-magenta:       #FF005F;   /* error (form errors)                      */
  --mk-green:         #6CB31D;   /* success (website)                        */
  --mk-teal:          #42E1B8;   /* success message background (website)      */
  --mk-radio-fill:    #0C35AA;   /* checkbox / radio checked fill            */
  /* Bootstrap 5.3 semantic set (application UI palette) */
  --mk-secondary:     #69C0AC;   /* mint secondary                          */
  --mk-success:       #198754;
  --mk-danger:        #DC3545;
  --mk-warning:       #FFC107;
  --mk-info:          #0DCAF0;

  /* ---- Semantic aliases ------------------------------------------------- */
  --bg:               var(--mk-white);
  --bg-muted:         var(--mk-surface);
  --surface-card:     var(--mk-white);
  --fg1:              var(--mk-ink);      /* primary text                    */
  --fg2:              var(--mk-gray);     /* secondary text                  */
  --fg-brand:         var(--mk-blue);     /* brand-colored text / links      */
  --text-body:        var(--mk-ink);
  --text-muted:       var(--mk-gray);
  --link:             var(--mk-blue);
  --link-hover:       var(--mk-blue-dark);
  --border:           var(--mk-divider);
  --border-strong:    var(--mk-gray-line);
  --success:          var(--mk-green);
  --error:            var(--mk-magenta);
  --warning:          var(--mk-orange);
  --info:             var(--mk-blue);
}

/* ============================================================================
   MANKIEWICZ — Typography tokens + element helpers
   Two-typeface system:
     • Body / UI       — "Lab Grotesque"       (self-hosted)
     • Display / Heads — "Absolut Pro Reduced"  (proprietary; substitute Manrope)
   16px base; site uses rem. Headlines bold, line-height 1.2, scale up across
   breakpoints. All-caps reserved for small overline / tab labels.
   ============================================================================ */

:root {
  /* ---- Families --------------------------------------------------------- */
  --font-body: "Lab Grotesque", "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", "Absolut Pro Reduced", "Lab Grotesque", "Hanken Grotesk", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Scale (desktop ≥1240px peak; see fluid clamps in helpers) -------- */
  --fs-h-xl:  4.375rem;   /* 70px — hero headline (headline--xl)            */
  --fs-h-lg:  3.75rem;    /* 60px — large section headline (headline--lg)  */
  --fs-h-md:  2.5rem;     /* 40px — standard headline (headline--md / h2)  */
  --fs-h-sm:  1.5625rem;  /* 25px — small headline (headline--sm / h3)     */
  --fs-copy:  1.0625rem;  /* 17px — body copy                              */
  --fs-tiny:  0.875rem;   /* 14px — captions, overlines, tags, buttons     */

  --lh-head:  1.2;        /* @kind font */
  --lh-copy:  1.5294;     /* @kind font */ /* 26px on 17px */
  --lh-tiny:  1.2143;     /* @kind font */ /* 17px on 14px */

  --fw-light:   300;      /* @kind font */
  --fw-regular: 400;      /* @kind font */
  --fw-medium:  500;      /* @kind font */
  --fw-bold:    700;      /* @kind font */
  --fw-black:   900;      /* @kind font */

  --tracking-nav:      0.0625rem;  /* 1px nav letter-spacing       */
  --tracking-overline: 0.04em;     /* small all-caps label spacing  */
}

/* ============================================================================
   ELEMENT HELPERS — apply via .mk- classes (or copy into a scoped reset).
   ============================================================================ */

.mk-body {
  font-family: var(--font-body);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Headlines use the display face, bold, tight leading, and scale fluidly. */
.mk-h1, .headline--xl {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  font-size: clamp(2.1875rem, 1.2rem + 4.4vw, var(--fs-h-xl)); /* 35→70 */
  color: var(--fg-brand);
  margin: 0;
}
.mk-h2, .headline--lg {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  font-size: clamp(1.5625rem, 0.9rem + 3vw, var(--fs-h-lg)); /* 25→60 */
  margin: 0;
}
.mk-h3, .headline--md {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  font-size: clamp(1.5625rem, 1.1rem + 1.6vw, var(--fs-h-md)); /* 25→40 */
  margin: 0;
}
.mk-h4, .headline--sm {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, var(--fs-h-sm)); /* 20→25 */
  margin: 0;
}

.mk-copy, .mk-p {
  font-family: var(--font-body);
  font-size: var(--fs-copy);
  line-height: var(--lh-copy);
  color: var(--fg1);
}

.mk-lead {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--fg1);
}

/* Overline / topline — small label above headlines, brand blue, bold */
.mk-topline {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-overline);
  color: var(--fg-brand);
}

.mk-tiny {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tiny);
  color: var(--fg2);
}

.mk-mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

a.mk-link {
  color: var(--link);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: color var(--ease);
}
a.mk-link:hover { color: var(--link-hover); }

/* ============================================================================
   MANKIEWICZ — Layout, radius, elevation & motion tokens
   Square geometry, thin hairlines, restrained shadows, one universal 300ms ease.
   ============================================================================ */

:root {
  /* ---- Spacing (Bootstrap-derived grid; 30px gutter) -------------------- */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.875rem;  /* 30px — grid gutter            */
  --space-7:   2.5rem;    /* 40px — desktop content padding */
  --space-8:   3.75rem;   /* 60px */
  --space-9:   5rem;      /* 80px — section vertical rhythm  */

  --gutter:       1.875rem;  /* 30px grid gutter              */
  --content-pad:  2.5rem;    /* 40px desktop content padding  */
  --maxw:         90rem;     /* 1440px content max width       */
  --maxw-shell:   100rem;    /* 1600px outer shell             */

  /* ---- Radius — SQUARE by default --------------------------------------- */
  --radius-0:     0;        /* DEFAULT — buttons, cards, inputs are square    */
  --radius-pill:  50rem;    /* status badges only                             */
  --radius-round: 50%;      /* circular controls (back-to-top, slider dots)   */

  /* ---- Elevation — minimal; lift on hover, not by default --------------- */
  --shadow-card-hover: 0 2px 15px 0 rgba(39, 39, 39, 0.25);
  --shadow-card-soft:  0 2px 15px 0 rgba(39, 39, 39, 0.18);
  --shadow-blue-soft:  0 0 24px 0 rgba(12, 53, 170, 0.20);  /* back-to-top glow */
  --shadow-blue-lift:  12px 10px 16px 0 rgba(12, 53, 170, 0.20); /* swatch hover */
  --shadow-menu:       0 1px 15px 0 rgba(39, 39, 39, 0.27);

  /* ---- Motion — understated; fades + small nudges, no bounce ------------ */
  --ease:        300ms;                  /* @kind other */ /* universal transition duration */
  --ease-fn:     cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --nudge:       5px;                     /* arrow-link hover travel           */
}

/* ============================================================================
   MANKIEWICZ — Component CSS
   Styling the reusable primitives. Square corners, 2px hairlines, fill-on-hover,
   300ms transitions, restrained shadows. Badges are the ONE rounded component.
   These classes back the React primitives in /components.
   ============================================================================ */

/* ============================================================================
   BUTTON — square, 2px border, fill-on-hover. No border-radius.
   ============================================================================ */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  line-height: 2.25rem;             /* 36px */
  padding: 0 1.75rem;               /* 0 28px */
  border: 2px solid var(--mk-blue);
  background: rgba(255, 255, 255, 0.3);
  color: var(--mk-blue);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.mk-btn:hover,
.mk-btn:focus-visible { background: var(--mk-blue); color: #fff; outline: none; }

.mk-btn--primary { background: var(--mk-blue); color: #fff; }
.mk-btn--primary:hover { background: var(--mk-blue-dark); border-color: var(--mk-blue-dark); }

.mk-btn--light { border-color: #fff; color: #fff; background: transparent; }
.mk-btn--light:hover { background: #fff; color: var(--mk-blue); }

.mk-btn--text { border-color: transparent; background: none; padding: 0 0.5rem; }
.mk-btn--text:hover { background: var(--mk-surface); color: var(--mk-blue); }

.mk-btn--sm { line-height: 1.75rem; font-size: 0.8125rem; padding: 0 1.25rem; }
.mk-btn--lg { line-height: 2.875rem; font-size: var(--fs-copy); padding: 0 2.25rem; }
.mk-btn--block { display: flex; width: 100%; }

.mk-btn:disabled,
.mk-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.mk-btn__icon { display: inline-flex; width: 1.125em; height: 1.125em; }
.mk-btn__icon svg { width: 100%; height: 100%; }

/* ============================================================================
   ARROW LINK — text + right-nudging arrow on hover
   ============================================================================ */
.mk-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  color: var(--mk-blue);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  transition: color var(--ease);
}
.mk-arrow svg { width: 1.125rem; height: 1.125rem; transition: transform var(--ease); }
.mk-arrow:hover { color: var(--mk-blue-dark); }
.mk-arrow:hover svg { transform: translateX(var(--nudge)); }
.mk-arrow--light { color: #fff; }
.mk-arrow--light:hover { color: rgba(255, 255, 255, 0.85); }

/* ============================================================================
   FLOATING-LABEL FIELD — bottom border only, gray fill, label floats blue
   ============================================================================ */
.mk-field {
  position: relative;
  display: block;
  background: var(--mk-surface-2);
}
.mk-field__control {
  width: 100%;
  box-sizing: border-box;
  background: var(--mk-zebra);
  border: none;
  border-bottom: 1px solid var(--mk-gray-line);
  border-radius: 0;
  padding: 1.4rem 0.75rem 0.5rem;
  min-height: 3.75rem;              /* 60px */
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg1);
  outline: none;
  transition: border-color var(--ease);
}
textarea.mk-field__control { min-height: 7rem; resize: vertical; line-height: 1.5; }
.mk-field__control:focus { border-bottom-color: var(--mk-blue); box-shadow: none; }
.mk-field__label {
  position: absolute;
  left: 0.75rem;
  top: 1.15rem;
  color: var(--fg1);
  font-size: 1rem;
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--ease), color var(--ease);
}
.mk-field.is-filled .mk-field__label,
.mk-field:focus-within .mk-field__label {
  transform: translateY(-0.75rem) scale(0.7);
  color: var(--mk-blue);
}
.mk-field.is-error .mk-field__control { border-bottom-color: var(--mk-magenta); }
.mk-field__error {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--mk-magenta);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
  padding: 0.35rem 0.6rem;
}

/* Square checkbox / radio — accent fill, no colored focus shadow */
.mk-check {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg1);
  cursor: pointer;
}
.mk-check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border: 1px solid var(--mk-gray-line);
  border-radius: 0;
  accent-color: var(--mk-radio-fill);
}
.mk-check input[type="radio"] { border-radius: 50%; }
.mk-check input:focus { box-shadow: none; outline: none; }
.mk-check input:disabled { opacity: 0.5; }
.mk-check.is-disabled { opacity: 0.55; cursor: not-allowed; }

/* ============================================================================
   BADGE — the ONE rounded component (pill, 50rem)
   ============================================================================ */
.mk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.4em 0.8em;
  white-space: nowrap;
}
.mk-badge--primary { background: var(--mk-blue);     color: #fff; }
.mk-badge--success { background: var(--mk-success);  color: #fff; }
.mk-badge--danger  { background: var(--mk-danger);   color: #fff; }
.mk-badge--warning { background: var(--mk-warning);  color: var(--mk-ink); }
.mk-badge--info    { background: var(--mk-info);     color: var(--mk-ink); }
.mk-badge--subtle  { background: var(--mk-blue-subtle); color: var(--mk-blue); }
.mk-badge--neutral { background: var(--mk-divider);  color: var(--mk-ink); }

/* ============================================================================
   TAG — square content chip (stays square, unlike badges)
   ============================================================================ */
.mk-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-radius: 0;
  border: 1px solid var(--mk-divider);
  background: var(--mk-surface);
  color: var(--mk-ink);
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  line-height: 1;
  padding: 0.45em 0.75em;
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
a.mk-tag:hover, button.mk-tag:hover { border-color: var(--mk-blue); color: var(--mk-blue); }
.mk-tag--solid { background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; }

/* ============================================================================
   CARD — flat white block, square corners, 2px hairline, lift on hover
   ============================================================================ */
.mk-card {
  background: var(--surface-card);
  border: 2px solid var(--mk-divider);
  border-radius: 0;
  padding: 1.875rem;
  transition: box-shadow var(--ease), transform var(--ease);
}
.mk-card--link { cursor: pointer; }
.mk-card--link:hover { box-shadow: var(--shadow-card-hover); }
.mk-card--blue { background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; }
.mk-card--gray { background: var(--mk-surface); border-color: var(--mk-surface); }
.mk-card--flat { border-color: transparent; }

/* ============================================================================
   TABLE — striped #f2f2f2, hover #ccd9ff, Light-300 headers over a blue rule
   ============================================================================ */
.mk-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg1);
}
.mk-table th {
  font-weight: var(--fw-light);          /* Lab Grotesque Light */
  letter-spacing: 0.02rem;
  text-align: left;
  padding: 0.7rem;
  line-height: 1.2;
  border-bottom: 2px solid var(--mk-blue);
}
.mk-table td {
  padding: 0.7rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.mk-table tbody tr:nth-child(odd) { background: var(--mk-zebra); }
.mk-table tbody tr:hover { background: var(--mk-row-hover); }
.mk-table--compact th, .mk-table--compact td { padding: 0.45rem 0.6rem; }

/* ============================================================================
   DIVIDER
   ============================================================================ */
.mk-hr { border: 0; border-top: 2px solid var(--mk-divider); margin: 1.875rem 0; }

/* ============================================================================
   FACT BOX (Faktenbox · ce-facts-box-teaser)
   Centered icon + headline + short copy tile, used in grids of 2–4.
   Variants: gray | blue | light. Align: top | middle.
   ============================================================================ */
.mk-factbox-grid { display: grid; gap: 1.875rem; }
.mk-factbox-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.mk-factbox-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.mk-factbox-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
  .mk-factbox-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
  .mk-factbox-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) { .mk-factbox-grid { grid-template-columns: 1fr !important; } }

.mk-factbox {
  display: flex;
  flex: 1 0 auto;
  transition: background-color var(--ease), box-shadow var(--ease);
  color: var(--mk-ink);
  text-decoration: none;
}
.mk-factbox--gray  { background: var(--mk-surface); }
.mk-factbox--blue  { background: var(--mk-blue); color: #fff; }
.mk-factbox--light { background: var(--mk-surface); color: var(--mk-blue); }
.mk-factbox--link  { cursor: pointer; }
.mk-factbox--gray.mk-factbox--link:hover  { background: var(--mk-divider); }
.mk-factbox--blue.mk-factbox--link:hover  { background: var(--mk-blue-dark); color: #fff; }
.mk-factbox--light.mk-factbox--link:hover { background: var(--mk-divider); color: var(--mk-blue); }

.mk-factbox__content { display: flex; gap: 1.25rem; padding: 1.25rem; width: 100%; }
.mk-factbox__icon { flex: none; color: var(--mk-blue); }
.mk-factbox--blue .mk-factbox__icon { color: #fff; }
.mk-factbox__icon img,
.mk-factbox__icon svg { width: 3.75rem !important; height: 3.75rem !important; stroke-width: 1.5; }
.mk-factbox__title { margin: 0 0 0.625rem; }
.mk-factbox--blue .mk-factbox__title  { color: #fff; }
.mk-factbox--light .mk-factbox__title { color: var(--mk-blue); }
.mk-factbox__text { max-width: 49rem; font-size: var(--fs-copy); line-height: var(--lh-copy); }
.mk-factbox__text p { margin: 0; }

.mk-factbox--middle .mk-factbox__content,
.mk-factbox--middle .mk-factbox__text-wrapper { align-self: center; }

@media (min-width: 480px) { .mk-factbox__content { padding-left: 1.875rem; padding-right: 1.875rem; } }
@media (min-width: 769px) { .mk-factbox__content { gap: 1.625rem; } }
@media (min-width: 1240px) {
  .mk-factbox__content { flex-wrap: wrap; padding: 5rem 1.875rem; text-align: center; }
  .mk-factbox__icon { margin-top: -1.25rem; display: flex; justify-content: center; width: 100%; }
  .mk-factbox__text-wrapper { width: 100%; }
  .mk-factbox__text { max-width: 25rem; margin-left: auto; margin-right: auto; }
  .mk-factbox--middle .mk-factbox__text-wrapper { align-self: initial; }
}




  body { margin: 0; background: #E7E7EC; }
  a { color: var(--mk-blue); text-decoration: none; }
  a:hover { color: var(--mk-blue-dark); }
  @keyframes mkToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
[data-om-starter="ios-frame"] > div:nth-child(3),
[data-om-starter="ios-frame"] > div:nth-child(3) > div {
  min-height: 0 !important;
  overflow: hidden !important;
}
  @media (max-width: 700px) {
    .mk-frame-wrap { display: block !important; padding: 0 !important; min-height: 100dvh !important; }
    [data-om-starter="ios-frame"] { width: 100% !important; height: 100dvh !important; border-radius: 0 !important; box-shadow: none !important; }
    [data-om-starter="ios-frame"] > div:nth-child(1),
    [data-om-starter="ios-frame"] > div:nth-child(2),
    [data-om-starter="ios-frame"] > div:nth-child(4) { display: none !important; }
    .mk-safe-top { padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important; }
    .mk-bottom-nav { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important; }
  }

/* ===== Event Hub installation UI (merged for TYPO3 MIME compatibility) ===== */
/* Event Hub: installation / Add-to-Home-Screen */
.event-hub-install-ui[hidden],
.event-hub-install-dialog[hidden] { display: none !important; }

.event-hub-install-ui {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 76px));
  z-index: 2147483000;
  font-family: "Lab Grotesque", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.event-hub-install-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 7px 12px 7px 7px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 15px;
  background: #002595;
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 20, 88, .32);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.event-hub-install-button.is-ready {
  box-shadow: 0 0 0 3px rgba(244, 51, 46, .24), 0 12px 32px rgba(0, 20, 88, .32);
}

.event-hub-install-button img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: 0 0 auto;
}

.event-hub-install-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.1;
}

.event-hub-install-copy strong { font-size: 13px; letter-spacing: .1px; }
.event-hub-install-copy small { margin-top: 4px; font-size: 11px; font-weight: 500; opacity: .9; }
.event-hub-install-arrow { font-size: 20px; line-height: 1; font-weight: 400; }

.event-hub-install-dialog {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  font-family: "Lab Grotesque", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.event-hub-install-open { overflow: hidden !important; }
.event-hub-install-backdrop { position: absolute; inset: 0; background: rgba(0, 18, 72, .68); backdrop-filter: blur(5px); }

.event-hub-install-card {
  position: relative;
  width: min(100%, 410px);
  max-height: min(680px, 92dvh);
  overflow: auto;
  padding: 30px 24px 22px;
  border-radius: 22px;
  background: #fff;
  color: #171717;
  box-shadow: 0 28px 80px rgba(0, 12, 55, .38);
  text-align: center;
}

.event-hub-install-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #f1f2f7;
  color: #002595;
  font: 700 24px/1 system-ui, sans-serif;
  cursor: pointer;
}

.event-hub-install-logo {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 37, 149, .22);
}

.event-hub-install-card h2 {
  margin: 17px 24px 10px;
  color: #002595;
  font-size: 23px;
  line-height: 1.2;
}

.event-hub-install-message {
  color: #3a3a3a;
  font-size: 15px;
  line-height: 1.52;
  text-align: left;
}
.event-hub-install-message p { margin: 10px 0; }
.event-hub-install-message ol { margin: 13px 0; padding-left: 23px; }
.event-hub-install-message li + li { margin-top: 9px; }
.event-hub-install-message kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid #c8cada;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #f6f6f9;
  font: 600 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.event-hub-install-note { padding: 10px 12px; border-radius: 10px; background: #f1f3fb; font-size: 13px; }
.event-hub-install-warning { padding: 10px 12px; border-radius: 10px; background: #fff0ef; color: #9f1e1a; font-size: 13px; }
.event-hub-install-countdown { text-align: center; font-weight: 700; color: #002595; }
.event-hub-install-progress { height: 8px; overflow: hidden; margin-top: 16px; border-radius: 99px; background: #e8eaf2; }
.event-hub-install-progress span { display: block; height: 100%; border-radius: inherit; background: #002595; transition: width .4s ease; }

.event-hub-install-actions { display: grid; gap: 9px; margin-top: 20px; }
.event-hub-install-primary,
.event-hub-install-secondary {
  min-height: 48px;
  border-radius: 5px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.event-hub-install-primary { border: 0; background: #002595; color: #fff; }
.event-hub-install-primary:disabled { opacity: .55; cursor: wait; }
.event-hub-install-secondary { border: 1px solid #c8cada; background: #fff; color: #002595; }

@media (display-mode: standalone) { .event-hub-install-ui { display: none !important; } }

@media (max-width: 460px) {
  .event-hub-install-ui { right: 10px; bottom: max(78px, calc(env(safe-area-inset-bottom) + 72px)); }
  .event-hub-install-button { min-height: 50px; border-radius: 14px; }
  .event-hub-install-button img { width: 34px; height: 34px; }
  .event-hub-install-copy strong { font-size: 12px; }
  .event-hub-install-copy small { font-size: 10px; }
  .event-hub-install-card { padding: 26px 19px 20px; border-radius: 19px; }
  .event-hub-install-card h2 { margin-left: 18px; margin-right: 18px; font-size: 21px; }
}

/* Event Hub v3.3: installation UI is hidden when launched as an installed app. */
html.event-hub-standalone .event-hub-install-ui,
html.event-hub-standalone .event-hub-install-dialog { display: none !important; }
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui), (display-mode: window-controls-overlay) {
  .event-hub-install-ui,
  .event-hub-install-dialog { display: none !important; }
}