/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_3.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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_4.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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_5.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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_6.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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_7.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/font_8.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/font_9.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/font_10.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/font_11.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/font_12.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/font_13.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_10.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_11.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_12.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_13.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: 600;
  font-display: swap;
  src: url("/assets/fonts/font_8.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: 600;
  font-display: swap;
  src: url("/assets/fonts/font_9.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: 600;
  font-display: swap;
  src: url("/assets/fonts/font_10.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: 600;
  font-display: swap;
  src: url("/assets/fonts/font_11.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: 600;
  font-display: swap;
  src: url("/assets/fonts/font_12.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: 600;
  font-display: swap;
  src: url("/assets/fonts/font_13.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_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: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_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: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_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: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_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: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_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 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_18.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_19.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_20.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_21.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_18.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_19.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_20.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_21.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_18.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_19.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_20.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_21.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_22.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_23.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/font_24.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_22.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_23.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/font_24.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_22.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_23.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/font_24.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/font_22.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/font_23.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/font_24.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;
}

/* ===========================================================
   WEFLAYR v8 — V3 with warm charcoal #2A2722
   Type: Space Grotesk · Instrument Serif (italic accents) · JetBrains Mono
   Palette: ink (warm near-black) · cream · bottle green · lime
   =========================================================== */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* type */
  --ff: 'Space Grotesk', system-ui, sans-serif;
  --ff-i: 'Instrument Serif', Georgia, serif;
  --ff-m: 'JetBrains Mono', ui-monospace, monospace;

  /* color */
  --ink: #2A2722;
  --ink-2: #322F2A;
  --ink-3: #3E3B35;
  --ink-line: rgba(255,255,255,0.09);
  --ink-line-2: rgba(255,255,255,0.16);

  --cream: #F4F1EA;
  --cream-2: #ECE7DD;
  --cream-3: #DFD8C8;
  --line: #E0D9C8;
  --line-2: #CFC6B0;

  --bottle: #1F4B2E;
  --bottle-mid: #2E6740;

  --lime: #D4FF3D;
  --lime-ink: #0E1A00;
  --lime-soft: rgba(212,255,61,0.22);

  --text: #16140F;
  --text-mid: #5B574E;
  --text-muted: #8E8B82;

  --good: #1F8A4F;
  --warn: #C57225;
  --bad: #C13030;
  --mid: #9D7A1F;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--ff);
  background:var(--cream);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","ss02";
  overflow-x:hidden;
}
::selection{background:var(--lime);color:var(--lime-ink)}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
em{font-style:italic}

/* Serif italic accent */
.serif-i{
  font-family:var(--ff-i);
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.01em;
}

/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.85s cubic-bezier(.2,.6,.2,1), transform 0.85s cubic-bezier(.2,.6,.2,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.08s}
.reveal-delay-2{transition-delay:0.16s}
.reveal-delay-3{transition-delay:0.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* =================== NAV =================== */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
  background:rgba(244,241,234,0.78);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--text);
}
.logo-mark{
  width:22px;height:22px;border-radius:6px;
  background:var(--ink);
  position:relative;
}
.logo-mark::after{
  content:"";position:absolute;inset:5px;border-radius:2px;background:var(--lime);
}
.logo-word{
  font-family:var(--ff);font-weight:600;font-size:18px;
  letter-spacing:-0.02em;
}
.logo-badge{
  font-family:var(--ff-m);font-size:10.5px;
  color:var(--text-muted);
  margin-left:6px;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,0.4);
  letter-spacing:-0.01em;
}
.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{
  font-size:13.5px;color:var(--text-mid);text-decoration:none;
  font-weight:500;letter-spacing:-0.01em;
  transition:color 0.2s;
}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:12px}
.btn-signin{
  background:none;border:none;color:var(--text-mid);font-size:13.5px;font-weight:500;letter-spacing:-0.01em;
}
.btn-signin:hover{color:var(--text)}
.btn-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:500;letter-spacing:-0.01em;
  padding:9px 16px 9px 14px;border-radius:999px;border:none;
  transition:background 0.2s, transform 0.2s;
}
.btn-cta:hover{background:#000;transform:translateY(-1px)}
.btn-cta-dot{
  width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px rgba(212,255,61,0.25);
  animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.45}}

/* =================== HERO =================== */
.hero{
  position:relative;
  background:var(--ink);color:var(--cream);
  padding:0 32px;overflow:hidden;
  isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-grid{
  position:absolute;inset:-20px;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
}
.hero-glow{
  position:absolute;
  width:900px;height:700px;
  left:35%;top:-180px;
  background:radial-gradient(ellipse at center, rgba(212,255,61,0.10) 0%, rgba(31,75,46,0.10) 30%, transparent 65%);
  filter:blur(40px);
  pointer-events:none;
}

.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:64px;align-items:center;
  max-width:1400px;margin:0 auto;
  padding:80px 0 110px;
}
.hero-left{padding-right:0}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-m);font-size:11px;
  color:rgba(244,241,234,0.6);letter-spacing:0;
  margin-bottom:36px;
  padding:6px 12px;
  border:1px solid var(--ink-line-2);border-radius:999px;
  background:rgba(255,255,255,0.03);
}
.ht-dot{
  width:6px;height:6px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px var(--lime-soft);
}
.ht-label{color:rgba(244,241,234,0.75)}

.hero-title{
  font-family:var(--ff);
  font-size:clamp(56px,8.2vw,108px);
  font-weight:500;
  line-height:0.95;
  letter-spacing:-0.045em;
  margin-bottom:30px;
  color:var(--cream);
}
.hero-title .serif-i{
  font-size:1.05em;
  letter-spacing:-0.025em;
  color:var(--lime);
  font-weight:400;
}
.hero-body{
  font-size:17px;line-height:1.6;
  color:rgba(244,241,234,0.72);
  font-weight:400;max-width:540px;
  text-wrap:pretty;margin-bottom:36px;
}
.hl{
  color:var(--cream);
  background:linear-gradient(180deg,transparent 60%,rgba(212,255,61,0.30) 60%,rgba(212,255,61,0.30) 92%,transparent 92%);
  padding:0 4px;margin:0 -2px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.hero-actions{display:flex;align-items:center;gap:20px;margin-bottom:64px}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--lime);color:var(--lime-ink);
  font-size:14.5px;font-weight:600;letter-spacing:-0.01em;
  padding:14px 22px;border-radius:999px;border:none;
  transition:transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,255,61,0.25)}
.btn-primary svg{transition:transform 0.2s}
.btn-primary:hover svg{transform:translateX(2px)}
.btn-ghost{
  background:none;border:none;
  color:rgba(244,241,234,0.75);
  font-size:14px;font-weight:500;letter-spacing:-0.01em;
}
.btn-ghost:hover{color:var(--cream)}
.bg-mono{font-family:var(--ff-m);font-size:13px;color:rgba(244,241,234,0.4)}

