/* ============================================================
   WealthFeed Design System — global entry point.
   Consumers link THIS file. Keep it @import-only.
   ============================================================ */

/* ============================================================
   WealthFeed · Fonts
   ------------------------------------------------------------
   Brand display : Visby CF  → substituted with "Outfit" (geometric
                   sans, closest free match on Google Fonts). FLAGGED
                   to the team — replace with licensed Visby CF webfonts.
   UI            : Inter      (matches the source design system)
   Mono          : Space Mono (data / credits / numeric callouts)
   Icons         : Material Symbols Rounded (the file uses the
                   Material Icon Set)
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fccca918fea4.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/aebf2ab4a4ce.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/a2e2c783ca6f.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/46dd4cdca58c.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/8db00ff46c67.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/a28eb6d3ccb5.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/c940764593d0.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/fccca918fea4.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/aebf2ab4a4ce.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/a2e2c783ca6f.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/46dd4cdca58c.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/8db00ff46c67.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/a28eb6d3ccb5.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/c940764593d0.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/fccca918fea4.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/aebf2ab4a4ce.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/a2e2c783ca6f.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/46dd4cdca58c.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/8db00ff46c67.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/a28eb6d3ccb5.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/c940764593d0.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/fccca918fea4.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/aebf2ab4a4ce.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/a2e2c783ca6f.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/46dd4cdca58c.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/8db00ff46c67.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/a28eb6d3ccb5.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/c940764593d0.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: 900;
  font-display: swap;
  src: url("assets/fccca918fea4.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: 900;
  font-display: swap;
  src: url("assets/aebf2ab4a4ce.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: 900;
  font-display: swap;
  src: url("assets/a2e2c783ca6f.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/46dd4cdca58c.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: 900;
  font-display: swap;
  src: url("assets/8db00ff46c67.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: 900;
  font-display: swap;
  src: url("assets/a28eb6d3ccb5.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: 900;
  font-display: swap;
  src: url("assets/c940764593d0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/9e38b3f1575d.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: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/92684e4acde7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/9e38b3f1575d.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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/92684e4acde7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/9e38b3f1575d.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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/92684e4acde7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/9e38b3f1575d.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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/92684e4acde7.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 Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/1ab5cb4b90a5.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 Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/b4f90459adf4.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 Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/e0c8e616bda2.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 Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/e9c42e9aad5b.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 Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/512458b32bf4.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 Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/af7cf6d2b897.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;
}


/* fallback */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("assets/material-symbols-9fc26e1df9f0.woff2") format('woff2');
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* Material Symbols base class */
.wf-icon {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.wf-icon--filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ============================================================
   WealthFeed · Color tokens
   Base palette → semantic aliases. Source: "WealthFeed Foundations
   For Devs" Figma. Built on an Untitled-UI-style scale with a
   WealthFeed brand layer (green→navy gradient, charcoal ink) and a
   Catalyst palette for Money-in-Motion life events.
   ============================================================ */

:root {
  /* ---- Base ------------------------------------------------ */
  --wf-white: #ffffff;
  --wf-black: #000000;

  /* ---- Brand ---------------------------------------------- */
  --wf-green:  #1bc293;   /* WealthFeed green (logomark start)  */
  --wf-teal:   #0e5f6b;   /* gradient mid                       */
  --wf-navy:   #010144;   /* deep brand navy (logomark end)     */
  --wf-purple: #7b61ff;   /* accent / focus / interactive       */
  --wf-purple-strong: #7f56d9;

  /* Signature brand gradient (logomark, hero accents) */
  --wf-gradient-brand: linear-gradient(90deg, #1bc293 0%, #0e5f6b 42%, #010144 100%); /* @kind color */
  --wf-gradient-brand-soft: linear-gradient(120deg, #1bc293 0%, #0e5f6b 55%, #010144 100%); /* @kind color */

  /* ---- Brand green scale ---------------------------------- */
  --wf-green-50:  #c1f5e6;
  --wf-green-100: #9bebd4;
  --wf-green-200: #77e1c3;
  --wf-green-300: #56d6b2;
  --wf-green-400: #37cca2;
  --wf-green-500: #1bc293;
  --wf-green-600: #14a87e;
  --wf-green-700: #107559;
  --wf-green-800: #0b4f3c;
  --wf-green-900: #06291f;

  /* ---- Brand blue / navy scale ---------------------------- */
  --wf-blue-50:  #c4c4ec;
  --wf-blue-100: #a1a1da;
  --wf-blue-200: #8181c7;
  --wf-blue-300: #6565b4;
  --wf-blue-400: #4b4ba2;
  --wf-blue-500: #36368f;
  --wf-blue-600: #24247c;
  --wf-blue-700: #151569;
  --wf-blue-800: #090957;
  --wf-blue-900: #010144;

  /* ---- Ink (charcoal — primary actions & strong text) ----- */
  --wf-ink-900: #1c1b1f;  /* strongest text / headings          */
  --wf-ink-800: #292929;  /* inverse surfaces                   */
  --wf-ink-700: #33323a;  /* primary button fill                */
  --wf-ink-600: #51505a;

  /* ---- Neutral / gray scale ------------------------------- */
  --wf-neutral-25:  #fbfbfb;
  --wf-neutral-50:  #f5f6f6;
  --wf-neutral-100: #eceded;
  --wf-neutral-200: #e3e4e4;
  --wf-neutral-300: #d6d7d7;
  --wf-neutral-400: #aeafaf;
  --wf-neutral-500: #939494;
  --wf-neutral-600: #787979;
  --wf-neutral-700: #5e5e5e;
  --wf-neutral-800: #434444;
  --wf-neutral-900: #292929;

  /* ---- Red / error ---------------------------------------- */
  --wf-red-50:  #ffeceb;
  --wf-red-100: #fdcfcb;
  --wf-red-200: #fab2ad;
  --wf-red-300: #f8968f;
  --wf-red-400: #f57a71;
  --wf-red-500: #f04438;
  --wf-red-600: #be362c;
  --wf-red-700: #8f2820;

  /* ---- Amber / warning ------------------------------------ */
  --wf-amber-50:  #fff6eb;
  --wf-amber-100: #fee5c4;
  --wf-amber-200: #fcd39d;
  --wf-amber-300: #fbc278;
  --wf-amber-400: #fab152;
  --wf-amber-500: #f8a02d;
  --wf-amber-600: #c37106;
  --wf-amber-700: #905305;

  /* ---- Success (semantic green) --------------------------- */
  --wf-success-50:  #ebfff6;
  --wf-success-100: #b8efd8;
  --wf-success-200: #8bdfbc;
  --wf-success-300: #62cfa1;
  --wf-success-400: #3ebe89;
  --wf-success-500: #1fae72;
  --wf-success-600: #059e5e;
  --wf-success-700: #04814d;

  /* ---- Catalyst palette · Money-in-Motion life events ----- */
  --wf-catalyst-divorce:       #53b0df;  /* Maximum Blue        */
  --wf-catalyst-capital-raise: #c0b8da;  /* Lavender Gray       */
  --wf-catalyst-inheritance:   #72a0b8;  /* Air Superiority     */
  --wf-catalyst-new-parents:   #ff9d70;  /* Light Salmon        */
  --wf-catalyst-new-job:       #e7cd9c;  /* Desert Sand         */
  --wf-catalyst-marriage:      #8dd6ba;  /* Pearl Aqua          */
  --wf-catalyst-mover:         #3bad81;  /* Mint                */
  --wf-catalyst-retired:       #c1a747;  /* Brass               */
  --wf-catalyst-business-sale: #ff758c;  /* Ultra Red           */
  --wf-catalyst-promotion:     #ababab;  /* Silver Chalice      */

  /* =========================================================
     SEMANTIC ALIASES — reach for these in product UI
     ========================================================= */

  /* Surfaces */
  --surface-page:    var(--wf-neutral-50);
  --surface-card:    var(--wf-white);
  --surface-raised:  var(--wf-white);
  --surface-sunken:  var(--wf-neutral-100);
  --surface-hover:   var(--wf-neutral-50);
  --surface-active:  var(--wf-neutral-100);
  --surface-inverse: var(--wf-ink-800);
  --surface-brand:   var(--wf-navy);
  --surface-overlay: rgba(34, 34, 34, 0.6);

  /* Text */
  --text-strong:   var(--wf-ink-900);
  --text-default:  var(--wf-neutral-800);
  --text-muted:    var(--wf-neutral-600);
  --text-subtle:   var(--wf-neutral-500);
  --text-disabled: var(--wf-neutral-400);
  --text-inverse:  var(--wf-white);
  --text-link:     var(--wf-purple-strong);
  --text-error:    var(--wf-red-600);
  --text-success:  var(--wf-success-600);
  --text-on-brand: var(--wf-white);

  /* Borders */
  --border-subtle:  var(--wf-neutral-200);
  --border-default: var(--wf-neutral-300);
  --border-strong:  var(--wf-neutral-400);
  --border-error:   var(--wf-red-500);
  --border-focus:   var(--wf-purple);

  /* Actions — primary (charcoal ink) */
  --action-primary-bg:        var(--wf-ink-700);
  --action-primary-bg-hover:  var(--wf-ink-900);
  --action-primary-bg-active: var(--wf-ink-900);
  --action-primary-text:      var(--wf-white);
  --action-primary-disabled:  var(--wf-neutral-300);

  /* Actions — accent (brand green, used sparingly for emphasis) */
  --action-accent-bg:       var(--wf-green-500);
  --action-accent-bg-hover: var(--wf-green-600);
  --action-accent-text:     var(--wf-navy);

  /* Actions — secondary (stroke) */
  --action-secondary-bg:       var(--wf-white);
  --action-secondary-border:   var(--wf-neutral-300);
  --action-secondary-text:     var(--wf-neutral-800);
  --action-secondary-bg-hover: var(--wf-neutral-50);

  /* Focus ring */
  --focus-ring: 0 0 0 4px rgba(123, 97, 255, 0.24);
}

/* ============================================================
   WealthFeed · Typography tokens
   Brand display = Outfit (Visby CF substitute)
   UI            = Inter
   Mono          = Space Mono
   Scale mirrors the Figma UI + Brand type scales.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------- */
  --font-display: 'Outfit', 'Visby CF', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Weights -------------------------------------------- */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-black: 900;     /* @kind font */

  /* ---- Font sizes ----------------------------------------- */
  --fs-display-xl: 60px;
  --fs-display-lg: 48px;
  --fs-display-md: 36px;
  --fs-display-sm: 30px;
  --fs-display-xs: 24px;
  --fs-text-xl: 20px;
  --fs-text-lg: 18px;
  --fs-text-md: 16px;
  --fs-text-sm: 14px;
  --fs-text-xs: 12px;

  /* ---- Line heights --------------------------------------- */
  --lh-display-xl: 72px;
  --lh-display-lg: 60px;
  --lh-display-md: 44px;
  --lh-display-sm: 38px;
  --lh-display-xs: 32px;
  --lh-text-xl: 30px;
  --lh-text-lg: 28px;
  --lh-text-md: 24px;
  --lh-text-sm: 20px;
  --lh-text-xs: 18px;

  /* ---- Tracking ------------------------------------------- */
  --tracking-display: -0.02em;   /* display sizes              */
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;       /* eyebrows / overlines       */
}

/* ---- Type utility classes -------------------------------- */
/* Brand display — headlines, hero, marketing. Uses Outfit.    */
.wf-display-xl { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tracking-display); }
.wf-display-lg { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--tracking-display); }
.wf-display-md { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-display-md); line-height: var(--lh-display-md); letter-spacing: var(--tracking-display); }
.wf-display-sm { font-family: var(--font-display); font-weight: var(--fw-medium);   font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); }
.wf-display-xs { font-family: var(--font-display); font-weight: var(--fw-medium);   font-size: var(--fs-display-xs); line-height: var(--lh-display-xs); }

