/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("b49aa4f1-3e04-4738-a6ad-79d8a840913e.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("8382af70-68ce-4a61-ba8f-205c013423eb.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("02e0d912-1fa0-4f17-8302-b42f246fcc5a.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("cb71d8c0-1ad4-43a7-bee6-0486400ac61c.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("9a2af656-f586-4c1a-9d7a-7e3e299bee5f.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("133bb236-2703-4b06-8977-e2521a69b203.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("7770d0c8-a3e1-4514-a36c-3204fc5cbdd2.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("b49aa4f1-3e04-4738-a6ad-79d8a840913e.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("8382af70-68ce-4a61-ba8f-205c013423eb.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("02e0d912-1fa0-4f17-8302-b42f246fcc5a.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("cb71d8c0-1ad4-43a7-bee6-0486400ac61c.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("9a2af656-f586-4c1a-9d7a-7e3e299bee5f.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("133bb236-2703-4b06-8977-e2521a69b203.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("7770d0c8-a3e1-4514-a36c-3204fc5cbdd2.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("b49aa4f1-3e04-4738-a6ad-79d8a840913e.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("8382af70-68ce-4a61-ba8f-205c013423eb.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("02e0d912-1fa0-4f17-8302-b42f246fcc5a.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("cb71d8c0-1ad4-43a7-bee6-0486400ac61c.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("9a2af656-f586-4c1a-9d7a-7e3e299bee5f.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("133bb236-2703-4b06-8977-e2521a69b203.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("7770d0c8-a3e1-4514-a36c-3204fc5cbdd2.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("b49aa4f1-3e04-4738-a6ad-79d8a840913e.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("8382af70-68ce-4a61-ba8f-205c013423eb.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("02e0d912-1fa0-4f17-8302-b42f246fcc5a.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("cb71d8c0-1ad4-43a7-bee6-0486400ac61c.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("9a2af656-f586-4c1a-9d7a-7e3e299bee5f.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("133bb236-2703-4b06-8977-e2521a69b203.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("7770d0c8-a3e1-4514-a36c-3204fc5cbdd2.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("f453417f-5af9-4037-b30d-33ca88a8248f.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("475249ce-072b-4455-9c92-3261f0849390.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("a397cde2-d7ad-4173-b931-5f0d68c00ebc.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("7511b7fa-ffc4-4d27-a899-12b0464cc928.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fbea1516-0acf-49e1-ba73-966b34a3bfb2.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("0f263ed8-d758-4429-aa60-b9f5de7fc483.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("f453417f-5af9-4037-b30d-33ca88a8248f.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("475249ce-072b-4455-9c92-3261f0849390.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("a397cde2-d7ad-4173-b931-5f0d68c00ebc.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("7511b7fa-ffc4-4d27-a899-12b0464cc928.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fbea1516-0acf-49e1-ba73-966b34a3bfb2.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("0f263ed8-d758-4429-aa60-b9f5de7fc483.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("f453417f-5af9-4037-b30d-33ca88a8248f.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("475249ce-072b-4455-9c92-3261f0849390.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("a397cde2-d7ad-4173-b931-5f0d68c00ebc.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("7511b7fa-ffc4-4d27-a899-12b0464cc928.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fbea1516-0acf-49e1-ba73-966b34a3bfb2.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("0f263ed8-d758-4429-aa60-b9f5de7fc483.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("8f45ba92-b20e-413f-bbe8-41059739d316.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("b1b9f095-99e2-4711-a16c-ae7e4626bf8a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("1a3fca81-5c42-4506-8638-3a547a54bf47.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("45fb64f0-2ca0-4e53-af46-9cc6cbc041a6.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("a9774034-8695-47c3-8081-e80389424f32.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("dd0ea79a-d78d-44c4-96ca-fbcc4f67b5f0.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("8f45ba92-b20e-413f-bbe8-41059739d316.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("b1b9f095-99e2-4711-a16c-ae7e4626bf8a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("1a3fca81-5c42-4506-8638-3a547a54bf47.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("45fb64f0-2ca0-4e53-af46-9cc6cbc041a6.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("a9774034-8695-47c3-8081-e80389424f32.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("dd0ea79a-d78d-44c4-96ca-fbcc4f67b5f0.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("8f45ba92-b20e-413f-bbe8-41059739d316.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("b1b9f095-99e2-4711-a16c-ae7e4626bf8a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("1a3fca81-5c42-4506-8638-3a547a54bf47.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("45fb64f0-2ca0-4e53-af46-9cc6cbc041a6.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("a9774034-8695-47c3-8081-e80389424f32.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("dd0ea79a-d78d-44c4-96ca-fbcc4f67b5f0.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("8f45ba92-b20e-413f-bbe8-41059739d316.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("b1b9f095-99e2-4711-a16c-ae7e4626bf8a.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("1a3fca81-5c42-4506-8638-3a547a54bf47.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("45fb64f0-2ca0-4e53-af46-9cc6cbc041a6.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("a9774034-8695-47c3-8081-e80389424f32.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("dd0ea79a-d78d-44c4-96ca-fbcc4f67b5f0.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 {
  /* surfaces — semantic aliases of the glass-alpha ladder below */
  --bg: #000000;
  --surface-1: rgba(255,255,255,0.04);   /* = --white-04 */
  --surface-2: rgba(255,255,255,0.06);   /* = --white-06 */
  --border-1:  rgba(255,255,255,0.06);   /* = --white-06 */
  --border-2:  rgba(255,255,255,0.10);   /* = --white-10 */
  --border-app: 0.5px solid #38383A;

  /* glass-alpha ladder (spec §3.6) — every white-on-black overlay reads
     off these rungs. Don't invent intermediate values; hover states move
     exactly one rung. */
  --white-04: rgba(255,255,255,0.04);   /* subtle card fills */
  --white-05: rgba(255,255,255,0.05);   /* card borders default */
  --white-06: rgba(255,255,255,0.06);   /* glass pill, --surface-2 alias */
  --white-08: rgba(255,255,255,0.08);   /* nav border, hover-state card fill */
  --white-10: rgba(255,255,255,0.10);   /* hovered card border */
  --white-15: rgba(255,255,255,0.15);   /* pill button border default */
  --white-30: rgba(255,255,255,0.30);   /* pill button border on hover, focus lift */
  --white-70: rgba(255,255,255,0.70);   /* pill button text default = --fg-3 */

  /* surface-elevated tiers (spec §3.7) — solid greys for stacked surfaces.
     Translucent whites compound badly when layered; switch to these when
     a card sits on a card or an input sits inside a sheet. */
  --surface-elev-1: rgb(28, 28, 30);    /* card-on-card */
  --surface-elev-2: rgb(44, 44, 46);    /* inputs on dark surfaces */
  --surface-elev-3: rgb(56, 56, 58);    /* tertiary lifts (selected, active filter) */

  /* text */
  --fg:        #F5F5F7;
  --fg-2:      rgba(255,255,255,0.80);
  --fg-3:      rgba(255,255,255,0.70);
  --fg-4:      rgba(255,255,255,0.60);
  --fg-5:      rgba(255,255,255,0.40);
  --fg-stone:  #86868B;

  /* accents — semantic, not decorative (spec §3.4) */
  --blue:   #0A84FF;   /* YES / brand / live edge callout */
  --purple: #BF5AF2;   /* routing path / multi-venue */
  --pink:   #FF6482;   /* NO side / contrarian */
  --cyan:   #64D2FF;   /* liquidity / depth */
  --yellow: #FFD60A;   /* edge / arbitrage / premium */
  --green:  #30D158;   /* filled / settled / profit */
  --orange: #FF9F0A;   /* risk / slippage / warning */

  /* status palette — Sonner toaster (spec §3.8). System events only;
     never collapse meaning-accents (above) into status fills. */
  --status-success-bg:     hsl(150, 100%, 6%);
  --status-success-border: hsl(147, 100%, 12%);
  --status-success-fg:     hsl(150, 86%, 65%);
  --status-info-bg:        hsl(215, 100%, 6%);
  --status-info-border:    hsl(223, 43%, 17%);
  --status-info-fg:        hsl(216, 87%, 65%);
  --status-warning-bg:     hsl(64, 100%, 6%);
  --status-warning-border: hsl(60, 100%, 9%);
  --status-warning-fg:     hsl(46, 87%, 65%);
  --status-error-bg:       hsl(358, 76%, 10%);
  --status-error-border:   hsl(357, 89%, 16%);
  --status-error-fg:       hsl(358, 100%, 81%);

  /* type */
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-display-italic: 'Source Serif 4', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* motion (spec §6.1) — two curves, four base durations + three semantic aliases */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);   /* hovers, button states */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* reveals, sheets, things arriving */
  --t-fast: 150ms; --t: 200ms; --t-slow: 320ms; --t-reveal: 600ms;
  --dur-card:   300ms;   /* card border lifts, accordion expand */
  --dur-reveal: 500ms;   /* small reveal blocks */
  --dur-large:  700ms;   /* hero blocks, pull-quotes */

  /* backdrop blur (spec §7) — borders + gradient + blur is the entire depth system */
  --blur-card:  8px;
  --blur-glass: 12px;

  /* ambient */
  --ambient:
    radial-gradient(at 25% 20%, rgba(191,90,242,0.06) 0%, transparent 50%),
    radial-gradient(at 75% 70%, rgba(0,132,255,0.05)  0%, transparent 50%),
    radial-gradient(at 50% 100%, rgba(48,209,88,0.03) 0%, transparent 40%);

  /* foil — metallic gradient clipped to glyphs (spec §3.10, §4.5).
     Resting baseline for every editorial headline outside the hero. */
  --foil-gradient: linear-gradient(to right bottom, #FFFFFF 30%, rgba(255,255,255,0.5));

  /* mask-fade-x — edge fades for the marquee logo-scroll (spec §6.8).
     Held in tokens for when the TRADERS FROM section lands. */
  --mask-fade-x: linear-gradient(to right, #000 0%, transparent 8%, transparent 92%, #000 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background-image: var(--ambient); background-attachment: fixed; min-height: 100vh; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(10,132,255,0.4); color: #fff; }
*:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Container + breakpoints aligned with Tailwind tokens —
   max-w-screen-2xl (1536px), px-3 (12px) horizontal gutter.
   Tailwind breakpoints used through the file: sm 640, md 768, lg 1024, xl 1280, 2xl 1536. */
.wrap { max-width: 1536px; margin: 0 auto; padding: 0 12px; }

.eyebrow {
  font: 600 12px/16px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--fg-2);
}
.eyebrow--tracked {
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 1.65px;
  text-transform: uppercase;
  color: var(--fg-stone);
}

/* ───────── nav ───────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid var(--border-2);
  /* Symmetric 12px top/bottom padding parks the wordmark + nav 12px
     from the top edge — matches the main app's chrome inset. */
  padding: 12px 0;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand-lockup { display: inline-flex; align-items: center; gap: 8px; }
.brand-lockup .wordmark {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--fg);
  line-height: 1;
}

/* ── bloom-text — radial-gradient bleed-through for any text element ──
   Resting state: flat white linear gradient clipped to the glyphs.
   On hover, JS replaces `background-image` with a radial gradient that
   tracks the cursor — Oddeon's brand prism (YES-blue → routing-purple →
   NO-pink → edge-yellow → text-default) bleeds through the letters.
   Cursor stays on default; no transition; positionally driven only. */
.bloom-text {
  background-image: linear-gradient(180deg, var(--fg), var(--fg));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  cursor: default;
}

/* ── foil — metallic gradient clipped to glyphs (spec §3.10, §4.5) ──
   The brand's resting voice on every editorial headline outside the hero.
   The hero H1 and the wordmark stay on .bloom-text (their hover-prism
   trick is the louder version of the same gesture); .foil is the quiet
   default everywhere else.
   Italic words inside a foil headline opt back out via the .foil .it
   rule below — they keep their solid colour (white by default, --blue on
   the footer tagline) so the italic moment stays the page's voice. */
.foil {
  background-image: var(--foil-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.foil .it {
  background-image: none;
  -webkit-text-fill-color: currentColor;
}

.brand-lockup svg { width: 32px; height: 32px; display: block; }
.topnav { display: flex; align-items: center; gap: 24px; }
.topnav a {
  font: 500 13px var(--font-sans);
  color: var(--fg-4);
  transition: color var(--t-fast) var(--ease);
}
.topnav a:hover { color: var(--fg); }
.status-pill {
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,0.03);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--fg-5);
  font: 500 12px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
a.status-pill:hover {
  color: var(--fg);
  border-color: var(--white-30, rgba(255,255,255,0.3));
  background: rgba(255,255,255,0.06);
}

/* ── Mobile hamburger ────────────────────────────────────────────────
   On viewports ≤768px (Tailwind md) the .topnav collapses into a
   slide-down drawer triggered by a 40px square button. Drawer is
   full-width below the sticky header, glassy + bordered to match the
   topbar treatment. */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--white-10);
  border-radius: 10px;
  color: var(--fg);
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav-toggle:hover { background: var(--white-04); border-color: var(--white-30); }
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-open  { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }

  .topnav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: calc(100vh - 65px);
    height: calc(100dvh - 65px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px 24px max(24px, env(safe-area-inset-bottom));
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));

    /* hidden state */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .topnav[data-open="true"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .topnav a {
    padding: 14px 0;
    font-size: 16px;
    color: var(--fg);
    border-bottom: 1px solid var(--border-1);
  }
  .topnav a:last-of-type { border-bottom: 0; }
  .topnav .status-pill {
    margin-top: 16px;
    text-align: center;
    background: #FFFFFF;
    color: #000;
    border: 0;
    padding: 12px 18px;
    font-size: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  }
}

/* ───────── hero ───────── */
.hero { position: relative; padding: 160px 0 120px; overflow: hidden; }
.hero .wrap { position: relative; z-index: 3; }
.hero canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0.85;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 50%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.20) 75%, transparent 100%);
  pointer-events: none; z-index: 2;
}

/* ── Hero graphic — subtle hub-and-spoke routing diagram ─────────────
   Anchored to the right of the hero. A faint constellation of named
   venues fans out from a glowing blue hub via thin solid spokes; one
   spoke (KALSHI in this example) renders as a dashed purple "live
   route" to signal active routing. Decorative; aria-hidden.
   Sits at z 1, under the radial vignette at z 2 so the H1 always wins. */
.hero-graphic {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-router {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: min(820px, 70vw);
  aspect-ratio: 1 / 1;
}
.hero-router .spoke {
  fill: none;
  stroke: rgba(255,255,255,0.10);
  stroke-width: 0.75;
  stroke-linecap: round;
}
.hero-router .live {
  fill: none;
  stroke: rgba(191,90,242,0.55);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  animation: hero-live-dash 18s linear infinite;
}
@keyframes hero-live-dash {
  to { stroke-dashoffset: -200; }
}
.hero-router .endpoint {
  fill: transparent;
  stroke: rgba(255,255,255,0.35);
  stroke-width: 0.75;
}
.hero-router .endpoint--live {
  stroke: rgba(191,90,242,0.7);
}
.hero-router .lbl {
  fill: rgba(255,255,255,0.32);
  font: 600 9px var(--font-sans);
  letter-spacing: 1.65px;
}
.hero-router .lbl--live {
  fill: rgba(255,255,255,0.6);
}

/* Hub — radial glow halo + thin concentric ring + bright core */
.hero-router .hub-halo {
  fill: url(#oddeon-hub-glow);
  animation: hero-hub-breath 4s ease-in-out infinite;
}
.hero-router .hub-ring {
  fill: none;
  stroke: rgba(10,132,255,0.35);
  stroke-width: 0.6;
}
.hero-router .hub-core {
  fill: rgba(220,225,235,0.92);
  filter: drop-shadow(0 0 5px rgba(10,132,255,0.7));
}
@keyframes hero-hub-breath {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .hero-router .live, .hero-router .hub-halo { animation: none; }
}
@media (max-width: 768px) {
  .hero-router { display: none; }
}
.hero h1 {
  margin-top: 24px;
  font: 500 96px/96px var(--font-sans);
  letter-spacing: -1.92px;
  color: var(--fg);
  max-width: 1100px;
}
.hero h1 .it {
  font-family: var(--font-display-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.hero p.sub {
  margin-top: 32px; max-width: 640px;
  font: 400 17px/28px var(--font-sans);
  color: var(--fg-3);
}
.hero .cta-row { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary {
  background: #FFFFFF; color: #000;
  padding: 14px 24px; border-radius: 999px; border: 0;
  font: 500 14px/16px var(--font-sans);
  /* inset highlight only — no drop shadow (spec §7, §8.2) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform var(--t) var(--ease), background var(--t-fast) var(--ease);
  cursor: pointer;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-secondary {
  background: var(--white-04); color: var(--fg-3);
  border: 1px solid var(--white-10);
  padding: 13px 18px; border-radius: 28px;
  font: 500 13px/16px var(--font-sans);
  transition: all var(--t) var(--ease);
  cursor: pointer;
}
.btn-secondary:hover {
  background: var(--white-08);
  border-color: var(--white-30);
  color: var(--fg);
}
@media (max-width: 768px) {
  .hero { padding: 96px 0 72px; }
  .hero h1 { font-size: 56px; line-height: 64.4px; letter-spacing: -1.12px; }
}

/* ───────── section frame ───────── */
section.block {
  padding: 128px 0;
  border-top: 1px solid var(--border-1);
}
section.block h2 {
  font: 300 48px/56px var(--font-serif);
  color: var(--fg);
  letter-spacing: -0.4px;
  max-width: 880px;
  margin-top: 16px;
}
/* Italic moments are white by default. Blue is reserved for the two
   spec-specific moments only: the demo intro headline and the footer
   "Conviction." line. Keeping blue precious. */
section.block h2 .it {
  font-family: var(--font-serif); font-style: italic; color: var(--fg);
}
section.block .lede {
  margin-top: 24px; max-width: 680px;
  font: 400 16px/26px var(--font-sans);
  color: var(--fg-3);
}
@media (max-width: 768px) {
  section.block { padding: 72px 0; }
  section.block h2 { font-size: 30px; line-height: 36px; }
}

/* ───────── how-it-works ───────── */
.how-grid {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.step {
  background: linear-gradient(rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  transition: border-color var(--t) var(--ease);
}
.step:hover { border-color: var(--border-2); }
.step .num {
  position: absolute; top: 28px; right: 28px;
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 1.65px;
  color: rgba(255,255,255,0.20);
}
/* All step icons share a single flat treatment: blue glyph on a soft
   blue-tinted tile, per spec §8.7 (YES-blue = brand / primary icon
   color). Per-step semantic colors are kept on the 2px top-edge accent
   so the chromatic sequence still reads in the row, but the icons
   themselves are unified. */
.step .step-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(10,132,255,0.10);
  display: inline-grid; place-items: center;
  color: var(--blue);
}
.step .step-ico svg {
  width: 22px; height: 22px; display: block;
  fill: currentColor;
}
.step h3 {
  margin-top: 24px;
  font: 600 20px/26px var(--font-sans);
  letter-spacing: -0.2px;
  color: var(--fg);
}
.step p {
  margin-top: 12px;
  font: 400 14px/22px var(--font-sans);
  color: var(--fg-4);
}
.how-cap {
  margin-top: 32px;
  font: 400 13px var(--font-sans);
  color: var(--fg-5);
  display: inline-flex; align-items: center; gap: 8px;
}
.how-cap svg { width: 14px; height: 14px; }
@media (max-width: 1024px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .how-grid { grid-template-columns: 1fr; } }

/* ───────── compare — Order-Book Diff (single card, two states) ───────── */
/* The stage is a centered 16:9 frame (max-width 1100px) so the card reads
   as a cinematic widescreen rectangle, not an over-wide panel. RAW BOOKS
   and WITH ODDEON labels live in their own row above the clip-path views,
   so both sides of the comparison are always visible regardless of where
   the divider sits. */
.cmp-frame {
  --split: 50%;
  margin-top: 56px;
  position: relative;
  user-select: none;
  touch-action: pan-y;
}
.cmp-stage {
  /* The stage IS the card visually — the cmp-card fills it edge-to-edge
     so the visible bordered rectangle reads as a true cinematic frame.
     Both .cmp-view children are stacked in the SAME grid cell so the
     stage's height = the taller of the two cards' natural content
     heights. Result: no fixed aspect ratio, no padding-driven empty
     space below the price block. The clip-path on each view still does
     the side-by-side reveal. */
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  border-radius: 28px;
  background: transparent;
  overflow: hidden;
}

/* Persistent label row — sits in normal flow above the card, on the plain
   section background. Constrained to the same max-width as the stage so
   the two labels align with the card's left and right edges. */
.cmp-labels {
  max-width: 1100px;
  margin: 0 auto 14px;
  padding: 0 8px;
  display: flex; justify-content: space-between; align-items: center;
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 1.65px;
  text-transform: uppercase;
}
.cmp-labels .cmp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
}
.cmp-labels .cmp-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.cmp-labels .cmp-eyebrow--raw    { color: rgba(255,214,10,0.75); }
.cmp-labels .cmp-eyebrow--raw .dot { background: rgba(255,214,10,0.95); }
.cmp-labels .cmp-eyebrow--oddeon { color: rgba(10,132,255,0.75); flex-direction: row-reverse; }
.cmp-labels .cmp-eyebrow--oddeon .dot { background: rgba(10,132,255,0.95); }
/* Card views — both placed in the SAME grid cell so they overlap.
   The cell's intrinsic height = max(card heights), so the stage hugs
   content with no extra space. Clip-paths reveal each side. */
.cmp-view {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.cmp-view--oddeon { clip-path: inset(0 0 0 var(--split)); }
.cmp-view--raw    { clip-path: inset(0 calc(100% - var(--split)) 0 0); }


/* the card itself — identical frame on both sides.
   Treatment per spec §8.5: low-stop gradient fill, 1px hairline 10% white,
   24px radius, backdrop blur for glass elevation, inset highlight at top
   to suggest a single sheet of glass lifting off the stage. */
.cmp-card {
  /* Card hugs its content (no flex: 1) so the stage grid cell collapses
     to content height. Inner padding 36/36/28 gives breathing room. */
  background: linear-gradient(rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.012) 100%);
  border: 1px solid var(--white-10);
  border-radius: 28px;
  padding: 36px 36px 28px;
  display: flex; flex-direction: column; gap: 22px;
  min-height: 0;
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  /* Inset white highlight only — bottom black inset removed (non-spec
     skeuomorphic depth, §7). Border + gradient + blur do the elevation. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  /* Card needs to fill the grid cell vertically so both sides line up
     even when one side's natural content is slightly taller. */
  flex: 1;
}
.cmp-cardhd {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 22px;
}
.cmp-cardhd .venue-tag {
  font: 600 10px/14px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-5);
}
.cmp-cardhd .venue-glyph {
  width: 22px; height: 22px;
  border: 1px solid var(--border-1); border-radius: 6px;
  display: grid; place-items: center;
  font: 700 10px var(--font-sans);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.2px;
}
.cmp-cardhd .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font: 600 11px/14px var(--font-sans);
  background: rgba(191,90,242,0.12); color: var(--purple);
}
.cmp-cardhd .conf {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 12px var(--font-sans); color: var(--fg);
}
.cmp-cardhd .conf svg { width: 16px; height: 16px; }
.cmp-cardhd .conf .pct { font-variant-numeric: tabular-nums; }

.cmp-title {
  font: 500 24px/30px var(--font-sans);
  letter-spacing: -0.3px;
  color: var(--fg);
}

/* RAW side: simple two-cell price grid */
.cmp-prices-raw {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.px-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 16px 20px;
}
.px-cell .side {
  font: 600 10px/12px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
}
.px-cell.yes .side { color: var(--blue); }
.px-cell.no  .side { color: var(--pink); }
.px-cell .num {
  margin-top: 8px;
  font: 500 28px/32px var(--font-mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.px-cell .sub {
  margin-top: 4px;
  font: 400 11px var(--font-mono);
  color: var(--fg-5);
}

/* ODDEON side: blended price with edge tag and route bar */
.cmp-blend {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.cmp-blend .side {
  font: 600 10px/12px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--blue);
}
.cmp-blend .num {
  font: 500 36px/40px var(--font-mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.cmp-blend .edge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,214,10,0.12); color: var(--yellow);
  font: 600 11px/14px var(--font-sans);
}
.cmp-blend .vs {
  font: 400 13px var(--font-mono);
  color: var(--fg-5);
}
.route-bar {
  margin-top: 10px;
  position: relative;
  height: 6px;
  background: var(--white-06);
  border-radius: 999px;
  overflow: hidden;
}
.route-bar .seg-1 {
  position: absolute; inset: 0 40% 0 0;
  /* 0.20 — between rungs, kept raw to preserve the visual relationship
     with .seg-2 below (0.10/0.20 = 1:2 ratio reads as "main vs minor leg") */
  background: rgba(255,255,255,0.20);
}
.route-bar .seg-2 {
  position: absolute; inset: 0 0 0 60%;
  background: var(--white-10);
}
.route-bar::after {
  content: ''; position: absolute;
  left: 60%; top: -2px; bottom: -2px; width: 1px;
  background: var(--purple);
}
.route-labels {
  margin-top: 10px;
  display: flex; justify-content: space-between;
  font: 400 12px var(--font-mono);
  color: rgba(255,255,255,0.55);
}
.route-labels .v { color: var(--fg-5); }
.route-labels .p { color: var(--fg); }

/* Footer rows */
.cmp-foot {
  display: flex; justify-content: space-between; align-items: center;
  /* No margin-top: auto — the card hugs content now, so the foot sits
     right under the route bar instead of being pushed to a bottom that
     used to be locked by aspect-ratio. */
  font: 400 11px var(--font-mono);
  color: var(--fg-5);
}
.cmp-foot .depth {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(100,210,255,0.10); color: var(--cyan);
  font: 600 10px/12px var(--font-sans);
  letter-spacing: 0.4px; text-transform: uppercase;
}

/* ── Divider line — feathered top/bottom, position-driven shadow boost ──
   At rest the divider carries a blue glow; near the win edge (split ≤ ~10%)
   JS mixes in a third gold-tinted shadow stop (--win-progress 0..1) that
   reads as "you're approaching the edge." */
/* Divider, hints, and handle are constrained to the card area. cmp-view
   now uses uniform 32px padding so top: 32 / bottom: 32 puts the slider
   chrome flush with the card's edges. */
.cmp-divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--split);
  width: 2px;
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(10,132,255,0.6) 10%,
    rgba(10,132,255,0.6) 90%,
    transparent 100%);
  /* base shadow; JS rewrites this when --split is in the win zone */
  box-shadow:
    0 0 5px rgba(10,132,255,0.5),
    0 0 15px rgba(10,132,255,0.3);
  transition: box-shadow 0.2s ease-out, width 0.15s, background 0.15s;
}

/* ── Slide-hint chevrons — left-drifting, staggered breathing ──
   Four 16px chevrons hovering to the left of the divider, telling the eye
   "drag this left." Drift never goes right. JS dims/fades them based on
   handle position so they fade out once you're at the win edge. */
.cmp-hints {
  position: absolute; top: 0; bottom: 0;
  left: var(--split);
  width: 0;
  pointer-events: none;
  z-index: 4;
}
.cmp-hint {
  position: absolute;
  top: var(--top); left: -30px;
  width: 16px; height: 16px;
  color: rgba(10,132,255,0.85);
  opacity: 0.3;
  animation: slide-hint 1.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transition: opacity 0.2s ease-out;
}
.cmp-hint svg { width: 100%; height: 100%; }

/* ── Handle — 48px puck with breathing halo + overshoot press ──
   Stage uses symmetric padding now (labels moved out), so the card's
   vertical center matches the stage's vertical center. */
.cmp-handle {
  position: absolute; top: 50%; left: var(--split);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(18,18,22,0.95), rgba(14,14,18,0.98));
  border: 1.5px solid rgba(10,132,255,0.6);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  display: grid; place-items: center;
  color: rgba(10,132,255,0.95);
  cursor: grab;
  touch-action: none;
  z-index: 6;
  /* base box-shadow — blue halos only, no dark drop shadow (spec §7).
     The keyframe handle-glow-pulse below stays in pure blue too; JS adds
     a position-driven gold trim near the win edge. */
  box-shadow:
    0 0 40px rgba(10,132,255,0.30),
    0 0 80px rgba(10,132,255,0.15);
  animation: handle-glow-pulse 2s ease-in-out infinite;
  /* overshoot-spring on press / hover */
  transform: translate(-50%, -50%) scale(1);
  transition:
    transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.15s ease-out,
    box-shadow 0.2s ease-out,
    background 0.2s ease-out;
}
.cmp-handle:hover  { transform: translate(-50%, -50%) scale(1.08); }
.cmp-handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.04); }
.cmp-handle:focus-visible { outline: none; border-color: var(--fg); }
.cmp-handle .handle-glyph {
  width: 14px; height: 14px;
  display: block;
  /* No drop-shadow filter (spec §7). The parent .cmp-handle's blue
     halo stack reads through plenty without per-glyph glow. */
}

.cmp-frame.dragging { cursor: ew-resize; }
.cmp-frame.dragging .cmp-handle,
.cmp-frame.dragging .cmp-divider { transition: none; }

/* ── Resting motion keyframes ────────────────────────────────────── */
@keyframes handle-glow-pulse {
  /* Pure blue halos; no dark drop shadow (spec §7). */
  0%, 100% {
    box-shadow:
      0 0 40px rgba(10,132,255,0.30),
      0 0 80px rgba(10,132,255,0.15);
  }
  50% {
    box-shadow:
      0 0 60px rgba(10,132,255,0.60),
      0 0 120px rgba(10,132,255,0.30),
      0 0 160px rgba(10,132,255,0.10);
  }
}
@keyframes slide-hint {
  0%, 100% { opacity: 0.3; transform: translateX(0); }
  50%      { opacity: 1;   transform: translateX(-10px); }
}

/* ── Celebration — fires at split ≤ 5%; full sequence is ~1.2s ──
   Handle pop, star-spin with prism shadow, shockwave, three color rings,
   24 confetti particles, five card flares, viewport flash, fullpage glow,
   container shake. The right edge stays flat — asymmetric reward. */
.cmp-celebration {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
}
.cmp-frame.celebrating .cmp-celebration { opacity: 1; }
/* Container shake removed for a calmer celebration moment. */
.cmp-frame.celebrating .cmp-handle {
  animation:
    handle-glow-pulse 2s ease-in-out infinite,
    celebration-handle-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cmp-frame.celebrating .cmp-handle .handle-glyph {
  animation: celebration-star-spin 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Hint chevrons fade out the moment celebration fires */
.cmp-frame.celebrating .cmp-hint { opacity: 0; }

/* Anchor for shockwave + rings — sits at the win edge where the handle
   has come to rest. Symmetric padding now, so 50% matches handle. */
.celebration-anchor {
  position: absolute;
  left: var(--split); top: 50%;
  width: 0; height: 0;
}

.celebration-shockwave {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.cmp-frame.celebrating .celebration-shockwave {
  animation: celebration-shockwave 1000ms ease-out forwards;
}

.celebration-ring {
  position: absolute; left: 0; top: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.celebration-ring--orange {
  border: 2px solid rgba(255,159,10,0.65);
  box-shadow: 0 0 40px rgba(255,159,10,0.40), 0 0 60px rgba(255,159,10,0.20) inset;
}
.celebration-ring--cyan {
  border: 2px solid rgba(100,210,255,0.65);
  box-shadow: 0 0 40px rgba(100,210,255,0.40), 0 0 60px rgba(100,210,255,0.20) inset;
}
.celebration-ring--magenta {
  border: 2px solid rgba(255,100,130,0.65);
  box-shadow: 0 0 40px rgba(255,100,130,0.40), 0 0 60px rgba(255,100,130,0.20) inset;
}
.cmp-frame.celebrating .celebration-ring--orange  { animation: celebration-ring 800ms ease-out forwards; }
.cmp-frame.celebrating .celebration-ring--cyan    { animation: celebration-ring 900ms ease-out 70ms forwards; }
.cmp-frame.celebrating .celebration-ring--magenta { animation: celebration-ring 1000ms ease-out 140ms forwards; }

/* Confetti — 24 particles, randomized direction + colour at fire time. */
.celebration-confetti {
  position: absolute; left: var(--split); top: 50%;
  width: 0; height: 0;
}
.confetti {
  position: absolute; left: 0; top: 0;
  width: var(--size, 6px); height: var(--size, 6px);
  border-radius: 50%;
  background: var(--c, #fff);
  box-shadow: 0 0 8px var(--c, #fff);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
}
.cmp-frame.celebrating .confetti {
  animation: celebration-particle var(--dur, 800ms) cubic-bezier(0.16, 1, 0.3, 1) var(--del, 0ms) forwards;
}

/* Viewport-fixed flash + fullpage afterglow — radial cyan/pink bloom from
   the win-edge area, then a 1.2s sustained warm wash. */
.celebration-flash,
.celebration-fullpage-glow {
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
}
.celebration-flash {
  background:
    radial-gradient(circle at 20% 50%,
      rgba(100,210,255,0.20) 0%,
      rgba(255,100,130,0.06) 40%,
      transparent 70%);
}
.celebration-fullpage-glow {
  background: linear-gradient(135deg,
    rgba(100,210,255,0.06) 0%,
    rgba(255,100,130,0.04) 50%,
    rgba(255,159,10,0.02) 100%);
}
.cmp-frame.celebrating ~ .celebration-flash         { animation: celebration-flash 600ms ease-out forwards; }
.cmp-frame.celebrating ~ .celebration-fullpage-glow { animation: celebration-fullpage-glow 1200ms ease-out forwards; }

/* ── Reactive keyframes ──────────────────────────────────────────── */
@keyframes celebration-handle-pop {
  0%   { transform: translate(-50%, -50%) scale(1); }
  20%  { transform: translate(-50%, -50%) scale(1.6); }
  45%  { transform: translate(-50%, -50%) scale(0.85); }
  65%  { transform: translate(-50%, -50%) scale(1.15); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes celebration-star-spin {
  0% {
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 4px rgba(10,132,255,0.4));
  }
  50% {
    transform: rotate(180deg) scale(1.25);
    filter: drop-shadow(0 0 12px rgba(10,132,255,0.7));
  }
  100% {
    transform: rotate(360deg) scale(1);
    filter: drop-shadow(0 0 4px rgba(10,132,255,0.4));
  }
}
@keyframes celebration-shockwave {
  0%   { opacity: 0.5; border-width: 3px;   transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0;   border-width: 0.5px; transform: translate(-50%, -50%) scale(20); }
}
@keyframes celebration-ring {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(12); }
}
@keyframes celebration-particle {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  15%  { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--px) * 1px), calc(-50% + var(--py) * 1px)) scale(0);
    opacity: 0;
  }
}
@keyframes celebration-flash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes celebration-fullpage-glow {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  40%  { opacity: 0.6; }
  100% { opacity: 0; }
}
@keyframes celebration-shake {
  0%, 100% { transform: translate(0, 0); }
  10%      { transform: translate(-3px, 1px); }
  20%      { transform: translate(3px, -1px); }
  30%      { transform: translate(-2px, 1px); }
  40%      { transform: translate(2px, 0); }
  50%      { transform: translate(-1px, 0); }
}

/* ── Border-glow tooltip (spec §6.9, §8.11) ──
   A glass pill that calls attention to a moment of agency. The border
   breathes blue → purple over 3s; the pill bobs ±3px on a 2s loop.
   Used twice on the page:
     .tooltip-route--phone — below the iPhone, armed by default; dismisses
       (fades) on the first genuine slider interaction. Copy points at the
       size slider since that's the only true user-driven control on the
       device — the auto-cycling state machine plays itself otherwise.
     .tooltip-route--cmp   — replaces the static "Drag to compare" caption.
       Dormant on load (looks like plain text); arms on first hover of the
       cmp-frame (per spec §10.1 "render the caption as a border-glow
       tooltip on first hover"); dismisses to plain text on first
       pointerdown on the frame or first keydown on the handle. Once
       dismissed, will not re-arm. */
.tooltip-route {
  /* Resting/dormant state — visually equivalent to the previous .cmp-cap
     (centered plain caption) so the page reads identically until the
     tooltip is armed. */
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-5);
  font: 500 13px/1 var(--font-sans);
  letter-spacing: 0.2px;
  transition:
    color       280ms var(--ease),
    background  280ms var(--ease),
    border-color 280ms var(--ease),
    box-shadow  280ms var(--ease),
    opacity     380ms var(--ease);
}
.tooltip-route::after {
  /* Pointer triangle — only visible when armed. Sits at the TOP of the
     tooltip pointing UP (the tooltip lives below its trigger in our
     placement, so the triangle points back at the device above). */
  content: '';
  position: absolute;
  left: 50%; top: -5px;
  width: 10px; height: 10px;
  background: transparent;
  border-top:  1px solid transparent;
  border-left: 1px solid transparent;
  transform: translateX(-50%) rotate(45deg);
  transition: background 280ms var(--ease), border-color 280ms var(--ease);
}
.tooltip-route.is-armed {
  background: var(--white-04);
  border-color: rgba(10,132,255,0.55);
  color: var(--fg);
  letter-spacing: -0.05px;
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  animation:
    border-glow 3s ease-in-out infinite,
    tooltipBob  2s ease-in-out infinite;
}
.tooltip-route.is-armed::after {
  background: var(--white-04);
  border-top-color:  rgba(10,132,255,0.55);
  border-left-color: rgba(10,132,255,0.55);
}
/* CMP variant — no pointer triangle (tooltip sits in flow, not anchored
   to a single target above). Spec §8.11: "same component, no pointer". */
.tooltip-route--cmp::after { display: none; }

/* Phone variant — when dismissed, fade out entirely (it has nothing more
   to say once the user has scrubbed the slider). The CMP variant simply
   loses .is-armed and returns to plain text dormant — no extra style
   needed for that one. */
.tooltip-route--phone.is-dismissed {
  opacity: 0;
  pointer-events: none;
}

@keyframes border-glow {
  0%, 100% {
    border-color: rgba(10,132,255,0.55);
    box-shadow:
      0 0 0 1px rgba(10,132,255,0.18),
      0 0 18px  rgba(10,132,255,0.20);
  }
  50% {
    border-color: rgba(191,90,242,0.55);
    box-shadow:
      0 0 0 1px rgba(191,90,242,0.18),
      0 0 18px  rgba(191,90,242,0.20);
  }
}
@keyframes tooltipBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Wrappers for the two tooltip placements. Both are centered text blocks
   so the inline-flex tooltip pill centers within. */
.iphone-tip-wrap {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  text-align: center;
}
.cmp-cap-wrap {
  margin-top: 16px;
  text-align: center;
}

/* delta tally strip */
.delta-strip {
  margin-top: 56px;
  border: 1px solid var(--border-1);
  border-radius: 24px;
  padding: 32px 36px;
  background: linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.005));
}
.delta-lead {
  font: 300 italic 26px/36px var(--font-serif);
  color: var(--fg);
  max-width: 760px;
}
.delta-lead .em {
  font-style: italic; color: var(--yellow); font-weight: 400;
}
.delta-tally {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--border-1);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.delta-cell {
  padding: 0 28px;
  border-right: 1px solid var(--border-1);
}
.delta-cell:first-child { padding-left: 0; }
.delta-cell:last-child { border-right: 0; padding-right: 0; }
.delta-cell .l {
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-stone);
}
.delta-cell .v {
  margin-top: 12px;
  display: flex; align-items: baseline; gap: 6px;
  font: 500 32px/36px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  letter-spacing: -0.6px;
}
.delta-cell .v .u {
  font: 400 13px var(--font-sans);
  color: var(--fg-4);
  letter-spacing: 0;
}
.delta-cell .sub {
  margin-top: 6px;
  font: 400 12px var(--font-mono);
  color: var(--fg-5);
}

@media (max-width: 768px) {
  /* On narrow viewports the card needs a minimum slider stage height so
     the drag gesture has room to land. */
  .cmp-stage { min-height: 540px; }
  .cmp-card { padding: 22px; gap: 16px; }
  .cmp-title { font-size: 18px; line-height: 24px; }
  .cmp-blend .num { font-size: 28px; line-height: 32px; }
  .cmp-labels { padding: 0 4px; }
  .cmp-divider, .cmp-hints { top: 0; bottom: 0; }
  .delta-tally { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .delta-cell { border-right: 0; padding: 0 12px; }
  .delta-cell:nth-child(2n) { padding-right: 0; }
  .delta-cell .v { font-size: 24px; line-height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-handle { transition: none; animation: none; }
  .cmp-hint   { animation: none; }
  .cmp-frame.celebrating .cmp-handle,
  .cmp-frame.celebrating .cmp-handle .handle-glyph,
  .cmp-frame.celebrating .cmp-stage,
  .cmp-frame.celebrating .celebration-shockwave,
  .cmp-frame.celebrating .celebration-ring,
  .cmp-frame.celebrating .confetti,
  .cmp-frame.celebrating ~ .celebration-flash,
  .cmp-frame.celebrating ~ .celebration-fullpage-glow {
    animation: none !important;
  }
}

/* ───────── iPhone demo card ───────── */
.demo-grid {
  margin-top: 64px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px;
  align-items: center;
}
@media (max-width: 1024px) {
  .demo-grid { grid-template-columns: 1fr; gap: 48px; }
}
.demo-copy h3 {
  font: 300 30px/36px var(--font-serif);
  color: var(--fg);
  letter-spacing: -0.2px;
  margin-top: 16px;
}
.demo-copy h3 .it { font-family: var(--font-serif); font-style: italic; color: var(--fg); }
.demo-copy p { margin-top: 16px; font: 400 15px/24px var(--font-sans); color: var(--fg-3); max-width: 460px; }
.demo-copy .row {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* ── iPhone "breathing float" stage ──────────────────────────────────
   The device floats vertically on a 6s ease-in-out cycle. Crucially the
   blue halo is a sibling, not a child, of the float wrapper — as the
   device lifts the halo stays put, selling "suspended in space" instead
   of "shoved up and down with its background." 40px stage padding
   absorbs the 20px peak so it never crops at the section edge. */
.iphone-stage {
  position: relative;
  padding: 40px 0;
  margin: 0 auto;
}
.iphone-halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 60%,
      rgba(10,132,255,0.20) 0%,
      rgba(10,132,255,0.08) 30%,
      rgba(10,132,255,0.02) 55%,
      transparent 75%);
  filter: blur(var(--blur-card));
}
.iphone-float {
  position: relative;
  z-index: 1;
  animation: iphone-float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes iphone-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }
}
@media (prefers-reduced-motion: reduce) {
  .iphone-float { animation: none; }
}

.iphone {
  width: 360px; height: 740px;
  border: 1px solid var(--white-10);
  border-radius: 52px;
  background: #0a0d12;
  position: relative;
  margin: 0 auto;
  /* No drop shadow (spec §7). Ambient depth comes from the sibling
     .iphone-halo radial bloom — the device reads as suspended in space
     without a skeuomorphic ground shadow. */
  overflow: hidden;
}
.iphone .island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 30px; background: #000; border-radius: 999px;
  z-index: 4;
}
.iphone .status {
  position: absolute; top: 6px; left: 24px; right: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font: 600 13px/16 var(--font-sans);
  color: var(--fg);
  z-index: 3;
}
.iphone .status .right-glyphs { display: inline-flex; gap: 6px; opacity: 0.9; }
.iphone .status .right-glyphs svg { width: 14px; height: 14px; }
.iphone .screen {
  /* top is the bottom of the bezel zone (status bar + dynamic island).
     The 100px value leaves clear daylight between the system glyphs
     above and the first line of app content below. */
  position: absolute; top: 100px; left: 0; right: 0; bottom: 0;
  padding: 8px 18px 96px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Workspace header — "Your Book" h4 removed; the live-status indicator
   stands alone as a small tracked eyebrow at the top of the screen. */
.workspace-hd { padding: 8px 4px 14px; }
.workspace-hd .sub {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 10px/14px var(--font-sans);
  letter-spacing: 1.65px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.workspace-hd .sub .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  animation: subtlePulse 2.4s ease-in-out infinite;
}
@keyframes subtlePulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 999px;
  color: var(--fg-5);
  font: 400 14px var(--font-sans);
}
.search svg { width: 14px; height: 14px; }
.tabs { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.tab-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-1);
  background: transparent;
  font: 500 12px var(--font-sans);
  color: var(--fg-4);
}
.tab-pill.active {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.tab-pill .ct { color: var(--fg-5); }
.tab-pill.active .ct { color: rgba(255,255,255,0.85); }
/* ── In-product arbitrage view (Spread Ladder) ──────────────────────────
   One market. Three quotes on a number line.
   PM and LM render as monochrome white (60%) per spec — external venue
   glyphs never wear their brand colours. The OD marker is purple (the
   routing colour) and the only luminous element on the canvas. The edge
   delta is yellow (arbitrage / pricing premium concept). */

.arb-card {
  margin-top: 14px;
  padding: 16px 18px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 18px;
}

.arb-hd .cat {
  font: 600 10px/14px var(--font-sans);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(10,132,255,0.7);
}
.arb-hd .q {
  margin-top: 8px;
  font: 500 15px/20px var(--font-sans);
  color: var(--fg);
}
.arb-hd .meta {
  margin-top: 6px;
  font: 400 11px var(--font-mono);
  color: var(--fg-5);
}

/* Spread ladder block */
.spread {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-1);
}
.spread-eyebrow {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 9px/12px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-stone);
}
.spread-eyebrow .ms {
  font: 400 10px var(--font-mono);
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--fg-5);
}

/* End labels (PM / LM) live in their own flow rows — one above the track
   and one below — so they can never collide with the eyebrow or the OD
   annotation. Only the OD marker uses absolute positioning. */
.spread-ends {
  display: flex; justify-content: space-between;
  margin-top: 14px;
}
.spread-ends .end-lbl {
  display: flex; flex-direction: column; gap: 2px;
}
.spread-ends .end-lbl:last-child { text-align: right; align-items: flex-end; }
.spread-ends .lbl {
  font: 600 9px/12px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.spread-ends .px {
  font: 400 11px var(--font-mono);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* Track itself — just a 2px bar with end ticks and the OD marker */
.spread-track {
  position: relative;
  height: 2px;
  background: var(--white-10);
  border-radius: 999px;
  margin: 10px 0 0;
}
.spread-track .end-tick {
  position: absolute; top: -7px; bottom: -7px;
  width: 1px;
  background: rgba(255,255,255,0.55);
}
.spread-track .end-tick.pm { left: 0; }
.spread-track .end-tick.lm { right: 0; }

/* Oddeon marker — the focal */
.spread-track .od {
  position: absolute;
  top: 50%;
  /* set by inline style: left = (OD - PM) / (LM - PM) */
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow:
    0 0 0 4px rgba(191,90,242,0.18),
    0 0 14px rgba(191,90,242,0.55);
  animation: subtlePulse 2.6s ease-in-out infinite;
}
.spread-track .od::before {
  /* short connector line between OD marker and the annotation block below.
     Length tuned to terminate where .spread-od-anno's lbl text begins, so
     the marker visually "drops" into the route name. */
  content: ''; position: absolute;
  left: 50%; top: 100%;
  width: 1px; height: 8px;
  background: rgba(191,90,242,0.55);
  transform: translateX(-50%);
}

.spread-od-anno {
  position: relative;
  margin-top: 14px;
  text-align: center;
}
.spread-od-anno .lbl {
  display: block;
  font: 600 9px/12px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--purple);
}
.spread-od-anno .num {
  display: block;
  margin-top: 4px;
  font: 500 26px/30px var(--font-mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.spread-od-anno .edge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  background: rgba(255,214,10,0.12); color: var(--yellow);
  font: 600 10px/12px var(--font-sans);
  letter-spacing: 0.2px;
  padding: 4px 10px; border-radius: 999px;
}

/* Sourced-from row */
.sourced {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-1);
  display: flex; justify-content: space-between; align-items: center;
  font: 400 11px var(--font-mono);
  color: rgba(255,255,255,0.55);
}
.sourced .alloc { color: var(--fg); }

/* ── State machine — list ↔ arb ──────────────────────────────────────
   Two macro-states swap via opacity inside a single absolutely-sized
   container, so the screen's flow doesn't shift when the demo cycles. */
.demo-states {
  position: relative;
  margin-top: 14px;
  flex: 1;
  min-height: 0;
}
.state {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
  pointer-events: none;
  overflow: hidden;
}
.iphone .screen[data-state="list"] .state-list,
.iphone .screen[data-state="arb"]  .state-arb {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Live edge counter in workspace-hd */
.workspace-hd .sub .count {
  margin-left: 4px;
  color: rgba(255,214,10,0.85);
  font-variant-numeric: tabular-nums;
}

/* Market list rows */
.market-row {
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  margin-bottom: 8px;
  transition: border-color var(--t-fast) var(--ease);
}
.market-row.dimmed { opacity: 0.55; }
.market-row.has-edge {
  border-color: rgba(255,214,10,0.30);
  background: linear-gradient(180deg, rgba(255,214,10,0.04), rgba(255,255,255,0.02));
}
.market-row .cat {
  font: 600 9px/12px var(--font-sans);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(10,132,255,0.7);
}
.market-row .q {
  margin: 6px 0 0;
  font: 500 13px/18px var(--font-sans);
  color: var(--fg);
}
.market-row .row-foot {
  margin-top: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.market-row .venue-px {
  font: 400 11px var(--font-mono);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0;
}
.market-row .edge-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: rgba(255,214,10,0.14);
  color: var(--yellow);
  font: 600 10px/12px var(--font-sans);
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.market-row.has-edge .edge-chip {
  animation: edge-pulse 2.2s ease-in-out infinite;
}
.market-row .no-edge {
  font: 400 11px var(--font-sans);
  color: var(--fg-5);
}
@keyframes edge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,214,10,0.45); }
  50%      { box-shadow: 0 0 0 7px rgba(255,214,10,0);    }
}

/* Size-aware slider — Flow B inline */
.size-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-1);
}
.size-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font: 600 9px/12px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-stone);
}
.size-head .val {
  font: 500 13px/16px var(--font-mono);
  color: var(--fg);
  letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums;
  flex: 1;
  margin-left: 8px;
}
.size-head .edge {
  font: 600 10px/14px var(--font-sans);
  background: rgba(255,214,10,0.12);
  color: var(--yellow);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px; text-transform: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.size-input {
  -webkit-appearance: none; appearance: none;
  display: block;
  width: 100%; margin-top: 12px;
  height: 4px;
  background: linear-gradient(to right,
    var(--purple) 0%,
    var(--purple) var(--size-pct, 44%),
    rgba(255,255,255,0.10) var(--size-pct, 44%),
    rgba(255,255,255,0.10) 100%);
  border-radius: 999px;
  outline: 0;
  cursor: ew-resize;
}
.size-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--purple);
  border: 2px solid #fff;
  box-shadow:
    0 0 0 4px rgba(191,90,242,0.20),
    0 0 14px rgba(191,90,242,0.55);
  cursor: ew-resize;
}
.size-input::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--purple);
  border: 2px solid #fff;
  box-shadow: 0 0 14px rgba(191,90,242,0.55);
  cursor: ew-resize;
}
.size-input::-moz-range-track { background: transparent; height: 4px; border: 0; }
.size-foot {
  margin-top: 10px;
  display: flex; justify-content: space-between; align-items: center;
  font: 400 11px var(--font-mono);
  color: var(--fg-4);
}
.size-foot .alloc { color: var(--fg); }

/* Route CTA — spec §8.2 primary pill: white fill, full pill radius, layered
   inset highlight + ambient drop shadow. The label sits left, the routed
   price sits right in mono with tabular nums; an inline diagonal arrow on
   the right reads as the "go" indicator without competing with the price. */
.arb-cta {
  margin-top: 14px;
  width: 100%;
  background: #FFFFFF; color: #000;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font: 500 14px/16px var(--font-sans);
  letter-spacing: -0.1px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  /* inset highlight only — no drop shadow (spec §7, §8.2). Lift on hover
     comes from translateY, not a deeper shadow. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform var(--t) var(--ease);
}
.arb-cta:hover { transform: translateY(-1px); }
.arb-cta:active { transform: translateY(0); }

.arb-cta .cta-label {
  display: inline-flex; align-items: center;
  color: #000;
}
.arb-cta .cta-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px/16px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: rgba(0,0,0,0.55);
}
.arb-cta .cta-meta .arrow {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #000;
  color: #fff;
}
.arb-cta .cta-meta .arrow svg { width: 10px; height: 10px; }

.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 16px 16px;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  border-top: var(--border-app);
  background: linear-gradient(to top, #0a0d12 60%, transparent);
}
.tabbar .tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 500 10px var(--font-sans); color: var(--fg-5);
  position: relative;
}
.tabbar .tab.active { color: var(--blue); font-weight: 600; }
.tabbar .tab svg { width: 22px; height: 22px; }
.tab-route { position: relative; }
.tab-route .halo {
  position: absolute; width: 56px; height: 56px;
  top: -16px; left: 50%; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,132,255,0.55) 0%, rgba(10,132,255,0.18) 40%, rgba(10,132,255,0) 70%);
  animation: captureGlow 1.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes captureGlow {
  0%,100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50%     { opacity: 1;   transform: translateX(-50%) scale(1.4); }
}
.tab-route .glyph { position: relative; z-index: 1; width: 26px; height: 26px; display: grid; place-items: center; }

/* ───────── pricing ───────── */
.pricing-grid {
  margin-top: 64px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  align-items: center;
}
@media (max-width: 1024px) { .pricing-grid { grid-template-columns: 1fr; gap: 32px; } }
.pricing-copy h3 {
  font: 300 36px/44px var(--font-serif); color: var(--fg);
  letter-spacing: -0.4px;
}
.pricing-copy p {
  margin-top: 16px; font: 400 16px/26px var(--font-sans); color: var(--fg-3); max-width: 480px;
}
.card-pricing {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-1);
  border-radius: 20px;
  padding: 28px;
  background-image:
    linear-gradient(145deg, rgba(255,214,10,0.05), rgba(255,214,10,0.016)),
    radial-gradient(at 80% 30%, rgba(255,214,10,0.06) 0%, transparent 55%);
  position: relative;
}

/* ── Card sheen — diagonal sweep overlay (spec §6.7) ──
   Base variant lights up on hover (white tint, 1500ms transition).
   Gold variant fires exactly once when the card scrolls into view,
   driven by the existing IntersectionObserver that adds `.in` to
   .reveal items. Hover never re-triggers the gold sweep — the brand's
   "single warm moment, given not invited" (spec §16.7). */
.card-sheen { position: relative; overflow: hidden; }
.card-sheen::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,0.08) 50%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: -150% 0;
  pointer-events: none;
  transition: background-position 1500ms var(--ease-out-expo);
}
.card-sheen:hover::after { background-position: 150% 0; }

/* Gold variant — yellow tint, IO-triggered sheen on enter, no hover.
   Transition is disabled here so hover state can't drag the sheen
   across; only the keyframe animation paints it, exactly once. */
.card-sheen--gold::after {
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,214,10,0.10) 50%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: -150% 0;
  transition: none;
}
.card-sheen--gold:hover::after { background-position: -150% 0; }
.card-sheen--gold.in::after {
  animation: gold-sheen 1500ms var(--ease-out-expo) 1;
}
@keyframes gold-sheen {
  0%   { background-position: -150% 0; }
  100% { background-position:  150% 0; }
}

.tier-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.tier-row .tier {
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 1.65px;
  text-transform: uppercase;
  color: var(--fg-2);
}
.micro-limited {
  display: inline-flex; align-items: center;
  background: var(--yellow); color: #000;
  font: 700 10px/12px var(--font-sans);
  letter-spacing: 0.4px;
  padding: 4px 8px;
  border-radius: 6px;
}
.price-row { display: flex; align-items: baseline; gap: 12px; }
.price-row .num {
  font: 600 44px/48px var(--font-sans);
  letter-spacing: -0.88px; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.price-row .strike {
  font: 400 18px var(--font-sans);
  color: var(--fg-5);
  text-decoration: line-through;
  text-decoration-color: var(--fg-5);
}
.price-row .per { color: var(--fg-4); font: 400 15px var(--font-sans); }
.price-sub { margin-top: 8px; font: 400 13px var(--font-sans); color: var(--fg-4); }

.feature-list { margin-top: 20px; display: grid; gap: 9px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; list-style: none; font: 400 14px/20px var(--font-sans); color: var(--fg); }
.feature-list .check { color: var(--yellow); flex-shrink: 0; margin-top: 2px; }

/* ── Pricing card responsive scale ─────────────────────────────────────
   Once the pricing grid collapses to a single column (≤lg, 1024px) the
   card no longer needs to feel like a 480px-tall feature panel. Trim
   padding and the headline price so it sits as a compact, scannable
   summary card on tablet / mobile widths instead of dominating the
   viewport. Two stops:
     ≤lg (1024)  — padding 32, price 44/44, tighter feature gap
     ≤sm (640)   — padding 24, price 36/36, tier-row gap collapsed */
@media (max-width: 1024px) {
  .card-pricing { padding: 32px; border-radius: 20px; }
  .tier-row { margin-bottom: 20px; }
  .price-row .num { font-size: 44px; line-height: 44px; letter-spacing: -0.88px; }
  .price-row .strike { font-size: 16px; }
  .price-row .per { font-size: 14px; }
  .feature-list { margin-top: 20px; gap: 10px; }
  .feature-list li { font-size: 14px; line-height: 20px; }
  .reserve { margin-top: 20px; padding-top: 18px; }
}
@media (max-width: 640px) {
  .card-pricing { padding: 24px; border-radius: 16px; }
  .price-row .num { font-size: 36px; line-height: 36px; letter-spacing: -0.72px; }
  .price-row { flex-wrap: wrap; gap: 8px; }
  .feature-list { margin-top: 18px; }
}

/* ── Reserve-spot email pill ───────────────────────────────────────────
   Single pill with the input on the left and a white CTA button on the
   right. Dark surface, hairline border, no internal divider — input and
   button live inside the same outer pill. On submit the button label
   flips to "You're routed." (present-tense, spec §2.1). */
.reserve {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-1);
}
.reserve-form {
  display: flex; align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 20px;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  transition: border-color var(--t-fast) var(--ease);
}
.reserve-form:focus-within { border-color: var(--white-30); }

.reserve-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0; outline: 0;
  padding: 10px 0;
  color: var(--fg);
  font: 400 14px/20px var(--font-sans);
}
.reserve-input::placeholder { color: var(--fg-5); }
.reserve-input:-webkit-autofill { -webkit-text-fill-color: var(--fg); transition: background-color 0s 99999s; }

.reserve-btn {
  flex: none;
  background: #FFFFFF; color: #000;
  border: 0; border-radius: 999px;
  padding: 11px 22px;
  font: 500 13px/16px var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  /* inset highlight only — no drop shadow (spec §7, §8.2) */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.reserve-btn:hover { transform: translateY(-1px); }
.reserve-btn:disabled { cursor: default; transform: none; }

.reserve-form.submitted .reserve-input {
  pointer-events: none;
  opacity: 0.55;
}
.reserve-form.submitted .reserve-btn {
  background: var(--white-10);
  color: var(--fg);
  box-shadow: none;
}
.reserve-form.submitted .reserve-btn::before {
  content: '✓ ';
  color: var(--green);
  margin-right: 4px;
}
.reserve-err {
  display: none;
  margin: 10px 2px 0;
  font: 400 12px/16px var(--font-sans);
  color: #FF6B7E;
  letter-spacing: 0.01em;
}

/* ───────── testimonial ───────── */
.testimonial {
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  padding: 120px 0;
  text-align: center;
}
.testimonial blockquote {
  font: 300 italic 30px/48.75px var(--font-serif);
  color: var(--fg);
  max-width: 880px;
  margin: 0 auto;
}
.testimonial cite {
  margin-top: 32px;
  font-style: normal;
  display: block;
  font: 500 13px var(--font-sans);
  letter-spacing: 1.65px;
  text-transform: uppercase;
  color: var(--fg-stone);
}
@media (max-width: 768px) {
  .testimonial { padding: 72px 0; }
  .testimonial blockquote { font-size: 22px; line-height: 32px; }
}

/* ───────── footer — single integrated row ─────────
   Brand-lockup + tagline ride the same baseline on the left;
   the three nav columns float to the right and share the same row.
   On narrow viewports the row breaks into stacks but stays compact. */
.site-footer {
  /* Bottom padding tightened to 12px so the copyright row sits 12px from
     the bottom edge — same chrome inset as the topbar. */
  padding: 96px 0 12px;
  border-top: 1px solid var(--border-1);
}
.footer-row {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-brand {
  display: inline-flex; align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.footer-tag {
  font: 400 15px/1 var(--font-sans);
  color: var(--fg-3);
  margin: 0 0 0 20px;
  position: relative;
  padding-left: 20px;
}
/* hairline divider — visually links brand-lockup and tagline as one
   signature unit while keeping their identities distinct */
.footer-tag::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 16px;
  background: var(--border-2);
  transform: translateY(-50%);
}
.footer-tag .it {
  font-family: var(--font-serif); font-style: italic; color: var(--blue);
}
.footer-cols {
  margin-left: auto;
  display: flex;
  /* Gap collapses with viewport so the columns never get squeezed thin
     enough to wrap a link label (was the source of the X/Twitter ↔
     LinkedIn collision). clamp(28px, 4vw, 56px) keeps the resting
     spacing identical at ≥1400px and trims gracefully below. */
  gap: clamp(28px, 4vw, 56px);
}
.footer-cols section {
  display: flex; flex-direction: column;
}
.footer-cols h4 {
  font: 600 11px/14px var(--font-sans);
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--fg-stone);
  margin: 0 0 10px;
}
.footer-cols a {
  display: block;
  /* Tightened to 13/20 and dropped from 50% → 40% white — the column
     links now read as quiet auxiliary nav, not a second visual focus.
     white-space: nowrap prevents "X / Twitter" wrapping into the next
     row when the column gets narrow. */
  font: 400 13px/20px var(--font-sans);
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.footer-cols a:hover { color: var(--fg); }
.copyright {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--border-1);
  font: 400 12px var(--font-sans);
  color: var(--fg-5);
}

@media (max-width: 768px) {
  .site-footer { padding: 64px 0 12px; }
  .footer-row { gap: 32px; }
  .footer-brand { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-cols { margin-left: 0; gap: 32px; flex-wrap: wrap; }
}

/* ───────── reveal ───────── */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero canvas { display: none; }
  /* Foil is decoration, not content — collapse to solid white when the
     user opts out of motion (spec §6.5). */
  .foil {
    background-image: none;
    -webkit-text-fill-color: var(--fg);
    color: var(--fg);
  }
}

/* ─── Phase 2 additions ─────────────────────────────────────────────────
   Built/Routed/Live + Why Now reuse .delta-tally / .delta-cell verbatim.
   New tokens below: a green "live" dot, source caption, TEE-onboarding
   two-column block + mock login pills, and the 4-pillar roadmap strip. */

/* tighter pacing on the two "punctuation" stat strips above How-It-Works */
section.block.strip-built,
section.block.strip-now { padding: 96px 0; }
section.block.strip-built { border-top: 0; }

/* live status dot — used in the Built/Routed/Live strip */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.16), 0 0 14px rgba(48, 209, 88, 0.45);
  vertical-align: 2px; margin-right: 10px;
}

/* source/citation caption below a stat strip */
.strip-sources {
  margin-top: 20px;
  font: 400 12px var(--font-mono);
  color: var(--fg-5);
  letter-spacing: 0.04em;
}

/* ─── Onboarding (TEE wallet) callout ─── */
section.block.strip-onboard { padding: 120px 0; }
.onboard-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: center; margin-top: 32px;
}
@media (max-width: 1024px) { .onboard-grid { grid-template-columns: 1fr; gap: 40px; } }
.onboard-copy h2 { font-size: 40px; line-height: 48px; }
.onboard-copy > p {
  margin-top: 20px;
  font: 400 16px/26px var(--font-sans);
  color: var(--fg-3);
  max-width: 56ch;
}
.onboard-list {
  margin-top: 24px; padding: 0; list-style: none;
  display: grid; gap: 14px;
}
.onboard-list li {
  font: 400 14px/22px var(--font-sans);
  color: var(--fg-2);
  padding-left: 22px; position: relative;
}
.onboard-list li::before {
  content: ''; position: absolute;
  left: 0; top: 10px; width: 12px; height: 1px;
  background: var(--fg-5);
}

/* mock social-login pill stack */
.onboard-mock {
  padding: 32px;
  border: 1px solid var(--border-2);
  border-radius: 24px;
  background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  display: grid; gap: 12px;
  position: relative; overflow: hidden;
}
.onboard-mock::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%,
    rgba(10,132,255,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.login-pill {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--fg);
  color: #0A0A0B;
  font: 500 14px var(--font-sans);
}
.login-pill.secondary {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--fg);
}
.login-glyph {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(0,0,0,0.08);
  font: 600 13px var(--font-sans);
}
.login-pill.secondary .login-glyph {
  background: var(--white-08);
}
.login-divider {
  position: relative; z-index: 1;
  text-align: center;
  font: 600 10px var(--font-sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-5);
  margin: 2px 0;
}
.login-foot {
  position: relative; z-index: 1;
  margin-top: 10px; padding-top: 16px;
  border-top: 1px solid var(--border-1);
  font: 400 12px var(--font-mono);
  color: var(--fg-4);
  display: flex; align-items: center; gap: 10px;
}
.tee-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(10,132,255,0.18), 0 0 12px rgba(10,132,255,0.5);
  flex-shrink: 0;
}

/* Compact pill row — used for Apple+Email and MetaMask+Rabby+WC clusters.
   grid-auto-columns: 1fr makes every child equal-width regardless of
   how many siblings the row has, so a 2-up row and a 3-up row both
   look balanced without needing per-row CSS. */
.login-row {
  position: relative; z-index: 1;
  display: grid; gap: 8px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.login-pill--compact {
  padding: 11px 12px;
  gap: 8px;
  font: 500 13px var(--font-sans);
  justify-content: flex-start;
  min-width: 0;
}
.login-pill--compact .login-glyph {
  width: 20px; height: 20px;
  font-size: 11px;
  flex-shrink: 0;
}
.login-pill--compact > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wallet glyphs render full-color brand SVGs on a near-white surface —
   the canonical wallet-picker look. The light surface lets each brand's
   color (orange/blue/blue) carry recognition; a subtle inset border
   prevents the white from feeling stark against the dark panel. */
.login-pill .login-glyph--wallet,
.login-pill.secondary .login-glyph--wallet {
  background: rgba(255,255,255,0.94);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.login-glyph--wallet svg {
  width: 16px; height: 16px;
  display: block;
}
.login-pill--compact .login-glyph--wallet svg {
  width: 14px; height: 14px;
}

/* Bullet-list label callouts ("Social login:" / "Wallet login:") */
.onboard-list li strong {
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.05px;
}

/* ─── Roadmap strip (4 horizontal phase pillars) ─── */
section.block.strip-roadmap { padding: 120px 0; }
.roadmap-strip {
  list-style: none; padding: 0;
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border-1);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.005));
}
@media (max-width: 1024px) { .roadmap-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .roadmap-strip { grid-template-columns: 1fr; } }
.phase {
  padding: 28px 26px;
  border-right: 1px solid var(--border-1);
  display: flex; flex-direction: column; gap: 14px;
}
.phase:last-child { border-right: 0; }
@media (max-width: 1024px) {
  .phase:nth-child(2n) { border-right: 0; }
  .phase:nth-child(1), .phase:nth-child(2) { border-bottom: 1px solid var(--border-1); }
}
@media (max-width: 640px) {
  .phase { border-right: 0; border-bottom: 1px solid var(--border-1); }
  .phase:last-child { border-bottom: 0; }
}
.phase-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-stone);
  align-self: flex-start;
}
.phase--live .phase-tag { color: var(--green); }
.phase--next .phase-tag { color: var(--yellow); }
.phase-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(48,209,88,0.16), 0 0 10px rgba(48,209,88,0.45);
}
.phase p {
  font: 400 14px/22px var(--font-sans);
  color: var(--fg-2);
  margin: 0;
}
.phase--next {
  background: linear-gradient(rgba(255,214,10,0.04), rgba(255,214,10,0.005));
}

/* ─── Venue coverage strip (coda inside Why Now) ─── */
.venue-strip {
  list-style: none; padding: 0;
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) { .venue-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .venue-strip { grid-template-columns: 1fr 1fr; } }

.venue {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  background: linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  transition: border-color var(--t) var(--ease);
}
.venue:hover { border-color: var(--border-2); }
.venue-name {
  font: 500 14px/18px var(--font-sans);
  color: var(--fg);
  letter-spacing: -0.1px;
}
.venue-status {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-stone);
}
.venue-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(48,209,88,0.16), 0 0 8px rgba(48,209,88,0.45);
}
.venue--live .venue-status { color: var(--green); }
.venue--next .venue-status { color: var(--yellow); }

/* ─── Semantic-matching micro-moment ─── */
section.block.strip-semantic { padding: 120px 0; }

.semantic-pair {
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 28px; align-items: stretch;
}
@media (max-width: 768px) {
  .semantic-pair { grid-template-columns: 1fr; gap: 16px; }
}

.semantic-card {
  padding: 28px;
  border: 1px solid var(--border-2);
  border-radius: 18px;
  background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  transition: border-color var(--t) var(--ease);
}
.semantic-card:hover { border-color: var(--white-15); }

.semantic-venue {
  display: flex; align-items: center; gap: 10px;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-stone);
}
.semantic-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.semantic-dot--pm {
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(10,132,255,0.16), 0 0 10px rgba(10,132,255,0.5);
}
.semantic-dot--lm {
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(100,210,255,0.18), 0 0 10px rgba(100,210,255,0.5);
}
.semantic-q {
  margin: 0;
  font: 400 18px/26px var(--font-serif);
  color: var(--fg);
  letter-spacing: -0.2px;
}
.semantic-meta {
  margin: 0;
  font: 400 12px var(--font-mono);
  color: var(--fg-4);
  letter-spacing: 0.02em;
}

/* link cluster between the two cards */
.semantic-link {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  min-width: 140px;
}
@media (max-width: 768px) {
  .semantic-link { flex-direction: row; min-width: 0; }
  .semantic-link .semantic-curve { transform: rotate(90deg); width: 60px; height: 80px; }
}
.semantic-curve { width: 140px; height: 60px; }
.semantic-score {
  font: 600 11px var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--purple);
  padding: 4px 10px;
  border: 1px solid rgba(191,90,242,0.25);
  border-radius: 999px;
  background: rgba(191,90,242,0.06);
}

.semantic-foot {
  margin-top: 24px;
  font: 400 12px var(--font-mono);
  color: var(--fg-5);
  letter-spacing: 0.04em;
}

/* ─── Routing demo — Oddeon terminal (replaces the prior mock) ─────────
   App-window chrome → terminal topnav (brand / search / category strip) →
   2-col body: market column (header / outcome legend / multi-line chart /
   routed order book) + trade ticket column (side / Yes-No / amount /
   routing breakdown / route trade button). The routing breakdown is the
   star — it's what makes this a routing demo, not just a generic markets
   UI. Outcome chips emphasize the matching chart line. Amount input
   drives a depth-aware fill simulation against three venue ladders;
   percentages, dollars-per-venue, blended fill and edge-vs-best-site
   update live. Auto-cycles amounts on viewport entry until the user
   touches anything.

   Responsive collapse:
     ≥1080: 2 cols (1fr / 320px ticket)
     880-1080: 2 cols, tighter ticket (300px)
     <880:  stack — ticket drops below; categories hide
*/

.demo-app {
  margin-top: 48px;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  background: #0A0A0D;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
}

/* — App chrome (macOS traffic lights + centered titlebar) — */
.app-chrome {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  position: relative;
}
.app-traffic { display: flex; gap: 8px; }
.app-traffic .dot {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.25);
}
.app-traffic .dot--red    { background: #FF5F57; }
.app-traffic .dot--yellow { background: #FFBD2E; }
.app-traffic .dot--green  { background: #28C940; }
.app-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px var(--font-sans);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.app-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.app-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font: 500 11px var(--font-sans);
  color: var(--fg-3);
}
.app-live-pill .lp-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(48,209,88,0.18), 0 0 6px rgba(48,209,88,0.5);
}

/* — Terminal topnav — */
.tx-topnav {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-1);
}
.tx-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); flex-shrink: 0; }
.tx-brand svg { width: 22px; height: 22px; display: block; }
.tx-brand span { font: 600 14px var(--font-sans); letter-spacing: -0.01em; }
.tx-search {
  flex: 1; min-width: 0; max-width: 360px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border-1);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  font: 400 12px var(--font-sans);
  color: var(--fg-5);
}
.tx-search svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.6; }
.tx-search > span { flex: 1; }
.tx-search kbd {
  padding: 1px 6px; border-radius: 4px;
  font: 600 10px var(--font-mono);
  border: 1px solid var(--border-1); color: var(--fg-5);
  background: transparent;
}
.tx-cats { display: flex; gap: 2px; align-items: center; overflow: hidden; flex-wrap: wrap; }
.tx-cat {
  padding: 5px 10px; border-radius: 999px;
  font: 500 12px var(--font-sans);
  color: var(--fg-5);
  cursor: default; white-space: nowrap;
}
.tx-cat.active { color: var(--fg); background: rgba(255,255,255,0.05); }

