/* ============================================================
   CertREV Design System, global entry point
   ------------------------------------------------------------
   Consumers link THIS file only. It is a manifest of @imports;
   never add rules here directly. Every token + @font-face the
   system ships is reachable from the imports below.
   ============================================================ */

/* ============================================================
   CertREV, Webfonts
   ------------------------------------------------------------
   All five families are Google Fonts. They are loaded here via
   @import so any document that links styles.css gets them with
   no extra <link> tags. (CertREV's production Next app self-hosts
   these with next/font for performance; for a portable design-
   system reference, the hosted stylesheet is the reliable choice.)

   Playfair Display, serif display / headings
   DM Sans         , body, UI, buttons
   JetBrains Mono  , eyebrows, labels, data, metadata
   Plus Jakarta Sans, the "CertREV" wordmark ONLY (ExtraBold 800)
   Allura          , signatures / certificate flourishes only
   ============================================================ */

/* vietnamese */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/0ff90637-40bd-410f-bd86-6078c8ac0693.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: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/5b476640-5614-4d9e-b009-ad1e18cbf662.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: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/4f83c8ba-3ae2-4757-8151-948caf2b9a75.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/6b6a619a-44e1-44e6-9742-47ae8e8d8ac6.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: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/d2e22636-f8bb-4489-a652-2c0a0c491bc9.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/d084aa86-adc0-4f32-a047-9a8bd9268d50.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: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/b2a24064-de57-47c1-917a-4708ddc3f6ca.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/d084aa86-adc0-4f32-a047-9a8bd9268d50.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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/b2a24064-de57-47c1-917a-4708ddc3f6ca.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/d084aa86-adc0-4f32-a047-9a8bd9268d50.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: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/b2a24064-de57-47c1-917a-4708ddc3f6ca.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/d084aa86-adc0-4f32-a047-9a8bd9268d50.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: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/b2a24064-de57-47c1-917a-4708ddc3f6ca.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/d4841811-6fbc-4bb2-a491-0dc6d1eba2f5.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/9a266a78-e6b4-4233-9eea-9bb7fa375339.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/1bc51a0d-d2d9-4959-990b-71e1651a80e9.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/f9a5340b-c34f-4196-8d40-370fe5694db1.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/897dc07d-6fa1-4674-ab6c-8b56a178736e.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/3dd95b8c-773b-41a6-84e7-12d7b3624bc0.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/d4841811-6fbc-4bb2-a491-0dc6d1eba2f5.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/9a266a78-e6b4-4233-9eea-9bb7fa375339.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/1bc51a0d-d2d9-4959-990b-71e1651a80e9.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/f9a5340b-c34f-4196-8d40-370fe5694db1.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/897dc07d-6fa1-4674-ab6c-8b56a178736e.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/3dd95b8c-773b-41a6-84e7-12d7b3624bc0.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/d4841811-6fbc-4bb2-a491-0dc6d1eba2f5.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/9a266a78-e6b4-4233-9eea-9bb7fa375339.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/1bc51a0d-d2d9-4959-990b-71e1651a80e9.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/f9a5340b-c34f-4196-8d40-370fe5694db1.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/897dc07d-6fa1-4674-ab6c-8b56a178736e.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/3dd95b8c-773b-41a6-84e7-12d7b3624bc0.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/ab7e9b40-f137-48eb-8413-3deda428a301.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/2e45beac-845f-47bb-b8f9-af080d8d0614.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/9e6b8134-a1fc-468a-a42c-7214a7fe1b3f.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/b358f03f-4e5c-469b-ab02-52e6c2852281.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/ab7e9b40-f137-48eb-8413-3deda428a301.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/2e45beac-845f-47bb-b8f9-af080d8d0614.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: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/9e6b8134-a1fc-468a-a42c-7214a7fe1b3f.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: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/b358f03f-4e5c-469b-ab02-52e6c2852281.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/0dd29d2d-ce45-426c-9069-d80e68bcb199.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/22968f48-be45-4369-828e-fe12a884f39a.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/e8d8ebba-b09a-46cd-a318-57edabff1e82.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/58398f9e-ea61-4957-ab79-d3703b3d03f1.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/0dd29d2d-ce45-426c-9069-d80e68bcb199.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/22968f48-be45-4369-828e-fe12a884f39a.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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/e8d8ebba-b09a-46cd-a318-57edabff1e82.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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/58398f9e-ea61-4957-ab79-d3703b3d03f1.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/0dd29d2d-ce45-426c-9069-d80e68bcb199.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/22968f48-be45-4369-828e-fe12a884f39a.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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/e8d8ebba-b09a-46cd-a318-57edabff1e82.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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/58398f9e-ea61-4957-ab79-d3703b3d03f1.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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./fonts/0dd29d2d-ce45-426c-9069-d80e68bcb199.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./fonts/22968f48-be45-4369-828e-fe12a884f39a.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: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./fonts/e8d8ebba-b09a-46cd-a318-57edabff1e82.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: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./fonts/58398f9e-ea61-4957-ab79-d3703b3d03f1.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/c2b9e43f-9807-4386-9a45-5e8b7ed00ef6.woff") format('woff');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/f1ccce34-4593-47f1-9a71-7188d7f01411.woff") format('woff');
  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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/d5ddad1e-40eb-48ef-9a81-7a7d1472b218.woff") format('woff');
  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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/f9bf591e-731d-40a0-b89a-f4472030d6cd.woff") format('woff');
  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;
}