/* UI headings — in-product. Uses Inter.                       */
.wf-heading-lg { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--fs-display-xs); line-height: var(--lh-display-xs); letter-spacing: var(--tracking-display); }
.wf-heading-md { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--fs-text-xl); line-height: var(--lh-text-xl); }
.wf-heading-sm { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--fs-text-lg); line-height: var(--lh-text-lg); }

/* Body */
.wf-text-xl { font-family: var(--font-ui); font-weight: var(--fw-regular); font-size: var(--fs-text-xl); line-height: var(--lh-text-xl); }
.wf-text-lg { font-family: var(--font-ui); font-weight: var(--fw-regular); font-size: var(--fs-text-lg); line-height: var(--lh-text-lg); }
.wf-text-md { font-family: var(--font-ui); font-weight: var(--fw-regular); font-size: var(--fs-text-md); line-height: var(--lh-text-md); }
.wf-text-sm { font-family: var(--font-ui); font-weight: var(--fw-regular); font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); }
.wf-text-xs { font-family: var(--font-ui); font-weight: var(--fw-regular); font-size: var(--fs-text-xs); line-height: var(--lh-text-xs); }

/* Eyebrow / overline — uppercase label */
.wf-eyebrow {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Mono — credits, numeric, data */
.wf-mono { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-text-md); line-height: var(--lh-text-md); }

/* ============================================================
   WealthFeed · Spacing, radii, shadows, motion
   4px base grid. Shadows carry the brand's signature dark-green
   tint rgba(16,40,34,…) seen throughout the Figma.
   ============================================================ */

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

  /* ---- Radii ---------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 5px;    /* chips, small controls (Figma default) */
  --radius-md: 8px;    /* buttons, inputs, cards                */
  --radius-lg: 12px;   /* large cards / panels                  */
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---- Borders -------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Shadows (green-tinted) ----------------------------- */
  --shadow-xs: 0 1px 2px 0 rgba(16, 40, 34, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(16, 40, 34, 0.10), 0 1px 2px 0 rgba(16, 40, 34, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 40, 34, 0.10), 0 2px 4px -2px rgba(16, 40, 34, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 40, 34, 0.08), 0 4px 6px -2px rgba(16, 40, 34, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 40, 34, 0.08), 0 8px 8px -4px rgba(16, 40, 34, 0.03);
  --shadow-2xl: 0 24px 48px -12px rgba(16, 40, 34, 0.18);
  --shadow-3xl: 0 32px 64px -12px rgba(16, 40, 34, 0.14);

  /* Inset hairline border used as a crisp 1px stroke */
  --shadow-border: inset 0 0 0 1px var(--wf-neutral-200);

  /* ---- Blur (frosted glass / map overlays) ---------------- */
  --blur-glass: blur(8px); /* @kind other */

  /* ---- Motion --------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);          /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --duration-fast: 120ms;  /* @kind other */
  --duration-base: 200ms;  /* @kind other */
  --duration-slow: 320ms;  /* @kind other */

  /* ---- Layout -------------------------------------------- */
  --container-max: 1280px;
  --sidebar-width: 256px;
  --topbar-height: 64px;
}



/* ---- */

/* ============================================================
   WealthFeed marketing site — shared styles.
   Pairs with styles.css (tokens). Link both on every page.
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: var(--text-default); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.display { font-family: var(--font-display); letter-spacing: -0.025em; color: var(--text-strong); }
.eyebrow2 { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.muted { color: var(--text-muted); }
.center { text-align: center; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; border-radius: var(--radius-md); padding: 12px 20px; cursor: pointer; border: 1px solid transparent; transition: all var(--duration-fast); white-space: nowrap; }
.btn .wf-icon { font-size: 19px; }
.btn-primary { background: var(--action-primary-bg); color: #fff; }
.btn-primary:hover { background: var(--action-primary-bg-hover); }
.btn-accent { background: var(--wf-green-500); color: var(--wf-navy); }
.btn-accent:hover { background: var(--wf-green-600); }
.btn-ghost { color: var(--text-default); border-color: var(--border-default); background: #fff; }
.btn-ghost:hover { background: var(--wf-neutral-50); }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn-light { background: #fff; color: var(--wf-navy); }
.btn-light:hover { background: var(--wf-neutral-100); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-outline-light:hover { background: rgba(255,255,255,0.1); }

/* NAV */
header.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.82); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); border-bottom: 1px solid var(--border-subtle); }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 74px; }
.nav-inner > a:first-child { flex: 1 0 auto; display: inline-flex; align-items: center; }
.nav-inner > a:first-child img { height: 36px; width: auto; }
.nav-links { display: flex; gap: 26px; flex: 0 1 auto; justify-content: center; margin: 0; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--text-strong); }
.nav-right { display: flex; align-items: center; gap: 14px; flex: 1 0 auto; justify-content: flex-end; }
.nav-right .signin { font-size: 15px; font-weight: 600; color: var(--text-default); }

/* generic section + head */
section { padding: 96px 0; }
.head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.head .eyebrow2 { color: var(--wf-green-700); display: block; margin-bottom: 14px; }
.head h2 { font-size: 42px; line-height: 1.1; margin: 0 0 16px; font-family: var(--font-display); letter-spacing: -0.025em; color: var(--text-strong); }
.head p { font-size: 19px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* pill / eyebrow pill */
.pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border-default); box-shadow: var(--shadow-xs); color: var(--text-default); font-weight: 600; font-size: 13px; padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); }
.pill .wf-icon { font-size: 16px; color: var(--wf-green-600); }

/* interior page hero (centered) */
.page-hero { position: relative; overflow: hidden; text-align: center; padding: 80px 0 64px; }
.page-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(60% 70% at 50% -20%, rgba(27,194,147,0.10), transparent 60%); pointer-events:none; }
.page-hero .inner { position: relative; max-width: 760px; margin: 0 auto; }
.page-hero h1 { font-family: var(--font-display); font-size: 52px; line-height: 1.06; letter-spacing: -0.025em; color: var(--text-strong); margin: 20px 0 18px; }
.page-hero p { font-size: 20px; line-height: 1.5; color: var(--text-muted); max-width: 620px; margin: 0 auto; }
.page-hero .cta { display: flex; gap: 14px; justify-content: center; margin-top: 30px; }

