/* devanagari */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-01.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* vietnamese */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-02.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-03.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-04.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;
}
/* devanagari */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-01.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* vietnamese */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-02.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-03.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-04.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;
}
/* devanagari */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/baloo2-01.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* vietnamese */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/baloo2-02.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/baloo2-03.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/baloo2-04.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-05.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-06.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-07.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-08.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-11.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/baloo2-05.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/baloo2-06.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/baloo2-07.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/baloo2-08.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/baloo2-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/baloo2-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/baloo2-11.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-05.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-06.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-07.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-08.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/baloo2-11.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-05.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-06.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-07.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-08.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-11.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-12.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-13.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-14.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-15.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-16.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo2-17.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-12.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-13.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-14.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-15.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-16.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo2-17.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;
}


html{scroll-behavior:smooth}
body{margin:0;background:#FFF7F0;color:#161311;font-family:'Inter',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:#FE6403;text-decoration:none}a:hover{color:#D14C00}
::selection{background:#FE6403;color:#161311}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-9px) rotate(var(--r,0deg))}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* ---- the shared entrance keyframes ------------------------------------
   These lived in thank-you.html and onboarding.html only — while
   brand-report and brand-kit *declared* `animation:fadeUp` with no such
   keyframes in scope, so their accordion body and unlocked CTA animated
   nothing at all. An unknown animation-name fails silently: no error, no
   motion, and `both` fill just does nothing. Verified dead via getAnimations().
   The two copies had also drifted (14px vs 10px). One definition, 12px.
   prefers-reduced-motion is handled globally further down this file. */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes checkPop{0%{transform:scale(0)}55%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes glowPulse{0%,100%{opacity:.3}50%{opacity:.5}}
@keyframes burstPop{0%{transform:scale(.3) rotate(-14deg);opacity:0}55%{transform:scale(1.18) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.06)}24%{transform:scale(1)}}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER
   The grids below had grid-template-columns/gap lifted out of their inline
   style attributes so media queries can actually reach them. Breakpoints are
   content-driven, not device-driven: 980 (two-col narratives stack),
   900 (comparison scrolls), 760 (nav + timeline), 380 (single file).
   NOTE: no global box-sizing reset — this page is authored in content-box.
   ══════════════════════════════════════════════════════════════════════ */

img,svg{max-width:100%}

/* ---- grids: desktop defaults, now owned here ---- */
.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,48px)}
.fix-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,48px)}
/* desktop keeps a zero gap on purpose: the rail runs behind one continuous row */
.tl-grid{grid-template-columns:repeat(5,1fr);gap:0}
.cmp-row{grid-template-columns:1.3fr 1fr 1fr 1fr 1.15fr}
.cmp-wrap{overflow:hidden}

/* the badge overhangs the hero image by design; on mobile that overhang
   would fall outside the viewport and get clipped, so it tucks back in */
.hero-badge{left:-20px}
@media (max-width:560px){.hero-badge{left:0}}

/* breakpoint-free: these reflow on their own content width */
.problem-grid{grid-template-columns:repeat(auto-fit,minmax(min(228px,100%),1fr));gap:16px}
.ba-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px}
.tst-grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
.price-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px}

/* grid children default to min-width:auto and refuse to shrink; let them */
.hero-grid>*,.fix-grid>*,.problem-grid>*,.ba-grid>*,.tst-grid>*,.price-grid>*{min-width:0}