.hero-meta{
  display:flex;align-items:center;gap:0;
  padding-top:32px;
  border-top:1px solid var(--ink-line);
  max-width:540px;
}
.hm-row{display:flex;flex-direction:column;gap:2px;padding-right:32px}
.hm-num{
  font-family:var(--ff);font-weight:500;font-size:30px;
  letter-spacing:-0.04em;color:var(--cream);line-height:1;
}
.hm-unit{font-family:var(--ff-m);font-size:13px;color:rgba(244,241,234,0.45);margin-left:3px;font-weight:400}
.hm-lbl{font-family:var(--ff-m);font-size:11px;color:rgba(244,241,234,0.5);letter-spacing:0;margin-top:6px}
.hm-divider{width:1px;align-self:stretch;background:var(--ink-line);margin-right:32px}

/* hero right — dashboard */
.hero-right{position:relative}
.dash{
  background:var(--cream);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  box-shadow:0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  overflow:hidden;
  position:relative;
}
.dash-top{
  background:var(--cream-2);
  border-bottom:1px solid var(--line);
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;
}
.dash-top-l{display:flex;align-items:center;gap:14px}
.dash-tdots{display:flex;gap:5px}
.dash-tdots span{width:10px;height:10px;border-radius:50%;background:#D8CFBE}
.dash-tdots span:nth-child(1){background:#FF5F57}
.dash-tdots span:nth-child(2){background:#FEBC2E}
.dash-tdots span:nth-child(3){background:#28C840}
.dash-title{
  font-family:var(--ff-m);font-size:11.5px;color:var(--text);
}
.dash-sub{color:var(--text-muted);font-weight:400}
.dash-live{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-m);font-size:10.5px;
  color:var(--good);
  padding:3px 8px;background:rgba(31,138,79,0.10);
  border-radius:10px;
}
.dash-live-dot{width:6px;height:6px;border-radius:50%;background:var(--good);animation:pulse 2.5s ease-in-out infinite}

.dash-tabs{
  display:flex;gap:0;
  border-bottom:1px solid var(--line);
  padding:0 14px;
  background:var(--cream-2);
}
.dash-tab{
  font-family:var(--ff-m);font-size:11px;
  color:var(--text-muted);
  background:none;border:none;border-bottom:2px solid transparent;
  padding:10px 12px;margin-bottom:-1px;
  letter-spacing:-0.01em;
}
.dash-tab.active{color:var(--text);border-bottom-color:var(--ink);font-weight:500}
.dash-tab-count{
  display:inline-block;margin-left:4px;
  background:var(--bad);color:#fff;
  font-size:9px;padding:1px 5px;border-radius:8px;
}

.dash-body{padding:18px 20px}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.dk{
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
}
.dk-lbl{font-family:var(--ff-m);font-size:10px;color:var(--text-muted);letter-spacing:0;margin-bottom:8px}
.dk-num{
  font-family:var(--ff);font-weight:500;font-size:24px;
  letter-spacing:-0.03em;color:var(--text);line-height:1;
}
.dk-num-warn{color:var(--bad)}
.dk-pct{font-size:18px;color:var(--text-mid);font-weight:400}
.dk-delta{font-family:var(--ff-m);font-size:10px;margin-top:6px;letter-spacing:0}
.dk-up{color:var(--good)}
.dk-down{color:var(--good)}
.dk-flat{color:var(--text-muted)}

.dash-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin:6px 0 8px;
}
.dsh-label{font-family:var(--ff-m);font-size:10px;color:var(--text-muted);letter-spacing:0.04em;text-transform:uppercase;font-weight:500}
.dsh-meta{font-family:var(--ff-m);font-size:10px;color:var(--text-muted)}

.dash-models{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.dmr{
  display:grid;grid-template-columns:120px 1fr 56px 32px;gap:10px;align-items:center;
  font-size:12px;
}
.dm-name{font-family:var(--ff);font-weight:500;letter-spacing:-0.01em}
.dm-bar{height:6px;background:var(--cream-3);border-radius:3px;overflow:hidden}
.dm-bar span{display:block;height:100%;background:var(--ink);border-radius:3px}
.dmr:nth-child(2) .dm-bar span{background:var(--bottle)}
.dmr:nth-child(3) .dm-bar span{background:var(--lime);}
.dmr:nth-child(4) .dm-bar span{background:#C4B8A0}
.dm-val{font-family:var(--ff-m);font-size:11px;color:var(--text);text-align:right}
.dm-pct{font-family:var(--ff-m);font-size:10px;color:var(--text-muted);text-align:right}

.dash-customers{display:flex;flex-direction:column;gap:0}
.dcr{
  display:grid;grid-template-columns:1.6fr 0.8fr 0.8fr 0.7fr;gap:10px;align-items:center;
  padding:10px 0;border-top:1px solid var(--line);
  font-size:12.5px;
}
.dcr:first-child{border-top:none;padding-top:6px}
.dcr-name{display:flex;align-items:baseline;gap:8px;font-weight:500}
.dcr-plan{font-family:var(--ff-m);font-size:10px;color:var(--text-muted);font-weight:400}
.dcr-rev,.dcr-cost{font-family:var(--ff-m);font-size:11.5px;color:var(--text-mid);text-align:right}
.dcr-m{font-family:var(--ff);font-weight:500;font-size:13px;text-align:right;letter-spacing:-0.01em}
.dcr-m-good{color:var(--good)}
.dcr-m-mid{color:var(--mid)}
.dcr-m-bad{color:var(--bad)}

/* floating alert next to dashboard */
.float-alert{
  position:absolute;bottom:-26px;left:-32px;
  background:var(--ink-2);color:var(--cream);
  border:1px solid var(--ink-line-2);
  border-left:3px solid var(--bad);
  border-radius:12px;
  padding:14px 16px;width:260px;
  box-shadow:0 14px 40px rgba(0,0,0,0.4);
}
.fa-h{font-family:var(--ff-m);font-size:10px;color:rgba(244,241,234,0.5);letter-spacing:0;margin-bottom:8px}
.fa-title{font-size:13px;font-weight:600;line-height:1.35;letter-spacing:-0.01em;margin-bottom:6px}
.fa-meta{font-family:var(--ff-m);font-size:10.5px;color:rgba(244,241,234,0.55);line-height:1.45}
.fa-actions{display:flex;gap:6px;margin-top:12px}
.fa-btn{
  font-family:var(--ff-m);font-size:10.5px;
  background:none;border:1px solid var(--ink-line-2);color:rgba(244,241,234,0.75);
  padding:6px 10px;border-radius:6px;
}
.fa-btn-primary{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);font-weight:600}

/* =================== TICKER =================== */
.ticker{
  background:var(--ink);color:var(--cream);
  border-top:1px solid var(--ink-line);
  border-bottom:1px solid var(--ink-line);
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;
}
.ticker-label{
  flex-shrink:0;
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:0.04em;
  color:rgba(244,241,234,0.5);
  padding:14px 24px;
  border-right:1px solid var(--ink-line);
  background:var(--ink-2);
  text-transform:uppercase;
}
.ticker-track{
  flex:1;overflow:hidden;
  padding:14px 0;
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.ticker-lane{display:flex;white-space:nowrap;animation:tickerLane 60s linear infinite}
@keyframes tickerLane{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tk{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-m);font-size:12px;
  color:rgba(244,241,234,0.55);
  padding:0 28px;letter-spacing:-0.01em;
}
.tk i{
  font-style:normal;font-size:9.5px;font-weight:500;letter-spacing:0.08em;
  color:var(--lime);
  background:rgba(212,255,61,0.10);
  padding:2px 7px;border-radius:10px;
}
.tk b{color:rgba(244,241,234,0.92);font-weight:500}

/* =================== SOCIAL PROOF =================== */
.proof{
  background:var(--cream);
  padding:48px 32px 24px;
  text-align:center;
}
.proof-label{
  display:flex;align-items:center;justify-content:center;gap:18px;
  font-family:var(--ff-m);font-size:10.5px;
  color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:28px;
}
.proof-line{width:60px;height:1px;background:var(--line-2)}
.proof-logos{
  display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;
}
.proof-logo{
  font-size:18px;color:var(--text-mid);font-weight:500;
  letter-spacing:-0.01em;opacity:0.8;
}
.proof-logo.serif-i{font-size:22px;color:var(--text);font-weight:400;opacity:0.9}

/* =================== ECONOMICS STATEMENT BAND =================== */
.econ-band{
  background:var(--cream);
  padding:40px 32px 96px;
  text-align:center;
}
.econ-band-inner{
  max-width:1100px;margin:0 auto;
  border-top:1px solid var(--line-2);
  padding-top:72px;
}
.econ-eyebrow{
  font-family:var(--ff-m);font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-muted);
  margin-bottom:28px;
}
.econ-headline{
  font-family:var(--ff);font-weight:500;
  font-size:clamp(44px,6.4vw,92px);
  line-height:1.0;letter-spacing:-0.04em;
  color:var(--text);text-wrap:balance;
}
.econ-headline .serif-i{
  font-size:1.05em;letter-spacing:-0.02em;color:var(--text);
}
.econ-headline .hl{
  background:linear-gradient(180deg,transparent 58%,var(--lime) 58%,var(--lime) 92%,transparent 92%);
  padding:0 6px;margin:0 -3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* =================== STATS BENTO =================== */
.stats-bento{
  padding:80px 32px 100px;
  max-width:1400px;margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:14px;
}
.sb-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px 30px;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:280px;
  position:relative;overflow:hidden;
}
.sb-eyebrow{
  font-family:var(--ff-m);font-size:11px;color:var(--text-muted);
  letter-spacing:0;margin-bottom:24px;
}
.sb-num{
  font-family:var(--ff);font-weight:500;
  font-size:96px;line-height:0.95;letter-spacing:-0.05em;
  color:var(--text);
  margin-bottom:20px;
}
.sb-unit{font-size:0.45em;color:var(--text-muted);font-family:var(--ff-m);font-weight:400;letter-spacing:0;margin-left:4px}
.sb-label{
  font-size:15px;line-height:1.5;color:var(--text-mid);
  margin-bottom:16px;text-wrap:pretty;
}
.sb-label em{color:var(--text);font-weight:500;font-style:normal}
.sb-src{
  font-family:var(--ff-m);font-size:10.5px;
  color:var(--text-muted);letter-spacing:0;
  padding-top:14px;border-top:1px dashed var(--line-2);
}

.sb-big{grid-row:span 1}
.sb-big .sb-num{font-size:128px}
.sb-mid{}

.sb-card-accent{
  background:var(--ink);color:var(--cream);border-color:var(--ink);
}
.sb-card-accent .sb-eyebrow{color:rgba(244,241,234,0.5)}
.sb-card-accent .sb-num{color:var(--lime)}
.sb-card-accent .sb-unit{color:rgba(244,241,234,0.55)}
.sb-card-accent .sb-label{color:rgba(244,241,234,0.78)}
.sb-card-accent .sb-label em{color:var(--cream)}
.sb-card-accent .sb-src{color:rgba(244,241,234,0.5);border-top-color:rgba(255,255,255,0.12)}

/* =================== SECTION HEAD shared =================== */
.sec-head{
  max-width:780px;margin:0 auto 60px;text-align:center;
}
.sec-eyebrow{
  display:inline-block;
  font-family:var(--ff-m);font-size:11px;
  color:var(--text-muted);letter-spacing:0;
  margin-bottom:20px;text-transform:uppercase;
}
.sec-eyebrow.light{color:rgba(244,241,234,0.6)}
.sec-title{
  font-family:var(--ff);font-weight:500;
  font-size:clamp(36px,4.6vw,64px);
  line-height:1.03;letter-spacing:-0.035em;
  color:var(--text);text-wrap:balance;
}
.sec-title .serif-i{
  font-size:1.04em;letter-spacing:-0.02em;
  color:var(--text);
}
.sec-head-light .sec-title,
.sec-head-light .sec-title .serif-i{color:var(--cream)}
.sec-sub{
  margin-top:18px;
  font-size:16px;line-height:1.6;color:var(--text-mid);
  max-width:560px;margin-left:auto;margin-right:auto;
  text-wrap:pretty;
}
.sec-head-light .sec-sub{color:rgba(244,241,234,0.72)}

/* =================== HOW IT WORKS =================== */
.how{
  padding:100px 32px;
  max-width:1400px;margin:0 auto;
}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hw{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px 28px 28px;
  display:flex;gap:18px;align-items:flex-start;
}
.hw-num{
  font-family:var(--ff-m);font-size:12px;font-weight:500;
  color:var(--text-muted);letter-spacing:0;
  padding:4px 8px;background:var(--cream-2);
  border:1px solid var(--line);border-radius:6px;
  flex-shrink:0;
}
.hw-body{flex:1;min-width:0}
.hw-tag{
  display:inline-block;
  font-family:var(--ff-m);font-size:10px;letter-spacing:0.04em;
  color:var(--text-muted);text-transform:uppercase;
  margin-bottom:14px;
}
.hw-title{
  font-family:var(--ff);font-weight:500;font-size:22px;
  letter-spacing:-0.025em;line-height:1.2;
  margin-bottom:10px;color:var(--text);
}
.hw-text{font-size:14px;line-height:1.6;color:var(--text-mid);margin-bottom:22px;text-wrap:pretty}
.hw-mock{
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
}
.hw-mock-providers{display:flex;flex-direction:column;gap:0}
.hwp{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;
}
.hwp:last-child{border-bottom:none;padding-bottom:0}
.hwp:first-child{padding-top:0}
.hwp-dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.hwp-dot.off{background:var(--text-muted);opacity:0.4}
.hwp-name{flex:1;font-weight:500;letter-spacing:-0.01em}
.hwp-state{font-family:var(--ff-m);font-size:10.5px;color:var(--good)}
.hwp-state.off{color:var(--text-muted)}

.hw-mock-code pre{
  font-family:var(--ff-m);font-size:11.5px;line-height:1.7;
  color:var(--text);white-space:pre;overflow-x:auto;
}
.ck{color:var(--bottle)}
.cf{color:var(--ink)}
.cs{color:var(--warn)}
.cc{color:var(--text-muted);font-style:italic}
.cp{color:var(--bottle);font-weight:500}

.hw-mock-alerts{display:flex;flex-direction:column;gap:0}
.hma{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--line);
  font-size:12.5px;
}
.hma:last-child{border-bottom:none;padding-bottom:0}
.hma:first-child{padding-top:0}
.hma-d{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.hma-d.r{background:var(--bad)}
.hma-d.o{background:var(--warn)}
.hma-d.g{background:var(--good)}
.hma-t{flex:1;letter-spacing:-0.01em}
.hma-time{font-family:var(--ff-m);font-size:10.5px;color:var(--text-muted)}

/* =================== BENTO FEATURES =================== */
.bento{
  padding:60px 32px 100px;
  max-width:1400px;margin:0 auto;
}
.bento-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.bc{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px;
  display:flex;flex-direction:column;
  overflow:hidden;
  position:relative;
}
.bc-1{grid-column:span 4;grid-row:span 2}
.bc-2{grid-column:span 2;grid-row:span 2}
.bc-3{grid-column:span 3;grid-row:span 1}
.bc-4{grid-column:span 3;grid-row:span 1}
.bc-5{grid-column:span 3;grid-row:span 1}
.bc-6{grid-column:span 3;grid-row:span 1}

.bc-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.bc-eyebrow{
  font-family:var(--ff-m);font-size:10.5px;letter-spacing:0.04em;
  color:var(--text-muted);text-transform:uppercase;
}
.bc-tag{
  font-family:var(--ff-m);font-size:10px;letter-spacing:0.04em;
  color:var(--text-muted);text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--line);border-radius:10px;
}
.bc-tag-live{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--good);border-color:rgba(31,138,79,0.25);background:rgba(31,138,79,0.10);
}
.bc-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--good)}
.bc-title{
  font-family:var(--ff);font-weight:500;font-size:28px;
  letter-spacing:-0.03em;line-height:1.15;
  color:var(--text);text-wrap:balance;
  margin-bottom:22px;
}
.bc-title-sm{
  font-family:var(--ff);font-weight:500;font-size:21px;
  letter-spacing:-0.025em;line-height:1.2;
  color:var(--text);margin-bottom:8px;
}
.bc-text{font-size:13.5px;line-height:1.6;color:var(--text-mid);margin-bottom:18px;text-wrap:pretty}
.bc-visual{margin-top:auto}