/* split feature hero (product pages) */
.feat-hero { position: relative; overflow: hidden; }
.feat-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(60% 60% at 90% -10%, rgba(27,194,147,0.10), transparent 60%); pointer-events:none; }
.feat-hero-grid { position: relative; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; padding-block: 72px; }
.feat-hero h1 { font-family: var(--font-display); font-size: 50px; line-height: 1.06; letter-spacing: -0.025em; color: var(--text-strong); margin: 20px 0 18px; }
.feat-hero .sub { font-size: 19px; line-height: 1.55; color: var(--text-muted); max-width: 520px; }
.feat-hero .cta { display: flex; gap: 14px; margin-top: 30px; }

/* product browser panel */
.panel { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-2xl); overflow: hidden; }
.panel.flat { box-shadow: var(--shadow-lg); }
.panel-top { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--wf-neutral-25); }
.pdot { width: 9px; height: 9px; border-radius: 50%; }
.pdot.r { background:#ff5f57 } .pdot.y { background:#febc2e } .pdot.g { background:#28c840 }
.panel-url { margin-left: 8px; font-size: 12px; color: var(--text-subtle); font-family: var(--font-mono); }
.panel-body { padding: 16px; }
.lead-row { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: 9px; }
.lead-row:last-child { margin-bottom: 0; }
.lav { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--wf-navy); }
.lead-name { font-weight: 600; font-size: 14px; color: var(--text-strong); }
.lead-meta { font-size: 12px; color: var(--text-muted); }
.ctag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.ctag .wf-icon { font-size: 13px; }

/* trust strip */
.trust { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--wf-neutral-25); }
.trust-inner { display: flex; align-items: center; gap: 40px; padding: 26px 0; }
.trust-label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; max-width: 160px; line-height: 1.4; flex: none; }
.trust-logos { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.trust-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: trust-scroll 60s linear infinite; }
.trust-track img { height: 44px; width: auto; flex: none; mix-blend-mode: multiply; opacity: .82; }
.trust-logos:hover .trust-track { animation-play-state: paused; }
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .trust-track { animation: none; } }