/* ============================================================
   CertREV, Color tokens
   ------------------------------------------------------------
   Base palette + semantic aliases. Resolved against the editorial
   expert-email design system (the brand's north star), the portal
   globals.css, and BRAND.md / STYLE-GUIDE.md.

   Persona color logic (loose, not rigid):
     navy  → the expert / authority voice (also primary text)
     coral → the brand / client voice + primary CTAs
     lime  → success, certification, celebratory accents (sparingly)
   ============================================================ */

:root {
	/* ---- Brand primaries ---- */
	--navy: #0a1b3f;          /* primary text, authority, dark surfaces */
	--coral: #e8603c;         /* canonical brand accent + CTAs (editorial) */
	--coral-hover: #d14e2a;   /* hover / active for coral */
	--coral-deep: #bb4726;    /* deeper coral, use for coral TEXT on light (AA) */
	--lime: #d4e157;          /* certification, success fill, celebratory */
	--lime-dark: #a8b43e;     /* lime as a darker line/text */
	--lime-text: #4d5a1a;     /* lime as readable text (AA on white & lime-light) */
	--lime-light: #e8f5a0;    /* success backgrounds */
	--beige: #e8e4db;         /* structural borders, dividers, muted bands */

	/* ---- Navy alpha ladder (all neutrals derive from navy) ---- */
	--navy-90: rgba(10, 27, 63, 0.90);
	--navy-75: rgba(10, 27, 63, 0.72);  /* body copy on white (navySoft) */
	--navy-55: rgba(10, 27, 63, 0.55);  /* muted labels (navyMuted) */
	--navy-35: rgba(10, 27, 63, 0.35);  /* subtle / placeholder (navySubtle) */
	--navy-10: rgba(10, 27, 63, 0.10);  /* hairline borders (navyFaint) */
	--navy-06: rgba(10, 27, 63, 0.06);  /* faintest rule (navyHair) */
	--navy-03: rgba(10, 27, 63, 0.03);  /* navy tint wash */

	--coral-soft: rgba(232, 96, 60, 0.40); /* underline color for inline links */
	--coral-faint: rgba(232, 96, 60, 0.08);

	/* ---- Surfaces ---- */
	--bg: #f4f4f2;            /* outer page background (outside the card) */
	--surface: #ffffff;       /* cards, elevated surfaces */
	--surface-muted: #f8f7f5; /* page background, muted bands */
	--paper: #fafaf8;         /* warm paper surface */
	--stone: #f1f1f2;         /* "manila folder" fill, cool stone */
	--beige-light: #f4f2ec;   /* warm tinted band */

	/* ---- Semantic text (WCAG-safe on white / beige / stone) ---- */
	--text: var(--navy);
	--text-muted: #47546f;    /* secondary copy, AAA on white */
	--text-subtle: #525c75;   /* tertiary copy, AAA on white */
	--text-placeholder: #788295;
	--text-disabled: #9198a9;
	--text-inverse: #ffffff;

	/* ---- Actions ---- */
	--action: var(--coral);
	--action-hover: var(--coral-hover);

	/* ---- Status (fill + AA foreground companions) ---- */
	--success: var(--lime-dark);
	--success-bg: var(--lime-light);
	--success-fg: var(--lime-text);

	--danger: #dc2626;
	--danger-hover: #b91c1c;
	--danger-light: #fef2f2;
	--danger-fg: #991b1b;

	--warning: #d97706;
	--warning-light: #fffbeb;
	--warning-fg: #92400e;

	--info: #0d9488;
	--info-light: #f0fdfa;
	--info-fg: #115e59;

	--accent: #7c3aed;
	--accent-light: #f5f3ff;
	--accent-fg: #5b21b6;

	/* ---- Review tier ladder (used in scan/quality reports) ---- */
	--tier-1: var(--coral);
	--tier-2: var(--warning);
	--tier-3: var(--info);
	--tier-4: var(--accent);
}

