@font-face {
    font-family: Aeonik-Bold;
    src: url(/_static/fonts/Aeonik/Aeonik-Bold.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Regular;
    src: url(/_static/fonts/Aeonik/Aeonik-Regular.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Medium;
    src: url(/_static/Fonts/Aeonik-Medium.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Light;
    src: url(/_static/Fonts/Aeonik-Light.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Gilroy-light;
    src: url(/_static/Fonts/Gilroy-Light.woff2) format("woff2");
    font-display: auto
}
@font-face {
    font-family: Gilroy-bold;
    src: url(/_static/Fonts/Gilroy-Bold.woff2) format("woff2");
    font-display: auto
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latin.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: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latin.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: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latin.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: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latin.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: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latin.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: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latin.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: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latin.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: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latin.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: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latin.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: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latin.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: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latin.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: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latin.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: Inter;
    src: url("/assets/fonts/Inter-VariableFont_opsz%2Cwght.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-display: swap
}
@font-face {
    font-family: Aeonik-Bold;
    src: url(/_static/fonts/Aeonik/Aeonik-Bold.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Regular;
    src: url(/_static/fonts/Aeonik/Aeonik-Regular.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Medium;
    src: url(/_static/Fonts/Aeonik-Medium.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Light;
    src: url(/_static/Fonts/Aeonik-Light.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Gilroy-light;
    src: url(/_static/Fonts/Gilroy-Light.woff2) format("woff2");
    font-display: auto
}
@font-face {
    font-family: Gilroy-bold;
    src: url(/_static/Fonts/Gilroy-Bold.woff2) format("woff2");
    font-display: auto
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latin.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: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latin.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: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latin.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: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latin.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: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latin.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: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latin.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: Aeonik-Bold;
    src: url(/_static/fonts/Aeonik/Aeonik-Bold.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Regular;
    src: url(/_static/fonts/Aeonik/Aeonik-Regular.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Medium;
    src: url(/_static/Fonts/Aeonik-Medium.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Light;
    src: url(/_static/Fonts/Aeonik-Light.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Gilroy-light;
    src: url(/_static/Fonts/Gilroy-Light.woff2) format("woff2");
    font-display: auto
}
@font-face {
    font-family: Gilroy-bold;
    src: url(/_static/Fonts/Gilroy-Bold.woff2) format("woff2");
    font-display: auto
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latin.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: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latin.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: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latin.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: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latin.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: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latin.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: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latin.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: Aeonik-Bold;
    src: url(/_static/fonts/Aeonik/Aeonik-Bold.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Regular;
    src: url(/_static/fonts/Aeonik/Aeonik-Regular.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Medium;
    src: url(/_static/Fonts/Aeonik-Medium.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Light;
    src: url(/_static/Fonts/Aeonik-Light.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Gilroy-light;
    src: url(/_static/Fonts/Gilroy-Light.woff2) format("woff2");
    font-display: auto
}
@font-face {
    font-family: Gilroy-bold;
    src: url(/_static/Fonts/Gilroy-Bold.woff2) format("woff2");
    font-display: auto
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latin.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: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latin.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: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latin.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: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latin.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: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latin.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: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latin.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: Aeonik-Bold;
    src: url(/_static/fonts/Aeonik/Aeonik-Bold.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Regular;
    src: url(/_static/fonts/Aeonik/Aeonik-Regular.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Medium;
    src: url(/_static/Fonts/Aeonik-Medium.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Aeonik-Light;
    src: url(/_static/Fonts/Aeonik-Light.otf) format("opentype");
    font-display: auto
}
@font-face {
    font-family: Gilroy-light;
    src: url(/_static/Fonts/Gilroy-Light.woff2) format("woff2");
    font-display: auto
}
@font-face {
    font-family: Gilroy-bold;
    src: url(/_static/Fonts/Gilroy-Bold.woff2) format("woff2");
    font-display: auto
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-200';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-200-latin.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: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-300';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-300-latin.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: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-400';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-400-latin.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: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-500';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-500-latin.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: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-600';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-600-latin.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: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latinext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins-700';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/_static/Uploads/GoogleFonts/Poppins-700-latin.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;
}

.default {
  --bg-color: #FFFFFF;
  --bg-color-rgb: 255,255,255;
  --button-padding: 0.5rem 2rem;
  --button-padding-rgb: ;
  --button-radius: 0.2rem;
  --button-radius-rgb: ;
  --font-content: Default-Regular;
  --font-content-rgb: ;
  --font-heading: Gilroy-Light;
  --font-heading-rgb: ;
  --font-link: Default;
  --font-link-rgb: ;
  --font-size: 1rem;
  --font-size-rgb: ;
  --input-line-height: 2rem;
  --input-line-height-rgb: ;
  --input-radius: 0.2rem;
  --input-radius-rgb: ;
  --negative-color: #FF3131;
  --negative-color-rgb: 255,49,49;
  --neutral-color-0: #FFFFFF;
  --neutral-color-0-rgb: 255,255,255;
  --neutral-color-100: #E9E9EB;
  --neutral-color-100-rgb: 233,233,235;
  --neutral-color-1000: #000000;
  --neutral-color-1000-rgb: 0,0,0;
  --neutral-color-200: #E0E0E0;
  --neutral-color-200-rgb: 224,224,224;
  --neutral-color-400: #BCBCBB;
  --neutral-color-400-rgb: 188,188,187;
  --neutral-color-50: #FAFAF9;
  --neutral-color-50-rgb: 250,250,249;
  --neutral-color-600: #70706F;
  --neutral-color-600-rgb: 112,112,111;
  --neutral-color-800: #2C2C2C;
  --neutral-color-800-rgb: 44,44,44;
  --other--color-BBRed: #FF4B4B;
  --other--color-BBRed-rgb: 255,75,75;
  --positive-color: #32C77C;
  --positive-color-rgb: 50,199,124;
  --primary--color-Toolkit-Grey: #f6f7f9;
  --primary--color-Toolkit-Grey-rgb: 246,247,249;
  --primary-1: #ab29ff;
  --primary-1-rgb: 171,41,204;
  --primary-color-100: #F3F9FE;
  --primary-color-100-rgb: 243,249,254;
  --primary-color-1000: #4499F2;
  --primary-color-1000-rgb: 68,153,242;
  --primary-color-1200: #2A81DC;
  --primary-color-1200-rgb: 42,129,220;
  --primary-color-800: #6CA7ED;
  --primary-color-800-rgb: 108,167,237;
  --raftest-font-size: 20px;
  --raftest-font-size-rgb: ;
  --secondary-1: #bea050;
  --secondary-1-rgb: 190,160,80;
  --secondary-color-100: #ECF0F4;
  --secondary-color-100-rgb: 236,240,244;
  --secondary-color-1000: #08213F;
  --secondary-color-1000-rgb: 8,33,63;
  --secondary-color-200: #D3D9E1;
  --secondary-color-200-rgb: 211,217,225;
  --secondary-color-400: #9FADBD;
  --secondary-color-400-rgb: 159,173,189;
  --secondary-color-50: #F7F9FA;
  --secondary-color-50-rgb: 247,249,250;
  --secondary-color-600: #728398;
  --secondary-color-600-rgb: 114,131,152;
  --secondary-color-800: #354B66;
  --secondary-color-800-rgb: 53,75,102;
  --warning-color: #FEC84C;
  --warning-color-rgb: 254,200,76;
}
.default .h2, .default h2, default .h2, default h2 {
  font-family: Default-Bold;
  text-transform: none;
  text-size: 10px;
  font-size: 20px;
  line-height: 20px;
}
.default .h1, .default h1, default .h1, default h1 {
  font-family: Default-Bold;
  text-transform: capitalize;
  font-size: 24px;
  line-height: 30px;
}
.default .p, .default p, default .p, default p {
  font-family: Default-Regular;
  text-transform: none;
  font-size: 16px;
}
.default .h3, .default h3, default .h3, default h3 {
  font-family: Default-Bold;
  text-transform: none;
  font-size: 18px;
  line-height: 20px;
}
.default .h6, .default h6, default .h6, default h6 {
  font-family: Default-Regular;
  text-transform: none;
  font-size: 50px;
  line-height: 2;
}
.default .Button .button__Primary {
  background-color: var(--primary-color-1200);
  color: var(--primary--color-Toolkit-Grey);
  font-family: Default-Regular;
  font-size: 16px;
  border-width: 0;
  border-radius: 5px;
  padding-top: 10px;
  padding-right: 22px;
  padding-bottom: 10px;
  padding-left: 22px;
  text-transform: none;
  border-radius-top-left: 15px;
  border-radius-top-right: 0px;
  border-radius-bottom-left: 0px;
  border-radius-bottom-right: 15px;
  border-radius-select: false;
}
.default .Button .button__Primary:hover {
  background-color: var(--primary-color-1200);
  color: var(--bg-color);
}
.default .Button .button__Primary:active {
  background-color: var(--warning-color);
}
.default .Button .button__Primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0.5em;
}
.default .Button .button__Primary::before {
  content: "";
  flex: 0 0 auto;
  order: 1;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("/_static/Uploads/27_arrow-right.svg") no-repeat center/contain;
  mask: url("/_static/Uploads/27_arrow-right.svg") no-repeat center/contain;
  transition: transform 0.25s ease;
}
.default .Button .button__Primary:hover::before {
  transform: translateX(3px);
}
.default .Button .button__Secondary {
  background-color: var(--bg-color);
  border-color: var(--primary-color-1200);
  color: var(--primary-color-1200);
  border-width: 2px;
  border-radius: 5px;
  font-family: Default-Regular;
  font-size: 18px;
  padding-top: 12px;
  padding-right: 25px;
  padding-bottom: 12px;
  padding-left: 25px;
  text-transform: none;
}
.default .Button .button__Secondary:hover {
  background-color: var(--primary-color-100);
}
.default .Button .button__Form__Matrix__Add {
  background-color: var(--primary-color-1000);
  font-size: 16px;
  border-width: 0px;
  border-radius: 5px;
  font-family: Aeonik-Regular;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.default .Button .button__Form__Matrix__Remove {
  background-color: var(--warning-color);
  font-family: Aeonik-Regular;
  font-size: 16px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.default .Button .button__Form__Next {
  background-color: var(--primary-color-1200);
  border-color: var(--bg-color);
  color: var(--bg-color);
  border-radius: 5px;
  padding-top: 12px;
  padding-right: 25px;
  padding-bottom: 12px;
  padding-left: 25px;
  font-size: 18px;
  font-family: Default-Regular;
  border-width: 0;
}
.default .Button .button__Form__Next:hover {
  background-color: var(--secondary-color-600);
}
.default .Button .button__Form__Prev {
  background-color: var(--neutral-color-0);
  border-color: var(--primary-color-1200);
  color: var(--primary-color-1200);
  border-radius: 5px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 25px;
  padding-left: 25px;
  font-size: 18px;
  font-family: Aeonik-Regular;
}
.default .Button .button__Form__Prev:hover {
  border-color: var(--secondary-color-600);
  color: var(--secondary-color-600);
}
.default .Button .button__SAIntaClaus {
  background-color: var(--negative-color);
  color: var(--neutral-color-0);
  font-family: Gilroy-bold;
  font-size: 20px;
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
  border-radius: 5px;
  border-width: 0px;
}
.default .Button .button__SAIntaClaus:hover {
  background-color: var(--warning-color);
}
.default .Button .button__Toolkit_Add {
  background-color: var(--primary-color-100);
  color: var(--primary-color-1000);
  font-family: Aeonik-Regular;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.default .Button .button__Toolkit_Add:hover {
  background-color: var(--primary-color-100);
  border-color: var(--primary-color-1000);
  padding-top: 9px;
  padding-right: 19px;
  padding-bottom: 9px;
  padding-left: 19px;
  border-width: 1px;
}
.default .Button .button__Toolkit_Primary {
  background-color: var(--primary--color-Toolkit-Grey);
  color: var(--neutral-color-1000);
  font-family: Aeonik-Regular;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
  font-size: 14px;
}
.default .Button .button__Toolkit_Primary:hover {
  background-color: var(--secondary-color-200);
}
.default .Button .button__Toolkit_Secondary {
  background-color: var(--primary--color-Name);
  color: var(--neutral-color-1000);
  font-family: Aeonik-Regular;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.default .Button .button__Toolkit_Secondary:hover {
  background-color: var(--secondary-color-200);
}
.default .Button .button__Toolkit_Tertiary {
  background-color: var(--neutral-color-0);
  font-family: Aeonik-Regular;
  border-width: 0px;
  border-radius: 5px;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.default .Button .button__Toolkit_Tertiary:hover {
  background-color: var(--secondary-color-200);
}
.default .Button .button__Toolbar {
  background-color: var(--neutral-color-0);
  border-color: var(--secondary-color-200);
  color: var(--neutral-color-1000);
  font-family: Default-Regular;
  font-size: 13px;
  border-radius: 5px;
  border-width: 1px;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}
.default .Button .button__Toolbar:hover {
  background-color: var(--secondary-color-100);
}

.default .hide-default-link .hide-default-link a {
  text-decoration: none;
}
.default .BisbrickMaster h1, .default .BisbrickMaster h2, .default .BisbrickMaster h3, .default .BisbrickMaster h4, .default .BisbrickMaster h5, .default .BisbrickMaster h6 {
  font-family: var(--font-heading);
  font-weight: normal;
}
.default .BisbrickMaster h1 {
  font-size: 3.5rem;
  font-family: Gilroy-bold;
  font-style: normal;
  line-height: 65px;
  letter-spacing: -0.01em;
}
.default .BisbrickMaster h2 {
  font-family: Gilroy;
  font-style: normal;
  font-size: 3rem;
  line-height: 56px;
}
.default .BisbrickMaster h4 {
  font-size: 2rem;
  font-family: Aeonik;
  line-height: 48px;
}
.default .BisbrickMaster h5 {
  font-size: 1.5rem;
  font-family: Aeonik;
  line-height: 36px;
}
.default .BisbrickMaster {
  font-family: var(--font-content);
}
.default .BisbrickMaster optgroup, .default .BisbrickMaster select, .default .BisbrickMaster textarea {
  font-family: var(--font-heading) !important;
}
.default .BisbrickMaster input {
  font-family: var(--font-content);
}
.default .BisbrickMaster a {
  font-family: var(--font-link);
  text-decoration: none !important;
  cursor: pointer;
  color: inherit;
}
.BisbrickMaster p {
  font-size: 1rem;
  font-family: Aeonik;
  line-height: 24px;
  letter-spacing: 0.01em;
}
.BisbrickMaster header {
  z-index: 100;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.default .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.default .top-bar .top-bar[_ngcontent-lkq-c41] {
  height: 50px;
}
.default .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .default .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.default .top-bar .top-bar-inner span {
  font-size: 14px;
}
.default .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .default .top-bar .links ul {
    padding-left: 0px;
  }
}
.default .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.default .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.default .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.default .top-bar .user-info-section {
  font-size: 14px !important;
}
.default .top-bar .user-info-section img {
  height: 20px;
}
.default .top-bar .user-info-section li {
  list-style-type: none;
}
.default .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .default .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.default .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.default .middle-bar {
  background-color: var(--bg-color);
  padding: 1.6rem 0rem;
}
.default .middle-bar .floating-content {
  transform: translateX(-53%) !important;
}
.default .middle-bar .floating-content .DescriptionLink .border-right {
  max-width: 244px;
}
.default .middle-bar-inner {
  display: inline-flex;
  height: 38px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .default .middle-bar-inner {
    justify-content: space-between;
  }
}
.default .middle-bar .logo img {
  height: 85px;
  padding: 0.5rem 1rem;
  /* Responsive layout - when the screen is <576px wide */
}
.default .middle-bar .searching {
  cursor: wait;
}
.default .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .default .middle-bar .search-section {
    display: block !important;
  }
}
.default .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.default .middle-bar .search-section i {
  font-size: 1.4rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.default .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 250px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.default .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
@charset "UTF-8";
.default .navbar {
  padding: 0 !important;
}
.default .navbar .nav-item {
  padding: 0 1rem;
}
.default .navbar .navbar-nav .nav-link {
  color: var(--black-color);
  cursor: pointer;
  font-family: Gilroy-Bold !important;
}
.default .navbar .navbar-nav .nav-link:hover {
  color: var(--primary-color-1200) !important;
}
.default .navbar .nav-link.active,
.default .navbar .nav-link.active-parent,
.default .navbar .show > .nav-link {
  color: var(--primary-color-1200);
  border-bottom: 1px solid var(--primary-color-1200);
}
.default .navbar .navbar-collapse {
  justify-content: center;
}
.default .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.default .navbar .navbar-toggler i {
  color: var(#021e3f);
  font-size: 2.1rem;
}
.default .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.BisbrickMaster .hero_banner .jumbotron {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.BisbrickMaster .hero_banner .jumbotron h1 {
  color: var(--white-color);
  font-size: 2.5em;
}
.BisbrickMaster .hero_banner .jumbotron h1 span {
  font-weight: 300;
}
.BisbrickMaster .IconTextCard .card {
  border: 0px !important;
}
.BisbrickMaster .IconTextCard .card .div-as-link .card-body .card-title {
  font-size: 1.4rem !important;
  font-weight: bold !important;
  color: var(--base-color);
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .BisbrickMaster .IconTextCard .card .div-as-link .card-body .card-title {
    font-size: 1.1rem !important;
  }
}
.BisbrickMaster .BisbrickNieuwsbriefInschrijving span {
  color: white;
}
.BisbrickMaster .BisbrickNieuwsbriefInschrijving .sv_main .sv_container .sv_body .sv_p_root .sv_q {
  padding: 0;
  box-sizing: border-box;
  overflow: auto;
}
.BisbrickMaster .MultiColumn .sv_main .sv_container .sv_body .sv_p_root .sv_q {
  padding: 8px 0;
  box-sizing: border-box;
  overflow: auto;
}
.BisbrickMaster .MultiColumn .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.BisbrickMaster .form-control:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.BisbrickMaster .accordion {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-family: "Aeonik";
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
@media (min-width: 992px) {
  .BisbrickMaster .accordion {
    display: none;
  }
}
.BisbrickMaster .accordion .main-menu {
  background-color: #FFFFFF;
  padding: 0.7rem 1rem;
}
.BisbrickMaster .accordion .main-menu .main-menu-item,
.BisbrickMaster .accordion .main-menu a {
  color: #2C2C2C;
  text-transform: uppercase;
  font-size: 1rem;
}
.BisbrickMaster .accordion .main-menu .sub-menu {
  list-style-type: none;
  margin-left: -1rem;
  margin-right: -1rem;
  font-family: "Aeonik";
  font-weight: bold;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #F1F7FC;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-link {
  color: #F85600;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item {
  padding: 0.8rem 1rem 0.5rem 0rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  flex: 1;
  flex-wrap: wrap;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .menu-icon {
  width: 30px;
  margin-left: 1rem;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item {
  list-style-type: none;
  display: block;
  width: 100%;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item li a,
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item li span {
  color: #1B1B1B;
  font-size: 0.8rem;
  font-weight: 500;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-0,
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-1 {
  color: #F5F4F2;
  text-transform: uppercase;
  font-size: 0.9rem;
  list-style-type: none;
  padding: 0.7rem 0 0.7rem 2.5rem;
  margin: 0 0 0 -2rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-0 {
  background-color: #00C2F2;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-1 {
  background-color: #1B1B1B;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub {
  list-style-type: none;
  background-color: #F1F7FC;
  color: #F85600;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-left: -3rem;
  margin-bottom: -0.8rem;
  margin-top: 0.7rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-icon {
  width: 30px;
  margin-left: 1rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub li {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  flex: 1;
  flex-wrap: wrap;
  padding: 0.8rem 1rem 0.5rem 1rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub {
  list-style-type: none;
  display: block;
  width: 100%;
  margin-left: -1.5rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub li a,
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub li span {
  color: #1B1B1B;
  font-size: 0.8rem;
  font-weight: 500;
}
.BisbrickMaster .Button .button__Bisbrick__primary-default {
  height: 56px;
  background: linear-gradient(225deg, #3C98F2 0%, #3570F4 100%);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: var(--neutral-color-0) !important;
  padding: 16px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular;
  cursor: pointer;
}
.BisbrickMaster .Button .button__Bisbrick__primary-default:hover {
  box-shadow: none;
  background: #3C98F2;
}
.BisbrickMaster .Button .button__Bisbrick__primary-accent {
  height: 56px;
  background: linear-gradient(225deg, #FF4B4B 0%, #FF6532 100%);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: var(--neutral-color-0) !important;
  padding: 16px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular;
}
.BisbrickMaster .Button .button__Bisbrick__primary-accent:hover {
  box-shadow: none;
  background: #FF6532;
}
.BisbrickMaster .Button .button__Bisbrick__secondary-default {
  height: 56px;
  border: 2px solid #3C98F2;
  box-sizing: border-box;
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.15));
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular !important;
  color: #3C98F2;
}
.BisbrickMaster .Button .button__Bisbrick__secondary-default:hover {
  box-shadow: none;
  background: #3C98F2;
  color: var(--neutral-color-0);
}
.BisbrickMaster .Button .button__Bisbrick__diap-default {
  height: 56px;
  color: #FFFFFF !important;
  background-color: transparent;
  border: 2px solid white;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular !important;
  transition: all 0.2s ease-in-out;
}
.BisbrickMaster .Button .button__Bisbrick__diap-default:hover {
  border: 2px solid #3C98F2;
  color: #3C98F2 !important;
}
@charset "UTF-8";
.EuroloopMaster header {
  z-index: 100;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.EuroloopMaster .navbar {
  padding: 0 !important;
}
.EuroloopMaster .navbar .nav-item {
  padding: 0 1rem;
}
.EuroloopMaster .navbar .navbar-nav .nav-link {
  color: var(--black-color) !important;
  cursor: pointer;
  font-family: var(--font-link) !important;
}
.EuroloopMaster .navbar .navbar-nav .nav-link:hover {
  color: #6CA7ED !important;
}
.EuroloopMaster .navbar .nav-link.active,
.EuroloopMaster .navbar .nav-link.active-parent,
.EuroloopMaster .navbar .show > .nav-link {
  font-weight: bold;
  border-bottom: 1px solid var(--base-color);
}
.EuroloopMaster .navbar .navbar-collapse {
  justify-content: center;
}
.EuroloopMaster .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.EuroloopMaster .navbar .navbar-toggler i {
  color: var(--black-color);
  font-size: 2rem;
}
.EuroloopMaster .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.EuroloopMaster .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.EuroloopMaster .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.EuroloopMaster .top-bar .top-bar-inner span {
  font-size: 14px;
}
.EuroloopMaster .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .links ul {
    padding-left: 0px;
  }
}
.EuroloopMaster .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.EuroloopMaster .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.EuroloopMaster .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.EuroloopMaster .top-bar .user-info-section {
  font-size: 14px !important;
}
.EuroloopMaster .top-bar .user-info-section img {
  height: 20px;
}
.EuroloopMaster .top-bar .user-info-section li {
  list-style-type: none;
}
.EuroloopMaster .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.EuroloopMaster .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.EuroloopMaster .middle-bar {
  background-color: var(--bg-color);
  padding: 1.5rem 0rem;
}
.EuroloopMaster .middle-bar-inner {
  display: inline-flex;
  height: 35px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .EuroloopMaster .middle-bar-inner {
    justify-content: space-between;
  }
}
.EuroloopMaster .middle-bar .logo img {
  height: 35px;
  /* Responsive layout - when the screen is <576px wide */
}
.EuroloopMaster .middle-bar .searching {
  cursor: wait;
}
.EuroloopMaster .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .EuroloopMaster .middle-bar .search-section {
    display: block !important;
  }
}
.EuroloopMaster .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.EuroloopMaster .middle-bar .search-section i {
  font-size: 1.3rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.EuroloopMaster .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 200px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.EuroloopMaster .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
.default .BisbrickMaster .language-container {
  position: relative;
}
.default .BisbrickMaster .language-container .language-select-label {
  position: absolute;
  pointer-events: none;
}
.default .BisbrickMaster .language-container .language-select {
  padding: 0 0 0 16px;
  border: none;
  appearance: none;
  background-color: transparent;
}
@media (max-width: 992px) {
  .default .BisbrickMaster bisbrick-language {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media print {
  .default .col-md-1, .default .col-md-2, .default .col-md-3, .default .col-md-4, .default .col-md-5, .default .col-md-6, .default .col-md-7, .default .col-md-8, .default .col-md-9, .default .col-md-10, .default .col-md-11, .default .col-md-12 {
    float: left;
  }
  .default .col-md-12 {
    width: 100%;
  }
  .default .col-md-11 {
    width: 91.66666667%;
  }
  .default .col-md-10 {
    width: 83.33333333%;
  }
  .default .col-md-9 {
    width: 75%;
  }
  .default .col-md-8 {
    width: 66.66666667%;
  }
  .default .col-md-7 {
    width: 58.33333333%;
  }
  .default .col-md-6 {
    width: 50%;
  }
  .default .col-md-5 {
    width: 41.66666667%;
  }
  .default .col-md-4 {
    width: 33.33333333%;
  }
  .default .col-md-3 {
    width: 25%;
  }
  .default .col-md-2 {
    width: 16.66666667%;
  }
  .default .col-md-1 {
    width: 8.33333333%;
  }
}
.default .master-search .sv_main {
  width: 350px;
}
.default .master-search .sv_main .sd-body {
  padding: 0 !important;
}
.default .master-search .sd-action-bar {
  overflow: visible;
  margin-top: 0;
  padding: 0 !important;
}
.default .master-search .sv_nav {
  padding: 0 !important;
}
.default .master-search #sv-nav-complete {
  margin: 0 16px;
  position: absolute;
  right: -64px;
  top: 1px;
  z-index: 1;
}
.default .master-search .sv_q_text_root {
  width: 200px !important;
}
@media (max-width: 757.98px) {
  .default .ParagraphText-Image-Left .row {
    flow-direction: column-reverse;
  }
}
.default .BisbrickMaster .grayscaleOnHover img {
  -webkit-filter: grayscale(0);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
  transition: filter 0.3s ease;
  /* Optional: for a smooth transition effect */
  z-index: 0 !important;
}
.default .BisbrickMaster .grayscaleOnHover img:hover {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.default .BisbrickMaster .imageBlurOnHover img {
  z-index: 0 !important;
}
.default .BisbrickMaster .imageBlurOnHover img:hover {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}
.default .blurImageDuringRendering {
  /* Initial blur effect on the image */
  /* Define the keyframes for the unblur animation */
}
.default .blurImageDuringRendering img {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
  animation: unblur 2s ease-out forwards;
  /* Apply the animation */
}
@keyframes unblur {
  0% {
    -webkit-filter: blur(5px);
    /* Safari 6.0 - 9.0 */
    filter: blur(5px);
  }
  100% {
    -webkit-filter: blur(0px);
    /* Safari 6.0 - 9.0 */
    filter: blur(0px);
  }
}
.default .BisbrickMaster .shakeOnHover {
  /* Define the shake animation */
}
.default .BisbrickMaster .shakeOnHover img {
  z-index: 0 !important;
}
.default .BisbrickMaster .shakeOnHover img:hover {
  animation: shake 0.5s;
  /* Animation name and duration */
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(10px);
  }
  30% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(-10px);
  }
  60% {
    transform: translateX(10px);
  }
  70% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  90% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
.default .BisbrickMaster .AspectRatio .columnRight, .default .BisbrickMaster .AspectRatio .columntLeft {
  width: 100%;
  aspect-ratio: 16/17;
  background-color: #e0e0e0;
}
.default .hide-default-link .hide-default-link a {
  text-decoration: none;
}
.default .grecaptcha-badge {
  visibility: hidden;
}
.default .customCheckbox .custom-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.default .customCheckbox .custom-checkbox input[type=checkbox] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 4px;
  background-color: transparent;
  transition: all 0.2s ease;
  padding: 4px 4px;
}
.default .customCheckbox .custom-checkbox input[type=checkbox]:checked {
  background-color: #007bff;
  border-color: #007bff;
}
.default .right-container-column {
  display: flex;
  justify-content: right;
}

.default .app-shell {
  --app-gutter: clamp(16px, 3vw, 40px);
  --app-accent: #F45F3A;
  background: #F4F3F0;
}

/* Type (boards, 2026-10-14): Poppins on the app pages. It is set on the page body rather than on each
   rule, so bricks that carry no class get it too; the title bricks set Default-Bold inline, which only
   an !important can beat. The website pages on theme 13 never match .app-shell and keep Aeonik/Gilroy. */
.default .app-shell > main {
  font-family: "Poppins-400";
  color: #292D3E;
}
.default .app-shell > main [style*="Default-Bold"],
.default .app-shell > main [style*="Default-Black"] {
  font-family: "Poppins-600" !important;
}
.default .app-shell > main [style*="Default-Regular"],
.default .app-shell > main [style*="Default-Light"] {
  font-family: "Poppins-400" !important;
}
/* Real bold faces (Koos 2026-10-27): every Poppins family on theme 13 holds one weight, so a bolder weight
   on Poppins-400 ("MQL reached" in a <strong>, a chip, a cell button) was synthesized by the browser and
   came out fuzzy. Each bold element gets the family that carries its weight; synthesis is off so a bold
   that is missed here stays crisp (and visibly not bold) instead of smeared. */
.default .app-shell > main {
  font-synthesis: none;
}
.default .app-shell > main strong,
.default .app-shell > main b {
  font-family: "Poppins-700";
  font-weight: 700;
}
.default .app-shell > main .bb-chip {
  font-family: "Poppins-600";
}
.default .app-shell > main .table-cell-btn {
  font-family: "Poppins-500";
}

/* Widgets keep their own font and colours: Koos 2026-10-14, "Behoud de gantt en/of Kanbans (die zijn
   visueel al prima)". Everything above inherits, so the reset has to be explicit. */
.default .app-shell bisbrick-kanban,
.default .app-shell bisbrick-board,
.default .app-shell .gantt_container,
.default .app-shell [class*="dhx_"],
.default .app-shell [class^="wx-"],
.default .app-shell [class*=" wx-"] {
  font-family: var(--font-content);
  color: initial;
}

/* Room between the last brick and the footer: the same on every app page, and only from here -
   pages carry no trailing Line Spacer of their own (table-spacing.mjs trimPageEnd). */
.default .app-shell > main {
  padding-bottom: 100px;
}

/* Page gutter: everything below the app menu. A margin, because a brick's own padding is set
   inline on this same wrapper. */
.default .app-shell > main > bisbrick-list > div:not(:first-child) {
  width: auto;
  margin-left: var(--app-gutter);
  margin-right: var(--app-gutter);
}
/* width: auto above - the wrapper is a .col-md-12 (width: 100%), and 100% plus the two margins ran the
   page 2 x gutter past the right edge, with a horizontal scrollbar. */

/* Action buttons: compact, like the toolbar buttons of the planning and kanban bricks, instead of the
   theme's large website buttons; 5px corners as elsewhere in Bisbrick (Koos 2026-10-08). The geometry is
   his, the colours are the boards' (2026-10-14): one filled accent, everything else an outline. The
   transparent border keeps a primary as tall as a secondary beside it. */
.default .app-shell .Button .button {
  height: auto;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
}
.default .app-shell .Button .button__Primary,
.default .app-shell .Button .button__Primary:focus {
  background-color: #F45F3A;
  border-color: #F45F3A;
  color: #FFFFFF;
  font-family: "Poppins-600";
}
.default .app-shell .Button .button__Primary:hover {
  background-color: #D94A27;
  border-color: #D94A27;
  color: #FFFFFF;
}
.default .app-shell .Button .button__Secondary {
  background-color: #FFFFFF;
  border: 1px solid #DCD6CB;
  color: #292D3E;
}
.default .app-shell .Button .button__Secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}
/* Text buttons (card actions such as "Edit all", "View all notes", "Delete account" on the CRM record pages):
   an outline in the accent, so they stay quieter than the one filled primary per header (Koos 2026-10-08).
   The theme's own button__Text is filled in a blue of its own (#537CFA), which is why it is overruled here. */
.default .app-shell .Button .button__Text,
.default .app-shell .Button .button__Text:focus {
  background-color: #FFFFFF;
  border: 1px solid #F45F3A;
  box-shadow: none;
  color: #F45F3A;
}
.default .app-shell .Button .button__Text:hover {
  background-color: #FDEDE8;
  border-color: #F45F3A;
  color: #F45F3A;
}

/* Buttons made of links in an htmlText (a record header, gen.mjs popupLink / popupMenu): the same look as
   the Button brick above. */
.default .app-shell .app-btn,
.default .app-shell a.app-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.default .app-shell .app-btn--primary,
.default .app-shell .app-btn--primary:hover {
  background-color: #F45F3A;
  color: #FFFFFF;
}
.default .app-shell .app-btn--primary:hover {
  filter: brightness(0.94);
}
.default .app-shell .app-btn--secondary,
.default .app-shell a.app-btn--secondary:hover {
  background-color: #FFFFFF;
  border-color: #DCD6CB;
  color: #292D3E;
}
.default .app-shell a.app-btn--secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}

/* Record header (Koos 2026-10-08): breadcrumb, name and meta line on the left, the actions on the right of
   the same row; on a narrow screen the actions wrap under the name. */
.default .app-shell .row:has(> div > .app-head) {
  align-items: flex-end;
  row-gap: 12px;
  margin: 20px 0 8px;
}
/* The header brick does not clip, and lies over the bricks after it only while its + Contacts list is open, so the
   list opens on top of the tabs. Not always: a raised header would also cover popups of the bricks below it,
   such as the Kanban card editor, which lives inside the board's own stacking layer. */
.default .app-shell bisbrick-multi-column:has(.app-head .app-menu:hover),
.default .app-shell bisbrick-multi-column:has(.app-head .app-menu:focus-within) {
  z-index: 30;
}
.default .app-shell bisbrick-multi-column:has(.app-head) .background {
  overflow: visible;
}
.default .app-shell .row > div:has(> .app-head) {
  flex: 1 1 320px;
  width: auto;
  min-width: 0;
  padding: 0 !important;
}
.default .app-shell .row > div:has(> .app-head-actions) {
  flex: 0 0 auto;
  width: auto;
  padding: 0 !important;
}
.default .app-shell .app-head p {
  margin: 0;
  text-align: left;
}
.default .app-shell .app-head .app-crumb {
  margin-bottom: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.default .app-shell .app-head .app-crumb a {
  color: #5F6475;
  text-decoration: none;
}
.default .app-shell .app-head .app-crumb a:hover {
  color: #292D3E;
  text-decoration: underline;
}
.default .app-shell .app-head .app-title {
  font-family: "Poppins-600";
  font-size: 28px;
  line-height: 34px;
  color: #292D3E;
}
.default .app-shell .app-head .app-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}
/* A status as a label, coloured by its code (data-s). */
.default .app-shell .app-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  background: #F1ECE4;
  color: #5F6475;
  font-family: "Poppins-500";
  font-size: 12px;
  line-height: 18px;
}
/* In a list the chips sit under one another, so the boards give them one width and centre the word
   (Contacts and Campaigns boards, artifact HtKnRMkmwY5aph5urR38LL). On a record page's header the chip
   is on its own beside the title, and keeps its natural width. */
.default .app-shell td .app-badge {
  min-width: 88px;
  text-align: center;
}
.default .app-shell .app-badge[data-s="live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.default .app-shell .app-badge[data-s="paused"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.default .app-shell .app-badge[data-s="done"] {
  color: #5F6475;
}
/* Live, but one or more parts switched off (Campaign App Campaigns StatusCode, Koos 2026-10-08):
   the Live green, lighter, with a ring so it reads as "not all of it". */
.default .app-shell .app-badge[data-s="partial"] {
  background: #E3F2E8;
  color: #1F6B3A;
  box-shadow: inset 0 0 0 1px #1F6B3A;
}
/* "Stop campaign now" only while the campaign itself is Live (data-s = its stored status code). */
.default .app-shell .app-stop {
  display: none;
}
.default .app-shell .app-stop[data-s="live"] {
  display: contents;
}
.default .app-shell .app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A button with a list of links under it, without code: open on hover, when the button has focus (a tap or
   a click), and while the keyboard is in it. A mouse click on a link gives no :focus-visible, so the list
   closes once the popup it opened covers it. */
.default .app-shell .app-menu {
  position: relative;
  display: inline-block;
}
.default .app-shell .app-menu__btn::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0 1px 3px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.default .app-shell .app-menu__list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
/* Bridges the 4px gap, so the list does not close on the way to it. */
.default .app-shell .app-menu__list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}
.default .app-shell .app-menu:hover .app-menu__list,
.default .app-shell .app-menu__btn:focus + .app-menu__list,
.default .app-shell .app-menu:has(:focus-visible) .app-menu__list {
  display: block;
}
.default .app-shell .app-menu__list a,
.default .app-shell .app-menu__list a:hover {
  display: block;
  padding: 7px 10px;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #292D3E;
  text-decoration: none;
  white-space: nowrap;
}
.default .app-shell .app-menu__list a:hover,
.default .app-shell .app-menu__list a:focus-visible {
  background: #F4F3F0;
}
/* ⋯: a menu without a caret (CRM record headers, crm-record-pages.mjs). */
.default .app-shell .app-menu__btn--more::after {
  content: none;
}
.default .app-shell .app-menu__btn--more {
  min-width: 32px;
  justify-content: center;
  letter-spacing: 1px;
}

/* CRM record pages (Account, Contact; CRM-App-spec/local/crm-record-pages.mjs, Koos 2026-10-08).
   The badge carries the stored value as its code: account type and status, contact status. */
.default .app-shell .app-badge[data-s="Active"],
.default .app-shell .app-badge[data-s="Customer"],
.default .app-shell .app-badge[data-s="Won"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.default .app-shell .app-badge[data-s="Prospect"],
.default .app-shell .app-badge[data-s="On hold"],
.default .app-shell .app-badge[data-s="On Hold"],
.default .app-shell .app-badge[data-s="Suspended"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.default .app-shell .app-badge[data-s="Partner"],
.default .app-shell .app-badge[data-s="Reseller"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.default .app-shell .app-badge[data-s="Inactive"],
.default .app-shell .app-badge[data-s="Archived"],
.default .app-shell .app-badge[data-s="Closed"],
.default .app-shell .app-badge[data-s="Left Company"],
.default .app-shell .app-badge[data-s="Do Not Contact"],
.default .app-shell .app-badge[data-s="Competitor"],
.default .app-shell .app-badge[data-s="Lost"] {
  color: #5F6475;
}
/* The CRM home board's urgency chips (CRM-App-spec/local/gen-crm-home-dataactions.mjs).
   These codes are a state the DataAction works out per row, not a stored value, so they are
   lowercase and cannot collide with the status names above. */
.default .app-shell .app-badge[data-s="late"] {
  background: #FBE9E7;
  color: #B3261E;
}
.default .app-shell .app-badge[data-s="soon"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.default .app-shell .app-badge[data-s="later"] {
  color: #5F6475;
}
.default .app-shell .app-badge[data-s=""] {
  display: none;
}
/* "Child of …" only when there is a parent. */
.default .app-shell .app-head .app-meta .app-meta__parent[data-v=""] {
  display: none;
}
/* The row-detail panel (Table.rowDetail, Web !2839). The boards put it on a quiet sand ground, indented so
   it starts under the first cell instead of under the chevron, with a hairline between it and the row.
   The component's own --neutral / --blue options are greys from the website palette, so the brick stays on
   "none" and the theme gives the panel its colour.
   !important is load-bearing: the component's own "td.bb-row-detail { padding: 16px }" carries Angular's
   encapsulation attribute and so ties on specificity — order would decide it, and the theme stylesheet is
   not guaranteed to load last. */
.default .app-shell td.bb-row-detail {
  background: #F8F7F4 !important;
  padding: 16px 18px 16px 48px !important;
  border-top: 1px solid #F1ECE4 !important;
}
/* The chevron: the component asks the theme for --secondary-color-700 and --primary-color-1000, which on
   theme 13 are the website's grey and blue. Overruled here so the handle stays in the app's own palette. */
.default .app-shell .bb-row-detail__toggle {
  color: #8A8F9E;
}
.default .app-shell .bb-row-detail__toggle:hover {
  background: #FDEDE8;
  color: #F45F3A;
}
.default .app-shell .bb-row-detail__toggle:focus-visible {
  outline: 2px solid #F45F3A;
}
/* A bar of actions at the foot of the panel, above it the lighter of the two rules (boards). */
.default .app-shell .app-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ECE8E0;
}

/* Overview: the main column and the aside are stacks of cards (a MultiColumn host is inline by default). */
.default .app-shell .app-card {
  display: block;
  margin-bottom: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  background: #FFFFFF;
  padding: 16px 18px 18px !important;
}
/* A 16px gutter between the main column and the aside, as between the cards; stacked below md there is none. */
@media (min-width: 768px) {
  .default .app-shell .app-overview .row > [class*="col-"] > .app-stack {
    display: block;
    padding-right: 8px;
  }
  .default .app-shell .app-overview .row > [class*="col-"] + [class*="col-"] > .app-stack {
    padding-right: 0;
    padding-left: 8px;
  }
}
/* An equal-height pair (the layout frame: two columns only as equal-height pairs). The lead column's
   capped list sets the height and the side column's card runs down to meet it, instead of leaving a
   step of empty ground. Every wrapper between the column and the card has to carry the height, hence
   the chain: MultiColumn renders host > .row > [col] around each level. Opt-in, because a stack that
   holds several cards must keep its natural height. */
@media (min-width: 768px) {
  .default .app-shell .app-overview--duo > .row > [class*="col-"] > .app-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .default .app-shell .app-overview--duo .app-stack > .row,
  .default .app-shell .app-overview--duo .app-stack > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .default .app-shell .app-overview--duo .app-stack .app-card {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
}
.default .app-shell .app-card p {
  margin: 0;
}
.default .app-shell .app-card .app-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-family: "Poppins-600";
  font-size: 16px;
  line-height: 22px;
  color: #292D3E;
}
.default .app-shell .app-card .app-card__title a,
.default .app-shell .app-card .app-card__more a {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #F45F3A;
  text-decoration: none;
}
.default .app-shell .app-card .app-card__title a:hover,
.default .app-shell .app-card .app-card__more a:hover {
  text-decoration: underline;
}
.default .app-shell .app-card .app-card__more {
  margin-top: 10px;
}
.default .app-shell .app-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.default .app-shell .app-card__empty {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.default .app-shell .app-person {
  margin: 0;
  font-family: "Poppins-600";
  font-size: 14px;
  line-height: 20px;
}
.default .app-shell .app-person a {
  color: #292D3E;
  text-decoration: none;
}
.default .app-shell .app-person a:hover {
  color: #F45F3A;
}
.default .app-shell .app-person__line {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.default .app-shell .app-person__line:empty {
  display: none;
}

/* The app menu's words start on the same line as the titles, tabs and table text. */
.default .app-shell > main > bisbrick-list > div:first-child .navigation-bar {
  padding-left: var(--app-gutter);
  padding-right: var(--app-gutter);
}
.default .app-shell > main > bisbrick-list > div:first-child .nb-zone-left {
  justify-content: flex-start;
}
/* The menu item the page belongs to (class app-nav-<n> on the master, gen.mjs navClass) in the primary
   colour, like a selected tab; the navigationBar's own highlight (an exact link match) gets the same colour
   instead of its default cyan. */
.default .app-shell.app-nav-1 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.default .app-shell.app-nav-2 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.default .app-shell.app-nav-3 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.default .app-shell.app-nav-4 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.default .app-shell.app-nav-5 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.default .app-shell.app-nav-6 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.default .app-shell.app-nav-7 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.default .app-shell.app-nav-8 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(8) > .nb-link,
.default .app-shell.app-nav-9 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(9) > .nb-link,
.default .app-shell > main > bisbrick-list > div:first-child .nb-link.nb-active {
  color: #F45F3A;
}

/* Tabs: an underline row. */
.default .app-shell .grid-tabs {
  gap: 4px;
  margin: 12px 0 20px;
  padding: 0;
  border-bottom: 1px solid #E4E0D8;
  flex-wrap: wrap;
}
.default .app-shell .grid-tabs .grid-tab,
.default .app-shell .grid-tabs .grid-tab:hover {
  max-width: none;
  margin-bottom: -1px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  color: #5F6475;
  font-size: 14px !important;
}
.default .app-shell .grid-tabs .grid-tab:hover {
  color: #292D3E;
  border-bottom-color: #CFC7B9;
}
.default .app-shell .grid-tabs .selected-grid-tab,
.default .app-shell .grid-tabs .selected-grid-tab:hover {
  color: #F45F3A;
  border-bottom-color: #F45F3A;
}

/* Tabs inside a tab: a segmented control, so the two levels read apart. */
.default .app-shell .tab-content .grid-tabs {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 16px;
  padding: 3px;
  background: #F4F3F0;
  border: 0;
  border-radius: 5px;
}
.default .app-shell .tab-content .grid-tabs .grid-tab,
.default .app-shell .tab-content .grid-tabs .grid-tab:hover {
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 5px !important;
  font-size: 13px !important;
}
.default .app-shell .tab-content .grid-tabs .grid-tab:hover {
  background: rgba(255, 255, 255, 0.6);
}
.default .app-shell .tab-content .grid-tabs .selected-grid-tab,
.default .app-shell .tab-content .grid-tabs .selected-grid-tab:hover {
  background: #FFFFFF;
  color: #292D3E;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Stat strip (Koos 2026-10-08): figures, not buttons. No border or fill; a small muted label over
   a large value, hairlines between the figures. One htmlText brick per figure with class app-stat:
   <p>label</p><p data-v="{{x}}">value</p>[<p>note</p>]. The selectors go by the brick's place, not by
   a parent class, so a figure also works in a row that holds other bricks (the CRM dashboard). */
.default .app-shell .row:has(> div > .app-stat) {
  margin: 4px 0 20px;
  row-gap: 12px;
}
.default .app-shell .row > div:has(> .app-stat) {
  padding: 0 24px !important;
  /* col-md-auto only applies from 768px; below that Bootstrap makes every column 100% and the strip
     turned into a stack. A figure keeps its own width, the strip wraps instead. */
  flex: 0 0 auto;
  width: auto;
}
/* The first figure of a run lines up with what is above it (a heading or filter may come before it). */
.default .app-shell .row > div:has(> .app-stat):not(div:has(> .app-stat) + div) {
  padding-left: 0 !important;
}
.default .app-shell .row > div:has(> .app-stat) + div:has(> .app-stat) {
  border-left: 1px solid #E4E0D8;
}
.default .app-shell .app-stat {
  display: block;
}
.default .app-shell .app-stat p {
  margin: 0;
  text-align: left;
}
.default .app-shell .app-stat p:nth-of-type(1) {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.default .app-shell .app-stat p:nth-of-type(2) {
  margin-top: 2px;
  font-family: "Poppins-600";
  font-size: 24px;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.default .app-shell .app-stat p:nth-of-type(3) {
  margin-top: 2px;
  font-family: "Poppins-400";
  font-size: 12px;
  line-height: 16px;
  color: #5F6475;
}
.default .app-shell .app-stat p:nth-of-type(3) img {
  height: 12px;
  width: auto;
  vertical-align: -1px;
}
/* A 0 or an empty value reads as "nothing yet", not as a figure. Keeps the :nth-of-type so it outweighs the value colour. */
.default .app-shell .app-stat p[data-v="0"]:nth-of-type(2),
.default .app-shell .app-stat p[data-v=""]:nth-of-type(2) {
  color: #8A8F9E;
}
/* Text values (e-mail, phone, stage, channel) are not figures: smaller, and allowed to wrap. */
.default .app-shell .app-stat.app-stat--text p:nth-of-type(2) {
  font-size: 15px;
  line-height: 22px;
  margin-top: 4px;
  white-space: normal;
  word-break: break-word;
}
/* The EmailStats brick (Web component, the Campaign dashboard's Mail tab) brings its own bordered tiles;
   inside the apps they get the same strip. A value that says "nothing yet" (0, 0% or –) carries
   bb-email-stats__value--none (Bisbrick-Web, 2026-10-08) and is muted like a 0 in the strip. */
.default .app-shell .bb-email-stats__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: 4px 0 8px;
}
.default .app-shell .bb-email-stats__tile {
  flex: 0 0 auto;
  gap: 2px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
}
.default .app-shell .bb-email-stats__tile:first-child {
  padding-left: 0;
}
.default .app-shell .bb-email-stats__tile + .bb-email-stats__tile {
  border-left: 1px solid #E4E0D8;
}
.default .app-shell .bb-email-stats__tile .bb-email-stats__label {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.default .app-shell .bb-email-stats__tile .bb-email-stats__value {
  font-family: "Poppins-600";
  font-size: 24px;
  font-weight: normal;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.default .app-shell .bb-email-stats__tile .bb-email-stats__value--none {
  color: #8A8F9E;
}
.default .app-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  overflow: hidden;
  font-family: inherit;
  font-size: 14px;
  color: #292D3E;
}

.default .app-table thead,
.default .app-table .sd-table__cell--header,
.default .app-table th,
.default .app-table thead th {
  background: #FFFFFF;
  color: #8A8F9E;
  font-size: 11px;
  font-family: var(--font-default-bold, Default-Bold), var(--font-default-regular, Default-Regular), sans-serif;
  font-weight: 600;
  font-synthesis: style small-caps;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #E4E0D8;
  text-align: left;
}

.default .app-table .sd-table__cell,
.default .app-table td,
.default .app-table th {
  padding: 10px 14px;
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  border: none;
}

.default .app-table tbody tr:hover,
.default .app-table .sd-table__row:hover {
  background: #FBF9F6;
}

.default .app-table thead tr:first-child > th:first-child,
.default .app-table thead tr:first-child > .sd-table__cell:first-child {
  border-top-left-radius: 5px;
}
.default .app-table thead tr:first-child > th:last-child,
.default .app-table thead tr:first-child > .sd-table__cell:last-child {
  border-top-right-radius: 5px;
}
.default .app-table tbody tr:last-child > td:first-child,
.default .app-table tbody tr:last-child > .sd-table__cell:first-child {
  border-bottom-left-radius: 5px;
}
.default .app-table tbody tr:last-child > td:last-child,
.default .app-table tbody tr:last-child > .sd-table__cell:last-child {
  border-bottom-right-radius: 5px;
}

.default .app-table tbody tr.sd-table__row--selected,
.default .app-table .sd-table__row--selected {
  background: #FFF6F2;
  color: #292D3E;
}



@media (max-width: 757.98px) {
  .default .app-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* custom overrides */
.default .app-table tbody tr + tr > td {
  border-top: 1px solid #F1ECE4;
}
.default .app-table thead th {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  letter-spacing: .08em;
  font-family: "Poppins-600";
  border-bottom: 1px solid #F1ECE4;
}
/* A row is a line of its own height, not a line of text: the boards put 52px under every row and a
   hairline between them (Contacts board, artifact HtKnRMkmwY5aph5urR38LL). */
.default .app-table tbody td {
  height: 52px;
  font-family: "Poppins-400";
}
.default .app-table caption {
  padding: 0;
}
/* A linked cell is not a link in the running-text sense: on the boards a row reads as one line of ink and
   the accent is spent once per screen, on the primary button. So a cell link carries its weight instead of
   a colour, and only turns accent under the cursor. */
.default .app-table .table-link {
  color: #292D3E;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: "Poppins-500";
  text-decoration: none;
}
.default .app-table .table-link:hover {
  color: #F45F3A;
  text-decoration: underline;
}
.default .app-table .table-cell-btn--ghost {
  color: #5F6475;
}
.default .app-table .table-cell-btn--ghost:hover {
  color: #292D3E;
  background: #F1ECE4;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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;
}
.abm.abm-role{
  
  --b-ink:#292D3E;--b-orange:#F45F3A;--b-yellow:#FFC505;--b-blue:#3A8DFF;--b-purple:#884DFF;--b-teal:#398FA5;
  --b-green:#8ECCC5;--b-red:#F97C7C;--b-lilac:#CCB3FF;--b-creme:#F7F4EF;--b-beige:#EBE8E4;
  
  --dto-accent:#884DFF;--dto-soft:#F1EAFF;--dto-text:#5B2ED6;--dto-acc2:#FFC505;
  --cfo-accent:#398FA5;--cfo-soft:#E4F3F1;--cfo-text:#246B7C;--cfo-acc2:#3A8DFF;
  --mkt-accent:#F45F3A;--mkt-soft:#FDECE6;--mkt-text:#C23E1B;--mkt-acc2:#FFC505;
  --own-accent:#292D3E;--own-soft:#ECEAF2;--own-text:#292D3E;--own-acc2:#F45F3A;
  --ops-accent:#2F7BEA;--ops-soft:#E6F0FF;--ops-text:#1C5FCC;--ops-acc2:#FFC505;
  --hr-accent:#D94B63;--hr-soft:#FDE8EC;--hr-text:#A8324A;--hr-acc2:#8ECCC5;
  --it-accent:#2E8B7E;--it-soft:#E2F3F0;--it-text:#1F6B61;--it-acc2:#CCB3FF;
  --cl-accent:#0F6E74;--cl-soft:#DDEFEF;--cl-text:#0B5459;
  --accent:var(--dto-accent);--accent-soft:var(--dto-soft);--accent-text:var(--dto-text);--acc2:var(--dto-acc2);
  --ink:#292D3E;--muted:#5F6475;--faint:#8B90A0;
  --paper:#FFFFFF;--creme:#F7F4EF;--line:#E6E1D9;--card:#FFFFFF;
  --dark:#292D3E;--dark-ink:#FFFFFF;
  --chrome:#1E2130;--chrome-ink:#F4F2F7;--chrome-muted:#A3A8B8;
  --note-bg:#EEF3FB;--note-ink:#2B4A7A;--note-line:#CFDCF0;
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.abm.abm-role.role-dto{--accent:var(--dto-accent);--accent-soft:var(--dto-soft);--accent-text:var(--dto-text);--acc2:var(--dto-acc2)}
.abm.abm-role.role-cfo{--accent:var(--cfo-accent);--accent-soft:var(--cfo-soft);--accent-text:var(--cfo-text);--acc2:var(--cfo-acc2)}
.abm.abm-role.role-mkt{--accent:var(--mkt-accent);--accent-soft:var(--mkt-soft);--accent-text:var(--mkt-text);--acc2:var(--mkt-acc2)}
.abm.abm-role.role-own{--accent:var(--own-accent);--accent-soft:var(--own-soft);--accent-text:var(--own-text);--acc2:var(--own-acc2)}
.abm.abm-role.role-ops{--accent:var(--ops-accent);--accent-soft:var(--ops-soft);--accent-text:var(--ops-text);--acc2:var(--ops-acc2)}
.abm.abm-role.role-hr{--accent:var(--hr-accent);--accent-soft:var(--hr-soft);--accent-text:var(--hr-text);--acc2:var(--hr-acc2)}
.abm.abm-role.role-it{--accent:var(--it-accent);--accent-soft:var(--it-soft);--accent-text:var(--it-text);--acc2:var(--it-acc2)}
.abm.abm-role.client{--accent:var(--cl-accent);--accent-soft:var(--cl-soft);--accent-text:var(--cl-text)}
.abm.abm-role, .abm.abm-role *{box-sizing:border-box}
.abm.abm-role{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
.abm.abm-role h1,.abm.abm-role h2,.abm.abm-role h3,.abm.abm-role h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.abm.abm-role p{margin:0}
.abm.abm-role button,.abm.abm-role input{font:inherit;color:inherit}
.abm.abm-role :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-role .wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.abm.abm-role .chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome);color:var(--chrome-ink);padding:10px 16px}
.abm.abm-role .chrome-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.abm.abm-role .chrome-label{font-size:12px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.abm.abm-role .chrome-label b{color:var(--chrome-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.abm.abm-role .seg{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.abm.abm-role .seg button{background:none;border:0;color:var(--chrome-muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.abm.abm-role .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-role .toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--chrome-muted);cursor:pointer}
.abm.abm-role .toggle input{accent-color:var(--accent)}
.abm.abm-role section{padding-block:80px}
.abm.abm-role section.alt{background:var(--creme)}
.abm.abm-role .eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.abm.abm-role .h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.15;max-width:26ch}
.abm.abm-role .lead{color:var(--muted);font-size:18px;max-width:60ch}
.abm.abm-role .sec-head{display:grid;gap:12px;margin-bottom:36px}
.abm.abm-role .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;font-size:15px}
.abm.abm-role .btn-primary{background:var(--accent);color:#fff}
.abm.abm-role .btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .btn:disabled{opacity:.45;cursor:default}
.abm.abm-role .link-btn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.abm.abm-role .echo{font-size:14px;color:var(--accent-text);background:var(--accent-soft);padding:10px 14px;border-radius:10px}
.abm.abm-role .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.abm.abm-role .pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.abm.abm-role .p-built{background:var(--accent);color:#fff}
.abm.abm-role .p-store{background:color-mix(in srgb,var(--acc2) 30%,transparent);color:var(--ink)}
.abm.abm-role .p-archie{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.abm.abm-role .p-plain{color:var(--muted);font-weight:500;white-space:normal;padding:0;font-size:14.5px}
.abm.abm-role .p-weak{color:var(--faint);font-weight:500;white-space:normal;padding:0;font-size:14.5px}
.abm.abm-role .note{display:none;margin-top:22px;background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;max-width:82ch}
.abm.abm-role .note b{font-weight:600}
.abm.abm-role.show-notes .note{display:block}
.abm.abm-role .hero{background:var(--creme);padding-block:0;position:relative;overflow:hidden}
.abm.abm-role .hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-block:72px 80px;align-items:center;position:relative}
.abm.abm-role .campaign{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:18px}
.abm.abm-role .campaign span:nth-child(3){color:var(--accent-text)}
.abm.abm-role .cobrand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:26px;color:var(--ink)}
.abm.abm-role .cobrand .x{color:var(--faint);font-weight:500}
.abm.abm-role .motif{display:flex;gap:6px;margin-bottom:22px}
.abm.abm-role .motif span{width:26px;height:12px;border-radius:4px;position:relative}
.abm.abm-role .motif span::before{content:"";position:absolute;top:-4px;left:6px;width:6px;height:4px;border-radius:2px 2px 0 0;background:inherit}
.abm.abm-role .hero h1{font-size:clamp(32px,4.8vw,50px);font-weight:700;line-height:1.07;margin-top:12px}
.abm.abm-role .hero .lead{margin-top:18px}
.abm.abm-role .face{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.abm.abm-role .face::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.abm.abm-role .idea-box{background:var(--card);border-radius:18px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -34px rgba(41,45,62,.45)}
.abm.abm-role .idea-box label{font-family:var(--display);font-weight:600;font-size:22px}
.abm.abm-role .idea-box .sub{font-size:14px;color:var(--muted);margin-top:-8px}
.abm.abm-role .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:15px}
.abm.abm-role .field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-role .hero-visual{position:relative;display:grid}
.abm.abm-role .kv{width:min(430px,100%);height:auto;justify-self:end;margin-right:-24px;display:block}
.abm.abm-role .kv.tall{width:min(340px,80%)}
.abm.abm-role .hero-visual .idea-box{width:min(410px,100%);margin-top:-170px;position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .kv{animation:kvin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes kvin{from{transform:translateY(18px) rotate(-3deg);opacity:.6}to{transform:none;opacity:1}}
}
.abm.abm-role .plan-dlg{border:0;border-radius:20px;padding:30px 30px 26px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:auto;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.abm.abm-role .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.abm.abm-role .plan-dlg #dlg-trial{background:#FFC505;color:#292D3E;border-radius:5px}
.abm.abm-role .plan-dlg h3{font-size:24px;font-weight:600;margin-top:6px}
.abm.abm-role .dlg-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;color:var(--faint);cursor:pointer;width:36px;height:36px;border-radius:10px}
.abm.abm-role .dlg-x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-role .plan-quote{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-weight:500}
.abm.abm-role .plan-steps{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}
.abm.abm-role .plan-steps li::marker{color:var(--accent-text);font-weight:600}
.abm.abm-role .plan-bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.abm.abm-role .plan-bricks span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--creme);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .plan-start{margin-top:14px;font-size:14px;color:var(--muted)}
.abm.abm-role .plan-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.abm.abm-role .plan-cta h4{font-size:18px;font-weight:600}
.abm.abm-role .plan-mail{font-size:13px;color:var(--faint)}
.abm.abm-role .idea-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.abm.abm-role .signals{display:flex;flex-wrap:wrap;gap:10px}
.abm.abm-role .chip{display:inline-flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:8px 8px 8px 14px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .chip .txt{display:grid;gap:1px}
.abm.abm-role .chip small{font-size:11.5px;color:var(--faint)}
.abm.abm-role .chip.guess{background:none;box-shadow:inset 0 0 0 1px var(--faint)}
.abm.abm-role .chip.guess{border:0;background-image:linear-gradient(var(--creme),var(--creme))}
.abm.abm-role .chip.guess small{color:var(--accent-text)}
.abm.abm-role .chip.mine{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .chip.mine small{color:var(--accent-text)}
.abm.abm-role .chip.off{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint)}
.abm.abm-role .chip.off .txt span{text-decoration:line-through}
.abm.abm-role .chip .x{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center}
.abm.abm-role .chip .x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-role .add{display:inline-flex;align-items:center;gap:6px;border:2px dashed var(--accent);color:var(--accent-text);background:none;border-radius:12px;padding:6px 14px;font-size:14px;font-weight:600;cursor:pointer}
.abm.abm-role .add-form{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--accent);border-radius:12px;padding:6px 6px 6px 14px;background:var(--card)}
.abm.abm-role .add-form:focus-within{box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-role .add-form input{border:0;outline:0;padding:0;font-size:14px;background:none;width:min(240px,55vw)}
.abm.abm-role .add-form button{border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:7px 11px;cursor:pointer}
.abm.abm-role .sig-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:22px}
.abm.abm-role .legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.abm.abm-role .legend i{display:inline-block;width:20px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:6px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .legend i.g{box-shadow:inset 0 0 0 1px var(--faint);background:none}
.abm.abm-role .legend i.m{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.abm.abm-role .idea{background:var(--card);border-radius:18px;overflow:hidden;display:grid;align-content:start;box-shadow:0 1px 0 var(--line);transition:transform .2s ease,box-shadow .2s ease}
.abm.abm-role .idea:hover{transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(41,45,62,.4)}
.abm.abm-role .idea .art{height:132px;display:grid;place-items:center;padding:14px;background:var(--accent-soft)}
.abm.abm-role .idea:nth-child(2) .art{background:color-mix(in srgb,var(--acc2) 22%,var(--card))}
.abm.abm-role .idea:nth-child(3) .art{background:color-mix(in srgb,var(--b-blue) 14%,var(--card))}
.abm.abm-role .idea .art svg{width:100%;max-width:220px;height:100%}
.abm.abm-role .idea .body{padding:20px 22px 24px;display:grid;gap:10px}
.abm.abm-role .idea .pill{justify-self:start}
.abm.abm-role .idea h3{font-size:19px;font-weight:600}
.abm.abm-role .idea p{color:var(--muted);font-size:15px}
.abm.abm-role .s-bg{fill:var(--card)}
.abm.abm-role .s-ln{stroke:var(--faint);fill:none;stroke-width:1.5}
.abm.abm-role .s-fl{fill:var(--faint);opacity:.3}
.abm.abm-role .s-ac{fill:var(--accent)}
.abm.abm-role .s-acl{stroke:var(--accent);fill:none;stroke-width:2}
.abm.abm-role .s-sf{fill:var(--accent-soft)}
.abm.abm-role .s-y{fill:var(--acc2)}
.abm.abm-role .band{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start}
.abm.abm-role .panel{background:var(--card);border-radius:18px;padding:20px;box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -32px rgba(41,45,62,.35)}
.abm.abm-role .panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:14px}
.abm.abm-role .panel-head h3{font-size:17px;font-weight:600}
.abm.abm-role .panel-head .row{font-size:13px;gap:12px}
.abm.abm-role .tools{display:grid;gap:6px}
.abm.abm-role .tool{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:10px;background:var(--creme)}
.abm.abm-role .tool .name{flex:1;min-width:0}
.abm.abm-role .tool .name{font-weight:500;font-size:14px}
.abm.abm-role .tool .name small{display:block;font-size:12px;color:var(--faint);font-weight:400}
.abm.abm-role .tool.mine{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.abm.abm-role .tool.fixed .name{color:var(--muted)}
.abm.abm-role .switch{display:inline-flex;background:var(--card);border-radius:9px;padding:3px;box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.abm.abm-role .switch button{border:0;background:none;padding:4px 9px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.abm.abm-role .switch button[aria-pressed="true"].k{background:var(--ink);color:var(--paper)}
.abm.abm-role .switch button[aria-pressed="true"].o{background:var(--accent);color:#fff}
.abm.abm-role .tool .name .pr{display:block;font-size:11.5px;font-weight:400;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm.abm-role .tool .ask{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:var(--accent-text);margin-top:2px}
.abm.abm-role .tool .ask input{width:64px;border:0;border-radius:6px;padding:2px 6px;font-size:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--accent);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.abm.abm-role .tool .ask input::-webkit-outer-spin-button,.abm.abm-role .tool .ask input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-role .tool .pr .qty{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--accent-text);font-weight:500}
.abm.abm-role .tool .pr .qty input{width:54px;border:0;border-radius:6px;padding:1px 5px;font-size:11.5px;background:var(--card);box-shadow:inset 0 0 0 1px var(--accent);font-variant-numeric:tabular-nums}
.abm.abm-role .tool .name .pr{white-space:normal}
.abm.abm-role .tool .rm{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:16px;flex-shrink:0}
.abm.abm-role .tool .rm:hover{background:var(--card);color:var(--ink)}
.abm.abm-role .tools-extra{margin-top:14px;display:grid;gap:8px;font-size:13px;color:var(--muted)}
.abm.abm-role .chips{display:flex;flex-wrap:wrap;gap:6px}
.abm.abm-role .chips button{border:0;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .chips button:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .chips.gone button{color:var(--faint);text-decoration:line-through;font-weight:500}
.abm.abm-role .tool-add{display:flex;gap:6px}
.abm.abm-role .tool-add input{flex:1;min-width:0;border:0;border-radius:8px;padding:6px 10px;font-size:13px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .tool-add input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .tool-add button{border:0;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;background:var(--accent);color:#fff;cursor:pointer}
.abm.abm-role .tag-fixed{font-size:12.5px;color:var(--muted);background:var(--card);padding:5px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.abm.abm-role .bricks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;padding-top:8px}
.abm.abm-role .brick{position:relative;border:0;border-radius:10px;padding:18px 10px 14px;font-family:var(--display);font-weight:600;font-size:14.5px;text-align:center;background:var(--accent-soft);color:var(--accent-text);min-height:64px;display:grid;place-content:center;gap:2px}
.abm.abm-role .brick::before,.abm.abm-role .brick::after{content:"";position:absolute;top:-6px;width:14px;height:7px;border-radius:4px 4px 0 0;background:inherit}
.abm.abm-role .brick::before{left:24%}
.abm.abm-role .brick::after{right:24%}
.abm.abm-role .brick small{font-family:var(--body);font-weight:500;font-size:11.5px;opacity:.8}
.abm.abm-role .brick.hl{background:var(--accent);color:#fff}
.abm.abm-role .brick.linked{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .brick.linked::before,.abm.abm-role .brick.linked::after{background:var(--accent);opacity:.4}
.abm.abm-role .brick.ai{background:var(--ink);color:var(--paper)}
.abm.abm-role .brick.ai .spark{color:var(--acc2)}
.abm.abm-role .brick.link{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.abm.abm-role .brick.link::before,.abm.abm-role .brick.link::after{background:var(--line)}
.abm.abm-role .brick.next{background:none;box-shadow:inset 0 0 0 2px var(--acc2);color:var(--ink);cursor:pointer}
.abm.abm-role .brick.next::before,.abm.abm-role .brick.next::after{display:none}
.abm.abm-role .brick.next:hover{background:color-mix(in srgb,var(--acc2) 18%,transparent)}
.abm.abm-role .band .meter{margin-top:32px;position:relative;z-index:1}
.abm.abm-role .band .meter .strip{grid-template-columns:1fr;gap:8px}
.abm.abm-role .band .meter .stat b{font-size:22px}
.abm.abm-role .meter{margin-top:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:20px 22px;display:grid;gap:10px}
.abm.abm-role .meter-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;font-size:14px;color:var(--muted)}
.abm.abm-role .meter-top b{font-family:var(--display);font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums}
.abm.abm-role .meter-bar{height:12px;border-radius:999px;background:var(--creme);overflow:hidden}
.abm.abm-role .meter-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--acc2));border-radius:999px;transition:width .5s cubic-bezier(.2,.9,.3,1)}
.abm.abm-role .meter small{font-size:12.5px;color:var(--faint)}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .play .brick{animation:snap .7s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i) * 80ms)}

  @keyframes snap{from{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:.5}70%{transform:translate(0,2px)}to{transform:none;opacity:1}}
}
.abm.abm-role .cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:10px}
.abm.abm-role .cmp-bar > span{font-weight:600}
.abm.abm-role .segctl{display:inline-flex;flex-wrap:wrap;background:var(--card);border-radius:12px;padding:4px;box-shadow:inset 0 0 0 1px var(--line);gap:4px}
.abm.abm-role .segctl button{border:0;background:none;padding:9px 14px;border-radius:9px;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer}
.abm.abm-role .segctl button[aria-selected="true"]{background:var(--accent);color:#fff}
.abm.abm-role .cmp-desc{font-size:14px;color:var(--faint);margin-bottom:28px}
.abm.abm-role .h3{font-size:22px;font-weight:600}
.abm.abm-role .tbl-wrap{overflow-x:auto;border-radius:16px;background:var(--card)}
.abm.abm-role table{border-collapse:collapse;width:100%;min-width:680px;font-size:15px}
.abm.abm-role th,.abm.abm-role td{text-align:left;padding:14px 18px;vertical-align:top;border-bottom:1px solid var(--line)}
.abm.abm-role thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-role thead th.us{color:var(--accent-text)}
.abm.abm-role tbody th{font-weight:500}
.abm.abm-role td.us{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.abm.abm-role tbody tr:last-child td,.abm.abm-role tbody tr:last-child th{border-bottom:0}
.abm.abm-role tr.sum th,.abm.abm-role tr.sum td{font-weight:600;background:var(--card)}
.abm.abm-role tr.sum:first-of-type th,.abm.abm-role tr.sum:first-of-type td{border-top:2px solid var(--ink)}
.abm.abm-role tr.sum td.us{background:var(--accent-soft)}
.abm.abm-role .num{font-variant-numeric:tabular-nums}
.abm.abm-role .more-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-soft);color:var(--accent-text);font:600 14.5px/1.2 var(--body,inherit);cursor:pointer;transition:background .15s}
.abm.abm-role .more-btn:hover{background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 30%)}
.abm.abm-role .more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-role .more-btn .chev{font-size:12px}
.abm.abm-role .cmp-open-hint{font-size:14.5px;color:var(--muted);margin-top:4px}
.abm.abm-role th.amt,.abm.abm-role td.amt{min-width:9.5rem;white-space:nowrap}
.abm.abm-role td.calc{color:var(--muted);font-size:13.5px}
.abm.abm-role .tbl-note{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;font-size:13px;color:var(--muted)}
.abm.abm-role .badge{font-size:12px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);border-radius:6px;padding:3px 8px}
.abm.abm-role details.sources{margin-top:14px;border-radius:14px;background:var(--card);padding:14px 18px;font-size:13.5px;color:var(--muted)}
.abm.abm-role details.sources summary{cursor:pointer;font-weight:600;color:var(--ink)}
.abm.abm-role details.sources ul{margin:10px 0 0;padding-left:18px;display:grid;gap:5px}
.abm.abm-role details.sources a{color:var(--accent-text)}
.abm.abm-role .t2-head{display:grid;gap:8px;margin:48px 0 18px}
.abm.abm-role .calc{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:18px}
.abm.abm-role .calc-group{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:12px;align-content:start}
.abm.abm-role .calc-group.us{background:var(--accent-soft)}
.abm.abm-role .calc-group h4{font-size:16px;font-weight:600}
.abm.abm-role .calc-group .hint{font-size:13px;color:var(--muted)}
.abm.abm-role .calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.abm.abm-role .calc-group.us .calc-fields{grid-template-columns:1fr}
.abm.abm-role .fieldset{display:grid;gap:5px}
.abm.abm-role .fieldset label{font-size:13px;color:var(--muted)}
.abm.abm-role .stepper{display:inline-flex;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;width:max-content}
.abm.abm-role .stepper button{border:0;background:none;width:36px;font-size:18px;color:var(--accent-text);cursor:pointer}
.abm.abm-role .stepper button:hover{background:var(--creme)}
.abm.abm-role .stepper input{width:70px;border:0;border-inline:1px solid var(--line);text-align:center;background:none;font-variant-numeric:tabular-nums;padding:8px 4px;-moz-appearance:textfield}
.abm.abm-role .stepper input::-webkit-outer-spin-button,.abm.abm-role .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-role .plan-pick{font-size:14px}
.abm.abm-role .plan-pick b{font-family:var(--display);color:var(--accent-text)}
.abm.abm-role .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.abm.abm-role .stat{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:4px}
.abm.abm-role .stat span{font-size:13px;color:var(--muted)}
.abm.abm-role .stat b{font-family:var(--display);font-size:clamp(24px,3.4vw,32px);font-weight:600;font-variant-numeric:tabular-nums}
.abm.abm-role .stat.win{background:var(--accent);color:#fff}
.abm.abm-role .stat.win span{color:rgba(255,255,255,.9)}
.abm.abm-role .profile-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.abm.abm-role .profile-bar .segctl button[disabled]{opacity:.4;cursor:default}
.abm.abm-role .picks{display:grid;gap:22px;margin-top:8px}
.abm.abm-role .pick-group h3{font-family:var(--display);font-size:16px;font-weight:600;margin:0 0 10px}
.abm.abm-role .pick-row{display:flex;flex-wrap:wrap;gap:8px}
.abm.abm-role .pick{border:0;background:var(--card);color:var(--ink);border-radius:12px;padding:10px 15px;font:inherit;font-size:14px;cursor:pointer;min-height:42px;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .pick:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .pick[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text);font-weight:600;box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .self-foot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:22px;font-size:14px;color:var(--muted)}
.abm.abm-role .self-need{margin-top:22px;max-width:760px}
.abm.abm-role .self-need textarea{width:100%;resize:vertical}
.abm.abm-role .need-hint{font-size:13.5px;color:var(--muted);margin-top:8px}
.abm.abm-role .why-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:18px}
.abm.abm-role .why-progress{flex:1;min-width:120px;max-width:220px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.abm.abm-role .why-progress i{display:block;height:100%;width:0;background:var(--accent)}
.abm.abm-role .why{overflow:hidden;border-radius:18px}
.abm.abm-role .why-track{display:flex;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.abm.abm-role .why-card{flex:0 0 100%;background:var(--creme);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:minmax(200px,300px) 1fr;align-items:stretch}
.abm.abm-role .why-card .art{min-height:120px;display:grid;place-items:center;padding:18px;background:var(--accent-soft)}
.abm.abm-role .why-card:nth-child(2) .art{background:color-mix(in srgb,var(--acc2) 22%,var(--creme))}
.abm.abm-role .why-card .art svg{width:100%;max-width:210px;height:100%}
.abm.abm-role .why-card .body{padding:22px 24px 26px;display:grid;gap:12px}
.abm.abm-role .why-card h3{font-size:20px;font-weight:600}
.abm.abm-role .why-card ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.abm.abm-role .why-card li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;line-height:1.5}
.abm.abm-role .why-card li b{font-weight:600;color:var(--ink)}
.abm.abm-role .why-card li::before{content:"";width:12px;height:12px;margin-top:6px;border-radius:4px;background:var(--accent)}
.abm.abm-role .why-card .fair{font-size:13.5px;color:var(--muted);padding-top:4px}
@media (max-width:820px){.abm.abm-role .why-card{grid-template-columns:1fr}
.abm.abm-role .why-card .art{min-height:110px}
}
@media (prefers-reduced-motion:reduce){.abm.abm-role .why-track{transition:none}
}
.abm.abm-role section.sep{border-top:1px solid var(--line)}
.abm.abm-role .proof-sec{background:var(--dark);color:var(--dark-ink)}
.abm.abm-role .proof{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.abm.abm-role .proof-sec .eyebrow{color:var(--acc2)}
.abm.abm-role .proof-sec .lead{color:rgba(255,255,255,.8)}
.abm.abm-role .facts{display:grid;gap:14px}
.abm.abm-role .kv-proof{width:min(330px,100%);height:auto;justify-self:center;display:block;margin-block:-40px}
.abm.abm-role .fact{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:14px}
.abm.abm-role .fact b{font-family:var(--display);font-size:28px;font-weight:600;min-width:3.2ch}
.abm.abm-role .fact:nth-child(1) b{color:var(--b-orange)}
.abm.abm-role .fact:nth-child(2) b{color:var(--b-yellow)}
.abm.abm-role .fact:nth-child(3) b{color:var(--b-green)}
.abm.abm-role .fact span{color:rgba(255,255,255,.85)}
.abm.abm-role .colleagues{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.abm.abm-role .colleague{background:var(--card);border-radius:18px;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-content:start}
.abm.abm-role .avatar{width:50px;height:50px;border-radius:50%;background:var(--av);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:18px;grid-row:span 2}
.abm.abm-role .colleague .who{font-family:var(--display);font-weight:600;font-size:19px;align-self:end}
.abm.abm-role .colleague .role{font-size:13px;color:var(--faint)}
.abm.abm-role .colleague p,.abm.abm-role .colleague button{grid-column:1 / -1}
.abm.abm-role .colleague p{color:var(--muted);font-size:15px;margin-top:6px}
.abm.abm-role .colleague button{justify-self:start;margin-top:6px}
.abm.abm-role .close-in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:end;justify-content:space-between}
.abm.abm-role .close h2{font-size:clamp(28px,4vw,40px);font-weight:700;max-width:20ch}
.abm.abm-role .brand{font-family:var(--display);font-weight:600;color:var(--muted);margin-top:12px}
.abm.abm-role .brand em{font-style:normal;color:var(--b-orange)}
@media (max-width:860px){.abm.abm-role .hero-in,.abm.abm-role .proof,.abm.abm-role .band,.abm.abm-role .calc{grid-template-columns:1fr}
.abm.abm-role .kv{justify-self:center;margin-right:0;width:min(320px,80%)}
.abm.abm-role .kv-proof{width:min(240px,70%);margin-block:8px 0}
.abm.abm-role .hero-visual .idea-box{margin-top:-60px}
.abm.abm-role .ideas,.abm.abm-role .colleagues,.abm.abm-role .strip,.abm.abm-role .calc-fields{grid-template-columns:1fr}
.abm.abm-role section{padding-block:56px}
}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .swap{animation:fade .25s ease}

  @keyframes fade{from{opacity:.5}to{opacity:1}}
}

.abm.abm-role{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.abm.abm-role .note{display:none}
.abm.abm-role .cmp-loader{display:flex;justify-content:center;align-items:center;min-height:60vh}
.abm.abm-role .cmp-loader::after{content:'';width:40px;height:40px;border-radius:50%;border:3px solid rgba(19,26,42,.15);border-top-color:rgb(19,26,42);animation:cmp-spin .8s linear infinite}
@keyframes cmp-spin{to{transform:rotate(360deg)}}
.abm.abm-role h1,.abm.abm-role h2,.abm.abm-role h3,.abm.abm-role h4,.abm.abm-role p,.abm.abm-role span,.abm.abm-role b{text-transform:none}
/* account manager widget: the page sanitizer strips position:fixed from inline styles */
.abm.abm-role .am{position:fixed;left:16px;bottom:16px;z-index:50}
.abm.abm-role .am summary::-webkit-details-marker{display:none}

/* abm-widget 2026-10-21 */
.abm.abm-role .hero-in{padding-block:40px 48px;gap:40px}
.abm.abm-role .campaign{margin-bottom:10px}
.abm.abm-role .cobrand{margin-bottom:14px}
.abm.abm-role .kv.tall{width:auto;max-width:min(300px,80%);max-height:300px}
.abm.abm-role .hero-visual .idea-box{margin-top:-96px}
.abm.abm-role .hero-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muted)}
.abm.abm-role .hero-points li{display:flex;align-items:center;gap:7px}
.abm.abm-role .hero-points li::before{content:'';width:12px;height:6px;border-left:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);transform:translateY(-2px) rotate(-45deg)}
.abm.abm-role .am{left:auto;right:20px;bottom:20px;width:max-content;max-width:min(460px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px -12px rgba(19,26,42,.28);font-family:var(--body);color:var(--ink)}
.abm.abm-role .am-head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px}
.abm.abm-role .am-pic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent-soft) center/cover no-repeat;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.abm.abm-role .am-who{display:flex;flex-direction:column;min-width:0;flex:1}
.abm.abm-role .am-hi{font-weight:600;font-size:15px;line-height:1.3}
.abm.abm-role .am-role{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm.abm-role .am-toggle{flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 4px 4px 0}
.abm.abm-role .am[open] .am-toggle{transform:rotate(-135deg);margin:4px 4px 0 0}
.abm.abm-role .am-body{padding:0 14px 14px;display:grid;gap:10px;width:0;min-width:100%}
.abm.abm-role .am-pitch{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.abm.abm-role .am-cta{flex:none;width:auto;padding:10px 16px;font-size:14px;white-space:nowrap}
.abm.abm-role .am-links{margin:0;display:flex;gap:16px;font-size:13px}
.abm.abm-role .am-links a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.abm.abm-role .am{right:16px;bottom:16px;width:auto;left:16px}.abm.abm-role .am-head{flex-wrap:wrap}.abm.abm-role .am-cta{order:3;width:100%;text-align:center;justify-content:center}}

.abm.abm-partner{
  
  --b-ink:#292D3E;--b-orange:#F45F3A;--b-yellow:#FFC505;--b-blue:#3A8DFF;--b-purple:#884DFF;--b-teal:#398FA5;
  --b-green:#8ECCC5;--b-red:#F97C7C;--b-lilac:#CCB3FF;--b-creme:#F7F4EF;--b-beige:#EBE8E4;
  
  --bur-accent:#F45F3A;--bur-soft:#FDECE6;--bur-text:#C23E1B;--bur-acc2:#FFC505;
  --con-accent:#398FA5;--con-soft:#E4F3F1;--con-text:#246B7C;--con-acc2:#3A8DFF;
  --imp-accent:#2F74E0;--imp-soft:#E6F0FF;--imp-text:#1F56B8;--imp-acc2:#FFC505;
  --ver-accent:#884DFF;--ver-soft:#F1EAFF;--ver-text:#5B2ED6;--ver-acc2:#FFC505;
  --accent:var(--bur-accent);--accent-soft:var(--bur-soft);--accent-text:var(--bur-text);--acc2:var(--bur-acc2);
  --ink:#292D3E;--muted:#5F6475;--faint:#8B90A0;
  --paper:#FFFFFF;--creme:#F7F4EF;--line:#E6E1D9;--card:#FFFFFF;
  --dark:#292D3E;--dark-ink:#FFFFFF;
  --chrome:#1E2130;--chrome-ink:#F4F2F7;--chrome-muted:#A3A8B8;
  --note-bg:#EEF3FB;--note-ink:#2B4A7A;--note-line:#CFDCF0;
  --tbc-bg:#FFF6D6;--tbc-line:#E3B200;--tbc-ink:#6B5200;
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.abm.abm-partner.face-bur{--accent:var(--bur-accent);--accent-soft:var(--bur-soft);--accent-text:var(--bur-text);--acc2:var(--bur-acc2)}
.abm.abm-partner.face-con{--accent:var(--con-accent);--accent-soft:var(--con-soft);--accent-text:var(--con-text);--acc2:var(--con-acc2)}
.abm.abm-partner.face-imp{--accent:var(--imp-accent);--accent-soft:var(--imp-soft);--accent-text:var(--imp-text);--acc2:var(--imp-acc2)}
.abm.abm-partner.face-ver{--accent:var(--ver-accent);--accent-soft:var(--ver-soft);--accent-text:var(--ver-text);--acc2:var(--ver-acc2)}
.abm.abm-partner, .abm.abm-partner *{box-sizing:border-box}
.abm.abm-partner{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
.abm.abm-partner h1,.abm.abm-partner h2,.abm.abm-partner h3,.abm.abm-partner h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.abm.abm-partner p{margin:0}
.abm.abm-partner button,.abm.abm-partner input{font:inherit;color:inherit}
.abm.abm-partner :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-partner .wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.abm.abm-partner .chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome);color:var(--chrome-ink);padding:10px 16px}
.abm.abm-partner .chrome-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.abm.abm-partner .chrome-label{font-size:12px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.abm.abm-partner .chrome-label b{color:var(--chrome-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.abm.abm-partner .seg{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.abm.abm-partner .seg button{background:none;border:0;color:var(--chrome-muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.abm.abm-partner .seg button:hover{color:var(--chrome-ink);background:rgba(255,255,255,.08)}
.abm.abm-partner .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--chrome-muted);cursor:pointer}
.abm.abm-partner .toggle input{accent-color:var(--accent)}
.abm.abm-partner section{padding-block:80px}
.abm.abm-partner section.alt{background:var(--creme)}
.abm.abm-partner .eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.abm.abm-partner .h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.15;max-width:26ch}
.abm.abm-partner .lead{color:var(--muted);font-size:18px;max-width:60ch}
.abm.abm-partner .sec-head{display:grid;gap:12px;margin-bottom:36px}
.abm.abm-partner .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;font-size:15px;transition:transform .15s ease,filter .15s ease}
.abm.abm-partner .btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.abm.abm-partner .btn-primary{background:var(--accent);color:#fff}
.abm.abm-partner .btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .btn-quiet:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.abm.abm-partner .pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.abm.abm-partner .p-rec{background:var(--accent);color:#fff}
.abm.abm-partner .p-also{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.abm.abm-partner .echo{font-size:14px;color:var(--accent-text);background:var(--accent-soft);padding:10px 14px;border-radius:10px}
.abm.abm-partner .num{font-variant-numeric:tabular-nums}
.abm.abm-partner .note{display:none;margin-top:22px;background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;max-width:82ch}
.abm.abm-partner .note b{font-weight:600}
.abm.abm-partner .note p+p{margin-top:6px}
.abm.abm-partner.show-notes .note{display:block}
.abm.abm-partner .tbc{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--tbc-ink);background:var(--tbc-bg);box-shadow:inset 0 0 0 1px var(--tbc-line);border-radius:6px;padding:1px 7px;white-space:nowrap;vertical-align:1px}
.abm.abm-partner .hero{background:var(--creme);padding-block:0;position:relative;overflow:hidden}
.abm.abm-partner .hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-block:64px 80px;align-items:center;position:relative}
.abm.abm-partner .campaign{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);letter-spacing:-.005em;display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:22px}
.abm.abm-partner .campaign span:nth-child(3){color:var(--accent-text)}
.abm.abm-partner .cobrand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:22px;color:var(--ink)}
.abm.abm-partner .cobrand .x{color:var(--faint);font-weight:500}
.abm.abm-partner .hero h1{font-size:clamp(32px,4.8vw,50px);font-weight:700;line-height:1.07;margin-top:12px}
.abm.abm-partner .hero .lead{margin-top:18px}
.abm.abm-partner .face{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.abm.abm-partner .face::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.abm.abm-partner .hero-cta{margin-top:26px}
.abm.abm-partner .idea-box{background:var(--card);border-radius:18px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -34px rgba(41,45,62,.45)}
.abm.abm-partner .idea-box label{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2}
.abm.abm-partner .idea-box .sub{font-size:14px;color:var(--muted);margin-top:-6px}
.abm.abm-partner .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:15px}
.abm.abm-partner .field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-partner .hero-visual{position:relative;display:grid}
.abm.abm-partner .kv{width:min(430px,100%);height:auto;justify-self:end;margin-right:-24px;display:block}
.abm.abm-partner .kv.tall{width:min(340px,80%)}
.abm.abm-partner .hero-visual .idea-box{width:min(410px,100%);margin-top:-170px;position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .kv{animation:kvin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes kvin{from{transform:translateY(18px) rotate(-3deg);opacity:.6}to{transform:none;opacity:1}}
}
.abm.abm-partner .plan-dlg{border:0;border-radius:20px;padding:30px 30px 26px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:auto;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.abm.abm-partner .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.abm.abm-partner .plan-dlg h3{font-size:24px;font-weight:600;margin-top:6px}
.abm.abm-partner .dlg-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;color:var(--faint);cursor:pointer;width:36px;height:36px;border-radius:10px}
.abm.abm-partner .dlg-x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-partner .plan-quote{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--creme);color:var(--ink);font-weight:500}
.abm.abm-partner .plan-steps{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}
.abm.abm-partner .plan-steps li::marker{color:var(--accent-text);font-weight:600}
.abm.abm-partner .plan-bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.abm.abm-partner .plan-bricks span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--creme);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .plan-start{margin-top:14px;font-size:14px;color:var(--muted)}
.abm.abm-partner .plan-role{margin-top:14px}
.abm.abm-partner .plan-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.abm.abm-partner .plan-cta h4{font-size:18px;font-weight:600}
.abm.abm-partner .plan-mail{font-size:13px;color:var(--faint)}
.abm.abm-partner .idea-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.abm.abm-partner .link-btn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.abm.abm-partner .types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.abm.abm-partner .type{background:var(--creme);border-radius:18px;padding:22px 20px 22px;display:grid;gap:12px;align-content:start;grid-template-rows:auto auto auto 1fr}
.abm.abm-partner .type.rec{background:var(--accent-soft)}
.abm.abm-partner .type-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.abm.abm-partner .type-top small{font-size:12px;color:var(--faint)}
.abm.abm-partner .type h3{font-size:20px;font-weight:600}
.abm.abm-partner .type dl{margin:0;display:grid;gap:10px;font-size:14.5px}
.abm.abm-partner .type dt{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .type dd{margin:2px 0 0;color:var(--muted)}
.abm.abm-partner .type.rec dd{color:var(--ink)}
.abm.abm-partner .mini-bricks{display:flex;flex-wrap:wrap;gap:12px 6px;padding-top:6px;margin-bottom:4px}
.abm.abm-partner .brick{position:relative;border:0;border-radius:10px;padding:18px 10px 14px;font-family:var(--display);font-weight:600;font-size:14.5px;text-align:center;background:var(--accent-soft);color:var(--accent-text);min-height:64px;display:grid;place-content:center;gap:2px}
.abm.abm-partner .brick::before,.abm.abm-partner .brick::after{content:"";position:absolute;top:-6px;width:14px;height:7px;border-radius:4px 4px 0 0;background:inherit}
.abm.abm-partner .brick::before{left:24%}
.abm.abm-partner .brick::after{right:24%}
.abm.abm-partner .brick.sm{min-height:0;padding:9px 12px 7px;font-size:12.5px;border-radius:8px}
.abm.abm-partner .brick.sm::before,.abm.abm-partner .brick.sm::after{top:-5px;width:10px;height:5px;border-radius:3px 3px 0 0}
.abm.abm-partner .brick.base{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.abm.abm-partner .brick.base::before,.abm.abm-partner .brick.base::after{background:var(--line)}
.abm.abm-partner .brick.hl{background:var(--accent);color:#fff}
.abm.abm-partner .shift{margin-top:40px;display:grid;gap:14px}
.abm.abm-partner .shift h3{font-size:20px;font-weight:600}
.abm.abm-partner .shift-rows{display:grid;gap:8px}
.abm.abm-partner .shift-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;background:var(--creme);border-radius:14px;padding:14px 18px;font-size:15px}
.abm.abm-partner .shift-row .now{color:var(--muted)}
.abm.abm-partner .shift-row .arrow{color:var(--accent-text);font-weight:700}
.abm.abm-partner .shift-row .with{font-weight:500}
.abm.abm-partner .shift-head{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;padding:0 18px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .shift-head span:nth-child(2){visibility:hidden}
.abm.abm-partner .calc{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px}
.abm.abm-partner .calc-group{background:var(--card);border-radius:16px;padding:20px 22px;display:grid;gap:16px;align-content:start}
.abm.abm-partner .calc-group h4{font-size:16px;font-weight:600}
.abm.abm-partner .calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.abm.abm-partner .fieldset{display:grid;gap:6px;align-content:start}
.abm.abm-partner .fieldset.full{grid-column:1 / -1}
.abm.abm-partner .fieldset label,.abm.abm-partner .fieldset .lbl{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.abm.abm-partner .ex{font-size:11px;font-weight:600;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line);border-radius:5px;padding:0 6px}
.abm.abm-partner .stepper{display:inline-flex;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden;width:max-content}
.abm.abm-partner .stepper:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .stepper button{border:0;background:none;width:38px;font-size:18px;color:var(--accent-text);cursor:pointer;font-weight:600}
.abm.abm-partner .stepper button:hover{background:var(--accent-soft)}
.abm.abm-partner .stepper input{width:72px;border:0;border-inline:1px solid var(--line);text-align:center;background:none;font-variant-numeric:tabular-nums;padding:9px 4px;-moz-appearance:textfield}
.abm.abm-partner .stepper input:focus{outline:none}
.abm.abm-partner .stepper input::-webkit-outer-spin-button,.abm.abm-partner .stepper input::-webkit-inner-spin-button,.abm.abm-partner .pct input::-webkit-outer-spin-button,.abm.abm-partner .pct input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-partner .segctl{display:inline-flex;flex-wrap:wrap;background:var(--paper);border-radius:12px;padding:4px;box-shadow:inset 0 0 0 1.5px var(--line);gap:4px}
.abm.abm-partner .segctl button{border:0;background:none;padding:8px 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;display:grid;text-align:left;line-height:1.25}
.abm.abm-partner .segctl button small{font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.abm.abm-partner .segctl button:hover{background:var(--accent-soft);color:var(--accent-text)}
.abm.abm-partner .segctl button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .pct{display:inline-flex;align-items:center;gap:0;border-radius:10px;background:var(--tbc-bg);box-shadow:inset 0 0 0 1.5px var(--tbc-line);width:max-content;overflow:hidden}
.abm.abm-partner .pct:focus-within{box-shadow:inset 0 0 0 2px var(--tbc-line),0 0 0 4px var(--tbc-bg)}
.abm.abm-partner .pct input{width:90px;border:0;background:none;padding:9px 12px;font-variant-numeric:tabular-nums;color:var(--ink);-moz-appearance:textfield}
.abm.abm-partner .pct input:focus{outline:none}
.abm.abm-partner .pct input::placeholder{color:var(--tbc-ink);opacity:.9}
.abm.abm-partner .pct span{padding-right:12px;color:var(--tbc-ink);font-weight:600}
.abm.abm-partner .calc-hint{font-size:13px;color:var(--muted)}
.abm.abm-partner .results{display:grid;gap:10px;align-content:start}
.abm.abm-partner .stat{background:var(--card);border-radius:16px;padding:16px 20px;display:grid;gap:2px}
.abm.abm-partner .stat span{font-size:13px;color:var(--muted)}
.abm.abm-partner .stat b{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:600;font-variant-numeric:tabular-nums}
.abm.abm-partner .stat small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .stat.open b{color:var(--tbc-ink);font-size:18px;font-family:var(--body);font-weight:600}
.abm.abm-partner .stat.open{background:var(--tbc-bg)}
.abm.abm-partner .stat.win{background:var(--accent);color:#fff}
.abm.abm-partner .stat.win span,.abm.abm-partner .stat.win small{color:rgba(255,255,255,.9)}
.abm.abm-partner .calc-foot{font-size:13px;color:var(--muted);max-width:80ch;display:grid;gap:6px}
.abm.abm-partner .benefit-groups{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.abm.abm-partner .bgroup h3{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm.abm-partner .benefits{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.abm.abm-partner .benefit{background:var(--creme);border-radius:14px;padding:14px 18px;display:grid;gap:3px}
.abm.abm-partner .benefit b{font-family:var(--display);font-weight:600;font-size:16px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.abm.abm-partner .benefit span{color:var(--muted);font-size:14.5px}
.abm.abm-partner .benefit.focus{background:var(--accent-soft)}
.abm.abm-partner .benefit.focus span{color:var(--ink)}
.abm.abm-partner .benefit.tbd{background:var(--tbc-bg);box-shadow:inset 0 0 0 1.5px var(--tbc-line)}
.abm.abm-partner .benefit.tbd span{color:var(--ink)}
.abm.abm-partner .s-bg{fill:var(--card)}
.abm.abm-partner .s-ln{stroke:var(--faint);fill:none;stroke-width:1.5}
.abm.abm-partner .s-fl{fill:var(--faint);opacity:.3}
.abm.abm-partner .s-ac{fill:var(--accent)}
.abm.abm-partner .s-acl{stroke:var(--accent);fill:none;stroke-width:2}
.abm.abm-partner .s-sf{fill:var(--accent-soft)}
.abm.abm-partner .s-y{fill:var(--acc2)}
.abm.abm-partner .leads-sec{background:var(--accent-soft)}
.abm.abm-partner .leads-sec .lead{color:var(--ink)}
.abm.abm-partner .leadflow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-top:26px}
.abm.abm-partner .channels-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.abm.abm-partner .channels-head h3{font-size:19px;font-weight:600}
.abm.abm-partner .channels-head p{color:var(--ink);font-size:14.5px}
.abm.abm-partner .channels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.abm.abm-partner .ch{background:var(--card);border-radius:14px;padding:14px 14px 13px;display:grid;grid-template-columns:36px 1fr;column-gap:12px;row-gap:2px;align-items:start}
.abm.abm-partner .ch-ico{grid-row:span 2;width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center}
.abm.abm-partner .ch:nth-child(3n+2) .ch-ico{background:var(--acc2);color:var(--b-ink)}
.abm.abm-partner .ch:nth-child(3n) .ch-ico{background:var(--b-ink);color:#fff}
.abm.abm-partner .ch-ico svg{width:20px;height:20px}
.abm.abm-partner .ch b{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25}
.abm.abm-partner .ch span:not(.ch-ico){font-size:13px;color:var(--muted);line-height:1.4}
.abm.abm-partner .channels-foot{margin-top:10px;font-size:13px;color:var(--muted)}
@media (max-width:960px){.abm.abm-partner .channels{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){.abm.abm-partner .channels{grid-template-columns:1fr}
}
.abm.abm-partner .lf-col{background:var(--card);border-radius:18px;padding:18px 18px 16px;display:grid;gap:12px;align-content:start;box-shadow:0 18px 40px -32px rgba(41,45,62,.4)}
.abm.abm-partner .lf-col small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .lf-label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--accent-text)}
.abm.abm-partner .lf-bricks{display:flex;flex-wrap:wrap;gap:12px 6px;padding-top:6px}
.abm.abm-partner .lf-line{font-size:14px;color:var(--ink);font-weight:500}
.abm.abm-partner .lf-arrow{align-self:center;font-family:var(--display);font-size:30px;color:var(--accent);font-weight:700}
.abm.abm-partner .lf-leads{display:grid;gap:8px}
.abm.abm-partner .lead-chip{display:flex;align-items:center;gap:10px;background:var(--creme);border-radius:10px;padding:8px 10px;font-size:13.5px}
.abm.abm-partner .lead-chip i{width:8px;height:8px;border-radius:50%;background:var(--acc2);flex-shrink:0}
.abm.abm-partner .lead-chip b{font-weight:600}
.abm.abm-partner .lf-you{background:var(--accent);color:#fff}
.abm.abm-partner .lf-you .lf-label{color:rgba(255,255,255,.85)}
.abm.abm-partner .lf-you small{color:rgba(255,255,255,.85)}
.abm.abm-partner .lf-you .tbc{white-space:normal}
.abm.abm-partner .match{display:grid;gap:8px}
.abm.abm-partner .match-card{background:rgba(255,255,255,.14);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.abm.abm-partner .match-card b{font-family:var(--display);font-size:17px;font-weight:600}
.abm.abm-partner .match-card span{font-size:13.5px;color:rgba(255,255,255,.9)}
.abm.abm-partner .lead-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.abm.abm-partner .lead-point{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:6px}
.abm.abm-partner .lead-point b{font-family:var(--display);font-weight:600;font-size:17px}
.abm.abm-partner .lead-point span{color:var(--muted);font-size:14.5px}
.abm.abm-partner .hero-leads{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:var(--ink)}
.abm.abm-partner .hero-leads::before{content:"✦";color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .play .lead-chip{animation:chipin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 140ms)}
.abm.abm-partner .play .match-card{animation:chipin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:.55s}

  @keyframes chipin{from{transform:translateX(-14px);opacity:.35}to{transform:none;opacity:1}}
}
.abm.abm-partner .type-art{background:var(--card);border-radius:12px;height:92px;display:grid;place-items:center;padding:8px;margin-bottom:2px}
.abm.abm-partner .type.rec .type-art{background:color-mix(in srgb,var(--card) 70%,var(--accent-soft))}
.abm.abm-partner .type-art svg{width:100%;max-width:180px;height:100%}
.abm.abm-partner .shift-row{grid-template-columns:1fr 44px 1fr;padding:0;background:none;gap:10px}
.abm.abm-partner .shift-row .now,.abm.abm-partner .shift-row .with{border-radius:14px;padding:16px 18px;display:grid;gap:4px;align-content:center;min-height:74px}
.abm.abm-partner .shift-row .now{background:var(--creme);color:var(--muted)}
.abm.abm-partner .shift-row .with{background:var(--accent-soft);color:var(--ink);font-weight:500}
.abm.abm-partner .shift-row .arrow{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;justify-self:center;font-size:18px}
.abm.abm-partner .shift-row.lead-row .with{background:var(--accent);color:#fff}
.abm.abm-partner .shift-row.lead-row .with small{color:rgba(255,255,255,.88)}
.abm.abm-partner .shift-row small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.abm.abm-partner .shift-head{grid-template-columns:1fr 44px 1fr;padding:0 4px}
.abm.abm-partner .calc-left{display:grid;gap:16px;align-content:start}
.abm.abm-partner .store-note{font-size:13px;color:var(--muted)}
.abm.abm-partner .benefit.lead{background:var(--accent);color:#fff}
.abm.abm-partner .benefit.lead span{color:rgba(255,255,255,.9)}
.abm.abm-partner .benefit.lead .pill{background:#fff;color:var(--accent-text)}
.abm.abm-partner .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.abm.abm-partner .prod{background:var(--creme);border-radius:18px;overflow:hidden;display:grid;align-content:start}
.abm.abm-partner .prod-art{height:110px;display:grid;place-items:center;padding:12px;background:var(--accent-soft)}
.abm.abm-partner .prod:nth-child(2) .prod-art{background:color-mix(in srgb,var(--acc2) 22%,var(--card))}
.abm.abm-partner .prod:nth-child(3) .prod-art{background:color-mix(in srgb,var(--b-blue) 14%,var(--card))}
.abm.abm-partner .prod-art svg{width:100%;max-width:200px;height:100%}
.abm.abm-partner .prod-body{padding:18px 20px 20px;display:grid;gap:8px}
.abm.abm-partner .prod-body h3{font-size:18px;font-weight:600}
.abm.abm-partner .prod-body p{color:var(--muted);font-size:14.5px}
.abm.abm-partner .prod-body .how{font-size:13px;color:var(--ink)}
.abm.abm-partner .prod-body .how b{color:var(--accent-text)}
.abm.abm-partner .ladder{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;margin-top:22px}
.abm.abm-partner .rung{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:4px}
.abm.abm-partner .rung small{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--accent-text)}
.abm.abm-partner .rung b{font-family:var(--display);font-weight:600;font-size:16px}
.abm.abm-partner .rung span{font-size:13.5px;color:var(--muted)}
.abm.abm-partner .rung.top{background:var(--accent);box-shadow:none;color:#fff}
.abm.abm-partner .rung.top small,.abm.abm-partner .rung.top span{color:rgba(255,255,255,.9)}
.abm.abm-partner .ladder .arrow{align-self:center;font-family:var(--display);font-weight:700;font-size:24px;color:var(--accent)}
@media (max-width:860px){.abm.abm-partner .prod-grid,.abm.abm-partner .ladder{grid-template-columns:1fr}
.abm.abm-partner .ladder .arrow{transform:rotate(90deg);justify-self:center}
}
.abm.abm-partner .ubr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.abm.abm-partner .ubr{background:var(--creme);border-radius:18px;padding:22px 22px 24px;display:grid;gap:10px;align-content:start;position:relative}
.abm.abm-partner .ubr.hl{background:var(--accent);color:#fff}
.abm.abm-partner .ubr.hl p{color:rgba(255,255,255,.9)}
.abm.abm-partner .ubr .brick{justify-self:start;min-height:0;padding:10px 14px 8px;font-size:13px}
.abm.abm-partner .ubr.hl .brick{background:#fff;color:var(--accent-text)}
.abm.abm-partner .ubr h3{font-size:21px;font-weight:600;line-height:1.2}
.abm.abm-partner .ubr p{color:var(--muted);font-size:15px}
.abm.abm-partner .ubr-more{margin-top:16px;font-size:14.5px;color:var(--muted)}
.abm.abm-partner .type-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.abm.abm-partner .type-tab{border:0;border-radius:12px;padding:10px 14px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;text-align:left;display:grid;gap:2px;color:var(--ink)}
.abm.abm-partner .type-tab b{font-family:var(--display);font-weight:600;font-size:16px}
.abm.abm-partner .type-tab small{font-size:12px;color:var(--faint)}
.abm.abm-partner .type-tab:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .type-tab[aria-selected="true"]{background:var(--accent);box-shadow:none;color:#fff}
.abm.abm-partner .type-tab[aria-selected="true"] small{color:rgba(255,255,255,.85)}
.abm.abm-partner .type-tab .rec-dot{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--acc2);color:var(--ink);vertical-align:2px}
.abm.abm-partner .type-panel{background:var(--card);border-radius:18px;padding:22px;display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}
.abm.abm-partner .type-panel .type-art{background:var(--accent-soft);height:140px;margin:0}
.abm.abm-partner .type-panel h3{font-size:22px;font-weight:600;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm.abm-partner .type-panel dl{margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:15px}
.abm.abm-partner .type-panel dt{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .type-panel dd{margin:4px 0 0;color:var(--ink)}
.abm.abm-partner section.sep{border-top:1px solid var(--line)}
@media (max-width:860px){.abm.abm-partner .ubr-grid,.abm.abm-partner .type-panel,.abm.abm-partner .type-panel dl{grid-template-columns:1fr}
}
.abm.abm-partner .status-block{margin-top:26px;display:grid;gap:14px}
.abm.abm-partner .status-block h3{font-size:18px;font-weight:600}
.abm.abm-partner .status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.abm.abm-partner .status{background:var(--card);border-radius:16px;padding:16px 16px 14px;display:grid;gap:10px;align-content:start;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .status.on{box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-partner .status-top{display:grid;gap:2px}
.abm.abm-partner .status-top b{font-family:var(--display);font-size:18px;font-weight:600}
.abm.abm-partner .status-top small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .status-pct{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.abm.abm-partner .status-pct span{background:var(--accent-soft);border-radius:8px;padding:6px 4px;text-align:center;font-family:var(--display);font-weight:600;font-size:15px;color:var(--accent-text);display:grid}
.abm.abm-partner .status-pct small{font-family:var(--body);font-weight:500;font-size:10.5px;color:var(--muted)}
.abm.abm-partner .status ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);display:grid;gap:4px}
.abm.abm-partner .referral{margin-top:14px;font-size:14.5px;color:var(--muted);max-width:80ch}
.abm.abm-partner .benefit.ask{background:var(--accent-soft)}
.abm.abm-partner .benefit.ask span{color:var(--ink)}
.abm.abm-partner .asks-note{font-size:13px;color:var(--faint);margin-top:8px}
@media (max-width:860px){.abm.abm-partner .status-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){.abm.abm-partner .status-grid{grid-template-columns:1fr}
}
.abm.abm-partner .fit{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.abm.abm-partner .fit span{background:rgba(255,255,255,.16);border-radius:8px;padding:5px 8px;font-size:12.5px;display:grid;gap:1px}
.abm.abm-partner .fit em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.abm.abm-partner .proof-sec{background:var(--dark);color:var(--dark-ink)}
.abm.abm-partner .proof{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.abm.abm-partner .proof-sec .eyebrow{color:var(--acc2)}
.abm.abm-partner .proof-sec .lead{color:rgba(255,255,255,.82)}
.abm.abm-partner .facts{display:grid;gap:14px}
.abm.abm-partner .kv-proof{width:min(330px,100%);height:auto;justify-self:center;display:block;margin-block:-40px}
.abm.abm-partner .fact{display:grid;grid-template-columns:7.5em 1fr;gap:16px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:14px}
.abm.abm-partner .fact b{font-family:var(--display);font-size:20px;font-weight:600}
.abm.abm-partner .fact:nth-child(1) b{color:var(--b-orange)}
.abm.abm-partner .fact:nth-child(2) b{color:var(--b-yellow)}
.abm.abm-partner .fact:nth-child(3) b{color:var(--b-green)}
.abm.abm-partner .fact span{color:rgba(255,255,255,.88)}
.abm.abm-partner .close-in{display:grid;gap:22px}
.abm.abm-partner .close h2{font-size:clamp(28px,4vw,40px);font-weight:700;max-width:22ch}
.abm.abm-partner .brand{font-family:var(--display);font-weight:600;color:var(--muted);margin-top:28px;font-size:18px}
.abm.abm-partner .brand em{font-style:normal;color:var(--b-orange)}
@media (max-width:960px){.abm.abm-partner .types{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){.abm.abm-partner .hero-in,.abm.abm-partner .proof,.abm.abm-partner .calc,.abm.abm-partner .benefit-groups,.abm.abm-partner .lead-points{grid-template-columns:1fr}
.abm.abm-partner .leadflow{grid-template-columns:1fr}
.abm.abm-partner .lf-arrow{transform:rotate(90deg);justify-self:center}
.abm.abm-partner .kv{justify-self:center;margin-right:0;width:min(320px,80%)}
.abm.abm-partner .kv-proof{width:min(240px,70%);margin-block:8px 0}
.abm.abm-partner .hero-visual .idea-box{margin-top:-60px}
.abm.abm-partner section{padding-block:56px}
}
@media (max-width:600px){.abm.abm-partner .types,.abm.abm-partner .calc-fields{grid-template-columns:1fr}
.abm.abm-partner .shift-head{display:none}
.abm.abm-partner .shift-row{grid-template-columns:1fr;gap:4px}
.abm.abm-partner .shift-row .arrow{transform:rotate(90deg);justify-self:start}
.abm.abm-partner .fact{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .swap{animation:fade .25s ease}

  @keyframes fade{from{opacity:.5}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.abm.abm-partner .btn{transition:none}
.abm.abm-partner .btn:hover{transform:none}
}

.abm.abm-partner{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.abm.abm-partner .note,.abm.abm-partner .chrome{display:none}
.abm.abm-partner h1,.abm.abm-partner h2,.abm.abm-partner h3,.abm.abm-partner h4,.abm.abm-partner p,.abm.abm-partner span,.abm.abm-partner b{text-transform:none}
.abm.abm-partner .segctl button[aria-selected="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .seg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px}
.abm.abm-partner .seg-bar>span{font-weight:600}
.abm.abm-partner .seg-role{margin-top:18px;max-width:760px}

/* App align (class app-align, next to app-shell on the BisbrickMaster brick of the CRM list pages):
   the logo, the app menu, the page title, the stat strip, the tabs and the table all start on the
   page gutter (--app-gutter of App shell). The inset came from Bootstrap's column padding (12px a side)
   in the page's MultiColumns, one step per nesting level, and from the logo's own 20px in the master's
   floating menu. Only a column that starts a line loses its left padding, so the space between
   columns on one line stays. Generated by CRM-App-spec/local/align-crm-gutter.mjs. */

/* Logo: the master's navigationBar sets padding-left 20px inline on the logo link. */
.default .app-shell.app-align > header .nb-logo {
  padding-left: var(--app-gutter) !important;
}

/* Level 1: the columns of a page block's MultiColumn. Level 2: the columns of a MultiColumn in such a
   column, directly or as the content of a TabContent tab (List / Card / Board). */
.default .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.default .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.default .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div) {
  padding-left: 0;
}
/* A full-width column also ends on the gutter: the tabs and the table end where the menu ends. */
.default .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.default .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.default .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12 {
  padding-right: 0;
}
/* Below 768px every column is full width, so every column starts a line. */
@media (max-width: 767.98px) {
.default .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div,
.default .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div,
.default .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div {
    padding-left: 0;
    padding-right: 0;
  }
}

.default .app-shell .app-focus .app-focus__list,
.default .app-shell .app-focus .app-focus__checks {
  display: flex;
  flex-direction: column;
}
.default .app-shell .app-focus .app-focus__row,
.default .app-shell .app-focus .app-focus__check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #E4E0D8;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #292D3E;
}
.default .app-shell .app-focus .app-focus__row:last-of-type,
.default .app-shell .app-focus .app-focus__check:last-child {
  border-bottom: 0;
}
.default .app-shell .app-focus .app-focus__row[data-n="0"],
.default .app-shell .app-focus .app-focus__row[data-n=""] {
  display: none;
}
.default .app-shell .app-focus .app-focus__count {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 5px;
  background: #F6F4F0;
  font-family: "Poppins-600";
  text-align: center;
}
.default .app-shell .app-focus .app-focus__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.default .app-shell .app-focus .app-focus__detail {
  margin-left: 8px;
  color: #5F6475;
  font-size: 13px;
}
.default .app-shell .app-focus .app-focus__go {
  flex: 0 0 auto;
  font-size: 13px;
  color: #F45F3A;
  text-decoration: none;
}
.default .app-shell .app-focus .app-focus__go:hover {
  text-decoration: underline;
}
.default .app-shell .app-focus .app-focus__go::after {
  content: " \203A";
}
.default .app-shell .app-focus .app-focus__empty {
  display: none;
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  color: #5F6475;
}
.default .app-shell .app-focus .app-focus__list[data-total="0"] .app-focus__empty {
  display: block;
}
.default .app-shell .app-focus .app-focus__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.default .app-shell .app-focus .app-focus__score {
  flex: 0 0 auto;
  font-family: "Poppins-600";
  font-size: 14px;
  color: #292D3E;
}
.default .app-shell .app-focus .app-focus__bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: #F6F4F0;
  overflow: hidden;
}
.default .app-shell .app-focus .app-focus__bar > span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: #2E7D4F;
}
.default .app-shell .app-focus .app-focus__mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.5px solid #5F6475;
  border-radius: 50%;
}
/* Done checks: below the open ones, muted, without their fix link. */
.default .app-shell .app-focus .app-focus__check[data-ok="1"],
.default .app-shell .app-focus .app-focus__check[data-ok="true"] {
  order: 1;
  color: #5F6475;
}
.default .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__mark,
.default .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__mark {
  border-color: #2E7D4F;
  background: #2E7D4F;
}
.default .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__go,
.default .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__detail,
.default .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__go,
.default .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__detail {
  display: none;
}
/* App canvas: the chrome of the approved UI-refresh canvas (v28) for every page that carries the
   Campaign_menu Page component. Dark 52px app bar, white header band with the campaign tabs,
   grey page, white cards. Scope: theme 13, opt-in through the page's own Campaign_menu. */
.default .app-shell:has(.Campaign_menu) {
  background: #F4F3F0;
  font-family: "Poppins-400", Poppins, sans-serif;
  color: #292D3E;
}

/* The tenant site menu and footer are not part of the app; the account links stay, inside the bar. */
.default .app-shell:has(.Campaign_menu) > header > bisbrick-list,
.default .app-shell:has(.Campaign_menu) > header .bottom-bar,
.default .app-shell:has(.Campaign_menu) > footer {
  display: none !important;
}
/* The site navigation-bar is sticky: hidden, it measures top 0, "sticks" and teleports itself to
   body as position:fixed, out of reach of the rule above. The Campaign_menu bar is not sticky. */
body:has(.app-shell .Campaign_menu) > .nb-wrapper {
  display: none !important;
}
.default .app-shell:has(.Campaign_menu) > header {
  position: relative;
  height: 0;
  z-index: 20;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar {
  position: absolute;
  top: 0;
  right: 24px;
  height: 52px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .container {
  width: auto;
  max-width: none;
  padding: 0;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .navbar {
  padding: 0;
  background: transparent;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .nav-item.language {
  display: none;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .nav-item {
  padding: 0;
  margin: 0;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .nav-link {
  color: #D6D8E0 !important;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .nav-link span {
  font-weight: 400;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:hover {
  color: #FFFFFF !important;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .nav-link .fa-user {
  display: none;
}
/* The account name as the round avatar of the canvas (first letter; the full name is the tooltip-less link) */
.default .app-shell:has(.Campaign_menu) > header .top-bar .nav-item:has(.fa-user) {
  order: 9;
  margin-left: 8px;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #F4F3F0;
  color: #292D3E;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}
.default .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span::first-letter {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
}

/* App bar */
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(> .Campaign_menu) {
  padding: 0;
}
.default .app-shell .Campaign_menu section,
.default .app-shell .Campaign_menu .background {
  background: #292D3E !important;
  padding: 0 !important;
  margin: 0;
}
.default .app-shell .Campaign_menu .background > div {
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}
.default .app-shell .Campaign_menu .row {
  margin: 0;
}
.default .app-shell .Campaign_menu .row > div {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  padding: 0 !important;
}
.default .app-shell .Campaign_menu .nb-wrapper,
.default .app-shell .Campaign_menu .navigation-bar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  min-height: 52px;
  height: 52px;
  padding: 0 !important;
}
.default .app-shell .Campaign_menu .navigation-bar {
  display: flex;
  align-items: center;
  gap: 6px 22px;
}
.default .app-shell .Campaign_menu .nb-zone-left {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
}
.default .app-shell .Campaign_menu .nb-zone-left::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #F4F3F0;
  margin-right: 20px;
}
.default .app-shell .Campaign_menu .nb-zone-center {
  display: none;
}
.default .app-shell .Campaign_menu .nb-zone-right {
  margin-right: 300px;
}
/* Narrow screens: the navigation-bar folds into its hamburger; keep it visible on the dark bar,
   left of the account links. */
@media (max-width: 992px) {
  .default .app-shell .Campaign_menu .nb-hamburger {
    color: #F4F3F0;
    margin-right: 300px;
  }
  .default .app-shell .Campaign_menu .nb-zone-right {
    margin-right: 0;
  }
}
.default .app-shell .Campaign_menu .nb-link {
  color: #D6D8E0 !important;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-size: 13px !important;
  font-weight: 400;
  padding: 6px 12px !important;
  border-radius: 5px;
  text-decoration: none;
  background: transparent;
  line-height: 1.5;
}
.default .app-shell .Campaign_menu .nb-link::after {
  display: none !important;
}
.default .app-shell .Campaign_menu .nb-link:hover {
  color: #FFFFFF !important;
}
/* Only the current page. active-parent is added by bisbrick-url but never removed on navigation,
   so it is reset to a plain link explicitly (the theme styles it as active too). */
.default .app-shell .Campaign_menu .nb-link.active-parent:not(.nb-active) {
  color: #D6D8E0 !important;
  background: transparent;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-weight: 400;
}
/* The page names its own menu item through app-nav-N on the master (a campaign has no nb-active). */
.default .app-shell.app-nav-1 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.default .app-shell.app-nav-2 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.default .app-shell.app-nav-3 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.default .app-shell.app-nav-4 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.default .app-shell.app-nav-5 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.default .app-shell.app-nav-6 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.default .app-shell.app-nav-7 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.default .app-shell .Campaign_menu .nb-link.nb-active {
  color: #292D3E !important;
  background: #F4F3F0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
}

/* Page body: fluid, 24px gutters (Koos 2026-10-15: lists must use the full width, no 1200px column) */
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list {
  display: block;
}
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:not(:has(> .Campaign_menu)) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  float: none;
}

/* Header band (white, full width): campaign name, status, actions, then the section tabs */
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) {
  background: #FFFFFF;
  /* sideways only: a clip-path here would also cut off menus that open below the band */
  border-image: linear-gradient(#FFFFFF, #FFFFFF) fill 0 / 0 / 0 100vmax;
  padding-top: 12px;
  padding-bottom: 10px;
}
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) section,
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .background {
  background: transparent !important;
  padding: 0 !important;
}
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row {
  align-items: center;
  flex-wrap: nowrap;
}
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.default .app-shell .app-head p {
  margin: 0;
}
.default .app-shell .app-head > bisbrick-html-with-link > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.default .app-shell .app-head .app-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px 0 12px;
  background: #F4F3F0;
  border-radius: 5px 0 0 5px;
  font-size: 0;
  margin-right: -14px !important;
}
.default .app-shell .app-head .app-crumb::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
  font-weight: 600;
}
.default .app-shell .app-head .app-crumb a {
  display: none;
}
.default .app-shell .app-head .app-title {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px 0 10px;
  background: #F4F3F0;
  border-radius: 0 5px 5px 0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 17px !important;
  line-height: 1.2;
  color: #292D3E;
}
.default .app-shell .app-head .app-meta {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 200px;
  font-size: 13px;
  color: #5F6475;
}
.default .app-shell .app-head .app-meta > span:not(.app-badge) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.default .app-shell .app-head .app-badge {
  display: inline-block;
  min-width: 88px;
  box-sizing: border-box;
  text-align: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  background: #F1ECE4;
  color: #5F6475;
}
.default .app-shell .app-head .app-badge[data-s="live"],
.default .app-shell .app-head .app-badge[data-s="Live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.default .app-shell .app-head-actions .app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.default .app-shell .app-head-actions .app-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
}
.default .app-shell .app-head-actions .app-stop .app-btn {
  color: #B3261E;
  box-shadow: inset 0 0 0 1px #E8C9C6;
  border: 0;
}

/* Section tabs: the top TabContent of the page sits in the white band, the rest is grey */
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs {
  background: #FFFFFF;
  box-shadow: 0 0 0 100vmax #FFFFFF, 0 1px 0 100vmax #E6E0D6;
  clip-path: inset(0 -100vmax -1px);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab {
  padding: 10px 14px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #F45F3A;
}
.default .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab::after {
  display: none;
}

/* Inner views (sub tabs) look like the card's segment row of the canvas */
.default .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #EFEAE1;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
  box-shadow: none;
}
.default .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab {
  padding: 12px 10px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.default .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #292D3E;
}

/* Cards: white, 5px, hairline ring, no drop shadow */
.default .app-shell:has(.Campaign_menu) .app-card,
.default .app-shell:has(.Campaign_menu) .app-panel {
  background: #FFFFFF;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #E4E0D8;
}

/* Boolean switch (SurveyJS sd-boolean) in app forms, full pages AND popups. Survey theme "Default"
   of theme 13 (SurveyThemes Id 2) sets --sjs-primary-backcolor to rgba(37,137,229,0): the thumb
   text is drawn in that colour, so the selected value vanished and the switch read as an empty
   knob next to the OTHER label. Popups render in an ngb-modal-window on body, outside .app-shell,
   hence the body:has() scope. Redefined on the boolean only: buttons and other inputs keep theirs. */
.default .app-shell .sd-boolean,
body:has(.default .app-shell) > ngb-modal-window.default .sd-boolean {
  --sjs-primary-backcolor: #F45F3A;
  --sjs-primary-backcolor-light: rgba(244, 95, 58, 0.1);
}

/* Sub tabs: straight blue underline (Koos 2026-10-15) */
.default .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.default .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover,
.default .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.default .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 #2A78D6 !important;
  color: #292D3E;
}

.default .app-shell .app-page-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  margin: 0 0 8px !important;
  padding: 0 16px 0 12px;
  background: #F4F3F0;
  border-radius: 5px;
  line-height: 1.2;
}
.default .app-shell .app-page-label {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
}
.default .app-shell .app-page-name {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 17px !important;
  font-weight: 600;
  color: #292D3E;
}
.default .app-shell .app-page-sub {
  font-size: 14px !important;
  line-height: 1.5;
  color: #5A6377;
}

/* Campaign App home (home.mjs). Equal-height queue/warm cards, campaign tabs as a segmented control. */
/* MultiColumn nests host > a > section > .background > div > .row; the section is centred with inline auto margins, so every level is made a full-width flex column. */
.app-home .app-home-fill, .app-home .app-home-fill > a > section, .app-home .app-home-fill > section, .app-home .app-home-fill > a > section > .background, .app-home .app-home-fill > section > .background, .app-home .app-home-fill > a > section > .background > div, .app-home .app-home-fill > section > .background > div, .app-home .app-home-fill > a > section > .background > div > .row, .app-home .app-home-fill > section > .background > div > .row, .app-home .app-home-grow, .app-home .app-home-grow > a > section, .app-home .app-home-grow > section, .app-home .app-home-grow > a > section > .background, .app-home .app-home-grow > section > .background, .app-home .app-home-grow > a > section > .background > div, .app-home .app-home-grow > section > .background > div, .app-home .app-home-grow > a > section > .background > div > .row, .app-home .app-home-grow > section > .background > div > .row { display: flex; flex-direction: column; flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; width: 100%; box-sizing: border-box; }
.app-home .app-home-duo .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { display: flex; flex-direction: column; }
.app-home .app-home-fill .row > div:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.app-home .app-home-grow .row > div:last-child { margin-top: auto; }
.app-home .app-home-card .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-cards .row { margin-left: -10px; margin-right: -10px; }
.app-home .app-home-h2 { min-height: 44px; display: flex; align-items: center; }
/* Native rows: the one text column takes the free width (queue: title; warm: why; campaign card: ready). */
.app-home .app-home-qrow .row > div:nth-child(3), .app-home .app-home-wrow .row > div:nth-child(6), .app-home .app-home-crow .row:not(.bb-variant-stat-strip .row) > div:nth-child(4) { flex: 1 1 0; min-width: 0; }
.app-home .app-home-qrow .row > div:nth-child(3) { flex-basis: 200px; }
/* Tabs: the app-shell tab rules (app-canvas.css) are !important, so these carry more classes. */
.default .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs { display: inline-flex !important; gap: 4px !important; background: #FFFFFF !important; padding: 4px !important; border-radius: 5px !important; float: right !important; margin: -48px 0 16px !important; list-style: none !important; border: 0 !important; }
.app-home .app-home-segmented ul.grid-tabs + * { clear: both !important; }
.default .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab { border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #292D3E !important; padding: 0 16px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; font-size: 13px !important; margin: 0 !important; box-shadow: none !important; transition: none !important; }
.default .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab.selected-grid-tab { background: #292D3E !important; color: #FFFFFF !important; font-weight: 600 !important; }
.app-home .app-home-segmented li.grid-tab::after, .app-home .app-home-segmented li.grid-tab::before { display: none !important; }
@media (max-width: 900px) { .app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; padding: 0 0 32px !important; } }

/* Relation type choice (popup /relations/popup/new-relation, class app-choice-wrap on the
   MultiColumn): two cards, "Organization" or "Individual contact". The choice exists because a
   contact under an organization and a contact in their own right are different records, and the
   old /relations/accounts page could not ask the question - there, a contact always hangs under an
   account. Generated by CRM-App-spec/local/gen-rel-choice-css.mjs. */

.default .app-choice-wrap {
  padding: 4px 4px 8px;
}
.default .app-choice-wrap .app-choice__lead {
  margin: 0 0 16px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}

.default .app-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* A popup is narrow on a phone; two cards side by side would each be too thin to read. */
@media (max-width: 560px) {
  .default .app-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.default .app-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 8px;
  background: #FFFFFF;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.default .app-choice:hover,
.default .app-choice:focus-visible {
  border-color: var(--app-accent, #F45F3A);
  background: #FDF8F6;
}

.default .app-choice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #F4F3F0;
  color: #5F6475;
}
.default .app-choice:hover .app-choice__icon,
.default .app-choice:focus-visible .app-choice__icon {
  color: var(--app-accent, #F45F3A);
}
.default .app-choice__icon svg {
  width: 18px;
  height: 18px;
}

.default .app-choice__body {
  display: block;
  min-width: 0;
}
.default .app-choice__title {
  display: block;
  font-family: "Poppins-600";
  font-size: 15px;
  line-height: 20px;
  color: #292D3E;
}
.default .app-choice__sub {
  display: block;
  margin-top: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}

.bbh.bb-home{font-family:Inter, Arial, sans-serif; color:#292D3E; background:#F7F4F0; font-size:16px; line-height:1.55; overflow-x:clip; text-align:left; -webkit-font-smoothing:antialiased}
.bbh.bb-home p,.bbh.bb-home li,.bbh.bb-home summary,.bbh.bb-home label,.bbh.bb-home input,.bbh.bb-home button,.bbh.bb-home span,.bbh.bb-home a,.bbh.bb-home div,.bbh.bb-home b{font-family:inherit; letter-spacing:inherit}
.bbh.bb-home h1,.bbh.bb-home h2,.bbh.bb-home h3,.bbh.bb-home h4{text-transform:none}
.bbh.bb-home a{color:#292D3E}
.bbh.bb-home a:hover{color:#5B52C7}
.bbh.bb-home a:focus-visible,.bbh.bb-home button:focus-visible,.bbh.bb-home summary:focus-visible{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home summary{cursor:pointer}
.bbh.bb-home [hidden]{display:none !important}
.bbh.bb-home .ic{display:inline-block; flex:0 0 auto; vertical-align:middle; background-color:currentColor; -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat}
.bbh.bb-home .ic-i1{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20275%20274%22%3E%3Cpath%20d%3D%22M274.214%2068.5C274.214%2030.6728%20243.517%200%20205.66%200H85.6918C76.2276%200%2068.5534%207.66819%2068.5534%2017.125V68.5H17.1384C7.67418%2068.5%200%2076.1682%200%2085.625V205.804C0%20241.463%2027.269%20270.765%2062.117%20274H205.66C243.517%20274%20274.214%20243.327%20274.214%20205.5C274.214%20167.673%20243.517%20137%20205.66%20137C243.517%20137%20274.214%20106.327%20274.214%2068.5Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i2{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cpolyline%20points%3D%2212%205%2019%2012%2012%2019%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i3{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i4{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i5{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-3.5%208-8%209-4.5-1-8-4-8-9V6z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i6{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M12%202l2.2%205.8L20%2010l-5.8%202.2L12%2018l-2.2-5.8L4%2010l5.8-2.2z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i7{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i8{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5.4%205.4L3%2018l3%203%206.3-6.3a4%204%200%200%200%205.4-5.4l-2.5%202.5-2.4-.6-.6-2.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i9{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2214%22%20x2%3D%2214%22%20y2%3D%2214%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2217%22%20x2%3D%2217%22%20y2%3D%2217%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i10{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2213%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i11{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18%2014a6.5%206.5%200%200%201%203.5%206%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i12{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a1%201%200%200%200%201%201h3l6%204V6L7%2010H4a1%201%200%200%200-1%201z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17%208.5a5%205%200%200%201%200%207%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i13{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209l10-5%2010%205-10%205z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M6%2011v5c0%201.5%202.7%203%206%203s6-1.5%206-3v-5%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i14{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M4%2021a8%208%200%200%201%2016%200%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i15{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021h8%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%2017v4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%204h10v5a5%205%200%200%201-10%200z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17%206h3v2a3%203%200%200%201-3%203%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%206H4v2a3%203%200%200%200%203%203%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i16{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i17{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z%22%3E%3C%2Fpath%3E%3Cpolyline%20points%3D%2214%203%2014%209%2020%209%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%228%22%20y1%3D%2214%22%20x2%3D%2216%22%20y2%3D%2214%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i18{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%223%22%20y1%3D%229%22%20x2%3D%2221%22%20y2%3D%229%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i19{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%228%22%20y1%3D%228%22%20x2%3D%2216%22%20y2%3D%228%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%2216%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2216%22%20x2%3D%2212%22%20y2%3D%2216%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i20{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222.5%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%222.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M8.5%206H14a4%204%200%200%201%200%208h-4a4%204%200%200%200%200%208%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i21{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%228%206%203%2012%208%2018%22%3E%3C%2Fpolyline%3E%3Cpolyline%20points%3D%2216%206%2021%2012%2016%2018%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i22{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%227%22%20width%3D%2214%22%20height%3D%2212%22%20rx%3D%223%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2212%22%20y1%3D%223%22%20x2%3D%2212%22%20y2%3D%227%22%3E%3C%2Fline%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2213%22%20r%3D%221%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2213%22%20r%3D%221%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i23{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%225%22%20rx%3D%228%22%20ry%3D%223%22%3E%3C%2Fellipse%3E%3Cpath%20d%3D%22M4%205v6c0%201.7%203.6%203%208%203s8-1.3%208-3V5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4%2011v6c0%201.7%203.6%203%208%203s8-1.3%208-3v-6%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i24{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%207H6a5%205%200%200%200%200%2010h3%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%207h3a5%205%200%200%201%200%2010h-3%22%3E%3C%2Fpath%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%2216%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i25{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207a2%202%200%200%201%202-2h4l2%202h8a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i26{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z%22%3E%3C%2Fpath%3E%3Cpolyline%20points%3D%2214%203%2014%209%2020%209%22%3E%3C%2Fpolyline%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2214%22%20r%3D%222.5%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2213%22%20y1%3D%2216%22%20x2%3D%2215.5%22%20y2%3D%2218.5%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i27{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h5v16H4z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M9%204h5v16H9z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%205l4-1%202%2015-4%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i28{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%226%22%20x2%3D%2213%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2211%22%20x2%3D%2219%22%20y2%3D%2211%22%3E%3C%2Fline%3E%3Cline%20x1%3D%226%22%20y1%3D%2216%22%20x2%3D%2214%22%20y2%3D%2216%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224%22%20y1%3D%2220%22%20x2%3D%2220%22%20y2%3D%2220%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i29{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%223%22%20y1%3D%229%22%20x2%3D%2221%22%20y2%3D%229%22%3E%3C%2Fline%3E%3Cline%20x1%3D%223%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%2214%22%3E%3C%2Fline%3E%3Cline%20x1%3D%229%22%20y1%3D%224%22%20x2%3D%229%22%20y2%3D%2220%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i30{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%227%22%20x2%3D%2220%22%20y2%3D%227%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224%22%20y1%3D%2217%22%20x2%3D%2220%22%20y2%3D%2217%22%3E%3C%2Fline%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%222.5%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2217%22%20r%3D%222.5%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i31{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2215%22%20y%3D%223%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2211%22%20y%3D%2213%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i32{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M12%203a9%209%200%200%200%200%2018%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%228%22%20cy%3D%229%22%20r%3D%221%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%228%22%20r%3D%221%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i33{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2215%22%3E%3C%2Fline%3E%3Cline%20x1%3D%229%22%20y1%3D%2212%22%20x2%3D%2215%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i34{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpolyline%20points%3D%2212%207%2012%2012%2015.5%2014%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i35{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%3E%3C%2Frect%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%3E%3C%2Frect%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2214%22%20y1%3D%2217.5%22%20x2%3D%2221%22%20y2%3D%2217.5%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2217.5%22%20y1%3D%2214%22%20x2%3D%2217.5%22%20y2%3D%2221%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i36{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2215%206%209%2012%2015%2018%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i37{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%229%206%2015%2012%209%2018%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i38{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%206l-6%206%206%206%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i39{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i40{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i41{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h13v16H6a2%202%200%200%201-2-2Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17%208h3v10a2%202%200%200%201-2%202%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8%208h5M8%2012h5M8%2016h3%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i42{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.9%205.1L19%2010l-5.1%201.9L12%2017l-1.9-5.1L5%2010l5.1-1.9Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M19%2015l.8%202.2L22%2018l-2.2.8L19%2021l-.8-2.2L16%2018l2.2-.8Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i43{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207M18.5%2014.5A6.5%206.5%200%200%201%2021.5%2020%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i44{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i45{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%225%2012%2010%2017%2019%207%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i46{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpolyline%20points%3D%2212%207%2012%2012%2015%2014%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i47{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h12M12%206l6%206-6%206%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M20%204v16%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i48{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202%204%2014h7l-1%208%209-12h-7Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i49{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017l6-6%204%204%208-8%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%207h6v6%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i50{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i51{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.8.7%202.7a2%202%200%200%201-.5%202.1L8%209.8a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.8.6%202.7.7a2%202%200%200%201%201.7%202Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i52{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M3%209h18M8%202v4M16%202v4%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .idea-field{width:100%; box-sizing:border-box; padding:13px 15px; border:1.5px solid #E4DFD8; border-radius:10px; background:#FFFFFF; color:#292D3E; font:inherit; font-size:15px; margin:0}
.bbh.bb-home .idea-field::placeholder{color:#8B90A0}
.bbh.bb-home .idea-field:focus{border-color:#5B52C7; outline:none; box-shadow:0 0 0 4px #EEEDFB}
.bbh.bb-home .idea-go{cursor:pointer; border:0; width:100%; font-family:inherit; line-height:1.55}
.bbh.bb-home .idea-go:hover{background:#3A3F55 !important}
.bbh.bb-home .hn-picker:hover{box-shadow:0 0 0 1px #5B52C7}
.bbh.bb-home .hn-logos{-webkit-mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.bbh.bb-home .hn-logos-track{animation:hn-logos 70s linear infinite}
.bbh.bb-home .hn-logos:hover .hn-logos-track{animation-play-state:paused}

@keyframes hn-logos{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.bbh.bb-home .hn-logos-track{animation:none}
}
.bbh.bb-home .plan-dlg{border:0; border-radius:20px; padding:30px 30px 26px; box-sizing:border-box; width:100%; max-width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; margin:auto; background:#FFFFFF; color:#292D3E; font-family:Inter, Arial, sans-serif; font-size:16px; line-height:1.55; text-align:left; box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.bbh.bb-home .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.bbh.bb-home .plan-x{cursor:pointer; position:absolute; right:14px; top:12px; width:36px; height:36px; border:0; padding:0; border-radius:10px; background:transparent; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; color:#8B90A0}
.bbh.bb-home .plan-x:hover{background:#F7F4F0; color:#292D3E}
.bbh.bb-home .plan-steps li::marker{color:#5B52C7; font-weight:600}
.bbh.bb-home .plan-chips span{font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:7px; background:#F7F4F0; box-shadow:inset 0 0 0 1px #E4DFD8}
.bbh.bb-home .tk-in,.bbh.bb-home .sl-in{position:absolute; opacity:0; pointer-events:none}
.bbh.bb-home .tk-tab{cursor:pointer; background:#E8E6EA; color:#4A4E63; border-radius:999px; padding:11px 22px; font-weight:600; font-size:15px; transition:background .15s, color .15s}
.bbh.bb-home .tk-tab:hover{color:#292D3E}
.bbh.bb-home .tk-panel,.bbh.bb-home .sl{display:none}
.bbh.bb-home #hn-tk-build:checked ~ .tk-tabs label[for=hn-tk-build]{background:#FFFFFF; color:#5B52C7; box-shadow:0 4px 14px rgba(41,45,62,0.10)}
.bbh.bb-home #hn-tk-build:focus-visible ~ .tk-tabs label[for=hn-tk-build]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-tk-build:checked ~ .tk-panels .p-build{display:grid}
.bbh.bb-home #hn-tk-manage:checked ~ .tk-tabs label[for=hn-tk-manage]{background:#FFFFFF; color:#5B52C7; box-shadow:0 4px 14px rgba(41,45,62,0.10)}
.bbh.bb-home #hn-tk-manage:focus-visible ~ .tk-tabs label[for=hn-tk-manage]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-tk-manage:checked ~ .tk-panels .p-manage{display:grid}
.bbh.bb-home #hn-tk-apps:checked ~ .tk-tabs label[for=hn-tk-apps]{background:#FFFFFF; color:#5B52C7; box-shadow:0 4px 14px rgba(41,45,62,0.10)}
.bbh.bb-home #hn-tk-apps:focus-visible ~ .tk-tabs label[for=hn-tk-apps]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-tk-apps:checked ~ .tk-panels .p-apps{display:grid}
.bbh.bb-home #hn-tk-box:checked ~ .tk-tabs label[for=hn-tk-box]{background:#FFFFFF; color:#5B52C7; box-shadow:0 4px 14px rgba(41,45,62,0.10)}
.bbh.bb-home #hn-tk-box:focus-visible ~ .tk-tabs label[for=hn-tk-box]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-tk-box:checked ~ .tk-panels .p-box{display:grid}
.bbh.bb-home .sl-chip{cursor:pointer; border:1.5px solid #D9D4CC; border-radius:999px; padding:6px 12px; font-weight:600; font-size:13px; color:#4A4E63; background:#FFFFFF}
.bbh.bb-home .sl-chip:hover{border-color:#292D3E; color:#292D3E}
.bbh.bb-home .sl-arrow{cursor:pointer; width:44px; height:44px; border-radius:5px; border:1.5px solid #CFC9C1; background:#FFFFFF; display:flex; align-items:center; justify-content:center; color:#292D3E}
.bbh.bb-home .sl-arrow:hover{border-color:#292D3E}
.bbh.bb-home #hn-sl-1:checked ~ .sl-chips label[for=hn-sl-1]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-1:checked ~ .sl-track .s-1{display:flex}
.bbh.bb-home #hn-sl-1:focus-visible ~ .sl-chips label[for=hn-sl-1]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-2:checked ~ .sl-chips label[for=hn-sl-2]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-2:checked ~ .sl-track .s-2{display:flex}
.bbh.bb-home #hn-sl-2:focus-visible ~ .sl-chips label[for=hn-sl-2]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-3:checked ~ .sl-chips label[for=hn-sl-3]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-3:checked ~ .sl-track .s-3{display:flex}
.bbh.bb-home #hn-sl-3:focus-visible ~ .sl-chips label[for=hn-sl-3]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-4:checked ~ .sl-chips label[for=hn-sl-4]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-4:checked ~ .sl-track .s-4{display:flex}
.bbh.bb-home #hn-sl-4:focus-visible ~ .sl-chips label[for=hn-sl-4]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-5:checked ~ .sl-chips label[for=hn-sl-5]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-5:checked ~ .sl-track .s-5{display:flex}
.bbh.bb-home #hn-sl-5:focus-visible ~ .sl-chips label[for=hn-sl-5]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-6:checked ~ .sl-chips label[for=hn-sl-6]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-6:checked ~ .sl-track .s-6{display:flex}
.bbh.bb-home #hn-sl-6:focus-visible ~ .sl-chips label[for=hn-sl-6]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-7:checked ~ .sl-chips label[for=hn-sl-7]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-7:checked ~ .sl-track .s-7{display:flex}
.bbh.bb-home #hn-sl-7:focus-visible ~ .sl-chips label[for=hn-sl-7]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-8:checked ~ .sl-chips label[for=hn-sl-8]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-8:checked ~ .sl-track .s-8{display:flex}
.bbh.bb-home #hn-sl-8:focus-visible ~ .sl-chips label[for=hn-sl-8]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-9:checked ~ .sl-chips label[for=hn-sl-9]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-9:checked ~ .sl-track .s-9{display:flex}
.bbh.bb-home #hn-sl-9:focus-visible ~ .sl-chips label[for=hn-sl-9]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-10:checked ~ .sl-chips label[for=hn-sl-10]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-10:checked ~ .sl-track .s-10{display:flex}
.bbh.bb-home #hn-sl-10:focus-visible ~ .sl-chips label[for=hn-sl-10]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-11:checked ~ .sl-chips label[for=hn-sl-11]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-11:checked ~ .sl-track .s-11{display:flex}
.bbh.bb-home #hn-sl-11:focus-visible ~ .sl-chips label[for=hn-sl-11]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-12:checked ~ .sl-chips label[for=hn-sl-12]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-12:checked ~ .sl-track .s-12{display:flex}
.bbh.bb-home #hn-sl-12:focus-visible ~ .sl-chips label[for=hn-sl-12]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home .hn-card{transition:box-shadow .15s}
.bbh.bb-home a.hn-card:hover{color:#292D3E; box-shadow:0 0 0 2px #5B52C7}
.bbh.bb-home a.hn-card:hover .hn-more{color:#5B52C7}
.bbh.bb-home .hn-link:hover{box-shadow:0 0 0 2px #5B52C7}
.bbh.bb-home .hn-link:hover .hn-more{color:#5B52C7}
.bbh.bb-home .hn-stretch::after{content:""; position:absolute; inset:0; border-radius:inherit}
.bbh.bb-home .hn-clamp{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; max-height:6.4em; line-height:1.6; pointer-events:none}
.bbh.bb-home .hn-clamp *{display:inline; margin:0; padding:0; border:0; background:none; box-shadow:none; font:inherit !important; color:inherit !important; text-decoration:none; white-space:normal}
.bbh.bb-home .hn-clamp br,.bbh.bb-home .hn-clamp img{display:none}
.bbh.bb-home .hn-clamp p::after,.bbh.bb-home .hn-clamp div::after{content:" "}
.bbh.bb-home [aria-current="page"]{color:#5B52C7; font-weight:700}
.bbh.bb-home .hn-app-dlg{max-width:min(920px, calc(100vw - 32px)); padding:0}
.bbh.bb-home .hn-app-in{position:relative; padding:26px 28px 28px; display:flex; flex-direction:column; gap:20px}
.bbh.bb-home .hn-carousel{display:flex; flex-direction:column; gap:10px}
.bbh.bb-home .hn-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; border-radius:14px}
.bbh.bb-home .hn-track::-webkit-scrollbar{display:none}
.bbh.bb-home .hn-track:focus-visible{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home .hn-slide{flex:0 0 100%; scroll-snap-align:start; margin:0; display:flex; flex-direction:column; gap:8px}
.bbh.bb-home .hn-slide img,.bbh.bb-home .hn-slide video,.bbh.bb-home .hn-shot{display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; object-position:top left; border-radius:14px; background:#F7F4F0}
.bbh.bb-home .hn-shot{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; box-shadow:inset 0 0 0 1.5px rgba(41,45,62,.12)}
.bbh.bb-home .hn-shot > span:last-child{font-size:13px; font-weight:600; color:#5F6475}
.bbh.bb-home .hn-slide figcaption{font-size:14px; font-weight:600; color:#4A4E63}
.bbh.bb-home .hn-count{font-size:14px; color:#5F6475; margin-right:auto}
.bbh.bb-home .hn-nav{cursor:pointer; width:40px; height:40px; padding:0; margin:0; border-radius:5px; border:1.5px solid #CFC9C1; background:#FFFFFF; display:flex; align-items:center; justify-content:center}
.bbh.bb-home .hn-nav:hover{border-color:#292D3E}
@media (max-width:560px){.bbh.bb-home .hn-app-in{padding:20px 18px 22px}
}
.bbh.bb-home .hn-stack > summary{list-style:none; cursor:pointer}
.bbh.bb-home .hn-stack > summary::-webkit-details-marker{display:none}
.bbh.bb-home .hn-stack > summary:focus-visible{outline:3px solid #5B52C7; outline-offset:2px; border-radius:24px}
.bbh.bb-home .hn-stack-btn{color:#292D3E}
.bbh.bb-home .hn-stack > summary:hover .hn-stack-btn{background:#292D3E; color:#FFFFFF}
.bbh.bb-home .hn-stack-close,.bbh.bb-home .hn-stack[open] .hn-stack-open{display:none}
.bbh.bb-home .hn-stack[open] .hn-stack-close{display:inline}
.bbh.bb-home .hn-stack[open] .hn-chev{transform:rotate(225deg); margin-top:4px}
.bbh.bb-home .hn-help:hover{box-shadow:0 0 0 2px #5B52C7, 0 18px 40px -18px rgba(41,45,62,0.35)}
.bbh.bb-home .hn-days{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px}
.bbh.bb-home .hn-days:empty,.bbh.bb-home .hn-times:empty{display:none}
.bbh.bb-home .hn-day{cursor:pointer; font:inherit; font-size:13px; text-align:center; background:#FFFFFF; color:#292D3E; border:1.5px solid #E4DFD8; border-radius:12px; padding:8px 4px; margin:0}
.bbh.bb-home .hn-day span,.bbh.bb-home .hn-day b{display:block}
.bbh.bb-home .hn-day b{font-size:17px}
.bbh.bb-home .hn-day:hover{border-color:#292D3E}
.bbh.bb-home .hn-day[aria-pressed="true"]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home .hn-times{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.bbh.bb-home .hn-time{cursor:pointer; font:inherit; font-size:15px; font-weight:600; text-align:center; background:#FFFFFF; color:#292D3E; border:1.5px solid #E4DFD8; border-radius:5px; padding:9px; margin:0}
.bbh.bb-home .hn-time:hover{border-color:#292D3E}
.bbh.bb-home .hn-time[aria-pressed="true"]{background:#F1EFFB; border-color:#5B52C7; color:#4A42B0}
.bbh.bb-home .hn-label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600}
.bbh.bb-home .hn-input{font:inherit; font-weight:400; font-size:16px; border:1.5px solid #CFC9C1; border-radius:12px; padding:13px 14px; background:#FFFFFF; color:#292D3E; margin:0; width:100%; box-sizing:border-box}
.bbh.bb-home .hn-input:focus{border-color:#5B52C7; outline:none; box-shadow:0 0 0 4px #EEEDFB}
.bbh.bb-home .hn-hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.bbh.bb-home .hn-book-go{cursor:pointer; font:inherit; font-weight:700; background:#292D3E; color:#FFFFFF; border:0; border-radius:10px; padding:14px; margin:0}
.bbh.bb-home .hn-book-go:hover{background:#3A3F55}
.bbh.bb-home .hn-book-go:disabled{opacity:.6; cursor:default}
@media (max-width:420px){.bbh.bb-home .hn-times{grid-template-columns:repeat(2, 1fr)}
.bbh.bb-home #hn-demo{padding:24px}
}

.bbh.bb-home.hn-cols{display:block; padding-bottom:96px; box-sizing:border-box}
.bbh.bb-home.hn-cols .row{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px; margin:0; padding:0 12px}
.bbh.bb-home.hn-cols .row > div{width:auto; max-width:none; flex:none; padding:0; display:flex; flex-direction:column}
.bbh.bb-home.hn-cols .row > div *:has(.hn-card){display:flex; flex-direction:column; flex:1 1 auto}
.bbh.bb-home.hn-cols .hn-card{flex:1 1 auto}
.bbh.bb-home.hn-cols.hn-cta4 .row > div{order:2}
.bbh.bb-home.hn-cols.hn-cta4 .row > div:nth-child(-n+3){order:0}
.bbh.bb-home.hn-cols.hn-cta4 .row > div:last-child{order:1}
.bbh.bb-home.hn-cols.hn-sm .row{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px}
.bbh.bb-home.hn-cols.hn-list{max-width:880px}
.bbh.bb-home.hn-cols.hn-blog .row > div:first-child{grid-column:1 / -1}
@media (min-width:768px){
.bbh.bb-home.hn-cols.hn-blog .row > div:first-child .hn-post{flex-direction:row !important}
.bbh.bb-home.hn-cols.hn-blog .row > div:first-child .hn-post-img{flex:0 0 58%; aspect-ratio:auto !important; min-height:340px}
.bbh.bb-home.hn-cols.hn-blog .row > div:first-child .hn-post-body{padding:40px !important; justify-content:center}
.bbh.bb-home.hn-cols.hn-blog .row > div:first-child .hn-post-t{font-size:clamp(26px, 2.6vw, 34px) !important; font-weight:700 !important}
}
.bbh.bb-home.hn-formcard{background:#FFFFFF; border-radius:24px; box-sizing:border-box; padding:32px 32px 24px}
.bbh.bb-home.hn-formcard .bbh.bb-home{background:transparent}
.bbh.bb-home.hn-split-text{padding:0 56px 40px 0}
@media (max-width:991px){.bbh.bb-home.hn-formcard{padding:24px 20px 16px} .bbh.bb-home.hn-split-text{padding:0 0 32px}}
.bbh.bb-home.hn-cols.hn-list .row{display:flex; flex-direction:column; gap:12px}
body:has(.bbh.bb-home[data-block]) bisbrick-floating-menu-bisbrick{display:none !important}
body:has(.bbh.bb-home[data-block]){background:#F7F4F0}
.bisbricknew {
  --primary-1: #6553e7;
  --primary-1-rgb: 101,83,231;
}
.bisbricknew .h1, .bisbricknew h1, bisbricknew .h1, bisbricknew h1 {
  font-family: Arial Black;
  text-transform: none;
  font-size: 40px;
}
.bisbricknew .h2, .bisbricknew h2, bisbricknew .h2, bisbricknew h2 {
  font-family: Arial Black;
  text-transform: none;
  font-size: 25px;
}
@charset "UTF-8";
.bisbricknew {
  /* ============================================================
  MHC Mobility — 360° Feedback rapport
  Styling voor AI-gegenereerde individuele rapporten
  Werkt samen met mhc_360_systemprompt.md
  ============================================================ */
  /* ---------- 1. Design tokens (scoped to .mhc-360) ---------- */
  /* ---------- 2. Reset & base ---------- */
  /* Demo-only body styling — niet onderdeel van het component zelf.
     In Bisbrick (of een andere host) wordt deze regel niet gebruikt;
     het component zelf is volledig zelf-bevattend onder .mhc-360. */
  /* ---------- 3. Component root + headings (alles onder .mhc-360) ---------- */
  /* ---------- 4. Header ---------- */
  /* Section markers — big amber numerals before each section title */
  /* Stats strip — hero KPI tiles in section 1 */
  /* Reasons panel — Wat zou de reden kunnen zijn? */
  /* ---------- 5. Sectie 1: Overzicht ---------- */
  /* Spider chart container */
  /* Key findings */
  /* ---------- 6. Sectie 2: Verdieping ---------- */
  /* Score pills */
  /* Rode draad */
  /* ---------- 7. Sectie 3: Details ---------- */
  /* Filter mhc-360__bar */
  /* Detail tables */
  /* Filter — driestand via data-attribuut op .mhc-360__details */
  /* Niveau-tags */
  /* Delta */
  /* ---------- 8. Bar charts per vraag (sectie 3) ---------- */
  /* Axis mhc-360__bar across the top — D B E L labels aligned with mhc-360__bar zones */
  /* Per-question block */
  /* Question header: scenario text + delta badge */
  /* Bar rows wrapper */
  /* Single mhc-360__bar row: source label + track */
  /* Bar track — background with subtle level zones */
  /* Target line — vertical marker */
  /* The actual mhc-360__bar — fills from left to its mhc-360__score */
  /* Score value label — sits directly after the mhc-360__bar's end */
  /* "Niet geobserveerd" state — striped mhc-360__bar instead of solid */
  /* Filter hides rows based on selection */
  /* Legend below charts */
  /* Toggle to show exact mhc-360__tag table below dumbbell */
  /* ---------- 9. Footer ---------- */
  /* ---------- 10. Responsive ---------- */
  /* ---------- 11. Print ---------- */
  /* ════════════════════════════════════════════════════════════════════════
     12. SECTION ICONS — CSS-only, SVG via data URI
     Icons sit before the h2 text in each section-marker. The agent adds
     a single class to the h2 (e.g. mhc-360__ico--overview); no extra
     HTML element, no inline SVG, no LLM geometry.
     ════════════════════════════════════════════════════════════════════════ */
  /* ════════════════════════════════════════════════════════════════════════
     13. TREND MOTIF — subtle upward trend line on "good" stat tiles
     Decorative only, drawn via ::after on .mhc-360__stat--good. No JS,
     no inline SVG in the HTML.
     ════════════════════════════════════════════════════════════════════════ */
  /* Attention-tile gets a subtle "spread/gap" motif instead — two diverging lines */
  /* ════════════════════════════════════════════════════════════════════════
     14. HOST-PROOFING — force every text color with !important + doubled
     root selector specificity. Wins cascade against host stylesheets that
     set global text colors on p / li / td via :root, body, or class rules
     loaded after this sheet. The earlier inheritance-based colors lose
     the cascade in some embed contexts; these rules win it outright.
     ════════════════════════════════════════════════════════════════════════ */
  /* Dark body text on light surfaces */
  /* Section + body headings — navy */
  /* Eyebrow + amber accent labels */
  /* WHITE text on dark surfaces — forced so host cannot darken */
  /* Eyebrow stays amber */
  /* Score pill colors */
  /* Tag colors keep their semantic foreground */
  /* Delta semantic colors */
  /* Bar value labels keep their accent */
  /* nested strong follows parent's forced color */
}
.bisbricknew .mhc-360 {
  /* Brand kleuren */
  --navy: #1F3A5F;
  --navy-soft: #2C4F7B;
  --amber: #C9A352;
  --amber-warm: #E29F47;
  /* Data-serie kleuren */
  --self: #2E9CCA;
  /* zelfreflectie — cyan */
  --self-bg: rgba(46, 156, 202, 0.12);
  --self-border: rgba(46, 156, 202, 0.45);
  --manager: #E29F47;
  /* manager — warm amber */
  --manager-bg: rgba(226, 159, 71, 0.12);
  --manager-border: rgba(226, 159, 71, 0.45);
  --target: #555555;
  /* target — neutraal grijs (dotted in chart) */
  --ambition: #6FAE83;
  /* ambitie — sage groen (dashed in chart) */
  /* Niveau-tags (D / B / E / L) */
  --tag-D-bg: #E8F2F9;
  --tag-D-fg: #1F567F;
  --tag-B-bg: #FAE9D4;
  --tag-B-fg: #8A5A1F;
  --tag-E-bg: #DCEDE0;
  --tag-E-fg: #2A6D45;
  --tag-L-bg: #E8DEF2;
  --tag-L-fg: #4E3878;
  --tag-NO-bg: #ECEEF1;
  --tag-NO-fg: #6C757D;
  /* Delta */
  --delta-positive: #2A6D45;
  --delta-negative: #B23A48;
  --delta-zero: #6C757D;
  /* Surface */
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --surface-soft: #F4F1EA;
  --border: #E5E7EB;
  --border-soft: #EFEDE8;
  /* Tekst */
  --text: #1F2937;
  --text-soft: #4B5563;
  --text-mute: #6B7280;
  /* Type & layout */
  --font: "Helvetica Neue", "Arial", system-ui, -apple-system, sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.bisbricknew *, .bisbricknew *::before, .bisbricknew *::after {
  box-sizing: border-box;
}
.bisbricknew html {
  -webkit-text-size-adjust: 100%;
}
.bisbricknew body {
  margin: 0;
  padding: 40px 20px 80px;
  font-family: "Helvetica Neue", "Arial", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #1F2937;
  background: #FBFAF7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bisbricknew .mhc-360 {
  max-width: 880px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.bisbricknew .mhc-360 h1,
.bisbricknew .mhc-360 h2,
.bisbricknew .mhc-360 h3,
.bisbricknew .mhc-360 h4 {
  margin: 0;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}
.bisbricknew .mhc-360 p {
  margin: 0 0 0.9em;
}
.bisbricknew .mhc-360 ul {
  margin: 0 0 0.9em;
  padding-left: 1.4em;
}
.bisbricknew .mhc-360 li {
  margin-bottom: 0.5em;
}
.bisbricknew .mhc-360__header {
  padding: 48px 48px 36px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.bisbricknew .mhc-360__header::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 163, 82, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.bisbricknew .mhc-360__header .mhc-360__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 12px;
  font-weight: 600;
  position: relative;
}
.bisbricknew .mhc-360__header h1 {
  font-size: 32px;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  position: relative;
}
.bisbricknew .mhc-360__header .mhc-360__meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  font-style: italic;
  position: relative;
}
.bisbricknew .mhc-360__section-marker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
}
.bisbricknew .mhc-360__section-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-warm) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(201, 163, 82, 0.3);
}
.bisbricknew .mhc-360__section-marker h2 {
  margin: 0;
  font-size: 22px;
  padding-bottom: 0;
  border-bottom: none;
}
.bisbricknew .mhc-360__stats {
  display: flex;
  gap: 12px;
  margin: 0 0 32px;
}
.bisbricknew .mhc-360__stat {
  flex: 1 1 0;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bisbricknew .mhc-360__stat:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.bisbricknew .mhc-360__stat .mhc-360__stat-label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 4px;
}
.bisbricknew .mhc-360__stat .mhc-360__stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.bisbricknew .mhc-360__stat .mhc-360__stat-value.mhc-360__stat-value--text {
  font-size: 17px;
}
.bisbricknew .mhc-360__stat .mhc-360__stat-of {
  font-size: 16px;
  color: var(--text-mute);
  font-weight: 500;
}
.bisbricknew .mhc-360__stat .mhc-360__stat-sub {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: auto;
  padding-top: 4px;
}
.bisbricknew .mhc-360__stat.mhc-360__stat--attention {
  border-color: var(--manager-border);
  background: linear-gradient(135deg, var(--manager-bg) 0%, var(--surface) 60%);
}
.bisbricknew .mhc-360__stat.mhc-360__stat--attention .mhc-360__stat-value {
  color: #946D24;
}
.bisbricknew .mhc-360__stat.mhc-360__stat--good {
  border-color: rgba(111, 174, 131, 0.4);
  background: linear-gradient(135deg, rgba(111, 174, 131, 0.1) 0%, var(--surface) 60%);
}
.bisbricknew .mhc-360__stat.mhc-360__stat--good .mhc-360__stat-value {
  color: #2A6D45;
}
.bisbricknew .mhc-360__reasons {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 30px 24px;
  margin-top: 24px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.bisbricknew .mhc-360__reasons > h3 {
  font-size: 18px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bisbricknew .mhc-360__reasons > h3::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.bisbricknew .mhc-360__reasons-intro {
  color: var(--text-soft);
  font-size: 13.5px;
  margin: 0 0 22px;
  padding-left: 40px;
}
.bisbricknew .mhc-360__reasons-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.bisbricknew .mhc-360__reason {
  flex: 1 1 calc(50% - 8px);
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 14px;
  position: relative;
}
.bisbricknew .mhc-360__reason .mhc-360__reason-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.bisbricknew .mhc-360__reason.mhc-360__reason--self-high .mhc-360__reason-icon {
  background: var(--self-bg);
  color: var(--self);
}
.bisbricknew .mhc-360__reason.mhc-360__reason--manager-high .mhc-360__reason-icon {
  background: var(--manager-bg);
  color: var(--manager);
}
.bisbricknew .mhc-360__reason.mhc-360__reason--aligned-below .mhc-360__reason-icon {
  background: rgba(178, 58, 72, 0.1);
  color: var(--delta-negative);
}
.bisbricknew .mhc-360__reason.mhc-360__reason--aligned-ok .mhc-360__reason-icon {
  background: rgba(42, 109, 69, 0.1);
  color: var(--delta-positive);
}
.bisbricknew .mhc-360__reason h4 {
  font-size: 14px;
  color: var(--navy);
  margin: 0 0 10px;
  font-weight: 600;
  line-height: 1.35;
}
.bisbricknew .mhc-360__reason ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.bisbricknew .mhc-360__reason li {
  margin-bottom: 6px;
}
.bisbricknew .mhc-360__reason li:last-child {
  margin-bottom: 0;
}
.bisbricknew .mhc-360__reason li::marker {
  color: var(--amber);
}
.bisbricknew .mhc-360__overview {
  padding: 40px 48px;
  border-bottom: 1px solid var(--border);
}
.bisbricknew .mhc-360__overview h2 {
  font-size: 22px;
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.bisbricknew .mhc-360__chart-wrap {
  position: relative;
  height: 460px;
  margin: 0 0 36px;
  padding: 16px 8px 8px;
  background: var(--surface-soft);
  border-radius: var(--radius);
}
.bisbricknew .mhc-360__findings {
  background: var(--surface-soft);
  border-left: 4px solid var(--amber);
  padding: 20px 24px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.bisbricknew .mhc-360__findings h3 {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber-warm);
  margin: 0 0 12px;
  font-weight: 700;
}
.bisbricknew .mhc-360__findings ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.bisbricknew .mhc-360__findings li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--text);
  line-height: 1.55;
}
.bisbricknew .mhc-360__findings li:last-child {
  margin-bottom: 0;
}
.bisbricknew .mhc-360__findings li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amber);
  font-weight: bold;
}
.bisbricknew .mhc-360__deep-dive {
  padding: 40px 48px;
  border-bottom: 1px solid var(--border);
}
.bisbricknew .mhc-360__deep-dive > h2:first-child {
  font-size: 22px;
  margin: 0 0 28px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.bisbricknew .mhc-360__comp {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.bisbricknew .mhc-360__comp header {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-soft);
}
.bisbricknew .mhc-360__comp header h3 {
  font-size: 17px;
  margin: 0 0 10px;
}
.bisbricknew .mhc-360__scores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bisbricknew .mhc-360__score {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.bisbricknew .mhc-360__score--self {
  background: var(--self-bg);
  color: #14618A;
  border: 1px solid var(--self-border);
}
.bisbricknew .mhc-360__score--manager {
  background: var(--manager-bg);
  color: #8A5A1F;
  border: 1px solid var(--manager-border);
}
.bisbricknew .mhc-360__score--target {
  background: transparent;
  color: var(--text-soft);
  border: 1px dashed #B5B5B5;
}
.bisbricknew .mhc-360__score--ambition {
  background: transparent;
  color: var(--ambition);
  border: 1px dotted var(--ambition);
}
.bisbricknew .mhc-360__comp .mhc-360__observation {
  color: var(--text);
  margin-bottom: 12px;
}
.bisbricknew .mhc-360__comp .mhc-360__recommendation {
  background: var(--surface-soft);
  border-left: 3px solid var(--amber);
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0;
  font-size: 14.5px;
  color: var(--text);
}
.bisbricknew .mhc-360__comp .mhc-360__recommendation::before {
  content: "Volgende stap";
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-warm);
  font-weight: 700;
  margin-bottom: 4px;
}
.bisbricknew .mhc-360__overall {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-top: 24px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.bisbricknew .mhc-360__overall h3 {
  color: #fff;
  font-size: 17px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.bisbricknew .mhc-360__overall p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.6;
}
.bisbricknew .mhc-360__details {
  padding: 40px 48px;
}
.bisbricknew .mhc-360__details > h2 {
  font-size: 22px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.bisbricknew .mhc-360__details-intro {
  color: var(--text-soft);
  font-size: 14px;
  margin: 0 0 24px;
}
.bisbricknew .mhc-360__filter-bar {
  display: inline-flex;
  background: var(--surface-soft);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 28px;
  gap: 0;
}
.bisbricknew .mhc-360__filter-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.bisbricknew .mhc-360__filter-btn:hover {
  color: var(--navy);
}
.bisbricknew .mhc-360__filter-btn.is-active {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.bisbricknew .mhc-360__filter-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.bisbricknew .mhc-360__comp-detail {
  margin-bottom: 28px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.bisbricknew .mhc-360__comp-detail h3 {
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--navy);
  font-weight: 600;
}
.bisbricknew .mhc-360__detail-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13.5px;
}
.bisbricknew .mhc-360__detail-table thead {
  background: var(--surface-soft);
}
.bisbricknew .mhc-360__detail-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--navy);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.bisbricknew .mhc-360__detail-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.bisbricknew .mhc-360__detail-table tr:last-child td {
  border-bottom: none;
}
.bisbricknew .mhc-360__detail-table tbody tr:hover {
  background: var(--surface-soft);
}
.bisbricknew .mhc-360__detail-table .mhc-360__col--question {
  width: 42%;
  color: var(--text);
}
.bisbricknew .mhc-360__detail-table .mhc-360__col--self,
.bisbricknew .mhc-360__detail-table .mhc-360__col--manager {
  width: 22%;
  text-align: center;
}
.bisbricknew .mhc-360__detail-table .mhc-360__col--delta {
  width: 14%;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bisbricknew .mhc-360__detail-table th.mhc-360__col--self,
.bisbricknew .mhc-360__detail-table td.mhc-360__col--self {
  background: rgba(46, 156, 202, 0.04);
}
.bisbricknew .mhc-360__detail-table th.mhc-360__col--manager,
.bisbricknew .mhc-360__detail-table td.mhc-360__col--manager {
  background: rgba(226, 159, 71, 0.04);
}
.bisbricknew .mhc-360__details[data-filter=self] .mhc-360__col--manager,
.bisbricknew .mhc-360__details[data-filter=self] .mhc-360__col--delta {
  display: none;
}
.bisbricknew .mhc-360__details[data-filter=manager] .mhc-360__col--self,
.bisbricknew .mhc-360__details[data-filter=manager] .mhc-360__col--delta {
  display: none;
}
.bisbricknew .mhc-360__tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.bisbricknew .mhc-360__tag--D {
  background: var(--tag-D-bg);
  color: var(--tag-D-fg);
}
.bisbricknew .mhc-360__tag--B {
  background: var(--tag-B-bg);
  color: var(--tag-B-fg);
}
.bisbricknew .mhc-360__tag--E {
  background: var(--tag-E-bg);
  color: var(--tag-E-fg);
}
.bisbricknew .mhc-360__tag--L {
  background: var(--tag-L-bg);
  color: var(--tag-L-fg);
}
.bisbricknew .mhc-360__tag--NO {
  background: var(--tag-NO-bg);
  color: var(--tag-NO-fg);
  font-style: italic;
  font-weight: 500;
}
.bisbricknew .mhc-360__delta--positive {
  color: var(--delta-positive);
}
.bisbricknew .mhc-360__delta--negative {
  color: var(--delta-negative);
}
.bisbricknew .mhc-360__delta--zero {
  color: var(--delta-zero);
}
.bisbricknew .mhc-360__bar-chart {
  background: var(--surface-soft);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  margin: 12px 0 18px;
}
.bisbricknew .mhc-360__axis {
  display: flex;
  margin-bottom: 14px;
  padding-left: 82px;
  /* matches .mhc-360__bar-source width + gap */
  padding-right: 70px;
  /* leaves room for the value labels at end of bars */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  border-bottom: 1px dashed var(--border);
  padding-bottom: 8px;
}
.bisbricknew .mhc-360__axis .mhc-360__axis-label {
  flex: 1 1 0;
  text-align: center;
  position: relative;
}
.bisbricknew .mhc-360__question {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border);
}
.bisbricknew .mhc-360__question:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.bisbricknew .mhc-360__q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.bisbricknew .mhc-360__q-label {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.35;
}
.bisbricknew .mhc-360__q-delta {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  min-width: 44px;
}
.bisbricknew .mhc-360__q-delta.mhc-360__delta--positive {
  color: var(--delta-positive);
  border-color: rgba(42, 109, 69, 0.3);
}
.bisbricknew .mhc-360__q-delta.mhc-360__delta--negative {
  color: var(--delta-negative);
  border-color: rgba(178, 58, 72, 0.3);
}
.bisbricknew .mhc-360__q-delta.mhc-360__delta--zero {
  color: var(--text-mute);
  font-weight: 500;
}
.bisbricknew .mhc-360__q-delta.mhc-360__delta--NO {
  color: var(--text-mute);
  font-style: italic;
  font-weight: 500;
}
.bisbricknew .mhc-360__bar-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bisbricknew .mhc-360__bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bisbricknew .mhc-360__bar-source {
  flex: 0 0 72px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.bisbricknew .mhc-360__bar-row.mhc-360__bar-row--self .mhc-360__bar-source {
  color: #14618A;
}
.bisbricknew .mhc-360__bar-row.mhc-360__bar-row--manager .mhc-360__bar-source {
  color: #8A5A1F;
}
.bisbricknew .mhc-360__bar-track {
  flex: 1 1 auto;
  position: relative;
  height: 22px;
  background: linear-gradient(to right, var(--tag-D-bg) 0%, var(--tag-D-bg) 25%, var(--tag-B-bg) 25%, var(--tag-B-bg) 50%, var(--tag-E-bg) 50%, var(--tag-E-bg) 75%, var(--tag-L-bg) 75%, var(--tag-L-bg) 100%);
  border-radius: 4px;
  opacity: 0.95;
  margin-right: 60px;
  /* room for value label */
}
.bisbricknew .mhc-360__bar-track::after {
  /* faint zone divider lines */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 0, transparent calc(25% - 1px), rgba(255, 255, 255, 0.6) calc(25% - 1px), rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent calc(50% - 1px), rgba(255, 255, 255, 0.6) calc(50% - 1px), rgba(255, 255, 255, 0.6) 50%, transparent 50%, transparent calc(75% - 1px), rgba(255, 255, 255, 0.6) calc(75% - 1px), rgba(255, 255, 255, 0.6) 75%, transparent 75%);
  pointer-events: none;
  border-radius: 4px;
}
.bisbricknew .mhc-360__target-line {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--target);
  /* Map mhc-360__score 1→25%, 2→50%, 3→75%, 4→100% */
  left: calc(var(--score) / 4 * 100%);
  border-radius: 1px;
  opacity: 0.65;
  transform: translateX(-50%);
  z-index: 1;
}
.bisbricknew .mhc-360__target-line::before {
  content: "▼";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--target);
  opacity: 0.7;
}
.bisbricknew .mhc-360__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--score) / 4 * 100%);
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: width 0.4s ease;
  overflow: visible;
}
.bisbricknew .mhc-360__bar--self {
  background: linear-gradient(to right, var(--self) 0%, #45B0DC 100%);
  color: #fff;
}
.bisbricknew .mhc-360__bar--manager {
  background: linear-gradient(to right, var(--manager) 0%, #EFB264 100%);
  color: #fff;
}
.bisbricknew .mhc-360__bar-value {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.bisbricknew .mhc-360__bar--self .mhc-360__bar-value {
  color: #14618A;
}
.bisbricknew .mhc-360__bar--manager .mhc-360__bar-value {
  color: #8A5A1F;
}
.bisbricknew .mhc-360__bar-track.mhc-360__bar-track--no .mhc-360__bar-no-label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 11px;
  font-style: italic;
  color: var(--text-mute);
  z-index: 2;
}
.bisbricknew .mhc-360__bar-track.mhc-360__bar-track--no::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(108, 117, 125, 0.12) 6px, rgba(108, 117, 125, 0.12) 12px);
  border-radius: 4px;
  z-index: 1;
}
.bisbricknew .mhc-360__details[data-filter=self] .mhc-360__bar-row--manager,
.bisbricknew .mhc-360__details[data-filter=self] .mhc-360__q-delta,
.bisbricknew .mhc-360__details[data-filter=manager] .mhc-360__bar-row--self,
.bisbricknew .mhc-360__details[data-filter=manager] .mhc-360__q-delta {
  display: none;
}
.bisbricknew .mhc-360__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 20px;
}
.bisbricknew .mhc-360__legend > span {
  display: inline-flex;
  align-items: center;
  margin-right: 24px;
  margin-bottom: 2px;
}
.bisbricknew .mhc-360__legend > span:last-child {
  margin-right: 0;
}
.bisbricknew .mhc-360__legend > span > * {
  margin-right: 8px;
}
.bisbricknew .mhc-360__legend-swatch {
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
}
.bisbricknew .mhc-360__legend-swatch.mhc-360__legend-swatch--self {
  background: var(--self);
}
.bisbricknew .mhc-360__legend-swatch.mhc-360__legend-swatch--manager {
  background: var(--manager);
}
.bisbricknew .mhc-360__legend-line {
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--target);
}
.bisbricknew .mhc-360__table-toggle {
  margin-top: 8px;
}
.bisbricknew .mhc-360__table-toggle summary {
  font-size: 12.5px;
  color: var(--text-mute);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bisbricknew .mhc-360__table-toggle summary::-webkit-details-marker {
  display: none;
}
.bisbricknew .mhc-360__table-toggle summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s ease;
}
.bisbricknew .mhc-360__table-toggle[open] summary::before {
  transform: rotate(90deg);
}
.bisbricknew .mhc-360__table-toggle summary:hover {
  color: var(--navy);
}
.bisbricknew .mhc-360__table-toggle .mhc-360__detail-table {
  margin-top: 12px;
}
.bisbricknew .mhc-360__footer {
  padding: 28px 48px 36px;
  background: var(--surface-soft);
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-style: italic;
  color: var(--text-mute);
  text-align: center;
}
.bisbricknew .mhc-360__footer p {
  margin: 0;
  max-width: 580px;
  margin-inline: auto;
}
@media (max-width: 720px) {
  .bisbricknew body {
    padding: 20px 12px;
  }
  .bisbricknew .mhc-360__header {
    padding: 32px 24px 24px;
  }
  .bisbricknew .mhc-360__header h1 {
    font-size: 26px;
  }
  .bisbricknew .mhc-360__overview, .bisbricknew .mhc-360__deep-dive, .bisbricknew .mhc-360__details {
    padding: 28px 24px;
  }
  .bisbricknew .mhc-360__footer {
    padding: 24px;
  }
  .bisbricknew .mhc-360__chart-wrap {
    height: 360px;
  }
  .bisbricknew .mhc-360__comp {
    padding: 18px 18px;
  }
  .bisbricknew .mhc-360__scores {
    gap: 6px;
  }
  .bisbricknew .mhc-360__score {
    font-size: 11px;
    padding: 3px 9px;
  }
  .bisbricknew .mhc-360__filter-bar {
    width: 100%;
  }
  .bisbricknew .mhc-360__filter-btn {
    flex: 1;
    padding: 8px 10px;
    font-size: 12px;
  }
  .bisbricknew .mhc-360__detail-table {
    font-size: 12px;
  }
  .bisbricknew .mhc-360__detail-table th, .bisbricknew .mhc-360__detail-table td {
    padding: 8px 10px;
  }
  .bisbricknew .mhc-360__detail-table .mhc-360__col--question {
    width: 38%;
  }
}
@media print {
  .bisbricknew body {
    background: #fff;
    padding: 0;
    font-size: 11pt;
  }
  .bisbricknew .mhc-360 {
    max-width: none;
    box-shadow: none;
    border-radius: 0;
  }
  .bisbricknew .mhc-360__header {
    background: var(--navy) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 32px 32px 24px;
  }
  .bisbricknew .mhc-360__overview, .bisbricknew .mhc-360__deep-dive, .bisbricknew .mhc-360__details {
    padding: 24px 32px;
  }
  .bisbricknew .mhc-360__filter-bar {
    display: none;
  }
  .bisbricknew .mhc-360__details[data-filter] .mhc-360__col--manager,
.bisbricknew .mhc-360__details[data-filter] .mhc-360__col--self,
.bisbricknew .mhc-360__details[data-filter] .mhc-360__col--delta {
    display: table-cell !important;
  }
  .bisbricknew .mhc-360__comp, .bisbricknew .mhc-360__overall, .bisbricknew .mhc-360__comp-detail {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .bisbricknew .mhc-360__findings, .bisbricknew .mhc-360__recommendation {
    background: transparent !important;
  }
  .bisbricknew .mhc-360__overall {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .bisbricknew .mhc-360__overall h3, .bisbricknew .mhc-360__overall p {
    color: var(--text) !important;
  }
}
.bisbricknew .mhc-360 [class*=mhc-360__ico--]::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  vertical-align: -5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.bisbricknew .mhc-360 .mhc-360__ico--overview::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12,3 21,8 21,16 12,21 3,16 3,8'/%3E%3Cpolygon points='12,8 16,10.5 16,14.5 12,17 8,14.5 8,10.5'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%231F3A5F' stroke='none'/%3E%3C/svg%3E");
}
.bisbricknew .mhc-360 .mhc-360__ico--deep-dive::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cline x1='20' y1='20' x2='15' y2='15'/%3E%3C/svg%3E");
}
.bisbricknew .mhc-360 .mhc-360__ico--details::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='14' width='4' height='7' rx='0.5'/%3E%3Crect x='10' y='10' width='4' height='11' rx='0.5'/%3E%3Crect x='17' y='6' width='4' height='15' rx='0.5'/%3E%3C/svg%3E");
}
.bisbricknew .mhc-360 .mhc-360__stat--good {
  position: relative;
  overflow: hidden;
}
.bisbricknew .mhc-360 .mhc-360__stat--good::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 64px;
  height: 28px;
  opacity: 0.22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' fill='none' stroke='%232A6D45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,40 24,30 44,34 64,18 84,20 96,6'/%3E%3Cpolyline points='84,20 96,6 96,16' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
}
.bisbricknew .mhc-360 .mhc-360__stat--good > * {
  position: relative;
  z-index: 1;
}
.bisbricknew .mhc-360 .mhc-360__stat--attention {
  position: relative;
  overflow: hidden;
}
.bisbricknew .mhc-360 .mhc-360__stat--attention::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 60px;
  height: 28px;
  opacity: 0.22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' fill='none' stroke='%23B45454' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,8 50,8 96,30'/%3E%3Cpolyline points='4,42 50,42 96,20'/%3E%3C/svg%3E") no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
}
.bisbricknew .mhc-360 .mhc-360__stat--attention > * {
  position: relative;
  z-index: 1;
}
.bisbricknew .mhc-360.mhc-360 p,
.bisbricknew .mhc-360.mhc-360 li,
.bisbricknew .mhc-360.mhc-360 td,
.bisbricknew .mhc-360.mhc-360 .mhc-360__observation,
.bisbricknew .mhc-360.mhc-360 .mhc-360__recommendation {
  color: var(--text) !important;
}
.bisbricknew .mhc-360.mhc-360 h1,
.bisbricknew .mhc-360.mhc-360 h2,
.bisbricknew .mhc-360.mhc-360 h3,
.bisbricknew .mhc-360.mhc-360 h4 {
  color: var(--navy) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__findings h3 {
  color: var(--amber-warm) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__recommendation::before {
  color: var(--amber-warm) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__header,
.bisbricknew .mhc-360.mhc-360 .mhc-360__header h1,
.bisbricknew .mhc-360.mhc-360 .mhc-360__header .mhc-360__eyebrow,
.bisbricknew .mhc-360.mhc-360 .mhc-360__header .mhc-360__meta,
.bisbricknew .mhc-360.mhc-360 .mhc-360__section-num,
.bisbricknew .mhc-360.mhc-360 .mhc-360__overall,
.bisbricknew .mhc-360.mhc-360 .mhc-360__overall h3,
.bisbricknew .mhc-360.mhc-360 .mhc-360__overall p,
.bisbricknew .mhc-360.mhc-360 .mhc-360__filter-btn.is-active {
  color: #ffffff !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__header .mhc-360__eyebrow {
  color: var(--amber) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__score--self {
  color: #14618A !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__score--manager {
  color: #8A5A1F !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__score--target {
  color: var(--text-soft) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__score--ambition {
  color: var(--ambition) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__tag--D {
  color: var(--tag-D-fg) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__tag--B {
  color: var(--tag-B-fg) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__tag--E {
  color: var(--tag-E-fg) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__tag--L {
  color: var(--tag-L-fg) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__tag--NO {
  color: var(--tag-NO-fg) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__delta--positive {
  color: var(--delta-positive) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__delta--negative {
  color: var(--delta-negative) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__bar--self .mhc-360__bar-value {
  color: #14618A !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__bar--manager .mhc-360__bar-value {
  color: #8A5A1F !important;
}
.bisbricknew .mhc-360.mhc-360 strong {
  color: inherit !important;
}
.bisbricknew {
  display: flex;
  justify-content: center;
}
@charset "UTF-8";
.bisbricknew {
  /* ============================================================
  MHC Mobility — 360° Feedback rapport
  Styling voor AI-gegenereerde individuele rapporten
  Werkt samen met mhc_360_systemprompt.md
  ============================================================ */
  /* ---------- 1. Design tokens (scoped to .mhc-360) ---------- */
  /* ---------- 2. Reset & base ---------- */
  /* Demo-only body styling — niet onderdeel van het component zelf.
     In Bisbrick (of een andere host) wordt deze regel niet gebruikt;
     het component zelf is volledig zelf-bevattend onder .mhc-360. */
  /* ---------- 3. Component root + headings (alles onder .mhc-360) ---------- */
  /* ---------- 4. Header ---------- */
  /* Section markers — big amber numerals before each section title */
  /* Stats strip — hero KPI tiles in section 1 */
  /* Reasons panel — Wat zou de reden kunnen zijn? */
  /* ---------- 5. Sectie 1: Overzicht ---------- */
  /* Spider chart container */
  /* Key findings */
  /* ---------- 6. Sectie 2: Verdieping ---------- */
  /* Score pills */
  /* Rode draad */
  /* ---------- 7. Sectie 3: Details ---------- */
  /* Filter mhc-360__bar */
  /* Detail tables */
  /* Filter — driestand via data-attribuut op .mhc-360__details */
  /* Niveau-tags */
  /* Delta */
  /* ---------- 8. Bar charts per vraag (sectie 3) ---------- */
  /* Axis mhc-360__bar across the top — D B E L labels aligned with mhc-360__bar zones */
  /* Per-question block */
  /* Question header: scenario text + delta badge */
  /* Bar rows wrapper */
  /* Single mhc-360__bar row: source label + track */
  /* Bar track — background with subtle level zones */
  /* Target line — vertical marker */
  /* The actual mhc-360__bar — fills from left to its mhc-360__score */
  /* Score value label — sits directly after the mhc-360__bar's end */
  /* "Niet geobserveerd" state — striped mhc-360__bar instead of solid */
  /* Filter hides rows based on selection */
  /* Legend below charts */
  /* Toggle to show exact mhc-360__tag table below dumbbell */
  /* ---------- 9. Footer ---------- */
  /* ---------- 10. Responsive ---------- */
  /* ---------- 11. Print ---------- */
  /* ════════════════════════════════════════════════════════════════════════
     12. SECTION ICONS — CSS-only, SVG via data URI
     Icons sit before the h2 text in each section-marker. The agent adds
     a single class to the h2 (e.g. mhc-360__ico--overview); no extra
     HTML element, no inline SVG, no LLM geometry.
     ════════════════════════════════════════════════════════════════════════ */
  /* ════════════════════════════════════════════════════════════════════════
     13. TREND MOTIF — subtle upward trend line on "good" stat tiles
     Decorative only, drawn via ::after on .mhc-360__stat--good. No JS,
     no inline SVG in the HTML.
     ════════════════════════════════════════════════════════════════════════ */
  /* Attention-tile gets a subtle "spread/gap" motif instead — two diverging lines */
  /* ════════════════════════════════════════════════════════════════════════
     14. HOST-PROOFING — force every text color with !important + doubled
     root selector specificity. Wins cascade against host stylesheets that
     set global text colors on p / li / td via :root, body, or class rules
     loaded after this sheet. The earlier inheritance-based colors lose
     the cascade in some embed contexts; these rules win it outright.
     ════════════════════════════════════════════════════════════════════════ */
  /* Dark body text on light surfaces */
  /* Section + body headings — navy */
  /* Eyebrow + amber accent labels */
  /* WHITE text on dark surfaces — forced so host cannot darken */
  /* Eyebrow stays amber */
  /* Score pill colors */
  /* Tag colors keep their semantic foreground */
  /* Delta semantic colors */
  /* Bar value labels keep their accent */
  /* nested strong follows parent's forced color */
}
.bisbricknew .mhc-360 {
  /* Brand kleuren */
  --navy: #1F3A5F;
  --navy-soft: #2C4F7B;
  --amber: #C9A352;
  --amber-warm: #E29F47;
  /* Data-serie kleuren */
  --self: #2E9CCA;
  /* zelfreflectie — cyan */
  --self-bg: rgba(46, 156, 202, 0.12);
  --self-border: rgba(46, 156, 202, 0.45);
  --manager: #E29F47;
  /* manager — warm amber */
  --manager-bg: rgba(226, 159, 71, 0.12);
  --manager-border: rgba(226, 159, 71, 0.45);
  --target: #555555;
  /* target — neutraal grijs (dotted in chart) */
  --ambition: #6FAE83;
  /* ambitie — sage groen (dashed in chart) */
  /* Niveau-tags (D / B / E / L) */
  --tag-D-bg: #E8F2F9;
  --tag-D-fg: #1F567F;
  --tag-B-bg: #FAE9D4;
  --tag-B-fg: #8A5A1F;
  --tag-E-bg: #DCEDE0;
  --tag-E-fg: #2A6D45;
  --tag-L-bg: #E8DEF2;
  --tag-L-fg: #4E3878;
  --tag-NO-bg: #ECEEF1;
  --tag-NO-fg: #6C757D;
  /* Delta */
  --delta-positive: #2A6D45;
  --delta-negative: #B23A48;
  --delta-zero: #6C757D;
  /* Surface */
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --surface-soft: #F4F1EA;
  --border: #E5E7EB;
  --border-soft: #EFEDE8;
  /* Tekst */
  --text: #1F2937;
  --text-soft: #4B5563;
  --text-mute: #6B7280;
  /* Type & layout */
  --font: "Helvetica Neue", "Arial", system-ui, -apple-system, sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.bisbricknew *, .bisbricknew *::before, .bisbricknew *::after {
  box-sizing: border-box;
}
.bisbricknew html {
  -webkit-text-size-adjust: 100%;
}
.bisbricknew body {
  margin: 0;
  padding: 40px 20px 80px;
  font-family: "Helvetica Neue", "Arial", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #1F2937;
  background: #FBFAF7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bisbricknew .mhc-360 {
  max-width: 880px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.bisbricknew .mhc-360 h1,
.bisbricknew .mhc-360 h2,
.bisbricknew .mhc-360 h3,
.bisbricknew .mhc-360 h4 {
  margin: 0;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}
.bisbricknew .mhc-360 p {
  margin: 0 0 0.9em;
}
.bisbricknew .mhc-360 ul {
  margin: 0 0 0.9em;
  padding-left: 1.4em;
}
.bisbricknew .mhc-360 li {
  margin-bottom: 0.5em;
}
.bisbricknew .mhc-360__header {
  padding: 48px 48px 36px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.bisbricknew .mhc-360__header::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 163, 82, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.bisbricknew .mhc-360__header .mhc-360__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 12px;
  font-weight: 600;
  position: relative;
}
.bisbricknew .mhc-360__header h1 {
  font-size: 32px;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  position: relative;
}
.bisbricknew .mhc-360__header .mhc-360__meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  font-style: italic;
  position: relative;
}
.bisbricknew .mhc-360__section-marker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
}
.bisbricknew .mhc-360__section-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amber) 0%, var(--amber-warm) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(201, 163, 82, 0.3);
}
.bisbricknew .mhc-360__section-marker h2 {
  margin: 0;
  font-size: 22px;
  padding-bottom: 0;
  border-bottom: none;
}
.bisbricknew .mhc-360__stats {
  display: flex;
  gap: 12px;
  margin: 0 0 32px;
}
.bisbricknew .mhc-360__stat {
  flex: 1 1 0;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bisbricknew .mhc-360__stat:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.bisbricknew .mhc-360__stat .mhc-360__stat-label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 4px;
}
.bisbricknew .mhc-360__stat .mhc-360__stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.bisbricknew .mhc-360__stat .mhc-360__stat-value.mhc-360__stat-value--text {
  font-size: 17px;
}
.bisbricknew .mhc-360__stat .mhc-360__stat-of {
  font-size: 16px;
  color: var(--text-mute);
  font-weight: 500;
}
.bisbricknew .mhc-360__stat .mhc-360__stat-sub {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: auto;
  padding-top: 4px;
}
.bisbricknew .mhc-360__stat.mhc-360__stat--attention {
  border-color: var(--manager-border);
  background: linear-gradient(135deg, var(--manager-bg) 0%, var(--surface) 60%);
}
.bisbricknew .mhc-360__stat.mhc-360__stat--attention .mhc-360__stat-value {
  color: #946D24;
}
.bisbricknew .mhc-360__stat.mhc-360__stat--good {
  border-color: rgba(111, 174, 131, 0.4);
  background: linear-gradient(135deg, rgba(111, 174, 131, 0.1) 0%, var(--surface) 60%);
}
.bisbricknew .mhc-360__stat.mhc-360__stat--good .mhc-360__stat-value {
  color: #2A6D45;
}
.bisbricknew .mhc-360__reasons {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 30px 24px;
  margin-top: 24px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.bisbricknew .mhc-360__reasons > h3 {
  font-size: 18px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bisbricknew .mhc-360__reasons > h3::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.bisbricknew .mhc-360__reasons-intro {
  color: var(--text-soft);
  font-size: 13.5px;
  margin: 0 0 22px;
  padding-left: 40px;
}
.bisbricknew .mhc-360__reasons-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.bisbricknew .mhc-360__reason {
  flex: 1 1 calc(50% - 8px);
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 14px;
  position: relative;
}
.bisbricknew .mhc-360__reason .mhc-360__reason-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.bisbricknew .mhc-360__reason.mhc-360__reason--self-high .mhc-360__reason-icon {
  background: var(--self-bg);
  color: var(--self);
}
.bisbricknew .mhc-360__reason.mhc-360__reason--manager-high .mhc-360__reason-icon {
  background: var(--manager-bg);
  color: var(--manager);
}
.bisbricknew .mhc-360__reason.mhc-360__reason--aligned-below .mhc-360__reason-icon {
  background: rgba(178, 58, 72, 0.1);
  color: var(--delta-negative);
}
.bisbricknew .mhc-360__reason.mhc-360__reason--aligned-ok .mhc-360__reason-icon {
  background: rgba(42, 109, 69, 0.1);
  color: var(--delta-positive);
}
.bisbricknew .mhc-360__reason h4 {
  font-size: 14px;
  color: var(--navy);
  margin: 0 0 10px;
  font-weight: 600;
  line-height: 1.35;
}
.bisbricknew .mhc-360__reason ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.bisbricknew .mhc-360__reason li {
  margin-bottom: 6px;
}
.bisbricknew .mhc-360__reason li:last-child {
  margin-bottom: 0;
}
.bisbricknew .mhc-360__reason li::marker {
  color: var(--amber);
}
.bisbricknew .mhc-360__overview {
  padding: 40px 48px;
  border-bottom: 1px solid var(--border);
}
.bisbricknew .mhc-360__overview h2 {
  font-size: 22px;
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.bisbricknew .mhc-360__chart-wrap {
  position: relative;
  height: 460px;
  margin: 0 0 36px;
  padding: 16px 8px 8px;
  background: var(--surface-soft);
  border-radius: var(--radius);
}
.bisbricknew .mhc-360__findings {
  background: var(--surface-soft);
  border-left: 4px solid var(--amber);
  padding: 20px 24px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.bisbricknew .mhc-360__findings h3 {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber-warm);
  margin: 0 0 12px;
  font-weight: 700;
}
.bisbricknew .mhc-360__findings ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.bisbricknew .mhc-360__findings li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--text);
  line-height: 1.55;
}
.bisbricknew .mhc-360__findings li:last-child {
  margin-bottom: 0;
}
.bisbricknew .mhc-360__findings li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amber);
  font-weight: bold;
}
.bisbricknew .mhc-360__deep-dive {
  padding: 40px 48px;
  border-bottom: 1px solid var(--border);
}
.bisbricknew .mhc-360__deep-dive > h2:first-child {
  font-size: 22px;
  margin: 0 0 28px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.bisbricknew .mhc-360__comp {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.bisbricknew .mhc-360__comp header {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-soft);
}
.bisbricknew .mhc-360__comp header h3 {
  font-size: 17px;
  margin: 0 0 10px;
}
.bisbricknew .mhc-360__scores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bisbricknew .mhc-360__score {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.bisbricknew .mhc-360__score--self {
  background: var(--self-bg);
  color: #14618A;
  border: 1px solid var(--self-border);
}
.bisbricknew .mhc-360__score--manager {
  background: var(--manager-bg);
  color: #8A5A1F;
  border: 1px solid var(--manager-border);
}
.bisbricknew .mhc-360__score--target {
  background: transparent;
  color: var(--text-soft);
  border: 1px dashed #B5B5B5;
}
.bisbricknew .mhc-360__score--ambition {
  background: transparent;
  color: var(--ambition);
  border: 1px dotted var(--ambition);
}
.bisbricknew .mhc-360__comp .mhc-360__observation {
  color: var(--text);
  margin-bottom: 12px;
}
.bisbricknew .mhc-360__comp .mhc-360__recommendation {
  background: var(--surface-soft);
  border-left: 3px solid var(--amber);
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0;
  font-size: 14.5px;
  color: var(--text);
}
.bisbricknew .mhc-360__comp .mhc-360__recommendation::before {
  content: "Volgende stap";
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-warm);
  font-weight: 700;
  margin-bottom: 4px;
}
.bisbricknew .mhc-360__overall {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-top: 24px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.bisbricknew .mhc-360__overall h3 {
  color: #fff;
  font-size: 17px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.bisbricknew .mhc-360__overall p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.6;
}
.bisbricknew .mhc-360__details {
  padding: 40px 48px;
}
.bisbricknew .mhc-360__details > h2 {
  font-size: 22px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.bisbricknew .mhc-360__details-intro {
  color: var(--text-soft);
  font-size: 14px;
  margin: 0 0 24px;
}
.bisbricknew .mhc-360__filter-bar {
  display: inline-flex;
  background: var(--surface-soft);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 28px;
  gap: 0;
}
.bisbricknew .mhc-360__filter-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.bisbricknew .mhc-360__filter-btn:hover {
  color: var(--navy);
}
.bisbricknew .mhc-360__filter-btn.is-active {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.bisbricknew .mhc-360__filter-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
.bisbricknew .mhc-360__comp-detail {
  margin-bottom: 28px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.bisbricknew .mhc-360__comp-detail h3 {
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--navy);
  font-weight: 600;
}
.bisbricknew .mhc-360__detail-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13.5px;
}
.bisbricknew .mhc-360__detail-table thead {
  background: var(--surface-soft);
}
.bisbricknew .mhc-360__detail-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--navy);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.bisbricknew .mhc-360__detail-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.bisbricknew .mhc-360__detail-table tr:last-child td {
  border-bottom: none;
}
.bisbricknew .mhc-360__detail-table tbody tr:hover {
  background: var(--surface-soft);
}
.bisbricknew .mhc-360__detail-table .mhc-360__col--question {
  width: 42%;
  color: var(--text);
}
.bisbricknew .mhc-360__detail-table .mhc-360__col--self,
.bisbricknew .mhc-360__detail-table .mhc-360__col--manager {
  width: 22%;
  text-align: center;
}
.bisbricknew .mhc-360__detail-table .mhc-360__col--delta {
  width: 14%;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bisbricknew .mhc-360__detail-table th.mhc-360__col--self,
.bisbricknew .mhc-360__detail-table td.mhc-360__col--self {
  background: rgba(46, 156, 202, 0.04);
}
.bisbricknew .mhc-360__detail-table th.mhc-360__col--manager,
.bisbricknew .mhc-360__detail-table td.mhc-360__col--manager {
  background: rgba(226, 159, 71, 0.04);
}
.bisbricknew .mhc-360__details[data-filter=self] .mhc-360__col--manager,
.bisbricknew .mhc-360__details[data-filter=self] .mhc-360__col--delta {
  display: none;
}
.bisbricknew .mhc-360__details[data-filter=manager] .mhc-360__col--self,
.bisbricknew .mhc-360__details[data-filter=manager] .mhc-360__col--delta {
  display: none;
}
.bisbricknew .mhc-360__tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}
.bisbricknew .mhc-360__tag--D {
  background: var(--tag-D-bg);
  color: var(--tag-D-fg);
}
.bisbricknew .mhc-360__tag--B {
  background: var(--tag-B-bg);
  color: var(--tag-B-fg);
}
.bisbricknew .mhc-360__tag--E {
  background: var(--tag-E-bg);
  color: var(--tag-E-fg);
}
.bisbricknew .mhc-360__tag--L {
  background: var(--tag-L-bg);
  color: var(--tag-L-fg);
}
.bisbricknew .mhc-360__tag--NO {
  background: var(--tag-NO-bg);
  color: var(--tag-NO-fg);
  font-style: italic;
  font-weight: 500;
}
.bisbricknew .mhc-360__delta--positive {
  color: var(--delta-positive);
}
.bisbricknew .mhc-360__delta--negative {
  color: var(--delta-negative);
}
.bisbricknew .mhc-360__delta--zero {
  color: var(--delta-zero);
}
.bisbricknew .mhc-360__bar-chart {
  background: var(--surface-soft);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  margin: 12px 0 18px;
}
.bisbricknew .mhc-360__axis {
  display: flex;
  margin-bottom: 14px;
  padding-left: 82px;
  /* matches .mhc-360__bar-source width + gap */
  padding-right: 70px;
  /* leaves room for the value labels at end of bars */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  border-bottom: 1px dashed var(--border);
  padding-bottom: 8px;
}
.bisbricknew .mhc-360__axis .mhc-360__axis-label {
  flex: 1 1 0;
  text-align: center;
  position: relative;
}
.bisbricknew .mhc-360__question {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border);
}
.bisbricknew .mhc-360__question:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.bisbricknew .mhc-360__q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.bisbricknew .mhc-360__q-label {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.35;
}
.bisbricknew .mhc-360__q-delta {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  min-width: 44px;
}
.bisbricknew .mhc-360__q-delta.mhc-360__delta--positive {
  color: var(--delta-positive);
  border-color: rgba(42, 109, 69, 0.3);
}
.bisbricknew .mhc-360__q-delta.mhc-360__delta--negative {
  color: var(--delta-negative);
  border-color: rgba(178, 58, 72, 0.3);
}
.bisbricknew .mhc-360__q-delta.mhc-360__delta--zero {
  color: var(--text-mute);
  font-weight: 500;
}
.bisbricknew .mhc-360__q-delta.mhc-360__delta--NO {
  color: var(--text-mute);
  font-style: italic;
  font-weight: 500;
}
.bisbricknew .mhc-360__bar-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bisbricknew .mhc-360__bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bisbricknew .mhc-360__bar-source {
  flex: 0 0 72px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.bisbricknew .mhc-360__bar-row.mhc-360__bar-row--self .mhc-360__bar-source {
  color: #14618A;
}
.bisbricknew .mhc-360__bar-row.mhc-360__bar-row--manager .mhc-360__bar-source {
  color: #8A5A1F;
}
.bisbricknew .mhc-360__bar-track {
  flex: 1 1 auto;
  position: relative;
  height: 22px;
  background: linear-gradient(to right, var(--tag-D-bg) 0%, var(--tag-D-bg) 25%, var(--tag-B-bg) 25%, var(--tag-B-bg) 50%, var(--tag-E-bg) 50%, var(--tag-E-bg) 75%, var(--tag-L-bg) 75%, var(--tag-L-bg) 100%);
  border-radius: 4px;
  opacity: 0.95;
  margin-right: 60px;
  /* room for value label */
}
.bisbricknew .mhc-360__bar-track::after {
  /* faint zone divider lines */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 0, transparent calc(25% - 1px), rgba(255, 255, 255, 0.6) calc(25% - 1px), rgba(255, 255, 255, 0.6) 25%, transparent 25%, transparent calc(50% - 1px), rgba(255, 255, 255, 0.6) calc(50% - 1px), rgba(255, 255, 255, 0.6) 50%, transparent 50%, transparent calc(75% - 1px), rgba(255, 255, 255, 0.6) calc(75% - 1px), rgba(255, 255, 255, 0.6) 75%, transparent 75%);
  pointer-events: none;
  border-radius: 4px;
}
.bisbricknew .mhc-360__target-line {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--target);
  /* Map mhc-360__score 1→25%, 2→50%, 3→75%, 4→100% */
  left: calc(var(--score) / 4 * 100%);
  border-radius: 1px;
  opacity: 0.65;
  transform: translateX(-50%);
  z-index: 1;
}
.bisbricknew .mhc-360__target-line::before {
  content: "▼";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--target);
  opacity: 0.7;
}
.bisbricknew .mhc-360__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--score) / 4 * 100%);
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: width 0.4s ease;
  overflow: visible;
}
.bisbricknew .mhc-360__bar--self {
  background: linear-gradient(to right, var(--self) 0%, #45B0DC 100%);
  color: #fff;
}
.bisbricknew .mhc-360__bar--manager {
  background: linear-gradient(to right, var(--manager) 0%, #EFB264 100%);
  color: #fff;
}
.bisbricknew .mhc-360__bar-value {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.bisbricknew .mhc-360__bar--self .mhc-360__bar-value {
  color: #14618A;
}
.bisbricknew .mhc-360__bar--manager .mhc-360__bar-value {
  color: #8A5A1F;
}
.bisbricknew .mhc-360__bar-track.mhc-360__bar-track--no .mhc-360__bar-no-label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 11px;
  font-style: italic;
  color: var(--text-mute);
  z-index: 2;
}
.bisbricknew .mhc-360__bar-track.mhc-360__bar-track--no::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(108, 117, 125, 0.12) 6px, rgba(108, 117, 125, 0.12) 12px);
  border-radius: 4px;
  z-index: 1;
}
.bisbricknew .mhc-360__details[data-filter=self] .mhc-360__bar-row--manager,
.bisbricknew .mhc-360__details[data-filter=self] .mhc-360__q-delta,
.bisbricknew .mhc-360__details[data-filter=manager] .mhc-360__bar-row--self,
.bisbricknew .mhc-360__details[data-filter=manager] .mhc-360__q-delta {
  display: none;
}
.bisbricknew .mhc-360__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--text-soft);
  margin-top: 20px;
}
.bisbricknew .mhc-360__legend > span {
  display: inline-flex;
  align-items: center;
  margin-right: 24px;
  margin-bottom: 2px;
}
.bisbricknew .mhc-360__legend > span:last-child {
  margin-right: 0;
}
.bisbricknew .mhc-360__legend > span > * {
  margin-right: 8px;
}
.bisbricknew .mhc-360__legend-swatch {
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
}
.bisbricknew .mhc-360__legend-swatch.mhc-360__legend-swatch--self {
  background: var(--self);
}
.bisbricknew .mhc-360__legend-swatch.mhc-360__legend-swatch--manager {
  background: var(--manager);
}
.bisbricknew .mhc-360__legend-line {
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--target);
}
.bisbricknew .mhc-360__table-toggle {
  margin-top: 8px;
}
.bisbricknew .mhc-360__table-toggle summary {
  font-size: 12.5px;
  color: var(--text-mute);
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bisbricknew .mhc-360__table-toggle summary::-webkit-details-marker {
  display: none;
}
.bisbricknew .mhc-360__table-toggle summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s ease;
}
.bisbricknew .mhc-360__table-toggle[open] summary::before {
  transform: rotate(90deg);
}
.bisbricknew .mhc-360__table-toggle summary:hover {
  color: var(--navy);
}
.bisbricknew .mhc-360__table-toggle .mhc-360__detail-table {
  margin-top: 12px;
}
.bisbricknew .mhc-360__footer {
  padding: 28px 48px 36px;
  background: var(--surface-soft);
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-style: italic;
  color: var(--text-mute);
  text-align: center;
}
.bisbricknew .mhc-360__footer p {
  margin: 0;
  max-width: 580px;
  margin-inline: auto;
}
@media (max-width: 720px) {
  .bisbricknew body {
    padding: 20px 12px;
  }
  .bisbricknew .mhc-360__header {
    padding: 32px 24px 24px;
  }
  .bisbricknew .mhc-360__header h1 {
    font-size: 26px;
  }
  .bisbricknew .mhc-360__overview, .bisbricknew .mhc-360__deep-dive, .bisbricknew .mhc-360__details {
    padding: 28px 24px;
  }
  .bisbricknew .mhc-360__footer {
    padding: 24px;
  }
  .bisbricknew .mhc-360__chart-wrap {
    height: 360px;
  }
  .bisbricknew .mhc-360__comp {
    padding: 18px 18px;
  }
  .bisbricknew .mhc-360__scores {
    gap: 6px;
  }
  .bisbricknew .mhc-360__score {
    font-size: 11px;
    padding: 3px 9px;
  }
  .bisbricknew .mhc-360__filter-bar {
    width: 100%;
  }
  .bisbricknew .mhc-360__filter-btn {
    flex: 1;
    padding: 8px 10px;
    font-size: 12px;
  }
  .bisbricknew .mhc-360__detail-table {
    font-size: 12px;
  }
  .bisbricknew .mhc-360__detail-table th, .bisbricknew .mhc-360__detail-table td {
    padding: 8px 10px;
  }
  .bisbricknew .mhc-360__detail-table .mhc-360__col--question {
    width: 38%;
  }
}
@media print {
  .bisbricknew body {
    background: #fff;
    padding: 0;
    font-size: 11pt;
  }
  .bisbricknew .mhc-360 {
    max-width: none;
    box-shadow: none;
    border-radius: 0;
  }
  .bisbricknew .mhc-360__header {
    background: var(--navy) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 32px 32px 24px;
  }
  .bisbricknew .mhc-360__overview, .bisbricknew .mhc-360__deep-dive, .bisbricknew .mhc-360__details {
    padding: 24px 32px;
  }
  .bisbricknew .mhc-360__filter-bar {
    display: none;
  }
  .bisbricknew .mhc-360__details[data-filter] .mhc-360__col--manager,
.bisbricknew .mhc-360__details[data-filter] .mhc-360__col--self,
.bisbricknew .mhc-360__details[data-filter] .mhc-360__col--delta {
    display: table-cell !important;
  }
  .bisbricknew .mhc-360__comp, .bisbricknew .mhc-360__overall, .bisbricknew .mhc-360__comp-detail {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .bisbricknew .mhc-360__findings, .bisbricknew .mhc-360__recommendation {
    background: transparent !important;
  }
  .bisbricknew .mhc-360__overall {
    background: var(--surface-soft) !important;
    color: var(--text) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .bisbricknew .mhc-360__overall h3, .bisbricknew .mhc-360__overall p {
    color: var(--text) !important;
  }
}
.bisbricknew .mhc-360 [class*=mhc-360__ico--]::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  vertical-align: -5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.bisbricknew .mhc-360 .mhc-360__ico--overview::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12,3 21,8 21,16 12,21 3,16 3,8'/%3E%3Cpolygon points='12,8 16,10.5 16,14.5 12,17 8,14.5 8,10.5'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%231F3A5F' stroke='none'/%3E%3C/svg%3E");
}
.bisbricknew .mhc-360 .mhc-360__ico--deep-dive::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cline x1='20' y1='20' x2='15' y2='15'/%3E%3C/svg%3E");
}
.bisbricknew .mhc-360 .mhc-360__ico--details::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='14' width='4' height='7' rx='0.5'/%3E%3Crect x='10' y='10' width='4' height='11' rx='0.5'/%3E%3Crect x='17' y='6' width='4' height='15' rx='0.5'/%3E%3C/svg%3E");
}
.bisbricknew .mhc-360 .mhc-360__stat--good {
  position: relative;
  overflow: hidden;
}
.bisbricknew .mhc-360 .mhc-360__stat--good::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 64px;
  height: 28px;
  opacity: 0.22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' fill='none' stroke='%232A6D45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,40 24,30 44,34 64,18 84,20 96,6'/%3E%3Cpolyline points='84,20 96,6 96,16' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
}
.bisbricknew .mhc-360 .mhc-360__stat--good > * {
  position: relative;
  z-index: 1;
}
.bisbricknew .mhc-360 .mhc-360__stat--attention {
  position: relative;
  overflow: hidden;
}
.bisbricknew .mhc-360 .mhc-360__stat--attention::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 60px;
  height: 28px;
  opacity: 0.22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' fill='none' stroke='%23B45454' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,8 50,8 96,30'/%3E%3Cpolyline points='4,42 50,42 96,20'/%3E%3C/svg%3E") no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
}
.bisbricknew .mhc-360 .mhc-360__stat--attention > * {
  position: relative;
  z-index: 1;
}
.bisbricknew .mhc-360.mhc-360 p,
.bisbricknew .mhc-360.mhc-360 li,
.bisbricknew .mhc-360.mhc-360 td,
.bisbricknew .mhc-360.mhc-360 .mhc-360__observation,
.bisbricknew .mhc-360.mhc-360 .mhc-360__recommendation {
  color: var(--text) !important;
}
.bisbricknew .mhc-360.mhc-360 h1,
.bisbricknew .mhc-360.mhc-360 h2,
.bisbricknew .mhc-360.mhc-360 h3,
.bisbricknew .mhc-360.mhc-360 h4 {
  color: var(--navy) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__findings h3 {
  color: var(--amber-warm) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__recommendation::before {
  color: var(--amber-warm) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__header,
.bisbricknew .mhc-360.mhc-360 .mhc-360__header h1,
.bisbricknew .mhc-360.mhc-360 .mhc-360__header .mhc-360__eyebrow,
.bisbricknew .mhc-360.mhc-360 .mhc-360__header .mhc-360__meta,
.bisbricknew .mhc-360.mhc-360 .mhc-360__section-num,
.bisbricknew .mhc-360.mhc-360 .mhc-360__overall,
.bisbricknew .mhc-360.mhc-360 .mhc-360__overall h3,
.bisbricknew .mhc-360.mhc-360 .mhc-360__overall p,
.bisbricknew .mhc-360.mhc-360 .mhc-360__filter-btn.is-active {
  color: #ffffff !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__header .mhc-360__eyebrow {
  color: var(--amber) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__score--self {
  color: #14618A !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__score--manager {
  color: #8A5A1F !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__score--target {
  color: var(--text-soft) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__score--ambition {
  color: var(--ambition) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__tag--D {
  color: var(--tag-D-fg) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__tag--B {
  color: var(--tag-B-fg) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__tag--E {
  color: var(--tag-E-fg) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__tag--L {
  color: var(--tag-L-fg) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__tag--NO {
  color: var(--tag-NO-fg) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__delta--positive {
  color: var(--delta-positive) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__delta--negative {
  color: var(--delta-negative) !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__bar--self .mhc-360__bar-value {
  color: #14618A !important;
}
.bisbricknew .mhc-360.mhc-360 .mhc-360__bar--manager .mhc-360__bar-value {
  color: #8A5A1F !important;
}
.bisbricknew .mhc-360.mhc-360 strong {
  color: inherit !important;
}
.bisbrickapp {
  --primary-1: #F45F3A;
  --primary-1-rgb: 244,95,58;
  --primary-1-dark: #D94A27;
  --primary-1-dark-rgb: 217,74,39;
  --primary-1-light: #FDEDE8;
  --primary-1-light-rgb: 253,237,232;
  --primary-2: #9A3B17;
  --primary-2-rgb: 154,59,23;
  --primary-2-dark: #7F230A;
  --primary-2-dark-rgb: 127,35,10;
  --primary-2-light: #FCE8DF;
  --primary-2-light-rgb: 252,232,223;
  --secondary-1: #292D3E;
  --secondary-1-rgb: 41,45,62;
  --secondary-1-dark: #1B1E2A;
  --secondary-1-dark-rgb: 27,30,42;
  --secondary-1-light: #5F6475;
  --secondary-1-light-rgb: 95,100,117;
  --secondary-2: #1767C2;
  --secondary-2-rgb: 23,103,194;
  --secondary-2-dark: #0E4C92;
  --secondary-2-dark-rgb: 14,76,146;
  --secondary-2-light: #E6EFFB;
  --secondary-2-light-rgb: 230,239,251;
  --secondary-3: #DCD6CB;
  --secondary-3-rgb: 220,214,203;
  --secondary-3-dark: #CFC7B9;
  --secondary-3-dark-rgb: 207,199,185;
  --secondary-3-light: #ECE8E0;
  --secondary-3-light-rgb: 236,232,224;
  --neutral-1: #FFFFFF;
  --neutral-1-rgb: 255,255,255;
  --neutral-2: #F8F7F4;
  --neutral-2-rgb: 248,247,244;
  --neutral-3: #F4F3F0;
  --neutral-3-rgb: 244,243,240;
  --neutral-4: #F1ECE4;
  --neutral-4-rgb: 241,236,228;
  --neutral-5: #E4E0D8;
  --neutral-5-rgb: 228,224,216;
  --neutral-6: #8A8F9E;
  --neutral-6-rgb: 138,143,158;
  --neutral-7: #5F6475;
  --neutral-7-rgb: 95,100,117;
  --neutral-8: #292D3E;
  --neutral-8-rgb: 41,45,62;
  --neutral-transparent: transparent;
  --neutral-transparent-rgb: ;
  --form-next: #F45F3A;
  --form-next-rgb: 244,95,58;
  --form-previous: #FFFFFF;
  --form-previous-rgb: 255,255,255;
  --form-matrix-add: #F45F3A;
  --form-matrix-add-rgb: 244,95,58;
  --form-matrix-remove: #B3261E;
  --form-matrix-remove-rgb: 179,38,30;
  --form-toc-hover: #FDEDE8;
  --form-toc-hover-rgb: 253,237,232;
  --positive-color: #1F6B3A;
  --positive-color-rgb: 31,107,58;
  --warning-color: #9A5B00;
  --warning-color-rgb: 154,91,0;
  --negative-color: #B3261E;
  --negative-color-rgb: 179,38,30;
  --info-color: #0E4C92;
  --info-color-rgb: 14,76,146;
  --bg-color: #FFFFFF;
  --bg-color-rgb: 255,255,255;
  --app-ink: #292D3E;
  --app-ink-rgb: 41,45,62;
  --app-muted: #5F6475;
  --app-muted-rgb: 95,100,117;
  --app-meta: #8A8F9E;
  --app-meta-rgb: 138,143,158;
  --app-line: #E4E0D8;
  --app-line-rgb: 228,224,216;
  --app-rule: #F1ECE4;
  --app-rule-rgb: 241,236,228;
  --app-rule-soft: #ECE8E0;
  --app-rule-soft-rgb: 236,232,224;
  --app-ground: #F4F3F0;
  --app-ground-rgb: 244,243,240;
  --app-panel: #F8F7F4;
  --app-panel-rgb: 248,247,244;
  --app-card: #FFFFFF;
  --app-card-rgb: 255,255,255;
  --app-row-hover: #FBF9F6;
  --app-row-hover-rgb: 251,249,246;
  --app-row-selected: #FFF6F2;
  --app-row-selected-rgb: 255,246,242;
  --chip-neutral-ink: #5F6475;
  --chip-neutral-ink-rgb: 95,100,117;
  --chip-neutral-bg: #F4F3F0;
  --chip-neutral-bg-rgb: 244,243,240;
  --chip-accent-ink: #9A3B17;
  --chip-accent-ink-rgb: 154,59,23;
  --chip-accent-bg: #FCE8DF;
  --chip-accent-bg-rgb: 252,232,223;
  --chip-positive-ink: #1F6B3A;
  --chip-positive-ink-rgb: 31,107,58;
  --chip-positive-bg: #E3F2E8;
  --chip-positive-bg-rgb: 227,242,232;
  --chip-warning-ink: #9A5B00;
  --chip-warning-ink-rgb: 154,91,0;
  --chip-warning-bg: #FFF4E0;
  --chip-warning-bg-rgb: 255,244,224;
  --chip-negative-ink: #B3261E;
  --chip-negative-ink-rgb: 179,38,30;
  --chip-negative-bg: #FBE9E7;
  --chip-negative-bg-rgb: 251,233,231;
  --chip-info-ink: #0E4C92;
  --chip-info-ink-rgb: 14,76,146;
  --chip-info-bg: #E6EFFB;
  --chip-info-bg-rgb: 230,239,251;
  --chart-cat-1: #F45F3A;
  --chart-cat-1-rgb: 244,95,58;
  --chart-cat-2: #2a78d6;
  --chart-cat-2-rgb: 42,120,214;
  --chart-cat-3: #1baf7a;
  --chart-cat-3-rgb: 27,175,122;
  --chart-cat-4: #4a3aa7;
  --chart-cat-4-rgb: 74,58,167;
  --chart-cat-5: #e87ba4;
  --chart-cat-5-rgb: 232,123,164;
  --chart-cat-6: #008300;
  --chart-cat-6-rgb: 0,131,0;
  --chart-cat-7: #eda100;
  --chart-cat-7-rgb: 237,161,0;
  --chart-cat-8: #e34948;
  --chart-cat-8-rgb: 227,73,72;
  --chart-seq-1: #ef9179;
  --chart-seq-1-rgb: 239,145,121;
  --chart-seq-2: #ee6a4a;
  --chart-seq-2-rgb: 238,106,74;
  --chart-seq-3: #dd4a23;
  --chart-seq-3-rgb: 221,74,35;
  --chart-seq-4: #c03710;
  --chart-seq-4-rgb: 192,55,16;
  --chart-seq-5: #a12a07;
  --chart-seq-5-rgb: 161,42,7;
  --chart-seq-6: #7f230a;
  --chart-seq-6-rgb: 127,35,10;
  --chart-div-1: #0e4c92;
  --chart-div-1-rgb: 14,76,146;
  --chart-div-2: #1767c2;
  --chart-div-2-rgb: 23,103,194;
  --chart-div-3: #3b86e4;
  --chart-div-3-rgb: 59,134,228;
  --chart-div-4: #78aaec;
  --chart-div-4-rgb: 120,170,236;
  --chart-div-5: #cfcac1;
  --chart-div-5-rgb: 207,202,193;
  --chart-div-6: #e98b73;
  --chart-div-6-rgb: 233,139,115;
  --chart-div-7: #e4512b;
  --chart-div-7-rgb: 228,81,43;
  --chart-div-8: #bd330a;
  --chart-div-8-rgb: 189,51,10;
  --chart-div-9: #8c280d;
  --chart-div-9-rgb: 140,40,13;
  --primary-color-1200: #D94A27;
  --primary-color-1200-rgb: 217,74,39;
  --primary-color-1000: #F45F3A;
  --primary-color-1000-rgb: 244,95,58;
  --primary-color-100: #FDEDE8;
  --primary-color-100-rgb: 253,237,232;
  --neutral-color-0: #FFFFFF;
  --neutral-color-0-rgb: 255,255,255;
  --neutral-color-1000: #292D3E;
  --neutral-color-1000-rgb: 41,45,62;
  --font-content: Poppins-400;
  --font-content-rgb: ;
  --font-heading: Poppins-600;
  --font-heading-rgb: ;
  --font-link: Poppins-500;
  --font-link-rgb: ;
  --font-medium: Poppins-500;
  --font-medium-rgb: ;
  --font-bold: Poppins-600;
  --font-bold-rgb: ;
  --font-widget: Default-Regular;
  --font-widget-rgb: ;
  --font-size: 1rem;
  --font-size-rgb: ;
  --font-size-xs: 11px;
  --font-size-xs-rgb: ;
  --font-size-sm: 12px;
  --font-size-sm-rgb: ;
  --font-size-base: 14px;
  --font-size-base-rgb: ;
  --font-size-md: 16px;
  --font-size-md-rgb: ;
  --font-size-lg: 18px;
  --font-size-lg-rgb: ;
  --font-size-xl: 24px;
  --font-size-xl-rgb: ;
  --font-size-2xl: 32px;
  --font-size-2xl-rgb: ;
  --font-size-3xl: 40px;
  --font-size-3xl-rgb: ;
  --line-height-tight: 1.25;
  --line-height-tight-rgb: ;
  --line-height-base: 1.5;
  --line-height-base-rgb: ;
  --space-1: 4px;
  --space-1-rgb: ;
  --space-2: 8px;
  --space-2-rgb: ;
  --space-3: 12px;
  --space-3-rgb: ;
  --space-4: 16px;
  --space-4-rgb: ;
  --space-5: 24px;
  --space-5-rgb: ;
  --space-6: 32px;
  --space-6-rgb: ;
  --space-7: 48px;
  --space-7-rgb: ;
  --space-8: 64px;
  --space-8-rgb: ;
  --radius: 5px;
  --radius-rgb: ;
  --radius-sm: 3px;
  --radius-sm-rgb: ;
  --radius-pill: 999px;
  --radius-pill-rgb: ;
  --button-padding: 8px 16px;
  --button-padding-rgb: ;
  --button-radius: 5px;
  --button-radius-rgb: ;
  --input-radius: 5px;
  --input-radius-rgb: ;
  --input-line-height: 2rem;
  --input-line-height-rgb: ;
}
.bisbrickapp .h1, .bisbrickapp h1, bisbrickapp .h1, bisbrickapp h1 {
  font-family: Poppins-600;
  text-transform: none;
  font-size: 24px;
  line-height: 32px;
}
.bisbrickapp .h2, .bisbrickapp h2, bisbrickapp .h2, bisbrickapp h2 {
  font-family: Poppins-600;
  text-transform: none;
  font-size: 20px;
  line-height: 28px;
}
.bisbrickapp .h3, .bisbrickapp h3, bisbrickapp .h3, bisbrickapp h3 {
  font-family: Poppins-600;
  text-transform: none;
  font-size: 18px;
  line-height: 24px;
}
.bisbrickapp .h4, .bisbrickapp h4, bisbrickapp .h4, bisbrickapp h4 {
  font-family: Poppins-600;
  text-transform: none;
  font-size: 16px;
  line-height: 22px;
}
.bisbrickapp .h5, .bisbrickapp h5, bisbrickapp .h5, bisbrickapp h5 {
  font-family: Poppins-500;
  text-transform: none;
  font-size: 14px;
  line-height: 20px;
}
.bisbrickapp .p, .bisbrickapp p, bisbrickapp .p, bisbrickapp p {
  font-family: Poppins-400;
  text-transform: none;
  font-size: 16px;
  line-height: 24px;
}
.bisbrickapp .Button .button__Primary {
  background-color: var(--primary-1);
  border-color: var(--primary-1);
  color: var(--neutral-1);
  font-family: Poppins-600;
  font-size: 14px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
}
.bisbrickapp .Button .button__Primary:hover {
  background-color: var(--primary-1-dark);
  border-color: var(--primary-1-dark);
  color: var(--neutral-1);
}
.bisbrickapp .Button .button__Secondary {
  background-color: var(--neutral-1);
  border-color: var(--secondary-3);
  color: var(--neutral-8);
  font-family: Poppins-500;
  font-size: 14px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
}
.bisbrickapp .Button .button__Secondary:hover {
  background-color: var(--neutral-3);
  border-color: var(--secondary-3-dark);
  color: var(--neutral-8);
}
.bisbrickapp .Button .button__Text {
  background-color: var(--neutral-1);
  border-color: var(--primary-1);
  color: var(--primary-1);
  font-family: Poppins-500;
  font-size: 14px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
}
.bisbrickapp .Button .button__Text:hover {
  background-color: var(--primary-1-light);
  border-color: var(--primary-1);
  color: var(--primary-1);
}
.bisbrickapp .Button .button__Toolbar {
  background-color: var(--neutral-1);
  border-color: var(--secondary-3);
  color: var(--neutral-8);
  font-family: Poppins-500;
  font-size: 13px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}
.bisbrickapp .Button .button__Toolbar:hover {
  background-color: var(--neutral-3);
  border-color: var(--secondary-3-dark);
  color: var(--neutral-8);
}
.bisbrickapp .Button .button__Form__Next {
  background-color: var(--form-next);
  border-color: var(--form-next);
  color: var(--neutral-1);
  font-family: Poppins-600;
  font-size: 14px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
}
.bisbrickapp .Button .button__Form__Next:hover {
  background-color: var(--primary-1-dark);
  border-color: var(--primary-1-dark);
  color: var(--neutral-1);
}
.bisbrickapp .Button .button__Form__Prev {
  background-color: var(--form-previous);
  border-color: var(--secondary-3);
  color: var(--neutral-8);
  font-family: Poppins-500;
  font-size: 14px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
}
.bisbrickapp .Button .button__Form__Prev:hover {
  background-color: var(--neutral-3);
  border-color: var(--secondary-3-dark);
  color: var(--neutral-8);
}
.bisbrickapp .Button .button__Form__Matrix__Add {
  background-color: var(--neutral-1);
  border-color: var(--form-matrix-add);
  color: var(--form-matrix-add);
  font-family: Poppins-500;
  font-size: 13px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  padding-left: 12px;
}
.bisbrickapp .Button .button__Form__Matrix__Add:hover {
  background-color: var(--primary-1-light);
  border-color: var(--form-matrix-add);
  color: var(--form-matrix-add);
}
.bisbrickapp .Button .button__Form__Matrix__Remove {
  background-color: var(--neutral-1);
  border-color: var(--chip-negative-bg);
  color: var(--form-matrix-remove);
  font-family: Poppins-500;
  font-size: 13px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  padding-top: 6px;
  padding-right: 12px;
  padding-bottom: 6px;
  padding-left: 12px;
}
.bisbrickapp .Button .button__Form__Matrix__Remove:hover {
  background-color: var(--chip-negative-bg);
  border-color: var(--form-matrix-remove);
  color: var(--form-matrix-remove);
}
/* BisbrickApp base. Scoped on the theme name, not on .app-shell: a popup is an ngb-modal-window on <body>
   that carries the opener's theme name as class (base/modal.component.ts:167) and no app-shell. */
ngb-modal-window.bisbrickapp {
  font-family: var(--font-content), Poppins, sans-serif;
  color: var(--app-ink);
}
ngb-modal-window.bisbrickapp .modal-content {
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--app-line), 0 12px 32px rgba(41, 45, 62, 0.12);
}
/* SurveyJS: the accent as the form primary on every form of this theme, pages and popups alike
   (survey theme 57 carries the same; this also covers a form whose own form theme is transparent). */
.bisbrickapp .sd-root-modern,
ngb-modal-window.bisbrickapp .sd-root-modern {
  --sjs-primary-backcolor: var(--primary-1);
  --sjs-primary-backcolor-light: rgba(244, 95, 58, 0.1);
  --sjs-primary-backcolor-dark: var(--primary-1-dark);
  --sjs-primary-forecolor: #FFFFFF;
  --sjs-corner-radius: var(--radius);
}
.bisbrickapp .app-shell {
  --app-gutter: clamp(16px, 3vw, 40px);
  --app-accent: #F45F3A;
  background: #F4F3F0;
}

/* Type (boards, 2026-10-14): Poppins on the app pages. It is set on the page body rather than on each
   rule, so bricks that carry no class get it too; the title bricks set Default-Bold inline, which only
   an !important can beat. The website pages on theme 13 never match .app-shell and keep Aeonik/Gilroy. */
.bisbrickapp .app-shell > main {
  font-family: "Poppins-400";
  color: #292D3E;
}
.bisbrickapp .app-shell > main [style*="Default-Bold"],
.bisbrickapp .app-shell > main [style*="Default-Black"] {
  font-family: "Poppins-600" !important;
}
.bisbrickapp .app-shell > main [style*="Default-Regular"],
.bisbrickapp .app-shell > main [style*="Default-Light"] {
  font-family: "Poppins-400" !important;
}

/* Widgets keep their own font and colours: Koos 2026-10-14, "Behoud de gantt en/of Kanbans (die zijn
   visueel al prima)". Everything above inherits, so the reset has to be explicit. */
.bisbrickapp .app-shell bisbrick-kanban,
.bisbrickapp .app-shell bisbrick-board,
.bisbrickapp .app-shell .gantt_container,
.bisbrickapp .app-shell [class*="dhx_"],
.bisbrickapp .app-shell [class^="wx-"],
.bisbrickapp .app-shell [class*=" wx-"] {
  font-family: var(--font-widget);
  color: initial;
}

/* Room between the last brick and the footer: the same on every app page, and only from here -
   pages carry no trailing Line Spacer of their own (table-spacing.mjs trimPageEnd). */
.bisbrickapp .app-shell > main {
  padding-bottom: 100px;
}

/* Page gutter: everything below the app menu. A margin, because a brick's own padding is set
   inline on this same wrapper. */
.bisbrickapp .app-shell > main > bisbrick-list > div:not(:first-child) {
  width: auto;
  margin-left: var(--app-gutter);
  margin-right: var(--app-gutter);
}
/* width: auto above - the wrapper is a .col-md-12 (width: 100%), and 100% plus the two margins ran the
   page 2 x gutter past the right edge, with a horizontal scrollbar. */

/* Action buttons: compact, like the toolbar buttons of the planning and kanban bricks, instead of the
   theme's large website buttons; 5px corners as elsewhere in Bisbrick (Koos 2026-10-08). The geometry is
   his, the colours are the boards' (2026-10-14): one filled accent, everything else an outline. The
   transparent border keeps a primary as tall as a secondary beside it. */
.bisbrickapp .app-shell .Button .button {
  height: auto;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
}
.bisbrickapp .app-shell .Button .button__Primary,
.bisbrickapp .app-shell .Button .button__Primary:focus {
  background-color: #F45F3A;
  border-color: #F45F3A;
  color: #FFFFFF;
  font-family: "Poppins-600";
}
.bisbrickapp .app-shell .Button .button__Primary:hover {
  background-color: #D94A27;
  border-color: #D94A27;
  color: #FFFFFF;
}
.bisbrickapp .app-shell .Button .button__Secondary {
  background-color: #FFFFFF;
  border: 1px solid #DCD6CB;
  color: #292D3E;
}
.bisbrickapp .app-shell .Button .button__Secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}
/* Text buttons (card actions such as "Edit all", "View all notes", "Delete account" on the CRM record pages):
   an outline in the accent, so they stay quieter than the one filled primary per header (Koos 2026-10-08).
   The theme's own button__Text is filled in a blue of its own (#537CFA), which is why it is overruled here. */
.bisbrickapp .app-shell .Button .button__Text,
.bisbrickapp .app-shell .Button .button__Text:focus {
  background-color: #FFFFFF;
  border: 1px solid #F45F3A;
  box-shadow: none;
  color: #F45F3A;
}
.bisbrickapp .app-shell .Button .button__Text:hover {
  background-color: #FDEDE8;
  border-color: #F45F3A;
  color: #F45F3A;
}

/* Buttons made of links in an htmlText (a record header, gen.mjs popupLink / popupMenu): the same look as
   the Button brick above. */
.bisbrickapp .app-shell .app-btn,
.bisbrickapp .app-shell a.app-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.bisbrickapp .app-shell .app-btn--primary,
.bisbrickapp .app-shell .app-btn--primary:hover {
  background-color: #F45F3A;
  color: #FFFFFF;
}
.bisbrickapp .app-shell .app-btn--primary:hover {
  filter: brightness(0.94);
}
.bisbrickapp .app-shell .app-btn--secondary,
.bisbrickapp .app-shell a.app-btn--secondary:hover {
  background-color: #FFFFFF;
  border-color: #DCD6CB;
  color: #292D3E;
}
.bisbrickapp .app-shell a.app-btn--secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}

/* Record header (Koos 2026-10-08): breadcrumb, name and meta line on the left, the actions on the right of
   the same row; on a narrow screen the actions wrap under the name. */
.bisbrickapp .app-shell .row:has(> div > .app-head) {
  align-items: flex-end;
  row-gap: 12px;
  margin: 20px 0 8px;
}
/* The header brick does not clip, and lies over the bricks after it only while its + Contacts list is open, so the
   list opens on top of the tabs. Not always: a raised header would also cover popups of the bricks below it,
   such as the Kanban card editor, which lives inside the board's own stacking layer. */
.bisbrickapp .app-shell bisbrick-multi-column:has(.app-head .app-menu:hover),
.bisbrickapp .app-shell bisbrick-multi-column:has(.app-head .app-menu:focus-within) {
  z-index: 30;
}
.bisbrickapp .app-shell bisbrick-multi-column:has(.app-head) .background {
  overflow: visible;
}
.bisbrickapp .app-shell .row > div:has(> .app-head) {
  flex: 1 1 320px;
  width: auto;
  min-width: 0;
  padding: 0 !important;
}
.bisbrickapp .app-shell .row > div:has(> .app-head-actions) {
  flex: 0 0 auto;
  width: auto;
  padding: 0 !important;
}
.bisbrickapp .app-shell .app-head p {
  margin: 0;
  text-align: left;
}
.bisbrickapp .app-shell .app-head .app-crumb {
  margin-bottom: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-head .app-crumb a {
  color: #5F6475;
  text-decoration: none;
}
.bisbrickapp .app-shell .app-head .app-crumb a:hover {
  color: #292D3E;
  text-decoration: underline;
}
.bisbrickapp .app-shell .app-head .app-title {
  font-family: "Poppins-600";
  font-size: 28px;
  line-height: 34px;
  color: #292D3E;
}
.bisbrickapp .app-shell .app-head .app-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}
/* A status as a label, coloured by its code (data-s). */
.bisbrickapp .app-shell .app-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  background: #F1ECE4;
  color: #5F6475;
  font-family: "Poppins-500";
  font-size: 12px;
  line-height: 18px;
}
/* In a list the chips sit under one another, so the boards give them one width and centre the word
   (Contacts and Campaigns boards, artifact HtKnRMkmwY5aph5urR38LL). On a record page's header the chip
   is on its own beside the title, and keeps its natural width. */
.bisbrickapp .app-shell td .app-badge {
  min-width: 88px;
  text-align: center;
}
.bisbrickapp .app-shell .app-badge[data-s="live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.bisbrickapp .app-shell .app-badge[data-s="paused"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.bisbrickapp .app-shell .app-badge[data-s="done"] {
  color: #5F6475;
}
/* Live, but one or more parts switched off (Campaign App Campaigns StatusCode, Koos 2026-10-08):
   the Live green, lighter, with a ring so it reads as "not all of it". */
.bisbrickapp .app-shell .app-badge[data-s="partial"] {
  background: #E3F2E8;
  color: #1F6B3A;
  box-shadow: inset 0 0 0 1px #1F6B3A;
}
/* "Stop campaign now" only while the campaign itself is Live (data-s = its stored status code). */
.bisbrickapp .app-shell .app-stop {
  display: none;
}
.bisbrickapp .app-shell .app-stop[data-s="live"] {
  display: contents;
}
.bisbrickapp .app-shell .app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A button with a list of links under it, without code: open on hover, when the button has focus (a tap or
   a click), and while the keyboard is in it. A mouse click on a link gives no :focus-visible, so the list
   closes once the popup it opened covers it. */
.bisbrickapp .app-shell .app-menu {
  position: relative;
  display: inline-block;
}
.bisbrickapp .app-shell .app-menu__btn::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0 1px 3px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.bisbrickapp .app-shell .app-menu__list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
/* Bridges the 4px gap, so the list does not close on the way to it. */
.bisbrickapp .app-shell .app-menu__list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}
.bisbrickapp .app-shell .app-menu:hover .app-menu__list,
.bisbrickapp .app-shell .app-menu__btn:focus + .app-menu__list,
.bisbrickapp .app-shell .app-menu:has(:focus-visible) .app-menu__list {
  display: block;
}
.bisbrickapp .app-shell .app-menu__list a,
.bisbrickapp .app-shell .app-menu__list a:hover {
  display: block;
  padding: 7px 10px;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #292D3E;
  text-decoration: none;
  white-space: nowrap;
}
.bisbrickapp .app-shell .app-menu__list a:hover,
.bisbrickapp .app-shell .app-menu__list a:focus-visible {
  background: #F4F3F0;
}
/* ⋯: a menu without a caret (CRM record headers, crm-record-pages.mjs). */
.bisbrickapp .app-shell .app-menu__btn--more::after {
  content: none;
}
.bisbrickapp .app-shell .app-menu__btn--more {
  min-width: 32px;
  justify-content: center;
  letter-spacing: 1px;
}

/* CRM record pages (Account, Contact; CRM-App-spec/local/crm-record-pages.mjs, Koos 2026-10-08).
   The badge carries the stored value as its code: account type and status, contact status. */
.bisbrickapp .app-shell .app-badge[data-s="Active"],
.bisbrickapp .app-shell .app-badge[data-s="Customer"],
.bisbrickapp .app-shell .app-badge[data-s="Won"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.bisbrickapp .app-shell .app-badge[data-s="Prospect"],
.bisbrickapp .app-shell .app-badge[data-s="On hold"],
.bisbrickapp .app-shell .app-badge[data-s="On Hold"],
.bisbrickapp .app-shell .app-badge[data-s="Suspended"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.bisbrickapp .app-shell .app-badge[data-s="Partner"],
.bisbrickapp .app-shell .app-badge[data-s="Reseller"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.bisbrickapp .app-shell .app-badge[data-s="Inactive"],
.bisbrickapp .app-shell .app-badge[data-s="Archived"],
.bisbrickapp .app-shell .app-badge[data-s="Closed"],
.bisbrickapp .app-shell .app-badge[data-s="Left Company"],
.bisbrickapp .app-shell .app-badge[data-s="Do Not Contact"],
.bisbrickapp .app-shell .app-badge[data-s="Competitor"],
.bisbrickapp .app-shell .app-badge[data-s="Lost"] {
  color: #5F6475;
}
/* The CRM home board's urgency chips (CRM-App-spec/local/gen-crm-home-dataactions.mjs).
   These codes are a state the DataAction works out per row, not a stored value, so they are
   lowercase and cannot collide with the status names above. */
.bisbrickapp .app-shell .app-badge[data-s="late"] {
  background: #FBE9E7;
  color: #B3261E;
}
.bisbrickapp .app-shell .app-badge[data-s="soon"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.bisbrickapp .app-shell .app-badge[data-s="later"] {
  color: #5F6475;
}
.bisbrickapp .app-shell .app-badge[data-s=""] {
  display: none;
}
/* "Child of …" only when there is a parent. */
.bisbrickapp .app-shell .app-head .app-meta .app-meta__parent[data-v=""] {
  display: none;
}
/* The row-detail panel (Table.rowDetail, Web !2839). The boards put it on a quiet sand ground, indented so
   it starts under the first cell instead of under the chevron, with a hairline between it and the row.
   The component's own --neutral / --blue options are greys from the website palette, so the brick stays on
   "none" and the theme gives the panel its colour.
   !important is load-bearing: the component's own "td.bb-row-detail { padding: 16px }" carries Angular's
   encapsulation attribute and so ties on specificity — order would decide it, and the theme stylesheet is
   not guaranteed to load last. */
.bisbrickapp .app-shell td.bb-row-detail {
  background: #F8F7F4 !important;
  padding: 16px 18px 16px 48px !important;
  border-top: 1px solid #F1ECE4 !important;
}
/* The chevron: the component asks the theme for --secondary-color-700 and --primary-color-1000, which on
   theme 13 are the website's grey and blue. Overruled here so the handle stays in the app's own palette. */
.bisbrickapp .app-shell .bb-row-detail__toggle {
  color: #8A8F9E;
}
.bisbrickapp .app-shell .bb-row-detail__toggle:hover {
  background: #FDEDE8;
  color: #F45F3A;
}
.bisbrickapp .app-shell .bb-row-detail__toggle:focus-visible {
  outline: 2px solid #F45F3A;
}
/* A bar of actions at the foot of the panel, above it the lighter of the two rules (boards). */
.bisbrickapp .app-shell .app-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ECE8E0;
}

/* Overview: the main column and the aside are stacks of cards (a MultiColumn host is inline by default). */
.bisbrickapp .app-shell .app-card {
  display: block;
  margin-bottom: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  background: #FFFFFF;
  padding: 16px 18px 18px !important;
}
/* A 16px gutter between the main column and the aside, as between the cards; stacked below md there is none. */
@media (min-width: 768px) {
  .bisbrickapp .app-shell .app-overview .row > [class*="col-"] > .app-stack {
    display: block;
    padding-right: 8px;
  }
  .bisbrickapp .app-shell .app-overview .row > [class*="col-"] + [class*="col-"] > .app-stack {
    padding-right: 0;
    padding-left: 8px;
  }
}
/* An equal-height pair (the layout frame: two columns only as equal-height pairs). The lead column's
   capped list sets the height and the side column's card runs down to meet it, instead of leaving a
   step of empty ground. Every wrapper between the column and the card has to carry the height, hence
   the chain: MultiColumn renders host > .row > [col] around each level. Opt-in, because a stack that
   holds several cards must keep its natural height. */
@media (min-width: 768px) {
  .bisbrickapp .app-shell .app-overview--duo > .row > [class*="col-"] > .app-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .bisbrickapp .app-shell .app-overview--duo .app-stack > .row,
  .bisbrickapp .app-shell .app-overview--duo .app-stack > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .bisbrickapp .app-shell .app-overview--duo .app-stack .app-card {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
}
.bisbrickapp .app-shell .app-card p {
  margin: 0;
}
.bisbrickapp .app-shell .app-card .app-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-family: "Poppins-600";
  font-size: 16px;
  line-height: 22px;
  color: #292D3E;
}
.bisbrickapp .app-shell .app-card .app-card__title a,
.bisbrickapp .app-shell .app-card .app-card__more a {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #F45F3A;
  text-decoration: none;
}
.bisbrickapp .app-shell .app-card .app-card__title a:hover,
.bisbrickapp .app-shell .app-card .app-card__more a:hover {
  text-decoration: underline;
}
.bisbrickapp .app-shell .app-card .app-card__more {
  margin-top: 10px;
}
.bisbrickapp .app-shell .app-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.bisbrickapp .app-shell .app-card__empty {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-person {
  margin: 0;
  font-family: "Poppins-600";
  font-size: 14px;
  line-height: 20px;
}
.bisbrickapp .app-shell .app-person a {
  color: #292D3E;
  text-decoration: none;
}
.bisbrickapp .app-shell .app-person a:hover {
  color: #F45F3A;
}
.bisbrickapp .app-shell .app-person__line {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-person__line:empty {
  display: none;
}

/* The app menu's words start on the same line as the titles, tabs and table text. */
.bisbrickapp .app-shell > main > bisbrick-list > div:first-child .navigation-bar {
  padding-left: var(--app-gutter);
  padding-right: var(--app-gutter);
}
.bisbrickapp .app-shell > main > bisbrick-list > div:first-child .nb-zone-left {
  justify-content: flex-start;
}
/* The menu item the page belongs to (class app-nav-<n> on the master, gen.mjs navClass) in the primary
   colour, like a selected tab; the navigationBar's own highlight (an exact link match) gets the same colour
   instead of its default cyan. */
.bisbrickapp .app-shell.app-nav-1 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.bisbrickapp .app-shell.app-nav-2 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.bisbrickapp .app-shell.app-nav-3 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.bisbrickapp .app-shell.app-nav-4 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.bisbrickapp .app-shell.app-nav-5 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.bisbrickapp .app-shell.app-nav-6 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.bisbrickapp .app-shell.app-nav-7 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.bisbrickapp .app-shell.app-nav-8 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(8) > .nb-link,
.bisbrickapp .app-shell.app-nav-9 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(9) > .nb-link,
.bisbrickapp .app-shell > main > bisbrick-list > div:first-child .nb-link.nb-active {
  color: #F45F3A;
}

/* Tabs: an underline row. */
.bisbrickapp .app-shell .grid-tabs {
  gap: 4px;
  margin: 12px 0 20px;
  padding: 0;
  border-bottom: 1px solid #E4E0D8;
  flex-wrap: wrap;
}
.bisbrickapp .app-shell .grid-tabs .grid-tab,
.bisbrickapp .app-shell .grid-tabs .grid-tab:hover {
  max-width: none;
  margin-bottom: -1px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  color: #5F6475;
  font-size: 14px !important;
}
.bisbrickapp .app-shell .grid-tabs .grid-tab:hover {
  color: #292D3E;
  border-bottom-color: #CFC7B9;
}
.bisbrickapp .app-shell .grid-tabs .selected-grid-tab,
.bisbrickapp .app-shell .grid-tabs .selected-grid-tab:hover {
  color: #F45F3A;
  border-bottom-color: #F45F3A;
}

/* Tabs inside a tab: a segmented control, so the two levels read apart. */
.bisbrickapp .app-shell .tab-content .grid-tabs {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 16px;
  padding: 3px;
  background: #F4F3F0;
  border: 0;
  border-radius: 5px;
}
.bisbrickapp .app-shell .tab-content .grid-tabs .grid-tab,
.bisbrickapp .app-shell .tab-content .grid-tabs .grid-tab:hover {
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 5px !important;
  font-size: 13px !important;
}
.bisbrickapp .app-shell .tab-content .grid-tabs .grid-tab:hover {
  background: rgba(255, 255, 255, 0.6);
}
.bisbrickapp .app-shell .tab-content .grid-tabs .selected-grid-tab,
.bisbrickapp .app-shell .tab-content .grid-tabs .selected-grid-tab:hover {
  background: #FFFFFF;
  color: #292D3E;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Stat strip (Koos 2026-10-08): figures, not buttons. No border or fill; a small muted label over
   a large value, hairlines between the figures. One htmlText brick per figure with class app-stat:
   <p>label</p><p data-v="{{x}}">value</p>[<p>note</p>]. The selectors go by the brick's place, not by
   a parent class, so a figure also works in a row that holds other bricks (the CRM dashboard). */
.bisbrickapp .app-shell .row:has(> div > .app-stat) {
  margin: 4px 0 20px;
  row-gap: 12px;
}
.bisbrickapp .app-shell .row > div:has(> .app-stat) {
  padding: 0 24px !important;
  /* col-md-auto only applies from 768px; below that Bootstrap makes every column 100% and the strip
     turned into a stack. A figure keeps its own width, the strip wraps instead. */
  flex: 0 0 auto;
  width: auto;
}
/* The first figure of a run lines up with what is above it (a heading or filter may come before it). */
.bisbrickapp .app-shell .row > div:has(> .app-stat):not(div:has(> .app-stat) + div) {
  padding-left: 0 !important;
}
.bisbrickapp .app-shell .row > div:has(> .app-stat) + div:has(> .app-stat) {
  border-left: 1px solid #E4E0D8;
}
.bisbrickapp .app-shell .app-stat {
  display: block;
}
.bisbrickapp .app-shell .app-stat p {
  margin: 0;
  text-align: left;
}
.bisbrickapp .app-shell .app-stat p:nth-of-type(1) {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-stat p:nth-of-type(2) {
  margin-top: 2px;
  font-family: "Poppins-600";
  font-size: 24px;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.bisbrickapp .app-shell .app-stat p:nth-of-type(3) {
  margin-top: 2px;
  font-family: "Poppins-400";
  font-size: 12px;
  line-height: 16px;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-stat p:nth-of-type(3) img {
  height: 12px;
  width: auto;
  vertical-align: -1px;
}
/* A 0 or an empty value reads as "nothing yet", not as a figure. Keeps the :nth-of-type so it outweighs the value colour. */
.bisbrickapp .app-shell .app-stat p[data-v="0"]:nth-of-type(2),
.bisbrickapp .app-shell .app-stat p[data-v=""]:nth-of-type(2) {
  color: #8A8F9E;
}
/* Text values (e-mail, phone, stage, channel) are not figures: smaller, and allowed to wrap. */
.bisbrickapp .app-shell .app-stat.app-stat--text p:nth-of-type(2) {
  font-size: 15px;
  line-height: 22px;
  margin-top: 4px;
  white-space: normal;
  word-break: break-word;
}
/* The EmailStats brick (Web component, the Campaign dashboard's Mail tab) brings its own bordered tiles;
   inside the apps they get the same strip. A value that says "nothing yet" (0, 0% or –) carries
   bb-email-stats__value--none (Bisbrick-Web, 2026-10-08) and is muted like a 0 in the strip. */
.bisbrickapp .app-shell .bb-email-stats__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: 4px 0 8px;
}
.bisbrickapp .app-shell .bb-email-stats__tile {
  flex: 0 0 auto;
  gap: 2px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
}
.bisbrickapp .app-shell .bb-email-stats__tile:first-child {
  padding-left: 0;
}
.bisbrickapp .app-shell .bb-email-stats__tile + .bb-email-stats__tile {
  border-left: 1px solid #E4E0D8;
}
.bisbrickapp .app-shell .bb-email-stats__tile .bb-email-stats__label {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.bisbrickapp .app-shell .bb-email-stats__tile .bb-email-stats__value {
  font-family: "Poppins-600";
  font-size: 24px;
  font-weight: normal;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.bisbrickapp .app-shell .bb-email-stats__tile .bb-email-stats__value--none {
  color: #8A8F9E;
}

/* App chrome - boards 2026-10-15, CRM-Accounts.dc.html / Main.dc.html.
   The app pages wore the Bisbrick WEBSITE header (Services / Platform / logo / Contact) and the
   627px marketing footer. That chrome was the single biggest reason the CRM did not read as the
   boards. All of it is CSS: the CRM menu is template 185 and the master is shared with the website
   - neither is edited.
   Deliberately a 1:1 mirror of the .Campaign_menu block further down this styling, so the two apps
   wear one shell and a change to either reads as a change to both. Everything is scoped with
   :has(.Relations_menu); the Campaign rules are scoped with :has(.Campaign_menu) and the two never meet.
   ===================================================================== */

.bisbrickapp .app-shell:has(.Relations_menu) {
  background: #F4F3F0;
  font-family: "Poppins-400", Poppins, sans-serif;
  color: #292D3E;
}

/* The website chrome: the navigation bar inside header, the bottom bar, the footer. */
.bisbrickapp .app-shell:has(.Relations_menu) > header > bisbrick-list,
.bisbrickapp .app-shell:has(.Relations_menu) > header .bottom-bar,
.bisbrickapp .app-shell:has(.Relations_menu) > footer {
  display: none !important;
}
body:has(.app-shell .Relations_menu) > .nb-wrapper {
  display: none !important;
}

/* Header collapses to nothing and the user links are placed over the menu bar, so the two rows
   become the one navy bar the boards draw. */
.bisbrickapp .app-shell:has(.Relations_menu) > header {
  position: relative;
  height: 0;
  z-index: 20;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar {
  position: absolute;
  top: 0;
  right: 24px;
  height: 52px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .container {
  width: auto;
  max-width: none;
  padding: 0;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .navbar {
  padding: 0;
  background: transparent;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .nav-item.language {
  display: none;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .nav-item {
  padding: 0;
  margin: 0;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .nav-link {
  font-size: 12px;
  font-weight: 400;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  color: #D6D8E0 !important;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .nav-link span {
  font-weight: 400;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .nav-link:hover {
  color: #FFFFFF !important;
}

/* The signed-in user becomes the avatar circle of the boards: the icon goes, the name is clipped
   to its first letter inside a 30px circle. */
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .nav-link .fa-user {
  display: none;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .nav-item:has(.fa-user) {
  order: 9;
  margin-left: 8px;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .nav-link:has(.fa-user) span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #F4F3F0;
  color: #292D3E;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}
.bisbrickapp .app-shell:has(.Relations_menu) > header .top-bar .nav-link:has(.fa-user) span::first-letter {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
}

/* ---- CRM menu brick (template 185, styled from here, never edited) ---- */
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(> .Relations_menu) {
  padding: 0;
}
.bisbrickapp .app-shell .Relations_menu section,
.bisbrickapp .app-shell .Relations_menu .background {
  margin: 0;
  background: #292D3E !important;
  padding: 0 !important;
}
.bisbrickapp .app-shell .Relations_menu .background > div {
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}
.bisbrickapp .app-shell .Relations_menu .row {
  margin: 0;
}
.bisbrickapp .app-shell .Relations_menu .row > div {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  padding: 0 !important;
}
.bisbrickapp .app-shell .Relations_menu .nb-wrapper,
.bisbrickapp .app-shell .Relations_menu .navigation-bar {
  min-height: 52px;
  height: 52px;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.bisbrickapp .app-shell .Relations_menu .navigation-bar {
  display: flex;
  align-items: center;
  gap: 6px 22px;
}
/* CRM carries all eight items in the left zone and nothing in the right one, so the room for the
   user links is reserved here rather than on nb-zone-right the way Campaign does it. */
.bisbrickapp .app-shell .Relations_menu .nb-zone-left {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  justify-content: flex-start !important;
  flex: 1 1 auto;
  padding-right: 320px;
}
.bisbrickapp .app-shell .Relations_menu .nb-zone-left::before {
  content: "Relations";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #F4F3F0;
  margin-right: 20px;
}
.bisbrickapp .app-shell .Relations_menu .nb-zone-center,
.bisbrickapp .app-shell .Relations_menu .nb-zone-right {
  display: none;
}
.bisbrickapp .app-shell .Relations_menu .nb-link {
  font-family: "Poppins-400", Poppins, sans-serif;
  font-weight: 400;
  border-radius: 5px;
  text-decoration: none;
  background: transparent;
  line-height: 1.5;
  color: #D6D8E0 !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
}
.bisbrickapp .app-shell .Relations_menu .nb-link::after {
  display: none !important;
}
.bisbrickapp .app-shell .Relations_menu .nb-link:hover {
  color: #FFFFFF !important;
}
/* A parent section stays quiet; only the page you are on wears the pill. Without this the whole
   branch reads as selected. */
.bisbrickapp .app-shell .Relations_menu .nb-link.active-parent:not(.nb-active) {
  background: transparent;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-weight: 400;
  color: #D6D8E0 !important;
}
.bisbrickapp .app-shell .Relations_menu .nb-link.nb-active {
  background: #F4F3F0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  color: #292D3E !important;
}

/* ---- page body ---- */
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list {
  display: block;
}
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div:not(:has(> .Relations_menu)) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  float: none;
}
/* The page head sits on a white band that runs the full width, the way the boards draw it. */
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(.app-head) {
  background: #FFFFFF;
  box-shadow: #FFFFFF 0 0 0 100vmax;
  clip-path: inset(0 -100vmax);
  padding-top: 12px;
  padding-bottom: 10px;
}
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(.app-head) section,
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(.app-head) .background {
  background: transparent !important;
  padding: 0 !important;
}
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(.app-head) .row {
  align-items: center;
  flex-wrap: nowrap;
}
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(.app-head) .row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- tab row ---- */
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs {
  background: #FFFFFF;
  box-shadow: #FFFFFF 0 0 0 100vmax, #E6E0D6 0 1px 0 100vmax;
  clip-path: inset(0 -100vmax -1px);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab {
  padding: 10px 14px;
  margin: 0;
  border-radius: 0;
  color: #5F6475;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  flex: 0 0 auto;
  max-width: none;
  border: 0 !important;
  background: transparent !important;
}
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: #F45F3A 0 -3px 0 inset;
}
.bisbrickapp .app-shell:has(.Relations_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab::after {
  display: none;
}
/* A tab row nested inside a card is the quieter of the two: hairline rule, navy underline. */
.bisbrickapp .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #EFEAE1;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
  box-shadow: none;
}
.bisbrickapp .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab {
  padding: 12px 10px;
  margin: 0;
  border-radius: 0;
  color: #5F6475;
  font-size: 13px;
  box-shadow: none;
  flex: 0 0 auto;
  max-width: none;
  border: 0 !important;
  background: transparent !important;
}
.bisbrickapp .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: #292D3E 0 -3px 0 inset;
}

.bisbrickapp .app-shell:has(.Relations_menu) .app-card,
.bisbrickapp .app-shell:has(.Relations_menu) .app-panel {
  background: #FFFFFF;
  border: 0;
  border-radius: 5px;
  box-shadow: #E4E0D8 0 0 0 1px;
}



















/* === CRM list tables (gen-table-css.mjs) === */
/* ---- the table is a card ----
   The boards draw the toolbar and the rows inside one white card with a hairline
   edge. .table-responsive is the brick's own wrapper, so the card goes there and
   the table keeps its horizontal scroll on a narrow screen. */
.bisbrickapp .app-shell .table-responsive:has(> .app-table) {
  background: #FFFFFF;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
}
.bisbrickapp .app-shell table.app-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
  color: #292D3E;
  background: transparent;
}
/* The brick always emits a <caption>, and it holds only whitespace unless a
   tableName was set. Collapsing it on the element and restoring the size on its
   children keeps the progress bar (the one thing that renders inside it) intact. */
.bisbrickapp .app-shell table.app-table > caption {
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.bisbrickapp .app-shell table.app-table > caption > * {
  font-size: 13px;
  line-height: 1.4;
}

/* ---- header row ---- */
.bisbrickapp .app-shell table.app-table > thead > tr > th {
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid #F1ECE4;
  background: transparent;
  font-family: "Poppins-600";
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A8F9E;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
.bisbrickapp .app-shell table.app-table > thead > tr > th:hover {
  color: #5F6475;
}

/* ---- body rows ----
   52px is the board's row height; it is set as a min on the cell rather than a
   fixed height so a wrapped cell can still grow. */
.bisbrickapp .app-shell table.app-table > tbody > tr > td {
  height: 52px;
  padding: 6px 14px;
  border: 0;
  border-top: 1px solid #F1ECE4;
  background: transparent;
  vertical-align: middle;
  line-height: 1.35;
}
.bisbrickapp .app-shell table.app-table > tbody > tr:first-child > td {
  border-top: 0;
}
.bisbrickapp .app-shell table.app-table > tbody > tr:hover > td {
  background: #FAF9F7;
}
/* The row carries bisbrickUrl when the table has a link, so the whole row is the
   target and the pointer has to say so. */
.bisbrickapp .app-shell table.app-table.table-hover > tbody > tr {
  cursor: pointer;
}
.bisbrickapp .app-shell table.app-table > tbody > tr > td > div {
  min-width: 0;
}
.bisbrickapp .app-shell table.app-table a.table-link {
  color: #292D3E;
  font-family: "Poppins-500";
  text-decoration: none;
}
.bisbrickapp .app-shell table.app-table a.table-link:hover {
  text-decoration: underline;
}

/* ---- column modifiers, set per column as columnClass ----
   .app-num  a figure: right-aligned and on tabular digits so the column lines up
   .app-sub  a secondary value: smaller and muted, so the name stays the loudest
   .app-nowrap  never wrap, ellipsis instead */
.bisbrickapp .app-shell table.app-table td.app-num,
.bisbrickapp .app-shell table.app-table th.app-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bisbrickapp .app-shell table.app-table td.app-num {
  font-family: "Poppins-500";
}
.bisbrickapp .app-shell table.app-table td.app-sub {
  font-size: 12px;
  color: #5F6475;
}
.bisbrickapp .app-shell table.app-table td.app-nowrap > div,
.bisbrickapp .app-shell table.app-table td.app-nowrap > a {
  display: block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* An empty cell reads as a mistake; the boards print an em dash instead. The
   :empty only catches a cell the brick left blank, never one holding a 0. */
.bisbrickapp .app-shell table.app-table td > div:empty::before {
  content: "\2014";
  color: #C9CCD6;
}

/* ---- the account cell ----
   The board gives an account one cell: the mark, the name, and a sub-line of
   industry and country. Three columns folded into one is what takes the table
   from eleven columns to eight and makes it readable at laptop width. */
.bisbrickapp .app-shell table.app-table td.app-cell-td > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The identity column carries two lines where every other column carries one, so
   it gets the lion's share of the width and the rest of the row divides what is
   left. Without this the browser spreads the columns evenly, the sub-line is cut
   off at the ellipsis, and the row ends in a band of empty space - which is what
   made the lists look unfinished at laptop width. */
.bisbrickapp .app-shell table.app-table td.app-cell-td {
  width: 34%;
}
.bisbrickapp .app-shell .app-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Cut off by the column, not by a fixed character count: a 28ch cap truncated
   "Groupe Sante Rivage" on a 1440px screen with 300px of empty row to its right. */
.bisbrickapp .app-shell .app-cell__name,
.bisbrickapp .app-shell .app-cell__sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bisbrickapp .app-shell .app-cell__name {
  font-family: "Poppins-500";
  color: #292D3E;
}
.bisbrickapp .app-shell .app-cell__sub {
  font-size: 12px;
  color: #8A8F9E;
}
/* An account with neither industry nor country gets no second line at all, rather
   than an empty one that pushes the name off centre. */
.bisbrickapp .app-shell .app-cell__sub:empty {
  display: none;
}
/* A pill cell never wraps, and the em dash rule must not fire on it: the pill is
   a span inside the div, so the div is not empty. */
.bisbrickapp .app-shell table.app-table td.app-pill {
  white-space: nowrap;
}

/* ---- the account mark ----
   A logo where there is one, otherwise the initials on a coloured square. The
   square's colour is picked in SQL from the name, so the same account keeps the
   same colour on every page. */
.bisbrickapp .app-shell .app-logo {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  font-family: "Poppins-600";
  font-size: 11px;
  line-height: 1;
  color: #FFFFFF;
  background: #8A8F9E;
}
.bisbrickapp .app-shell .app-logo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* An account is a company and a contact is a person; the shape is what tells the
   two marks apart at a glance on pages that otherwise look the same. */
.bisbrickapp .app-shell .app-logo--person {
  border-radius: 50%;
}
.bisbrickapp .app-shell .app-logo[data-i="0"] { background: #292D3E; }
.bisbrickapp .app-shell .app-logo[data-i="1"] { background: #5B6B8C; }
.bisbrickapp .app-shell .app-logo[data-i="2"] { background: #2E7D6B; }
.bisbrickapp .app-shell .app-logo[data-i="3"] { background: #9C5A78; }
.bisbrickapp .app-shell .app-logo[data-i="4"] { background: #C9A227; }
/* The brick's Image column wraps its img in a div, and an account logo there
   should read as the same mark as the initials square. */
.bisbrickapp .app-shell table.app-table td > div > img.img-fluid {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  object-fit: contain;
}

/* ---- two more account statuses ----
   The badge vocabulary already covers Active, Customer, Prospect, On hold and
   Partner; the dev data also has Suspect and Inactive. */
.bisbrickapp .app-shell .app-badge[data-s="Suspect"] {
  background: #F1ECE4;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-badge[data-s="Inactive"] {
  background: #F1ECE4;
  color: #8A8F9E;
}

/* ---- deal stages ----
   A deal's stage is a position on a path, not a state, so the five open stages
   walk up the navy ramp: the further a deal has come, the darker and more
   present the chip. Negotiation breaks out of the ramp into the app's orange
   because that is the stage that needs a person this week. Won is already green
   from the Active|Customer|Won rule above, and Lost takes the critical red. The
   ramp is the approved palette, and crm_deal_stage already stores these same
   hex values for the board. */
.bisbrickapp .app-shell .app-badge[data-s="Qualification"] {
  background: #EEF0F5;
  color: #5B6B8C;
}
.bisbrickapp .app-shell .app-badge[data-s="Needs analysis"] {
  background: #E7E9EF;
  color: #4A5573;
}
.bisbrickapp .app-shell .app-badge[data-s="Proposal"] {
  background: #DDE1EA;
  color: #333B52;
}
.bisbrickapp .app-shell .app-badge[data-s="Negotiation"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.bisbrickapp .app-shell .app-badge[data-s="Lost"] {
  background: #FBE9E7;
  color: #B3261E;
}

/* ---- lead stages ----
   Same idea as the deal stages, and the same ramp: New and Contacted are still
   quiet, Qualified is the one that wants a call this week and takes the app's
   orange, Converted is the green every "good" state on these pages uses, and
   Unqualified the critical red. crm_lead_stage already stores these hex values
   for the board (#9AA2B8, #6E7899, #F45F3A, #1F6B3A, #B3261E), so the list and
   the Kanban read as one thing. */
.bisbrickapp .app-shell .app-badge[data-s="New"] {
  background: #EEF0F5;
  color: #5B6B8C;
}
.bisbrickapp .app-shell .app-badge[data-s="Contacted"] {
  background: #E7E9EF;
  color: #4A5573;
}
.bisbrickapp .app-shell .app-badge[data-s="Qualified"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.bisbrickapp .app-shell .app-badge[data-s="Converted"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.bisbrickapp .app-shell .app-badge[data-s="Unqualified"] {
  background: #FBE9E7;
  color: #B3261E;
}

/* ---- task statuses ----
   crm_sales_task_status stores its own colours for the board (#6E7899, #F45F3A,
   #C9A227, #1F6B3A, #8A8F9E); these are the same five, as the quiet tinted
   chips the rest of the app uses. In progress takes the app's orange because it
   is the only status that says someone is on it right now. */
.bisbrickapp .app-shell .app-badge[data-s="Open"] {
  background: #EEF0F5;
  color: #5B6B8C;
}
.bisbrickapp .app-shell .app-badge[data-s="In progress"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.bisbrickapp .app-shell .app-badge[data-s="Waiting"],
.bisbrickapp .app-shell .app-badge[data-s="Waiting for input"] {
  background: #FBF3DA;
  color: #8A6D0B;
}
.bisbrickapp .app-shell .app-badge[data-s="Completed"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.bisbrickapp .app-shell .app-badge[data-s="Cancelled"] {
  background: #F1ECE4;
  color: #8A8F9E;
}

/* ---- priority ----
   A dot and a word, not a third filled chip. A task row already carries a status
   badge and can carry a red due chip; a priority badge beside those two flattens
   the row into a strip of pills with no hierarchy left. The dot still reads at a
   glance down the column, and it costs the row no width. */
.bisbrickapp .app-shell .app-prio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  color: #5F6475;
  white-space: nowrap;
}
.bisbrickapp .app-shell .app-prio::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8A8F9E;
  flex: none;
}
.bisbrickapp .app-shell .app-prio[data-p="High"] {
  color: #B3261E;
}
.bisbrickapp .app-shell .app-prio[data-p="High"]::before {
  background: #B3261E;
}
.bisbrickapp .app-shell .app-prio[data-p="Medium"]::before {
  background: #F45F3A;
}
.bisbrickapp .app-shell .app-prio[data-p="Normal"]::before {
  background: #5B6B8C;
}
.bisbrickapp .app-shell .app-prio[data-p="Low"]::before {
  background: #C3C8D6;
}

/* ---- a date that has run out ----
   An expected close or a follow-up that is behind, on a record still in play.
   It is the only date on these lists that is a chip rather than grey text, which
   is the whole point: the eye should land on it and nowhere else. Red, not
   orange - orange already means "a stage that wants attention", and a date in
   the past is past, not approaching. Narrower than a status chip, because a date
   sets its own width and a min-width would leave it floating in its column. */
.bisbrickapp .app-shell .app-badge[data-s="late"] {
  background: #FBE9E7;
  color: #B3261E;
}
.bisbrickapp .app-shell td .app-badge[data-s="late"] {
  min-width: 0;
}

/* ---- pager ----
   The brick's own pager sits under the table; on the boards it is the card's
   last row rather than a separate control. */
.bisbrickapp .app-shell .table-responsive:has(> .app-table) + bb-pager,
.bisbrickapp .app-shell .table-responsive:has(> .app-table) + * .bb-pager {
  font-size: 12px;
  color: #8A8F9E;
}
/* === end CRM list tables === */
/* === CRM marks and cards (gen-card-css.mjs) === */
/* ---- the mark carries the relationship ----
   data-t comes from crm_accounts.AccountType (and, for a contact, from the
   account the contact belongs to), so the same company is the same colour
   wherever it appears. These sit after the data-i rules in the sheet, so a mark
   that carries both lands on the meaningful colour. */
.bisbrickapp .app-shell .app-logo[data-t="suspect"] { background: #8A8F9E; }
.bisbrickapp .app-shell .app-logo[data-t="prospect"] { background: #5B6B8C; }
.bisbrickapp .app-shell .app-logo[data-t="customer"] { background: #2E7D6B; }
.bisbrickapp .app-shell .app-logo[data-t="partner"] { background: #9C5A78; }
.bisbrickapp .app-shell .app-logo[data-t="supplier"] { background: #C9A227; }
.bisbrickapp .app-shell .app-logo[data-t="employee"] { background: #292D3E; }
/* A type nobody has mapped yet still gets a mark, in the neutral stone, rather
   than inheriting whichever colour happened to be last in the cascade. */
.bisbrickapp .app-shell .app-logo[data-t=""] { background: #8A8F9E; }

/* ---- the card ----
   One card is the list row, unfolded: the same mark, the same name, the same
   sub-line, and the figures that were columns. Everything below exists to stop
   it drifting away from the row again. */
.bisbrickapp .app-shell .app-card {
  border: 1px solid #E4E0D8;
  border-radius: 8px;
  background: #FFFFFF;
}
/* Cards in a row end level with each other. The grid row is already flex, so
   each column is stretched to the tallest card in the row - but the card itself
   sat at its own content height inside that column, leaving a ragged band of
   white under the three short ones whenever a fourth name wrapped to two lines.
   Making the column a flex container hands that height down to the card. */
.bisbrickapp .app-shell .row > [class*="col-"]:has(> .app-card) {
  display: flex;
}
.bisbrickapp .app-shell .row > [class*="col-"] > .app-card {
  width: 100%;
}
/* The mark column. The brick gives it a div of its own, so the sizing has to
   reach through that: .app-logo is inline-flex and would otherwise be sized by
   whatever the htmlText around it decided. */
/* The brick hands the mark a grid column, and a 12-grid has no width that is
   36px plus a gutter. So the column is pinned here instead: the mark takes the
   room it needs and the body takes the rest, which is also what keeps the body's
   left edge in the same place on a card whose mark is a logo rather than
   initials. */
.bisbrickapp .app-shell .app-card .app-card__mark {
  flex: 0 0 52px;
  max-width: 52px;
}
.bisbrickapp .app-shell .app-card .app-card__body {
  flex: 1 1 0;
  min-width: 0;
}
.bisbrickapp .app-shell .app-card .app-card__mark .app-logo {
  width: 36px;
  height: 36px;
  font-size: 13px;
  border-radius: 6px;
}
.bisbrickapp .app-shell .app-card .app-card__mark .app-logo--person {
  border-radius: 50%;
}
.bisbrickapp .app-shell .app-card .app-card__mark p {
  margin: 0;
  line-height: 0;
}
/* ---- the card's type ----
   "Teksten in de cards te klein. Moet zelfde als in lijst." The card carried
   12px labels against the list's 13px body, and the eye reads that as a
   different, lesser thing. One size for everything that is not the name - 14px,
   a notch above the row, because a card is read at arm's length - and the name
   at 16px. */
.bisbrickapp .app-shell .app-card .app-card__body p {
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.45;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-card .app-card__body p:last-child {
  margin-bottom: 0;
}
.bisbrickapp .app-shell .app-card .app-card__body span,
.bisbrickapp .app-shell .app-card .app-card__body a {
  font-size: 14px;
}
/* a.app-card__name, not .app-card__name: the span/a rule above it is one type
   selector heavier, so the bare class lost the font-size and the name rendered
   at the body's 14px. The element being an anchor is what makes it a name you
   can click, so saying so in the selector is honest as well as sufficient. */
.bisbrickapp .app-shell .app-card a.app-card__name {
  font-family: "Poppins-600";
  font-size: 16px;
  color: #292D3E;
  text-decoration: none;
}
.bisbrickapp .app-shell .app-card a.app-card__name:hover {
  text-decoration: underline;
}
/* The figures on a card are the ones that were columns in the row, so they get
   the column's treatment: the digits in the ink colour, the label beside them
   in the grey. */
.bisbrickapp .app-shell .app-card .app-card__v {
  font-family: "Poppins-600";
  color: #292D3E;
  font-variant-numeric: tabular-nums;
}
/* The meta line - type, status, industry - separated by middots. The separator
   is grey so the three values read as three values and not as one sentence. */
.bisbrickapp .app-shell .app-card .app-card__sep {
  color: #C9CCD6;
  padding: 0 4px;
}
/* === end CRM marks and cards === */
/* === CRM home (gen-home-css.mjs) === */
/* The page head of the home carries no breadcrumb, so the band is a touch shallower
   than on a record page and the title sits on the same line as the actions. */
.bisbrickapp .app-shell:has(.Relations_menu) .app-home-pad {
  padding: 0;
}
/* ---- the four figures in one card ----
   The strip above is borderless everywhere else; the home draws them inside one
   white card divided by hairlines, the way the board does
   (artifact HtKnRMkmwY5aph5urR38LL, CRM-Home). Hence a modifier, not a change
   to .app-stat itself. */
.bisbrickapp .app-shell .app-stats {
  display: block;
  margin: 16px 0;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  background: #FFFFFF;
}
.bisbrickapp .app-shell .app-stats .row:has(> div > .app-stat) {
  margin: 0;
  row-gap: 0;
}
/* A figure takes an equal share and wraps instead of stacking; 180px is the width
   below which "Won this quarter" would break its own value. */
.bisbrickapp .app-shell .app-stats .row > div:has(> .app-stat) {
  flex: 1 1 180px;
  width: auto;
  padding: 20px 24px !important;
  border-left: 1px solid #F1ECE4;
}
.bisbrickapp .app-shell .app-stats .row > div:first-child:has(> .app-stat) {
  border-left: 0;
}
/* The borderless strip above pulls the first figure's left padding to 0, so it
   lines up with the page gutter. Inside the card that rule puts the label hard
   against the border - which is what Koos circled on every screen on 2026-10-16.
   The card has its own edge, so its first figure is inset like the rest. The
   selector repeats the :not() of the rule it has to beat, with .app-stats in
   front, because both carry !important and the borderless one wins on type
   count otherwise. */
.bisbrickapp .app-shell .app-stats .row > div:has(> .app-stat):not(div:has(> .app-stat) + div) {
  padding-left: 24px !important;
}
.bisbrickapp .app-shell .app-stats .app-stat p:nth-of-type(1) {
  font-family: "Poppins-600";
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A8F9E;
}
/* The note under a figure carries its own colour, so an overdue count reads red
   and a gain reads green without a second brick. The summary writes the hex. */
.bisbrickapp .app-shell .app-stats .app-stat p[data-c="#B3261E"] {
  color: #B3261E;
}
.bisbrickapp .app-shell .app-stats .app-stat p[data-c="#1F6B3A"] {
  color: #1F6B3A;
}

/* ---- the home's head ----
   The meta line is the date, the account count and the sentence; the separator
   between them is drawn rather than typed, so the sentence stays translatable. */
.bisbrickapp .app-shell .app-home .app-head .app-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 8px;
  border-radius: 50%;
  background: #C9CCD6;
  vertical-align: 3px;
}
/* === end CRM home === */















/* === CRM page heads (gen-crm-heads.mjs) === */
/* The title row: icon, then the name, left-aligned, on every screen. It stays
   one htmlText brick so the words are still editable in the builder. */
.bisbrickapp .app-shell .app-head .app-head__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
}
/* The pill's left half. Paper rather than a colour: orange is the app's action
   colour and spending it on a decoration here would compete with the buttons
   on the same line. */
.bisbrickapp .app-shell .app-head .app-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  min-height: 40px;
  border-radius: 5px 0 0 5px;
  background: #F4F3F0;
  color: #292D3E;
}
.bisbrickapp .app-shell .app-head .app-head__icon svg {
  width: 20px;
  height: 20px;
}
.bisbrickapp .app-shell .app-head .app-head__title .app-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The strapline sits beside the pill, as the meta line does on a record page -
   the gap is its own, because the pill's halves must not be parted. */
.bisbrickapp .app-shell .app-head .app-head__title .app-meta {
  margin: 0 0 0 14px;
}
/* ---- the record pages' breadcrumb ----
   Stylings 823/829 - the Campaign session's head block - set the crumb chip to
   font-size: 0, hide the link inside it, and print content: "Campaign" from a
   ::before. Those rules carry no app scope, so a CRM record page reads
   "CAMPAIGN / Meridian Logistics" and the way back to the list is gone. Our
   block is appended after theirs in the same sheet, so the chip gets its own
   word back here rather than by editing another session's row; :has(.Relations_menu)
   keeps the Campaign pages exactly as they are. The font-size: 0 on the chip
   stays, which is what still swallows the literal " /" after the link. */
.bisbrickapp .app-shell:has(.Relations_menu) .app-head .app-crumb::before {
  content: none;
}
.bisbrickapp .app-shell:has(.Relations_menu) .app-head .app-crumb a {
  display: inline;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #8A8F9E;
  text-decoration: none;
}
.bisbrickapp .app-shell:has(.Relations_menu) .app-head .app-crumb a:hover {
  color: #292D3E;
}
/* The meta line beside a record title is one nowrap flex row whose items do not
   shrink, so on an account with a long website the line ran out of the column
   and over the action buttons. Clipping it hides the website outright - the
   whole URL sits past the edge, not half of it - so the CRM meta wraps instead.
   A record head is allowed to be two lines; a head that silently drops a field
   is not. Measured on /relations/accounts/6: 7 items, ~718px of content, 327px of
   column. */
.bisbrickapp .app-shell:has(.Relations_menu) .app-head .app-meta {
  flex-wrap: wrap;
  row-gap: 4px;
  overflow: hidden;
}
.bisbrickapp .app-shell:has(.Relations_menu) .app-head .app-meta > * {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ... and the separator between two facts is drawn, not typed. A literal
   <span>.</span> is its own flex item, so a wrap falling after one leaves the
   dot dangling at the end of the line. Hidden here and redrawn on the item that
   follows, it wraps with the fact it belongs to. gen-record-meta.mjs put the
   class on the spans. */
.bisbrickapp .app-shell:has(.Relations_menu) .app-head .app-meta > .app-meta__sep {
  display: none;
}
.bisbrickapp .app-shell:has(.Relations_menu) .app-head .app-meta > .app-meta__sep + *::before,
.bisbrickapp .app-shell:has(.Relations_menu) .app-head .app-meta > .app-meta__parent::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: #C9CCD6;
  vertical-align: 3px;
}
/* The head brick writes margin-left/right: auto on its own <section>, which is
   harmless for a full-width child and shrink-to-fit centring for a table. The
   title row fills the section, so it starts at the gutter either way. */
.bisbrickapp .app-shell .app-head > section,
.bisbrickapp .app-shell .app-head .app-head__title {
  width: 100%;
}
/* === end CRM page heads === */







/* === CRM admin (gen-admin-css.mjs) === */
/* The brick's own .container margin plus 32px of padding inset the whole thing
   from a page gutter the shell has already applied. One gutter is enough. */
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu {
  grid-template-columns: 232px minmax(0, 1fr);
  column-gap: 40px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 0 0;
}
/* A menu of three words does not need a third of the page. 232px holds the
   longest item on one line and leaves the content column the rest. */
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid #E4E0D8;
}
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item {
  margin: 0;
  padding: 0 24px 2px 0;
  list-style: none;
}
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > span {
  display: block;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 15px;
  line-height: 20px;
  color: #5F6475;
  cursor: pointer;
}
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > span:hover {
  background: #F4F3F0;
  color: #292D3E;
}
/* The label itself is an <a class="nav-link"> inside that span, and the brick
   styles it 24px/700 in its own blue with a line-height of 20px - smaller than
   the font, which is what makes two-line items overlap. Everything above is
   set on the span and then overruled here, so the anchor has to be handed back
   to it. Koos, 2026-10-19: "Ook de Admin schermen hebben nog te grote en lope
   zijmenu-itmes. Kleur blauw select past ook niet". */
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > span > a.nav-link,
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > span > a.nav-link:hover {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  color: inherit;
  /* The brick paints the label through -webkit-text-fill-color, which overrules
     colour on the glyphs themselves - handing back colour alone leaves the label
     in the brick's blue (proved live on /relations/admin, 2026-10-19). */
  -webkit-text-fill-color: currentColor;
  text-decoration: none;
}
/* The brick marks the open item by colouring its label; the page design marks a
   selected row with the paper chip, so the two now say the same thing twice
   rather than differently. The class sits on the anchor, the chip on its span,
   hence :has - .active is the brick's older markup and matches nothing here. */
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item:has(> span > a.nav-link.open) > span {
  background: #F4F3F0;
  color: #292D3E;
}
/* The brick's own .open rule carries one class more than the base rule above,
   so its blue outlives the inherited colour and has to be named here. */
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > span > a.nav-link.open {
  font-family: "Poppins-600";
  font-weight: 600;
  color: #292D3E;
  -webkit-text-fill-color: #292D3E;
}
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu > .page-content {
  min-width: 0;
}
/* === end CRM admin === */





/* === app-shell popup type (gen-popup-css.mjs) === */
.bisbrickapp bisbrick-master-pop-up.app-shell {
  font-family: "Poppins-400";
  color: #292D3E;
}
.bisbrickapp bisbrick-master-pop-up.app-shell [style*="Default-Bold"],
.bisbrickapp bisbrick-master-pop-up.app-shell [style*="Default-Black"] {
  font-family: "Poppins-600" !important;
}
.bisbrickapp bisbrick-master-pop-up.app-shell [style*="Default-Regular"],
.bisbrickapp bisbrick-master-pop-up.app-shell [style*="Default-Light"] {
  font-family: "Poppins-400" !important;
}

/* The SurveyJS form that is the whole body of about a hundred of these popups takes its face from
   --sjs-font-family, set by the Survey theme - which is shared with every form in the tenant and
   is not ours to change from here. The variable resolves on the form root, so redefining it on
   that root inside an app-shell popup moves only these forms and leaves the rest alone.
   SurveyJS writes the variable as an INLINE style on that root (checked in the DOM, 2026-10-20),
   so a plain declaration here loses to it and only !important lands. Without this the form body
   inherited Poppins while every question title stayed on Inter, which reads worse than either
   face on its own. */
.bisbrickapp bisbrick-master-pop-up.app-shell .sd-root-modern {
  --sjs-font-family: "Poppins-400", system-ui, sans-serif !important;
}

/* The popup's own frame. bisbrick-master-pop-up writes "border: 1px solid rgb(68,153,242)" and a
   matching blue glow as an INLINE style on its .modal-styling div - checked on /relations/popup/add-new,
   2026-10-20 - so it is the component default rather than anything these routes store: none of the 133
   Relations popups carries a borderColor or shadowColor of its own. That is the same platform blue Koos
   called out on the admin menu ("Kleur blauw select past ook niet", 2026-10-19), and it framed every
   popup in the app. Inline beats a plain declaration, hence !important; the selector is scoped to
   app-shell popups, so popups in every other app keep the component default. The frame becomes the one
   the cards behind it already use. */
.bisbrickapp bisbrick-master-pop-up.app-shell .modal-styling {
  border-color: #E4E0D8 !important;
  border-radius: 5px !important;
  box-shadow: 0 6px 24px rgba(41, 45, 62, 0.12) !important;
}

/* Widgets keep their own font and colours: the same carve-out the page rules make, repeated here
   because everything above inherits. */
.bisbrickapp bisbrick-master-pop-up.app-shell bisbrick-kanban,
.bisbrickapp bisbrick-master-pop-up.app-shell bisbrick-board,
.bisbrickapp bisbrick-master-pop-up.app-shell .gantt_container,
.bisbrickapp bisbrick-master-pop-up.app-shell [class*="dhx_"],
.bisbrickapp bisbrick-master-pop-up.app-shell [class^="wx-"],
.bisbrickapp bisbrick-master-pop-up.app-shell [class*=" wx-"] {
  font-family: var(--font-content);
  color: initial;
}
/* === end app-shell popup type === */

/* === Relations frame fixes (Koos 2026-10-20) === */
.default .app-shell:has(.Relations_menu) .app-card,
.default .app-shell:has(.Relations_menu) .app-panel {
  border: 1px solid #E4E0D8;
  box-shadow: none;
}
.default .app-shell:has(.Relations_menu) .app-head .app-crumb {
  margin-bottom: 0;
  line-height: 1.2;
}
.default .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > .before {
  display: none !important;
}
/* === end Relations frame fixes === */

/* === Relations head badge colours (Koos 2026-10-20) === */
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Active"],
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Customer"],
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Won"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Prospect"],
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="On hold"],
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="On Hold"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Partner"],
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Reseller"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Suspect"] {
  background: #F1ECE4;
  color: #5F6475;
}
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Inactive"],
.default .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Blocked"] {
  background: #F1ECE4;
  color: #8A8F9E;
}
/* === end Relations head badge colours === */

.bisbrickapp .app-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  overflow: hidden;
  font-family: inherit;
  font-size: 14px;
  color: #292D3E;
}

.bisbrickapp .app-table thead,
.bisbrickapp .app-table .sd-table__cell--header,
.bisbrickapp .app-table th,
.bisbrickapp .app-table thead th {
  background: #FFFFFF;
  color: #8A8F9E;
  font-size: 11px;
  font-family: var(--font-default-bold, Default-Bold), var(--font-default-regular, Default-Regular), sans-serif;
  font-weight: 600;
  font-synthesis: style small-caps;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #E4E0D8;
  text-align: left;
}

.bisbrickapp .app-table .sd-table__cell,
.bisbrickapp .app-table td,
.bisbrickapp .app-table th {
  padding: 10px 14px;
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  border: none;
}

.bisbrickapp .app-table tbody tr:hover,
.bisbrickapp .app-table .sd-table__row:hover {
  background: #FBF9F6;
}

.bisbrickapp .app-table thead tr:first-child > th:first-child,
.bisbrickapp .app-table thead tr:first-child > .sd-table__cell:first-child {
  border-top-left-radius: 5px;
}
.bisbrickapp .app-table thead tr:first-child > th:last-child,
.bisbrickapp .app-table thead tr:first-child > .sd-table__cell:last-child {
  border-top-right-radius: 5px;
}
.bisbrickapp .app-table tbody tr:last-child > td:first-child,
.bisbrickapp .app-table tbody tr:last-child > .sd-table__cell:first-child {
  border-bottom-left-radius: 5px;
}
.bisbrickapp .app-table tbody tr:last-child > td:last-child,
.bisbrickapp .app-table tbody tr:last-child > .sd-table__cell:last-child {
  border-bottom-right-radius: 5px;
}

.bisbrickapp .app-table tbody tr.sd-table__row--selected,
.bisbrickapp .app-table .sd-table__row--selected {
  background: #FFF6F2;
  color: #292D3E;
}



@media (max-width: 757.98px) {
  .bisbrickapp .app-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* custom overrides */
.bisbrickapp .app-table tbody tr + tr > td {
  border-top: 1px solid #F1ECE4;
}
.bisbrickapp .app-table thead th {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  letter-spacing: .08em;
  font-family: "Poppins-600";
  border-bottom: 1px solid #F1ECE4;
}
/* A row is a line of its own height, not a line of text: the boards put 52px under every row and a
   hairline between them (Contacts board, artifact HtKnRMkmwY5aph5urR38LL). */
.bisbrickapp .app-table tbody td {
  height: 52px;
  font-family: "Poppins-400";
}
.bisbrickapp .app-table caption {
  padding: 0;
}
/* A linked cell is not a link in the running-text sense: on the boards a row reads as one line of ink and
   the accent is spent once per screen, on the primary button. So a cell link carries its weight instead of
   a colour, and only turns accent under the cursor. */
.bisbrickapp .app-table .table-link {
  color: #292D3E;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: "Poppins-500";
  text-decoration: none;
}
.bisbrickapp .app-table .table-link:hover {
  color: #F45F3A;
  text-decoration: underline;
}
.bisbrickapp .app-table .table-cell-btn--ghost {
  color: #5F6475;
}
.bisbrickapp .app-table .table-cell-btn--ghost:hover {
  color: #292D3E;
  background: #F1ECE4;
}
/* App align (class app-align, next to app-shell on the BisbrickMaster brick of the CRM list pages):
   the logo, the app menu, the page title, the stat strip, the tabs and the table all start on the
   page gutter (--app-gutter of App shell). The inset came from Bootstrap's column padding (12px a side)
   in the page's MultiColumns, one step per nesting level, and from the logo's own 20px in the master's
   floating menu. Only a column that starts a line loses its left padding, so the space between
   columns on one line stays. Generated by CRM-App-spec/local/align-crm-gutter.mjs. */

/* Logo: the master's navigationBar sets padding-left 20px inline on the logo link. */
.bisbrickapp .app-shell.app-align > header .nb-logo {
  padding-left: var(--app-gutter) !important;
}

/* Level 1: the columns of a page block's MultiColumn. Level 2: the columns of a MultiColumn in such a
   column, directly or as the content of a TabContent tab (List / Card / Board). */
.bisbrickapp .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.bisbrickapp .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.bisbrickapp .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div) {
  padding-left: 0;
}
/* A full-width column also ends on the gutter: the tabs and the table end where the menu ends. */
.bisbrickapp .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.bisbrickapp .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.bisbrickapp .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12 {
  padding-right: 0;
}
/* Below 768px every column is full width, so every column starts a line. */
@media (max-width: 767.98px) {
.bisbrickapp .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div,
.bisbrickapp .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div,
.bisbrickapp .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div {
    padding-left: 0;
    padding-right: 0;
  }
}

.bisbrickapp .app-shell .app-focus .app-focus__list,
.bisbrickapp .app-shell .app-focus .app-focus__checks {
  display: flex;
  flex-direction: column;
}
.bisbrickapp .app-shell .app-focus .app-focus__row,
.bisbrickapp .app-shell .app-focus .app-focus__check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #E4E0D8;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #292D3E;
}
.bisbrickapp .app-shell .app-focus .app-focus__row:last-of-type,
.bisbrickapp .app-shell .app-focus .app-focus__check:last-child {
  border-bottom: 0;
}
.bisbrickapp .app-shell .app-focus .app-focus__row[data-n="0"],
.bisbrickapp .app-shell .app-focus .app-focus__row[data-n=""] {
  display: none;
}
.bisbrickapp .app-shell .app-focus .app-focus__count {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 5px;
  background: #F6F4F0;
  font-family: "Poppins-600";
  text-align: center;
}
.bisbrickapp .app-shell .app-focus .app-focus__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bisbrickapp .app-shell .app-focus .app-focus__detail {
  margin-left: 8px;
  color: #5F6475;
  font-size: 13px;
}
.bisbrickapp .app-shell .app-focus .app-focus__go {
  flex: 0 0 auto;
  font-size: 13px;
  color: #F45F3A;
  text-decoration: none;
}
.bisbrickapp .app-shell .app-focus .app-focus__go:hover {
  text-decoration: underline;
}
.bisbrickapp .app-shell .app-focus .app-focus__go::after {
  content: " \203A";
}
.bisbrickapp .app-shell .app-focus .app-focus__empty {
  display: none;
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-focus .app-focus__list[data-total="0"] .app-focus__empty {
  display: block;
}
.bisbrickapp .app-shell .app-focus .app-focus__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.bisbrickapp .app-shell .app-focus .app-focus__score {
  flex: 0 0 auto;
  font-family: "Poppins-600";
  font-size: 14px;
  color: #292D3E;
}
.bisbrickapp .app-shell .app-focus .app-focus__bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: #F6F4F0;
  overflow: hidden;
}
.bisbrickapp .app-shell .app-focus .app-focus__bar > span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: #2E7D4F;
}
.bisbrickapp .app-shell .app-focus .app-focus__mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.5px solid #5F6475;
  border-radius: 50%;
}
/* Done checks: below the open ones, muted, without their fix link. */
.bisbrickapp .app-shell .app-focus .app-focus__check[data-ok="1"],
.bisbrickapp .app-shell .app-focus .app-focus__check[data-ok="true"] {
  order: 1;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__mark,
.bisbrickapp .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__mark {
  border-color: #2E7D4F;
  background: #2E7D4F;
}
.bisbrickapp .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__go,
.bisbrickapp .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__detail,
.bisbrickapp .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__go,
.bisbrickapp .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__detail {
  display: none;
}
/* App canvas: the chrome of the approved UI-refresh canvas (v28) for every page that carries the
   Campaign_menu Page component. Dark 52px app bar, white header band with the campaign tabs,
   grey page, white cards. Scope: theme 13, opt-in through the page's own Campaign_menu. */
.bisbrickapp .app-shell:has(.Campaign_menu) {
  background: #F4F3F0;
  font-family: "Poppins-400", Poppins, sans-serif;
  color: #292D3E;
}

/* The tenant site menu and footer are not part of the app; the account links stay, inside the bar. */
.bisbrickapp .app-shell:has(.Campaign_menu) > header > bisbrick-list,
.bisbrickapp .app-shell:has(.Campaign_menu) > header .bottom-bar,
.bisbrickapp .app-shell:has(.Campaign_menu) > footer {
  display: none !important;
}
/* The site navigation-bar is sticky: hidden, it measures top 0, "sticks" and teleports itself to
   body as position:fixed, out of reach of the rule above. The Campaign_menu bar is not sticky. */
body:has(.app-shell .Campaign_menu) > .nb-wrapper {
  display: none !important;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header {
  position: relative;
  height: 0;
  z-index: 20;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar {
  position: absolute;
  top: 0;
  right: 24px;
  height: 52px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .container {
  width: auto;
  max-width: none;
  padding: 0;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .navbar {
  padding: 0;
  background: transparent;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .nav-item.language {
  display: none;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .nav-item {
  padding: 0;
  margin: 0;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .nav-link {
  color: #D6D8E0 !important;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .nav-link span {
  font-weight: 400;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:hover {
  color: #FFFFFF !important;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .nav-link .fa-user {
  display: none;
}
/* The account name as the round avatar of the canvas (first letter; the full name is the tooltip-less link) */
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .nav-item:has(.fa-user) {
  order: 9;
  margin-left: 8px;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #F4F3F0;
  color: #292D3E;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span::first-letter {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
}

/* App bar */
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(> .Campaign_menu) {
  padding: 0;
}
.bisbrickapp .app-shell .Campaign_menu section,
.bisbrickapp .app-shell .Campaign_menu .background {
  background: #292D3E !important;
  padding: 0 !important;
  margin: 0;
}
.bisbrickapp .app-shell .Campaign_menu .background > div {
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}
.bisbrickapp .app-shell .Campaign_menu .row {
  margin: 0;
}
.bisbrickapp .app-shell .Campaign_menu .row > div {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  padding: 0 !important;
}
.bisbrickapp .app-shell .Campaign_menu .nb-wrapper,
.bisbrickapp .app-shell .Campaign_menu .navigation-bar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  min-height: 52px;
  height: 52px;
  padding: 0 !important;
}
.bisbrickapp .app-shell .Campaign_menu .navigation-bar {
  display: flex;
  align-items: center;
  gap: 6px 22px;
}
.bisbrickapp .app-shell .Campaign_menu .nb-zone-left {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
}
.bisbrickapp .app-shell .Campaign_menu .nb-zone-left::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #F4F3F0;
  margin-right: 20px;
}
.bisbrickapp .app-shell .Campaign_menu .nb-zone-center {
  display: none;
}
.bisbrickapp .app-shell .Campaign_menu .nb-zone-right {
  margin-right: 300px;
}
/* Narrow screens: the navigation-bar folds into its hamburger; keep it visible on the dark bar,
   left of the account links. */
@media (max-width: 992px) {
  .bisbrickapp .app-shell .Campaign_menu .nb-hamburger {
    color: #F4F3F0;
    margin-right: 300px;
  }
  .bisbrickapp .app-shell .Campaign_menu .nb-zone-right {
    margin-right: 0;
  }
}
.bisbrickapp .app-shell .Campaign_menu .nb-link {
  color: #D6D8E0 !important;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-size: 13px !important;
  font-weight: 400;
  padding: 6px 12px !important;
  border-radius: 5px;
  text-decoration: none;
  background: transparent;
  line-height: 1.5;
}
.bisbrickapp .app-shell .Campaign_menu .nb-link::after {
  display: none !important;
}
.bisbrickapp .app-shell .Campaign_menu .nb-link:hover {
  color: #FFFFFF !important;
}
/* Only the current page. active-parent is added by bisbrick-url but never removed on navigation,
   so it is reset to a plain link explicitly (the theme styles it as active too). */
.bisbrickapp .app-shell .Campaign_menu .nb-link.active-parent:not(.nb-active) {
  color: #D6D8E0 !important;
  background: transparent;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-weight: 400;
}
/* The page names its own menu item through app-nav-N on the master (a campaign has no nb-active). */
.bisbrickapp .app-shell.app-nav-1 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.bisbrickapp .app-shell.app-nav-2 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.bisbrickapp .app-shell.app-nav-3 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.bisbrickapp .app-shell.app-nav-4 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.bisbrickapp .app-shell.app-nav-5 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.bisbrickapp .app-shell.app-nav-6 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.bisbrickapp .app-shell.app-nav-7 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.bisbrickapp .app-shell .Campaign_menu .nb-link.nb-active {
  color: #292D3E !important;
  background: #F4F3F0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
}

/* Page body: fluid, 24px gutters (Koos 2026-10-15: lists must use the full width, no 1200px column) */
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list {
  display: block;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:not(:has(> .Campaign_menu)) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  float: none;
}

/* Header band (white, full width): campaign name, status, actions, then the section tabs */
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) {
  background: #FFFFFF;
  /* sideways only: a clip-path here would also cut off menus that open below the band */
  border-image: linear-gradient(#FFFFFF, #FFFFFF) fill 0 / 0 / 0 100vmax;
  padding-top: 12px;
  padding-bottom: 10px;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) section,
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .background {
  background: transparent !important;
  padding: 0 !important;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row {
  align-items: center;
  flex-wrap: nowrap;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.bisbrickapp .app-shell .app-head p {
  margin: 0;
}
.bisbrickapp .app-shell .app-head > bisbrick-html-with-link > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.bisbrickapp .app-shell .app-head .app-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px 0 12px;
  background: #F4F3F0;
  border-radius: 5px 0 0 5px;
  font-size: 0;
  margin-right: -14px !important;
}
.bisbrickapp .app-shell .app-head .app-crumb::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
  font-weight: 600;
}
.bisbrickapp .app-shell .app-head .app-crumb a {
  display: none;
}
.bisbrickapp .app-shell .app-head .app-title {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px 0 10px;
  background: #F4F3F0;
  border-radius: 0 5px 5px 0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 17px !important;
  line-height: 1.2;
  color: #292D3E;
}
.bisbrickapp .app-shell .app-head .app-meta {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 200px;
  font-size: 13px;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-head .app-meta > span:not(.app-badge) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bisbrickapp .app-shell .app-head .app-badge {
  display: inline-block;
  min-width: 88px;
  box-sizing: border-box;
  text-align: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  background: #F1ECE4;
  color: #5F6475;
}
.bisbrickapp .app-shell .app-head .app-badge[data-s="live"],
.bisbrickapp .app-shell .app-head .app-badge[data-s="Live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.bisbrickapp .app-shell .app-head-actions .app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.bisbrickapp .app-shell .app-head-actions .app-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
}
.bisbrickapp .app-shell .app-head-actions .app-stop .app-btn {
  color: #B3261E;
  box-shadow: inset 0 0 0 1px #E8C9C6;
  border: 0;
}

/* Section tabs: the top TabContent of the page sits in the white band, the rest is grey */
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs {
  background: #FFFFFF;
  box-shadow: 0 0 0 100vmax #FFFFFF, 0 1px 0 100vmax #E6E0D6;
  clip-path: inset(0 -100vmax -1px);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab {
  padding: 10px 14px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #F45F3A;
}
.bisbrickapp .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab::after {
  display: none;
}

/* Inner views (sub tabs) look like the card's segment row of the canvas */
.bisbrickapp .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #EFEAE1;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
  box-shadow: none;
}
.bisbrickapp .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab {
  padding: 12px 10px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.bisbrickapp .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #292D3E;
}

/* Cards: white, 5px, hairline ring, no drop shadow */
.bisbrickapp .app-shell:has(.Campaign_menu) .app-card,
.bisbrickapp .app-shell:has(.Campaign_menu) .app-panel {
  background: #FFFFFF;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #E4E0D8;
}

/* Boolean switch (SurveyJS sd-boolean) in app forms, full pages AND popups. Survey theme "Default"
   of theme 13 (SurveyThemes Id 2) sets --sjs-primary-backcolor to rgba(37,137,229,0): the thumb
   text is drawn in that colour, so the selected value vanished and the switch read as an empty
   knob next to the OTHER label. Popups render in an ngb-modal-window on body, outside .app-shell,
   hence the body:has() scope. Redefined on the boolean only: buttons and other inputs keep theirs. */
.bisbrickapp .app-shell .sd-boolean,
body:has(.bisbrickapp .app-shell) > ngb-modal-window.bisbrickapp .sd-boolean {
  --sjs-primary-backcolor: #F45F3A;
  --sjs-primary-backcolor-light: rgba(244, 95, 58, 0.1);
}

/* Sub tabs: straight blue underline (Koos 2026-10-15) */
.bisbrickapp .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.bisbrickapp .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover,
.bisbrickapp .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.bisbrickapp .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 #2A78D6 !important;
  color: #292D3E;
}

.bisbrickapp .app-shell .app-page-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  margin: 0 0 8px !important;
  padding: 0 16px 0 12px;
  background: #F4F3F0;
  border-radius: 5px;
  line-height: 1.2;
}
.bisbrickapp .app-shell .app-page-label {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
}
.bisbrickapp .app-shell .app-page-name {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 17px !important;
  font-weight: 600;
  color: #292D3E;
}
.bisbrickapp .app-shell .app-page-sub {
  font-size: 14px !important;
  line-height: 1.5;
  color: #5A6377;
}

/* Campaign App home (home.mjs). Equal-height queue/warm cards, campaign tabs as a segmented control. */
/* MultiColumn nests host > a > section > .background > div > .row; the section is centred with inline auto margins, so every level is made a full-width flex column. */
.app-home .app-home-fill, .app-home .app-home-fill > a > section, .app-home .app-home-fill > section, .app-home .app-home-fill > a > section > .background, .app-home .app-home-fill > section > .background, .app-home .app-home-fill > a > section > .background > div, .app-home .app-home-fill > section > .background > div, .app-home .app-home-fill > a > section > .background > div > .row, .app-home .app-home-fill > section > .background > div > .row, .app-home .app-home-grow, .app-home .app-home-grow > a > section, .app-home .app-home-grow > section, .app-home .app-home-grow > a > section > .background, .app-home .app-home-grow > section > .background, .app-home .app-home-grow > a > section > .background > div, .app-home .app-home-grow > section > .background > div, .app-home .app-home-grow > a > section > .background > div > .row, .app-home .app-home-grow > section > .background > div > .row { display: flex; flex-direction: column; flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; width: 100%; box-sizing: border-box; }
.app-home .app-home-duo .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { display: flex; flex-direction: column; }
.app-home .app-home-fill .row > div:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.app-home .app-home-grow .row > div:last-child { margin-top: auto; }
.app-home .app-home-card .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-cards .row { margin-left: -10px; margin-right: -10px; }
.app-home .app-home-h2 { min-height: 44px; display: flex; align-items: center; }
/* Tabs: the app-shell tab rules (app-canvas.css) are !important, so these carry more classes. */
.bisbrickapp .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs { display: inline-flex !important; gap: 4px !important; background: #FFFFFF !important; padding: 4px !important; border-radius: 5px !important; float: right !important; margin: -48px 0 16px !important; list-style: none !important; border: 0 !important; }
.app-home .app-home-segmented ul.grid-tabs + * { clear: both !important; }
.bisbrickapp .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab { border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #292D3E !important; padding: 0 16px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; font-size: 13px !important; margin: 0 !important; box-shadow: none !important; transition: none !important; }
.bisbrickapp .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab.selected-grid-tab { background: #292D3E !important; color: #FFFFFF !important; font-weight: 600 !important; }
.app-home .app-home-segmented li.grid-tab::after, .app-home .app-home-segmented li.grid-tab::before { display: none !important; }
@media (max-width: 900px) { .app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; padding: 0 0 32px !important; } }

.bisbrickapp .BisbrickMaster h1, .bisbrickapp .BisbrickMaster h2, .bisbrickapp .BisbrickMaster h3, .bisbrickapp .BisbrickMaster h4, .bisbrickapp .BisbrickMaster h5, .bisbrickapp .BisbrickMaster h6 {
  font-family: var(--font-heading);
  font-weight: normal;
}
.bisbrickapp .BisbrickMaster h1 {
  font-size: 3.5rem;
  font-family: Gilroy-bold;
  font-style: normal;
  line-height: 65px;
  letter-spacing: -0.01em;
}
.bisbrickapp .BisbrickMaster h2 {
  font-family: Gilroy;
  font-style: normal;
  font-size: 3rem;
  line-height: 56px;
}
.bisbrickapp .BisbrickMaster h4 {
  font-size: 2rem;
  font-family: Aeonik;
  line-height: 48px;
}
.bisbrickapp .BisbrickMaster h5 {
  font-size: 1.5rem;
  font-family: Aeonik;
  line-height: 36px;
}
.bisbrickapp .BisbrickMaster {
  font-family: var(--font-content);
}
.bisbrickapp .BisbrickMaster optgroup, .bisbrickapp .BisbrickMaster select, .bisbrickapp .BisbrickMaster textarea {
  font-family: var(--font-heading) !important;
}
.bisbrickapp .BisbrickMaster input {
  font-family: var(--font-content);
}
.bisbrickapp .BisbrickMaster a {
  font-family: var(--font-link);
  text-decoration: none !important;
  cursor: pointer;
  color: inherit;
}
.bisbrickapp .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.bisbrickapp .top-bar .top-bar[_ngcontent-lkq-c41] {
  height: 50px;
}
.bisbrickapp .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .bisbrickapp .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.bisbrickapp .top-bar .top-bar-inner span {
  font-size: 14px;
}
.bisbrickapp .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .bisbrickapp .top-bar .links ul {
    padding-left: 0px;
  }
}
.bisbrickapp .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.bisbrickapp .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.bisbrickapp .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.bisbrickapp .top-bar .user-info-section {
  font-size: 14px !important;
}
.bisbrickapp .top-bar .user-info-section img {
  height: 20px;
}
.bisbrickapp .top-bar .user-info-section li {
  list-style-type: none;
}
.bisbrickapp .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .bisbrickapp .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.bisbrickapp .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.bisbrickapp .middle-bar {
  background-color: var(--bg-color);
  padding: 1.6rem 0rem;
}
.bisbrickapp .middle-bar .floating-content {
  transform: translateX(-53%) !important;
}
.bisbrickapp .middle-bar .floating-content .DescriptionLink .border-right {
  max-width: 244px;
}
.bisbrickapp .middle-bar-inner {
  display: inline-flex;
  height: 38px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .bisbrickapp .middle-bar-inner {
    justify-content: space-between;
  }
}
.bisbrickapp .middle-bar .logo img {
  height: 85px;
  padding: 0.5rem 1rem;
  /* Responsive layout - when the screen is <576px wide */
}
.bisbrickapp .middle-bar .searching {
  cursor: wait;
}
.bisbrickapp .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .bisbrickapp .middle-bar .search-section {
    display: block !important;
  }
}
.bisbrickapp .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.bisbrickapp .middle-bar .search-section i {
  font-size: 1.4rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.bisbrickapp .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 250px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.bisbrickapp .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
@charset "UTF-8";
.bisbrickapp .navbar {
  padding: 0 !important;
}
.bisbrickapp .navbar .nav-item {
  padding: 0 1rem;
}
.bisbrickapp .navbar .navbar-nav .nav-link {
  color: var(--black-color);
  cursor: pointer;
  font-family: Gilroy-Bold !important;
}
.bisbrickapp .navbar .navbar-nav .nav-link:hover {
  color: var(--primary-color-1200) !important;
}
.bisbrickapp .navbar .nav-link.active,
.bisbrickapp .navbar .nav-link.active-parent,
.bisbrickapp .navbar .show > .nav-link {
  color: var(--primary-color-1200);
  border-bottom: 1px solid var(--primary-color-1200);
}
.bisbrickapp .navbar .navbar-collapse {
  justify-content: center;
}
.bisbrickapp .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.bisbrickapp .navbar .navbar-toggler i {
  color: var(#021e3f);
  font-size: 2.1rem;
}
.bisbrickapp .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.bisbrickapp .BisbrickMaster .language-container {
  position: relative;
}
.bisbrickapp .BisbrickMaster .language-container .language-select-label {
  position: absolute;
  pointer-events: none;
}
.bisbrickapp .BisbrickMaster .language-container .language-select {
  padding: 0 0 0 16px;
  border: none;
  appearance: none;
  background-color: transparent;
}
@media (max-width: 992px) {
  .bisbrickapp .BisbrickMaster bisbrick-language {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media print {
  .bisbrickapp .col-md-1, .bisbrickapp .col-md-2, .bisbrickapp .col-md-3, .bisbrickapp .col-md-4, .bisbrickapp .col-md-5, .bisbrickapp .col-md-6, .bisbrickapp .col-md-7, .bisbrickapp .col-md-8, .bisbrickapp .col-md-9, .bisbrickapp .col-md-10, .bisbrickapp .col-md-11, .bisbrickapp .col-md-12 {
    float: left;
  }
  .bisbrickapp .col-md-12 {
    width: 100%;
  }
  .bisbrickapp .col-md-11 {
    width: 91.66666667%;
  }
  .bisbrickapp .col-md-10 {
    width: 83.33333333%;
  }
  .bisbrickapp .col-md-9 {
    width: 75%;
  }
  .bisbrickapp .col-md-8 {
    width: 66.66666667%;
  }
  .bisbrickapp .col-md-7 {
    width: 58.33333333%;
  }
  .bisbrickapp .col-md-6 {
    width: 50%;
  }
  .bisbrickapp .col-md-5 {
    width: 41.66666667%;
  }
  .bisbrickapp .col-md-4 {
    width: 33.33333333%;
  }
  .bisbrickapp .col-md-3 {
    width: 25%;
  }
  .bisbrickapp .col-md-2 {
    width: 16.66666667%;
  }
  .bisbrickapp .col-md-1 {
    width: 8.33333333%;
  }
}
.bisbrickapp .master-search .sv_main {
  width: 350px;
}
.bisbrickapp .master-search .sv_main .sd-body {
  padding: 0 !important;
}
.bisbrickapp .master-search .sd-action-bar {
  overflow: visible;
  margin-top: 0;
  padding: 0 !important;
}
.bisbrickapp .master-search .sv_nav {
  padding: 0 !important;
}
.bisbrickapp .master-search #sv-nav-complete {
  margin: 0 16px;
  position: absolute;
  right: -64px;
  top: 1px;
  z-index: 1;
}
.bisbrickapp .master-search .sv_q_text_root {
  width: 200px !important;
}
.bisbrickapp .grecaptcha-badge {
  visibility: hidden;
}
.bisbrickapp .customCheckbox .custom-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.bisbrickapp .customCheckbox .custom-checkbox input[type=checkbox] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 4px;
  background-color: transparent;
  transition: all 0.2s ease;
  padding: 4px 4px;
}
.bisbrickapp .customCheckbox .custom-checkbox input[type=checkbox]:checked {
  background-color: #007bff;
  border-color: #007bff;
}
/* Relation type choice (popup /relations/popup/new-relation, class app-choice-wrap on the
   MultiColumn): two cards, "Organization" or "Individual contact". The choice exists because a
   contact under an organization and a contact in their own right are different records, and the
   old /relations/accounts page could not ask the question - there, a contact always hangs under an
   account. Generated by CRM-App-spec/local/gen-rel-choice-css.mjs. */

.default .app-choice-wrap {
  padding: 4px 4px 8px;
}
.default .app-choice-wrap .app-choice__lead {
  margin: 0 0 16px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}

.default .app-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* A popup is narrow on a phone; two cards side by side would each be too thin to read. */
@media (max-width: 560px) {
  .default .app-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.default .app-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 8px;
  background: #FFFFFF;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.default .app-choice:hover,
.default .app-choice:focus-visible {
  border-color: var(--app-accent, #F45F3A);
  background: #FDF8F6;
}

.default .app-choice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #F4F3F0;
  color: #5F6475;
}
.default .app-choice:hover .app-choice__icon,
.default .app-choice:focus-visible .app-choice__icon {
  color: var(--app-accent, #F45F3A);
}
.default .app-choice__icon svg {
  width: 18px;
  height: 18px;
}

.default .app-choice__body {
  display: block;
  min-width: 0;
}
.default .app-choice__title {
  display: block;
  font-family: "Poppins-600";
  font-size: 15px;
  line-height: 20px;
  color: #292D3E;
}
.default .app-choice__sub {
  display: block;
  margin-top: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}

/* Relations side menu: the page-menu component draws its own active bar (::before, absolute at left 28px).
   The app shell restyles this menu, so that bar lands on the link text. The active item is marked by
   weight and colour instead. */
.bisbrickapp .app-shell:has(.Relations_menu) section.page-menu a.nav-link.open::before {
  display: none !important;
}
.jostesttheme {
  --primary-1: #09902e;
  --primary-1-rgb: 9,144,46;
  --primary-1-dark: #580cb9;
  --primary-1-dark-rgb: ;
  --secondary-1: #c91818;
  --secondary-1-rgb: 201,24,24;
}
.jostesttheme .Button .button__Primary {
  background-color: var(--primary-1);
  font-family: Roboto;
  font-size: 16px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  border-radius: 12px;
}
.jostesttheme .Button .button__Primary {
  position: relative;
  overflow: hidden;
}
.jostesttheme .Button .button__Primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.jostesttheme .Button .button__Primary:hover::after {
  left: 160%;
}
.jostesttheme .Button .button__Form__Prev {
  background-color: var(--primary-1-dark);
}
.jostesttheme .Button .button__Form-Next {
  background-color: var(--secondary-1);
}
.app603-korenbloem {
  --bg-color: #FFFFFF;
  --bg-color-rgb: 255,255,255;
  --button-padding: 0.5rem 2rem;
  --button-padding-rgb: ;
  --button-radius: 0.2rem;
  --button-radius-rgb: ;
  --font-content: Default-Regular;
  --font-content-rgb: ;
  --font-heading: Gilroy-Light;
  --font-heading-rgb: ;
  --font-link: Default;
  --font-link-rgb: ;
  --font-size: 1rem;
  --font-size-rgb: ;
  --input-line-height: 2rem;
  --input-line-height-rgb: ;
  --input-radius: 0.2rem;
  --input-radius-rgb: ;
  --negative-color: #FF3131;
  --negative-color-rgb: 255,49,49;
  --neutral-color-0: #FFFFFF;
  --neutral-color-0-rgb: 255,255,255;
  --neutral-color-100: #E9E9EB;
  --neutral-color-100-rgb: 233,233,235;
  --neutral-color-1000: #000000;
  --neutral-color-1000-rgb: 0,0,0;
  --neutral-color-200: #E0E0E0;
  --neutral-color-200-rgb: 224,224,224;
  --neutral-color-400: #BCBCBB;
  --neutral-color-400-rgb: 188,188,187;
  --neutral-color-50: #FAFAF9;
  --neutral-color-50-rgb: 250,250,249;
  --neutral-color-600: #70706F;
  --neutral-color-600-rgb: 112,112,111;
  --neutral-color-800: #2C2C2C;
  --neutral-color-800-rgb: 44,44,44;
  --other--color-BBRed: #FF4B4B;
  --other--color-BBRed-rgb: 255,75,75;
  --positive-color: #32C77C;
  --positive-color-rgb: 50,199,124;
  --primary--color-Toolkit-Grey: #f6f7f9;
  --primary--color-Toolkit-Grey-rgb: 246,247,249;
  --primary-1: #ab29ff;
  --primary-1-rgb: 171,41,204;
  --primary-color-100: #F3F9FE;
  --primary-color-100-rgb: 243,249,254;
  --primary-color-1000: #9A4A1F;
  --primary-color-1000-rgb: 154,74,31;
  --primary-color-1200: #2A81DC;
  --primary-color-1200-rgb: 42,129,220;
  --primary-color-800: #6CA7ED;
  --primary-color-800-rgb: 108,167,237;
  --raftest-font-size: 20px;
  --raftest-font-size-rgb: ;
  --secondary-1: #bea050;
  --secondary-1-rgb: 190,160,80;
  --secondary-color-100: #ECF0F4;
  --secondary-color-100-rgb: 236,240,244;
  --secondary-color-1000: #08213F;
  --secondary-color-1000-rgb: 8,33,63;
  --secondary-color-200: #D3D9E1;
  --secondary-color-200-rgb: 211,217,225;
  --secondary-color-400: #9FADBD;
  --secondary-color-400-rgb: 159,173,189;
  --secondary-color-50: #F7F9FA;
  --secondary-color-50-rgb: 247,249,250;
  --secondary-color-600: #728398;
  --secondary-color-600-rgb: 114,131,152;
  --secondary-color-800: #354B66;
  --secondary-color-800-rgb: 53,75,102;
  --warning-color: #FEC84C;
  --warning-color-rgb: 254,200,76;
  --primary-color: #9A4A1F;
  --primary-color-rgb: 154,74,31;
}
.app603-korenbloem .h2, .app603-korenbloem h2, default .h2, default h2 {
  font-family: Default-Bold;
  text-transform: none;
  text-size: 10px;
  font-size: 20px;
  line-height: 20px;
}
.app603-korenbloem .h1, .app603-korenbloem h1, default .h1, default h1 {
  font-family: Default-Bold;
  text-transform: capitalize;
  font-size: 24px;
  line-height: 30px;
}
.app603-korenbloem .p, .app603-korenbloem p, default .p, default p {
  font-family: Default-Regular;
  text-transform: none;
  font-size: 16px;
}
.app603-korenbloem .h3, .app603-korenbloem h3, default .h3, default h3 {
  font-family: Default-Bold;
  text-transform: none;
  font-size: 18px;
  line-height: 20px;
}
.app603-korenbloem .h6, .app603-korenbloem h6, default .h6, default h6 {
  font-family: Default-Regular;
  text-transform: none;
  font-size: 50px;
  line-height: 2;
}
.app603-korenbloem .Button .button__Primary {
  background-color: var(--primary-color-1200);
  color: var(--primary--color-Toolkit-Grey);
  font-family: Default-Regular;
  font-size: 16px;
  border-width: 0;
  border-radius: 5px;
  padding-top: 10px;
  padding-right: 22px;
  padding-bottom: 10px;
  padding-left: 22px;
  text-transform: none;
  border-radius-top-left: 15px;
  border-radius-top-right: 0px;
  border-radius-bottom-left: 0px;
  border-radius-bottom-right: 15px;
  border-radius-select: false;
}
.app603-korenbloem .Button .button__Primary:hover {
  background-color: var(--primary-color-1200);
  color: var(--bg-color);
}
.app603-korenbloem .Button .button__Primary:active {
  background-color: var(--warning-color);
}
.app603-korenbloem .Button .button__Primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0.5em;
}
.app603-korenbloem .Button .button__Primary::before {
  content: "";
  flex: 0 0 auto;
  order: 1;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("/_static/Uploads/27_arrow-right.svg") no-repeat center/contain;
  mask: url("/_static/Uploads/27_arrow-right.svg") no-repeat center/contain;
  transition: transform 0.25s ease;
}
.app603-korenbloem .Button .button__Primary:hover::before {
  transform: translateX(3px);
}
.app603-korenbloem .Button .button__Secondary {
  background-color: var(--bg-color);
  border-color: var(--primary-color-1200);
  color: var(--primary-color-1200);
  border-width: 2px;
  border-radius: 5px;
  font-family: Default-Regular;
  font-size: 18px;
  padding-top: 12px;
  padding-right: 25px;
  padding-bottom: 12px;
  padding-left: 25px;
  text-transform: none;
}
.app603-korenbloem .Button .button__Secondary:hover {
  background-color: var(--primary-color-100);
}
.app603-korenbloem .Button .button__Form__Matrix__Add {
  background-color: var(--primary-color-1000);
  font-size: 16px;
  border-width: 0px;
  border-radius: 5px;
  font-family: Aeonik-Regular;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.app603-korenbloem .Button .button__Form__Matrix__Remove {
  background-color: var(--warning-color);
  font-family: Aeonik-Regular;
  font-size: 16px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app603-korenbloem .Button .button__Form__Next {
  background-color: var(--primary-color-1200);
  border-color: var(--bg-color);
  color: var(--bg-color);
  border-radius: 5px;
  padding-top: 12px;
  padding-right: 25px;
  padding-bottom: 12px;
  padding-left: 25px;
  font-size: 18px;
  font-family: Default-Regular;
  border-width: 0;
}
.app603-korenbloem .Button .button__Form__Next:hover {
  background-color: var(--secondary-color-600);
}
.app603-korenbloem .Button .button__Form__Prev {
  background-color: var(--neutral-color-0);
  border-color: var(--primary-color-1200);
  color: var(--primary-color-1200);
  border-radius: 5px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 25px;
  padding-left: 25px;
  font-size: 18px;
  font-family: Aeonik-Regular;
}
.app603-korenbloem .Button .button__Form__Prev:hover {
  border-color: var(--secondary-color-600);
  color: var(--secondary-color-600);
}
.app603-korenbloem .Button .button__SAIntaClaus {
  background-color: var(--negative-color);
  color: var(--neutral-color-0);
  font-family: Gilroy-bold;
  font-size: 20px;
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
  border-radius: 5px;
  border-width: 0px;
}
.app603-korenbloem .Button .button__SAIntaClaus:hover {
  background-color: var(--warning-color);
}
.app603-korenbloem .Button .button__Toolkit_Add {
  background-color: var(--primary-color-100);
  color: var(--primary-color-1000);
  font-family: Aeonik-Regular;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app603-korenbloem .Button .button__Toolkit_Add:hover {
  background-color: var(--primary-color-100);
  border-color: var(--primary-color-1000);
  padding-top: 9px;
  padding-right: 19px;
  padding-bottom: 9px;
  padding-left: 19px;
  border-width: 1px;
}
.app603-korenbloem .Button .button__Toolkit_Primary {
  background-color: var(--primary--color-Toolkit-Grey);
  color: var(--neutral-color-1000);
  font-family: Aeonik-Regular;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
  font-size: 14px;
}
.app603-korenbloem .Button .button__Toolkit_Primary:hover {
  background-color: var(--secondary-color-200);
}
.app603-korenbloem .Button .button__Toolkit_Secondary {
  background-color: var(--primary--color-Name);
  color: var(--neutral-color-1000);
  font-family: Aeonik-Regular;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app603-korenbloem .Button .button__Toolkit_Secondary:hover {
  background-color: var(--secondary-color-200);
}
.app603-korenbloem .Button .button__Toolkit_Tertiary {
  background-color: var(--neutral-color-0);
  font-family: Aeonik-Regular;
  border-width: 0px;
  border-radius: 5px;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.app603-korenbloem .Button .button__Toolkit_Tertiary:hover {
  background-color: var(--secondary-color-200);
}
.app603-korenbloem .Button .button__Toolbar {
  background-color: var(--neutral-color-0);
  border-color: var(--secondary-color-200);
  color: var(--neutral-color-1000);
  font-family: Default-Regular;
  font-size: 13px;
  border-radius: 5px;
  border-width: 1px;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}
.app603-korenbloem .Button .button__Toolbar:hover {
  background-color: var(--secondary-color-100);
}

.app603-korenbloem .hide-default-link .hide-default-link a {
  text-decoration: none;
}
.app603-korenbloem .BisbrickMaster h1, .app603-korenbloem .BisbrickMaster h2, .app603-korenbloem .BisbrickMaster h3, .app603-korenbloem .BisbrickMaster h4, .app603-korenbloem .BisbrickMaster h5, .app603-korenbloem .BisbrickMaster h6 {
  font-family: var(--font-heading);
  font-weight: normal;
}
.app603-korenbloem .BisbrickMaster h1 {
  font-size: 3.5rem;
  font-family: Gilroy-bold;
  font-style: normal;
  line-height: 65px;
  letter-spacing: -0.01em;
}
.app603-korenbloem .BisbrickMaster h2 {
  font-family: Gilroy;
  font-style: normal;
  font-size: 3rem;
  line-height: 56px;
}
.app603-korenbloem .BisbrickMaster h4 {
  font-size: 2rem;
  font-family: Aeonik;
  line-height: 48px;
}
.app603-korenbloem .BisbrickMaster h5 {
  font-size: 1.5rem;
  font-family: Aeonik;
  line-height: 36px;
}
.app603-korenbloem .BisbrickMaster {
  font-family: var(--font-content);
}
.app603-korenbloem .BisbrickMaster optgroup, .app603-korenbloem .BisbrickMaster select, .app603-korenbloem .BisbrickMaster textarea {
  font-family: var(--font-heading) !important;
}
.app603-korenbloem .BisbrickMaster input {
  font-family: var(--font-content);
}
.app603-korenbloem .BisbrickMaster a {
  font-family: var(--font-link);
  text-decoration: none !important;
  cursor: pointer;
  color: inherit;
}
.BisbrickMaster p {
  font-size: 1rem;
  font-family: Aeonik;
  line-height: 24px;
  letter-spacing: 0.01em;
}
.BisbrickMaster header {
  z-index: 100;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.app603-korenbloem .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.app603-korenbloem .top-bar .top-bar[_ngcontent-lkq-c41] {
  height: 50px;
}
.app603-korenbloem .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app603-korenbloem .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.app603-korenbloem .top-bar .top-bar-inner span {
  font-size: 14px;
}
.app603-korenbloem .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app603-korenbloem .top-bar .links ul {
    padding-left: 0px;
  }
}
.app603-korenbloem .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.app603-korenbloem .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.app603-korenbloem .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.app603-korenbloem .top-bar .user-info-section {
  font-size: 14px !important;
}
.app603-korenbloem .top-bar .user-info-section img {
  height: 20px;
}
.app603-korenbloem .top-bar .user-info-section li {
  list-style-type: none;
}
.app603-korenbloem .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app603-korenbloem .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.app603-korenbloem .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.app603-korenbloem .middle-bar {
  background-color: var(--bg-color);
  padding: 1.6rem 0rem;
}
.app603-korenbloem .middle-bar .floating-content {
  transform: translateX(-53%) !important;
}
.app603-korenbloem .middle-bar .floating-content .DescriptionLink .border-right {
  max-width: 244px;
}
.app603-korenbloem .middle-bar-inner {
  display: inline-flex;
  height: 38px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .app603-korenbloem .middle-bar-inner {
    justify-content: space-between;
  }
}
.app603-korenbloem .middle-bar .logo img {
  height: 85px;
  padding: 0.5rem 1rem;
  /* Responsive layout - when the screen is <576px wide */
}
.app603-korenbloem .middle-bar .searching {
  cursor: wait;
}
.app603-korenbloem .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .app603-korenbloem .middle-bar .search-section {
    display: block !important;
  }
}
.app603-korenbloem .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.app603-korenbloem .middle-bar .search-section i {
  font-size: 1.4rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.app603-korenbloem .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 250px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.app603-korenbloem .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
@charset "UTF-8";
.app603-korenbloem .navbar {
  padding: 0 !important;
}
.app603-korenbloem .navbar .nav-item {
  padding: 0 1rem;
}
.app603-korenbloem .navbar .navbar-nav .nav-link {
  color: var(--black-color);
  cursor: pointer;
  font-family: Gilroy-Bold !important;
}
.app603-korenbloem .navbar .navbar-nav .nav-link:hover {
  color: var(--primary-color-1200) !important;
}
.app603-korenbloem .navbar .nav-link.active,
.app603-korenbloem .navbar .nav-link.active-parent,
.app603-korenbloem .navbar .show > .nav-link {
  color: var(--primary-color-1200);
  border-bottom: 1px solid var(--primary-color-1200);
}
.app603-korenbloem .navbar .navbar-collapse {
  justify-content: center;
}
.app603-korenbloem .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.app603-korenbloem .navbar .navbar-toggler i {
  color: var(#021e3f);
  font-size: 2.1rem;
}
.app603-korenbloem .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.BisbrickMaster .hero_banner .jumbotron {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.BisbrickMaster .hero_banner .jumbotron h1 {
  color: var(--white-color);
  font-size: 2.5em;
}
.BisbrickMaster .hero_banner .jumbotron h1 span {
  font-weight: 300;
}
.BisbrickMaster .IconTextCard .card {
  border: 0px !important;
}
.BisbrickMaster .IconTextCard .card .div-as-link .card-body .card-title {
  font-size: 1.4rem !important;
  font-weight: bold !important;
  color: var(--base-color);
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .BisbrickMaster .IconTextCard .card .div-as-link .card-body .card-title {
    font-size: 1.1rem !important;
  }
}
.BisbrickMaster .BisbrickNieuwsbriefInschrijving span {
  color: white;
}
.BisbrickMaster .BisbrickNieuwsbriefInschrijving .sv_main .sv_container .sv_body .sv_p_root .sv_q {
  padding: 0;
  box-sizing: border-box;
  overflow: auto;
}
.BisbrickMaster .MultiColumn .sv_main .sv_container .sv_body .sv_p_root .sv_q {
  padding: 8px 0;
  box-sizing: border-box;
  overflow: auto;
}
.BisbrickMaster .MultiColumn .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.BisbrickMaster .form-control:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.BisbrickMaster .accordion {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-family: "Aeonik";
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
@media (min-width: 992px) {
  .BisbrickMaster .accordion {
    display: none;
  }
}
.BisbrickMaster .accordion .main-menu {
  background-color: #FFFFFF;
  padding: 0.7rem 1rem;
}
.BisbrickMaster .accordion .main-menu .main-menu-item,
.BisbrickMaster .accordion .main-menu a {
  color: #2C2C2C;
  text-transform: uppercase;
  font-size: 1rem;
}
.BisbrickMaster .accordion .main-menu .sub-menu {
  list-style-type: none;
  margin-left: -1rem;
  margin-right: -1rem;
  font-family: "Aeonik";
  font-weight: bold;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #F1F7FC;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-link {
  color: #F85600;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item {
  padding: 0.8rem 1rem 0.5rem 0rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  flex: 1;
  flex-wrap: wrap;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .menu-icon {
  width: 30px;
  margin-left: 1rem;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item {
  list-style-type: none;
  display: block;
  width: 100%;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item li a,
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item li span {
  color: #1B1B1B;
  font-size: 0.8rem;
  font-weight: 500;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-0,
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-1 {
  color: #F5F4F2;
  text-transform: uppercase;
  font-size: 0.9rem;
  list-style-type: none;
  padding: 0.7rem 0 0.7rem 2.5rem;
  margin: 0 0 0 -2rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-0 {
  background-color: #00C2F2;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-1 {
  background-color: #1B1B1B;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub {
  list-style-type: none;
  background-color: #F1F7FC;
  color: #F85600;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-left: -3rem;
  margin-bottom: -0.8rem;
  margin-top: 0.7rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-icon {
  width: 30px;
  margin-left: 1rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub li {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  flex: 1;
  flex-wrap: wrap;
  padding: 0.8rem 1rem 0.5rem 1rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub {
  list-style-type: none;
  display: block;
  width: 100%;
  margin-left: -1.5rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub li a,
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub li span {
  color: #1B1B1B;
  font-size: 0.8rem;
  font-weight: 500;
}
.BisbrickMaster .Button .button__Bisbrick__primary-default {
  height: 56px;
  background: linear-gradient(225deg, #3C98F2 0%, #3570F4 100%);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: var(--neutral-color-0) !important;
  padding: 16px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular;
  cursor: pointer;
}
.BisbrickMaster .Button .button__Bisbrick__primary-default:hover {
  box-shadow: none;
  background: #3C98F2;
}
.BisbrickMaster .Button .button__Bisbrick__primary-accent {
  height: 56px;
  background: linear-gradient(225deg, #FF4B4B 0%, #FF6532 100%);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: var(--neutral-color-0) !important;
  padding: 16px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular;
}
.BisbrickMaster .Button .button__Bisbrick__primary-accent:hover {
  box-shadow: none;
  background: #FF6532;
}
.BisbrickMaster .Button .button__Bisbrick__secondary-default {
  height: 56px;
  border: 2px solid #3C98F2;
  box-sizing: border-box;
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.15));
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular !important;
  color: #3C98F2;
}
.BisbrickMaster .Button .button__Bisbrick__secondary-default:hover {
  box-shadow: none;
  background: #3C98F2;
  color: var(--neutral-color-0);
}
.BisbrickMaster .Button .button__Bisbrick__diap-default {
  height: 56px;
  color: #FFFFFF !important;
  background-color: transparent;
  border: 2px solid white;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular !important;
  transition: all 0.2s ease-in-out;
}
.BisbrickMaster .Button .button__Bisbrick__diap-default:hover {
  border: 2px solid #3C98F2;
  color: #3C98F2 !important;
}
@charset "UTF-8";
.EuroloopMaster header {
  z-index: 100;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.EuroloopMaster .navbar {
  padding: 0 !important;
}
.EuroloopMaster .navbar .nav-item {
  padding: 0 1rem;
}
.EuroloopMaster .navbar .navbar-nav .nav-link {
  color: var(--black-color) !important;
  cursor: pointer;
  font-family: var(--font-link) !important;
}
.EuroloopMaster .navbar .navbar-nav .nav-link:hover {
  color: #6CA7ED !important;
}
.EuroloopMaster .navbar .nav-link.active,
.EuroloopMaster .navbar .nav-link.active-parent,
.EuroloopMaster .navbar .show > .nav-link {
  font-weight: bold;
  border-bottom: 1px solid var(--base-color);
}
.EuroloopMaster .navbar .navbar-collapse {
  justify-content: center;
}
.EuroloopMaster .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.EuroloopMaster .navbar .navbar-toggler i {
  color: var(--black-color);
  font-size: 2rem;
}
.EuroloopMaster .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.EuroloopMaster .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.EuroloopMaster .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.EuroloopMaster .top-bar .top-bar-inner span {
  font-size: 14px;
}
.EuroloopMaster .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .links ul {
    padding-left: 0px;
  }
}
.EuroloopMaster .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.EuroloopMaster .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.EuroloopMaster .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.EuroloopMaster .top-bar .user-info-section {
  font-size: 14px !important;
}
.EuroloopMaster .top-bar .user-info-section img {
  height: 20px;
}
.EuroloopMaster .top-bar .user-info-section li {
  list-style-type: none;
}
.EuroloopMaster .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.EuroloopMaster .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.EuroloopMaster .middle-bar {
  background-color: var(--bg-color);
  padding: 1.5rem 0rem;
}
.EuroloopMaster .middle-bar-inner {
  display: inline-flex;
  height: 35px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .EuroloopMaster .middle-bar-inner {
    justify-content: space-between;
  }
}
.EuroloopMaster .middle-bar .logo img {
  height: 35px;
  /* Responsive layout - when the screen is <576px wide */
}
.EuroloopMaster .middle-bar .searching {
  cursor: wait;
}
.EuroloopMaster .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .EuroloopMaster .middle-bar .search-section {
    display: block !important;
  }
}
.EuroloopMaster .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.EuroloopMaster .middle-bar .search-section i {
  font-size: 1.3rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.EuroloopMaster .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 200px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.EuroloopMaster .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
.app603-korenbloem .BisbrickMaster .language-container {
  position: relative;
}
.app603-korenbloem .BisbrickMaster .language-container .language-select-label {
  position: absolute;
  pointer-events: none;
}
.app603-korenbloem .BisbrickMaster .language-container .language-select {
  padding: 0 0 0 16px;
  border: none;
  appearance: none;
  background-color: transparent;
}
@media (max-width: 992px) {
  .app603-korenbloem .BisbrickMaster bisbrick-language {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media print {
  .app603-korenbloem .col-md-1, .app603-korenbloem .col-md-2, .app603-korenbloem .col-md-3, .app603-korenbloem .col-md-4, .app603-korenbloem .col-md-5, .app603-korenbloem .col-md-6, .app603-korenbloem .col-md-7, .app603-korenbloem .col-md-8, .app603-korenbloem .col-md-9, .app603-korenbloem .col-md-10, .app603-korenbloem .col-md-11, .app603-korenbloem .col-md-12 {
    float: left;
  }
  .app603-korenbloem .col-md-12 {
    width: 100%;
  }
  .app603-korenbloem .col-md-11 {
    width: 91.66666667%;
  }
  .app603-korenbloem .col-md-10 {
    width: 83.33333333%;
  }
  .app603-korenbloem .col-md-9 {
    width: 75%;
  }
  .app603-korenbloem .col-md-8 {
    width: 66.66666667%;
  }
  .app603-korenbloem .col-md-7 {
    width: 58.33333333%;
  }
  .app603-korenbloem .col-md-6 {
    width: 50%;
  }
  .app603-korenbloem .col-md-5 {
    width: 41.66666667%;
  }
  .app603-korenbloem .col-md-4 {
    width: 33.33333333%;
  }
  .app603-korenbloem .col-md-3 {
    width: 25%;
  }
  .app603-korenbloem .col-md-2 {
    width: 16.66666667%;
  }
  .app603-korenbloem .col-md-1 {
    width: 8.33333333%;
  }
}
.app603-korenbloem .master-search .sv_main {
  width: 350px;
}
.app603-korenbloem .master-search .sv_main .sd-body {
  padding: 0 !important;
}
.app603-korenbloem .master-search .sd-action-bar {
  overflow: visible;
  margin-top: 0;
  padding: 0 !important;
}
.app603-korenbloem .master-search .sv_nav {
  padding: 0 !important;
}
.app603-korenbloem .master-search #sv-nav-complete {
  margin: 0 16px;
  position: absolute;
  right: -64px;
  top: 1px;
  z-index: 1;
}
.app603-korenbloem .master-search .sv_q_text_root {
  width: 200px !important;
}
@media (max-width: 757.98px) {
  .app603-korenbloem .ParagraphText-Image-Left .row {
    flow-direction: column-reverse;
  }
}
.app603-korenbloem .BisbrickMaster .grayscaleOnHover img {
  -webkit-filter: grayscale(0);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
  transition: filter 0.3s ease;
  /* Optional: for a smooth transition effect */
  z-index: 0 !important;
}
.app603-korenbloem .BisbrickMaster .grayscaleOnHover img:hover {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.app603-korenbloem .BisbrickMaster .imageBlurOnHover img {
  z-index: 0 !important;
}
.app603-korenbloem .BisbrickMaster .imageBlurOnHover img:hover {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}
.app603-korenbloem .blurImageDuringRendering {
  /* Initial blur effect on the image */
  /* Define the keyframes for the unblur animation */
}
.app603-korenbloem .blurImageDuringRendering img {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
  animation: unblur 2s ease-out forwards;
  /* Apply the animation */
}
@keyframes unblur {
  0% {
    -webkit-filter: blur(5px);
    /* Safari 6.0 - 9.0 */
    filter: blur(5px);
  }
  100% {
    -webkit-filter: blur(0px);
    /* Safari 6.0 - 9.0 */
    filter: blur(0px);
  }
}
.app603-korenbloem .BisbrickMaster .shakeOnHover {
  /* Define the shake animation */
}
.app603-korenbloem .BisbrickMaster .shakeOnHover img {
  z-index: 0 !important;
}
.app603-korenbloem .BisbrickMaster .shakeOnHover img:hover {
  animation: shake 0.5s;
  /* Animation name and duration */
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(10px);
  }
  30% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(-10px);
  }
  60% {
    transform: translateX(10px);
  }
  70% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  90% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
.app603-korenbloem .BisbrickMaster .AspectRatio .columnRight, .app603-korenbloem .BisbrickMaster .AspectRatio .columntLeft {
  width: 100%;
  aspect-ratio: 16/17;
  background-color: #e0e0e0;
}
.app603-korenbloem .hide-default-link .hide-default-link a {
  text-decoration: none;
}
.app603-korenbloem .grecaptcha-badge {
  visibility: hidden;
}
.app603-korenbloem .customCheckbox .custom-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.app603-korenbloem .customCheckbox .custom-checkbox input[type=checkbox] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 4px;
  background-color: transparent;
  transition: all 0.2s ease;
  padding: 4px 4px;
}
.app603-korenbloem .customCheckbox .custom-checkbox input[type=checkbox]:checked {
  background-color: #007bff;
  border-color: #007bff;
}
.app603-korenbloem .right-container-column {
  display: flex;
  justify-content: right;
}

.app603-korenbloem .app-shell {
  --app-gutter: clamp(16px, 3vw, 40px);
  --app-accent: #F45F3A;
  background: #F4F3F0;
}

/* Type (boards, 2026-10-14): Poppins on the app pages. It is set on the page body rather than on each
   rule, so bricks that carry no class get it too; the title bricks set Default-Bold inline, which only
   an !important can beat. The website pages on theme 13 never match .app-shell and keep Aeonik/Gilroy. */
.app603-korenbloem .app-shell > main {
  font-family: "Poppins-400";
  color: #292D3E;
}
.app603-korenbloem .app-shell > main [style*="Default-Bold"],
.app603-korenbloem .app-shell > main [style*="Default-Black"] {
  font-family: "Poppins-600" !important;
}
.app603-korenbloem .app-shell > main [style*="Default-Regular"],
.app603-korenbloem .app-shell > main [style*="Default-Light"] {
  font-family: "Poppins-400" !important;
}

/* Widgets keep their own font and colours: Koos 2026-10-14, "Behoud de gantt en/of Kanbans (die zijn
   visueel al prima)". Everything above inherits, so the reset has to be explicit. */
.app603-korenbloem .app-shell bisbrick-kanban,
.app603-korenbloem .app-shell bisbrick-board,
.app603-korenbloem .app-shell .gantt_container,
.app603-korenbloem .app-shell [class*="dhx_"],
.app603-korenbloem .app-shell [class^="wx-"],
.app603-korenbloem .app-shell [class*=" wx-"] {
  font-family: var(--font-content);
  color: initial;
}

/* Room between the last brick and the footer: the same on every app page, and only from here -
   pages carry no trailing Line Spacer of their own (table-spacing.mjs trimPageEnd). */
.app603-korenbloem .app-shell > main {
  padding-bottom: 100px;
}

/* Page gutter: everything below the app menu. A margin, because a brick's own padding is set
   inline on this same wrapper. */
.app603-korenbloem .app-shell > main > bisbrick-list > div:not(:first-child) {
  width: auto;
  margin-left: var(--app-gutter);
  margin-right: var(--app-gutter);
}
/* width: auto above - the wrapper is a .col-md-12 (width: 100%), and 100% plus the two margins ran the
   page 2 x gutter past the right edge, with a horizontal scrollbar. */

/* Action buttons: compact, like the toolbar buttons of the planning and kanban bricks, instead of the
   theme's large website buttons; 5px corners as elsewhere in Bisbrick (Koos 2026-10-08). The geometry is
   his, the colours are the boards' (2026-10-14): one filled accent, everything else an outline. The
   transparent border keeps a primary as tall as a secondary beside it. */
.app603-korenbloem .app-shell .Button .button {
  height: auto;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
}
.app603-korenbloem .app-shell .Button .button__Primary,
.app603-korenbloem .app-shell .Button .button__Primary:focus {
  background-color: #F45F3A;
  border-color: #F45F3A;
  color: #FFFFFF;
  font-family: "Poppins-600";
}
.app603-korenbloem .app-shell .Button .button__Primary:hover {
  background-color: #D94A27;
  border-color: #D94A27;
  color: #FFFFFF;
}
.app603-korenbloem .app-shell .Button .button__Secondary {
  background-color: #FFFFFF;
  border: 1px solid #DCD6CB;
  color: #292D3E;
}
.app603-korenbloem .app-shell .Button .button__Secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}
/* Text buttons (card actions such as "Edit all", "View all notes", "Delete account" on the CRM record pages):
   an outline in the accent, so they stay quieter than the one filled primary per header (Koos 2026-10-08).
   The theme's own button__Text is filled in a blue of its own (#537CFA), which is why it is overruled here. */
.app603-korenbloem .app-shell .Button .button__Text,
.app603-korenbloem .app-shell .Button .button__Text:focus {
  background-color: #FFFFFF;
  border: 1px solid #F45F3A;
  box-shadow: none;
  color: #F45F3A;
}
.app603-korenbloem .app-shell .Button .button__Text:hover {
  background-color: #FDEDE8;
  border-color: #F45F3A;
  color: #F45F3A;
}

/* Buttons made of links in an htmlText (a record header, gen.mjs popupLink / popupMenu): the same look as
   the Button brick above. */
.app603-korenbloem .app-shell .app-btn,
.app603-korenbloem .app-shell a.app-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.app603-korenbloem .app-shell .app-btn--primary,
.app603-korenbloem .app-shell .app-btn--primary:hover {
  background-color: #F45F3A;
  color: #FFFFFF;
}
.app603-korenbloem .app-shell .app-btn--primary:hover {
  filter: brightness(0.94);
}
.app603-korenbloem .app-shell .app-btn--secondary,
.app603-korenbloem .app-shell a.app-btn--secondary:hover {
  background-color: #FFFFFF;
  border-color: #DCD6CB;
  color: #292D3E;
}
.app603-korenbloem .app-shell a.app-btn--secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}

/* Record header (Koos 2026-10-08): breadcrumb, name and meta line on the left, the actions on the right of
   the same row; on a narrow screen the actions wrap under the name. */
.app603-korenbloem .app-shell .row:has(> div > .app-head) {
  align-items: flex-end;
  row-gap: 12px;
  margin: 20px 0 8px;
}
/* The header brick does not clip, and lies over the bricks after it only while its + Contacts list is open, so the
   list opens on top of the tabs. Not always: a raised header would also cover popups of the bricks below it,
   such as the Kanban card editor, which lives inside the board's own stacking layer. */
.app603-korenbloem .app-shell bisbrick-multi-column:has(.app-head .app-menu:hover),
.app603-korenbloem .app-shell bisbrick-multi-column:has(.app-head .app-menu:focus-within) {
  z-index: 30;
}
.app603-korenbloem .app-shell bisbrick-multi-column:has(.app-head) .background {
  overflow: visible;
}
.app603-korenbloem .app-shell .row > div:has(> .app-head) {
  flex: 1 1 320px;
  width: auto;
  min-width: 0;
  padding: 0 !important;
}
.app603-korenbloem .app-shell .row > div:has(> .app-head-actions) {
  flex: 0 0 auto;
  width: auto;
  padding: 0 !important;
}
.app603-korenbloem .app-shell .app-head p {
  margin: 0;
  text-align: left;
}
.app603-korenbloem .app-shell .app-head .app-crumb {
  margin-bottom: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-head .app-crumb a {
  color: #5F6475;
  text-decoration: none;
}
.app603-korenbloem .app-shell .app-head .app-crumb a:hover {
  color: #292D3E;
  text-decoration: underline;
}
.app603-korenbloem .app-shell .app-head .app-title {
  font-family: "Poppins-600";
  font-size: 28px;
  line-height: 34px;
  color: #292D3E;
}
.app603-korenbloem .app-shell .app-head .app-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}
/* A status as a label, coloured by its code (data-s). */
.app603-korenbloem .app-shell .app-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  background: #F1ECE4;
  color: #5F6475;
  font-family: "Poppins-500";
  font-size: 12px;
  line-height: 18px;
}
/* In a list the chips sit under one another, so the boards give them one width and centre the word
   (Contacts and Campaigns boards, artifact HtKnRMkmwY5aph5urR38LL). On a record page's header the chip
   is on its own beside the title, and keeps its natural width. */
.app603-korenbloem .app-shell td .app-badge {
  min-width: 88px;
  text-align: center;
}
.app603-korenbloem .app-shell .app-badge[data-s="live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app603-korenbloem .app-shell .app-badge[data-s="paused"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app603-korenbloem .app-shell .app-badge[data-s="done"] {
  color: #5F6475;
}
/* Live, but one or more parts switched off (Campaign App Campaigns StatusCode, Koos 2026-10-08):
   the Live green, lighter, with a ring so it reads as "not all of it". */
.app603-korenbloem .app-shell .app-badge[data-s="partial"] {
  background: #E3F2E8;
  color: #1F6B3A;
  box-shadow: inset 0 0 0 1px #1F6B3A;
}
/* "Stop campaign now" only while the campaign itself is Live (data-s = its stored status code). */
.app603-korenbloem .app-shell .app-stop {
  display: none;
}
.app603-korenbloem .app-shell .app-stop[data-s="live"] {
  display: contents;
}
.app603-korenbloem .app-shell .app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A button with a list of links under it, without code: open on hover, when the button has focus (a tap or
   a click), and while the keyboard is in it. A mouse click on a link gives no :focus-visible, so the list
   closes once the popup it opened covers it. */
.app603-korenbloem .app-shell .app-menu {
  position: relative;
  display: inline-block;
}
.app603-korenbloem .app-shell .app-menu__btn::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0 1px 3px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.app603-korenbloem .app-shell .app-menu__list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
/* Bridges the 4px gap, so the list does not close on the way to it. */
.app603-korenbloem .app-shell .app-menu__list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}
.app603-korenbloem .app-shell .app-menu:hover .app-menu__list,
.app603-korenbloem .app-shell .app-menu__btn:focus + .app-menu__list,
.app603-korenbloem .app-shell .app-menu:has(:focus-visible) .app-menu__list {
  display: block;
}
.app603-korenbloem .app-shell .app-menu__list a,
.app603-korenbloem .app-shell .app-menu__list a:hover {
  display: block;
  padding: 7px 10px;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #292D3E;
  text-decoration: none;
  white-space: nowrap;
}
.app603-korenbloem .app-shell .app-menu__list a:hover,
.app603-korenbloem .app-shell .app-menu__list a:focus-visible {
  background: #F4F3F0;
}
/* ⋯: a menu without a caret (CRM record headers, crm-record-pages.mjs). */
.app603-korenbloem .app-shell .app-menu__btn--more::after {
  content: none;
}
.app603-korenbloem .app-shell .app-menu__btn--more {
  min-width: 32px;
  justify-content: center;
  letter-spacing: 1px;
}

/* CRM record pages (Account, Contact; CRM-App-spec/local/crm-record-pages.mjs, Koos 2026-10-08).
   The badge carries the stored value as its code: account type and status, contact status. */
.app603-korenbloem .app-shell .app-badge[data-s="Active"],
.app603-korenbloem .app-shell .app-badge[data-s="Customer"],
.app603-korenbloem .app-shell .app-badge[data-s="Won"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app603-korenbloem .app-shell .app-badge[data-s="Prospect"],
.app603-korenbloem .app-shell .app-badge[data-s="On hold"],
.app603-korenbloem .app-shell .app-badge[data-s="On Hold"],
.app603-korenbloem .app-shell .app-badge[data-s="Suspended"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app603-korenbloem .app-shell .app-badge[data-s="Partner"],
.app603-korenbloem .app-shell .app-badge[data-s="Reseller"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.app603-korenbloem .app-shell .app-badge[data-s="Inactive"],
.app603-korenbloem .app-shell .app-badge[data-s="Archived"],
.app603-korenbloem .app-shell .app-badge[data-s="Closed"],
.app603-korenbloem .app-shell .app-badge[data-s="Left Company"],
.app603-korenbloem .app-shell .app-badge[data-s="Do Not Contact"],
.app603-korenbloem .app-shell .app-badge[data-s="Competitor"],
.app603-korenbloem .app-shell .app-badge[data-s="Lost"] {
  color: #5F6475;
}
/* The CRM home board's urgency chips (CRM-App-spec/local/gen-crm-home-dataactions.mjs).
   These codes are a state the DataAction works out per row, not a stored value, so they are
   lowercase and cannot collide with the status names above. */
.app603-korenbloem .app-shell .app-badge[data-s="late"] {
  background: #FBE9E7;
  color: #B3261E;
}
.app603-korenbloem .app-shell .app-badge[data-s="soon"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app603-korenbloem .app-shell .app-badge[data-s="later"] {
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-badge[data-s=""] {
  display: none;
}
/* "Child of …" only when there is a parent. */
.app603-korenbloem .app-shell .app-head .app-meta .app-meta__parent[data-v=""] {
  display: none;
}
/* The row-detail panel (Table.rowDetail, Web !2839). The boards put it on a quiet sand ground, indented so
   it starts under the first cell instead of under the chevron, with a hairline between it and the row.
   The component's own --neutral / --blue options are greys from the website palette, so the brick stays on
   "none" and the theme gives the panel its colour.
   !important is load-bearing: the component's own "td.bb-row-detail { padding: 16px }" carries Angular's
   encapsulation attribute and so ties on specificity — order would decide it, and the theme stylesheet is
   not guaranteed to load last. */
.app603-korenbloem .app-shell td.bb-row-detail {
  background: #F8F7F4 !important;
  padding: 16px 18px 16px 48px !important;
  border-top: 1px solid #F1ECE4 !important;
}
/* The chevron: the component asks the theme for --secondary-color-700 and --primary-color-1000, which on
   theme 13 are the website's grey and blue. Overruled here so the handle stays in the app's own palette. */
.app603-korenbloem .app-shell .bb-row-detail__toggle {
  color: #8A8F9E;
}
.app603-korenbloem .app-shell .bb-row-detail__toggle:hover {
  background: #FDEDE8;
  color: #F45F3A;
}
.app603-korenbloem .app-shell .bb-row-detail__toggle:focus-visible {
  outline: 2px solid #F45F3A;
}
/* A bar of actions at the foot of the panel, above it the lighter of the two rules (boards). */
.app603-korenbloem .app-shell .app-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ECE8E0;
}

/* Overview: the main column and the aside are stacks of cards (a MultiColumn host is inline by default). */
.app603-korenbloem .app-shell .app-card {
  display: block;
  margin-bottom: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  background: #FFFFFF;
  padding: 16px 18px 18px !important;
}
/* A 16px gutter between the main column and the aside, as between the cards; stacked below md there is none. */
@media (min-width: 768px) {
  .app603-korenbloem .app-shell .app-overview .row > [class*="col-"] > .app-stack {
    display: block;
    padding-right: 8px;
  }
  .app603-korenbloem .app-shell .app-overview .row > [class*="col-"] + [class*="col-"] > .app-stack {
    padding-right: 0;
    padding-left: 8px;
  }
}
/* An equal-height pair (the layout frame: two columns only as equal-height pairs). The lead column's
   capped list sets the height and the side column's card runs down to meet it, instead of leaving a
   step of empty ground. Every wrapper between the column and the card has to carry the height, hence
   the chain: MultiColumn renders host > .row > [col] around each level. Opt-in, because a stack that
   holds several cards must keep its natural height. */
@media (min-width: 768px) {
  .app603-korenbloem .app-shell .app-overview--duo > .row > [class*="col-"] > .app-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .app603-korenbloem .app-shell .app-overview--duo .app-stack > .row,
  .app603-korenbloem .app-shell .app-overview--duo .app-stack > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .app603-korenbloem .app-shell .app-overview--duo .app-stack .app-card {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
}
.app603-korenbloem .app-shell .app-card p {
  margin: 0;
}
.app603-korenbloem .app-shell .app-card .app-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-family: "Poppins-600";
  font-size: 16px;
  line-height: 22px;
  color: #292D3E;
}
.app603-korenbloem .app-shell .app-card .app-card__title a,
.app603-korenbloem .app-shell .app-card .app-card__more a {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #F45F3A;
  text-decoration: none;
}
.app603-korenbloem .app-shell .app-card .app-card__title a:hover,
.app603-korenbloem .app-shell .app-card .app-card__more a:hover {
  text-decoration: underline;
}
.app603-korenbloem .app-shell .app-card .app-card__more {
  margin-top: 10px;
}
.app603-korenbloem .app-shell .app-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.app603-korenbloem .app-shell .app-card__empty {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-person {
  margin: 0;
  font-family: "Poppins-600";
  font-size: 14px;
  line-height: 20px;
}
.app603-korenbloem .app-shell .app-person a {
  color: #292D3E;
  text-decoration: none;
}
.app603-korenbloem .app-shell .app-person a:hover {
  color: #F45F3A;
}
.app603-korenbloem .app-shell .app-person__line {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-person__line:empty {
  display: none;
}

/* The app menu's words start on the same line as the titles, tabs and table text. */
.app603-korenbloem .app-shell > main > bisbrick-list > div:first-child .navigation-bar {
  padding-left: var(--app-gutter);
  padding-right: var(--app-gutter);
}
.app603-korenbloem .app-shell > main > bisbrick-list > div:first-child .nb-zone-left {
  justify-content: flex-start;
}
/* The menu item the page belongs to (class app-nav-<n> on the master, gen.mjs navClass) in the primary
   colour, like a selected tab; the navigationBar's own highlight (an exact link match) gets the same colour
   instead of its default cyan. */
.app603-korenbloem .app-shell.app-nav-1 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.app603-korenbloem .app-shell.app-nav-2 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.app603-korenbloem .app-shell.app-nav-3 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.app603-korenbloem .app-shell.app-nav-4 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.app603-korenbloem .app-shell.app-nav-5 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.app603-korenbloem .app-shell.app-nav-6 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.app603-korenbloem .app-shell.app-nav-7 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.app603-korenbloem .app-shell.app-nav-8 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(8) > .nb-link,
.app603-korenbloem .app-shell.app-nav-9 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(9) > .nb-link,
.app603-korenbloem .app-shell > main > bisbrick-list > div:first-child .nb-link.nb-active {
  color: #F45F3A;
}

/* Tabs: an underline row. */
.app603-korenbloem .app-shell .grid-tabs {
  gap: 4px;
  margin: 12px 0 20px;
  padding: 0;
  border-bottom: 1px solid #E4E0D8;
  flex-wrap: wrap;
}
.app603-korenbloem .app-shell .grid-tabs .grid-tab,
.app603-korenbloem .app-shell .grid-tabs .grid-tab:hover {
  max-width: none;
  margin-bottom: -1px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  color: #5F6475;
  font-size: 14px !important;
}
.app603-korenbloem .app-shell .grid-tabs .grid-tab:hover {
  color: #292D3E;
  border-bottom-color: #CFC7B9;
}
.app603-korenbloem .app-shell .grid-tabs .selected-grid-tab,
.app603-korenbloem .app-shell .grid-tabs .selected-grid-tab:hover {
  color: #F45F3A;
  border-bottom-color: #F45F3A;
}

/* Tabs inside a tab: a segmented control, so the two levels read apart. */
.app603-korenbloem .app-shell .tab-content .grid-tabs {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 16px;
  padding: 3px;
  background: #F4F3F0;
  border: 0;
  border-radius: 5px;
}
.app603-korenbloem .app-shell .tab-content .grid-tabs .grid-tab,
.app603-korenbloem .app-shell .tab-content .grid-tabs .grid-tab:hover {
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 5px !important;
  font-size: 13px !important;
}
.app603-korenbloem .app-shell .tab-content .grid-tabs .grid-tab:hover {
  background: rgba(255, 255, 255, 0.6);
}
.app603-korenbloem .app-shell .tab-content .grid-tabs .selected-grid-tab,
.app603-korenbloem .app-shell .tab-content .grid-tabs .selected-grid-tab:hover {
  background: #FFFFFF;
  color: #292D3E;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Stat strip (Koos 2026-10-08): figures, not buttons. No border or fill; a small muted label over
   a large value, hairlines between the figures. One htmlText brick per figure with class app-stat:
   <p>label</p><p data-v="{{x}}">value</p>[<p>note</p>]. The selectors go by the brick's place, not by
   a parent class, so a figure also works in a row that holds other bricks (the CRM dashboard). */
.app603-korenbloem .app-shell .row:has(> div > .app-stat) {
  margin: 4px 0 20px;
  row-gap: 12px;
}
.app603-korenbloem .app-shell .row > div:has(> .app-stat) {
  padding: 0 24px !important;
  /* col-md-auto only applies from 768px; below that Bootstrap makes every column 100% and the strip
     turned into a stack. A figure keeps its own width, the strip wraps instead. */
  flex: 0 0 auto;
  width: auto;
}
/* The first figure of a run lines up with what is above it (a heading or filter may come before it). */
.app603-korenbloem .app-shell .row > div:has(> .app-stat):not(div:has(> .app-stat) + div) {
  padding-left: 0 !important;
}
.app603-korenbloem .app-shell .row > div:has(> .app-stat) + div:has(> .app-stat) {
  border-left: 1px solid #E4E0D8;
}
.app603-korenbloem .app-shell .app-stat {
  display: block;
}
.app603-korenbloem .app-shell .app-stat p {
  margin: 0;
  text-align: left;
}
.app603-korenbloem .app-shell .app-stat p:nth-of-type(1) {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-stat p:nth-of-type(2) {
  margin-top: 2px;
  font-family: "Poppins-600";
  font-size: 24px;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.app603-korenbloem .app-shell .app-stat p:nth-of-type(3) {
  margin-top: 2px;
  font-family: "Poppins-400";
  font-size: 12px;
  line-height: 16px;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-stat p:nth-of-type(3) img {
  height: 12px;
  width: auto;
  vertical-align: -1px;
}
/* A 0 or an empty value reads as "nothing yet", not as a figure. Keeps the :nth-of-type so it outweighs the value colour. */
.app603-korenbloem .app-shell .app-stat p[data-v="0"]:nth-of-type(2),
.app603-korenbloem .app-shell .app-stat p[data-v=""]:nth-of-type(2) {
  color: #8A8F9E;
}
/* Text values (e-mail, phone, stage, channel) are not figures: smaller, and allowed to wrap. */
.app603-korenbloem .app-shell .app-stat.app-stat--text p:nth-of-type(2) {
  font-size: 15px;
  line-height: 22px;
  margin-top: 4px;
  white-space: normal;
  word-break: break-word;
}
/* The EmailStats brick (Web component, the Campaign dashboard's Mail tab) brings its own bordered tiles;
   inside the apps they get the same strip. A value that says "nothing yet" (0, 0% or –) carries
   bb-email-stats__value--none (Bisbrick-Web, 2026-10-08) and is muted like a 0 in the strip. */
.app603-korenbloem .app-shell .bb-email-stats__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: 4px 0 8px;
}
.app603-korenbloem .app-shell .bb-email-stats__tile {
  flex: 0 0 auto;
  gap: 2px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
}
.app603-korenbloem .app-shell .bb-email-stats__tile:first-child {
  padding-left: 0;
}
.app603-korenbloem .app-shell .bb-email-stats__tile + .bb-email-stats__tile {
  border-left: 1px solid #E4E0D8;
}
.app603-korenbloem .app-shell .bb-email-stats__tile .bb-email-stats__label {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app603-korenbloem .app-shell .bb-email-stats__tile .bb-email-stats__value {
  font-family: "Poppins-600";
  font-size: 24px;
  font-weight: normal;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.app603-korenbloem .app-shell .bb-email-stats__tile .bb-email-stats__value--none {
  color: #8A8F9E;
}

/* App chrome - boards 2026-10-15, CRM-Accounts.dc.html / Main.dc.html.
   The app pages wore the Bisbrick WEBSITE header (Services / Platform / logo / Contact) and the
   627px marketing footer. That chrome was the single biggest reason the CRM did not read as the
   boards. All of it is CSS: the CRM menu is template 185 and the master is shared with the website
   - neither is edited.
   Deliberately a 1:1 mirror of the .Campaign_menu block further down this styling, so the two apps
   wear one shell and a change to either reads as a change to both. Everything is scoped with
   :has(.Relations_menu); the Campaign rules are scoped with :has(.Campaign_menu) and the two never meet.
   ===================================================================== */

.app603-korenbloem .app-shell:has(.Relations_menu) {
  background: #F4F3F0;
  font-family: "Poppins-400", Poppins, sans-serif;
  color: #292D3E;
}

/* The website chrome: the navigation bar inside header, the bottom bar, the footer. */
.app603-korenbloem .app-shell:has(.Relations_menu) > header > bisbrick-list,
.app603-korenbloem .app-shell:has(.Relations_menu) > header .bottom-bar,
.app603-korenbloem .app-shell:has(.Relations_menu) > footer {
  display: none !important;
}
body:has(.app-shell .Relations_menu) > .nb-wrapper {
  display: none !important;
}

/* Header collapses to nothing and the user links are placed over the menu bar, so the two rows
   become the one navy bar the boards draw. */
.app603-korenbloem .app-shell:has(.Relations_menu) > header {
  position: relative;
  height: 0;
  z-index: 20;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar {
  position: absolute;
  top: 0;
  right: 24px;
  height: 52px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .container {
  width: auto;
  max-width: none;
  padding: 0;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .navbar {
  padding: 0;
  background: transparent;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .nav-item.language {
  display: none;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .nav-item {
  padding: 0;
  margin: 0;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .nav-link {
  font-size: 12px;
  font-weight: 400;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  color: #D6D8E0 !important;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .nav-link span {
  font-weight: 400;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .nav-link:hover {
  color: #FFFFFF !important;
}

/* The signed-in user becomes the avatar circle of the boards: the icon goes, the name is clipped
   to its first letter inside a 30px circle. */
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .nav-link .fa-user {
  display: none;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .nav-item:has(.fa-user) {
  order: 9;
  margin-left: 8px;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .nav-link:has(.fa-user) span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #F4F3F0;
  color: #292D3E;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > header .top-bar .nav-link:has(.fa-user) span::first-letter {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
}

/* ---- CRM menu brick (template 185, styled from here, never edited) ---- */
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(> .Relations_menu) {
  padding: 0;
}
.app603-korenbloem .app-shell .Relations_menu section,
.app603-korenbloem .app-shell .Relations_menu .background {
  margin: 0;
  background: #292D3E !important;
  padding: 0 !important;
}
.app603-korenbloem .app-shell .Relations_menu .background > div {
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}
.app603-korenbloem .app-shell .Relations_menu .row {
  margin: 0;
}
.app603-korenbloem .app-shell .Relations_menu .row > div {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  padding: 0 !important;
}
.app603-korenbloem .app-shell .Relations_menu .nb-wrapper,
.app603-korenbloem .app-shell .Relations_menu .navigation-bar {
  min-height: 52px;
  height: 52px;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.app603-korenbloem .app-shell .Relations_menu .navigation-bar {
  display: flex;
  align-items: center;
  gap: 6px 22px;
}
/* CRM carries all eight items in the left zone and nothing in the right one, so the room for the
   user links is reserved here rather than on nb-zone-right the way Campaign does it. */
.app603-korenbloem .app-shell .Relations_menu .nb-zone-left {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  justify-content: flex-start !important;
  flex: 1 1 auto;
  padding-right: 320px;
}
.app603-korenbloem .app-shell .Relations_menu .nb-zone-left::before {
  content: "Relations";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #F4F3F0;
  margin-right: 20px;
}
.app603-korenbloem .app-shell .Relations_menu .nb-zone-center,
.app603-korenbloem .app-shell .Relations_menu .nb-zone-right {
  display: none;
}
.app603-korenbloem .app-shell .Relations_menu .nb-link {
  font-family: "Poppins-400", Poppins, sans-serif;
  font-weight: 400;
  border-radius: 5px;
  text-decoration: none;
  background: transparent;
  line-height: 1.5;
  color: #D6D8E0 !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
}
.app603-korenbloem .app-shell .Relations_menu .nb-link::after {
  display: none !important;
}
.app603-korenbloem .app-shell .Relations_menu .nb-link:hover {
  color: #FFFFFF !important;
}
/* A parent section stays quiet; only the page you are on wears the pill. Without this the whole
   branch reads as selected. */
.app603-korenbloem .app-shell .Relations_menu .nb-link.active-parent:not(.nb-active) {
  background: transparent;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-weight: 400;
  color: #D6D8E0 !important;
}
.app603-korenbloem .app-shell .Relations_menu .nb-link.nb-active {
  background: #F4F3F0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  color: #292D3E !important;
}

/* ---- page body ---- */
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list {
  display: block;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div:not(:has(> .Relations_menu)) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  float: none;
}
/* The page head sits on a white band that runs the full width, the way the boards draw it. */
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(.app-head) {
  background: #FFFFFF;
  box-shadow: #FFFFFF 0 0 0 100vmax;
  clip-path: inset(0 -100vmax);
  padding-top: 12px;
  padding-bottom: 10px;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(.app-head) section,
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(.app-head) .background {
  background: transparent !important;
  padding: 0 !important;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(.app-head) .row {
  align-items: center;
  flex-wrap: nowrap;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div:has(.app-head) .row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- tab row ---- */
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs {
  background: #FFFFFF;
  box-shadow: #FFFFFF 0 0 0 100vmax, #E6E0D6 0 1px 0 100vmax;
  clip-path: inset(0 -100vmax -1px);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab {
  padding: 10px 14px;
  margin: 0;
  border-radius: 0;
  color: #5F6475;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  flex: 0 0 auto;
  max-width: none;
  border: 0 !important;
  background: transparent !important;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: #F45F3A 0 -3px 0 inset;
}
.app603-korenbloem .app-shell:has(.Relations_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab::after {
  display: none;
}
/* A tab row nested inside a card is the quieter of the two: hairline rule, navy underline. */
.app603-korenbloem .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #EFEAE1;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
  box-shadow: none;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab {
  padding: 12px 10px;
  margin: 0;
  border-radius: 0;
  color: #5F6475;
  font-size: 13px;
  box-shadow: none;
  flex: 0 0 auto;
  max-width: none;
  border: 0 !important;
  background: transparent !important;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: #292D3E 0 -3px 0 inset;
}

.app603-korenbloem .app-shell:has(.Relations_menu) .app-card,
.app603-korenbloem .app-shell:has(.Relations_menu) .app-panel {
  background: #FFFFFF;
  border: 0;
  border-radius: 5px;
  box-shadow: #E4E0D8 0 0 0 1px;
}





















/* === CRM list tables (gen-table-css.mjs) === */
/* ---- the table is a card ----
   The boards draw the toolbar and the rows inside one white card with a hairline
   edge. .table-responsive is the brick's own wrapper, so the card goes there and
   the table keeps its horizontal scroll on a narrow screen. */
.app603-korenbloem .app-shell .table-responsive:has(> .app-table) {
  background: #FFFFFF;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
}
.app603-korenbloem .app-shell table.app-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 13px;
  color: #292D3E;
  background: transparent;
}
/* The brick always emits a <caption>, and it holds only whitespace unless a
   tableName was set. Collapsing it on the element and restoring the size on its
   children keeps the progress bar (the one thing that renders inside it) intact. */
.app603-korenbloem .app-shell table.app-table > caption {
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.app603-korenbloem .app-shell table.app-table > caption > * {
  font-size: 13px;
  line-height: 1.4;
}

/* ---- header row ---- */
.app603-korenbloem .app-shell table.app-table > thead > tr > th {
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid #F1ECE4;
  background: transparent;
  font-family: "Poppins-600";
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A8F9E;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
.app603-korenbloem .app-shell table.app-table > thead > tr > th:hover {
  color: #5F6475;
}

/* ---- body rows ----
   52px is the board's row height; it is set as a min on the cell rather than a
   fixed height so a wrapped cell can still grow. */
.app603-korenbloem .app-shell table.app-table > tbody > tr > td {
  height: 52px;
  padding: 6px 14px;
  border: 0;
  border-top: 1px solid #F1ECE4;
  background: transparent;
  vertical-align: middle;
  line-height: 1.35;
}
.app603-korenbloem .app-shell table.app-table > tbody > tr:first-child > td {
  border-top: 0;
}
.app603-korenbloem .app-shell table.app-table > tbody > tr:hover > td {
  background: #FAF9F7;
}
/* The row carries bisbrickUrl when the table has a link, so the whole row is the
   target and the pointer has to say so. */
.app603-korenbloem .app-shell table.app-table.table-hover > tbody > tr {
  cursor: pointer;
}
.app603-korenbloem .app-shell table.app-table > tbody > tr > td > div {
  min-width: 0;
}
.app603-korenbloem .app-shell table.app-table a.table-link {
  color: #292D3E;
  font-family: "Poppins-500";
  text-decoration: none;
}
.app603-korenbloem .app-shell table.app-table a.table-link:hover {
  text-decoration: underline;
}

/* ---- column modifiers, set per column as columnClass ----
   .app-num  a figure: right-aligned and on tabular digits so the column lines up
   .app-sub  a secondary value: smaller and muted, so the name stays the loudest
   .app-nowrap  never wrap, ellipsis instead */
.app603-korenbloem .app-shell table.app-table td.app-num,
.app603-korenbloem .app-shell table.app-table th.app-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.app603-korenbloem .app-shell table.app-table td.app-num {
  font-family: "Poppins-500";
}
.app603-korenbloem .app-shell table.app-table td.app-sub {
  font-size: 12px;
  color: #5F6475;
}
.app603-korenbloem .app-shell table.app-table td.app-nowrap > div,
.app603-korenbloem .app-shell table.app-table td.app-nowrap > a {
  display: block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* An empty cell reads as a mistake; the boards print an em dash instead. The
   :empty only catches a cell the brick left blank, never one holding a 0. */
.app603-korenbloem .app-shell table.app-table td > div:empty::before {
  content: "\2014";
  color: #C9CCD6;
}

/* ---- the account cell ----
   The board gives an account one cell: the mark, the name, and a sub-line of
   industry and country. Three columns folded into one is what takes the table
   from eleven columns to eight and makes it readable at laptop width. */
.app603-korenbloem .app-shell table.app-table td.app-cell-td > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The identity column carries two lines where every other column carries one, so
   it gets the lion's share of the width and the rest of the row divides what is
   left. Without this the browser spreads the columns evenly, the sub-line is cut
   off at the ellipsis, and the row ends in a band of empty space - which is what
   made the lists look unfinished at laptop width. */
.app603-korenbloem .app-shell table.app-table td.app-cell-td {
  width: 34%;
}
.app603-korenbloem .app-shell .app-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Cut off by the column, not by a fixed character count: a 28ch cap truncated
   "Groupe Sante Rivage" on a 1440px screen with 300px of empty row to its right. */
.app603-korenbloem .app-shell .app-cell__name,
.app603-korenbloem .app-shell .app-cell__sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app603-korenbloem .app-shell .app-cell__name {
  font-family: "Poppins-500";
  color: #292D3E;
}
.app603-korenbloem .app-shell .app-cell__sub {
  font-size: 12px;
  color: #8A8F9E;
}
/* An account with neither industry nor country gets no second line at all, rather
   than an empty one that pushes the name off centre. */
.app603-korenbloem .app-shell .app-cell__sub:empty {
  display: none;
}
/* A pill cell never wraps, and the em dash rule must not fire on it: the pill is
   a span inside the div, so the div is not empty. */
.app603-korenbloem .app-shell table.app-table td.app-pill {
  white-space: nowrap;
}

/* ---- the account mark ----
   A logo where there is one, otherwise the initials on a coloured square. The
   square's colour is picked in SQL from the name, so the same account keeps the
   same colour on every page. */
.app603-korenbloem .app-shell .app-logo {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  font-family: "Poppins-600";
  font-size: 11px;
  line-height: 1;
  color: #FFFFFF;
  background: #8A8F9E;
}
.app603-korenbloem .app-shell .app-logo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* An account is a company and a contact is a person; the shape is what tells the
   two marks apart at a glance on pages that otherwise look the same. */
.app603-korenbloem .app-shell .app-logo--person {
  border-radius: 50%;
}
.app603-korenbloem .app-shell .app-logo[data-i="0"] { background: #292D3E; }
.app603-korenbloem .app-shell .app-logo[data-i="1"] { background: #5B6B8C; }
.app603-korenbloem .app-shell .app-logo[data-i="2"] { background: #2E7D6B; }
.app603-korenbloem .app-shell .app-logo[data-i="3"] { background: #9C5A78; }
.app603-korenbloem .app-shell .app-logo[data-i="4"] { background: #C9A227; }
/* The brick's Image column wraps its img in a div, and an account logo there
   should read as the same mark as the initials square. */
.app603-korenbloem .app-shell table.app-table td > div > img.img-fluid {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  object-fit: contain;
}

/* ---- two more account statuses ----
   The badge vocabulary already covers Active, Customer, Prospect, On hold and
   Partner; the dev data also has Suspect and Inactive. */
.app603-korenbloem .app-shell .app-badge[data-s="Suspect"] {
  background: #F1ECE4;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-badge[data-s="Inactive"] {
  background: #F1ECE4;
  color: #8A8F9E;
}

/* ---- deal stages ----
   A deal's stage is a position on a path, not a state, so the five open stages
   walk up the navy ramp: the further a deal has come, the darker and more
   present the chip. Negotiation breaks out of the ramp into the app's orange
   because that is the stage that needs a person this week. Won is already green
   from the Active|Customer|Won rule above, and Lost takes the critical red. The
   ramp is the approved palette, and crm_deal_stage already stores these same
   hex values for the board. */
.app603-korenbloem .app-shell .app-badge[data-s="Qualification"] {
  background: #EEF0F5;
  color: #5B6B8C;
}
.app603-korenbloem .app-shell .app-badge[data-s="Needs analysis"] {
  background: #E7E9EF;
  color: #4A5573;
}
.app603-korenbloem .app-shell .app-badge[data-s="Proposal"] {
  background: #DDE1EA;
  color: #333B52;
}
.app603-korenbloem .app-shell .app-badge[data-s="Negotiation"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.app603-korenbloem .app-shell .app-badge[data-s="Lost"] {
  background: #FBE9E7;
  color: #B3261E;
}

/* ---- lead stages ----
   Same idea as the deal stages, and the same ramp: New and Contacted are still
   quiet, Qualified is the one that wants a call this week and takes the app's
   orange, Converted is the green every "good" state on these pages uses, and
   Unqualified the critical red. crm_lead_stage already stores these hex values
   for the board (#9AA2B8, #6E7899, #F45F3A, #1F6B3A, #B3261E), so the list and
   the Kanban read as one thing. */
.app603-korenbloem .app-shell .app-badge[data-s="New"] {
  background: #EEF0F5;
  color: #5B6B8C;
}
.app603-korenbloem .app-shell .app-badge[data-s="Contacted"] {
  background: #E7E9EF;
  color: #4A5573;
}
.app603-korenbloem .app-shell .app-badge[data-s="Qualified"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.app603-korenbloem .app-shell .app-badge[data-s="Converted"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app603-korenbloem .app-shell .app-badge[data-s="Unqualified"] {
  background: #FBE9E7;
  color: #B3261E;
}

/* ---- task statuses ----
   crm_sales_task_status stores its own colours for the board (#6E7899, #F45F3A,
   #C9A227, #1F6B3A, #8A8F9E); these are the same five, as the quiet tinted
   chips the rest of the app uses. In progress takes the app's orange because it
   is the only status that says someone is on it right now. */
.app603-korenbloem .app-shell .app-badge[data-s="Open"] {
  background: #EEF0F5;
  color: #5B6B8C;
}
.app603-korenbloem .app-shell .app-badge[data-s="In progress"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.app603-korenbloem .app-shell .app-badge[data-s="Waiting"],
.app603-korenbloem .app-shell .app-badge[data-s="Waiting for input"] {
  background: #FBF3DA;
  color: #8A6D0B;
}
.app603-korenbloem .app-shell .app-badge[data-s="Completed"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app603-korenbloem .app-shell .app-badge[data-s="Cancelled"] {
  background: #F1ECE4;
  color: #8A8F9E;
}

/* ---- priority ----
   A dot and a word, not a third filled chip. A task row already carries a status
   badge and can carry a red due chip; a priority badge beside those two flattens
   the row into a strip of pills with no hierarchy left. The dot still reads at a
   glance down the column, and it costs the row no width. */
.app603-korenbloem .app-shell .app-prio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  color: #5F6475;
  white-space: nowrap;
}
.app603-korenbloem .app-shell .app-prio::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8A8F9E;
  flex: none;
}
.app603-korenbloem .app-shell .app-prio[data-p="High"] {
  color: #B3261E;
}
.app603-korenbloem .app-shell .app-prio[data-p="High"]::before {
  background: #B3261E;
}
.app603-korenbloem .app-shell .app-prio[data-p="Medium"]::before {
  background: #F45F3A;
}
.app603-korenbloem .app-shell .app-prio[data-p="Normal"]::before {
  background: #5B6B8C;
}
.app603-korenbloem .app-shell .app-prio[data-p="Low"]::before {
  background: #C3C8D6;
}

/* ---- a date that has run out ----
   An expected close or a follow-up that is behind, on a record still in play.
   It is the only date on these lists that is a chip rather than grey text, which
   is the whole point: the eye should land on it and nowhere else. Red, not
   orange - orange already means "a stage that wants attention", and a date in
   the past is past, not approaching. Narrower than a status chip, because a date
   sets its own width and a min-width would leave it floating in its column. */
.app603-korenbloem .app-shell .app-badge[data-s="late"] {
  background: #FBE9E7;
  color: #B3261E;
}
.app603-korenbloem .app-shell td .app-badge[data-s="late"] {
  min-width: 0;
}

/* ---- pager ----
   The brick's own pager sits under the table; on the boards it is the card's
   last row rather than a separate control. */
.app603-korenbloem .app-shell .table-responsive:has(> .app-table) + bb-pager,
.app603-korenbloem .app-shell .table-responsive:has(> .app-table) + * .bb-pager {
  font-size: 12px;
  color: #8A8F9E;
}
/* === end CRM list tables === */
/* === CRM marks and cards (gen-card-css.mjs) === */
/* ---- the mark carries the relationship ----
   data-t comes from crm_accounts.AccountType (and, for a contact, from the
   account the contact belongs to), so the same company is the same colour
   wherever it appears. These sit after the data-i rules in the sheet, so a mark
   that carries both lands on the meaningful colour. */
.app603-korenbloem .app-shell .app-logo[data-t="suspect"] { background: #8A8F9E; }
.app603-korenbloem .app-shell .app-logo[data-t="prospect"] { background: #5B6B8C; }
.app603-korenbloem .app-shell .app-logo[data-t="customer"] { background: #2E7D6B; }
.app603-korenbloem .app-shell .app-logo[data-t="partner"] { background: #9C5A78; }
.app603-korenbloem .app-shell .app-logo[data-t="supplier"] { background: #C9A227; }
.app603-korenbloem .app-shell .app-logo[data-t="employee"] { background: #292D3E; }
/* A type nobody has mapped yet still gets a mark, in the neutral stone, rather
   than inheriting whichever colour happened to be last in the cascade. */
.app603-korenbloem .app-shell .app-logo[data-t=""] { background: #8A8F9E; }

/* ---- the card ----
   One card is the list row, unfolded: the same mark, the same name, the same
   sub-line, and the figures that were columns. Everything below exists to stop
   it drifting away from the row again. */
.app603-korenbloem .app-shell .app-card {
  border: 1px solid #E4E0D8;
  border-radius: 8px;
  background: #FFFFFF;
}
/* Cards in a row end level with each other. The grid row is already flex, so
   each column is stretched to the tallest card in the row - but the card itself
   sat at its own content height inside that column, leaving a ragged band of
   white under the three short ones whenever a fourth name wrapped to two lines.
   Making the column a flex container hands that height down to the card. */
.app603-korenbloem .app-shell .row > [class*="col-"]:has(> .app-card) {
  display: flex;
}
.app603-korenbloem .app-shell .row > [class*="col-"] > .app-card {
  width: 100%;
}
/* The mark column. The brick gives it a div of its own, so the sizing has to
   reach through that: .app-logo is inline-flex and would otherwise be sized by
   whatever the htmlText around it decided. */
/* The brick hands the mark a grid column, and a 12-grid has no width that is
   36px plus a gutter. So the column is pinned here instead: the mark takes the
   room it needs and the body takes the rest, which is also what keeps the body's
   left edge in the same place on a card whose mark is a logo rather than
   initials. */
.app603-korenbloem .app-shell .app-card .app-card__mark {
  flex: 0 0 52px;
  max-width: 52px;
}
.app603-korenbloem .app-shell .app-card .app-card__body {
  flex: 1 1 0;
  min-width: 0;
}
.app603-korenbloem .app-shell .app-card .app-card__mark .app-logo {
  width: 36px;
  height: 36px;
  font-size: 13px;
  border-radius: 6px;
}
.app603-korenbloem .app-shell .app-card .app-card__mark .app-logo--person {
  border-radius: 50%;
}
.app603-korenbloem .app-shell .app-card .app-card__mark p {
  margin: 0;
  line-height: 0;
}
/* ---- the card's type ----
   "Teksten in de cards te klein. Moet zelfde als in lijst." The card carried
   12px labels against the list's 13px body, and the eye reads that as a
   different, lesser thing. One size for everything that is not the name - 14px,
   a notch above the row, because a card is read at arm's length - and the name
   at 16px. */
.app603-korenbloem .app-shell .app-card .app-card__body p {
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.45;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-card .app-card__body p:last-child {
  margin-bottom: 0;
}
.app603-korenbloem .app-shell .app-card .app-card__body span,
.app603-korenbloem .app-shell .app-card .app-card__body a {
  font-size: 14px;
}
/* a.app-card__name, not .app-card__name: the span/a rule above it is one type
   selector heavier, so the bare class lost the font-size and the name rendered
   at the body's 14px. The element being an anchor is what makes it a name you
   can click, so saying so in the selector is honest as well as sufficient. */
.app603-korenbloem .app-shell .app-card a.app-card__name {
  font-family: "Poppins-600";
  font-size: 16px;
  color: #292D3E;
  text-decoration: none;
}
.app603-korenbloem .app-shell .app-card a.app-card__name:hover {
  text-decoration: underline;
}
/* The figures on a card are the ones that were columns in the row, so they get
   the column's treatment: the digits in the ink colour, the label beside them
   in the grey. */
.app603-korenbloem .app-shell .app-card .app-card__v {
  font-family: "Poppins-600";
  color: #292D3E;
  font-variant-numeric: tabular-nums;
}
/* The meta line - type, status, industry - separated by middots. The separator
   is grey so the three values read as three values and not as one sentence. */
.app603-korenbloem .app-shell .app-card .app-card__sep {
  color: #C9CCD6;
  padding: 0 4px;
}
/* === end CRM marks and cards === */
/* === CRM home (gen-home-css.mjs) === */
/* The page head of the home carries no breadcrumb, so the band is a touch shallower
   than on a record page and the title sits on the same line as the actions. */
.app603-korenbloem .app-shell:has(.Relations_menu) .app-home-pad {
  padding: 0;
}
/* ---- the four figures in one card ----
   The strip above is borderless everywhere else; the home draws them inside one
   white card divided by hairlines, the way the board does
   (artifact HtKnRMkmwY5aph5urR38LL, CRM-Home). Hence a modifier, not a change
   to .app-stat itself. */
.app603-korenbloem .app-shell .app-stats {
  display: block;
  margin: 16px 0;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  background: #FFFFFF;
}
.app603-korenbloem .app-shell .app-stats .row:has(> div > .app-stat) {
  margin: 0;
  row-gap: 0;
}
/* A figure takes an equal share and wraps instead of stacking; 180px is the width
   below which "Won this quarter" would break its own value. */
.app603-korenbloem .app-shell .app-stats .row > div:has(> .app-stat) {
  flex: 1 1 180px;
  width: auto;
  padding: 20px 24px !important;
  border-left: 1px solid #F1ECE4;
}
.app603-korenbloem .app-shell .app-stats .row > div:first-child:has(> .app-stat) {
  border-left: 0;
}
/* The borderless strip above pulls the first figure's left padding to 0, so it
   lines up with the page gutter. Inside the card that rule puts the label hard
   against the border - which is what Koos circled on every screen on 2026-10-16.
   The card has its own edge, so its first figure is inset like the rest. The
   selector repeats the :not() of the rule it has to beat, with .app-stats in
   front, because both carry !important and the borderless one wins on type
   count otherwise. */
.app603-korenbloem .app-shell .app-stats .row > div:has(> .app-stat):not(div:has(> .app-stat) + div) {
  padding-left: 24px !important;
}
.app603-korenbloem .app-shell .app-stats .app-stat p:nth-of-type(1) {
  font-family: "Poppins-600";
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8A8F9E;
}
/* The note under a figure carries its own colour, so an overdue count reads red
   and a gain reads green without a second brick. The summary writes the hex. */
.app603-korenbloem .app-shell .app-stats .app-stat p[data-c="#B3261E"] {
  color: #B3261E;
}
.app603-korenbloem .app-shell .app-stats .app-stat p[data-c="#1F6B3A"] {
  color: #1F6B3A;
}

/* ---- the home's head ----
   The meta line is the date, the account count and the sentence; the separator
   between them is drawn rather than typed, so the sentence stays translatable. */
.app603-korenbloem .app-shell .app-home .app-head .app-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 8px;
  border-radius: 50%;
  background: #C9CCD6;
  vertical-align: 3px;
}
/* === end CRM home === */















/* === CRM page heads (gen-crm-heads.mjs) === */
/* The title row: icon, then the name, left-aligned, on every screen. It stays
   one htmlText brick so the words are still editable in the builder. */
.app603-korenbloem .app-shell .app-head .app-head__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
}
/* The pill's left half. Paper rather than a colour: orange is the app's action
   colour and spending it on a decoration here would compete with the buttons
   on the same line. */
.app603-korenbloem .app-shell .app-head .app-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  min-height: 40px;
  border-radius: 5px 0 0 5px;
  background: #F4F3F0;
  color: #292D3E;
}
.app603-korenbloem .app-shell .app-head .app-head__icon svg {
  width: 20px;
  height: 20px;
}
.app603-korenbloem .app-shell .app-head .app-head__title .app-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The strapline sits beside the pill, as the meta line does on a record page -
   the gap is its own, because the pill's halves must not be parted. */
.app603-korenbloem .app-shell .app-head .app-head__title .app-meta {
  margin: 0 0 0 14px;
}
/* ---- the record pages' breadcrumb ----
   Stylings 823/829 - the Campaign session's head block - set the crumb chip to
   font-size: 0, hide the link inside it, and print content: "Campaign" from a
   ::before. Those rules carry no app scope, so a CRM record page reads
   "CAMPAIGN / Meridian Logistics" and the way back to the list is gone. Our
   block is appended after theirs in the same sheet, so the chip gets its own
   word back here rather than by editing another session's row; :has(.Relations_menu)
   keeps the Campaign pages exactly as they are. The font-size: 0 on the chip
   stays, which is what still swallows the literal " /" after the link. */
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-crumb::before {
  content: none;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-crumb a {
  display: inline;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #8A8F9E;
  text-decoration: none;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-crumb a:hover {
  color: #292D3E;
}
/* The meta line beside a record title is one nowrap flex row whose items do not
   shrink, so on an account with a long website the line ran out of the column
   and over the action buttons. Clipping it hides the website outright - the
   whole URL sits past the edge, not half of it - so the CRM meta wraps instead.
   A record head is allowed to be two lines; a head that silently drops a field
   is not. Measured on /relations/accounts/6: 7 items, ~718px of content, 327px of
   column. */
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-meta {
  flex-wrap: wrap;
  row-gap: 4px;
  overflow: hidden;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-meta > * {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ... and the separator between two facts is drawn, not typed. A literal
   <span>.</span> is its own flex item, so a wrap falling after one leaves the
   dot dangling at the end of the line. Hidden here and redrawn on the item that
   follows, it wraps with the fact it belongs to. gen-record-meta.mjs put the
   class on the spans. */
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-meta > .app-meta__sep {
  display: none;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-meta > .app-meta__sep + *::before,
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-meta > .app-meta__parent::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background: #C9CCD6;
  vertical-align: 3px;
}
/* The head brick writes margin-left/right: auto on its own <section>, which is
   harmless for a full-width child and shrink-to-fit centring for a table. The
   title row fills the section, so it starts at the gutter either way. */
.app603-korenbloem .app-shell .app-head > section,
.app603-korenbloem .app-shell .app-head .app-head__title {
  width: 100%;
}
/* === end CRM page heads === */







/* === CRM admin (gen-admin-css.mjs) === */
/* The brick's own .container margin plus 32px of padding inset the whole thing
   from a page gutter the shell has already applied. One gutter is enough. */
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu {
  grid-template-columns: 232px minmax(0, 1fr);
  column-gap: 40px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 0 0;
}
/* A menu of three words does not need a third of the page. 232px holds the
   longest item on one line and leaves the content column the rest. */
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid #E4E0D8;
}
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item {
  margin: 0;
  padding: 0 24px 2px 0;
  list-style: none;
}
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > span {
  display: block;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 15px;
  line-height: 20px;
  color: #5F6475;
  cursor: pointer;
}
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > span:hover {
  background: #F4F3F0;
  color: #292D3E;
}
/* The label itself is an <a class="nav-link"> inside that span, and the brick
   styles it 24px/700 in its own blue with a line-height of 20px - smaller than
   the font, which is what makes two-line items overlap. Everything above is
   set on the span and then overruled here, so the anchor has to be handed back
   to it. Koos, 2026-10-19: "Ook de Admin schermen hebben nog te grote en lope
   zijmenu-itmes. Kleur blauw select past ook niet". */
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > span > a.nav-link,
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > span > a.nav-link:hover {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  color: inherit;
  /* The brick paints the label through -webkit-text-fill-color, which overrules
     colour on the glyphs themselves - handing back colour alone leaves the label
     in the brick's blue (proved live on /relations/admin, 2026-10-19). */
  -webkit-text-fill-color: currentColor;
  text-decoration: none;
}
/* The brick marks the open item by colouring its label; the page design marks a
   selected row with the paper chip, so the two now say the same thing twice
   rather than differently. The class sits on the anchor, the chip on its span,
   hence :has - .active is the brick's older markup and matches nothing here. */
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item:has(> span > a.nav-link.open) > span {
  background: #F4F3F0;
  color: #292D3E;
}
/* The brick's own .open rule carries one class more than the base rule above,
   so its blue outlives the inherited colour and has to be named here. */
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > span > a.nav-link.open {
  font-family: "Poppins-600";
  font-weight: 600;
  color: #292D3E;
  -webkit-text-fill-color: #292D3E;
}
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu > .page-content {
  min-width: 0;
}
/* === end CRM admin === */





/* === app-shell popup type (gen-popup-css.mjs) === */
.app603-korenbloem bisbrick-master-pop-up.app-shell {
  font-family: "Poppins-400";
  color: #292D3E;
}
.app603-korenbloem bisbrick-master-pop-up.app-shell [style*="Default-Bold"],
.app603-korenbloem bisbrick-master-pop-up.app-shell [style*="Default-Black"] {
  font-family: "Poppins-600" !important;
}
.app603-korenbloem bisbrick-master-pop-up.app-shell [style*="Default-Regular"],
.app603-korenbloem bisbrick-master-pop-up.app-shell [style*="Default-Light"] {
  font-family: "Poppins-400" !important;
}

/* The SurveyJS form that is the whole body of about a hundred of these popups takes its face from
   --sjs-font-family, set by the Survey theme - which is shared with every form in the tenant and
   is not ours to change from here. The variable resolves on the form root, so redefining it on
   that root inside an app-shell popup moves only these forms and leaves the rest alone.
   SurveyJS writes the variable as an INLINE style on that root (checked in the DOM, 2026-10-20),
   so a plain declaration here loses to it and only !important lands. Without this the form body
   inherited Poppins while every question title stayed on Inter, which reads worse than either
   face on its own. */
.app603-korenbloem bisbrick-master-pop-up.app-shell .sd-root-modern {
  --sjs-font-family: "Poppins-400", system-ui, sans-serif !important;
}

/* The popup's own frame. bisbrick-master-pop-up writes "border: 1px solid rgb(68,153,242)" and a
   matching blue glow as an INLINE style on its .modal-styling div - checked on /relations/popup/add-new,
   2026-10-20 - so it is the component default rather than anything these routes store: none of the 133
   Relations popups carries a borderColor or shadowColor of its own. That is the same platform blue Koos
   called out on the admin menu ("Kleur blauw select past ook niet", 2026-10-19), and it framed every
   popup in the app. Inline beats a plain declaration, hence !important; the selector is scoped to
   app-shell popups, so popups in every other app keep the component default. The frame becomes the one
   the cards behind it already use. */
.app603-korenbloem bisbrick-master-pop-up.app-shell .modal-styling {
  border-color: #E4E0D8 !important;
  border-radius: 5px !important;
  box-shadow: 0 6px 24px rgba(41, 45, 62, 0.12) !important;
}

/* Widgets keep their own font and colours: the same carve-out the page rules make, repeated here
   because everything above inherits. */
.app603-korenbloem bisbrick-master-pop-up.app-shell bisbrick-kanban,
.app603-korenbloem bisbrick-master-pop-up.app-shell bisbrick-board,
.app603-korenbloem bisbrick-master-pop-up.app-shell .gantt_container,
.app603-korenbloem bisbrick-master-pop-up.app-shell [class*="dhx_"],
.app603-korenbloem bisbrick-master-pop-up.app-shell [class^="wx-"],
.app603-korenbloem bisbrick-master-pop-up.app-shell [class*=" wx-"] {
  font-family: var(--font-content);
  color: initial;
}
/* === end app-shell popup type === */

/* === Relations frame fixes (Koos 2026-10-20) === */
.app603-korenbloem .app-shell:has(.Relations_menu) .app-card,
.app603-korenbloem .app-shell:has(.Relations_menu) .app-panel {
  border: 1px solid #E4E0D8;
  box-shadow: none;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-crumb {
  margin-bottom: 0;
  line-height: 1.2;
}
.app603-korenbloem .app-shell:has(.Relations_menu) section.page-menu > ul > li.nav-item > .before {
  display: none !important;
}
/* === end Relations frame fixes === */

/* === Relations head badge colours (Koos 2026-10-20) === */
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Active"],
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Customer"],
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Won"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Prospect"],
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="On hold"],
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="On Hold"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Partner"],
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Reseller"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Suspect"] {
  background: #F1ECE4;
  color: #5F6475;
}
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Inactive"],
.app603-korenbloem .app-shell:has(.Relations_menu) .app-head .app-badge[data-s="Blocked"] {
  background: #F1ECE4;
  color: #8A8F9E;
}
/* === end Relations head badge colours === */

.app603-korenbloem .app-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  overflow: hidden;
  font-family: inherit;
  font-size: 14px;
  color: #292D3E;
}

.app603-korenbloem .app-table thead,
.app603-korenbloem .app-table .sd-table__cell--header,
.app603-korenbloem .app-table th,
.app603-korenbloem .app-table thead th {
  background: #FFFFFF;
  color: #8A8F9E;
  font-size: 11px;
  font-family: var(--font-default-bold, Default-Bold), var(--font-default-regular, Default-Regular), sans-serif;
  font-weight: 600;
  font-synthesis: style small-caps;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #E4E0D8;
  text-align: left;
}

.app603-korenbloem .app-table .sd-table__cell,
.app603-korenbloem .app-table td,
.app603-korenbloem .app-table th {
  padding: 10px 14px;
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  border: none;
}

.app603-korenbloem .app-table tbody tr:hover,
.app603-korenbloem .app-table .sd-table__row:hover {
  background: #FBF9F6;
}

.app603-korenbloem .app-table thead tr:first-child > th:first-child,
.app603-korenbloem .app-table thead tr:first-child > .sd-table__cell:first-child {
  border-top-left-radius: 5px;
}
.app603-korenbloem .app-table thead tr:first-child > th:last-child,
.app603-korenbloem .app-table thead tr:first-child > .sd-table__cell:last-child {
  border-top-right-radius: 5px;
}
.app603-korenbloem .app-table tbody tr:last-child > td:first-child,
.app603-korenbloem .app-table tbody tr:last-child > .sd-table__cell:first-child {
  border-bottom-left-radius: 5px;
}
.app603-korenbloem .app-table tbody tr:last-child > td:last-child,
.app603-korenbloem .app-table tbody tr:last-child > .sd-table__cell:last-child {
  border-bottom-right-radius: 5px;
}

.app603-korenbloem .app-table tbody tr.sd-table__row--selected,
.app603-korenbloem .app-table .sd-table__row--selected {
  background: #FFF6F2;
  color: #292D3E;
}



@media (max-width: 757.98px) {
  .app603-korenbloem .app-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* custom overrides */
.app603-korenbloem .app-table tbody tr + tr > td {
  border-top: 1px solid #F1ECE4;
}
.app603-korenbloem .app-table thead th {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  letter-spacing: .08em;
  font-family: "Poppins-600";
  border-bottom: 1px solid #F1ECE4;
}
/* A row is a line of its own height, not a line of text: the boards put 52px under every row and a
   hairline between them (Contacts board, artifact HtKnRMkmwY5aph5urR38LL). */
.app603-korenbloem .app-table tbody td {
  height: 52px;
  font-family: "Poppins-400";
}
.app603-korenbloem .app-table caption {
  padding: 0;
}
/* A linked cell is not a link in the running-text sense: on the boards a row reads as one line of ink and
   the accent is spent once per screen, on the primary button. So a cell link carries its weight instead of
   a colour, and only turns accent under the cursor. */
.app603-korenbloem .app-table .table-link {
  color: #292D3E;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: "Poppins-500";
  text-decoration: none;
}
.app603-korenbloem .app-table .table-link:hover {
  color: #F45F3A;
  text-decoration: underline;
}
.app603-korenbloem .app-table .table-cell-btn--ghost {
  color: #5F6475;
}
.app603-korenbloem .app-table .table-cell-btn--ghost:hover {
  color: #292D3E;
  background: #F1ECE4;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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;
}
.abm.abm-role{
  
  --b-ink:#292D3E;--b-orange:#F45F3A;--b-yellow:#FFC505;--b-blue:#3A8DFF;--b-purple:#884DFF;--b-teal:#398FA5;
  --b-green:#8ECCC5;--b-red:#F97C7C;--b-lilac:#CCB3FF;--b-creme:#F7F4EF;--b-beige:#EBE8E4;
  
  --dto-accent:#884DFF;--dto-soft:#F1EAFF;--dto-text:#5B2ED6;--dto-acc2:#FFC505;
  --cfo-accent:#398FA5;--cfo-soft:#E4F3F1;--cfo-text:#246B7C;--cfo-acc2:#3A8DFF;
  --mkt-accent:#F45F3A;--mkt-soft:#FDECE6;--mkt-text:#C23E1B;--mkt-acc2:#FFC505;
  --own-accent:#292D3E;--own-soft:#ECEAF2;--own-text:#292D3E;--own-acc2:#F45F3A;
  --ops-accent:#2F7BEA;--ops-soft:#E6F0FF;--ops-text:#1C5FCC;--ops-acc2:#FFC505;
  --hr-accent:#D94B63;--hr-soft:#FDE8EC;--hr-text:#A8324A;--hr-acc2:#8ECCC5;
  --it-accent:#2E8B7E;--it-soft:#E2F3F0;--it-text:#1F6B61;--it-acc2:#CCB3FF;
  --cl-accent:#0F6E74;--cl-soft:#DDEFEF;--cl-text:#0B5459;
  --accent:var(--dto-accent);--accent-soft:var(--dto-soft);--accent-text:var(--dto-text);--acc2:var(--dto-acc2);
  --ink:#292D3E;--muted:#5F6475;--faint:#8B90A0;
  --paper:#FFFFFF;--creme:#F7F4EF;--line:#E6E1D9;--card:#FFFFFF;
  --dark:#292D3E;--dark-ink:#FFFFFF;
  --chrome:#1E2130;--chrome-ink:#F4F2F7;--chrome-muted:#A3A8B8;
  --note-bg:#EEF3FB;--note-ink:#2B4A7A;--note-line:#CFDCF0;
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.abm.abm-role.role-dto{--accent:var(--dto-accent);--accent-soft:var(--dto-soft);--accent-text:var(--dto-text);--acc2:var(--dto-acc2)}
.abm.abm-role.role-cfo{--accent:var(--cfo-accent);--accent-soft:var(--cfo-soft);--accent-text:var(--cfo-text);--acc2:var(--cfo-acc2)}
.abm.abm-role.role-mkt{--accent:var(--mkt-accent);--accent-soft:var(--mkt-soft);--accent-text:var(--mkt-text);--acc2:var(--mkt-acc2)}
.abm.abm-role.role-own{--accent:var(--own-accent);--accent-soft:var(--own-soft);--accent-text:var(--own-text);--acc2:var(--own-acc2)}
.abm.abm-role.role-ops{--accent:var(--ops-accent);--accent-soft:var(--ops-soft);--accent-text:var(--ops-text);--acc2:var(--ops-acc2)}
.abm.abm-role.role-hr{--accent:var(--hr-accent);--accent-soft:var(--hr-soft);--accent-text:var(--hr-text);--acc2:var(--hr-acc2)}
.abm.abm-role.role-it{--accent:var(--it-accent);--accent-soft:var(--it-soft);--accent-text:var(--it-text);--acc2:var(--it-acc2)}
.abm.abm-role.client{--accent:var(--cl-accent);--accent-soft:var(--cl-soft);--accent-text:var(--cl-text)}
.abm.abm-role, .abm.abm-role *{box-sizing:border-box}
.abm.abm-role{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
.abm.abm-role h1,.abm.abm-role h2,.abm.abm-role h3,.abm.abm-role h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.abm.abm-role p{margin:0}
.abm.abm-role button,.abm.abm-role input{font:inherit;color:inherit}
.abm.abm-role :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-role .wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.abm.abm-role .chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome);color:var(--chrome-ink);padding:10px 16px}
.abm.abm-role .chrome-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.abm.abm-role .chrome-label{font-size:12px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.abm.abm-role .chrome-label b{color:var(--chrome-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.abm.abm-role .seg{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.abm.abm-role .seg button{background:none;border:0;color:var(--chrome-muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.abm.abm-role .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-role .toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--chrome-muted);cursor:pointer}
.abm.abm-role .toggle input{accent-color:var(--accent)}
.abm.abm-role section{padding-block:80px}
.abm.abm-role section.alt{background:var(--creme)}
.abm.abm-role .eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.abm.abm-role .h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.15;max-width:26ch}
.abm.abm-role .lead{color:var(--muted);font-size:18px;max-width:60ch}
.abm.abm-role .sec-head{display:grid;gap:12px;margin-bottom:36px}
.abm.abm-role .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;font-size:15px}
.abm.abm-role .btn-primary{background:var(--accent);color:#fff}
.abm.abm-role .btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .btn:disabled{opacity:.45;cursor:default}
.abm.abm-role .link-btn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.abm.abm-role .echo{font-size:14px;color:var(--accent-text);background:var(--accent-soft);padding:10px 14px;border-radius:10px}
.abm.abm-role .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.abm.abm-role .pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.abm.abm-role .p-built{background:var(--accent);color:#fff}
.abm.abm-role .p-store{background:color-mix(in srgb,var(--acc2) 30%,transparent);color:var(--ink)}
.abm.abm-role .p-archie{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.abm.abm-role .p-plain{color:var(--muted);font-weight:500;white-space:normal;padding:0;font-size:14.5px}
.abm.abm-role .p-weak{color:var(--faint);font-weight:500;white-space:normal;padding:0;font-size:14.5px}
.abm.abm-role .note{display:none;margin-top:22px;background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;max-width:82ch}
.abm.abm-role .note b{font-weight:600}
.abm.abm-role.show-notes .note{display:block}
.abm.abm-role .hero{background:var(--creme);padding-block:0;position:relative;overflow:hidden}
.abm.abm-role .hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-block:72px 80px;align-items:center;position:relative}
.abm.abm-role .campaign{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:18px}
.abm.abm-role .campaign span:nth-child(3){color:var(--accent-text)}
.abm.abm-role .cobrand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:26px;color:var(--ink)}
.abm.abm-role .cobrand .x{color:var(--faint);font-weight:500}
.abm.abm-role .motif{display:flex;gap:6px;margin-bottom:22px}
.abm.abm-role .motif span{width:26px;height:12px;border-radius:4px;position:relative}
.abm.abm-role .motif span::before{content:"";position:absolute;top:-4px;left:6px;width:6px;height:4px;border-radius:2px 2px 0 0;background:inherit}
.abm.abm-role .hero h1{font-size:clamp(32px,4.8vw,50px);font-weight:700;line-height:1.07;margin-top:12px}
.abm.abm-role .hero .lead{margin-top:18px}
.abm.abm-role .face{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.abm.abm-role .face::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.abm.abm-role .idea-box{background:var(--card);border-radius:18px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -34px rgba(41,45,62,.45)}
.abm.abm-role .idea-box label{font-family:var(--display);font-weight:600;font-size:22px}
.abm.abm-role .idea-box .sub{font-size:14px;color:var(--muted);margin-top:-8px}
.abm.abm-role .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:15px}
.abm.abm-role .field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-role .hero-visual{position:relative;display:grid}
.abm.abm-role .kv{width:min(430px,100%);height:auto;justify-self:end;margin-right:-24px;display:block}
.abm.abm-role .kv.tall{width:min(340px,80%)}
.abm.abm-role .hero-visual .idea-box{width:min(410px,100%);margin-top:-170px;position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .kv{animation:kvin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes kvin{from{transform:translateY(18px) rotate(-3deg);opacity:.6}to{transform:none;opacity:1}}
}
.abm.abm-role .plan-dlg{border:0;border-radius:20px;padding:30px 30px 26px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:auto;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.abm.abm-role .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.abm.abm-role .plan-dlg #dlg-trial{background:#FFC505;color:#292D3E;border-radius:5px}
.abm.abm-role .plan-dlg h3{font-size:24px;font-weight:600;margin-top:6px}
.abm.abm-role .dlg-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;color:var(--faint);cursor:pointer;width:36px;height:36px;border-radius:10px}
.abm.abm-role .dlg-x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-role .plan-quote{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-weight:500}
.abm.abm-role .plan-steps{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}
.abm.abm-role .plan-steps li::marker{color:var(--accent-text);font-weight:600}
.abm.abm-role .plan-bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.abm.abm-role .plan-bricks span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--creme);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .plan-start{margin-top:14px;font-size:14px;color:var(--muted)}
.abm.abm-role .plan-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.abm.abm-role .plan-cta h4{font-size:18px;font-weight:600}
.abm.abm-role .plan-mail{font-size:13px;color:var(--faint)}
.abm.abm-role .idea-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.abm.abm-role .signals{display:flex;flex-wrap:wrap;gap:10px}
.abm.abm-role .chip{display:inline-flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:8px 8px 8px 14px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .chip .txt{display:grid;gap:1px}
.abm.abm-role .chip small{font-size:11.5px;color:var(--faint)}
.abm.abm-role .chip.guess{background:none;box-shadow:inset 0 0 0 1px var(--faint)}
.abm.abm-role .chip.guess{border:0;background-image:linear-gradient(var(--creme),var(--creme))}
.abm.abm-role .chip.guess small{color:var(--accent-text)}
.abm.abm-role .chip.mine{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .chip.mine small{color:var(--accent-text)}
.abm.abm-role .chip.off{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint)}
.abm.abm-role .chip.off .txt span{text-decoration:line-through}
.abm.abm-role .chip .x{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center}
.abm.abm-role .chip .x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-role .add{display:inline-flex;align-items:center;gap:6px;border:2px dashed var(--accent);color:var(--accent-text);background:none;border-radius:12px;padding:6px 14px;font-size:14px;font-weight:600;cursor:pointer}
.abm.abm-role .add-form{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--accent);border-radius:12px;padding:6px 6px 6px 14px;background:var(--card)}
.abm.abm-role .add-form:focus-within{box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-role .add-form input{border:0;outline:0;padding:0;font-size:14px;background:none;width:min(240px,55vw)}
.abm.abm-role .add-form button{border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:7px 11px;cursor:pointer}
.abm.abm-role .sig-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:22px}
.abm.abm-role .legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.abm.abm-role .legend i{display:inline-block;width:20px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:6px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .legend i.g{box-shadow:inset 0 0 0 1px var(--faint);background:none}
.abm.abm-role .legend i.m{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.abm.abm-role .idea{background:var(--card);border-radius:18px;overflow:hidden;display:grid;align-content:start;box-shadow:0 1px 0 var(--line);transition:transform .2s ease,box-shadow .2s ease}
.abm.abm-role .idea:hover{transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(41,45,62,.4)}
.abm.abm-role .idea .art{height:132px;display:grid;place-items:center;padding:14px;background:var(--accent-soft)}
.abm.abm-role .idea:nth-child(2) .art{background:color-mix(in srgb,var(--acc2) 22%,var(--card))}
.abm.abm-role .idea:nth-child(3) .art{background:color-mix(in srgb,var(--b-blue) 14%,var(--card))}
.abm.abm-role .idea .art svg{width:100%;max-width:220px;height:100%}
.abm.abm-role .idea .body{padding:20px 22px 24px;display:grid;gap:10px}
.abm.abm-role .idea .pill{justify-self:start}
.abm.abm-role .idea h3{font-size:19px;font-weight:600}
.abm.abm-role .idea p{color:var(--muted);font-size:15px}
.abm.abm-role .s-bg{fill:var(--card)}
.abm.abm-role .s-ln{stroke:var(--faint);fill:none;stroke-width:1.5}
.abm.abm-role .s-fl{fill:var(--faint);opacity:.3}
.abm.abm-role .s-ac{fill:var(--accent)}
.abm.abm-role .s-acl{stroke:var(--accent);fill:none;stroke-width:2}
.abm.abm-role .s-sf{fill:var(--accent-soft)}
.abm.abm-role .s-y{fill:var(--acc2)}
.abm.abm-role .band{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start}
.abm.abm-role .panel{background:var(--card);border-radius:18px;padding:20px;box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -32px rgba(41,45,62,.35)}
.abm.abm-role .panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:14px}
.abm.abm-role .panel-head h3{font-size:17px;font-weight:600}
.abm.abm-role .panel-head .row{font-size:13px;gap:12px}
.abm.abm-role .tools{display:grid;gap:6px}
.abm.abm-role .tool{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:10px;background:var(--creme)}
.abm.abm-role .tool .name{flex:1;min-width:0}
.abm.abm-role .tool .name{font-weight:500;font-size:14px}
.abm.abm-role .tool .name small{display:block;font-size:12px;color:var(--faint);font-weight:400}
.abm.abm-role .tool.mine{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.abm.abm-role .tool.fixed .name{color:var(--muted)}
.abm.abm-role .switch{display:inline-flex;background:var(--card);border-radius:9px;padding:3px;box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.abm.abm-role .switch button{border:0;background:none;padding:4px 9px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.abm.abm-role .switch button[aria-pressed="true"].k{background:var(--ink);color:var(--paper)}
.abm.abm-role .switch button[aria-pressed="true"].o{background:var(--accent);color:#fff}
.abm.abm-role .tool .name .pr{display:block;font-size:11.5px;font-weight:400;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm.abm-role .tool .ask{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:var(--accent-text);margin-top:2px}
.abm.abm-role .tool .ask input{width:64px;border:0;border-radius:6px;padding:2px 6px;font-size:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--accent);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.abm.abm-role .tool .ask input::-webkit-outer-spin-button,.abm.abm-role .tool .ask input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-role .tool .pr .qty{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--accent-text);font-weight:500}
.abm.abm-role .tool .pr .qty input{width:54px;border:0;border-radius:6px;padding:1px 5px;font-size:11.5px;background:var(--card);box-shadow:inset 0 0 0 1px var(--accent);font-variant-numeric:tabular-nums}
.abm.abm-role .tool .name .pr{white-space:normal}
.abm.abm-role .tool .rm{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:16px;flex-shrink:0}
.abm.abm-role .tool .rm:hover{background:var(--card);color:var(--ink)}
.abm.abm-role .tools-extra{margin-top:14px;display:grid;gap:8px;font-size:13px;color:var(--muted)}
.abm.abm-role .chips{display:flex;flex-wrap:wrap;gap:6px}
.abm.abm-role .chips button{border:0;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .chips button:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .chips.gone button{color:var(--faint);text-decoration:line-through;font-weight:500}
.abm.abm-role .tool-add{display:flex;gap:6px}
.abm.abm-role .tool-add input{flex:1;min-width:0;border:0;border-radius:8px;padding:6px 10px;font-size:13px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .tool-add input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .tool-add button{border:0;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;background:var(--accent);color:#fff;cursor:pointer}
.abm.abm-role .tag-fixed{font-size:12.5px;color:var(--muted);background:var(--card);padding:5px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.abm.abm-role .bricks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;padding-top:8px}
.abm.abm-role .brick{position:relative;border:0;border-radius:10px;padding:18px 10px 14px;font-family:var(--display);font-weight:600;font-size:14.5px;text-align:center;background:var(--accent-soft);color:var(--accent-text);min-height:64px;display:grid;place-content:center;gap:2px}
.abm.abm-role .brick::before,.abm.abm-role .brick::after{content:"";position:absolute;top:-6px;width:14px;height:7px;border-radius:4px 4px 0 0;background:inherit}
.abm.abm-role .brick::before{left:24%}
.abm.abm-role .brick::after{right:24%}
.abm.abm-role .brick small{font-family:var(--body);font-weight:500;font-size:11.5px;opacity:.8}
.abm.abm-role .brick.hl{background:var(--accent);color:#fff}
.abm.abm-role .brick.linked{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .brick.linked::before,.abm.abm-role .brick.linked::after{background:var(--accent);opacity:.4}
.abm.abm-role .brick.ai{background:var(--ink);color:var(--paper)}
.abm.abm-role .brick.ai .spark{color:var(--acc2)}
.abm.abm-role .brick.link{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.abm.abm-role .brick.link::before,.abm.abm-role .brick.link::after{background:var(--line)}
.abm.abm-role .brick.next{background:none;box-shadow:inset 0 0 0 2px var(--acc2);color:var(--ink);cursor:pointer}
.abm.abm-role .brick.next::before,.abm.abm-role .brick.next::after{display:none}
.abm.abm-role .brick.next:hover{background:color-mix(in srgb,var(--acc2) 18%,transparent)}
.abm.abm-role .band .meter{margin-top:32px;position:relative;z-index:1}
.abm.abm-role .band .meter .strip{grid-template-columns:1fr;gap:8px}
.abm.abm-role .band .meter .stat b{font-size:22px}
.abm.abm-role .meter{margin-top:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:20px 22px;display:grid;gap:10px}
.abm.abm-role .meter-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;font-size:14px;color:var(--muted)}
.abm.abm-role .meter-top b{font-family:var(--display);font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums}
.abm.abm-role .meter-bar{height:12px;border-radius:999px;background:var(--creme);overflow:hidden}
.abm.abm-role .meter-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--acc2));border-radius:999px;transition:width .5s cubic-bezier(.2,.9,.3,1)}
.abm.abm-role .meter small{font-size:12.5px;color:var(--faint)}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .play .brick{animation:snap .7s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i) * 80ms)}

  @keyframes snap{from{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:.5}70%{transform:translate(0,2px)}to{transform:none;opacity:1}}
}
.abm.abm-role .cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:10px}
.abm.abm-role .cmp-bar > span{font-weight:600}
.abm.abm-role .segctl{display:inline-flex;flex-wrap:wrap;background:var(--card);border-radius:12px;padding:4px;box-shadow:inset 0 0 0 1px var(--line);gap:4px}
.abm.abm-role .segctl button{border:0;background:none;padding:9px 14px;border-radius:9px;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer}
.abm.abm-role .segctl button[aria-selected="true"]{background:var(--accent);color:#fff}
.abm.abm-role .cmp-desc{font-size:14px;color:var(--faint);margin-bottom:28px}
.abm.abm-role .h3{font-size:22px;font-weight:600}
.abm.abm-role .tbl-wrap{overflow-x:auto;border-radius:16px;background:var(--card)}
.abm.abm-role table{border-collapse:collapse;width:100%;min-width:680px;font-size:15px}
.abm.abm-role th,.abm.abm-role td{text-align:left;padding:14px 18px;vertical-align:top;border-bottom:1px solid var(--line)}
.abm.abm-role thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-role thead th.us{color:var(--accent-text)}
.abm.abm-role tbody th{font-weight:500}
.abm.abm-role td.us{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.abm.abm-role tbody tr:last-child td,.abm.abm-role tbody tr:last-child th{border-bottom:0}
.abm.abm-role tr.sum th,.abm.abm-role tr.sum td{font-weight:600;background:var(--card)}
.abm.abm-role tr.sum:first-of-type th,.abm.abm-role tr.sum:first-of-type td{border-top:2px solid var(--ink)}
.abm.abm-role tr.sum td.us{background:var(--accent-soft)}
.abm.abm-role .num{font-variant-numeric:tabular-nums}
.abm.abm-role .more-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-soft);color:var(--accent-text);font:600 14.5px/1.2 var(--body,inherit);cursor:pointer;transition:background .15s}
.abm.abm-role .more-btn:hover{background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 30%)}
.abm.abm-role .more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-role .more-btn .chev{font-size:12px}
.abm.abm-role .cmp-open-hint{font-size:14.5px;color:var(--muted);margin-top:4px}
.abm.abm-role th.amt,.abm.abm-role td.amt{min-width:9.5rem;white-space:nowrap}
.abm.abm-role td.calc{color:var(--muted);font-size:13.5px}
.abm.abm-role .tbl-note{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;font-size:13px;color:var(--muted)}
.abm.abm-role .badge{font-size:12px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);border-radius:6px;padding:3px 8px}
.abm.abm-role details.sources{margin-top:14px;border-radius:14px;background:var(--card);padding:14px 18px;font-size:13.5px;color:var(--muted)}
.abm.abm-role details.sources summary{cursor:pointer;font-weight:600;color:var(--ink)}
.abm.abm-role details.sources ul{margin:10px 0 0;padding-left:18px;display:grid;gap:5px}
.abm.abm-role details.sources a{color:var(--accent-text)}
.abm.abm-role .t2-head{display:grid;gap:8px;margin:48px 0 18px}
.abm.abm-role .calc{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:18px}
.abm.abm-role .calc-group{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:12px;align-content:start}
.abm.abm-role .calc-group.us{background:var(--accent-soft)}
.abm.abm-role .calc-group h4{font-size:16px;font-weight:600}
.abm.abm-role .calc-group .hint{font-size:13px;color:var(--muted)}
.abm.abm-role .calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.abm.abm-role .calc-group.us .calc-fields{grid-template-columns:1fr}
.abm.abm-role .fieldset{display:grid;gap:5px}
.abm.abm-role .fieldset label{font-size:13px;color:var(--muted)}
.abm.abm-role .stepper{display:inline-flex;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;width:max-content}
.abm.abm-role .stepper button{border:0;background:none;width:36px;font-size:18px;color:var(--accent-text);cursor:pointer}
.abm.abm-role .stepper button:hover{background:var(--creme)}
.abm.abm-role .stepper input{width:70px;border:0;border-inline:1px solid var(--line);text-align:center;background:none;font-variant-numeric:tabular-nums;padding:8px 4px;-moz-appearance:textfield}
.abm.abm-role .stepper input::-webkit-outer-spin-button,.abm.abm-role .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-role .plan-pick{font-size:14px}
.abm.abm-role .plan-pick b{font-family:var(--display);color:var(--accent-text)}
.abm.abm-role .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.abm.abm-role .stat{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:4px}
.abm.abm-role .stat span{font-size:13px;color:var(--muted)}
.abm.abm-role .stat b{font-family:var(--display);font-size:clamp(24px,3.4vw,32px);font-weight:600;font-variant-numeric:tabular-nums}
.abm.abm-role .stat.win{background:var(--accent);color:#fff}
.abm.abm-role .stat.win span{color:rgba(255,255,255,.9)}
.abm.abm-role .profile-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.abm.abm-role .profile-bar .segctl button[disabled]{opacity:.4;cursor:default}
.abm.abm-role .picks{display:grid;gap:22px;margin-top:8px}
.abm.abm-role .pick-group h3{font-family:var(--display);font-size:16px;font-weight:600;margin:0 0 10px}
.abm.abm-role .pick-row{display:flex;flex-wrap:wrap;gap:8px}
.abm.abm-role .pick{border:0;background:var(--card);color:var(--ink);border-radius:12px;padding:10px 15px;font:inherit;font-size:14px;cursor:pointer;min-height:42px;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .pick:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .pick[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text);font-weight:600;box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .self-foot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:22px;font-size:14px;color:var(--muted)}
.abm.abm-role .self-need{margin-top:22px;max-width:760px}
.abm.abm-role .self-need textarea{width:100%;resize:vertical}
.abm.abm-role .need-hint{font-size:13.5px;color:var(--muted);margin-top:8px}
.abm.abm-role .why-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:18px}
.abm.abm-role .why-progress{flex:1;min-width:120px;max-width:220px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.abm.abm-role .why-progress i{display:block;height:100%;width:0;background:var(--accent)}
.abm.abm-role .why{overflow:hidden;border-radius:18px}
.abm.abm-role .why-track{display:flex;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.abm.abm-role .why-card{flex:0 0 100%;background:var(--creme);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:minmax(200px,300px) 1fr;align-items:stretch}
.abm.abm-role .why-card .art{min-height:120px;display:grid;place-items:center;padding:18px;background:var(--accent-soft)}
.abm.abm-role .why-card:nth-child(2) .art{background:color-mix(in srgb,var(--acc2) 22%,var(--creme))}
.abm.abm-role .why-card .art svg{width:100%;max-width:210px;height:100%}
.abm.abm-role .why-card .body{padding:22px 24px 26px;display:grid;gap:12px}
.abm.abm-role .why-card h3{font-size:20px;font-weight:600}
.abm.abm-role .why-card ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.abm.abm-role .why-card li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;line-height:1.5}
.abm.abm-role .why-card li b{font-weight:600;color:var(--ink)}
.abm.abm-role .why-card li::before{content:"";width:12px;height:12px;margin-top:6px;border-radius:4px;background:var(--accent)}
.abm.abm-role .why-card .fair{font-size:13.5px;color:var(--muted);padding-top:4px}
@media (max-width:820px){.abm.abm-role .why-card{grid-template-columns:1fr}
.abm.abm-role .why-card .art{min-height:110px}
}
@media (prefers-reduced-motion:reduce){.abm.abm-role .why-track{transition:none}
}
.abm.abm-role section.sep{border-top:1px solid var(--line)}
.abm.abm-role .proof-sec{background:var(--dark);color:var(--dark-ink)}
.abm.abm-role .proof{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.abm.abm-role .proof-sec .eyebrow{color:var(--acc2)}
.abm.abm-role .proof-sec .lead{color:rgba(255,255,255,.8)}
.abm.abm-role .facts{display:grid;gap:14px}
.abm.abm-role .kv-proof{width:min(330px,100%);height:auto;justify-self:center;display:block;margin-block:-40px}
.abm.abm-role .fact{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:14px}
.abm.abm-role .fact b{font-family:var(--display);font-size:28px;font-weight:600;min-width:3.2ch}
.abm.abm-role .fact:nth-child(1) b{color:var(--b-orange)}
.abm.abm-role .fact:nth-child(2) b{color:var(--b-yellow)}
.abm.abm-role .fact:nth-child(3) b{color:var(--b-green)}
.abm.abm-role .fact span{color:rgba(255,255,255,.85)}
.abm.abm-role .colleagues{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.abm.abm-role .colleague{background:var(--card);border-radius:18px;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-content:start}
.abm.abm-role .avatar{width:50px;height:50px;border-radius:50%;background:var(--av);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:18px;grid-row:span 2}
.abm.abm-role .colleague .who{font-family:var(--display);font-weight:600;font-size:19px;align-self:end}
.abm.abm-role .colleague .role{font-size:13px;color:var(--faint)}
.abm.abm-role .colleague p,.abm.abm-role .colleague button{grid-column:1 / -1}
.abm.abm-role .colleague p{color:var(--muted);font-size:15px;margin-top:6px}
.abm.abm-role .colleague button{justify-self:start;margin-top:6px}
.abm.abm-role .close-in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:end;justify-content:space-between}
.abm.abm-role .close h2{font-size:clamp(28px,4vw,40px);font-weight:700;max-width:20ch}
.abm.abm-role .brand{font-family:var(--display);font-weight:600;color:var(--muted);margin-top:12px}
.abm.abm-role .brand em{font-style:normal;color:var(--b-orange)}
@media (max-width:860px){.abm.abm-role .hero-in,.abm.abm-role .proof,.abm.abm-role .band,.abm.abm-role .calc{grid-template-columns:1fr}
.abm.abm-role .kv{justify-self:center;margin-right:0;width:min(320px,80%)}
.abm.abm-role .kv-proof{width:min(240px,70%);margin-block:8px 0}
.abm.abm-role .hero-visual .idea-box{margin-top:-60px}
.abm.abm-role .ideas,.abm.abm-role .colleagues,.abm.abm-role .strip,.abm.abm-role .calc-fields{grid-template-columns:1fr}
.abm.abm-role section{padding-block:56px}
}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .swap{animation:fade .25s ease}

  @keyframes fade{from{opacity:.5}to{opacity:1}}
}

.abm.abm-role{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.abm.abm-role .note{display:none}
.abm.abm-role .cmp-loader{display:flex;justify-content:center;align-items:center;min-height:60vh}
.abm.abm-role .cmp-loader::after{content:'';width:40px;height:40px;border-radius:50%;border:3px solid rgba(19,26,42,.15);border-top-color:rgb(19,26,42);animation:cmp-spin .8s linear infinite}
@keyframes cmp-spin{to{transform:rotate(360deg)}}
.abm.abm-role h1,.abm.abm-role h2,.abm.abm-role h3,.abm.abm-role h4,.abm.abm-role p,.abm.abm-role span,.abm.abm-role b{text-transform:none}
/* account manager widget: the page sanitizer strips position:fixed from inline styles */
.abm.abm-role .am{position:fixed;left:16px;bottom:16px;z-index:50}
.abm.abm-role .am summary::-webkit-details-marker{display:none}

/* abm-widget 2026-10-21 */
.abm.abm-role .hero-in{padding-block:40px 48px;gap:40px}
.abm.abm-role .campaign{margin-bottom:10px}
.abm.abm-role .cobrand{margin-bottom:14px}
.abm.abm-role .kv.tall{width:auto;max-width:min(300px,80%);max-height:300px}
.abm.abm-role .hero-visual .idea-box{margin-top:-96px}
.abm.abm-role .hero-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muted)}
.abm.abm-role .hero-points li{display:flex;align-items:center;gap:7px}
.abm.abm-role .hero-points li::before{content:'';width:12px;height:6px;border-left:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);transform:translateY(-2px) rotate(-45deg)}
.abm.abm-role .am{left:auto;right:20px;bottom:20px;width:max-content;max-width:min(460px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px -12px rgba(19,26,42,.28);font-family:var(--body);color:var(--ink)}
.abm.abm-role .am-head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px}
.abm.abm-role .am-pic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent-soft) center/cover no-repeat;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.abm.abm-role .am-who{display:flex;flex-direction:column;min-width:0;flex:1}
.abm.abm-role .am-hi{font-weight:600;font-size:15px;line-height:1.3}
.abm.abm-role .am-role{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm.abm-role .am-toggle{flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 4px 4px 0}
.abm.abm-role .am[open] .am-toggle{transform:rotate(-135deg);margin:4px 4px 0 0}
.abm.abm-role .am-body{padding:0 14px 14px;display:grid;gap:10px;width:0;min-width:100%}
.abm.abm-role .am-pitch{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.abm.abm-role .am-cta{flex:none;width:auto;padding:10px 16px;font-size:14px;white-space:nowrap}
.abm.abm-role .am-links{margin:0;display:flex;gap:16px;font-size:13px}
.abm.abm-role .am-links a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.abm.abm-role .am{right:16px;bottom:16px;width:auto;left:16px}.abm.abm-role .am-head{flex-wrap:wrap}.abm.abm-role .am-cta{order:3;width:100%;text-align:center;justify-content:center}}

.abm.abm-partner{
  
  --b-ink:#292D3E;--b-orange:#F45F3A;--b-yellow:#FFC505;--b-blue:#3A8DFF;--b-purple:#884DFF;--b-teal:#398FA5;
  --b-green:#8ECCC5;--b-red:#F97C7C;--b-lilac:#CCB3FF;--b-creme:#F7F4EF;--b-beige:#EBE8E4;
  
  --bur-accent:#F45F3A;--bur-soft:#FDECE6;--bur-text:#C23E1B;--bur-acc2:#FFC505;
  --con-accent:#398FA5;--con-soft:#E4F3F1;--con-text:#246B7C;--con-acc2:#3A8DFF;
  --imp-accent:#2F74E0;--imp-soft:#E6F0FF;--imp-text:#1F56B8;--imp-acc2:#FFC505;
  --ver-accent:#884DFF;--ver-soft:#F1EAFF;--ver-text:#5B2ED6;--ver-acc2:#FFC505;
  --accent:var(--bur-accent);--accent-soft:var(--bur-soft);--accent-text:var(--bur-text);--acc2:var(--bur-acc2);
  --ink:#292D3E;--muted:#5F6475;--faint:#8B90A0;
  --paper:#FFFFFF;--creme:#F7F4EF;--line:#E6E1D9;--card:#FFFFFF;
  --dark:#292D3E;--dark-ink:#FFFFFF;
  --chrome:#1E2130;--chrome-ink:#F4F2F7;--chrome-muted:#A3A8B8;
  --note-bg:#EEF3FB;--note-ink:#2B4A7A;--note-line:#CFDCF0;
  --tbc-bg:#FFF6D6;--tbc-line:#E3B200;--tbc-ink:#6B5200;
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.abm.abm-partner.face-bur{--accent:var(--bur-accent);--accent-soft:var(--bur-soft);--accent-text:var(--bur-text);--acc2:var(--bur-acc2)}
.abm.abm-partner.face-con{--accent:var(--con-accent);--accent-soft:var(--con-soft);--accent-text:var(--con-text);--acc2:var(--con-acc2)}
.abm.abm-partner.face-imp{--accent:var(--imp-accent);--accent-soft:var(--imp-soft);--accent-text:var(--imp-text);--acc2:var(--imp-acc2)}
.abm.abm-partner.face-ver{--accent:var(--ver-accent);--accent-soft:var(--ver-soft);--accent-text:var(--ver-text);--acc2:var(--ver-acc2)}
.abm.abm-partner, .abm.abm-partner *{box-sizing:border-box}
.abm.abm-partner{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
.abm.abm-partner h1,.abm.abm-partner h2,.abm.abm-partner h3,.abm.abm-partner h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.abm.abm-partner p{margin:0}
.abm.abm-partner button,.abm.abm-partner input{font:inherit;color:inherit}
.abm.abm-partner :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-partner .wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.abm.abm-partner .chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome);color:var(--chrome-ink);padding:10px 16px}
.abm.abm-partner .chrome-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.abm.abm-partner .chrome-label{font-size:12px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.abm.abm-partner .chrome-label b{color:var(--chrome-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.abm.abm-partner .seg{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.abm.abm-partner .seg button{background:none;border:0;color:var(--chrome-muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.abm.abm-partner .seg button:hover{color:var(--chrome-ink);background:rgba(255,255,255,.08)}
.abm.abm-partner .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--chrome-muted);cursor:pointer}
.abm.abm-partner .toggle input{accent-color:var(--accent)}
.abm.abm-partner section{padding-block:80px}
.abm.abm-partner section.alt{background:var(--creme)}
.abm.abm-partner .eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.abm.abm-partner .h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.15;max-width:26ch}
.abm.abm-partner .lead{color:var(--muted);font-size:18px;max-width:60ch}
.abm.abm-partner .sec-head{display:grid;gap:12px;margin-bottom:36px}
.abm.abm-partner .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;font-size:15px;transition:transform .15s ease,filter .15s ease}
.abm.abm-partner .btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.abm.abm-partner .btn-primary{background:var(--accent);color:#fff}
.abm.abm-partner .btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .btn-quiet:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.abm.abm-partner .pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.abm.abm-partner .p-rec{background:var(--accent);color:#fff}
.abm.abm-partner .p-also{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.abm.abm-partner .echo{font-size:14px;color:var(--accent-text);background:var(--accent-soft);padding:10px 14px;border-radius:10px}
.abm.abm-partner .num{font-variant-numeric:tabular-nums}
.abm.abm-partner .note{display:none;margin-top:22px;background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;max-width:82ch}
.abm.abm-partner .note b{font-weight:600}
.abm.abm-partner .note p+p{margin-top:6px}
.abm.abm-partner.show-notes .note{display:block}
.abm.abm-partner .tbc{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--tbc-ink);background:var(--tbc-bg);box-shadow:inset 0 0 0 1px var(--tbc-line);border-radius:6px;padding:1px 7px;white-space:nowrap;vertical-align:1px}
.abm.abm-partner .hero{background:var(--creme);padding-block:0;position:relative;overflow:hidden}
.abm.abm-partner .hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-block:64px 80px;align-items:center;position:relative}
.abm.abm-partner .campaign{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);letter-spacing:-.005em;display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:22px}
.abm.abm-partner .campaign span:nth-child(3){color:var(--accent-text)}
.abm.abm-partner .cobrand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:22px;color:var(--ink)}
.abm.abm-partner .cobrand .x{color:var(--faint);font-weight:500}
.abm.abm-partner .hero h1{font-size:clamp(32px,4.8vw,50px);font-weight:700;line-height:1.07;margin-top:12px}
.abm.abm-partner .hero .lead{margin-top:18px}
.abm.abm-partner .face{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.abm.abm-partner .face::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.abm.abm-partner .hero-cta{margin-top:26px}
.abm.abm-partner .idea-box{background:var(--card);border-radius:18px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -34px rgba(41,45,62,.45)}
.abm.abm-partner .idea-box label{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2}
.abm.abm-partner .idea-box .sub{font-size:14px;color:var(--muted);margin-top:-6px}
.abm.abm-partner .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:15px}
.abm.abm-partner .field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-partner .hero-visual{position:relative;display:grid}
.abm.abm-partner .kv{width:min(430px,100%);height:auto;justify-self:end;margin-right:-24px;display:block}
.abm.abm-partner .kv.tall{width:min(340px,80%)}
.abm.abm-partner .hero-visual .idea-box{width:min(410px,100%);margin-top:-170px;position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .kv{animation:kvin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes kvin{from{transform:translateY(18px) rotate(-3deg);opacity:.6}to{transform:none;opacity:1}}
}
.abm.abm-partner .plan-dlg{border:0;border-radius:20px;padding:30px 30px 26px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:auto;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.abm.abm-partner .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.abm.abm-partner .plan-dlg h3{font-size:24px;font-weight:600;margin-top:6px}
.abm.abm-partner .dlg-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;color:var(--faint);cursor:pointer;width:36px;height:36px;border-radius:10px}
.abm.abm-partner .dlg-x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-partner .plan-quote{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--creme);color:var(--ink);font-weight:500}
.abm.abm-partner .plan-steps{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}
.abm.abm-partner .plan-steps li::marker{color:var(--accent-text);font-weight:600}
.abm.abm-partner .plan-bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.abm.abm-partner .plan-bricks span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--creme);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .plan-start{margin-top:14px;font-size:14px;color:var(--muted)}
.abm.abm-partner .plan-role{margin-top:14px}
.abm.abm-partner .plan-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.abm.abm-partner .plan-cta h4{font-size:18px;font-weight:600}
.abm.abm-partner .plan-mail{font-size:13px;color:var(--faint)}
.abm.abm-partner .idea-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.abm.abm-partner .link-btn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.abm.abm-partner .types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.abm.abm-partner .type{background:var(--creme);border-radius:18px;padding:22px 20px 22px;display:grid;gap:12px;align-content:start;grid-template-rows:auto auto auto 1fr}
.abm.abm-partner .type.rec{background:var(--accent-soft)}
.abm.abm-partner .type-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.abm.abm-partner .type-top small{font-size:12px;color:var(--faint)}
.abm.abm-partner .type h3{font-size:20px;font-weight:600}
.abm.abm-partner .type dl{margin:0;display:grid;gap:10px;font-size:14.5px}
.abm.abm-partner .type dt{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .type dd{margin:2px 0 0;color:var(--muted)}
.abm.abm-partner .type.rec dd{color:var(--ink)}
.abm.abm-partner .mini-bricks{display:flex;flex-wrap:wrap;gap:12px 6px;padding-top:6px;margin-bottom:4px}
.abm.abm-partner .brick{position:relative;border:0;border-radius:10px;padding:18px 10px 14px;font-family:var(--display);font-weight:600;font-size:14.5px;text-align:center;background:var(--accent-soft);color:var(--accent-text);min-height:64px;display:grid;place-content:center;gap:2px}
.abm.abm-partner .brick::before,.abm.abm-partner .brick::after{content:"";position:absolute;top:-6px;width:14px;height:7px;border-radius:4px 4px 0 0;background:inherit}
.abm.abm-partner .brick::before{left:24%}
.abm.abm-partner .brick::after{right:24%}
.abm.abm-partner .brick.sm{min-height:0;padding:9px 12px 7px;font-size:12.5px;border-radius:8px}
.abm.abm-partner .brick.sm::before,.abm.abm-partner .brick.sm::after{top:-5px;width:10px;height:5px;border-radius:3px 3px 0 0}
.abm.abm-partner .brick.base{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.abm.abm-partner .brick.base::before,.abm.abm-partner .brick.base::after{background:var(--line)}
.abm.abm-partner .brick.hl{background:var(--accent);color:#fff}
.abm.abm-partner .shift{margin-top:40px;display:grid;gap:14px}
.abm.abm-partner .shift h3{font-size:20px;font-weight:600}
.abm.abm-partner .shift-rows{display:grid;gap:8px}
.abm.abm-partner .shift-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;background:var(--creme);border-radius:14px;padding:14px 18px;font-size:15px}
.abm.abm-partner .shift-row .now{color:var(--muted)}
.abm.abm-partner .shift-row .arrow{color:var(--accent-text);font-weight:700}
.abm.abm-partner .shift-row .with{font-weight:500}
.abm.abm-partner .shift-head{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;padding:0 18px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .shift-head span:nth-child(2){visibility:hidden}
.abm.abm-partner .calc{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px}
.abm.abm-partner .calc-group{background:var(--card);border-radius:16px;padding:20px 22px;display:grid;gap:16px;align-content:start}
.abm.abm-partner .calc-group h4{font-size:16px;font-weight:600}
.abm.abm-partner .calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.abm.abm-partner .fieldset{display:grid;gap:6px;align-content:start}
.abm.abm-partner .fieldset.full{grid-column:1 / -1}
.abm.abm-partner .fieldset label,.abm.abm-partner .fieldset .lbl{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.abm.abm-partner .ex{font-size:11px;font-weight:600;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line);border-radius:5px;padding:0 6px}
.abm.abm-partner .stepper{display:inline-flex;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden;width:max-content}
.abm.abm-partner .stepper:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .stepper button{border:0;background:none;width:38px;font-size:18px;color:var(--accent-text);cursor:pointer;font-weight:600}
.abm.abm-partner .stepper button:hover{background:var(--accent-soft)}
.abm.abm-partner .stepper input{width:72px;border:0;border-inline:1px solid var(--line);text-align:center;background:none;font-variant-numeric:tabular-nums;padding:9px 4px;-moz-appearance:textfield}
.abm.abm-partner .stepper input:focus{outline:none}
.abm.abm-partner .stepper input::-webkit-outer-spin-button,.abm.abm-partner .stepper input::-webkit-inner-spin-button,.abm.abm-partner .pct input::-webkit-outer-spin-button,.abm.abm-partner .pct input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-partner .segctl{display:inline-flex;flex-wrap:wrap;background:var(--paper);border-radius:12px;padding:4px;box-shadow:inset 0 0 0 1.5px var(--line);gap:4px}
.abm.abm-partner .segctl button{border:0;background:none;padding:8px 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;display:grid;text-align:left;line-height:1.25}
.abm.abm-partner .segctl button small{font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.abm.abm-partner .segctl button:hover{background:var(--accent-soft);color:var(--accent-text)}
.abm.abm-partner .segctl button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .pct{display:inline-flex;align-items:center;gap:0;border-radius:10px;background:var(--tbc-bg);box-shadow:inset 0 0 0 1.5px var(--tbc-line);width:max-content;overflow:hidden}
.abm.abm-partner .pct:focus-within{box-shadow:inset 0 0 0 2px var(--tbc-line),0 0 0 4px var(--tbc-bg)}
.abm.abm-partner .pct input{width:90px;border:0;background:none;padding:9px 12px;font-variant-numeric:tabular-nums;color:var(--ink);-moz-appearance:textfield}
.abm.abm-partner .pct input:focus{outline:none}
.abm.abm-partner .pct input::placeholder{color:var(--tbc-ink);opacity:.9}
.abm.abm-partner .pct span{padding-right:12px;color:var(--tbc-ink);font-weight:600}
.abm.abm-partner .calc-hint{font-size:13px;color:var(--muted)}
.abm.abm-partner .results{display:grid;gap:10px;align-content:start}
.abm.abm-partner .stat{background:var(--card);border-radius:16px;padding:16px 20px;display:grid;gap:2px}
.abm.abm-partner .stat span{font-size:13px;color:var(--muted)}
.abm.abm-partner .stat b{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:600;font-variant-numeric:tabular-nums}
.abm.abm-partner .stat small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .stat.open b{color:var(--tbc-ink);font-size:18px;font-family:var(--body);font-weight:600}
.abm.abm-partner .stat.open{background:var(--tbc-bg)}
.abm.abm-partner .stat.win{background:var(--accent);color:#fff}
.abm.abm-partner .stat.win span,.abm.abm-partner .stat.win small{color:rgba(255,255,255,.9)}
.abm.abm-partner .calc-foot{font-size:13px;color:var(--muted);max-width:80ch;display:grid;gap:6px}
.abm.abm-partner .benefit-groups{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.abm.abm-partner .bgroup h3{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm.abm-partner .benefits{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.abm.abm-partner .benefit{background:var(--creme);border-radius:14px;padding:14px 18px;display:grid;gap:3px}
.abm.abm-partner .benefit b{font-family:var(--display);font-weight:600;font-size:16px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.abm.abm-partner .benefit span{color:var(--muted);font-size:14.5px}
.abm.abm-partner .benefit.focus{background:var(--accent-soft)}
.abm.abm-partner .benefit.focus span{color:var(--ink)}
.abm.abm-partner .benefit.tbd{background:var(--tbc-bg);box-shadow:inset 0 0 0 1.5px var(--tbc-line)}
.abm.abm-partner .benefit.tbd span{color:var(--ink)}
.abm.abm-partner .s-bg{fill:var(--card)}
.abm.abm-partner .s-ln{stroke:var(--faint);fill:none;stroke-width:1.5}
.abm.abm-partner .s-fl{fill:var(--faint);opacity:.3}
.abm.abm-partner .s-ac{fill:var(--accent)}
.abm.abm-partner .s-acl{stroke:var(--accent);fill:none;stroke-width:2}
.abm.abm-partner .s-sf{fill:var(--accent-soft)}
.abm.abm-partner .s-y{fill:var(--acc2)}
.abm.abm-partner .leads-sec{background:var(--accent-soft)}
.abm.abm-partner .leads-sec .lead{color:var(--ink)}
.abm.abm-partner .leadflow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-top:26px}
.abm.abm-partner .channels-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.abm.abm-partner .channels-head h3{font-size:19px;font-weight:600}
.abm.abm-partner .channels-head p{color:var(--ink);font-size:14.5px}
.abm.abm-partner .channels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.abm.abm-partner .ch{background:var(--card);border-radius:14px;padding:14px 14px 13px;display:grid;grid-template-columns:36px 1fr;column-gap:12px;row-gap:2px;align-items:start}
.abm.abm-partner .ch-ico{grid-row:span 2;width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center}
.abm.abm-partner .ch:nth-child(3n+2) .ch-ico{background:var(--acc2);color:var(--b-ink)}
.abm.abm-partner .ch:nth-child(3n) .ch-ico{background:var(--b-ink);color:#fff}
.abm.abm-partner .ch-ico svg{width:20px;height:20px}
.abm.abm-partner .ch b{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25}
.abm.abm-partner .ch span:not(.ch-ico){font-size:13px;color:var(--muted);line-height:1.4}
.abm.abm-partner .channels-foot{margin-top:10px;font-size:13px;color:var(--muted)}
@media (max-width:960px){.abm.abm-partner .channels{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){.abm.abm-partner .channels{grid-template-columns:1fr}
}
.abm.abm-partner .lf-col{background:var(--card);border-radius:18px;padding:18px 18px 16px;display:grid;gap:12px;align-content:start;box-shadow:0 18px 40px -32px rgba(41,45,62,.4)}
.abm.abm-partner .lf-col small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .lf-label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--accent-text)}
.abm.abm-partner .lf-bricks{display:flex;flex-wrap:wrap;gap:12px 6px;padding-top:6px}
.abm.abm-partner .lf-line{font-size:14px;color:var(--ink);font-weight:500}
.abm.abm-partner .lf-arrow{align-self:center;font-family:var(--display);font-size:30px;color:var(--accent);font-weight:700}
.abm.abm-partner .lf-leads{display:grid;gap:8px}
.abm.abm-partner .lead-chip{display:flex;align-items:center;gap:10px;background:var(--creme);border-radius:10px;padding:8px 10px;font-size:13.5px}
.abm.abm-partner .lead-chip i{width:8px;height:8px;border-radius:50%;background:var(--acc2);flex-shrink:0}
.abm.abm-partner .lead-chip b{font-weight:600}
.abm.abm-partner .lf-you{background:var(--accent);color:#fff}
.abm.abm-partner .lf-you .lf-label{color:rgba(255,255,255,.85)}
.abm.abm-partner .lf-you small{color:rgba(255,255,255,.85)}
.abm.abm-partner .lf-you .tbc{white-space:normal}
.abm.abm-partner .match{display:grid;gap:8px}
.abm.abm-partner .match-card{background:rgba(255,255,255,.14);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.abm.abm-partner .match-card b{font-family:var(--display);font-size:17px;font-weight:600}
.abm.abm-partner .match-card span{font-size:13.5px;color:rgba(255,255,255,.9)}
.abm.abm-partner .lead-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.abm.abm-partner .lead-point{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:6px}
.abm.abm-partner .lead-point b{font-family:var(--display);font-weight:600;font-size:17px}
.abm.abm-partner .lead-point span{color:var(--muted);font-size:14.5px}
.abm.abm-partner .hero-leads{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:var(--ink)}
.abm.abm-partner .hero-leads::before{content:"✦";color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .play .lead-chip{animation:chipin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 140ms)}
.abm.abm-partner .play .match-card{animation:chipin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:.55s}

  @keyframes chipin{from{transform:translateX(-14px);opacity:.35}to{transform:none;opacity:1}}
}
.abm.abm-partner .type-art{background:var(--card);border-radius:12px;height:92px;display:grid;place-items:center;padding:8px;margin-bottom:2px}
.abm.abm-partner .type.rec .type-art{background:color-mix(in srgb,var(--card) 70%,var(--accent-soft))}
.abm.abm-partner .type-art svg{width:100%;max-width:180px;height:100%}
.abm.abm-partner .shift-row{grid-template-columns:1fr 44px 1fr;padding:0;background:none;gap:10px}
.abm.abm-partner .shift-row .now,.abm.abm-partner .shift-row .with{border-radius:14px;padding:16px 18px;display:grid;gap:4px;align-content:center;min-height:74px}
.abm.abm-partner .shift-row .now{background:var(--creme);color:var(--muted)}
.abm.abm-partner .shift-row .with{background:var(--accent-soft);color:var(--ink);font-weight:500}
.abm.abm-partner .shift-row .arrow{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;justify-self:center;font-size:18px}
.abm.abm-partner .shift-row.lead-row .with{background:var(--accent);color:#fff}
.abm.abm-partner .shift-row.lead-row .with small{color:rgba(255,255,255,.88)}
.abm.abm-partner .shift-row small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.abm.abm-partner .shift-head{grid-template-columns:1fr 44px 1fr;padding:0 4px}
.abm.abm-partner .calc-left{display:grid;gap:16px;align-content:start}
.abm.abm-partner .store-note{font-size:13px;color:var(--muted)}
.abm.abm-partner .benefit.lead{background:var(--accent);color:#fff}
.abm.abm-partner .benefit.lead span{color:rgba(255,255,255,.9)}
.abm.abm-partner .benefit.lead .pill{background:#fff;color:var(--accent-text)}
.abm.abm-partner .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.abm.abm-partner .prod{background:var(--creme);border-radius:18px;overflow:hidden;display:grid;align-content:start}
.abm.abm-partner .prod-art{height:110px;display:grid;place-items:center;padding:12px;background:var(--accent-soft)}
.abm.abm-partner .prod:nth-child(2) .prod-art{background:color-mix(in srgb,var(--acc2) 22%,var(--card))}
.abm.abm-partner .prod:nth-child(3) .prod-art{background:color-mix(in srgb,var(--b-blue) 14%,var(--card))}
.abm.abm-partner .prod-art svg{width:100%;max-width:200px;height:100%}
.abm.abm-partner .prod-body{padding:18px 20px 20px;display:grid;gap:8px}
.abm.abm-partner .prod-body h3{font-size:18px;font-weight:600}
.abm.abm-partner .prod-body p{color:var(--muted);font-size:14.5px}
.abm.abm-partner .prod-body .how{font-size:13px;color:var(--ink)}
.abm.abm-partner .prod-body .how b{color:var(--accent-text)}
.abm.abm-partner .ladder{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;margin-top:22px}
.abm.abm-partner .rung{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:4px}
.abm.abm-partner .rung small{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--accent-text)}
.abm.abm-partner .rung b{font-family:var(--display);font-weight:600;font-size:16px}
.abm.abm-partner .rung span{font-size:13.5px;color:var(--muted)}
.abm.abm-partner .rung.top{background:var(--accent);box-shadow:none;color:#fff}
.abm.abm-partner .rung.top small,.abm.abm-partner .rung.top span{color:rgba(255,255,255,.9)}
.abm.abm-partner .ladder .arrow{align-self:center;font-family:var(--display);font-weight:700;font-size:24px;color:var(--accent)}
@media (max-width:860px){.abm.abm-partner .prod-grid,.abm.abm-partner .ladder{grid-template-columns:1fr}
.abm.abm-partner .ladder .arrow{transform:rotate(90deg);justify-self:center}
}
.abm.abm-partner .ubr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.abm.abm-partner .ubr{background:var(--creme);border-radius:18px;padding:22px 22px 24px;display:grid;gap:10px;align-content:start;position:relative}
.abm.abm-partner .ubr.hl{background:var(--accent);color:#fff}
.abm.abm-partner .ubr.hl p{color:rgba(255,255,255,.9)}
.abm.abm-partner .ubr .brick{justify-self:start;min-height:0;padding:10px 14px 8px;font-size:13px}
.abm.abm-partner .ubr.hl .brick{background:#fff;color:var(--accent-text)}
.abm.abm-partner .ubr h3{font-size:21px;font-weight:600;line-height:1.2}
.abm.abm-partner .ubr p{color:var(--muted);font-size:15px}
.abm.abm-partner .ubr-more{margin-top:16px;font-size:14.5px;color:var(--muted)}
.abm.abm-partner .type-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.abm.abm-partner .type-tab{border:0;border-radius:12px;padding:10px 14px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;text-align:left;display:grid;gap:2px;color:var(--ink)}
.abm.abm-partner .type-tab b{font-family:var(--display);font-weight:600;font-size:16px}
.abm.abm-partner .type-tab small{font-size:12px;color:var(--faint)}
.abm.abm-partner .type-tab:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .type-tab[aria-selected="true"]{background:var(--accent);box-shadow:none;color:#fff}
.abm.abm-partner .type-tab[aria-selected="true"] small{color:rgba(255,255,255,.85)}
.abm.abm-partner .type-tab .rec-dot{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--acc2);color:var(--ink);vertical-align:2px}
.abm.abm-partner .type-panel{background:var(--card);border-radius:18px;padding:22px;display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}
.abm.abm-partner .type-panel .type-art{background:var(--accent-soft);height:140px;margin:0}
.abm.abm-partner .type-panel h3{font-size:22px;font-weight:600;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm.abm-partner .type-panel dl{margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:15px}
.abm.abm-partner .type-panel dt{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .type-panel dd{margin:4px 0 0;color:var(--ink)}
.abm.abm-partner section.sep{border-top:1px solid var(--line)}
@media (max-width:860px){.abm.abm-partner .ubr-grid,.abm.abm-partner .type-panel,.abm.abm-partner .type-panel dl{grid-template-columns:1fr}
}
.abm.abm-partner .status-block{margin-top:26px;display:grid;gap:14px}
.abm.abm-partner .status-block h3{font-size:18px;font-weight:600}
.abm.abm-partner .status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.abm.abm-partner .status{background:var(--card);border-radius:16px;padding:16px 16px 14px;display:grid;gap:10px;align-content:start;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .status.on{box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-partner .status-top{display:grid;gap:2px}
.abm.abm-partner .status-top b{font-family:var(--display);font-size:18px;font-weight:600}
.abm.abm-partner .status-top small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .status-pct{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.abm.abm-partner .status-pct span{background:var(--accent-soft);border-radius:8px;padding:6px 4px;text-align:center;font-family:var(--display);font-weight:600;font-size:15px;color:var(--accent-text);display:grid}
.abm.abm-partner .status-pct small{font-family:var(--body);font-weight:500;font-size:10.5px;color:var(--muted)}
.abm.abm-partner .status ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);display:grid;gap:4px}
.abm.abm-partner .referral{margin-top:14px;font-size:14.5px;color:var(--muted);max-width:80ch}
.abm.abm-partner .benefit.ask{background:var(--accent-soft)}
.abm.abm-partner .benefit.ask span{color:var(--ink)}
.abm.abm-partner .asks-note{font-size:13px;color:var(--faint);margin-top:8px}
@media (max-width:860px){.abm.abm-partner .status-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){.abm.abm-partner .status-grid{grid-template-columns:1fr}
}
.abm.abm-partner .fit{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.abm.abm-partner .fit span{background:rgba(255,255,255,.16);border-radius:8px;padding:5px 8px;font-size:12.5px;display:grid;gap:1px}
.abm.abm-partner .fit em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.abm.abm-partner .proof-sec{background:var(--dark);color:var(--dark-ink)}
.abm.abm-partner .proof{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.abm.abm-partner .proof-sec .eyebrow{color:var(--acc2)}
.abm.abm-partner .proof-sec .lead{color:rgba(255,255,255,.82)}
.abm.abm-partner .facts{display:grid;gap:14px}
.abm.abm-partner .kv-proof{width:min(330px,100%);height:auto;justify-self:center;display:block;margin-block:-40px}
.abm.abm-partner .fact{display:grid;grid-template-columns:7.5em 1fr;gap:16px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:14px}
.abm.abm-partner .fact b{font-family:var(--display);font-size:20px;font-weight:600}
.abm.abm-partner .fact:nth-child(1) b{color:var(--b-orange)}
.abm.abm-partner .fact:nth-child(2) b{color:var(--b-yellow)}
.abm.abm-partner .fact:nth-child(3) b{color:var(--b-green)}
.abm.abm-partner .fact span{color:rgba(255,255,255,.88)}
.abm.abm-partner .close-in{display:grid;gap:22px}
.abm.abm-partner .close h2{font-size:clamp(28px,4vw,40px);font-weight:700;max-width:22ch}
.abm.abm-partner .brand{font-family:var(--display);font-weight:600;color:var(--muted);margin-top:28px;font-size:18px}
.abm.abm-partner .brand em{font-style:normal;color:var(--b-orange)}
@media (max-width:960px){.abm.abm-partner .types{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){.abm.abm-partner .hero-in,.abm.abm-partner .proof,.abm.abm-partner .calc,.abm.abm-partner .benefit-groups,.abm.abm-partner .lead-points{grid-template-columns:1fr}
.abm.abm-partner .leadflow{grid-template-columns:1fr}
.abm.abm-partner .lf-arrow{transform:rotate(90deg);justify-self:center}
.abm.abm-partner .kv{justify-self:center;margin-right:0;width:min(320px,80%)}
.abm.abm-partner .kv-proof{width:min(240px,70%);margin-block:8px 0}
.abm.abm-partner .hero-visual .idea-box{margin-top:-60px}
.abm.abm-partner section{padding-block:56px}
}
@media (max-width:600px){.abm.abm-partner .types,.abm.abm-partner .calc-fields{grid-template-columns:1fr}
.abm.abm-partner .shift-head{display:none}
.abm.abm-partner .shift-row{grid-template-columns:1fr;gap:4px}
.abm.abm-partner .shift-row .arrow{transform:rotate(90deg);justify-self:start}
.abm.abm-partner .fact{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .swap{animation:fade .25s ease}

  @keyframes fade{from{opacity:.5}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.abm.abm-partner .btn{transition:none}
.abm.abm-partner .btn:hover{transform:none}
}

.abm.abm-partner{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.abm.abm-partner .note,.abm.abm-partner .chrome{display:none}
.abm.abm-partner h1,.abm.abm-partner h2,.abm.abm-partner h3,.abm.abm-partner h4,.abm.abm-partner p,.abm.abm-partner span,.abm.abm-partner b{text-transform:none}
.abm.abm-partner .segctl button[aria-selected="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .seg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px}
.abm.abm-partner .seg-bar>span{font-weight:600}
.abm.abm-partner .seg-role{margin-top:18px;max-width:760px}

/* App align (class app-align, next to app-shell on the BisbrickMaster brick of the CRM list pages):
   the logo, the app menu, the page title, the stat strip, the tabs and the table all start on the
   page gutter (--app-gutter of App shell). The inset came from Bootstrap's column padding (12px a side)
   in the page's MultiColumns, one step per nesting level, and from the logo's own 20px in the master's
   floating menu. Only a column that starts a line loses its left padding, so the space between
   columns on one line stays. Generated by CRM-App-spec/local/align-crm-gutter.mjs. */

/* Logo: the master's navigationBar sets padding-left 20px inline on the logo link. */
.app603-korenbloem .app-shell.app-align > header .nb-logo {
  padding-left: var(--app-gutter) !important;
}

/* Level 1: the columns of a page block's MultiColumn. Level 2: the columns of a MultiColumn in such a
   column, directly or as the content of a TabContent tab (List / Card / Board). */
.app603-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.app603-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.app603-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div) {
  padding-left: 0;
}
/* A full-width column also ends on the gutter: the tabs and the table end where the menu ends. */
.app603-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.app603-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.app603-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12 {
  padding-right: 0;
}
/* Below 768px every column is full width, so every column starts a line. */
@media (max-width: 767.98px) {
.app603-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div,
.app603-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div,
.app603-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div {
    padding-left: 0;
    padding-right: 0;
  }
}

.app603-korenbloem .app-shell .app-focus .app-focus__list,
.app603-korenbloem .app-shell .app-focus .app-focus__checks {
  display: flex;
  flex-direction: column;
}
.app603-korenbloem .app-shell .app-focus .app-focus__row,
.app603-korenbloem .app-shell .app-focus .app-focus__check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #E4E0D8;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #292D3E;
}
.app603-korenbloem .app-shell .app-focus .app-focus__row:last-of-type,
.app603-korenbloem .app-shell .app-focus .app-focus__check:last-child {
  border-bottom: 0;
}
.app603-korenbloem .app-shell .app-focus .app-focus__row[data-n="0"],
.app603-korenbloem .app-shell .app-focus .app-focus__row[data-n=""] {
  display: none;
}
.app603-korenbloem .app-shell .app-focus .app-focus__count {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 5px;
  background: #F6F4F0;
  font-family: "Poppins-600";
  text-align: center;
}
.app603-korenbloem .app-shell .app-focus .app-focus__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app603-korenbloem .app-shell .app-focus .app-focus__detail {
  margin-left: 8px;
  color: #5F6475;
  font-size: 13px;
}
.app603-korenbloem .app-shell .app-focus .app-focus__go {
  flex: 0 0 auto;
  font-size: 13px;
  color: #F45F3A;
  text-decoration: none;
}
.app603-korenbloem .app-shell .app-focus .app-focus__go:hover {
  text-decoration: underline;
}
.app603-korenbloem .app-shell .app-focus .app-focus__go::after {
  content: " \203A";
}
.app603-korenbloem .app-shell .app-focus .app-focus__empty {
  display: none;
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-focus .app-focus__list[data-total="0"] .app-focus__empty {
  display: block;
}
.app603-korenbloem .app-shell .app-focus .app-focus__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.app603-korenbloem .app-shell .app-focus .app-focus__score {
  flex: 0 0 auto;
  font-family: "Poppins-600";
  font-size: 14px;
  color: #292D3E;
}
.app603-korenbloem .app-shell .app-focus .app-focus__bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: #F6F4F0;
  overflow: hidden;
}
.app603-korenbloem .app-shell .app-focus .app-focus__bar > span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: #2E7D4F;
}
.app603-korenbloem .app-shell .app-focus .app-focus__mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.5px solid #5F6475;
  border-radius: 50%;
}
/* Done checks: below the open ones, muted, without their fix link. */
.app603-korenbloem .app-shell .app-focus .app-focus__check[data-ok="1"],
.app603-korenbloem .app-shell .app-focus .app-focus__check[data-ok="true"] {
  order: 1;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__mark,
.app603-korenbloem .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__mark {
  border-color: #2E7D4F;
  background: #2E7D4F;
}
.app603-korenbloem .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__go,
.app603-korenbloem .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__detail,
.app603-korenbloem .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__go,
.app603-korenbloem .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__detail {
  display: none;
}
/* App canvas: the chrome of the approved UI-refresh canvas (v28) for every page that carries the
   Campaign_menu Page component. Dark 52px app bar, white header band with the campaign tabs,
   grey page, white cards. Scope: theme 13, opt-in through the page's own Campaign_menu. */
.app603-korenbloem .app-shell:has(.Campaign_menu) {
  background: #F4F3F0;
  font-family: "Poppins-400", Poppins, sans-serif;
  color: #292D3E;
}

/* The tenant site menu and footer are not part of the app; the account links stay, inside the bar. */
.app603-korenbloem .app-shell:has(.Campaign_menu) > header > bisbrick-list,
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .bottom-bar,
.app603-korenbloem .app-shell:has(.Campaign_menu) > footer {
  display: none !important;
}
/* The site navigation-bar is sticky: hidden, it measures top 0, "sticks" and teleports itself to
   body as position:fixed, out of reach of the rule above. The Campaign_menu bar is not sticky. */
body:has(.app-shell .Campaign_menu) > .nb-wrapper {
  display: none !important;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header {
  position: relative;
  height: 0;
  z-index: 20;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar {
  position: absolute;
  top: 0;
  right: 24px;
  height: 52px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .container {
  width: auto;
  max-width: none;
  padding: 0;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .navbar {
  padding: 0;
  background: transparent;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-item.language {
  display: none;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-item {
  padding: 0;
  margin: 0;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link {
  color: #D6D8E0 !important;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link span {
  font-weight: 400;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:hover {
  color: #FFFFFF !important;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link .fa-user {
  display: none;
}
/* The account name as the round avatar of the canvas (first letter; the full name is the tooltip-less link) */
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-item:has(.fa-user) {
  order: 9;
  margin-left: 8px;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #F4F3F0;
  color: #292D3E;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span::first-letter {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
}

/* App bar */
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(> .Campaign_menu) {
  padding: 0;
}
.app603-korenbloem .app-shell .Campaign_menu section,
.app603-korenbloem .app-shell .Campaign_menu .background {
  background: #292D3E !important;
  padding: 0 !important;
  margin: 0;
}
.app603-korenbloem .app-shell .Campaign_menu .background > div {
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}
.app603-korenbloem .app-shell .Campaign_menu .row {
  margin: 0;
}
.app603-korenbloem .app-shell .Campaign_menu .row > div {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  padding: 0 !important;
}
.app603-korenbloem .app-shell .Campaign_menu .nb-wrapper,
.app603-korenbloem .app-shell .Campaign_menu .navigation-bar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  min-height: 52px;
  height: 52px;
  padding: 0 !important;
}
.app603-korenbloem .app-shell .Campaign_menu .navigation-bar {
  display: flex;
  align-items: center;
  gap: 6px 22px;
}
.app603-korenbloem .app-shell .Campaign_menu .nb-zone-left {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
}
.app603-korenbloem .app-shell .Campaign_menu .nb-zone-left::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #F4F3F0;
  margin-right: 20px;
}
.app603-korenbloem .app-shell .Campaign_menu .nb-zone-center {
  display: none;
}
.app603-korenbloem .app-shell .Campaign_menu .nb-zone-right {
  margin-right: 300px;
}
/* Narrow screens: the navigation-bar folds into its hamburger; keep it visible on the dark bar,
   left of the account links. */
@media (max-width: 992px) {
  .app603-korenbloem .app-shell .Campaign_menu .nb-hamburger {
    color: #F4F3F0;
    margin-right: 300px;
  }
  .app603-korenbloem .app-shell .Campaign_menu .nb-zone-right {
    margin-right: 0;
  }
}
.app603-korenbloem .app-shell .Campaign_menu .nb-link {
  color: #D6D8E0 !important;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-size: 13px !important;
  font-weight: 400;
  padding: 6px 12px !important;
  border-radius: 5px;
  text-decoration: none;
  background: transparent;
  line-height: 1.5;
}
.app603-korenbloem .app-shell .Campaign_menu .nb-link::after {
  display: none !important;
}
.app603-korenbloem .app-shell .Campaign_menu .nb-link:hover {
  color: #FFFFFF !important;
}
/* Only the current page. active-parent is added by bisbrick-url but never removed on navigation,
   so it is reset to a plain link explicitly (the theme styles it as active too). */
.app603-korenbloem .app-shell .Campaign_menu .nb-link.active-parent:not(.nb-active) {
  color: #D6D8E0 !important;
  background: transparent;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-weight: 400;
}
/* The page names its own menu item through app-nav-N on the master (a campaign has no nb-active). */
.app603-korenbloem .app-shell.app-nav-1 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.app603-korenbloem .app-shell.app-nav-2 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.app603-korenbloem .app-shell.app-nav-3 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.app603-korenbloem .app-shell.app-nav-4 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.app603-korenbloem .app-shell.app-nav-5 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.app603-korenbloem .app-shell.app-nav-6 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.app603-korenbloem .app-shell.app-nav-7 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.app603-korenbloem .app-shell .Campaign_menu .nb-link.nb-active {
  color: #292D3E !important;
  background: #F4F3F0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
}

/* Page body: fluid, 24px gutters (Koos 2026-10-15: lists must use the full width, no 1200px column) */
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list {
  display: block;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:not(:has(> .Campaign_menu)) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  float: none;
}

/* Header band (white, full width): campaign name, status, actions, then the section tabs */
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) {
  background: #FFFFFF;
  /* sideways only: a clip-path here would also cut off menus that open below the band */
  border-image: linear-gradient(#FFFFFF, #FFFFFF) fill 0 / 0 / 0 100vmax;
  padding-top: 12px;
  padding-bottom: 10px;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) section,
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .background {
  background: transparent !important;
  padding: 0 !important;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row {
  align-items: center;
  flex-wrap: nowrap;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.app603-korenbloem .app-shell .app-head p {
  margin: 0;
}
.app603-korenbloem .app-shell .app-head > bisbrick-html-with-link > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.app603-korenbloem .app-shell .app-head .app-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px 0 12px;
  background: #F4F3F0;
  border-radius: 5px 0 0 5px;
  font-size: 0;
  margin-right: -14px !important;
}
.app603-korenbloem .app-shell .app-head .app-crumb::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
  font-weight: 600;
}
.app603-korenbloem .app-shell .app-head .app-crumb a {
  display: none;
}
.app603-korenbloem .app-shell .app-head .app-title {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px 0 10px;
  background: #F4F3F0;
  border-radius: 0 5px 5px 0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 17px !important;
  line-height: 1.2;
  color: #292D3E;
}
.app603-korenbloem .app-shell .app-head .app-meta {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 200px;
  font-size: 13px;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-head .app-meta > span:not(.app-badge) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.app603-korenbloem .app-shell .app-head .app-badge {
  display: inline-block;
  min-width: 88px;
  box-sizing: border-box;
  text-align: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  background: #F1ECE4;
  color: #5F6475;
}
.app603-korenbloem .app-shell .app-head .app-badge[data-s="live"],
.app603-korenbloem .app-shell .app-head .app-badge[data-s="Live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app603-korenbloem .app-shell .app-head-actions .app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.app603-korenbloem .app-shell .app-head-actions .app-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
}
.app603-korenbloem .app-shell .app-head-actions .app-stop .app-btn {
  color: #B3261E;
  box-shadow: inset 0 0 0 1px #E8C9C6;
  border: 0;
}

/* Section tabs: the top TabContent of the page sits in the white band, the rest is grey */
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs {
  background: #FFFFFF;
  box-shadow: 0 0 0 100vmax #FFFFFF, 0 1px 0 100vmax #E6E0D6;
  clip-path: inset(0 -100vmax -1px);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab {
  padding: 10px 14px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #F45F3A;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab::after {
  display: none;
}

/* Inner views (sub tabs) look like the card's segment row of the canvas */
.app603-korenbloem .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #EFEAE1;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
  box-shadow: none;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab {
  padding: 12px 10px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.app603-korenbloem .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #292D3E;
}

/* Cards: white, 5px, hairline ring, no drop shadow */
.app603-korenbloem .app-shell:has(.Campaign_menu) .app-card,
.app603-korenbloem .app-shell:has(.Campaign_menu) .app-panel {
  background: #FFFFFF;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #E4E0D8;
}

/* Boolean switch (SurveyJS sd-boolean) in app forms, full pages AND popups. Survey theme "Default"
   of theme 13 (SurveyThemes Id 2) sets --sjs-primary-backcolor to rgba(37,137,229,0): the thumb
   text is drawn in that colour, so the selected value vanished and the switch read as an empty
   knob next to the OTHER label. Popups render in an ngb-modal-window on body, outside .app-shell,
   hence the body:has() scope. Redefined on the boolean only: buttons and other inputs keep theirs. */
.app603-korenbloem .app-shell .sd-boolean,
body:has(.app603-korenbloem .app-shell) > ngb-modal-window.default .sd-boolean {
  --sjs-primary-backcolor: #F45F3A;
  --sjs-primary-backcolor-light: rgba(244, 95, 58, 0.1);
}

/* Sub tabs: straight blue underline (Koos 2026-10-15) */
.app603-korenbloem .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.app603-korenbloem .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover,
.app603-korenbloem .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.app603-korenbloem .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 #2A78D6 !important;
  color: #292D3E;
}

.app603-korenbloem .app-shell .app-page-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  margin: 0 0 8px !important;
  padding: 0 16px 0 12px;
  background: #F4F3F0;
  border-radius: 5px;
  line-height: 1.2;
}
.app603-korenbloem .app-shell .app-page-label {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
}
.app603-korenbloem .app-shell .app-page-name {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 17px !important;
  font-weight: 600;
  color: #292D3E;
}
.app603-korenbloem .app-shell .app-page-sub {
  font-size: 14px !important;
  line-height: 1.5;
  color: #5A6377;
}

/* Campaign App home (home.mjs). Equal-height queue/warm cards, campaign tabs as a segmented control. */
/* MultiColumn nests host > a > section > .background > div > .row; the section is centred with inline auto margins, so every level is made a full-width flex column. */
.app-home .app-home-fill, .app-home .app-home-fill > a > section, .app-home .app-home-fill > section, .app-home .app-home-fill > a > section > .background, .app-home .app-home-fill > section > .background, .app-home .app-home-fill > a > section > .background > div, .app-home .app-home-fill > section > .background > div, .app-home .app-home-fill > a > section > .background > div > .row, .app-home .app-home-fill > section > .background > div > .row, .app-home .app-home-grow, .app-home .app-home-grow > a > section, .app-home .app-home-grow > section, .app-home .app-home-grow > a > section > .background, .app-home .app-home-grow > section > .background, .app-home .app-home-grow > a > section > .background > div, .app-home .app-home-grow > section > .background > div, .app-home .app-home-grow > a > section > .background > div > .row, .app-home .app-home-grow > section > .background > div > .row { display: flex; flex-direction: column; flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; width: 100%; box-sizing: border-box; }
.app-home .app-home-duo .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { display: flex; flex-direction: column; }
.app-home .app-home-fill .row > div:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.app-home .app-home-grow .row > div:last-child { margin-top: auto; }
.app-home .app-home-card .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-cards .row { margin-left: -10px; margin-right: -10px; }
.app-home .app-home-h2 { min-height: 44px; display: flex; align-items: center; }
/* Tabs: the app-shell tab rules (app-canvas.css) are !important, so these carry more classes. */
.app603-korenbloem .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs { display: inline-flex !important; gap: 4px !important; background: #FFFFFF !important; padding: 4px !important; border-radius: 5px !important; float: right !important; margin: -48px 0 16px !important; list-style: none !important; border: 0 !important; }
.app-home .app-home-segmented ul.grid-tabs + * { clear: both !important; }
.app603-korenbloem .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab { border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #292D3E !important; padding: 0 16px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; font-size: 13px !important; margin: 0 !important; box-shadow: none !important; transition: none !important; }
.app603-korenbloem .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab.selected-grid-tab { background: #292D3E !important; color: #FFFFFF !important; font-weight: 600 !important; }
.app-home .app-home-segmented li.grid-tab::after, .app-home .app-home-segmented li.grid-tab::before { display: none !important; }
@media (max-width: 900px) { .app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; padding: 0 0 32px !important; } }

/* Relation type choice (popup /relations/popup/new-relation, class app-choice-wrap on the
   MultiColumn): two cards, "Organization" or "Individual contact". The choice exists because a
   contact under an organization and a contact in their own right are different records, and the
   old /relations/accounts page could not ask the question - there, a contact always hangs under an
   account. Generated by CRM-App-spec/local/gen-rel-choice-css.mjs. */

.app603-korenbloem .app-choice-wrap {
  padding: 4px 4px 8px;
}
.app603-korenbloem .app-choice-wrap .app-choice__lead {
  margin: 0 0 16px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}

.app603-korenbloem .app-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* A popup is narrow on a phone; two cards side by side would each be too thin to read. */
@media (max-width: 560px) {
  .app603-korenbloem .app-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.app603-korenbloem .app-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 8px;
  background: #FFFFFF;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.app603-korenbloem .app-choice:hover,
.app603-korenbloem .app-choice:focus-visible {
  border-color: var(--app-accent, #F45F3A);
  background: #FDF8F6;
}

.app603-korenbloem .app-choice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #F4F3F0;
  color: #5F6475;
}
.app603-korenbloem .app-choice:hover .app-choice__icon,
.app603-korenbloem .app-choice:focus-visible .app-choice__icon {
  color: var(--app-accent, #F45F3A);
}
.app603-korenbloem .app-choice__icon svg {
  width: 18px;
  height: 18px;
}

.app603-korenbloem .app-choice__body {
  display: block;
  min-width: 0;
}
.app603-korenbloem .app-choice__title {
  display: block;
  font-family: "Poppins-600";
  font-size: 15px;
  line-height: 20px;
  color: #292D3E;
}
.app603-korenbloem .app-choice__sub {
  display: block;
  margin-top: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}

.app606-korenbloem {
  --bg-color: #FFFFFF;
  --bg-color-rgb: 255,255,255;
  --button-padding: 0.5rem 2rem;
  --button-padding-rgb: ;
  --button-radius: 0.2rem;
  --button-radius-rgb: ;
  --font-content: Default-Regular;
  --font-content-rgb: ;
  --font-heading: Gilroy-Light;
  --font-heading-rgb: ;
  --font-link: Default;
  --font-link-rgb: ;
  --font-size: 1rem;
  --font-size-rgb: ;
  --input-line-height: 2rem;
  --input-line-height-rgb: ;
  --input-radius: 0.2rem;
  --input-radius-rgb: ;
  --negative-color: #FF3131;
  --negative-color-rgb: 255,49,49;
  --neutral-color-0: #FFFFFF;
  --neutral-color-0-rgb: 255,255,255;
  --neutral-color-100: #E9E9EB;
  --neutral-color-100-rgb: 233,233,235;
  --neutral-color-1000: #000000;
  --neutral-color-1000-rgb: 0,0,0;
  --neutral-color-200: #E0E0E0;
  --neutral-color-200-rgb: 224,224,224;
  --neutral-color-400: #BCBCBB;
  --neutral-color-400-rgb: 188,188,187;
  --neutral-color-50: #FAFAF9;
  --neutral-color-50-rgb: 250,250,249;
  --neutral-color-600: #70706F;
  --neutral-color-600-rgb: 112,112,111;
  --neutral-color-800: #2C2C2C;
  --neutral-color-800-rgb: 44,44,44;
  --other--color-BBRed: #FF4B4B;
  --other--color-BBRed-rgb: 255,75,75;
  --positive-color: #32C77C;
  --positive-color-rgb: 50,199,124;
  --primary--color-Toolkit-Grey: #f6f7f9;
  --primary--color-Toolkit-Grey-rgb: 246,247,249;
  --primary-1: #ab29ff;
  --primary-1-rgb: 171,41,204;
  --primary-color-100: #F3F9FE;
  --primary-color-100-rgb: 243,249,254;
  --primary-color-1000: #4499F2;
  --primary-color-1000-rgb: 68,153,242;
  --primary-color-1200: #2A81DC;
  --primary-color-1200-rgb: 42,129,220;
  --primary-color-800: #6CA7ED;
  --primary-color-800-rgb: 108,167,237;
  --raftest-font-size: 20px;
  --raftest-font-size-rgb: ;
  --secondary-1: #bea050;
  --secondary-1-rgb: 190,160,80;
  --secondary-color-100: #ECF0F4;
  --secondary-color-100-rgb: 236,240,244;
  --secondary-color-1000: #08213F;
  --secondary-color-1000-rgb: 8,33,63;
  --secondary-color-200: #D3D9E1;
  --secondary-color-200-rgb: 211,217,225;
  --secondary-color-400: #9FADBD;
  --secondary-color-400-rgb: 159,173,189;
  --secondary-color-50: #F7F9FA;
  --secondary-color-50-rgb: 247,249,250;
  --secondary-color-600: #728398;
  --secondary-color-600-rgb: 114,131,152;
  --secondary-color-800: #354B66;
  --secondary-color-800-rgb: 53,75,102;
  --warning-color: #FEC84C;
  --warning-color-rgb: 254,200,76;
  --Primary-1: #2F5DA8;
  --Primary-1-rgb: 47,93,168;
  --Primary-1-Dark: #1F3F75;
  --Primary-1-Dark-rgb: 31,63,117;
  --Primary-1-Light: #DCE6F5;
  --Primary-1-Light-rgb: 220,230,245;
  --Neutral-1: #FBF6EC;
  --Neutral-1-rgb: 251,246,236;
  --Neutral-8: #3B2A1E;
  --Neutral-8-rgb: 59,42,30;
}
.app606-korenbloem .h2, .app606-korenbloem h2, default .h2, default h2 {
  font-family: Default-Bold;
  text-transform: none;
  text-size: 10px;
  font-size: 20px;
  line-height: 20px;
}
.app606-korenbloem .h1, .app606-korenbloem h1, default .h1, default h1 {
  font-family: Default-Bold;
  text-transform: capitalize;
  font-size: 24px;
  line-height: 30px;
}
.app606-korenbloem .p, .app606-korenbloem p, default .p, default p {
  font-family: Default-Regular;
  text-transform: none;
  font-size: 16px;
}
.app606-korenbloem .h3, .app606-korenbloem h3, default .h3, default h3 {
  font-family: Default-Bold;
  text-transform: none;
  font-size: 18px;
  line-height: 20px;
}
.app606-korenbloem .h6, .app606-korenbloem h6, default .h6, default h6 {
  font-family: Default-Regular;
  text-transform: none;
  font-size: 50px;
  line-height: 2;
}
.app606-korenbloem .Button .button__Primary {
  background-color: var(--primary-color-1200);
  color: var(--primary--color-Toolkit-Grey);
  font-family: Default-Regular;
  font-size: 16px;
  border-width: 0;
  border-radius: 5px;
  padding-top: 10px;
  padding-right: 22px;
  padding-bottom: 10px;
  padding-left: 22px;
  text-transform: none;
  border-radius-top-left: 15px;
  border-radius-top-right: 0px;
  border-radius-bottom-left: 0px;
  border-radius-bottom-right: 15px;
  border-radius-select: false;
}
.app606-korenbloem .Button .button__Primary:hover {
  background-color: var(--primary-color-1200);
  color: var(--bg-color);
}
.app606-korenbloem .Button .button__Primary:active {
  background-color: var(--warning-color);
}
.app606-korenbloem .Button .button__Primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0.5em;
}
.app606-korenbloem .Button .button__Primary::before {
  content: "";
  flex: 0 0 auto;
  order: 1;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("/_static/Uploads/27_arrow-right.svg") no-repeat center/contain;
  mask: url("/_static/Uploads/27_arrow-right.svg") no-repeat center/contain;
  transition: transform 0.25s ease;
}
.app606-korenbloem .Button .button__Primary:hover::before {
  transform: translateX(3px);
}
.app606-korenbloem .Button .button__Secondary {
  background-color: var(--bg-color);
  border-color: var(--primary-color-1200);
  color: var(--primary-color-1200);
  border-width: 2px;
  border-radius: 5px;
  font-family: Default-Regular;
  font-size: 18px;
  padding-top: 12px;
  padding-right: 25px;
  padding-bottom: 12px;
  padding-left: 25px;
  text-transform: none;
}
.app606-korenbloem .Button .button__Secondary:hover {
  background-color: var(--primary-color-100);
}
.app606-korenbloem .Button .button__Form__Matrix__Add {
  background-color: var(--primary-color-1000);
  font-size: 16px;
  border-width: 0px;
  border-radius: 5px;
  font-family: Aeonik-Regular;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.app606-korenbloem .Button .button__Form__Matrix__Remove {
  background-color: var(--warning-color);
  font-family: Aeonik-Regular;
  font-size: 16px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app606-korenbloem .Button .button__Form__Next {
  background-color: var(--primary-color-1200);
  border-color: var(--bg-color);
  color: var(--bg-color);
  border-radius: 5px;
  padding-top: 12px;
  padding-right: 25px;
  padding-bottom: 12px;
  padding-left: 25px;
  font-size: 18px;
  font-family: Default-Regular;
  border-width: 0;
}
.app606-korenbloem .Button .button__Form__Next:hover {
  background-color: var(--secondary-color-600);
}
.app606-korenbloem .Button .button__Form__Prev {
  background-color: var(--neutral-color-0);
  border-color: var(--primary-color-1200);
  color: var(--primary-color-1200);
  border-radius: 5px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 25px;
  padding-left: 25px;
  font-size: 18px;
  font-family: Aeonik-Regular;
}
.app606-korenbloem .Button .button__Form__Prev:hover {
  border-color: var(--secondary-color-600);
  color: var(--secondary-color-600);
}
.app606-korenbloem .Button .button__SAIntaClaus {
  background-color: var(--negative-color);
  color: var(--neutral-color-0);
  font-family: Gilroy-bold;
  font-size: 20px;
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
  border-radius: 5px;
  border-width: 0px;
}
.app606-korenbloem .Button .button__SAIntaClaus:hover {
  background-color: var(--warning-color);
}
.app606-korenbloem .Button .button__Toolkit_Add {
  background-color: var(--primary-color-100);
  color: var(--primary-color-1000);
  font-family: Aeonik-Regular;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app606-korenbloem .Button .button__Toolkit_Add:hover {
  background-color: var(--primary-color-100);
  border-color: var(--primary-color-1000);
  padding-top: 9px;
  padding-right: 19px;
  padding-bottom: 9px;
  padding-left: 19px;
  border-width: 1px;
}
.app606-korenbloem .Button .button__Toolkit_Primary {
  background-color: var(--primary--color-Toolkit-Grey);
  color: var(--neutral-color-1000);
  font-family: Aeonik-Regular;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
  font-size: 14px;
}
.app606-korenbloem .Button .button__Toolkit_Primary:hover {
  background-color: var(--secondary-color-200);
}
.app606-korenbloem .Button .button__Toolkit_Secondary {
  background-color: var(--primary--color-Name);
  color: var(--neutral-color-1000);
  font-family: Aeonik-Regular;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app606-korenbloem .Button .button__Toolkit_Secondary:hover {
  background-color: var(--secondary-color-200);
}
.app606-korenbloem .Button .button__Toolkit_Tertiary {
  background-color: var(--neutral-color-0);
  font-family: Aeonik-Regular;
  border-width: 0px;
  border-radius: 5px;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.app606-korenbloem .Button .button__Toolkit_Tertiary:hover {
  background-color: var(--secondary-color-200);
}
.app606-korenbloem .Button .button__Toolbar {
  background-color: var(--neutral-color-0);
  border-color: var(--secondary-color-200);
  color: var(--neutral-color-1000);
  font-family: Default-Regular;
  font-size: 13px;
  border-radius: 5px;
  border-width: 1px;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}
.app606-korenbloem .Button .button__Toolbar:hover {
  background-color: var(--secondary-color-100);
}

.app606-korenbloem .hide-default-link .hide-default-link a {
  text-decoration: none;
}
.app606-korenbloem .BisbrickMaster h1, .app606-korenbloem .BisbrickMaster h2, .app606-korenbloem .BisbrickMaster h3, .app606-korenbloem .BisbrickMaster h4, .app606-korenbloem .BisbrickMaster h5, .app606-korenbloem .BisbrickMaster h6 {
  font-family: var(--font-heading);
  font-weight: normal;
}
.app606-korenbloem .BisbrickMaster h1 {
  font-size: 3.5rem;
  font-family: Gilroy-bold;
  font-style: normal;
  line-height: 65px;
  letter-spacing: -0.01em;
}
.app606-korenbloem .BisbrickMaster h2 {
  font-family: Gilroy;
  font-style: normal;
  font-size: 3rem;
  line-height: 56px;
}
.app606-korenbloem .BisbrickMaster h4 {
  font-size: 2rem;
  font-family: Aeonik;
  line-height: 48px;
}
.app606-korenbloem .BisbrickMaster h5 {
  font-size: 1.5rem;
  font-family: Aeonik;
  line-height: 36px;
}
.app606-korenbloem .BisbrickMaster {
  font-family: var(--font-content);
}
.app606-korenbloem .BisbrickMaster optgroup, .app606-korenbloem .BisbrickMaster select, .app606-korenbloem .BisbrickMaster textarea {
  font-family: var(--font-heading) !important;
}
.app606-korenbloem .BisbrickMaster input {
  font-family: var(--font-content);
}
.app606-korenbloem .BisbrickMaster a {
  font-family: var(--font-link);
  text-decoration: none !important;
  cursor: pointer;
  color: inherit;
}
.BisbrickMaster p {
  font-size: 1rem;
  font-family: Aeonik;
  line-height: 24px;
  letter-spacing: 0.01em;
}
.BisbrickMaster header {
  z-index: 100;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.app606-korenbloem .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.app606-korenbloem .top-bar .top-bar[_ngcontent-lkq-c41] {
  height: 50px;
}
.app606-korenbloem .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app606-korenbloem .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.app606-korenbloem .top-bar .top-bar-inner span {
  font-size: 14px;
}
.app606-korenbloem .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app606-korenbloem .top-bar .links ul {
    padding-left: 0px;
  }
}
.app606-korenbloem .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.app606-korenbloem .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.app606-korenbloem .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.app606-korenbloem .top-bar .user-info-section {
  font-size: 14px !important;
}
.app606-korenbloem .top-bar .user-info-section img {
  height: 20px;
}
.app606-korenbloem .top-bar .user-info-section li {
  list-style-type: none;
}
.app606-korenbloem .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app606-korenbloem .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.app606-korenbloem .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.app606-korenbloem .middle-bar {
  background-color: var(--bg-color);
  padding: 1.6rem 0rem;
}
.app606-korenbloem .middle-bar .floating-content {
  transform: translateX(-53%) !important;
}
.app606-korenbloem .middle-bar .floating-content .DescriptionLink .border-right {
  max-width: 244px;
}
.app606-korenbloem .middle-bar-inner {
  display: inline-flex;
  height: 38px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .app606-korenbloem .middle-bar-inner {
    justify-content: space-between;
  }
}
.app606-korenbloem .middle-bar .logo img {
  height: 85px;
  padding: 0.5rem 1rem;
  /* Responsive layout - when the screen is <576px wide */
}
.app606-korenbloem .middle-bar .searching {
  cursor: wait;
}
.app606-korenbloem .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .app606-korenbloem .middle-bar .search-section {
    display: block !important;
  }
}
.app606-korenbloem .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.app606-korenbloem .middle-bar .search-section i {
  font-size: 1.4rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.app606-korenbloem .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 250px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.app606-korenbloem .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
@charset "UTF-8";
.app606-korenbloem .navbar {
  padding: 0 !important;
}
.app606-korenbloem .navbar .nav-item {
  padding: 0 1rem;
}
.app606-korenbloem .navbar .navbar-nav .nav-link {
  color: var(--black-color);
  cursor: pointer;
  font-family: Gilroy-Bold !important;
}
.app606-korenbloem .navbar .navbar-nav .nav-link:hover {
  color: var(--primary-color-1200) !important;
}
.app606-korenbloem .navbar .nav-link.active,
.app606-korenbloem .navbar .nav-link.active-parent,
.app606-korenbloem .navbar .show > .nav-link {
  color: var(--primary-color-1200);
  border-bottom: 1px solid var(--primary-color-1200);
}
.app606-korenbloem .navbar .navbar-collapse {
  justify-content: center;
}
.app606-korenbloem .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.app606-korenbloem .navbar .navbar-toggler i {
  color: var(#021e3f);
  font-size: 2.1rem;
}
.app606-korenbloem .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.BisbrickMaster .hero_banner .jumbotron {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.BisbrickMaster .hero_banner .jumbotron h1 {
  color: var(--white-color);
  font-size: 2.5em;
}
.BisbrickMaster .hero_banner .jumbotron h1 span {
  font-weight: 300;
}
.BisbrickMaster .IconTextCard .card {
  border: 0px !important;
}
.BisbrickMaster .IconTextCard .card .div-as-link .card-body .card-title {
  font-size: 1.4rem !important;
  font-weight: bold !important;
  color: var(--base-color);
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .BisbrickMaster .IconTextCard .card .div-as-link .card-body .card-title {
    font-size: 1.1rem !important;
  }
}
.BisbrickMaster .BisbrickNieuwsbriefInschrijving span {
  color: white;
}
.BisbrickMaster .BisbrickNieuwsbriefInschrijving .sv_main .sv_container .sv_body .sv_p_root .sv_q {
  padding: 0;
  box-sizing: border-box;
  overflow: auto;
}
.BisbrickMaster .MultiColumn .sv_main .sv_container .sv_body .sv_p_root .sv_q {
  padding: 8px 0;
  box-sizing: border-box;
  overflow: auto;
}
.BisbrickMaster .MultiColumn .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.BisbrickMaster .form-control:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.BisbrickMaster .accordion {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-family: "Aeonik";
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
@media (min-width: 992px) {
  .BisbrickMaster .accordion {
    display: none;
  }
}
.BisbrickMaster .accordion .main-menu {
  background-color: #FFFFFF;
  padding: 0.7rem 1rem;
}
.BisbrickMaster .accordion .main-menu .main-menu-item,
.BisbrickMaster .accordion .main-menu a {
  color: #2C2C2C;
  text-transform: uppercase;
  font-size: 1rem;
}
.BisbrickMaster .accordion .main-menu .sub-menu {
  list-style-type: none;
  margin-left: -1rem;
  margin-right: -1rem;
  font-family: "Aeonik";
  font-weight: bold;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #F1F7FC;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-link {
  color: #F85600;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item {
  padding: 0.8rem 1rem 0.5rem 0rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  flex: 1;
  flex-wrap: wrap;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .menu-icon {
  width: 30px;
  margin-left: 1rem;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item {
  list-style-type: none;
  display: block;
  width: 100%;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item li a,
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item li span {
  color: #1B1B1B;
  font-size: 0.8rem;
  font-weight: 500;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-0,
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-1 {
  color: #F5F4F2;
  text-transform: uppercase;
  font-size: 0.9rem;
  list-style-type: none;
  padding: 0.7rem 0 0.7rem 2.5rem;
  margin: 0 0 0 -2rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-0 {
  background-color: #00C2F2;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-1 {
  background-color: #1B1B1B;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub {
  list-style-type: none;
  background-color: #F1F7FC;
  color: #F85600;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-left: -3rem;
  margin-bottom: -0.8rem;
  margin-top: 0.7rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-icon {
  width: 30px;
  margin-left: 1rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub li {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  flex: 1;
  flex-wrap: wrap;
  padding: 0.8rem 1rem 0.5rem 1rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub {
  list-style-type: none;
  display: block;
  width: 100%;
  margin-left: -1.5rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub li a,
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub li span {
  color: #1B1B1B;
  font-size: 0.8rem;
  font-weight: 500;
}
.BisbrickMaster .Button .button__Bisbrick__primary-default {
  height: 56px;
  background: linear-gradient(225deg, #3C98F2 0%, #3570F4 100%);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: var(--neutral-color-0) !important;
  padding: 16px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular;
  cursor: pointer;
}
.BisbrickMaster .Button .button__Bisbrick__primary-default:hover {
  box-shadow: none;
  background: #3C98F2;
}
.BisbrickMaster .Button .button__Bisbrick__primary-accent {
  height: 56px;
  background: linear-gradient(225deg, #FF4B4B 0%, #FF6532 100%);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: var(--neutral-color-0) !important;
  padding: 16px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular;
}
.BisbrickMaster .Button .button__Bisbrick__primary-accent:hover {
  box-shadow: none;
  background: #FF6532;
}
.BisbrickMaster .Button .button__Bisbrick__secondary-default {
  height: 56px;
  border: 2px solid #3C98F2;
  box-sizing: border-box;
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.15));
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular !important;
  color: #3C98F2;
}
.BisbrickMaster .Button .button__Bisbrick__secondary-default:hover {
  box-shadow: none;
  background: #3C98F2;
  color: var(--neutral-color-0);
}
.BisbrickMaster .Button .button__Bisbrick__diap-default {
  height: 56px;
  color: #FFFFFF !important;
  background-color: transparent;
  border: 2px solid white;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular !important;
  transition: all 0.2s ease-in-out;
}
.BisbrickMaster .Button .button__Bisbrick__diap-default:hover {
  border: 2px solid #3C98F2;
  color: #3C98F2 !important;
}
@charset "UTF-8";
.EuroloopMaster header {
  z-index: 100;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.EuroloopMaster .navbar {
  padding: 0 !important;
}
.EuroloopMaster .navbar .nav-item {
  padding: 0 1rem;
}
.EuroloopMaster .navbar .navbar-nav .nav-link {
  color: var(--black-color) !important;
  cursor: pointer;
  font-family: var(--font-link) !important;
}
.EuroloopMaster .navbar .navbar-nav .nav-link:hover {
  color: #6CA7ED !important;
}
.EuroloopMaster .navbar .nav-link.active,
.EuroloopMaster .navbar .nav-link.active-parent,
.EuroloopMaster .navbar .show > .nav-link {
  font-weight: bold;
  border-bottom: 1px solid var(--base-color);
}
.EuroloopMaster .navbar .navbar-collapse {
  justify-content: center;
}
.EuroloopMaster .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.EuroloopMaster .navbar .navbar-toggler i {
  color: var(--black-color);
  font-size: 2rem;
}
.EuroloopMaster .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.EuroloopMaster .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.EuroloopMaster .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.EuroloopMaster .top-bar .top-bar-inner span {
  font-size: 14px;
}
.EuroloopMaster .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .links ul {
    padding-left: 0px;
  }
}
.EuroloopMaster .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.EuroloopMaster .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.EuroloopMaster .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.EuroloopMaster .top-bar .user-info-section {
  font-size: 14px !important;
}
.EuroloopMaster .top-bar .user-info-section img {
  height: 20px;
}
.EuroloopMaster .top-bar .user-info-section li {
  list-style-type: none;
}
.EuroloopMaster .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.EuroloopMaster .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.EuroloopMaster .middle-bar {
  background-color: var(--bg-color);
  padding: 1.5rem 0rem;
}
.EuroloopMaster .middle-bar-inner {
  display: inline-flex;
  height: 35px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .EuroloopMaster .middle-bar-inner {
    justify-content: space-between;
  }
}
.EuroloopMaster .middle-bar .logo img {
  height: 35px;
  /* Responsive layout - when the screen is <576px wide */
}
.EuroloopMaster .middle-bar .searching {
  cursor: wait;
}
.EuroloopMaster .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .EuroloopMaster .middle-bar .search-section {
    display: block !important;
  }
}
.EuroloopMaster .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.EuroloopMaster .middle-bar .search-section i {
  font-size: 1.3rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.EuroloopMaster .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 200px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.EuroloopMaster .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
.app606-korenbloem .BisbrickMaster .language-container {
  position: relative;
}
.app606-korenbloem .BisbrickMaster .language-container .language-select-label {
  position: absolute;
  pointer-events: none;
}
.app606-korenbloem .BisbrickMaster .language-container .language-select {
  padding: 0 0 0 16px;
  border: none;
  appearance: none;
  background-color: transparent;
}
@media (max-width: 992px) {
  .app606-korenbloem .BisbrickMaster bisbrick-language {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media print {
  .app606-korenbloem .col-md-1, .app606-korenbloem .col-md-2, .app606-korenbloem .col-md-3, .app606-korenbloem .col-md-4, .app606-korenbloem .col-md-5, .app606-korenbloem .col-md-6, .app606-korenbloem .col-md-7, .app606-korenbloem .col-md-8, .app606-korenbloem .col-md-9, .app606-korenbloem .col-md-10, .app606-korenbloem .col-md-11, .app606-korenbloem .col-md-12 {
    float: left;
  }
  .app606-korenbloem .col-md-12 {
    width: 100%;
  }
  .app606-korenbloem .col-md-11 {
    width: 91.66666667%;
  }
  .app606-korenbloem .col-md-10 {
    width: 83.33333333%;
  }
  .app606-korenbloem .col-md-9 {
    width: 75%;
  }
  .app606-korenbloem .col-md-8 {
    width: 66.66666667%;
  }
  .app606-korenbloem .col-md-7 {
    width: 58.33333333%;
  }
  .app606-korenbloem .col-md-6 {
    width: 50%;
  }
  .app606-korenbloem .col-md-5 {
    width: 41.66666667%;
  }
  .app606-korenbloem .col-md-4 {
    width: 33.33333333%;
  }
  .app606-korenbloem .col-md-3 {
    width: 25%;
  }
  .app606-korenbloem .col-md-2 {
    width: 16.66666667%;
  }
  .app606-korenbloem .col-md-1 {
    width: 8.33333333%;
  }
}
.app606-korenbloem .master-search .sv_main {
  width: 350px;
}
.app606-korenbloem .master-search .sv_main .sd-body {
  padding: 0 !important;
}
.app606-korenbloem .master-search .sd-action-bar {
  overflow: visible;
  margin-top: 0;
  padding: 0 !important;
}
.app606-korenbloem .master-search .sv_nav {
  padding: 0 !important;
}
.app606-korenbloem .master-search #sv-nav-complete {
  margin: 0 16px;
  position: absolute;
  right: -64px;
  top: 1px;
  z-index: 1;
}
.app606-korenbloem .master-search .sv_q_text_root {
  width: 200px !important;
}
@media (max-width: 757.98px) {
  .app606-korenbloem .ParagraphText-Image-Left .row {
    flow-direction: column-reverse;
  }
}
.app606-korenbloem .BisbrickMaster .grayscaleOnHover img {
  -webkit-filter: grayscale(0);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
  transition: filter 0.3s ease;
  /* Optional: for a smooth transition effect */
  z-index: 0 !important;
}
.app606-korenbloem .BisbrickMaster .grayscaleOnHover img:hover {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.app606-korenbloem .BisbrickMaster .imageBlurOnHover img {
  z-index: 0 !important;
}
.app606-korenbloem .BisbrickMaster .imageBlurOnHover img:hover {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}
.app606-korenbloem .blurImageDuringRendering {
  /* Initial blur effect on the image */
  /* Define the keyframes for the unblur animation */
}
.app606-korenbloem .blurImageDuringRendering img {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
  animation: unblur 2s ease-out forwards;
  /* Apply the animation */
}
@keyframes unblur {
  0% {
    -webkit-filter: blur(5px);
    /* Safari 6.0 - 9.0 */
    filter: blur(5px);
  }
  100% {
    -webkit-filter: blur(0px);
    /* Safari 6.0 - 9.0 */
    filter: blur(0px);
  }
}
.app606-korenbloem .BisbrickMaster .shakeOnHover {
  /* Define the shake animation */
}
.app606-korenbloem .BisbrickMaster .shakeOnHover img {
  z-index: 0 !important;
}
.app606-korenbloem .BisbrickMaster .shakeOnHover img:hover {
  animation: shake 0.5s;
  /* Animation name and duration */
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(10px);
  }
  30% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(-10px);
  }
  60% {
    transform: translateX(10px);
  }
  70% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  90% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
.app606-korenbloem .BisbrickMaster .AspectRatio .columnRight, .app606-korenbloem .BisbrickMaster .AspectRatio .columntLeft {
  width: 100%;
  aspect-ratio: 16/17;
  background-color: #e0e0e0;
}
.app606-korenbloem .hide-default-link .hide-default-link a {
  text-decoration: none;
}
.app606-korenbloem .grecaptcha-badge {
  visibility: hidden;
}
.app606-korenbloem .customCheckbox .custom-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.app606-korenbloem .customCheckbox .custom-checkbox input[type=checkbox] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 4px;
  background-color: transparent;
  transition: all 0.2s ease;
  padding: 4px 4px;
}
.app606-korenbloem .customCheckbox .custom-checkbox input[type=checkbox]:checked {
  background-color: #007bff;
  border-color: #007bff;
}
.app606-korenbloem .right-container-column {
  display: flex;
  justify-content: right;
}

.app606-korenbloem .app-shell {
  --app-gutter: clamp(16px, 3vw, 40px);
  --app-accent: #F45F3A;
  background: #F4F3F0;
}

/* Type (boards, 2026-10-14): Poppins on the app pages. It is set on the page body rather than on each
   rule, so bricks that carry no class get it too; the title bricks set Default-Bold inline, which only
   an !important can beat. The website pages on theme 13 never match .app-shell and keep Aeonik/Gilroy. */
.app606-korenbloem .app-shell > main {
  font-family: "Poppins-400";
  color: #292D3E;
}
.app606-korenbloem .app-shell > main [style*="Default-Bold"],
.app606-korenbloem .app-shell > main [style*="Default-Black"] {
  font-family: "Poppins-600" !important;
}
.app606-korenbloem .app-shell > main [style*="Default-Regular"],
.app606-korenbloem .app-shell > main [style*="Default-Light"] {
  font-family: "Poppins-400" !important;
}
/* Real bold faces (Koos 2026-10-27): every Poppins family on theme 13 holds one weight, so a bolder weight
   on Poppins-400 ("MQL reached" in a <strong>, a chip, a cell button) was synthesized by the browser and
   came out fuzzy. Each bold element gets the family that carries its weight; synthesis is off so a bold
   that is missed here stays crisp (and visibly not bold) instead of smeared. */
.app606-korenbloem .app-shell > main {
  font-synthesis: none;
}
.app606-korenbloem .app-shell > main strong,
.app606-korenbloem .app-shell > main b {
  font-family: "Poppins-700";
  font-weight: 700;
}
.app606-korenbloem .app-shell > main .bb-chip {
  font-family: "Poppins-600";
}
.app606-korenbloem .app-shell > main .table-cell-btn {
  font-family: "Poppins-500";
}

/* Widgets keep their own font and colours: Koos 2026-10-14, "Behoud de gantt en/of Kanbans (die zijn
   visueel al prima)". Everything above inherits, so the reset has to be explicit. */
.app606-korenbloem .app-shell bisbrick-kanban,
.app606-korenbloem .app-shell bisbrick-board,
.app606-korenbloem .app-shell .gantt_container,
.app606-korenbloem .app-shell [class*="dhx_"],
.app606-korenbloem .app-shell [class^="wx-"],
.app606-korenbloem .app-shell [class*=" wx-"] {
  font-family: var(--font-content);
  color: initial;
}

/* Room between the last brick and the footer: the same on every app page, and only from here -
   pages carry no trailing Line Spacer of their own (table-spacing.mjs trimPageEnd). */
.app606-korenbloem .app-shell > main {
  padding-bottom: 100px;
}

/* Page gutter: everything below the app menu. A margin, because a brick's own padding is set
   inline on this same wrapper. */
.app606-korenbloem .app-shell > main > bisbrick-list > div:not(:first-child) {
  width: auto;
  margin-left: var(--app-gutter);
  margin-right: var(--app-gutter);
}
/* width: auto above - the wrapper is a .col-md-12 (width: 100%), and 100% plus the two margins ran the
   page 2 x gutter past the right edge, with a horizontal scrollbar. */

/* Action buttons: compact, like the toolbar buttons of the planning and kanban bricks, instead of the
   theme's large website buttons; 5px corners as elsewhere in Bisbrick (Koos 2026-10-08). The geometry is
   his, the colours are the boards' (2026-10-14): one filled accent, everything else an outline. The
   transparent border keeps a primary as tall as a secondary beside it. */
.app606-korenbloem .app-shell .Button .button {
  height: auto;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
}
.app606-korenbloem .app-shell .Button .button__Primary,
.app606-korenbloem .app-shell .Button .button__Primary:focus {
  background-color: #F45F3A;
  border-color: #F45F3A;
  color: #FFFFFF;
  font-family: "Poppins-600";
}
.app606-korenbloem .app-shell .Button .button__Primary:hover {
  background-color: #D94A27;
  border-color: #D94A27;
  color: #FFFFFF;
}
.app606-korenbloem .app-shell .Button .button__Secondary {
  background-color: #FFFFFF;
  border: 1px solid #DCD6CB;
  color: #292D3E;
}
.app606-korenbloem .app-shell .Button .button__Secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}
/* Text buttons (card actions such as "Edit all", "View all notes", "Delete account" on the CRM record pages):
   an outline in the accent, so they stay quieter than the one filled primary per header (Koos 2026-10-08).
   The theme's own button__Text is filled in a blue of its own (#537CFA), which is why it is overruled here. */
.app606-korenbloem .app-shell .Button .button__Text,
.app606-korenbloem .app-shell .Button .button__Text:focus {
  background-color: #FFFFFF;
  border: 1px solid #F45F3A;
  box-shadow: none;
  color: #F45F3A;
}
.app606-korenbloem .app-shell .Button .button__Text:hover {
  background-color: #FDEDE8;
  border-color: #F45F3A;
  color: #F45F3A;
}

/* Buttons made of links in an htmlText (a record header, gen.mjs popupLink / popupMenu): the same look as
   the Button brick above. */
.app606-korenbloem .app-shell .app-btn,
.app606-korenbloem .app-shell a.app-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.app606-korenbloem .app-shell .app-btn--primary,
.app606-korenbloem .app-shell .app-btn--primary:hover {
  background-color: #F45F3A;
  color: #FFFFFF;
}
.app606-korenbloem .app-shell .app-btn--primary:hover {
  filter: brightness(0.94);
}
.app606-korenbloem .app-shell .app-btn--secondary,
.app606-korenbloem .app-shell a.app-btn--secondary:hover {
  background-color: #FFFFFF;
  border-color: #DCD6CB;
  color: #292D3E;
}
.app606-korenbloem .app-shell a.app-btn--secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}

/* Record header (Koos 2026-10-08): breadcrumb, name and meta line on the left, the actions on the right of
   the same row; on a narrow screen the actions wrap under the name. */
.app606-korenbloem .app-shell .row:has(> div > .app-head) {
  align-items: flex-end;
  row-gap: 12px;
  margin: 20px 0 8px;
}
/* The header brick does not clip, and lies over the bricks after it only while its + Contacts list is open, so the
   list opens on top of the tabs. Not always: a raised header would also cover popups of the bricks below it,
   such as the Kanban card editor, which lives inside the board's own stacking layer. */
.app606-korenbloem .app-shell bisbrick-multi-column:has(.app-head .app-menu:hover),
.app606-korenbloem .app-shell bisbrick-multi-column:has(.app-head .app-menu:focus-within) {
  z-index: 30;
}
.app606-korenbloem .app-shell bisbrick-multi-column:has(.app-head) .background {
  overflow: visible;
}
.app606-korenbloem .app-shell .row > div:has(> .app-head) {
  flex: 1 1 320px;
  width: auto;
  min-width: 0;
  padding: 0 !important;
}
.app606-korenbloem .app-shell .row > div:has(> .app-head-actions) {
  flex: 0 0 auto;
  width: auto;
  padding: 0 !important;
}
.app606-korenbloem .app-shell .app-head p {
  margin: 0;
  text-align: left;
}
.app606-korenbloem .app-shell .app-head .app-crumb {
  margin-bottom: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app606-korenbloem .app-shell .app-head .app-crumb a {
  color: #5F6475;
  text-decoration: none;
}
.app606-korenbloem .app-shell .app-head .app-crumb a:hover {
  color: #292D3E;
  text-decoration: underline;
}
.app606-korenbloem .app-shell .app-head .app-title {
  font-family: "Poppins-600";
  font-size: 28px;
  line-height: 34px;
  color: #292D3E;
}
.app606-korenbloem .app-shell .app-head .app-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}
/* A status as a label, coloured by its code (data-s). */
.app606-korenbloem .app-shell .app-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  background: #F1ECE4;
  color: #5F6475;
  font-family: "Poppins-500";
  font-size: 12px;
  line-height: 18px;
}
/* In a list the chips sit under one another, so the boards give them one width and centre the word
   (Contacts and Campaigns boards, artifact HtKnRMkmwY5aph5urR38LL). On a record page's header the chip
   is on its own beside the title, and keeps its natural width. */
.app606-korenbloem .app-shell td .app-badge {
  min-width: 88px;
  text-align: center;
}
.app606-korenbloem .app-shell .app-badge[data-s="live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app606-korenbloem .app-shell .app-badge[data-s="paused"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app606-korenbloem .app-shell .app-badge[data-s="done"] {
  color: #5F6475;
}
/* Live, but one or more parts switched off (Campaign App Campaigns StatusCode, Koos 2026-10-08):
   the Live green, lighter, with a ring so it reads as "not all of it". */
.app606-korenbloem .app-shell .app-badge[data-s="partial"] {
  background: #E3F2E8;
  color: #1F6B3A;
  box-shadow: inset 0 0 0 1px #1F6B3A;
}
/* "Stop campaign now" only while the campaign itself is Live (data-s = its stored status code). */
.app606-korenbloem .app-shell .app-stop {
  display: none;
}
.app606-korenbloem .app-shell .app-stop[data-s="live"] {
  display: contents;
}
.app606-korenbloem .app-shell .app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A button with a list of links under it, without code: open on hover, when the button has focus (a tap or
   a click), and while the keyboard is in it. A mouse click on a link gives no :focus-visible, so the list
   closes once the popup it opened covers it. */
.app606-korenbloem .app-shell .app-menu {
  position: relative;
  display: inline-block;
}
.app606-korenbloem .app-shell .app-menu__btn::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0 1px 3px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.app606-korenbloem .app-shell .app-menu__list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
/* Bridges the 4px gap, so the list does not close on the way to it. */
.app606-korenbloem .app-shell .app-menu__list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}
.app606-korenbloem .app-shell .app-menu:hover .app-menu__list,
.app606-korenbloem .app-shell .app-menu__btn:focus + .app-menu__list,
.app606-korenbloem .app-shell .app-menu:has(:focus-visible) .app-menu__list {
  display: block;
}
.app606-korenbloem .app-shell .app-menu__list a,
.app606-korenbloem .app-shell .app-menu__list a:hover {
  display: block;
  padding: 7px 10px;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #292D3E;
  text-decoration: none;
  white-space: nowrap;
}
.app606-korenbloem .app-shell .app-menu__list a:hover,
.app606-korenbloem .app-shell .app-menu__list a:focus-visible {
  background: #F4F3F0;
}
/* ⋯: a menu without a caret (CRM record headers, crm-record-pages.mjs). */
.app606-korenbloem .app-shell .app-menu__btn--more::after {
  content: none;
}
.app606-korenbloem .app-shell .app-menu__btn--more {
  min-width: 32px;
  justify-content: center;
  letter-spacing: 1px;
}

/* CRM record pages (Account, Contact; CRM-App-spec/local/crm-record-pages.mjs, Koos 2026-10-08).
   The badge carries the stored value as its code: account type and status, contact status. */
.app606-korenbloem .app-shell .app-badge[data-s="Active"],
.app606-korenbloem .app-shell .app-badge[data-s="Customer"],
.app606-korenbloem .app-shell .app-badge[data-s="Won"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app606-korenbloem .app-shell .app-badge[data-s="Prospect"],
.app606-korenbloem .app-shell .app-badge[data-s="On hold"],
.app606-korenbloem .app-shell .app-badge[data-s="On Hold"],
.app606-korenbloem .app-shell .app-badge[data-s="Suspended"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app606-korenbloem .app-shell .app-badge[data-s="Partner"],
.app606-korenbloem .app-shell .app-badge[data-s="Reseller"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.app606-korenbloem .app-shell .app-badge[data-s="Inactive"],
.app606-korenbloem .app-shell .app-badge[data-s="Archived"],
.app606-korenbloem .app-shell .app-badge[data-s="Closed"],
.app606-korenbloem .app-shell .app-badge[data-s="Left Company"],
.app606-korenbloem .app-shell .app-badge[data-s="Do Not Contact"],
.app606-korenbloem .app-shell .app-badge[data-s="Competitor"],
.app606-korenbloem .app-shell .app-badge[data-s="Lost"] {
  color: #5F6475;
}
/* The CRM home board's urgency chips (CRM-App-spec/local/gen-crm-home-dataactions.mjs).
   These codes are a state the DataAction works out per row, not a stored value, so they are
   lowercase and cannot collide with the status names above. */
.app606-korenbloem .app-shell .app-badge[data-s="late"] {
  background: #FBE9E7;
  color: #B3261E;
}
.app606-korenbloem .app-shell .app-badge[data-s="soon"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app606-korenbloem .app-shell .app-badge[data-s="later"] {
  color: #5F6475;
}
.app606-korenbloem .app-shell .app-badge[data-s=""] {
  display: none;
}
/* "Child of …" only when there is a parent. */
.app606-korenbloem .app-shell .app-head .app-meta .app-meta__parent[data-v=""] {
  display: none;
}
/* The row-detail panel (Table.rowDetail, Web !2839). The boards put it on a quiet sand ground, indented so
   it starts under the first cell instead of under the chevron, with a hairline between it and the row.
   The component's own --neutral / --blue options are greys from the website palette, so the brick stays on
   "none" and the theme gives the panel its colour.
   !important is load-bearing: the component's own "td.bb-row-detail { padding: 16px }" carries Angular's
   encapsulation attribute and so ties on specificity — order would decide it, and the theme stylesheet is
   not guaranteed to load last. */
.app606-korenbloem .app-shell td.bb-row-detail {
  background: #F8F7F4 !important;
  padding: 16px 18px 16px 48px !important;
  border-top: 1px solid #F1ECE4 !important;
}
/* The chevron: the component asks the theme for --secondary-color-700 and --primary-color-1000, which on
   theme 13 are the website's grey and blue. Overruled here so the handle stays in the app's own palette. */
.app606-korenbloem .app-shell .bb-row-detail__toggle {
  color: #8A8F9E;
}
.app606-korenbloem .app-shell .bb-row-detail__toggle:hover {
  background: #FDEDE8;
  color: #F45F3A;
}
.app606-korenbloem .app-shell .bb-row-detail__toggle:focus-visible {
  outline: 2px solid #F45F3A;
}
/* A bar of actions at the foot of the panel, above it the lighter of the two rules (boards). */
.app606-korenbloem .app-shell .app-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ECE8E0;
}

/* Overview: the main column and the aside are stacks of cards (a MultiColumn host is inline by default). */
.app606-korenbloem .app-shell .app-card {
  display: block;
  margin-bottom: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  background: #FFFFFF;
  padding: 16px 18px 18px !important;
}
/* A 16px gutter between the main column and the aside, as between the cards; stacked below md there is none. */
@media (min-width: 768px) {
  .app606-korenbloem .app-shell .app-overview .row > [class*="col-"] > .app-stack {
    display: block;
    padding-right: 8px;
  }
  .app606-korenbloem .app-shell .app-overview .row > [class*="col-"] + [class*="col-"] > .app-stack {
    padding-right: 0;
    padding-left: 8px;
  }
}
/* An equal-height pair (the layout frame: two columns only as equal-height pairs). The lead column's
   capped list sets the height and the side column's card runs down to meet it, instead of leaving a
   step of empty ground. Every wrapper between the column and the card has to carry the height, hence
   the chain: MultiColumn renders host > .row > [col] around each level. Opt-in, because a stack that
   holds several cards must keep its natural height. */
@media (min-width: 768px) {
  .app606-korenbloem .app-shell .app-overview--duo > .row > [class*="col-"] > .app-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .app606-korenbloem .app-shell .app-overview--duo .app-stack > .row,
  .app606-korenbloem .app-shell .app-overview--duo .app-stack > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .app606-korenbloem .app-shell .app-overview--duo .app-stack .app-card {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
}
.app606-korenbloem .app-shell .app-card p {
  margin: 0;
}
.app606-korenbloem .app-shell .app-card .app-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-family: "Poppins-600";
  font-size: 16px;
  line-height: 22px;
  color: #292D3E;
}
.app606-korenbloem .app-shell .app-card .app-card__title a,
.app606-korenbloem .app-shell .app-card .app-card__more a {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #F45F3A;
  text-decoration: none;
}
.app606-korenbloem .app-shell .app-card .app-card__title a:hover,
.app606-korenbloem .app-shell .app-card .app-card__more a:hover {
  text-decoration: underline;
}
.app606-korenbloem .app-shell .app-card .app-card__more {
  margin-top: 10px;
}
.app606-korenbloem .app-shell .app-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.app606-korenbloem .app-shell .app-card__empty {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app606-korenbloem .app-shell .app-person {
  margin: 0;
  font-family: "Poppins-600";
  font-size: 14px;
  line-height: 20px;
}
.app606-korenbloem .app-shell .app-person a {
  color: #292D3E;
  text-decoration: none;
}
.app606-korenbloem .app-shell .app-person a:hover {
  color: #F45F3A;
}
.app606-korenbloem .app-shell .app-person__line {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app606-korenbloem .app-shell .app-person__line:empty {
  display: none;
}

/* The app menu's words start on the same line as the titles, tabs and table text. */
.app606-korenbloem .app-shell > main > bisbrick-list > div:first-child .navigation-bar {
  padding-left: var(--app-gutter);
  padding-right: var(--app-gutter);
}
.app606-korenbloem .app-shell > main > bisbrick-list > div:first-child .nb-zone-left {
  justify-content: flex-start;
}
/* The menu item the page belongs to (class app-nav-<n> on the master, gen.mjs navClass) in the primary
   colour, like a selected tab; the navigationBar's own highlight (an exact link match) gets the same colour
   instead of its default cyan. */
.app606-korenbloem .app-shell.app-nav-1 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.app606-korenbloem .app-shell.app-nav-2 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.app606-korenbloem .app-shell.app-nav-3 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.app606-korenbloem .app-shell.app-nav-4 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.app606-korenbloem .app-shell.app-nav-5 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.app606-korenbloem .app-shell.app-nav-6 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.app606-korenbloem .app-shell.app-nav-7 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.app606-korenbloem .app-shell.app-nav-8 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(8) > .nb-link,
.app606-korenbloem .app-shell.app-nav-9 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(9) > .nb-link,
.app606-korenbloem .app-shell > main > bisbrick-list > div:first-child .nb-link.nb-active {
  color: #F45F3A;
}

/* Tabs: an underline row. */
.app606-korenbloem .app-shell .grid-tabs {
  gap: 4px;
  margin: 12px 0 20px;
  padding: 0;
  border-bottom: 1px solid #E4E0D8;
  flex-wrap: wrap;
}
.app606-korenbloem .app-shell .grid-tabs .grid-tab,
.app606-korenbloem .app-shell .grid-tabs .grid-tab:hover {
  max-width: none;
  margin-bottom: -1px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  color: #5F6475;
  font-size: 14px !important;
}
.app606-korenbloem .app-shell .grid-tabs .grid-tab:hover {
  color: #292D3E;
  border-bottom-color: #CFC7B9;
}
.app606-korenbloem .app-shell .grid-tabs .selected-grid-tab,
.app606-korenbloem .app-shell .grid-tabs .selected-grid-tab:hover {
  color: #F45F3A;
  border-bottom-color: #F45F3A;
}

/* Tabs inside a tab: a segmented control, so the two levels read apart. */
.app606-korenbloem .app-shell .tab-content .grid-tabs {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 16px;
  padding: 3px;
  background: #F4F3F0;
  border: 0;
  border-radius: 5px;
}
.app606-korenbloem .app-shell .tab-content .grid-tabs .grid-tab,
.app606-korenbloem .app-shell .tab-content .grid-tabs .grid-tab:hover {
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 5px !important;
  font-size: 13px !important;
}
.app606-korenbloem .app-shell .tab-content .grid-tabs .grid-tab:hover {
  background: rgba(255, 255, 255, 0.6);
}
.app606-korenbloem .app-shell .tab-content .grid-tabs .selected-grid-tab,
.app606-korenbloem .app-shell .tab-content .grid-tabs .selected-grid-tab:hover {
  background: #FFFFFF;
  color: #292D3E;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Stat strip (Koos 2026-10-08): figures, not buttons. No border or fill; a small muted label over
   a large value, hairlines between the figures. One htmlText brick per figure with class app-stat:
   <p>label</p><p data-v="{{x}}">value</p>[<p>note</p>]. The selectors go by the brick's place, not by
   a parent class, so a figure also works in a row that holds other bricks (the CRM dashboard). */
.app606-korenbloem .app-shell .row:has(> div > .app-stat) {
  margin: 4px 0 20px;
  row-gap: 12px;
}
.app606-korenbloem .app-shell .row > div:has(> .app-stat) {
  padding: 0 24px !important;
  /* col-md-auto only applies from 768px; below that Bootstrap makes every column 100% and the strip
     turned into a stack. A figure keeps its own width, the strip wraps instead. */
  flex: 0 0 auto;
  width: auto;
}
/* The first figure of a run lines up with what is above it (a heading or filter may come before it). */
.app606-korenbloem .app-shell .row > div:has(> .app-stat):not(div:has(> .app-stat) + div) {
  padding-left: 0 !important;
}
.app606-korenbloem .app-shell .row > div:has(> .app-stat) + div:has(> .app-stat) {
  border-left: 1px solid #E4E0D8;
}
.app606-korenbloem .app-shell .app-stat {
  display: block;
}
.app606-korenbloem .app-shell .app-stat p {
  margin: 0;
  text-align: left;
}
.app606-korenbloem .app-shell .app-stat p:nth-of-type(1) {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app606-korenbloem .app-shell .app-stat p:nth-of-type(2) {
  margin-top: 2px;
  font-family: "Poppins-600";
  font-size: 24px;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.app606-korenbloem .app-shell .app-stat p:nth-of-type(3) {
  margin-top: 2px;
  font-family: "Poppins-400";
  font-size: 12px;
  line-height: 16px;
  color: #5F6475;
}
.app606-korenbloem .app-shell .app-stat p:nth-of-type(3) img {
  height: 12px;
  width: auto;
  vertical-align: -1px;
}
/* A 0 or an empty value reads as "nothing yet", not as a figure. Keeps the :nth-of-type so it outweighs the value colour. */
.app606-korenbloem .app-shell .app-stat p[data-v="0"]:nth-of-type(2),
.app606-korenbloem .app-shell .app-stat p[data-v=""]:nth-of-type(2) {
  color: #8A8F9E;
}
/* Text values (e-mail, phone, stage, channel) are not figures: smaller, and allowed to wrap. */
.app606-korenbloem .app-shell .app-stat.app-stat--text p:nth-of-type(2) {
  font-size: 15px;
  line-height: 22px;
  margin-top: 4px;
  white-space: normal;
  word-break: break-word;
}
/* The EmailStats brick (Web component, the Campaign dashboard's Mail tab) brings its own bordered tiles;
   inside the apps they get the same strip. A value that says "nothing yet" (0, 0% or –) carries
   bb-email-stats__value--none (Bisbrick-Web, 2026-10-08) and is muted like a 0 in the strip. */
.app606-korenbloem .app-shell .bb-email-stats__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: 4px 0 8px;
}
.app606-korenbloem .app-shell .bb-email-stats__tile {
  flex: 0 0 auto;
  gap: 2px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
}
.app606-korenbloem .app-shell .bb-email-stats__tile:first-child {
  padding-left: 0;
}
.app606-korenbloem .app-shell .bb-email-stats__tile + .bb-email-stats__tile {
  border-left: 1px solid #E4E0D8;
}
.app606-korenbloem .app-shell .bb-email-stats__tile .bb-email-stats__label {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app606-korenbloem .app-shell .bb-email-stats__tile .bb-email-stats__value {
  font-family: "Poppins-600";
  font-size: 24px;
  font-weight: normal;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.app606-korenbloem .app-shell .bb-email-stats__tile .bb-email-stats__value--none {
  color: #8A8F9E;
}
.app606-korenbloem .app-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  overflow: hidden;
  font-family: inherit;
  font-size: 14px;
  color: #292D3E;
}

.app606-korenbloem .app-table thead,
.app606-korenbloem .app-table .sd-table__cell--header,
.app606-korenbloem .app-table th,
.app606-korenbloem .app-table thead th {
  background: #FFFFFF;
  color: #8A8F9E;
  font-size: 11px;
  font-family: var(--font-default-bold, Default-Bold), var(--font-default-regular, Default-Regular), sans-serif;
  font-weight: 600;
  font-synthesis: style small-caps;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #E4E0D8;
  text-align: left;
}

.app606-korenbloem .app-table .sd-table__cell,
.app606-korenbloem .app-table td,
.app606-korenbloem .app-table th {
  padding: 10px 14px;
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  border: none;
}

.app606-korenbloem .app-table tbody tr:hover,
.app606-korenbloem .app-table .sd-table__row:hover {
  background: #FBF9F6;
}

.app606-korenbloem .app-table thead tr:first-child > th:first-child,
.app606-korenbloem .app-table thead tr:first-child > .sd-table__cell:first-child {
  border-top-left-radius: 5px;
}
.app606-korenbloem .app-table thead tr:first-child > th:last-child,
.app606-korenbloem .app-table thead tr:first-child > .sd-table__cell:last-child {
  border-top-right-radius: 5px;
}
.app606-korenbloem .app-table tbody tr:last-child > td:first-child,
.app606-korenbloem .app-table tbody tr:last-child > .sd-table__cell:first-child {
  border-bottom-left-radius: 5px;
}
.app606-korenbloem .app-table tbody tr:last-child > td:last-child,
.app606-korenbloem .app-table tbody tr:last-child > .sd-table__cell:last-child {
  border-bottom-right-radius: 5px;
}

.app606-korenbloem .app-table tbody tr.sd-table__row--selected,
.app606-korenbloem .app-table .sd-table__row--selected {
  background: #FFF6F2;
  color: #292D3E;
}



@media (max-width: 757.98px) {
  .app606-korenbloem .app-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* custom overrides */
.app606-korenbloem .app-table tbody tr + tr > td {
  border-top: 1px solid #F1ECE4;
}
.app606-korenbloem .app-table thead th {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  letter-spacing: .08em;
  font-family: "Poppins-600";
  border-bottom: 1px solid #F1ECE4;
}
/* A row is a line of its own height, not a line of text: the boards put 52px under every row and a
   hairline between them (Contacts board, artifact HtKnRMkmwY5aph5urR38LL). */
.app606-korenbloem .app-table tbody td {
  height: 52px;
  font-family: "Poppins-400";
}
.app606-korenbloem .app-table caption {
  padding: 0;
}
/* A linked cell is not a link in the running-text sense: on the boards a row reads as one line of ink and
   the accent is spent once per screen, on the primary button. So a cell link carries its weight instead of
   a colour, and only turns accent under the cursor. */
.app606-korenbloem .app-table .table-link {
  color: #292D3E;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: "Poppins-500";
  text-decoration: none;
}
.app606-korenbloem .app-table .table-link:hover {
  color: #F45F3A;
  text-decoration: underline;
}
.app606-korenbloem .app-table .table-cell-btn--ghost {
  color: #5F6475;
}
.app606-korenbloem .app-table .table-cell-btn--ghost:hover {
  color: #292D3E;
  background: #F1ECE4;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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;
}
.abm.abm-role{
  
  --b-ink:#292D3E;--b-orange:#F45F3A;--b-yellow:#FFC505;--b-blue:#3A8DFF;--b-purple:#884DFF;--b-teal:#398FA5;
  --b-green:#8ECCC5;--b-red:#F97C7C;--b-lilac:#CCB3FF;--b-creme:#F7F4EF;--b-beige:#EBE8E4;
  
  --dto-accent:#884DFF;--dto-soft:#F1EAFF;--dto-text:#5B2ED6;--dto-acc2:#FFC505;
  --cfo-accent:#398FA5;--cfo-soft:#E4F3F1;--cfo-text:#246B7C;--cfo-acc2:#3A8DFF;
  --mkt-accent:#F45F3A;--mkt-soft:#FDECE6;--mkt-text:#C23E1B;--mkt-acc2:#FFC505;
  --own-accent:#292D3E;--own-soft:#ECEAF2;--own-text:#292D3E;--own-acc2:#F45F3A;
  --ops-accent:#2F7BEA;--ops-soft:#E6F0FF;--ops-text:#1C5FCC;--ops-acc2:#FFC505;
  --hr-accent:#D94B63;--hr-soft:#FDE8EC;--hr-text:#A8324A;--hr-acc2:#8ECCC5;
  --it-accent:#2E8B7E;--it-soft:#E2F3F0;--it-text:#1F6B61;--it-acc2:#CCB3FF;
  --cl-accent:#0F6E74;--cl-soft:#DDEFEF;--cl-text:#0B5459;
  --accent:var(--dto-accent);--accent-soft:var(--dto-soft);--accent-text:var(--dto-text);--acc2:var(--dto-acc2);
  --ink:#292D3E;--muted:#5F6475;--faint:#8B90A0;
  --paper:#FFFFFF;--creme:#F7F4EF;--line:#E6E1D9;--card:#FFFFFF;
  --dark:#292D3E;--dark-ink:#FFFFFF;
  --chrome:#1E2130;--chrome-ink:#F4F2F7;--chrome-muted:#A3A8B8;
  --note-bg:#EEF3FB;--note-ink:#2B4A7A;--note-line:#CFDCF0;
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.abm.abm-role.role-dto{--accent:var(--dto-accent);--accent-soft:var(--dto-soft);--accent-text:var(--dto-text);--acc2:var(--dto-acc2)}
.abm.abm-role.role-cfo{--accent:var(--cfo-accent);--accent-soft:var(--cfo-soft);--accent-text:var(--cfo-text);--acc2:var(--cfo-acc2)}
.abm.abm-role.role-mkt{--accent:var(--mkt-accent);--accent-soft:var(--mkt-soft);--accent-text:var(--mkt-text);--acc2:var(--mkt-acc2)}
.abm.abm-role.role-own{--accent:var(--own-accent);--accent-soft:var(--own-soft);--accent-text:var(--own-text);--acc2:var(--own-acc2)}
.abm.abm-role.role-ops{--accent:var(--ops-accent);--accent-soft:var(--ops-soft);--accent-text:var(--ops-text);--acc2:var(--ops-acc2)}
.abm.abm-role.role-hr{--accent:var(--hr-accent);--accent-soft:var(--hr-soft);--accent-text:var(--hr-text);--acc2:var(--hr-acc2)}
.abm.abm-role.role-it{--accent:var(--it-accent);--accent-soft:var(--it-soft);--accent-text:var(--it-text);--acc2:var(--it-acc2)}
.abm.abm-role.client{--accent:var(--cl-accent);--accent-soft:var(--cl-soft);--accent-text:var(--cl-text)}
.abm.abm-role, .abm.abm-role *{box-sizing:border-box}
.abm.abm-role{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
.abm.abm-role h1,.abm.abm-role h2,.abm.abm-role h3,.abm.abm-role h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.abm.abm-role p{margin:0}
.abm.abm-role button,.abm.abm-role input{font:inherit;color:inherit}
.abm.abm-role :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-role .wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.abm.abm-role .chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome);color:var(--chrome-ink);padding:10px 16px}
.abm.abm-role .chrome-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.abm.abm-role .chrome-label{font-size:12px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.abm.abm-role .chrome-label b{color:var(--chrome-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.abm.abm-role .seg{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.abm.abm-role .seg button{background:none;border:0;color:var(--chrome-muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.abm.abm-role .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-role .toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--chrome-muted);cursor:pointer}
.abm.abm-role .toggle input{accent-color:var(--accent)}
.abm.abm-role section{padding-block:80px}
.abm.abm-role section.alt{background:var(--creme)}
.abm.abm-role .eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.abm.abm-role .h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.15;max-width:26ch}
.abm.abm-role .lead{color:var(--muted);font-size:18px;max-width:60ch}
.abm.abm-role .sec-head{display:grid;gap:12px;margin-bottom:36px}
.abm.abm-role .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;font-size:15px}
.abm.abm-role .btn-primary{background:var(--accent);color:#fff}
.abm.abm-role .btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .btn:disabled{opacity:.45;cursor:default}
.abm.abm-role .link-btn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.abm.abm-role .echo{font-size:14px;color:var(--accent-text);background:var(--accent-soft);padding:10px 14px;border-radius:10px}
.abm.abm-role .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.abm.abm-role .pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.abm.abm-role .p-built{background:var(--accent);color:#fff}
.abm.abm-role .p-store{background:color-mix(in srgb,var(--acc2) 30%,transparent);color:var(--ink)}
.abm.abm-role .p-archie{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.abm.abm-role .p-plain{color:var(--muted);font-weight:500;white-space:normal;padding:0;font-size:14.5px}
.abm.abm-role .p-weak{color:var(--faint);font-weight:500;white-space:normal;padding:0;font-size:14.5px}
.abm.abm-role .note{display:none;margin-top:22px;background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;max-width:82ch}
.abm.abm-role .note b{font-weight:600}
.abm.abm-role.show-notes .note{display:block}
.abm.abm-role .hero{background:var(--creme);padding-block:0;position:relative;overflow:hidden}
.abm.abm-role .hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-block:72px 80px;align-items:center;position:relative}
.abm.abm-role .campaign{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:18px}
.abm.abm-role .campaign span:nth-child(3){color:var(--accent-text)}
.abm.abm-role .cobrand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:26px;color:var(--ink)}
.abm.abm-role .cobrand .x{color:var(--faint);font-weight:500}
.abm.abm-role .motif{display:flex;gap:6px;margin-bottom:22px}
.abm.abm-role .motif span{width:26px;height:12px;border-radius:4px;position:relative}
.abm.abm-role .motif span::before{content:"";position:absolute;top:-4px;left:6px;width:6px;height:4px;border-radius:2px 2px 0 0;background:inherit}
.abm.abm-role .hero h1{font-size:clamp(32px,4.8vw,50px);font-weight:700;line-height:1.07;margin-top:12px}
.abm.abm-role .hero .lead{margin-top:18px}
.abm.abm-role .face{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.abm.abm-role .face::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.abm.abm-role .idea-box{background:var(--card);border-radius:18px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -34px rgba(41,45,62,.45)}
.abm.abm-role .idea-box label{font-family:var(--display);font-weight:600;font-size:22px}
.abm.abm-role .idea-box .sub{font-size:14px;color:var(--muted);margin-top:-8px}
.abm.abm-role .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:15px}
.abm.abm-role .field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-role .hero-visual{position:relative;display:grid}
.abm.abm-role .kv{width:min(430px,100%);height:auto;justify-self:end;margin-right:-24px;display:block}
.abm.abm-role .kv.tall{width:min(340px,80%)}
.abm.abm-role .hero-visual .idea-box{width:min(410px,100%);margin-top:-170px;position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .kv{animation:kvin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes kvin{from{transform:translateY(18px) rotate(-3deg);opacity:.6}to{transform:none;opacity:1}}
}
.abm.abm-role .plan-dlg{border:0;border-radius:20px;padding:30px 30px 26px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:auto;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.abm.abm-role .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.abm.abm-role .plan-dlg #dlg-trial{background:#FFC505;color:#292D3E;border-radius:5px}
.abm.abm-role .plan-dlg h3{font-size:24px;font-weight:600;margin-top:6px}
.abm.abm-role .dlg-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;color:var(--faint);cursor:pointer;width:36px;height:36px;border-radius:10px}
.abm.abm-role .dlg-x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-role .plan-quote{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-weight:500}
.abm.abm-role .plan-steps{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}
.abm.abm-role .plan-steps li::marker{color:var(--accent-text);font-weight:600}
.abm.abm-role .plan-bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.abm.abm-role .plan-bricks span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--creme);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .plan-start{margin-top:14px;font-size:14px;color:var(--muted)}
.abm.abm-role .plan-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.abm.abm-role .plan-cta h4{font-size:18px;font-weight:600}
.abm.abm-role .plan-mail{font-size:13px;color:var(--faint)}
.abm.abm-role .idea-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.abm.abm-role .signals{display:flex;flex-wrap:wrap;gap:10px}
.abm.abm-role .chip{display:inline-flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:8px 8px 8px 14px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .chip .txt{display:grid;gap:1px}
.abm.abm-role .chip small{font-size:11.5px;color:var(--faint)}
.abm.abm-role .chip.guess{background:none;box-shadow:inset 0 0 0 1px var(--faint)}
.abm.abm-role .chip.guess{border:0;background-image:linear-gradient(var(--creme),var(--creme))}
.abm.abm-role .chip.guess small{color:var(--accent-text)}
.abm.abm-role .chip.mine{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .chip.mine small{color:var(--accent-text)}
.abm.abm-role .chip.off{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint)}
.abm.abm-role .chip.off .txt span{text-decoration:line-through}
.abm.abm-role .chip .x{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center}
.abm.abm-role .chip .x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-role .add{display:inline-flex;align-items:center;gap:6px;border:2px dashed var(--accent);color:var(--accent-text);background:none;border-radius:12px;padding:6px 14px;font-size:14px;font-weight:600;cursor:pointer}
.abm.abm-role .add-form{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--accent);border-radius:12px;padding:6px 6px 6px 14px;background:var(--card)}
.abm.abm-role .add-form:focus-within{box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-role .add-form input{border:0;outline:0;padding:0;font-size:14px;background:none;width:min(240px,55vw)}
.abm.abm-role .add-form button{border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:7px 11px;cursor:pointer}
.abm.abm-role .sig-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:22px}
.abm.abm-role .legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.abm.abm-role .legend i{display:inline-block;width:20px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:6px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .legend i.g{box-shadow:inset 0 0 0 1px var(--faint);background:none}
.abm.abm-role .legend i.m{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.abm.abm-role .idea{background:var(--card);border-radius:18px;overflow:hidden;display:grid;align-content:start;box-shadow:0 1px 0 var(--line);transition:transform .2s ease,box-shadow .2s ease}
.abm.abm-role .idea:hover{transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(41,45,62,.4)}
.abm.abm-role .idea .art{height:132px;display:grid;place-items:center;padding:14px;background:var(--accent-soft)}
.abm.abm-role .idea:nth-child(2) .art{background:color-mix(in srgb,var(--acc2) 22%,var(--card))}
.abm.abm-role .idea:nth-child(3) .art{background:color-mix(in srgb,var(--b-blue) 14%,var(--card))}
.abm.abm-role .idea .art svg{width:100%;max-width:220px;height:100%}
.abm.abm-role .idea .body{padding:20px 22px 24px;display:grid;gap:10px}
.abm.abm-role .idea .pill{justify-self:start}
.abm.abm-role .idea h3{font-size:19px;font-weight:600}
.abm.abm-role .idea p{color:var(--muted);font-size:15px}
.abm.abm-role .s-bg{fill:var(--card)}
.abm.abm-role .s-ln{stroke:var(--faint);fill:none;stroke-width:1.5}
.abm.abm-role .s-fl{fill:var(--faint);opacity:.3}
.abm.abm-role .s-ac{fill:var(--accent)}
.abm.abm-role .s-acl{stroke:var(--accent);fill:none;stroke-width:2}
.abm.abm-role .s-sf{fill:var(--accent-soft)}
.abm.abm-role .s-y{fill:var(--acc2)}
.abm.abm-role .band{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start}
.abm.abm-role .panel{background:var(--card);border-radius:18px;padding:20px;box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -32px rgba(41,45,62,.35)}
.abm.abm-role .panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:14px}
.abm.abm-role .panel-head h3{font-size:17px;font-weight:600}
.abm.abm-role .panel-head .row{font-size:13px;gap:12px}
.abm.abm-role .tools{display:grid;gap:6px}
.abm.abm-role .tool{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:10px;background:var(--creme)}
.abm.abm-role .tool .name{flex:1;min-width:0}
.abm.abm-role .tool .name{font-weight:500;font-size:14px}
.abm.abm-role .tool .name small{display:block;font-size:12px;color:var(--faint);font-weight:400}
.abm.abm-role .tool.mine{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.abm.abm-role .tool.fixed .name{color:var(--muted)}
.abm.abm-role .switch{display:inline-flex;background:var(--card);border-radius:9px;padding:3px;box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.abm.abm-role .switch button{border:0;background:none;padding:4px 9px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.abm.abm-role .switch button[aria-pressed="true"].k{background:var(--ink);color:var(--paper)}
.abm.abm-role .switch button[aria-pressed="true"].o{background:var(--accent);color:#fff}
.abm.abm-role .tool .name .pr{display:block;font-size:11.5px;font-weight:400;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm.abm-role .tool .ask{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:var(--accent-text);margin-top:2px}
.abm.abm-role .tool .ask input{width:64px;border:0;border-radius:6px;padding:2px 6px;font-size:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--accent);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.abm.abm-role .tool .ask input::-webkit-outer-spin-button,.abm.abm-role .tool .ask input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-role .tool .pr .qty{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--accent-text);font-weight:500}
.abm.abm-role .tool .pr .qty input{width:54px;border:0;border-radius:6px;padding:1px 5px;font-size:11.5px;background:var(--card);box-shadow:inset 0 0 0 1px var(--accent);font-variant-numeric:tabular-nums}
.abm.abm-role .tool .name .pr{white-space:normal}
.abm.abm-role .tool .rm{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:16px;flex-shrink:0}
.abm.abm-role .tool .rm:hover{background:var(--card);color:var(--ink)}
.abm.abm-role .tools-extra{margin-top:14px;display:grid;gap:8px;font-size:13px;color:var(--muted)}
.abm.abm-role .chips{display:flex;flex-wrap:wrap;gap:6px}
.abm.abm-role .chips button{border:0;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .chips button:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .chips.gone button{color:var(--faint);text-decoration:line-through;font-weight:500}
.abm.abm-role .tool-add{display:flex;gap:6px}
.abm.abm-role .tool-add input{flex:1;min-width:0;border:0;border-radius:8px;padding:6px 10px;font-size:13px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .tool-add input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .tool-add button{border:0;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;background:var(--accent);color:#fff;cursor:pointer}
.abm.abm-role .tag-fixed{font-size:12.5px;color:var(--muted);background:var(--card);padding:5px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.abm.abm-role .bricks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;padding-top:8px}
.abm.abm-role .brick{position:relative;border:0;border-radius:10px;padding:18px 10px 14px;font-family:var(--display);font-weight:600;font-size:14.5px;text-align:center;background:var(--accent-soft);color:var(--accent-text);min-height:64px;display:grid;place-content:center;gap:2px}
.abm.abm-role .brick::before,.abm.abm-role .brick::after{content:"";position:absolute;top:-6px;width:14px;height:7px;border-radius:4px 4px 0 0;background:inherit}
.abm.abm-role .brick::before{left:24%}
.abm.abm-role .brick::after{right:24%}
.abm.abm-role .brick small{font-family:var(--body);font-weight:500;font-size:11.5px;opacity:.8}
.abm.abm-role .brick.hl{background:var(--accent);color:#fff}
.abm.abm-role .brick.linked{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .brick.linked::before,.abm.abm-role .brick.linked::after{background:var(--accent);opacity:.4}
.abm.abm-role .brick.ai{background:var(--ink);color:var(--paper)}
.abm.abm-role .brick.ai .spark{color:var(--acc2)}
.abm.abm-role .brick.link{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.abm.abm-role .brick.link::before,.abm.abm-role .brick.link::after{background:var(--line)}
.abm.abm-role .brick.next{background:none;box-shadow:inset 0 0 0 2px var(--acc2);color:var(--ink);cursor:pointer}
.abm.abm-role .brick.next::before,.abm.abm-role .brick.next::after{display:none}
.abm.abm-role .brick.next:hover{background:color-mix(in srgb,var(--acc2) 18%,transparent)}
.abm.abm-role .band .meter{margin-top:32px;position:relative;z-index:1}
.abm.abm-role .band .meter .strip{grid-template-columns:1fr;gap:8px}
.abm.abm-role .band .meter .stat b{font-size:22px}
.abm.abm-role .meter{margin-top:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:20px 22px;display:grid;gap:10px}
.abm.abm-role .meter-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;font-size:14px;color:var(--muted)}
.abm.abm-role .meter-top b{font-family:var(--display);font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums}
.abm.abm-role .meter-bar{height:12px;border-radius:999px;background:var(--creme);overflow:hidden}
.abm.abm-role .meter-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--acc2));border-radius:999px;transition:width .5s cubic-bezier(.2,.9,.3,1)}
.abm.abm-role .meter small{font-size:12.5px;color:var(--faint)}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .play .brick{animation:snap .7s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i) * 80ms)}

  @keyframes snap{from{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:.5}70%{transform:translate(0,2px)}to{transform:none;opacity:1}}
}
.abm.abm-role .cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:10px}
.abm.abm-role .cmp-bar > span{font-weight:600}
.abm.abm-role .segctl{display:inline-flex;flex-wrap:wrap;background:var(--card);border-radius:12px;padding:4px;box-shadow:inset 0 0 0 1px var(--line);gap:4px}
.abm.abm-role .segctl button{border:0;background:none;padding:9px 14px;border-radius:9px;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer}
.abm.abm-role .segctl button[aria-selected="true"]{background:var(--accent);color:#fff}
.abm.abm-role .cmp-desc{font-size:14px;color:var(--faint);margin-bottom:28px}
.abm.abm-role .h3{font-size:22px;font-weight:600}
.abm.abm-role .tbl-wrap{overflow-x:auto;border-radius:16px;background:var(--card)}
.abm.abm-role table{border-collapse:collapse;width:100%;min-width:680px;font-size:15px}
.abm.abm-role th,.abm.abm-role td{text-align:left;padding:14px 18px;vertical-align:top;border-bottom:1px solid var(--line)}
.abm.abm-role thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-role thead th.us{color:var(--accent-text)}
.abm.abm-role tbody th{font-weight:500}
.abm.abm-role td.us{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.abm.abm-role tbody tr:last-child td,.abm.abm-role tbody tr:last-child th{border-bottom:0}
.abm.abm-role tr.sum th,.abm.abm-role tr.sum td{font-weight:600;background:var(--card)}
.abm.abm-role tr.sum:first-of-type th,.abm.abm-role tr.sum:first-of-type td{border-top:2px solid var(--ink)}
.abm.abm-role tr.sum td.us{background:var(--accent-soft)}
.abm.abm-role .num{font-variant-numeric:tabular-nums}
.abm.abm-role .more-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-soft);color:var(--accent-text);font:600 14.5px/1.2 var(--body,inherit);cursor:pointer;transition:background .15s}
.abm.abm-role .more-btn:hover{background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 30%)}
.abm.abm-role .more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-role .more-btn .chev{font-size:12px}
.abm.abm-role .cmp-open-hint{font-size:14.5px;color:var(--muted);margin-top:4px}
.abm.abm-role th.amt,.abm.abm-role td.amt{min-width:9.5rem;white-space:nowrap}
.abm.abm-role td.calc{color:var(--muted);font-size:13.5px}
.abm.abm-role .tbl-note{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;font-size:13px;color:var(--muted)}
.abm.abm-role .badge{font-size:12px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);border-radius:6px;padding:3px 8px}
.abm.abm-role details.sources{margin-top:14px;border-radius:14px;background:var(--card);padding:14px 18px;font-size:13.5px;color:var(--muted)}
.abm.abm-role details.sources summary{cursor:pointer;font-weight:600;color:var(--ink)}
.abm.abm-role details.sources ul{margin:10px 0 0;padding-left:18px;display:grid;gap:5px}
.abm.abm-role details.sources a{color:var(--accent-text)}
.abm.abm-role .t2-head{display:grid;gap:8px;margin:48px 0 18px}
.abm.abm-role .calc{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:18px}
.abm.abm-role .calc-group{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:12px;align-content:start}
.abm.abm-role .calc-group.us{background:var(--accent-soft)}
.abm.abm-role .calc-group h4{font-size:16px;font-weight:600}
.abm.abm-role .calc-group .hint{font-size:13px;color:var(--muted)}
.abm.abm-role .calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.abm.abm-role .calc-group.us .calc-fields{grid-template-columns:1fr}
.abm.abm-role .fieldset{display:grid;gap:5px}
.abm.abm-role .fieldset label{font-size:13px;color:var(--muted)}
.abm.abm-role .stepper{display:inline-flex;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;width:max-content}
.abm.abm-role .stepper button{border:0;background:none;width:36px;font-size:18px;color:var(--accent-text);cursor:pointer}
.abm.abm-role .stepper button:hover{background:var(--creme)}
.abm.abm-role .stepper input{width:70px;border:0;border-inline:1px solid var(--line);text-align:center;background:none;font-variant-numeric:tabular-nums;padding:8px 4px;-moz-appearance:textfield}
.abm.abm-role .stepper input::-webkit-outer-spin-button,.abm.abm-role .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-role .plan-pick{font-size:14px}
.abm.abm-role .plan-pick b{font-family:var(--display);color:var(--accent-text)}
.abm.abm-role .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.abm.abm-role .stat{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:4px}
.abm.abm-role .stat span{font-size:13px;color:var(--muted)}
.abm.abm-role .stat b{font-family:var(--display);font-size:clamp(24px,3.4vw,32px);font-weight:600;font-variant-numeric:tabular-nums}
.abm.abm-role .stat.win{background:var(--accent);color:#fff}
.abm.abm-role .stat.win span{color:rgba(255,255,255,.9)}
.abm.abm-role .profile-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.abm.abm-role .profile-bar .segctl button[disabled]{opacity:.4;cursor:default}
.abm.abm-role .picks{display:grid;gap:22px;margin-top:8px}
.abm.abm-role .pick-group h3{font-family:var(--display);font-size:16px;font-weight:600;margin:0 0 10px}
.abm.abm-role .pick-row{display:flex;flex-wrap:wrap;gap:8px}
.abm.abm-role .pick{border:0;background:var(--card);color:var(--ink);border-radius:12px;padding:10px 15px;font:inherit;font-size:14px;cursor:pointer;min-height:42px;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .pick:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .pick[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text);font-weight:600;box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .self-foot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:22px;font-size:14px;color:var(--muted)}
.abm.abm-role .self-need{margin-top:22px;max-width:760px}
.abm.abm-role .self-need textarea{width:100%;resize:vertical}
.abm.abm-role .need-hint{font-size:13.5px;color:var(--muted);margin-top:8px}
.abm.abm-role .why-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:18px}
.abm.abm-role .why-progress{flex:1;min-width:120px;max-width:220px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.abm.abm-role .why-progress i{display:block;height:100%;width:0;background:var(--accent)}
.abm.abm-role .why{overflow:hidden;border-radius:18px}
.abm.abm-role .why-track{display:flex;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.abm.abm-role .why-card{flex:0 0 100%;background:var(--creme);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:minmax(200px,300px) 1fr;align-items:stretch}
.abm.abm-role .why-card .art{min-height:120px;display:grid;place-items:center;padding:18px;background:var(--accent-soft)}
.abm.abm-role .why-card:nth-child(2) .art{background:color-mix(in srgb,var(--acc2) 22%,var(--creme))}
.abm.abm-role .why-card .art svg{width:100%;max-width:210px;height:100%}
.abm.abm-role .why-card .body{padding:22px 24px 26px;display:grid;gap:12px}
.abm.abm-role .why-card h3{font-size:20px;font-weight:600}
.abm.abm-role .why-card ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.abm.abm-role .why-card li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;line-height:1.5}
.abm.abm-role .why-card li b{font-weight:600;color:var(--ink)}
.abm.abm-role .why-card li::before{content:"";width:12px;height:12px;margin-top:6px;border-radius:4px;background:var(--accent)}
.abm.abm-role .why-card .fair{font-size:13.5px;color:var(--muted);padding-top:4px}
@media (max-width:820px){.abm.abm-role .why-card{grid-template-columns:1fr}
.abm.abm-role .why-card .art{min-height:110px}
}
@media (prefers-reduced-motion:reduce){.abm.abm-role .why-track{transition:none}
}
.abm.abm-role section.sep{border-top:1px solid var(--line)}
.abm.abm-role .proof-sec{background:var(--dark);color:var(--dark-ink)}
.abm.abm-role .proof{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.abm.abm-role .proof-sec .eyebrow{color:var(--acc2)}
.abm.abm-role .proof-sec .lead{color:rgba(255,255,255,.8)}
.abm.abm-role .facts{display:grid;gap:14px}
.abm.abm-role .kv-proof{width:min(330px,100%);height:auto;justify-self:center;display:block;margin-block:-40px}
.abm.abm-role .fact{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:14px}
.abm.abm-role .fact b{font-family:var(--display);font-size:28px;font-weight:600;min-width:3.2ch}
.abm.abm-role .fact:nth-child(1) b{color:var(--b-orange)}
.abm.abm-role .fact:nth-child(2) b{color:var(--b-yellow)}
.abm.abm-role .fact:nth-child(3) b{color:var(--b-green)}
.abm.abm-role .fact span{color:rgba(255,255,255,.85)}
.abm.abm-role .colleagues{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.abm.abm-role .colleague{background:var(--card);border-radius:18px;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-content:start}
.abm.abm-role .avatar{width:50px;height:50px;border-radius:50%;background:var(--av);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:18px;grid-row:span 2}
.abm.abm-role .colleague .who{font-family:var(--display);font-weight:600;font-size:19px;align-self:end}
.abm.abm-role .colleague .role{font-size:13px;color:var(--faint)}
.abm.abm-role .colleague p,.abm.abm-role .colleague button{grid-column:1 / -1}
.abm.abm-role .colleague p{color:var(--muted);font-size:15px;margin-top:6px}
.abm.abm-role .colleague button{justify-self:start;margin-top:6px}
.abm.abm-role .close-in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:end;justify-content:space-between}
.abm.abm-role .close h2{font-size:clamp(28px,4vw,40px);font-weight:700;max-width:20ch}
.abm.abm-role .brand{font-family:var(--display);font-weight:600;color:var(--muted);margin-top:12px}
.abm.abm-role .brand em{font-style:normal;color:var(--b-orange)}
@media (max-width:860px){.abm.abm-role .hero-in,.abm.abm-role .proof,.abm.abm-role .band,.abm.abm-role .calc{grid-template-columns:1fr}
.abm.abm-role .kv{justify-self:center;margin-right:0;width:min(320px,80%)}
.abm.abm-role .kv-proof{width:min(240px,70%);margin-block:8px 0}
.abm.abm-role .hero-visual .idea-box{margin-top:-60px}
.abm.abm-role .ideas,.abm.abm-role .colleagues,.abm.abm-role .strip,.abm.abm-role .calc-fields{grid-template-columns:1fr}
.abm.abm-role section{padding-block:56px}
}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .swap{animation:fade .25s ease}

  @keyframes fade{from{opacity:.5}to{opacity:1}}
}

.abm.abm-role{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.abm.abm-role .note{display:none}
.abm.abm-role .cmp-loader{display:flex;justify-content:center;align-items:center;min-height:60vh}
.abm.abm-role .cmp-loader::after{content:'';width:40px;height:40px;border-radius:50%;border:3px solid rgba(19,26,42,.15);border-top-color:rgb(19,26,42);animation:cmp-spin .8s linear infinite}
@keyframes cmp-spin{to{transform:rotate(360deg)}}
.abm.abm-role h1,.abm.abm-role h2,.abm.abm-role h3,.abm.abm-role h4,.abm.abm-role p,.abm.abm-role span,.abm.abm-role b{text-transform:none}
/* account manager widget: the page sanitizer strips position:fixed from inline styles */
.abm.abm-role .am{position:fixed;left:16px;bottom:16px;z-index:50}
.abm.abm-role .am summary::-webkit-details-marker{display:none}

/* abm-widget 2026-10-21 */
.abm.abm-role .hero-in{padding-block:40px 48px;gap:40px}
.abm.abm-role .campaign{margin-bottom:10px}
.abm.abm-role .cobrand{margin-bottom:14px}
.abm.abm-role .kv.tall{width:auto;max-width:min(300px,80%);max-height:300px}
.abm.abm-role .hero-visual .idea-box{margin-top:-96px}
.abm.abm-role .hero-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muted)}
.abm.abm-role .hero-points li{display:flex;align-items:center;gap:7px}
.abm.abm-role .hero-points li::before{content:'';width:12px;height:6px;border-left:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);transform:translateY(-2px) rotate(-45deg)}
.abm.abm-role .am{left:auto;right:20px;bottom:20px;width:max-content;max-width:min(460px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px -12px rgba(19,26,42,.28);font-family:var(--body);color:var(--ink)}
.abm.abm-role .am-head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px}
.abm.abm-role .am-pic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent-soft) center/cover no-repeat;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.abm.abm-role .am-who{display:flex;flex-direction:column;min-width:0;flex:1}
.abm.abm-role .am-hi{font-weight:600;font-size:15px;line-height:1.3}
.abm.abm-role .am-role{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm.abm-role .am-toggle{flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 4px 4px 0}
.abm.abm-role .am[open] .am-toggle{transform:rotate(-135deg);margin:4px 4px 0 0}
.abm.abm-role .am-body{padding:0 14px 14px;display:grid;gap:10px;width:0;min-width:100%}
.abm.abm-role .am-pitch{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.abm.abm-role .am-cta{flex:none;width:auto;padding:10px 16px;font-size:14px;white-space:nowrap}
.abm.abm-role .am-links{margin:0;display:flex;gap:16px;font-size:13px}
.abm.abm-role .am-links a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.abm.abm-role .am{right:16px;bottom:16px;width:auto;left:16px}.abm.abm-role .am-head{flex-wrap:wrap}.abm.abm-role .am-cta{order:3;width:100%;text-align:center;justify-content:center}}

.abm.abm-partner{
  
  --b-ink:#292D3E;--b-orange:#F45F3A;--b-yellow:#FFC505;--b-blue:#3A8DFF;--b-purple:#884DFF;--b-teal:#398FA5;
  --b-green:#8ECCC5;--b-red:#F97C7C;--b-lilac:#CCB3FF;--b-creme:#F7F4EF;--b-beige:#EBE8E4;
  
  --bur-accent:#F45F3A;--bur-soft:#FDECE6;--bur-text:#C23E1B;--bur-acc2:#FFC505;
  --con-accent:#398FA5;--con-soft:#E4F3F1;--con-text:#246B7C;--con-acc2:#3A8DFF;
  --imp-accent:#2F74E0;--imp-soft:#E6F0FF;--imp-text:#1F56B8;--imp-acc2:#FFC505;
  --ver-accent:#884DFF;--ver-soft:#F1EAFF;--ver-text:#5B2ED6;--ver-acc2:#FFC505;
  --accent:var(--bur-accent);--accent-soft:var(--bur-soft);--accent-text:var(--bur-text);--acc2:var(--bur-acc2);
  --ink:#292D3E;--muted:#5F6475;--faint:#8B90A0;
  --paper:#FFFFFF;--creme:#F7F4EF;--line:#E6E1D9;--card:#FFFFFF;
  --dark:#292D3E;--dark-ink:#FFFFFF;
  --chrome:#1E2130;--chrome-ink:#F4F2F7;--chrome-muted:#A3A8B8;
  --note-bg:#EEF3FB;--note-ink:#2B4A7A;--note-line:#CFDCF0;
  --tbc-bg:#FFF6D6;--tbc-line:#E3B200;--tbc-ink:#6B5200;
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.abm.abm-partner.face-bur{--accent:var(--bur-accent);--accent-soft:var(--bur-soft);--accent-text:var(--bur-text);--acc2:var(--bur-acc2)}
.abm.abm-partner.face-con{--accent:var(--con-accent);--accent-soft:var(--con-soft);--accent-text:var(--con-text);--acc2:var(--con-acc2)}
.abm.abm-partner.face-imp{--accent:var(--imp-accent);--accent-soft:var(--imp-soft);--accent-text:var(--imp-text);--acc2:var(--imp-acc2)}
.abm.abm-partner.face-ver{--accent:var(--ver-accent);--accent-soft:var(--ver-soft);--accent-text:var(--ver-text);--acc2:var(--ver-acc2)}
.abm.abm-partner, .abm.abm-partner *{box-sizing:border-box}
.abm.abm-partner{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
.abm.abm-partner h1,.abm.abm-partner h2,.abm.abm-partner h3,.abm.abm-partner h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.abm.abm-partner p{margin:0}
.abm.abm-partner button,.abm.abm-partner input{font:inherit;color:inherit}
.abm.abm-partner :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-partner .wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.abm.abm-partner .chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome);color:var(--chrome-ink);padding:10px 16px}
.abm.abm-partner .chrome-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.abm.abm-partner .chrome-label{font-size:12px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.abm.abm-partner .chrome-label b{color:var(--chrome-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.abm.abm-partner .seg{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.abm.abm-partner .seg button{background:none;border:0;color:var(--chrome-muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.abm.abm-partner .seg button:hover{color:var(--chrome-ink);background:rgba(255,255,255,.08)}
.abm.abm-partner .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--chrome-muted);cursor:pointer}
.abm.abm-partner .toggle input{accent-color:var(--accent)}
.abm.abm-partner section{padding-block:80px}
.abm.abm-partner section.alt{background:var(--creme)}
.abm.abm-partner .eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.abm.abm-partner .h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.15;max-width:26ch}
.abm.abm-partner .lead{color:var(--muted);font-size:18px;max-width:60ch}
.abm.abm-partner .sec-head{display:grid;gap:12px;margin-bottom:36px}
.abm.abm-partner .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;font-size:15px;transition:transform .15s ease,filter .15s ease}
.abm.abm-partner .btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.abm.abm-partner .btn-primary{background:var(--accent);color:#fff}
.abm.abm-partner .btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .btn-quiet:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.abm.abm-partner .pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.abm.abm-partner .p-rec{background:var(--accent);color:#fff}
.abm.abm-partner .p-also{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.abm.abm-partner .echo{font-size:14px;color:var(--accent-text);background:var(--accent-soft);padding:10px 14px;border-radius:10px}
.abm.abm-partner .num{font-variant-numeric:tabular-nums}
.abm.abm-partner .note{display:none;margin-top:22px;background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;max-width:82ch}
.abm.abm-partner .note b{font-weight:600}
.abm.abm-partner .note p+p{margin-top:6px}
.abm.abm-partner.show-notes .note{display:block}
.abm.abm-partner .tbc{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--tbc-ink);background:var(--tbc-bg);box-shadow:inset 0 0 0 1px var(--tbc-line);border-radius:6px;padding:1px 7px;white-space:nowrap;vertical-align:1px}
.abm.abm-partner .hero{background:var(--creme);padding-block:0;position:relative;overflow:hidden}
.abm.abm-partner .hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-block:64px 80px;align-items:center;position:relative}
.abm.abm-partner .campaign{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);letter-spacing:-.005em;display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:22px}
.abm.abm-partner .campaign span:nth-child(3){color:var(--accent-text)}
.abm.abm-partner .cobrand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:22px;color:var(--ink)}
.abm.abm-partner .cobrand .x{color:var(--faint);font-weight:500}
.abm.abm-partner .hero h1{font-size:clamp(32px,4.8vw,50px);font-weight:700;line-height:1.07;margin-top:12px}
.abm.abm-partner .hero .lead{margin-top:18px}
.abm.abm-partner .face{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.abm.abm-partner .face::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.abm.abm-partner .hero-cta{margin-top:26px}
.abm.abm-partner .idea-box{background:var(--card);border-radius:18px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -34px rgba(41,45,62,.45)}
.abm.abm-partner .idea-box label{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2}
.abm.abm-partner .idea-box .sub{font-size:14px;color:var(--muted);margin-top:-6px}
.abm.abm-partner .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:15px}
.abm.abm-partner .field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-partner .hero-visual{position:relative;display:grid}
.abm.abm-partner .kv{width:min(430px,100%);height:auto;justify-self:end;margin-right:-24px;display:block}
.abm.abm-partner .kv.tall{width:min(340px,80%)}
.abm.abm-partner .hero-visual .idea-box{width:min(410px,100%);margin-top:-170px;position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .kv{animation:kvin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes kvin{from{transform:translateY(18px) rotate(-3deg);opacity:.6}to{transform:none;opacity:1}}
}
.abm.abm-partner .plan-dlg{border:0;border-radius:20px;padding:30px 30px 26px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:auto;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.abm.abm-partner .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.abm.abm-partner .plan-dlg h3{font-size:24px;font-weight:600;margin-top:6px}
.abm.abm-partner .dlg-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;color:var(--faint);cursor:pointer;width:36px;height:36px;border-radius:10px}
.abm.abm-partner .dlg-x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-partner .plan-quote{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--creme);color:var(--ink);font-weight:500}
.abm.abm-partner .plan-steps{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}
.abm.abm-partner .plan-steps li::marker{color:var(--accent-text);font-weight:600}
.abm.abm-partner .plan-bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.abm.abm-partner .plan-bricks span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--creme);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .plan-start{margin-top:14px;font-size:14px;color:var(--muted)}
.abm.abm-partner .plan-role{margin-top:14px}
.abm.abm-partner .plan-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.abm.abm-partner .plan-cta h4{font-size:18px;font-weight:600}
.abm.abm-partner .plan-mail{font-size:13px;color:var(--faint)}
.abm.abm-partner .idea-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.abm.abm-partner .link-btn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.abm.abm-partner .types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.abm.abm-partner .type{background:var(--creme);border-radius:18px;padding:22px 20px 22px;display:grid;gap:12px;align-content:start;grid-template-rows:auto auto auto 1fr}
.abm.abm-partner .type.rec{background:var(--accent-soft)}
.abm.abm-partner .type-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.abm.abm-partner .type-top small{font-size:12px;color:var(--faint)}
.abm.abm-partner .type h3{font-size:20px;font-weight:600}
.abm.abm-partner .type dl{margin:0;display:grid;gap:10px;font-size:14.5px}
.abm.abm-partner .type dt{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .type dd{margin:2px 0 0;color:var(--muted)}
.abm.abm-partner .type.rec dd{color:var(--ink)}
.abm.abm-partner .mini-bricks{display:flex;flex-wrap:wrap;gap:12px 6px;padding-top:6px;margin-bottom:4px}
.abm.abm-partner .brick{position:relative;border:0;border-radius:10px;padding:18px 10px 14px;font-family:var(--display);font-weight:600;font-size:14.5px;text-align:center;background:var(--accent-soft);color:var(--accent-text);min-height:64px;display:grid;place-content:center;gap:2px}
.abm.abm-partner .brick::before,.abm.abm-partner .brick::after{content:"";position:absolute;top:-6px;width:14px;height:7px;border-radius:4px 4px 0 0;background:inherit}
.abm.abm-partner .brick::before{left:24%}
.abm.abm-partner .brick::after{right:24%}
.abm.abm-partner .brick.sm{min-height:0;padding:9px 12px 7px;font-size:12.5px;border-radius:8px}
.abm.abm-partner .brick.sm::before,.abm.abm-partner .brick.sm::after{top:-5px;width:10px;height:5px;border-radius:3px 3px 0 0}
.abm.abm-partner .brick.base{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.abm.abm-partner .brick.base::before,.abm.abm-partner .brick.base::after{background:var(--line)}
.abm.abm-partner .brick.hl{background:var(--accent);color:#fff}
.abm.abm-partner .shift{margin-top:40px;display:grid;gap:14px}
.abm.abm-partner .shift h3{font-size:20px;font-weight:600}
.abm.abm-partner .shift-rows{display:grid;gap:8px}
.abm.abm-partner .shift-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;background:var(--creme);border-radius:14px;padding:14px 18px;font-size:15px}
.abm.abm-partner .shift-row .now{color:var(--muted)}
.abm.abm-partner .shift-row .arrow{color:var(--accent-text);font-weight:700}
.abm.abm-partner .shift-row .with{font-weight:500}
.abm.abm-partner .shift-head{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;padding:0 18px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .shift-head span:nth-child(2){visibility:hidden}
.abm.abm-partner .calc{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px}
.abm.abm-partner .calc-group{background:var(--card);border-radius:16px;padding:20px 22px;display:grid;gap:16px;align-content:start}
.abm.abm-partner .calc-group h4{font-size:16px;font-weight:600}
.abm.abm-partner .calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.abm.abm-partner .fieldset{display:grid;gap:6px;align-content:start}
.abm.abm-partner .fieldset.full{grid-column:1 / -1}
.abm.abm-partner .fieldset label,.abm.abm-partner .fieldset .lbl{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.abm.abm-partner .ex{font-size:11px;font-weight:600;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line);border-radius:5px;padding:0 6px}
.abm.abm-partner .stepper{display:inline-flex;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden;width:max-content}
.abm.abm-partner .stepper:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .stepper button{border:0;background:none;width:38px;font-size:18px;color:var(--accent-text);cursor:pointer;font-weight:600}
.abm.abm-partner .stepper button:hover{background:var(--accent-soft)}
.abm.abm-partner .stepper input{width:72px;border:0;border-inline:1px solid var(--line);text-align:center;background:none;font-variant-numeric:tabular-nums;padding:9px 4px;-moz-appearance:textfield}
.abm.abm-partner .stepper input:focus{outline:none}
.abm.abm-partner .stepper input::-webkit-outer-spin-button,.abm.abm-partner .stepper input::-webkit-inner-spin-button,.abm.abm-partner .pct input::-webkit-outer-spin-button,.abm.abm-partner .pct input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-partner .segctl{display:inline-flex;flex-wrap:wrap;background:var(--paper);border-radius:12px;padding:4px;box-shadow:inset 0 0 0 1.5px var(--line);gap:4px}
.abm.abm-partner .segctl button{border:0;background:none;padding:8px 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;display:grid;text-align:left;line-height:1.25}
.abm.abm-partner .segctl button small{font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.abm.abm-partner .segctl button:hover{background:var(--accent-soft);color:var(--accent-text)}
.abm.abm-partner .segctl button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .pct{display:inline-flex;align-items:center;gap:0;border-radius:10px;background:var(--tbc-bg);box-shadow:inset 0 0 0 1.5px var(--tbc-line);width:max-content;overflow:hidden}
.abm.abm-partner .pct:focus-within{box-shadow:inset 0 0 0 2px var(--tbc-line),0 0 0 4px var(--tbc-bg)}
.abm.abm-partner .pct input{width:90px;border:0;background:none;padding:9px 12px;font-variant-numeric:tabular-nums;color:var(--ink);-moz-appearance:textfield}
.abm.abm-partner .pct input:focus{outline:none}
.abm.abm-partner .pct input::placeholder{color:var(--tbc-ink);opacity:.9}
.abm.abm-partner .pct span{padding-right:12px;color:var(--tbc-ink);font-weight:600}
.abm.abm-partner .calc-hint{font-size:13px;color:var(--muted)}
.abm.abm-partner .results{display:grid;gap:10px;align-content:start}
.abm.abm-partner .stat{background:var(--card);border-radius:16px;padding:16px 20px;display:grid;gap:2px}
.abm.abm-partner .stat span{font-size:13px;color:var(--muted)}
.abm.abm-partner .stat b{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:600;font-variant-numeric:tabular-nums}
.abm.abm-partner .stat small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .stat.open b{color:var(--tbc-ink);font-size:18px;font-family:var(--body);font-weight:600}
.abm.abm-partner .stat.open{background:var(--tbc-bg)}
.abm.abm-partner .stat.win{background:var(--accent);color:#fff}
.abm.abm-partner .stat.win span,.abm.abm-partner .stat.win small{color:rgba(255,255,255,.9)}
.abm.abm-partner .calc-foot{font-size:13px;color:var(--muted);max-width:80ch;display:grid;gap:6px}
.abm.abm-partner .benefit-groups{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.abm.abm-partner .bgroup h3{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm.abm-partner .benefits{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.abm.abm-partner .benefit{background:var(--creme);border-radius:14px;padding:14px 18px;display:grid;gap:3px}
.abm.abm-partner .benefit b{font-family:var(--display);font-weight:600;font-size:16px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.abm.abm-partner .benefit span{color:var(--muted);font-size:14.5px}
.abm.abm-partner .benefit.focus{background:var(--accent-soft)}
.abm.abm-partner .benefit.focus span{color:var(--ink)}
.abm.abm-partner .benefit.tbd{background:var(--tbc-bg);box-shadow:inset 0 0 0 1.5px var(--tbc-line)}
.abm.abm-partner .benefit.tbd span{color:var(--ink)}
.abm.abm-partner .s-bg{fill:var(--card)}
.abm.abm-partner .s-ln{stroke:var(--faint);fill:none;stroke-width:1.5}
.abm.abm-partner .s-fl{fill:var(--faint);opacity:.3}
.abm.abm-partner .s-ac{fill:var(--accent)}
.abm.abm-partner .s-acl{stroke:var(--accent);fill:none;stroke-width:2}
.abm.abm-partner .s-sf{fill:var(--accent-soft)}
.abm.abm-partner .s-y{fill:var(--acc2)}
.abm.abm-partner .leads-sec{background:var(--accent-soft)}
.abm.abm-partner .leads-sec .lead{color:var(--ink)}
.abm.abm-partner .leadflow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-top:26px}
.abm.abm-partner .channels-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.abm.abm-partner .channels-head h3{font-size:19px;font-weight:600}
.abm.abm-partner .channels-head p{color:var(--ink);font-size:14.5px}
.abm.abm-partner .channels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.abm.abm-partner .ch{background:var(--card);border-radius:14px;padding:14px 14px 13px;display:grid;grid-template-columns:36px 1fr;column-gap:12px;row-gap:2px;align-items:start}
.abm.abm-partner .ch-ico{grid-row:span 2;width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center}
.abm.abm-partner .ch:nth-child(3n+2) .ch-ico{background:var(--acc2);color:var(--b-ink)}
.abm.abm-partner .ch:nth-child(3n) .ch-ico{background:var(--b-ink);color:#fff}
.abm.abm-partner .ch-ico svg{width:20px;height:20px}
.abm.abm-partner .ch b{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25}
.abm.abm-partner .ch span:not(.ch-ico){font-size:13px;color:var(--muted);line-height:1.4}
.abm.abm-partner .channels-foot{margin-top:10px;font-size:13px;color:var(--muted)}
@media (max-width:960px){.abm.abm-partner .channels{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){.abm.abm-partner .channels{grid-template-columns:1fr}
}
.abm.abm-partner .lf-col{background:var(--card);border-radius:18px;padding:18px 18px 16px;display:grid;gap:12px;align-content:start;box-shadow:0 18px 40px -32px rgba(41,45,62,.4)}
.abm.abm-partner .lf-col small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .lf-label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--accent-text)}
.abm.abm-partner .lf-bricks{display:flex;flex-wrap:wrap;gap:12px 6px;padding-top:6px}
.abm.abm-partner .lf-line{font-size:14px;color:var(--ink);font-weight:500}
.abm.abm-partner .lf-arrow{align-self:center;font-family:var(--display);font-size:30px;color:var(--accent);font-weight:700}
.abm.abm-partner .lf-leads{display:grid;gap:8px}
.abm.abm-partner .lead-chip{display:flex;align-items:center;gap:10px;background:var(--creme);border-radius:10px;padding:8px 10px;font-size:13.5px}
.abm.abm-partner .lead-chip i{width:8px;height:8px;border-radius:50%;background:var(--acc2);flex-shrink:0}
.abm.abm-partner .lead-chip b{font-weight:600}
.abm.abm-partner .lf-you{background:var(--accent);color:#fff}
.abm.abm-partner .lf-you .lf-label{color:rgba(255,255,255,.85)}
.abm.abm-partner .lf-you small{color:rgba(255,255,255,.85)}
.abm.abm-partner .lf-you .tbc{white-space:normal}
.abm.abm-partner .match{display:grid;gap:8px}
.abm.abm-partner .match-card{background:rgba(255,255,255,.14);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.abm.abm-partner .match-card b{font-family:var(--display);font-size:17px;font-weight:600}
.abm.abm-partner .match-card span{font-size:13.5px;color:rgba(255,255,255,.9)}
.abm.abm-partner .lead-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.abm.abm-partner .lead-point{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:6px}
.abm.abm-partner .lead-point b{font-family:var(--display);font-weight:600;font-size:17px}
.abm.abm-partner .lead-point span{color:var(--muted);font-size:14.5px}
.abm.abm-partner .hero-leads{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:var(--ink)}
.abm.abm-partner .hero-leads::before{content:"✦";color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .play .lead-chip{animation:chipin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 140ms)}
.abm.abm-partner .play .match-card{animation:chipin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:.55s}

  @keyframes chipin{from{transform:translateX(-14px);opacity:.35}to{transform:none;opacity:1}}
}
.abm.abm-partner .type-art{background:var(--card);border-radius:12px;height:92px;display:grid;place-items:center;padding:8px;margin-bottom:2px}
.abm.abm-partner .type.rec .type-art{background:color-mix(in srgb,var(--card) 70%,var(--accent-soft))}
.abm.abm-partner .type-art svg{width:100%;max-width:180px;height:100%}
.abm.abm-partner .shift-row{grid-template-columns:1fr 44px 1fr;padding:0;background:none;gap:10px}
.abm.abm-partner .shift-row .now,.abm.abm-partner .shift-row .with{border-radius:14px;padding:16px 18px;display:grid;gap:4px;align-content:center;min-height:74px}
.abm.abm-partner .shift-row .now{background:var(--creme);color:var(--muted)}
.abm.abm-partner .shift-row .with{background:var(--accent-soft);color:var(--ink);font-weight:500}
.abm.abm-partner .shift-row .arrow{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;justify-self:center;font-size:18px}
.abm.abm-partner .shift-row.lead-row .with{background:var(--accent);color:#fff}
.abm.abm-partner .shift-row.lead-row .with small{color:rgba(255,255,255,.88)}
.abm.abm-partner .shift-row small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.abm.abm-partner .shift-head{grid-template-columns:1fr 44px 1fr;padding:0 4px}
.abm.abm-partner .calc-left{display:grid;gap:16px;align-content:start}
.abm.abm-partner .store-note{font-size:13px;color:var(--muted)}
.abm.abm-partner .benefit.lead{background:var(--accent);color:#fff}
.abm.abm-partner .benefit.lead span{color:rgba(255,255,255,.9)}
.abm.abm-partner .benefit.lead .pill{background:#fff;color:var(--accent-text)}
.abm.abm-partner .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.abm.abm-partner .prod{background:var(--creme);border-radius:18px;overflow:hidden;display:grid;align-content:start}
.abm.abm-partner .prod-art{height:110px;display:grid;place-items:center;padding:12px;background:var(--accent-soft)}
.abm.abm-partner .prod:nth-child(2) .prod-art{background:color-mix(in srgb,var(--acc2) 22%,var(--card))}
.abm.abm-partner .prod:nth-child(3) .prod-art{background:color-mix(in srgb,var(--b-blue) 14%,var(--card))}
.abm.abm-partner .prod-art svg{width:100%;max-width:200px;height:100%}
.abm.abm-partner .prod-body{padding:18px 20px 20px;display:grid;gap:8px}
.abm.abm-partner .prod-body h3{font-size:18px;font-weight:600}
.abm.abm-partner .prod-body p{color:var(--muted);font-size:14.5px}
.abm.abm-partner .prod-body .how{font-size:13px;color:var(--ink)}
.abm.abm-partner .prod-body .how b{color:var(--accent-text)}
.abm.abm-partner .ladder{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;margin-top:22px}
.abm.abm-partner .rung{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:4px}
.abm.abm-partner .rung small{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--accent-text)}
.abm.abm-partner .rung b{font-family:var(--display);font-weight:600;font-size:16px}
.abm.abm-partner .rung span{font-size:13.5px;color:var(--muted)}
.abm.abm-partner .rung.top{background:var(--accent);box-shadow:none;color:#fff}
.abm.abm-partner .rung.top small,.abm.abm-partner .rung.top span{color:rgba(255,255,255,.9)}
.abm.abm-partner .ladder .arrow{align-self:center;font-family:var(--display);font-weight:700;font-size:24px;color:var(--accent)}
@media (max-width:860px){.abm.abm-partner .prod-grid,.abm.abm-partner .ladder{grid-template-columns:1fr}
.abm.abm-partner .ladder .arrow{transform:rotate(90deg);justify-self:center}
}
.abm.abm-partner .ubr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.abm.abm-partner .ubr{background:var(--creme);border-radius:18px;padding:22px 22px 24px;display:grid;gap:10px;align-content:start;position:relative}
.abm.abm-partner .ubr.hl{background:var(--accent);color:#fff}
.abm.abm-partner .ubr.hl p{color:rgba(255,255,255,.9)}
.abm.abm-partner .ubr .brick{justify-self:start;min-height:0;padding:10px 14px 8px;font-size:13px}
.abm.abm-partner .ubr.hl .brick{background:#fff;color:var(--accent-text)}
.abm.abm-partner .ubr h3{font-size:21px;font-weight:600;line-height:1.2}
.abm.abm-partner .ubr p{color:var(--muted);font-size:15px}
.abm.abm-partner .ubr-more{margin-top:16px;font-size:14.5px;color:var(--muted)}
.abm.abm-partner .type-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.abm.abm-partner .type-tab{border:0;border-radius:12px;padding:10px 14px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;text-align:left;display:grid;gap:2px;color:var(--ink)}
.abm.abm-partner .type-tab b{font-family:var(--display);font-weight:600;font-size:16px}
.abm.abm-partner .type-tab small{font-size:12px;color:var(--faint)}
.abm.abm-partner .type-tab:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .type-tab[aria-selected="true"]{background:var(--accent);box-shadow:none;color:#fff}
.abm.abm-partner .type-tab[aria-selected="true"] small{color:rgba(255,255,255,.85)}
.abm.abm-partner .type-tab .rec-dot{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--acc2);color:var(--ink);vertical-align:2px}
.abm.abm-partner .type-panel{background:var(--card);border-radius:18px;padding:22px;display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}
.abm.abm-partner .type-panel .type-art{background:var(--accent-soft);height:140px;margin:0}
.abm.abm-partner .type-panel h3{font-size:22px;font-weight:600;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm.abm-partner .type-panel dl{margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:15px}
.abm.abm-partner .type-panel dt{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .type-panel dd{margin:4px 0 0;color:var(--ink)}
.abm.abm-partner section.sep{border-top:1px solid var(--line)}
@media (max-width:860px){.abm.abm-partner .ubr-grid,.abm.abm-partner .type-panel,.abm.abm-partner .type-panel dl{grid-template-columns:1fr}
}
.abm.abm-partner .status-block{margin-top:26px;display:grid;gap:14px}
.abm.abm-partner .status-block h3{font-size:18px;font-weight:600}
.abm.abm-partner .status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.abm.abm-partner .status{background:var(--card);border-radius:16px;padding:16px 16px 14px;display:grid;gap:10px;align-content:start;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .status.on{box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-partner .status-top{display:grid;gap:2px}
.abm.abm-partner .status-top b{font-family:var(--display);font-size:18px;font-weight:600}
.abm.abm-partner .status-top small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .status-pct{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.abm.abm-partner .status-pct span{background:var(--accent-soft);border-radius:8px;padding:6px 4px;text-align:center;font-family:var(--display);font-weight:600;font-size:15px;color:var(--accent-text);display:grid}
.abm.abm-partner .status-pct small{font-family:var(--body);font-weight:500;font-size:10.5px;color:var(--muted)}
.abm.abm-partner .status ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);display:grid;gap:4px}
.abm.abm-partner .referral{margin-top:14px;font-size:14.5px;color:var(--muted);max-width:80ch}
.abm.abm-partner .benefit.ask{background:var(--accent-soft)}
.abm.abm-partner .benefit.ask span{color:var(--ink)}
.abm.abm-partner .asks-note{font-size:13px;color:var(--faint);margin-top:8px}
@media (max-width:860px){.abm.abm-partner .status-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){.abm.abm-partner .status-grid{grid-template-columns:1fr}
}
.abm.abm-partner .fit{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.abm.abm-partner .fit span{background:rgba(255,255,255,.16);border-radius:8px;padding:5px 8px;font-size:12.5px;display:grid;gap:1px}
.abm.abm-partner .fit em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.abm.abm-partner .proof-sec{background:var(--dark);color:var(--dark-ink)}
.abm.abm-partner .proof{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.abm.abm-partner .proof-sec .eyebrow{color:var(--acc2)}
.abm.abm-partner .proof-sec .lead{color:rgba(255,255,255,.82)}
.abm.abm-partner .facts{display:grid;gap:14px}
.abm.abm-partner .kv-proof{width:min(330px,100%);height:auto;justify-self:center;display:block;margin-block:-40px}
.abm.abm-partner .fact{display:grid;grid-template-columns:7.5em 1fr;gap:16px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:14px}
.abm.abm-partner .fact b{font-family:var(--display);font-size:20px;font-weight:600}
.abm.abm-partner .fact:nth-child(1) b{color:var(--b-orange)}
.abm.abm-partner .fact:nth-child(2) b{color:var(--b-yellow)}
.abm.abm-partner .fact:nth-child(3) b{color:var(--b-green)}
.abm.abm-partner .fact span{color:rgba(255,255,255,.88)}
.abm.abm-partner .close-in{display:grid;gap:22px}
.abm.abm-partner .close h2{font-size:clamp(28px,4vw,40px);font-weight:700;max-width:22ch}
.abm.abm-partner .brand{font-family:var(--display);font-weight:600;color:var(--muted);margin-top:28px;font-size:18px}
.abm.abm-partner .brand em{font-style:normal;color:var(--b-orange)}
@media (max-width:960px){.abm.abm-partner .types{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){.abm.abm-partner .hero-in,.abm.abm-partner .proof,.abm.abm-partner .calc,.abm.abm-partner .benefit-groups,.abm.abm-partner .lead-points{grid-template-columns:1fr}
.abm.abm-partner .leadflow{grid-template-columns:1fr}
.abm.abm-partner .lf-arrow{transform:rotate(90deg);justify-self:center}
.abm.abm-partner .kv{justify-self:center;margin-right:0;width:min(320px,80%)}
.abm.abm-partner .kv-proof{width:min(240px,70%);margin-block:8px 0}
.abm.abm-partner .hero-visual .idea-box{margin-top:-60px}
.abm.abm-partner section{padding-block:56px}
}
@media (max-width:600px){.abm.abm-partner .types,.abm.abm-partner .calc-fields{grid-template-columns:1fr}
.abm.abm-partner .shift-head{display:none}
.abm.abm-partner .shift-row{grid-template-columns:1fr;gap:4px}
.abm.abm-partner .shift-row .arrow{transform:rotate(90deg);justify-self:start}
.abm.abm-partner .fact{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .swap{animation:fade .25s ease}

  @keyframes fade{from{opacity:.5}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.abm.abm-partner .btn{transition:none}
.abm.abm-partner .btn:hover{transform:none}
}

.abm.abm-partner{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.abm.abm-partner .note,.abm.abm-partner .chrome{display:none}
.abm.abm-partner h1,.abm.abm-partner h2,.abm.abm-partner h3,.abm.abm-partner h4,.abm.abm-partner p,.abm.abm-partner span,.abm.abm-partner b{text-transform:none}
.abm.abm-partner .segctl button[aria-selected="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .seg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px}
.abm.abm-partner .seg-bar>span{font-weight:600}
.abm.abm-partner .seg-role{margin-top:18px;max-width:760px}

/* App align (class app-align, next to app-shell on the BisbrickMaster brick of the CRM list pages):
   the logo, the app menu, the page title, the stat strip, the tabs and the table all start on the
   page gutter (--app-gutter of App shell). The inset came from Bootstrap's column padding (12px a side)
   in the page's MultiColumns, one step per nesting level, and from the logo's own 20px in the master's
   floating menu. Only a column that starts a line loses its left padding, so the space between
   columns on one line stays. Generated by CRM-App-spec/local/align-crm-gutter.mjs. */

/* Logo: the master's navigationBar sets padding-left 20px inline on the logo link. */
.app606-korenbloem .app-shell.app-align > header .nb-logo {
  padding-left: var(--app-gutter) !important;
}

/* Level 1: the columns of a page block's MultiColumn. Level 2: the columns of a MultiColumn in such a
   column, directly or as the content of a TabContent tab (List / Card / Board). */
.app606-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.app606-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.app606-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div) {
  padding-left: 0;
}
/* A full-width column also ends on the gutter: the tabs and the table end where the menu ends. */
.app606-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.app606-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.app606-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12 {
  padding-right: 0;
}
/* Below 768px every column is full width, so every column starts a line. */
@media (max-width: 767.98px) {
.app606-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div,
.app606-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div,
.app606-korenbloem .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div {
    padding-left: 0;
    padding-right: 0;
  }
}

.app606-korenbloem .app-shell .app-focus .app-focus__list,
.app606-korenbloem .app-shell .app-focus .app-focus__checks {
  display: flex;
  flex-direction: column;
}
.app606-korenbloem .app-shell .app-focus .app-focus__row,
.app606-korenbloem .app-shell .app-focus .app-focus__check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #E4E0D8;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #292D3E;
}
.app606-korenbloem .app-shell .app-focus .app-focus__row:last-of-type,
.app606-korenbloem .app-shell .app-focus .app-focus__check:last-child {
  border-bottom: 0;
}
.app606-korenbloem .app-shell .app-focus .app-focus__row[data-n="0"],
.app606-korenbloem .app-shell .app-focus .app-focus__row[data-n=""] {
  display: none;
}
.app606-korenbloem .app-shell .app-focus .app-focus__count {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 5px;
  background: #F6F4F0;
  font-family: "Poppins-600";
  text-align: center;
}
.app606-korenbloem .app-shell .app-focus .app-focus__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app606-korenbloem .app-shell .app-focus .app-focus__detail {
  margin-left: 8px;
  color: #5F6475;
  font-size: 13px;
}
.app606-korenbloem .app-shell .app-focus .app-focus__go {
  flex: 0 0 auto;
  font-size: 13px;
  color: #F45F3A;
  text-decoration: none;
}
.app606-korenbloem .app-shell .app-focus .app-focus__go:hover {
  text-decoration: underline;
}
.app606-korenbloem .app-shell .app-focus .app-focus__go::after {
  content: " \203A";
}
.app606-korenbloem .app-shell .app-focus .app-focus__empty {
  display: none;
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  color: #5F6475;
}
.app606-korenbloem .app-shell .app-focus .app-focus__list[data-total="0"] .app-focus__empty {
  display: block;
}
.app606-korenbloem .app-shell .app-focus .app-focus__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.app606-korenbloem .app-shell .app-focus .app-focus__score {
  flex: 0 0 auto;
  font-family: "Poppins-600";
  font-size: 14px;
  color: #292D3E;
}
.app606-korenbloem .app-shell .app-focus .app-focus__bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: #F6F4F0;
  overflow: hidden;
}
.app606-korenbloem .app-shell .app-focus .app-focus__bar > span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: #2E7D4F;
}
.app606-korenbloem .app-shell .app-focus .app-focus__mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.5px solid #5F6475;
  border-radius: 50%;
}
/* Done checks: below the open ones, muted, without their fix link. */
.app606-korenbloem .app-shell .app-focus .app-focus__check[data-ok="1"],
.app606-korenbloem .app-shell .app-focus .app-focus__check[data-ok="true"] {
  order: 1;
  color: #5F6475;
}
.app606-korenbloem .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__mark,
.app606-korenbloem .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__mark {
  border-color: #2E7D4F;
  background: #2E7D4F;
}
.app606-korenbloem .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__go,
.app606-korenbloem .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__detail,
.app606-korenbloem .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__go,
.app606-korenbloem .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__detail {
  display: none;
}
/* App canvas: the chrome of the approved UI-refresh canvas (v28) for every page that carries the
   Campaign_menu Page component. Dark 52px app bar, white header band with the campaign tabs,
   grey page, white cards. Scope: theme 13, opt-in through the page's own Campaign_menu. */
.app606-korenbloem .app-shell:has(.Campaign_menu) {
  background: #F4F3F0;
  font-family: "Poppins-400", Poppins, sans-serif;
  color: #292D3E;
}

/* The tenant site menu and footer are not part of the app; the account links stay, inside the bar. */
.app606-korenbloem .app-shell:has(.Campaign_menu) > header > bisbrick-list,
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .bottom-bar,
.app606-korenbloem .app-shell:has(.Campaign_menu) > footer {
  display: none !important;
}
/* The site navigation-bar is sticky: hidden, it measures top 0, "sticks" and teleports itself to
   body as position:fixed, out of reach of the rule above. The Campaign_menu bar is not sticky. */
body:has(.app-shell .Campaign_menu) > .nb-wrapper {
  display: none !important;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header {
  position: relative;
  height: 0;
  z-index: 20;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar {
  position: absolute;
  top: 0;
  right: 24px;
  height: 52px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .container {
  width: auto;
  max-width: none;
  padding: 0;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .navbar {
  padding: 0;
  background: transparent;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-item.language {
  display: none;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-item {
  padding: 0;
  margin: 0;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link {
  color: #D6D8E0 !important;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link span {
  font-weight: 400;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:hover {
  color: #FFFFFF !important;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link .fa-user {
  display: none;
}
/* The account name as the round avatar of the canvas (first letter; the full name is the tooltip-less link) */
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-item:has(.fa-user) {
  order: 9;
  margin-left: 8px;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #F4F3F0;
  color: #292D3E;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span::first-letter {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
}

/* App bar */
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(> .Campaign_menu) {
  padding: 0;
}
.app606-korenbloem .app-shell .Campaign_menu section,
.app606-korenbloem .app-shell .Campaign_menu .background {
  background: #292D3E !important;
  padding: 0 !important;
  margin: 0;
}
.app606-korenbloem .app-shell .Campaign_menu .background > div {
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}
.app606-korenbloem .app-shell .Campaign_menu .row {
  margin: 0;
}
.app606-korenbloem .app-shell .Campaign_menu .row > div {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  padding: 0 !important;
}
.app606-korenbloem .app-shell .Campaign_menu .nb-wrapper,
.app606-korenbloem .app-shell .Campaign_menu .navigation-bar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  min-height: 52px;
  height: 52px;
  padding: 0 !important;
}
.app606-korenbloem .app-shell .Campaign_menu .navigation-bar {
  display: flex;
  align-items: center;
  gap: 6px 22px;
}
.app606-korenbloem .app-shell .Campaign_menu .nb-zone-left {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
}
.app606-korenbloem .app-shell .Campaign_menu .nb-zone-left::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #F4F3F0;
  margin-right: 20px;
}
.app606-korenbloem .app-shell .Campaign_menu .nb-zone-center {
  display: none;
}
.app606-korenbloem .app-shell .Campaign_menu .nb-zone-right {
  margin-right: 300px;
}
/* Narrow screens: the navigation-bar folds into its hamburger; keep it visible on the dark bar,
   left of the account links. */
@media (max-width: 992px) {
  .app606-korenbloem .app-shell .Campaign_menu .nb-hamburger {
    color: #F4F3F0;
    margin-right: 300px;
  }
  .app606-korenbloem .app-shell .Campaign_menu .nb-zone-right {
    margin-right: 0;
  }
}
.app606-korenbloem .app-shell .Campaign_menu .nb-link {
  color: #D6D8E0 !important;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-size: 13px !important;
  font-weight: 400;
  padding: 6px 12px !important;
  border-radius: 5px;
  text-decoration: none;
  background: transparent;
  line-height: 1.5;
}
.app606-korenbloem .app-shell .Campaign_menu .nb-link::after {
  display: none !important;
}
.app606-korenbloem .app-shell .Campaign_menu .nb-link:hover {
  color: #FFFFFF !important;
}
/* Only the current page. active-parent is added by bisbrick-url but never removed on navigation,
   so it is reset to a plain link explicitly (the theme styles it as active too). */
.app606-korenbloem .app-shell .Campaign_menu .nb-link.active-parent:not(.nb-active) {
  color: #D6D8E0 !important;
  background: transparent;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-weight: 400;
}
/* The page names its own menu item through app-nav-N on the master (a campaign has no nb-active). */
.app606-korenbloem .app-shell.app-nav-1 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.app606-korenbloem .app-shell.app-nav-2 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.app606-korenbloem .app-shell.app-nav-3 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.app606-korenbloem .app-shell.app-nav-4 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.app606-korenbloem .app-shell.app-nav-5 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.app606-korenbloem .app-shell.app-nav-6 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.app606-korenbloem .app-shell.app-nav-7 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.app606-korenbloem .app-shell .Campaign_menu .nb-link.nb-active {
  color: #292D3E !important;
  background: #F4F3F0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
}

/* Page body: fluid, 24px gutters (Koos 2026-10-15: lists must use the full width, no 1200px column) */
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list {
  display: block;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:not(:has(> .Campaign_menu)) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  float: none;
}

/* Header band (white, full width): campaign name, status, actions, then the section tabs */
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) {
  background: #FFFFFF;
  /* sideways only: a clip-path here would also cut off menus that open below the band */
  border-image: linear-gradient(#FFFFFF, #FFFFFF) fill 0 / 0 / 0 100vmax;
  padding-top: 12px;
  padding-bottom: 10px;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) section,
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .background {
  background: transparent !important;
  padding: 0 !important;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row {
  align-items: center;
  flex-wrap: nowrap;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.app606-korenbloem .app-shell .app-head p {
  margin: 0;
}
.app606-korenbloem .app-shell .app-head > bisbrick-html-with-link > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.app606-korenbloem .app-shell .app-head .app-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px 0 12px;
  background: #F4F3F0;
  border-radius: 5px 0 0 5px;
  font-size: 0;
  margin-right: -14px !important;
}
.app606-korenbloem .app-shell .app-head .app-crumb::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
  font-weight: 600;
}
.app606-korenbloem .app-shell .app-head .app-crumb a {
  display: none;
}
.app606-korenbloem .app-shell .app-head .app-title {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px 0 10px;
  background: #F4F3F0;
  border-radius: 0 5px 5px 0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 17px !important;
  line-height: 1.2;
  color: #292D3E;
}
.app606-korenbloem .app-shell .app-head .app-meta {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 200px;
  font-size: 13px;
  color: #5F6475;
}
.app606-korenbloem .app-shell .app-head .app-meta > span:not(.app-badge) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.app606-korenbloem .app-shell .app-head .app-badge {
  display: inline-block;
  min-width: 88px;
  box-sizing: border-box;
  text-align: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  background: #F1ECE4;
  color: #5F6475;
}
.app606-korenbloem .app-shell .app-head .app-badge[data-s="live"],
.app606-korenbloem .app-shell .app-head .app-badge[data-s="Live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app606-korenbloem .app-shell .app-head-actions .app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.app606-korenbloem .app-shell .app-head-actions .app-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
}
.app606-korenbloem .app-shell .app-head-actions .app-stop .app-btn {
  color: #B3261E;
  box-shadow: inset 0 0 0 1px #E8C9C6;
  border: 0;
}

/* Section tabs: the top TabContent of the page sits in the white band, the rest is grey */
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs {
  background: #FFFFFF;
  box-shadow: 0 0 0 100vmax #FFFFFF, 0 1px 0 100vmax #E6E0D6;
  clip-path: inset(0 -100vmax -1px);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab {
  padding: 10px 14px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #F45F3A;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab::after {
  display: none;
}

/* Inner views (sub tabs) look like the card's segment row of the canvas */
.app606-korenbloem .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #EFEAE1;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
  box-shadow: none;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab {
  padding: 12px 10px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.app606-korenbloem .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #292D3E;
}

/* Cards: white, 5px, hairline ring, no drop shadow */
.app606-korenbloem .app-shell:has(.Campaign_menu) .app-card,
.app606-korenbloem .app-shell:has(.Campaign_menu) .app-panel {
  background: #FFFFFF;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #E4E0D8;
}

/* Boolean switch (SurveyJS sd-boolean) in app forms, full pages AND popups. Survey theme "Default"
   of theme 13 (SurveyThemes Id 2) sets --sjs-primary-backcolor to rgba(37,137,229,0): the thumb
   text is drawn in that colour, so the selected value vanished and the switch read as an empty
   knob next to the OTHER label. Popups render in an ngb-modal-window on body, outside .app-shell,
   hence the body:has() scope. Redefined on the boolean only: buttons and other inputs keep theirs. */
.app606-korenbloem .app-shell .sd-boolean,
body:has(.app606-korenbloem .app-shell) > ngb-modal-window.default .sd-boolean {
  --sjs-primary-backcolor: #F45F3A;
  --sjs-primary-backcolor-light: rgba(244, 95, 58, 0.1);
}

/* Sub tabs: straight blue underline (Koos 2026-10-15) */
.app606-korenbloem .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.app606-korenbloem .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover,
.app606-korenbloem .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.app606-korenbloem .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 #2A78D6 !important;
  color: #292D3E;
}

.app606-korenbloem .app-shell .app-page-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  margin: 0 0 8px !important;
  padding: 0 16px 0 12px;
  background: #F4F3F0;
  border-radius: 5px;
  line-height: 1.2;
}
.app606-korenbloem .app-shell .app-page-label {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
}
.app606-korenbloem .app-shell .app-page-name {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 17px !important;
  font-weight: 600;
  color: #292D3E;
}
.app606-korenbloem .app-shell .app-page-sub {
  font-size: 14px !important;
  line-height: 1.5;
  color: #5A6377;
}

/* Campaign App home (home.mjs). Equal-height queue/warm cards, campaign tabs as a segmented control. */
/* MultiColumn nests host > a > section > .background > div > .row; the section is centred with inline auto margins, so every level is made a full-width flex column. */
.app-home .app-home-fill, .app-home .app-home-fill > a > section, .app-home .app-home-fill > section, .app-home .app-home-fill > a > section > .background, .app-home .app-home-fill > section > .background, .app-home .app-home-fill > a > section > .background > div, .app-home .app-home-fill > section > .background > div, .app-home .app-home-fill > a > section > .background > div > .row, .app-home .app-home-fill > section > .background > div > .row, .app-home .app-home-grow, .app-home .app-home-grow > a > section, .app-home .app-home-grow > section, .app-home .app-home-grow > a > section > .background, .app-home .app-home-grow > section > .background, .app-home .app-home-grow > a > section > .background > div, .app-home .app-home-grow > section > .background > div, .app-home .app-home-grow > a > section > .background > div > .row, .app-home .app-home-grow > section > .background > div > .row { display: flex; flex-direction: column; flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; width: 100%; box-sizing: border-box; }
.app-home .app-home-duo .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { display: flex; flex-direction: column; }
.app-home .app-home-fill .row > div:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.app-home .app-home-grow .row > div:last-child { margin-top: auto; }
.app-home .app-home-card .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-cards .row { margin-left: -10px; margin-right: -10px; }
.app-home .app-home-h2 { min-height: 44px; display: flex; align-items: center; }
/* Tabs: the app-shell tab rules (app-canvas.css) are !important, so these carry more classes. */
.app606-korenbloem .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs { display: inline-flex !important; gap: 4px !important; background: #FFFFFF !important; padding: 4px !important; border-radius: 5px !important; float: right !important; margin: -48px 0 16px !important; list-style: none !important; border: 0 !important; }
.app-home .app-home-segmented ul.grid-tabs + * { clear: both !important; }
.app606-korenbloem .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab { border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #292D3E !important; padding: 0 16px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; font-size: 13px !important; margin: 0 !important; box-shadow: none !important; transition: none !important; }
.app606-korenbloem .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab.selected-grid-tab { background: #292D3E !important; color: #FFFFFF !important; font-weight: 600 !important; }
.app-home .app-home-segmented li.grid-tab::after, .app-home .app-home-segmented li.grid-tab::before { display: none !important; }
@media (max-width: 900px) { .app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; padding: 0 0 32px !important; } }

/* Relation type choice (popup /relations/popup/new-relation, class app-choice-wrap on the
   MultiColumn): two cards, "Organization" or "Individual contact". The choice exists because a
   contact under an organization and a contact in their own right are different records, and the
   old /relations/accounts page could not ask the question - there, a contact always hangs under an
   account. Generated by CRM-App-spec/local/gen-rel-choice-css.mjs. */

.app606-korenbloem .app-choice-wrap {
  padding: 4px 4px 8px;
}
.app606-korenbloem .app-choice-wrap .app-choice__lead {
  margin: 0 0 16px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}

.app606-korenbloem .app-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* A popup is narrow on a phone; two cards side by side would each be too thin to read. */
@media (max-width: 560px) {
  .app606-korenbloem .app-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.app606-korenbloem .app-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 8px;
  background: #FFFFFF;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.app606-korenbloem .app-choice:hover,
.app606-korenbloem .app-choice:focus-visible {
  border-color: var(--app-accent, #F45F3A);
  background: #FDF8F6;
}

.app606-korenbloem .app-choice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #F4F3F0;
  color: #5F6475;
}
.app606-korenbloem .app-choice:hover .app-choice__icon,
.app606-korenbloem .app-choice:focus-visible .app-choice__icon {
  color: var(--app-accent, #F45F3A);
}
.app606-korenbloem .app-choice__icon svg {
  width: 18px;
  height: 18px;
}

.app606-korenbloem .app-choice__body {
  display: block;
  min-width: 0;
}
.app606-korenbloem .app-choice__title {
  display: block;
  font-family: "Poppins-600";
  font-size: 15px;
  line-height: 20px;
  color: #292D3E;
}
.app606-korenbloem .app-choice__sub {
  display: block;
  margin-top: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}

.bbh.bb-home{font-family:Inter, Arial, sans-serif; color:#292D3E; background:#F7F4F0; font-size:16px; line-height:1.55; overflow-x:clip; text-align:left; -webkit-font-smoothing:antialiased}
.bbh.bb-home p,.bbh.bb-home li,.bbh.bb-home summary,.bbh.bb-home label,.bbh.bb-home input,.bbh.bb-home button,.bbh.bb-home span,.bbh.bb-home a,.bbh.bb-home div,.bbh.bb-home b{font-family:inherit; letter-spacing:inherit}
.bbh.bb-home h1,.bbh.bb-home h2,.bbh.bb-home h3,.bbh.bb-home h4{text-transform:none}
.bbh.bb-home a{color:#292D3E}
.bbh.bb-home a:hover{color:#5B52C7}
.bbh.bb-home a:focus-visible,.bbh.bb-home button:focus-visible,.bbh.bb-home summary:focus-visible{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home summary{cursor:pointer}
.bbh.bb-home .ic{display:inline-block; flex:0 0 auto; vertical-align:middle; background-color:currentColor; -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat}
.bbh.bb-home .ic-i1{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20275%20274%22%3E%3Cpath%20d%3D%22M274.214%2068.5C274.214%2030.6728%20243.517%200%20205.66%200H85.6918C76.2276%200%2068.5534%207.66819%2068.5534%2017.125V68.5H17.1384C7.67418%2068.5%200%2076.1682%200%2085.625V205.804C0%20241.463%2027.269%20270.765%2062.117%20274H205.66C243.517%20274%20274.214%20243.327%20274.214%20205.5C274.214%20167.673%20243.517%20137%20205.66%20137C243.517%20137%20274.214%20106.327%20274.214%2068.5Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i2{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cpolyline%20points%3D%2212%205%2019%2012%2012%2019%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i3{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i4{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i5{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-3.5%208-8%209-4.5-1-8-4-8-9V6z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i6{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M12%202l2.2%205.8L20%2010l-5.8%202.2L12%2018l-2.2-5.8L4%2010l5.8-2.2z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i7{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i8{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5.4%205.4L3%2018l3%203%206.3-6.3a4%204%200%200%200%205.4-5.4l-2.5%202.5-2.4-.6-.6-2.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i9{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2214%22%20x2%3D%2214%22%20y2%3D%2214%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2217%22%20x2%3D%2217%22%20y2%3D%2217%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i10{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2213%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i11{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18%2014a6.5%206.5%200%200%201%203.5%206%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i12{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a1%201%200%200%200%201%201h3l6%204V6L7%2010H4a1%201%200%200%200-1%201z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17%208.5a5%205%200%200%201%200%207%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i13{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209l10-5%2010%205-10%205z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M6%2011v5c0%201.5%202.7%203%206%203s6-1.5%206-3v-5%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i14{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M4%2021a8%208%200%200%201%2016%200%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i15{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021h8%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%2017v4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%204h10v5a5%205%200%200%201-10%200z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17%206h3v2a3%203%200%200%201-3%203%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%206H4v2a3%203%200%200%200%203%203%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .idea-field{width:100%; box-sizing:border-box; padding:13px 15px; border:1.5px solid #E4DFD8; border-radius:10px; background:#FFFFFF; color:#292D3E; font:inherit; font-size:15px; margin:0}
.bbh.bb-home .idea-field::placeholder{color:#8B90A0}
.bbh.bb-home .idea-field:focus{border-color:#5B52C7; outline:none; box-shadow:0 0 0 4px #EEEDFB}
.bbh.bb-home .idea-go{cursor:pointer; border:0; width:100%; font-family:inherit; line-height:1.55}
.bbh.bb-home .idea-go:hover{background:#3A3F55 !important}
.bbh.bb-home .hn-picker:hover{box-shadow:0 0 0 1px #5B52C7}
.bbh.bb-home .plan-dlg{border:0; border-radius:20px; padding:30px 30px 26px; box-sizing:border-box; width:100%; max-width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; margin:auto; background:#FFFFFF; color:#292D3E; font-family:Inter, Arial, sans-serif; font-size:16px; line-height:1.55; text-align:left; box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.bbh.bb-home .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.bbh.bb-home .plan-x{cursor:pointer; position:absolute; right:14px; top:12px; width:36px; height:36px; border:0; padding:0; border-radius:10px; background:transparent; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; color:#8B90A0}
.bbh.bb-home .plan-x:hover{background:#F7F4F0; color:#292D3E}
.bbh.bb-home .plan-steps li::marker{color:#5B52C7; font-weight:600}
.bbh.bb-home .plan-chips span{font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:7px; background:#F7F4F0; box-shadow:inset 0 0 0 1px #E4DFD8}

body:has(.bbh.bb-home[data-block]) bisbrick-master-menu-content-footer > header,
body:has(.bbh.bb-home[data-block]) bisbrick-master-menu-content-footer > footer,
body:has(.bbh.bb-home[data-block]) bisbrick-floating-menu-bisbrick{display:none !important}
body:has(.bbh.bb-home[data-block]){background:#F7F4F0}
.app608-petitie {
  --bg-color: #FFFFFF;
  --bg-color-rgb: 255,255,255;
  --button-padding: 0.5rem 2rem;
  --button-padding-rgb: ;
  --button-radius: 0.2rem;
  --button-radius-rgb: ;
  --font-content: Default-Regular;
  --font-content-rgb: ;
  --font-heading: Gilroy-Light;
  --font-heading-rgb: ;
  --font-link: Default;
  --font-link-rgb: ;
  --font-size: 1rem;
  --font-size-rgb: ;
  --input-line-height: 2rem;
  --input-line-height-rgb: ;
  --input-radius: 0.2rem;
  --input-radius-rgb: ;
  --negative-color: #FF3131;
  --negative-color-rgb: 255,49,49;
  --neutral-color-0: #FFFFFF;
  --neutral-color-0-rgb: 255,255,255;
  --neutral-color-100: #E9E9EB;
  --neutral-color-100-rgb: 233,233,235;
  --neutral-color-1000: #000000;
  --neutral-color-1000-rgb: 0,0,0;
  --neutral-color-200: #E0E0E0;
  --neutral-color-200-rgb: 224,224,224;
  --neutral-color-400: #BCBCBB;
  --neutral-color-400-rgb: 188,188,187;
  --neutral-color-50: #FAFAF9;
  --neutral-color-50-rgb: 250,250,249;
  --neutral-color-600: #70706F;
  --neutral-color-600-rgb: 112,112,111;
  --neutral-color-800: #2C2C2C;
  --neutral-color-800-rgb: 44,44,44;
  --other--color-BBRed: #FF4B4B;
  --other--color-BBRed-rgb: 255,75,75;
  --positive-color: #32C77C;
  --positive-color-rgb: 50,199,124;
  --primary--color-Toolkit-Grey: #f6f7f9;
  --primary--color-Toolkit-Grey-rgb: 246,247,249;
  --primary-1: #ab29ff;
  --primary-1-rgb: 171,41,204;
  --primary-color-100: #E6F2EA;
  --primary-color-100-rgb: 230,242,234;
  --primary-color-1000: #2E7D4F;
  --primary-color-1000-rgb: 46,125,79;
  --primary-color-1200: #2A81DC;
  --primary-color-1200-rgb: 42,129,220;
  --primary-color-800: #6CA7ED;
  --primary-color-800-rgb: 108,167,237;
  --raftest-font-size: 20px;
  --raftest-font-size-rgb: ;
  --secondary-1: #bea050;
  --secondary-1-rgb: 190,160,80;
  --secondary-color-100: #ECF0F4;
  --secondary-color-100-rgb: 236,240,244;
  --secondary-color-1000: #08213F;
  --secondary-color-1000-rgb: 8,33,63;
  --secondary-color-200: #D3D9E1;
  --secondary-color-200-rgb: 211,217,225;
  --secondary-color-400: #9FADBD;
  --secondary-color-400-rgb: 159,173,189;
  --secondary-color-50: #F7F9FA;
  --secondary-color-50-rgb: 247,249,250;
  --secondary-color-600: #728398;
  --secondary-color-600-rgb: 114,131,152;
  --secondary-color-800: #354B66;
  --secondary-color-800-rgb: 53,75,102;
  --warning-color: #FEC84C;
  --warning-color-rgb: 254,200,76;
  --Primary-1: #2E7D4F;
  --Primary-1-rgb: 46,125,79;
  --Primary-1-Dark: #1F5A38;
  --Primary-1-Dark-rgb: 31,90,56;
  --Primary-1-Light: #E6F2EA;
  --Primary-1-Light-rgb: 230,242,234;
  --Primary-2: #1F3D2B;
  --Primary-2-rgb: 31,61,43;
  --Primary-2-Light: #F4F8F3;
  --Primary-2-Light-rgb: 244,248,243;
  --Secondary-1: #7CB342;
  --Secondary-1-rgb: 124,179,66;
  --Secondary-1-Light: #EEF6E4;
  --Secondary-1-Light-rgb: 238,246,228;
  --primary-color-900: #25683F;
  --primary-color-900-rgb: 37,104,63;
  --bs-primary: #2E7D4F;
  --bs-primary-rgb: 46,125,79;
  --bs-primary-rgb: 46,125,79;
  --bs-primary-rgb-rgb: ;
  --bs-link-color: #2E7D4F;
  --bs-link-color-rgb: 46,125,79;
  --sjs-primary-backcolor: #2E7D4F;
  --sjs-primary-backcolor-rgb: 46,125,79;
  --sjs-primary-backcolor-dark: #25683F;
  --sjs-primary-backcolor-dark-rgb: 37,104,63;
  --sjs-primary-backcolor-light: rgba(46,125,79,0.1);
  --sjs-primary-backcolor-light-rgb: ;
  --primary: #2E7D4F;
  --primary-rgb: 46,125,79;
  --main-color: #2E7D4F;
  --main-color-rgb: 46,125,79;
}
.app608-petitie .h2, .app608-petitie h2, default .h2, default h2 {
  font-family: Default-Bold;
  text-transform: none;
  text-size: 10px;
  font-size: 20px;
  line-height: 20px;
}
.app608-petitie .h1, .app608-petitie h1, default .h1, default h1 {
  font-family: Default-Bold;
  text-transform: capitalize;
  font-size: 24px;
  line-height: 30px;
}
.app608-petitie .p, .app608-petitie p, default .p, default p {
  font-family: Default-Regular;
  text-transform: none;
  font-size: 16px;
}
.app608-petitie .h3, .app608-petitie h3, default .h3, default h3 {
  font-family: Default-Bold;
  text-transform: none;
  font-size: 18px;
  line-height: 20px;
}
.app608-petitie .h6, .app608-petitie h6, default .h6, default h6 {
  font-family: Default-Regular;
  text-transform: none;
  font-size: 50px;
  line-height: 2;
}
.app608-petitie .Button .button__Primary {
  background-color: var(--primary-color-1200);
  color: var(--primary--color-Toolkit-Grey);
  font-family: Default-Regular;
  font-size: 16px;
  border-width: 0;
  border-radius: 5px;
  padding-top: 10px;
  padding-right: 22px;
  padding-bottom: 10px;
  padding-left: 22px;
  text-transform: none;
  border-radius-top-left: 15px;
  border-radius-top-right: 0px;
  border-radius-bottom-left: 0px;
  border-radius-bottom-right: 15px;
  border-radius-select: false;
}
.app608-petitie .Button .button__Primary:hover {
  background-color: var(--primary-color-1200);
  color: var(--bg-color);
}
.app608-petitie .Button .button__Primary:active {
  background-color: var(--warning-color);
}
.app608-petitie .Button .button__Primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0.5em;
}
.app608-petitie .Button .button__Primary::before {
  content: "";
  flex: 0 0 auto;
  order: 1;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("/_static/Uploads/27_arrow-right.svg") no-repeat center/contain;
  mask: url("/_static/Uploads/27_arrow-right.svg") no-repeat center/contain;
  transition: transform 0.25s ease;
}
.app608-petitie .Button .button__Primary:hover::before {
  transform: translateX(3px);
}
.app608-petitie .Button .button__Secondary {
  background-color: var(--bg-color);
  border-color: var(--primary-color-1200);
  color: var(--primary-color-1200);
  border-width: 2px;
  border-radius: 5px;
  font-family: Default-Regular;
  font-size: 18px;
  padding-top: 12px;
  padding-right: 25px;
  padding-bottom: 12px;
  padding-left: 25px;
  text-transform: none;
}
.app608-petitie .Button .button__Secondary:hover {
  background-color: var(--primary-color-100);
}
.app608-petitie .Button .button__Form__Matrix__Add {
  background-color: var(--primary-color-1000);
  font-size: 16px;
  border-width: 0px;
  border-radius: 5px;
  font-family: Aeonik-Regular;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.app608-petitie .Button .button__Form__Matrix__Remove {
  background-color: var(--warning-color);
  font-family: Aeonik-Regular;
  font-size: 16px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app608-petitie .Button .button__Form__Next {
  background-color: var(--primary-color-1200);
  border-color: var(--bg-color);
  color: var(--bg-color);
  border-radius: 5px;
  padding-top: 12px;
  padding-right: 25px;
  padding-bottom: 12px;
  padding-left: 25px;
  font-size: 18px;
  font-family: Default-Regular;
  border-width: 0;
}
.app608-petitie .Button .button__Form__Next:hover {
  background-color: var(--secondary-color-600);
}
.app608-petitie .Button .button__Form__Prev {
  background-color: var(--neutral-color-0);
  border-color: var(--primary-color-1200);
  color: var(--primary-color-1200);
  border-radius: 5px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 25px;
  padding-left: 25px;
  font-size: 18px;
  font-family: Aeonik-Regular;
}
.app608-petitie .Button .button__Form__Prev:hover {
  border-color: var(--secondary-color-600);
  color: var(--secondary-color-600);
}
.app608-petitie .Button .button__SAIntaClaus {
  background-color: var(--negative-color);
  color: var(--neutral-color-0);
  font-family: Gilroy-bold;
  font-size: 20px;
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
  border-radius: 5px;
  border-width: 0px;
}
.app608-petitie .Button .button__SAIntaClaus:hover {
  background-color: var(--warning-color);
}
.app608-petitie .Button .button__Toolkit_Add {
  background-color: var(--primary-color-100);
  color: var(--primary-color-1000);
  font-family: Aeonik-Regular;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app608-petitie .Button .button__Toolkit_Add:hover {
  background-color: var(--primary-color-100);
  border-color: var(--primary-color-1000);
  padding-top: 9px;
  padding-right: 19px;
  padding-bottom: 9px;
  padding-left: 19px;
  border-width: 1px;
}
.app608-petitie .Button .button__Toolkit_Primary {
  background-color: var(--primary--color-Toolkit-Grey);
  color: var(--neutral-color-1000);
  font-family: Aeonik-Regular;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
  font-size: 14px;
}
.app608-petitie .Button .button__Toolkit_Primary:hover {
  background-color: var(--secondary-color-200);
}
.app608-petitie .Button .button__Toolkit_Secondary {
  background-color: var(--primary--color-Name);
  color: var(--neutral-color-1000);
  font-family: Aeonik-Regular;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app608-petitie .Button .button__Toolkit_Secondary:hover {
  background-color: var(--secondary-color-200);
}
.app608-petitie .Button .button__Toolkit_Tertiary {
  background-color: var(--neutral-color-0);
  font-family: Aeonik-Regular;
  border-width: 0px;
  border-radius: 5px;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.app608-petitie .Button .button__Toolkit_Tertiary:hover {
  background-color: var(--secondary-color-200);
}
.app608-petitie .Button .button__Toolbar {
  background-color: var(--neutral-color-0);
  border-color: var(--secondary-color-200);
  color: var(--neutral-color-1000);
  font-family: Default-Regular;
  font-size: 13px;
  border-radius: 5px;
  border-width: 1px;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}
.app608-petitie .Button .button__Toolbar:hover {
  background-color: var(--secondary-color-100);
}

.app608-petitie .hide-default-link .hide-default-link a {
  text-decoration: none;
}
.app608-petitie .BisbrickMaster h1, .app608-petitie .BisbrickMaster h2, .app608-petitie .BisbrickMaster h3, .app608-petitie .BisbrickMaster h4, .app608-petitie .BisbrickMaster h5, .app608-petitie .BisbrickMaster h6 {
  font-family: var(--font-heading);
  font-weight: normal;
}
.app608-petitie .BisbrickMaster h1 {
  font-size: 3.5rem;
  font-family: Gilroy-bold;
  font-style: normal;
  line-height: 65px;
  letter-spacing: -0.01em;
}
.app608-petitie .BisbrickMaster h2 {
  font-family: Gilroy;
  font-style: normal;
  font-size: 3rem;
  line-height: 56px;
}
.app608-petitie .BisbrickMaster h4 {
  font-size: 2rem;
  font-family: Aeonik;
  line-height: 48px;
}
.app608-petitie .BisbrickMaster h5 {
  font-size: 1.5rem;
  font-family: Aeonik;
  line-height: 36px;
}
.app608-petitie .BisbrickMaster {
  font-family: var(--font-content);
}
.app608-petitie .BisbrickMaster optgroup, .app608-petitie .BisbrickMaster select, .app608-petitie .BisbrickMaster textarea {
  font-family: var(--font-heading) !important;
}
.app608-petitie .BisbrickMaster input {
  font-family: var(--font-content);
}
.app608-petitie .BisbrickMaster a {
  font-family: var(--font-link);
  text-decoration: none !important;
  cursor: pointer;
  color: inherit;
}
.BisbrickMaster p {
  font-size: 1rem;
  font-family: Aeonik;
  line-height: 24px;
  letter-spacing: 0.01em;
}
.BisbrickMaster header {
  z-index: 100;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.app608-petitie .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.app608-petitie .top-bar .top-bar[_ngcontent-lkq-c41] {
  height: 50px;
}
.app608-petitie .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app608-petitie .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.app608-petitie .top-bar .top-bar-inner span {
  font-size: 14px;
}
.app608-petitie .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app608-petitie .top-bar .links ul {
    padding-left: 0px;
  }
}
.app608-petitie .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.app608-petitie .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.app608-petitie .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.app608-petitie .top-bar .user-info-section {
  font-size: 14px !important;
}
.app608-petitie .top-bar .user-info-section img {
  height: 20px;
}
.app608-petitie .top-bar .user-info-section li {
  list-style-type: none;
}
.app608-petitie .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app608-petitie .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.app608-petitie .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.app608-petitie .middle-bar {
  background-color: var(--bg-color);
  padding: 1.6rem 0rem;
}
.app608-petitie .middle-bar .floating-content {
  transform: translateX(-53%) !important;
}
.app608-petitie .middle-bar .floating-content .DescriptionLink .border-right {
  max-width: 244px;
}
.app608-petitie .middle-bar-inner {
  display: inline-flex;
  height: 38px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .app608-petitie .middle-bar-inner {
    justify-content: space-between;
  }
}
.app608-petitie .middle-bar .logo img {
  height: 85px;
  padding: 0.5rem 1rem;
  /* Responsive layout - when the screen is <576px wide */
}
.app608-petitie .middle-bar .searching {
  cursor: wait;
}
.app608-petitie .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .app608-petitie .middle-bar .search-section {
    display: block !important;
  }
}
.app608-petitie .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.app608-petitie .middle-bar .search-section i {
  font-size: 1.4rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.app608-petitie .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 250px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.app608-petitie .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
@charset "UTF-8";
.app608-petitie .navbar {
  padding: 0 !important;
}
.app608-petitie .navbar .nav-item {
  padding: 0 1rem;
}
.app608-petitie .navbar .navbar-nav .nav-link {
  color: var(--black-color);
  cursor: pointer;
  font-family: Gilroy-Bold !important;
}
.app608-petitie .navbar .navbar-nav .nav-link:hover {
  color: var(--primary-color-1200) !important;
}
.app608-petitie .navbar .nav-link.active,
.app608-petitie .navbar .nav-link.active-parent,
.app608-petitie .navbar .show > .nav-link {
  color: var(--primary-color-1200);
  border-bottom: 1px solid var(--primary-color-1200);
}
.app608-petitie .navbar .navbar-collapse {
  justify-content: center;
}
.app608-petitie .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.app608-petitie .navbar .navbar-toggler i {
  color: var(#021e3f);
  font-size: 2.1rem;
}
.app608-petitie .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.BisbrickMaster .hero_banner .jumbotron {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.BisbrickMaster .hero_banner .jumbotron h1 {
  color: var(--white-color);
  font-size: 2.5em;
}
.BisbrickMaster .hero_banner .jumbotron h1 span {
  font-weight: 300;
}
.BisbrickMaster .IconTextCard .card {
  border: 0px !important;
}
.BisbrickMaster .IconTextCard .card .div-as-link .card-body .card-title {
  font-size: 1.4rem !important;
  font-weight: bold !important;
  color: var(--base-color);
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .BisbrickMaster .IconTextCard .card .div-as-link .card-body .card-title {
    font-size: 1.1rem !important;
  }
}
.BisbrickMaster .BisbrickNieuwsbriefInschrijving span {
  color: white;
}
.BisbrickMaster .BisbrickNieuwsbriefInschrijving .sv_main .sv_container .sv_body .sv_p_root .sv_q {
  padding: 0;
  box-sizing: border-box;
  overflow: auto;
}
.BisbrickMaster .MultiColumn .sv_main .sv_container .sv_body .sv_p_root .sv_q {
  padding: 8px 0;
  box-sizing: border-box;
  overflow: auto;
}
.BisbrickMaster .MultiColumn .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.BisbrickMaster .form-control:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.BisbrickMaster .accordion {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-family: "Aeonik";
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
@media (min-width: 992px) {
  .BisbrickMaster .accordion {
    display: none;
  }
}
.BisbrickMaster .accordion .main-menu {
  background-color: #FFFFFF;
  padding: 0.7rem 1rem;
}
.BisbrickMaster .accordion .main-menu .main-menu-item,
.BisbrickMaster .accordion .main-menu a {
  color: #2C2C2C;
  text-transform: uppercase;
  font-size: 1rem;
}
.BisbrickMaster .accordion .main-menu .sub-menu {
  list-style-type: none;
  margin-left: -1rem;
  margin-right: -1rem;
  font-family: "Aeonik";
  font-weight: bold;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #F1F7FC;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-link {
  color: #F85600;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item {
  padding: 0.8rem 1rem 0.5rem 0rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  flex: 1;
  flex-wrap: wrap;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .menu-icon {
  width: 30px;
  margin-left: 1rem;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item {
  list-style-type: none;
  display: block;
  width: 100%;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item li a,
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item li span {
  color: #1B1B1B;
  font-size: 0.8rem;
  font-weight: 500;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-0,
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-1 {
  color: #F5F4F2;
  text-transform: uppercase;
  font-size: 0.9rem;
  list-style-type: none;
  padding: 0.7rem 0 0.7rem 2.5rem;
  margin: 0 0 0 -2rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-0 {
  background-color: #00C2F2;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-1 {
  background-color: #1B1B1B;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub {
  list-style-type: none;
  background-color: #F1F7FC;
  color: #F85600;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-left: -3rem;
  margin-bottom: -0.8rem;
  margin-top: 0.7rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-icon {
  width: 30px;
  margin-left: 1rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub li {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  flex: 1;
  flex-wrap: wrap;
  padding: 0.8rem 1rem 0.5rem 1rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub {
  list-style-type: none;
  display: block;
  width: 100%;
  margin-left: -1.5rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub li a,
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub li span {
  color: #1B1B1B;
  font-size: 0.8rem;
  font-weight: 500;
}
.BisbrickMaster .Button .button__Bisbrick__primary-default {
  height: 56px;
  background: linear-gradient(225deg, #3C98F2 0%, #3570F4 100%);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: var(--neutral-color-0) !important;
  padding: 16px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular;
  cursor: pointer;
}
.BisbrickMaster .Button .button__Bisbrick__primary-default:hover {
  box-shadow: none;
  background: #3C98F2;
}
.BisbrickMaster .Button .button__Bisbrick__primary-accent {
  height: 56px;
  background: linear-gradient(225deg, #FF4B4B 0%, #FF6532 100%);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: var(--neutral-color-0) !important;
  padding: 16px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular;
}
.BisbrickMaster .Button .button__Bisbrick__primary-accent:hover {
  box-shadow: none;
  background: #FF6532;
}
.BisbrickMaster .Button .button__Bisbrick__secondary-default {
  height: 56px;
  border: 2px solid #3C98F2;
  box-sizing: border-box;
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.15));
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular !important;
  color: #3C98F2;
}
.BisbrickMaster .Button .button__Bisbrick__secondary-default:hover {
  box-shadow: none;
  background: #3C98F2;
  color: var(--neutral-color-0);
}
.BisbrickMaster .Button .button__Bisbrick__diap-default {
  height: 56px;
  color: #FFFFFF !important;
  background-color: transparent;
  border: 2px solid white;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular !important;
  transition: all 0.2s ease-in-out;
}
.BisbrickMaster .Button .button__Bisbrick__diap-default:hover {
  border: 2px solid #3C98F2;
  color: #3C98F2 !important;
}
@charset "UTF-8";
.EuroloopMaster header {
  z-index: 100;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.EuroloopMaster .navbar {
  padding: 0 !important;
}
.EuroloopMaster .navbar .nav-item {
  padding: 0 1rem;
}
.EuroloopMaster .navbar .navbar-nav .nav-link {
  color: var(--black-color) !important;
  cursor: pointer;
  font-family: var(--font-link) !important;
}
.EuroloopMaster .navbar .navbar-nav .nav-link:hover {
  color: #6CA7ED !important;
}
.EuroloopMaster .navbar .nav-link.active,
.EuroloopMaster .navbar .nav-link.active-parent,
.EuroloopMaster .navbar .show > .nav-link {
  font-weight: bold;
  border-bottom: 1px solid var(--base-color);
}
.EuroloopMaster .navbar .navbar-collapse {
  justify-content: center;
}
.EuroloopMaster .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.EuroloopMaster .navbar .navbar-toggler i {
  color: var(--black-color);
  font-size: 2rem;
}
.EuroloopMaster .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.EuroloopMaster .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.EuroloopMaster .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.EuroloopMaster .top-bar .top-bar-inner span {
  font-size: 14px;
}
.EuroloopMaster .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .links ul {
    padding-left: 0px;
  }
}
.EuroloopMaster .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.EuroloopMaster .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.EuroloopMaster .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.EuroloopMaster .top-bar .user-info-section {
  font-size: 14px !important;
}
.EuroloopMaster .top-bar .user-info-section img {
  height: 20px;
}
.EuroloopMaster .top-bar .user-info-section li {
  list-style-type: none;
}
.EuroloopMaster .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.EuroloopMaster .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.EuroloopMaster .middle-bar {
  background-color: var(--bg-color);
  padding: 1.5rem 0rem;
}
.EuroloopMaster .middle-bar-inner {
  display: inline-flex;
  height: 35px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .EuroloopMaster .middle-bar-inner {
    justify-content: space-between;
  }
}
.EuroloopMaster .middle-bar .logo img {
  height: 35px;
  /* Responsive layout - when the screen is <576px wide */
}
.EuroloopMaster .middle-bar .searching {
  cursor: wait;
}
.EuroloopMaster .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .EuroloopMaster .middle-bar .search-section {
    display: block !important;
  }
}
.EuroloopMaster .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.EuroloopMaster .middle-bar .search-section i {
  font-size: 1.3rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.EuroloopMaster .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 200px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.EuroloopMaster .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
.app608-petitie .BisbrickMaster .language-container {
  position: relative;
}
.app608-petitie .BisbrickMaster .language-container .language-select-label {
  position: absolute;
  pointer-events: none;
}
.app608-petitie .BisbrickMaster .language-container .language-select {
  padding: 0 0 0 16px;
  border: none;
  appearance: none;
  background-color: transparent;
}
@media (max-width: 992px) {
  .app608-petitie .BisbrickMaster bisbrick-language {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media print {
  .app608-petitie .col-md-1, .app608-petitie .col-md-2, .app608-petitie .col-md-3, .app608-petitie .col-md-4, .app608-petitie .col-md-5, .app608-petitie .col-md-6, .app608-petitie .col-md-7, .app608-petitie .col-md-8, .app608-petitie .col-md-9, .app608-petitie .col-md-10, .app608-petitie .col-md-11, .app608-petitie .col-md-12 {
    float: left;
  }
  .app608-petitie .col-md-12 {
    width: 100%;
  }
  .app608-petitie .col-md-11 {
    width: 91.66666667%;
  }
  .app608-petitie .col-md-10 {
    width: 83.33333333%;
  }
  .app608-petitie .col-md-9 {
    width: 75%;
  }
  .app608-petitie .col-md-8 {
    width: 66.66666667%;
  }
  .app608-petitie .col-md-7 {
    width: 58.33333333%;
  }
  .app608-petitie .col-md-6 {
    width: 50%;
  }
  .app608-petitie .col-md-5 {
    width: 41.66666667%;
  }
  .app608-petitie .col-md-4 {
    width: 33.33333333%;
  }
  .app608-petitie .col-md-3 {
    width: 25%;
  }
  .app608-petitie .col-md-2 {
    width: 16.66666667%;
  }
  .app608-petitie .col-md-1 {
    width: 8.33333333%;
  }
}
.app608-petitie .master-search .sv_main {
  width: 350px;
}
.app608-petitie .master-search .sv_main .sd-body {
  padding: 0 !important;
}
.app608-petitie .master-search .sd-action-bar {
  overflow: visible;
  margin-top: 0;
  padding: 0 !important;
}
.app608-petitie .master-search .sv_nav {
  padding: 0 !important;
}
.app608-petitie .master-search #sv-nav-complete {
  margin: 0 16px;
  position: absolute;
  right: -64px;
  top: 1px;
  z-index: 1;
}
.app608-petitie .master-search .sv_q_text_root {
  width: 200px !important;
}
@media (max-width: 757.98px) {
  .app608-petitie .ParagraphText-Image-Left .row {
    flow-direction: column-reverse;
  }
}
.app608-petitie .BisbrickMaster .grayscaleOnHover img {
  -webkit-filter: grayscale(0);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
  transition: filter 0.3s ease;
  /* Optional: for a smooth transition effect */
  z-index: 0 !important;
}
.app608-petitie .BisbrickMaster .grayscaleOnHover img:hover {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.app608-petitie .BisbrickMaster .imageBlurOnHover img {
  z-index: 0 !important;
}
.app608-petitie .BisbrickMaster .imageBlurOnHover img:hover {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}
.app608-petitie .blurImageDuringRendering {
  /* Initial blur effect on the image */
  /* Define the keyframes for the unblur animation */
}
.app608-petitie .blurImageDuringRendering img {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
  animation: unblur 2s ease-out forwards;
  /* Apply the animation */
}
@keyframes unblur {
  0% {
    -webkit-filter: blur(5px);
    /* Safari 6.0 - 9.0 */
    filter: blur(5px);
  }
  100% {
    -webkit-filter: blur(0px);
    /* Safari 6.0 - 9.0 */
    filter: blur(0px);
  }
}
.app608-petitie .BisbrickMaster .shakeOnHover {
  /* Define the shake animation */
}
.app608-petitie .BisbrickMaster .shakeOnHover img {
  z-index: 0 !important;
}
.app608-petitie .BisbrickMaster .shakeOnHover img:hover {
  animation: shake 0.5s;
  /* Animation name and duration */
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(10px);
  }
  30% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(-10px);
  }
  60% {
    transform: translateX(10px);
  }
  70% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  90% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
.app608-petitie .BisbrickMaster .AspectRatio .columnRight, .app608-petitie .BisbrickMaster .AspectRatio .columntLeft {
  width: 100%;
  aspect-ratio: 16/17;
  background-color: #e0e0e0;
}
.app608-petitie .hide-default-link .hide-default-link a {
  text-decoration: none;
}
.app608-petitie .grecaptcha-badge {
  visibility: hidden;
}
.app608-petitie .customCheckbox .custom-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.app608-petitie .customCheckbox .custom-checkbox input[type=checkbox] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 4px;
  background-color: transparent;
  transition: all 0.2s ease;
  padding: 4px 4px;
}
.app608-petitie .customCheckbox .custom-checkbox input[type=checkbox]:checked {
  background-color: #007bff;
  border-color: #007bff;
}
.app608-petitie .right-container-column {
  display: flex;
  justify-content: right;
}

.app608-petitie .app-shell {
  --app-gutter: clamp(16px, 3vw, 40px);
  --app-accent: #F45F3A;
  background: #F4F3F0;
}

/* Type (boards, 2026-10-14): Poppins on the app pages. It is set on the page body rather than on each
   rule, so bricks that carry no class get it too; the title bricks set Default-Bold inline, which only
   an !important can beat. The website pages on theme 13 never match .app-shell and keep Aeonik/Gilroy. */
.app608-petitie .app-shell > main {
  font-family: "Poppins-400";
  color: #292D3E;
}
.app608-petitie .app-shell > main [style*="Default-Bold"],
.app608-petitie .app-shell > main [style*="Default-Black"] {
  font-family: "Poppins-600" !important;
}
.app608-petitie .app-shell > main [style*="Default-Regular"],
.app608-petitie .app-shell > main [style*="Default-Light"] {
  font-family: "Poppins-400" !important;
}
/* Real bold faces (Koos 2026-10-27): every Poppins family on theme 13 holds one weight, so a bolder weight
   on Poppins-400 ("MQL reached" in a <strong>, a chip, a cell button) was synthesized by the browser and
   came out fuzzy. Each bold element gets the family that carries its weight; synthesis is off so a bold
   that is missed here stays crisp (and visibly not bold) instead of smeared. */
.app608-petitie .app-shell > main {
  font-synthesis: none;
}
.app608-petitie .app-shell > main strong,
.app608-petitie .app-shell > main b {
  font-family: "Poppins-700";
  font-weight: 700;
}
.app608-petitie .app-shell > main .bb-chip {
  font-family: "Poppins-600";
}
.app608-petitie .app-shell > main .table-cell-btn {
  font-family: "Poppins-500";
}

/* Widgets keep their own font and colours: Koos 2026-10-14, "Behoud de gantt en/of Kanbans (die zijn
   visueel al prima)". Everything above inherits, so the reset has to be explicit. */
.app608-petitie .app-shell bisbrick-kanban,
.app608-petitie .app-shell bisbrick-board,
.app608-petitie .app-shell .gantt_container,
.app608-petitie .app-shell [class*="dhx_"],
.app608-petitie .app-shell [class^="wx-"],
.app608-petitie .app-shell [class*=" wx-"] {
  font-family: var(--font-content);
  color: initial;
}

/* Room between the last brick and the footer: the same on every app page, and only from here -
   pages carry no trailing Line Spacer of their own (table-spacing.mjs trimPageEnd). */
.app608-petitie .app-shell > main {
  padding-bottom: 100px;
}

/* Page gutter: everything below the app menu. A margin, because a brick's own padding is set
   inline on this same wrapper. */
.app608-petitie .app-shell > main > bisbrick-list > div:not(:first-child) {
  width: auto;
  margin-left: var(--app-gutter);
  margin-right: var(--app-gutter);
}
/* width: auto above - the wrapper is a .col-md-12 (width: 100%), and 100% plus the two margins ran the
   page 2 x gutter past the right edge, with a horizontal scrollbar. */

/* Action buttons: compact, like the toolbar buttons of the planning and kanban bricks, instead of the
   theme's large website buttons; 5px corners as elsewhere in Bisbrick (Koos 2026-10-08). The geometry is
   his, the colours are the boards' (2026-10-14): one filled accent, everything else an outline. The
   transparent border keeps a primary as tall as a secondary beside it. */
.app608-petitie .app-shell .Button .button {
  height: auto;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
}
.app608-petitie .app-shell .Button .button__Primary,
.app608-petitie .app-shell .Button .button__Primary:focus {
  background-color: #F45F3A;
  border-color: #F45F3A;
  color: #FFFFFF;
  font-family: "Poppins-600";
}
.app608-petitie .app-shell .Button .button__Primary:hover {
  background-color: #D94A27;
  border-color: #D94A27;
  color: #FFFFFF;
}
.app608-petitie .app-shell .Button .button__Secondary {
  background-color: #FFFFFF;
  border: 1px solid #DCD6CB;
  color: #292D3E;
}
.app608-petitie .app-shell .Button .button__Secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}
/* Text buttons (card actions such as "Edit all", "View all notes", "Delete account" on the CRM record pages):
   an outline in the accent, so they stay quieter than the one filled primary per header (Koos 2026-10-08).
   The theme's own button__Text is filled in a blue of its own (#537CFA), which is why it is overruled here. */
.app608-petitie .app-shell .Button .button__Text,
.app608-petitie .app-shell .Button .button__Text:focus {
  background-color: #FFFFFF;
  border: 1px solid #F45F3A;
  box-shadow: none;
  color: #F45F3A;
}
.app608-petitie .app-shell .Button .button__Text:hover {
  background-color: #FDEDE8;
  border-color: #F45F3A;
  color: #F45F3A;
}

/* Buttons made of links in an htmlText (a record header, gen.mjs popupLink / popupMenu): the same look as
   the Button brick above. */
.app608-petitie .app-shell .app-btn,
.app608-petitie .app-shell a.app-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.app608-petitie .app-shell .app-btn--primary,
.app608-petitie .app-shell .app-btn--primary:hover {
  background-color: #F45F3A;
  color: #FFFFFF;
}
.app608-petitie .app-shell .app-btn--primary:hover {
  filter: brightness(0.94);
}
.app608-petitie .app-shell .app-btn--secondary,
.app608-petitie .app-shell a.app-btn--secondary:hover {
  background-color: #FFFFFF;
  border-color: #DCD6CB;
  color: #292D3E;
}
.app608-petitie .app-shell a.app-btn--secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}

/* Record header (Koos 2026-10-08): breadcrumb, name and meta line on the left, the actions on the right of
   the same row; on a narrow screen the actions wrap under the name. */
.app608-petitie .app-shell .row:has(> div > .app-head) {
  align-items: flex-end;
  row-gap: 12px;
  margin: 20px 0 8px;
}
/* The header brick does not clip, and lies over the bricks after it only while its + Contacts list is open, so the
   list opens on top of the tabs. Not always: a raised header would also cover popups of the bricks below it,
   such as the Kanban card editor, which lives inside the board's own stacking layer. */
.app608-petitie .app-shell bisbrick-multi-column:has(.app-head .app-menu:hover),
.app608-petitie .app-shell bisbrick-multi-column:has(.app-head .app-menu:focus-within) {
  z-index: 30;
}
.app608-petitie .app-shell bisbrick-multi-column:has(.app-head) .background {
  overflow: visible;
}
.app608-petitie .app-shell .row > div:has(> .app-head) {
  flex: 1 1 320px;
  width: auto;
  min-width: 0;
  padding: 0 !important;
}
.app608-petitie .app-shell .row > div:has(> .app-head-actions) {
  flex: 0 0 auto;
  width: auto;
  padding: 0 !important;
}
.app608-petitie .app-shell .app-head p {
  margin: 0;
  text-align: left;
}
.app608-petitie .app-shell .app-head .app-crumb {
  margin-bottom: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app608-petitie .app-shell .app-head .app-crumb a {
  color: #5F6475;
  text-decoration: none;
}
.app608-petitie .app-shell .app-head .app-crumb a:hover {
  color: #292D3E;
  text-decoration: underline;
}
.app608-petitie .app-shell .app-head .app-title {
  font-family: "Poppins-600";
  font-size: 28px;
  line-height: 34px;
  color: #292D3E;
}
.app608-petitie .app-shell .app-head .app-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}
/* A status as a label, coloured by its code (data-s). */
.app608-petitie .app-shell .app-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  background: #F1ECE4;
  color: #5F6475;
  font-family: "Poppins-500";
  font-size: 12px;
  line-height: 18px;
}
/* In a list the chips sit under one another, so the boards give them one width and centre the word
   (Contacts and Campaigns boards, artifact HtKnRMkmwY5aph5urR38LL). On a record page's header the chip
   is on its own beside the title, and keeps its natural width. */
.app608-petitie .app-shell td .app-badge {
  min-width: 88px;
  text-align: center;
}
.app608-petitie .app-shell .app-badge[data-s="live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app608-petitie .app-shell .app-badge[data-s="paused"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app608-petitie .app-shell .app-badge[data-s="done"] {
  color: #5F6475;
}
/* Live, but one or more parts switched off (Campaign App Campaigns StatusCode, Koos 2026-10-08):
   the Live green, lighter, with a ring so it reads as "not all of it". */
.app608-petitie .app-shell .app-badge[data-s="partial"] {
  background: #E3F2E8;
  color: #1F6B3A;
  box-shadow: inset 0 0 0 1px #1F6B3A;
}
/* "Stop campaign now" only while the campaign itself is Live (data-s = its stored status code). */
.app608-petitie .app-shell .app-stop {
  display: none;
}
.app608-petitie .app-shell .app-stop[data-s="live"] {
  display: contents;
}
.app608-petitie .app-shell .app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A button with a list of links under it, without code: open on hover, when the button has focus (a tap or
   a click), and while the keyboard is in it. A mouse click on a link gives no :focus-visible, so the list
   closes once the popup it opened covers it. */
.app608-petitie .app-shell .app-menu {
  position: relative;
  display: inline-block;
}
.app608-petitie .app-shell .app-menu__btn::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0 1px 3px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.app608-petitie .app-shell .app-menu__list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
/* Bridges the 4px gap, so the list does not close on the way to it. */
.app608-petitie .app-shell .app-menu__list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}
.app608-petitie .app-shell .app-menu:hover .app-menu__list,
.app608-petitie .app-shell .app-menu__btn:focus + .app-menu__list,
.app608-petitie .app-shell .app-menu:has(:focus-visible) .app-menu__list {
  display: block;
}
.app608-petitie .app-shell .app-menu__list a,
.app608-petitie .app-shell .app-menu__list a:hover {
  display: block;
  padding: 7px 10px;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #292D3E;
  text-decoration: none;
  white-space: nowrap;
}
.app608-petitie .app-shell .app-menu__list a:hover,
.app608-petitie .app-shell .app-menu__list a:focus-visible {
  background: #F4F3F0;
}
/* ⋯: a menu without a caret (CRM record headers, crm-record-pages.mjs). */
.app608-petitie .app-shell .app-menu__btn--more::after {
  content: none;
}
.app608-petitie .app-shell .app-menu__btn--more {
  min-width: 32px;
  justify-content: center;
  letter-spacing: 1px;
}

/* CRM record pages (Account, Contact; CRM-App-spec/local/crm-record-pages.mjs, Koos 2026-10-08).
   The badge carries the stored value as its code: account type and status, contact status. */
.app608-petitie .app-shell .app-badge[data-s="Active"],
.app608-petitie .app-shell .app-badge[data-s="Customer"],
.app608-petitie .app-shell .app-badge[data-s="Won"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app608-petitie .app-shell .app-badge[data-s="Prospect"],
.app608-petitie .app-shell .app-badge[data-s="On hold"],
.app608-petitie .app-shell .app-badge[data-s="On Hold"],
.app608-petitie .app-shell .app-badge[data-s="Suspended"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app608-petitie .app-shell .app-badge[data-s="Partner"],
.app608-petitie .app-shell .app-badge[data-s="Reseller"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.app608-petitie .app-shell .app-badge[data-s="Inactive"],
.app608-petitie .app-shell .app-badge[data-s="Archived"],
.app608-petitie .app-shell .app-badge[data-s="Closed"],
.app608-petitie .app-shell .app-badge[data-s="Left Company"],
.app608-petitie .app-shell .app-badge[data-s="Do Not Contact"],
.app608-petitie .app-shell .app-badge[data-s="Competitor"],
.app608-petitie .app-shell .app-badge[data-s="Lost"] {
  color: #5F6475;
}
/* The CRM home board's urgency chips (CRM-App-spec/local/gen-crm-home-dataactions.mjs).
   These codes are a state the DataAction works out per row, not a stored value, so they are
   lowercase and cannot collide with the status names above. */
.app608-petitie .app-shell .app-badge[data-s="late"] {
  background: #FBE9E7;
  color: #B3261E;
}
.app608-petitie .app-shell .app-badge[data-s="soon"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app608-petitie .app-shell .app-badge[data-s="later"] {
  color: #5F6475;
}
.app608-petitie .app-shell .app-badge[data-s=""] {
  display: none;
}
/* "Child of …" only when there is a parent. */
.app608-petitie .app-shell .app-head .app-meta .app-meta__parent[data-v=""] {
  display: none;
}
/* The row-detail panel (Table.rowDetail, Web !2839). The boards put it on a quiet sand ground, indented so
   it starts under the first cell instead of under the chevron, with a hairline between it and the row.
   The component's own --neutral / --blue options are greys from the website palette, so the brick stays on
   "none" and the theme gives the panel its colour.
   !important is load-bearing: the component's own "td.bb-row-detail { padding: 16px }" carries Angular's
   encapsulation attribute and so ties on specificity — order would decide it, and the theme stylesheet is
   not guaranteed to load last. */
.app608-petitie .app-shell td.bb-row-detail {
  background: #F8F7F4 !important;
  padding: 16px 18px 16px 48px !important;
  border-top: 1px solid #F1ECE4 !important;
}
/* The chevron: the component asks the theme for --secondary-color-700 and --primary-color-1000, which on
   theme 13 are the website's grey and blue. Overruled here so the handle stays in the app's own palette. */
.app608-petitie .app-shell .bb-row-detail__toggle {
  color: #8A8F9E;
}
.app608-petitie .app-shell .bb-row-detail__toggle:hover {
  background: #FDEDE8;
  color: #F45F3A;
}
.app608-petitie .app-shell .bb-row-detail__toggle:focus-visible {
  outline: 2px solid #F45F3A;
}
/* A bar of actions at the foot of the panel, above it the lighter of the two rules (boards). */
.app608-petitie .app-shell .app-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ECE8E0;
}

/* Overview: the main column and the aside are stacks of cards (a MultiColumn host is inline by default). */
.app608-petitie .app-shell .app-card {
  display: block;
  margin-bottom: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  background: #FFFFFF;
  padding: 16px 18px 18px !important;
}
/* A 16px gutter between the main column and the aside, as between the cards; stacked below md there is none. */
@media (min-width: 768px) {
  .app608-petitie .app-shell .app-overview .row > [class*="col-"] > .app-stack {
    display: block;
    padding-right: 8px;
  }
  .app608-petitie .app-shell .app-overview .row > [class*="col-"] + [class*="col-"] > .app-stack {
    padding-right: 0;
    padding-left: 8px;
  }
}
/* An equal-height pair (the layout frame: two columns only as equal-height pairs). The lead column's
   capped list sets the height and the side column's card runs down to meet it, instead of leaving a
   step of empty ground. Every wrapper between the column and the card has to carry the height, hence
   the chain: MultiColumn renders host > .row > [col] around each level. Opt-in, because a stack that
   holds several cards must keep its natural height. */
@media (min-width: 768px) {
  .app608-petitie .app-shell .app-overview--duo > .row > [class*="col-"] > .app-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .app608-petitie .app-shell .app-overview--duo .app-stack > .row,
  .app608-petitie .app-shell .app-overview--duo .app-stack > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .app608-petitie .app-shell .app-overview--duo .app-stack .app-card {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
}
.app608-petitie .app-shell .app-card p {
  margin: 0;
}
.app608-petitie .app-shell .app-card .app-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-family: "Poppins-600";
  font-size: 16px;
  line-height: 22px;
  color: #292D3E;
}
.app608-petitie .app-shell .app-card .app-card__title a,
.app608-petitie .app-shell .app-card .app-card__more a {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #F45F3A;
  text-decoration: none;
}
.app608-petitie .app-shell .app-card .app-card__title a:hover,
.app608-petitie .app-shell .app-card .app-card__more a:hover {
  text-decoration: underline;
}
.app608-petitie .app-shell .app-card .app-card__more {
  margin-top: 10px;
}
.app608-petitie .app-shell .app-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.app608-petitie .app-shell .app-card__empty {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app608-petitie .app-shell .app-person {
  margin: 0;
  font-family: "Poppins-600";
  font-size: 14px;
  line-height: 20px;
}
.app608-petitie .app-shell .app-person a {
  color: #292D3E;
  text-decoration: none;
}
.app608-petitie .app-shell .app-person a:hover {
  color: #F45F3A;
}
.app608-petitie .app-shell .app-person__line {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app608-petitie .app-shell .app-person__line:empty {
  display: none;
}

/* The app menu's words start on the same line as the titles, tabs and table text. */
.app608-petitie .app-shell > main > bisbrick-list > div:first-child .navigation-bar {
  padding-left: var(--app-gutter);
  padding-right: var(--app-gutter);
}
.app608-petitie .app-shell > main > bisbrick-list > div:first-child .nb-zone-left {
  justify-content: flex-start;
}
/* The menu item the page belongs to (class app-nav-<n> on the master, gen.mjs navClass) in the primary
   colour, like a selected tab; the navigationBar's own highlight (an exact link match) gets the same colour
   instead of its default cyan. */
.app608-petitie .app-shell.app-nav-1 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.app608-petitie .app-shell.app-nav-2 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.app608-petitie .app-shell.app-nav-3 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.app608-petitie .app-shell.app-nav-4 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.app608-petitie .app-shell.app-nav-5 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.app608-petitie .app-shell.app-nav-6 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.app608-petitie .app-shell.app-nav-7 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.app608-petitie .app-shell.app-nav-8 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(8) > .nb-link,
.app608-petitie .app-shell.app-nav-9 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(9) > .nb-link,
.app608-petitie .app-shell > main > bisbrick-list > div:first-child .nb-link.nb-active {
  color: #F45F3A;
}

/* Tabs: an underline row. */
.app608-petitie .app-shell .grid-tabs {
  gap: 4px;
  margin: 12px 0 20px;
  padding: 0;
  border-bottom: 1px solid #E4E0D8;
  flex-wrap: wrap;
}
.app608-petitie .app-shell .grid-tabs .grid-tab,
.app608-petitie .app-shell .grid-tabs .grid-tab:hover {
  max-width: none;
  margin-bottom: -1px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  color: #5F6475;
  font-size: 14px !important;
}
.app608-petitie .app-shell .grid-tabs .grid-tab:hover {
  color: #292D3E;
  border-bottom-color: #CFC7B9;
}
.app608-petitie .app-shell .grid-tabs .selected-grid-tab,
.app608-petitie .app-shell .grid-tabs .selected-grid-tab:hover {
  color: #F45F3A;
  border-bottom-color: #F45F3A;
}

/* Tabs inside a tab: a segmented control, so the two levels read apart. */
.app608-petitie .app-shell .tab-content .grid-tabs {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 16px;
  padding: 3px;
  background: #F4F3F0;
  border: 0;
  border-radius: 5px;
}
.app608-petitie .app-shell .tab-content .grid-tabs .grid-tab,
.app608-petitie .app-shell .tab-content .grid-tabs .grid-tab:hover {
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 5px !important;
  font-size: 13px !important;
}
.app608-petitie .app-shell .tab-content .grid-tabs .grid-tab:hover {
  background: rgba(255, 255, 255, 0.6);
}
.app608-petitie .app-shell .tab-content .grid-tabs .selected-grid-tab,
.app608-petitie .app-shell .tab-content .grid-tabs .selected-grid-tab:hover {
  background: #FFFFFF;
  color: #292D3E;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Stat strip (Koos 2026-10-08): figures, not buttons. No border or fill; a small muted label over
   a large value, hairlines between the figures. One htmlText brick per figure with class app-stat:
   <p>label</p><p data-v="{{x}}">value</p>[<p>note</p>]. The selectors go by the brick's place, not by
   a parent class, so a figure also works in a row that holds other bricks (the CRM dashboard). */
.app608-petitie .app-shell .row:has(> div > .app-stat) {
  margin: 4px 0 20px;
  row-gap: 12px;
}
.app608-petitie .app-shell .row > div:has(> .app-stat) {
  padding: 0 24px !important;
  /* col-md-auto only applies from 768px; below that Bootstrap makes every column 100% and the strip
     turned into a stack. A figure keeps its own width, the strip wraps instead. */
  flex: 0 0 auto;
  width: auto;
}
/* The first figure of a run lines up with what is above it (a heading or filter may come before it). */
.app608-petitie .app-shell .row > div:has(> .app-stat):not(div:has(> .app-stat) + div) {
  padding-left: 0 !important;
}
.app608-petitie .app-shell .row > div:has(> .app-stat) + div:has(> .app-stat) {
  border-left: 1px solid #E4E0D8;
}
.app608-petitie .app-shell .app-stat {
  display: block;
}
.app608-petitie .app-shell .app-stat p {
  margin: 0;
  text-align: left;
}
.app608-petitie .app-shell .app-stat p:nth-of-type(1) {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app608-petitie .app-shell .app-stat p:nth-of-type(2) {
  margin-top: 2px;
  font-family: "Poppins-600";
  font-size: 24px;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.app608-petitie .app-shell .app-stat p:nth-of-type(3) {
  margin-top: 2px;
  font-family: "Poppins-400";
  font-size: 12px;
  line-height: 16px;
  color: #5F6475;
}
.app608-petitie .app-shell .app-stat p:nth-of-type(3) img {
  height: 12px;
  width: auto;
  vertical-align: -1px;
}
/* A 0 or an empty value reads as "nothing yet", not as a figure. Keeps the :nth-of-type so it outweighs the value colour. */
.app608-petitie .app-shell .app-stat p[data-v="0"]:nth-of-type(2),
.app608-petitie .app-shell .app-stat p[data-v=""]:nth-of-type(2) {
  color: #8A8F9E;
}
/* Text values (e-mail, phone, stage, channel) are not figures: smaller, and allowed to wrap. */
.app608-petitie .app-shell .app-stat.app-stat--text p:nth-of-type(2) {
  font-size: 15px;
  line-height: 22px;
  margin-top: 4px;
  white-space: normal;
  word-break: break-word;
}
/* The EmailStats brick (Web component, the Campaign dashboard's Mail tab) brings its own bordered tiles;
   inside the apps they get the same strip. A value that says "nothing yet" (0, 0% or –) carries
   bb-email-stats__value--none (Bisbrick-Web, 2026-10-08) and is muted like a 0 in the strip. */
.app608-petitie .app-shell .bb-email-stats__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: 4px 0 8px;
}
.app608-petitie .app-shell .bb-email-stats__tile {
  flex: 0 0 auto;
  gap: 2px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
}
.app608-petitie .app-shell .bb-email-stats__tile:first-child {
  padding-left: 0;
}
.app608-petitie .app-shell .bb-email-stats__tile + .bb-email-stats__tile {
  border-left: 1px solid #E4E0D8;
}
.app608-petitie .app-shell .bb-email-stats__tile .bb-email-stats__label {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app608-petitie .app-shell .bb-email-stats__tile .bb-email-stats__value {
  font-family: "Poppins-600";
  font-size: 24px;
  font-weight: normal;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.app608-petitie .app-shell .bb-email-stats__tile .bb-email-stats__value--none {
  color: #8A8F9E;
}
.app608-petitie .app-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  overflow: hidden;
  font-family: inherit;
  font-size: 14px;
  color: #292D3E;
}

.app608-petitie .app-table thead,
.app608-petitie .app-table .sd-table__cell--header,
.app608-petitie .app-table th,
.app608-petitie .app-table thead th {
  background: #FFFFFF;
  color: #8A8F9E;
  font-size: 11px;
  font-family: var(--font-default-bold, Default-Bold), var(--font-default-regular, Default-Regular), sans-serif;
  font-weight: 600;
  font-synthesis: style small-caps;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #E4E0D8;
  text-align: left;
}

.app608-petitie .app-table .sd-table__cell,
.app608-petitie .app-table td,
.app608-petitie .app-table th {
  padding: 10px 14px;
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  border: none;
}

.app608-petitie .app-table tbody tr:hover,
.app608-petitie .app-table .sd-table__row:hover {
  background: #FBF9F6;
}

.app608-petitie .app-table thead tr:first-child > th:first-child,
.app608-petitie .app-table thead tr:first-child > .sd-table__cell:first-child {
  border-top-left-radius: 5px;
}
.app608-petitie .app-table thead tr:first-child > th:last-child,
.app608-petitie .app-table thead tr:first-child > .sd-table__cell:last-child {
  border-top-right-radius: 5px;
}
.app608-petitie .app-table tbody tr:last-child > td:first-child,
.app608-petitie .app-table tbody tr:last-child > .sd-table__cell:first-child {
  border-bottom-left-radius: 5px;
}
.app608-petitie .app-table tbody tr:last-child > td:last-child,
.app608-petitie .app-table tbody tr:last-child > .sd-table__cell:last-child {
  border-bottom-right-radius: 5px;
}

.app608-petitie .app-table tbody tr.sd-table__row--selected,
.app608-petitie .app-table .sd-table__row--selected {
  background: #FFF6F2;
  color: #292D3E;
}



@media (max-width: 757.98px) {
  .app608-petitie .app-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* custom overrides */
.app608-petitie .app-table tbody tr + tr > td {
  border-top: 1px solid #F1ECE4;
}
.app608-petitie .app-table thead th {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  letter-spacing: .08em;
  font-family: "Poppins-600";
  border-bottom: 1px solid #F1ECE4;
}
/* A row is a line of its own height, not a line of text: the boards put 52px under every row and a
   hairline between them (Contacts board, artifact HtKnRMkmwY5aph5urR38LL). */
.app608-petitie .app-table tbody td {
  height: 52px;
  font-family: "Poppins-400";
}
.app608-petitie .app-table caption {
  padding: 0;
}
/* A linked cell is not a link in the running-text sense: on the boards a row reads as one line of ink and
   the accent is spent once per screen, on the primary button. So a cell link carries its weight instead of
   a colour, and only turns accent under the cursor. */
.app608-petitie .app-table .table-link {
  color: #292D3E;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: "Poppins-500";
  text-decoration: none;
}
.app608-petitie .app-table .table-link:hover {
  color: #F45F3A;
  text-decoration: underline;
}
.app608-petitie .app-table .table-cell-btn--ghost {
  color: #5F6475;
}
.app608-petitie .app-table .table-cell-btn--ghost:hover {
  color: #292D3E;
  background: #F1ECE4;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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;
}
.abm.abm-role{
  
  --b-ink:#292D3E;--b-orange:#F45F3A;--b-yellow:#FFC505;--b-blue:#3A8DFF;--b-purple:#884DFF;--b-teal:#398FA5;
  --b-green:#8ECCC5;--b-red:#F97C7C;--b-lilac:#CCB3FF;--b-creme:#F7F4EF;--b-beige:#EBE8E4;
  
  --dto-accent:#884DFF;--dto-soft:#F1EAFF;--dto-text:#5B2ED6;--dto-acc2:#FFC505;
  --cfo-accent:#398FA5;--cfo-soft:#E4F3F1;--cfo-text:#246B7C;--cfo-acc2:#3A8DFF;
  --mkt-accent:#F45F3A;--mkt-soft:#FDECE6;--mkt-text:#C23E1B;--mkt-acc2:#FFC505;
  --own-accent:#292D3E;--own-soft:#ECEAF2;--own-text:#292D3E;--own-acc2:#F45F3A;
  --ops-accent:#2F7BEA;--ops-soft:#E6F0FF;--ops-text:#1C5FCC;--ops-acc2:#FFC505;
  --hr-accent:#D94B63;--hr-soft:#FDE8EC;--hr-text:#A8324A;--hr-acc2:#8ECCC5;
  --it-accent:#2E8B7E;--it-soft:#E2F3F0;--it-text:#1F6B61;--it-acc2:#CCB3FF;
  --cl-accent:#0F6E74;--cl-soft:#DDEFEF;--cl-text:#0B5459;
  --accent:var(--dto-accent);--accent-soft:var(--dto-soft);--accent-text:var(--dto-text);--acc2:var(--dto-acc2);
  --ink:#292D3E;--muted:#5F6475;--faint:#8B90A0;
  --paper:#FFFFFF;--creme:#F7F4EF;--line:#E6E1D9;--card:#FFFFFF;
  --dark:#292D3E;--dark-ink:#FFFFFF;
  --chrome:#1E2130;--chrome-ink:#F4F2F7;--chrome-muted:#A3A8B8;
  --note-bg:#EEF3FB;--note-ink:#2B4A7A;--note-line:#CFDCF0;
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.abm.abm-role.role-dto{--accent:var(--dto-accent);--accent-soft:var(--dto-soft);--accent-text:var(--dto-text);--acc2:var(--dto-acc2)}
.abm.abm-role.role-cfo{--accent:var(--cfo-accent);--accent-soft:var(--cfo-soft);--accent-text:var(--cfo-text);--acc2:var(--cfo-acc2)}
.abm.abm-role.role-mkt{--accent:var(--mkt-accent);--accent-soft:var(--mkt-soft);--accent-text:var(--mkt-text);--acc2:var(--mkt-acc2)}
.abm.abm-role.role-own{--accent:var(--own-accent);--accent-soft:var(--own-soft);--accent-text:var(--own-text);--acc2:var(--own-acc2)}
.abm.abm-role.role-ops{--accent:var(--ops-accent);--accent-soft:var(--ops-soft);--accent-text:var(--ops-text);--acc2:var(--ops-acc2)}
.abm.abm-role.role-hr{--accent:var(--hr-accent);--accent-soft:var(--hr-soft);--accent-text:var(--hr-text);--acc2:var(--hr-acc2)}
.abm.abm-role.role-it{--accent:var(--it-accent);--accent-soft:var(--it-soft);--accent-text:var(--it-text);--acc2:var(--it-acc2)}
.abm.abm-role.client{--accent:var(--cl-accent);--accent-soft:var(--cl-soft);--accent-text:var(--cl-text)}
.abm.abm-role, .abm.abm-role *{box-sizing:border-box}
.abm.abm-role{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
.abm.abm-role h1,.abm.abm-role h2,.abm.abm-role h3,.abm.abm-role h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.abm.abm-role p{margin:0}
.abm.abm-role button,.abm.abm-role input{font:inherit;color:inherit}
.abm.abm-role :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-role .wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.abm.abm-role .chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome);color:var(--chrome-ink);padding:10px 16px}
.abm.abm-role .chrome-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.abm.abm-role .chrome-label{font-size:12px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.abm.abm-role .chrome-label b{color:var(--chrome-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.abm.abm-role .seg{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.abm.abm-role .seg button{background:none;border:0;color:var(--chrome-muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.abm.abm-role .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-role .toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--chrome-muted);cursor:pointer}
.abm.abm-role .toggle input{accent-color:var(--accent)}
.abm.abm-role section{padding-block:80px}
.abm.abm-role section.alt{background:var(--creme)}
.abm.abm-role .eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.abm.abm-role .h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.15;max-width:26ch}
.abm.abm-role .lead{color:var(--muted);font-size:18px;max-width:60ch}
.abm.abm-role .sec-head{display:grid;gap:12px;margin-bottom:36px}
.abm.abm-role .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;font-size:15px}
.abm.abm-role .btn-primary{background:var(--accent);color:#fff}
.abm.abm-role .btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .btn:disabled{opacity:.45;cursor:default}
.abm.abm-role .link-btn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.abm.abm-role .echo{font-size:14px;color:var(--accent-text);background:var(--accent-soft);padding:10px 14px;border-radius:10px}
.abm.abm-role .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.abm.abm-role .pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.abm.abm-role .p-built{background:var(--accent);color:#fff}
.abm.abm-role .p-store{background:color-mix(in srgb,var(--acc2) 30%,transparent);color:var(--ink)}
.abm.abm-role .p-archie{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.abm.abm-role .p-plain{color:var(--muted);font-weight:500;white-space:normal;padding:0;font-size:14.5px}
.abm.abm-role .p-weak{color:var(--faint);font-weight:500;white-space:normal;padding:0;font-size:14.5px}
.abm.abm-role .note{display:none;margin-top:22px;background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;max-width:82ch}
.abm.abm-role .note b{font-weight:600}
.abm.abm-role.show-notes .note{display:block}
.abm.abm-role .hero{background:var(--creme);padding-block:0;position:relative;overflow:hidden}
.abm.abm-role .hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-block:72px 80px;align-items:center;position:relative}
.abm.abm-role .campaign{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:18px}
.abm.abm-role .campaign span:nth-child(3){color:var(--accent-text)}
.abm.abm-role .cobrand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:26px;color:var(--ink)}
.abm.abm-role .cobrand .x{color:var(--faint);font-weight:500}
.abm.abm-role .motif{display:flex;gap:6px;margin-bottom:22px}
.abm.abm-role .motif span{width:26px;height:12px;border-radius:4px;position:relative}
.abm.abm-role .motif span::before{content:"";position:absolute;top:-4px;left:6px;width:6px;height:4px;border-radius:2px 2px 0 0;background:inherit}
.abm.abm-role .hero h1{font-size:clamp(32px,4.8vw,50px);font-weight:700;line-height:1.07;margin-top:12px}
.abm.abm-role .hero .lead{margin-top:18px}
.abm.abm-role .face{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.abm.abm-role .face::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.abm.abm-role .idea-box{background:var(--card);border-radius:18px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -34px rgba(41,45,62,.45)}
.abm.abm-role .idea-box label{font-family:var(--display);font-weight:600;font-size:22px}
.abm.abm-role .idea-box .sub{font-size:14px;color:var(--muted);margin-top:-8px}
.abm.abm-role .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:15px}
.abm.abm-role .field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-role .hero-visual{position:relative;display:grid}
.abm.abm-role .kv{width:min(430px,100%);height:auto;justify-self:end;margin-right:-24px;display:block}
.abm.abm-role .kv.tall{width:min(340px,80%)}
.abm.abm-role .hero-visual .idea-box{width:min(410px,100%);margin-top:-170px;position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .kv{animation:kvin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes kvin{from{transform:translateY(18px) rotate(-3deg);opacity:.6}to{transform:none;opacity:1}}
}
.abm.abm-role .plan-dlg{border:0;border-radius:20px;padding:30px 30px 26px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:auto;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.abm.abm-role .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.abm.abm-role .plan-dlg #dlg-trial{background:#FFC505;color:#292D3E;border-radius:5px}
.abm.abm-role .plan-dlg h3{font-size:24px;font-weight:600;margin-top:6px}
.abm.abm-role .dlg-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;color:var(--faint);cursor:pointer;width:36px;height:36px;border-radius:10px}
.abm.abm-role .dlg-x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-role .plan-quote{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-weight:500}
.abm.abm-role .plan-steps{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}
.abm.abm-role .plan-steps li::marker{color:var(--accent-text);font-weight:600}
.abm.abm-role .plan-bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.abm.abm-role .plan-bricks span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--creme);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .plan-start{margin-top:14px;font-size:14px;color:var(--muted)}
.abm.abm-role .plan-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.abm.abm-role .plan-cta h4{font-size:18px;font-weight:600}
.abm.abm-role .plan-mail{font-size:13px;color:var(--faint)}
.abm.abm-role .idea-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.abm.abm-role .signals{display:flex;flex-wrap:wrap;gap:10px}
.abm.abm-role .chip{display:inline-flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:8px 8px 8px 14px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .chip .txt{display:grid;gap:1px}
.abm.abm-role .chip small{font-size:11.5px;color:var(--faint)}
.abm.abm-role .chip.guess{background:none;box-shadow:inset 0 0 0 1px var(--faint)}
.abm.abm-role .chip.guess{border:0;background-image:linear-gradient(var(--creme),var(--creme))}
.abm.abm-role .chip.guess small{color:var(--accent-text)}
.abm.abm-role .chip.mine{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .chip.mine small{color:var(--accent-text)}
.abm.abm-role .chip.off{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint)}
.abm.abm-role .chip.off .txt span{text-decoration:line-through}
.abm.abm-role .chip .x{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center}
.abm.abm-role .chip .x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-role .add{display:inline-flex;align-items:center;gap:6px;border:2px dashed var(--accent);color:var(--accent-text);background:none;border-radius:12px;padding:6px 14px;font-size:14px;font-weight:600;cursor:pointer}
.abm.abm-role .add-form{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--accent);border-radius:12px;padding:6px 6px 6px 14px;background:var(--card)}
.abm.abm-role .add-form:focus-within{box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-role .add-form input{border:0;outline:0;padding:0;font-size:14px;background:none;width:min(240px,55vw)}
.abm.abm-role .add-form button{border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:7px 11px;cursor:pointer}
.abm.abm-role .sig-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:22px}
.abm.abm-role .legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.abm.abm-role .legend i{display:inline-block;width:20px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:6px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .legend i.g{box-shadow:inset 0 0 0 1px var(--faint);background:none}
.abm.abm-role .legend i.m{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.abm.abm-role .idea{background:var(--card);border-radius:18px;overflow:hidden;display:grid;align-content:start;box-shadow:0 1px 0 var(--line);transition:transform .2s ease,box-shadow .2s ease}
.abm.abm-role .idea:hover{transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(41,45,62,.4)}
.abm.abm-role .idea .art{height:132px;display:grid;place-items:center;padding:14px;background:var(--accent-soft)}
.abm.abm-role .idea:nth-child(2) .art{background:color-mix(in srgb,var(--acc2) 22%,var(--card))}
.abm.abm-role .idea:nth-child(3) .art{background:color-mix(in srgb,var(--b-blue) 14%,var(--card))}
.abm.abm-role .idea .art svg{width:100%;max-width:220px;height:100%}
.abm.abm-role .idea .body{padding:20px 22px 24px;display:grid;gap:10px}
.abm.abm-role .idea .pill{justify-self:start}
.abm.abm-role .idea h3{font-size:19px;font-weight:600}
.abm.abm-role .idea p{color:var(--muted);font-size:15px}
.abm.abm-role .s-bg{fill:var(--card)}
.abm.abm-role .s-ln{stroke:var(--faint);fill:none;stroke-width:1.5}
.abm.abm-role .s-fl{fill:var(--faint);opacity:.3}
.abm.abm-role .s-ac{fill:var(--accent)}
.abm.abm-role .s-acl{stroke:var(--accent);fill:none;stroke-width:2}
.abm.abm-role .s-sf{fill:var(--accent-soft)}
.abm.abm-role .s-y{fill:var(--acc2)}
.abm.abm-role .band{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start}
.abm.abm-role .panel{background:var(--card);border-radius:18px;padding:20px;box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -32px rgba(41,45,62,.35)}
.abm.abm-role .panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:14px}
.abm.abm-role .panel-head h3{font-size:17px;font-weight:600}
.abm.abm-role .panel-head .row{font-size:13px;gap:12px}
.abm.abm-role .tools{display:grid;gap:6px}
.abm.abm-role .tool{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:10px;background:var(--creme)}
.abm.abm-role .tool .name{flex:1;min-width:0}
.abm.abm-role .tool .name{font-weight:500;font-size:14px}
.abm.abm-role .tool .name small{display:block;font-size:12px;color:var(--faint);font-weight:400}
.abm.abm-role .tool.mine{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.abm.abm-role .tool.fixed .name{color:var(--muted)}
.abm.abm-role .switch{display:inline-flex;background:var(--card);border-radius:9px;padding:3px;box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.abm.abm-role .switch button{border:0;background:none;padding:4px 9px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.abm.abm-role .switch button[aria-pressed="true"].k{background:var(--ink);color:var(--paper)}
.abm.abm-role .switch button[aria-pressed="true"].o{background:var(--accent);color:#fff}
.abm.abm-role .tool .name .pr{display:block;font-size:11.5px;font-weight:400;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm.abm-role .tool .ask{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:var(--accent-text);margin-top:2px}
.abm.abm-role .tool .ask input{width:64px;border:0;border-radius:6px;padding:2px 6px;font-size:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--accent);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.abm.abm-role .tool .ask input::-webkit-outer-spin-button,.abm.abm-role .tool .ask input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-role .tool .pr .qty{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--accent-text);font-weight:500}
.abm.abm-role .tool .pr .qty input{width:54px;border:0;border-radius:6px;padding:1px 5px;font-size:11.5px;background:var(--card);box-shadow:inset 0 0 0 1px var(--accent);font-variant-numeric:tabular-nums}
.abm.abm-role .tool .name .pr{white-space:normal}
.abm.abm-role .tool .rm{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:16px;flex-shrink:0}
.abm.abm-role .tool .rm:hover{background:var(--card);color:var(--ink)}
.abm.abm-role .tools-extra{margin-top:14px;display:grid;gap:8px;font-size:13px;color:var(--muted)}
.abm.abm-role .chips{display:flex;flex-wrap:wrap;gap:6px}
.abm.abm-role .chips button{border:0;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .chips button:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .chips.gone button{color:var(--faint);text-decoration:line-through;font-weight:500}
.abm.abm-role .tool-add{display:flex;gap:6px}
.abm.abm-role .tool-add input{flex:1;min-width:0;border:0;border-radius:8px;padding:6px 10px;font-size:13px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .tool-add input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .tool-add button{border:0;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;background:var(--accent);color:#fff;cursor:pointer}
.abm.abm-role .tag-fixed{font-size:12.5px;color:var(--muted);background:var(--card);padding:5px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.abm.abm-role .bricks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;padding-top:8px}
.abm.abm-role .brick{position:relative;border:0;border-radius:10px;padding:18px 10px 14px;font-family:var(--display);font-weight:600;font-size:14.5px;text-align:center;background:var(--accent-soft);color:var(--accent-text);min-height:64px;display:grid;place-content:center;gap:2px}
.abm.abm-role .brick::before,.abm.abm-role .brick::after{content:"";position:absolute;top:-6px;width:14px;height:7px;border-radius:4px 4px 0 0;background:inherit}
.abm.abm-role .brick::before{left:24%}
.abm.abm-role .brick::after{right:24%}
.abm.abm-role .brick small{font-family:var(--body);font-weight:500;font-size:11.5px;opacity:.8}
.abm.abm-role .brick.hl{background:var(--accent);color:#fff}
.abm.abm-role .brick.linked{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .brick.linked::before,.abm.abm-role .brick.linked::after{background:var(--accent);opacity:.4}
.abm.abm-role .brick.ai{background:var(--ink);color:var(--paper)}
.abm.abm-role .brick.ai .spark{color:var(--acc2)}
.abm.abm-role .brick.link{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.abm.abm-role .brick.link::before,.abm.abm-role .brick.link::after{background:var(--line)}
.abm.abm-role .brick.next{background:none;box-shadow:inset 0 0 0 2px var(--acc2);color:var(--ink);cursor:pointer}
.abm.abm-role .brick.next::before,.abm.abm-role .brick.next::after{display:none}
.abm.abm-role .brick.next:hover{background:color-mix(in srgb,var(--acc2) 18%,transparent)}
.abm.abm-role .band .meter{margin-top:32px;position:relative;z-index:1}
.abm.abm-role .band .meter .strip{grid-template-columns:1fr;gap:8px}
.abm.abm-role .band .meter .stat b{font-size:22px}
.abm.abm-role .meter{margin-top:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:20px 22px;display:grid;gap:10px}
.abm.abm-role .meter-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;font-size:14px;color:var(--muted)}
.abm.abm-role .meter-top b{font-family:var(--display);font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums}
.abm.abm-role .meter-bar{height:12px;border-radius:999px;background:var(--creme);overflow:hidden}
.abm.abm-role .meter-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--acc2));border-radius:999px;transition:width .5s cubic-bezier(.2,.9,.3,1)}
.abm.abm-role .meter small{font-size:12.5px;color:var(--faint)}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .play .brick{animation:snap .7s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i) * 80ms)}

  @keyframes snap{from{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:.5}70%{transform:translate(0,2px)}to{transform:none;opacity:1}}
}
.abm.abm-role .cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:10px}
.abm.abm-role .cmp-bar > span{font-weight:600}
.abm.abm-role .segctl{display:inline-flex;flex-wrap:wrap;background:var(--card);border-radius:12px;padding:4px;box-shadow:inset 0 0 0 1px var(--line);gap:4px}
.abm.abm-role .segctl button{border:0;background:none;padding:9px 14px;border-radius:9px;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer}
.abm.abm-role .segctl button[aria-selected="true"]{background:var(--accent);color:#fff}
.abm.abm-role .cmp-desc{font-size:14px;color:var(--faint);margin-bottom:28px}
.abm.abm-role .h3{font-size:22px;font-weight:600}
.abm.abm-role .tbl-wrap{overflow-x:auto;border-radius:16px;background:var(--card)}
.abm.abm-role table{border-collapse:collapse;width:100%;min-width:680px;font-size:15px}
.abm.abm-role th,.abm.abm-role td{text-align:left;padding:14px 18px;vertical-align:top;border-bottom:1px solid var(--line)}
.abm.abm-role thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-role thead th.us{color:var(--accent-text)}
.abm.abm-role tbody th{font-weight:500}
.abm.abm-role td.us{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.abm.abm-role tbody tr:last-child td,.abm.abm-role tbody tr:last-child th{border-bottom:0}
.abm.abm-role tr.sum th,.abm.abm-role tr.sum td{font-weight:600;background:var(--card)}
.abm.abm-role tr.sum:first-of-type th,.abm.abm-role tr.sum:first-of-type td{border-top:2px solid var(--ink)}
.abm.abm-role tr.sum td.us{background:var(--accent-soft)}
.abm.abm-role .num{font-variant-numeric:tabular-nums}
.abm.abm-role .more-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-soft);color:var(--accent-text);font:600 14.5px/1.2 var(--body,inherit);cursor:pointer;transition:background .15s}
.abm.abm-role .more-btn:hover{background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 30%)}
.abm.abm-role .more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-role .more-btn .chev{font-size:12px}
.abm.abm-role .cmp-open-hint{font-size:14.5px;color:var(--muted);margin-top:4px}
.abm.abm-role th.amt,.abm.abm-role td.amt{min-width:9.5rem;white-space:nowrap}
.abm.abm-role td.calc{color:var(--muted);font-size:13.5px}
.abm.abm-role .tbl-note{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;font-size:13px;color:var(--muted)}
.abm.abm-role .badge{font-size:12px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);border-radius:6px;padding:3px 8px}
.abm.abm-role details.sources{margin-top:14px;border-radius:14px;background:var(--card);padding:14px 18px;font-size:13.5px;color:var(--muted)}
.abm.abm-role details.sources summary{cursor:pointer;font-weight:600;color:var(--ink)}
.abm.abm-role details.sources ul{margin:10px 0 0;padding-left:18px;display:grid;gap:5px}
.abm.abm-role details.sources a{color:var(--accent-text)}
.abm.abm-role .t2-head{display:grid;gap:8px;margin:48px 0 18px}
.abm.abm-role .calc{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:18px}
.abm.abm-role .calc-group{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:12px;align-content:start}
.abm.abm-role .calc-group.us{background:var(--accent-soft)}
.abm.abm-role .calc-group h4{font-size:16px;font-weight:600}
.abm.abm-role .calc-group .hint{font-size:13px;color:var(--muted)}
.abm.abm-role .calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.abm.abm-role .calc-group.us .calc-fields{grid-template-columns:1fr}
.abm.abm-role .fieldset{display:grid;gap:5px}
.abm.abm-role .fieldset label{font-size:13px;color:var(--muted)}
.abm.abm-role .stepper{display:inline-flex;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;width:max-content}
.abm.abm-role .stepper button{border:0;background:none;width:36px;font-size:18px;color:var(--accent-text);cursor:pointer}
.abm.abm-role .stepper button:hover{background:var(--creme)}
.abm.abm-role .stepper input{width:70px;border:0;border-inline:1px solid var(--line);text-align:center;background:none;font-variant-numeric:tabular-nums;padding:8px 4px;-moz-appearance:textfield}
.abm.abm-role .stepper input::-webkit-outer-spin-button,.abm.abm-role .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-role .plan-pick{font-size:14px}
.abm.abm-role .plan-pick b{font-family:var(--display);color:var(--accent-text)}
.abm.abm-role .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.abm.abm-role .stat{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:4px}
.abm.abm-role .stat span{font-size:13px;color:var(--muted)}
.abm.abm-role .stat b{font-family:var(--display);font-size:clamp(24px,3.4vw,32px);font-weight:600;font-variant-numeric:tabular-nums}
.abm.abm-role .stat.win{background:var(--accent);color:#fff}
.abm.abm-role .stat.win span{color:rgba(255,255,255,.9)}
.abm.abm-role .profile-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.abm.abm-role .profile-bar .segctl button[disabled]{opacity:.4;cursor:default}
.abm.abm-role .picks{display:grid;gap:22px;margin-top:8px}
.abm.abm-role .pick-group h3{font-family:var(--display);font-size:16px;font-weight:600;margin:0 0 10px}
.abm.abm-role .pick-row{display:flex;flex-wrap:wrap;gap:8px}
.abm.abm-role .pick{border:0;background:var(--card);color:var(--ink);border-radius:12px;padding:10px 15px;font:inherit;font-size:14px;cursor:pointer;min-height:42px;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .pick:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .pick[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text);font-weight:600;box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .self-foot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:22px;font-size:14px;color:var(--muted)}
.abm.abm-role .self-need{margin-top:22px;max-width:760px}
.abm.abm-role .self-need textarea{width:100%;resize:vertical}
.abm.abm-role .need-hint{font-size:13.5px;color:var(--muted);margin-top:8px}
.abm.abm-role .why-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:18px}
.abm.abm-role .why-progress{flex:1;min-width:120px;max-width:220px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.abm.abm-role .why-progress i{display:block;height:100%;width:0;background:var(--accent)}
.abm.abm-role .why{overflow:hidden;border-radius:18px}
.abm.abm-role .why-track{display:flex;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.abm.abm-role .why-card{flex:0 0 100%;background:var(--creme);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:minmax(200px,300px) 1fr;align-items:stretch}
.abm.abm-role .why-card .art{min-height:120px;display:grid;place-items:center;padding:18px;background:var(--accent-soft)}
.abm.abm-role .why-card:nth-child(2) .art{background:color-mix(in srgb,var(--acc2) 22%,var(--creme))}
.abm.abm-role .why-card .art svg{width:100%;max-width:210px;height:100%}
.abm.abm-role .why-card .body{padding:22px 24px 26px;display:grid;gap:12px}
.abm.abm-role .why-card h3{font-size:20px;font-weight:600}
.abm.abm-role .why-card ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.abm.abm-role .why-card li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;line-height:1.5}
.abm.abm-role .why-card li b{font-weight:600;color:var(--ink)}
.abm.abm-role .why-card li::before{content:"";width:12px;height:12px;margin-top:6px;border-radius:4px;background:var(--accent)}
.abm.abm-role .why-card .fair{font-size:13.5px;color:var(--muted);padding-top:4px}
@media (max-width:820px){.abm.abm-role .why-card{grid-template-columns:1fr}
.abm.abm-role .why-card .art{min-height:110px}
}
@media (prefers-reduced-motion:reduce){.abm.abm-role .why-track{transition:none}
}
.abm.abm-role section.sep{border-top:1px solid var(--line)}
.abm.abm-role .proof-sec{background:var(--dark);color:var(--dark-ink)}
.abm.abm-role .proof{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.abm.abm-role .proof-sec .eyebrow{color:var(--acc2)}
.abm.abm-role .proof-sec .lead{color:rgba(255,255,255,.8)}
.abm.abm-role .facts{display:grid;gap:14px}
.abm.abm-role .kv-proof{width:min(330px,100%);height:auto;justify-self:center;display:block;margin-block:-40px}
.abm.abm-role .fact{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:14px}
.abm.abm-role .fact b{font-family:var(--display);font-size:28px;font-weight:600;min-width:3.2ch}
.abm.abm-role .fact:nth-child(1) b{color:var(--b-orange)}
.abm.abm-role .fact:nth-child(2) b{color:var(--b-yellow)}
.abm.abm-role .fact:nth-child(3) b{color:var(--b-green)}
.abm.abm-role .fact span{color:rgba(255,255,255,.85)}
.abm.abm-role .colleagues{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.abm.abm-role .colleague{background:var(--card);border-radius:18px;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-content:start}
.abm.abm-role .avatar{width:50px;height:50px;border-radius:50%;background:var(--av);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:18px;grid-row:span 2}
.abm.abm-role .colleague .who{font-family:var(--display);font-weight:600;font-size:19px;align-self:end}
.abm.abm-role .colleague .role{font-size:13px;color:var(--faint)}
.abm.abm-role .colleague p,.abm.abm-role .colleague button{grid-column:1 / -1}
.abm.abm-role .colleague p{color:var(--muted);font-size:15px;margin-top:6px}
.abm.abm-role .colleague button{justify-self:start;margin-top:6px}
.abm.abm-role .close-in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:end;justify-content:space-between}
.abm.abm-role .close h2{font-size:clamp(28px,4vw,40px);font-weight:700;max-width:20ch}
.abm.abm-role .brand{font-family:var(--display);font-weight:600;color:var(--muted);margin-top:12px}
.abm.abm-role .brand em{font-style:normal;color:var(--b-orange)}
@media (max-width:860px){.abm.abm-role .hero-in,.abm.abm-role .proof,.abm.abm-role .band,.abm.abm-role .calc{grid-template-columns:1fr}
.abm.abm-role .kv{justify-self:center;margin-right:0;width:min(320px,80%)}
.abm.abm-role .kv-proof{width:min(240px,70%);margin-block:8px 0}
.abm.abm-role .hero-visual .idea-box{margin-top:-60px}
.abm.abm-role .ideas,.abm.abm-role .colleagues,.abm.abm-role .strip,.abm.abm-role .calc-fields{grid-template-columns:1fr}
.abm.abm-role section{padding-block:56px}
}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .swap{animation:fade .25s ease}

  @keyframes fade{from{opacity:.5}to{opacity:1}}
}

.abm.abm-role{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.abm.abm-role .note{display:none}
.abm.abm-role .cmp-loader{display:flex;justify-content:center;align-items:center;min-height:60vh}
.abm.abm-role .cmp-loader::after{content:'';width:40px;height:40px;border-radius:50%;border:3px solid rgba(19,26,42,.15);border-top-color:rgb(19,26,42);animation:cmp-spin .8s linear infinite}
@keyframes cmp-spin{to{transform:rotate(360deg)}}
.abm.abm-role h1,.abm.abm-role h2,.abm.abm-role h3,.abm.abm-role h4,.abm.abm-role p,.abm.abm-role span,.abm.abm-role b{text-transform:none}
/* account manager widget: the page sanitizer strips position:fixed from inline styles */
.abm.abm-role .am{position:fixed;left:16px;bottom:16px;z-index:50}
.abm.abm-role .am summary::-webkit-details-marker{display:none}

/* abm-widget 2026-10-21 */
.abm.abm-role .hero-in{padding-block:40px 48px;gap:40px}
.abm.abm-role .campaign{margin-bottom:10px}
.abm.abm-role .cobrand{margin-bottom:14px}
.abm.abm-role .kv.tall{width:auto;max-width:min(300px,80%);max-height:300px}
.abm.abm-role .hero-visual .idea-box{margin-top:-96px}
.abm.abm-role .hero-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muted)}
.abm.abm-role .hero-points li{display:flex;align-items:center;gap:7px}
.abm.abm-role .hero-points li::before{content:'';width:12px;height:6px;border-left:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);transform:translateY(-2px) rotate(-45deg)}
.abm.abm-role .am{left:auto;right:20px;bottom:20px;width:max-content;max-width:min(460px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px -12px rgba(19,26,42,.28);font-family:var(--body);color:var(--ink)}
.abm.abm-role .am-head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px}
.abm.abm-role .am-pic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent-soft) center/cover no-repeat;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.abm.abm-role .am-who{display:flex;flex-direction:column;min-width:0;flex:1}
.abm.abm-role .am-hi{font-weight:600;font-size:15px;line-height:1.3}
.abm.abm-role .am-role{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm.abm-role .am-toggle{flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 4px 4px 0}
.abm.abm-role .am[open] .am-toggle{transform:rotate(-135deg);margin:4px 4px 0 0}
.abm.abm-role .am-body{padding:0 14px 14px;display:grid;gap:10px;width:0;min-width:100%}
.abm.abm-role .am-pitch{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.abm.abm-role .am-cta{flex:none;width:auto;padding:10px 16px;font-size:14px;white-space:nowrap}
.abm.abm-role .am-links{margin:0;display:flex;gap:16px;font-size:13px}
.abm.abm-role .am-links a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.abm.abm-role .am{right:16px;bottom:16px;width:auto;left:16px}.abm.abm-role .am-head{flex-wrap:wrap}.abm.abm-role .am-cta{order:3;width:100%;text-align:center;justify-content:center}}

.abm.abm-partner{
  
  --b-ink:#292D3E;--b-orange:#F45F3A;--b-yellow:#FFC505;--b-blue:#3A8DFF;--b-purple:#884DFF;--b-teal:#398FA5;
  --b-green:#8ECCC5;--b-red:#F97C7C;--b-lilac:#CCB3FF;--b-creme:#F7F4EF;--b-beige:#EBE8E4;
  
  --bur-accent:#F45F3A;--bur-soft:#FDECE6;--bur-text:#C23E1B;--bur-acc2:#FFC505;
  --con-accent:#398FA5;--con-soft:#E4F3F1;--con-text:#246B7C;--con-acc2:#3A8DFF;
  --imp-accent:#2F74E0;--imp-soft:#E6F0FF;--imp-text:#1F56B8;--imp-acc2:#FFC505;
  --ver-accent:#884DFF;--ver-soft:#F1EAFF;--ver-text:#5B2ED6;--ver-acc2:#FFC505;
  --accent:var(--bur-accent);--accent-soft:var(--bur-soft);--accent-text:var(--bur-text);--acc2:var(--bur-acc2);
  --ink:#292D3E;--muted:#5F6475;--faint:#8B90A0;
  --paper:#FFFFFF;--creme:#F7F4EF;--line:#E6E1D9;--card:#FFFFFF;
  --dark:#292D3E;--dark-ink:#FFFFFF;
  --chrome:#1E2130;--chrome-ink:#F4F2F7;--chrome-muted:#A3A8B8;
  --note-bg:#EEF3FB;--note-ink:#2B4A7A;--note-line:#CFDCF0;
  --tbc-bg:#FFF6D6;--tbc-line:#E3B200;--tbc-ink:#6B5200;
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.abm.abm-partner.face-bur{--accent:var(--bur-accent);--accent-soft:var(--bur-soft);--accent-text:var(--bur-text);--acc2:var(--bur-acc2)}
.abm.abm-partner.face-con{--accent:var(--con-accent);--accent-soft:var(--con-soft);--accent-text:var(--con-text);--acc2:var(--con-acc2)}
.abm.abm-partner.face-imp{--accent:var(--imp-accent);--accent-soft:var(--imp-soft);--accent-text:var(--imp-text);--acc2:var(--imp-acc2)}
.abm.abm-partner.face-ver{--accent:var(--ver-accent);--accent-soft:var(--ver-soft);--accent-text:var(--ver-text);--acc2:var(--ver-acc2)}
.abm.abm-partner, .abm.abm-partner *{box-sizing:border-box}
.abm.abm-partner{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
.abm.abm-partner h1,.abm.abm-partner h2,.abm.abm-partner h3,.abm.abm-partner h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.abm.abm-partner p{margin:0}
.abm.abm-partner button,.abm.abm-partner input{font:inherit;color:inherit}
.abm.abm-partner :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-partner .wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.abm.abm-partner .chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome);color:var(--chrome-ink);padding:10px 16px}
.abm.abm-partner .chrome-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.abm.abm-partner .chrome-label{font-size:12px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.abm.abm-partner .chrome-label b{color:var(--chrome-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.abm.abm-partner .seg{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.abm.abm-partner .seg button{background:none;border:0;color:var(--chrome-muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.abm.abm-partner .seg button:hover{color:var(--chrome-ink);background:rgba(255,255,255,.08)}
.abm.abm-partner .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--chrome-muted);cursor:pointer}
.abm.abm-partner .toggle input{accent-color:var(--accent)}
.abm.abm-partner section{padding-block:80px}
.abm.abm-partner section.alt{background:var(--creme)}
.abm.abm-partner .eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.abm.abm-partner .h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.15;max-width:26ch}
.abm.abm-partner .lead{color:var(--muted);font-size:18px;max-width:60ch}
.abm.abm-partner .sec-head{display:grid;gap:12px;margin-bottom:36px}
.abm.abm-partner .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;font-size:15px;transition:transform .15s ease,filter .15s ease}
.abm.abm-partner .btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.abm.abm-partner .btn-primary{background:var(--accent);color:#fff}
.abm.abm-partner .btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .btn-quiet:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.abm.abm-partner .pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.abm.abm-partner .p-rec{background:var(--accent);color:#fff}
.abm.abm-partner .p-also{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.abm.abm-partner .echo{font-size:14px;color:var(--accent-text);background:var(--accent-soft);padding:10px 14px;border-radius:10px}
.abm.abm-partner .num{font-variant-numeric:tabular-nums}
.abm.abm-partner .note{display:none;margin-top:22px;background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;max-width:82ch}
.abm.abm-partner .note b{font-weight:600}
.abm.abm-partner .note p+p{margin-top:6px}
.abm.abm-partner.show-notes .note{display:block}
.abm.abm-partner .tbc{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--tbc-ink);background:var(--tbc-bg);box-shadow:inset 0 0 0 1px var(--tbc-line);border-radius:6px;padding:1px 7px;white-space:nowrap;vertical-align:1px}
.abm.abm-partner .hero{background:var(--creme);padding-block:0;position:relative;overflow:hidden}
.abm.abm-partner .hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-block:64px 80px;align-items:center;position:relative}
.abm.abm-partner .campaign{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);letter-spacing:-.005em;display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:22px}
.abm.abm-partner .campaign span:nth-child(3){color:var(--accent-text)}
.abm.abm-partner .cobrand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:22px;color:var(--ink)}
.abm.abm-partner .cobrand .x{color:var(--faint);font-weight:500}
.abm.abm-partner .hero h1{font-size:clamp(32px,4.8vw,50px);font-weight:700;line-height:1.07;margin-top:12px}
.abm.abm-partner .hero .lead{margin-top:18px}
.abm.abm-partner .face{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.abm.abm-partner .face::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.abm.abm-partner .hero-cta{margin-top:26px}
.abm.abm-partner .idea-box{background:var(--card);border-radius:18px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -34px rgba(41,45,62,.45)}
.abm.abm-partner .idea-box label{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2}
.abm.abm-partner .idea-box .sub{font-size:14px;color:var(--muted);margin-top:-6px}
.abm.abm-partner .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:15px}
.abm.abm-partner .field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-partner .hero-visual{position:relative;display:grid}
.abm.abm-partner .kv{width:min(430px,100%);height:auto;justify-self:end;margin-right:-24px;display:block}
.abm.abm-partner .kv.tall{width:min(340px,80%)}
.abm.abm-partner .hero-visual .idea-box{width:min(410px,100%);margin-top:-170px;position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .kv{animation:kvin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes kvin{from{transform:translateY(18px) rotate(-3deg);opacity:.6}to{transform:none;opacity:1}}
}
.abm.abm-partner .plan-dlg{border:0;border-radius:20px;padding:30px 30px 26px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:auto;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.abm.abm-partner .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.abm.abm-partner .plan-dlg h3{font-size:24px;font-weight:600;margin-top:6px}
.abm.abm-partner .dlg-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;color:var(--faint);cursor:pointer;width:36px;height:36px;border-radius:10px}
.abm.abm-partner .dlg-x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-partner .plan-quote{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--creme);color:var(--ink);font-weight:500}
.abm.abm-partner .plan-steps{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}
.abm.abm-partner .plan-steps li::marker{color:var(--accent-text);font-weight:600}
.abm.abm-partner .plan-bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.abm.abm-partner .plan-bricks span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--creme);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .plan-start{margin-top:14px;font-size:14px;color:var(--muted)}
.abm.abm-partner .plan-role{margin-top:14px}
.abm.abm-partner .plan-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.abm.abm-partner .plan-cta h4{font-size:18px;font-weight:600}
.abm.abm-partner .plan-mail{font-size:13px;color:var(--faint)}
.abm.abm-partner .idea-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.abm.abm-partner .link-btn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.abm.abm-partner .types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.abm.abm-partner .type{background:var(--creme);border-radius:18px;padding:22px 20px 22px;display:grid;gap:12px;align-content:start;grid-template-rows:auto auto auto 1fr}
.abm.abm-partner .type.rec{background:var(--accent-soft)}
.abm.abm-partner .type-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.abm.abm-partner .type-top small{font-size:12px;color:var(--faint)}
.abm.abm-partner .type h3{font-size:20px;font-weight:600}
.abm.abm-partner .type dl{margin:0;display:grid;gap:10px;font-size:14.5px}
.abm.abm-partner .type dt{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .type dd{margin:2px 0 0;color:var(--muted)}
.abm.abm-partner .type.rec dd{color:var(--ink)}
.abm.abm-partner .mini-bricks{display:flex;flex-wrap:wrap;gap:12px 6px;padding-top:6px;margin-bottom:4px}
.abm.abm-partner .brick{position:relative;border:0;border-radius:10px;padding:18px 10px 14px;font-family:var(--display);font-weight:600;font-size:14.5px;text-align:center;background:var(--accent-soft);color:var(--accent-text);min-height:64px;display:grid;place-content:center;gap:2px}
.abm.abm-partner .brick::before,.abm.abm-partner .brick::after{content:"";position:absolute;top:-6px;width:14px;height:7px;border-radius:4px 4px 0 0;background:inherit}
.abm.abm-partner .brick::before{left:24%}
.abm.abm-partner .brick::after{right:24%}
.abm.abm-partner .brick.sm{min-height:0;padding:9px 12px 7px;font-size:12.5px;border-radius:8px}
.abm.abm-partner .brick.sm::before,.abm.abm-partner .brick.sm::after{top:-5px;width:10px;height:5px;border-radius:3px 3px 0 0}
.abm.abm-partner .brick.base{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.abm.abm-partner .brick.base::before,.abm.abm-partner .brick.base::after{background:var(--line)}
.abm.abm-partner .brick.hl{background:var(--accent);color:#fff}
.abm.abm-partner .shift{margin-top:40px;display:grid;gap:14px}
.abm.abm-partner .shift h3{font-size:20px;font-weight:600}
.abm.abm-partner .shift-rows{display:grid;gap:8px}
.abm.abm-partner .shift-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;background:var(--creme);border-radius:14px;padding:14px 18px;font-size:15px}
.abm.abm-partner .shift-row .now{color:var(--muted)}
.abm.abm-partner .shift-row .arrow{color:var(--accent-text);font-weight:700}
.abm.abm-partner .shift-row .with{font-weight:500}
.abm.abm-partner .shift-head{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;padding:0 18px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .shift-head span:nth-child(2){visibility:hidden}
.abm.abm-partner .calc{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px}
.abm.abm-partner .calc-group{background:var(--card);border-radius:16px;padding:20px 22px;display:grid;gap:16px;align-content:start}
.abm.abm-partner .calc-group h4{font-size:16px;font-weight:600}
.abm.abm-partner .calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.abm.abm-partner .fieldset{display:grid;gap:6px;align-content:start}
.abm.abm-partner .fieldset.full{grid-column:1 / -1}
.abm.abm-partner .fieldset label,.abm.abm-partner .fieldset .lbl{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.abm.abm-partner .ex{font-size:11px;font-weight:600;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line);border-radius:5px;padding:0 6px}
.abm.abm-partner .stepper{display:inline-flex;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden;width:max-content}
.abm.abm-partner .stepper:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .stepper button{border:0;background:none;width:38px;font-size:18px;color:var(--accent-text);cursor:pointer;font-weight:600}
.abm.abm-partner .stepper button:hover{background:var(--accent-soft)}
.abm.abm-partner .stepper input{width:72px;border:0;border-inline:1px solid var(--line);text-align:center;background:none;font-variant-numeric:tabular-nums;padding:9px 4px;-moz-appearance:textfield}
.abm.abm-partner .stepper input:focus{outline:none}
.abm.abm-partner .stepper input::-webkit-outer-spin-button,.abm.abm-partner .stepper input::-webkit-inner-spin-button,.abm.abm-partner .pct input::-webkit-outer-spin-button,.abm.abm-partner .pct input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-partner .segctl{display:inline-flex;flex-wrap:wrap;background:var(--paper);border-radius:12px;padding:4px;box-shadow:inset 0 0 0 1.5px var(--line);gap:4px}
.abm.abm-partner .segctl button{border:0;background:none;padding:8px 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;display:grid;text-align:left;line-height:1.25}
.abm.abm-partner .segctl button small{font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.abm.abm-partner .segctl button:hover{background:var(--accent-soft);color:var(--accent-text)}
.abm.abm-partner .segctl button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .pct{display:inline-flex;align-items:center;gap:0;border-radius:10px;background:var(--tbc-bg);box-shadow:inset 0 0 0 1.5px var(--tbc-line);width:max-content;overflow:hidden}
.abm.abm-partner .pct:focus-within{box-shadow:inset 0 0 0 2px var(--tbc-line),0 0 0 4px var(--tbc-bg)}
.abm.abm-partner .pct input{width:90px;border:0;background:none;padding:9px 12px;font-variant-numeric:tabular-nums;color:var(--ink);-moz-appearance:textfield}
.abm.abm-partner .pct input:focus{outline:none}
.abm.abm-partner .pct input::placeholder{color:var(--tbc-ink);opacity:.9}
.abm.abm-partner .pct span{padding-right:12px;color:var(--tbc-ink);font-weight:600}
.abm.abm-partner .calc-hint{font-size:13px;color:var(--muted)}
.abm.abm-partner .results{display:grid;gap:10px;align-content:start}
.abm.abm-partner .stat{background:var(--card);border-radius:16px;padding:16px 20px;display:grid;gap:2px}
.abm.abm-partner .stat span{font-size:13px;color:var(--muted)}
.abm.abm-partner .stat b{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:600;font-variant-numeric:tabular-nums}
.abm.abm-partner .stat small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .stat.open b{color:var(--tbc-ink);font-size:18px;font-family:var(--body);font-weight:600}
.abm.abm-partner .stat.open{background:var(--tbc-bg)}
.abm.abm-partner .stat.win{background:var(--accent);color:#fff}
.abm.abm-partner .stat.win span,.abm.abm-partner .stat.win small{color:rgba(255,255,255,.9)}
.abm.abm-partner .calc-foot{font-size:13px;color:var(--muted);max-width:80ch;display:grid;gap:6px}
.abm.abm-partner .benefit-groups{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.abm.abm-partner .bgroup h3{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm.abm-partner .benefits{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.abm.abm-partner .benefit{background:var(--creme);border-radius:14px;padding:14px 18px;display:grid;gap:3px}
.abm.abm-partner .benefit b{font-family:var(--display);font-weight:600;font-size:16px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.abm.abm-partner .benefit span{color:var(--muted);font-size:14.5px}
.abm.abm-partner .benefit.focus{background:var(--accent-soft)}
.abm.abm-partner .benefit.focus span{color:var(--ink)}
.abm.abm-partner .benefit.tbd{background:var(--tbc-bg);box-shadow:inset 0 0 0 1.5px var(--tbc-line)}
.abm.abm-partner .benefit.tbd span{color:var(--ink)}
.abm.abm-partner .s-bg{fill:var(--card)}
.abm.abm-partner .s-ln{stroke:var(--faint);fill:none;stroke-width:1.5}
.abm.abm-partner .s-fl{fill:var(--faint);opacity:.3}
.abm.abm-partner .s-ac{fill:var(--accent)}
.abm.abm-partner .s-acl{stroke:var(--accent);fill:none;stroke-width:2}
.abm.abm-partner .s-sf{fill:var(--accent-soft)}
.abm.abm-partner .s-y{fill:var(--acc2)}
.abm.abm-partner .leads-sec{background:var(--accent-soft)}
.abm.abm-partner .leads-sec .lead{color:var(--ink)}
.abm.abm-partner .leadflow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-top:26px}
.abm.abm-partner .channels-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.abm.abm-partner .channels-head h3{font-size:19px;font-weight:600}
.abm.abm-partner .channels-head p{color:var(--ink);font-size:14.5px}
.abm.abm-partner .channels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.abm.abm-partner .ch{background:var(--card);border-radius:14px;padding:14px 14px 13px;display:grid;grid-template-columns:36px 1fr;column-gap:12px;row-gap:2px;align-items:start}
.abm.abm-partner .ch-ico{grid-row:span 2;width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center}
.abm.abm-partner .ch:nth-child(3n+2) .ch-ico{background:var(--acc2);color:var(--b-ink)}
.abm.abm-partner .ch:nth-child(3n) .ch-ico{background:var(--b-ink);color:#fff}
.abm.abm-partner .ch-ico svg{width:20px;height:20px}
.abm.abm-partner .ch b{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25}
.abm.abm-partner .ch span:not(.ch-ico){font-size:13px;color:var(--muted);line-height:1.4}
.abm.abm-partner .channels-foot{margin-top:10px;font-size:13px;color:var(--muted)}
@media (max-width:960px){.abm.abm-partner .channels{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){.abm.abm-partner .channels{grid-template-columns:1fr}
}
.abm.abm-partner .lf-col{background:var(--card);border-radius:18px;padding:18px 18px 16px;display:grid;gap:12px;align-content:start;box-shadow:0 18px 40px -32px rgba(41,45,62,.4)}
.abm.abm-partner .lf-col small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .lf-label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--accent-text)}
.abm.abm-partner .lf-bricks{display:flex;flex-wrap:wrap;gap:12px 6px;padding-top:6px}
.abm.abm-partner .lf-line{font-size:14px;color:var(--ink);font-weight:500}
.abm.abm-partner .lf-arrow{align-self:center;font-family:var(--display);font-size:30px;color:var(--accent);font-weight:700}
.abm.abm-partner .lf-leads{display:grid;gap:8px}
.abm.abm-partner .lead-chip{display:flex;align-items:center;gap:10px;background:var(--creme);border-radius:10px;padding:8px 10px;font-size:13.5px}
.abm.abm-partner .lead-chip i{width:8px;height:8px;border-radius:50%;background:var(--acc2);flex-shrink:0}
.abm.abm-partner .lead-chip b{font-weight:600}
.abm.abm-partner .lf-you{background:var(--accent);color:#fff}
.abm.abm-partner .lf-you .lf-label{color:rgba(255,255,255,.85)}
.abm.abm-partner .lf-you small{color:rgba(255,255,255,.85)}
.abm.abm-partner .lf-you .tbc{white-space:normal}
.abm.abm-partner .match{display:grid;gap:8px}
.abm.abm-partner .match-card{background:rgba(255,255,255,.14);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.abm.abm-partner .match-card b{font-family:var(--display);font-size:17px;font-weight:600}
.abm.abm-partner .match-card span{font-size:13.5px;color:rgba(255,255,255,.9)}
.abm.abm-partner .lead-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.abm.abm-partner .lead-point{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:6px}
.abm.abm-partner .lead-point b{font-family:var(--display);font-weight:600;font-size:17px}
.abm.abm-partner .lead-point span{color:var(--muted);font-size:14.5px}
.abm.abm-partner .hero-leads{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:var(--ink)}
.abm.abm-partner .hero-leads::before{content:"✦";color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .play .lead-chip{animation:chipin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 140ms)}
.abm.abm-partner .play .match-card{animation:chipin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:.55s}

  @keyframes chipin{from{transform:translateX(-14px);opacity:.35}to{transform:none;opacity:1}}
}
.abm.abm-partner .type-art{background:var(--card);border-radius:12px;height:92px;display:grid;place-items:center;padding:8px;margin-bottom:2px}
.abm.abm-partner .type.rec .type-art{background:color-mix(in srgb,var(--card) 70%,var(--accent-soft))}
.abm.abm-partner .type-art svg{width:100%;max-width:180px;height:100%}
.abm.abm-partner .shift-row{grid-template-columns:1fr 44px 1fr;padding:0;background:none;gap:10px}
.abm.abm-partner .shift-row .now,.abm.abm-partner .shift-row .with{border-radius:14px;padding:16px 18px;display:grid;gap:4px;align-content:center;min-height:74px}
.abm.abm-partner .shift-row .now{background:var(--creme);color:var(--muted)}
.abm.abm-partner .shift-row .with{background:var(--accent-soft);color:var(--ink);font-weight:500}
.abm.abm-partner .shift-row .arrow{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;justify-self:center;font-size:18px}
.abm.abm-partner .shift-row.lead-row .with{background:var(--accent);color:#fff}
.abm.abm-partner .shift-row.lead-row .with small{color:rgba(255,255,255,.88)}
.abm.abm-partner .shift-row small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.abm.abm-partner .shift-head{grid-template-columns:1fr 44px 1fr;padding:0 4px}
.abm.abm-partner .calc-left{display:grid;gap:16px;align-content:start}
.abm.abm-partner .store-note{font-size:13px;color:var(--muted)}
.abm.abm-partner .benefit.lead{background:var(--accent);color:#fff}
.abm.abm-partner .benefit.lead span{color:rgba(255,255,255,.9)}
.abm.abm-partner .benefit.lead .pill{background:#fff;color:var(--accent-text)}
.abm.abm-partner .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.abm.abm-partner .prod{background:var(--creme);border-radius:18px;overflow:hidden;display:grid;align-content:start}
.abm.abm-partner .prod-art{height:110px;display:grid;place-items:center;padding:12px;background:var(--accent-soft)}
.abm.abm-partner .prod:nth-child(2) .prod-art{background:color-mix(in srgb,var(--acc2) 22%,var(--card))}
.abm.abm-partner .prod:nth-child(3) .prod-art{background:color-mix(in srgb,var(--b-blue) 14%,var(--card))}
.abm.abm-partner .prod-art svg{width:100%;max-width:200px;height:100%}
.abm.abm-partner .prod-body{padding:18px 20px 20px;display:grid;gap:8px}
.abm.abm-partner .prod-body h3{font-size:18px;font-weight:600}
.abm.abm-partner .prod-body p{color:var(--muted);font-size:14.5px}
.abm.abm-partner .prod-body .how{font-size:13px;color:var(--ink)}
.abm.abm-partner .prod-body .how b{color:var(--accent-text)}
.abm.abm-partner .ladder{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;margin-top:22px}
.abm.abm-partner .rung{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:4px}
.abm.abm-partner .rung small{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--accent-text)}
.abm.abm-partner .rung b{font-family:var(--display);font-weight:600;font-size:16px}
.abm.abm-partner .rung span{font-size:13.5px;color:var(--muted)}
.abm.abm-partner .rung.top{background:var(--accent);box-shadow:none;color:#fff}
.abm.abm-partner .rung.top small,.abm.abm-partner .rung.top span{color:rgba(255,255,255,.9)}
.abm.abm-partner .ladder .arrow{align-self:center;font-family:var(--display);font-weight:700;font-size:24px;color:var(--accent)}
@media (max-width:860px){.abm.abm-partner .prod-grid,.abm.abm-partner .ladder{grid-template-columns:1fr}
.abm.abm-partner .ladder .arrow{transform:rotate(90deg);justify-self:center}
}
.abm.abm-partner .ubr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.abm.abm-partner .ubr{background:var(--creme);border-radius:18px;padding:22px 22px 24px;display:grid;gap:10px;align-content:start;position:relative}
.abm.abm-partner .ubr.hl{background:var(--accent);color:#fff}
.abm.abm-partner .ubr.hl p{color:rgba(255,255,255,.9)}
.abm.abm-partner .ubr .brick{justify-self:start;min-height:0;padding:10px 14px 8px;font-size:13px}
.abm.abm-partner .ubr.hl .brick{background:#fff;color:var(--accent-text)}
.abm.abm-partner .ubr h3{font-size:21px;font-weight:600;line-height:1.2}
.abm.abm-partner .ubr p{color:var(--muted);font-size:15px}
.abm.abm-partner .ubr-more{margin-top:16px;font-size:14.5px;color:var(--muted)}
.abm.abm-partner .type-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.abm.abm-partner .type-tab{border:0;border-radius:12px;padding:10px 14px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;text-align:left;display:grid;gap:2px;color:var(--ink)}
.abm.abm-partner .type-tab b{font-family:var(--display);font-weight:600;font-size:16px}
.abm.abm-partner .type-tab small{font-size:12px;color:var(--faint)}
.abm.abm-partner .type-tab:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .type-tab[aria-selected="true"]{background:var(--accent);box-shadow:none;color:#fff}
.abm.abm-partner .type-tab[aria-selected="true"] small{color:rgba(255,255,255,.85)}
.abm.abm-partner .type-tab .rec-dot{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--acc2);color:var(--ink);vertical-align:2px}
.abm.abm-partner .type-panel{background:var(--card);border-radius:18px;padding:22px;display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}
.abm.abm-partner .type-panel .type-art{background:var(--accent-soft);height:140px;margin:0}
.abm.abm-partner .type-panel h3{font-size:22px;font-weight:600;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm.abm-partner .type-panel dl{margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:15px}
.abm.abm-partner .type-panel dt{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .type-panel dd{margin:4px 0 0;color:var(--ink)}
.abm.abm-partner section.sep{border-top:1px solid var(--line)}
@media (max-width:860px){.abm.abm-partner .ubr-grid,.abm.abm-partner .type-panel,.abm.abm-partner .type-panel dl{grid-template-columns:1fr}
}
.abm.abm-partner .status-block{margin-top:26px;display:grid;gap:14px}
.abm.abm-partner .status-block h3{font-size:18px;font-weight:600}
.abm.abm-partner .status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.abm.abm-partner .status{background:var(--card);border-radius:16px;padding:16px 16px 14px;display:grid;gap:10px;align-content:start;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .status.on{box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-partner .status-top{display:grid;gap:2px}
.abm.abm-partner .status-top b{font-family:var(--display);font-size:18px;font-weight:600}
.abm.abm-partner .status-top small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .status-pct{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.abm.abm-partner .status-pct span{background:var(--accent-soft);border-radius:8px;padding:6px 4px;text-align:center;font-family:var(--display);font-weight:600;font-size:15px;color:var(--accent-text);display:grid}
.abm.abm-partner .status-pct small{font-family:var(--body);font-weight:500;font-size:10.5px;color:var(--muted)}
.abm.abm-partner .status ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);display:grid;gap:4px}
.abm.abm-partner .referral{margin-top:14px;font-size:14.5px;color:var(--muted);max-width:80ch}
.abm.abm-partner .benefit.ask{background:var(--accent-soft)}
.abm.abm-partner .benefit.ask span{color:var(--ink)}
.abm.abm-partner .asks-note{font-size:13px;color:var(--faint);margin-top:8px}
@media (max-width:860px){.abm.abm-partner .status-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){.abm.abm-partner .status-grid{grid-template-columns:1fr}
}
.abm.abm-partner .fit{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.abm.abm-partner .fit span{background:rgba(255,255,255,.16);border-radius:8px;padding:5px 8px;font-size:12.5px;display:grid;gap:1px}
.abm.abm-partner .fit em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.abm.abm-partner .proof-sec{background:var(--dark);color:var(--dark-ink)}
.abm.abm-partner .proof{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.abm.abm-partner .proof-sec .eyebrow{color:var(--acc2)}
.abm.abm-partner .proof-sec .lead{color:rgba(255,255,255,.82)}
.abm.abm-partner .facts{display:grid;gap:14px}
.abm.abm-partner .kv-proof{width:min(330px,100%);height:auto;justify-self:center;display:block;margin-block:-40px}
.abm.abm-partner .fact{display:grid;grid-template-columns:7.5em 1fr;gap:16px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:14px}
.abm.abm-partner .fact b{font-family:var(--display);font-size:20px;font-weight:600}
.abm.abm-partner .fact:nth-child(1) b{color:var(--b-orange)}
.abm.abm-partner .fact:nth-child(2) b{color:var(--b-yellow)}
.abm.abm-partner .fact:nth-child(3) b{color:var(--b-green)}
.abm.abm-partner .fact span{color:rgba(255,255,255,.88)}
.abm.abm-partner .close-in{display:grid;gap:22px}
.abm.abm-partner .close h2{font-size:clamp(28px,4vw,40px);font-weight:700;max-width:22ch}
.abm.abm-partner .brand{font-family:var(--display);font-weight:600;color:var(--muted);margin-top:28px;font-size:18px}
.abm.abm-partner .brand em{font-style:normal;color:var(--b-orange)}
@media (max-width:960px){.abm.abm-partner .types{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){.abm.abm-partner .hero-in,.abm.abm-partner .proof,.abm.abm-partner .calc,.abm.abm-partner .benefit-groups,.abm.abm-partner .lead-points{grid-template-columns:1fr}
.abm.abm-partner .leadflow{grid-template-columns:1fr}
.abm.abm-partner .lf-arrow{transform:rotate(90deg);justify-self:center}
.abm.abm-partner .kv{justify-self:center;margin-right:0;width:min(320px,80%)}
.abm.abm-partner .kv-proof{width:min(240px,70%);margin-block:8px 0}
.abm.abm-partner .hero-visual .idea-box{margin-top:-60px}
.abm.abm-partner section{padding-block:56px}
}
@media (max-width:600px){.abm.abm-partner .types,.abm.abm-partner .calc-fields{grid-template-columns:1fr}
.abm.abm-partner .shift-head{display:none}
.abm.abm-partner .shift-row{grid-template-columns:1fr;gap:4px}
.abm.abm-partner .shift-row .arrow{transform:rotate(90deg);justify-self:start}
.abm.abm-partner .fact{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .swap{animation:fade .25s ease}

  @keyframes fade{from{opacity:.5}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.abm.abm-partner .btn{transition:none}
.abm.abm-partner .btn:hover{transform:none}
}

.abm.abm-partner{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.abm.abm-partner .note,.abm.abm-partner .chrome{display:none}
.abm.abm-partner h1,.abm.abm-partner h2,.abm.abm-partner h3,.abm.abm-partner h4,.abm.abm-partner p,.abm.abm-partner span,.abm.abm-partner b{text-transform:none}
.abm.abm-partner .segctl button[aria-selected="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .seg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px}
.abm.abm-partner .seg-bar>span{font-weight:600}
.abm.abm-partner .seg-role{margin-top:18px;max-width:760px}

/* App align (class app-align, next to app-shell on the BisbrickMaster brick of the CRM list pages):
   the logo, the app menu, the page title, the stat strip, the tabs and the table all start on the
   page gutter (--app-gutter of App shell). The inset came from Bootstrap's column padding (12px a side)
   in the page's MultiColumns, one step per nesting level, and from the logo's own 20px in the master's
   floating menu. Only a column that starts a line loses its left padding, so the space between
   columns on one line stays. Generated by CRM-App-spec/local/align-crm-gutter.mjs. */

/* Logo: the master's navigationBar sets padding-left 20px inline on the logo link. */
.app608-petitie .app-shell.app-align > header .nb-logo {
  padding-left: var(--app-gutter) !important;
}

/* Level 1: the columns of a page block's MultiColumn. Level 2: the columns of a MultiColumn in such a
   column, directly or as the content of a TabContent tab (List / Card / Board). */
.app608-petitie .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.app608-petitie .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.app608-petitie .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div) {
  padding-left: 0;
}
/* A full-width column also ends on the gutter: the tabs and the table end where the menu ends. */
.app608-petitie .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.app608-petitie .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.app608-petitie .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12 {
  padding-right: 0;
}
/* Below 768px every column is full width, so every column starts a line. */
@media (max-width: 767.98px) {
.app608-petitie .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div,
.app608-petitie .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div,
.app608-petitie .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div {
    padding-left: 0;
    padding-right: 0;
  }
}

.app608-petitie .app-shell .app-focus .app-focus__list,
.app608-petitie .app-shell .app-focus .app-focus__checks {
  display: flex;
  flex-direction: column;
}
.app608-petitie .app-shell .app-focus .app-focus__row,
.app608-petitie .app-shell .app-focus .app-focus__check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #E4E0D8;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #292D3E;
}
.app608-petitie .app-shell .app-focus .app-focus__row:last-of-type,
.app608-petitie .app-shell .app-focus .app-focus__check:last-child {
  border-bottom: 0;
}
.app608-petitie .app-shell .app-focus .app-focus__row[data-n="0"],
.app608-petitie .app-shell .app-focus .app-focus__row[data-n=""] {
  display: none;
}
.app608-petitie .app-shell .app-focus .app-focus__count {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 5px;
  background: #F6F4F0;
  font-family: "Poppins-600";
  text-align: center;
}
.app608-petitie .app-shell .app-focus .app-focus__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app608-petitie .app-shell .app-focus .app-focus__detail {
  margin-left: 8px;
  color: #5F6475;
  font-size: 13px;
}
.app608-petitie .app-shell .app-focus .app-focus__go {
  flex: 0 0 auto;
  font-size: 13px;
  color: #F45F3A;
  text-decoration: none;
}
.app608-petitie .app-shell .app-focus .app-focus__go:hover {
  text-decoration: underline;
}
.app608-petitie .app-shell .app-focus .app-focus__go::after {
  content: " \203A";
}
.app608-petitie .app-shell .app-focus .app-focus__empty {
  display: none;
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  color: #5F6475;
}
.app608-petitie .app-shell .app-focus .app-focus__list[data-total="0"] .app-focus__empty {
  display: block;
}
.app608-petitie .app-shell .app-focus .app-focus__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.app608-petitie .app-shell .app-focus .app-focus__score {
  flex: 0 0 auto;
  font-family: "Poppins-600";
  font-size: 14px;
  color: #292D3E;
}
.app608-petitie .app-shell .app-focus .app-focus__bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: #F6F4F0;
  overflow: hidden;
}
.app608-petitie .app-shell .app-focus .app-focus__bar > span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: #2E7D4F;
}
.app608-petitie .app-shell .app-focus .app-focus__mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.5px solid #5F6475;
  border-radius: 50%;
}
/* Done checks: below the open ones, muted, without their fix link. */
.app608-petitie .app-shell .app-focus .app-focus__check[data-ok="1"],
.app608-petitie .app-shell .app-focus .app-focus__check[data-ok="true"] {
  order: 1;
  color: #5F6475;
}
.app608-petitie .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__mark,
.app608-petitie .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__mark {
  border-color: #2E7D4F;
  background: #2E7D4F;
}
.app608-petitie .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__go,
.app608-petitie .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__detail,
.app608-petitie .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__go,
.app608-petitie .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__detail {
  display: none;
}
/* App canvas: the chrome of the approved UI-refresh canvas (v28) for every page that carries the
   Campaign_menu Page component. Dark 52px app bar, white header band with the campaign tabs,
   grey page, white cards. Scope: theme 13, opt-in through the page's own Campaign_menu. */
.app608-petitie .app-shell:has(.Campaign_menu) {
  background: #F4F3F0;
  font-family: "Poppins-400", Poppins, sans-serif;
  color: #292D3E;
}

/* The tenant site menu and footer are not part of the app; the account links stay, inside the bar. */
.app608-petitie .app-shell:has(.Campaign_menu) > header > bisbrick-list,
.app608-petitie .app-shell:has(.Campaign_menu) > header .bottom-bar,
.app608-petitie .app-shell:has(.Campaign_menu) > footer {
  display: none !important;
}
/* The site navigation-bar is sticky: hidden, it measures top 0, "sticks" and teleports itself to
   body as position:fixed, out of reach of the rule above. The Campaign_menu bar is not sticky. */
body:has(.app-shell .Campaign_menu) > .nb-wrapper {
  display: none !important;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header {
  position: relative;
  height: 0;
  z-index: 20;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar {
  position: absolute;
  top: 0;
  right: 24px;
  height: 52px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .container {
  width: auto;
  max-width: none;
  padding: 0;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .navbar {
  padding: 0;
  background: transparent;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .nav-item.language {
  display: none;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .nav-item {
  padding: 0;
  margin: 0;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .nav-link {
  color: #D6D8E0 !important;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .nav-link span {
  font-weight: 400;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:hover {
  color: #FFFFFF !important;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .nav-link .fa-user {
  display: none;
}
/* The account name as the round avatar of the canvas (first letter; the full name is the tooltip-less link) */
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .nav-item:has(.fa-user) {
  order: 9;
  margin-left: 8px;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #F4F3F0;
  color: #292D3E;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}
.app608-petitie .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span::first-letter {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
}

/* App bar */
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(> .Campaign_menu) {
  padding: 0;
}
.app608-petitie .app-shell .Campaign_menu section,
.app608-petitie .app-shell .Campaign_menu .background {
  background: #292D3E !important;
  padding: 0 !important;
  margin: 0;
}
.app608-petitie .app-shell .Campaign_menu .background > div {
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}
.app608-petitie .app-shell .Campaign_menu .row {
  margin: 0;
}
.app608-petitie .app-shell .Campaign_menu .row > div {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  padding: 0 !important;
}
.app608-petitie .app-shell .Campaign_menu .nb-wrapper,
.app608-petitie .app-shell .Campaign_menu .navigation-bar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  min-height: 52px;
  height: 52px;
  padding: 0 !important;
}
.app608-petitie .app-shell .Campaign_menu .navigation-bar {
  display: flex;
  align-items: center;
  gap: 6px 22px;
}
.app608-petitie .app-shell .Campaign_menu .nb-zone-left {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
}
.app608-petitie .app-shell .Campaign_menu .nb-zone-left::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #F4F3F0;
  margin-right: 20px;
}
.app608-petitie .app-shell .Campaign_menu .nb-zone-center {
  display: none;
}
.app608-petitie .app-shell .Campaign_menu .nb-zone-right {
  margin-right: 300px;
}
/* Narrow screens: the navigation-bar folds into its hamburger; keep it visible on the dark bar,
   left of the account links. */
@media (max-width: 992px) {
  .app608-petitie .app-shell .Campaign_menu .nb-hamburger {
    color: #F4F3F0;
    margin-right: 300px;
  }
  .app608-petitie .app-shell .Campaign_menu .nb-zone-right {
    margin-right: 0;
  }
}
.app608-petitie .app-shell .Campaign_menu .nb-link {
  color: #D6D8E0 !important;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-size: 13px !important;
  font-weight: 400;
  padding: 6px 12px !important;
  border-radius: 5px;
  text-decoration: none;
  background: transparent;
  line-height: 1.5;
}
.app608-petitie .app-shell .Campaign_menu .nb-link::after {
  display: none !important;
}
.app608-petitie .app-shell .Campaign_menu .nb-link:hover {
  color: #FFFFFF !important;
}
/* Only the current page. active-parent is added by bisbrick-url but never removed on navigation,
   so it is reset to a plain link explicitly (the theme styles it as active too). */
.app608-petitie .app-shell .Campaign_menu .nb-link.active-parent:not(.nb-active) {
  color: #D6D8E0 !important;
  background: transparent;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-weight: 400;
}
/* The page names its own menu item through app-nav-N on the master (a campaign has no nb-active). */
.app608-petitie .app-shell.app-nav-1 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.app608-petitie .app-shell.app-nav-2 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.app608-petitie .app-shell.app-nav-3 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.app608-petitie .app-shell.app-nav-4 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.app608-petitie .app-shell.app-nav-5 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.app608-petitie .app-shell.app-nav-6 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.app608-petitie .app-shell.app-nav-7 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.app608-petitie .app-shell .Campaign_menu .nb-link.nb-active {
  color: #292D3E !important;
  background: #F4F3F0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
}

/* Page body: fluid, 24px gutters (Koos 2026-10-15: lists must use the full width, no 1200px column) */
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list {
  display: block;
}
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:not(:has(> .Campaign_menu)) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  float: none;
}

/* Header band (white, full width): campaign name, status, actions, then the section tabs */
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) {
  background: #FFFFFF;
  /* sideways only: a clip-path here would also cut off menus that open below the band */
  border-image: linear-gradient(#FFFFFF, #FFFFFF) fill 0 / 0 / 0 100vmax;
  padding-top: 12px;
  padding-bottom: 10px;
}
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) section,
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .background {
  background: transparent !important;
  padding: 0 !important;
}
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row {
  align-items: center;
  flex-wrap: nowrap;
}
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.app608-petitie .app-shell .app-head p {
  margin: 0;
}
.app608-petitie .app-shell .app-head > bisbrick-html-with-link > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.app608-petitie .app-shell .app-head .app-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px 0 12px;
  background: #F4F3F0;
  border-radius: 5px 0 0 5px;
  font-size: 0;
  margin-right: -14px !important;
}
.app608-petitie .app-shell .app-head .app-crumb::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
  font-weight: 600;
}
.app608-petitie .app-shell .app-head .app-crumb a {
  display: none;
}
.app608-petitie .app-shell .app-head .app-title {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px 0 10px;
  background: #F4F3F0;
  border-radius: 0 5px 5px 0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 17px !important;
  line-height: 1.2;
  color: #292D3E;
}
.app608-petitie .app-shell .app-head .app-meta {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 200px;
  font-size: 13px;
  color: #5F6475;
}
.app608-petitie .app-shell .app-head .app-meta > span:not(.app-badge) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.app608-petitie .app-shell .app-head .app-badge {
  display: inline-block;
  min-width: 88px;
  box-sizing: border-box;
  text-align: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  background: #F1ECE4;
  color: #5F6475;
}
.app608-petitie .app-shell .app-head .app-badge[data-s="live"],
.app608-petitie .app-shell .app-head .app-badge[data-s="Live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app608-petitie .app-shell .app-head-actions .app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.app608-petitie .app-shell .app-head-actions .app-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
}
.app608-petitie .app-shell .app-head-actions .app-stop .app-btn {
  color: #B3261E;
  box-shadow: inset 0 0 0 1px #E8C9C6;
  border: 0;
}

/* Section tabs: the top TabContent of the page sits in the white band, the rest is grey */
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs {
  background: #FFFFFF;
  box-shadow: 0 0 0 100vmax #FFFFFF, 0 1px 0 100vmax #E6E0D6;
  clip-path: inset(0 -100vmax -1px);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab {
  padding: 10px 14px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #F45F3A;
}
.app608-petitie .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab::after {
  display: none;
}

/* Inner views (sub tabs) look like the card's segment row of the canvas */
.app608-petitie .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #EFEAE1;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
  box-shadow: none;
}
.app608-petitie .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab {
  padding: 12px 10px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.app608-petitie .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #292D3E;
}

/* Cards: white, 5px, hairline ring, no drop shadow */
.app608-petitie .app-shell:has(.Campaign_menu) .app-card,
.app608-petitie .app-shell:has(.Campaign_menu) .app-panel {
  background: #FFFFFF;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #E4E0D8;
}

/* Boolean switch (SurveyJS sd-boolean) in app forms, full pages AND popups. Survey theme "Default"
   of theme 13 (SurveyThemes Id 2) sets --sjs-primary-backcolor to rgba(37,137,229,0): the thumb
   text is drawn in that colour, so the selected value vanished and the switch read as an empty
   knob next to the OTHER label. Popups render in an ngb-modal-window on body, outside .app-shell,
   hence the body:has() scope. Redefined on the boolean only: buttons and other inputs keep theirs. */
.app608-petitie .app-shell .sd-boolean,
body:has(.app608-petitie .app-shell) > ngb-modal-window.default .sd-boolean {
  --sjs-primary-backcolor: #F45F3A;
  --sjs-primary-backcolor-light: rgba(244, 95, 58, 0.1);
}

/* Sub tabs: straight blue underline (Koos 2026-10-15) */
.app608-petitie .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.app608-petitie .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover,
.app608-petitie .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.app608-petitie .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 #2A78D6 !important;
  color: #292D3E;
}

.app608-petitie .app-shell .app-page-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  margin: 0 0 8px !important;
  padding: 0 16px 0 12px;
  background: #F4F3F0;
  border-radius: 5px;
  line-height: 1.2;
}
.app608-petitie .app-shell .app-page-label {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
}
.app608-petitie .app-shell .app-page-name {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 17px !important;
  font-weight: 600;
  color: #292D3E;
}
.app608-petitie .app-shell .app-page-sub {
  font-size: 14px !important;
  line-height: 1.5;
  color: #5A6377;
}

/* Campaign App home (home.mjs). Equal-height queue/warm cards, campaign tabs as a segmented control. */
/* MultiColumn nests host > a > section > .background > div > .row; the section is centred with inline auto margins, so every level is made a full-width flex column. */
.app-home .app-home-fill, .app-home .app-home-fill > a > section, .app-home .app-home-fill > section, .app-home .app-home-fill > a > section > .background, .app-home .app-home-fill > section > .background, .app-home .app-home-fill > a > section > .background > div, .app-home .app-home-fill > section > .background > div, .app-home .app-home-fill > a > section > .background > div > .row, .app-home .app-home-fill > section > .background > div > .row, .app-home .app-home-grow, .app-home .app-home-grow > a > section, .app-home .app-home-grow > section, .app-home .app-home-grow > a > section > .background, .app-home .app-home-grow > section > .background, .app-home .app-home-grow > a > section > .background > div, .app-home .app-home-grow > section > .background > div, .app-home .app-home-grow > a > section > .background > div > .row, .app-home .app-home-grow > section > .background > div > .row { display: flex; flex-direction: column; flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; width: 100%; box-sizing: border-box; }
.app-home .app-home-duo .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { display: flex; flex-direction: column; }
.app-home .app-home-fill .row > div:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.app-home .app-home-grow .row > div:last-child { margin-top: auto; }
.app-home .app-home-card .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-cards .row { margin-left: -10px; margin-right: -10px; }
.app-home .app-home-h2 { min-height: 44px; display: flex; align-items: center; }
/* Tabs: the app-shell tab rules (app-canvas.css) are !important, so these carry more classes. */
.app608-petitie .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs { display: inline-flex !important; gap: 4px !important; background: #FFFFFF !important; padding: 4px !important; border-radius: 5px !important; float: right !important; margin: -48px 0 16px !important; list-style: none !important; border: 0 !important; }
.app-home .app-home-segmented ul.grid-tabs + * { clear: both !important; }
.app608-petitie .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab { border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #292D3E !important; padding: 0 16px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; font-size: 13px !important; margin: 0 !important; box-shadow: none !important; transition: none !important; }
.app608-petitie .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab.selected-grid-tab { background: #292D3E !important; color: #FFFFFF !important; font-weight: 600 !important; }
.app-home .app-home-segmented li.grid-tab::after, .app-home .app-home-segmented li.grid-tab::before { display: none !important; }
@media (max-width: 900px) { .app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; padding: 0 0 32px !important; } }

/* Relation type choice (popup /relations/popup/new-relation, class app-choice-wrap on the
   MultiColumn): two cards, "Organization" or "Individual contact". The choice exists because a
   contact under an organization and a contact in their own right are different records, and the
   old /relations/accounts page could not ask the question - there, a contact always hangs under an
   account. Generated by CRM-App-spec/local/gen-rel-choice-css.mjs. */

.app608-petitie .app-choice-wrap {
  padding: 4px 4px 8px;
}
.app608-petitie .app-choice-wrap .app-choice__lead {
  margin: 0 0 16px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}

.app608-petitie .app-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* A popup is narrow on a phone; two cards side by side would each be too thin to read. */
@media (max-width: 560px) {
  .app608-petitie .app-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.app608-petitie .app-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 8px;
  background: #FFFFFF;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.app608-petitie .app-choice:hover,
.app608-petitie .app-choice:focus-visible {
  border-color: var(--app-accent, #F45F3A);
  background: #FDF8F6;
}

.app608-petitie .app-choice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #F4F3F0;
  color: #5F6475;
}
.app608-petitie .app-choice:hover .app-choice__icon,
.app608-petitie .app-choice:focus-visible .app-choice__icon {
  color: var(--app-accent, #F45F3A);
}
.app608-petitie .app-choice__icon svg {
  width: 18px;
  height: 18px;
}

.app608-petitie .app-choice__body {
  display: block;
  min-width: 0;
}
.app608-petitie .app-choice__title {
  display: block;
  font-family: "Poppins-600";
  font-size: 15px;
  line-height: 20px;
  color: #292D3E;
}
.app608-petitie .app-choice__sub {
  display: block;
  margin-top: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}

.bbh.bb-home{font-family:Inter, Arial, sans-serif; color:#292D3E; background:#F7F4F0; font-size:16px; line-height:1.55; overflow-x:clip; text-align:left; -webkit-font-smoothing:antialiased}
.bbh.bb-home p,.bbh.bb-home li,.bbh.bb-home summary,.bbh.bb-home label,.bbh.bb-home input,.bbh.bb-home button,.bbh.bb-home span,.bbh.bb-home a,.bbh.bb-home div,.bbh.bb-home b{font-family:inherit; letter-spacing:inherit}
.bbh.bb-home h1,.bbh.bb-home h2,.bbh.bb-home h3,.bbh.bb-home h4{text-transform:none}
.bbh.bb-home a{color:#292D3E}
.bbh.bb-home a:hover{color:#5B52C7}
.bbh.bb-home a:focus-visible,.bbh.bb-home button:focus-visible,.bbh.bb-home summary:focus-visible{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home summary{cursor:pointer}
.bbh.bb-home .ic{display:inline-block; flex:0 0 auto; vertical-align:middle; background-color:currentColor; -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat}
.bbh.bb-home .ic-i1{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20275%20274%22%3E%3Cpath%20d%3D%22M274.214%2068.5C274.214%2030.6728%20243.517%200%20205.66%200H85.6918C76.2276%200%2068.5534%207.66819%2068.5534%2017.125V68.5H17.1384C7.67418%2068.5%200%2076.1682%200%2085.625V205.804C0%20241.463%2027.269%20270.765%2062.117%20274H205.66C243.517%20274%20274.214%20243.327%20274.214%20205.5C274.214%20167.673%20243.517%20137%20205.66%20137C243.517%20137%20274.214%20106.327%20274.214%2068.5Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i2{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cpolyline%20points%3D%2212%205%2019%2012%2012%2019%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i3{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i4{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i5{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-3.5%208-8%209-4.5-1-8-4-8-9V6z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i6{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M12%202l2.2%205.8L20%2010l-5.8%202.2L12%2018l-2.2-5.8L4%2010l5.8-2.2z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i7{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i8{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5.4%205.4L3%2018l3%203%206.3-6.3a4%204%200%200%200%205.4-5.4l-2.5%202.5-2.4-.6-.6-2.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i9{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2214%22%20x2%3D%2214%22%20y2%3D%2214%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2217%22%20x2%3D%2217%22%20y2%3D%2217%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i10{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2213%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i11{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18%2014a6.5%206.5%200%200%201%203.5%206%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i12{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a1%201%200%200%200%201%201h3l6%204V6L7%2010H4a1%201%200%200%200-1%201z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17%208.5a5%205%200%200%201%200%207%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i13{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209l10-5%2010%205-10%205z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M6%2011v5c0%201.5%202.7%203%206%203s6-1.5%206-3v-5%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i14{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M4%2021a8%208%200%200%201%2016%200%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i15{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021h8%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%2017v4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%204h10v5a5%205%200%200%201-10%200z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17%206h3v2a3%203%200%200%201-3%203%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%206H4v2a3%203%200%200%200%203%203%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .idea-field{width:100%; box-sizing:border-box; padding:13px 15px; border:1.5px solid #E4DFD8; border-radius:10px; background:#FFFFFF; color:#292D3E; font:inherit; font-size:15px; margin:0}
.bbh.bb-home .idea-field::placeholder{color:#8B90A0}
.bbh.bb-home .idea-field:focus{border-color:#5B52C7; outline:none; box-shadow:0 0 0 4px #EEEDFB}
.bbh.bb-home .idea-go{cursor:pointer; border:0; width:100%; font-family:inherit; line-height:1.55}
.bbh.bb-home .idea-go:hover{background:#3A3F55 !important}
.bbh.bb-home .hn-picker:hover{box-shadow:0 0 0 1px #5B52C7}
.bbh.bb-home .plan-dlg{border:0; border-radius:20px; padding:30px 30px 26px; box-sizing:border-box; width:100%; max-width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; margin:auto; background:#FFFFFF; color:#292D3E; font-family:Inter, Arial, sans-serif; font-size:16px; line-height:1.55; text-align:left; box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.bbh.bb-home .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.bbh.bb-home .plan-x{cursor:pointer; position:absolute; right:14px; top:12px; width:36px; height:36px; border:0; padding:0; border-radius:10px; background:transparent; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; color:#8B90A0}
.bbh.bb-home .plan-x:hover{background:#F7F4F0; color:#292D3E}
.bbh.bb-home .plan-steps li::marker{color:#5B52C7; font-weight:600}
.bbh.bb-home .plan-chips span{font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:7px; background:#F7F4F0; box-shadow:inset 0 0 0 1px #E4DFD8}

body:has(.bbh.bb-home[data-block]) bisbrick-master-menu-content-footer > header,
body:has(.bbh.bb-home[data-block]) bisbrick-master-menu-content-footer > footer,
body:has(.bbh.bb-home[data-block]) bisbrick-floating-menu-bisbrick{display:none !important}
body:has(.bbh.bb-home[data-block]){background:#F7F4F0}
.app610-bakkerij {
  --bg-color: #FFFFFF;
  --bg-color-rgb: 255,255,255;
  --button-padding: 0.5rem 2rem;
  --button-padding-rgb: ;
  --button-radius: 0.2rem;
  --button-radius-rgb: ;
  --font-content: Default-Regular;
  --font-content-rgb: ;
  --font-heading: Gilroy-Light;
  --font-heading-rgb: ;
  --font-link: Default;
  --font-link-rgb: ;
  --font-size: 1rem;
  --font-size-rgb: ;
  --input-line-height: 2rem;
  --input-line-height-rgb: ;
  --input-radius: 0.2rem;
  --input-radius-rgb: ;
  --negative-color: #FF3131;
  --negative-color-rgb: 255,49,49;
  --neutral-color-0: #FFFFFF;
  --neutral-color-0-rgb: 255,255,255;
  --neutral-color-100: #E9E9EB;
  --neutral-color-100-rgb: 233,233,235;
  --neutral-color-1000: #000000;
  --neutral-color-1000-rgb: 0,0,0;
  --neutral-color-200: #E0E0E0;
  --neutral-color-200-rgb: 224,224,224;
  --neutral-color-400: #BCBCBB;
  --neutral-color-400-rgb: 188,188,187;
  --neutral-color-50: #FAFAF9;
  --neutral-color-50-rgb: 250,250,249;
  --neutral-color-600: #70706F;
  --neutral-color-600-rgb: 112,112,111;
  --neutral-color-800: #2C2C2C;
  --neutral-color-800-rgb: 44,44,44;
  --other--color-BBRed: #FF4B4B;
  --other--color-BBRed-rgb: 255,75,75;
  --positive-color: #32C77C;
  --positive-color-rgb: 50,199,124;
  --primary--color-Toolkit-Grey: #f6f7f9;
  --primary--color-Toolkit-Grey-rgb: 246,247,249;
  --primary-1: #ab29ff;
  --primary-1-rgb: 171,41,204;
  --primary-color-100: #F3F9FE;
  --primary-color-100-rgb: 243,249,254;
  --primary-color-1000: #4499F2;
  --primary-color-1000-rgb: 68,153,242;
  --primary-color-1200: #2A81DC;
  --primary-color-1200-rgb: 42,129,220;
  --primary-color-800: #6CA7ED;
  --primary-color-800-rgb: 108,167,237;
  --raftest-font-size: 20px;
  --raftest-font-size-rgb: ;
  --secondary-1: #bea050;
  --secondary-1-rgb: 190,160,80;
  --secondary-color-100: #ECF0F4;
  --secondary-color-100-rgb: 236,240,244;
  --secondary-color-1000: #08213F;
  --secondary-color-1000-rgb: 8,33,63;
  --secondary-color-200: #D3D9E1;
  --secondary-color-200-rgb: 211,217,225;
  --secondary-color-400: #9FADBD;
  --secondary-color-400-rgb: 159,173,189;
  --secondary-color-50: #F7F9FA;
  --secondary-color-50-rgb: 247,249,250;
  --secondary-color-600: #728398;
  --secondary-color-600-rgb: 114,131,152;
  --secondary-color-800: #354B66;
  --secondary-color-800-rgb: 53,75,102;
  --warning-color: #FEC84C;
  --warning-color-rgb: 254,200,76;
  --Primary-1: #9A5B2E;
  --Primary-1-rgb: 154,91,46;
  --Primary-1-Dark: #7A4421;
  --Primary-1-Dark-rgb: 122,68,33;
  --Primary-1-Light: #F3E6D8;
  --Primary-1-Light-rgb: 243,230,216;
  --Neutral-1: #FFFFFF;
  --Neutral-1-rgb: 255,255,255;
  --Neutral-2: #FBF7F1;
  --Neutral-2-rgb: 251,247,241;
  --Neutral-8: #2E2520;
  --Neutral-8-rgb: 46,37,32;
}
.app610-bakkerij .h2, .app610-bakkerij h2, default .h2, default h2 {
  font-family: Default-Bold;
  text-transform: none;
  text-size: 10px;
  font-size: 20px;
  line-height: 20px;
}
.app610-bakkerij .h1, .app610-bakkerij h1, default .h1, default h1 {
  font-family: Default-Bold;
  text-transform: capitalize;
  font-size: 24px;
  line-height: 30px;
}
.app610-bakkerij .p, .app610-bakkerij p, default .p, default p {
  font-family: Default-Regular;
  text-transform: none;
  font-size: 16px;
}
.app610-bakkerij .h3, .app610-bakkerij h3, default .h3, default h3 {
  font-family: Default-Bold;
  text-transform: none;
  font-size: 18px;
  line-height: 20px;
}
.app610-bakkerij .h6, .app610-bakkerij h6, default .h6, default h6 {
  font-family: Default-Regular;
  text-transform: none;
  font-size: 50px;
  line-height: 2;
}
.app610-bakkerij .Button .button__Primary {
  background-color: var(--primary-color-1200);
  color: var(--primary--color-Toolkit-Grey);
  font-family: Default-Regular;
  font-size: 16px;
  border-width: 0;
  border-radius: 5px;
  padding-top: 10px;
  padding-right: 22px;
  padding-bottom: 10px;
  padding-left: 22px;
  text-transform: none;
  border-radius-top-left: 15px;
  border-radius-top-right: 0px;
  border-radius-bottom-left: 0px;
  border-radius-bottom-right: 15px;
  border-radius-select: false;
}
.app610-bakkerij .Button .button__Primary:hover {
  background-color: var(--primary-color-1200);
  color: var(--bg-color);
}
.app610-bakkerij .Button .button__Primary:active {
  background-color: var(--warning-color);
}
.app610-bakkerij .Button .button__Primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0.5em;
}
.app610-bakkerij .Button .button__Primary::before {
  content: "";
  flex: 0 0 auto;
  order: 1;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("/_static/Uploads/27_arrow-right.svg") no-repeat center/contain;
  mask: url("/_static/Uploads/27_arrow-right.svg") no-repeat center/contain;
  transition: transform 0.25s ease;
}
.app610-bakkerij .Button .button__Primary:hover::before {
  transform: translateX(3px);
}
.app610-bakkerij .Button .button__Secondary {
  background-color: var(--bg-color);
  border-color: var(--primary-color-1200);
  color: var(--primary-color-1200);
  border-width: 2px;
  border-radius: 5px;
  font-family: Default-Regular;
  font-size: 18px;
  padding-top: 12px;
  padding-right: 25px;
  padding-bottom: 12px;
  padding-left: 25px;
  text-transform: none;
}
.app610-bakkerij .Button .button__Secondary:hover {
  background-color: var(--primary-color-100);
}
.app610-bakkerij .Button .button__Form__Matrix__Add {
  background-color: var(--primary-color-1000);
  font-size: 16px;
  border-width: 0px;
  border-radius: 5px;
  font-family: Aeonik-Regular;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.app610-bakkerij .Button .button__Form__Matrix__Remove {
  background-color: var(--warning-color);
  font-family: Aeonik-Regular;
  font-size: 16px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app610-bakkerij .Button .button__Form__Next {
  background-color: var(--primary-color-1200);
  border-color: var(--bg-color);
  color: var(--bg-color);
  border-radius: 5px;
  padding-top: 12px;
  padding-right: 25px;
  padding-bottom: 12px;
  padding-left: 25px;
  font-size: 18px;
  font-family: Default-Regular;
  border-width: 0;
}
.app610-bakkerij .Button .button__Form__Next:hover {
  background-color: var(--secondary-color-600);
}
.app610-bakkerij .Button .button__Form__Prev {
  background-color: var(--neutral-color-0);
  border-color: var(--primary-color-1200);
  color: var(--primary-color-1200);
  border-radius: 5px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 25px;
  padding-left: 25px;
  font-size: 18px;
  font-family: Aeonik-Regular;
}
.app610-bakkerij .Button .button__Form__Prev:hover {
  border-color: var(--secondary-color-600);
  color: var(--secondary-color-600);
}
.app610-bakkerij .Button .button__SAIntaClaus {
  background-color: var(--negative-color);
  color: var(--neutral-color-0);
  font-family: Gilroy-bold;
  font-size: 20px;
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
  border-radius: 5px;
  border-width: 0px;
}
.app610-bakkerij .Button .button__SAIntaClaus:hover {
  background-color: var(--warning-color);
}
.app610-bakkerij .Button .button__Toolkit_Add {
  background-color: var(--primary-color-100);
  color: var(--primary-color-1000);
  font-family: Aeonik-Regular;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app610-bakkerij .Button .button__Toolkit_Add:hover {
  background-color: var(--primary-color-100);
  border-color: var(--primary-color-1000);
  padding-top: 9px;
  padding-right: 19px;
  padding-bottom: 9px;
  padding-left: 19px;
  border-width: 1px;
}
.app610-bakkerij .Button .button__Toolkit_Primary {
  background-color: var(--primary--color-Toolkit-Grey);
  color: var(--neutral-color-1000);
  font-family: Aeonik-Regular;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
  font-size: 14px;
}
.app610-bakkerij .Button .button__Toolkit_Primary:hover {
  background-color: var(--secondary-color-200);
}
.app610-bakkerij .Button .button__Toolkit_Secondary {
  background-color: var(--primary--color-Name);
  color: var(--neutral-color-1000);
  font-family: Aeonik-Regular;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-width: 0px;
  border-radius: 5px;
}
.app610-bakkerij .Button .button__Toolkit_Secondary:hover {
  background-color: var(--secondary-color-200);
}
.app610-bakkerij .Button .button__Toolkit_Tertiary {
  background-color: var(--neutral-color-0);
  font-family: Aeonik-Regular;
  border-width: 0px;
  border-radius: 5px;
  font-size: 14px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.app610-bakkerij .Button .button__Toolkit_Tertiary:hover {
  background-color: var(--secondary-color-200);
}
.app610-bakkerij .Button .button__Toolbar {
  background-color: var(--neutral-color-0);
  border-color: var(--secondary-color-200);
  color: var(--neutral-color-1000);
  font-family: Default-Regular;
  font-size: 13px;
  border-radius: 5px;
  border-width: 1px;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}
.app610-bakkerij .Button .button__Toolbar:hover {
  background-color: var(--secondary-color-100);
}

.app610-bakkerij .hide-default-link .hide-default-link a {
  text-decoration: none;
}
.app610-bakkerij .BisbrickMaster h1, .app610-bakkerij .BisbrickMaster h2, .app610-bakkerij .BisbrickMaster h3, .app610-bakkerij .BisbrickMaster h4, .app610-bakkerij .BisbrickMaster h5, .app610-bakkerij .BisbrickMaster h6 {
  font-family: var(--font-heading);
  font-weight: normal;
}
.app610-bakkerij .BisbrickMaster h1 {
  font-size: 3.5rem;
  font-family: Gilroy-bold;
  font-style: normal;
  line-height: 65px;
  letter-spacing: -0.01em;
}
.app610-bakkerij .BisbrickMaster h2 {
  font-family: Gilroy;
  font-style: normal;
  font-size: 3rem;
  line-height: 56px;
}
.app610-bakkerij .BisbrickMaster h4 {
  font-size: 2rem;
  font-family: Aeonik;
  line-height: 48px;
}
.app610-bakkerij .BisbrickMaster h5 {
  font-size: 1.5rem;
  font-family: Aeonik;
  line-height: 36px;
}
.app610-bakkerij .BisbrickMaster {
  font-family: var(--font-content);
}
.app610-bakkerij .BisbrickMaster optgroup, .app610-bakkerij .BisbrickMaster select, .app610-bakkerij .BisbrickMaster textarea {
  font-family: var(--font-heading) !important;
}
.app610-bakkerij .BisbrickMaster input {
  font-family: var(--font-content);
}
.app610-bakkerij .BisbrickMaster a {
  font-family: var(--font-link);
  text-decoration: none !important;
  cursor: pointer;
  color: inherit;
}
.BisbrickMaster p {
  font-size: 1rem;
  font-family: Aeonik;
  line-height: 24px;
  letter-spacing: 0.01em;
}
.BisbrickMaster header {
  z-index: 100;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.app610-bakkerij .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.app610-bakkerij .top-bar .top-bar[_ngcontent-lkq-c41] {
  height: 50px;
}
.app610-bakkerij .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app610-bakkerij .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.app610-bakkerij .top-bar .top-bar-inner span {
  font-size: 14px;
}
.app610-bakkerij .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app610-bakkerij .top-bar .links ul {
    padding-left: 0px;
  }
}
.app610-bakkerij .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.app610-bakkerij .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.app610-bakkerij .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.app610-bakkerij .top-bar .user-info-section {
  font-size: 14px !important;
}
.app610-bakkerij .top-bar .user-info-section img {
  height: 20px;
}
.app610-bakkerij .top-bar .user-info-section li {
  list-style-type: none;
}
.app610-bakkerij .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .app610-bakkerij .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.app610-bakkerij .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.app610-bakkerij .middle-bar {
  background-color: var(--bg-color);
  padding: 1.6rem 0rem;
}
.app610-bakkerij .middle-bar .floating-content {
  transform: translateX(-53%) !important;
}
.app610-bakkerij .middle-bar .floating-content .DescriptionLink .border-right {
  max-width: 244px;
}
.app610-bakkerij .middle-bar-inner {
  display: inline-flex;
  height: 38px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .app610-bakkerij .middle-bar-inner {
    justify-content: space-between;
  }
}
.app610-bakkerij .middle-bar .logo img {
  height: 85px;
  padding: 0.5rem 1rem;
  /* Responsive layout - when the screen is <576px wide */
}
.app610-bakkerij .middle-bar .searching {
  cursor: wait;
}
.app610-bakkerij .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .app610-bakkerij .middle-bar .search-section {
    display: block !important;
  }
}
.app610-bakkerij .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.app610-bakkerij .middle-bar .search-section i {
  font-size: 1.4rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.app610-bakkerij .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 250px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.app610-bakkerij .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
@charset "UTF-8";
.app610-bakkerij .navbar {
  padding: 0 !important;
}
.app610-bakkerij .navbar .nav-item {
  padding: 0 1rem;
}
.app610-bakkerij .navbar .navbar-nav .nav-link {
  color: var(--black-color);
  cursor: pointer;
  font-family: Gilroy-Bold !important;
}
.app610-bakkerij .navbar .navbar-nav .nav-link:hover {
  color: var(--primary-color-1200) !important;
}
.app610-bakkerij .navbar .nav-link.active,
.app610-bakkerij .navbar .nav-link.active-parent,
.app610-bakkerij .navbar .show > .nav-link {
  color: var(--primary-color-1200);
  border-bottom: 1px solid var(--primary-color-1200);
}
.app610-bakkerij .navbar .navbar-collapse {
  justify-content: center;
}
.app610-bakkerij .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.app610-bakkerij .navbar .navbar-toggler i {
  color: var(#021e3f);
  font-size: 2.1rem;
}
.app610-bakkerij .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.BisbrickMaster .hero_banner .jumbotron {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.BisbrickMaster .hero_banner .jumbotron h1 {
  color: var(--white-color);
  font-size: 2.5em;
}
.BisbrickMaster .hero_banner .jumbotron h1 span {
  font-weight: 300;
}
.BisbrickMaster .IconTextCard .card {
  border: 0px !important;
}
.BisbrickMaster .IconTextCard .card .div-as-link .card-body .card-title {
  font-size: 1.4rem !important;
  font-weight: bold !important;
  color: var(--base-color);
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .BisbrickMaster .IconTextCard .card .div-as-link .card-body .card-title {
    font-size: 1.1rem !important;
  }
}
.BisbrickMaster .BisbrickNieuwsbriefInschrijving span {
  color: white;
}
.BisbrickMaster .BisbrickNieuwsbriefInschrijving .sv_main .sv_container .sv_body .sv_p_root .sv_q {
  padding: 0;
  box-sizing: border-box;
  overflow: auto;
}
.BisbrickMaster .MultiColumn .sv_main .sv_container .sv_body .sv_p_root .sv_q {
  padding: 8px 0;
  box-sizing: border-box;
  overflow: auto;
}
.BisbrickMaster .MultiColumn .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.BisbrickMaster .form-control:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}
.BisbrickMaster .accordion {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-family: "Aeonik";
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
@media (min-width: 992px) {
  .BisbrickMaster .accordion {
    display: none;
  }
}
.BisbrickMaster .accordion .main-menu {
  background-color: #FFFFFF;
  padding: 0.7rem 1rem;
}
.BisbrickMaster .accordion .main-menu .main-menu-item,
.BisbrickMaster .accordion .main-menu a {
  color: #2C2C2C;
  text-transform: uppercase;
  font-size: 1rem;
}
.BisbrickMaster .accordion .main-menu .sub-menu {
  list-style-type: none;
  margin-left: -1rem;
  margin-right: -1rem;
  font-family: "Aeonik";
  font-weight: bold;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #F1F7FC;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-link {
  color: #F85600;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item {
  padding: 0.8rem 1rem 0.5rem 0rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  flex: 1;
  flex-wrap: wrap;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .menu-icon {
  width: 30px;
  margin-left: 1rem;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item {
  list-style-type: none;
  display: block;
  width: 100%;
}
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item li a,
.BisbrickMaster .accordion .main-menu .sub-menu .sub-menu-item .sub-sub-menu-item li span {
  color: #1B1B1B;
  font-size: 0.8rem;
  font-weight: 500;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-0,
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-1 {
  color: #F5F4F2;
  text-transform: uppercase;
  font-size: 0.9rem;
  list-style-type: none;
  padding: 0.7rem 0 0.7rem 2.5rem;
  margin: 0 0 0 -2rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-0 {
  background-color: #00C2F2;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-1 {
  background-color: #1B1B1B;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub {
  list-style-type: none;
  background-color: #F1F7FC;
  color: #F85600;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-left: -3rem;
  margin-bottom: -0.8rem;
  margin-top: 0.7rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-icon {
  width: 30px;
  margin-left: 1rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub li {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-self: center;
  flex: 1;
  flex-wrap: wrap;
  padding: 0.8rem 1rem 0.5rem 1rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub {
  list-style-type: none;
  display: block;
  width: 100%;
  margin-left: -1.5rem;
}
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub li a,
.BisbrickMaster .accordion .main-menu .menu-item-with-subitem-sub .menu-item-with-subitem-sub-sub li span {
  color: #1B1B1B;
  font-size: 0.8rem;
  font-weight: 500;
}
.BisbrickMaster .Button .button__Bisbrick__primary-default {
  height: 56px;
  background: linear-gradient(225deg, #3C98F2 0%, #3570F4 100%);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: var(--neutral-color-0) !important;
  padding: 16px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular;
  cursor: pointer;
}
.BisbrickMaster .Button .button__Bisbrick__primary-default:hover {
  box-shadow: none;
  background: #3C98F2;
}
.BisbrickMaster .Button .button__Bisbrick__primary-accent {
  height: 56px;
  background: linear-gradient(225deg, #FF4B4B 0%, #FF6532 100%);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  color: var(--neutral-color-0) !important;
  padding: 16px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular;
}
.BisbrickMaster .Button .button__Bisbrick__primary-accent:hover {
  box-shadow: none;
  background: #FF6532;
}
.BisbrickMaster .Button .button__Bisbrick__secondary-default {
  height: 56px;
  border: 2px solid #3C98F2;
  box-sizing: border-box;
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.15));
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular !important;
  color: #3C98F2;
}
.BisbrickMaster .Button .button__Bisbrick__secondary-default:hover {
  box-shadow: none;
  background: #3C98F2;
  color: var(--neutral-color-0);
}
.BisbrickMaster .Button .button__Bisbrick__diap-default {
  height: 56px;
  color: #FFFFFF !important;
  background-color: transparent;
  border: 2px solid white;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-family: Aeonik-Regular !important;
  transition: all 0.2s ease-in-out;
}
.BisbrickMaster .Button .button__Bisbrick__diap-default:hover {
  border: 2px solid #3C98F2;
  color: #3C98F2 !important;
}
@charset "UTF-8";
.EuroloopMaster header {
  z-index: 100;
  position: sticky;
  top: 0;
  width: 100%;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.EuroloopMaster .navbar {
  padding: 0 !important;
}
.EuroloopMaster .navbar .nav-item {
  padding: 0 1rem;
}
.EuroloopMaster .navbar .navbar-nav .nav-link {
  color: var(--black-color) !important;
  cursor: pointer;
  font-family: var(--font-link) !important;
}
.EuroloopMaster .navbar .navbar-nav .nav-link:hover {
  color: #6CA7ED !important;
}
.EuroloopMaster .navbar .nav-link.active,
.EuroloopMaster .navbar .nav-link.active-parent,
.EuroloopMaster .navbar .show > .nav-link {
  font-weight: bold;
  border-bottom: 1px solid var(--base-color);
}
.EuroloopMaster .navbar .navbar-collapse {
  justify-content: center;
}
.EuroloopMaster .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox=’0 0 32 32′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath stroke=’rgba(0, 0, 0, 0.5)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E");
  width: 2.5em;
  height: 2em;
}
.EuroloopMaster .navbar .navbar-toggler i {
  color: var(--black-color);
  font-size: 2rem;
}
.EuroloopMaster .navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0rem !important;
}
.EuroloopMaster .top-bar {
  background-color: var(--grey-color);
  padding: 0.25rem;
  color: var(--black-color);
  font-size: var(--font-size);
}
.EuroloopMaster .top-bar .top-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .top-bar-inner {
    flex-direction: column;
  }
}
.EuroloopMaster .top-bar .top-bar-inner span {
  font-size: 14px;
}
.EuroloopMaster .top-bar .links ul {
  margin-bottom: 0 !important;
  list-style-type: none !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .links ul {
    padding-left: 0px;
  }
}
.EuroloopMaster .top-bar .links ul li {
  list-style-type: none !important;
  display: inline;
  padding: 0 0.5em;
}
.EuroloopMaster .top-bar .links ul li a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  color: var(--white-color) !important;
  font-size: 14px !important;
}
.EuroloopMaster .top-bar .links ul li a:hover {
  text-decoration: underline !important;
}
.EuroloopMaster .top-bar .user-info-section {
  font-size: 14px !important;
}
.EuroloopMaster .top-bar .user-info-section img {
  height: 20px;
}
.EuroloopMaster .top-bar .user-info-section li {
  list-style-type: none;
}
.EuroloopMaster .top-bar .user-info-section a {
  text-transform: none !important;
  font-weight: 500 !important;
  font-family: var(--font-content) !important;
  margin-left: 10px;
  font-size: 14px !important;
  /* Responsive layout - when the screen is <576px wide */
}
@media (max-width: 575.98px) {
  .EuroloopMaster .top-bar .user-info-section a {
    margin: auto;
    text-align: center;
    display: block;
  }
}
.EuroloopMaster .top-bar .user-info-section a:hover {
  color: #6CA7ED !important;
  text-decoration: underline !important;
}
.EuroloopMaster .middle-bar {
  background-color: var(--bg-color);
  padding: 1.5rem 0rem;
}
.EuroloopMaster .middle-bar-inner {
  display: inline-flex;
  height: 35px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .EuroloopMaster .middle-bar-inner {
    justify-content: space-between;
  }
}
.EuroloopMaster .middle-bar .logo img {
  height: 35px;
  /* Responsive layout - when the screen is <576px wide */
}
.EuroloopMaster .middle-bar .searching {
  cursor: wait;
}
.EuroloopMaster .middle-bar .search-section {
  position: relative;
  display: none !important;
}
@media (min-width: 992px) {
  .EuroloopMaster .middle-bar .search-section {
    display: block !important;
  }
}
.EuroloopMaster .middle-bar .search-section .search-field {
  position: relative;
  border-radius: var(--input-radius);
  border: none;
  width: 400px;
  padding: 0.5rem 1rem;
}
.EuroloopMaster .middle-bar .search-section i {
  font-size: 1.3rem;
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--darkblue-color);
}
.EuroloopMaster .middle-bar .search-section .search-results {
  position: absolute;
  max-height: 200px;
  overflow-y: auto;
  border-width: 1px;
  border-color: var(--black-color);
  background-color: var(--white-color);
  min-width: 100%;
  width: max-content;
  z-index: 50;
}
.EuroloopMaster .middle-bar .search-section .search-results button {
  padding: 2px 16px;
  position: relative;
  display: block;
  min-width: 100%;
  border: none;
  background-color: var(--white-color);
  text-align: left;
}
.app610-bakkerij .BisbrickMaster .language-container {
  position: relative;
}
.app610-bakkerij .BisbrickMaster .language-container .language-select-label {
  position: absolute;
  pointer-events: none;
}
.app610-bakkerij .BisbrickMaster .language-container .language-select {
  padding: 0 0 0 16px;
  border: none;
  appearance: none;
  background-color: transparent;
}
@media (max-width: 992px) {
  .app610-bakkerij .BisbrickMaster bisbrick-language {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media print {
  .app610-bakkerij .col-md-1, .app610-bakkerij .col-md-2, .app610-bakkerij .col-md-3, .app610-bakkerij .col-md-4, .app610-bakkerij .col-md-5, .app610-bakkerij .col-md-6, .app610-bakkerij .col-md-7, .app610-bakkerij .col-md-8, .app610-bakkerij .col-md-9, .app610-bakkerij .col-md-10, .app610-bakkerij .col-md-11, .app610-bakkerij .col-md-12 {
    float: left;
  }
  .app610-bakkerij .col-md-12 {
    width: 100%;
  }
  .app610-bakkerij .col-md-11 {
    width: 91.66666667%;
  }
  .app610-bakkerij .col-md-10 {
    width: 83.33333333%;
  }
  .app610-bakkerij .col-md-9 {
    width: 75%;
  }
  .app610-bakkerij .col-md-8 {
    width: 66.66666667%;
  }
  .app610-bakkerij .col-md-7 {
    width: 58.33333333%;
  }
  .app610-bakkerij .col-md-6 {
    width: 50%;
  }
  .app610-bakkerij .col-md-5 {
    width: 41.66666667%;
  }
  .app610-bakkerij .col-md-4 {
    width: 33.33333333%;
  }
  .app610-bakkerij .col-md-3 {
    width: 25%;
  }
  .app610-bakkerij .col-md-2 {
    width: 16.66666667%;
  }
  .app610-bakkerij .col-md-1 {
    width: 8.33333333%;
  }
}
.app610-bakkerij .master-search .sv_main {
  width: 350px;
}
.app610-bakkerij .master-search .sv_main .sd-body {
  padding: 0 !important;
}
.app610-bakkerij .master-search .sd-action-bar {
  overflow: visible;
  margin-top: 0;
  padding: 0 !important;
}
.app610-bakkerij .master-search .sv_nav {
  padding: 0 !important;
}
.app610-bakkerij .master-search #sv-nav-complete {
  margin: 0 16px;
  position: absolute;
  right: -64px;
  top: 1px;
  z-index: 1;
}
.app610-bakkerij .master-search .sv_q_text_root {
  width: 200px !important;
}
@media (max-width: 757.98px) {
  .app610-bakkerij .ParagraphText-Image-Left .row {
    flow-direction: column-reverse;
  }
}
.app610-bakkerij .BisbrickMaster .grayscaleOnHover img {
  -webkit-filter: grayscale(0);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
  transition: filter 0.3s ease;
  /* Optional: for a smooth transition effect */
  z-index: 0 !important;
}
.app610-bakkerij .BisbrickMaster .grayscaleOnHover img:hover {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.app610-bakkerij .BisbrickMaster .imageBlurOnHover img {
  z-index: 0 !important;
}
.app610-bakkerij .BisbrickMaster .imageBlurOnHover img:hover {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}
.app610-bakkerij .blurImageDuringRendering {
  /* Initial blur effect on the image */
  /* Define the keyframes for the unblur animation */
}
.app610-bakkerij .blurImageDuringRendering img {
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
  animation: unblur 2s ease-out forwards;
  /* Apply the animation */
}
@keyframes unblur {
  0% {
    -webkit-filter: blur(5px);
    /* Safari 6.0 - 9.0 */
    filter: blur(5px);
  }
  100% {
    -webkit-filter: blur(0px);
    /* Safari 6.0 - 9.0 */
    filter: blur(0px);
  }
}
.app610-bakkerij .BisbrickMaster .shakeOnHover {
  /* Define the shake animation */
}
.app610-bakkerij .BisbrickMaster .shakeOnHover img {
  z-index: 0 !important;
}
.app610-bakkerij .BisbrickMaster .shakeOnHover img:hover {
  animation: shake 0.5s;
  /* Animation name and duration */
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(10px);
  }
  30% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(-10px);
  }
  60% {
    transform: translateX(10px);
  }
  70% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  90% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}
.app610-bakkerij .BisbrickMaster .AspectRatio .columnRight, .app610-bakkerij .BisbrickMaster .AspectRatio .columntLeft {
  width: 100%;
  aspect-ratio: 16/17;
  background-color: #e0e0e0;
}
.app610-bakkerij .hide-default-link .hide-default-link a {
  text-decoration: none;
}
.app610-bakkerij .grecaptcha-badge {
  visibility: hidden;
}
.app610-bakkerij .customCheckbox .custom-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.app610-bakkerij .customCheckbox .custom-checkbox input[type=checkbox] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 4px;
  background-color: transparent;
  transition: all 0.2s ease;
  padding: 4px 4px;
}
.app610-bakkerij .customCheckbox .custom-checkbox input[type=checkbox]:checked {
  background-color: #007bff;
  border-color: #007bff;
}
.app610-bakkerij .right-container-column {
  display: flex;
  justify-content: right;
}

.app610-bakkerij .app-shell {
  --app-gutter: clamp(16px, 3vw, 40px);
  --app-accent: #F45F3A;
  background: #F4F3F0;
}

/* Type (boards, 2026-10-14): Poppins on the app pages. It is set on the page body rather than on each
   rule, so bricks that carry no class get it too; the title bricks set Default-Bold inline, which only
   an !important can beat. The website pages on theme 13 never match .app-shell and keep Aeonik/Gilroy. */
.app610-bakkerij .app-shell > main {
  font-family: "Poppins-400";
  color: #292D3E;
}
.app610-bakkerij .app-shell > main [style*="Default-Bold"],
.app610-bakkerij .app-shell > main [style*="Default-Black"] {
  font-family: "Poppins-600" !important;
}
.app610-bakkerij .app-shell > main [style*="Default-Regular"],
.app610-bakkerij .app-shell > main [style*="Default-Light"] {
  font-family: "Poppins-400" !important;
}
/* Real bold faces (Koos 2026-10-27): every Poppins family on theme 13 holds one weight, so a bolder weight
   on Poppins-400 ("MQL reached" in a <strong>, a chip, a cell button) was synthesized by the browser and
   came out fuzzy. Each bold element gets the family that carries its weight; synthesis is off so a bold
   that is missed here stays crisp (and visibly not bold) instead of smeared. */
.app610-bakkerij .app-shell > main {
  font-synthesis: none;
}
.app610-bakkerij .app-shell > main strong,
.app610-bakkerij .app-shell > main b {
  font-family: "Poppins-700";
  font-weight: 700;
}
.app610-bakkerij .app-shell > main .bb-chip {
  font-family: "Poppins-600";
}
.app610-bakkerij .app-shell > main .table-cell-btn {
  font-family: "Poppins-500";
}

/* Widgets keep their own font and colours: Koos 2026-10-14, "Behoud de gantt en/of Kanbans (die zijn
   visueel al prima)". Everything above inherits, so the reset has to be explicit. */
.app610-bakkerij .app-shell bisbrick-kanban,
.app610-bakkerij .app-shell bisbrick-board,
.app610-bakkerij .app-shell .gantt_container,
.app610-bakkerij .app-shell [class*="dhx_"],
.app610-bakkerij .app-shell [class^="wx-"],
.app610-bakkerij .app-shell [class*=" wx-"] {
  font-family: var(--font-content);
  color: initial;
}

/* Room between the last brick and the footer: the same on every app page, and only from here -
   pages carry no trailing Line Spacer of their own (table-spacing.mjs trimPageEnd). */
.app610-bakkerij .app-shell > main {
  padding-bottom: 100px;
}

/* Page gutter: everything below the app menu. A margin, because a brick's own padding is set
   inline on this same wrapper. */
.app610-bakkerij .app-shell > main > bisbrick-list > div:not(:first-child) {
  width: auto;
  margin-left: var(--app-gutter);
  margin-right: var(--app-gutter);
}
/* width: auto above - the wrapper is a .col-md-12 (width: 100%), and 100% plus the two margins ran the
   page 2 x gutter past the right edge, with a horizontal scrollbar. */

/* Action buttons: compact, like the toolbar buttons of the planning and kanban bricks, instead of the
   theme's large website buttons; 5px corners as elsewhere in Bisbrick (Koos 2026-10-08). The geometry is
   his, the colours are the boards' (2026-10-14): one filled accent, everything else an outline. The
   transparent border keeps a primary as tall as a secondary beside it. */
.app610-bakkerij .app-shell .Button .button {
  height: auto;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
}
.app610-bakkerij .app-shell .Button .button__Primary,
.app610-bakkerij .app-shell .Button .button__Primary:focus {
  background-color: #F45F3A;
  border-color: #F45F3A;
  color: #FFFFFF;
  font-family: "Poppins-600";
}
.app610-bakkerij .app-shell .Button .button__Primary:hover {
  background-color: #D94A27;
  border-color: #D94A27;
  color: #FFFFFF;
}
.app610-bakkerij .app-shell .Button .button__Secondary {
  background-color: #FFFFFF;
  border: 1px solid #DCD6CB;
  color: #292D3E;
}
.app610-bakkerij .app-shell .Button .button__Secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}
/* Text buttons (card actions such as "Edit all", "View all notes", "Delete account" on the CRM record pages):
   an outline in the accent, so they stay quieter than the one filled primary per header (Koos 2026-10-08).
   The theme's own button__Text is filled in a blue of its own (#537CFA), which is why it is overruled here. */
.app610-bakkerij .app-shell .Button .button__Text,
.app610-bakkerij .app-shell .Button .button__Text:focus {
  background-color: #FFFFFF;
  border: 1px solid #F45F3A;
  box-shadow: none;
  color: #F45F3A;
}
.app610-bakkerij .app-shell .Button .button__Text:hover {
  background-color: #FDEDE8;
  border-color: #F45F3A;
  color: #F45F3A;
}

/* Buttons made of links in an htmlText (a record header, gen.mjs popupLink / popupMenu): the same look as
   the Button brick above. */
.app610-bakkerij .app-shell .app-btn,
.app610-bakkerij .app-shell a.app-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.app610-bakkerij .app-shell .app-btn--primary,
.app610-bakkerij .app-shell .app-btn--primary:hover {
  background-color: #F45F3A;
  color: #FFFFFF;
}
.app610-bakkerij .app-shell .app-btn--primary:hover {
  filter: brightness(0.94);
}
.app610-bakkerij .app-shell .app-btn--secondary,
.app610-bakkerij .app-shell a.app-btn--secondary:hover {
  background-color: #FFFFFF;
  border-color: #DCD6CB;
  color: #292D3E;
}
.app610-bakkerij .app-shell a.app-btn--secondary:hover {
  background-color: #F4F3F0;
  border-color: #CFC7B9;
}

/* Record header (Koos 2026-10-08): breadcrumb, name and meta line on the left, the actions on the right of
   the same row; on a narrow screen the actions wrap under the name. */
.app610-bakkerij .app-shell .row:has(> div > .app-head) {
  align-items: flex-end;
  row-gap: 12px;
  margin: 20px 0 8px;
}
/* The header brick does not clip, and lies over the bricks after it only while its + Contacts list is open, so the
   list opens on top of the tabs. Not always: a raised header would also cover popups of the bricks below it,
   such as the Kanban card editor, which lives inside the board's own stacking layer. */
.app610-bakkerij .app-shell bisbrick-multi-column:has(.app-head .app-menu:hover),
.app610-bakkerij .app-shell bisbrick-multi-column:has(.app-head .app-menu:focus-within) {
  z-index: 30;
}
.app610-bakkerij .app-shell bisbrick-multi-column:has(.app-head) .background {
  overflow: visible;
}
.app610-bakkerij .app-shell .row > div:has(> .app-head) {
  flex: 1 1 320px;
  width: auto;
  min-width: 0;
  padding: 0 !important;
}
.app610-bakkerij .app-shell .row > div:has(> .app-head-actions) {
  flex: 0 0 auto;
  width: auto;
  padding: 0 !important;
}
.app610-bakkerij .app-shell .app-head p {
  margin: 0;
  text-align: left;
}
.app610-bakkerij .app-shell .app-head .app-crumb {
  margin-bottom: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app610-bakkerij .app-shell .app-head .app-crumb a {
  color: #5F6475;
  text-decoration: none;
}
.app610-bakkerij .app-shell .app-head .app-crumb a:hover {
  color: #292D3E;
  text-decoration: underline;
}
.app610-bakkerij .app-shell .app-head .app-title {
  font-family: "Poppins-600";
  font-size: 28px;
  line-height: 34px;
  color: #292D3E;
}
.app610-bakkerij .app-shell .app-head .app-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}
/* A status as a label, coloured by its code (data-s). */
.app610-bakkerij .app-shell .app-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  background: #F1ECE4;
  color: #5F6475;
  font-family: "Poppins-500";
  font-size: 12px;
  line-height: 18px;
}
/* In a list the chips sit under one another, so the boards give them one width and centre the word
   (Contacts and Campaigns boards, artifact HtKnRMkmwY5aph5urR38LL). On a record page's header the chip
   is on its own beside the title, and keeps its natural width. */
.app610-bakkerij .app-shell td .app-badge {
  min-width: 88px;
  text-align: center;
}
.app610-bakkerij .app-shell .app-badge[data-s="live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app610-bakkerij .app-shell .app-badge[data-s="paused"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app610-bakkerij .app-shell .app-badge[data-s="done"] {
  color: #5F6475;
}
/* Live, but one or more parts switched off (Campaign App Campaigns StatusCode, Koos 2026-10-08):
   the Live green, lighter, with a ring so it reads as "not all of it". */
.app610-bakkerij .app-shell .app-badge[data-s="partial"] {
  background: #E3F2E8;
  color: #1F6B3A;
  box-shadow: inset 0 0 0 1px #1F6B3A;
}
/* "Stop campaign now" only while the campaign itself is Live (data-s = its stored status code). */
.app610-bakkerij .app-shell .app-stop {
  display: none;
}
.app610-bakkerij .app-shell .app-stop[data-s="live"] {
  display: contents;
}
.app610-bakkerij .app-shell .app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A button with a list of links under it, without code: open on hover, when the button has focus (a tap or
   a click), and while the keyboard is in it. A mouse click on a link gives no :focus-visible, so the list
   closes once the popup it opened covers it. */
.app610-bakkerij .app-shell .app-menu {
  position: relative;
  display: inline-block;
}
.app610-bakkerij .app-shell .app-menu__btn::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: 0 1px 3px 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.app610-bakkerij .app-shell .app-menu__list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
/* Bridges the 4px gap, so the list does not close on the way to it. */
.app610-bakkerij .app-shell .app-menu__list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 6px;
}
.app610-bakkerij .app-shell .app-menu:hover .app-menu__list,
.app610-bakkerij .app-shell .app-menu__btn:focus + .app-menu__list,
.app610-bakkerij .app-shell .app-menu:has(:focus-visible) .app-menu__list {
  display: block;
}
.app610-bakkerij .app-shell .app-menu__list a,
.app610-bakkerij .app-shell .app-menu__list a:hover {
  display: block;
  padding: 7px 10px;
  border-radius: 5px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #292D3E;
  text-decoration: none;
  white-space: nowrap;
}
.app610-bakkerij .app-shell .app-menu__list a:hover,
.app610-bakkerij .app-shell .app-menu__list a:focus-visible {
  background: #F4F3F0;
}
/* ⋯: a menu without a caret (CRM record headers, crm-record-pages.mjs). */
.app610-bakkerij .app-shell .app-menu__btn--more::after {
  content: none;
}
.app610-bakkerij .app-shell .app-menu__btn--more {
  min-width: 32px;
  justify-content: center;
  letter-spacing: 1px;
}

/* CRM record pages (Account, Contact; CRM-App-spec/local/crm-record-pages.mjs, Koos 2026-10-08).
   The badge carries the stored value as its code: account type and status, contact status. */
.app610-bakkerij .app-shell .app-badge[data-s="Active"],
.app610-bakkerij .app-shell .app-badge[data-s="Customer"],
.app610-bakkerij .app-shell .app-badge[data-s="Won"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app610-bakkerij .app-shell .app-badge[data-s="Prospect"],
.app610-bakkerij .app-shell .app-badge[data-s="On hold"],
.app610-bakkerij .app-shell .app-badge[data-s="On Hold"],
.app610-bakkerij .app-shell .app-badge[data-s="Suspended"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app610-bakkerij .app-shell .app-badge[data-s="Partner"],
.app610-bakkerij .app-shell .app-badge[data-s="Reseller"] {
  background: #FCE8DF;
  color: #9A3B17;
}
.app610-bakkerij .app-shell .app-badge[data-s="Inactive"],
.app610-bakkerij .app-shell .app-badge[data-s="Archived"],
.app610-bakkerij .app-shell .app-badge[data-s="Closed"],
.app610-bakkerij .app-shell .app-badge[data-s="Left Company"],
.app610-bakkerij .app-shell .app-badge[data-s="Do Not Contact"],
.app610-bakkerij .app-shell .app-badge[data-s="Competitor"],
.app610-bakkerij .app-shell .app-badge[data-s="Lost"] {
  color: #5F6475;
}
/* The CRM home board's urgency chips (CRM-App-spec/local/gen-crm-home-dataactions.mjs).
   These codes are a state the DataAction works out per row, not a stored value, so they are
   lowercase and cannot collide with the status names above. */
.app610-bakkerij .app-shell .app-badge[data-s="late"] {
  background: #FBE9E7;
  color: #B3261E;
}
.app610-bakkerij .app-shell .app-badge[data-s="soon"] {
  background: #FFF4E0;
  color: #9A5B00;
}
.app610-bakkerij .app-shell .app-badge[data-s="later"] {
  color: #5F6475;
}
.app610-bakkerij .app-shell .app-badge[data-s=""] {
  display: none;
}
/* "Child of …" only when there is a parent. */
.app610-bakkerij .app-shell .app-head .app-meta .app-meta__parent[data-v=""] {
  display: none;
}
/* The row-detail panel (Table.rowDetail, Web !2839). The boards put it on a quiet sand ground, indented so
   it starts under the first cell instead of under the chevron, with a hairline between it and the row.
   The component's own --neutral / --blue options are greys from the website palette, so the brick stays on
   "none" and the theme gives the panel its colour.
   !important is load-bearing: the component's own "td.bb-row-detail { padding: 16px }" carries Angular's
   encapsulation attribute and so ties on specificity — order would decide it, and the theme stylesheet is
   not guaranteed to load last. */
.app610-bakkerij .app-shell td.bb-row-detail {
  background: #F8F7F4 !important;
  padding: 16px 18px 16px 48px !important;
  border-top: 1px solid #F1ECE4 !important;
}
/* The chevron: the component asks the theme for --secondary-color-700 and --primary-color-1000, which on
   theme 13 are the website's grey and blue. Overruled here so the handle stays in the app's own palette. */
.app610-bakkerij .app-shell .bb-row-detail__toggle {
  color: #8A8F9E;
}
.app610-bakkerij .app-shell .bb-row-detail__toggle:hover {
  background: #FDEDE8;
  color: #F45F3A;
}
.app610-bakkerij .app-shell .bb-row-detail__toggle:focus-visible {
  outline: 2px solid #F45F3A;
}
/* A bar of actions at the foot of the panel, above it the lighter of the two rules (boards). */
.app610-bakkerij .app-shell .app-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ECE8E0;
}

/* Overview: the main column and the aside are stacks of cards (a MultiColumn host is inline by default). */
.app610-bakkerij .app-shell .app-card {
  display: block;
  margin-bottom: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  background: #FFFFFF;
  padding: 16px 18px 18px !important;
}
/* A 16px gutter between the main column and the aside, as between the cards; stacked below md there is none. */
@media (min-width: 768px) {
  .app610-bakkerij .app-shell .app-overview .row > [class*="col-"] > .app-stack {
    display: block;
    padding-right: 8px;
  }
  .app610-bakkerij .app-shell .app-overview .row > [class*="col-"] + [class*="col-"] > .app-stack {
    padding-right: 0;
    padding-left: 8px;
  }
}
/* An equal-height pair (the layout frame: two columns only as equal-height pairs). The lead column's
   capped list sets the height and the side column's card runs down to meet it, instead of leaving a
   step of empty ground. Every wrapper between the column and the card has to carry the height, hence
   the chain: MultiColumn renders host > .row > [col] around each level. Opt-in, because a stack that
   holds several cards must keep its natural height. */
@media (min-width: 768px) {
  .app610-bakkerij .app-shell .app-overview--duo > .row > [class*="col-"] > .app-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .app610-bakkerij .app-shell .app-overview--duo .app-stack > .row,
  .app610-bakkerij .app-shell .app-overview--duo .app-stack > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .app610-bakkerij .app-shell .app-overview--duo .app-stack .app-card {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
}
.app610-bakkerij .app-shell .app-card p {
  margin: 0;
}
.app610-bakkerij .app-shell .app-card .app-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-family: "Poppins-600";
  font-size: 16px;
  line-height: 22px;
  color: #292D3E;
}
.app610-bakkerij .app-shell .app-card .app-card__title a,
.app610-bakkerij .app-shell .app-card .app-card__more a {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #F45F3A;
  text-decoration: none;
}
.app610-bakkerij .app-shell .app-card .app-card__title a:hover,
.app610-bakkerij .app-shell .app-card .app-card__more a:hover {
  text-decoration: underline;
}
.app610-bakkerij .app-shell .app-card .app-card__more {
  margin-top: 10px;
}
.app610-bakkerij .app-shell .app-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.app610-bakkerij .app-shell .app-card__empty {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app610-bakkerij .app-shell .app-person {
  margin: 0;
  font-family: "Poppins-600";
  font-size: 14px;
  line-height: 20px;
}
.app610-bakkerij .app-shell .app-person a {
  color: #292D3E;
  text-decoration: none;
}
.app610-bakkerij .app-shell .app-person a:hover {
  color: #F45F3A;
}
.app610-bakkerij .app-shell .app-person__line {
  margin: 0;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app610-bakkerij .app-shell .app-person__line:empty {
  display: none;
}

/* The app menu's words start on the same line as the titles, tabs and table text. */
.app610-bakkerij .app-shell > main > bisbrick-list > div:first-child .navigation-bar {
  padding-left: var(--app-gutter);
  padding-right: var(--app-gutter);
}
.app610-bakkerij .app-shell > main > bisbrick-list > div:first-child .nb-zone-left {
  justify-content: flex-start;
}
/* The menu item the page belongs to (class app-nav-<n> on the master, gen.mjs navClass) in the primary
   colour, like a selected tab; the navigationBar's own highlight (an exact link match) gets the same colour
   instead of its default cyan. */
.app610-bakkerij .app-shell.app-nav-1 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.app610-bakkerij .app-shell.app-nav-2 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.app610-bakkerij .app-shell.app-nav-3 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.app610-bakkerij .app-shell.app-nav-4 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.app610-bakkerij .app-shell.app-nav-5 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.app610-bakkerij .app-shell.app-nav-6 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.app610-bakkerij .app-shell.app-nav-7 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.app610-bakkerij .app-shell.app-nav-8 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(8) > .nb-link,
.app610-bakkerij .app-shell.app-nav-9 > main > bisbrick-list > div:first-child .nb-zone-left > .nb-item:nth-of-type(9) > .nb-link,
.app610-bakkerij .app-shell > main > bisbrick-list > div:first-child .nb-link.nb-active {
  color: #F45F3A;
}

/* Tabs: an underline row. */
.app610-bakkerij .app-shell .grid-tabs {
  gap: 4px;
  margin: 12px 0 20px;
  padding: 0;
  border-bottom: 1px solid #E4E0D8;
  flex-wrap: wrap;
}
.app610-bakkerij .app-shell .grid-tabs .grid-tab,
.app610-bakkerij .app-shell .grid-tabs .grid-tab:hover {
  max-width: none;
  margin-bottom: -1px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  color: #5F6475;
  font-size: 14px !important;
}
.app610-bakkerij .app-shell .grid-tabs .grid-tab:hover {
  color: #292D3E;
  border-bottom-color: #CFC7B9;
}
.app610-bakkerij .app-shell .grid-tabs .selected-grid-tab,
.app610-bakkerij .app-shell .grid-tabs .selected-grid-tab:hover {
  color: #F45F3A;
  border-bottom-color: #F45F3A;
}

/* Tabs inside a tab: a segmented control, so the two levels read apart. */
.app610-bakkerij .app-shell .tab-content .grid-tabs {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 16px;
  padding: 3px;
  background: #F4F3F0;
  border: 0;
  border-radius: 5px;
}
.app610-bakkerij .app-shell .tab-content .grid-tabs .grid-tab,
.app610-bakkerij .app-shell .tab-content .grid-tabs .grid-tab:hover {
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 5px !important;
  font-size: 13px !important;
}
.app610-bakkerij .app-shell .tab-content .grid-tabs .grid-tab:hover {
  background: rgba(255, 255, 255, 0.6);
}
.app610-bakkerij .app-shell .tab-content .grid-tabs .selected-grid-tab,
.app610-bakkerij .app-shell .tab-content .grid-tabs .selected-grid-tab:hover {
  background: #FFFFFF;
  color: #292D3E;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Stat strip (Koos 2026-10-08): figures, not buttons. No border or fill; a small muted label over
   a large value, hairlines between the figures. One htmlText brick per figure with class app-stat:
   <p>label</p><p data-v="{{x}}">value</p>[<p>note</p>]. The selectors go by the brick's place, not by
   a parent class, so a figure also works in a row that holds other bricks (the CRM dashboard). */
.app610-bakkerij .app-shell .row:has(> div > .app-stat) {
  margin: 4px 0 20px;
  row-gap: 12px;
}
.app610-bakkerij .app-shell .row > div:has(> .app-stat) {
  padding: 0 24px !important;
  /* col-md-auto only applies from 768px; below that Bootstrap makes every column 100% and the strip
     turned into a stack. A figure keeps its own width, the strip wraps instead. */
  flex: 0 0 auto;
  width: auto;
}
/* The first figure of a run lines up with what is above it (a heading or filter may come before it). */
.app610-bakkerij .app-shell .row > div:has(> .app-stat):not(div:has(> .app-stat) + div) {
  padding-left: 0 !important;
}
.app610-bakkerij .app-shell .row > div:has(> .app-stat) + div:has(> .app-stat) {
  border-left: 1px solid #E4E0D8;
}
.app610-bakkerij .app-shell .app-stat {
  display: block;
}
.app610-bakkerij .app-shell .app-stat p {
  margin: 0;
  text-align: left;
}
.app610-bakkerij .app-shell .app-stat p:nth-of-type(1) {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app610-bakkerij .app-shell .app-stat p:nth-of-type(2) {
  margin-top: 2px;
  font-family: "Poppins-600";
  font-size: 24px;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.app610-bakkerij .app-shell .app-stat p:nth-of-type(3) {
  margin-top: 2px;
  font-family: "Poppins-400";
  font-size: 12px;
  line-height: 16px;
  color: #5F6475;
}
.app610-bakkerij .app-shell .app-stat p:nth-of-type(3) img {
  height: 12px;
  width: auto;
  vertical-align: -1px;
}
/* A 0 or an empty value reads as "nothing yet", not as a figure. Keeps the :nth-of-type so it outweighs the value colour. */
.app610-bakkerij .app-shell .app-stat p[data-v="0"]:nth-of-type(2),
.app610-bakkerij .app-shell .app-stat p[data-v=""]:nth-of-type(2) {
  color: #8A8F9E;
}
/* Text values (e-mail, phone, stage, channel) are not figures: smaller, and allowed to wrap. */
.app610-bakkerij .app-shell .app-stat.app-stat--text p:nth-of-type(2) {
  font-size: 15px;
  line-height: 22px;
  margin-top: 4px;
  white-space: normal;
  word-break: break-word;
}
/* The EmailStats brick (Web component, the Campaign dashboard's Mail tab) brings its own bordered tiles;
   inside the apps they get the same strip. A value that says "nothing yet" (0, 0% or –) carries
   bb-email-stats__value--none (Bisbrick-Web, 2026-10-08) and is muted like a 0 in the strip. */
.app610-bakkerij .app-shell .bb-email-stats__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: 4px 0 8px;
}
.app610-bakkerij .app-shell .bb-email-stats__tile {
  flex: 0 0 auto;
  gap: 2px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
}
.app610-bakkerij .app-shell .bb-email-stats__tile:first-child {
  padding-left: 0;
}
.app610-bakkerij .app-shell .bb-email-stats__tile + .bb-email-stats__tile {
  border-left: 1px solid #E4E0D8;
}
.app610-bakkerij .app-shell .bb-email-stats__tile .bb-email-stats__label {
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}
.app610-bakkerij .app-shell .bb-email-stats__tile .bb-email-stats__value {
  font-family: "Poppins-600";
  font-size: 24px;
  font-weight: normal;
  line-height: 30px;
  color: #292D3E;
  white-space: nowrap;
}
.app610-bakkerij .app-shell .bb-email-stats__tile .bb-email-stats__value--none {
  color: #8A8F9E;
}
.app610-bakkerij .app-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #E4E0D8;
  border-radius: 5px;
  overflow: hidden;
  font-family: inherit;
  font-size: 14px;
  color: #292D3E;
}

.app610-bakkerij .app-table thead,
.app610-bakkerij .app-table .sd-table__cell--header,
.app610-bakkerij .app-table th,
.app610-bakkerij .app-table thead th {
  background: #FFFFFF;
  color: #8A8F9E;
  font-size: 11px;
  font-family: var(--font-default-bold, Default-Bold), var(--font-default-regular, Default-Regular), sans-serif;
  font-weight: 600;
  font-synthesis: style small-caps;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #E4E0D8;
  text-align: left;
}

.app610-bakkerij .app-table .sd-table__cell,
.app610-bakkerij .app-table td,
.app610-bakkerij .app-table th {
  padding: 10px 14px;
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  border: none;
}

.app610-bakkerij .app-table tbody tr:hover,
.app610-bakkerij .app-table .sd-table__row:hover {
  background: #FBF9F6;
}

.app610-bakkerij .app-table thead tr:first-child > th:first-child,
.app610-bakkerij .app-table thead tr:first-child > .sd-table__cell:first-child {
  border-top-left-radius: 5px;
}
.app610-bakkerij .app-table thead tr:first-child > th:last-child,
.app610-bakkerij .app-table thead tr:first-child > .sd-table__cell:last-child {
  border-top-right-radius: 5px;
}
.app610-bakkerij .app-table tbody tr:last-child > td:first-child,
.app610-bakkerij .app-table tbody tr:last-child > .sd-table__cell:first-child {
  border-bottom-left-radius: 5px;
}
.app610-bakkerij .app-table tbody tr:last-child > td:last-child,
.app610-bakkerij .app-table tbody tr:last-child > .sd-table__cell:last-child {
  border-bottom-right-radius: 5px;
}

.app610-bakkerij .app-table tbody tr.sd-table__row--selected,
.app610-bakkerij .app-table .sd-table__row--selected {
  background: #FFF6F2;
  color: #292D3E;
}



@media (max-width: 757.98px) {
  .app610-bakkerij .app-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* custom overrides */
.app610-bakkerij .app-table tbody tr + tr > td {
  border-top: 1px solid #F1ECE4;
}
.app610-bakkerij .app-table thead th {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  letter-spacing: .08em;
  font-family: "Poppins-600";
  border-bottom: 1px solid #F1ECE4;
}
/* A row is a line of its own height, not a line of text: the boards put 52px under every row and a
   hairline between them (Contacts board, artifact HtKnRMkmwY5aph5urR38LL). */
.app610-bakkerij .app-table tbody td {
  height: 52px;
  font-family: "Poppins-400";
}
.app610-bakkerij .app-table caption {
  padding: 0;
}
/* A linked cell is not a link in the running-text sense: on the boards a row reads as one line of ink and
   the accent is spent once per screen, on the primary button. So a cell link carries its weight instead of
   a colour, and only turns accent under the cursor. */
.app610-bakkerij .app-table .table-link {
  color: #292D3E;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: "Poppins-500";
  text-decoration: none;
}
.app610-bakkerij .app-table .table-link:hover {
  color: #F45F3A;
  text-decoration: underline;
}
.app610-bakkerij .app-table .table-cell-btn--ghost {
  color: #5F6475;
}
.app610-bakkerij .app-table .table-cell-btn--ghost:hover {
  color: #292D3E;
  background: #F1ECE4;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.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;
}
.abm.abm-role{
  
  --b-ink:#292D3E;--b-orange:#F45F3A;--b-yellow:#FFC505;--b-blue:#3A8DFF;--b-purple:#884DFF;--b-teal:#398FA5;
  --b-green:#8ECCC5;--b-red:#F97C7C;--b-lilac:#CCB3FF;--b-creme:#F7F4EF;--b-beige:#EBE8E4;
  
  --dto-accent:#884DFF;--dto-soft:#F1EAFF;--dto-text:#5B2ED6;--dto-acc2:#FFC505;
  --cfo-accent:#398FA5;--cfo-soft:#E4F3F1;--cfo-text:#246B7C;--cfo-acc2:#3A8DFF;
  --mkt-accent:#F45F3A;--mkt-soft:#FDECE6;--mkt-text:#C23E1B;--mkt-acc2:#FFC505;
  --own-accent:#292D3E;--own-soft:#ECEAF2;--own-text:#292D3E;--own-acc2:#F45F3A;
  --ops-accent:#2F7BEA;--ops-soft:#E6F0FF;--ops-text:#1C5FCC;--ops-acc2:#FFC505;
  --hr-accent:#D94B63;--hr-soft:#FDE8EC;--hr-text:#A8324A;--hr-acc2:#8ECCC5;
  --it-accent:#2E8B7E;--it-soft:#E2F3F0;--it-text:#1F6B61;--it-acc2:#CCB3FF;
  --cl-accent:#0F6E74;--cl-soft:#DDEFEF;--cl-text:#0B5459;
  --accent:var(--dto-accent);--accent-soft:var(--dto-soft);--accent-text:var(--dto-text);--acc2:var(--dto-acc2);
  --ink:#292D3E;--muted:#5F6475;--faint:#8B90A0;
  --paper:#FFFFFF;--creme:#F7F4EF;--line:#E6E1D9;--card:#FFFFFF;
  --dark:#292D3E;--dark-ink:#FFFFFF;
  --chrome:#1E2130;--chrome-ink:#F4F2F7;--chrome-muted:#A3A8B8;
  --note-bg:#EEF3FB;--note-ink:#2B4A7A;--note-line:#CFDCF0;
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.abm.abm-role.role-dto{--accent:var(--dto-accent);--accent-soft:var(--dto-soft);--accent-text:var(--dto-text);--acc2:var(--dto-acc2)}
.abm.abm-role.role-cfo{--accent:var(--cfo-accent);--accent-soft:var(--cfo-soft);--accent-text:var(--cfo-text);--acc2:var(--cfo-acc2)}
.abm.abm-role.role-mkt{--accent:var(--mkt-accent);--accent-soft:var(--mkt-soft);--accent-text:var(--mkt-text);--acc2:var(--mkt-acc2)}
.abm.abm-role.role-own{--accent:var(--own-accent);--accent-soft:var(--own-soft);--accent-text:var(--own-text);--acc2:var(--own-acc2)}
.abm.abm-role.role-ops{--accent:var(--ops-accent);--accent-soft:var(--ops-soft);--accent-text:var(--ops-text);--acc2:var(--ops-acc2)}
.abm.abm-role.role-hr{--accent:var(--hr-accent);--accent-soft:var(--hr-soft);--accent-text:var(--hr-text);--acc2:var(--hr-acc2)}
.abm.abm-role.role-it{--accent:var(--it-accent);--accent-soft:var(--it-soft);--accent-text:var(--it-text);--acc2:var(--it-acc2)}
.abm.abm-role.client{--accent:var(--cl-accent);--accent-soft:var(--cl-soft);--accent-text:var(--cl-text)}
.abm.abm-role, .abm.abm-role *{box-sizing:border-box}
.abm.abm-role{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
.abm.abm-role h1,.abm.abm-role h2,.abm.abm-role h3,.abm.abm-role h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.abm.abm-role p{margin:0}
.abm.abm-role button,.abm.abm-role input{font:inherit;color:inherit}
.abm.abm-role :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-role .wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.abm.abm-role .chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome);color:var(--chrome-ink);padding:10px 16px}
.abm.abm-role .chrome-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.abm.abm-role .chrome-label{font-size:12px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.abm.abm-role .chrome-label b{color:var(--chrome-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.abm.abm-role .seg{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.abm.abm-role .seg button{background:none;border:0;color:var(--chrome-muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.abm.abm-role .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-role .toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--chrome-muted);cursor:pointer}
.abm.abm-role .toggle input{accent-color:var(--accent)}
.abm.abm-role section{padding-block:80px}
.abm.abm-role section.alt{background:var(--creme)}
.abm.abm-role .eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.abm.abm-role .h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.15;max-width:26ch}
.abm.abm-role .lead{color:var(--muted);font-size:18px;max-width:60ch}
.abm.abm-role .sec-head{display:grid;gap:12px;margin-bottom:36px}
.abm.abm-role .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;font-size:15px}
.abm.abm-role .btn-primary{background:var(--accent);color:#fff}
.abm.abm-role .btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .btn:disabled{opacity:.45;cursor:default}
.abm.abm-role .link-btn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.abm.abm-role .echo{font-size:14px;color:var(--accent-text);background:var(--accent-soft);padding:10px 14px;border-radius:10px}
.abm.abm-role .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.abm.abm-role .pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.abm.abm-role .p-built{background:var(--accent);color:#fff}
.abm.abm-role .p-store{background:color-mix(in srgb,var(--acc2) 30%,transparent);color:var(--ink)}
.abm.abm-role .p-archie{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.abm.abm-role .p-plain{color:var(--muted);font-weight:500;white-space:normal;padding:0;font-size:14.5px}
.abm.abm-role .p-weak{color:var(--faint);font-weight:500;white-space:normal;padding:0;font-size:14.5px}
.abm.abm-role .note{display:none;margin-top:22px;background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;max-width:82ch}
.abm.abm-role .note b{font-weight:600}
.abm.abm-role.show-notes .note{display:block}
.abm.abm-role .hero{background:var(--creme);padding-block:0;position:relative;overflow:hidden}
.abm.abm-role .hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-block:72px 80px;align-items:center;position:relative}
.abm.abm-role .campaign{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:18px}
.abm.abm-role .campaign span:nth-child(3){color:var(--accent-text)}
.abm.abm-role .cobrand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:26px;color:var(--ink)}
.abm.abm-role .cobrand .x{color:var(--faint);font-weight:500}
.abm.abm-role .motif{display:flex;gap:6px;margin-bottom:22px}
.abm.abm-role .motif span{width:26px;height:12px;border-radius:4px;position:relative}
.abm.abm-role .motif span::before{content:"";position:absolute;top:-4px;left:6px;width:6px;height:4px;border-radius:2px 2px 0 0;background:inherit}
.abm.abm-role .hero h1{font-size:clamp(32px,4.8vw,50px);font-weight:700;line-height:1.07;margin-top:12px}
.abm.abm-role .hero .lead{margin-top:18px}
.abm.abm-role .face{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.abm.abm-role .face::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.abm.abm-role .idea-box{background:var(--card);border-radius:18px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -34px rgba(41,45,62,.45)}
.abm.abm-role .idea-box label{font-family:var(--display);font-weight:600;font-size:22px}
.abm.abm-role .idea-box .sub{font-size:14px;color:var(--muted);margin-top:-8px}
.abm.abm-role .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:15px}
.abm.abm-role .field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-role .hero-visual{position:relative;display:grid}
.abm.abm-role .kv{width:min(430px,100%);height:auto;justify-self:end;margin-right:-24px;display:block}
.abm.abm-role .kv.tall{width:min(340px,80%)}
.abm.abm-role .hero-visual .idea-box{width:min(410px,100%);margin-top:-170px;position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .kv{animation:kvin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes kvin{from{transform:translateY(18px) rotate(-3deg);opacity:.6}to{transform:none;opacity:1}}
}
.abm.abm-role .plan-dlg{border:0;border-radius:20px;padding:30px 30px 26px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:auto;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.abm.abm-role .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.abm.abm-role .plan-dlg #dlg-trial{background:#FFC505;color:#292D3E;border-radius:5px}
.abm.abm-role .plan-dlg h3{font-size:24px;font-weight:600;margin-top:6px}
.abm.abm-role .dlg-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;color:var(--faint);cursor:pointer;width:36px;height:36px;border-radius:10px}
.abm.abm-role .dlg-x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-role .plan-quote{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-weight:500}
.abm.abm-role .plan-steps{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}
.abm.abm-role .plan-steps li::marker{color:var(--accent-text);font-weight:600}
.abm.abm-role .plan-bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.abm.abm-role .plan-bricks span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--creme);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .plan-start{margin-top:14px;font-size:14px;color:var(--muted)}
.abm.abm-role .plan-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.abm.abm-role .plan-cta h4{font-size:18px;font-weight:600}
.abm.abm-role .plan-mail{font-size:13px;color:var(--faint)}
.abm.abm-role .idea-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.abm.abm-role .signals{display:flex;flex-wrap:wrap;gap:10px}
.abm.abm-role .chip{display:inline-flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:8px 8px 8px 14px;font-size:14px;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .chip .txt{display:grid;gap:1px}
.abm.abm-role .chip small{font-size:11.5px;color:var(--faint)}
.abm.abm-role .chip.guess{background:none;box-shadow:inset 0 0 0 1px var(--faint)}
.abm.abm-role .chip.guess{border:0;background-image:linear-gradient(var(--creme),var(--creme))}
.abm.abm-role .chip.guess small{color:var(--accent-text)}
.abm.abm-role .chip.mine{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .chip.mine small{color:var(--accent-text)}
.abm.abm-role .chip.off{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint)}
.abm.abm-role .chip.off .txt span{text-decoration:line-through}
.abm.abm-role .chip .x{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center}
.abm.abm-role .chip .x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-role .add{display:inline-flex;align-items:center;gap:6px;border:2px dashed var(--accent);color:var(--accent-text);background:none;border-radius:12px;padding:6px 14px;font-size:14px;font-weight:600;cursor:pointer}
.abm.abm-role .add-form{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--accent);border-radius:12px;padding:6px 6px 6px 14px;background:var(--card)}
.abm.abm-role .add-form:focus-within{box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-role .add-form input{border:0;outline:0;padding:0;font-size:14px;background:none;width:min(240px,55vw)}
.abm.abm-role .add-form button{border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;padding:7px 11px;cursor:pointer}
.abm.abm-role .sig-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:22px}
.abm.abm-role .legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.abm.abm-role .legend i{display:inline-block;width:20px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:6px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .legend i.g{box-shadow:inset 0 0 0 1px var(--faint);background:none}
.abm.abm-role .legend i.m{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.abm.abm-role .idea{background:var(--card);border-radius:18px;overflow:hidden;display:grid;align-content:start;box-shadow:0 1px 0 var(--line);transition:transform .2s ease,box-shadow .2s ease}
.abm.abm-role .idea:hover{transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(41,45,62,.4)}
.abm.abm-role .idea .art{height:132px;display:grid;place-items:center;padding:14px;background:var(--accent-soft)}
.abm.abm-role .idea:nth-child(2) .art{background:color-mix(in srgb,var(--acc2) 22%,var(--card))}
.abm.abm-role .idea:nth-child(3) .art{background:color-mix(in srgb,var(--b-blue) 14%,var(--card))}
.abm.abm-role .idea .art svg{width:100%;max-width:220px;height:100%}
.abm.abm-role .idea .body{padding:20px 22px 24px;display:grid;gap:10px}
.abm.abm-role .idea .pill{justify-self:start}
.abm.abm-role .idea h3{font-size:19px;font-weight:600}
.abm.abm-role .idea p{color:var(--muted);font-size:15px}
.abm.abm-role .s-bg{fill:var(--card)}
.abm.abm-role .s-ln{stroke:var(--faint);fill:none;stroke-width:1.5}
.abm.abm-role .s-fl{fill:var(--faint);opacity:.3}
.abm.abm-role .s-ac{fill:var(--accent)}
.abm.abm-role .s-acl{stroke:var(--accent);fill:none;stroke-width:2}
.abm.abm-role .s-sf{fill:var(--accent-soft)}
.abm.abm-role .s-y{fill:var(--acc2)}
.abm.abm-role .band{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start}
.abm.abm-role .panel{background:var(--card);border-radius:18px;padding:20px;box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -32px rgba(41,45,62,.35)}
.abm.abm-role .panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:14px}
.abm.abm-role .panel-head h3{font-size:17px;font-weight:600}
.abm.abm-role .panel-head .row{font-size:13px;gap:12px}
.abm.abm-role .tools{display:grid;gap:6px}
.abm.abm-role .tool{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:10px;background:var(--creme)}
.abm.abm-role .tool .name{flex:1;min-width:0}
.abm.abm-role .tool .name{font-weight:500;font-size:14px}
.abm.abm-role .tool .name small{display:block;font-size:12px;color:var(--faint);font-weight:400}
.abm.abm-role .tool.mine{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.abm.abm-role .tool.fixed .name{color:var(--muted)}
.abm.abm-role .switch{display:inline-flex;background:var(--card);border-radius:9px;padding:3px;box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.abm.abm-role .switch button{border:0;background:none;padding:4px 9px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.abm.abm-role .switch button[aria-pressed="true"].k{background:var(--ink);color:var(--paper)}
.abm.abm-role .switch button[aria-pressed="true"].o{background:var(--accent);color:#fff}
.abm.abm-role .tool .name .pr{display:block;font-size:11.5px;font-weight:400;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm.abm-role .tool .ask{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:var(--accent-text);margin-top:2px}
.abm.abm-role .tool .ask input{width:64px;border:0;border-radius:6px;padding:2px 6px;font-size:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--accent);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.abm.abm-role .tool .ask input::-webkit-outer-spin-button,.abm.abm-role .tool .ask input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-role .tool .pr .qty{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:var(--accent-text);font-weight:500}
.abm.abm-role .tool .pr .qty input{width:54px;border:0;border-radius:6px;padding:1px 5px;font-size:11.5px;background:var(--card);box-shadow:inset 0 0 0 1px var(--accent);font-variant-numeric:tabular-nums}
.abm.abm-role .tool .name .pr{white-space:normal}
.abm.abm-role .tool .rm{border:0;background:none;color:var(--faint);width:26px;height:26px;border-radius:7px;cursor:pointer;font-size:16px;flex-shrink:0}
.abm.abm-role .tool .rm:hover{background:var(--card);color:var(--ink)}
.abm.abm-role .tools-extra{margin-top:14px;display:grid;gap:8px;font-size:13px;color:var(--muted)}
.abm.abm-role .chips{display:flex;flex-wrap:wrap;gap:6px}
.abm.abm-role .chips button{border:0;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .chips button:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .chips.gone button{color:var(--faint);text-decoration:line-through;font-weight:500}
.abm.abm-role .tool-add{display:flex;gap:6px}
.abm.abm-role .tool-add input{flex:1;min-width:0;border:0;border-radius:8px;padding:6px 10px;font-size:13px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .tool-add input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .tool-add button{border:0;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;background:var(--accent);color:#fff;cursor:pointer}
.abm.abm-role .tag-fixed{font-size:12.5px;color:var(--muted);background:var(--card);padding:5px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);flex-shrink:0}
.abm.abm-role .bricks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;padding-top:8px}
.abm.abm-role .brick{position:relative;border:0;border-radius:10px;padding:18px 10px 14px;font-family:var(--display);font-weight:600;font-size:14.5px;text-align:center;background:var(--accent-soft);color:var(--accent-text);min-height:64px;display:grid;place-content:center;gap:2px}
.abm.abm-role .brick::before,.abm.abm-role .brick::after{content:"";position:absolute;top:-6px;width:14px;height:7px;border-radius:4px 4px 0 0;background:inherit}
.abm.abm-role .brick::before{left:24%}
.abm.abm-role .brick::after{right:24%}
.abm.abm-role .brick small{font-family:var(--body);font-weight:500;font-size:11.5px;opacity:.8}
.abm.abm-role .brick.hl{background:var(--accent);color:#fff}
.abm.abm-role .brick.linked{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .brick.linked::before,.abm.abm-role .brick.linked::after{background:var(--accent);opacity:.4}
.abm.abm-role .brick.ai{background:var(--ink);color:var(--paper)}
.abm.abm-role .brick.ai .spark{color:var(--acc2)}
.abm.abm-role .brick.link{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.abm.abm-role .brick.link::before,.abm.abm-role .brick.link::after{background:var(--line)}
.abm.abm-role .brick.next{background:none;box-shadow:inset 0 0 0 2px var(--acc2);color:var(--ink);cursor:pointer}
.abm.abm-role .brick.next::before,.abm.abm-role .brick.next::after{display:none}
.abm.abm-role .brick.next:hover{background:color-mix(in srgb,var(--acc2) 18%,transparent)}
.abm.abm-role .band .meter{margin-top:32px;position:relative;z-index:1}
.abm.abm-role .band .meter .strip{grid-template-columns:1fr;gap:8px}
.abm.abm-role .band .meter .stat b{font-size:22px}
.abm.abm-role .meter{margin-top:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-radius:18px;padding:20px 22px;display:grid;gap:10px}
.abm.abm-role .meter-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;font-size:14px;color:var(--muted)}
.abm.abm-role .meter-top b{font-family:var(--display);font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums}
.abm.abm-role .meter-bar{height:12px;border-radius:999px;background:var(--creme);overflow:hidden}
.abm.abm-role .meter-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--acc2));border-radius:999px;transition:width .5s cubic-bezier(.2,.9,.3,1)}
.abm.abm-role .meter small{font-size:12.5px;color:var(--faint)}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .play .brick{animation:snap .7s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i) * 80ms)}

  @keyframes snap{from{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:.5}70%{transform:translate(0,2px)}to{transform:none;opacity:1}}
}
.abm.abm-role .cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:10px}
.abm.abm-role .cmp-bar > span{font-weight:600}
.abm.abm-role .segctl{display:inline-flex;flex-wrap:wrap;background:var(--card);border-radius:12px;padding:4px;box-shadow:inset 0 0 0 1px var(--line);gap:4px}
.abm.abm-role .segctl button{border:0;background:none;padding:9px 14px;border-radius:9px;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer}
.abm.abm-role .segctl button[aria-selected="true"]{background:var(--accent);color:#fff}
.abm.abm-role .cmp-desc{font-size:14px;color:var(--faint);margin-bottom:28px}
.abm.abm-role .h3{font-size:22px;font-weight:600}
.abm.abm-role .tbl-wrap{overflow-x:auto;border-radius:16px;background:var(--card)}
.abm.abm-role table{border-collapse:collapse;width:100%;min-width:680px;font-size:15px}
.abm.abm-role th,.abm.abm-role td{text-align:left;padding:14px 18px;vertical-align:top;border-bottom:1px solid var(--line)}
.abm.abm-role thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-role thead th.us{color:var(--accent-text)}
.abm.abm-role tbody th{font-weight:500}
.abm.abm-role td.us{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.abm.abm-role tbody tr:last-child td,.abm.abm-role tbody tr:last-child th{border-bottom:0}
.abm.abm-role tr.sum th,.abm.abm-role tr.sum td{font-weight:600;background:var(--card)}
.abm.abm-role tr.sum:first-of-type th,.abm.abm-role tr.sum:first-of-type td{border-top:2px solid var(--ink)}
.abm.abm-role tr.sum td.us{background:var(--accent-soft)}
.abm.abm-role .num{font-variant-numeric:tabular-nums}
.abm.abm-role .more-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-soft);color:var(--accent-text);font:600 14.5px/1.2 var(--body,inherit);cursor:pointer;transition:background .15s}
.abm.abm-role .more-btn:hover{background:color-mix(in srgb,var(--accent-soft) 70%,var(--accent) 30%)}
.abm.abm-role .more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-role .more-btn .chev{font-size:12px}
.abm.abm-role .cmp-open-hint{font-size:14.5px;color:var(--muted);margin-top:4px}
.abm.abm-role th.amt,.abm.abm-role td.amt{min-width:9.5rem;white-space:nowrap}
.abm.abm-role td.calc{color:var(--muted);font-size:13.5px}
.abm.abm-role .tbl-note{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;font-size:13px;color:var(--muted)}
.abm.abm-role .badge{font-size:12px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);border-radius:6px;padding:3px 8px}
.abm.abm-role details.sources{margin-top:14px;border-radius:14px;background:var(--card);padding:14px 18px;font-size:13.5px;color:var(--muted)}
.abm.abm-role details.sources summary{cursor:pointer;font-weight:600;color:var(--ink)}
.abm.abm-role details.sources ul{margin:10px 0 0;padding-left:18px;display:grid;gap:5px}
.abm.abm-role details.sources a{color:var(--accent-text)}
.abm.abm-role .t2-head{display:grid;gap:8px;margin:48px 0 18px}
.abm.abm-role .calc{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:18px}
.abm.abm-role .calc-group{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:12px;align-content:start}
.abm.abm-role .calc-group.us{background:var(--accent-soft)}
.abm.abm-role .calc-group h4{font-size:16px;font-weight:600}
.abm.abm-role .calc-group .hint{font-size:13px;color:var(--muted)}
.abm.abm-role .calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.abm.abm-role .calc-group.us .calc-fields{grid-template-columns:1fr}
.abm.abm-role .fieldset{display:grid;gap:5px}
.abm.abm-role .fieldset label{font-size:13px;color:var(--muted)}
.abm.abm-role .stepper{display:inline-flex;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;width:max-content}
.abm.abm-role .stepper button{border:0;background:none;width:36px;font-size:18px;color:var(--accent-text);cursor:pointer}
.abm.abm-role .stepper button:hover{background:var(--creme)}
.abm.abm-role .stepper input{width:70px;border:0;border-inline:1px solid var(--line);text-align:center;background:none;font-variant-numeric:tabular-nums;padding:8px 4px;-moz-appearance:textfield}
.abm.abm-role .stepper input::-webkit-outer-spin-button,.abm.abm-role .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-role .plan-pick{font-size:14px}
.abm.abm-role .plan-pick b{font-family:var(--display);color:var(--accent-text)}
.abm.abm-role .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.abm.abm-role .stat{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:4px}
.abm.abm-role .stat span{font-size:13px;color:var(--muted)}
.abm.abm-role .stat b{font-family:var(--display);font-size:clamp(24px,3.4vw,32px);font-weight:600;font-variant-numeric:tabular-nums}
.abm.abm-role .stat.win{background:var(--accent);color:#fff}
.abm.abm-role .stat.win span{color:rgba(255,255,255,.9)}
.abm.abm-role .profile-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.abm.abm-role .profile-bar .segctl button[disabled]{opacity:.4;cursor:default}
.abm.abm-role .picks{display:grid;gap:22px;margin-top:8px}
.abm.abm-role .pick-group h3{font-family:var(--display);font-size:16px;font-weight:600;margin:0 0 10px}
.abm.abm-role .pick-row{display:flex;flex-wrap:wrap;gap:8px}
.abm.abm-role .pick{border:0;background:var(--card);color:var(--ink);border-radius:12px;padding:10px 15px;font:inherit;font-size:14px;cursor:pointer;min-height:42px;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-role .pick:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-role .pick[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text);font-weight:600;box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-role .self-foot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:22px;font-size:14px;color:var(--muted)}
.abm.abm-role .self-need{margin-top:22px;max-width:760px}
.abm.abm-role .self-need textarea{width:100%;resize:vertical}
.abm.abm-role .need-hint{font-size:13.5px;color:var(--muted);margin-top:8px}
.abm.abm-role .why-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:18px}
.abm.abm-role .why-progress{flex:1;min-width:120px;max-width:220px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.abm.abm-role .why-progress i{display:block;height:100%;width:0;background:var(--accent)}
.abm.abm-role .why{overflow:hidden;border-radius:18px}
.abm.abm-role .why-track{display:flex;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.abm.abm-role .why-card{flex:0 0 100%;background:var(--creme);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:minmax(200px,300px) 1fr;align-items:stretch}
.abm.abm-role .why-card .art{min-height:120px;display:grid;place-items:center;padding:18px;background:var(--accent-soft)}
.abm.abm-role .why-card:nth-child(2) .art{background:color-mix(in srgb,var(--acc2) 22%,var(--creme))}
.abm.abm-role .why-card .art svg{width:100%;max-width:210px;height:100%}
.abm.abm-role .why-card .body{padding:22px 24px 26px;display:grid;gap:12px}
.abm.abm-role .why-card h3{font-size:20px;font-weight:600}
.abm.abm-role .why-card ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.abm.abm-role .why-card li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;line-height:1.5}
.abm.abm-role .why-card li b{font-weight:600;color:var(--ink)}
.abm.abm-role .why-card li::before{content:"";width:12px;height:12px;margin-top:6px;border-radius:4px;background:var(--accent)}
.abm.abm-role .why-card .fair{font-size:13.5px;color:var(--muted);padding-top:4px}
@media (max-width:820px){.abm.abm-role .why-card{grid-template-columns:1fr}
.abm.abm-role .why-card .art{min-height:110px}
}
@media (prefers-reduced-motion:reduce){.abm.abm-role .why-track{transition:none}
}
.abm.abm-role section.sep{border-top:1px solid var(--line)}
.abm.abm-role .proof-sec{background:var(--dark);color:var(--dark-ink)}
.abm.abm-role .proof{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.abm.abm-role .proof-sec .eyebrow{color:var(--acc2)}
.abm.abm-role .proof-sec .lead{color:rgba(255,255,255,.8)}
.abm.abm-role .facts{display:grid;gap:14px}
.abm.abm-role .kv-proof{width:min(330px,100%);height:auto;justify-self:center;display:block;margin-block:-40px}
.abm.abm-role .fact{display:flex;gap:16px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:14px}
.abm.abm-role .fact b{font-family:var(--display);font-size:28px;font-weight:600;min-width:3.2ch}
.abm.abm-role .fact:nth-child(1) b{color:var(--b-orange)}
.abm.abm-role .fact:nth-child(2) b{color:var(--b-yellow)}
.abm.abm-role .fact:nth-child(3) b{color:var(--b-green)}
.abm.abm-role .fact span{color:rgba(255,255,255,.85)}
.abm.abm-role .colleagues{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.abm.abm-role .colleague{background:var(--card);border-radius:18px;padding:24px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-content:start}
.abm.abm-role .avatar{width:50px;height:50px;border-radius:50%;background:var(--av);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:18px;grid-row:span 2}
.abm.abm-role .colleague .who{font-family:var(--display);font-weight:600;font-size:19px;align-self:end}
.abm.abm-role .colleague .role{font-size:13px;color:var(--faint)}
.abm.abm-role .colleague p,.abm.abm-role .colleague button{grid-column:1 / -1}
.abm.abm-role .colleague p{color:var(--muted);font-size:15px;margin-top:6px}
.abm.abm-role .colleague button{justify-self:start;margin-top:6px}
.abm.abm-role .close-in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:end;justify-content:space-between}
.abm.abm-role .close h2{font-size:clamp(28px,4vw,40px);font-weight:700;max-width:20ch}
.abm.abm-role .brand{font-family:var(--display);font-weight:600;color:var(--muted);margin-top:12px}
.abm.abm-role .brand em{font-style:normal;color:var(--b-orange)}
@media (max-width:860px){.abm.abm-role .hero-in,.abm.abm-role .proof,.abm.abm-role .band,.abm.abm-role .calc{grid-template-columns:1fr}
.abm.abm-role .kv{justify-self:center;margin-right:0;width:min(320px,80%)}
.abm.abm-role .kv-proof{width:min(240px,70%);margin-block:8px 0}
.abm.abm-role .hero-visual .idea-box{margin-top:-60px}
.abm.abm-role .ideas,.abm.abm-role .colleagues,.abm.abm-role .strip,.abm.abm-role .calc-fields{grid-template-columns:1fr}
.abm.abm-role section{padding-block:56px}
}
@media (prefers-reduced-motion:no-preference){.abm.abm-role .swap{animation:fade .25s ease}

  @keyframes fade{from{opacity:.5}to{opacity:1}}
}

.abm.abm-role{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.abm.abm-role .note{display:none}
.abm.abm-role .cmp-loader{display:flex;justify-content:center;align-items:center;min-height:60vh}
.abm.abm-role .cmp-loader::after{content:'';width:40px;height:40px;border-radius:50%;border:3px solid rgba(19,26,42,.15);border-top-color:rgb(19,26,42);animation:cmp-spin .8s linear infinite}
@keyframes cmp-spin{to{transform:rotate(360deg)}}
.abm.abm-role h1,.abm.abm-role h2,.abm.abm-role h3,.abm.abm-role h4,.abm.abm-role p,.abm.abm-role span,.abm.abm-role b{text-transform:none}
/* account manager widget: the page sanitizer strips position:fixed from inline styles */
.abm.abm-role .am{position:fixed;left:16px;bottom:16px;z-index:50}
.abm.abm-role .am summary::-webkit-details-marker{display:none}

/* abm-widget 2026-10-21 */
.abm.abm-role .hero-in{padding-block:40px 48px;gap:40px}
.abm.abm-role .campaign{margin-bottom:10px}
.abm.abm-role .cobrand{margin-bottom:14px}
.abm.abm-role .kv.tall{width:auto;max-width:min(300px,80%);max-height:300px}
.abm.abm-role .hero-visual .idea-box{margin-top:-96px}
.abm.abm-role .hero-points{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muted)}
.abm.abm-role .hero-points li{display:flex;align-items:center;gap:7px}
.abm.abm-role .hero-points li::before{content:'';width:12px;height:6px;border-left:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);transform:translateY(-2px) rotate(-45deg)}
.abm.abm-role .am{left:auto;right:20px;bottom:20px;width:max-content;max-width:min(460px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px -12px rgba(19,26,42,.28);font-family:var(--body);color:var(--ink)}
.abm.abm-role .am-head{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px}
.abm.abm-role .am-pic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent-soft) center/cover no-repeat;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.abm.abm-role .am-who{display:flex;flex-direction:column;min-width:0;flex:1}
.abm.abm-role .am-hi{font-weight:600;font-size:15px;line-height:1.3}
.abm.abm-role .am-role{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abm.abm-role .am-toggle{flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 4px 4px 0}
.abm.abm-role .am[open] .am-toggle{transform:rotate(-135deg);margin:4px 4px 0 0}
.abm.abm-role .am-body{padding:0 14px 14px;display:grid;gap:10px;width:0;min-width:100%}
.abm.abm-role .am-pitch{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.abm.abm-role .am-cta{flex:none;width:auto;padding:10px 16px;font-size:14px;white-space:nowrap}
.abm.abm-role .am-links{margin:0;display:flex;gap:16px;font-size:13px}
.abm.abm-role .am-links a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.abm.abm-role .am{right:16px;bottom:16px;width:auto;left:16px}.abm.abm-role .am-head{flex-wrap:wrap}.abm.abm-role .am-cta{order:3;width:100%;text-align:center;justify-content:center}}

.abm.abm-partner{
  
  --b-ink:#292D3E;--b-orange:#F45F3A;--b-yellow:#FFC505;--b-blue:#3A8DFF;--b-purple:#884DFF;--b-teal:#398FA5;
  --b-green:#8ECCC5;--b-red:#F97C7C;--b-lilac:#CCB3FF;--b-creme:#F7F4EF;--b-beige:#EBE8E4;
  
  --bur-accent:#F45F3A;--bur-soft:#FDECE6;--bur-text:#C23E1B;--bur-acc2:#FFC505;
  --con-accent:#398FA5;--con-soft:#E4F3F1;--con-text:#246B7C;--con-acc2:#3A8DFF;
  --imp-accent:#2F74E0;--imp-soft:#E6F0FF;--imp-text:#1F56B8;--imp-acc2:#FFC505;
  --ver-accent:#884DFF;--ver-soft:#F1EAFF;--ver-text:#5B2ED6;--ver-acc2:#FFC505;
  --accent:var(--bur-accent);--accent-soft:var(--bur-soft);--accent-text:var(--bur-text);--acc2:var(--bur-acc2);
  --ink:#292D3E;--muted:#5F6475;--faint:#8B90A0;
  --paper:#FFFFFF;--creme:#F7F4EF;--line:#E6E1D9;--card:#FFFFFF;
  --dark:#292D3E;--dark-ink:#FFFFFF;
  --chrome:#1E2130;--chrome-ink:#F4F2F7;--chrome-muted:#A3A8B8;
  --note-bg:#EEF3FB;--note-ink:#2B4A7A;--note-line:#CFDCF0;
  --tbc-bg:#FFF6D6;--tbc-line:#E3B200;--tbc-ink:#6B5200;
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
.abm.abm-partner.face-bur{--accent:var(--bur-accent);--accent-soft:var(--bur-soft);--accent-text:var(--bur-text);--acc2:var(--bur-acc2)}
.abm.abm-partner.face-con{--accent:var(--con-accent);--accent-soft:var(--con-soft);--accent-text:var(--con-text);--acc2:var(--con-acc2)}
.abm.abm-partner.face-imp{--accent:var(--imp-accent);--accent-soft:var(--imp-soft);--accent-text:var(--imp-text);--acc2:var(--imp-acc2)}
.abm.abm-partner.face-ver{--accent:var(--ver-accent);--accent-soft:var(--ver-soft);--accent-text:var(--ver-text);--acc2:var(--ver-acc2)}
.abm.abm-partner, .abm.abm-partner *{box-sizing:border-box}
.abm.abm-partner{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
.abm.abm-partner h1,.abm.abm-partner h2,.abm.abm-partner h3,.abm.abm-partner h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.abm.abm-partner p{margin:0}
.abm.abm-partner button,.abm.abm-partner input{font:inherit;color:inherit}
.abm.abm-partner :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.abm.abm-partner .wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
.abm.abm-partner .chrome{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--chrome);color:var(--chrome-ink);padding:10px 16px}
.abm.abm-partner .chrome-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.abm.abm-partner .chrome-label{font-size:12px;color:var(--chrome-muted);letter-spacing:.04em;text-transform:uppercase;margin-right:auto}
.abm.abm-partner .chrome-label b{color:var(--chrome-ink);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.abm.abm-partner .seg{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.abm.abm-partner .seg button{background:none;border:0;color:var(--chrome-muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.abm.abm-partner .seg button:hover{color:var(--chrome-ink);background:rgba(255,255,255,.08)}
.abm.abm-partner .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .toggle{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--chrome-muted);cursor:pointer}
.abm.abm-partner .toggle input{accent-color:var(--accent)}
.abm.abm-partner section{padding-block:80px}
.abm.abm-partner section.alt{background:var(--creme)}
.abm.abm-partner .eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.abm.abm-partner .h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.15;max-width:26ch}
.abm.abm-partner .lead{color:var(--muted);font-size:18px;max-width:60ch}
.abm.abm-partner .sec-head{display:grid;gap:12px;margin-bottom:36px}
.abm.abm-partner .btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:10px;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;font-size:15px;transition:transform .15s ease,filter .15s ease}
.abm.abm-partner .btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.abm.abm-partner .btn-primary{background:var(--accent);color:#fff}
.abm.abm-partner .btn-quiet{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .btn-quiet:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.abm.abm-partner .pill{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap}
.abm.abm-partner .p-rec{background:var(--accent);color:#fff}
.abm.abm-partner .p-also{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-text)}
.abm.abm-partner .echo{font-size:14px;color:var(--accent-text);background:var(--accent-soft);padding:10px 14px;border-radius:10px}
.abm.abm-partner .num{font-variant-numeric:tabular-nums}
.abm.abm-partner .note{display:none;margin-top:22px;background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;max-width:82ch}
.abm.abm-partner .note b{font-weight:600}
.abm.abm-partner .note p+p{margin-top:6px}
.abm.abm-partner.show-notes .note{display:block}
.abm.abm-partner .tbc{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--tbc-ink);background:var(--tbc-bg);box-shadow:inset 0 0 0 1px var(--tbc-line);border-radius:6px;padding:1px 7px;white-space:nowrap;vertical-align:1px}
.abm.abm-partner .hero{background:var(--creme);padding-block:0;position:relative;overflow:hidden}
.abm.abm-partner .hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-block:64px 80px;align-items:center;position:relative}
.abm.abm-partner .campaign{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);letter-spacing:-.005em;display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:22px}
.abm.abm-partner .campaign span:nth-child(3){color:var(--accent-text)}
.abm.abm-partner .cobrand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:22px;color:var(--ink)}
.abm.abm-partner .cobrand .x{color:var(--faint);font-weight:500}
.abm.abm-partner .hero h1{font-size:clamp(32px,4.8vw,50px);font-weight:700;line-height:1.07;margin-top:12px}
.abm.abm-partner .hero .lead{margin-top:18px}
.abm.abm-partner .face{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.abm.abm-partner .face::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.abm.abm-partner .hero-cta{margin-top:26px}
.abm.abm-partner .idea-box{background:var(--card);border-radius:18px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 60px -34px rgba(41,45,62,.45)}
.abm.abm-partner .idea-box label{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2}
.abm.abm-partner .idea-box .sub{font-size:14px;color:var(--muted);margin-top:-6px}
.abm.abm-partner .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:15px}
.abm.abm-partner .field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px var(--accent-soft)}
.abm.abm-partner .hero-visual{position:relative;display:grid}
.abm.abm-partner .kv{width:min(430px,100%);height:auto;justify-self:end;margin-right:-24px;display:block}
.abm.abm-partner .kv.tall{width:min(340px,80%)}
.abm.abm-partner .hero-visual .idea-box{width:min(410px,100%);margin-top:-170px;position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .kv{animation:kvin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes kvin{from{transform:translateY(18px) rotate(-3deg);opacity:.6}to{transform:none;opacity:1}}
}
.abm.abm-partner .plan-dlg{border:0;border-radius:20px;padding:30px 30px 26px;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:auto;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.abm.abm-partner .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.abm.abm-partner .plan-dlg h3{font-size:24px;font-weight:600;margin-top:6px}
.abm.abm-partner .dlg-x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:24px;color:var(--faint);cursor:pointer;width:36px;height:36px;border-radius:10px}
.abm.abm-partner .dlg-x:hover{background:var(--creme);color:var(--ink)}
.abm.abm-partner .plan-quote{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--creme);color:var(--ink);font-weight:500}
.abm.abm-partner .plan-steps{margin:18px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink)}
.abm.abm-partner .plan-steps li::marker{color:var(--accent-text);font-weight:600}
.abm.abm-partner .plan-bricks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.abm.abm-partner .plan-bricks span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:var(--creme);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .plan-start{margin-top:14px;font-size:14px;color:var(--muted)}
.abm.abm-partner .plan-role{margin-top:14px}
.abm.abm-partner .plan-cta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:12px}
.abm.abm-partner .plan-cta h4{font-size:18px;font-weight:600}
.abm.abm-partner .plan-mail{font-size:13px;color:var(--faint)}
.abm.abm-partner .idea-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.abm.abm-partner .link-btn{background:none;border:0;padding:0;color:var(--accent-text);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.abm.abm-partner .types{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.abm.abm-partner .type{background:var(--creme);border-radius:18px;padding:22px 20px 22px;display:grid;gap:12px;align-content:start;grid-template-rows:auto auto auto 1fr}
.abm.abm-partner .type.rec{background:var(--accent-soft)}
.abm.abm-partner .type-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:24px}
.abm.abm-partner .type-top small{font-size:12px;color:var(--faint)}
.abm.abm-partner .type h3{font-size:20px;font-weight:600}
.abm.abm-partner .type dl{margin:0;display:grid;gap:10px;font-size:14.5px}
.abm.abm-partner .type dt{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .type dd{margin:2px 0 0;color:var(--muted)}
.abm.abm-partner .type.rec dd{color:var(--ink)}
.abm.abm-partner .mini-bricks{display:flex;flex-wrap:wrap;gap:12px 6px;padding-top:6px;margin-bottom:4px}
.abm.abm-partner .brick{position:relative;border:0;border-radius:10px;padding:18px 10px 14px;font-family:var(--display);font-weight:600;font-size:14.5px;text-align:center;background:var(--accent-soft);color:var(--accent-text);min-height:64px;display:grid;place-content:center;gap:2px}
.abm.abm-partner .brick::before,.abm.abm-partner .brick::after{content:"";position:absolute;top:-6px;width:14px;height:7px;border-radius:4px 4px 0 0;background:inherit}
.abm.abm-partner .brick::before{left:24%}
.abm.abm-partner .brick::after{right:24%}
.abm.abm-partner .brick.sm{min-height:0;padding:9px 12px 7px;font-size:12.5px;border-radius:8px}
.abm.abm-partner .brick.sm::before,.abm.abm-partner .brick.sm::after{top:-5px;width:10px;height:5px;border-radius:3px 3px 0 0}
.abm.abm-partner .brick.base{background:var(--card);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.abm.abm-partner .brick.base::before,.abm.abm-partner .brick.base::after{background:var(--line)}
.abm.abm-partner .brick.hl{background:var(--accent);color:#fff}
.abm.abm-partner .shift{margin-top:40px;display:grid;gap:14px}
.abm.abm-partner .shift h3{font-size:20px;font-weight:600}
.abm.abm-partner .shift-rows{display:grid;gap:8px}
.abm.abm-partner .shift-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;background:var(--creme);border-radius:14px;padding:14px 18px;font-size:15px}
.abm.abm-partner .shift-row .now{color:var(--muted)}
.abm.abm-partner .shift-row .arrow{color:var(--accent-text);font-weight:700}
.abm.abm-partner .shift-row .with{font-weight:500}
.abm.abm-partner .shift-head{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;padding:0 18px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .shift-head span:nth-child(2){visibility:hidden}
.abm.abm-partner .calc{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-bottom:16px}
.abm.abm-partner .calc-group{background:var(--card);border-radius:16px;padding:20px 22px;display:grid;gap:16px;align-content:start}
.abm.abm-partner .calc-group h4{font-size:16px;font-weight:600}
.abm.abm-partner .calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.abm.abm-partner .fieldset{display:grid;gap:6px;align-content:start}
.abm.abm-partner .fieldset.full{grid-column:1 / -1}
.abm.abm-partner .fieldset label,.abm.abm-partner .fieldset .lbl{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.abm.abm-partner .ex{font-size:11px;font-weight:600;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line);border-radius:5px;padding:0 6px}
.abm.abm-partner .stepper{display:inline-flex;border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden;width:max-content}
.abm.abm-partner .stepper:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .stepper button{border:0;background:none;width:38px;font-size:18px;color:var(--accent-text);cursor:pointer;font-weight:600}
.abm.abm-partner .stepper button:hover{background:var(--accent-soft)}
.abm.abm-partner .stepper input{width:72px;border:0;border-inline:1px solid var(--line);text-align:center;background:none;font-variant-numeric:tabular-nums;padding:9px 4px;-moz-appearance:textfield}
.abm.abm-partner .stepper input:focus{outline:none}
.abm.abm-partner .stepper input::-webkit-outer-spin-button,.abm.abm-partner .stepper input::-webkit-inner-spin-button,.abm.abm-partner .pct input::-webkit-outer-spin-button,.abm.abm-partner .pct input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.abm.abm-partner .segctl{display:inline-flex;flex-wrap:wrap;background:var(--paper);border-radius:12px;padding:4px;box-shadow:inset 0 0 0 1.5px var(--line);gap:4px}
.abm.abm-partner .segctl button{border:0;background:none;padding:8px 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;display:grid;text-align:left;line-height:1.25}
.abm.abm-partner .segctl button small{font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.abm.abm-partner .segctl button:hover{background:var(--accent-soft);color:var(--accent-text)}
.abm.abm-partner .segctl button[aria-pressed="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .pct{display:inline-flex;align-items:center;gap:0;border-radius:10px;background:var(--tbc-bg);box-shadow:inset 0 0 0 1.5px var(--tbc-line);width:max-content;overflow:hidden}
.abm.abm-partner .pct:focus-within{box-shadow:inset 0 0 0 2px var(--tbc-line),0 0 0 4px var(--tbc-bg)}
.abm.abm-partner .pct input{width:90px;border:0;background:none;padding:9px 12px;font-variant-numeric:tabular-nums;color:var(--ink);-moz-appearance:textfield}
.abm.abm-partner .pct input:focus{outline:none}
.abm.abm-partner .pct input::placeholder{color:var(--tbc-ink);opacity:.9}
.abm.abm-partner .pct span{padding-right:12px;color:var(--tbc-ink);font-weight:600}
.abm.abm-partner .calc-hint{font-size:13px;color:var(--muted)}
.abm.abm-partner .results{display:grid;gap:10px;align-content:start}
.abm.abm-partner .stat{background:var(--card);border-radius:16px;padding:16px 20px;display:grid;gap:2px}
.abm.abm-partner .stat span{font-size:13px;color:var(--muted)}
.abm.abm-partner .stat b{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:600;font-variant-numeric:tabular-nums}
.abm.abm-partner .stat small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .stat.open b{color:var(--tbc-ink);font-size:18px;font-family:var(--body);font-weight:600}
.abm.abm-partner .stat.open{background:var(--tbc-bg)}
.abm.abm-partner .stat.win{background:var(--accent);color:#fff}
.abm.abm-partner .stat.win span,.abm.abm-partner .stat.win small{color:rgba(255,255,255,.9)}
.abm.abm-partner .calc-foot{font-size:13px;color:var(--muted);max-width:80ch;display:grid;gap:6px}
.abm.abm-partner .benefit-groups{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.abm.abm-partner .bgroup h3{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm.abm-partner .benefits{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.abm.abm-partner .benefit{background:var(--creme);border-radius:14px;padding:14px 18px;display:grid;gap:3px}
.abm.abm-partner .benefit b{font-family:var(--display);font-weight:600;font-size:16px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.abm.abm-partner .benefit span{color:var(--muted);font-size:14.5px}
.abm.abm-partner .benefit.focus{background:var(--accent-soft)}
.abm.abm-partner .benefit.focus span{color:var(--ink)}
.abm.abm-partner .benefit.tbd{background:var(--tbc-bg);box-shadow:inset 0 0 0 1.5px var(--tbc-line)}
.abm.abm-partner .benefit.tbd span{color:var(--ink)}
.abm.abm-partner .s-bg{fill:var(--card)}
.abm.abm-partner .s-ln{stroke:var(--faint);fill:none;stroke-width:1.5}
.abm.abm-partner .s-fl{fill:var(--faint);opacity:.3}
.abm.abm-partner .s-ac{fill:var(--accent)}
.abm.abm-partner .s-acl{stroke:var(--accent);fill:none;stroke-width:2}
.abm.abm-partner .s-sf{fill:var(--accent-soft)}
.abm.abm-partner .s-y{fill:var(--acc2)}
.abm.abm-partner .leads-sec{background:var(--accent-soft)}
.abm.abm-partner .leads-sec .lead{color:var(--ink)}
.abm.abm-partner .leadflow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-top:26px}
.abm.abm-partner .channels-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.abm.abm-partner .channels-head h3{font-size:19px;font-weight:600}
.abm.abm-partner .channels-head p{color:var(--ink);font-size:14.5px}
.abm.abm-partner .channels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.abm.abm-partner .ch{background:var(--card);border-radius:14px;padding:14px 14px 13px;display:grid;grid-template-columns:36px 1fr;column-gap:12px;row-gap:2px;align-items:start}
.abm.abm-partner .ch-ico{grid-row:span 2;width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center}
.abm.abm-partner .ch:nth-child(3n+2) .ch-ico{background:var(--acc2);color:var(--b-ink)}
.abm.abm-partner .ch:nth-child(3n) .ch-ico{background:var(--b-ink);color:#fff}
.abm.abm-partner .ch-ico svg{width:20px;height:20px}
.abm.abm-partner .ch b{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25}
.abm.abm-partner .ch span:not(.ch-ico){font-size:13px;color:var(--muted);line-height:1.4}
.abm.abm-partner .channels-foot{margin-top:10px;font-size:13px;color:var(--muted)}
@media (max-width:960px){.abm.abm-partner .channels{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){.abm.abm-partner .channels{grid-template-columns:1fr}
}
.abm.abm-partner .lf-col{background:var(--card);border-radius:18px;padding:18px 18px 16px;display:grid;gap:12px;align-content:start;box-shadow:0 18px 40px -32px rgba(41,45,62,.4)}
.abm.abm-partner .lf-col small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .lf-label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--accent-text)}
.abm.abm-partner .lf-bricks{display:flex;flex-wrap:wrap;gap:12px 6px;padding-top:6px}
.abm.abm-partner .lf-line{font-size:14px;color:var(--ink);font-weight:500}
.abm.abm-partner .lf-arrow{align-self:center;font-family:var(--display);font-size:30px;color:var(--accent);font-weight:700}
.abm.abm-partner .lf-leads{display:grid;gap:8px}
.abm.abm-partner .lead-chip{display:flex;align-items:center;gap:10px;background:var(--creme);border-radius:10px;padding:8px 10px;font-size:13.5px}
.abm.abm-partner .lead-chip i{width:8px;height:8px;border-radius:50%;background:var(--acc2);flex-shrink:0}
.abm.abm-partner .lead-chip b{font-weight:600}
.abm.abm-partner .lf-you{background:var(--accent);color:#fff}
.abm.abm-partner .lf-you .lf-label{color:rgba(255,255,255,.85)}
.abm.abm-partner .lf-you small{color:rgba(255,255,255,.85)}
.abm.abm-partner .lf-you .tbc{white-space:normal}
.abm.abm-partner .match{display:grid;gap:8px}
.abm.abm-partner .match-card{background:rgba(255,255,255,.14);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
.abm.abm-partner .match-card b{font-family:var(--display);font-size:17px;font-weight:600}
.abm.abm-partner .match-card span{font-size:13.5px;color:rgba(255,255,255,.9)}
.abm.abm-partner .lead-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.abm.abm-partner .lead-point{background:var(--card);border-radius:16px;padding:18px 20px;display:grid;gap:6px}
.abm.abm-partner .lead-point b{font-family:var(--display);font-weight:600;font-size:17px}
.abm.abm-partner .lead-point span{color:var(--muted);font-size:14.5px}
.abm.abm-partner .hero-leads{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:var(--ink)}
.abm.abm-partner .hero-leads::before{content:"✦";color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .play .lead-chip{animation:chipin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 140ms)}
.abm.abm-partner .play .match-card{animation:chipin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:.55s}

  @keyframes chipin{from{transform:translateX(-14px);opacity:.35}to{transform:none;opacity:1}}
}
.abm.abm-partner .type-art{background:var(--card);border-radius:12px;height:92px;display:grid;place-items:center;padding:8px;margin-bottom:2px}
.abm.abm-partner .type.rec .type-art{background:color-mix(in srgb,var(--card) 70%,var(--accent-soft))}
.abm.abm-partner .type-art svg{width:100%;max-width:180px;height:100%}
.abm.abm-partner .shift-row{grid-template-columns:1fr 44px 1fr;padding:0;background:none;gap:10px}
.abm.abm-partner .shift-row .now,.abm.abm-partner .shift-row .with{border-radius:14px;padding:16px 18px;display:grid;gap:4px;align-content:center;min-height:74px}
.abm.abm-partner .shift-row .now{background:var(--creme);color:var(--muted)}
.abm.abm-partner .shift-row .with{background:var(--accent-soft);color:var(--ink);font-weight:500}
.abm.abm-partner .shift-row .arrow{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;justify-self:center;font-size:18px}
.abm.abm-partner .shift-row.lead-row .with{background:var(--accent);color:#fff}
.abm.abm-partner .shift-row.lead-row .with small{color:rgba(255,255,255,.88)}
.abm.abm-partner .shift-row small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.abm.abm-partner .shift-head{grid-template-columns:1fr 44px 1fr;padding:0 4px}
.abm.abm-partner .calc-left{display:grid;gap:16px;align-content:start}
.abm.abm-partner .store-note{font-size:13px;color:var(--muted)}
.abm.abm-partner .benefit.lead{background:var(--accent);color:#fff}
.abm.abm-partner .benefit.lead span{color:rgba(255,255,255,.9)}
.abm.abm-partner .benefit.lead .pill{background:#fff;color:var(--accent-text)}
.abm.abm-partner .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.abm.abm-partner .prod{background:var(--creme);border-radius:18px;overflow:hidden;display:grid;align-content:start}
.abm.abm-partner .prod-art{height:110px;display:grid;place-items:center;padding:12px;background:var(--accent-soft)}
.abm.abm-partner .prod:nth-child(2) .prod-art{background:color-mix(in srgb,var(--acc2) 22%,var(--card))}
.abm.abm-partner .prod:nth-child(3) .prod-art{background:color-mix(in srgb,var(--b-blue) 14%,var(--card))}
.abm.abm-partner .prod-art svg{width:100%;max-width:200px;height:100%}
.abm.abm-partner .prod-body{padding:18px 20px 20px;display:grid;gap:8px}
.abm.abm-partner .prod-body h3{font-size:18px;font-weight:600}
.abm.abm-partner .prod-body p{color:var(--muted);font-size:14.5px}
.abm.abm-partner .prod-body .how{font-size:13px;color:var(--ink)}
.abm.abm-partner .prod-body .how b{color:var(--accent-text)}
.abm.abm-partner .ladder{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;margin-top:22px}
.abm.abm-partner .rung{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:4px}
.abm.abm-partner .rung small{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--accent-text)}
.abm.abm-partner .rung b{font-family:var(--display);font-weight:600;font-size:16px}
.abm.abm-partner .rung span{font-size:13.5px;color:var(--muted)}
.abm.abm-partner .rung.top{background:var(--accent);box-shadow:none;color:#fff}
.abm.abm-partner .rung.top small,.abm.abm-partner .rung.top span{color:rgba(255,255,255,.9)}
.abm.abm-partner .ladder .arrow{align-self:center;font-family:var(--display);font-weight:700;font-size:24px;color:var(--accent)}
@media (max-width:860px){.abm.abm-partner .prod-grid,.abm.abm-partner .ladder{grid-template-columns:1fr}
.abm.abm-partner .ladder .arrow{transform:rotate(90deg);justify-self:center}
}
.abm.abm-partner .ubr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.abm.abm-partner .ubr{background:var(--creme);border-radius:18px;padding:22px 22px 24px;display:grid;gap:10px;align-content:start;position:relative}
.abm.abm-partner .ubr.hl{background:var(--accent);color:#fff}
.abm.abm-partner .ubr.hl p{color:rgba(255,255,255,.9)}
.abm.abm-partner .ubr .brick{justify-self:start;min-height:0;padding:10px 14px 8px;font-size:13px}
.abm.abm-partner .ubr.hl .brick{background:#fff;color:var(--accent-text)}
.abm.abm-partner .ubr h3{font-size:21px;font-weight:600;line-height:1.2}
.abm.abm-partner .ubr p{color:var(--muted);font-size:15px}
.abm.abm-partner .ubr-more{margin-top:16px;font-size:14.5px;color:var(--muted)}
.abm.abm-partner .type-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.abm.abm-partner .type-tab{border:0;border-radius:12px;padding:10px 14px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;text-align:left;display:grid;gap:2px;color:var(--ink)}
.abm.abm-partner .type-tab b{font-family:var(--display);font-weight:600;font-size:16px}
.abm.abm-partner .type-tab small{font-size:12px;color:var(--faint)}
.abm.abm-partner .type-tab:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.abm.abm-partner .type-tab[aria-selected="true"]{background:var(--accent);box-shadow:none;color:#fff}
.abm.abm-partner .type-tab[aria-selected="true"] small{color:rgba(255,255,255,.85)}
.abm.abm-partner .type-tab .rec-dot{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--acc2);color:var(--ink);vertical-align:2px}
.abm.abm-partner .type-panel{background:var(--card);border-radius:18px;padding:22px;display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:center}
.abm.abm-partner .type-panel .type-art{background:var(--accent-soft);height:140px;margin:0}
.abm.abm-partner .type-panel h3{font-size:22px;font-weight:600;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abm.abm-partner .type-panel dl{margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:15px}
.abm.abm-partner .type-panel dt{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600}
.abm.abm-partner .type-panel dd{margin:4px 0 0;color:var(--ink)}
.abm.abm-partner section.sep{border-top:1px solid var(--line)}
@media (max-width:860px){.abm.abm-partner .ubr-grid,.abm.abm-partner .type-panel,.abm.abm-partner .type-panel dl{grid-template-columns:1fr}
}
.abm.abm-partner .status-block{margin-top:26px;display:grid;gap:14px}
.abm.abm-partner .status-block h3{font-size:18px;font-weight:600}
.abm.abm-partner .status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.abm.abm-partner .status{background:var(--card);border-radius:16px;padding:16px 16px 14px;display:grid;gap:10px;align-content:start;box-shadow:inset 0 0 0 1px var(--line)}
.abm.abm-partner .status.on{box-shadow:inset 0 0 0 2px var(--accent)}
.abm.abm-partner .status-top{display:grid;gap:2px}
.abm.abm-partner .status-top b{font-family:var(--display);font-size:18px;font-weight:600}
.abm.abm-partner .status-top small{font-size:12.5px;color:var(--faint)}
.abm.abm-partner .status-pct{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.abm.abm-partner .status-pct span{background:var(--accent-soft);border-radius:8px;padding:6px 4px;text-align:center;font-family:var(--display);font-weight:600;font-size:15px;color:var(--accent-text);display:grid}
.abm.abm-partner .status-pct small{font-family:var(--body);font-weight:500;font-size:10.5px;color:var(--muted)}
.abm.abm-partner .status ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);display:grid;gap:4px}
.abm.abm-partner .referral{margin-top:14px;font-size:14.5px;color:var(--muted);max-width:80ch}
.abm.abm-partner .benefit.ask{background:var(--accent-soft)}
.abm.abm-partner .benefit.ask span{color:var(--ink)}
.abm.abm-partner .asks-note{font-size:13px;color:var(--faint);margin-top:8px}
@media (max-width:860px){.abm.abm-partner .status-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){.abm.abm-partner .status-grid{grid-template-columns:1fr}
}
.abm.abm-partner .fit{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.abm.abm-partner .fit span{background:rgba(255,255,255,.16);border-radius:8px;padding:5px 8px;font-size:12.5px;display:grid;gap:1px}
.abm.abm-partner .fit em{font-style:normal;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.abm.abm-partner .proof-sec{background:var(--dark);color:var(--dark-ink)}
.abm.abm-partner .proof{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.abm.abm-partner .proof-sec .eyebrow{color:var(--acc2)}
.abm.abm-partner .proof-sec .lead{color:rgba(255,255,255,.82)}
.abm.abm-partner .facts{display:grid;gap:14px}
.abm.abm-partner .kv-proof{width:min(330px,100%);height:auto;justify-self:center;display:block;margin-block:-40px}
.abm.abm-partner .fact{display:grid;grid-template-columns:7.5em 1fr;gap:16px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:14px}
.abm.abm-partner .fact b{font-family:var(--display);font-size:20px;font-weight:600}
.abm.abm-partner .fact:nth-child(1) b{color:var(--b-orange)}
.abm.abm-partner .fact:nth-child(2) b{color:var(--b-yellow)}
.abm.abm-partner .fact:nth-child(3) b{color:var(--b-green)}
.abm.abm-partner .fact span{color:rgba(255,255,255,.88)}
.abm.abm-partner .close-in{display:grid;gap:22px}
.abm.abm-partner .close h2{font-size:clamp(28px,4vw,40px);font-weight:700;max-width:22ch}
.abm.abm-partner .brand{font-family:var(--display);font-weight:600;color:var(--muted);margin-top:28px;font-size:18px}
.abm.abm-partner .brand em{font-style:normal;color:var(--b-orange)}
@media (max-width:960px){.abm.abm-partner .types{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){.abm.abm-partner .hero-in,.abm.abm-partner .proof,.abm.abm-partner .calc,.abm.abm-partner .benefit-groups,.abm.abm-partner .lead-points{grid-template-columns:1fr}
.abm.abm-partner .leadflow{grid-template-columns:1fr}
.abm.abm-partner .lf-arrow{transform:rotate(90deg);justify-self:center}
.abm.abm-partner .kv{justify-self:center;margin-right:0;width:min(320px,80%)}
.abm.abm-partner .kv-proof{width:min(240px,70%);margin-block:8px 0}
.abm.abm-partner .hero-visual .idea-box{margin-top:-60px}
.abm.abm-partner section{padding-block:56px}
}
@media (max-width:600px){.abm.abm-partner .types,.abm.abm-partner .calc-fields{grid-template-columns:1fr}
.abm.abm-partner .shift-head{display:none}
.abm.abm-partner .shift-row{grid-template-columns:1fr;gap:4px}
.abm.abm-partner .shift-row .arrow{transform:rotate(90deg);justify-self:start}
.abm.abm-partner .fact{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:no-preference){.abm.abm-partner .swap{animation:fade .25s ease}

  @keyframes fade{from{opacity:.5}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.abm.abm-partner .btn{transition:none}
.abm.abm-partner .btn:hover{transform:none}
}

.abm.abm-partner{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
.abm.abm-partner .note,.abm.abm-partner .chrome{display:none}
.abm.abm-partner h1,.abm.abm-partner h2,.abm.abm-partner h3,.abm.abm-partner h4,.abm.abm-partner p,.abm.abm-partner span,.abm.abm-partner b{text-transform:none}
.abm.abm-partner .segctl button[aria-selected="true"]{background:var(--accent);color:#fff}
.abm.abm-partner .seg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px}
.abm.abm-partner .seg-bar>span{font-weight:600}
.abm.abm-partner .seg-role{margin-top:18px;max-width:760px}

/* App align (class app-align, next to app-shell on the BisbrickMaster brick of the CRM list pages):
   the logo, the app menu, the page title, the stat strip, the tabs and the table all start on the
   page gutter (--app-gutter of App shell). The inset came from Bootstrap's column padding (12px a side)
   in the page's MultiColumns, one step per nesting level, and from the logo's own 20px in the master's
   floating menu. Only a column that starts a line loses its left padding, so the space between
   columns on one line stays. Generated by CRM-App-spec/local/align-crm-gutter.mjs. */

/* Logo: the master's navigationBar sets padding-left 20px inline on the logo link. */
.app610-bakkerij .app-shell.app-align > header .nb-logo {
  padding-left: var(--app-gutter) !important;
}

/* Level 1: the columns of a page block's MultiColumn. Level 2: the columns of a MultiColumn in such a
   column, directly or as the content of a TabContent tab (List / Card / Board). */
.app610-bakkerij .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.app610-bakkerij .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div),
.app610-bakkerij .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div:is(:first-child, .col-md-12, .col-md-12 + div) {
  padding-left: 0;
}
/* A full-width column also ends on the gutter: the tabs and the table end where the menu ends. */
.app610-bakkerij .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.app610-bakkerij .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12,
.app610-bakkerij .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div.col-md-12 {
  padding-right: 0;
}
/* Below 768px every column is full width, so every column starts a line. */
@media (max-width: 767.98px) {
.app610-bakkerij .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div,
.app610-bakkerij .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-multi-column > a > section > .background > div > .row > div,
.app610-bakkerij .app-shell.app-align > main > bisbrick-list > div:not(:first-child) > bisbrick-multi-column > a > section > .background > div > .row > div > bisbrick-tab-content > .tab-content > bisbrick-multi-column > a > section > .background > div > .row > div {
    padding-left: 0;
    padding-right: 0;
  }
}

.app610-bakkerij .app-shell .app-focus .app-focus__list,
.app610-bakkerij .app-shell .app-focus .app-focus__checks {
  display: flex;
  flex-direction: column;
}
.app610-bakkerij .app-shell .app-focus .app-focus__row,
.app610-bakkerij .app-shell .app-focus .app-focus__check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #E4E0D8;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #292D3E;
}
.app610-bakkerij .app-shell .app-focus .app-focus__row:last-of-type,
.app610-bakkerij .app-shell .app-focus .app-focus__check:last-child {
  border-bottom: 0;
}
.app610-bakkerij .app-shell .app-focus .app-focus__row[data-n="0"],
.app610-bakkerij .app-shell .app-focus .app-focus__row[data-n=""] {
  display: none;
}
.app610-bakkerij .app-shell .app-focus .app-focus__count {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 5px;
  background: #F6F4F0;
  font-family: "Poppins-600";
  text-align: center;
}
.app610-bakkerij .app-shell .app-focus .app-focus__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app610-bakkerij .app-shell .app-focus .app-focus__detail {
  margin-left: 8px;
  color: #5F6475;
  font-size: 13px;
}
.app610-bakkerij .app-shell .app-focus .app-focus__go {
  flex: 0 0 auto;
  font-size: 13px;
  color: #F45F3A;
  text-decoration: none;
}
.app610-bakkerij .app-shell .app-focus .app-focus__go:hover {
  text-decoration: underline;
}
.app610-bakkerij .app-shell .app-focus .app-focus__go::after {
  content: " \203A";
}
.app610-bakkerij .app-shell .app-focus .app-focus__empty {
  display: none;
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  color: #5F6475;
}
.app610-bakkerij .app-shell .app-focus .app-focus__list[data-total="0"] .app-focus__empty {
  display: block;
}
.app610-bakkerij .app-shell .app-focus .app-focus__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.app610-bakkerij .app-shell .app-focus .app-focus__score {
  flex: 0 0 auto;
  font-family: "Poppins-600";
  font-size: 14px;
  color: #292D3E;
}
.app610-bakkerij .app-shell .app-focus .app-focus__bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: #F6F4F0;
  overflow: hidden;
}
.app610-bakkerij .app-shell .app-focus .app-focus__bar > span {
  display: block;
  height: 100%;
  max-width: 100%;
  background: #2E7D4F;
}
.app610-bakkerij .app-shell .app-focus .app-focus__mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1.5px solid #5F6475;
  border-radius: 50%;
}
/* Done checks: below the open ones, muted, without their fix link. */
.app610-bakkerij .app-shell .app-focus .app-focus__check[data-ok="1"],
.app610-bakkerij .app-shell .app-focus .app-focus__check[data-ok="true"] {
  order: 1;
  color: #5F6475;
}
.app610-bakkerij .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__mark,
.app610-bakkerij .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__mark {
  border-color: #2E7D4F;
  background: #2E7D4F;
}
.app610-bakkerij .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__go,
.app610-bakkerij .app-shell .app-focus .app-focus__check[data-ok="1"] .app-focus__detail,
.app610-bakkerij .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__go,
.app610-bakkerij .app-shell .app-focus .app-focus__check[data-ok="true"] .app-focus__detail {
  display: none;
}
/* App canvas: the chrome of the approved UI-refresh canvas (v28) for every page that carries the
   Campaign_menu Page component. Dark 52px app bar, white header band with the campaign tabs,
   grey page, white cards. Scope: theme 13, opt-in through the page's own Campaign_menu. */
.app610-bakkerij .app-shell:has(.Campaign_menu) {
  background: #F4F3F0;
  font-family: "Poppins-400", Poppins, sans-serif;
  color: #292D3E;
}

/* The tenant site menu and footer are not part of the app; the account links stay, inside the bar. */
.app610-bakkerij .app-shell:has(.Campaign_menu) > header > bisbrick-list,
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .bottom-bar,
.app610-bakkerij .app-shell:has(.Campaign_menu) > footer {
  display: none !important;
}
/* The site navigation-bar is sticky: hidden, it measures top 0, "sticks" and teleports itself to
   body as position:fixed, out of reach of the rule above. The Campaign_menu bar is not sticky. */
body:has(.app-shell .Campaign_menu) > .nb-wrapper {
  display: none !important;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header {
  position: relative;
  height: 0;
  z-index: 20;
  background: transparent;
  box-shadow: none;
  border: 0;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar {
  position: absolute;
  top: 0;
  right: 24px;
  height: 52px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .container {
  width: auto;
  max-width: none;
  padding: 0;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .navbar {
  padding: 0;
  background: transparent;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .nav-item.language {
  display: none;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .nav-item {
  padding: 0;
  margin: 0;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .nav-link {
  color: #D6D8E0 !important;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .nav-link span {
  font-weight: 400;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:hover {
  color: #FFFFFF !important;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .nav-link .fa-user {
  display: none;
}
/* The account name as the round avatar of the canvas (first letter; the full name is the tooltip-less link) */
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .nav-item:has(.fa-user) {
  order: 9;
  margin-left: 8px;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #F4F3F0;
  color: #292D3E;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > header .top-bar .nav-link:has(.fa-user) span::first-letter {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
}

/* App bar */
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(> .Campaign_menu) {
  padding: 0;
}
.app610-bakkerij .app-shell .Campaign_menu section,
.app610-bakkerij .app-shell .Campaign_menu .background {
  background: #292D3E !important;
  padding: 0 !important;
  margin: 0;
}
.app610-bakkerij .app-shell .Campaign_menu .background > div {
  max-width: none;
  margin: 0 auto;
  padding: 0 24px;
}
.app610-bakkerij .app-shell .Campaign_menu .row {
  margin: 0;
}
.app610-bakkerij .app-shell .Campaign_menu .row > div {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
  padding: 0 !important;
}
.app610-bakkerij .app-shell .Campaign_menu .nb-wrapper,
.app610-bakkerij .app-shell .Campaign_menu .navigation-bar {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  min-height: 52px;
  height: 52px;
  padding: 0 !important;
}
.app610-bakkerij .app-shell .Campaign_menu .navigation-bar {
  display: flex;
  align-items: center;
  gap: 6px 22px;
}
.app610-bakkerij .app-shell .Campaign_menu .nb-zone-left {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
}
.app610-bakkerij .app-shell .Campaign_menu .nb-zone-left::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #F4F3F0;
  margin-right: 20px;
}
.app610-bakkerij .app-shell .Campaign_menu .nb-zone-center {
  display: none;
}
.app610-bakkerij .app-shell .Campaign_menu .nb-zone-right {
  margin-right: 300px;
}
/* Narrow screens: the navigation-bar folds into its hamburger; keep it visible on the dark bar,
   left of the account links. */
@media (max-width: 992px) {
  .app610-bakkerij .app-shell .Campaign_menu .nb-hamburger {
    color: #F4F3F0;
    margin-right: 300px;
  }
  .app610-bakkerij .app-shell .Campaign_menu .nb-zone-right {
    margin-right: 0;
  }
}
.app610-bakkerij .app-shell .Campaign_menu .nb-link {
  color: #D6D8E0 !important;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-size: 13px !important;
  font-weight: 400;
  padding: 6px 12px !important;
  border-radius: 5px;
  text-decoration: none;
  background: transparent;
  line-height: 1.5;
}
.app610-bakkerij .app-shell .Campaign_menu .nb-link::after {
  display: none !important;
}
.app610-bakkerij .app-shell .Campaign_menu .nb-link:hover {
  color: #FFFFFF !important;
}
/* Only the current page. active-parent is added by bisbrick-url but never removed on navigation,
   so it is reset to a plain link explicitly (the theme styles it as active too). */
.app610-bakkerij .app-shell .Campaign_menu .nb-link.active-parent:not(.nb-active) {
  color: #D6D8E0 !important;
  background: transparent;
  font-family: "Poppins-400", Poppins, sans-serif;
  font-weight: 400;
}
/* The page names its own menu item through app-nav-N on the master (a campaign has no nb-active). */
.app610-bakkerij .app-shell.app-nav-1 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(1) > .nb-link,
.app610-bakkerij .app-shell.app-nav-2 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(2) > .nb-link,
.app610-bakkerij .app-shell.app-nav-3 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(3) > .nb-link,
.app610-bakkerij .app-shell.app-nav-4 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(4) > .nb-link,
.app610-bakkerij .app-shell.app-nav-5 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(5) > .nb-link,
.app610-bakkerij .app-shell.app-nav-6 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(6) > .nb-link,
.app610-bakkerij .app-shell.app-nav-7 .Campaign_menu .nb-zone-left > .nb-item:nth-of-type(7) > .nb-link,
.app610-bakkerij .app-shell .Campaign_menu .nb-link.nb-active {
  color: #292D3E !important;
  background: #F4F3F0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
}

/* Page body: fluid, 24px gutters (Koos 2026-10-15: lists must use the full width, no 1200px column) */
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list {
  display: block;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:not(:has(> .Campaign_menu)) {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  float: none;
}

/* Header band (white, full width): campaign name, status, actions, then the section tabs */
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) {
  background: #FFFFFF;
  /* sideways only: a clip-path here would also cut off menus that open below the band */
  border-image: linear-gradient(#FFFFFF, #FFFFFF) fill 0 / 0 / 0 100vmax;
  padding-top: 12px;
  padding-bottom: 10px;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) section,
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .background {
  background: transparent !important;
  padding: 0 !important;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row {
  align-items: center;
  flex-wrap: nowrap;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div:has(.app-head) .row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.app610-bakkerij .app-shell .app-head p {
  margin: 0;
}
.app610-bakkerij .app-shell .app-head > bisbrick-html-with-link > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.app610-bakkerij .app-shell .app-head .app-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px 0 12px;
  background: #F4F3F0;
  border-radius: 5px 0 0 5px;
  font-size: 0;
  margin-right: -14px !important;
}
.app610-bakkerij .app-shell .app-head .app-crumb::before {
  content: "Campaign";
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
  font-weight: 600;
}
.app610-bakkerij .app-shell .app-head .app-crumb a {
  display: none;
}
.app610-bakkerij .app-shell .app-head .app-title {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px 0 10px;
  background: #F4F3F0;
  border-radius: 0 5px 5px 0;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 17px !important;
  line-height: 1.2;
  color: #292D3E;
}
.app610-bakkerij .app-shell .app-head .app-meta {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 200px;
  font-size: 13px;
  color: #5F6475;
}
.app610-bakkerij .app-shell .app-head .app-meta > span:not(.app-badge) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.app610-bakkerij .app-shell .app-head .app-badge {
  display: inline-block;
  min-width: 88px;
  box-sizing: border-box;
  text-align: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  background: #F1ECE4;
  color: #5F6475;
}
.app610-bakkerij .app-shell .app-head .app-badge[data-s="live"],
.app610-bakkerij .app-shell .app-head .app-badge[data-s="Live"] {
  background: #E3F2E8;
  color: #1F6B3A;
}
.app610-bakkerij .app-shell .app-head-actions .app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.app610-bakkerij .app-shell .app-head-actions .app-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 5px;
}
.app610-bakkerij .app-shell .app-head-actions .app-stop .app-btn {
  color: #B3261E;
  box-shadow: inset 0 0 0 1px #E8C9C6;
  border: 0;
}

/* Section tabs: the top TabContent of the page sits in the white band, the rest is grey */
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs {
  background: #FFFFFF;
  box-shadow: 0 0 0 100vmax #FFFFFF, 0 1px 0 100vmax #E6E0D6;
  clip-path: inset(0 -100vmax -1px);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab {
  padding: 10px 14px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #F45F3A;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) > main > bisbrick-list > div > .TabContent > .grid-tabs > .grid-tab::after {
  display: none;
}

/* Inner views (sub tabs) look like the card's segment row of the canvas */
.app610-bakkerij .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #EFEAE1;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
  box-shadow: none;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab {
  padding: 12px 10px;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #5F6475;
  font-size: 13px;
  box-shadow: none;
  flex: none;
  max-width: none;
}
.app610-bakkerij .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab {
  color: #292D3E;
  font-family: "Poppins-600", Poppins, sans-serif;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 #292D3E;
}

/* Cards: white, 5px, hairline ring, no drop shadow */
.app610-bakkerij .app-shell:has(.Campaign_menu) .app-card,
.app610-bakkerij .app-shell:has(.Campaign_menu) .app-panel {
  background: #FFFFFF;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #E4E0D8;
}

/* Boolean switch (SurveyJS sd-boolean) in app forms, full pages AND popups. Survey theme "Default"
   of theme 13 (SurveyThemes Id 2) sets --sjs-primary-backcolor to rgba(37,137,229,0): the thumb
   text is drawn in that colour, so the selected value vanished and the switch read as an empty
   knob next to the OTHER label. Popups render in an ngb-modal-window on body, outside .app-shell,
   hence the body:has() scope. Redefined on the boolean only: buttons and other inputs keep theirs. */
.app610-bakkerij .app-shell .sd-boolean,
body:has(.app610-bakkerij .app-shell) > ngb-modal-window.default .sd-boolean {
  --sjs-primary-backcolor: #F45F3A;
  --sjs-primary-backcolor-light: rgba(244, 95, 58, 0.1);
}

/* Sub tabs: straight blue underline (Koos 2026-10-15) */
.app610-bakkerij .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.app610-bakkerij .app-shell:has(.Campaign_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover,
.app610-bakkerij .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab,
.app610-bakkerij .app-shell:has(.Relations_menu) .tab-content .TabContent > .grid-tabs > .grid-tab.selected-grid-tab:hover {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 #2A78D6 !important;
  color: #292D3E;
}

.app610-bakkerij .app-shell .app-page-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  margin: 0 0 8px !important;
  padding: 0 16px 0 12px;
  background: #F4F3F0;
  border-radius: 5px;
  line-height: 1.2;
}
.app610-bakkerij .app-shell .app-page-label {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A8F9E;
}
.app610-bakkerij .app-shell .app-page-name {
  font-family: "Poppins-600", Poppins, sans-serif;
  font-size: 17px !important;
  font-weight: 600;
  color: #292D3E;
}
.app610-bakkerij .app-shell .app-page-sub {
  font-size: 14px !important;
  line-height: 1.5;
  color: #5A6377;
}

/* Campaign App home (home.mjs). Equal-height queue/warm cards, campaign tabs as a segmented control. */
/* MultiColumn nests host > a > section > .background > div > .row; the section is centred with inline auto margins, so every level is made a full-width flex column. */
.app-home .app-home-fill, .app-home .app-home-fill > a > section, .app-home .app-home-fill > section, .app-home .app-home-fill > a > section > .background, .app-home .app-home-fill > section > .background, .app-home .app-home-fill > a > section > .background > div, .app-home .app-home-fill > section > .background > div, .app-home .app-home-fill > a > section > .background > div > .row, .app-home .app-home-fill > section > .background > div > .row, .app-home .app-home-grow, .app-home .app-home-grow > a > section, .app-home .app-home-grow > section, .app-home .app-home-grow > a > section > .background, .app-home .app-home-grow > section > .background, .app-home .app-home-grow > a > section > .background > div, .app-home .app-home-grow > section > .background > div, .app-home .app-home-grow > a > section > .background > div > .row, .app-home .app-home-grow > section > .background > div > .row { display: flex; flex-direction: column; flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; width: 100%; box-sizing: border-box; }
.app-home .app-home-duo .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { display: flex; flex-direction: column; }
.app-home .app-home-fill .row > div:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.app-home .app-home-grow .row > div:last-child { margin-top: auto; }
.app-home .app-home-card .row { margin-left: 0; margin-right: 0; }
.app-home .app-home-cards .row { margin-left: -10px; margin-right: -10px; }
.app-home .app-home-h2 { min-height: 44px; display: flex; align-items: center; }
/* Native rows: the one text column takes the free width (queue: title; warm: why; campaign card: ready). */
.app-home .app-home-qrow .row > div:nth-child(3), .app-home .app-home-wrow .row > div:nth-child(6), .app-home .app-home-crow .row:not(.bb-variant-stat-strip .row) > div:nth-child(4) { flex: 1 1 0; min-width: 0; }
.app-home .app-home-qrow .row > div:nth-child(3) { flex-basis: 200px; }
/* Tabs: the app-shell tab rules (app-canvas.css) are !important, so these carry more classes. */
.app610-bakkerij .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs { display: inline-flex !important; gap: 4px !important; background: #FFFFFF !important; padding: 4px !important; border-radius: 5px !important; float: right !important; margin: -48px 0 16px !important; list-style: none !important; border: 0 !important; }
.app-home .app-home-segmented ul.grid-tabs + * { clear: both !important; }
.app610-bakkerij .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab { border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #292D3E !important; padding: 0 16px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; font-size: 13px !important; margin: 0 !important; box-shadow: none !important; transition: none !important; }
.app610-bakkerij .app-shell.app-home:has(.Campaign_menu) .app-home-segmented.TabContent > .grid-tabs > .grid-tab.grid-tab.selected-grid-tab { background: #292D3E !important; color: #FFFFFF !important; font-weight: 600 !important; }
.app-home .app-home-segmented li.grid-tab::after, .app-home .app-home-segmented li.grid-tab::before { display: none !important; }
@media (max-width: 900px) { .app-home .app-home-duo .row > .col-md-8, .app-home .app-home-duo .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; padding: 0 0 32px !important; } }

/* Relation type choice (popup /relations/popup/new-relation, class app-choice-wrap on the
   MultiColumn): two cards, "Organization" or "Individual contact". The choice exists because a
   contact under an organization and a contact in their own right are different records, and the
   old /relations/accounts page could not ask the question - there, a contact always hangs under an
   account. Generated by CRM-App-spec/local/gen-rel-choice-css.mjs. */

.app610-bakkerij .app-choice-wrap {
  padding: 4px 4px 8px;
}
.app610-bakkerij .app-choice-wrap .app-choice__lead {
  margin: 0 0 16px;
  font-family: "Poppins-400";
  font-size: 14px;
  line-height: 20px;
  color: #5F6475;
}

.app610-bakkerij .app-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* A popup is narrow on a phone; two cards side by side would each be too thin to read. */
@media (max-width: 560px) {
  .app610-bakkerij .app-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.app610-bakkerij .app-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #E4E0D8;
  border-radius: 8px;
  background: #FFFFFF;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.app610-bakkerij .app-choice:hover,
.app610-bakkerij .app-choice:focus-visible {
  border-color: var(--app-accent, #F45F3A);
  background: #FDF8F6;
}

.app610-bakkerij .app-choice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #F4F3F0;
  color: #5F6475;
}
.app610-bakkerij .app-choice:hover .app-choice__icon,
.app610-bakkerij .app-choice:focus-visible .app-choice__icon {
  color: var(--app-accent, #F45F3A);
}
.app610-bakkerij .app-choice__icon svg {
  width: 18px;
  height: 18px;
}

.app610-bakkerij .app-choice__body {
  display: block;
  min-width: 0;
}
.app610-bakkerij .app-choice__title {
  display: block;
  font-family: "Poppins-600";
  font-size: 15px;
  line-height: 20px;
  color: #292D3E;
}
.app610-bakkerij .app-choice__sub {
  display: block;
  margin-top: 4px;
  font-family: "Poppins-400";
  font-size: 13px;
  line-height: 18px;
  color: #5F6475;
}

.bbh.bb-home{font-family:Inter, Arial, sans-serif; color:#292D3E; background:#F7F4F0; font-size:16px; line-height:1.55; overflow-x:clip; text-align:left; -webkit-font-smoothing:antialiased}
.bbh.bb-home p,.bbh.bb-home li,.bbh.bb-home summary,.bbh.bb-home label,.bbh.bb-home input,.bbh.bb-home button,.bbh.bb-home span,.bbh.bb-home a,.bbh.bb-home div,.bbh.bb-home b{font-family:inherit; letter-spacing:inherit}
.bbh.bb-home h1,.bbh.bb-home h2,.bbh.bb-home h3,.bbh.bb-home h4{text-transform:none}
.bbh.bb-home a{color:#292D3E}
.bbh.bb-home a:hover{color:#5B52C7}
.bbh.bb-home a:focus-visible,.bbh.bb-home button:focus-visible,.bbh.bb-home summary:focus-visible{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home summary{cursor:pointer}
.bbh.bb-home [hidden]{display:none !important}
.bbh.bb-home .ic{display:inline-block; flex:0 0 auto; vertical-align:middle; background-color:currentColor; -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat}
.bbh.bb-home .ic-i1{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20275%20274%22%3E%3Cpath%20d%3D%22M274.214%2068.5C274.214%2030.6728%20243.517%200%20205.66%200H85.6918C76.2276%200%2068.5534%207.66819%2068.5534%2017.125V68.5H17.1384C7.67418%2068.5%200%2076.1682%200%2085.625V205.804C0%20241.463%2027.269%20270.765%2062.117%20274H205.66C243.517%20274%20274.214%20243.327%20274.214%20205.5C274.214%20167.673%20243.517%20137%20205.66%20137C243.517%20137%20274.214%20106.327%20274.214%2068.5Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i2{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cpolyline%20points%3D%2212%205%2019%2012%2012%2019%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i3{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i4{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i5{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%203v6c0%205-3.5%208-8%209-4.5-1-8-4-8-9V6z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i6{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M12%202l2.2%205.8L20%2010l-5.8%202.2L12%2018l-2.2-5.8L4%2010l5.8-2.2z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i7{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i8{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5.4%205.4L3%2018l3%203%206.3-6.3a4%204%200%200%200%205.4-5.4l-2.5%202.5-2.4-.6-.6-2.4z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i9{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2214%22%20x2%3D%2214%22%20y2%3D%2214%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2217%22%20x2%3D%2217%22%20y2%3D%2217%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i10{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2213%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i11{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18%2014a6.5%206.5%200%200%201%203.5%206%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i12{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a1%201%200%200%200%201%201h3l6%204V6L7%2010H4a1%201%200%200%200-1%201z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17%208.5a5%205%200%200%201%200%207%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i13{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209l10-5%2010%205-10%205z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M6%2011v5c0%201.5%202.7%203%206%203s6-1.5%206-3v-5%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i14{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M4%2021a8%208%200%200%201%2016%200%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i15{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021h8%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%2017v4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%204h10v5a5%205%200%200%201-10%200z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17%206h3v2a3%203%200%200%201-3%203%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%206H4v2a3%203%200%200%200%203%203%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i16{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i17{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z%22%3E%3C%2Fpath%3E%3Cpolyline%20points%3D%2214%203%2014%209%2020%209%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%228%22%20y1%3D%2214%22%20x2%3D%2216%22%20y2%3D%2214%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i18{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%223%22%20y1%3D%229%22%20x2%3D%2221%22%20y2%3D%229%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i19{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%228%22%20y1%3D%228%22%20x2%3D%2216%22%20y2%3D%228%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%2216%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2216%22%20x2%3D%2212%22%20y2%3D%2216%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i20{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222.5%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%222.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M8.5%206H14a4%204%200%200%201%200%208h-4a4%204%200%200%200%200%208%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i21{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%228%206%203%2012%208%2018%22%3E%3C%2Fpolyline%3E%3Cpolyline%20points%3D%2216%206%2021%2012%2016%2018%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i22{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%227%22%20width%3D%2214%22%20height%3D%2212%22%20rx%3D%223%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2212%22%20y1%3D%223%22%20x2%3D%2212%22%20y2%3D%227%22%3E%3C%2Fline%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2213%22%20r%3D%221%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2213%22%20r%3D%221%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i23{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%225%22%20rx%3D%228%22%20ry%3D%223%22%3E%3C%2Fellipse%3E%3Cpath%20d%3D%22M4%205v6c0%201.7%203.6%203%208%203s8-1.3%208-3V5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4%2011v6c0%201.7%203.6%203%208%203s8-1.3%208-3v-6%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i24{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%207H6a5%205%200%200%200%200%2010h3%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%207h3a5%205%200%200%201%200%2010h-3%22%3E%3C%2Fpath%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%2216%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i25{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207a2%202%200%200%201%202-2h4l2%202h8a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i26{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V9z%22%3E%3C%2Fpath%3E%3Cpolyline%20points%3D%2214%203%2014%209%2020%209%22%3E%3C%2Fpolyline%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2214%22%20r%3D%222.5%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2213%22%20y1%3D%2216%22%20x2%3D%2215.5%22%20y2%3D%2218.5%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i27{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h5v16H4z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M9%204h5v16H9z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%205l4-1%202%2015-4%201z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i28{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%226%22%20x2%3D%2213%22%20y2%3D%226%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2211%22%20x2%3D%2219%22%20y2%3D%2211%22%3E%3C%2Fline%3E%3Cline%20x1%3D%226%22%20y1%3D%2216%22%20x2%3D%2214%22%20y2%3D%2216%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224%22%20y1%3D%2220%22%20x2%3D%2220%22%20y2%3D%2220%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i29{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%223%22%20y1%3D%229%22%20x2%3D%2221%22%20y2%3D%229%22%3E%3C%2Fline%3E%3Cline%20x1%3D%223%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%2214%22%3E%3C%2Fline%3E%3Cline%20x1%3D%229%22%20y1%3D%224%22%20x2%3D%229%22%20y2%3D%2220%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i30{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%224%22%20y1%3D%227%22%20x2%3D%2220%22%20y2%3D%227%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224%22%20y1%3D%2217%22%20x2%3D%2220%22%20y2%3D%2217%22%3E%3C%2Fline%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%222.5%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2217%22%20r%3D%222.5%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i31{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2215%22%20y%3D%223%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3Crect%20x%3D%2211%22%20y%3D%2213%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%221.5%22%3E%3C%2Frect%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i32{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M12%203a9%209%200%200%200%200%2018%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%228%22%20cy%3D%229%22%20r%3D%221%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%228%22%20r%3D%221%22%20fill%3D%22%23000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i33{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2215%22%3E%3C%2Fline%3E%3Cline%20x1%3D%229%22%20y1%3D%2212%22%20x2%3D%2215%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i34{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpolyline%20points%3D%2212%207%2012%2012%2015.5%2014%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i35{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%3E%3C%2Frect%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%3E%3C%2Frect%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%3E%3C%2Frect%3E%3Cline%20x1%3D%2214%22%20y1%3D%2217.5%22%20x2%3D%2221%22%20y2%3D%2217.5%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2217.5%22%20y1%3D%2214%22%20x2%3D%2217.5%22%20y2%3D%2221%22%3E%3C%2Fline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i36{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2215%206%209%2012%2015%2018%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i37{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%229%206%2015%2012%209%2018%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i38{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%206l-6%206%206%206%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i39{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i40{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i41{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h13v16H6a2%202%200%200%201-2-2Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17%208h3v10a2%202%200%200%201-2%202%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8%208h5M8%2012h5M8%2016h3%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i42{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.9%205.1L19%2010l-5.1%201.9L12%2017l-1.9-5.1L5%2010l5.1-1.9Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M19%2015l.8%202.2L22%2018l-2.2.8L19%2021l-.8-2.2L16%2018l2.2-.8Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i43{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M2.5%2020a6.5%206.5%200%200%201%2013%200%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207M18.5%2014.5A6.5%206.5%200%200%201%2021.5%2020%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i44{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i45{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%225%2012%2010%2017%2019%207%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .ic-i46{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpolyline%20points%3D%2212%207%2012%2012%2015%2014%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E")}
.bbh.bb-home .idea-field{width:100%; box-sizing:border-box; padding:13px 15px; border:1.5px solid #E4DFD8; border-radius:10px; background:#FFFFFF; color:#292D3E; font:inherit; font-size:15px; margin:0}
.bbh.bb-home .idea-field::placeholder{color:#8B90A0}
.bbh.bb-home .idea-field:focus{border-color:#5B52C7; outline:none; box-shadow:0 0 0 4px #EEEDFB}
.bbh.bb-home .idea-go{cursor:pointer; border:0; width:100%; font-family:inherit; line-height:1.55}
.bbh.bb-home .idea-go:hover{background:#3A3F55 !important}
.bbh.bb-home .hn-picker:hover{box-shadow:0 0 0 1px #5B52C7}
.bbh.bb-home .plan-dlg{border:0; border-radius:20px; padding:30px 30px 26px; box-sizing:border-box; width:100%; max-width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; margin:auto; background:#FFFFFF; color:#292D3E; font-family:Inter, Arial, sans-serif; font-size:16px; line-height:1.55; text-align:left; box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.bbh.bb-home .plan-dlg::backdrop{background:rgba(41,45,62,.45)}
.bbh.bb-home .plan-x{cursor:pointer; position:absolute; right:14px; top:12px; width:36px; height:36px; border:0; padding:0; border-radius:10px; background:transparent; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; color:#8B90A0}
.bbh.bb-home .plan-x:hover{background:#F7F4F0; color:#292D3E}
.bbh.bb-home .plan-steps li::marker{color:#5B52C7; font-weight:600}
.bbh.bb-home .plan-chips span{font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:7px; background:#F7F4F0; box-shadow:inset 0 0 0 1px #E4DFD8}
.bbh.bb-home .tk-in,.bbh.bb-home .sl-in{position:absolute; opacity:0; pointer-events:none}
.bbh.bb-home .tk-tab{cursor:pointer; background:#E8E6EA; color:#4A4E63; border-radius:999px; padding:11px 22px; font-weight:600; font-size:15px; transition:background .15s, color .15s}
.bbh.bb-home .tk-tab:hover{color:#292D3E}
.bbh.bb-home .tk-panel,.bbh.bb-home .sl{display:none}
.bbh.bb-home #hn-tk-build:checked ~ .tk-tabs label[for=hn-tk-build]{background:#FFFFFF; color:#5B52C7; box-shadow:0 4px 14px rgba(41,45,62,0.10)}
.bbh.bb-home #hn-tk-build:focus-visible ~ .tk-tabs label[for=hn-tk-build]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-tk-build:checked ~ .tk-panels .p-build{display:grid}
.bbh.bb-home #hn-tk-manage:checked ~ .tk-tabs label[for=hn-tk-manage]{background:#FFFFFF; color:#5B52C7; box-shadow:0 4px 14px rgba(41,45,62,0.10)}
.bbh.bb-home #hn-tk-manage:focus-visible ~ .tk-tabs label[for=hn-tk-manage]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-tk-manage:checked ~ .tk-panels .p-manage{display:grid}
.bbh.bb-home #hn-tk-apps:checked ~ .tk-tabs label[for=hn-tk-apps]{background:#FFFFFF; color:#5B52C7; box-shadow:0 4px 14px rgba(41,45,62,0.10)}
.bbh.bb-home #hn-tk-apps:focus-visible ~ .tk-tabs label[for=hn-tk-apps]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-tk-apps:checked ~ .tk-panels .p-apps{display:grid}
.bbh.bb-home #hn-tk-box:checked ~ .tk-tabs label[for=hn-tk-box]{background:#FFFFFF; color:#5B52C7; box-shadow:0 4px 14px rgba(41,45,62,0.10)}
.bbh.bb-home #hn-tk-box:focus-visible ~ .tk-tabs label[for=hn-tk-box]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-tk-box:checked ~ .tk-panels .p-box{display:grid}
.bbh.bb-home .sl-chip{cursor:pointer; border:1.5px solid #D9D4CC; border-radius:999px; padding:6px 12px; font-weight:600; font-size:13px; color:#4A4E63; background:#FFFFFF}
.bbh.bb-home .sl-chip:hover{border-color:#292D3E; color:#292D3E}
.bbh.bb-home .sl-arrow{cursor:pointer; width:44px; height:44px; border-radius:5px; border:1.5px solid #CFC9C1; background:#FFFFFF; display:flex; align-items:center; justify-content:center; color:#292D3E}
.bbh.bb-home .sl-arrow:hover{border-color:#292D3E}
.bbh.bb-home #hn-sl-1:checked ~ .sl-chips label[for=hn-sl-1]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-1:checked ~ .sl-track .s-1{display:flex}
.bbh.bb-home #hn-sl-1:focus-visible ~ .sl-chips label[for=hn-sl-1]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-2:checked ~ .sl-chips label[for=hn-sl-2]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-2:checked ~ .sl-track .s-2{display:flex}
.bbh.bb-home #hn-sl-2:focus-visible ~ .sl-chips label[for=hn-sl-2]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-3:checked ~ .sl-chips label[for=hn-sl-3]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-3:checked ~ .sl-track .s-3{display:flex}
.bbh.bb-home #hn-sl-3:focus-visible ~ .sl-chips label[for=hn-sl-3]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-4:checked ~ .sl-chips label[for=hn-sl-4]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-4:checked ~ .sl-track .s-4{display:flex}
.bbh.bb-home #hn-sl-4:focus-visible ~ .sl-chips label[for=hn-sl-4]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-5:checked ~ .sl-chips label[for=hn-sl-5]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-5:checked ~ .sl-track .s-5{display:flex}
.bbh.bb-home #hn-sl-5:focus-visible ~ .sl-chips label[for=hn-sl-5]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-6:checked ~ .sl-chips label[for=hn-sl-6]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-6:checked ~ .sl-track .s-6{display:flex}
.bbh.bb-home #hn-sl-6:focus-visible ~ .sl-chips label[for=hn-sl-6]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-7:checked ~ .sl-chips label[for=hn-sl-7]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-7:checked ~ .sl-track .s-7{display:flex}
.bbh.bb-home #hn-sl-7:focus-visible ~ .sl-chips label[for=hn-sl-7]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-8:checked ~ .sl-chips label[for=hn-sl-8]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-8:checked ~ .sl-track .s-8{display:flex}
.bbh.bb-home #hn-sl-8:focus-visible ~ .sl-chips label[for=hn-sl-8]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-9:checked ~ .sl-chips label[for=hn-sl-9]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-9:checked ~ .sl-track .s-9{display:flex}
.bbh.bb-home #hn-sl-9:focus-visible ~ .sl-chips label[for=hn-sl-9]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-10:checked ~ .sl-chips label[for=hn-sl-10]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-10:checked ~ .sl-track .s-10{display:flex}
.bbh.bb-home #hn-sl-10:focus-visible ~ .sl-chips label[for=hn-sl-10]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-11:checked ~ .sl-chips label[for=hn-sl-11]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-11:checked ~ .sl-track .s-11{display:flex}
.bbh.bb-home #hn-sl-11:focus-visible ~ .sl-chips label[for=hn-sl-11]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home #hn-sl-12:checked ~ .sl-chips label[for=hn-sl-12]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home #hn-sl-12:checked ~ .sl-track .s-12{display:flex}
.bbh.bb-home #hn-sl-12:focus-visible ~ .sl-chips label[for=hn-sl-12]{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home .hn-card{transition:box-shadow .15s}
.bbh.bb-home a.hn-card:hover{color:#292D3E; box-shadow:0 0 0 2px #5B52C7}
.bbh.bb-home a.hn-card:hover .hn-more{color:#5B52C7}
.bbh.bb-home .hn-link:hover{box-shadow:0 0 0 2px #5B52C7}
.bbh.bb-home .hn-link:hover .hn-more{color:#5B52C7}
.bbh.bb-home .hn-stretch::after{content:""; position:absolute; inset:0; border-radius:inherit}
.bbh.bb-home .hn-clamp{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; max-height:6.4em; line-height:1.6; pointer-events:none}
.bbh.bb-home .hn-clamp *{display:inline; margin:0; padding:0; border:0; background:none; box-shadow:none; font:inherit !important; color:inherit !important; text-decoration:none; white-space:normal}
.bbh.bb-home .hn-clamp br,.bbh.bb-home .hn-clamp img{display:none}
.bbh.bb-home .hn-clamp p::after,.bbh.bb-home .hn-clamp div::after{content:" "}
.bbh.bb-home [aria-current="page"]{color:#5B52C7; font-weight:700}
.bbh.bb-home .hn-app-dlg{max-width:min(920px, calc(100vw - 32px)); padding:0}
.bbh.bb-home .hn-app-in{position:relative; padding:26px 28px 28px; display:flex; flex-direction:column; gap:20px}
.bbh.bb-home .hn-carousel{display:flex; flex-direction:column; gap:10px}
.bbh.bb-home .hn-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; border-radius:14px}
.bbh.bb-home .hn-track::-webkit-scrollbar{display:none}
.bbh.bb-home .hn-track:focus-visible{outline:3px solid #5B52C7; outline-offset:2px}
.bbh.bb-home .hn-slide{flex:0 0 100%; scroll-snap-align:start; margin:0; display:flex; flex-direction:column; gap:8px}
.bbh.bb-home .hn-slide img,.bbh.bb-home .hn-slide video,.bbh.bb-home .hn-shot{display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; object-position:top left; border-radius:14px; background:#F7F4F0}
.bbh.bb-home .hn-shot{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; box-shadow:inset 0 0 0 1.5px rgba(41,45,62,.12)}
.bbh.bb-home .hn-shot > span:last-child{font-size:13px; font-weight:600; color:#5F6475}
.bbh.bb-home .hn-slide figcaption{font-size:14px; font-weight:600; color:#4A4E63}
.bbh.bb-home .hn-count{font-size:14px; color:#5F6475; margin-right:auto}
.bbh.bb-home .hn-nav{cursor:pointer; width:40px; height:40px; padding:0; margin:0; border-radius:5px; border:1.5px solid #CFC9C1; background:#FFFFFF; display:flex; align-items:center; justify-content:center}
.bbh.bb-home .hn-nav:hover{border-color:#292D3E}
@media (max-width:560px){.bbh.bb-home .hn-app-in{padding:20px 18px 22px}
}
.bbh.bb-home .hn-stack > summary{list-style:none; cursor:pointer}
.bbh.bb-home .hn-stack > summary::-webkit-details-marker{display:none}
.bbh.bb-home .hn-stack > summary:focus-visible{outline:3px solid #5B52C7; outline-offset:2px; border-radius:24px}
.bbh.bb-home .hn-stack-btn{color:#292D3E}
.bbh.bb-home .hn-stack > summary:hover .hn-stack-btn{background:#292D3E; color:#FFFFFF}
.bbh.bb-home .hn-stack-close,.bbh.bb-home .hn-stack[open] .hn-stack-open{display:none}
.bbh.bb-home .hn-stack[open] .hn-stack-close{display:inline}
.bbh.bb-home .hn-stack[open] .hn-chev{transform:rotate(225deg); margin-top:4px}
.bbh.bb-home .hn-help:hover{box-shadow:0 0 0 2px #5B52C7, 0 18px 40px -18px rgba(41,45,62,0.35)}
.bbh.bb-home .hn-days{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px}
.bbh.bb-home .hn-days:empty,.bbh.bb-home .hn-times:empty{display:none}
.bbh.bb-home .hn-day{cursor:pointer; font:inherit; font-size:13px; text-align:center; background:#FFFFFF; color:#292D3E; border:1.5px solid #E4DFD8; border-radius:12px; padding:8px 4px; margin:0}
.bbh.bb-home .hn-day span,.bbh.bb-home .hn-day b{display:block}
.bbh.bb-home .hn-day b{font-size:17px}
.bbh.bb-home .hn-day:hover{border-color:#292D3E}
.bbh.bb-home .hn-day[aria-pressed="true"]{background:#292D3E; border-color:#292D3E; color:#FFFFFF}
.bbh.bb-home .hn-times{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.bbh.bb-home .hn-time{cursor:pointer; font:inherit; font-size:15px; font-weight:600; text-align:center; background:#FFFFFF; color:#292D3E; border:1.5px solid #E4DFD8; border-radius:5px; padding:9px; margin:0}
.bbh.bb-home .hn-time:hover{border-color:#292D3E}
.bbh.bb-home .hn-time[aria-pressed="true"]{background:#F1EFFB; border-color:#5B52C7; color:#4A42B0}
.bbh.bb-home .hn-label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600}
.bbh.bb-home .hn-input{font:inherit; font-weight:400; font-size:16px; border:1.5px solid #CFC9C1; border-radius:12px; padding:13px 14px; background:#FFFFFF; color:#292D3E; margin:0; width:100%; box-sizing:border-box}
.bbh.bb-home .hn-input:focus{border-color:#5B52C7; outline:none; box-shadow:0 0 0 4px #EEEDFB}
.bbh.bb-home .hn-hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.bbh.bb-home .hn-book-go{cursor:pointer; font:inherit; font-weight:700; background:#292D3E; color:#FFFFFF; border:0; border-radius:10px; padding:14px; margin:0}
.bbh.bb-home .hn-book-go:hover{background:#3A3F55}
.bbh.bb-home .hn-book-go:disabled{opacity:.6; cursor:default}
@media (max-width:420px){.bbh.bb-home .hn-times{grid-template-columns:repeat(2, 1fr)}
.bbh.bb-home #hn-demo{padding:24px}
}

.bbh.bb-home.hn-grid{display:block; max-width:1240px; margin:0 auto; padding:0 24px 96px; box-sizing:border-box}
.bbh.bb-home.hn-grid .row{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:24px; margin:0}
.bbh.bb-home.hn-grid .row > div{width:auto; max-width:none; flex:none; padding:0; display:flex; flex-direction:column}
.bbh.bb-home.hn-grid .row > div *:has(.hn-card){display:flex; flex-direction:column; flex:1 1 auto}
.bbh.bb-home.hn-grid .hn-card{flex:1 1 auto}
.bbh.bb-home.hn-grid.hn-sm .row{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px}
.bbh.bb-home.hn-grid.hn-list{max-width:880px}
.bbh.bb-home.hn-grid.hn-list .row{display:flex; flex-direction:column; gap:12px}
body:has(.bbh.bb-home[data-block]) bisbrick-master-menu-content-footer > header,
body:has(.bbh.bb-home[data-block]) bisbrick-master-menu-content-footer > footer,
body:has(.bbh.bb-home[data-block]) bisbrick-floating-menu-bisbrick{display:none !important}
body:has(.bbh.bb-home[data-block]){background:#F7F4F0}