/* feature rows */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 44px 0; }
.feature-row.flip .copy { order: 2; }
.feature-row .copy .eyebrow2 { color: var(--wf-green-700); }
.feature-row .copy h3 { font-family: var(--font-display); font-size: 32px; letter-spacing: -0.02em; color: var(--text-strong); margin: 12px 0 14px; line-height: 1.12; }
.feature-row .copy p { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0 0 18px; }
.feature-row .copy .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-chip { font-size: 13px; font-weight: 500; color: var(--text-default); background: var(--wf-neutral-50); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 6px 12px; }
.visual { border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; background: #fff; }

/* outcome / icon cards */
.out-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.out { padding: 26px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: #fff; }
.out .ic { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--wf-neutral-50); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.out .ic .wf-icon { font-size: 24px; color: var(--wf-navy); }
.out h4 { margin: 0 0 6px; font-size: 17px; color: var(--text-strong); }
.out p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.out.grad .ic { background: var(--wf-gradient-brand); }
.out.grad .ic .wf-icon { color: #fff; }

/* metrics */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.metric .num { font-family: var(--font-display); font-weight: 700; font-size: 44px; letter-spacing: -0.02em; color: var(--text-strong); line-height: 1; }
.metric .num .u { color: var(--wf-green-600); }
.metric .lbl { font-size: 14px; color: var(--text-muted); margin-top: 8px; }
.dark .metric .num { color: #fff; }
.dark .metric .num .u { color: var(--wf-green-400); }
.dark .metric .lbl { color: rgba(255,255,255,0.66); }

/* dark band */
.dark { background: var(--wf-navy); color: #fff; position: relative; overflow: hidden; }
.dark::before { content:''; position:absolute; inset:0; background: radial-gradient(50% 60% at 82% 18%, rgba(27,194,147,0.16), transparent 60%); }
.dark .head h2 { color: #fff; } .dark .head p { color: rgba(255,255,255,0.72); } .dark .head .eyebrow2 { color: var(--wf-green-400); }

/* enterprise points + badges */
.ent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.cbadge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--text-default); background: #fff; }
.cbadge .wf-icon { font-size: 19px; color: var(--wf-green-600); }
.ent-points { display: flex; flex-direction: column; gap: 18px; }
.epoint { display: flex; gap: 14px; align-items: flex-start; }
.epoint .ic { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--wf-neutral-50); display: flex; align-items: center; justify-content: center; flex: none; }
.epoint .ic .wf-icon { font-size: 22px; color: var(--wf-navy); }
.epoint h5 { margin: 0 0 3px; font-size: 16px; color: var(--text-strong); }
.epoint p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 26px; background: #fff; box-shadow: var(--shadow-xs); }
.quote .stars { color: var(--wf-amber-500); font-size: 15px; margin-bottom: 12px; letter-spacing: 2px; }
.quote p { font-size: 15px; line-height: 1.55; color: var(--text-default); margin: 0 0 18px; }
/* Avatars are fixed-size badges — never let the flex row shrink them into ovals. */
.av { flex: none; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--wf-navy); font-size: 14px; }
.quote .nm { font-weight: 600; font-size: 14px; color: var(--text-strong); }
.quote .fm { font-size: 13px; color: var(--text-subtle); }

/* pricing */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; max-width: 920px; margin: 0 auto; }
.plan { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; }
.plan.pop { border-color: var(--wf-green-500); box-shadow: var(--shadow-lg); }
.plan .pop-tag { position: absolute; top: -13px; left: 36px; background: var(--wf-green-500); color: var(--wf-navy); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill); }
.plan-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 18px; }
.plan h3 { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 6px; }
.plan .ptag { font-size: 14px; color: var(--text-muted); margin: 0 0 22px; }
.plan .pamt { font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: -0.02em; color: var(--text-strong); }
.plan .pamt small { font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--text-subtle); }
.plan ul { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-default); }
.plan li .wf-icon { font-size: 19px; flex: none; color: var(--wf-green-600); }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.cmp th { font-weight: 600; color: var(--text-strong); }
.cmp td.c, .cmp th.c { text-align: center; }
.cmp .grp { font-weight: 700; color: var(--text-strong); background: var(--wf-neutral-25); }
.cmp .wf-icon { font-size: 20px; color: var(--wf-green-600); }
.cmp .dash { color: var(--border-strong); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-subtle); padding: 22px 0; }
.faq-item h4 { margin: 0 0 8px; font-size: 17px; color: var(--text-strong); display: flex; align-items: center; gap: 8px; }
.faq-item h4 .wf-icon { color: var(--wf-green-600); font-size: 20px; }
.faq-item p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* concierge chat */
.chat { width: 100%; max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--border-subtle); border-radius: 20px; box-shadow: var(--shadow-2xl); overflow: hidden; }
.chat-head { background: linear-gradient(90deg, #1bc293 0%, #0e5f6b 48%, #010144 100%); padding: 18px 22px; display: flex; align-items: center; gap: 14px; color: #fff; }
.chat-head .av { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; flex: none; }
.chat-head .av .wf-icon { font-size: 24px; color: #fff; }
.chat-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; background: #fcfcfd; }
.bubble { max-width: 82%; padding: 13px 16px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.bubble.bot { align-self: flex-start; background: #fff; border: 1px solid var(--border-subtle); color: var(--text-default); border-bottom-left-radius: 5px; box-shadow: var(--shadow-xs); }
.bubble.me { align-self: flex-end; background: var(--wf-navy); color: #fff; border-bottom-right-radius: 5px; }
.chat-input { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border-subtle); background: #fff; }
.chat-input .fake { flex: 1; color: var(--text-subtle); font-size: 14px; }
.chat-send { display: inline-flex; align-items: center; color: var(--wf-green-600); flex: none; }

/* final cta */
.cta-band { background: var(--wf-navy); border-radius: var(--radius-2xl); padding: 64px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta-band::before { content:''; position:absolute; inset:0; background: radial-gradient(60% 80% at 50% 120%, rgba(27,194,147,0.25), transparent 60%); }
.cta-band h2 { position: relative; font-family: var(--font-display); font-size: 42px; letter-spacing: -0.025em; margin: 0 0 16px; }
.cta-band p { position: relative; font-size: 19px; color: rgba(255,255,255,0.8); margin: 0 auto 30px; max-width: 560px; line-height: 1.5; }
.cta-actions { position: relative; display: flex; gap: 14px; justify-content: center; }

/* footer */
footer { padding: 56px 0 40px; }
.foot-grid { display: flex; justify-content: space-between; gap: 48px; }
.foot-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-col h5 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); margin: 0 0 14px; }
.foot-col a { display: block; font-size: 14px; color: var(--text-muted); margin-bottom: 10px; }
.foot-col a:hover { color: var(--text-strong); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-subtle); }

@media (max-width: 900px) {
  .hero-grid, .feat-hero-grid, .ent-grid, .wl-grid, .prod-grid, .pricing-grid, .feature-row { grid-template-columns: 1fr; }
  .out-grid, .quotes, .metrics { grid-template-columns: 1fr 1fr; }
  /* Stacked: every feature row reads text-then-image, including the
     desktop-flipped ones (which otherwise keep copy at order:2). */
  .feature-row.flip .copy { order: 0; }
  .nav-links { display: none; }
}


/* ---- */


html,body{margin:0}body{background:var(--surface-page)}
.route[hidden]{display:none}

/* home */

  /* ---- bold gradient hero ---- */
  .bold-hero { position: relative; overflow: hidden; text-align: center; padding: 88px 0 72px; background: #fcfcfd; }
  .bold-hero::before { content:''; position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(40% 55% at 12% 6%, rgba(42,111,219,0.08), transparent 60%),
    radial-gradient(45% 60% at 90% 10%, rgba(27,194,147,0.12), transparent 60%),
    radial-gradient(50% 50% at 70% 100%, rgba(1,1,68,0.05), transparent 60%); }
  .bold-hero .inner { position: relative; max-width: 900px; margin: 0 auto; padding: 0 32px; }
  .eyebrow-pill { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border-default); box-shadow: var(--shadow-xs); color: var(--text-default); font-weight: 600; font-size: 14px; padding: 8px 16px 8px 14px; border-radius: var(--radius-pill); }
  .eyebrow-pill .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--wf-green-500); box-shadow: 0 0 0 4px rgba(27,194,147,0.18); }
  .eyebrow-pill .dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--wf-green-500); }
  h1.big { font-family: var(--font-display); font-weight: 700; font-size: 78px; line-height: 0.98; letter-spacing: -0.035em; color: var(--text-strong); margin: 26px 0 24px; }
  h1.big .grad { background: linear-gradient(96deg, #1BC293 0%, #0E9E86 26%, #0E5F6B 50%, #151569 74%, #0E9E86 100%); background-size: 220% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; }
  @media (prefers-reduced-motion: no-preference){
    .eyebrow-pill .dot::after { animation: dot-pulse 2.4s ease-out infinite; }
    @keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(27,194,147,0.5); } 70% { box-shadow: 0 0 0 9px rgba(27,194,147,0); } 100% { box-shadow: 0 0 0 0 rgba(27,194,147,0); } }
    h1.big .grad { animation: grad-wave 7s ease-in-out infinite; }
    @keyframes grad-wave { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    .bold-hero::before { animation: none; }
    @keyframes aura-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%,1.5%,0) scale(1.08); } }
  }
  .bold-hero p.sub { font-size: 19px; line-height: 1.55; color: var(--text-muted); max-width: 640px; margin: 0 auto; }
  .bold-cta { display: flex; gap: 14px; justify-content: center; margin-top: 34px; }
  .btn-pill { border-radius: var(--radius-pill); padding: 14px 28px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: all var(--duration-fast); }
  .btn-pill.primary { background: var(--wf-navy); color: #fff; border: 1px solid var(--wf-navy); box-shadow: var(--shadow-md); }
  .btn-pill.primary:hover { background: #0a0a4d; }
  .btn-pill.ghost { background: #fff; color: var(--text-strong); border: 1px solid var(--border-default); box-shadow: var(--shadow-xs); }
  .btn-pill.ghost:hover { background: var(--wf-neutral-50); }
  .btn-pill .wf-icon { font-size: 20px; }

  /* ---- growth engine flow visual ---- */
  .engine { background: var(--wf-navy); color: #fff; position: relative; overflow: hidden; }
  .engine::before { content:''; position:absolute; inset:0; background:
    radial-gradient(45% 70% at 15% 10%, rgba(27,194,147,0.18), transparent 60%),
    radial-gradient(45% 70% at 88% 90%, rgba(123,97,255,0.14), transparent 60%); }
  .engine .head h2 { color:#fff; } .engine .head p { color: rgba(255,255,255,0.72); } .engine .head .eyebrow2 { color: var(--wf-green-400); }
  .flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 8px; }
  .flow::before { content:''; position:absolute; left:9%; right:9%; top:38px; height:3px; background: linear-gradient(90deg,#1BC293,#37CCA2,#6565b4,#7b61ff); border-radius:2px; opacity:.85; }
  .stage { position: relative; text-align: center; }
  .stage .orb { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; backdrop-filter: var(--blur-glass); }
  .stage .orb .wf-icon { font-size: 32px; color: #fff; }
  .stage.s1 .orb { box-shadow: 0 0 0 4px rgba(27,194,147,0.25); }
  .stage h4 { margin: 0 0 6px; font-size: 17px; color: #fff; }
  .stage p { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.62); padding: 0 6px; }
  .flow-caps { display: flex; justify-content: space-between; margin-top: 36px; font-size: 13px; color: rgba(255,255,255,0.6); }
  .flow-caps .end { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); padding: 7px 14px; border-radius: var(--radius-pill); font-weight: 600; color: #fff; }
  .flow-caps .wf-icon { font-size: 16px; color: var(--wf-green-400); }

  /* ---- feature visuals ---- */
  .fviz { border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; background: #fff; }
  .chat2 { background: var(--wf-neutral-25); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
  .chat2 .head { background: var(--wf-gradient-brand); margin: -20px -20px 8px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; color: #fff; }
  .chat2 .head .av { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }
  .bubble { max-width: 82%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
  .bot { background: #fff; border: 1px solid var(--border-subtle); color: var(--text-default); border-bottom-left-radius: 4px; }
  .me { background: var(--wf-navy); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
  .camp { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); margin-bottom:9px; }
  .camp:last-child { margin-bottom:0; }
  .camp .wf-icon { color: var(--wf-navy); }

  /* ---- compliance two-card section ---- */
  .cf { text-align: center; }
  .cf .ch { max-width: 780px; margin: 0 auto 48px; }
  .cf .ch .eyebrow2 { display: block; margin-bottom: 14px; color: #2a6fdb; }
  .cf .ch h2 { font-family: var(--font-display); font-size: 42px; line-height: 1.12; letter-spacing: -0.025em; color: var(--text-strong); margin: 0 0 16px; }
  .cf .ch h2 .grad2 { background: linear-gradient(96deg, #2A6FDB 0%, #1BC293 46%, #37CCA2 66%, #C1A747 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .cf .ch p { font-size: 18px; line-height: 1.55; color: var(--text-muted); margin: 0; }
  .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
  .cf-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 34px; box-shadow: var(--shadow-sm); }
  .cf-card.cf-adv { background: linear-gradient(180deg, #f1effb 0%, #fcfcfd 52%); }
  .cf-card.cf-ent { background: linear-gradient(180deg, #e7f6f0 0%, #fcfcfd 52%); }
  .cf-card .ce { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
  .cf-card.cf-adv .ce { color: #2a6fdb; }
  .cf-card.cf-ent .ce { color: var(--wf-green-700); }
  .cf-card h3 { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 12px; line-height: 1.15; }
  .cf-card .lead { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0 0 20px; }
  .cf-list { list-style: none; padding: 0; margin: 0 0 22px; }
  .cf-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-default); padding: 13px 0; border-top: 1px solid var(--border-subtle); }
  .cf-list li:first-child { border-top: 0; }
  .cf-list li .wf-icon { font-size: 20px; flex: none; }
  .cf-card.cf-adv .cf-list li .wf-icon { color: #2a6fdb; }
  .cf-card.cf-ent .cf-list li .wf-icon { color: var(--wf-green-600); }
  .cf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .cf-pill { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text-strong); box-shadow: var(--shadow-xs); }
  /* ---- radar / data intelligence visual ---- */
  .radar-card { background: linear-gradient(135deg, #f1f4fc 0%, #fcfcfd 62%); }
  .radar { position: relative; height: 372px; }
  .radar > svg { width: 100%; height: 100%; display: block; }
  .score { position: absolute; right: 24px; top: 86px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; width: 248px; }
  .score .grade { width: 42px; height: 42px; border-radius: 50%; background: #2a6fdb; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: none; }
  .score .bars { flex: 1; display: flex; flex-direction: column; gap: 7px; }
  .score .b1 { height: 8px; border-radius: 4px; background: var(--wf-ink-700); width: 92%; }
  .score .b2 { height: 8px; border-radius: 4px; background: var(--wf-neutral-300); width: 64%; }
  .score .prog { height: 8px; border-radius: 4px; background: var(--wf-neutral-200); width: 100%; display: block; overflow: hidden; }
  .score .prog i { display: block; height: 100%; width: 68%; background: #2a6fdb; border-radius: 4px; }

  /* ---- marketing automation flow ---- */
  .mauto { background: linear-gradient(135deg, #e7f6f0 0%, #fcfcfd 62%); display: flex; align-items: center; justify-content: center; padding: 20px; }
  .mauto svg { width: 100%; height: auto; display: block; }

  /* ---- website concierge visual ---- */
  .concierge { background: linear-gradient(135deg, #fff4e6 0%, #fcfcfd 60%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px 28px; }
  .cwin { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
  .cbar { display: flex; gap: 7px; padding: 13px 16px; background: var(--wf-neutral-50); border-bottom: 1px solid var(--border-subtle); }
  .cbar span { width: 9px; height: 9px; border-radius: 50%; background: var(--wf-neutral-300); }
  .cbar span.am { background: #f8a02d; }
  .cbody { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
  .bub-in { align-self: flex-start; background: var(--wf-neutral-100); border-radius: 12px; padding: 13px 15px; width: 60%; }
  .bub-in i { display: block; height: 8px; border-radius: 4px; background: var(--wf-neutral-400); width: 80%; }
  .bub-out { align-self: flex-end; background: #f8a02d; border-radius: 12px; padding: 13px 15px; width: 58%; display: flex; flex-direction: column; gap: 7px; }
  .bub-out i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.95); }
  .bub-out i.s { width: 56%; background: rgba(255,255,255,0.72); }
  .crow { display: flex; align-items: center; justify-content: space-between; }
  .crow .bub-in { width: 56%; }
  .cav { width: 46px; height: 46px; border-radius: 50%; background: #f8a02d; display: flex; align-items: center; justify-content: center; flex: none; }
  .cav .wf-icon { color: #fff; font-size: 24px; }
  .booked { background: var(--wf-ink-900); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); }
  @media (prefers-reduced-motion: no-preference){
    .hp-sweep{ transform-box:view-box; transform-origin:225px 186px; animation:hp-sweep 4.5s linear infinite; }
    @keyframes hp-sweep{ to{ transform:rotate(360deg); } }
    .hp-blink{ animation:hp-blink 2.2s ease-in-out infinite; }
    @keyframes hp-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
    .hp-pulse{ transform-box:fill-box; transform-origin:center; animation:hp-pulse 2.6s ease-in-out infinite; }
    @keyframes hp-pulse{ 0%,100%{ opacity:.9; transform:scale(1) } 50%{ opacity:.3; transform:scale(1.18) } }
    .concierge .cbody > *{ opacity:0; animation:hp-chat 6.5s ease-in-out infinite; }
    .concierge .cbody > *:nth-child(1){ animation-delay:0s }
    .concierge .cbody > *:nth-child(2){ animation-delay:1.1s }
    .concierge .cbody > *:nth-child(3){ animation-delay:2.2s }
    @keyframes hp-rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }
    @keyframes hp-chat{ 0%{opacity:0;transform:translateY(12px)} 7%{opacity:1;transform:translateY(0)} 88%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(0)} }
    .concierge .cbar span.am{ animation:hp-blink 2s ease-in-out infinite; }
  }

  .visual > svg { width:100%; height:auto; display:block; }
  @media (prefers-reduced-motion: no-preference){
    .sweep{ animation:sweep 5s linear infinite; transform-origin:170px 200px; }
    @keyframes sweep{ to{ transform:rotate(360deg); } }
    .pulse{ animation:pulse 2.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
    @keyframes pulse{ 50%{ opacity:.35; } }
    .blink{ animation:blink 2.2s ease-in-out infinite; }
    @keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
    .drift{ animation:drift 4s ease-in-out infinite; }
    @keyframes drift{ 50%{ transform:translateY(-7px); } }
    .trace{ stroke-dasharray:700; stroke-dashoffset:700; animation:trace 3.2s ease forwards; }
    @keyframes trace{ to{ stroke-dashoffset:0; } }
  }

  /* ---- testimonials marquee ---- */
  .mq { position: relative; overflow: hidden; padding: 6px 0; }
  .mq + .mq { margin-top: 20px; }
  .mq::before, .mq::after { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; }
  .mq::before { left: 0; background: linear-gradient(90deg, var(--surface-page), transparent); }
  .mq::after { right: 0; background: linear-gradient(270deg, var(--surface-page), transparent); }
  .mq-track { display: flex; gap: 20px; width: max-content; will-change: transform; }
  .mq-track.l { animation: mq-l 72s linear infinite; }
  .mq-track.r { animation: mq-r 72s linear infinite; }
  @keyframes mq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes mq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  .mq:hover .mq-track { animation-play-state: paused; }
  .mq-card { flex: 0 0 380px; box-sizing: border-box; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px; background: #fff; box-shadow: var(--shadow-xs); }
  .mq-card .stars { color: var(--wf-amber-500); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
  .mq-card p { font-size: 14.5px; line-height: 1.55; color: var(--text-default); margin: 0 0 16px; }
  .mq-card .who { display: flex; align-items: center; gap: 11px; }
  .mq-card .av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--wf-navy); font-size: 13px; flex: none; }
  .mq-card .nm { font-weight: 600; font-size: 13.5px; color: var(--text-strong); }
  .mq-card .fm { font-size: 12.5px; color: var(--text-subtle); }
  @media (prefers-reduced-motion: reduce) { .mq-track.l, .mq-track.r { animation: none; } }
  /* integrate & accelerate */
  .integ{ padding:100px 0 96px; }
  .integ .head{ text-align:center; max-width:680px; margin:0 auto; }
  .integ .head h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4.4vw,52px); letter-spacing:-0.025em; color:var(--text-strong); margin:0; }
  .integ .head p{ font-size:18px; color:var(--text-muted); margin-top:16px; }
  .integ-flow{ position:relative; height:90px; margin:18px 0 -6px; }
  .integ-flow svg{ position:absolute; inset:0; width:100%; height:100%; }
  .integ-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .integ-card{ background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); height:148px; display:flex; align-items:center; justify-content:center; padding:24px; transition:box-shadow var(--duration-base), transform var(--duration-base); }
  .integ-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
  .integ-card img{ max-height:48px; max-width:80%; width:auto; object-fit:contain; }
  @media(max-width:860px){ .integ-cards{ grid-template-columns:repeat(2,1fr); } .integ-flow{ display:none; } }

/* data-intelligence */

/* data-intelligence */

  .di .copy .eyebrow2 { color: #2a6fdb; }
  .di .feat-hero::before { background: radial-gradient(60% 60% at 90% -10%, rgba(42,111,219,0.10), transparent 60%); }
  .visual > svg { width: 100%; height: auto; display: block; }
  /* feature graphic animations */
  .pulse{animation:pulse 2.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
  @keyframes pulse{50%{opacity:.35;}}
  .sweep{animation:sweep 5s linear infinite;transform-origin:170px 200px;}
  @keyframes sweep{to{transform:rotate(360deg);}}
  .blink{animation:blink 2.2s ease-in-out infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
  .drift{animation:drift 4s ease-in-out infinite;}
  @keyframes drift{50%{transform:translateY(-7px);}}
  .trace{stroke-dasharray:700;stroke-dashoffset:700;animation:trace 3.2s ease forwards;}
  @keyframes trace{to{stroke-dashoffset:0;}}
  @media (prefers-reduced-motion: reduce){ .pulse,.sweep,.blink,.drift{animation:none;} .trace{stroke-dashoffset:0;animation:none;} }

  /* data-intelligence hero */
  .di-hero { padding: 64px 0 76px; position: relative; }
  .di-hero .head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
  .di-hero .head .eyebrow2 { display: block; margin-bottom: 14px; }
  .di-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5.2vw, 60px); letter-spacing: -0.025em; line-height: 1.04; color: var(--text-strong); margin: 0; }
  .grad-di { background: linear-gradient(100deg, #2a6fdb, #1bc293 72%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
  .di-hero .head p { color: var(--text-muted); font-size: 18px; line-height: 1.6; margin: 18px auto 0; max-width: 56ch; }
  .frame { width: 100%; border: 1px solid var(--border-subtle); border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, #fff, var(--wf-neutral-50)); box-shadow: var(--shadow-2xl); }
  .frame svg { display: block; width: 100%; height: auto; }
  .spin-slow { animation: spin 40s linear infinite; transform-origin: 590px 270px; }
  .spin-rev { animation: spin 28s linear infinite reverse; transform-origin: 590px 270px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .breathe { animation: breathe 4s ease-in-out infinite; transform-origin: 590px 270px; }
  @keyframes breathe { 50% { transform: scale(1.04); } }
  @media (prefers-reduced-motion: reduce){ .spin-slow,.spin-rev,.breathe{ animation:none; } }

/* marketing-hub */

@media (prefers-reduced-motion: no-preference){
  .mh-row{ opacity:0; animation:mh-row 6s ease-in-out infinite; }
  .mh-row:nth-child(1){ animation-delay:0s }
  .mh-row:nth-child(2){ animation-delay:.8s }
  .mh-row:nth-child(3){ animation-delay:1.6s }
  @keyframes mh-row{ 0%{opacity:0;transform:translateY(12px)} 9%{opacity:1;transform:translateY(0)} 90%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(0)} }
}
  /* ---- stat band ---- */
  .statband{ position:relative; overflow:hidden; }
  .statband::before{ content:''; position:absolute; inset:0; background:
    radial-gradient(40% 80% at 18% 30%, rgba(27,194,147,0.16), transparent 60%),
    radial-gradient(45% 90% at 85% 70%, rgba(123,97,255,0.14), transparent 60%); pointer-events:none; }
  .statband::after{ content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size:22px 22px; }
  .stat-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .stat-card{ position:relative; padding:30px 22px; border-radius:var(--radius-xl);
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(6px); text-align:center; overflow:hidden;
    transition:transform var(--duration-base) var(--ease-standard), background var(--duration-base), border-color var(--duration-base); }
  .stat-card::before{ content:''; position:absolute; left:24px; right:24px; top:0; height:2px; border-radius:2px;
    background:linear-gradient(90deg, transparent, var(--wf-green-400), transparent); opacity:.7; }
  .stat-card:hover{ transform:translateY(-5px); background:rgba(255,255,255,0.08); border-color:rgba(27,194,147,0.4); }
  .stat-ic{ width:48px; height:48px; margin:0 auto 16px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(140deg, rgba(27,194,147,0.22), rgba(123,97,255,0.18)); border:1px solid rgba(255,255,255,0.14); }
  .stat-ic .wf-icon{ font-size:24px; color:#fff; }
  .stat-num{ font-family:var(--font-display); font-weight:700; font-size:40px; line-height:1; letter-spacing:-0.02em;
    background:linear-gradient(180deg,#ffffff, #c9f5e7); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat-num.sm{ font-size:26px; }
  .stat-lbl{ font-size:14px; color:rgba(255,255,255,0.66); margin-top:10px; }
  @media (prefers-reduced-motion: no-preference){
    .stat-ic{ animation:stat-float 4s ease-in-out infinite; }
    .stat-card:nth-child(2) .stat-ic{ animation-delay:.5s } .stat-card:nth-child(3) .stat-ic{ animation-delay:1s } .stat-card:nth-child(4) .stat-ic{ animation-delay:1.5s }
    @keyframes stat-float{ 50%{ transform:translateY(-5px); } }
  }
  @media (max-width:860px){ .stat-grid{ grid-template-columns:1fr 1fr; } }

  /* campaign sequence graphic */
  .seqwrap{ position:relative; border:1px solid var(--border-subtle); border-radius:28px;
    background:linear-gradient(150deg,#e7f6f0 0%, #fbfcfe 55%, #fff7ec 100%); padding:56px 40px; box-shadow:var(--shadow-lg); overflow:hidden; }
  .seq{ position:relative; height:520px; max-width:1080px; margin:0 auto; }
  .seq .track{ position:absolute; left:9%; right:9%; top:260px; border-top:2px dashed var(--border-strong); opacity:.65; }
  .seq .conn{ position:absolute; width:0; border-left:2px dashed; }
  .seq .pkt{ position:absolute; top:260px; left:9%; width:14px; height:14px; border-radius:50%; background:var(--wf-green-500); box-shadow:0 0 0 5px rgba(27,194,147,.18); transform:translate(-50%,-50%); }
  .seq .endcap{ position:absolute; top:208px; display:flex; flex-direction:column; align-items:center; gap:14px; transform:translateX(-50%); }
  .seq .circle{ width:104px; height:104px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); }
  .seq .circle .wf-icon{ font-size:46px; color:#fff; }
  .seq .endcap .cap{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text-muted); }
  .seq .start{ left:6%; } .seq .start .circle{ background:var(--wf-green-500); }
  .seq .finish{ left:94.5%; } .seq .finish .circle{ background:var(--wf-ink-900); } .seq .finish .circle .wf-icon{ color:var(--wf-green-400); }
  .seq .step{ position:absolute; width:240px; background:#fff; border:1px solid var(--border-subtle); border-radius:16px;
    box-shadow:var(--shadow-md); padding:16px 18px; transform:translateX(-50%); }
  .seq .step .row{ display:flex; align-items:center; gap:12px; }
  .seq .step .si{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:none; }
  .seq .step .si .wf-icon{ font-size:21px; }
  .seq .step .ttl{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--text-strong); }
  .seq .step .bar{ height:8px; border-radius:4px; background:var(--wf-neutral-200); margin-top:14px; width:72%; }
  .seq .approved{ position:absolute; left:50%; top:0; transform:translateX(-50%); display:inline-flex; align-items:center; gap:9px;
    background:var(--wf-ink-900); color:#fff; font-family:var(--font-display); font-weight:600; font-size:15px; padding:13px 22px; border-radius:var(--radius-pill); box-shadow:var(--shadow-md); }
  .seq .approved .wf-icon{ font-size:19px; color:var(--wf-green-400); }
  /* step positions */
  .seq .s1{ left:24%; top:96px; } .seq .s1 .si{ background:#e7f6f0; } .seq .s1 .si .wf-icon{ color:var(--wf-green-600); }
  .seq .s2{ left:42%; top:346px; } .seq .s2 .si{ background:#eaf0ff; } .seq .s2 .si .wf-icon{ color:#2a6fdb; }
  .seq .s3{ left:62%; top:96px; } .seq .s3 .si{ background:#eaf0ff; } .seq .s3 .si .wf-icon{ color:#2a6fdb; }
  .seq .s4{ left:80%; top:346px; } .seq .s4 .si{ background:#fff1dd; } .seq .s4 .si .wf-icon{ color:var(--wf-amber-600); }
  /* connectors to the midline */
  .seq .c1{ left:24%; top:190px; height:70px; border-color:#37cca2; }
  .seq .c2{ left:42%; top:260px; height:86px; border-color:#9fb3f0; }
  .seq .c3{ left:62%; top:190px; height:70px; border-color:#9fb3f0; }
  .seq .c4{ left:80%; top:260px; height:86px; border-color:var(--wf-amber-400); }
  @media (prefers-reduced-motion: no-preference){
    .seq .pkt{ animation:seq-run 5s cubic-bezier(.45,0,.55,1) infinite; }
    @keyframes seq-run{ 0%{ left:9%; opacity:0 } 6%{ opacity:1 } 94%{ opacity:1 } 100%{ left:91%; opacity:0 } }
  }
  @media (max-width:920px){
    .seq{ height:auto; display:flex; flex-direction:column; gap:14px; }
    .seq .track, .seq .conn, .seq .pkt, .seq .approved{ display:none; }
    .seq .endcap, .seq .step{ position:static; transform:none; width:100%; box-sizing:border-box; }
    .seq .endcap{ flex-direction:row; }
  }
  /* ported feature sections */
  .feature{ padding:104px 0; border-top:1px solid var(--border-subtle); }
  .feature-in{ display:grid; grid-template-columns:1fr 1.08fr; gap:72px; align-items:center; }
  .feature.flip .feature-in{ grid-template-columns:1.08fr 1fr; }
  .feature.flip .copy{ order:2; } .feature.flip .art{ order:1; }
  .feature .copy .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--wf-green-700); margin-bottom:14px; }
  .feature .copy h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.6vw,44px); line-height:1.06; letter-spacing:-0.025em; color:var(--text-strong); margin-bottom:20px; }
  .feature .copy h2 .grad{ background:linear-gradient(100deg,#1bc293,#2a6fdb); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .feature .copy > p{ color:var(--text-muted); font-size:17px; line-height:1.65; margin-bottom:24px; max-width:46ch; }
  .feature .mini{ list-style:none; padding:0; margin:0; }
  .feature .mini li{ display:flex; gap:12px; align-items:center; padding:9px 0; font-size:15px; color:var(--text-default); }
  .feature .mini li b{ width:6px; height:6px; border-radius:50%; flex:none; }
  .feature .art{ border-radius:24px; overflow:hidden; border:1px solid var(--border-subtle); background:linear-gradient(180deg,#fff,#f5f6f6); box-shadow:var(--shadow-lg); }
  .feature .art svg{ display:block; width:100%; height:auto; }
  .feature .blink{ animation:mh-blink 2.4s ease-in-out infinite; } @keyframes mh-blink{ 0%,100%{opacity:1} 50%{opacity:.3} }
  .feature .drift{ animation:mh-drift 4.5s ease-in-out infinite; } @keyframes mh-drift{ 50%{transform:translateY(-7px)} }
  .feature .dash{ stroke-dasharray:6 7; animation:mh-dashmove 1.6s linear infinite; } @keyframes mh-dashmove{ to{stroke-dashoffset:-13} }
  .feature .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .feature .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .feature .blink,.feature .drift,.feature .dash{ animation:none; } .feature .reveal{ opacity:1; transform:none; } }
  @media(max-width:880px){ .feature-in,.feature.flip .feature-in{ grid-template-columns:1fr; gap:44px; } .feature.flip .copy{ order:1; } .feature.flip .art{ order:2; } }


/* webleads */

  .chat-body{ height:420px; min-height:0; justify-content:flex-end; overflow:hidden; }
  .wl-typing{ display:inline-flex; gap:4px; align-items:center; }
  .wl-typing i{ width:7px; height:7px; border-radius:50%; background:var(--wf-neutral-400); display:block; animation:wl-bounce 1.2s ease-in-out infinite; }
  .wl-typing i:nth-child(2){ animation-delay:.18s; } .wl-typing i:nth-child(3){ animation-delay:.36s; }
  @keyframes wl-bounce{ 0%,80%,100%{ transform:translateY(0); opacity:.5 } 40%{ transform:translateY(-4px); opacity:1 } }
  .wl-caret{ display:inline-block; width:1px; }
  .bubble.enter{ animation:wl-pop .26s ease both; }
  @keyframes wl-pop{ from{ opacity:0; transform:translateY(8px) scale(.98) } to{ opacity:1; transform:translateY(0) scale(1) } }
  @media (prefers-reduced-motion: reduce){ .bubble.enter{ animation:none; } }
  .wf-underline{ position:relative; white-space:nowrap; }
  .compliance-badges{ display:flex; flex:1; justify-content:space-between; gap:48px; padding-right:80px; }
  .compliance-badges span{ font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--wf-neutral-600); }
  .wf-underline::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:5px; border-radius:3px;
    background:linear-gradient(90deg,#1bc293,#0e5f6b); }

  /* silent-leak + always-on concierge (ported) */
  .problem{ padding:100px 0; background:var(--wf-navy); color:#f5f7fb; }
  .problem .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--wf-green-400); margin-bottom:14px; }
  .problem h2{ color:#f5f7fb; font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.8vw,46px); line-height:1.08; letter-spacing:-0.025em; margin:0; }
  .prob-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
  .prob-grid p{ color:rgba(245,247,251,.65); font-size:17px; line-height:1.65; margin-top:20px; max-width:46ch; }
  .prob-art{ border:1px solid rgba(245,247,251,.12); border-radius:24px; overflow:hidden; background:rgba(245,247,251,.03); }
  .prob-art svg{ display:block; width:100%; height:auto; }
  .fade-q{ animation:fadeq 6s ease-in-out infinite; }
  @keyframes fadeq{ 0%,18%{opacity:0;transform:translateY(8px)} 30%,62%{opacity:1;transform:none} 80%,100%{opacity:0;transform:translateY(-14px)} }
  .wl-feature{ padding:104px 0; }
  .wl-feature .feature-in{ display:grid; grid-template-columns:1fr 1.08fr; gap:72px; align-items:center; }
  .wl-feature .copy .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--wf-green-700); margin-bottom:14px; }
  .wl-feature .copy h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.6vw,44px); line-height:1.06; letter-spacing:-0.025em; color:var(--text-strong); margin-bottom:22px; }
  .wl-feature .copy h2 .grad{ background:linear-gradient(100deg,#1bc293,#0e5f6b); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .wl-feature .copy p{ color:var(--text-muted); font-size:17px; line-height:1.65; margin-bottom:26px; max-width:46ch; }
  .wl-feature .mini{ list-style:none; padding:0; margin:0; }
  .wl-feature .mini li{ display:flex; gap:12px; align-items:center; padding:9px 0; font-size:15px; color:var(--text-default); }
  .wl-feature .mini li b{ width:6px; height:6px; border-radius:50%; background:var(--wf-green-500); flex-shrink:0; }
  .wl-feature .art{ border-radius:24px; overflow:hidden; border:1px solid var(--border-subtle); background:linear-gradient(180deg,#fff,#f5f6f6); box-shadow:var(--shadow-lg); }
  .wl-feature .art svg{ display:block; width:100%; height:auto; }
  .wl-feature .blink, .problem .blink{ animation:wlf-blink 2.4s ease-in-out infinite; } @keyframes wlf-blink{ 0%,100%{opacity:1} 50%{opacity:.3} }
  .wl-feature .drift, .problem .drift{ animation:wlf-drift 4.5s ease-in-out infinite; } @keyframes wlf-drift{ 50%{transform:translateY(-7px)} }
  @media (prefers-reduced-motion: reduce){ .fade-q,.wl-feature .blink,.wl-feature .drift,.problem .blink,.problem .drift{ animation:none; } }
  @media(max-width:880px){ .prob-grid{ grid-template-columns:1fr; gap:40px; } .wl-feature .feature-in{ grid-template-columns:1fr; gap:44px; } }


/* enterprise */

/* Enterprise route temporarily hidden pre-launch. To relaunch: delete the rule
   below and restore class="route " on #route-enterprise in index.html. */
a[href="/#enterprise"]{ display:none !important; }

  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
  .ent-grad{ background:linear-gradient(100deg,#1bc293,#2a6fdb); -webkit-background-clip:text; background-clip:text; color:transparent; }

  /* hero */
  .ehero{ position:relative; overflow:hidden; padding:64px 0 76px; }
  .ehero::before{ content:''; position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(40% 70% at 6% 8%, rgba(27,194,147,0.13), transparent 60%),
    radial-gradient(45% 80% at 96% 4%, rgba(42,111,219,0.10), transparent 60%); }
  .ehero-grid{ position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
  .ehero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(40px,5.2vw,62px); line-height:1.05; letter-spacing:-0.035em; color:var(--text-strong); margin:0 0 24px; }
  .ehero .sub{ font-size:19px; line-height:1.6; color:var(--text-muted); max-width:50ch; margin:0 0 30px; }
  .seatmap{ position:relative; border:1px solid var(--border-subtle); border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow-2xl); }
  .seatmap svg{ display:block; width:100%; height:auto; }
  @media(max-width:880px){ .ehero-grid{ grid-template-columns:1fr; } }

  /* stats bar */
  .statbar{ border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); padding:44px 0; background:var(--wf-neutral-50); }
  .statbar-in{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
  .statbar .n{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,44px); letter-spacing:-0.02em; }
  .statbar .l{ font-size:14px; color:var(--text-muted); margin-top:6px; line-height:1.4; }
  @media(max-width:720px){ .statbar-in{ grid-template-columns:repeat(2,1fr); gap:30px; } }

  /* section shell */
  .sec{ padding:104px 0; }
  .sec-head{ max-width:680px; margin-bottom:52px; }
  .sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .sec-head h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.2vw,50px); line-height:1.06; letter-spacing:-0.025em; color:var(--text-strong); }
  .sec-head p{ color:var(--text-muted); font-size:18px; line-height:1.6; margin-top:18px; }
  .eyebrow2{ display:block; margin-bottom:14px; color:var(--wf-green-700); }

  /* compliance */
  .comp{ border-top:1px solid var(--border-subtle); }
  .comp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
  .comp-list{ list-style:none; }
  .comp-list li{ display:flex; gap:16px; align-items:center; padding:18px 0; border-top:1px solid var(--border-subtle); }
  .comp-list li:last-child{ border-bottom:1px solid var(--border-subtle); }
  .comp-list .ic{ flex:none; width:42px; height:42px; border-radius:12px; background:var(--wf-green-50); display:flex; align-items:center; justify-content:center; }
  .comp-list .ic .wf-icon{ color:var(--wf-green-600); font-size:22px; }
  .comp-list h4{ font-size:16px; font-weight:700; color:var(--text-strong); margin-bottom:4px; }
  .comp-list p{ font-size:14.5px; color:var(--text-muted); line-height:1.55; }
  .comp-art{ border:1px solid var(--border-subtle); border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#fff,var(--wf-neutral-50)); box-shadow:var(--shadow-lg); }
  .comp-art svg{ display:block; width:100%; height:auto; }
  @media(max-width:880px){ .comp-grid{ grid-template-columns:1fr; gap:40px; } }

  /* security */
  .sgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .scard{ border:1px solid var(--border-subtle); border-radius:20px; padding:30px; background:#fff; box-shadow:var(--shadow-xs); }
  .scard .ic{ width:46px; height:46px; border-radius:13px; background:#eaf0ff; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
  .scard .ic .wf-icon{ color:#2a6fdb; font-size:24px; }
  .scard h4{ font-size:17px; font-weight:700; color:var(--text-strong); margin-bottom:8px; }
  .scard p{ font-size:14.5px; color:var(--text-muted); line-height:1.6; }
  @media(max-width:880px){ .sgrid{ grid-template-columns:1fr; } }
  .steward{ margin-top:24px; border:1px solid rgba(27,194,147,0.35); background:var(--wf-green-50); border-radius:20px; padding:30px 34px; display:flex; gap:20px; align-items:flex-start; }
  .steward .ic{ flex:none; width:46px; height:46px; border-radius:13px; background:var(--wf-green-500); display:flex; align-items:center; justify-content:center; }
  .steward .ic .wf-icon{ color:#fff; font-size:24px; }
  .steward h4{ font-size:17px; font-weight:700; color:var(--text-strong); margin-bottom:6px; }
  .steward p{ font-size:15px; color:var(--text-default); line-height:1.65; }

  /* deployment */
  .deploy{ background:var(--wf-neutral-50); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
  .timeline{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:52px; }
  .phase{ background:#fff; border:1px solid var(--border-subtle); border-radius:20px; padding:30px; position:relative; box-shadow:var(--shadow-xs); }
  .phase .day{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--wf-green-700); margin-bottom:12px; }
  .phase h4{ font-size:18px; font-weight:700; color:var(--text-strong); margin-bottom:10px; }
  .phase p{ font-size:14.5px; color:var(--text-muted); line-height:1.6; }
  .phase::after{ content:''; position:absolute; right:-13px; top:50%; width:24px; height:2px; background:var(--border-strong); }
  .phase:last-child::after{ display:none; }
  @media(max-width:880px){ .timeline{ grid-template-columns:1fr; } .phase::after{ display:none; } }
  .integr .lbl{ text-align:center; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:26px; }
  .ilogos{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
  .ilogo{ font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--text-muted); border:1px solid var(--border-subtle); background:#fff; border-radius:var(--radius-pill); padding:11px 22px; }

  /* visibility */
  .vis-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
  .vis-art{ border:1px solid var(--border-subtle); border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#fff,var(--wf-neutral-50)); box-shadow:var(--shadow-lg); }
  .vis-art svg{ display:block; width:100%; height:auto; }
  #route-enterprise .mini{ list-style:none; margin-top:22px; }
  #route-enterprise .mini li{ display:flex; gap:12px; align-items:center; padding:9px 0; font-size:15px; color:var(--text-default); }
  #route-enterprise .mini li::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--wf-green-500); flex:none; }
  @media(max-width:880px){ .vis-grid{ grid-template-columns:1fr; gap:40px; } }

  /* proof */
  .proof{ background:var(--wf-navy); color:#f5f7fb; }
  .proof .eyebrow2{ color:var(--wf-green-400); }
  .proof h2{ color:#fff; }
  .proof-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:center; }
  .proof blockquote{ font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.6vw,32px); line-height:1.32; letter-spacing:-0.01em; color:#fff; }
  .attr{ display:flex; align-items:center; gap:14px; margin-top:28px; }
  .attr .av{ width:48px; height:48px; border-radius:50%; background:var(--wf-green-500); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--wf-navy); }
  .attr .nm{ font-weight:700; font-size:16px; }
  .attr .rl{ font-size:14px; color:rgba(245,247,251,0.55); }
  .pstats{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .pstat{ border:1px solid rgba(245,247,251,0.14); border-radius:18px; padding:26px; background:rgba(245,247,251,0.04); }
  .pstat .n{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3vw,38px); color:var(--wf-green-400); }
  .pstat .l{ font-size:13.5px; color:rgba(245,247,251,0.6); margin-top:5px; line-height:1.45; }
  @media(max-width:880px){ .proof-grid{ grid-template-columns:1fr; gap:44px; } }

  /* final cta band reuse */
  @media (prefers-reduced-motion: no-preference){
    .seat-core{ transform-box:fill-box; transform-origin:center; animation:seat-breathe 3.4s ease-in-out infinite; }
    @keyframes seat-breathe{ 50%{ transform:scale(1.05); } }
  }

/* pricing */


/* ---- mobile nav (hamburger) ---- */
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--text-strong); border-radius: 2px; transition: transform .2s var(--ease-standard), opacity .2s var(--ease-standard); }
.nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .nav-inner { flex-wrap: wrap; row-gap: 0; }
  /* Open drawer must grow past the 74px bar and sit on a solid panel,
     otherwise the wrapped links spill outside the header background and
     render transparent over the page. */
  .nav.nav-open { background: #fff; box-shadow: var(--shadow-lg); }
  .nav.nav-open .nav-inner { height: auto; padding-bottom: 16px; align-content: flex-start; }
  /* Keep the logo+burger row a constant 74px tall when open so the logo stays
     vertically centered exactly as in the closed bar (no jump); the menu drops
     below this row. */
  .nav.nav-open .nav-inner > a:first-child { height: 74px; }
  .nav .nav-links, .nav .nav-right { display: none; width: 100%; order: 5; }
  .nav.nav-open .nav-links { display: flex; flex-direction: column; gap: 0; margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
  .nav.nav-open .nav-links a { padding: 13px 2px; font-size: 16px; }
  /* Login + Get Started share the row 50/50, each centered in its half.
     Grid (not flex) so the button's padding doesn't skew the split. */
  .nav.nav-open .nav-right { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
  .nav.nav-open .nav-right > a { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
}


/* ============================================================
   Mobile refinements — phones (<=640px)
   The breakpoints above collapse grids to one column and swap in
   the burger nav, but the hero/section type, vertical rhythm, and
   CTAs were still shipping desktop sizes (e.g. h1.big at 78px). This
   layer scales those down so every page reads well on a phone.
   ============================================================ */
@media (max-width: 640px) {

  /* belt-and-suspenders against horizontal scroll */
  html, body { overflow-x: hidden; }
  img, svg { max-width: 100%; }

  /* tighter side gutters across all pages */
  .wrap { padding: 0 20px; }
  .bold-hero .inner { padding: 0 20px; }

  /* vertical rhythm — oversized section padding roughly halved */
  section { padding: 56px 0; }
  .bold-hero { padding: 52px 0 44px; }
  .page-hero { padding: 44px 0 36px; }
  .feat-hero-grid { padding-block: 40px; gap: 32px; }
  .feature-row { padding: 28px 0; gap: 32px; }
  .integ, .problem, .feature, .wl-feature, .sec { padding: 56px 0; }
  .di-hero, .ehero { padding: 40px 0 48px; }
  .statbar { padding: 30px 0; }
  footer { padding: 40px 0 30px; }

  /* headings — convert the fixed-px desktop sizes to fluid */
  h1.big { font-size: clamp(34px, 10.5vw, 52px); line-height: 1.05; margin: 16px 0 18px; }
  .page-hero h1, .feat-hero h1 { font-size: clamp(30px, 8.5vw, 44px); }
  .head h2, .cta-band h2, .cf .ch h2 { font-size: clamp(26px, 7.2vw, 38px); }
  .head { margin-bottom: 36px; }

  /* supporting copy a notch smaller for line-length */
  .bold-hero p.sub, .page-hero p, .feat-hero .sub,
  .head p, .cta-band p { font-size: 16px; }
  .stat-num { font-size: 34px; }

  /* Concierge chat: short window showing ~2-3 messages, bottom-anchored so the
     newest sits at the bottom and older messages scroll up out of view as the
     conversation streams in (overflow:hidden from the base rule clips them). */
  .chat-body { height: 268px; justify-content: flex-end; }

  /* CTAs — stack full-width so paired pills never overflow */
  .bold-cta, .page-hero .cta, .feat-hero .cta {
    flex-direction: column; align-items: stretch; gap: 12px; }
  .bold-cta .btn-pill, .page-hero .cta .btn,
  .feat-hero .cta .btn { width: 100%; justify-content: center; }

  /* growth-engine flow: 4-across -> 2x2, drop the connector rail */
  .flow { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .flow::before { display: none; }
  .flow-caps { flex-direction: column; gap: 10px; align-items: center; }

  /* trust strip: stack the label above the logo marquee (centered) + shrink logos */
  .trust-inner { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 34px 0; }
  .trust-label { max-width: none; }
  .trust-track { gap: 36px; }
  .trust-track img { height: 28px; }
  /* compliance badges: wrap and centre the whole block (label + badges) */
  .trust-inner:has(.compliance-badges) { align-items: center; text-align: center; }
  .compliance-badges { flex-wrap: wrap; justify-content: center; gap: 10px 20px; padding-right: 0; }
  .compliance-badges span { font-size: 15px; white-space: nowrap; }

  /* paired grids still 2-up on tablet -> single column on phones */
  .out-grid, .quotes, .cf-grid { grid-template-columns: 1fr; }
  .cf-card { padding: 26px 22px; }
  /* stats read as a 2x2 quadrant (one per corner) rather than a tall stack */
  .metrics { grid-template-columns: 1fr 1fr; gap: 30px 16px; }

  /* testimonial marquee: smaller tiles so the section is more compact */
  .mq-card { flex-basis: 270px; padding: 16px 18px; }
  .mq-card p { font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; }
  .mq-card .stars { font-size: 13px; margin-bottom: 8px; }
  .mq-card .av { width: 34px; height: 34px; font-size: 12px; }
  .mq + .mq { margin-top: 14px; }

  /* roomy desktop card padding */
  .cta-band { padding: 40px 24px; border-radius: var(--radius-xl); }

  /* Footer: brand full-width on top, link columns side-by-side instead of a
     tall vertical stack. */
  .foot-grid { flex-direction: column; gap: 30px; }
  .foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 14px; width: 100%; }
  .foot-col a { font-size: 13px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 32px; }
}

/* Very small phones (<=380px): final squeeze on the hero */
@media (max-width: 380px) {
  .wrap { padding: 0 16px; }
  h1.big { font-size: 32px; }
  .eyebrow-pill { font-size: 12.5px; }
}