/* — Main grid — */
.tx-main {
  display: grid;
  grid-template-columns: 1fr 320px;
}
@media (max-width: 1080px) {
  .tx-main { grid-template-columns: 1fr 300px; }
}
@media (max-width: 880px) {
  .tx-main { grid-template-columns: 1fr; }
  .tx-order { border-left: 0; border-top: 1px solid var(--border-1); }
}

/* — Market column — */
.tx-market { padding: 22px 24px 0; display: flex; flex-direction: column; min-width: 0; }
.tx-mkt-head { display: flex; gap: 14px; align-items: flex-start; }
.tx-mkt-icon {
  width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  background: #1a1a1f; display: grid; place-items: center; flex-shrink: 0;
}
.tx-mkt-icon svg { width: 100%; height: 100%; display: block; }
.tx-mkt-meta { min-width: 0; flex: 1; }
.tx-mkt-tags {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font: 500 11px var(--font-sans); color: var(--fg-5);
  letter-spacing: 0.02em;
}
.tx-mkt-tags > span { position: relative; white-space: nowrap; }
.tx-mkt-tags > span + span::before {
  content: '·'; position: absolute; left: -10px; color: var(--fg-5); opacity: 0.5;
}
.tx-mkt-q {
  margin: 6px 0 0;
  font: 500 19px/26px var(--font-sans);
  color: var(--fg); letter-spacing: -0.01em;
}

