/* ===== i18n-css ===== */
html.i18n-wait body{opacity:0}
html[data-lang="ar"] body,html[data-lang="ar"] button,html[data-lang="ar"] input,html[data-lang="ar"] textarea{font-family:'DM Sans','IBM Plex Sans Arabic',sans-serif}
html[data-lang="zh-hans"] body,html[data-lang="zh-hans"] button,html[data-lang="zh-hans"] input{font-family:'DM Sans','Noto Sans SC','PingFang SC',sans-serif}
html[data-lang="zh-hant"] body,html[data-lang="zh-hant"] button,html[data-lang="zh-hant"] input{font-family:'DM Sans','Noto Sans TC','PingFang TC',sans-serif}
html[data-lang="ar"] *,html[data-lang^="zh"] *{letter-spacing:0!important}
html[data-lang="ar"] h1,html[data-lang="ar"] h2,html[data-lang="ar"] h3{line-height:1.3}
.lang-list a[aria-current]{font-weight:700;color:#000}
html[dir="rtl"] .hf-b{unicode-bidi:plaintext}
html[dir="rtl"] .ae-copy.ae-side{left:auto;right:28px}
html[dir="rtl"] .ae-card:not(.ae-big) .ae-win{left:auto!important;right:28px!important}
/* ===== block ===== */
/* ============================================================================
WATI Design System — Colors & Type
----------------------------------------------------------------------------
Source of truth: variables synced from Figma in wati-frontend-app
(packages/shared/styles/{colorToken,designTokens,boxShadow}.css).
This single file flattens them and adds semantic aliases (h1, h2, body,
code, fg1/fg2, etc) so design agents can pull tokens directly.
============================================================================ */
/* Inter — primary product font. DM Sans — primary marketing font.
Roboto Mono — chart and code. All loaded from Google Fonts. */
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/dm-sans-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/dm-sans-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/dm-sans-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/dm-sans-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.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: 300;
font-display: swap;
src: url("../fonts/inter-cyrillic.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: 300;
font-display: swap;
src: url("../fonts/inter-greek-ext.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/inter-greek.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: 300;
font-display: swap;
src: url("../fonts/inter-vietnamese.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: 300;
font-display: swap;
src: url("../fonts/inter-latin-ext.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: 300;
font-display: swap;
src: url("../fonts/inter-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.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("../fonts/inter-cyrillic.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("../fonts/inter-greek-ext.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("../fonts/inter-greek.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("../fonts/inter-vietnamese.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("../fonts/inter-latin-ext.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("../fonts/inter-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.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("../fonts/inter-cyrillic.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("../fonts/inter-greek-ext.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("../fonts/inter-greek.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("../fonts/inter-vietnamese.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("../fonts/inter-latin-ext.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("../fonts/inter-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.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("../fonts/inter-cyrillic.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("../fonts/inter-greek-ext.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("../fonts/inter-greek.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("../fonts/inter-vietnamese.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("../fonts/inter-latin-ext.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("../fonts/inter-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.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("../fonts/inter-cyrillic.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("../fonts/inter-greek-ext.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("../fonts/inter-greek.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("../fonts/inter-vietnamese.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("../fonts/inter-latin-ext.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("../fonts/inter-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.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: 800;
font-display: swap;
src: url("../fonts/inter-cyrillic.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: 800;
font-display: swap;
src: url("../fonts/inter-greek-ext.woff2") format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/inter-greek.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: 800;
font-display: swap;
src: url("../fonts/inter-vietnamese.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: 800;
font-display: swap;
src: url("../fonts/inter-latin-ext.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: 800;
font-display: swap;
src: url("../fonts/inter-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/roboto-mono-cyrillic-ext.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: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/roboto-mono-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/roboto-mono-greek.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: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/roboto-mono-vietnamese.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: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/roboto-mono-latin-ext.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: 'Roboto Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/roboto-mono-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/roboto-mono-cyrillic-ext.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: 'Roboto Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/roboto-mono-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/roboto-mono-greek.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: 'Roboto Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/roboto-mono-vietnamese.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: 'Roboto Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/roboto-mono-latin-ext.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: 'Roboto Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/roboto-mono-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/roboto-mono-cyrillic-ext.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: 'Roboto Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/roboto-mono-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/roboto-mono-greek.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: 'Roboto Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/roboto-mono-vietnamese.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: 'Roboto Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/roboto-mono-latin-ext.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: 'Roboto Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/roboto-mono-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* ───────── Type families ─────────
Use Inter for product UI (the app, in-product surfaces, dashboards).
Use DM Sans for marketing surfaces (landing pages, ads, emails, decks, social).
Exception: a product-UI screenshot embedded inside a marketing asset stays Inter. */
--wati-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--wati-font-product: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--wati-font-marketing: 'DM Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--wati-font-inter: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--wati-font-chart: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--wati-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Semantic aliases */
--font-sans: var(--wati-font-family);
--font-product: var(--wati-font-product);
--font-marketing: var(--wati-font-marketing);
--font-mono: var(--wati-font-mono);
/* ───────── Marketing-only palette ─────────
Used on decks, social, landing assets. NOT for in-product UI.
The product palette lives below in --wati-color-* and --wati-surface-*. */
--wati-mkt-bg: #f5f5f4; /* warm neutral canvas */
--wati-mkt-ink: #1D1D1D; /* near-black text & strokes */
--wati-mkt-blue: #4FC3FF; /* accent blue (burst, pill outline) */
--wati-mkt-blue-tint: #E5F5FF; /* pill / chip background */
--wati-mkt-green: #00E785; /* CTA fill + hard-shadow color */
--wati-mkt-stroke-w: 3px; /* signature outline weight */
--wati-mkt-shadow: 7px 7px 0 0 var(--wati-mkt-green); /* signature hard shadow */
/* ───────── Chart / data-viz palette (product) ─────────
Categorical sequence for multi-series charts. Order matters: series 1
is the brand green, then a stable rotation. Use --wati-chart-grid for
gridlines, --wati-chart-axis for axis labels. */
--wati-chart-1: #23a455; /* green · primary series */
--wati-chart-2: #1b74e3; /* blue */
--wati-chart-3: #563db8; /* purple */
--wati-chart-4: #eb991f; /* orange */
--wati-chart-5: #087d62; /* teal */
--wati-chart-6: #f9b4ff; /* pink */
--wati-chart-grid: #e7e9e8;
--wati-chart-axis: #848a86;
--wati-chart-track: #f6f7f6; /* empty track for gauges/bars */
/* ───────── Type scale (rem-based, 1rem = 16px) ───────── */
--wati-font-size-3xs: 0.5rem; /* 8px caption / legal */
--wati-font-size-2xs: 0.625rem; /* 10px caption / legal */
--wati-font-size-xs: 0.75rem; /* 12px microcopy */
--wati-font-size-sm: 0.875rem; /* 14px secondary / UI label */
--wati-font-size-l: 1rem; /* 16px body */
--wati-font-size-lg: 1.125rem; /* 18px enhanced body */
--wati-font-size-xl: 1.25rem; /* 20px subheading */
--wati-font-size-2xl: 1.5rem; /* 24px h3 */
--wati-font-size-3xl: 1.875rem; /* 30px h2 */
--wati-font-size-4xl: 2.25rem; /* 36px h1 */
/* ───────── Weights ───────── */
--wati-font-weight-thin: 100;
--wati-font-weight-extralight: 200;
--wati-font-weight-light: 300;
--wati-font-weight-normal: 400;
--wati-font-weight-medium: 500;
--wati-font-weight-semibold: 600;
--wati-font-weight-bold: 700;
--wati-font-weight-extrabold: 800;
--wati-font-weight-black: 900;
/* ───────── Line height ───────── */
--wati-line-height-xs: 1;
--wati-line-height-sm: 1.25;
--wati-line-height-md: 1.375;
--wati-line-height-lg: 1.5;
--wati-line-height-xl: 1.625;
--wati-line-height-2xl: 2;
/* ─────────────────────────── COLORS — primitives ─────────────────────────── */
/* Greyscale (warm; 0 = white, 900 = near-black) */
--wati-color-grey-0: #ffffff;
--wati-color-grey-50: #f6f7f6;
--wati-color-grey-100: #e7e9e8;
--wati-color-grey-200: #ced0ce;
--wati-color-grey-300: #b7b9b7;
--wati-color-grey-400: #9ca19d;
--wati-color-grey-500: #848a86;
--wati-color-grey-600: #686e6a;
--wati-color-grey-700: #505451;
--wati-color-grey-800: #353735;
--wati-color-grey-900: #1b1d1c;
/* Functional palettes */
--wati-color-red-100: #feeeeb;
--wati-color-red-200: #ffd1cc;
--wati-color-red-500: #ef5766;
--wati-color-red-800: #ec3244;
--wati-color-red-900: #e01529;
--wati-color-green-100: #ebf7f0;
--wati-color-green-200: #a4ebbe;
--wati-color-green-300: #64de92;
--wati-color-green-400: #2bc666;
--wati-color-green-500: #23a455; /* surface-primary-default — main UI green */
--wati-color-green-600: #1f934c;
--wati-color-green-700: #1d8242;
--wati-color-green-800: #186d38;
--wati-color-green-900: #105029;
--wati-color-orange-100: #fff7eb;
--wati-color-orange-200: #fedeae;
--wati-color-orange-500: #fac370;
--wati-color-orange-800: #eb991f;
--wati-color-orange-900: #e58b02;
--wati-color-blue-default: #1b74e3;
--wati-color-blue-light: #4891ea;
--wati-color-blue-dark: #0c70ea;
--wati-color-blue-subtle: #d1e6ff;
/* Brand accents (the bright "marketing" palette from logo + landing) */
--wati-color-brand-green-dark: #00e785; /* THE WATI logo green */
--wati-color-brand-green-light: #cafde8;
--wati-color-brand-blue-dark: #4fc3ff;
--wati-color-brand-blue-light: #e3f5ff;
--wati-color-brand-yellow-dark: #ffe96e;
--wati-color-brand-yellow-light:#fff6da;
--wati-color-brand-pink-dark: #f9b4ff;
--wati-color-brand-pink-light: #fdecff;
/* Label / category colors (used on tags, contact labels) */
--wati-color-label-teal-dark: #087d62;
--wati-color-label-teal-light: #d3f5ed;
--wati-color-label-green-dark: #2bbe32;
--wati-color-label-green-light: #cdf4cf;
--wati-color-label-blue-dark: #005c99;
--wati-color-label-blue-light: #d3f4f5;
--wati-color-label-purple-dark: #563db8;
--wati-color-label-purple-light:#e9dff7;
--wati-color-background-green-light: #d4fce9;
/* ─────────────────────────── SEMANTIC TOKENS ─────────────────────────── */
/* Surface */
--wati-surface-default: var(--wati-color-grey-0);
--wati-surface-subtle: var(--wati-color-grey-50);
--wati-surface-disabled: var(--wati-color-grey-100);
--wati-surface-hover: var(--wati-color-grey-300);
--wati-surface-primary-default: var(--wati-color-green-500);
--wati-surface-primary-subtle: var(--wati-color-green-100);
--wati-surface-primary-dark: var(--wati-color-green-700);
--wati-surface-primary-hover: var(--wati-color-green-400);
--wati-surface-error-default: var(--wati-color-red-800);
--wati-surface-error-subtle: var(--wati-color-red-100);
--wati-surface-error-dark: var(--wati-color-red-900);
--wati-surface-error-hover: var(--wati-color-red-500);
--wati-surface-warning-default: var(--wati-color-orange-800);
--wati-surface-warning-subtle: var(--wati-color-orange-100);
--wati-surface-warning-dark: var(--wati-color-orange-900);
--wati-surface-warning-hover: var(--wati-color-orange-500);
--wati-surface-success-default: var(--wati-color-green-800);
--wati-surface-success-subtle: var(--wati-color-green-100);
--wati-surface-success-dark: var(--wati-color-green-900);
--wati-surface-success-hover: var(--wati-color-green-700);
/* Text */
--wati-text-title: var(--wati-color-grey-900);
--wati-text-body: var(--wati-color-grey-800);
--wati-text-subtitle: var(--wati-color-grey-700);
--wati-text-caption: var(--wati-color-grey-500);
--wati-text-negative: var(--wati-color-grey-0);
--wati-text-disabled: var(--wati-color-grey-400);
--wati-text-placeholder: var(--wati-color-grey-300);
--wati-text-primary-default: var(--wati-color-green-500);
--wati-text-success-default: var(--wati-color-green-800);
--wati-text-warning-default: var(--wati-color-orange-800);
--wati-text-error-default: var(--wati-color-red-800);
/* Borders */
--wati-border-default: var(--wati-color-grey-100);
--wati-border-subtle: var(--wati-color-grey-50);
--wati-border-hover: var(--wati-color-grey-400);
--wati-border-primary-default: var(--wati-color-green-500);
--wati-border-error-default: var(--wati-color-red-800);
--wati-border-warning-default: var(--wati-color-orange-800);
--wati-border-success-default: var(--wati-color-green-600);
--wati-divider-light: var(--wati-color-grey-100);
--wati-divider-dark: var(--wati-color-grey-200);
/* Icons */
--wati-icons-dark: var(--wati-color-grey-800);
--wati-icons-light: var(--wati-color-grey-700);
--wati-icons-subtle: var(--wati-color-grey-500);
--wati-icons-disabled: var(--wati-color-grey-300);
--wati-icons-negative: var(--wati-color-grey-0);
--wati-icons-primary-default: var(--wati-color-green-500);
--wati-icons-error-default: var(--wati-color-red-800);
--wati-icons-warning-default: var(--wati-color-orange-800);
/* ─────────────────────────── SPACING / RADII / SHADOW ─────────────────────────── */
--wati-spacing-none: 0;
--wati-spacing-3xs: 0.125rem; /* 2 */
--wati-spacing-2xs: 0.25rem; /* 4 */
--wati-spacing-xs: 0.375rem; /* 6 */
--wati-spacing-s: 0.5rem; /* 8 */
--wati-spacing-l: 0.625rem; /* 10 */
--wati-spacing-xl: 0.75rem; /* 12 */
--wati-spacing-2xl: 0.875rem; /* 14 */
--wati-spacing-3xl: 1rem; /* 16 */
--wati-spacing-4xl: 1.25rem; /* 20 */
--wati-spacing-5xl: 1.5rem; /* 24 */
--wati-spacing-6xl: 2rem; /* 32 */
--wati-spacing-7xl: 2.25rem; /* 36 */
--wati-spacing-8xl: 2.5rem; /* 40 */
--wati-spacing-9xl: 2.75rem; /* 44 */
--wati-spacing-10xl: 3rem; /* 48 */
--wati-radius-xs: 0.125rem; /* 2 */
--wati-radius-s: 0.25rem; /* 4 */
--wati-radius-m: 0.375rem; /* 6 */
--wati-radius-l: 0.5rem; /* 8 — default for buttons / inputs */
--wati-radius-xl: 0.75rem; /* 12 — cards / large CTAs */
--wati-radius-full: 9999px;
--wati-shadow-sm: 0 1px 2px 0 rgb(27 29 28 / 5%);
--wati-shadow-base: 0 1px 3px 0 rgb(27 29 28 / 10%), 0 1px 2px -1px rgb(27 29 28 / 10%);
--wati-shadow-md: 0 4px 6px -1px rgb(27 29 28 / 10%), 0 2px 4px -2px rgb(27 29 28 / 10%);
--wati-shadow-lg: 0 10px 15px -3px rgb(27 29 28 / 10%), 0 4px 6px -4px rgb(27 29 28 / 10%);
--wati-shadow-xl: 0 20px 25px -5px rgb(27 29 28 / 10%), 0 8px 10px -6px rgb(27 29 28 / 10%);
--wati-shadow-2xl: 0 25px 50px -12px rgb(27 29 28 / 25%);
/* Focus rings — used on every interactive element */
--wati-focus-ring: 0 0 0 3px rgb(35 164 85 / 18%);
--wati-focus-ring-error: 0 0 0 3px rgb(236 50 68 / 18%);
/* Icon sizes */
--wati-icon-xs: 0.75rem;
--wati-icon-sm: 1rem;
--wati-icon-md: 1.25rem;
--wati-icon-lg: 1.5rem;
--wati-icon-xl: 2rem;
/* ─────────────────────────── Convenience aliases ─────────────────────────── */
--fg1: var(--wati-text-title); /* primary text */
--fg2: var(--wati-text-body); /* body text */
--fg3: var(--wati-text-subtitle); /* subtitle */
--fg4: var(--wati-text-caption); /* caption / meta */
--bg: var(--wati-surface-default);
--bg-subtle: var(--wati-surface-subtle);
--brand: var(--wati-surface-primary-default);
--brand-bright: var(--wati-color-brand-green-dark); /* logo green */
--border: var(--wati-border-default);
}
/* ============================================================================
SEMANTIC TYPE STYLES — apply directly via class names. Mirrors
packages/shared/styles/typographyStyles/index.ts in the wati codebase.
============================================================================ */
html, body {
font-family: var(--wati-font-family);
color: var(--wati-text-body);
background: var(--wati-surface-default);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter humanist alternates */
}
h1, .wati-h1, .header1Bold {
font-family: var(--wati-font-family);
font-size: var(--wati-font-size-4xl); /* 36 */
font-weight: var(--wati-font-weight-bold); /* 700 */
line-height: var(--wati-line-height-2xl);
color: var(--wati-text-title);
letter-spacing: -0.01em;
}
h2, .wati-h2, .header2Bold {
font-family: var(--wati-font-family);
font-size: var(--wati-font-size-3xl); /* 30 */
font-weight: var(--wati-font-weight-semibold); /* 600 */
line-height: var(--wati-line-height-xl);
color: var(--wati-text-title);
letter-spacing: -0.005em;
}
h3, .wati-h3, .header3Bold {
font-family: var(--wati-font-family);
font-size: var(--wati-font-size-2xl); /* 24 */
font-weight: var(--wati-font-weight-bold);
line-height: var(--wati-line-height-lg);
color: var(--wati-text-title);
}
h4, .wati-h4 {
font-family: var(--wati-font-family);
font-size: var(--wati-font-size-xl); /* 20 */
font-weight: var(--wati-font-weight-semibold);
line-height: var(--wati-line-height-lg);
color: var(--wati-text-title);
}
/* Body */
.wati-body, p {
font-family: var(--wati-font-family);
font-size: var(--wati-font-size-l); /* 16 */
font-weight: var(--wati-font-weight-normal);
line-height: var(--wati-line-height-md);
color: var(--wati-text-body);
}
.wati-body-lg {
font-size: var(--wati-font-size-lg); /* 18 */
line-height: var(--wati-line-height-lg);
color: var(--wati-text-body);
}
.wati-body-sm, small {
font-size: var(--wati-font-size-sm); /* 14 — most-used UI size */
line-height: var(--wati-line-height-sm);
color: var(--wati-text-body);
}
/* Labels (UI / form / sidebar) */
.wati-label {
font-family: var(--wati-font-family);
font-size: var(--wati-font-size-sm);
font-weight: var(--wati-font-weight-medium);
line-height: var(--wati-line-height-sm);
color: var(--wati-text-subtitle);
}
.wati-label-bold {
font-size: var(--wati-font-size-sm);
font-weight: var(--wati-font-weight-semibold);
line-height: var(--wati-line-height-sm);
color: var(--wati-text-title);
}
.wati-microcopy {
font-family: var(--wati-font-family);
font-size: var(--wati-font-size-xs); /* 12 */
font-weight: var(--wati-font-weight-normal);
line-height: var(--wati-line-height-xs);
color: var(--wati-text-caption);
}
/* Mono / code */
code, kbd, samp, .wati-code {
font-family: var(--wati-font-mono);
font-size: 0.8125em;
background: var(--wati-color-grey-50);
color: var(--wati-text-title);
padding: 0.125rem 0.375rem;
border-radius: var(--wati-radius-s);
}
/* Links */
a {
color: var(--wati-text-primary-default);
text-decoration: none;
transition: color 0.15s ease;
}
a:hover { color: var(--wati-color-green-700); text-decoration: underline; }
/* ===== block ===== */
/* ============================================================================
WATI Design System — Marketing page register
The flowing-page companion to marketing_kit.html / social_kit.css. Use for
landing pages, case studies, and any long-scroll external-facing page.
THE TWO RULES THAT KEEP THIS ON-BRAND (the ones a fresh build gets wrong):
1. FONT — everything here is DM Sans (--wati-font-marketing). Never Inter.
The only Inter on a marketing page is inside an embedded product
screenshot.
2. GREEN — headlines and body are INK (#1D1D1D). Green is an accent only:
the highlight band (.hl), the burst, the pill outline, the CTA fill, or
big numerals on an INK panel (green-on-black). Never set headline or
body text in either green — the bright #00E785 is illegible on white and
the deep #23A455 is the *product* UI green, not a marketing color.
============================================================================ */
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/dm-sans-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/dm-sans-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/dm-sans-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/dm-sans-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--mkt-bg: #f5f5f4;
--mkt-ink: #1D1D1D;
--mkt-ink-soft: #54565a;
--mkt-blue: #4FC3FF;
--mkt-blue-tint: #E5F5FF;
--mkt-green: #00E785;
--mkt-green-tint:#CAFDE8;
--mkt-yellow: #FFE96E;
--mkt-pink: #F9B4FF;
--mkt-hair: #e7e7e4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--wati-font-marketing); color: var(--mkt-ink); background: #fff; -webkit-font-smoothing: antialiased; }
/* Beat the element-level h-rules inherited from colors_and_type.css */
h1, h2, h3, h4 { font-family: var(--wati-font-marketing); margin: 0; }
p, .body, .lede { font-family: var(--wati-font-marketing); margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 40px; }
/* ─────────────────────────── Site header ─────────────────────────── */
.siteHead { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--mkt-hair); }
.siteHead .bar { display: flex; align-items: center; gap: 28px; height: 68px; }
.siteHead .logo { height: 26px; width: auto; }
.siteHead nav { display: flex; gap: 26px; margin-left: 8px; }
.siteHead nav a { font-size: 15px; font-weight: 500; color: var(--mkt-ink); text-decoration: none; }
.siteHead nav a:hover { color: #000; }
.siteHead .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.siteHead .signin { font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
/* ─────────────────────────── Type scale (marketing) ─────────────────────────── */
.display { font-size: clamp(40px, 6vw, 76px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.lede { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--mkt-ink-soft); font-weight: 400; }
.body { font-size: 18px; line-height: 1.6; color: var(--mkt-ink-soft); }
.eyebrow { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #8a8a87; }
/* green emphasis — a highlight band behind INK text. The ONLY way green
touches a headline. Centered band, clones across line wraps. */
.hl { color: var(--mkt-ink); background: linear-gradient(var(--mkt-green), var(--mkt-green)) no-repeat; background-size: 100% 0.62em; background-position: 0 54%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.06em; margin: 0 -0.04em; }
/* ─────────────────────────── Burst, pill, CTA (from the kit) ─────────────────────────── */
.burst { display: inline-flex; color: var(--mkt-blue); }
.burst svg { display: block; }
.lockup { display: inline-flex; align-items: flex-start; gap: 20px; }
.pill { display: inline-flex; align-items: center; padding: 9px 18px; background: var(--mkt-blue-tint); border: 2px solid var(--mkt-blue); border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mkt-ink); white-space: nowrap; }
.pill.green { background: var(--mkt-green-tint); border-color: var(--mkt-green); }
.pill.yellow { background: #FFF6DA; border-color: var(--mkt-yellow); }
.pill.pink { background: #FDECFF; border-color: var(--mkt-pink); }
.cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; font-family: var(--wati-font-marketing); font-size: 18px; font-weight: 700; color: var(--mkt-ink); background: var(--mkt-green); border: 3px solid var(--mkt-ink); border-radius: 14px; box-shadow: 7px 7px 0 0 var(--mkt-ink); cursor: pointer; text-decoration: none; transition: transform 120ms ease, box-shadow 120ms ease; }
.cta:hover { transform: translate(2px,2px); box-shadow: 5px 5px 0 0 var(--mkt-ink); }
.cta:active { transform: translate(7px,7px); box-shadow: 0 0 0 0 var(--mkt-ink); }
.cta.secondary { background: #fff; }
.cta.sm { font-size: 15px; padding: 10px 22px; border-width: 2px; box-shadow: 5px 5px 0 0 var(--mkt-ink); border-radius: 12px; }
.cta.sm:hover { box-shadow: 3px 3px 0 0 var(--mkt-ink); }
/* on an ink panel the outlined button flips to white border + green shadow */
.onInk .cta { background: #fff; border-color: #fff; box-shadow: 7px 7px 0 0 var(--mkt-green); }
/* ─────────────────────────── Sections ─────────────────────────── */
section { padding: 84px 0; }
section.tight { padding: 56px 0; }
.sectionLabel { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.sectionLabel .ln { width: 36px; height: 2px; background: var(--mkt-ink); }
.sectionLabel span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
/* hero */
.hero { padding: 56px 0 72px; }
.hero .grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero .meta { display: flex; align-items: center; gap: 16px; margin: 30px 0 0; flex-wrap: wrap; }
.heroActions { display: flex; gap: 28px; align-items: center; margin-top: 34px; flex-wrap: wrap; }
/* results band — green numerals on INK (the sanctioned big green moment) */
.resultsBand { background: var(--mkt-ink); color: #fff; border-radius: 24px; padding: 56px; }
.resultsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.statBig { display: flex; flex-direction: column; gap: 8px; }
.statBig .n { font-size: clamp(54px, 7vw, 88px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.92; color: var(--mkt-green); font-variant-numeric: tabular-nums; }
.statBig .l { font-size: 17px; line-height: 1.4; color: #cfcfcc; max-width: 22ch; }
/* two-column prose + media */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.wideText { grid-template-columns: 1.2fr 0.8fr; }
.prose > * + * { margin-top: 18px; }
.prose .body + .body { margin-top: 16px; }
/* pull quote with the quotation-mark motif */
.pullquote { position: relative; background: var(--mkt-green-tint); border-radius: 24px; padding: 64px 64px 56px; }
.pullquote .mark { position: absolute; top: 8px; left: 40px; font-size: 160px; line-height: 1; font-weight: 700; color: var(--mkt-green); font-family: var(--wati-font-marketing); }
.pullquote q { display: block; quotes: none; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; position: relative; }
.pullquote q::before, .pullquote q::after { content: none; }
.quoteBy { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.quoteBy .who { display: flex; flex-direction: column; gap: 2px; }
.quoteBy .who b { font-size: 18px; font-weight: 700; }
.quoteBy .who span { font-size: 16px; color: var(--mkt-ink-soft); }
/* burst-bulleted list */
.burstList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.burstList li { display: flex; gap: 16px; align-items: flex-start; font-size: 19px; line-height: 1.5; }
.burstList li .burst { color: var(--mkt-green); flex-shrink: 0; margin-top: 3px; }
/* CTA band */
.ctaBand { background: var(--mkt-green); border-radius: 24px; padding: 64px; text-align: center; }
.ctaBand .h2 { max-width: 18ch; margin: 0 auto 28px; }
/* media frame */
.media { border-radius: 20px; overflow: hidden; border: 1px solid var(--mkt-hair); background: var(--mkt-bg); }
.media.shadow { box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 30px 60px -30px rgba(0,0,0,.30); }
.media.full { width: 100%; }
/* ─────────────────────────── Case-study section components ─────────────────────────── */
/* Before / After Wati — two-column compare */
.beforeAfter { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.baCol { border-radius: 20px; padding: 36px; border: 1px solid var(--mkt-hair); }
.baCol.before { background: var(--mkt-bg); }
.baCol.after { background: #1D1D1D; color: #fff; border-color: #1D1D1D; }
.baCol .baHead { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.baCol .baHead .ic { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 17px; }
.baCol.before .ic { background: #ffe3e0; color: #c0271a; }
.baCol.after .ic { background: var(--mkt-green); color: #1D1D1D; }
.baCol .baHead h3 { font-size: 22px; font-weight: 700; }
.baCol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.baCol li { font-size: 16px; line-height: 1.5; padding-left: 18px; position: relative; }
.baCol.before li { color: var(--mkt-ink-soft); }
.baCol.after li { color: #cfcfcc; }
.baCol li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; }
.baCol.before li::before { background: #c0271a; }
.baCol.after li::before { background: var(--mkt-green); }
/* Outcome blocks — the signature "From X to Y" results section (green-on-ink) */
.outcomeGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.outcome { background: #1D1D1D; color: #fff; border-radius: 20px; padding: 40px; display: flex; flex-direction: column; }
.outcome .from { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9a9a97; }
.outcome .to { font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--mkt-green); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.outcome .sub { font-size: 16px; color: #cfcfcc; margin-bottom: 22px; }
.outcome ul { list-style: none; margin: auto 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 14px; }
.outcome li { font-size: 15px; line-height: 1.45; color: #e4e4e2; display: flex; gap: 12px; align-items: flex-start; }
.outcome li .burst { color: var(--mkt-green); flex-shrink: 0; margin-top: 2px; }
/* Problem list — structured challenge items */
.problemGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.problem { border-top: 2px solid var(--mkt-ink); padding-top: 18px; }
.problem h4 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.problem p { font-size: 16px; line-height: 1.5; color: var(--mkt-ink-soft); }
/* Feature grid — tick-icon "how they use Wati" cards */
.featureGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature { background: #fff; border: 1px solid var(--mkt-hair); border-radius: 18px; padding: 28px; }
.feature .tick { width: 36px; height: 36px; border-radius: 10px; background: var(--mkt-green-tint); color: #0a7a45; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feature .tick svg { width: 20px; height: 20px; }
.feature h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.feature p { font-size: 15px; line-height: 1.5; color: var(--mkt-ink-soft); }
/* Strategic-areas list (Why X chose Wati) */
.whyList { display: flex; flex-direction: column; gap: 22px; }
.whyItem { display: flex; gap: 18px; align-items: flex-start; }
.whyItem .n { font-size: 22px; font-weight: 700; color: var(--mkt-green); width: 40px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.whyItem .n .nn { color: #0a7a45; }
.whyItem b { font-size: 18px; font-weight: 700; display: block; margin-bottom: 4px; }
.whyItem span.t { font-size: 16px; line-height: 1.5; color: var(--mkt-ink-soft); }
/* What's next — simple numbered roadmap */
.nextGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.nextItem { display: flex; gap: 16px; align-items: flex-start; }
.nextItem .burst { color: var(--mkt-green); flex-shrink: 0; margin-top: 3px; }
.nextItem b { font-size: 18px; font-weight: 700; display: block; margin-bottom: 5px; }
.nextItem span.t { font-size: 15px; line-height: 1.5; color: var(--mkt-ink-soft); }
/* footer */
.siteFoot { border-top: 1px solid var(--mkt-hair); padding: 48px 0; }
.siteFoot .bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.siteFoot .logo { height: 24px; }
.siteFoot nav { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.siteFoot nav a { font-size: 15px; color: var(--mkt-ink-soft); text-decoration: none; }
.siteFoot .legal { font-size: 13px; color: #9a9a97; margin-top: 18px; }
image-slot { --slot-bg: #ececea; display: block; }
/* ─────────────────────────── responsive ─────────────────────────── */
@media (max-width: 1100px) and (min-width: 901px) {
.featureGrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.hero .grid, .split, .split.wideText { grid-template-columns: 1fr; gap: 32px; }
.resultsGrid, .beforeAfter, .outcomeGrid, .problemGrid, .featureGrid, .nextGrid { grid-template-columns: 1fr; gap: 24px; }
.siteHead nav { display: none; }
section { padding: 56px 0; }
.resultsBand, .pullquote, .ctaBand { padding: 40px; }
}
/* ===== block ===== */
/* ============================================================================
Page styles — built on the Wati marketing register.
Rules followed: DM Sans everywhere, INK headlines, bright green (#00E785) as
accent only (highlight band, CTA fill, numerals-on-ink, pill outlines).
============================================================================ */
:root{
--green:#00E785; /* Wati brand green (logo / accent) */
--green-tint:#CAFDE8; /* green chip / highlight tints */
--green-tint-soft:#EBF7F0;
--green-deep:#105029; /* legible green text on tint */
--ink:#1D1D1D; /* near-black — all headlines & body */
--ink-soft:#54565a; /* muted body */
--muted:#686e6a;
--line:#e7e7e4;
--bg:#f5f5f4; /* warm marketing canvas */
--white:#fff;
--blue:#4FC3FF;
--blue-tint:#E5F5FF;
--wa:#25D366; /* real WhatsApp green (product mocks only) */
--radius:18px;--radius-sm:12px;
--shadow:0 1px 3px rgba(0,0,0,.10),0 30px 60px -30px rgba(0,0,0,.28);
--shadow-sm:0 1px 3px rgb(27 29 28 / 8%),0 1px 2px -1px rgb(27 29 28 / 8%);
--maxw:1180px;
--font:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern";font-optical-sizing:auto;font-size:17px;letter-spacing:-.012em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:96px 0;position:relative}
h1,h2,h3,h4,h5,h6{font-family:var(--font);color:var(--ink);margin:0}
h1,h2,h3{font-weight:600;letter-spacing:-.03em}
h1{font-size:clamp(2.75rem,5.7vw,4.9rem);line-height:1.045;letter-spacing:-.04em}
h2{font-size:clamp(2.05rem,3.7vw,3.1rem);line-height:1.07;letter-spacing:-.032em}
h3{font-size:1.65rem;line-height:1.18;letter-spacing:-.024em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);background:var(--green-tint);border:none;padding:7px 14px;border-radius:8px;margin-bottom:20px;cursor:default}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.lead{font-size:clamp(1.2rem,1.55vw,1.4rem);color:var(--ink-soft);max-width:720px;line-height:1.46;font-weight:400;letter-spacing:-.016em}
.section-head{max-width:820px;margin:0 auto 56px;text-align:center}
.section-head .lead{margin:18px auto 0}
.section-head.sh-wide{max-width:1100px}
.section-head.sh-wide .lead{max-width:1040px}
.center{text-align:center}
/* highlight band — the ONLY way green touches a headline */
.hl{color:var(--ink);background:linear-gradient(var(--green),var(--green)) no-repeat;background-size:100% .52em;background-position:0 84%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;margin:0 -.04em}
/* ===== buttons — signature hard-shadow CTA ===== */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-weight:700;font-size:1rem;padding:14px 28px;border-radius:14px;border:3px solid var(--ink);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;text-decoration:none;white-space:nowrap}
.btn:hover,.nav-links a:hover,.link-arrow:hover{text-decoration:none}
.btn-primary{background:var(--green);color:var(--ink);box-shadow:7px 7px 0 0 var(--ink)}
.btn-primary:hover{transform:translate(2px,2px);box-shadow:5px 5px 0 0 var(--ink)}
.btn-primary:active{transform:translate(7px,7px);box-shadow:0 0 0 0 var(--ink)}
.btn-outline{background:var(--white);color:var(--ink);box-shadow:7px 7px 0 0 var(--ink)}
.btn-outline:hover{transform:translate(2px,2px);box-shadow:5px 5px 0 0 var(--ink)}
.btn-outline:active{transform:translate(7px,7px);box-shadow:0 0 0 0 var(--ink)}
.btn.sm{font-size:.94rem;padding:9px 18px;border-width:2px;border-radius:12px;box-shadow:4px 4px 0 0 var(--ink)}
.btn.sm:hover{box-shadow:2px 2px 0 0 var(--ink)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);transition:color .18s,gap .18s;text-decoration:none;letter-spacing:-.012em}
.link-arrow::after{content:"";width:7px;height:7px;border-right:2.5px solid var(--green-deep);border-top:2.5px solid var(--green-deep);transform:rotate(45deg);display:block;flex:none}
.link-arrow:hover{color:var(--green-deep);gap:9px}
/* ===== NAV ===== */
header.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:34px;height:72px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.nav-logo{height:26px;width:auto}
.nav-links{display:flex;gap:28px;font-weight:600;font-size:.97rem;color:var(--ink)}
.nav-links a:hover{color:#000;text-decoration:none}
.nav-cta{margin-left:auto;display:flex;gap:14px;align-items:center}
.menu-toggle{display:none;margin-left:auto;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink)}
/* ===== HERO ===== */
.hero{padding:116px 0 128px;text-align:center;overflow:hidden;background:var(--bg)}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero h1{max-width:1000px;margin:0 auto}
.hero .lead{margin:26px auto 0;font-size:1.32rem;color:var(--ink-soft);max-width:900px}
.hero-cta{display:flex;gap:18px;justify-content:center;margin:44px 0 40px;flex-wrap:wrap}
.trust{font-weight:500;color:var(--ink-soft);font-size:1.02rem}
.trust b{color:var(--ink);font-weight:700}
/* hero trust row — avatar stack + rating */
.hero-trust{display:inline-flex;align-items:center;gap:16px}
.hero-trust .ht-txt{text-align:left;font-size:1rem;color:var(--ink-soft);line-height:1.3}
.hero-trust .ht-txt b{color:var(--ink);font-weight:700}
.avs{display:flex}
.avs span{width:36px;height:36px;border-radius:50%;border:2.5px solid #fff;margin-left:-11px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.avs span:first-child{margin-left:0}
.avs span:nth-child(1){background:linear-gradient(135deg,#8fe3bf,#34b06b)}
.avs span:nth-child(2){background:linear-gradient(135deg,#bfe0ff,#5aa8ff)}
.avs span:nth-child(3){background:linear-gradient(135deg,#ffd9a8,#f2a64d)}
.avs span:nth-child(4){background:linear-gradient(135deg,#d9c6ff,#9a7bf0)}
.stars{color:var(--ink);letter-spacing:2px;font-size:.95rem;line-height:1}
@media(prefers-reduced-motion:reduce){.hero-bg *{animation:none!important}}
/* ---- customer logo reel (muted mono) ---- */
.hero-reel{margin:56px auto 0;max-width:940px}
.reel-label{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.reel-mask{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);mask:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.reel-track{display:flex;align-items:center;gap:76px;width:max-content;animation:reel 36s linear infinite}
.hero-reel:hover .reel-track{animation-play-state:paused}
@keyframes reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reel-word{font-family:var(--font);font-weight:800;font-size:1.5rem;color:#aab0af;letter-spacing:-.012em;white-space:nowrap;line-height:1;flex:none;transition:color .2s}
.reel-word.low{text-transform:lowercase}
.reel-word.caps{text-transform:uppercase;letter-spacing:.01em}
.reel-word.serif{font-family:Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:0}
.hero-reel:hover .reel-word{color:#8b918f}
@media(prefers-reduced-motion:reduce){.reel-track{animation:none}}
/* ---- hero bg: soft green glow ---- */
.bg-layer{position:absolute;inset:0}
.bg-glow::before{content:"";position:absolute;left:50%;top:34%;width:920px;height:680px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,231,133,.26),rgba(0,231,133,.08) 55%,transparent 72%);animation:glowpulse 9s ease-in-out infinite}
.bg-glow::after{content:"";position:absolute;left:50%;bottom:-40px;width:140%;height:240px;transform:translateX(-50%);background:radial-gradient(60% 100% at 50% 100%,rgba(67,201,126,.14),transparent 72%)}
.hero{padding-bottom:76px}
/* demo sits inside the hero's glow: gradient fades out by the demo's midpoint */
.hero-demo{position:relative;padding:0 0 96px;background-color:var(--bg);overflow:hidden}
.hero-demo::before{content:"";position:absolute;left:50%;top:0;width:140%;height:420px;transform:translateX(-50%);background:radial-gradient(60% 100% at 50% 0%,rgba(67,201,126,.14),transparent 72%);pointer-events:none;z-index:0}
.hero-demo .wrap{position:relative;z-index:1}
.hero-demo .storylane-embed{margin-bottom:0}
@keyframes glowpulse{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
/* ===== AI SECTION ===== */
.astra-block{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:46px;box-shadow:var(--shadow-sm);margin-bottom:30px;transition:transform .2s,box-shadow .2s,border-color .2s}
.astra-block:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green)}
.astra-head{max-width:760px;margin:0 auto 34px;text-align:center}
.astra-head h3{margin-bottom:4px}
.astra-tag{color:var(--ink-soft);font-weight:600;font-size:1.12rem;margin:6px 0 14px}
.ai-buckets{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.ai-bucket{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:34px 30px;transition:transform .2s,box-shadow .2s,border-color .2s}
.ai-bucket:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green)}
.ai-bucket .fc-ico{width:44px;height:44px;border-radius:12px;background:var(--green-tint);color:var(--green-deep);display:grid;place-items:center;margin-bottom:18px}
.ai-bucket .fc-ico svg{width:24px;height:24px}
.ai-bucket .fc-ico iconify-icon{font-size:24px}
.ai-bucket .fc-ico .copilot-glyph{width:24px;height:24px}
.ai-bucket .tag{color:var(--green-deep);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.ai-bucket h4{font-size:1.28rem;letter-spacing:-.02em;margin-bottom:18px}
.ai-check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.ai-check li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--ink-soft);line-height:1.4}
.ai-check li::before{content:"✓";flex:none;color:var(--green-deep);font-weight:800}
@media(max-width:860px){.ai-buckets{grid-template-columns:1fr}}
.stat-chip{display:inline-flex;align-items:center;gap:9px;background:var(--green-tint);color:var(--green-deep);font-weight:700;font-size:.95rem;padding:10px 16px;border-radius:999px;margin:18px 0;cursor:default}
.stat-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,231,133,.25)}
/* ===== AI hub (Astra) — 360 cross ===== */
.hub-wrap{background:linear-gradient(180deg,#fff,#fafbfa);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-sm)}
.ai-hub{position:relative;height:544px}
.ai-hub-lines{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none}
.conn{fill:none;stroke:color-mix(in srgb,var(--green) 24%,#fff);stroke-width:2.4}
.flow{fill:none;stroke:var(--green);stroke-width:3;stroke-dasharray:4 15;stroke-linecap:round;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-19}}
.hub-grp{position:absolute;display:flex;z-index:2}
.hub-grp .glabel{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:11px}
.hub-grp.gtop,.hub-grp.gbot{left:50%;transform:translateX(-50%);flex-direction:column;align-items:center}
.hub-grp.gtop{top:0}.hub-grp.gbot{bottom:0}
.hub-grp.gtop .row,.hub-grp.gbot .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hub-grp.gtop .row{max-width:380px}
.hub-grp.gbot .row{display:grid;grid-template-columns:repeat(2,auto);justify-content:center}
.hub-grp.gleft,.hub-grp.gright{top:50%;transform:translateY(-50%);flex-direction:column;gap:11px}
.hub-grp.gleft{left:0;align-items:flex-start}
.hub-grp.gright{right:0;align-items:flex-end}
.hub-grp.gleft .glabel,.hub-grp.gright .glabel{align-self:center}
.node{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-weight:700;font-size:.9rem;color:var(--ink);white-space:nowrap;cursor:default}
.node:hover{transform:none;border-color:var(--line)}
.lico{width:24px;height:24px;flex:none;display:grid;place-items:center}
.lico img{width:21px;height:21px;object-fit:contain;display:block}
.lico svg{width:20px;height:20px;display:block}
.mono{width:24px;height:24px;border-radius:6px;background:var(--ink);color:#fff;font-size:.6rem;font-weight:800;display:grid;place-items:center;letter-spacing:.02em}
.astra-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:320px;background:var(--ink);border-radius:24px;padding:22px 26px;box-shadow:0 22px 46px -18px rgba(0,0,0,.55);animation:nodepulse 3.6s ease-in-out infinite}
@keyframes nodepulse{0%,100%{box-shadow:0 22px 46px -18px rgba(0,0,0,.55),0 0 0 0 transparent}50%{box-shadow:0 22px 46px -18px rgba(0,0,0,.55),0 0 0 14px color-mix(in srgb,var(--green) 18%,transparent)}}
.astra-mark{width:46px;height:auto;display:block;color:var(--green)}
.copilot-glyph{background:currentColor;-webkit-mask:url("../assets/copilot-glyph.svg") center/contain no-repeat;mask:url("../assets/copilot-glyph.svg") center/contain no-repeat}
.fc-ico .copilot-glyph{width:34px;height:34px}
.pe-ic .copilot-glyph{width:27px;height:27px}
.hub-grp.gbot .lico{color:var(--green-deep)}
.astra-name{font-weight:700;font-size:1.42rem;color:#fff;letter-spacing:-.025em;line-height:1.05;text-align:center;text-wrap:balance}
.astra-name span{color:var(--green)}
.astra-sub{font-size:.76rem;font-weight:500;letter-spacing:.01em;color:#9aa39d;text-align:center}
.astra-cap{font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);text-align:center}
/* product experiences tier */
.pe-tier{position:relative;padding-bottom:42px;margin-bottom:6px}
.pe-label{text-align:center;position:relative;z-index:1;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.pe-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:1}
.pe-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.pe-ic{width:42px;height:42px;border-radius:12px;background:var(--green-tint);color:var(--green-deep);display:grid;place-items:center;flex:none}
.pe-ic iconify-icon{font-size:24px;display:block;line-height:0}
.pe-ic svg,.pe-ic img{width:27px;height:27px;display:block}
.pe-ic img[src*="copilot"]{width:36px;height:36px}
.pe-title{font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
.pe-sub{font-size:.82rem;color:var(--ink-soft);font-weight:500;line-height:1.2;margin-top:2px}
.pe-lines{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none}
.bus{fill:none;stroke:var(--green);stroke-width:2;opacity:.6;stroke-linecap:round}
.busdot{fill:var(--green)}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:6px 11px}
.chip img{width:15px;height:15px;object-fit:contain}
@media(max-width:760px){
.ai-hub{height:auto;display:flex;flex-direction:column;gap:16px;align-items:center}
.ai-hub-lines{display:none}
.hub-grp{position:static;transform:none;flex-direction:column;align-items:center}
.hub-grp.gleft,.hub-grp.gright{align-items:center}
.hub-grp .row{flex-wrap:wrap}
.pe-row{grid-template-columns:1fr 1fr}
.pe-lines{display:none}
.pe-tier{padding-bottom:0}
.astra-node{position:static;transform:none;flex-direction:column;width:auto;padding:20px 24px;gap:9px}
}
/* bento grid */
.grid2{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto;gap:18px}
.fcard{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.2s}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green)}
.fcard.b-astra{grid-column:1/7;grid-row:1}
.fcard.b-cop{grid-column:7/13;grid-row:1}
.fcard.b-mcp{grid-column:1/5;grid-row:2}
.fcard.b-ext{grid-column:5/9;grid-row:2}
.fcard.b-orc{grid-column:9/13;grid-row:2}
.fcard.b-astra .fc-ico,.fcard.b-cop .fc-ico{width:52px;height:52px;margin-top:auto}
.fcard.b-astra p,.fcard.b-cop p{flex:none}
.fcard.b-astra .link-arrow,.fcard.b-cop .link-arrow{margin-top:auto}
.fcard.b-astra .fc-ico svg{width:30px;height:30px}
/* featured tile */
.fcard.feat{border-color:var(--green);border-width:1.5px;background:linear-gradient(180deg,var(--green-tint-soft),var(--white) 38%)}
.fcard.feat::after{content:"";position:absolute;top:-70px;right:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--green) 20%,transparent),transparent 68%);pointer-events:none}
/* icon badge */
.fc-ico{width:46px;height:46px;border-radius:13px;background:var(--green-tint);display:flex;align-items:center;justify-content:center;color:var(--green-deep);margin-bottom:18px;flex:none}
.fc-ico svg{width:24px;height:24px}
.fc-ico img{width:34px;height:34px;display:block}
.fcard.feat .fc-ico{background:var(--green-tint);color:var(--green-deep)}
.fc-ico iconify-icon{font-size:28px;display:block;line-height:0}
.fcard h4{font-family:var(--font);font-weight:600;font-size:1.32rem;letter-spacing:-.022em;margin-bottom:4px;position:relative}
.fcard.b-astra h4,.fcard.b-cop h4{font-size:1.7rem;letter-spacing:-.03em}
.fcard .tag{color:var(--ink-soft);font-weight:500;font-size:1rem;margin-bottom:13px;letter-spacing:-.012em;position:relative}
.fcard p{font-size:.97rem;color:var(--ink-soft);flex:1;letter-spacing:-.011em;position:relative}
.fcard.b-astra p,.fcard.b-cop p{font-size:1.06rem}
.mini-chip{font-size:.82rem;font-weight:700;color:var(--green-deep);background:var(--green-tint);padding:7px 12px;border-radius:999px;margin:16px 0 14px;display:inline-block;align-self:flex-start;cursor:default;position:relative}
.model-logos{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 2px;position:relative}
.model-logos span{font-size:.8rem;font-weight:700;color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 11px}
.link-arrow{position:relative}
.fcard .link-arrow{margin-top:16px;align-self:flex-start}
/* footer proof band — full-width tinted strip pinned to the card bottom */
.proof-band{margin:18px -30px -30px;background:var(--green-tint);color:var(--green-deep);font-weight:700;font-size:.84rem;letter-spacing:-.004em;padding:14px 30px;position:relative;z-index:1;display:flex;align-items:center;gap:9px}
.proof-band::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
/* ===== CHANNELS ===== */
.chan-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.chan-tab{font-family:var(--font);font-weight:700;font-size:.96rem;padding:11px 20px;border-radius:10px;border:2px solid var(--line);background:#fff;cursor:pointer;transition:.18s;color:var(--ink)}
.chan-tab:hover{border-color:var(--green)}
.chan-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chan-tab[data-hero].active{background:var(--wa);border-color:var(--wa);color:#fff}
.chan-panel{display:none;grid-template-columns:1fr 1.1fr;gap:54px;align-items:center}
.chan-panel.active{display:grid;animation:fade .4s ease}
.chan-panel .tagline{color:var(--ink-soft);font-weight:600;font-size:1.08rem;margin:6px 0 14px}
.chan-panel p{color:var(--ink-soft)}
/* channel logo above the channel name — same brand-tile treatment as the chat badge */
.chan-logo{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.chan-logo img{width:27px;height:27px;filter:brightness(0) invert(1)}
.chan-logo svg{width:27px;height:27px}
.cl-whatsapp,.cl-calls{background:#25D366}
.cl-web{background:#1f9d57}
.cl-instagram{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf)}
.cl-tiktok{background:#010101}
.cl-messenger{background:linear-gradient(160deg,#09f,#0062ff)}
.cl-rcs{background:#1a73e8}
.cl-sms{background:#1a8cff}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* conversation cards — channel-themed chat bubbles, no phone frame */
.chan-stage{max-width:460px;margin:0 auto;width:100%}
.convo{--accent:#25D366;--out-bg:#d9fdd3;--out-fg:#0b3d20;width:100%;font-family:var(--wati-font-product,'Inter',system-ui,sans-serif)}
.convo-head{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.convo-ava{position:relative;width:50px;height:50px;flex:none}
.convo-ava .dp{width:50px;height:50px;border-radius:15px;object-fit:cover;display:block;box-shadow:var(--shadow-sm)}
.ch-badge{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:var(--accent);display:grid;place-items:center;border:2.5px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.ch-badge img{width:13px;height:13px;filter:brightness(0) invert(1)}
.ch-badge svg{width:13px;height:13px}
.convo[data-ch=instagram] .ch-badge{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf)}
.convo[data-ch=tiktok] .ch-badge{background:#010101}
.convo-ti{font-weight:700;font-size:1.08rem;color:var(--ink);line-height:1.15}
.convo-ti small{display:block;font-weight:600;font-size:.78rem;color:var(--muted);margin-top:3px}
.convo-ti .cti-name{display:inline-flex;align-items:center;gap:5px}
.convo-ti small::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#2ecb76;margin-right:6px;vertical-align:middle}
.convo-body{display:flex;flex-direction:column;gap:16px;min-height:312px}
/* consistent chat heights so the grey card never jumps as messages reveal,
and all tabs/stages in a section match each other (capped at 460px width, so stable) */
#chanPanels .convo-body{min-height:372px}
.mss-convo .convo-body{min-height:484px}
.msg{display:none;flex-direction:column;gap:6px;max-width:84%}
.msg.show{display:flex;animation:bubblein .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes bubblein{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.msg.in{align-self:flex-start;align-items:flex-start}
.msg.out{align-self:flex-end;align-items:flex-end}
.cb{padding:13px 16px;border-radius:18px;font-size:1rem;line-height:1.45;position:relative;box-shadow:var(--shadow-sm)}
.cb.in{background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:6px}
.cb.out{background:var(--out-bg);color:var(--out-fg);border-bottom-right-radius:6px}
.cap{font-family:var(--wati-font-mono,'Roboto Mono',ui-monospace,monospace);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--green-deep);background:var(--green-tint);padding:5px 10px;border-radius:7px;width:fit-content}
.cb .spark{position:absolute;top:-11px;right:-11px;width:28px;height:28px;border-radius:9px;background:var(--ink);display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.22)}
.cb .spark img{width:16px;height:17px}
.cb b{font-weight:700}
.vbadge{width:17px;height:17px;vertical-align:-3px;margin-left:4px}
.typing{align-self:flex-end;gap:5px;padding:15px 17px;background:var(--out-bg);border-radius:18px;border-bottom-right-radius:6px;width:-moz-fit-content;width:fit-content;display:none}
.typing.show{display:flex}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--out-fg);opacity:.45;animation:typedot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes typedot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:.9}}
/* timeline event types — distinguish actual chat vs system actions vs AI inferences */
.sys-event,.ai-note{align-self:center;display:none;align-items:center;gap:8px;font-family:var(--wati-font-mono,'Roboto Mono',ui-monospace,monospace);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.055em;padding:7px 12px;border-radius:8px;max-width:94%;line-height:1.32;text-align:left}
.sys-event.show,.ai-note.show{display:inline-flex;animation:bubblein .42s cubic-bezier(.2,.8,.2,1) both}
.sys-event{background:#eceef0;border:1px solid #e1e3e4;color:#5b6470}
.sys-event svg{width:14px;height:14px;flex:none;stroke:currentColor}
.ai-note{background:var(--green-tint);color:var(--green-deep)}
.ai-note svg{width:14px;height:14px;flex:none;fill:currentColor}
.chan-stage{position:relative}
.convo-foot{position:absolute;top:100%;left:0;width:100%;text-align:center;margin-top:18px;font-size:.86rem;color:var(--ink-soft);font-weight:500}
.convo-foot b{color:var(--ink);font-weight:700}
/* channel themes */
.convo[data-ch=web]{--accent:#1f9d57;--out-bg:#e6f8ee;--out-fg:#0b3d20}
.convo[data-ch=instagram]{--accent:#d62976;--out-fg:#fff}
.convo[data-ch=instagram] .convo-ava{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf)}
.convo[data-ch=instagram] .cb.out,.convo[data-ch=instagram] .typing{background:linear-gradient(45deg,#fa7e1e,#d62976,#962fbf);color:#fff}
.convo[data-ch=instagram] .typing i{background:#fff}
.convo[data-ch=tiktok]{--accent:#010101;--out-bg:#010101;--out-fg:#fff}
.convo[data-ch=tiktok] .typing i{background:#fff}
.convo[data-ch=messenger]{--accent:#0084ff;--out-fg:#fff}
.convo[data-ch=messenger] .cb.out,.convo[data-ch=messenger] .typing{background:linear-gradient(160deg,#09f,#0062ff);color:#fff}
.convo[data-ch=messenger] .typing i{background:#fff}
.convo[data-ch=rcs]{--accent:#1a73e8;--out-bg:#1a73e8;--out-fg:#fff}
.convo[data-ch=rcs] .typing i{background:#fff}
.convo[data-ch=sms]{--accent:#5b6470;--out-bg:#1a8cff;--out-fg:#fff}
.convo[data-ch=sms] .typing i{background:#fff}
/* call screen (cleaned, no phone frame) */
.callscreen{max-width:460px;margin:0 auto;background:linear-gradient(160deg,#147a45,#0c2c1c);color:#fff;text-align:center;padding:52px 28px;border-radius:24px;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;box-shadow:var(--shadow)}
.call-ic{width:88px;height:88px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:ring 2s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}100%{box-shadow:0 0 0 30px rgba(37,211,102,0)}}
.wave{display:flex;gap:4px;align-items:flex-end;height:36px}
.wave i{width:5px;background:var(--green);border-radius:3px;animation:wv 1s ease-in-out infinite}
@keyframes wv{0%,100%{height:8px}50%{height:34px}}
/* RCS rich card (outbound) */
.rcs-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.rcs-card .shot{display:block;width:100%;height:130px;object-fit:cover;background:linear-gradient(120deg,#3a2418,#7a4a28)}
.rcs-card .ct{padding:13px 15px 4px}
.rcs-card .btns{display:flex;gap:9px;padding:12px 15px 15px}
.rcs-card .btns span{flex:1;text-align:center;border-radius:9px;padding:9px 10px;font-size:.85rem;font-weight:700;white-space:nowrap;cursor:pointer}
.rcs-card .btns .buy{background:#1a73e8;color:#fff}
.rcs-card .btns .view{border:1.5px solid #d7dbe0;color:#1a73e8}
.screenshot-frame{max-width:440px;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
/* ===== MSS ===== */
.mss{display:flex;flex-direction:column;gap:30px}
.mss-block{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;border-radius:24px;padding:46px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.mss-block.reverse .mss-copy{order:2}
.rev-badge{display:inline-block;font-family:var(--font);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--ink);padding:8px 15px;border-radius:8px;margin-bottom:16px}
.mss-copy h3{margin-bottom:18px}
.mss-copy ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.mss-copy li{position:relative;padding-left:24px;font-size:1rem;color:var(--ink-soft);line-height:1.5}
.mss-copy li::before{content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--green)}
.outcomes{display:flex;align-items:stretch;flex-wrap:wrap;background:var(--ink);border-radius:16px;padding:18px 6px;margin-bottom:22px}
.outcome{flex:1 1 0;min-width:96px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 14px;font-weight:800;font-size:2.4rem;line-height:1;color:var(--green);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.outcome + .outcome::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:52%;background:rgba(255,255,255,.18)}
.outcome span{display:block;font-weight:700;font-size:.68rem;color:#cfcfcc;letter-spacing:.06em;text-transform:uppercase;margin-top:9px;line-height:1.25}
.mss-img{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#fff;border:1px solid var(--line)}
.mss-img image-slot{width:100%;height:360px}
.mss-convo{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:30px 22px;display:flex;justify-content:center;align-items:center}
/* ===== ACE ===== */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:40px}
.pill-item{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 20px;font-weight:700;font-size:.95rem;box-shadow:var(--shadow-sm)}
.view-toggle{display:flex;justify-content:center;gap:6px;background:#f2f3f2;border-radius:999px;padding:5px;margin:0 auto 44px;width:max-content}
.vt-btn{border:none;background:transparent;cursor:pointer;font-family:var(--font);font-weight:700;font-size:.92rem;color:var(--ink-soft);padding:10px 20px;border-radius:999px;transition:background .15s,color .15s}
.vt-btn.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.pill-item b{color:var(--green-deep)}
.storylane{max-width:920px;margin:0 auto 46px;border:2px dashed var(--green);border-radius:22px;background:var(--green-tint-soft);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;cursor:pointer;transition:.2s;position:relative}
.storylane:hover{box-shadow:var(--shadow-sm)}
.storylane .play{width:74px;height:74px;border-radius:50%;background:var(--green);border:3px solid var(--ink);display:grid;place-items:center;box-shadow:5px 5px 0 0 var(--ink);transition:.2s}
.storylane:hover .play{transform:scale(1.06)}
.storylane .play::after{content:"";border-left:20px solid var(--ink);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.storylane .tag{position:absolute;top:14px;left:14px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.storylane .sl-title{font-weight:700;color:var(--ink)}
.storylane-embed{margin:0 auto 46px}
.intel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.intel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.2s;box-shadow:var(--shadow-sm)}
.intel:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green)}
.intel h4{font-family:var(--font);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;margin-bottom:8px;display:flex;align-items:center;gap:11px}
.intel .ic{width:36px;height:36px;border-radius:10px;background:var(--green-tint);color:var(--green-deep);display:grid;place-items:center;font-weight:800;flex:none}
.intel p{color:var(--ink-soft);font-size:.98rem}
/* ===== INTEGRATIONS HUB ===== */
.integ-stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;max-width:1000px;margin:0 auto}
.integ-lines{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none}
.iconn{fill:none;stroke-width:3.4;stroke-linecap:round;transition:opacity .2s ease,stroke .2s ease}
.iconn.cg{stroke:#00E785}
.iconn.cb{stroke:#4FC3FF}
.iflow{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:3 13;stroke-linecap:round;opacity:0;animation:flow 1.4s linear infinite}
.integ-stage.sel .iconn{stroke:#e4eae7!important;opacity:.7}
.integ-stage.sel .iconn.on.cg{stroke:#00E785!important;opacity:1}
.integ-stage.sel .iconn.on.cb{stroke:#4FC3FF!important;opacity:1}
.integ-stage.sel .iflow.on{opacity:.95}
.integ-col{display:flex;flex-direction:column;gap:14px;z-index:2}
.integ-col.left{align-items:flex-start}
.integ-col.right{align-items:flex-end}
.itile{width:212px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-weight:700;font-size:.92rem;color:var(--ink);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease}
.integ-col.right .itile{flex-direction:row-reverse;text-align:right}
.itile:hover,.itile.sel{transform:translateY(-3px);border-color:var(--green);box-shadow:var(--shadow)}
.itile.sel{background:var(--green-tint)}
.integ-stage.sel .itile.dim{opacity:.4}
.integ-center{position:relative;z-index:2;width:120px;height:120px;border-radius:28px;background:var(--green);display:grid;place-items:center;box-shadow:0 18px 44px -16px rgba(0,231,133,.6);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.integ-center .ic-logo{height:42px;width:auto;display:block}
.integ-detail{max-width:820px;margin:30px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;box-shadow:var(--shadow-sm);min-height:96px}
.integ-detail h4{font-family:var(--font);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.integ-detail h4 .lico{width:24px;height:24px}
.integ-detail .uses{display:flex;flex-wrap:wrap;gap:8px}
.integ-detail .uses span{background:var(--green-tint);color:var(--green-deep);font-weight:600;font-size:.88rem;padding:7px 13px;border-radius:999px}
.integ-detail .hint{color:var(--ink-soft)}
/* how-it-connects flow strip */
.howflow{display:flex;align-items:stretch;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.howstep{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:700;font-size:.92rem;color:var(--ink)}
.howstep.wati{background:var(--ink);color:#fff;border-color:var(--ink)}
.howstep.wati .ic-logo{height:16px}
.howstep .lico{width:22px;height:22px}
.howarrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);min-width:74px}
.howarrow b{font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.2}
.howarrow .ln{width:100%;height:2px;background:linear-gradient(90deg,var(--green),var(--green-deep));border-radius:2px;position:relative}
.howarrow .ln::after{content:"";position:absolute;right:-1px;top:-3px;border-left:7px solid var(--green-deep);border-top:4px solid transparent;border-bottom:4px solid transparent}
/* ===== SCALE — green numerals on ink (sanctioned) ===== */
.scale{background:var(--ink);color:#fff;border-radius:24px;padding:64px 40px;text-align:center}
.scale h2{color:#fff}
.scale .lead{color:#cfcfcc;margin:18px auto 42px}
.scale-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;max-width:1040px;margin:0 auto}
.scale-stat .num{font-family:var(--font);font-size:2.5rem;font-weight:700;color:var(--green);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.scale-stat .lbl{color:#cfcfcc;font-weight:600;font-size:.95rem;margin-top:4px}
/* ===== TESTIMONIALS — editorial spotlight + supporting grid ===== */
.ts-grid{display:grid;grid-template-columns:1.18fr 1fr;gap:24px;align-items:stretch;max-width:1080px;margin:0 auto}
.ts-mono{width:48px;height:48px;border-radius:13px;background:var(--green-tint);color:var(--green-deep);display:grid;place-items:center;font-weight:700;font-size:1.04rem;letter-spacing:-.01em;flex:none}
.ts-person{display:flex;align-items:center;gap:13px;min-width:0}
.ts-person>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.ts-pn{font-weight:700;font-size:1rem;color:var(--ink);line-height:1.2}
.ts-pr{font-size:.84rem;color:var(--muted);font-weight:500;line-height:1.3}
.ts-tag{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:600;color:var(--ink-soft);border:1px solid var(--line);background:#fff;padding:6px 11px;border-radius:999px;white-space:nowrap}
.ts-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.ts-metric{display:flex;flex-direction:column;line-height:1}
.ts-metric .ts-num{font-weight:700;letter-spacing:-.03em;color:var(--green-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.ts-metric .ts-lbl{font-size:.8rem;color:var(--ink-soft);font-weight:600;margin-top:5px;letter-spacing:-.004em}
.ts-src{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);font-weight:600}
.ts-src img{height:15px;width:auto;opacity:.7}
.ts-src .ts-wm{font-weight:700;color:var(--ink);font-size:.92rem}
/* featured spotlight */
.ts-spot{position:relative;background:var(--green-tint);border-radius:24px;padding:44px 44px 38px;display:flex;flex-direction:column;overflow:hidden}
.ts-spot .ts-qmark{position:absolute;top:8px;left:30px;font-size:150px;line-height:.8;color:var(--green);font-family:var(--font);font-weight:700}
.ts-stag{position:relative;align-self:flex-start;margin-bottom:auto}
.ts-spot blockquote{position:relative;font-size:clamp(1.5rem,2.1vw,2rem);font-weight:600;line-height:1.24;letter-spacing:-.022em;color:var(--ink);margin:78px 0 30px;text-wrap:pretty}
.ts-spot-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ts-spot-foot .ts-person{flex:1}
.ts-spot-foot .ts-metric{flex:none;align-items:flex-end;text-align:right}
.ts-spot-foot .ts-metric .ts-num{font-size:2.4rem}
.ts-spot-foot .ts-metric .ts-lbl{max-width:170px}
.ts-spot .ts-mono{background:rgba(255,255,255,.6);box-shadow:var(--shadow-sm)}
/* supporting cards */
.ts-side{display:flex;flex-direction:column;gap:24px}
.ts-qcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 24px 22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px;flex:1;transition:transform .18s,box-shadow .18s,border-color .18s}
.ts-qcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--green)}
.ts-qtop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ts-qcard blockquote{font-size:1.06rem;line-height:1.42;font-weight:500;color:var(--ink);letter-spacing:-.01em;text-wrap:pretty}
.ts-qfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:4px}
.ts-qfoot .ts-person{flex:1}
.ts-qfoot .ts-src{flex:none}
.ts-qcard .ts-metric .ts-num{font-size:1.45rem}
.ts-qcard .ts-mono{width:40px;height:40px;font-size:.92rem;border-radius:11px}
.ts-qcard .ts-pn{font-size:.92rem}
.ts-qcard .ts-pr{font-size:.78rem}
/* loved-by-customers: award shields + rating cards */
.awards-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-bottom:40px}
.awards-row img{height:152px;width:auto;transition:transform .16s ease}
.awards-row img:hover{transform:translateY(-3px)}
.rating-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;max-width:1020px;margin:0 auto}
.rating-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 16px;text-align:center;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:12px}
.rating-card .score{font-family:var(--font);font-weight:700;font-size:2rem;color:var(--ink);letter-spacing:-.02em;line-height:1}
.rating-card .score small{font-size:1.05rem;color:var(--muted);font-weight:600}
.stars{position:relative;display:inline-block;font-size:19px;line-height:1;letter-spacing:3px;font-family:Arial,sans-serif}
.stars .bg{color:#d7ddd9}
.stars .fg{color:#16a45c;position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}
.rating-logo{height:30px;display:flex;align-items:center;justify-content:center}
.rating-logo img{height:26px;width:auto;object-fit:contain}
.rating-logo .wm{font-family:var(--font);font-weight:700;font-size:1.15rem;color:var(--ink);letter-spacing:-.01em}
.rating-card .rev{color:var(--ink-soft);font-size:.88rem;font-weight:500;line-height:1.35}
/* final cta — solid green band */
.cta-final{background:var(--green);border-radius:24px;padding:74px 40px;text-align:center}
.cta-final h2{max-width:760px;margin:0 auto 32px}
.cta-final .btn-primary{background:var(--green);color:var(--ink);border:4px solid var(--ink);border-radius:18px;box-shadow:9px 9px 0 0 var(--ink)}
.cta-final .btn-primary:hover{transform:translate(3px,3px);box-shadow:6px 6px 0 0 var(--ink)}
.cta-final .btn-primary:active{transform:translate(9px,9px);box-shadow:0 0 0 0 var(--ink)}
.cta-final .btn-outline{background:#fff;color:var(--ink);border-color:var(--ink)}
/* footer */
footer{background:var(--ink);color:#c6d2cc;padding:62px 0 34px;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:40px}
.foot-logo{height:28px;margin-bottom:14px}
.foot-grid h6{color:#fff;font-size:.95rem;margin-bottom:14px;font-weight:700}
.foot-grid a{display:block;color:#a7b3ac;margin-bottom:9px}
.foot-grid a:hover{color:#fff;text-decoration:none}
.foot-bottom{border-top:1px solid #34373a;padding-top:22px;color:#8a8f8c;font-size:.85rem}
/* promo bar */
.promo-bar{background:var(--green);color:var(--ink);text-align:center;font-size:.9rem;font-weight:600;padding:9px 24px;line-height:1.4}
.promo-bar a{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.nav-logo-link{display:inline-flex}
/* utility bar */
.util-bar{background:var(--ink);font-size:.82rem}
.util-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:38px;display:flex;align-items:center;gap:22px}
.util-bar a{color:#c6d2cc;font-weight:600;white-space:nowrap}
.util-bar a:hover{color:#fff;text-decoration:none}
.util-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.util-bar .has-menu > a::after{width:5px;height:5px;border-width:0 1.5px 1.5px 0;margin-top:-2px}
.util-bar .mega{padding:12px;border-radius:12px;margin-top:14px}
.util-bar .mega::before{top:-14px;height:14px}
.util-menu{display:flex;flex-direction:column;min-width:210px}
.util-menu a{display:block;font-size:.86rem;font-weight:600;color:var(--ink);padding:8px 10px;border-radius:8px}
.util-menu a:hover{background:var(--bg);color:#000}
.lang{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.lang svg{width:15px;height:15px}
.lang-list{min-width:150px}
.util-right .login{color:#fff;font-weight:700}
.menu-right .mega{left:auto;right:0}
/* nav polish: animated underline + caret rotate + sticky shadow */
.nav-links a{position:relative}
.nav-links > a::before,.nav-links .has-menu > a::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-links > a:hover::before,.nav-links .has-menu:hover > a::before{transform:scaleX(1)}
.has-menu:hover > a::after{transform:rotate(-135deg);opacity:.85}
header.nav{transition:box-shadow .2s ease}
header.nav.scrolled{box-shadow:0 6px 24px -16px rgba(27,29,28,.5)}
/* header mega menus */
.has-menu{position:relative;display:inline-flex;align-items:center}
.has-menu > a{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.has-menu > a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.55;transition:transform .2s ease}
.mega{position:absolute;top:100%;left:0;transform:translateY(10px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px 24px;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:80;margin-top:18px}
.has-menu:hover > .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega::before{content:"";position:absolute;top:-22px;left:0;right:0;height:22px}
.mega-cols{display:flex;gap:26px}
.mega-col{min-width:184px}
.mega-col h6{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:700}
.mega-col h6:empty{height:.68rem;margin:0 0 10px}
.mega-col a{display:block;font-size:.92rem;font-weight:600;color:var(--ink);padding:8px 0}
.mega-col a span{display:block;font-size:.78rem;font-weight:400;color:var(--ink-soft);margin-top:2px;max-width:200px;white-space:normal}
.mega-col a:hover{color:#000;text-decoration:none}
.mega-col a:hover,.mega-col a:hover span{text-decoration:none!important;border:0!important;box-shadow:none!important;outline:0!important;background-image:none!important}
.mega-col a::before,.mega-col a::after,.mega-col a:hover::before,.mega-col a:hover::after{content:none!important;display:none!important}
.nav-cta .login{font-weight:600;font-size:.95rem;color:var(--ink)}
.nav-cta .login:hover{color:#000;text-decoration:none}
/* full footer — brand-first (matches live site) */
.site-foot{background:var(--ink);color:#c6d2cc;padding:72px 0 32px;font-size:.9rem}
.foot-top{display:grid;grid-template-columns:248px 1fr;gap:56px;padding-bottom:44px;border-bottom:1px solid #34373a}
/* left brand rail */
.foot-brand .foot-logo{height:30px;margin-bottom:16px}
.foot-brand p{color:#a7b3ac;font-size:1.02rem;line-height:1.45;max-width:230px;margin-bottom:22px}
.foot-social{display:flex;gap:14px;align-items:center;margin-bottom:26px}
.foot-social a{width:34px;height:34px;border-radius:9px;border:1px solid #34373a;display:grid;place-items:center;transition:.16s}
.foot-social a:hover{background:#fff;border-color:#fff}
.foot-social img{height:16px;width:16px;display:block}
.foot-social a:hover img{filter:brightness(0)}
.foot-brand .app-h{color:#fff;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.foot-apps{display:flex;flex-wrap:wrap;gap:10px}
.foot-apps img{height:40px;width:auto}
.foot-apps a:hover{opacity:.82;transition:opacity .15s ease}
/* link columns */
.foot-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 22px}
.foot-cols h6{color:#fff;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin:0 0 14px;font-weight:700}
.foot-cols div > h6:not(:first-child){margin-top:26px}
.foot-cols a{display:block;color:#a7b3ac;margin-bottom:9px;font-size:.85rem;transition:color .14s ease}
.foot-cols a:hover{color:#fff;text-decoration:none}
/* trust band — partners left, awards grid right (like live site) */
.foot-trust{display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid #34373a;margin-top:0;padding:38px 0;flex-wrap:wrap}
.trust-h{display:none}
.trust-left{display:flex;align-items:center;gap:20px;flex:none}
.trust-left img{height:62px;width:auto}
.trust-awards{display:flex;flex-direction:column;gap:16px}
.trust-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:flex-end}
.trust-row img{height:90px;width:auto;transition:transform .16s ease}
.trust-row img:hover{transform:translateY(-3px)}
.foot-bottom2{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #34373a;margin-top:28px;padding-top:22px;flex-wrap:wrap}
.foot-bottom2 .legal{color:#8a8f8c;font-size:.85rem;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.foot-bottom2 .legal a{color:#a7b3ac}
.foot-bottom2 .legal a:hover{color:#fff;text-decoration:none}
.foot-gdpr{height:40px;display:block}
.foot-certs{height:52px;display:block;background:#fff;border-radius:10px;padding:6px 10px;box-sizing:border-box}
/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:.75s cubic-bezier(.2,.7,.2,1)}
.reveal.show{opacity:1;transform:none}
@media(max-width:900px){
section{padding:66px 0}
.nav-links,.nav-cta .btn-outline{display:none}
.menu-toggle{display:block}
.chan-panel.active,.mss-block,.intel-grid{grid-template-columns:1fr}
.ts-grid{grid-template-columns:1fr}
.mss-block.reverse .mss-copy{order:initial}
.grid2{grid-template-columns:1fr;grid-auto-rows:auto}
.fcard.b-astra,.fcard.b-cop,.fcard.b-mcp,.fcard.b-ext,.fcard.b-orc{grid-column:1/-1;grid-row:auto}
.scale-stats{grid-template-columns:repeat(2,1fr)}
.rating-grid{grid-template-columns:repeat(2,1fr)}
.awards-row img{height:118px}
.integ-stage{grid-template-columns:1fr;gap:14px}
.integ-lines{display:none}.integ-col.right{align-items:stretch}.integ-col.left{align-items:stretch}.itile{width:auto}
.integ-center{margin:8px auto}
.nav-cta .login{display:none}
.foot-top{grid-template-columns:1fr;gap:36px}
.foot-cols{grid-template-columns:repeat(2,1fr);gap:24px 20px}
.foot-trust{flex-direction:column;align-items:flex-start;gap:24px}
.trust-row{justify-content:flex-start}
.trust-row img{height:64px}
.foot-bottom2{flex-direction:column;align-items:flex-start}
.promo-bar{font-size:.78rem;padding:8px 16px}
.util-bar{display:none}
}
@media(max-width:560px){.scale-stats{grid-template-columns:1fr}.rating-grid{grid-template-columns:1fr}}
/* ============================================================
PALETTE THEMES — applied via html[data-palette]; additive only.
Default (no attribute / "green") = the original green palette.
============================================================ */
/* BRAND BURST: green anchors the hero, nav, and final CTA. Every section below
is bathed in one brand hue — full-bleed background, chips, icon tiles, links,
accents and hover states all shift to that hue for a bold, cohesive block. */
html[data-palette="brand"] [data-pal]{
background:var(--pal-soft);
--bg:var(--pal-soft);
--green:var(--pal-bright);
--green-tint:var(--pal-tint);
--green-tint-soft:var(--pal-soft);
--green-deep:var(--pal-deep);
}
html[data-palette="brand"] [data-pal="blue"]{ --pal-bright:#1f9fe0; --pal-tint:#d2ecfc; --pal-soft:#ecf6ff; --pal-deep:#0b5e8a; }
html[data-palette="brand"] [data-pal="yellow"]{ --pal-bright:#e0a000; --pal-tint:#ffe7a0; --pal-soft:#fff7dc; --pal-deep:#6b5200; }
html[data-palette="brand"] [data-pal="pink"]{ --pal-bright:#d855df; --pal-tint:#f6d4fb; --pal-soft:#fdf1ff; --pal-deep:#8a2e96; }
/* BLACK: NOT a full-page invert — only the hero, the Wati AI (ACE) section, and the
final CTA become ink blocks (matching the brand's "light page, dark anchors"
pattern). Every other section — channels, use cases, testimonials, ratings,
footer — stays on the normal light/green Wati look. */
html[data-palette="black"] .hero{background:#0e1218;color:#eceef2}
html[data-palette="black"] .hero h1{color:#eceef2}
html[data-palette="black"] .hero .hl{color:#0e1218}
html[data-palette="black"] .hero .lead{color:#a9b1bd}
html[data-palette="black"] .hero .ht-txt{color:#a9b1bd}
html[data-palette="black"] .hero .ht-txt b{color:#eceef2}
html[data-palette="black"] .hero .btn-outline{background:transparent;color:#eceef2;border-color:#eceef2;box-shadow:7px 7px 0 0 #eceef2}
html[data-palette="black"] .hero .btn-outline:hover{box-shadow:5px 5px 0 0 #eceef2}
html[data-palette="black"] .hero .btn-outline:active{box-shadow:0 0 0 0 #eceef2}
html[data-palette="black"] .hero .reel-word{color:#4a5058}
html[data-palette="black"] #ai{background:#0e1218;color:#eceef2}
html[data-palette="black"] #ai .eyebrow{background:#1a212c;color:#7ee6b0}
html[data-palette="black"] #ai .eyebrow::before{background:#00e785}
html[data-palette="black"] #ai .astra-block{background:#0e1218}
html[data-palette="black"] #ai h2,html[data-palette="black"] #ai h3{color:#eceef2}
html[data-palette="black"] #ai .lead,html[data-palette="black"] #ai .astra-head p{color:#a9b1bd}
html[data-palette="black"] #ai .ai-bucket{background:#171c24;border-color:#2c3442}
html[data-palette="black"] #ai .ai-bucket h4{color:#eceef2}
html[data-palette="black"] #ai .ai-bucket .tag{color:#7ee6b0}
html[data-palette="black"] #ai .ai-check li{color:#a9b1bd}
html[data-palette="black"] #ai .ai-check li::before{color:#7ee6b0}
html[data-palette="black"] #ai .fc-ico{background:#1a2b22;color:#7ee6b0}
html[data-palette="black"] .cta-final{background:#0e1218}
html[data-palette="black"] .cta-final h2{color:#eceef2}
html[data-palette="black"] .cta-final p{color:#a9b1bd !important}
html[data-palette="black"] .cta-final .btn-primary{background:#00e785;color:#0e1218;border-color:#0e1218;box-shadow:9px 9px 0 0 #eceef2}
html[data-palette="black"] .cta-final .btn-primary:hover{box-shadow:6px 6px 0 0 #eceef2}
html[data-palette="black"] .cta-final .btn-primary:active{box-shadow:0 0 0 0 #eceef2}
html[data-palette="black"] .cta-final .btn-outline{background:transparent;color:#eceef2;border-color:#eceef2;box-shadow:9px 9px 0 0 #eceef2}
html[data-palette="black"] .cta-final .btn-outline:hover{box-shadow:6px 6px 0 0 #eceef2}
html[data-palette="black"] .cta-final .btn-outline:active{box-shadow:0 0 0 0 #eceef2}
/* palette switcher control */
.palette-switch{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9000;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:0 8px 30px -8px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.08)}
.palette-switch .ps-label{font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 10px 0 12px}
.palette-switch button{font-family:var(--font);font-weight:600;font-size:.85rem;color:var(--ink-soft);background:none;border:0;border-radius:999px;padding:8px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .16s,color .16s}
.palette-switch button:hover{color:var(--ink)}
.palette-switch button[aria-pressed="true"]{background:var(--ink);color:#fff}
.palette-switch .sw{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.palette-switch .sw-green{background:#00E785}
.palette-switch .sw-brand{background:conic-gradient(#f9b4ff,#4fc3ff,#00e785,#ffe96e,#f9b4ff)}
.palette-switch .sw-black{background:linear-gradient(135deg,#0e1218 50%,#fff 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
/* trust & guardrails strip */
.guard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.guard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow-sm)}
.guard h5{font-size:1.08rem;font-weight:700;letter-spacing:-.015em;margin-bottom:7px}
.guard p{color:var(--ink-soft);font-size:.96rem;line-height:1.5}
.guard .g-ic{display:inline-flex;width:36px;height:36px;border-radius:10px;background:var(--green-tint);color:var(--green-deep);align-items:center;justify-content:center;margin-bottom:14px}
.guard .g-ic svg{width:20px;height:20px}
@media(max-width:900px){.guard-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.guard-grid{grid-template-columns:1fr}}
@media print{.palette-switch{display:none}}
@media(max-width:560px){.palette-switch .ps-label{display:none}.palette-switch button{padding:8px 12px}}
/* ===== v5-dovetail-theme ===== */
/* ============================================================
LP v5 — Dovetail-style theme: editorial + soft pastel washes.
DM Sans everywhere (inherited). Green demoted to small accents;
brand pastels (pink / blue / yellow washes) carry the page.
============================================================ */
:root{
--bg:#faf7f3;
--radius:22px;--radius-sm:14px;
--lav:#f3ecff;--peach:#fdf1ea;--sand:#f6f2e8;
--pink-deep:#8a2e96;--blue-deep:#0b5e8a;--yellow-deep:#6b5200;
--shadow:0 1px 3px rgba(60,40,90,.08),0 40px 80px -30px rgba(60,40,90,.30);
--shadow-sm:0 1px 3px rgba(60,40,90,.07),0 1px 2px -1px rgba(60,40,90,.07);
}
/* ---- editorial type: lighter, airier headlines ---- */
h1{letter-spacing:-.045em;line-height:1.06}
h2{letter-spacing:-.035em}
/* ---- buttons: soft pills, no hard shadows ---- */
.btn,.btn.sm{border:none;border-radius:999px;box-shadow:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn-primary,.cta-final .btn-primary{background:var(--ink);color:#fff;border:none;box-shadow:0 10px 24px -10px rgba(29,29,29,.45)}
.btn-primary:hover,.cta-final .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(29,29,29,.5);background:#000}
.btn-primary:active,.cta-final .btn-primary:active{transform:translateY(0);box-shadow:0 6px 16px -8px rgba(29,29,29,.4)}
.btn-outline,.cta-final .btn-outline{background:#fff;color:var(--ink);border:1.5px solid #e2ddd4;box-shadow:var(--shadow-sm)}
.btn-outline:hover,.cta-final .btn-outline:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-outline:active,.cta-final .btn-outline:active{transform:translateY(0);box-shadow:none}
.btn.sm{box-shadow:none;border:1.5px solid #e2ddd4;background:#fff}
.btn.sm.btn-primary{background:var(--ink);color:#fff;border:none}
/* ---- highlight: pastel yellow band instead of green ---- */
.hl{background:linear-gradient(var(--w-yellow,#ffe96e),var(--w-yellow,#ffe96e)) no-repeat;background-size:100% .52em;background-position:0 84%}
/* ---- eyebrow: soft pink wash ---- */
.eyebrow{background:var(--w-pink-light,#fdecff);color:var(--pink-deep);border-radius:999px}
.eyebrow::before{background:var(--w-pink,#f9b4ff)}
/* ---- hero: Dovetail pastel wash, no green glow ---- */
.hero{background:linear-gradient(160deg,var(--lav) 0%,var(--peach) 55%,var(--sand) 100%)}
.bg-glow::before{background:radial-gradient(closest-side,rgba(249,180,255,.35),rgba(79,195,255,.12) 55%,transparent 72%)}
.bg-glow::after{background:radial-gradient(60% 100% at 50% 100%,rgba(79,195,255,.16),transparent 72%)}
.hero-demo{background-color:var(--sand)}
.hero-demo::before{background:radial-gradient(60% 100% at 50% 0%,rgba(249,180,255,.16),transparent 72%)}
.hero .reel-word{color:#a89fb8}
.hero-reel:hover .reel-word{color:#8b7fa0}
/* ---- tint utilities: rotate green tints to pastels ---- */
.stat-chip{background:var(--w-blue-light,#e3f5ff);color:var(--blue-deep)}
.stat-chip::before{background:var(--w-blue,#4fc3ff);box-shadow:0 0 0 4px rgba(79,195,255,.25)}
.mini-chip{background:var(--w-yellow-light,#fff6da);color:var(--yellow-deep)}
.proof-band{background:var(--lav);color:#5b3f8f}
.proof-band::before{background:#b79aec}
.ai-note{background:var(--w-pink-light,#fdecff);color:var(--pink-deep)}
.fc-ico,.pe-ic,.ai-bucket .fc-ico,.intel .ic,.guard .g-ic{background:var(--w-blue-light,#e3f5ff);color:var(--blue-deep)}
.ts-mono{background:var(--w-pink-light,#fdecff);color:var(--pink-deep)}
.ai-bucket .tag{color:var(--pink-deep)}
.ai-check li::before{color:var(--blue-deep)}
.integ-detail .uses span{background:var(--lav);color:#5b3f8f}
/* card hovers: soft lift, pastel border */
.astra-block:hover,.ai-bucket:hover,.fcard:hover,.intel:hover,.ts-qcard:hover{border-color:#dccfee}
.chan-tab:hover{border-color:#dccfee}
.itile:hover,.itile.sel{border-color:#b79aec}
.itile.sel{background:var(--lav)}
.fcard.feat{border-color:#dccfee;background:linear-gradient(180deg,var(--lav),var(--white) 42%)}
.fcard.feat::after{background:radial-gradient(circle,rgba(249,180,255,.28),transparent 68%)}
/* connection lines: keep green only as a thin thread; hub soft */
.conn{stroke:#e9defa}
.hub-wrap{background:linear-gradient(180deg,#fff,var(--lav))}
.integ-center{box-shadow:0 18px 44px -16px rgba(0,231,133,.45)}
/* spotlight testimonial: pastel pink instead of green tint */
.ts-spot{background:linear-gradient(160deg,var(--w-pink-light,#fdecff),var(--lav))}
.ts-spot .ts-qmark{color:var(--w-pink,#f9b4ff)}
.ts-spot .ts-mono{background:rgba(255,255,255,.7)}
.ts-metric .ts-num{color:var(--pink-deep)}
/* section wash rhythm: soft pastel bands */
#usecases,.mss-convo{background:var(--bg)}
/* scale band stays ink; numerals keep brand green (sanctioned accent) */
/* final CTA: pastel wash, ink pill CTA */
.cta-final{background:linear-gradient(160deg,var(--lav) 0%,var(--peach) 55%,var(--w-blue-light,#e3f5ff) 100%)}
.cta-final .btn-primary{border-radius:999px}
.cta-final .btn-outline{border-radius:999px}
/* stars / ratings accent */
.stars .fg{color:#e0a000}
/* nav underline accent */
.nav-links > a::before,.nav-links .has-menu > a::before{background:var(--w-pink,#f9b4ff)}
/* promo bar: pastel yellow */
.promo-bar{background:var(--w-yellow,#ffe96e);color:var(--ink)}
/* storylane placeholder: soften */
.storylane{border-color:#dccfee;background:var(--lav)}
.storylane .play{background:var(--w-pink,#f9b4ff);border:none;box-shadow:0 14px 30px -12px rgba(138,46,150,.5)}
.storylane .play::after{border-left-color:#fff}
/* hide the v4 palette switcher — v5 is its own theme */
.palette-switch{display:none}
/* v5: JS-driven reveals are unreliable here — content visible by default,
scroll-driven entrance only where the browser supports animation-timeline */
.reveal{opacity:1;transform:none;transition:none}
@supports (animation-timeline: view()){
@keyframes v5-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.reveal{animation:v5-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
}
@media(prefers-reduced-motion:reduce){.reveal{animation:none!important}}
/* ===== v5-layout-theme ===== */
/* ============================================================
v5.1 — computer.io-inspired layout: white base, generous
whitespace, full-viewport hero, and inset rounded blocks
(one dark statement panel, one pastel panel) instead of
full-bleed colour sections.
============================================================ */
:root{--bg:#fff}
section{padding:clamp(96px,11vw,150px) 0}
.section-head{margin-bottom:64px}
h2{font-size:clamp(2.3rem,4vw,3.55rem)}
/* ---- hero fills the viewport ---- */
.hero{min-height:calc(100svh - 150px);display:flex;flex-direction:column;justify-content:center;padding:48px 0 56px}
.hero .wrap{width:100%}
.hero-demo{background:linear-gradient(180deg,var(--sand),#fff);padding-bottom:110px}
.hero-demo::before{display:none}
.mss-convo{background:#faf7f3}
/* ---- inset dark statement panel: Wati AI ---- */
#ai{background:#fff;padding:56px 0}
#ai .wrap{background:#101216;border-radius:36px;padding:clamp(56px,7vw,96px) clamp(24px,5vw,72px)}
#ai h2,#ai h3,#ai h4{color:#f2f2f5}
#ai .lead,#ai p,#ai .astra-tag,#ai .fcard .tag{color:#a9adbb}
#ai .eyebrow{background:#23232c;color:#9be8c0}
#ai .eyebrow::before{background:#00e785}
#ai .astra-block{background:transparent;border-color:#2c2d36;box-shadow:none}
#ai .astra-block:hover{transform:none;border-color:#3a3b46;box-shadow:none}
#ai .ai-bucket{background:#181b22;border-color:#272b34}
#ai .ai-bucket:hover{border-color:#3a3b46;box-shadow:none}
#ai .ai-bucket .tag{color:#7ee6b0}
#ai .ai-check li{color:#a9adbb}
#ai .ai-check li::before{color:#00e785}
#ai .fc-ico,#ai .pe-ic,#ai .intel .ic{background:#23232c;color:#9be8c0}
#ai .stat-chip{background:#23232c;color:#9be8c0}
#ai .stat-chip::before{background:#00e785;box-shadow:0 0 0 4px rgba(0,231,133,.18)}
#ai .hub-wrap{background:#1d1e25;border-color:#2c2d36;box-shadow:none}
#ai .conn{stroke:#33343f}
#ai .glabel,#ai .pe-label{color:#7d8291}
#ai .node{background:#26272f;border-color:#33343f;color:#e8e9ee}
#ai .node:hover{border-color:#33343f}
#ai .mono{background:#e8e9ee;color:#16161c}
#ai .pe-card{background:#26272f;border-color:#33343f;box-shadow:none}
#ai .pe-title{color:#e8e9ee}
#ai .pe-sub{color:#a9adbb}
#ai .chip{background:#26272f;border-color:#33343f;color:#e8e9ee}
#ai .mini-chip{background:#1a2b22;color:#9be8c0}
#ai .fcard{background:#1d1e25;border-color:#2c2d36;box-shadow:none}
#ai .fcard:hover{border-color:#3a3b46;box-shadow:none}
#ai .fcard.feat{background:linear-gradient(180deg,#23232c,#1d1e25 40%);border-color:#3a3b46}
#ai .fcard.feat::after{background:radial-gradient(circle,rgba(0,231,133,.14),transparent 68%)}
#ai .model-logos span{background:#26272f;border-color:#33343f;color:#e8e9ee}
#ai .proof-band{background:#23232c;color:#9be8c0}
#ai .link-arrow{color:#e8e9ee}
#ai .link-arrow::after{border-color:#00e785}
#ai .link-arrow:hover{color:#9be8c0}
#ai .intel{background:#1d1e25;border-color:#2c2d36}
#ai .intel h4{color:#f2f2f5}
#ai .view-toggle{background:#23232c}
#ai .vt-btn{color:#a9adbb}
#ai .vt-btn.active{background:#131318;color:#fff;box-shadow:none}
/* ---- inset pastel panel: integrations ---- */
#integrations{background:#fff;padding:56px 0}
#integrations .wrap{background:linear-gradient(160deg,#e3f5ff 0%,#f3ecff 100%);border-radius:36px;padding:clamp(56px,7vw,96px) clamp(24px,5vw,72px)}
#integrations .integ-detail{background:var(--ink)}
#integrations .howstep{background:#fff}
/* ---- existing inset blocks: scale (ink) & final CTA (pastel) ---- */
.scale{border-radius:36px;padding:clamp(64px,8vw,100px) 48px}
.cta-final{border-radius:36px;padding:clamp(72px,9vw,110px) 48px}
.cta-final h2{font-size:clamp(2.5rem,4.6vw,4rem)}
@media(max-width:900px){
section{padding:72px 0}
.hero{min-height:0;padding:72px 0 48px}
#ai .wrap,#integrations .wrap{border-radius:24px}
}
/* ===== v5-align-theme ===== */
/* ============================================================
v5.2 — left-aligned editorial layout (computer.io style).
Kill centered section heads and centered hero; ragged-right,
asymmetric composition.
============================================================ */
/* hero: left-aligned */
.hero{text-align:left}
.hero h1{margin:0;max-width:15ch}
.hero .lead{margin:26px 0 0;max-width:56ch}
.hero-cta{justify-content:flex-start;margin:44px 0 40px}
.hero-trust{justify-content:flex-start}
.hero .ht-txt{text-align:left}
/* section heads: left-aligned, asymmetric */
.section-head{margin:0 0 64px;text-align:left;max-width:820px}
.section-head .lead{margin:18px 0 0}
.section-head.sh-wide{max-width:900px}
.section-head.sh-wide .lead{max-width:760px}
.center{text-align:left}
/* pieces that were centered with their heads */
.chan-tabs{justify-content:flex-start}
.pill-row{justify-content:flex-start}
.view-toggle{margin:0 0 44px}
.reel-label{text-align:left}
/* scale + CTA panels: left-aligned statements */
.scale{text-align:left}
.scale h2{max-width:16ch}
.scale .lead{margin:18px 0 42px;max-width:52ch}
.scale-stats{margin:0;max-width:none;text-align:left}
.cta-final{text-align:left}
.cta-final h2{margin:0 0 32px;max-width:17ch}
.cta-final .lead{margin:0 0 32px}
.badges-head,.awards-row{justify-content:flex-start}
.rating-grid{margin:0}
/* keep chat mocks + demo centered inside their own cards (product, not copy) */
.storylane,.storylane-embed{margin-left:0;margin-right:0}
@media(max-width:900px){.hero h1{max-width:none}}
/* ===== v5-balance-theme ===== */
/* ============================================================
v5.3 — balanced left-aligned composition: section heads become
asymmetric two-column rows (headline left, lead right), and
headers hold to 1-2 lines.
============================================================ */
.hero h1{max-width:24ch}
.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px 64px;align-items:end;max-width:none}
.section-head .eyebrow{grid-column:1/-1;justify-self:start;margin-bottom:0}
.section-head h2{grid-column:1}
.section-head .lead{grid-column:2;margin:0 0 6px;font-size:1.12rem}
.section-head.sh-wide{max-width:none}
/* single-child heads (badges) stay simple */
.section-head:not(:has(.lead)){display:block}
/* scale panel: headline left, lead right, stats span below */
.scale{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 64px;align-items:end}
.scale h2{grid-column:1;max-width:none}
.scale .lead{grid-column:2;margin:0 0 8px;max-width:none;font-size:1.08rem}
.scale-stats{grid-column:1/-1;margin-top:44px;display:grid}
/* final CTA: statement left, actions right */
.cta-final{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,auto);gap:24px 56px;align-items:center}
.cta-final h2{margin:0;max-width:none}
.cta-final .hero-cta{margin:0;justify-self:end}
@media(max-width:900px){
.section-head,.scale,.cta-final{display:block}
.section-head .lead{margin-top:18px}
.scale .lead{margin:18px 0 42px}
.cta-final .hero-cta{margin-top:32px}
.hero h1{max-width:none}
}
/* ===== v5-herobadges-theme ===== */
/* above-the-fold trust badges — mono text lockups, ManyChat-style */
.hero-badges{display:flex;align-items:center;gap:38px;margin-top:34px;flex-wrap:wrap}
.hb{display:inline-flex;align-items:center;gap:11px}
.hb img{height:26px;width:26px;filter:brightness(0);opacity:.78}
.hb-t{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;color:var(--ink-soft);text-align:left}
.hb-t b{font-weight:800;color:var(--ink)}
@media(max-width:900px){.hero-badges{gap:24px}}
/* ===== v5-scrolly-theme ===== */
/* ============================================================
v5.4 — ManyChat-style pinned use-case stage: one view, slides
swap as you scroll. Pure CSS scroll-driven animation; degrades
to a normal stacked list where unsupported / on mobile.
============================================================ */
.uc-rail{display:none}
.uc-stage{display:flex;flex-direction:column;gap:30px}
@media(min-width:901px){
@supports (animation-timeline: view()){
.mss-scrolly .uc-track{position:relative;height:340vh;view-timeline:--uc block}
.mss-scrolly .uc-stage{position:sticky;top:96px;height:calc(100vh - 140px);min-height:540px;display:grid;align-items:center}
.mss-scrolly .mss-block{grid-area:1/1;opacity:0;pointer-events:none;animation:uc-s2 linear both;animation-timeline:--uc;max-height:100%}
.mss-scrolly .uc-stage > .mss-block:nth-child(1){animation-name:uc-s1;animation-range:contain 0% contain 42%}
.mss-scrolly .uc-stage > .mss-block:nth-child(2){animation-name:uc-s2;animation-range:contain 30% contain 72%}
.mss-scrolly .uc-stage > .mss-block:nth-child(3){animation-name:uc-s3;animation-range:contain 60% contain 100%}
.ucd1{animation:uc-d1 linear both;animation-timeline:--uc;animation-range:contain 0% contain 42%}
.ucd2{animation:uc-d2 linear both;animation-timeline:--uc;animation-range:contain 30% contain 72%}
.ucd3{animation:uc-d3 linear both;animation-timeline:--uc;animation-range:contain 60% contain 100%}
}
}
@keyframes uc-s1{0%,76%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-36px)}}
@keyframes uc-s2{0%{opacity:0;transform:translateY(36px)}24%,76%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-36px)}}
@keyframes uc-s3{0%{opacity:0;transform:translateY(36px)}28%,100%{opacity:1;transform:none}}
@keyframes uc-d1{0%,76%{background:var(--ink);color:#fff;border-color:var(--ink)}100%{background:#fff;color:var(--muted);border-color:var(--line)}}
@keyframes uc-d2{0%{background:#fff;color:var(--muted);border-color:var(--line)}24%,76%{background:var(--ink);color:#fff;border-color:var(--ink)}100%{background:#fff;color:var(--muted);border-color:var(--line)}}
@keyframes uc-d3{0%{background:#fff;color:var(--muted);border-color:var(--line)}28%,100%{background:var(--ink);color:#fff;border-color:var(--ink)}}
/* ===== v5-proof-theme ===== */
/* hero proof band: trust line left, mono badges right, one hairline row */
.hero-proof{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:48px;padding-top:26px}
.hero-proof .hero-badges{margin-top:0;gap:34px}
.hero-reel{margin-top:34px}
@media(max-width:900px){.hero-proof{flex-direction:column;align-items:flex-start;gap:22px}}
/* ===== v5-channels-theme ===== */
/* ============================================================
v5.5 — channels: vertical icon rail switcher + minimal device
frames (phone for messaging, browser for web).
============================================================ */
@media(min-width:901px){
#chanTabs{flex-direction:column;align-items:stretch;gap:4px;margin:0;position:sticky;top:110px;align-self:start}
.chan-wrap-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start}
}
.chan-tab{display:flex;align-items:center;gap:12px;border:none;background:transparent;border-radius:12px;padding:12px 14px;text-align:left;font-weight:600;color:var(--ink-soft)}
.chan-tab:hover{background:#f2efe9;border:none;color:var(--ink)}
.chan-tab.active,.chan-tab[data-hero].active{background:var(--ink);border:none;color:#fff}
.ct-ic{width:19px;height:19px;flex:none;filter:brightness(0);opacity:.55}
svg.ct-ic{filter:none;opacity:.7}
.chan-tab.active .ct-ic{filter:brightness(0) invert(1);opacity:1}
.chan-tab.active svg.ct-ic{filter:none;opacity:1}
/* minimal device frames */
#chanPanels .chan-stage{background:#fff;border:2.5px solid var(--ink);border-radius:38px;padding:56px 22px 34px;box-shadow:0 34px 70px -34px rgba(60,40,90,.35);position:relative;max-width:430px}
#chanPanels .chan-stage::before{content:"";position:absolute;top:24px;left:50%;transform:translateX(-50%);width:86px;height:8px;border-radius:999px;background:var(--line)}
#chanPanels .chan-stage::after{content:"";position:absolute;bottom:13px;left:50%;transform:translateX(-50%);width:104px;height:4px;border-radius:999px;background:var(--line)}
/* web = browser frame */
#chanPanels .chan-stage:has(.convo[data-ch="web"]){border-radius:16px;max-width:520px;padding:58px 26px 28px}
#chanPanels .chan-stage:has(.convo[data-ch="web"])::before{width:10px;height:10px;border-radius:50%;left:24px;top:20px;transform:none;box-shadow:18px 0 0 var(--line),36px 0 0 var(--line);background:var(--line)}
#chanPanels .chan-stage:has(.convo[data-ch="web"])::after{top:44px;bottom:auto;left:0;width:100%;height:1px;border-radius:0;transform:none}
/* call screen gets the phone shell too */
#chanPanels .callscreen{border:2.5px solid var(--ink);box-shadow:0 34px 70px -34px rgba(60,40,90,.35)}
@media(max-width:900px){
#chanPanels .chan-stage{padding:48px 16px 28px;border-radius:30px}
}
/* ===== v5-scenes-theme ===== */
/* ============================================================
v5.6 — ManyChat-style full scenes for the pinned persona stage:
each scroll step is its own pastel "section" — oversized copy
left, phone-framed chat right, progress chip under the phone.
============================================================ */
.uc-tag{display:none}
.mss-scrolly .uc-tag{display:none !important}
@media(min-width:901px){
@supports (animation-timeline: view()){
.mss-scrolly .uc-stage{align-items:stretch}
.mss-scrolly .mss-block{border:none;box-shadow:none;height:100%;border-radius:34px;padding:clamp(36px,4.5vw,72px);align-items:center}
.mss-scrolly .uc-stage > .mss-block:nth-child(1){background:linear-gradient(160deg,#fdecff,#f3ecff)}
.mss-scrolly .uc-stage > .mss-block:nth-child(2){background:linear-gradient(160deg,#f3ecff,#fdf1ea)}
.mss-scrolly .uc-stage > .mss-block:nth-child(3){background:linear-gradient(160deg,#fdf1ea,#fdecff)}
.mss-scrolly .mss-copy h3{font-size:clamp(2rem,2.9vw,2.9rem);letter-spacing:-.032em;line-height:1.07}
.mss-scrolly .mss-copy li{font-size:.98rem}
.mss-scrolly .mss-convo{background:transparent;border:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.mss-scrolly .chan-stage{background:#fff;border:2.5px solid var(--ink);border-radius:38px;padding:52px 22px 32px;box-shadow:0 34px 70px -34px rgba(60,40,90,.35);position:relative;max-width:430px;width:100%}
.mss-scrolly .chan-stage::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:86px;height:8px;border-radius:999px;background:var(--line)}
.mss-scrolly .chan-stage::after{content:"";position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:104px;height:4px;border-radius:999px;background:var(--line)}
.mss-scrolly .convo-body{min-height:340px}
.mss-scrolly .uc-tag{display:flex;justify-content:space-between;align-items:center;gap:20px;width:min(100%,430px);background:var(--ink);color:#fff;font-weight:800;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding:13px 18px;border-radius:10px}
.mss-scrolly .uc-tag b{font-weight:800;color:var(--w-green,#00e785)}
}
}
/* ===== v5-badges-theme ===== */
/* badges section: headline left, award shields right */
.badges-top{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;margin-bottom:56px}
.badges-top .section-head{margin:0;display:block}
.badges-top .awards-row{margin:0;justify-content:flex-end;gap:18px;flex:1;min-width:min(100%,520px)}
.badges-top .awards-row img{height:118px}
@media(max-width:900px){.badges-top{flex-direction:column;align-items:flex-start}.badges-top .awards-row{justify-content:flex-start}.badges-top .awards-row img{height:96px}}
/* ===== v5-scene2-theme ===== */
/* ============================================================
v5.7 — scene polish: display type, airy copy, inline stats,
narrow tilted phone. Bullets stay in the fallback/outcome views.
============================================================ */
.uc-lead{display:none}
@media(min-width:901px){
@supports (animation-timeline: view()){
.mss-scrolly .mss-copy ul,.mss-scrolly .mss-copy .link-arrow{display:none}
.mss-scrolly .uc-lead{display:block;font-size:1.18rem;line-height:1.55;color:var(--ink-soft);max-width:34em;margin:0 0 38px}
.mss-scrolly .mss-copy h3{font-size:clamp(2.4rem,3.5vw,3.5rem);font-weight:700;letter-spacing:-.038em;line-height:1.04;margin-bottom:22px;text-wrap:balance}
.mss-scrolly .rev-badge{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:7px 14px;border-radius:999px;letter-spacing:.12em}
/* stats as sticker chips: white, ink border, pastel hard shadow, slight tilt */
.mss-scrolly .outcomes{background:transparent;padding:6px 0 0;margin-bottom:0;gap:18px;border-radius:0;align-items:flex-start}
.mss-scrolly .outcome{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:18px 22px 15px;box-shadow:6px 6px 0 0 var(--w-pink,#f9b4ff);transform:rotate(-2.2deg);color:var(--ink);font-size:clamp(1.9rem,2.2vw,2.5rem);align-items:flex-start;text-align:left;min-width:0;flex:0 1 auto;transition:transform .2s ease}
.mss-scrolly .outcome:nth-child(2){transform:rotate(1.6deg);box-shadow:6px 6px 0 0 #d9c6ff}
.mss-scrolly .outcome:nth-child(3){transform:rotate(-1.2deg);box-shadow:6px 6px 0 0 #ffd9b8}
.mss-scrolly .outcome:hover{transform:rotate(0) translateY(-3px)}
.mss-scrolly .outcome + .outcome::before{display:none}
.mss-scrolly .outcome span{color:var(--ink-soft);margin-top:8px}
/* phone: narrower, tilted, deeper shadow */
.mss-scrolly .chan-stage{max-width:352px;border-width:2px;border-radius:44px;padding:50px 18px 30px;box-shadow:0 48px 90px -40px rgba(60,40,90,.45)}
.mss-scrolly .convo-body{height:360px;min-height:0;overflow:hidden;justify-content:flex-end;padding:0 16px 2px 2px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42px);mask-image:linear-gradient(180deg,transparent 0,#000 42px)}
.mss-scrolly .cb{font-size:.94rem}
.mss-scrolly .uc-tag{width:min(100%,352px);border-radius:999px;padding:12px 20px}
}
}
/* ===== v5-delight-theme ===== */
/* chat choreography: springy bubbles, sliding meta chips */
@keyframes bubblein2{0%{opacity:0;transform:translateY(16px) scale(.94)}62%{opacity:1;transform:translateY(-2px) scale(1.012)}100%{opacity:1;transform:none}}
.msg.show{animation:bubblein2 .5s cubic-bezier(.22,.9,.26,1.08) both}
@keyframes metapop{0%{opacity:0;transform:translateY(10px) scale(.9)}70%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:none}}
.sys-event.show,.ai-note.show{animation:metapop .46s cubic-bezier(.22,.9,.3,1.1) both}
.ai-note svg{animation:aispin 2.6s ease-in-out infinite}
@keyframes aispin{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(18deg) scale(1.18)}}
.cb .spark{animation:sparkin .5s cubic-bezier(.2,.9,.3,1.4) .12s both}
@keyframes sparkin{0%{opacity:0;transform:scale(.4) rotate(-20deg)}100%{opacity:1;transform:none}}
.cap{opacity:0;animation:capin .4s ease .25s both}
.msg.show .cap,.msg.show+.cap{opacity:1}
@keyframes capin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.msg.show,.sys-event.show,.ai-note.show,.cb .spark,.cap{animation:none;opacity:1}}
/* ===== v5-typeband-theme ===== */
/* kinetic typography band — lines shear past each other on scroll */
.type-band{overflow:hidden;padding:clamp(56px,7vw,110px) 0 0;background:#fff}
.tb-line{white-space:nowrap;font-weight:800;font-size:clamp(64px,8.6vw,148px);letter-spacing:-.045em;line-height:1.02;will-change:transform}
.tb-a{color:rgba(29,29,29,.14);-webkit-text-stroke:0}
.tb-b{color:var(--ink)}
.tb-hl{background:linear-gradient(transparent 58%,var(--w-yellow,#ffe96e) 58%)}
/* continuous opposing marquees + a scroll-driven shear on top */
.tb-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:tb-run 38s linear infinite}
.tb-track.tb-rev{animation-direction:reverse;animation-duration:46s}
@keyframes tb-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@supports (animation-timeline: view()){
.tb-a{animation:tb-l linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.tb-b{animation:tb-r linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@keyframes tb-l{from{transform:translateX(0)}to{transform:translateX(-10%)}}
@keyframes tb-r{from{transform:translateX(-10%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.tb-a,.tb-b,.tb-track{animation:none}}
/* ===== v5-nav-hero-theme ===== */
/* ============================================================
v5.8 — nav merges with the hero (transparent over the pastel
wash), turning into a floating glass bar on scroll; more air
between hero copy and social proof.
============================================================ */
header.nav{background:transparent;border-bottom:1px solid transparent;backdrop-filter:none;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
header.nav.scrolled{background:rgba(255,255,255,.62);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid rgba(29,29,29,.08);box-shadow:0 10px 30px -18px rgba(27,29,28,.35)}
/* scroll-driven fallback: glass applies even if JS scroll events never fire */
@supports (animation-timeline: scroll()){
header.nav{animation:navglass linear both;animation-timeline:scroll();animation-range:20px 140px}
@keyframes navglass{
from{background:rgba(255,255,255,0);border-bottom-color:transparent;box-shadow:none}
to{background:rgba(255,255,255,.62);backdrop-filter:saturate(160%) blur(16px);border-bottom-color:rgba(29,29,29,.08);box-shadow:0 10px 30px -18px rgba(27,29,28,.35)}
}
}
/* hero wash extends up behind the nav */
.hero{margin-top:calc(-1 * 72px);padding-top:calc(48px + 72px)}
/* breathing room: copy block → proof band → logo reel */
.hero-cta{margin:48px 0 0}
.hero-proof{margin-top:clamp(64px,8vh,104px);padding-top:34px}
.hero-reel{margin-top:44px}
/* ===== v5-feedback-theme ===== */
/* ============ v5.9 — feedback round ============ */
/* 1. hero: copy top, proof at viewport bottom, demo peeks */
.hero .wrap{display:flex;flex-direction:column;min-height:calc(100svh - 170px)}
.hero{justify-content:flex-start;padding-bottom:26px;height:100svh;max-height:100svh;min-height:0}
.hero h1{margin-top:clamp(8px,3vh,40px)}
.hero-proof{margin-top:auto;padding-top:18px;max-width:var(--shotw,1080px);margin-left:auto;margin-right:auto;width:100%}
.hero-proof .ht-txt{font-size:.9rem}
.hero-proof .ht-txt span{font-size:.82rem !important}
.hero-proof .hb img{height:20px}
.hero-proof .hb-t{font-size:.62rem}
.hero-proof .hero-badges{gap:26px}
.hero-reel{margin-top:22px;margin-bottom:4px}
.hero-demo{display:none}
/* keep everything up to the scroll cue within the first viewport:
the shot flexes to absorb only the space left over */
.hero{max-height:calc(100svh - 39px);height:calc(100svh - 39px);box-sizing:border-box}
.hero .wrap{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.hero-shot-wrap{flex:1 1 auto;min-height:0;display:flex;justify-content:center;margin:clamp(20px,3vh,40px) auto 0;width:100%}
.hero-shot-v5{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;margin:auto;border-radius:14px}
.hero-proof{margin-top:auto;padding-top:10px}
.hero .hero-cta{margin:clamp(24px,3.5vh,40px) 0 0}
.hero h1{margin-top:0}
.hero{padding-top:calc(24px + 72px)}
.scroll-cue{position:absolute;right:calc(50% - 50vw + 28px);bottom:22px;margin:0;font-size:24px;line-height:1;color:var(--ink);animation:cuebob 1.8s ease-in-out infinite}
@keyframes cuebob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}
/* 2a. word-by-word header reveal */
@supports (animation-timeline: view()){
.wsplit span{display:inline-block;animation:wordin linear both;animation-timeline:view();animation-range:entry 60% entry 85%}
.wsplit span:nth-of-type(1){animation-range:entry 30% entry 55%}
.wsplit span:nth-of-type(2){animation-range:entry 36% entry 61%}
.wsplit span:nth-of-type(3){animation-range:entry 42% entry 67%}
.wsplit span:nth-of-type(4){animation-range:entry 48% entry 73%}
.wsplit span:nth-of-type(5){animation-range:entry 54% entry 79%}
.wsplit span:nth-of-type(6){animation-range:entry 60% entry 85%}
}
@keyframes wordin{from{opacity:.12;transform:translateY(.35em)}to{opacity:1;transform:none}}
/* 2b. instagram avatar: drop the gradient backing */
.convo[data-ch=instagram] .convo-ava{background:transparent}
/* 2c. phones hold one size; thread anchors to the bottom like a real chat */
#chanPanels .convo-body{height:392px;min-height:0;overflow:hidden;justify-content:flex-end;padding:0 16px 2px 2px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42px);mask-image:linear-gradient(180deg,transparent 0,#000 42px)}
#chanPanels .callscreen{min-height:520px}
/* minimal chat chrome */
.cb{box-shadow:none}
.convo-foot{font-size:.8rem;color:var(--muted)}
/* 3d. AI features: staggered rise + hover life */
@supports (animation-timeline: view()){
#ai .ai-bucket{animation:rise linear both;animation-timeline:view()}
#ai .ai-bucket:nth-child(1){animation-range:entry 5% entry 45%}
#ai .ai-bucket:nth-child(2){animation-range:entry 15% entry 55%}
#ai .ai-bucket:nth-child(3){animation-range:entry 25% entry 65%}
}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
#ai .ai-bucket{transition:transform .25s ease,border-color .25s ease}
#ai .ai-bucket:hover{transform:translateY(-5px);border-color:#00e785}
#ai .fc-ico{transition:transform .25s ease}
#ai .ai-bucket:hover .fc-ico{transform:rotate(-6deg) scale(1.08)}
/* 4. guardrails: numbered ledger, no bento */
.guard-grid{display:block;counter-reset:guard;border-top:1px solid rgba(29,29,29,.14)}
.guard{display:grid;grid-template-columns:76px 52px minmax(200px,300px) 1fr;gap:0 30px;align-items:center;background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:30px 0;counter-increment:guard;transition:background .2s ease}
.guard::before{content:"0" counter(guard);font-weight:800;font-size:2.1rem;letter-spacing:-.03em;color:var(--ink)}
.guard:hover{background:linear-gradient(90deg,var(--w-green-light,#cafde8) 0,transparent 70%)}
.guard .g-ic{margin:0}
.guard h5{margin:0;font-size:1.15rem}
.guard p{margin:0;max-width:44em}
@media(max-width:900px){.guard{display:flex;flex-direction:column;align-items:flex-start;gap:10px}}
/* 5. integrations detail: ink console instead of white box */
.integ-detail{background:var(--ink);border:none;border-radius:18px;box-shadow:none;color:#e8e9ee;padding:24px 28px}
.integ-detail h4{color:#fff}
.integ-detail .hint{color:#a9adbb}
.integ-detail .uses span{background:rgba(255,255,255,.1);color:#cafde8}
.integ-detail .lico{filter:brightness(0) invert(1)}
/* 6. testimonials: portraits + tidy rating row */
.ts-ava{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;box-shadow:var(--shadow-sm)}
.ts-qcard .ts-ava{width:40px;height:40px}
.ts-brand{font-weight:800;color:var(--ink);letter-spacing:-.01em}
.rating-grid{grid-template-columns:repeat(auto-fit,minmax(172px,1fr));max-width:none;width:100%}
/* 7. final CTA: high-intent ink panel */
.cta-final{display:block;background:var(--ink);border-radius:36px;text-align:left;padding:clamp(64px,8vw,110px) clamp(32px,6vw,88px)}
.cta-kicker{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9be8c0;margin-bottom:26px}
.cta-final h2{color:#fff;font-size:clamp(2.8rem,4.8vw,4.4rem);letter-spacing:-.04em;line-height:1.03;max-width:15em;margin:0 0 24px;text-wrap:balance}
.cta-hl{color:var(--w-green,#00e785)}
.cta-sub{color:#b9bdc4;font-size:1.15rem;line-height:1.55;max-width:36em;margin:0 0 40px}
.cta-final .hero-cta{margin:0;justify-content:flex-start;justify-self:auto}
.cta-final .btn-primary{background:var(--w-green,#00e785);color:var(--ink)}
.cta-final .btn-primary:hover{background:#2bf29b}
.cta-final .btn-outline.cta-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.cta-final .btn-outline.cta-ghost:hover{border-color:#fff}
.cta-micro{margin-top:26px;color:#8b9097;font-size:.92rem}
.cta-micro a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.hero .wrap{min-height:0}.scroll-cue{display:none}}
/* ===== v5-guardconsole-theme ===== */
/* "You stay in control" — a working control surface, not a feature list */
.guard-console{max-width:880px;background:#fff;border:2px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 0 var(--w-blue,#4fc3ff);overflow:hidden}
.gc-head{display:flex;align-items:center;gap:12px;padding:15px 22px;border-bottom:2px solid var(--ink)}
.gc-dots{display:flex;gap:6px}
.gc-dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.gc-title{font-weight:800;font-size:.95rem;letter-spacing:-.01em}
.gc-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep,#105029)}
.gc-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--w-green,#00e785);animation:livepulse 2s ease-in-out infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(0,231,133,.5)}50%{box-shadow:0 0 0 6px rgba(0,231,133,0)}}
.gd-row{display:flex;align-items:center;gap:18px;padding:19px 22px;cursor:pointer;transition:background .15s ease}
.gd-row + .gd-row{border-top:1px solid var(--line)}
.gd-row:hover{background:#faf8f4}
.gd-row input{display:none}
.gd-switch{position:relative;flex:none;width:48px;height:28px;border-radius:999px;background:#ddd8cf;border:2px solid var(--ink);transition:background .18s ease}
.gd-switch i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-sizing:border-box;transition:transform .18s cubic-bezier(.2,.9,.3,1.3)}
.gd-row input:checked ~ .gd-switch{background:var(--w-green,#00e785)}
.gd-row input:checked ~ .gd-switch i{transform:translateX(20px)}
.gd-name{flex:1;min-width:0;font-weight:700;font-size:1.02rem;letter-spacing:-.012em}
.gd-name small{display:block;font-weight:500;font-size:.82rem;color:var(--muted);margin-top:2px}
.gd-state{flex:none;font-size:.76rem;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:7px 13px}
.st-on{background:var(--w-green-light,#cafde8);color:var(--green-deep,#105029);display:none}
.st-off{background:#f0ede6;color:var(--ink-soft)}
.gd-row input:checked ~ .st-on{display:inline-flex}
.gd-row input:checked ~ .st-off{display:none}
.gd-locked{cursor:default}
.gd-lock{flex:none;width:48px;display:flex;justify-content:center;color:var(--ink)}
.gd-lock svg{width:22px;height:22px}
.st-lock{background:var(--ink);color:#fff}
.gc-caption{margin:18px 2px 0;font-size:.95rem;color:var(--muted);font-weight:500}
@media(max-width:700px){.gd-row{flex-wrap:wrap}.gd-name{flex:1 1 100%;order:-1}}
/* ===== v5-integdemo-theme ===== */
/* integrations detail: open strip, no box — the tool acts inside a real exchange */
#integrations .integ-detail{background:transparent;border:none;border-radius:0;box-shadow:none;color:var(--ink);padding:36px 4px 0;margin-top:34px;border-top:1px solid rgba(29,29,29,.14);display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,400px);gap:18px 56px;align-items:center;min-height:150px}
#integrations .integ-detail h4{color:var(--ink);margin-bottom:12px}
#integrations .integ-detail .hint{color:var(--ink-soft);max-width:34em}
#integrations .integ-detail .lico{filter:none}
#integrations .integ-detail .uses{margin-top:16px}
#integrations .integ-detail .uses span{background:#fff;color:var(--ink);border:1px solid rgba(29,29,29,.14);font-weight:600}
.idemo{display:flex;flex-direction:column;gap:10px}
.idemo .ib{position:relative;max-width:88%;padding:12px 16px;border-radius:16px;font-size:.96rem;line-height:1.45;animation:bubblein2 .5s cubic-bezier(.22,.9,.26,1.08) both}
.idemo .ib.in{align-self:flex-start;background:#fff;border:1px solid rgba(29,29,29,.12);border-bottom-left-radius:5px}
.idemo .ib.out{align-self:flex-end;background:var(--w-green-light,#cafde8);color:#0b3d20;border-bottom-right-radius:5px;animation-delay:.4s}
.idemo .spark{position:absolute;top:-11px;right:-11px;width:28px;height:28px;border-radius:9px;background:var(--ink);display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.22)}
.idemo .spark img{width:16px;height:17px;display:block}
.idemo .isys{align-self:center;display:inline-flex;align-items:center;gap:8px;font-family:var(--wati-font-mono,'Roboto Mono',ui-monospace,monospace);font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;background:#fff;border:1px solid rgba(29,29,29,.12);border-radius:8px;padding:7px 12px;color:#5b6470;animation:metapop .46s .85s both}
.idemo .isys .lico{width:16px;height:16px}
.idemo .isys .lico img,.idemo .isys .lico svg{width:16px;height:16px}
.idemo .isys .lico .mono{width:16px;height:16px;font-size:.5rem}
@media(max-width:900px){#integrations .integ-detail{grid-template-columns:1fr}}
/* ===== v5-reallogos-theme ===== */
/* real customer + partner marks */
.reel-track{gap:76px}
.reel-logos{height:34px;width:auto;flex:none;display:block;opacity:.9}
.hb img{height:26px;width:auto;filter:none;opacity:1}
@media(max-width:900px){.reel-logos{height:26px}.hb img{height:22px}}
/* ===== v5-heropolish-theme ===== */
/* hero: staggered entrance + highlight sweep */
@keyframes heroin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero h1{animation:heroin .7s .05s cubic-bezier(.2,.8,.2,1) both}
.hero .lead{animation:heroin .7s .2s cubic-bezier(.2,.8,.2,1) both}
.hero .hero-cta{animation:heroin .7s .34s cubic-bezier(.2,.8,.2,1) both}
.hero .hero-proof{animation:heroin .8s .5s cubic-bezier(.2,.8,.2,1) both}
.hero .hero-reel,.hero .scroll-cue{animation-name:heroin;animation-duration:.8s;animation-delay:.62s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both}
.hero .scroll-cue{animation:heroin .8s .62s cubic-bezier(.2,.8,.2,1) both,cuebob 1.8s 1.6s ease-in-out infinite}
.hero h1 .hl{background-size:0% .52em;animation:hlgrow .8s .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hlgrow{to{background-size:100% .52em}}
@media(prefers-reduced-motion:reduce){.hero h1,.hero .lead,.hero .hero-cta,.hero .hero-proof,.hero .hero-reel,.hero .scroll-cue{animation:none}.hero h1 .hl{background-size:100% .52em;animation:none}}
/* ===== v5-chanclean-theme ===== */
/* channels: calmer panel — the rail already names the channel */
.chan-panel .chan-logo{display:none}
.chan-panel h3{font-size:clamp(1.7rem,2.2vw,2.2rem);letter-spacing:-.03em;margin-bottom:4px}
.chan-panel .tagline{margin:2px 0 16px}
/* longer heading: let it wrap within its column */
.section-head:has(.wsplit){grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr)}
.wsplit{white-space:normal;text-wrap:balance}
@media(max-width:640px){.wsplit{font-size:clamp(1.45rem,7vw,2.2rem)}}
@media(min-width:901px){
.chan-panel.active{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.chan-panel .chan-stage{max-width:min(430px,100%)}
}
/* ===== v5-control-theme ===== */
/* "You stay in control": your written rules on the left, one of them firing in a real thread on the right */
.control-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,5vw,80px);align-items:center}
.control-rules{display:flex;flex-direction:column}
.cr-row{display:flex;align-items:center;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.cr-row:first-child{border-top:1px solid rgba(29,29,29,.14)}
.cr-num{font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--ink);flex:none;width:44px}
.cr-txt{flex:1;min-width:0}
.cr-txt b{display:block;font-size:1.05rem;letter-spacing:-.015em}
.cr-txt small{display:block;color:var(--muted);font-size:.85rem;margin-top:3px}
.cr-on{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--w-green-light,#cafde8);color:var(--green-deep,#105029);border-radius:999px;padding:6px 13px}
.cr-note{margin:20px 0 0;font-size:.92rem;color:var(--muted);font-weight:600}
.control-demo{background:transparent;border:none;padding:0;justify-content:flex-start}
.control-demo .chan-stage{max-width:440px;width:100%}
.control-demo .convo-body{min-height:300px}
@media(max-width:900px){.control-grid{display:block}.control-demo{margin-top:36px}.cr-note{display:none}}
/* ===== v5-integia-theme ===== */
/* integration detail: clear IA — identity, data flow, uses, then the live demo */
.ii-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.ii-head .lico{width:40px;height:40px;background:#fff;border:1px solid rgba(29,29,29,.12);border-radius:12px;display:grid;place-items:center}
.ii-head .lico img,.ii-head .lico svg{width:22px;height:22px}
.ii-head h4{margin:0 !important;line-height:1.15}
.ii-cat{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ii-spec{margin:18px 0 0;border-top:1px solid rgba(29,29,29,.14)}
.ii-row{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(29,29,29,.14)}
.ii-dir{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:5px 11px;text-align:center}
.ii-in{background:var(--w-green-light,#cafde8);color:var(--green-deep,#105029)}
.ii-out{background:var(--ink);color:#fff}
.ii-what{font-size:.94rem;font-weight:600;color:var(--ink)}
.ii-uses-label{margin-top:18px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#integrations .integ-detail .uses{margin-top:10px}
.idemo-label{align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
/* ===== v5-cohesion-theme ===== */
/* ============ v5.10 — cohesion pass ============ */
/* B. one type scale: display (hero/scenes), section (h2/h3), label (h4/h5/kickers) */
h3{font-size:clamp(1.7rem,2.2vw,2.2rem);letter-spacing:-.03em;line-height:1.15}
h4{font-size:1.15rem;letter-spacing:-.018em}
h5{font-size:1.05rem;letter-spacing:-.015em}
.astra-head h3{font-size:clamp(1.7rem,2.2vw,2.2rem)}
.intel h4,.integ-detail h4{font-size:1.15rem}
/* D. scale band: light stat strip, dark drama reserved for AI + closer */
.scale{background:transparent;border-radius:0;padding:0;color:var(--ink)}
.scale h2{color:var(--ink)}
.scale .lead{color:var(--ink-soft)}
.scale-stats{border-top:1px solid rgba(29,29,29,.14);padding-top:36px;margin-top:48px}
.scale-stat{padding:0}
.scale-stat .num{color:var(--ink);font-size:clamp(2.5rem,3.2vw,3.3rem);font-weight:800;letter-spacing:-.03em}
.scale-stat .lbl{color:var(--muted);font-weight:600}
/* F. chat mock consistency */
.cb{border-radius:16px}
.rcs-card{border-radius:14px;box-shadow:none;border:1px solid rgba(29,29,29,.12)}
#chanPanels .callscreen{border-radius:38px;background:linear-gradient(170deg,#12281c,#0b1a12);padding:60px 26px 40px}
/* G. micro-CTA */
.micro-cta{margin:52px 0 0;font-size:1.05rem;font-weight:700}
.micro-cta a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--w-green,#00e785);padding-bottom:3px;transition:border-color .15s ease,color .15s ease}
.micro-cta a:hover{color:var(--green-deep,#105029);border-color:var(--green-deep,#105029)}
/* H. short-viewport guard: relax pinned stages + hero fill */
@media(max-height:720px){
.hero{min-height:0}
.hero .wrap{min-height:0}
.mss-scrolly .uc-track{height:auto;view-timeline:none}
.mss-scrolly .uc-stage{position:static;height:auto;min-height:0;display:flex;flex-direction:column;gap:30px}
.mss-scrolly .uc-stage > .mss-block{opacity:1 !important;animation:none !important;pointer-events:auto;grid-area:auto}
}
/* ===== v5-story-theme ===== */
/* chapter spine + interaction consistency */
.eyebrow{font-variant-numeric:tabular-nums}
.btn:focus-visible,.chan-tab:focus-visible,.vt-btn:focus-visible,.itile:focus-visible,a:focus-visible{outline:2.5px solid var(--w-green,#00e785);outline-offset:3px;border-radius:8px}
.btn:focus-visible{border-radius:999px}
/* consistent card hover language everywhere */
.rating-card{transition:transform .18s ease,box-shadow .18s ease}
.rating-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.itile{scroll-margin-top:120px}
/* ===== v5-crit1-theme ===== */
/* belt-and-braces: brand-palette washes never apply in v5 */
html[data-palette] [data-pal]{background:transparent}
/* testimonial spotlight: kill the dead void, let the quote lead */
.ts-spot{padding:40px 44px 36px}
.ts-stag{margin-bottom:0}
.ts-spot blockquote{margin:26px 0 34px;font-size:clamp(1.6rem,2.3vw,2.15rem)}
/* channels: copy centers against the phone; micro-CTA tucks closer */
.chan-panel.active > div:first-child{align-self:center}
.micro-cta{margin-top:36px}
/* AI panel: no centered island */
#ai .astra-head{text-align:left;margin:0 0 30px;max-width:none}
#ai .astra-head h3{margin-bottom:6px}
/* ratings: five across, no orphan */
.rating-grid{grid-template-columns:repeat(auto-fit,minmax(146px,1fr))}
/* type band: breathing room between the two lines */
.tb-line{line-height:1.14}
.tb-line + .tb-line{margin-top:4px}
/* chat bodies: tighter frames so static moments don't read empty */
.mss-scrolly .convo-body{height:322px}
.control-demo .convo-body{min-height:0;height:300px;overflow:hidden;justify-content:flex-end;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 36px);mask-image:linear-gradient(180deg,transparent 0,#000 36px)}
#chanPanels .convo-body{height:352px}
/* hero atmosphere: let the wash actually read */
.hero{background:linear-gradient(160deg,#f6edff 0%,#fdf0e9 52%,#f7f2e7 100%)}
.bg-glow::before{background:radial-gradient(closest-side,rgba(249,180,255,.5),rgba(79,195,255,.16) 55%,transparent 74%)}
/* spotlight quote carries the card */
.ts-spot blockquote{font-size:clamp(1.7rem,2.5vw,2.35rem);line-height:1.22}
/* ===== v5-crit2-theme ===== */
/* spotlight: tag top, quote centered, attribution anchored — no dead void */
.ts-spot blockquote{margin:auto 0}
.ts-spot .ts-stag{margin-bottom:18px}
.ts-spot-foot{margin-top:28px}
/* tighten the channels → use-cases seam */
section:has(.micro-cta){padding-bottom:72px}
.chx-cta{display:flex;justify-content:center;margin-top:40px}
.chx-art{display:flex;justify-content:center;margin-top:48px}
.chx-art img{width:min(100%,520px);height:auto;display:block}
.cs-card{display:flex;align-items:center;gap:14px;margin-top:26px;max-width:440px;padding:12px 14px 12px 12px;background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 0 var(--ink);color:var(--ink);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.cs-card:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 0 var(--ink)}
.cs-card:active{transform:translate(5px,5px);box-shadow:0 0 0 0 var(--ink)}
.cs-logo{width:52px;height:52px;flex:none;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:1rem;letter-spacing:-.02em;color:var(--ink);background:repeating-linear-gradient(135deg,#f1f2f1 0 6px,#e7e9e7 6px 12px);border:1px dashed #b9bdb9}
.cs-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cs-txt small{font-family:var(--wati-font-mono,"Roboto Mono",ui-monospace,monospace);font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cs-txt b{font-size:1rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.cs-go{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--w-green,#00e785);color:var(--ink);transition:transform .15s ease}
.cs-go svg{width:16px;height:16px}
.cs-card:hover .cs-go{transform:translateX(3px)}
/* ===== v5-integsimple-theme ===== */
/* integration detail, simplified: identity → one line → in/out. Uses chips retired (the demo shows the use). */
.ii-flow{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.ii-flow .ii-row{display:flex;gap:14px;align-items:baseline;padding:0;border:none;grid-template-columns:none}
.ii-flow .ii-dir{flex:none;width:64px;text-align:left;padding:4px 0;border-radius:0;background:transparent}
.ii-flow .ii-in{color:var(--green-deep,#105029)}
.ii-flow .ii-out{color:var(--ink);background:transparent}
.ii-flow .ii-what{font-weight:600;font-size:.95rem;color:var(--ink-soft)}
#integrations .integ-detail{align-items:center;min-height:0;padding-top:30px}
#integrations .integ-detail .hint{margin:0;max-width:30em}
/* ===== v5-manychat-theme ===== */
/* people proof band */
.people-band{padding:clamp(56px,7vw,90px) 0;background:#fff}
.pb-label{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin-bottom:34px}
.pb-track{display:flex;gap:18px;width:max-content;animation:tb-run 55s linear infinite;padding:4px 0}
.people-band .reel-mask:hover .pb-track{animation-play-state:paused}
.pb-card{width:330px;flex:none;background:#fff;border:1px solid rgba(29,29,29,.12);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,box-shadow .18s ease}
.pb-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pb-top{display:flex;align-items:center;gap:12px}
.pb-top img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.pb-top b{display:block;font-size:.95rem;letter-spacing:-.01em}
.pb-top small{display:block;color:var(--muted);font-size:.78rem;margin-top:1px}
.pb-metric{margin-left:auto;flex:none;font-size:.72rem;font-weight:800;background:var(--w-green-light,#cafde8);color:var(--green-deep,#105029);border-radius:999px;padding:6px 11px;white-space:nowrap}
.pb-card p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
/* before / after */
.ba-wrap{display:grid;gap:12px}
.ba{border-radius:16px;padding:16px 20px}
.ba-k{display:block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
.ba ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ba li{font-size:.92rem;font-weight:600;line-height:1.4;padding-left:20px;position:relative}
.ba-before{background:#fff;border:1px solid rgba(29,29,29,.12)}
.ba-before .ba-k{color:var(--muted)}
.ba-before li{color:var(--ink-soft)}
.ba-before li::before{content:"✕";position:absolute;left:0;color:#c9c2b4;font-weight:800}
.ba-after{background:var(--ink);color:#fff}
.ba-after .ba-k{color:#9be8c0}
.ba-after li::before{content:"✓";position:absolute;left:0;color:var(--w-green,#00e785);font-weight:800}
/* FAQ */
.faq{max-width:none}
.faq details{border-bottom:1px solid rgba(29,29,29,.14)}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:1.12rem;letter-spacing:-.015em;padding:22px 44px 22px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:600;color:var(--muted);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{margin:0;padding:0 0 24px;color:var(--ink-soft);max-width:56em;line-height:1.6}
/* ===== block ===== */
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.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("../fonts/inter-cyrillic.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("../fonts/inter-greek-ext.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("../fonts/inter-greek.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("../fonts/inter-vietnamese.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("../fonts/inter-latin-ext.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("../fonts/inter-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.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("../fonts/inter-cyrillic.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("../fonts/inter-greek-ext.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("../fonts/inter-greek.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("../fonts/inter-vietnamese.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("../fonts/inter-latin-ext.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("../fonts/inter-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.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("../fonts/inter-cyrillic.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("../fonts/inter-greek-ext.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("../fonts/inter-greek.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("../fonts/inter-vietnamese.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("../fonts/inter-latin-ext.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("../fonts/inter-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inter-cyrillic-ext.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("../fonts/inter-cyrillic.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("../fonts/inter-greek-ext.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("../fonts/inter-greek.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("../fonts/inter-vietnamese.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("../fonts/inter-latin-ext.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("../fonts/inter-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== v5-frame-2a ===== */
/* Inter for product UI / visualisations; DM Sans stays for page content */
:root{--wati-font-product:'Inter',system-ui,-apple-system,sans-serif}
.callscreen,.idemo,.uc-tag,.pb-thread,.pb-bub,.pb-sys,.outcomes{font-family:var(--wati-font-product)}
/* ===== 2a: black filled phone — true silhouette, no earpiece / home bar.
2b (outlined) available via html[data-frame="outlined"] toggle. ===== */
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage){background:var(--stg-bg,#0c100e);border:3px solid var(--stg-bdc,transparent);border-radius:44px;padding:30px 20px;max-width:352px;box-shadow:var(--stg-sh,0 44px 90px -38px rgba(0,0,0,.55))}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage)::before,
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage)::after{display:none}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .convo-ti{color:var(--stg-ti,#f2f6f3)}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .convo-ti small{color:var(--stg-sub,#6fe8ae)}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .cb.in{background:var(--stg-in,#1c2521);border:1px solid var(--stg-inbd,transparent);color:var(--stg-infg,#e8efe9);box-shadow:none}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .convo[data-ch=whatsapp]{--out-bg:var(--stg-out,#0f5138);--out-fg:var(--stg-outfg,#d9ffe9)}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .convo[data-ch=tiktok]{--out-bg:var(--stg-tt,#242a28)}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .cap{color:var(--stg-capfg,#6fe8ae);background:var(--stg-capbg,rgba(0,231,133,.12))}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .cb .spark{background:var(--stg-spark,#00e785)}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .cb .spark img{filter:var(--stg-sparkimg,brightness(0))}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .ch-badge{border-color:var(--stg-bg,#0c100e)}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .sys-event{background:var(--stg-sysbg,#1c2521);border-color:var(--stg-sysbd,#2a3630);color:var(--stg-sysfg,#9fb0a7)}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .ai-note{background:var(--stg-capbg,rgba(0,231,133,.12));color:var(--stg-capfg,#6fe8ae)}
/* taller, phone-like proportions; conversation hangs from the bottom */
#chanPanels .convo-body{min-height:460px;justify-content:flex-end}
@media(min-width:901px){.mss-scrolly .convo-body{min-height:430px}}
/* call screen sits as the screen inside the black shell */
#chanPanels .chan-stage:has(.callscreen){padding:12px}
#chanPanels .callscreen{border:none;box-shadow:none;border-radius:34px;min-height:520px}
/* 2b: outlined variant */
html[data-frame="outlined"] :is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage){--stg-bg:#fff;--stg-bdc:#101413;--stg-sh:0 34px 70px -34px rgba(60,40,90,.3);--stg-ti:var(--ink);--stg-sub:#8a8a84;--stg-in:#fff;--stg-inbd:var(--line);--stg-infg:var(--ink);--stg-out:#d9fdd3;--stg-outfg:#0b3d20;--stg-tt:#010101;--stg-capfg:#0b5c33;--stg-capbg:#e3f6eb;--stg-spark:var(--ink);--stg-sparkimg:none;--stg-sysbg:#eceef0;--stg-sysbd:#e1e3e4;--stg-sysfg:#5b6470}
/* app-register touches: round avatars, header divider, input bar — kept minimal */
.convo-ava .dp{border-radius:50%}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .convo-head{border-bottom:1px solid var(--stg-div,rgba(255,255,255,.08));padding-bottom:14px}
:is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage) .convo::after{content:"Message";display:block;margin-top:18px;background:var(--stg-in,#1c2521);color:var(--stg-hint,#7d8a83);font-family:var(--wati-font-product);font-size:.85rem;padding:11px 16px;border-radius:999px}
html[data-frame="outlined"] :is(#chanPanels .chan-stage:not(:has(.convo[data-ch="web"])),.mss-scrolly .chan-stage){--stg-div:#eee9e2;--stg-hint:#9a917f;--stg-in:#f6f5f2}
/* nav menu centered between logo and CTAs */
.nav-links{margin-inline:auto}
.nav-cta{margin-left:0}
/* ===== hero personality: scoped WebGL pastel shader + parallax channel tiles ===== */
.hero{position:relative}
.hero-shader{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.hero-chips{position:absolute;inset:0;pointer-events:none;display:none}
@media(min-width:1100px){.hero-chips{display:block}}
.hchip{position:absolute;display:grid;place-items:center;border-radius:24%;box-shadow:0 22px 44px -18px rgba(27,29,28,.4);filter:blur(2.2px);animation:chipfloat 7s ease-in-out infinite;transform:translate3d(calc(var(--px,0)*var(--d,10)*1px),calc(var(--py,0)*var(--d,10)*1px),0) rotate(var(--rot,0deg))}
.hchip img{width:52%;height:52%;filter:brightness(0) invert(1)}
.hchip.far{filter:blur(4px);opacity:.6}
@keyframes chipfloat{0%,100%{margin-top:0}50%{margin-top:-14px}}
/* hero product shot: centered above the proof band, shrinks to keep the fold */
.hero-shot-wrap{display:block;position:relative;flex:1 1 auto;min-height:160px;width:100%;margin:clamp(20px,3vh,44px) auto 0;animation:heroin .9s .45s cubic-bezier(.2,.8,.2,1) both}
.hero-shot-v5{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:14px;border:1px solid rgba(29,29,28,.1);box-shadow:0 2px 6px rgba(27,29,28,.08),0 60px 120px -40px rgba(27,29,28,.4);background:#fff}
/* ===== v5-proofbubbles-theme ===== */
/* proof as chat: incoming bubbles with tails + mono system chips — Wati's own vocabulary */
.pb-sub{color:var(--ink-soft);margin:10px 0 36px;max-width:44em;font-size:1.05rem}
.pb-label{margin-bottom:0}
.pb-item{width:330px;flex:none;display:flex;flex-direction:column;gap:10px}
.pb-bub{background:#fff;border:1px solid rgba(29,29,29,.12);border-radius:18px;border-bottom-left-radius:5px;padding:16px 18px;font-size:1rem;line-height:1.5;color:var(--ink);font-weight:500}
.pb-meta{display:flex;align-items:center;gap:10px;padding-left:4px}
.pb-meta img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.pb-meta b{display:block;font-size:.86rem;letter-spacing:-.01em}
.pb-meta small{display:block;color:var(--muted);font-size:.75rem}
.pb-sys{align-self:flex-start;margin-left:4px;font-family:var(--wati-font-mono,'Roboto Mono',ui-monospace,monospace);font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--w-green-light,#cafde8);color:var(--green-deep,#105029);border-radius:8px;padding:6px 11px}
.pb-item:nth-child(even) .pb-bub{border-radius:18px;border-bottom-right-radius:5px;background:var(--w-green-light,#cafde8);border-color:transparent;color:#0b3d20}
.pb-track{align-items:flex-start}
/* retire the face-card styles */
.pb-card{display:none}
/* ===== v7-hero-air ===== */
/* ============================================================
v7 — breathable hero: kill the 100svh cram, the shader and the
floating chips; headline + lead + CTA get the whole fold, the
product shot gets its own full-width moment, proof is one slim
hairline row, and the logo reel moves below the guided demo.
============================================================ */
.hero{height:auto;max-height:none;min-height:0;display:block;padding:clamp(96px,14vh,170px) 0 0;box-sizing:content-box}
.hero .wrap{display:block;min-height:0}
.hero-shader,.hero-chips,.scroll-cue{display:none!important}
.bg-glow::before{opacity:.45}
.bg-glow::after{display:none}
.hero h1{margin-top:0;max-width:19ch;font-size:clamp(2.7rem,4.8vw,4.2rem);letter-spacing:-.03em}
.hero .lead{max-width:52ch;margin:32px 0 0;font-size:1.22rem}
.hero .hero-cta{margin:46px 0 0}
.cta-note{margin:20px 0 0;font-size:.92rem;color:var(--muted)}
/* proof: one quiet hairline row between CTAs and the shot */
.hero-proof{max-width:none;margin:clamp(48px,7vh,80px) 0 0;padding:26px 0 0;border-top:1px solid rgba(29,29,28,.09)}
.hero-proof .ht-txt{font-size:.98rem}
.hero-proof .hb img{height:22px}
.hero-proof .hb-t{font-size:.66rem}
/* logo reel: above the fold, right under the proof row */
.hero .hero-reel{margin:34px auto 0;max-width:none}
/* product shot closes the hero */
.hero-shot-wrap{position:static;flex:none;min-height:0;width:100%;margin:clamp(56px,8vh,96px) auto 0;padding-bottom:clamp(72px,9vh,110px)}
.hero-demo{display:none}.hero-shot-v5{position:static;inset:auto;width:100%;max-width:100%;max-height:none;height:auto;display:block;border-radius:16px;border:1px solid rgba(29,29,28,.1);box-shadow:0 2px 6px rgba(27,29,28,.08),0 40px 80px -32px rgba(27,29,28,.22)}
@media(max-width:900px){.hero{padding-top:88px}}
/* ===== v8-hero-flow ===== */
/* fold: hero fills the viewport cleanly — copy+chat centered, proof pinned at fold bottom */
.hero{padding:clamp(72px,10vh,120px) 0 0}
.hero .wrap{display:flex;flex-direction:column;min-height:calc(100svh - 210px)}
.hero-split{flex:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(32px,4.5vw,72px);align-items:center;text-align:left;padding:clamp(16px,3vh,40px) 0}
.hero-proof{margin-top:clamp(20px,3vh,40px)}
.hero .hero-reel{margin:24px auto clamp(20px,3.5vh,40px)}
.hero-split h1{font-size:clamp(2.7rem,4.3vw,4rem);max-width:none;margin:0}
.hero-split .lead{font-size:1.12rem}
.hero-split .hero-cta{justify-content:flex-start;margin-top:38px}
/* type + layout consistency: h1 tops the scale, closer h2 matches section h2 */
.cta-final h2{font-size:clamp(2.3rem,4vw,3.55rem)}
/* scale: 6 stats in a clean 3×2 grid, no hanging item */
.scale-stats{grid-template-columns:repeat(3,1fr);gap:36px 24px}
@media(max-width:900px){.scale-stats{grid-template-columns:repeat(2,1fr)}}
.hf-chat-wrap{position:relative}
.hf-chat-wrap::before{content:"";position:absolute;inset:-14% -12%;background:radial-gradient(60% 60% at 50% 45%,rgba(0,231,133,.18),transparent 70%);z-index:0;pointer-events:none}
.hf-chat{position:relative;z-index:1;font-family:var(--wati-font-product,'Inter',system-ui,sans-serif);display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:440px}
.hf-item{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.hf-item.on{opacity:1;transform:none}
.hf-item.gone{opacity:0;max-height:0 !important;margin-top:-14px;overflow:hidden;transition:opacity .3s,max-height .35s,margin .35s}
.hf-typing{max-height:60px}
.hf-row{display:flex;gap:10px;align-items:flex-end;max-width:92%}
.hf-in{align-self:flex-start}
.hf-out{align-self:flex-end;flex-direction:row-reverse}
.hf-ava{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.68rem;color:#fff;box-shadow:0 4px 10px -3px rgba(27,29,28,.3)}
.hf-ava.cu{background:#8a6f5c}
.hf-ava.ai{background:var(--ink)}
.hf-ava.ai img{width:14px;height:14px}
.hf-ava.hu{background:var(--green-deep)}
.hf-b{padding:13px 18px;border-radius:19px;font-size:.98rem;line-height:1.5;text-wrap:pretty}
.hf-b .nowrap{white-space:nowrap}
.hf-in .hf-b{background:#fff;border-bottom-left-radius:6px;box-shadow:0 2px 4px rgba(27,29,28,.06),0 18px 40px -18px rgba(27,29,28,.28)}
.hf-out .hf-b{background:#dcfce9;border-bottom-right-radius:6px;box-shadow:0 2px 4px rgba(27,29,28,.05),0 18px 40px -18px rgba(0,120,70,.3)}
.hf-human .hf-b{background:var(--ink);color:#fff;box-shadow:0 2px 4px rgba(27,29,28,.1),0 20px 44px -18px rgba(27,29,28,.5)}
.hf-meta{font-size:.7rem;color:var(--muted);margin-top:5px}
.hf-out .hf-meta{text-align:right}
.hf-chip{align-self:center;display:flex;gap:7px;align-items:center;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--ink-soft);background:#fff;border-radius:999px;padding:7px 15px;box-shadow:0 2px 4px rgba(27,29,28,.06),0 12px 28px -14px rgba(27,29,28,.3);font-family:var(--wati-font-product,'Inter',system-ui,sans-serif)}
.hf-chip i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(0,231,133,.25);font-style:normal}
.hf-typing .hf-b{display:flex;gap:4px;align-items:center;padding:13px 15px}
.hf-typing .hf-b i{width:6px;height:6px;border-radius:50%;background:#9aa09b;animation:hfty 1.1s infinite}
.hf-typing .hf-b i:nth-child(2){animation-delay:.18s}
.hf-typing .hf-b i:nth-child(3){animation-delay:.36s}
@keyframes hfty{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:44px}}
.rot-word{display:inline-block;white-space:nowrap;animation:rotin .5s cubic-bezier(.2,.8,.2,1) both}
.hero-split h1 .h1-line{display:block;white-space:nowrap}
/* headline always fits its own column: cap font vs container width (longest line ~9.5em wide) */
.hero-copy{container-type:inline-size;min-width:0}
.hero-split h1{font-size:min(clamp(2.7rem,4.3vw,4rem),9.6cqw)}
@keyframes rotin{0%{transform:translateY(.55em);opacity:0;filter:blur(3px)}100%{transform:none;opacity:1;filter:none}}
@media(prefers-reduced-motion:reduce){.rot-word{animation:none}}
/* v10: hero fills the fold exactly; chat column scaled down so the copy breathes */
.hero{display:flex;flex-direction:column;min-height:calc(100svh - 110px);box-sizing:border-box}
.hero .wrap{flex:1;display:flex;flex-direction:column;min-height:calc(100svh - 210px)}
.hero-split{flex:1;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.hf-chat{min-height:340px;gap:11px;max-width:430px;margin:0 auto}
.hf-b{padding:10px 15px;border-radius:16px;font-size:.88rem}
.hf-ava{width:24px;height:24px;font-size:.6rem}
.hf-ava.ai img{width:12px;height:12px}
.hf-meta{margin-top:4px}
.hf-meta,.hf-chip{font-family:var(--wati-font-mono,"Roboto Mono",ui-monospace,monospace);font-weight:600;font-size:.6rem;text-transform:uppercase;letter-spacing:.07em}
.hf-chip{font-size:.68rem;padding:6px 13px}
@media(max-width:900px){.hero{min-height:0}.hf-chat{max-width:none}}
.hf-item.gone{margin-top:-11px}
.hf-voice{display:flex;align-items:center;gap:10px;min-width:210px}
.hf-play{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff}
.hf-play svg{width:12px;height:12px;margin-left:2px}
.hf-out .hf-play{background:var(--green-deep)}
.hf-wave{flex:1;display:flex;align-items:center;gap:2px;height:22px}
.hf-wave i{flex:1;min-width:2px;border-radius:2px;background:#b9bdb9;transform-origin:center}
.hf-out .hf-wave i{background:#7fcfa4}
.hf-item.on .hf-wave i{animation:hfwave 1.2s ease-in-out infinite}
.hf-wave i:nth-child(3n){animation-delay:.15s}.hf-wave i:nth-child(3n+1){animation-delay:.3s}
@keyframes hfwave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
.hf-dur{font-family:var(--wati-font-mono,"Roboto Mono",ui-monospace,monospace);font-size:.7rem;font-weight:600;color:var(--muted)}
.hf-call{align-self:center;display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:10px 18px 10px 10px;box-shadow:0 2px 4px rgba(27,29,28,.06),0 18px 40px -18px rgba(27,29,28,.28);font-size:.86rem;max-height:80px}
.hf-call b{display:block;font-weight:700}
.hf-call small{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
.hf-call-ic{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--green);color:var(--ink)}
.hf-call-ic svg{width:16px;height:16px}
.hf-ring.on .hf-call-ic{animation:hfring 1s ease-out infinite}
@keyframes hfring{0%{box-shadow:0 0 0 0 rgba(0,231,133,.55)}100%{box-shadow:0 0 0 12px rgba(0,231,133,0)}}
.hf-chat{height:468px;min-height:0;overflow:hidden;justify-content:flex-end;padding:24px 32px 36px;margin:-24px auto -36px;box-sizing:border-box;max-width:494px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px);mask-image:linear-gradient(180deg,transparent 0,#000 24px)}
.hf-chip{white-space:nowrap}
.hf-item:not(.on){max-height:0 !important;margin-top:-11px;overflow:hidden;padding-top:0 !important;padding-bottom:0 !important;box-shadow:none !important}
.hf-item{transform:translateY(22px) scale(.98);transform-origin:50% 100%;transition:opacity .3s ease,transform .3s ease,max-height .4s cubic-bezier(.22,1,.36,1),margin .4s cubic-bezier(.22,1,.36,1)}
.hf-item.on{max-height:220px;opacity:1;transform:none;transition:max-height .4s cubic-bezier(.22,1,.36,1),margin .4s cubic-bezier(.22,1,.36,1),opacity .45s ease .12s,transform .55s cubic-bezier(.22,1,.36,1) .12s}
.hf-item.gone{transform:translateY(-12px) scale(.98)}
@media(prefers-reduced-motion:reduce){.hf-item.on .hf-wave i,.hf-ring.on .hf-call-ic{animation:none}}
/* ===== block ===== */
.chx-hub{position:relative;max-width:980px;aspect-ratio:2/1;margin:56px auto 0}
.chx-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chx-lines line{stroke:#b9d9c7;stroke-width:.25;stroke-dasharray:1 1.2;animation:chxdash 2.4s linear infinite}
@keyframes chxdash{to{stroke-dashoffset:-4.4}}
.chx-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2}
.chx-core .chan-logo{width:112px;height:112px;border-radius:30px;margin:0;box-shadow:7px 7px 0 0 var(--ink)}
.chx-core .chan-logo img{width:56px;height:56px}
.chx-core b{font-size:1.05rem;letter-spacing:-.01em}
.chx-core small{font-size:.8rem;color:var(--muted);margin-top:-8px}
.chx-core::before{content:"";position:absolute;left:50%;top:56px;width:112px;height:112px;border-radius:30px;transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(37,211,102,.35);animation:chxpulse 2.6s ease-out infinite;z-index:-1}
@keyframes chxpulse{to{box-shadow:0 0 0 34px rgba(37,211,102,0)}}
.chx-sat{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:7px 18px 7px 7px;font-weight:700;font-size:.92rem;white-space:nowrap;box-shadow:0 2px 4px rgba(27,29,28,.06),0 18px 40px -18px rgba(27,29,28,.28);z-index:2;animation:chxfloat 5s ease-in-out infinite}
.chx-sat .chan-logo{width:36px;height:36px;border-radius:50%;margin:0;box-shadow:none}
.chx-sat .chan-logo img,.chx-sat .chan-logo svg{width:18px;height:18px}
@keyframes chxfloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(max-width:760px){.chx-hub{aspect-ratio:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.chx-lines{display:none}.chx-core{position:static;transform:none;width:100%;margin-bottom:18px}.chx-sat{position:static;transform:none}}
@media(prefers-reduced-motion:reduce){.chx-lines line,.chx-core::before,.chx-sat{animation:none}}
.chx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.chx-grid .section-head{display:block;margin:0}
.chx-grid .section-head .eyebrow{margin-bottom:22px}
.chx-grid .section-head .lead{margin-top:22px}
.chx-grid .chx-cta{justify-content:flex-start;margin-top:36px}
.chx-art{display:flex;justify-content:center;margin:0}
.hb-svg{width:min(100%,520px);height:auto;display:block;overflow:visible}
.hb-ring{transform-box:fill-box;transform-origin:center;animation:hbspin 40s linear infinite}
@keyframes hbspin{to{transform:rotate(360deg)}}
.hb-z1,.hb-z2,.hb-z3{transform-box:fill-box;transform-origin:center;animation:hbzio 3.2s ease-in-out infinite}
.hb-z2{animation-delay:.4s}.hb-z3{animation-delay:.8s}
@keyframes hbzio{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
.hb-tb,.hb-bt,.hb-lr,.hb-rl{animation-duration:3.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.hb-tb{animation-name:hbtb}.hb-bt{animation-name:hbbt}.hb-lr{animation-name:hblr}.hb-rl{animation-name:hbrl}
@keyframes hbtb{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
@keyframes hbbt{0%,100%{transform:translateY(7px)}50%{transform:translateY(-7px)}}
@keyframes hblr{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
@keyframes hbrl{0%,100%{transform:translateX(7px)}50%{transform:translateX(-7px)}}
@media(max-width:900px){.chx-grid{grid-template-columns:1fr}.chx-art{order:2}}
@media(prefers-reduced-motion:reduce){.hb-ring,.hb-z1,.hb-z2,.hb-z3,.hb-tb,.hb-bt,.hb-lr,.hb-rl{animation:none}}
/* ===== v12-port ===== */
.jx-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.jx-head h2,.ix h2{margin:0;letter-spacing:-.035em;text-wrap:balance}
.jx-head h2{max-width:14em}.jx-mute{color:#8a8d8b}
.jx-head p{margin:0;font-size:1.12rem;line-height:1.55;color:var(--ink-soft);max-width:26em}
.jx-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:24px}
.jx-axis{display:flex;gap:4px;background:#fff;border:1px solid #e6e2dc;border-radius:999px;padding:4px}
.jx-axis button,.jx-tabs button{font-family:inherit;font-size:.9rem;font-weight:700;padding:10px 18px;min-height:44px;border-radius:999px;cursor:pointer;color:#1d1d1d;transition:background .18s,border-color .18s,color .18s}
.jx-axis button{border:none;background:transparent}.jx-axis button.on{background:#1d1d1d;color:#fff}
.jx-tabs{display:flex;flex-wrap:wrap;gap:8px}.jx-tabs button{background:transparent;border:1.5px solid #d6d3cc}.jx-tabs button.on{background:#fff;border-color:#1d1d1d}
.jx-card{background:#fff;border:1px solid #e6e2dc;border-radius:32px;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:40px;align-items:center}
.jx-copy{display:flex;flex-direction:column;gap:20px}
.jx-copy h3{margin:0;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.jx-copy>p{margin:0;font-size:1.05rem;line-height:1.55;color:var(--ink-soft)}
.jx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.jx-stats div{background:#f4f2ef;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:4px}.jx-stats b{font-size:1.75rem;letter-spacing:-.03em}.jx-stats small{font-size:.82rem;color:var(--ink-soft);line-height:1.3}
.jx-cs{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 16px;border:1px solid #e6e2dc;border-radius:16px;background:#fbfaf8;color:#1d1d1d;text-decoration:none;transition:border-color .18s,transform .18s}
.jx-go{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;padding:6px 6px 6px 20px;border-radius:999px;background:#1d1d1d;color:#fff;font-weight:700;font-size:.98rem;text-decoration:none;transition:transform .15s,box-shadow .15s}.jx-go i{font-style:normal;width:34px;height:34px;border-radius:50%;background:#00e785;color:#1d1d1d;display:grid;place-items:center;font-size:1rem;transition:transform .2s}.jx-go:hover,.jx-cs:hover{text-decoration:none}
.jx-go:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(29,29,29,.6)}.jx-go:hover i{transform:rotate(-45deg)}
.jx-cs:hover{border-color:#1d1d1d;transform:translateY(-2px);color:#1d1d1d}
.jx-cs span{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.jx-k{font-family:var(--wati-font-mono,"Roboto Mono",ui-monospace,monospace);font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6b6f6d}
.jx-arr{width:40px;height:40px;flex:none;border-radius:12px;background:#fff;border:1px solid #e6e2dc;display:grid;place-items:center;font-size:1.05rem;color:#1d1d1d;text-decoration:none}
.jx-chat{background:#f4f2ef;border:1px solid #e6e2dc;border-radius:24px;box-shadow:0 18px 40px -24px rgba(29,29,29,.3);padding:0;height:440px;display:flex;flex-direction:column;overflow:hidden;font-family:var(--wati-font-product,'Inter',system-ui,sans-serif)}
.jx-m{max-width:86%;border-radius:14px;padding:11px 15px;font-size:.92rem;line-height:1.45;animation:jxup .45s cubic-bezier(.22,1,.36,1) both}
.jx-m.in{align-self:flex-start;background:#fff}.jx-m.out{align-self:flex-end;background:#dcfce9}
.jx-m.sys{align-self:center;background:transparent;padding:4px 10px;font-family:var(--wati-font-mono,"Roboto Mono",monospace);font-size:.66rem;letter-spacing:.05em;color:#4a4d4c}
.jx-ch{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#fff;border-bottom:1px solid #ebe7e1}
.jx-ava{width:34px;height:34px;border-radius:50%;overflow:hidden;background:#1d1d1d;color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}.jx-ava img{width:100%;height:100%;object-fit:cover}
.jx-who{display:flex;flex-direction:column;line-height:1.2}.jx-who b{display:flex;align-items:center;gap:4px;font-size:.92rem}.jx-who b img{width:14px;height:14px}.jx-who small{font-size:.72rem;color:#6b6f6d}
.jx-body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:18px 20px 22px;overflow:hidden}
.jx-m.note{align-self:center;background:#fff4c2;color:#5a4a00;padding:5px 12px;border-radius:999px;font-size:.74rem;font-weight:600}.jx-m.note i{font-style:normal}
.jx-m.sys{background:#fff;border-radius:999px;padding:5px 12px}
@keyframes jxup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ix{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:40px;align-items:center}
.ix-l{display:flex;flex-direction:column;gap:28px}.ix-t{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ix-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ix-grid span{aspect-ratio:1;border-radius:16px;background:#fff;border:1px solid #ebe7e1;display:grid;place-items:center;opacity:.5;transition:opacity .5s,transform .5s,box-shadow .5s}
.ix-grid span.on{opacity:1;transform:scale(1.08);box-shadow:0 14px 28px -12px rgba(29,29,29,.35)}
.ix-grid img{width:34%;height:34%;object-fit:contain;opacity:.85}
.ix-grid span{cursor:pointer;display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ix-grid em{font-style:normal;font-size:.68rem;font-weight:600;color:#4a4d4c;text-align:center;line-height:1.15;padding:0 4px;max-width:100%;overflow-wrap:anywhere;hyphens:auto}
@media(max-width:1000px){.ix-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ix-mono{font-size:.95rem;font-weight:800;color:#1d1d1d;letter-spacing:-.02em}
.ix-grid .mono{font-size:.9rem;font-weight:800}
.ix-uses{display:flex;flex-wrap:wrap;gap:6px}.ix-uses span{font-size:.72rem;font-weight:600;background:#f4f2ef;border:1px solid #ebe7e1;border-radius:999px;padding:4px 10px;color:#1d1d1d}
.ix-card{background:#fff;border:1px solid #e6e2dc;border-radius:24px;padding:24px;overflow:hidden;height:440px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px -24px rgba(29,29,29,.3);font-family:var(--wati-font-product,'Inter',system-ui,sans-serif)}
.ix-sys{align-self:center;background:#f4f2ef;border-radius:999px;padding:6px 12px;font-family:var(--wati-font-mono,"Roboto Mono",monospace);font-size:.66rem;letter-spacing:.04em;color:#4a4d4c}
.ix-msg{margin-top:auto;min-height:74px;display:flex;align-items:center;align-self:flex-end;background:#dcfce9;border-radius:16px;padding:12px 16px;font-size:.95rem;line-height:1.45;max-width:90%}
.jx-tr{display:flex;flex-direction:column;gap:3px;margin-top:9px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.22);font-size:.8em;line-height:1.35;opacity:.75}.jx-tr em{font-style:normal;font-family:var(--wati-font-mono,"Roboto Mono",monospace);font-size:.78em;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.ix-dots{display:flex;gap:6px;justify-content:center;padding-top:8px}.ix-dots i{width:6px;height:6px;border-radius:50%;background:#d6d3cc}.ix-dots i.on{background:#1d1d1d}
@media(prefers-reduced-motion:reduce){.jx-m{animation:none}}
/* ===== v11-agentic-bento ===== */
.jx-mute{color:inherit}
.ae-bento{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:380px 380px;gap:18px}
.ae-card{position:relative;background:#f4f2ef;border:1px solid #e6e2dc;border-radius:28px;overflow:hidden}
.ae-big{grid-row:span 2}
.ae-copy{padding:32px 32px 0}.ae-copy.ae-side{position:absolute;left:28px;top:28px;width:38%;padding:0}
#ai .ae-copy .tag{font-family:var(--wati-font-mono,'Roboto Mono',monospace);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6b6f6d;margin:0 0 10px}
#ai .ae-copy h4{font-family:var(--font);font-weight:600;font-size:1.45rem;line-height:1.22;letter-spacing:-.025em;color:#1d1d1d;margin:0;text-wrap:pretty}
#ai .ae-big h4{font-size:1.8rem}
.ae-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 76%,#f4f2ef),linear-gradient(90deg,transparent calc(100% - 40px),#f4f2ef)}
.ae-fade{display:none}
.ae-win{position:absolute;background:#faf9f7;border:1px solid #ece8e2;border-radius:18px;box-shadow:0 30px 60px -30px rgba(29,29,29,.35);font-family:var(--wati-font-product);color:#1d1d1d;display:flex;flex-direction:column;overflow:hidden}
.ae-bar{display:flex;align-items:center;gap:6px;padding:12px 14px}.ae-bar i{width:10px;height:10px;border-radius:50%;background:#e2ded8}
.ae-bar span{margin-left:10px;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;white-space:nowrap}.ae-bar img{width:16px;height:16px}
.ae-pane{margin:0 10px;flex:1;background:#fff;border:1px solid #ece8e2;border-bottom:0;border-radius:14px 14px 0 0;display:flex;flex-direction:column;overflow:hidden}
.ae-vibe{padding:20px 18px;gap:12px}
.ae-greet{text-align:center;display:flex;flex-direction:column;gap:4px}.ae-greet small{font-size:12px;color:#8a8d8b}.ae-greet b{font-size:17px;letter-spacing:-.01em}
.ae-input{border:1px solid #e2ded8;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:12px;background:#faf9f7}
.ae-txt{font-size:12.5px;line-height:1.45;min-height:36px}.ae-txt.ph{color:#a3a6a4}
.ae-cur{display:inline-block;width:1.5px;height:13px;background:#1d1d1d;vertical-align:-2px;margin-left:1px;animation:aeblink 1s steps(1) infinite}
@keyframes aeblink{50%{opacity:0}}@keyframes aeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ae-inrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ae-modes{display:flex;flex-wrap:wrap;gap:4px}.ae-modes span{font-size:10.5px;font-weight:600;border-radius:999px;padding:4px 9px;border:1px solid #e2ded8;color:#8a8d8b;white-space:nowrap}.ae-modes .on{background:#1d1d1d;color:#fff;border-color:#1d1d1d}
.ae-send{width:26px;height:26px;flex:none;border-radius:8px;background:#e2ded8;color:#fff;display:grid;place-items:center;font-size:13px;transition:background .3s}.ae-send.on{background:#00e785}
.ae-list{display:flex;flex-direction:column;border:1px solid #ece8e2;border-radius:12px;overflow:hidden}.ae-list:empty{display:none}
.ae-row{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:12px;animation:aeup .4s both}.ae-row+.ae-row{border-top:1px solid #ece8e2}
.ae-ic{width:22px;height:22px;flex:none;border-radius:6px;background:#fff center/62% no-repeat}
.ae-row .l{flex:1;min-width:0}
.ae-st{font-size:10.5px;font-weight:600;border-radius:999px;padding:3px 8px;white-space:nowrap}
.st-g{background:#e6f9ef;color:#1f7a45}.st-y{background:#fff8d6;color:#6b5a00}.st-k{background:#1d1d1d;color:#fff}.st-n{background:#ece8e2;color:#8a8d8b}
.ae-li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #ece8e2;transition:background .3s}.ae-li.act{background:#f6fdf9}
.ae-av{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#1d1d1d}
.ae-li .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.ae-li b{font-size:12.5px;font-weight:600}.ae-li small{font-size:11px;color:#8a8d8b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ae-thread{flex:1;background:#faf9f7;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.ae-m{max-width:84%;border-radius:12px;padding:9px 12px;font-size:12.5px;line-height:1.4;animation:aeup .4s both}
.ae-m.in{align-self:flex-start;background:#ece8e2}.ae-m.ai{align-self:flex-end;background:#e6f9ef;color:#fff}
.ae-m.sy{align-self:center;background:none;padding:2px 6px;font-family:var(--wati-font-mono,'Roboto Mono',monospace);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#1f7a45}
.ae-typing{align-self:flex-end;display:flex;gap:4px;background:#e6f9ef;border-radius:12px;padding:10px 12px}.ae-typing i{width:5px;height:5px;border-radius:50%;background:#1f7a45;animation:aeblink 1s infinite}.ae-typing i:nth-child(2){animation-delay:.2s}.ae-typing i:nth-child(3){animation-delay:.4s}
.ae-filter{display:flex;align-items:center;gap:8px;padding:0 10px 10px}
.ae-seg{display:flex;background:#ece8e2;border-radius:999px;padding:3px}.ae-seg span{font-size:11px;font-weight:600;border-radius:999px;padding:5px 11px;color:#8a8d8b;white-space:nowrap;transition:all .3s}.ae-seg .on{background:#1d1d1d;color:#fff}
.ae-search{flex:0 1 150px;min-width:0;border:1px solid #e2ded8;background:#fff;border-radius:999px;padding:7px 12px;font-size:11.5px;color:#a3a6a4;white-space:nowrap;overflow:hidden}
.ae-trow{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:10px 14px;border-bottom:1px solid #ece8e2;transition:background .3s}.ae-trow.act{background:#f6fdf9}
.ae-th{padding:9px 14px;font-size:11px;color:#a3a6a4}
.ae-trow .n{display:flex;align-items:center;gap:10px;min-width:0}.ae-lg{width:30px;height:30px;flex:none;border-radius:50%;background:#fff center/55% no-repeat}
.ae-trow .n span{display:flex;flex-direction:column;gap:1px;min-width:0}.ae-trow b{font-size:12.5px;font-weight:600}.ae-trow small{font-size:10.5px;color:#8a8d8b}
.ae-trow .u{display:flex;align-items:center;gap:7px;font-size:12px}.ae-trow .u i{width:6px;height:6px;border-radius:50%;flex:none;background:#d9d4cc}.ae-trow.act .u i{background:#00e785}
.ae-anim{animation:aeup .4s both}
@media(max-width:1180px){.ae-bento{grid-template-rows:460px 460px}.ae-copy.ae-side{position:static;width:auto;padding:28px 28px 0}.ae-card:not(.ae-big) .ae-win{left:28px!important;top:150px!important}}
@media(max-width:900px){.ae-bento{grid-template-columns:1fr;grid-template-rows:680px 460px 460px}.ae-big{grid-row:auto}}
@media(prefers-reduced-motion:reduce){.ae-row,.ae-m,.ae-anim,.ae-cur,.ae-typing i{animation:none}}
#ai .wrap{background:#fbfaf8;border:1px solid #efebe5}
#ai h2{color:var(--ink)}#ai .section-head .lead{color:var(--ink-soft)}
#ai .eyebrow{background:var(--w-pink-light,#fdecff);color:var(--pink-deep)}
.ae-m.in{background:#fff;border:1px solid #ece8e2}.ae-m.ai{color:#123d27}
.ae-m.sy{color:#6b6f6d}.ae-typing i{background:#1f9d57}
.ae-send{background:#c9c6c1;color:#fff}.ae-send.on{background:#1d1d1d}
.ae-li b,.ae-trow b,.ae-greet b{color:#1d1d1d}
.ae-v1h{display:flex;justify-content:flex-start;align-items:center;min-height:14px;padding:0 4px;font-family:var(--wati-font-mono,"Roboto Mono",monospace);font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#6b6f6d}.ae-v1h b{color:#1d1d1d;font-weight:600}
.ae-live-in{display:flex;align-items:center;gap:12px;background:#1d1d1d;color:#fff;border-radius:14px;padding:14px 56px 14px 16px;animation:aeup .5s both}.ae-live-in .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.ae-live-in b{font-size:13.5px;font-weight:600;color:#fff}.ae-live-in small{font-size:11px;color:#a9adab}
.ae-live-dot{width:10px;height:10px;flex:none;border-radius:50%;background:#00e785;animation:hfring 1.4s infinite}
.ae-chs{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.ae-chs span{width:28px;height:28px;display:grid;place-items:center;background:rgba(255,255,255,.1);border-radius:50%}.ae-chs img,.ae-chs svg{width:14px;height:14px;display:block}
.ae-mcp-on{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#1f7a45;white-space:nowrap}.ae-mcp-on i{width:6px;height:6px;border-radius:50%;background:#00e785;box-shadow:0 0 0 3px rgba(0,231,133,.2)}
.ae-mcp{justify-content:flex-start}
.ae-m.me{align-self:flex-end;background:#1d1d1d;color:#fff}
.ae-mcp .ae-m.in{align-self:flex-start}
.ae-m.tl{align-self:flex-start;display:flex;align-items:center;gap:7px;background:#fff;border:1px dashed #d9d5ce;border-radius:8px;padding:6px 10px;font-family:var(--wati-font-mono,'Roboto Mono',monospace);font-size:10px;letter-spacing:.02em;color:#4a4d4c;max-width:92%}
.ae-m.tl i{width:6px;height:6px;flex:none;border-radius:2px;background:#00e785}
#aeA2thread{min-height:0;overflow:hidden;padding-bottom:48px}.ae-m.hu{align-self:flex-end;background:#1d1d1d;color:#fff}.ae-typing.hu{background:#1d1d1d}.ae-typing.hu i{background:#fff}
.ae-typ-l{align-self:flex-start;background:#fff;border:1px solid #ece8e2}
/* ===== block ===== */
.rr-rows{display:flex;flex-direction:column;gap:4px;margin-top:16px;padding:24px 0 72px;margin-bottom:-72px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.rr-row{overflow-x:clip;overflow-y:visible;padding:16px 0 30px}
.rr-track{display:flex;gap:18px;width:max-content;animation:rrmove 60s linear infinite}
.rr-track.rev{animation-direction:reverse}
.rr-dup{display:contents}
.rr-rows:has(.rr-card:hover) .rr-track{animation-play-state:paused}
.rr-card{transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
.rr-rows:has(.rr-card:hover) .rr-card{opacity:.42}
.rr-rows:has(.rr-card:hover) .rr-card:hover{opacity:1;transform:translateY(-6px) scale(1.015);border-color:#d6d3cc;box-shadow:0 4px 10px rgba(27,29,28,.06),0 30px 60px -28px rgba(27,29,28,.4)}
@media(hover:none){.rr-rows:has(.rr-card:hover) .rr-card{opacity:1}}
@keyframes rrmove{to{transform:translateX(calc(-50% - 9px))}}
.rr-card{margin:0;width:380px;flex:none;display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid #e9eaeb;border-radius:18px;padding:22px 24px 18px;box-shadow:0 2px 4px rgba(27,29,28,.04),0 18px 40px -24px rgba(27,29,28,.25)}
.rr-head{display:flex;align-items:center;gap:12px}
.rr-ava{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.86rem;color:var(--ink)}
.rr-who{min-width:0;flex:1;display:flex;flex-direction:column}
.rr-who b{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.rr-who small{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-src{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;border:1px solid #e9eaeb;border-radius:999px;padding:4px 10px 4px 8px;color:var(--ink-soft)}
.rr-src img{width:14px;height:14px;display:block}
.rr-theme{display:flex;align-items:baseline;gap:12px;margin-top:20px;margin-bottom:-8px;width:100%}
.rr-theme b{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.rr-theme span{font-family:var(--wati-font-mono,"Roboto Mono",ui-monospace,monospace);font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rr-card blockquote{margin:0;flex:1;font-size:1.04rem;line-height:1.5;color:var(--ink);text-wrap:pretty}
.rr-foot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #f0f1f1}
.rr-stars{color:#f5b400;letter-spacing:2px;font-size:.9rem}
.rr-read{display:flex;align-items:center;gap:6px;font-family:var(--wati-font-mono,"Roboto Mono",ui-monospace,monospace);font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rr-read svg{width:18px;height:12px;color:#34b7f1}
@media(max-width:700px){.rr-card{width:300px}}
@media(prefers-reduced-motion:reduce){.rr-track{animation:none}.rr-row{overflow-x:auto}}
/* ===== btn-system ===== */
/* Button system: single source of truth (overrides earlier layers) */
a.btn,button.btn,.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font);font-weight:700;font-size:1rem;line-height:1.2;letter-spacing:-.005em;padding:15px 30px;border-radius:999px;text-decoration:none;cursor:pointer;transform:none;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
a.btn.sm,.btn.sm{font-size:.94rem;padding:10px 20px}
a.btn-primary,.btn.btn-primary,.cta-final a.btn-primary{background:#1d1d1d;color:#fff;border:1.5px solid #1d1d1d;box-shadow:0 10px 24px -12px rgba(29,29,29,.5)}
a.btn-primary:hover,.btn.btn-primary:hover,.cta-final a.btn-primary:hover{background:#383838;border-color:#383838;color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(29,29,29,.55)}
a.btn-primary:active,.btn.btn-primary:active,.cta-final a.btn-primary:active{background:#000;border-color:#000;color:#fff;transform:translateY(0) scale(.97);box-shadow:0 4px 10px -6px rgba(29,29,29,.5)}
a.btn-outline,.btn.btn-outline,.cta-final a.btn-outline,.btn.sm:not(.btn-primary){background:#fff;color:#1d1d1d;border:1.5px solid #d6d3cc;box-shadow:0 2px 6px -2px rgba(29,29,29,.08)}
a.btn-outline:hover,.btn.btn-outline:hover,.cta-final a.btn-outline:hover,.btn.sm:not(.btn-primary):hover{background:#fff;color:#1d1d1d;border-color:#1d1d1d;transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(29,29,29,.35)}
a.btn-outline:active,.btn.btn-outline:active,.cta-final a.btn-outline:active,.btn.sm:not(.btn-primary):active{background:#f2f1ee;color:#1d1d1d;border-color:#1d1d1d;transform:translateY(0) scale(.97);box-shadow:none}
.btn.sm.btn-primary{background:#1d1d1d;color:#fff;border:1.5px solid #1d1d1d}
.btn.sm.btn-primary:hover{background:#383838;border-color:#383838;color:#fff;transform:translateY(-2px)}
.btn.sm.btn-primary:active{background:#000;border-color:#000;color:#fff;transform:translateY(0) scale(.97)}
.cta-final a.btn.btn-primary{background:#fff;color:#1d1d1d;border-color:#fff;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.cta-final a.btn.btn-primary:hover{background:#f2f1ee;border-color:#f2f1ee;color:#1d1d1d;transform:translateY(-2px)}
.cta-final a.btn.btn-primary:active{background:#e6e4df;border-color:#e6e4df;color:#1d1d1d;transform:translateY(0) scale(.97)}
a.btn:focus-visible,.btn:focus-visible{outline:2px solid #1d1d1d;outline-offset:3px}
.cta-final a.btn:focus-visible{outline-color:#fff}
@media(prefers-reduced-motion:reduce){a.btn,.btn{transition:none}a.btn:hover,a.btn:active,.btn:hover,.btn:active{transform:none}}
/* Mobile sanity pass */
@media(max-width:600px){
.scale-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 16px !important}
.scale-stat{min-width:0}
.scale-stat .num{font-size:clamp(1.7rem,8vw,2.4rem);overflow-wrap:anywhere}
.menu-toggle{min-width:44px;min-height:44px;display:grid;place-items:center}
.vt-btn{min-height:44px}
.site-foot a{display:inline-block;padding:6px 0}
.site-foot a:has(img),.site-foot a:has(svg){min-width:44px;min-height:44px;display:inline-grid;place-items:center}
.hero-cta{flex-wrap:wrap;gap:12px}
.hero-cta .btn{flex:1 1 auto}
.chx-grid .chx-cta .btn{width:100%}
.mss-copy ul{display:none}
}
html,body{overflow-x:clip}
/* logo reel: seamless loop (margin, not gap, so -50% lands exactly on copy 2) */
.reel-track{gap:0 !important}
.hero .hero-reel .reel-track{animation-duration:48s}
.hero .hero-reel{width:100%;max-width:var(--shotw,1080px);margin-left:auto;margin-right:auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.reel-track .reel-logos{margin-right:51px}
.reel-logo{width:auto;flex:none;display:block;margin-right:64px;filter:brightness(0);opacity:.4;transition:opacity .2s}.hero-reel:hover .reel-logo{opacity:.6}
@media(max-width:900px){.reel-logo{margin-right:44px;transform:scale(.8)}}
@media(max-width:900px){.reel-track .reel-logos{margin-right:39px}}
/* hero: colour glow sits behind the conversation, not the headline */
.bg-glow::before,.bg-glow::after{display:none !important}
.hf-chat-wrap{isolation:isolate}
.hf-chat-wrap::before{inset:-18% -22% !important;border-radius:50%;background:radial-gradient(45% 45% at 35% 40%,rgba(249,180,255,.55),transparent 70%),radial-gradient(45% 45% at 68% 58%,rgba(79,195,255,.40),transparent 70%),radial-gradient(40% 40% at 50% 80%,rgba(0,231,133,.28),transparent 70%) !important;filter:blur(24px);animation:hfglow 14s ease-in-out infinite alternate}
@keyframes hfglow{0%{transform:rotate(0deg) scale(1)}100%{transform:rotate(40deg) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hf-chat-wrap::before{animation:none}}
@media(max-width:900px){
.hero-split{grid-template-columns:minmax(0,1fr) !important;gap:32px}
.hero-split h1{font-size:min(9.4vw,2.8rem)}
.hf-chat{height:400px}
.trust-left img{max-width:100%;height:auto}
.trust-left{flex-wrap:wrap}
}
@media(max-width:400px){.hero-split h1 .h1-line{white-space:normal}}
/* ===== jx-dark ===== */
.jx-chat{background:#0b0f0e !important;border:none !important;border-radius:44px !important;box-shadow:0 30px 60px -30px rgba(0,0,0,.55) !important;height:560px !important;max-width:430px;width:100%;justify-self:center;padding:18px 22px 20px !important}
.jx-chat .jx-ch{background:transparent;border-bottom:1px solid #1f2522;padding:10px 4px 16px}
.jx-ava-w{position:relative;flex:none}.jx-chat .jx-ava{width:48px;height:48px}
.jx-bdg{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid #0b0f0e}.jx-bdg img{width:11px;height:11px}
.jx-chat .jx-who b{color:#fff;font-size:1.05rem}.jx-chat .jx-who small{color:#4ade80;font-weight:600;font-size:.8rem;display:flex;align-items:center;gap:6px}.jx-chat .jx-who small i{width:7px;height:7px;border-radius:50%;background:#22c55e}
.jx-chat .jx-body{padding:18px 16px 14px 4px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px);mask-image:linear-gradient(180deg,transparent 0,#000 40px)}
.jx-chat .jx-m{position:relative;border-radius:18px;padding:12px 16px;font-size:.95rem}
.jx-chat .jx-m.in{background:#1e2421;color:#eef1ee}
.jx-chat .jx-m.out{color:#fff;background:#0f5134;margin-top:6px}
.jx-chat[data-ch="ig"] .jx-m.out{background:linear-gradient(120deg,#f77737 0%,#e1306c 50%,#a83fbf 100%)}
.jx-chat[data-ch="web"] .jx-m.out{background:#1c3d5a}
.jx-spark{position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:8px;background:#00e785;display:grid;place-items:center}.jx-spark img{width:14px;height:14px;filter:brightness(0)}
.jx-chat .jx-m.note{background:#12281c;color:#7ee6b0;border-radius:10px;font-family:var(--wati-font-mono,"Roboto Mono",monospace);font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:8px 12px}
.jx-chat .jx-m.sys{background:#161b19;border:1px solid #2a302c;color:#9aa39d;border-radius:10px;font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;padding:8px 12px}
.jx-in{margin:4px 0 0;background:#1a1f1d;border-radius:999px;padding:14px 20px;color:#6b726e;font-size:.92rem;font-family:var(--wati-font-product,'Inter',system-ui,sans-serif)}
/* ===== v11-from-11-1 ===== */
/* final CTA: light full-bleed band, centred (from V11.1) */
section.cta-band{background:#f5f4f1!important;padding:clamp(88px,10vw,128px) 0!important}
.hl.b-g{background-image:linear-gradient(#7ff0bd,#7ff0bd)}
.cta-final{background:transparent!important;padding:0!important;border-radius:0!important;text-align:center!important}
.cta-final h2{color:var(--ink)!important;margin:0 auto 36px!important;max-width:15em!important}
.cta-final .hero-cta{justify-content:center!important}
.cta-final a.btn.btn-primary{background:#1d1d1d!important;color:#fff!important;border-color:#1d1d1d!important}
.cta-final a.btn.btn-primary:hover{background:#383838!important;border-color:#383838!important}
.cta-final a.btn.btn-outline.cta-ghost{background:#fff!important;color:#1d1d1d!important;border:1.5px solid #d6d3cc!important}
.cta-final a.btn.btn-outline.cta-ghost:hover{border-color:#1d1d1d!important}
.cta-micro{color:var(--ink-soft)!important}.cta-micro a{color:var(--ink)!important}
/* consistent full-bleed sections: AI + Integrations no longer inset panels */
#ai,#integrations{padding:clamp(96px,11vw,150px) 0}
#ai{background:#fbfaf8;border-top:1px solid #efebe5;border-bottom:1px solid #efebe5}
#integrations{background:linear-gradient(160deg,#e3f5ff 0%,#f3ecff 100%)}
#ai .wrap,#integrations .wrap{background:transparent;border:0;border-radius:0;padding:0 24px}
@media(max-width:900px){#ai,#integrations{padding:72px 0}}
/* hero H1 (from V11.1) */
.hero-split h1{font-size:clamp(2.8rem,4.6vw,4.1rem)!important;font-weight:700!important;line-height:1.04!important;letter-spacing:-.045em!important}
/* integrations: logos muted at rest, full brand colour when active */
#integrations .itile .lico img{filter:grayscale(1);opacity:.5;transition:filter .25s ease,opacity .25s ease}
#integrations .itile.sel .lico img,#integrations .itile:hover .lico img,#integDetail .lico img{filter:none;opacity:1}
#integrations .integ-center{border-radius:50%}