/* Dark feature card */
.bc-dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.bc-dark .bc-eyebrow{color:rgba(244,241,234,0.55)}
.bc-dark .bc-tag{color:rgba(244,241,234,0.6);border-color:var(--ink-line-2)}
.bc-dark .bc-title{color:var(--cream)}
.bc-dark .bc-title .serif-i{color:var(--lime)}
.bc-dark .bc-text{color:rgba(244,241,234,0.7)}

/* P&L table */
.pl{
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px 18px;
}
.plh,.plr{
  display:grid;grid-template-columns:1.5fr 0.8fr 0.75fr 0.8fr 0.6fr;gap:10px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.plr:last-child{border-bottom:none}
.plh{
  font-family:var(--ff-m);font-size:10px;letter-spacing:0.04em;
  color:var(--text-muted);text-transform:uppercase;
}
.plh > span:nth-child(2),
.plh > span:nth-child(3),
.plh > span:nth-child(4),
.plh > span:nth-child(5){text-align:right}
.plr{font-size:13px}
.plr > span:nth-child(1){display:flex;align-items:center;gap:8px}
.plr > span:nth-child(1) b{font-weight:500;letter-spacing:-0.01em}
.pl-tog{
  font-style:normal;flex-shrink:0;
  width:14px;height:14px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff-m);font-size:12px;line-height:1;
  color:var(--text-muted);
  border:1px solid var(--line-2);border-radius:4px;
}
.pl-tog.open{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.plr > span:nth-child(2),
.plr > span:nth-child(3),
.plr > span:nth-child(4){font-family:var(--ff-m);font-size:11.5px;color:var(--text-mid);text-align:right}
.plr > span:nth-child(5){font-family:var(--ff);font-weight:500;letter-spacing:-0.01em;text-align:right}
/* feature breakdown sub-rows (tokens + cost only) */
.plr-sub{
  padding:7px 0;
  background:rgba(22,20,15,0.022);
}
.plr-sub > span:nth-child(1){
  padding-left:16px;
  font-family:var(--ff-m);font-size:11px;color:var(--text-muted);
  display:flex;align-items:center;gap:7px;
}
.plr-sub > span:nth-child(1) i{font-style:normal;opacity:0.55}
.plr-sub > span:nth-child(2),
.plr-sub > span:nth-child(3){color:var(--text-muted);font-size:10.5px}
.m-good{color:var(--good)}
.m-mid{color:var(--mid)}
.m-bad{color:var(--bad)}

/* Alerts feed (dark card) */
.af{display:flex;flex-direction:column;gap:8px}
.af-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.04);border:1px solid var(--ink-line-2);
  border-radius:10px;padding:10px 12px;
}
.af-row.r{border-left:3px solid var(--bad)}
.af-row.o{border-left:3px solid var(--warn)}
.af-row.y{border-left:3px solid var(--mid)}
.af-icn{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;flex-shrink:0;
  background:rgba(255,255,255,0.05);
}
.af-row.r .af-icn{color:#ff6b6b}
.af-row.o .af-icn{color:#ffa55c}
.af-row.y .af-icn{color:#e4c163}
.af-b{flex:1;min-width:0}
.af-t{font-size:12.5px;font-weight:500;color:var(--cream);letter-spacing:-0.01em;line-height:1.35}
.af-m{font-family:var(--ff-m);font-size:10.5px;color:rgba(244,241,234,0.55);margin-top:3px}
.af-cta{
  font-family:var(--ff-m);font-size:10.5px;
  background:rgba(255,255,255,0.06);border:1px solid var(--ink-line-2);
  color:var(--cream);
  padding:5px 9px;border-radius:6px;flex-shrink:0;
}
.af-cta:hover{background:rgba(255,255,255,0.10)}

/* Donut */
.bc-visual-donut{display:flex;align-items:center;gap:24px}
.donut{position:relative;width:140px;height:140px;flex-shrink:0}
.donut svg{width:100%;height:100%}
.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dc-n{font-family:var(--ff);font-weight:500;font-size:18px;letter-spacing:-0.02em}
.dc-l{font-family:var(--ff-m);font-size:9.5px;color:var(--text-muted);margin-top:2px}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:8px}
.dl{display:flex;align-items:center;gap:10px;font-size:12px}
.dls{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.dln{flex:1;letter-spacing:-0.01em}
.dlv{font-family:var(--ff-m);font-size:11px;color:var(--text-muted)}

/* Stripe mock + Slack mock */
.stripe-mock,.slack-mock{
  background:var(--cream-2);border:1px solid var(--line);border-radius:10px;
  padding:14px;
}
.sm-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.sm-row:first-child{padding-top:0}
.sm-row:last-child{padding-bottom:0;border-bottom:none}
.sm-icon{
  width:24px;height:24px;border-radius:6px;
  background:var(--ink);color:var(--lime);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-m);font-size:13px;font-weight:600;
}
.sm-name{flex:1;font-weight:500;letter-spacing:-0.01em}
.sm-state{font-family:var(--ff-m);font-size:10.5px;color:var(--text-muted)}
.sm-state.ok{color:var(--good)}
.sm-state.off{color:var(--text-muted)}

.sl-row{display:flex;gap:10px;align-items:flex-start}
.sl-av{
  width:32px;height:32px;border-radius:7px;
  background:var(--ink);color:var(--lime);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;
}
.sl-body{flex:1;min-width:0}
.sl-h{font-size:12.5px;margin-bottom:4px;letter-spacing:-0.01em}
.sl-h b{font-weight:600}
.sl-meta{color:var(--text-muted);font-family:var(--ff-m);font-size:10.5px;margin-left:4px}
.sl-msg{font-size:12.5px;line-height:1.5;display:flex;align-items:center;gap:6px;letter-spacing:-0.01em}
.sl-msg b{font-weight:600}
.sl-dot{width:7px;height:7px;border-radius:50%}
.sl-dot.r{background:var(--bad)}

/* Pricing evolution mock */
.price-mock{
  background:var(--cream-2);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;
}
.pm-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--ff-m);font-size:10px;letter-spacing:0.03em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;
}
.pm-row{
  display:grid;grid-template-columns:1fr 56px 0.75fr 0.6fr;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.pm-row:last-of-type{border-bottom:none}
.pm-name{font-weight:500;font-size:12.5px;letter-spacing:-0.01em}
.pm-spark{width:56px;height:18px;display:block}
.pm-val{font-family:var(--ff-m);font-size:11.5px;color:var(--text);text-align:right}
.pm-delta{font-family:var(--ff-m);font-size:10.5px;text-align:right}
.pm-delta.up{color:var(--bad)}
.pm-delta.down{color:var(--good)}
.pm-delta.flat{color:var(--text-muted)}
.pm-flag{
  display:flex;align-items:center;gap:8px;margin-top:11px;
  font-family:var(--ff-m);font-size:10.5px;color:var(--text-mid);letter-spacing:-0.01em;
  background:rgba(232,106,106,0.10);border:1px solid rgba(232,106,106,0.25);
  border-radius:7px;padding:7px 10px;
}
.pm-flag b{color:var(--text);font-weight:600}
.pm-flag-dot{width:7px;height:7px;border-radius:50%;background:var(--bad);flex-shrink:0}

/* Flexible tagging mock */
.tag-mock{display:flex;flex-direction:column;gap:11px}
.tg-group{display:flex;align-items:center;gap:12px}
.tg-dim{
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-muted);width:52px;flex-shrink:0;text-align:right;
}
.tg-chips{display:flex;flex-wrap:wrap;gap:6px}
.tg{
  font-family:var(--ff-m);font-size:11px;letter-spacing:-0.01em;
  color:var(--text);background:var(--cream-2);
  border:1px solid var(--line-2);border-radius:999px;
  padding:4px 10px;
}
.tg.lime{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);font-weight:600}