/* Outcomes — monochrome at rest, brand-blue when active. The router
   itself is a single brand; multiple colors would imply venue identity
   the user has to learn. */
.tx-out {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 9px;
  border: 1px solid var(--border-1);
  border-radius: 999px;
  background: transparent;
  font: 500 12px var(--font-sans);
  color: var(--fg-4);
  cursor: pointer; user-select: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tx-out:hover { color: var(--fg-2); border-color: var(--border-2); }
.tx-out .tx-out-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.tx-out .tx-out-px { color: var(--fg-5); font: 400 11px var(--font-mono); }
.tx-out.is-active {
  color: var(--fg);
  border-color: rgba(10,132,255,0.5);
  background: rgba(10,132,255,0.10);
}
.tx-out.is-active .tx-out-dot {
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(10,132,255,0.22), 0 0 8px rgba(10,132,255,0.7);
}
.tx-out.is-active .tx-out-px { color: var(--fg-2); }

/* — Chart — */
.tx-chart {
  position: relative; margin: 18px 0 0;
  padding: 0 60px 22px 36px;
  height: 290px;
}
.tx-chart svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tx-chart .tx-grid { stroke: rgba(255,255,255,0.06); stroke-width: 0.5; stroke-dasharray: 2 4; }
.tx-chart .tx-line {
  fill: none; stroke: rgba(255,255,255,0.35);
  stroke-width: 1.2; stroke-linecap: round; opacity: 0.65;
  transition: opacity var(--t) var(--ease), stroke-width var(--t) var(--ease), stroke var(--t) var(--ease);
}
.tx-chart .tx-line--active {
  stroke: var(--blue);
  stroke-width: 2.2; opacity: 1;
}
.tx-chart .tx-line.is-dim  { opacity: 0.18; }

.tx-y {
  position: absolute; left: 0; top: 0; bottom: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  list-style: none; padding: 0; margin: 0;
  font: 400 10px var(--font-mono); color: var(--fg-5);
}
.tx-y li { line-height: 1; }

.tx-end-chips {
  position: absolute; right: 0; top: 0; bottom: 22px;
  width: 54px; list-style: none; padding: 0; margin: 0;
}
.tx-end-chips li {
  position: absolute; right: 0; top: var(--top, 0);
  transform: translateY(-50%);
  font: 500 10px var(--font-mono); color: var(--fg-5);
  padding: 2px 6px; border-radius: 3px;
  letter-spacing: 0.02em;
  min-width: 36px; text-align: right;
  background: rgba(255,255,255,0.04);
}
.tx-end-chips li.is-active {
  background: var(--blue); color: #fff;
}

.tx-x {
  position: absolute; left: 36px; right: 60px; bottom: 2px;
  display: flex; justify-content: space-between;
  list-style: none; padding: 0; margin: 0;
  font: 400 10px var(--font-mono); color: var(--fg-5);
}

/* — Chart footer — */
.tx-chart-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 16px;
  border-top: 1px solid var(--border-1);
}
.tx-vol {
  font: 400 12px var(--font-mono); color: var(--fg-4);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tx-vol > span { white-space: nowrap; }
.tx-vol .tx-sep { margin: 0 8px; color: var(--fg-5); opacity: 0.7; }
.tx-range { display: flex; gap: 2px; }
.tx-rg {
  padding: 4px 9px; border-radius: 6px;
  font: 500 11px var(--font-mono); color: var(--fg-5);
  cursor: default;
}
.tx-rg.active { color: var(--fg); background: rgba(255,255,255,0.06); }

/* — Order book (routed) — */
.tx-book {
  margin: 0 -24px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border-1);
  background: rgba(255,255,255,0.015);
}
.tx-book-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.tx-book-l { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tx-book-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--blue); box-shadow: 0 0 0 3px rgba(10,132,255,0.22); }
.tx-book-out { font: 500 13px var(--font-sans); color: var(--fg); white-space: nowrap; }
.tx-book-pct { font: 400 12px var(--font-mono); color: var(--fg-5); white-space: nowrap; }
.tx-book-pills { display: flex; gap: 6px; }
.tx-pill {
  padding: 4px 9px; border-radius: 6px;
  font: 600 11px var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tx-pill--yes { background: rgba(10,132,255,0.18); color: #5BA8FF; }
.tx-pill--no  { background: rgba(255,100,130,0.18); color: #FF8AA0; }

.tx-book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) {
  .tx-book-grid { grid-template-columns: 1fr; gap: 18px; }
}
.tx-book-side {
  margin: 0 0 8px;
  font: 600 10px var(--font-sans); color: var(--fg-stone);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.tx-book-side--asks { color: var(--fg-stone); }
.tx-book-side--bids { color: var(--fg-stone); }
.tx-ladder { width: 100%; border-collapse: collapse; }
.tx-ladder th, .tx-ladder td {
  padding: 5px 0; text-align: left;
  font: 400 12px var(--font-mono);
  font-variant-numeric: tabular-nums;
  position: relative;
}
.tx-ladder th {
  font-size: 9px; font-weight: 600; color: var(--fg-stone);
  letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-1);
  padding-bottom: 8px;
  background: transparent;
}
.tx-ladder th.r, .tx-ladder td.r { text-align: right; }
.tx-ladder td { color: var(--fg-3); border-bottom: 1px solid rgba(255,255,255,0.025); }
.tx-ladder tr:last-child td { border-bottom: 0; }
.tx-ladder tr.ask td:first-child { color: var(--fg-3); }
.tx-ladder tr.bid td:first-child { color: var(--fg-3); }

/* Depth bars — classic order-book viz. A tinted bar fills each row
   width-proportional to that level's size. The bar lives on the row
   via ::before; modern browsers (Chrome ≥ 88, Safari ≥ 13, Firefox ≥ 70)
   honor position:relative on <tr> for absolutely-positioned descendants.
   Asks grow toward the spread from the right; bids from the left. */
.tx-ladder tr.ask, .tx-ladder tr.bid { position: relative; }
.tx-ladder tr.ask::before,
.tx-ladder tr.bid::before {
  content: ''; position: absolute;
  top: 0; bottom: 0;
  width: var(--d, 0%);
  pointer-events: none;
  z-index: 0;
}
.tx-ladder--asks tr.ask::before {
  right: 0;
  background: linear-gradient(270deg, rgba(10,132,255,0.22), rgba(10,132,255,0.04));
}
.tx-ladder--bids tr.bid::before {
  left: 0;
  background: linear-gradient(90deg,  rgba(255,80,110,0.22), rgba(255,80,110,0.04));
}
.tx-ladder td { position: relative; z-index: 1; }
/* Venue tags — mono treatment. The brand is the router; the venues
   are sources, not personalities. Letting the typography do the work. */
.vn {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font: 600 10px var(--font-mono); letter-spacing: 0.06em;
  background: rgba(255,255,255,0.06); color: var(--fg-3);
}
.vn--pm, .vn--lm, .vn--hl {
  background: rgba(255,255,255,0.06); color: var(--fg-3);
}

/* — Order ticket (right column) — */
.tx-order {
  border-left: 1px solid var(--border-1);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  background: rgba(255,255,255,0.015);
}
.tx-order-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(10,132,255,0.35);
  border-radius: 12px;
  background: rgba(10,132,255,0.06);
}
.tx-order-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(10,132,255,0.22); }
.tx-order-out { flex: 1; font: 600 14px var(--font-sans); color: var(--fg); }
.tx-order-px { font: 600 16px var(--font-mono); color: var(--fg); font-variant-numeric: tabular-nums; }