/* ============================================================
   CertREV, Typography tokens
   ------------------------------------------------------------
   Four functional roles. The editorial voice = serif headings +
   mono eyebrows + sans body. Allura is reserved for signatures.

     serif    Playfair Display   display, headings, money figures
     sans     DM Sans            body, UI, buttons, labels
     mono     JetBrains Mono     eyebrows, metadata, data, tags
     wordmark Plus Jakarta Sans  the "CertREV" lockup only (800)
     script   Allura             signatures, certificate flourishes
   ============================================================ */

:root {
	/* ---- Families ---- */
	--font-serif: 'Playfair Display', ui-serif, Georgia, 'Times New Roman', serif;
	--font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--font-wordmark: 'Plus Jakarta Sans', -apple-system, system-ui, Helvetica, Arial, sans-serif;
	--font-script: 'Allura', 'Brush Script MT', cursive;

	/* ---- Weights ---- */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-black: 900;
	--weight-wordmark: 800;

	/* ---- Display / heading scale (Playfair) ---- */
	--text-display: 44px;   /* hero / page titles */
	--text-h1: 36px;
	--text-h2: 30px;
	--text-h3: 26px;
	--text-h4: 22px;
	--text-title: 18px;     /* card / row titles */

	/* ---- Body scale (DM Sans) ---- */
	--text-lead: 18px;      /* intro paragraphs */
	--text-body: 16px;      /* default reading size */
	--text-body-sm: 15px;   /* dense body / email body */
	--text-ui: 14px;        /* UI labels, buttons */
	--text-caption: 13px;
	--text-fine: 12px;

	/* ---- Eyebrow / label (JetBrains Mono) ---- */
	--text-eyebrow: 10px;
	--tracking-eyebrow: 0.18em;   /* uppercase mono labels */
	--tracking-wordmark: 0.04em;

	/* ---- Line heights ---- */
	--leading-tight: 1.15;   /* display headings */
	--leading-snug: 1.3;     /* titles */
	--leading-body: 1.65;    /* body copy */
	--leading-ui: 1.45;

	/* ---- Heading letter-spacing ---- */
	--tracking-heading: -0.01em;
}

/* ============================================================
   CertREV, Spacing, radius, shadow & layout tokens
   ------------------------------------------------------------
   4px base grid. Radii follow the portal scale (tag 8 → input/
   button 12 → card 16) plus the editorial 6/8/10 used in emails.
   Shadows are soft and navy-tinted, never neutral gray.
   ============================================================ */

:root {
	/* ---- Spacing scale (4px base) ---- */
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;   /* card padding */
	--space-10: 40px;  /* email card padding */
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;  /* section rhythm */
	--space-24: 96px;

	/* ---- Radius ---- */
	--radius-xs: 4px;    /* chips, lime tags, mono pills */
	--radius-sm: 6px;    /* editorial buttons, email surfaces */
	--radius-md: 8px;    /* tags, badges, email card */
	--radius-lg: 12px;   /* buttons, inputs, selects */
	--radius-xl: 16px;   /* cards, modals */
	--radius-2xl: 20px;
	--radius-full: 9999px;

	/* ---- Borders ---- */
	--border-hair: 1px solid var(--navy-10);
	--border-card: 2px solid var(--navy-10);
	--border-strong: 1.5px solid var(--navy);   /* "manila folder" frame */
	--border-width-card: 2px;

	/* ---- Shadows (navy-tinted, soft) ---- */
	--shadow-xs: 0 1px 0 rgba(10, 27, 63, 0.04);
	--shadow-sm: 0 1px 2px rgba(10, 27, 63, 0.06), 0 1px 1px rgba(10, 27, 63, 0.04);
	--shadow-md: 0 4px 12px rgba(10, 27, 63, 0.08);
	--shadow-lg: 0 10px 30px rgba(10, 27, 63, 0.10);
	--shadow-xl: 0 20px 50px rgba(10, 27, 63, 0.14);
	--shadow-folder: 0 2px 10px rgba(10, 27, 63, 0.08);  /* email manila frame */
	--shadow-email: 0 1px 0 rgba(10, 27, 63, 0.04), 0 12px 36px rgba(10, 27, 63, 0.07);

	/* ---- Focus ring ---- */
	--ring-coral: 0 0 0 2px var(--surface), 0 0 0 4px var(--coral);

	/* ---- Motion ---- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
	--dur-fast: 200ms; /* @kind other */
	--dur-base: 300ms; /* @kind other */
	--dur-slow: 600ms; /* @kind other */

	/* ---- Layout ---- */
	--email-width: 600px;
	--content-max: 1200px;
	--prose-max: 720px;
}