/* Credits & custom pricing */
.cred-mock{display:flex;flex-direction:column;gap:8px}
.cr-row{
  display:flex;align-items:center;gap:11px;
  background:var(--cream-2);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;
}
.cr-icon{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  background:var(--ink);color:var(--lime);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-m);font-size:11px;font-weight:600;letter-spacing:-0.02em;
}
.cr-name{flex:1;font-weight:500;font-size:12.5px;letter-spacing:-0.01em}
.cr-name em{font-family:var(--ff-m);font-size:10px;color:var(--text-muted);font-style:normal;display:block;margin-top:2px}
.cr-state{font-family:var(--ff-m);font-size:10.5px;color:var(--good)}
.cr-state.off{color:var(--text-muted)}

/* =================== ROADMAP =================== */
.roadmap{
  position:relative;
  background:var(--ink);color:var(--cream);
  padding:100px 32px 120px;
  overflow:hidden;
  isolation:isolate;
}
.rm-bg{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 50%, #000 30%, transparent 80%);
}
.rm-inner{position:relative;z-index:1;max-width:1400px;margin:0 auto}

.rm-track{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
  position:relative;
}
.rm-line{
  position:absolute;
  top:6px;left:8%;right:8%;height:2px;border-radius:1px;
  background:linear-gradient(90deg,
    var(--lime) 0%, var(--lime) 60%,
    var(--ink-line-2) 60%, var(--ink-line-2) 100%);
  z-index:1;
}
.rm-step{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:20px;
}
.rm-dot{
  align-self:center;flex-shrink:0;
  width:14px;height:14px;border-radius:50%;
  background:var(--lime);
  /* ring of bg color isolates dot from the line, making it read as on top of it */
  box-shadow:0 0 0 3px var(--ink),0 0 0 6px rgba(212,255,61,0.18);
  position:relative;z-index:2;
}
.rm-step-soon .rm-dot{
  background:var(--ink-2);
  border:1.5px solid var(--ink-line-2);
  box-shadow:0 0 0 3px var(--ink);
}
.rm-card{
  background:var(--ink-2);
  border:1px solid var(--ink-line-2);
  border-radius:14px;
  padding:24px 22px;
  min-height:200px;
  display:flex;flex-direction:column;
  transition:transform 0.25s, border-color 0.25s;
}
.rm-card:hover{transform:translateY(-2px);border-color:rgba(212,255,61,0.30)}
.rm-step-soon .rm-card:hover{border-color:var(--ink-line-2);transform:none}
.rm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rm-num{font-family:var(--ff-m);font-size:11px;color:rgba(244,241,234,0.45);letter-spacing:0}
.rm-pill{
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:0.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:10px;
}
.rm-pill-live{
  background:var(--lime);color:var(--lime-ink);display:inline-flex;align-items:center;gap:5px;font-weight:600;
}
.rmpd{width:5px;height:5px;border-radius:50%;background:var(--lime-ink);animation:pulse 2.5s ease-in-out infinite}
.rm-pill-soon{
  background:rgba(255,255,255,0.05);color:rgba(244,241,234,0.55);
  border:1px solid var(--ink-line-2);
}
.rm-stage{
  font-family:var(--ff);font-weight:500;font-size:22px;
  letter-spacing:-0.025em;color:var(--cream);margin-bottom:8px;
}
.rm-step-soon .rm-stage{color:rgba(244,241,234,0.5);font-family:var(--ff-i);font-style:italic;font-size:26px;font-weight:400}
.rm-text{font-size:13px;line-height:1.5;color:rgba(244,241,234,0.65);letter-spacing:-0.01em;text-wrap:pretty}