/* ---- hover states: restored from style-hover attrs the dropped JS ran ---- */
.hv1:hover{color:#FE6403}
.hv2:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #161311;color:#161311}
.hv3:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #161311;color:#fff;background:#D14C00}
.hv4:hover{background:rgba(255,247,240,.1);transform:translateY(-4px)}
.hv5:hover{box-shadow:6px 6px 0 #FE6403;transform:translate(-3px,-3px)}
.hv6:hover{box-shadow:7px 7px 0 rgba(254,100,3,.2);transform:translate(-3px,-3px)}
.hv7:hover{background:#161311;color:#FFF7F0}
.hv8:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 #FE6403}
.hv9:hover{background:#D14C00;color:#fff}
.hv10:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #D14C00;color:#FFF7F0}
.hv11:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #161311}
.hv12:hover{color:#FFF7F0}

/* ---- the "it's learning a business" demo: a JS stagger, rebuilt in CSS ---- */
.demo-step{animation:riseIn .5s ease both}
.demo-step:nth-child(1){animation-delay:.45s}
.demo-step:nth-child(2){animation-delay:.85s}
.demo-step:nth-child(3){animation-delay:1.25s}
.demo-step:nth-child(4){animation-delay:1.65s}
#demo-result{animation:riseIn .6s 2.15s ease both}

/* ---- 980: the two asymmetric narrative columns stack ---- */
@media (max-width:980px){
  .hero-grid,.fix-grid{grid-template-columns:1fr}
}

/* ---- 900: comparison keeps all 5 columns, scrolls, pins the label ---- */
@media (max-width:900px){
  .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp-row{min-width:700px}
  .cmp-row>:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 #f0e6da}
  .cmp-wrap>.cmp-row:first-child>:first-child{background:#FFF7F0}
}

/* ---- 760: nav drops to logo + CTA; timeline loses its rail and reflows ---- */
@media (max-width:760px){
  .nav-links a.hv1{display:none}
  .nav-bar{gap:16px}
  .tl-grid{grid-template-columns:repeat(2,1fr);gap:36px 14px}
  .tl-line{display:none}
}

/* ---- 380: single file ---- */
@media (max-width:380px){
  .tl-grid{grid-template-columns:1fr;gap:32px}
}

/* ---- respect a reduced-motion preference ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- 560: the footer bar stops fighting for one line ---- */
@media (max-width:560px){
  .footer-bar{flex-wrap:wrap;gap:12px}
  .footer-links{margin-left:0;flex-wrap:wrap;gap:16px}
}

/* ---- the one step crumb -----------------------------------------------
   Was four crumbs with four vocabularies: onboarding said "Sign up/Set up/
   Live", the others "Set up/Research/Brand …", and brand-report + brand-kit
   bolded every step — a progress indicator that indicated nothing. The steps
   are now the four pages that actually exist; `b` is the one you are on.
   "Live" is deliberately absent: there is no dashboard yet, and a crumb that
   promises a destination the product cannot reach is just a lie in a header. */
.dd-steps{margin-left:auto;display:flex;align-items:center;gap:7px;
          font:400 11px 'JetBrains Mono',monospace;color:#786E66}
.dd-steps b{font-weight:700;color:#161311}

@media (max-width:760px){
  .dd-steps{display:none}        /* first thing worth losing on a phone */
  .dd-logout{margin-left:auto}   /* ...which was the only thing right-aligning it */
}

/* ---- the one logout button --------------------------------------------
   This lived four times, once per app page, and drifted: onboarding's was
   1.5px/12px with no icon, and brand-kit's never got the 44px touch target.
   One definition, here. Pages keep ONLY their own layout line, because the
   right-alignment comes from the step crumb's margin-left:auto — give the
   logout an auto margin too and flexbox splits the free space between them,
   dropping the crumb into the middle. So it is auto only where the crumb hides. */
.dd-logout{flex:none;display:inline-flex;align-items:center;gap:7px;background:#fff;
           border:2px solid #161311;color:#161311;font:700 13.5px 'Inter';padding:9px 18px;
           border-radius:99px;white-space:nowrap;box-sizing:border-box;
           transition:background .18s ease,color .18s ease}
.dd-logout:hover{background:#161311;color:#FFF7F0}
.dd-logout svg{stroke:currentColor}
@media (max-width:760px), (pointer:coarse){
  .dd-logout{min-height:44px}
}

/* ---- touch targets ----------------------------------------------------
   Pointer-precision hit areas are too small for thumbs. These grow only
   where the input is coarse; the desktop look is untouched. -------------- */
.nav-links a.hv2{padding:10px 22px}

/* Keyed on the pointer, not the width: a 900px touch tablet needs thumb-sized
   targets and a 900px desktop window does not. The width clause stays because
   small viewports are overwhelmingly touch even when they lie about it. */
@media (max-width:760px), (pointer:coarse){
  /* primary CTA: 37px tall was below the 44px thumb minimum */
  .nav-links a.hv2{padding:0 22px;min-height:44px;display:inline-flex;align-items:center}
  /* padding-top only: padding-bottom would push the orange underline off the text */
  .watch-link{padding-top:10px}
  /* 17px and 15px tall: fine under a cursor, not under a thumb */
  .nav-links a.hv1{padding:6px 0}
  .footer-links a{padding:6px 0}
}

/* the dhanaadhan column is the punchline and it sits at the far right of the
   scroll; without a nudge a phone visitor never reaches it */
.cmp-hint{display:none}
@media (max-width:900px){
  .cmp-hint{display:block;text-align:right;margin:0 0 9px;
    font:600 11.5px 'JetBrains Mono',monospace;letter-spacing:.04em;color:#786E66}
}

/* ---- keyboard focus -----------------------------------------------------
   The page shipped with no focus styling at all. :focus-visible keeps the
   ring off mouse clicks and on for keyboard, and the dark ink reads against
   both the cream and the orange sections. -------------------------------- */
:focus-visible{outline:3px solid #161311;outline-offset:3px;border-radius:4px}
/* on the orange CTA band and the dark bar, ink-on-ink would vanish */
#cta :focus-visible,footer :focus-visible,#problem :focus-visible{outline-color:#FFF7F0}

/* skip link: 200 divs of chrome before the content otherwise */
.skip{position:absolute;top:0;left:0;z-index:300;background:#161311;color:#FFF7F0;
  padding:12px 18px;border-radius:0 0 10px 0;font:700 14px 'Inter';
  transform:translateY(-130%);transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.skip:focus{transform:translateY(0)}

/* ══════════════════════════════════════════════════════════════════════
   LEGAL PAGES (/terms, /privacy)
   Long-form reading: measure capped near 70ch, generous leading, and the
   same header container as the home nav so the wordmark lines up.
   ══════════════════════════════════════════════════════════════════════ */
.lg-head{border-bottom:2px solid #161311;background:#FFF7F0}
.lg-headin{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:16px;
           padding:13px clamp(16px,5vw,32px)}
.lg-headin > a:first-child{flex:none}   /* or flex squashes the wordmark at 320 */
.lg-headin img{height:45px;width:auto;display:block}   /* width:auto or the attrs squash it */
.lg-back{margin-left:auto;flex:none;border:1.5px solid #161311;color:#161311;font:700 12.5px 'Inter';
         padding:8px 16px;border-radius:99px;white-space:nowrap;
         transition:background .18s ease,color .18s ease}
.lg-back:hover{background:#161311;color:#FFF7F0}

.lg-wrap{max-width:760px;margin:0 auto;padding:clamp(30px,6vw,56px) clamp(18px,5vw,32px) 80px}
.lg-kicker{font:700 11.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#BC4901}
.lg-h1{font:800 clamp(30px,4.6vw,46px)/1.08 'Baloo 2';letter-spacing:-.02em;margin:12px 0 0}
.lg-meta{font:500 12.5px 'JetBrains Mono',monospace;color:#786E66;margin:12px 0 0}

/* Deliberately loud. These pages are an engineering scaffold, not legal advice;
   this banner is the thing stopping them being shipped as if they were.
   Delete it (and resolve every [TO CONFIRM]) only after a lawyer has signed off. */
.lg-draft{border:2px solid #161311;background:#161311;color:#FFF7F0;border-radius:16px;
          padding:18px 20px;margin:26px 0 0;box-shadow:5px 5px 0 #FE6403}
/* out-specified on purpose: `.lg-wrap b` and `.lg-wrap p` below are also (0,1,1)
   and sit later in this file, so they were winning and painting ink text onto
   this ink banner — the heading vanished entirely. */
.lg-wrap .lg-draft b{color:#FE6403;font:800 15px 'Baloo 2';display:block;margin-bottom:6px}
.lg-wrap .lg-draft p{font:400 13.5px/1.6 'Inter';color:rgba(255,247,240,.86);margin:0;max-width:none}

.lg-wrap h2{font:800 clamp(20px,2.6vw,25px) 'Baloo 2';letter-spacing:-.01em;margin:38px 0 0}
.lg-wrap p,.lg-wrap li{font:400 15.5px/1.7 'Inter';color:#3f3833}
.lg-wrap p{margin:10px 0 0;max-width:70ch}
.lg-wrap ul{margin:10px 0 0;padding-left:20px;max-width:70ch}
.lg-wrap li{margin:6px 0 0}
.lg-wrap b{color:#161311}
.lg-wrap a{color:#BC4901;font-weight:700}   /* #FE6403 is 2.8:1 at this size */
/* These hold whole sentences, not a token — nowrap made one 983px wide and it
   punched straight out of a 375px viewport. Let them wrap like the text they are. */
.lg-tbc{background:#FFEDE0;border:1.5px solid #BC4901;border-radius:6px;padding:1px 7px;
        font:700 11.5px/1.5 'JetBrains Mono',monospace;color:#BC4901;
        display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lg-foot{border-top:1px solid #e6ddd4;margin-top:44px;padding-top:22px;
         font:500 12.5px 'JetBrains Mono',monospace;color:#786E66;letter-spacing:.04em}

@media (max-width:760px), (pointer:coarse){
  .lg-back{min-height:44px;display:inline-flex;align-items:center}
  .lg-headin a{display:inline-block}
}
/* at 320 the wordmark + full label overrun by 9px, and neither may shrink
   (flex:none keeps the logo from squashing), so the label sheds a word */
@media (max-width:360px){
  .lg-back-long{display:none}
  .lg-headin{gap:10px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP SHELL — shared by /dashboard and /brand-brain-module
   The sidebar + top bar are injected by /app-shell.js so there is ONE source of
   the chrome markup; this is its ONE source of style. A fix here (contrast,
   collapse, z-index, mobile) reaches every app screen at once. Prefix `dsh-`.
   ═══════════════════════════════════════════════════════════════════════════ */
.dsh{display:flex;min-height:100vh;background:#FFF7F0}

/* sidebar. z-index:10 lifts the whole rail above the sticky top bar (z:5) so the
   collapse handle's edge-straddling half (right:-13px) paints over it, not under. */
.dsh-side{width:230px;flex-shrink:0;background:#161311;color:#FFF7F0;display:flex;
          flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;box-sizing:border-box;
          z-index:10;transition:width .2s ease,padding .2s ease}
.dsh-logo{display:flex;align-items:center;gap:10px;padding:0 6px 22px}
.dsh-logo img{height:30px;width:auto;display:block}
/* out-specify `.dsh-logo img{display:block}` (0,1,1) or the mark shows expanded too */
.dsh-logo img.dsh-lmark{display:none}
/* collapse toggle — an edge handle pinned to the sidebar's right border at a fixed
   spot (top:22px, right:-13px), so it never moves between states. White utility
   pill (orange is reserved for primary/active); reads on both halves of the divider. */
.dsh-collapse{display:none;position:absolute;top:22px;right:-13px;z-index:7;
              width:26px;height:26px;align-items:center;justify-content:center;
              border:2px solid #161311;background:#fff;color:#161311;border-radius:50%;
              cursor:pointer;box-shadow:2px 2px 0 #161311;
              transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.dsh-collapse:hover{background:#FE6403;transform:translate(-1px,-1px);box-shadow:3px 3px 0 #161311}
.dsh-collapse svg{stroke:currentColor;transition:transform .2s ease}
.dsh-nav{display:flex;flex-direction:column;gap:3px}
/* box-sizing is not global on this stylesheet (see the note above), and these are <a>
   elements, so they do not get border-box from the browser the way a <button> does:
   width:100% plus 24px of padding put every nav item 24px past the sidebar's content box
   and 8px beyond the sidebar itself. */
.dsh-ni{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
        color:#C9BFB7;font:600 13.5px 'Inter';background:none;border:0;width:100%;box-sizing:border-box;
        text-align:left;cursor:pointer;text-decoration:none;transition:background .15s ease,color .15s ease}
.dsh-ni svg{flex:none;stroke:currentColor}
.dsh-ni:hover{background:#241f1b;color:#FFF7F0}
.dsh-ni.on{background:#FE6403;color:#161311;font-weight:700}
.dsh-ni.on:hover{background:#FE6403;color:#161311}      /* active stays put */
.dsh-ni.soon{color:#8a8078;cursor:default}              /* #6f665f was 3.30 on ink; 4.79 */
.dsh-ni.soon:hover{background:none;color:#8a8078}
.dsh-badge{margin-left:auto;font:700 10px 'JetBrains Mono',monospace;padding:2px 7px;border-radius:99px}
.dsh-badge.orange{background:#FE6403;color:#161311}
/* on the active orange pill an orange badge is invisible (orange-on-orange) —
   flip it to ink so the count still reads (e.g. Calendar's pending badge). */
.dsh-ni.on .dsh-badge.orange{background:#161311;color:#FFF7F0}
.dsh-badge.red{background:#B2402F;color:#fff}
.dsh-badge.soon{background:#332c27;color:#a89e95;font-size:9px}   /* was #9b9088 = 4.40 */
.dsh-foot{margin-top:auto;display:flex;flex-direction:column;gap:3px}
/* the user block is a link to the Profile page on every screen; highlighted (.on)
   when you're on Profile. Separated from Settings by a top divider. */
.dsh-user{display:flex;align-items:center;gap:10px;padding:9px 8px;margin-top:9px;border-radius:10px;
          border-top:1px solid #2c2621;text-decoration:none;color:inherit;transition:background .15s ease}
.dsh-user:hover{background:#241f1b}
.dsh-user.on{background:#241f1b}
.dsh-av{width:32px;height:32px;flex:none;border-radius:50%;background:#FE6403;color:#161311;
        display:flex;align-items:center;justify-content:center;font:800 13px 'Baloo 2'}
.dsh-un{font:700 12.5px 'Inter'}
.dsh-ur{font:400 10.5px 'JetBrains Mono',monospace;color:#9b9088}   /* 5.94 on ink */
/* real name/email can be long — keep the user block from overflowing the rail */
.dsh-un,.dsh-ur{max-width:158px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dsh-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dsh-top{display:flex;align-items:center;gap:14px;padding:16px clamp(16px,4vw,34px);
         border-bottom:2px solid #161311;background:#FFF7F0;position:sticky;top:0;z-index:5;flex-wrap:wrap}
.dsh-switch{display:flex;align-items:center;gap:9px;border:2px solid #161311;background:#fff;
            border-radius:11px;padding:7px 13px;cursor:pointer;transition:background .15s ease}
.dsh-switch:hover{background:#FFF1E6}
.dsh-switch i{width:20px;height:20px;border-radius:6px;background:#7a4a2b;display:inline-block}
.dsh-switch b{font:700 13px 'Inter'}
.dsh-switch s{color:#786E66;font-size:11px;text-decoration:none}
.dsh-topr{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dsh-mode{display:inline-flex;align-items:center;gap:8px;background:#FFEFD6;border:2px solid #161311;
          border-radius:99px;padding:7px 14px;font:700 11.5px 'Inter'}
.dsh-mode svg{flex:none;stroke:#161311}
.dsh-bell{position:relative;display:flex;background:none;border:0;cursor:pointer;color:#161311}
.dsh-bell svg{stroke:currentColor}
.dsh-bdot{position:absolute;top:-5px;right:-6px;min-width:16px;height:16px;padding:0 3px;box-sizing:border-box;
          border-radius:99px;background:#B2402F;color:#fff;font:700 9.5px 'JetBrains Mono',monospace;
          display:flex;align-items:center;justify-content:center}

.dsh-body{padding:26px clamp(16px,4vw,34px) 44px;display:flex;flex-direction:column;gap:20px;
          max-width:1240px;width:100%;box-sizing:border-box}
.dsh-h1{font:800 27px/1 'Baloo 2';letter-spacing:-.02em;margin:0}

/* collapsed rail — DESKTOP ONLY. Gated >900px so it never fights the mobile
   top-bar below, whose lower-specificity selectors would otherwise lose. */
@media (min-width:901px){
  .dsh-collapse{display:flex}
  /* size via flex-basis: .dsh-side is a flex item, its used size comes from
     flex-basis — a plain `width` (even !important) is ignored on it. */
  .dsh.is-collapsed .dsh-side{flex-basis:68px;min-width:0;padding:22px 10px;align-items:stretch}
  .dsh.is-collapsed .dsh-logo{flex-direction:column;padding:0 0 18px;align-items:center}
  .dsh.is-collapsed .dsh-lfull{display:none}
  .dsh.is-collapsed .dsh-lmark{display:block;height:26px}
  .dsh.is-collapsed .dsh-collapse svg{transform:rotate(180deg)}   /* points right = expand */
  .dsh.is-collapsed .dsh-ni{justify-content:center;padding:10px 0;gap:0}
  .dsh.is-collapsed .dsh-lbl{display:none}
  /* numeric badge can't sit inline at 68px → 8px status dot on the icon */
  .dsh.is-collapsed .dsh-badge{position:absolute;top:4px;right:12px;min-width:8px;height:8px;
                               padding:0;font-size:0;border:1.5px solid #161311}
  .dsh.is-collapsed .dsh-user{justify-content:center;padding:9px 0}
  .dsh.is-collapsed .dsh-user > div:last-child{display:none}
}

@media (max-width:900px){
  /* the fixed dark rail becomes a top bar; nav scrolls sideways. Shell only —
     each page adds its own content grid rules in its own <style>. */
  .dsh{flex-direction:column}
  .dsh-side{width:auto;height:auto;position:sticky;top:0;flex-direction:row;align-items:center;
            gap:12px;padding:12px clamp(16px,4vw,20px);z-index:6}
  .dsh-logo{padding:0;flex:none}
  .dsh-nav{flex-direction:row;gap:6px;overflow-x:auto;flex:1;padding-bottom:2px;
           scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  /* width:auto undoes the `width:100%` above. That rule is right for the vertical rail —
     full width of the sidebar — and wrong the moment the rail becomes a horizontal bar,
     where 100% means 100% of the whole nav: every item was as wide as the bar, so a phone
     showed ONE nav item and hid the rest behind a sideways scroll. */
  .dsh-ni{flex:none;white-space:nowrap;width:auto}
  .dsh-ni .dsh-lbl{display:none}
  .dsh-ni.on .dsh-lbl{display:inline}
  .dsh-badge{margin-left:0}
  .dsh-foot{display:none}
  .dsh-side .dsh-top{position:static}
}

/* ── toast notifications (shared) ─────────────────────────────────────────
   Confirmation for actions that otherwise only change a small badge
   (approve/drop/schedule). window.dshToast(msg, kind) — kind: ok|err|info. */
.dsh-toasts{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;flex-direction:column;
            gap:9px;align-items:flex-end;pointer-events:none}
.dsh-toast{pointer-events:auto;max-width:340px;display:flex;align-items:flex-start;gap:9px;
           background:#fff;border:2px solid #161311;border-radius:11px;box-shadow:4px 4px 0 #161311;
           padding:10px 13px;font:600 12.5px/1.45 'Inter';color:#161311;
           animation:dshToastIn .22s ease both}
.dsh-toast .dsh-tico{flex:none;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;
                     justify-content:center;font:700 10px 'Inter';color:#fff;background:#166534;margin-top:1px}
.dsh-toast.err{border-color:#B2402F;box-shadow:4px 4px 0 #B2402F;color:#B2402F}
.dsh-toast.err .dsh-tico{background:#B2402F}
.dsh-toast.info .dsh-tico{background:#BC4901}
.dsh-toast.out{animation:dshToastOut .2s ease both}
@keyframes dshToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dshToastOut{to{opacity:0;transform:translateY(6px)}}
@media (max-width:640px){ .dsh-toasts{right:12px;left:12px;bottom:12px;align-items:stretch} }

/* ── dropdown (shared) ────────────────────────────────────────────────────
   A native <select> renders its OPEN list with the operating system: no border, font,
   radius or shadow from this file reaches it, so that grey rounded OS panel was the one
   thing on every screen that did not belong to the product. /dropdown.js rebuilds the
   panel and keeps the real <select> underneath as the value. Prefix `dd-sel`.

   Width: block by default so it fills a form field like the native control did. A caller
   that wants it inline beside a button constrains its own `.dd-sel`. */
.dd-sel{position:relative;display:block;width:100%}
.dd-sel > select{display:none}
.dd-seltrig{width:100%;display:flex;align-items:center;justify-content:space-between;gap:9px;
            font:600 14px 'Inter';border:2px solid #EDE7DF;border-radius:10px;padding:10px 12px;
            background:#fff;color:#161311;cursor:pointer;text-align:left;box-sizing:border-box;
            transition:border-color .15s ease,box-shadow .15s ease}
.dd-seltrig:hover{border-color:#161311}
.dd-seltrig:focus-visible{outline:none;border-color:#FE6403;box-shadow:2px 2px 0 #FE6403}
/* follows the <select> live: pages disable one while a request is in the air and enable it
   again, so a class copied onto the trigger at upgrade time would stick */
.dd-sel:has(> select:disabled) .dd-seltrig{opacity:.55;cursor:default;border-color:#EDE7DF}
.dd-sel.open .dd-seltrig{border-color:#161311;box-shadow:2px 2px 0 #161311}
.dd-seltrig svg{flex:none;stroke:currentColor;transition:transform .18s ease}
.dd-sel.open .dd-seltrig svg{transform:rotate(180deg)}
.dd-seltxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dd-selmenu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;
            max-height:262px;overflow-y:auto;margin:0;padding:5px;list-style:none;
            background:#fff;border:2px solid #161311;border-radius:12px;box-sizing:border-box;
            box-shadow:4px 4px 0 #161311;animation:dshPop .16s ease both}
.dd-sel.up .dd-selmenu{top:auto;bottom:calc(100% + 6px)}
.dd-selopt{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;
           font:600 13px 'Inter';color:#161311;cursor:pointer;white-space:nowrap}
.dd-selopt.active{background:#FFF1E6}
.dd-selopt.off{color:#9b9088;cursor:default}
.dd-selopt.off.active{background:none}
.dd-selopt[aria-selected="true"]{font-weight:800}
.dd-selopt[aria-selected="true"]::after{content:'✓';margin-left:auto;padding-left:10px;color:#BC4901}

/* ── confirm dialog (shared) ──────────────────────────────────────────────
   Replaces window.confirm() for destructive actions: the native dialog cannot be
   styled and reads as a browser warning rather than part of the product. */
.dsh-ovl{position:fixed;inset:0;z-index:200;background:rgba(22,19,17,.45);display:flex;
         align-items:center;justify-content:center;padding:20px;animation:dshFade .15s ease both}
.dsh-dlg{width:100%;max-width:420px;background:#fff;border:2px solid #161311;border-radius:14px;
         box-shadow:6px 6px 0 #161311;padding:20px;animation:dshPop .2s ease both}
.dsh-dlg h3{font:800 17px 'Baloo 2';color:#161311;margin:0 0 8px}
.dsh-dlg p{font:400 13.5px/1.55 'Inter';color:#5c534d;margin:0 0 18px}
.dsh-dacts{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.dsh-dbtn{border:2px solid #161311;border-radius:9px;padding:8px 15px;font:700 12.5px 'Inter';
          background:#fff;color:#161311;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.dsh-dbtn:hover{background:#FFF1E6;transform:translate(-1px,-1px);box-shadow:2px 2px 0 #161311}
.dsh-dbtn.go{background:#FE6403;box-shadow:3px 3px 0 #161311}
.dsh-dbtn.go:hover{background:#ff7d26;box-shadow:4px 4px 0 #161311}
.dsh-dbtn.danger{background:#B2402F;border-color:#B2402F;color:#fff;box-shadow:3px 3px 0 #161311}
.dsh-dbtn.danger:hover{background:#c4462f;box-shadow:4px 4px 0 #161311}
@keyframes dshFade{from{opacity:0}to{opacity:1}}
@keyframes dshPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ── notification bell + panel ────────────────────────────────────────────
   Derived from live state, so an item disappears when the thing it describes is
   dealt with. The dot only claims "unread", never a made-up number. */
.dsh-bellwrap{position:relative;display:flex}
.dsh-bell:disabled{opacity:.45;cursor:default}
.dsh-bdot{position:absolute;top:-3px;right:-4px;min-width:16px;height:16px;padding:0 4px;
          border-radius:99px;background:#FE6403;border:1.5px solid #161311;color:#161311;
          font:700 9.5px/13px 'JetBrains Mono',monospace;text-align:center}
.dsh-npanel{position:absolute;top:calc(100% + 10px);right:0;width:min(360px,calc(100vw - 32px));
            max-height:min(70vh,520px);overflow-y:auto;background:#fff;border:2px solid #161311;
            border-radius:14px;box-shadow:5px 5px 0 #161311;z-index:150;
            animation:dshPop .18s ease both}
.dsh-nhead{position:sticky;top:0;background:#FFF7F0;border-bottom:2px solid #161311;
           padding:10px 14px;font:800 13px 'Baloo 2';color:#161311;display:flex;align-items:center;gap:8px}
.dsh-nhead s{margin-left:auto;text-decoration:none;font:700 9.5px 'JetBrains Mono',monospace;color:#786E66}
.dsh-nitem{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid #EDE7DF;
           text-decoration:none;color:inherit;background:#fff}
.dsh-nitem:hover{background:#FFF1E6}
.dsh-nitem.unread{background:#FFF7F0}
.dsh-nitem:last-child{border-bottom:0}
.dsh-ndot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px;background:#C9BFB7}
/* The word behind the dot. Visually hidden rather than `display:none`, because
   display:none is hidden from assistive tech too — which would leave the colour as the
   only carrier again, which is the bug. */
.dsh-ntone{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
           clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dsh-nitem.good .dsh-ndot{background:#166534}
.dsh-nitem.bad .dsh-ndot{background:#B2402F}
.dsh-nitem.info .dsh-ndot{background:#FE6403}
.dsh-ntitle{font:700 12.5px/1.35 'Inter';color:#161311}
.dsh-nbody{font:400 11.5px/1.45 'Inter';color:#5c534d;margin-top:2px}
.dsh-nwhen{font:700 9px 'JetBrains Mono',monospace;color:#9b9088;margin-top:3px}
.dsh-nempty{padding:26px 16px;text-align:center;font:400 12.5px/1.6 'Inter';color:#786E66}
/* the panel's way out: the Dashboard already carries the full activity feed, so the bell
   links to it instead of a second page that would say the same thing less well. */
.dsh-nfoot{position:sticky;bottom:0;display:block;padding:10px 14px;text-align:center;
           background:#FFF7F0;border-top:2px solid #161311;text-decoration:none;
           font:700 11.5px 'Inter';color:#BC4901}
.dsh-nfoot:hover{background:#FFF1E6}

/* ── Chat messages + cards ─────────────────────────────────────────────────────
   Shared by the /chat screen AND the floating dock, so a card looks the same
   wherever the conversation is shown. Prefix `ch-`. */
.ch-owner{align-self:flex-end;background:#161311;color:#FFF7F0;border-radius:16px 16px 4px 16px;
          padding:11px 15px;max-width:78%;font:500 14.5px/1.5 'Inter';white-space:pre-wrap}
.ch-mgr{font:400 15px/1.6 'Inter';color:#3A362E;max-width:88%;white-space:pre-wrap}

.ch-card{background:#fff;border:2px solid #161311;border-radius:14px;box-shadow:4px 4px 0 #161311;
         padding:16px 18px;display:flex;flex-direction:column;gap:10px;max-width:520px}
.ch-eyebrow{font:700 10.5px 'JetBrains Mono',monospace;letter-spacing:.12em;color:#8B8579}
.ch-chip{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.1em;border-radius:8px;padding:5px 9px}
.ch-chip.wait{background:#FBE9DC;color:#B0480A}
.ch-chip.done{background:#EAF0E9;color:#4C7C59}
.ch-chip.need{background:#F8EFD8;color:#8A6A1F}
.ch-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ch-title{font:500 21px/1.25 'Baloo 2';color:#161311}
.ch-greet{font:500 26px/1.2 'Baloo 2';color:#161311}
.ch-row{display:flex;align-items:center;gap:11px}
.ch-dot{width:8px;height:8px;border-radius:99px;flex:none}
.ch-count{font:700 22px 'Baloo 2';color:#161311;min-width:34px}
.ch-label{font:500 14px 'Inter';color:#3A362E}
.ch-sep{border-top:1.5px solid #EDE7DF;padding-top:10px;display:flex;flex-direction:column;gap:3px}
.ch-poster{width:100%;max-width:330px;border-radius:10px;border:1.5px solid #EDE7DF;display:block;cursor:zoom-in}
.ch-acts{display:flex;gap:9px;flex-wrap:wrap}
.ch-btn{font:700 13.5px 'Inter';border:2px solid #161311;border-radius:10px;padding:10px 16px;
        background:#161311;color:#FFF7F0;cursor:pointer}
.ch-btn.ghost{background:#fff;color:#161311}
.ch-btn[disabled]{opacity:.45;cursor:default}
.ch-link{font:700 13px 'Inter';color:#BC4901;text-decoration:none}
.ch-note{font:500 12.5px 'Inter';color:#786E66}

.ch-working{display:flex;align-items:center;gap:10px;font:500 14px 'Inter';color:#786E66}
.ch-wd{display:flex;gap:4px}
.ch-wd i{width:6px;height:6px;border-radius:99px;background:#FE6403;animation:chb 1.2s ease infinite}
.ch-wd i:nth-child(2){animation-delay:.15s}.ch-wd i:nth-child(3){animation-delay:.3s}
.ch-working.done{color:#4C7C59}
.ch-working.stale{color:#B2402F}
.ch-working.done .ch-tick{color:#4C7C59}
.ch-working.stale .ch-tick{color:#B2402F}
.ch-tick{font:700 13px 'Inter'}
@keyframes chb{0%,60%,100%{opacity:.35}30%{opacity:1}}

/* ── Chat dock ──────────────────────────────────────────────────────────────────
   DhanaaDhan within reach on every app screen: a bubble bottom-right that opens a
   panel running the same thread as /chat (chat-core.js renders both). Prefix `chd-`;
   the message/card classes inside the panel are the chat screen's own `ch-*`. */
.chd-bubble{position:fixed;right:22px;bottom:22px;z-index:120;width:56px;height:56px;
  border-radius:99px;background:#FE6403;color:#161311;border:2px solid #161311;
  box-shadow:4px 4px 0 #161311;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .15s ease}
.chd-bubble:hover{transform:translateY(-2px)}
.chd-bubble.on{background:#161311;color:#FFF7F0}
.chd-badge{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;border-radius:99px;
  background:#161311;color:#FFF7F0;border:2px solid #FFF7F0;font:700 11px/18px 'Inter';
  text-align:center;padding:0 5px}
.chd-panel{position:fixed;right:22px;bottom:90px;z-index:120;width:390px;max-width:calc(100vw - 32px);
  height:min(560px,calc(100vh - 130px));background:#FFF7F0;border:2px solid #161311;
  border-radius:16px;box-shadow:8px 8px 0 rgba(22,19,17,.18);display:flex;flex-direction:column;
  overflow:hidden}
.chd-head{flex:none;display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1.5px solid #EDE7DF;background:#fff}
.chd-title{font:800 15px 'Baloo 2';color:#161311;flex:1}
.chd-full{font:700 11.5px 'Inter';color:#BC4901;text-decoration:none}
.chd-close{border:0;background:none;font:600 15px 'Inter';color:#786E66;cursor:pointer;padding:2px 4px}
.chd-scroll{flex:1;min-height:0;overflow-y:auto;padding:14px}
.chd-thread{display:flex;flex-direction:column;gap:13px}
.chd-thread .ch-card{max-width:none;box-shadow:3px 3px 0 #161311;padding:13px 14px}
.chd-thread .ch-greet{font-size:21px}
.chd-thread .ch-title{font-size:17px}
.chd-thread .ch-count{font-size:19px;min-width:28px}
.chd-thread .ch-poster{max-width:100%}
.chd-thread .ch-owner{font-size:14px;max-width:85%}
.chd-thread .ch-mgr{font-size:14.5px;max-width:100%}
.chd-foot{flex:none;display:flex;gap:8px;align-items:flex-end;padding:10px 12px 12px;
  border-top:1.5px solid #EDE7DF;background:#fff}
.chd-input{flex:1;font:400 14px/1.45 'Inter';color:#161311;background:#fff;border:2px solid #161311;
  border-radius:11px;padding:9px 12px;resize:none;max-height:110px;min-height:40px}
.chd-send{font:700 13px 'Inter';border:2px solid #161311;border-radius:11px;padding:10px 14px;
  background:#FE6403;color:#161311;cursor:pointer}
.chd-send[disabled]{opacity:.5;cursor:default}
@media (max-width:600px){
  .chd-bubble{right:16px;bottom:16px;width:50px;height:50px}
  .chd-panel{right:8px;left:8px;bottom:76px;width:auto;height:min(70vh,520px)}
}


/* "Load earlier messages" — history is opt-in in both the /chat screen and the dock. */
.ch-older {
  display: block; margin: 0 auto 14px; padding: 7px 15px;
  font: inherit; font-size: 12.5px; color: var(--sub, #7A756A);
  background: #FFFFFFB0; border: 1px solid var(--line, #E5E0D5); border-radius: 999px;
  cursor: pointer;
}
.ch-older:hover { color: var(--ink, #24211C); border-color: #D8D2C4; }


/* Message times + day separators — the same clock the app shows. */
.ch-stamped{display:flex;flex-direction:column;gap:6px}
.ch-stamped.own{align-items:flex-end}
/* the card carries a 2px border and a hard shadow, so the time needs room to sit CLEAR of
   it — flush underneath it reads as part of the frame */
.ch-stamp{font:400 9.5px 'JetBrains Mono',monospace;color:#9b928a;letter-spacing:.04em;
          padding:0 3px;line-height:1.2}
.ch-daymark{align-self:center;margin:6px auto;padding:4px 12px;border:2px solid #161311;
            border-radius:20px;background:#fff;font:700 9px 'JetBrains Mono',monospace;
            letter-spacing:.06em;color:#786E66}


/* Where a post went: IG / GBP, each with its own state. */
.dsh-nch{display:flex;gap:4px;margin-top:4px}
.dsh-chan{font:700 8.5px 'JetBrains Mono',monospace;letter-spacing:.04em;border-radius:20px;
          padding:2px 7px;border:1.5px solid #EDE7DF;background:#fff;color:#786E66}
.dsh-chan.published{background:#EAF6EF;border-color:#B7E0C6;color:#166534}
.dsh-chan.failed,.dsh-chan.blocked{background:#FBEAE7;border-color:#EEC2B9;color:#B2402F}

/* ── account switcher (managers hold more than one) ─────────────────────────────────── */
.dd-accts{background:#FFF7F0;border:2px solid #161311;border-radius:16px;box-shadow:6px 6px 0 #161311;
          padding:18px;min-width:300px;max-width:min(92vw,420px)}
.dd-accts h3{font:800 12px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
             color:#786E66;margin:0 0 12px}
.dd-acct{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
         box-sizing:border-box;background:#fff;border:2px solid #161311;border-radius:11px;
         padding:11px 13px;margin-bottom:9px;font:700 14px 'Inter';color:#161311;cursor:pointer;
         text-align:left;transition:background .15s ease}
.dd-acct:hover{background:#FFF1E6}
.dd-acct.on{background:#FE6403;color:#fff;box-shadow:3px 3px 0 #161311}
.dd-acct span{font:600 11px 'Inter';opacity:.7;white-space:nowrap}
.dd-acct[hidden]{display:none}
.dd-acctq{width:100%;box-sizing:border-box;background:#fff;border:2px solid #161311;
          border-radius:11px;padding:10px 13px;margin-bottom:12px;font:600 14px 'Inter';
          color:#161311}
.dd-acctq::placeholder{color:#A79B90;font-weight:500}
.dd-acctq:focus{outline:none;box-shadow:3px 3px 0 #FE6403}
.dd-acctnone{font:500 13px 'Inter';color:#786E66;margin:2px 0 0;text-align:center}

/* ── hold + the conversation about one poster (Creative Studio drawer) ───────────────── */
.cs-hold{margin-top:12px;padding-top:12px;border-top:1px solid #EFE7DC}
.cs-hold button{width:auto}
.cs-hold>span{display:block;margin-top:5px;font:400 11.5px 'Inter';color:#786E66}
.cs-hold.on{background:#FBEAE7;border:1.5px solid #EEC2B9;border-radius:11px;padding:11px 13px;border-top:1.5px solid #EEC2B9}
.cs-hold.on b{display:block;font:800 12px 'JetBrains Mono',monospace;letter-spacing:.06em;
              text-transform:uppercase;color:#B2402F;margin-bottom:4px}
.cs-hold.on div{font:400 12.5px/1.5 'Inter';color:#161311;margin-bottom:8px}

.cs-thread{margin-top:14px;padding-top:12px;border-top:1px solid #EFE7DC}
.cs-c{background:#FFF9F4;border:1.5px solid #EFE7DC;border-radius:11px;padding:10px 12px;margin-bottom:8px}
.cs-ch{display:flex;align-items:center;justify-content:space-between;gap:8px;
       font:700 12px 'Inter';margin-bottom:4px}
.cs-cb{font:400 12.5px/1.55 'Inter';color:#161311}
.cs-cn{margin-top:6px;font:400 11.5px/1.5 'Inter';color:#786E66;border-left:2px solid #C9BFB3;padding-left:8px}
.cs-cst{font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;
        border:1.5px solid #C9BFB3;border-radius:99px;padding:2px 7px;color:#786E66;white-space:nowrap}
.cs-cst.open{border-color:#FE6403;color:#BC4901;background:#FFF1E6}
.cs-cst.done{border-color:#7FB69A;color:#2F7A57;background:#EAF6EF}
.cs-ca{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.cs-cbtn{background:#fff;border:1.5px solid #161311;border-radius:8px;padding:5px 10px;
         font:700 11px 'Inter';cursor:pointer;color:#161311}
.cs-cbtn:hover{background:#FFF1E6}
.cs-cbtn.go{background:#FE6403;color:#fff;border-color:#161311}
.cs-cnone{font:400 12px 'Inter';color:#786E66;padding:4px 0 8px}
.cs-cnew{display:flex;gap:8px;align-items:flex-start;margin-top:6px}
.cs-cnew textarea{flex:1;font:400 12.5px 'Inter';padding:8px 10px;border:1.5px solid #DCD4C7;
                  border-radius:9px;background:#fff;resize:vertical}