.tx-side {
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,0.03); border-radius: 10px;
  padding: 3px; gap: 3px;
}
.tx-side-btn {
  border: 0; background: transparent;
  padding: 7px 0; border-radius: 8px;
  font: 600 12px var(--font-sans); color: var(--fg-5);
  cursor: pointer; letter-spacing: 0.02em;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tx-side-btn.active { background: #FFFFFF; color: #000; }

.tx-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tx-yn-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 11px 0; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; background: rgba(255,255,255,0.03); color: var(--fg-4);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tx-yn-btn .lbl { font: 600 11px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.tx-yn-btn .px  { font: 600 16px var(--font-mono); font-variant-numeric: tabular-nums; }
.tx-yn-btn:hover { color: var(--fg); }
.tx-yn-btn--yes.active {
  background: linear-gradient(180deg, rgba(10,132,255,0.22), rgba(10,132,255,0.12));
  border-color: rgba(10,132,255,0.5); color: #fff;
}
.tx-yn-btn--no.active {
  background: linear-gradient(180deg, rgba(255,100,130,0.22), rgba(255,100,130,0.12));
  border-color: rgba(255,100,130,0.5); color: #fff;
}

.tx-amt { display: flex; flex-direction: column; gap: 8px; }
.tx-amt-l {
  font: 600 10px var(--font-sans); color: var(--fg-stone);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.tx-amt-input {
  display: flex; align-items: baseline; gap: 4px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(0,0,0,0.4); border: 1px solid var(--border-2);
  transition: border-color var(--t-fast) var(--ease);
}
.tx-amt-input:focus-within { border-color: var(--white-30); }
.tx-amt-input .tx-amt-sym { font: 500 18px var(--font-sans); color: var(--fg-4); }
.tx-amt-input input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font: 500 22px var(--font-sans); color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.tx-amt-chips { display: flex; gap: 6px; }
.tx-amt-chip {
  flex: 1; padding: 6px 0; border-radius: 6px;
  border: 1px solid var(--border-1); background: transparent;
  font: 500 11px var(--font-sans); color: var(--fg-4);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tx-amt-chip:hover { color: var(--fg); border-color: var(--white-30); background: rgba(255,255,255,0.03); }

/* Routing breakdown — the headline panel of the demo */
.tx-route {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border-1);
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column; gap: 10px;
}
.tx-route-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.tx-route-l {
  font: 600 10px var(--font-sans); color: var(--fg-stone);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.tx-route-edge {
  font: 600 11px var(--font-mono); color: var(--yellow);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.tx-route-bar {
  position: relative; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.04); overflow: hidden;
  display: flex;
}
.tx-route-seg { height: 100%; transition: width var(--t-slow) var(--ease); }
.tx-route-seg--pm { background: var(--blue); }
.tx-route-seg--lm { background: rgba(10,132,255,0.55); }
.tx-route-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.tx-route-list li {
  display: flex; justify-content: space-between; align-items: center;
  font: 400 12px var(--font-sans); color: var(--fg-3);
}
.tx-route-venue { display: inline-flex; align-items: center; gap: 8px; }
.tx-route-amt {
  font: 400 11px var(--font-mono); color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.tx-route-blend {
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--border-1);
  font: 400 12px var(--font-sans); color: var(--fg-4);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.tx-route-blend strong {
  font: 600 14px var(--font-mono); color: var(--fg);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.tx-route-blend .sep { color: var(--fg-5); opacity: 0.6; }

/* Trade CTA */
.tx-trade {
  border: 0; border-radius: 12px;
  background: #FFFFFF; color: #000;
  padding: 14px 16px;
  font: 600 14px var(--font-sans);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--t) var(--ease), filter var(--t-fast) var(--ease);
}
.tx-trade:hover { transform: translateY(-1px); filter: brightness(1.04); }
.tx-trade-meta {
  font: 600 13px var(--font-mono); color: rgba(0,0,0,0.55);
  font-variant-numeric: tabular-nums;
}
.tx-trust {
  margin: 0; text-align: center;
  font: 400 11px var(--font-sans); color: var(--fg-5);
  letter-spacing: 0.02em;
}

@media (max-width: 880px) {
  .tx-topnav { padding: 10px 14px; gap: 12px; flex-wrap: wrap; }
  .tx-search { max-width: none; flex-basis: 100%; order: 3; }
}
@media (max-width: 640px) {
  .tx-market { padding: 16px 16px 0; }
  .tx-chart { padding: 0 50px 22px 30px; height: 240px; }
  .tx-mkt-q { font-size: 16px; line-height: 22px; }
  .tx-order { padding: 16px; }
  .demo-app { border-radius: 12px; }
  .app-title { display: none; }
  .tx-cats { display: none; }
}

/* ─── Roadmap venue progression pips ─────────────────────────────────
   Five dots per pillar, ordered PM · LM · HL · PF · Kalshi. State is
   per-pillar: is-live = already launched at this phase (green), is-new
   = arriving in this phase (yellow, pulsing), default = upcoming (dim
   outline). Reading the four pillars left-to-right traces 2→3→4→5
   venues coming online. */
.phase-venues {
  display: flex;
  gap: 6px;
  margin: 4px 0 -2px;
  align-items: center;
}
.venue-pip {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: transparent;
  flex-shrink: 0;
}
.venue-pip.is-live {
  background: var(--green);
  border-color: rgba(48,209,88,0.5);
  box-shadow: 0 0 0 2px rgba(48,209,88,0.12), 0 0 5px rgba(48,209,88,0.4);
}
.venue-pip.is-new {
  background: var(--yellow);
  border-color: rgba(255,214,10,0.5);
  box-shadow: 0 0 0 2px rgba(255,214,10,0.14), 0 0 8px rgba(255,214,10,0.55);
  animation: pip-pulse 2.6s ease-in-out infinite;
}
@keyframes pip-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,214,10,0.14), 0 0 8px rgba(255,214,10,0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(255,214,10,0.04), 0 0 14px rgba(255,214,10,0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .venue-pip.is-new { animation: none; }
}

/* ─── Testimonial card ──────────────────────────────────────────────
   Wraps the quote in a proper card with a large decorative serif quote
   glyph (via ::before), then a horizontal cite footer with a gradient
   avatar circle and a 2-line stack. The avatar's blue→purple gradient
   echoes the brand mark's color story (Quote/Route accents). */
.testimonial-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 56px 40px;
  border: 1px solid var(--border-1);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  position: relative;
}
.testimonial-card blockquote {
  margin: 0;
  font: 400 22px/32px var(--font-serif);
  color: var(--fg);
  letter-spacing: -0.3px;
}
.testimonial-card blockquote::before {
  content: '\201C';
  display: block;
  font: 400 80px/0.55 var(--font-serif);
  color: rgba(10,132,255,0.22);
  margin-bottom: 12px;
  margin-left: -6px;
}
.testimonial-meta {
  margin-top: 28px;
  display: flex; align-items: center; gap: 14px;
}
.cite-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: grid; place-items: center;
  color: #fff;
  font: 600 14px var(--font-sans);
  letter-spacing: -0.5px;
  box-shadow: 0 0 0 2px var(--bg, #0A0A0B), 0 6px 18px rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.cite-stack {
  display: flex; flex-direction: column; gap: 2px;
}
.cite-primary {
  font: 500 13px var(--font-sans);
  color: var(--fg);
  font-style: normal;
  letter-spacing: -0.1px;
}
.cite-secondary {
  font: 400 11px var(--font-mono);
  color: var(--fg-5);
  letter-spacing: 0.04em;
}
@media (max-width: 640px) {
  .testimonial-card { padding: 36px 28px 32px; }
  .testimonial-card blockquote { font-size: 18px; line-height: 28px; }
  .testimonial-card blockquote::before { font-size: 60px; }
}

/* ─── How-It-Works step top-edge accents ────────────────────────────
   Each step card gets a 2px colored top edge matching its semantic
   color (Quote=blue, Route=purple, Edge=yellow, Fill=green). The
   ::before sits inside the card's rounded corners thanks to the
   inherited overflow clip on the parent. Reinforces the chromatic
   sequence and makes the 4-card row read as a pipeline. */
.step { position: relative; overflow: hidden; }
.step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--step-color, transparent);
  opacity: 0.85;
}
.step.s-quote { --step-color: var(--blue);   }
.step.s-route { --step-color: var(--yellow); }
.step.s-edge  { --step-color: var(--blue);   }
.step.s-fill  { --step-color: var(--yellow); }

/* Steps 02 and 04 — yellow accent: tile background + glyph both shift to
   yellow, overriding the default blue treatment in .step .step-ico above. */
.step.s-route .step-ico,
.step.s-fill  .step-ico {
  background: rgba(255,214,10,0.10);
  color: var(--yellow);
}

/* SVG text inside step visualizations — keep font-family on the system. */
.step-vis text.vis-leg-lbl,
.step-vis text.vis-fill-lbl { font-family: var(--font-sans); }
.step-vis text.vis-fill-num { font-family: var(--font-mono); }

/* ─── Atmospheric gradient meshes (per-section ambient color) ───────
   Each section opts into a subtle radial gradient behind its content
   via a CSS variable --mesh. The ::before sits at the section's full
   bounds with z-index: -1; `isolation: isolate` keeps that negative
   z-index contained inside the section's stacking context so it
   doesn't escape behind the body. Opacities stay between 3-7% so the
   meshes read as atmospheric depth, not decoration. Adjacent sections
   share or shift color families so scrolling reveals a quiet
   chromatic journey down the page:
     How → purple (routing/multi-step)
     Compare → blue (brand/YES)
     Semantic → purple+pink+blue (matching the connector gradient)
     Demo → cyan (liquidity/orderbook)
     Onboard → blue (TEE trust)
     Roadmap → green+yellow (live→arriving)
     Testimonial → blue+purple (calm, echoes the avatar gradient)
     Pricing → yellow (founding seat / scarcity)
*/
section.block,
section.testimonial {
  position: relative;
  isolation: isolate;
}
section.block::before,
section.testimonial::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: var(--mesh, transparent);
}

#how {
  --mesh: radial-gradient(
    ellipse 55% 50% at 50% 72%,
    rgba(191, 90, 242, 0.07) 0%,
    transparent 65%
  );
}

#compare {
  --mesh:
    radial-gradient(ellipse 45% 45% at 18% 30%,  rgba(10, 132, 255, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at 85% 70%, rgba(100, 210, 255, 0.04) 0%, transparent 65%);
}

section.block.strip-semantic {
  --mesh:
    radial-gradient(ellipse 35% 35% at 22% 50%, rgba(10, 132, 255, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 35% 35% at 78% 50%, rgba(255, 100, 130, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 22% 28% at 50% 55%, rgba(191, 90, 242, 0.06) 0%, transparent 70%);
}

#demo {
  --mesh: radial-gradient(
    ellipse 60% 55% at 50% 65%,
    rgba(100, 210, 255, 0.05) 0%,
    transparent 65%
  );
}

section.block.strip-onboard {
  --mesh: radial-gradient(
    ellipse 40% 60% at 75% 55%,
    rgba(10, 132, 255, 0.055) 0%,
    transparent 65%
  );
}

section.block.strip-roadmap {
  --mesh:
    radial-gradient(ellipse 32% 60% at 16% 60%, rgba(48, 209, 88, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 36% 60% at 84% 65%, rgba(255, 214, 10, 0.045) 0%, transparent 70%);
}

section.testimonial {
  --mesh:
    radial-gradient(ellipse 45% 60% at 40% 50%, rgba(10, 132, 255, 0.045) 0%, transparent 70%),
    radial-gradient(ellipse 35% 50% at 65% 60%, rgba(191, 90, 242, 0.04) 0%, transparent 70%);
}

#pricing {
  --mesh: radial-gradient(
    ellipse 50% 60% at 72% 55%,
    rgba(255, 214, 10, 0.05) 0%,
    transparent 65%
  );
}

/* ═══════════════════════════════════════════════════════════════════
   v2 GRAPHICS ADDITIONS
   Additive layer of visual elements that lean into the spec's existing
   tokens (foil, semantic accents, glass-alpha ladder, no drop shadows).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Hero — floating live-odds chip stack ───────────────────────
   Three small glass chips that float beside the hero headline,
   showing the actual storytelling motif of the product: two raw venue
   prices, one blended Oddeon price. Each chip pulses softly. */
.hero-chips {
  position: absolute;
  right: 32px; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex; flex-direction: column; gap: 14px;
  pointer-events: none;
  width: 240px;
}
@media (max-width: 1280px) {
  .hero-chips { right: 24px; width: 220px; }
}
@media (max-width: 1024px) {
  .hero-chips { display: none; }
}
.live-chip {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--white-10);
  border-radius: 14px;
  background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  display: flex; flex-direction: column; gap: 6px;
  animation: chip-float 6s ease-in-out infinite;
}
.live-chip:nth-child(2) { animation-delay: -2s; transform: translateX(-12px); }
.live-chip:nth-child(3) { animation-delay: -4s; transform: translateX(8px); }
.live-chip--routed {
  border-color: rgba(10,132,255,0.40);
  background:
    linear-gradient(rgba(10,132,255,0.07), rgba(10,132,255,0.015)),
    linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.005));
}
.live-chip__head {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 9px/12px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-stone);
}
.live-chip__head .v-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(48,209,88,0.16), 0 0 6px rgba(48,209,88,0.5);
  animation: subtlePulse 2.4s ease-in-out infinite;
}
.live-chip--routed .live-chip__head { color: rgba(10,132,255,0.85); }
.live-chip--routed .v-dot { background: var(--blue); box-shadow: 0 0 0 2px rgba(10,132,255,0.18), 0 0 8px rgba(10,132,255,0.55); }
.live-chip__row {
  display: flex; align-items: baseline; justify-content: space-between;
}
.live-chip__px {
  font: 500 22px/26px var(--font-mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
}
.live-chip__delta {
  font: 600 11px/14px var(--font-sans);
  color: var(--yellow);
  padding: 2px 8px;
  background: rgba(255,214,10,0.10);
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.live-chip__delta--down { color: var(--fg-5); background: transparent; }
.live-chip__spark { display: block; width: 100%; height: 18px; margin-top: 2px; opacity: 0.7; }

@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.live-chip:nth-child(2) { animation-name: chip-float-2; }
.live-chip:nth-child(3) { animation-name: chip-float-3; }
@keyframes chip-float-2 {
  0%, 100% { transform: translateX(-12px) translateY(0); }
  50%      { transform: translateX(-12px) translateY(-9px); }
}
@keyframes chip-float-3 {
  0%, 100% { transform: translateX(8px) translateY(0); }
  50%      { transform: translateX(8px) translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .live-chip { animation: none !important; }
}

/* ── 2. Routing Across — venue marquee strip ────────────────────────
   A self-contained section that lives between hero and How It Works.
   Continuous left-scrolling track of supported venues + system metrics
   (latency, depth, edge). Edge masks fade content into the page. */
.routing-strip {
  padding: 56px 0 64px;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.002));
  overflow: hidden;
}
.routing-strip .wrap {
  display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: center;
}
@media (max-width: 768px) {
  .routing-strip .wrap { grid-template-columns: 1fr; gap: 20px; }
}
.routing-strip-l {
  display: flex; flex-direction: column; gap: 8px;
}
.routing-strip-l .eyebrow {
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-stone);
}
.routing-strip-l .sub {
  font: 400 14px/20px var(--font-sans);
  color: var(--fg-3);
}