/* Margin-layer diagram */
.ml-wrap{margin:54px auto 76px;max-width:1080px}
.ml-panel{
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border:1px solid var(--ink-line-2);
  border-radius:24px;
  padding:40px 40px 30px;
}
.ml-grid{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:stretch}
.ml-rail{display:flex;flex-direction:column;align-items:center;gap:16px}
.ml-rail-bar{
  flex:1;width:5px;border-radius:3px;min-height:250px;
  background:linear-gradient(180deg, var(--lime), var(--bottle));
  box-shadow:0 0 22px rgba(212,255,61,0.22);
}
.ml-rail-label{
  font-family:var(--ff-m);font-size:9.5px;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--lime);text-align:center;line-height:1.45;
}
.ml-center{display:flex;flex-direction:column;align-items:center}
.ml-providers{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.ml-prov{
  width:46px;height:46px;border-radius:11px;
  border:1px solid var(--ink-line-2);background:rgba(255,255,255,0.03);
  display:flex;align-items:center;justify-content:center;
}
.ml-prov::after{content:"";width:13px;height:13px;border-radius:4px;background:var(--lime);opacity:0.85}
.ml-arrows{display:flex;justify-content:center;gap:120px;color:rgba(244,241,234,0.4);font-size:15px;margin-bottom:16px}
.ml-opt-label{
  font-family:var(--ff-m);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--lime);margin-bottom:14px;
}
.ml-stack{
  width:100%;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--ink-line);
  border-radius:16px;
  padding:16px;display:flex;flex-direction:column;gap:14px;
}
.ml-bar{
  background:var(--ink-2);border:1px solid var(--ink-line-2);border-radius:11px;
  padding:18px;text-align:center;font-weight:600;font-size:16px;letter-spacing:-0.01em;
  color:var(--cream);
}
.ml-mid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;
  background:rgba(255,255,255,0.015);border:1px solid var(--ink-line);border-radius:12px;
  padding:20px;
}
.ml-col{display:flex;flex-direction:column;gap:10px}
.ml-chip{
  background:var(--ink-2);border:1px solid var(--ink-line-2);border-radius:8px;
  padding:11px;text-align:center;font-size:13px;font-weight:500;letter-spacing:-0.01em;
  color:rgba(244,241,234,0.9);
}
.ml-core{display:flex;align-items:center;justify-content:center}
.ml-core-sq{
  width:56px;height:56px;border-radius:15px;
  background:rgba(255,255,255,0.04);border:1px solid var(--ink-line-2);
  position:relative;flex-shrink:0;
  box-shadow:0 0 0 6px rgba(212,255,61,0.06);
}
.ml-core-sq::before,.ml-core-sq::after{content:"";position:absolute;width:20px;height:20px;border-radius:6px}
.ml-core-sq::before{background:var(--bottle);top:15px;left:14px}
.ml-core-sq::after{background:var(--lime);top:21px;left:22px}