/* ============================================================
   CertREV, Base element defaults & editorial helpers
   ------------------------------------------------------------
   Light-touch resets + a handful of utility classes that encode
   the editorial voice (eyebrow, wordmark, prose). Optional for
   consumers, but every specimen card relies on them.
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---- Headings default to the serif voice ---- */
h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-heading);
	color: var(--navy);
	margin: 0;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--navy);
	text-decoration: underline;
	text-decoration-color: var(--coral-soft);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
	text-decoration-color: var(--coral);
}

/* ---- The mono eyebrow, the system's signature label ---- */
.cr-eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	font-weight: var(--weight-regular);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--navy-55);
}

/* ---- The CertREV wordmark ---- */
.cr-wordmark {
	font-family: var(--font-wordmark);
	font-weight: var(--weight-wordmark);
	letter-spacing: var(--tracking-wordmark);
	color: var(--navy);
}

/* ---- Signature flourish ---- */
.cr-signature {
	font-family: var(--font-script);
	color: var(--navy);
}

/* ---- Serif italic, the "Owen & Kim" sign-off voice ---- */
.cr-serif-italic {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--navy);
}

/* ---- Lime chip ---- */
.cr-chip {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--radius-xs);
	background: var(--lime);
	color: var(--navy);
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	line-height: 1.2;
}

/* ---- Hairline rule ---- */
.cr-rule {
	border: 0;
	border-top: 1px solid var(--navy-10);
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   CertREV, Component classes
   ------------------------------------------------------------
   Interactive styling (hover / focus / active) for the React
   primitives. Components reference these classes so states work
   without JS. Shipped to consumers via styles.css.
   ============================================================ */

/* ---------------- Button ---------------- */
.cr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-weight: 600;
	line-height: 1;
	border: 2px solid transparent;
	border-radius: var(--radius-lg);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}
.cr-btn:focus-visible { outline: none; box-shadow: var(--ring-coral); }
.cr-btn--sm { padding: 10px 18px; font-size: 13px; }
.cr-btn--md { padding: 13px 26px; font-size: 14px; }
.cr-btn--lg { padding: 16px 34px; font-size: 16px; }