/* ── Static venue row (replaces marquee) ─────────────────────────────
   Five venues laid out in a calm horizontal flex row. No scrolling,
   no metrics, no separators — just the names and status. */
.venue-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: 8px 32px;
  align-items: center;
}
.venue-list li {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 15px/1 var(--font-sans);
  color: var(--fg-3);
}
.venue-list .v-glyph {
  width: 22px; height: 22px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  display: inline-grid; place-items: center;
  font: 700 9px var(--font-sans);
  letter-spacing: 0.3px;
  color: var(--fg-3);
  flex-shrink: 0;
}
.venue-list .v-status {
  font: 400 11px/14px var(--font-mono);
  color: var(--fg-5);
  letter-spacing: 0.4px;
}
@media (max-width: 768px) {
  .venue-list { gap: 8px 20px; }
  .venue-list li { font-size: 13px; }
}
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
  display: flex; width: max-content; gap: 56px;
  animation: marquee-scroll 50s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 16px/1 var(--font-sans);
  letter-spacing: -0.3px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.marquee__item:hover { color: var(--fg); }
.marquee__item .v-glyph {
  width: 22px; height: 22px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  display: grid; place-items: center;
  font: 700 9px/1 var(--font-sans);
  color: rgba(255,255,255,0.75);
  letter-spacing: 0;
  flex-shrink: 0;
}
.marquee__item .v-status {
  font: 400 11px/14px var(--font-mono);
  color: var(--fg-5);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.marquee__sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--fg-stone); opacity: 0.4;
  align-self: center;
}
.marquee__metric {
  display: inline-flex; align-items: baseline; gap: 8px;
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-stone);
}
.marquee__metric .v {
  font: 500 16px/1 var(--font-mono);
  color: var(--fg);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.marquee__metric.is-edge .v   { color: var(--yellow); }
.marquee__metric.is-route .v  { color: var(--purple); }
.marquee__metric.is-fill .v   { color: var(--green); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ── 3. How It Works — pipeline connector + per-step micro-graphics ──
   A horizontal SVG ribbon connects the 4 cards beneath the icons;
   four colored dots travel along it on a loop. Inside each card a
   small data-visualisation reinforces the step's semantic. */
.how-pipeline {
  position: relative;
  margin-top: 48px;
  padding: 0 32px;
}
@media (max-width: 1024px) { .how-pipeline { display: none; } }
.how-pipeline svg { display: block; width: 100%; height: 48px; }
.how-pipeline .pipe-flow {
  stroke-dasharray: 6 10;
  animation: pipe-march 6s linear infinite;
}
@keyframes pipe-march {
  to { stroke-dashoffset: -160; }
}
.how-pipeline .pipe-dot {
  animation: pipe-travel 7s linear infinite;
  opacity: 0;
}
.how-pipeline .pipe-dot:nth-of-type(2) { animation-delay: -1.75s; }
.how-pipeline .pipe-dot:nth-of-type(3) { animation-delay: -3.5s; }
.how-pipeline .pipe-dot:nth-of-type(4) { animation-delay: -5.25s; }
@keyframes pipe-travel {
  0%   { offset-distance: 0%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .how-pipeline .pipe-flow { animation: none; }
  .how-pipeline .pipe-dot { animation: none; opacity: 0.7; }
}

/* Per-step micro-graphic block. Renders inside .step at the bottom. */
.step-vis {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-1);
  height: 56px;
  display: flex; align-items: center;
}
.step-vis svg { display: block; width: 100%; height: 100%; }

/* Quote — sparkline of streaming odds */
.vis-spark .vis-base { stroke: var(--white-10); stroke-width: 1; fill: none; }
.vis-spark .vis-line {
  stroke: var(--blue); stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.vis-spark .vis-dot { fill: var(--blue); }
.vis-spark .vis-fill { fill: url(#sparkFill); opacity: 0.45; }

/* Route — converging arrows into central node */
.vis-route .vis-leg { stroke: var(--white-15); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.vis-route .vis-leg-a { stroke: var(--purple); }
.vis-route .vis-node {
  fill: var(--purple);
}
.vis-route .vis-node-ring { fill: none; stroke: rgba(191,90,242,0.35); stroke-width: 1; }
.vis-route .vis-pkt {
  fill: var(--purple);
  animation: vis-route-pkt 2.4s ease-in-out infinite;
}
.vis-route .vis-pkt-2 { animation-delay: -1.2s; }
@keyframes vis-route-pkt {
  0%   { opacity: 0; transform: translate(0, 0); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx, 30px), var(--ty, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .vis-route .vis-pkt { animation: none; opacity: 0.6; }
}

/* Edge — comparative bars w/ delta highlight (purple = routing edge) */
.vis-edge .b-track { fill: var(--white-08); }
.vis-edge .b-fill-pm { fill: rgba(255,255,255,0.45); }
.vis-edge .b-fill-lm { fill: var(--purple); }
.vis-edge .b-label {
  fill: var(--fg-stone);
  font: 600 8px var(--font-sans);
  letter-spacing: 1.2px; text-transform: uppercase;
}
.vis-edge .b-delta {
  fill: var(--purple);
  font: 600 10px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* Fill — three concentric pulse rings + check (blue = brand fill) */
.vis-fill svg { overflow: visible; }
.vis-fill .ring {
  fill: none; stroke: var(--blue); stroke-width: 1.5;
  transform-origin: center; transform-box: fill-box;
  animation: vis-fill-pulse 2.4s ease-out infinite;
  opacity: 0;
}
.vis-fill .ring-2 { animation-delay: -0.8s; }
.vis-fill .ring-3 { animation-delay: -1.6s; }
.vis-fill .check { stroke: var(--blue); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vis-fill .check-bg { fill: rgba(10,132,255,0.12); }
@keyframes vis-fill-pulse {
  0%   { opacity: 0.9; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(2.4); }
}
@media (prefers-reduced-motion: reduce) {
  .vis-fill .ring { animation: none; opacity: 0.5; transform: scale(1); }
}

/* ── 4. By the numbers — stats strip between compare and demo ──────
   Big numerical infographic, 4 cells with sparklines/donuts beside
   the tabular-num figure. Sits inside section.block stylesheet of
   delta-tally vocabulary so it lives in the same family. */
.byline-strip {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border-1);
  border-radius: 24px;
  background: linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  overflow: hidden;
}
@media (max-width: 1024px) { .byline-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .byline-strip { grid-template-columns: 1fr; } }
.byline-cell {
  padding: 28px 28px 24px;
  border-right: 1px solid var(--border-1);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 168px;
}
.byline-cell:last-child { border-right: 0; }
@media (max-width: 1024px) {
  .byline-cell:nth-child(2n) { border-right: 0; }
  .byline-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border-1); }
}
@media (max-width: 640px) {
  .byline-cell { border-right: 0; border-bottom: 1px solid var(--border-1); }
  .byline-cell:last-child { border-bottom: 0; }
}
.byline-cell .l {
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-stone);
}
.byline-cell .v {
  display: flex; align-items: baseline; gap: 6px;
  font: 500 36px/40px var(--font-sans);
  color: var(--fg);
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}
.byline-cell .v .u {
  font: 400 13px var(--font-sans);
  color: var(--fg-4);
  letter-spacing: 0;
}
.byline-cell .vis { margin-top: auto; }
.byline-cell .vis svg { display: block; width: 100%; height: 36px; }

/* Sparkline coloring per cell */
.byline-cell.is-edge .v   { color: var(--fg); }
.byline-cell.is-edge .vis path { stroke: var(--yellow); }
.byline-cell.is-latency .vis path { stroke: var(--blue); }
.byline-cell.is-routed .vis path { stroke: var(--purple); }
.byline-cell.is-fills .vis path { stroke: var(--green); }
.byline-cell .vis path.b-base { stroke: var(--white-08); stroke-width: 1; fill: none; }
.byline-cell .vis path.b-line { stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.byline-cell .vis circle.b-tip {
  r: 2.5;
  fill: currentColor;
}
.byline-cell.is-edge    .vis circle.b-tip { fill: var(--yellow); }
.byline-cell.is-latency .vis circle.b-tip { fill: var(--blue); }
.byline-cell.is-routed  .vis circle.b-tip { fill: var(--purple); }
.byline-cell.is-fills   .vis circle.b-tip { fill: var(--green); }

/* Donut variant for "routed across" */
.byline-donut { display: flex; align-items: center; gap: 14px; }
.byline-donut svg { width: 56px; height: 56px; flex-shrink: 0; display: block; }
.byline-donut .seg { fill: none; stroke-width: 5; }
.byline-donut .seg-track { stroke: var(--white-08); }
.byline-donut .seg-pm { stroke: var(--blue); }
.byline-donut .seg-lm { stroke: var(--cyan); }
.byline-donut .seg-hl { stroke: var(--purple); }
.byline-donut .donut-legend {
  display: flex; flex-direction: column; gap: 4px;
  font: 400 11px/14px var(--font-mono);
  color: var(--fg-4);
}
.byline-donut .donut-legend span { display: inline-flex; align-items: center; gap: 6px; }
.byline-donut .donut-legend .ld { width: 6px; height: 6px; border-radius: 50%; }
.byline-donut .donut-legend .ld-pm { background: var(--blue); }
.byline-donut .donut-legend .ld-lm { background: var(--cyan); }
.byline-donut .donut-legend .ld-hl { background: var(--purple); }

/* ── 5. Semantic matching — multi-node match graph ─────────────────
   Replaces the single curve. Renders an SVG with token nodes on each
   side that connect across to their semantic equivalents. */
.semantic-graph {
  width: 180px; height: 180px;
  display: block;
}
@media (max-width: 768px) {
  .semantic-graph { width: 100%; max-width: 280px; height: 80px; transform: rotate(90deg); transform-origin: center; }
}
.sg-link {
  stroke-width: 1; fill: none; stroke-linecap: round;
  stroke-dasharray: 3 4;
  animation: sg-march 4s linear infinite;
}
@keyframes sg-march {
  to { stroke-dashoffset: -28; }
}
.sg-node { fill: rgba(255,255,255,0.04); stroke-width: 1; }
.sg-node-l { stroke: rgba(10,132,255,0.65); }
.sg-node-r { stroke: rgba(100,210,255,0.65); }
.sg-tok {
  fill: var(--fg-3);
  font: 600 9px var(--font-mono);
  letter-spacing: 0.04em;
}
.sg-match-node {
  fill: var(--purple);
  filter: drop-shadow(0 0 6px rgba(191,90,242,0.7));
}
.sg-pulse {
  fill: none; stroke: var(--purple); stroke-width: 1;
  opacity: 0;
  animation: sg-pulse 2.4s ease-out infinite;
}
@keyframes sg-pulse {
  0%   { r: 2; opacity: 0.8; }
  100% { r: 14; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-link { animation: none; }
  .sg-pulse { animation: none; opacity: 0; }
}

/* ── 6. Roadmap venue swim-lane timeline ────────────────────────────
   Sits above the existing 4-pillar grid. Five horizontal rails (one per
   venue), each with a colored bar showing when it goes live. Quarter
   ticks across the top. */
.roadmap-timeline {
  margin-top: 32px;
  padding: 24px 28px 20px;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  background: linear-gradient(rgba(255,255,255,0.018), rgba(255,255,255,0.003));
}
.rt-axis {
  display: grid; grid-template-columns: 112px repeat(4, 1fr);
  font: 600 10px/14px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-stone);
  margin-bottom: 14px;
}
.rt-axis .rt-q { padding-left: 6px; position: relative; }
.rt-axis .rt-q::before {
  content: ''; position: absolute; left: 0; top: 18px;
  width: 1px; height: 8px; background: var(--white-08);
}
.rt-axis .rt-q.now { color: var(--green); }
.rt-axis .rt-q.now::before { background: var(--green); box-shadow: 0 0 6px rgba(48,209,88,0.6); }
.rt-row {
  display: grid; grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 0;
  padding: 8px 0;
  border-top: 1px solid var(--border-1);
}
.rt-row:first-of-type { border-top: 0; }
.rt-venue {
  font: 500 13px/16px var(--font-sans);
  color: var(--fg-2);
  letter-spacing: -0.1px;
  display: inline-flex; align-items: center; gap: 8px;
  padding-right: 12px;
}
.rt-venue .v-glyph {
  width: 20px; height: 20px;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  display: grid; place-items: center;
  font: 700 9px/1 var(--font-sans);
  color: rgba(255,255,255,0.75);
}
.rt-rail {
  position: relative;
  height: 12px;
}
.rt-rail::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--white-06);
  transform: translateY(-50%);
}
.rt-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 8px; border-radius: 999px;
  display: flex; align-items: center; padding: 0 8px;
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 1.2px; text-transform: uppercase;
  white-space: nowrap;
}
.rt-bar--live {
  background: linear-gradient(90deg, rgba(48,209,88,0.4), rgba(48,209,88,0.18));
  border: 1px solid rgba(48,209,88,0.45);
  color: rgba(48,209,88,0.95);
  box-shadow: 0 0 0 2px rgba(48,209,88,0.06), 0 0 12px rgba(48,209,88,0.18);
}
.rt-bar--new {
  background: linear-gradient(90deg, rgba(255,214,10,0.32), rgba(255,214,10,0.10));
  border: 1px solid rgba(255,214,10,0.40);
  color: rgba(255,214,10,0.95);
  box-shadow: 0 0 0 2px rgba(255,214,10,0.04), 0 0 12px rgba(255,214,10,0.18);
  animation: rt-bar-shimmer 2.6s ease-in-out infinite;
}
.rt-bar--upcoming {
  background: var(--white-06);
  border: 1px dashed var(--white-15);
  color: var(--fg-5);
}
.rt-bar .rt-bar-l { padding-left: 2px; }
@keyframes rt-bar-shimmer {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,214,10,0.04), 0 0 12px rgba(255,214,10,0.18); }
  50%      { box-shadow: 0 0 0 3px rgba(255,214,10,0.10), 0 0 22px rgba(255,214,10,0.32); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-bar--new { animation: none; }
}
@media (max-width: 768px) {
  .rt-axis { grid-template-columns: 64px repeat(4, 1fr); font-size: 9px; letter-spacing: 1px; }
  .rt-row  { grid-template-columns: 64px 1fr; }
  .rt-venue { font-size: 11px; }
  .rt-bar { font-size: 8px; padding: 0 4px; }
  .rt-venue .v-glyph { display: none; }
}

/* ── 7. Pricing — 90-day savings sparkline ────────────────────────
   Tiny SVG block at the bottom of the pricing card showing the curve
   of cumulative savings at 0bps over the first 90 days. */
.savings-block {
  margin-top: 18px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(255,214,10,0.18);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,214,10,0.04), rgba(255,214,10,0.008));
}
.savings-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.savings-l {
  font: 600 10px/14px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: rgba(255,214,10,0.85);
}
.savings-v {
  font: 500 18px/22px var(--font-mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
}
.savings-sub {
  font: 400 11px var(--font-mono);
  color: var(--fg-5);
}
.savings-chart { margin-top: 10px; display: block; width: 100%; height: 44px; overflow: visible; }
.savings-chart .sv-area  { fill: url(#savingsFill); opacity: 0.35; }
.savings-chart .sv-line  {
  stroke: var(--yellow); stroke-width: 1.25; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.55;
  /* Draw-in animation: line is fully dashed off at start, then strokes
     in over 1.8s on reveal. The dasharray needs to exceed the path's
     total length (~340 for the cubic curve); 460 is comfortably over. */
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  transition: stroke-dashoffset 1.8s var(--ease-out-expo);
}
.reveal.in .savings-chart .sv-line { stroke-dashoffset: 0; }
.savings-chart .sv-end   {
  fill: var(--yellow);
  opacity: 0;
  transform-origin: 320px 4px; transform-box: fill-box;
  transition: opacity 400ms var(--ease) 1.6s;
  animation: sv-end-pulse 2.6s ease-in-out infinite 1.8s;
}
.reveal.in .savings-chart .sv-end { opacity: 0.9; }
@keyframes sv-end-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255,214,10,0.30)); }
  50%      { filter: drop-shadow(0 0 6px rgba(255,214,10,0.55)); }
}
/* Trade-tick marks — five faint vertical strokes along the curve that
   breathe in sequence, evoking a terminal chart's discrete trade events
   without competing with the main line. */