/* =================== TESTIMONIALS =================== */
.testimonials{
  padding:100px 32px;
  max-width:1400px;margin:0 auto;
}
.qs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.q{
  background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:32px 28px;
  display:flex;flex-direction:column;
  position:relative;
}
.q-mark{
  font-family:var(--ff-i);font-style:italic;
  font-size:80px;line-height:0;color:var(--ink);
  position:absolute;top:32px;left:28px;opacity:0.10;
}
.q blockquote{
  font-family:var(--ff);font-weight:500;font-size:19px;
  letter-spacing:-0.02em;line-height:1.35;
  color:var(--text);margin-bottom:28px;text-wrap:pretty;
  margin-top:8px;
}
.q em{font-family:var(--ff-i);font-style:italic;color:var(--text);font-weight:400}
.q figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.q-av{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:#fff;flex-shrink:0;
  letter-spacing:-0.01em;
}
.q-av-1{background:var(--ink);color:var(--lime)}
.q-av-2{background:var(--bottle)}
.q-av-3{background:var(--lime);color:var(--lime-ink)}
.q-name{font-size:13.5px;font-weight:500;letter-spacing:-0.01em}
.q-role{font-family:var(--ff-m);font-size:11px;color:var(--text-muted);margin-top:2px}

/* =================== PRICING =================== */
.pricing{
  padding:100px 32px 80px;
  max-width:1300px;margin:0 auto;
}
.pr-banner{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:24px;
  background:#fff;border:1px solid var(--line);
  border-radius:24px;padding:9px 16px;
  font-size:13px;color:var(--text-mid);
}
.prb-dot{
  width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px var(--lime-soft);
}
.pr-banner b{color:var(--text);font-weight:600}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.pl{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;padding:36px 32px 32px;
  display:flex;flex-direction:column;position:relative;
}
.pl-featured{
  background:var(--ink);color:var(--cream);border-color:var(--ink);
  box-shadow:0 -3px 0 0 var(--lime) inset;
}
.pl-ribbon{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--lime);color:var(--lime-ink);
  font-family:var(--ff-m);font-size:10.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  padding:5px 12px;border-radius:12px;
}
.pl-name{
  font-family:var(--ff);font-weight:500;font-size:14px;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:14px;
}
.pl-featured .pl-name{color:rgba(244,241,234,0.55)}
.pl-price{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.pl-num{
  font-family:var(--ff);font-weight:500;font-size:54px;
  letter-spacing:-0.04em;line-height:1;color:var(--text);
}
.pl-featured .pl-num{color:var(--cream)}
.pl-per{font-family:var(--ff-m);font-size:12px;color:var(--text-muted)}
.pl-featured .pl-per{color:rgba(244,241,234,0.55)}
.pl-post{
  font-family:var(--ff-m);font-size:11px;color:var(--text-muted);
  margin-bottom:14px;
}
.pl-post s{opacity:0.7}
.pl-featured .pl-post{color:rgba(244,241,234,0.55)}
.pl-sub{font-size:13.5px;color:var(--text-mid);margin-bottom:24px;min-height:32px;text-wrap:pretty}
.pl-featured .pl-sub{color:rgba(244,241,234,0.75)}
.pl-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:30px;flex:1}
.pl-list li{
  font-size:13.5px;line-height:1.5;color:var(--text);
  padding-left:24px;position:relative;
}
.pl-list li::before{
  content:"";position:absolute;left:1px;top:3px;
  width:5px;height:9px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);
}
.pl-list li::after{display:none}
.pl-list li b{font-weight:600}
.pl-featured .pl-list li{color:var(--cream)}
.pl-featured .pl-list li::before{border-color:var(--lime)}