.cr-btn--navy { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.cr-btn--navy:hover { background: var(--navy-90); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.cr-btn--primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-md); }
.cr-btn--primary:hover { background: var(--coral-hover); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.cr-btn--secondary { background: transparent; color: var(--coral); border-color: var(--coral); }
.cr-btn--secondary:hover { background: var(--coral); color: #fff; }
.cr-btn--outline { background: transparent; color: var(--navy); border-color: var(--navy-35); }
.cr-btn--outline:hover { background: var(--navy-03); border-color: var(--navy); }
.cr-btn--ghost { background: transparent; color: var(--navy); }
.cr-btn--ghost:hover { background: var(--navy-10); color: var(--coral); }
.cr-btn--danger { background: var(--danger); color: #fff; box-shadow: var(--shadow-md); }
.cr-btn--danger:hover { background: var(--danger-hover); }
.cr-btn:active { transform: translateY(0); }
.cr-btn[disabled], .cr-btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.cr-btn.is-loading { opacity: 0.75; cursor: progress; }
.cr-btn__spin { animation: cr-spin 0.7s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* ---------------- Badge ---------------- */
.cr-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.cr-badge--default { background: var(--navy-10); color: var(--navy); }
.cr-badge--coral { background: var(--coral-faint); color: var(--coral-deep); }
.cr-badge--navy { background: var(--navy); color: #fff; }
.cr-badge--lime { background: var(--lime); color: var(--lime-text); }
.cr-badge--success { background: var(--success-bg); color: var(--success-fg); }
.cr-badge--danger { background: var(--danger-light); color: var(--danger-fg); }
.cr-badge--warning { background: var(--warning-light); color: var(--warning-fg); }
.cr-badge--info { background: var(--info-light); color: var(--info-fg); }
.cr-badge--accent { background: var(--accent-light); color: var(--accent-fg); }

/* ---------------- Lime chip (mono) ---------------- */
.cr-limechip {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--radius-xs);
	background: var(--lime);
	color: var(--navy);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.3;
}
.cr-limechip--md { font-size: 11px; padding: 4px 10px; }

/* ---------------- Card ---------------- */
.cr-card {
	border-radius: var(--radius-xl);
	border: 2px solid var(--navy-10);
	box-shadow: var(--shadow-lg);
	transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
	background: var(--surface);
}
.cr-card--padded { padding: 32px; }
.cr-card--beige { background: var(--beige); }
.cr-card--coral { background: var(--coral); color: #fff; }
.cr-card--navy { background: var(--navy); color: #fff; }
.cr-card--lime { background: var(--lime); color: var(--navy); }
.cr-card--interactive:hover { box-shadow: var(--shadow-xl); border-color: var(--navy-35); transform: translateY(-2px); }

/* ---------------- Field (input / select) ---------------- */
.cr-field { width: 100%; }
.cr-field__label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.cr-field__control {
	width: 100%;
	padding: 13px 16px;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--navy);
	background: var(--surface);
	border: 2px solid var(--navy-10);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
		background var(--dur-base) var(--ease-out);
}
.cr-field__control::placeholder { color: var(--text-placeholder); }
.cr-field__control:hover { border-color: var(--navy-35); }
.cr-field__control:focus { outline: none; border-color: var(--coral); box-shadow: var(--ring-coral); }
.cr-field__control:disabled { opacity: 0.5; cursor: not-allowed; background: var(--navy-03); }
.cr-field--error .cr-field__control { border-color: var(--coral); background: var(--coral-faint); }
.cr-field__msg { margin-top: 8px; font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); }
.cr-field__msg--error { color: var(--coral-deep); font-weight: 500; }
.cr-select-wrap { position: relative; }
.cr-select-wrap select { appearance: none; cursor: pointer; padding-right: 44px; }
.cr-select-wrap .cr-select__chevron {
	position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
	pointer-events: none; color: var(--text-muted);
}

/* ---------------- Checkbox ---------------- */
.cr-check { display: inline-flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.cr-check input {
	appearance: none; -webkit-appearance: none;
	flex-shrink: 0; width: 20px; height: 20px; margin: 0;
	border: 2px solid var(--navy-35); border-radius: 6px; background: var(--surface);
	cursor: pointer; position: relative;
	transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.cr-check input:hover { border-color: var(--navy-55); }
.cr-check input:focus-visible { outline: none; box-shadow: var(--ring-coral); }
.cr-check input:checked { background: var(--coral); border-color: var(--coral); }
.cr-check input:checked::after {
	content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cr-check input:disabled { opacity: 0.5; cursor: not-allowed; }
.cr-check__label { font-family: var(--font-sans); font-size: 14px; color: var(--navy); line-height: 1.5; }

/* ---------------- Inline link ---------------- */
.cr-link {
	color: var(--navy); text-decoration: underline; font-weight: 500;
	text-decoration-color: var(--coral-soft); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
	transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.cr-link:hover { text-decoration-color: var(--coral); }

/* ---------------- Custom select (CrSelect listbox) ---------------- */
.crsel { position: relative; width: 100%; }
.crsel-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; background: var(--surface); border: 2px solid var(--navy-10); border-radius: var(--radius-lg); font-family: var(--font-sans); font-size: 13.5px; color: var(--navy); cursor: pointer; text-align: left; box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.crsel-btn:hover { border-color: var(--navy-35); }
.crsel-btn:focus-visible { outline: none; border-color: var(--coral); box-shadow: var(--ring-coral); }
.crsel.open .crsel-btn { border-color: var(--coral); }
.crsel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crsel-chev { flex-shrink: 0; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.crsel.open .crsel-chev { transform: rotate(180deg); }
.crsel.disabled .crsel-btn { opacity: 0.55; cursor: not-allowed; }
.crsel-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; margin: 0; padding: 5px; list-style: none; background: var(--surface); border: 1px solid var(--navy-10); border-radius: 12px; box-shadow: var(--shadow-xl); max-height: 280px; overflow-y: auto; animation: crsel-in 0.14s var(--ease-out); }
@keyframes crsel-in { from { opacity: 0; transform: translateY(-4px); } }
.crsel-opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45; color: var(--navy-75); cursor: pointer; }
.crsel-opt-label { flex: 1; min-width: 0; }
.crsel-opt.hi { background: var(--navy-06); color: var(--navy); }
.crsel-opt.on { color: var(--navy); font-weight: 600; }
.crsel-opt.on svg { color: var(--coral); flex-shrink: 0; }