.savings-chart .sv-tick {
  stroke: var(--yellow); stroke-width: 1;
  opacity: 0;
  animation: sv-tick 4s ease-in-out infinite;
}
.savings-chart .sv-tick:nth-of-type(1) { animation-delay: 0.0s; }
.savings-chart .sv-tick:nth-of-type(2) { animation-delay: 0.7s; }
.savings-chart .sv-tick:nth-of-type(3) { animation-delay: 1.4s; }
.savings-chart .sv-tick:nth-of-type(4) { animation-delay: 2.1s; }
.savings-chart .sv-tick:nth-of-type(5) { animation-delay: 2.8s; }
@keyframes sv-tick {
  0%, 100% { opacity: 0; }
  20%      { opacity: 0.30; }
  60%      { opacity: 0.10; }
}
@media (prefers-reduced-motion: reduce) {
  .savings-chart .sv-line { transition: none; stroke-dashoffset: 0; }
  .savings-chart .sv-end  { animation: none; opacity: 0.9; }
  .savings-chart .sv-tick { animation: none; opacity: 0.18; }
}
.savings-chart .sv-grid  { stroke: var(--white-06); stroke-width: 1; }

/* X-axis labels live in normal flow below the SVG so preserveAspectRatio="none"
   doesn't stretch the type. Three justified spans give Day 0 / 45 / 90 the
   same horizontal anchor points the in-SVG <text> elements used to occupy. */