.pl-cta{
  background:var(--ink);color:#fff;border:none;
  font-size:14px;font-weight:500;letter-spacing:-0.01em;
  padding:13px 18px;border-radius:10px;
  transition:transform 0.2s, background 0.2s;
}
.pl-cta:hover{background:#000;transform:translateY(-1px)}
.pl-cta-ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.pl-cta-ghost:hover{background:var(--cream-2);transform:translateY(-1px)}
.pl-featured .pl-cta{background:var(--lime);color:var(--lime-ink);font-weight:600}
.pl-featured .pl-cta:hover{background:#E1FF5A}

.pr-foot{
  text-align:center;font-family:var(--ff-m);font-size:11.5px;
  color:var(--text-muted);margin-top:14px;
}

/* =================== FINAL CTA =================== */
.final{
  position:relative;
  background:var(--ink);color:var(--cream);
  padding:120px 32px;
  overflow:hidden;isolation:isolate;
  text-align:center;
}
.final-bg{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
}
.final-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.final-title{
  font-family:var(--ff);font-weight:500;
  font-size:clamp(64px,9vw,128px);
  line-height:0.92;letter-spacing:-0.05em;
  color:var(--cream);margin:14px 0 24px;
}
.final-title .serif-i{color:var(--lime);font-size:1.06em;letter-spacing:-0.025em}
.final-sub{
  font-size:17px;line-height:1.55;
  color:rgba(244,241,234,0.72);margin-bottom:36px;text-wrap:pretty;
}
.final-form{
  display:flex;gap:6px;max-width:480px;margin:0 auto 14px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--ink-line-2);
  border-radius:14px;padding:5px;
}
.final-form input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--cream);font-family:var(--ff);font-size:14px;
  padding:0 14px;letter-spacing:-0.01em;
}
.final-form input::placeholder{color:rgba(244,241,234,0.4)}
.final-form button{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--lime);color:var(--lime-ink);border:none;
  font-family:var(--ff);font-size:14px;font-weight:600;letter-spacing:-0.01em;
  padding:11px 18px;border-radius:10px;
  transition:transform 0.2s, box-shadow 0.2s;
}
.final-form button:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(212,255,61,0.30)}
.final-form button:disabled{background:rgba(212,255,61,0.5)}
.final-small{font-family:var(--ff-m);font-size:11.5px;color:rgba(244,241,234,0.45)}
.arrow{transition:transform 0.2s}
.final-form button:hover .arrow{transform:translateX(2px)}

/* =================== FOOTER =================== */
.footer{
  background:var(--ink);color:rgba(244,241,234,0.7);
  padding:80px 32px 28px;
  position:relative;overflow:hidden;
}
.ft-top{
  display:grid;grid-template-columns:1.2fr 2fr;
  gap:48px;
  max-width:1400px;margin:0 auto 80px;
  padding-bottom:48px;
  border-bottom:1px solid var(--ink-line);
}
.ft-brand{}
.ft-logoword{
  font-family:var(--ff);font-weight:500;font-size:28px;
  letter-spacing:-0.04em;color:var(--cream);margin-bottom:14px;
}
.ft-tag{font-size:14px;line-height:1.6;color:rgba(244,241,234,0.6);margin-bottom:20px;max-width:280px}
.ft-status{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-m);font-size:11px;color:rgba(244,241,234,0.55);letter-spacing:0;
}
.ft-status-dot{
  width:6px;height:6px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px var(--lime-soft);
  animation:pulse 2.5s ease-in-out infinite;
}

.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.ft-col{display:flex;flex-direction:column;gap:11px}
.ft-h{
  font-family:var(--ff-m);font-size:11px;letter-spacing:0.04em;
  color:rgba(244,241,234,0.4);text-transform:uppercase;margin-bottom:4px;
}
.ft-col a{
  color:rgba(244,241,234,0.78);text-decoration:none;
  font-size:14px;letter-spacing:-0.01em;
  transition:color 0.2s;
}
.ft-col a:hover{color:var(--cream)}

.ft-giant{
  font-family:var(--ff);font-weight:600;
  font-size:clamp(120px,24vw,360px);
  line-height:0.85;letter-spacing:-0.06em;
  color:rgba(255,255,255,0.04);
  text-align:center;
  margin:-40px 0 -40px;
  user-select:none;pointer-events:none;
}

.ft-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid var(--ink-line);
  max-width:1400px;margin:0 auto;
}
.ft-copy{font-family:var(--ff-m);font-size:11px;color:rgba(244,241,234,0.45)}
.ft-legal{display:flex;gap:24px}
.ft-legal a{font-family:var(--ff-m);font-size:11px;color:rgba(244,241,234,0.55);text-decoration:none}
.ft-legal a:hover{color:var(--cream)}

/* =================== RESPONSIVE =================== */
@media (max-width: 1100px){
  .nav{padding:14px 24px}
  .nav-links{display:none}
  .logo-badge{display:none}
  .hero-inner{grid-template-columns:1fr;gap:48px;padding:64px 0 96px}
  .hero-actions{flex-wrap:wrap}
  .float-alert{position:relative;left:0;bottom:auto;width:100%;margin-top:18px}
  .stats-bento{grid-template-columns:1fr;gap:12px}
  .sb-big .sb-num{font-size:96px}
  .how-grid{grid-template-columns:1fr;gap:12px}
  .bento-grid{grid-template-columns:1fr;gap:12px}
  .bc-1,.bc-2,.bc-3,.bc-4,.bc-5,.bc-6{grid-column:span 1;grid-row:span 1}
  .ml-grid{gap:18px}
  .ml-mid{grid-template-columns:1fr;gap:12px;text-align:center}
  .ml-arrows{gap:64px}
  .rm-track{grid-template-columns:1fr;gap:12px}
  .rm-line{display:none}
  .rm-step{flex-direction:row;align-items:flex-start;gap:16px}
  .rm-dot{flex-shrink:0;margin-top:4px}
  .rm-card{min-height:unset}
  .qs{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .pl-featured{order:-1}
  .ft-top{grid-template-columns:1fr;gap:36px}
  .ft-cols{grid-template-columns:repeat(3,1fr);gap:24px}
  .ft-bottom{flex-direction:column;gap:14px}
}
@media (max-width: 640px){
  .hero{padding:0 20px}
  .hero-meta{flex-wrap:wrap;gap:16px 0}
  .hm-divider{display:none}
  .hm-row{padding-right:24px;min-width:120px}
  .final-form{flex-direction:column;background:none;border:none;padding:0;gap:8px}
  .final-form input{background:rgba(255,255,255,0.08);border:1px solid var(--ink-line-2);padding:13px 14px;border-radius:10px}
  .final-form button{padding:13px}
  .ft-cols{grid-template-columns:1fr;gap:24px}
  .proof-logos{gap:28px}
}

/* Tweaks panel — Weflayr v8 */
.tweaks-panel{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  width:300px; max-height:calc(100vh - 40px);
  background:#1A1A16; color:#F4F1EA;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
  font-family:'Space Grotesk', system-ui, sans-serif;
  display:flex; flex-direction:column;
  transform:translateY(16px) scale(0.96);
  opacity:0; pointer-events:none;
  transition:opacity 0.2s, transform 0.2s;
  overflow:hidden;
}
.tweaks-panel.is-open{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}
.tp-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
.tp-title{ font-size:13px; font-weight:600; letter-spacing:-0.01em }
.tp-close{
  background:none; border:none; color:rgba(244,241,234,0.6);
  font-size:22px; line-height:1; width:24px; height:24px;
  border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tp-close:hover{ background:rgba(255,255,255,0.06); color:#F4F1EA }
.tp-body{
  padding:6px 14px 14px; overflow-y:auto;
  display:flex; flex-direction:column; gap:14px;
}
.tp-sec{ display:flex; flex-direction:column; gap:8px; padding-top:8px }
.tp-label{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  letter-spacing:0.04em; text-transform:uppercase;
  color:rgba(244,241,234,0.45);
}
.tp-swatches{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.tp-sw{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:8px; cursor:pointer;
  color:#F4F1EA; font-family:inherit; font-size:11.5px; text-align:left;
  letter-spacing:-0.01em;
  transition:background 0.15s, border-color 0.15s;
}
.tp-sw:hover{ background:rgba(255,255,255,0.06) }
.tp-sw.is-active{ background:rgba(212,255,61,0.10); border-color:rgba(212,255,61,0.5) }
.tp-sw-color{ width:14px; height:14px; border-radius:4px; flex-shrink:0; border:1px solid rgba(255,255,255,0.1) }
.tp-sw-label{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.tp-radio{ display:flex; flex-direction:column; gap:5px }
.tp-r{
  padding:7px 10px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:7px; color:#F4F1EA; cursor:pointer;
  font-family:inherit; font-size:12.5px; text-align:left;
  letter-spacing:-0.01em;
  transition:background 0.15s, border-color 0.15s;
}
.tp-r:hover{ background:rgba(255,255,255,0.06) }
.tp-r.is-active{ background:rgba(212,255,61,0.10); border-color:rgba(212,255,61,0.5) }

.tp-toggle{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.tp-sw-tog{
  width:36px; height:20px; border-radius:999px;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.12);
  position:relative; cursor:pointer; padding:0;
  transition:background 0.2s;
}
.tp-sw-tog span{
  position:absolute; top:1px; left:1px;
  width:16px; height:16px; border-radius:50%;
  background:#F4F1EA;
  transition:transform 0.2s;
}
.tp-sw-tog[aria-pressed="true"]{ background:rgba(212,255,61,0.40); border-color:rgba(212,255,61,0.6) }
.tp-sw-tog[aria-pressed="true"] span{ transform:translateX(16px); background:#D4FF3D }

/* Logo mark variants */
.logo-mark{
  width:22px; height:22px; border-radius:6px;
  background:var(--ink); position:relative; flex-shrink:0;
}
.logo-mark--square::after{
  content:""; position:absolute; inset:5px; border-radius:2px; background:var(--lime);
}
.logo-mark--dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 3px rgba(212,255,61,0.18);
}
.logo-mark--layered{
  width:26px; height:22px; overflow:hidden;
}
.logo-mark--layered::before{
  content:""; position:absolute; left:0; right:0; top:0; height:7px;
  background:var(--lime);
}
.logo-mark--layered::after{
  content:""; position:absolute; left:0; right:0; top:9px; height:5px;
  background:rgba(244,241,234,0.85);
}

@media (max-width: 640px){
  .tweaks-panel{ left:12px; right:12px; bottom:12px; width:auto }
}

/* =========================================================
   Interior pages
   ========================================================= */
.page-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px 120px;
}

.page-hero {
  width: 100%;
  max-width: 760px;
  padding: 140px 0 64px;
  border-bottom: 1px solid var(--ink-line);
  margin-bottom: 64px;
}

.page-eyebrow {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bottle-mid);
  margin-bottom: 20px;
}

.page-title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 20px;
}

.page-desc {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 520px;
}

.page-body {
  width: 100%;
  max-width: 760px;
}

.page-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--cream-2);
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.6;
}

.page-placeholder .pp-label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bottle-mid);
  font-weight: 600;
}

@media (max-width: 640px) {
  .page-hero { padding: 100px 0 40px; }
  .page-placeholder { padding: 28px; }
}

/* Job listing on /careers/ */
.jb-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.jb-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream-2);
  transition: border-color 0.2s;
}

.jb-list-item:hover { border-color: var(--line-2); }

.jb-list-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jb-list-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.jb-list-tags {
  display: flex;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.jb-list-tags span::after { content: "·"; margin-left: 10px; }
.jb-list-tags span:last-child::after { content: ""; margin-left: 0; }

.jb-list-btn {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bottle-mid);
  text-decoration: none;
  white-space: nowrap;
}

.jb-list-btn:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .jb-list-item { flex-direction: column; align-items: flex-start; }
}

/* anchor-link button resets */
a.btn-cta, a.btn-primary, a.pl-cta, a.pl-cta-ghost { text-decoration: none; }