.savings-axis {
  margin-top: 8px;
  display: flex; justify-content: space-between; align-items: baseline;
  font: 600 10px/12px var(--font-sans);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--fg-stone);
}
.savings-axis .ax {
  font-variant-numeric: tabular-nums;
}
.savings-axis .ax--end {
  /* The end-of-period anchor reads as the meaningful one — the chart
     terminates there. Lift it to a brighter tier so the eye lands. */
  color: rgba(255,214,10,0.85);
}

/* ── 8. Brand-mark watermark (decorative section accent) ────────────
   Large faint Oddeon router glyph sits behind certain sections as a
   ghost-mark, anchored to the corner. Strictly decoration; pointer
   events disabled and z-index pushed below content. */
.watermark {
  position: absolute;
  pointer-events: none;
  opacity: 0.04;
  z-index: 0;
}
.watermark--tl { top: 32px; left: -40px; width: 280px; height: 280px; }
.watermark--br { bottom: 32px; right: -40px; width: 360px; height: 360px; }
.watermark svg { width: 100%; height: 100%; display: block; color: var(--fg); }
section.block .wrap { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .watermark { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3 GRAPHICS ADDITIONS
   ═══════════════════════════════════════════════════════════════════ */

/* ── 9. Hero stat ribbon — small live metrics under the CTAs ──────── */
.hero-stats {
  margin-top: 56px;
  display: inline-flex; gap: 0;
  border: 1px solid var(--border-1);
  border-radius: 14px;
  background: linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  overflow: hidden;
}
.hero-stat {
  padding: 14px 22px;
  border-right: 1px solid var(--border-1);
  display: flex; flex-direction: column; gap: 2px;
}
.hero-stat:last-child { border-right: 0; }
.hero-stat .l {
  font: 600 9px/12px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-stone);
}
.hero-stat .v {
  display: inline-flex; align-items: baseline; gap: 4px;
  font: 500 18px/22px var(--font-mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}
.hero-stat .v .live-pin {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(48,209,88,0.16), 0 0 6px rgba(48,209,88,0.5);
  animation: subtlePulse 2.4s ease-in-out infinite;
  margin-right: 2px;
  align-self: center;
}
.hero-stat .v.edge { color: var(--yellow); }
@media (max-width: 768px) {
  .hero-stats { flex-wrap: wrap; }
  .hero-stat  { padding: 12px 18px; }
  .hero-stat .v { font-size: 15px; }
}

/* ── 10. Live Edges — heat-map grid + 24h edge clock radar ─────────── */
.edges-grid-wrap {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
.edges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--border-1);
  border-radius: 18px;
  background: linear-gradient(rgba(255,255,255,0.015), rgba(255,255,255,0.003));
}
@media (max-width: 640px) { .edges-grid { grid-template-columns: repeat(2, 1fr); } }
.edge-tile {
  padding: 12px 12px 10px;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.005));
  display: flex; flex-direction: column; gap: 8px;
  min-height: 100px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.edge-tile:hover { border-color: var(--white-15); transform: translateY(-1px); }
.edge-tile__cat {
  font: 600 9px/12px var(--font-sans);
  letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--fg-stone);
}
.edge-tile__q {
  font: 500 11px/14px var(--font-sans);
  color: var(--fg);
  letter-spacing: -0.05px;
}
.edge-tile__foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
}
.edge-tile__delta {
  font: 600 11px/14px var(--font-mono);
  letter-spacing: -0.2px;
}
.edge-tile__venues {
  font: 400 9px/12px var(--font-mono);
  color: var(--fg-5);
  letter-spacing: 0.04em;
}
/* heat intensity — colored aura behind tile */
.edge-tile::before {
  content: ''; position: absolute; inset: 0;
  background: var(--heat, transparent);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}
.edge-tile { isolation: isolate; }
.edge-tile.heat-3 {
  --heat: radial-gradient(at 70% 30%, rgba(255,214,10,0.18) 0%, transparent 70%);
  border-color: rgba(255,214,10,0.30);
}
.edge-tile.heat-3 .edge-tile__delta { color: var(--yellow); }
.edge-tile.heat-2 {
  --heat: radial-gradient(at 70% 30%, rgba(255,214,10,0.10) 0%, transparent 70%);
  border-color: rgba(255,214,10,0.18);
}
.edge-tile.heat-2 .edge-tile__delta { color: rgba(255,214,10,0.85); }
.edge-tile.heat-1 .edge-tile__delta { color: var(--fg-2); }
.edge-tile.heat-0 { opacity: 0.6; }
.edge-tile.heat-0 .edge-tile__delta { color: var(--fg-5); }
.edge-tile.heat-3 .pulse-dot {
  position: absolute; top: 12px; right: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255,214,10,0.20), 0 0 8px rgba(255,214,10,0.6);
  animation: subtlePulse 1.8s ease-in-out infinite;
}

/* Edge clock — 24h radar */
.edge-clock {
  padding: 24px;
  border: 1px solid var(--border-1);
  border-radius: 18px;
  background: linear-gradient(rgba(255,255,255,0.018), rgba(255,255,255,0.003));
  display: flex; flex-direction: column;
}
.edge-clock__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.edge-clock__head .l {
  font: 600 11px/14px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--fg-stone);
}
.edge-clock__head .v {
  font: 500 24px var(--font-mono);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
}
.edge-clock__head .v small {
  font: 400 11px var(--font-sans);
  color: var(--fg-5);
  letter-spacing: 0;
  margin-left: 4px;
}
.edge-clock__svg {
  width: 100%; max-width: 320px; aspect-ratio: 1;
  margin: 0 auto;
  display: block;
}
.ec-axis { fill: none; stroke: var(--white-08); stroke-width: 1; }
.ec-spoke { stroke: var(--white-06); stroke-width: 1; }
.ec-tick {
  fill: var(--fg-stone);
  font: 600 8px var(--font-sans);
  letter-spacing: 1.2px;
}
.ec-bar {
  stroke: var(--yellow);
  stroke-linecap: round;
  transition: stroke-width var(--t) var(--ease);
}
.ec-bar.heat-1 { stroke: rgba(255,214,10,0.35); stroke-width: 2.5; }
.ec-bar.heat-2 { stroke: rgba(255,214,10,0.70); stroke-width: 3.5; }
.ec-bar.heat-3 { stroke: var(--yellow); stroke-width: 4.5;
  filter: drop-shadow(0 0 5px rgba(255,214,10,0.6)); }
.ec-now {
  fill: none; stroke: var(--blue); stroke-width: 1.25;
  stroke-dasharray: 2 3;
}
.ec-now-dot {
  fill: var(--blue);
  filter: drop-shadow(0 0 4px rgba(10,132,255,0.7));
  animation: subtlePulse 2.4s ease-in-out infinite;
}
.edge-clock__legend {
  margin-top: 14px;
  display: flex; justify-content: space-between;
  font: 400 11px var(--font-mono);
  color: var(--fg-5);
}
.edge-clock__legend .ec-now-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(10,132,255,0.85);
}
.edge-clock__legend .ec-now-lbl::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 2px rgba(10,132,255,0.16), 0 0 6px rgba(10,132,255,0.5);
}

/* ── 11. Routed Tape — REMOVED ──
   The live trade ticker was cut from the page (markup deleted below).
   The .routed-tape rules are kept as dead styles for now in case the
   section is reinstated, but no element on the page references them. */
.routed-tape {
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.002));
  padding: 18px 0;
  overflow: hidden;
  position: relative;
}
.routed-tape__head {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 2;
  padding: 0 18px 0 32px;
  display: flex; align-items: center;
  background: linear-gradient(90deg, var(--bg) 60%, transparent);
  font: 600 10px/14px var(--font-sans);
  letter-spacing: 1.65px; text-transform: uppercase;
  color: var(--green);
}
.routed-tape__head .live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(48,209,88,0.16), 0 0 6px rgba(48,209,88,0.5);
  animation: subtlePulse 1.6s ease-in-out infinite;
}
.routed-tape__track {
  display: flex; gap: 36px; width: max-content;
  padding-left: 220px;
  animation: tape-scroll 65s linear infinite;
}
.routed-tape:hover .routed-tape__track { animation-play-state: paused; }
.routed-trade {
  display: inline-flex; align-items: center; gap: 12px;
  font: 400 12px/16px var(--font-mono);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.routed-trade .time { color: var(--fg-5); }
.routed-trade .side {
  font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  font-size: 10px;
}
.routed-trade .side.yes { color: var(--blue); }
.routed-trade .side.no  { color: var(--pink); }
.routed-trade .q {
  color: var(--fg-2); font-family: var(--font-sans); font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.05px;
}
.routed-trade .px { color: var(--fg); }
.routed-trade .edge {
  color: var(--yellow);
  background: rgba(255,214,10,0.10);
  padding: 2px 8px; border-radius: 999px;
  font-weight: 600; font-size: 10px;
  letter-spacing: 0;
}
.routed-trade .venues {
  color: var(--purple);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
}
.routed-trade .sep {
  color: var(--fg-stone); opacity: 0.4;
}
@keyframes tape-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .routed-tape__track { animation: none; }
}
@media (max-width: 640px) {
  .routed-tape__head { padding: 0 12px 0 20px; font-size: 9px; letter-spacing: 1.2px; }
  .routed-tape__track { padding-left: 160px; }
}

/* ── 12. Tweaks toggle visibility classes ─────────────────────────── */
body.tw-no-chips    .hero-chips,
body.tw-no-marquee  .routing-strip,
body.tw-no-pipeline .how-pipeline,
body.tw-no-watermarks .watermark,
body.tw-no-clock    .edge-clock,
body.tw-no-tape     .routed-tape,
body.tw-no-stats    .hero-stats,
body.tw-no-heatmap  .edges-grid-wrap { display: none !important; }
body.tw-calm .live-chip,
body.tw-calm .iphone-float,
body.tw-calm .marquee__track,
body.tw-calm .routed-tape__track,
body.tw-calm .pipe-flow,
body.tw-calm .pipe-dot,
body.tw-calm .ec-now-dot,
body.tw-calm .sg-link,
body.tw-calm .sg-pulse,
body.tw-calm .rt-bar--new,
body.tw-calm .vis-fill .ring,
body.tw-calm .vis-route .vis-pkt {
  animation: none !important;
}
body.tw-saturate-low {
  --blue:   #5BA8FF;
  --purple: #D4A2F8;
  --pink:   #FFA5B5;
  --yellow: #FFE36B;
  --green:  #82E5A4;
}
body.tw-saturate-high {
  --blue:   #0066FF;
  --purple: #B23DFF;
  --pink:   #FF4566;
  --yellow: #FFD000;
  --green:  #00E04D;
}

/* ── 13. Tweaks panel chrome (override starter for brand fit) ─────── */
.tweaks-panel {
  font-family: var(--font-sans);
  background: rgba(10,10,12,0.92);
  border: 1px solid var(--white-15);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}