/*
* USA OPS Theme Stylesheet
* Theme: usaops
* DO NOT edit this file directly — it is generated from the design system.
*/
/* Self-hosted fonts (Merriweather + Inter) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-2.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-3.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-4.woff2') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-5.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;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-6.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-7.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-2.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-3.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-4.woff2') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-5.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;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-6.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-7.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-2.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-3.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-4.woff2') format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-5.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;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-6.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/inter-400n-7.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400i.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400i-2.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400i-3.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;
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400i-4.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400i-5.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400i.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400i-2.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400i-3.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;
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400i-4.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Merriweather';
font-style: italic;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400i-5.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-2.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-3.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;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-4.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-5.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-2.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-3.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;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-4.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-5.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-2.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-3.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;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-4.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url('https://blocks.usaops.us/wp-content/themes/usaops/fonts/merriweather-400n-5.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
/* ═══ BRAND PALETTE ═══════════════════════════════════════════════════ */
--ink:#0F2744; /* primary dark navy — headings, body text */
--ink-soft:#2A4A6B; /* secondary text on light backgrounds */
--ink-faint:#3A5A78; /* muted labels / meta on light backgrounds */
--paper:#F0F4FA; /* page background */
--paper-warm:#E4EDF8; /* warm / alternate section background */
--card:#FFFFFF; /* card surface */
--white:#FFFFFF; /* pure white */
--black:#000000; /* pure black */
--line:#D6E2F0; /* hairline dividers */
--line-strong:#A8C0DA; /* stronger dividers / borders */
--green:#1A6FD4; /* primary CTA / interactive blue */
--green-deep:#0F4FA0; /* darker CTA / hover state */
--green-bright:#5B9BD5; /* lighter accent */
--gold:#1A5FAB; /* employer-track accent */
--red:#C0392B; /* error / warning */
--shadow:0 1px 0 rgba(15,39,68,.05),0 24px 60px -36px rgba(15,39,68,.45);
--maxw:1160px;
/* ═══ DARK-BAND TEXT HIERARCHY (text on --ink background) ═══════════ */
--on-dark-hi:#F4F9FF; /* near-white — highest contrast */
--on-dark-heading:#F0F6FF; /* section headings on dark bg */
--on-dark-bright:#EAF2FB; /* bright body text on dark bg */
--on-dark-strong:#DCEAF8; /* strong secondary on dark bg */
--on-dark-body:#BFD6EC; /* body text on dark bg */
--on-dark-alt:#BDD6EE; /* body text variant */
--on-dark-secondary:#B8CEDE; /* dek / secondary text on dark bg */
--on-dark-mid:#C0D4E8; /* mid-weight text on dark bg */
--on-dark-anchor:#CBDDEE; /* news anchor body text */
--on-dark-caption:#C6D8EA; /* card captions on dark bg */
--on-dark-aside:#AFC6DC; /* aside / callout text on dark bg */
--on-dark-label:#9DC4E8; /* prominent labels on dark bg */
--on-dark-chart-label:#9BBCD8; /* SVG chart axis labels */
--on-dark-hero:#D6E8FA; /* hero panel text */
--on-dark-muted:#95B5D0; /* muted labels on dark bg (min 7:1) */
--on-dark-calc-label:#90B8D8; /* calculator output labels */
--on-dark-price-tagline:#90B0CC;/* pricing tagline text */
--on-dark-faint2:#8EB4D4; /* very faint labels */
--on-dark-faint:#8AA8C4; /* faint secondary labels */
--on-dark-subtle:#7FA6CC; /* subtle / lowest-priority labels */
--on-dark-price-tag:#7FB3E6; /* employer pricing track colour */
--on-dark-dim:#7E9EBC; /* dimmest labels on dark bg */
--on-dark-mbox:#7A9AB8; /* mechanism box headers */
/* ═══ CHART & DATA VIZ ══════════════════════════════════════════════ */
--chart-red:#E66A5A; /* "their" cost line */
--chart-red-end:#2E6FB0; /* gradient end for solo bars */
--chart-blue-end:#3E7BBE; /* gradient end for employer bars */
--chart-green:#22C55E; /* live / active indicator dot */
--hero-accent:#4FA3F7; /* hero big savings number */
--hero-accent-dim:#7BBFF5; /* hero reference colour */
--hero-chart-sub:#7FBFF0; /* hero sub-label colour */
--before-col-text:#F0D6D2; /* "before" column big number */
--before-col-head:#E8A89F; /* "before" column header text */
--green-bright-muted:#5B7A98; /* muted mechanism arrow colour */
/* ═══ BACKGROUND SURFACES ═══════════════════════════════════════════ */
--nav-bg:#EDF3F8; /* sticky nav background */
--footer-bg:#112A46; /* footer band background */
--news-card-bg:var(--news-card-bg); /* news card dark background */
--news-media-bg:var(--news-media-bg); /* news card media area background */
--dark-surface:#071629; /* deepest overlay surface */
--hero-panel-bg:#0A1E36; /* hero interactive panel background */
/* ═══ COMPONENT STATES ══════════════════════════════════════════════ */
--success-bg:#EBF3FF; /* success / savings output background */
--success-border:#C0D8F0; /* success output border */
--alert-bg:var(--alert-bg); /* alert / current-cost background */
--alert-border:var(--alert-border); /* alert output border */
--blue-mid:#15568A; /* calculator CTA hover */
--blue-link:#1560C0; /* reference / footnote link */
--blue-alert:#4A6A8A; /* refinement banner accent */
--orange-warn:#F59E0B; /* warning / caution indicator */
/* ═══ SPACING SCALE ═════════════════════════════════════════════════ */
--sp-xs:.4rem; /* 7px — tight internal gaps */
--sp-sm:.8rem; /* 14px — component internal padding */
--sp-md:1.2rem; /* 22px — section internal spacing */
--sp-lg:1.6rem; /* 29px — card padding */
--sp-xl:2rem; /* 36px — section gap */
--sp-2xl:2.6rem; /* 47px — between-component gap */
--sp-3xl:3.5rem; /* 63px — section vertical padding */
--sp-4xl:5rem; /* 90px — large section padding */
/* ═══ TYPE SIZES ════════════════════════════════════════════════════ */
--text-label:.84rem; /* 15px — eyebrows, mono labels, tags */
--text-sm:.9rem; /* 16px — nav, captions, meta */
--text-base:1rem; /* 18px — body paragraphs, lists */
--text-md:1.1rem; /* 20px — larger body / emphasis */
--text-lg:1.2rem; /* 22px — lede, dek */
--text-xl:1.5rem; /* 27px — large display text */
--text-2xl:1.8rem; /* 32px — sub-display */
--text-3xl:2.5rem; /* 45px — plan price */
--text-4xl:3.2rem; /* 58px — decorative numerals */
/* ═══ BORDER RADIUS ═════════════════════════════════════════════════ */
--radius-xs:2px; /* buttons, tags, sharp cards */
--radius-sm:4px; /* cards, containers */
--radius-md:8px; /* calculator, rounded elements */
--radius-lg:12px; /* large calc / modal surfaces */
--radius-full:999px;/* pills, chips, round dots */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:84px}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
font-size:18px;
line-height:1.62;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body::before{
content:"";
position:fixed;inset:0;
pointer-events:none;z-index:1;
opacity:.035;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}
h1,h2,h3{font-family:"Merriweather",Georgia,serif;font-weight:600;line-height:1.06;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.7rem,6.4vw,5.1rem);font-weight:650}
h2{font-size:clamp(2rem,4.2vw,3.25rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.005em}
p{margin:0 0 1.1em}
a{color:inherit}
.mono{font-family:"Courier New",Courier,monospace;font-weight:500}
/* ---- eyebrow ---- */
.eyebrow{
font-family:"Courier New",Courier,monospace;
font-size:.88rem;font-weight:600;
letter-spacing:.18em;text-transform:uppercase;
color:var(--green-deep);
display:inline-flex;align-items:center;gap:.7em;
margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:30px;height:1.5px;background:var(--green-deep);display:inline-block}
/* ---- buttons ---- */
.cta{
display:inline-flex;align-items:center;gap:.6em;
background:var(--green);color:var(--white);
font-family:"Inter",sans-serif;font-weight:600;font-size:1rem;
padding:1.05rem 1.8rem;border-radius:2px;border:0;
text-decoration:none;cursor:pointer;letter-spacing:.005em;
box-shadow:0 14px 30px -14px rgba(26,111,212,.7);
transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
position:relative;
}
.cta:hover{background:var(--green-deep);transform:translateY(-2px);box-shadow:0 20px 38px -16px rgba(26,111,212,.8)}
.cta .arrow{transition:transform .18s ease}
.cta:hover .arrow{transform:translateX(4px)}
.cta .sub{font-family:"Courier New",Courier,monospace;font-weight:400;font-size:.84rem;opacity:.78;letter-spacing:.04em}
.cta-ghost{
display:inline-flex;align-items:center;gap:.5em;
color:var(--ink);font-weight:600;font-size:1rem;text-decoration:none;
border-bottom:1.5px solid var(--line-strong);padding-bottom:2px;
transition:border-color .18s ease,color .18s ease;
}
.cta-ghost:hover{border-color:var(--green);color:var(--green)}
/* ---- nav ---- */
header.nav{
position:sticky;top:0;z-index:40;
background:var(--nav-bg);
border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:15px 28px;max-width:var(--maxw);margin:0 auto}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:clamp(28px,3.2vw,36px);width:auto;display:block}
/* footer logo: dark-bg version, blends straight onto the footer band, no plate */
.footer-logo img{height:clamp(26px,2.8vw,34px)}
.nav-cta{font-size:1rem;padding:.7rem 1.25rem;box-shadow:none}
/* anchor menu in the nav */
.nav-menu{display:flex;align-items:center;gap:clamp(1rem,2vw,1.7rem);margin:0 auto}
.nav-menu a{
font-family:"Inter",sans-serif;font-size:.9rem;font-weight:500;color:var(--ink-soft);
text-decoration:none;white-space:nowrap;padding:.3rem 0;position:relative;transition:color .18s;
}
.nav-menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-menu a:hover{color:var(--ink)}
.nav-menu a:hover::after{transform:scaleX(1)}
@media(max-width:980px){.nav-menu{display:none}}
/* clarity band (under hero) — the grunt test. what we do / problem / who, telegraphic.
three blocks, hairline dividers, institutional register. */
.clarity{padding:clamp(2.6rem,5vw,4rem) 0;border-bottom:1px solid var(--line)}
.clarity-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border:1px solid var(--line-strong);
}
.clarity-cell{padding:clamp(1.5rem,3vw,2.2rem);border-right:1px solid var(--line)}
.clarity-cell:last-child{border-right:0}
.clarity-cell .cl-lab{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--green);margin:0 0 .9rem;display:flex;align-items:center;gap:.6em;
}
.clarity-cell .cl-lab .n{color:var(--ink-faint)}
.clarity-cell .cl-head{font-size:clamp(1.12rem,1.7vw,1.32rem);font-weight:700;color:var(--ink);margin:0 0 .5rem;line-height:1.25;letter-spacing:-.01em}
.clarity-cell p{font-size:clamp(.96rem,1.15vw,1.04rem);color:var(--ink-soft);margin:0;line-height:1.5}
.clarity-cell p b{color:var(--ink);font-weight:600}
.nav-cta .sub{display:none}
@media(max-width:720px){.logo .tag{display:none}}
/* ---- hero ---- */
.hero{padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{margin-bottom:1.5rem}
.hero h1 .em{font-style:italic;font-weight:500;color:var(--green)}
.hero-lede{font-size:clamp(1.12rem,1.7vw,1.32rem);color:var(--ink-soft);max-width:34ch;margin-bottom:2.1rem}
.hero-actions{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.hero-note{font-family:"Courier New",Courier,monospace;font-size:.84rem;color:var(--ink-faint);margin-top:1.6rem;letter-spacing:.02em;display:flex;align-items:center;gap:.55em}
.hero-note b{color:var(--green);font-weight:500}
/* receipt card in hero */
.receipt{
background:var(--card);border:1px solid var(--line);
box-shadow:var(--shadow);border-radius:4px;
padding:1.7rem 1.7rem 1.5rem;position:relative;
}
.receipt::before{
content:"ILLUSTRATIVE";position:absolute;top:1.25rem;right:1.25rem;
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.18em;
color:var(--ink-faint);border:1px solid var(--line-strong);padding:.2em .55em;border-radius:2px;
}
.receipt h4{font-family:"Courier New",Courier,monospace;font-size:.84rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1.2rem}
.rline{display:flex;justify-content:space-between;align-items:baseline;padding:.62rem 0;border-bottom:1px dashed var(--line)}
.rline .lab{font-size:1rem;color:var(--ink-soft)}
.rline .val{font-family:"Inter",sans-serif;font-weight:600;font-size:1.05rem;font-feature-settings:"tnum" 1}
.rline.strike .val{text-decoration:line-through;color:var(--ink-faint);text-decoration-thickness:1.5px}
.rline.keep{border-bottom:0;padding-top:1rem;margin-top:.3rem;border-top:2px solid var(--ink)}
.rline.keep .lab{font-weight:600;color:var(--ink)}
.rline.keep .val{font-size:1.7rem;color:var(--green);font-family:"Merriweather",serif;font-weight:600}
.receipt-foot{font-size:.88rem;color:var(--ink-faint);margin:1.1rem 0 0;line-height:1.45}
/* ---- section scaffolding ---- */
section{padding:clamp(3.5rem,7vw,6rem) 0;position:relative}
.section-head{max-width:100%}
.section-head h2{margin-bottom:1.3rem;max-width:none}
.section-head .dek{font-size:1.2rem;color:var(--ink-soft);max-width:64ch}
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule-strong{height:2px;background:var(--ink);border:0;width:48px;margin:0 0 2rem}
.band-dark{background:var(--ink);color:var(--paper-warm)}
.band-dark h2,.band-dark h3{color:var(--on-dark-heading)}
.band-dark .eyebrow{color:var(--green-bright);font-size:.88rem;font-weight:600;letter-spacing:.18em}
.band-dark .eyebrow::before{background:var(--green-bright)}
.band-dark .dek{color:var(--on-dark-secondary)}
.band-warm{background:var(--paper-warm)}
/* problem (section 3, solo) — two steady-state mechanisms, then a dated rupture.
institutional register: hairline structure, mono timestamps, one dark insert. */
.prob-row{
margin-top:clamp(2rem,4vw,3rem);
border-top:1px solid var(--line-strong);
}
.prob-grid{
display:grid;grid-template-columns:1fr 1fr;
}
.prob-entry{
padding:clamp(1.5rem,2.6vw,2.1rem) clamp(1.4rem,2.4vw,2rem) clamp(1.6rem,2.6vw,2.1rem) 0;
border-bottom:1px solid var(--line);
position:relative;
}
.prob-entry:first-child{border-right:1px solid var(--line);padding-right:clamp(1.6rem,3vw,2.6rem)}
.prob-entry:nth-child(2){padding-left:clamp(1.6rem,3vw,2.6rem)}
.prob-entry .pe-tag{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-faint);margin:0 0 .9rem;display:flex;align-items:center;gap:.6em;
}
.prob-entry .pe-tag .n{
font-weight:600;color:var(--green);font-feature-settings:"tnum" 1;
}
.prob-entry h3{font-size:clamp(1.16rem,1.9vw,1.34rem);margin:0 0 .6rem;letter-spacing:-.005em}
.prob-entry p{font-size:clamp(.96rem,1.1vw,1.02rem);color:var(--ink-soft);margin:0}
/* the rupture: the 2026 inciting incident. only dark element in a light section.
reads as a dated bulletin, foreshadows the dark news band in section 5. */
.prob-rupture{
background:var(--ink);color:var(--on-dark-bright);
margin-top:clamp(1.4rem,2.4vw,1.9rem);
padding:clamp(1.7rem,3vw,2.3rem) clamp(1.6rem,3vw,2.4rem);
position:relative;overflow:hidden;
display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(1.6rem,3vw,2.8rem);align-items:center;
}
.prob-rupture::before{
content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--green);
}
.prob-rupture .pr-body{min-width:0}
.prob-rupture .pr-meta{
display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--green-bright);margin:0 0 1rem;
}
.prob-rupture .pr-meta .stamp{
border:1px solid rgba(91,155,213,.4);border-radius:2px;padding:.25em .6em;
color:var(--on-dark-label);letter-spacing:.12em;
}
.prob-rupture .pr-dot{width:7px;height:7px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 0 0 rgba(91,155,213,.5);animation:prPulse 2.4s infinite}
@keyframes prPulse{0%{box-shadow:0 0 0 0 rgba(91,155,213,.45)}70%{box-shadow:0 0 0 9px rgba(91,155,213,0)}100%{box-shadow:0 0 0 0 rgba(91,155,213,0)}}
.prob-rupture h3{font-size:clamp(1.3rem,2.3vw,1.62rem);color:var(--on-dark-hi);margin:0 0 .7rem;letter-spacing:-.01em}
.prob-rupture p{font-size:clamp(1rem,1.2vw,1.06rem);color:var(--on-dark-body);margin:0}
/* right aside: the structural read, set like a margin note on a statement */
.prob-rupture .pr-aside{
border-left:1px solid rgba(157,196,232,.28);
padding-left:clamp(1.4rem,2.6vw,2rem);
}
.prob-rupture .pr-aside .lab{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--on-dark-subtle);margin:0 0 .7rem;
}
.prob-rupture .pr-aside .read{
font-family:"Merriweather",Georgia,serif;font-size:clamp(1.04rem,1.5vw,1.22rem);font-weight:400;font-style:italic;
color:var(--on-dark-strong);line-height:1.4;margin:0;
}
/* problem (section 4, employer) — a descending sequence that worsens toward a trap.
emotional shape: mounting frustration, not rupture. hairline steps, mono markers,
the trap set heaviest with the red "their terms" accent established in section 2. */
.esc-seq{
margin-top:clamp(2rem,4vw,3rem);
border-top:1px solid var(--line-strong);
counter-reset:esc;
}
.esc-step{
counter-increment:esc;
display:grid;
grid-template-columns:auto 1fr;
gap:clamp(1.2rem,3vw,2.4rem);
padding:clamp(1.5rem,2.8vw,2.2rem) 0;
border-bottom:1px solid var(--line);
align-items:start;
}
.esc-step .esc-rail{
display:flex;flex-direction:column;align-items:center;gap:.6rem;
min-width:2.4rem;
}
.esc-step .esc-n{
font-family:"Courier New",Courier,monospace;font-weight:600;font-size:1rem;
color:var(--ink-faint);font-feature-settings:"tnum" 1;
width:2.2rem;height:2.2rem;border:1px solid var(--line-strong);border-radius:50%;
display:flex;align-items:center;justify-content:center;
}
.esc-step .esc-n::before{content:"0" counter(esc)}
.esc-step .esc-link{flex:1;width:1px;background:var(--line);min-height:1.6rem}
.esc-step:last-child .esc-link{display:none}
.esc-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.esc-step h3{font-size:clamp(1.16rem,2vw,1.4rem);margin:0;letter-spacing:-.005em}
.esc-step p{font-size:clamp(.97rem,1.15vw,1.04rem);color:var(--ink-soft);margin:0;max-width:64ch}
.esc-step .esc-tag{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-faint);white-space:nowrap;
}
/* the pulled data point on step 2 */
.esc-figure{
display:inline-flex;align-items:baseline;gap:.5rem;
margin-top:.9rem;padding:.5rem .9rem;
border:1px solid var(--line-strong);border-radius:2px;background:var(--card);
}
.esc-figure .ef-num{font-family:"Merriweather",Georgia,serif;font-weight:700;font-size:1.2rem;color:var(--ink);font-feature-settings:"tnum" 1}
.esc-figure .ef-lab{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
/* the trap: terminal worst state */
.esc-step.trap{
background:var(--card);
border:1px solid var(--red);
margin-top:.4rem;padding:clamp(1.6rem,3vw,2.2rem);
grid-template-columns:auto 1fr;
position:relative;
}
.esc-step.trap .esc-n{border-color:var(--red);color:var(--red)}
.esc-step.trap h3{color:var(--ink)}
.esc-step.trap .esc-tag{color:var(--red)}
.esc-step.trap .esc-link{display:none}
/* problem trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1.8rem 1.6rem;position:relative;overflow:hidden}
.pcard .num{font-family:"Merriweather",serif;font-size:3.2rem;font-weight:400;color:var(--line-strong);line-height:.8;margin-bottom:1rem;display:block}
.pcard h3{font-size:1.2rem;margin-bottom:.7rem}
.pcard p{font-size:1rem;color:var(--ink-soft);margin:0}
.pcard.accent{background:var(--green-deep);border-color:var(--green-deep);color:var(--success-bg)}
.pcard.accent .num{color:rgba(255,255,255,.15)}
.pcard.accent h3{color:var(--white)}
.pcard.accent p{color:var(--on-dark-alt)}
/* mechanism / value story */
.mech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.5rem;border:1px solid rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.mech-step{padding:2rem 1.8rem;border-right:1px solid rgba(255,255,255,.12)}
.mech-step:last-child{border-right:0}
.mech-step .ph{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green-bright);margin-bottom:1rem}
.mech-step h3{font-size:1.3rem;margin-bottom:.8rem}
.mech-step p{font-size:1rem;color:var(--on-dark-secondary);margin:0}
.mech-money{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem;align-items:stretch}
.mbox{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:1.7rem}
.mbox.after{background:var(--green-deep);border-color:var(--green)}
.mbox .mh{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mbox);margin-bottom:1.2rem}
.mbox.after .mh{color:var(--green-bright)}
.mrow{display:flex;justify-content:space-between;align-items:baseline;padding:.5rem 0;font-size:1rem;color:var(--on-dark-mid)}
.mrow .mv{font-family:"Inter",sans-serif;font-weight:600;font-feature-settings:"tnum" 1}
.mrow.big{border-top:1px solid rgba(255,255,255,.2);margin-top:.6rem;padding-top:1rem}
.mrow.big .ml{font-weight:600;color:var(--white)}
.mrow.big .mv{font-family:"Merriweather",serif;font-size:1.8rem;color:var(--white)}
.mbox.after .mrow.big .mv{color:var(--green-bright)}
.mech-foot{font-size:1rem;color:var(--on-dark-faint);margin-top:2rem;max-width:70ch;line-height:1.55}
/* mechanism solo (section 7) — financial-terminal register. a connected ledger flow,
a two-column reconciliation with the big numbers on a shared baseline, an honest aside. */
.mech7-flow{
margin-top:clamp(1.8rem,3.5vw,2.6rem);
border-top:1px solid rgba(255,255,255,.18);
display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;
}
.mech7-step{padding:clamp(1.4rem,2.6vw,2rem) clamp(1rem,2vw,1.6rem) clamp(1.4rem,2.6vw,2rem) 0}
.mech7-step:not(:first-child){padding-left:clamp(1rem,2vw,1.6rem)}
.mech7-step .ph{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green-bright);margin:0 0 .9rem}
.mech7-step h3{font-size:clamp(1.12rem,1.9vw,1.34rem);margin:0 0 .6rem;color:var(--on-dark-hi);letter-spacing:-.005em}
.mech7-step p{font-size:clamp(.94rem,1.1vw,1rem);color:var(--on-dark-secondary);margin:0}
.mech7-arrow{display:flex;align-items:center;justify-content:center;color:var(--green-bright-muted);font-size:1.1rem;padding:0 .2rem}
/* reconciliation: before (heavy, red penalty) vs after (relief green). big numbers aligned. */
.mech7-recon{
margin-top:clamp(1.8rem,3.5vw,2.6rem);
display:grid;grid-template-columns:1fr 1fr;
border:1px solid rgba(255,255,255,.16);position:relative;
}
.mech7-recon::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.16);transform:translateX(-.5px)}
.mech7-recon .illus{
position:absolute;top:0;right:0;transform:translateY(-50%);margin-right:1rem;
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--on-dark-dim);background:var(--ink);border:1px solid rgba(255,255,255,.2);padding:.25em .6em;border-radius:2px;
}
.mech7-col{padding:clamp(1.5rem,3vw,2.1rem);display:flex;flex-direction:column}
.mech7-col.before{background:rgba(192,57,43,.06)}
.mech7-col.after{background:rgba(26,111,212,.1)}
.mech7-col .rh{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.1rem}
.mech7-col.before .rh{color:var(--before-col-head)}
.mech7-col.after .rh{color:var(--green-bright)}
.mech7-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;font-size:clamp(.92rem,1.1vw,.98rem);color:var(--on-dark-mid);border-bottom:1px solid rgba(255,255,255,.08)}
.mech7-line .v{font-family:"Courier New",Courier,monospace;font-weight:500;font-feature-settings:"tnum" 1;white-space:nowrap}
.mech7-col.before .mech7-line .v.pen{color:var(--chart-red)}
/* the climax row pins to the bottom so both big numbers share a baseline */
.mech7-big{margin-top:auto;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.22)}
.mech7-big .bl{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-faint);margin:0 0 .3rem}
.mech7-big .bv{font-family:"Merriweather",Georgia,serif;font-weight:900;line-height:.9;font-size:clamp(2.4rem,5.5vw,3.4rem);font-feature-settings:"tnum" 1}
.mech7-col.before .mech7-big .bv{color:var(--before-col-text)}
.mech7-col.after .mech7-big .bv{color:var(--green-bright)}
.mech7-big .bv .per{font-size:.34em;font-family:"Courier New",Courier,monospace;font-weight:500;color:var(--on-dark-faint);margin-left:.2em}
/* honest narrowing: a deliberate credibility aside, not buried body text */
.mech7-honest{
margin-top:clamp(1.8rem,3.5vw,2.4rem);
border-left:2px solid var(--green-bright);
padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.3rem,2.6vw,1.8rem);
background:rgba(255,255,255,.04);
}
.mech7-honest .hl{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-bright);margin:0 0 .7rem}
.mech7-honest p{font-size:clamp(.94rem,1.1vw,1rem);color:var(--on-dark-aside);margin:0;line-height:1.6;max-width:78ch}
/* mechanism employer (section 8) — same terminal register, but the story is cost over time.
a scroll-animated SVG chart: theirs climbs, mine holds. then a floor-case turn. */
.mech8-prism{display:inline-flex;align-items:center;background:var(--white);border-radius:3px;padding:.3rem .6rem;margin-top:.2rem}
.mech8-prism img{height:18px;width:auto;display:block}
.mech8-chart{
margin-top:clamp(1.8rem,3.5vw,2.6rem);
border:1px solid rgba(255,255,255,.16);
padding:clamp(1.4rem,3vw,2rem);
position:relative;background:rgba(255,255,255,.02);
}
.mech8-chart .illus{
position:absolute;top:0;right:0;transform:translateY(-50%);margin-right:1rem;
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--on-dark-dim);background:var(--ink);border:1px solid rgba(255,255,255,.2);padding:.25em .6em;border-radius:2px;
}
.mech8-chart .ch-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.mech8-chart .ch-title{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint);margin:0}
.mech8-chart .ch-legend{display:flex;gap:1.2rem;flex-wrap:wrap}
.mech8-chart .lg{display:flex;align-items:center;gap:.5em;font-size:.84rem;color:var(--on-dark-mid)}
.mech8-chart .lg .sw{width:18px;height:3px;border-radius:2px;display:inline-block}
.mech8-chart .lg.theirs .sw{background:var(--chart-red)}
.mech8-chart .lg.ours .sw{background:var(--green-bright)}
.mech8-svg{display:block;width:100%;height:auto;overflow:visible}
.mech8-svg .axis{stroke:rgba(255,255,255,.14);stroke-width:1}
.mech8-svg .grid{stroke:rgba(255,255,255,.06);stroke-width:1}
.mech8-svg .lbl{fill:var(--on-dark-chart-label);font-family:"Courier New",Courier,monospace;font-size:14px}
.mech8-svg .linepath{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mech8-svg .line-theirs{stroke:var(--chart-red)}
.mech8-svg .line-ours{stroke:var(--green-bright)}
.mech8-svg .endlbl{font-family:"Merriweather",Georgia,serif;font-weight:700;font-size:17px;font-feature-settings:"tnum" 1}
.mech8-svg .endlbl.theirs{fill:var(--before-col-text)}
.mech8-svg .endlbl.ours{fill:var(--green-bright)}
.mech8-svg .endsub{font-family:"Courier New",Courier,monospace;font-size:13px;letter-spacing:.05em}
.mech8-svg .endsub.theirs{fill:var(--before-col-head)}
.mech8-svg .endsub.ours{fill:var(--hero-chart-sub)}
/* the floor-case turn: even at a wash, the back office is the win */
.mech8-floor{
margin-top:clamp(1.8rem,3.5vw,2.4rem);
border:1px solid rgba(91,155,213,.35);
background:rgba(26,111,212,.08);
padding:clamp(1.4rem,3vw,1.9rem) clamp(1.5rem,3vw,2.1rem);
}
.mech8-floor .fl-lab{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-bright);margin:0 0 .7rem}
.mech8-floor p{font-size:clamp(1rem,1.3vw,1.12rem);color:var(--on-dark-strong);margin:0;line-height:1.55;max-width:74ch}
.mech8-floor p b{color:var(--white);font-weight:600}
/* legit / proof list */
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 3.5rem;margin-top:2.5rem}
/* legitimate (section 11) — evidentiary register. credential ledger reads like a
compliance summary; accreditation marks framed as third-party stamps. */
.cred-ledger{
margin-top:clamp(1.8rem,3.5vw,2.6rem);
border-top:1px solid var(--line-strong);
}
.cred-row{
display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.6vw,2rem);
padding:clamp(1.3rem,2.6vw,1.8rem) 0;
border-bottom:1px solid var(--line);align-items:start;
}
.cred-row .cred-ix{
font-family:"Courier New",Courier,monospace;font-size:.84rem;font-weight:600;letter-spacing:.08em;
color:var(--green);font-feature-settings:"tnum" 1;
display:flex;align-items:center;gap:.7em;white-space:nowrap;padding-top:.2rem;
}
.cred-row .cred-ix .chk{
width:18px;height:18px;flex:none;border-radius:50%;background:var(--green);
display:inline-flex;align-items:center;justify-content:center;
}
.cred-row .cred-ix .chk svg{width:10px;height:10px}
.cred-body h3{font-size:clamp(1.08rem,1.7vw,1.26rem);margin:0 0 .45rem;letter-spacing:-.005em}
.cred-body p{font-size:clamp(.96rem,1.1vw,1.02rem);color:var(--ink-soft);margin:0;max-width:68ch}
.cred-body p b{color:var(--ink);font-weight:600}
/* accreditation block: third-party stamps, framed and labeled */
.accred{
margin-top:clamp(2rem,4vw,2.8rem);
border:1px solid var(--line-strong);background:var(--card);
display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(1.4rem,3vw,2.4rem);
padding:clamp(1.4rem,3vw,1.9rem) clamp(1.5rem,3vw,2.2rem);
}
.accred .accred-marks{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2rem);flex-wrap:wrap}
.accred .accred-marks img{height:clamp(34px,4vw,46px);width:auto;display:block}
.accred .accred-text{border-left:1px solid var(--line);padding-left:clamp(1.4rem,3vw,2.4rem)}
.accred .accred-lab{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .4rem}
.accred .accred-desc{font-size:1rem;color:var(--ink-soft);margin:0}
.accred .accred-desc b{color:var(--ink);font-weight:600}
.proof-item{display:flex;gap:1.1rem;align-items:flex-start}
.proof-item .tick{flex:none;width:30px;height:30px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;margin-top:2px}
.proof-item .tick svg{width:15px;height:15px}
.proof-item h3{font-size:1.15rem;margin-bottom:.4rem}
.proof-item p{font-size:1rem;color:var(--ink-soft);margin:0}
/* what you get */
.get-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2.5rem}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1.9rem;display:flex;flex-direction:column}
.gcard h3{margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.gcard h3 .dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
.gcard ul{list-style:none;padding:0;margin:.4rem 0 0}
.gcard li{font-size:1rem;color:var(--ink-soft);padding:.5rem 0;border-bottom:1px solid var(--line);display:flex;gap:.7rem}
.gcard li:last-child{border-bottom:0}
.gcard li b{color:var(--ink);font-weight:600}
.gcard li .li-ic{color:var(--green);flex:none;font-family:"Courier New",Courier,monospace}
/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.5rem}
.plan{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1.7rem;text-align:left;position:relative}
.plan.featured{border:1.5px solid var(--green);box-shadow:0 20px 44px -28px rgba(26,111,212,.55)}
.plan .ptag{position:absolute;top:-11px;left:1.7rem;background:var(--green);color:var(--white);font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;padding:.32em .7em;border-radius:2px}
.plan .pname{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.5rem}
.plan .pprice{font-family:"Merriweather",serif;font-size:2.5rem;font-weight:600;line-height:1;margin-bottom:.2rem}
.plan .pprice span{font-size:1rem;font-family:"Inter",sans-serif;color:var(--ink-faint);font-weight:400}
.plan .pmeta{font-size:1rem;color:var(--ink-soft);border-top:1px solid var(--line);margin-top:1.1rem;padding-top:1rem}
.plan .pmeta div{display:flex;justify-content:space-between;padding:.25rem 0}
.plan .pmeta .mono{font-family:"Inter",sans-serif;font-weight:600;font-feature-settings:"tnum" 1}
/* the plan / steps */
.steps{counter-reset:s;margin-top:2.8rem;display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem;align-items:start;padding:1.7rem 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .sn{counter-increment:s;font-family:"Merriweather",serif;font-size:1.5rem;font-weight:600;color:var(--green);width:2.4rem}
.step .sn::before{content:"0" counter(s)}
.step h3{font-size:1.3rem;margin-bottom:.45rem}
.step p{font-size:1rem;color:var(--ink-soft);margin:0;max-width:62ch}
.step .stime{font-family:"Courier New",Courier,monospace;font-size:.84rem;color:var(--ink-faint);letter-spacing:.06em;white-space:nowrap;padding-top:.5rem}
/* fit columns */
/* fit (section 14) — merged qualification table. one criterion per row, fits / does-not
side by side, both equal weight. institutional register, no cards. */
.fit-table{
margin-top:clamp(1.8rem,3.5vw,2.6rem);
border:1px solid var(--line-strong);background:var(--card);
}
.fit-thead,.fit-trow{
display:grid;grid-template-columns:1.1fr 1.4fr 1.4fr;align-items:stretch;
}
.fit-thead{border-bottom:1px solid var(--line-strong);background:var(--paper)}
.fit-thead .fc{
padding:.85rem clamp(1rem,2vw,1.4rem);
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;
display:flex;align-items:center;gap:.5em;
}
.fit-thead .fc.crit{color:var(--ink-faint)}
.fit-thead .fc.fits{color:var(--green)}
.fit-thead .fc.nofit{color:var(--red)}
.fit-thead .fc.fits,.fit-trow .fc.fits{border-left:1px solid var(--line)}
.fit-thead .fc.nofit,.fit-trow .fc.nofit{border-left:1px solid var(--line)}
.fit-trow{border-bottom:1px solid var(--line)}
.fit-trow:last-child{border-bottom:0}
.fit-trow .fc{padding:clamp(.9rem,1.8vw,1.2rem) clamp(1rem,2vw,1.4rem);font-size:clamp(.93rem,1.1vw,1rem);line-height:1.45}
.fit-trow .fc.crit{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:600;display:flex;align-items:center}
.fit-trow .fc.fits{color:var(--ink-soft);background:rgba(26,111,212,.04)}
.fit-trow .fc.nofit{color:var(--ink-soft);background:rgba(192,57,43,.035)}
.fit-trow .fc .mk{font-family:"Courier New",Courier,monospace;font-weight:600;margin-right:.5em}
.fit-trow .fc.fits .mk{color:var(--green)}
.fit-trow .fc.nofit .mk{color:var(--red)}
.fit-trow .fc b{color:var(--ink);font-weight:600}
/* the two one-sided notes below the table */
.fit-notes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.6rem);margin-top:clamp(1.4rem,2.6vw,1.8rem)}
.fit-note{padding:clamp(1.1rem,2.2vw,1.4rem) clamp(1.2rem,2.4vw,1.6rem);border:1px solid var(--line)}
.fit-note .fn-lab{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .5rem}
.fit-note.yes{border-left:2px solid var(--green)}
.fit-note.yes .fn-lab{color:var(--green)}
.fit-note.no{border-left:2px solid var(--red)}
.fit-note.no .fn-lab{color:var(--red)}
.fit-note p{font-size:1rem;color:var(--ink-soft);margin:0;line-height:1.5}
.fit-note p b{color:var(--ink);font-weight:600}
.fit-line{background:var(--green-deep);color:var(--success-bg);border-radius:4px;padding:1.5rem 1.8rem;margin-top:1.5rem;font-size:1.05rem;text-align:center}
.fit-line b{color:var(--white);font-weight:600}
/* closing emphasis that should sit on its own line at the end of a block */
.lead-close{display:block;margin-top:.5rem}
/* team decision */
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem}
.tcard{border:1px solid var(--line);border-radius:4px;padding:2rem;background:var(--card)}
.tcard .tlabel{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.8rem}
.tcard h3{margin-bottom:1rem}
.tcard p{font-size:1rem;color:var(--ink-soft);margin:0}
.tcard.pref{border:1.5px solid var(--green)}
/* team decision (section 15) — honest tradeoff. two balanced panels, center spine,
equal weight, neither pushed. then a single honest-verdict line. */
.team-frame{
margin-top:clamp(1.8rem,3.5vw,2.6rem);
border:1px solid var(--line-strong);background:var(--card);
display:grid;grid-template-columns:1fr 1fr;position:relative;
}
.team-frame::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line-strong);transform:translateX(-.5px)}
.team-opt{padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column}
.team-opt .to-label{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .5rem}
.team-opt .to-opt{font-size:clamp(1.1rem,1.8vw,1.32rem);font-weight:700;letter-spacing:-.01em;margin:0 0 .25rem;color:var(--ink)}
.team-opt .to-for{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 1.1rem}
.team-opt.cash .to-for{color:var(--gold)}
.team-opt.group .to-for{color:var(--green)}
.team-opt p{font-size:clamp(.96rem,1.1vw,1.02rem);color:var(--ink-soft);margin:0;line-height:1.55}
.team-opt .to-back{
margin-top:auto;padding-top:1.1rem;
font-size:1rem;color:var(--ink-soft);
}
.team-opt .to-back b{color:var(--ink);font-weight:600}
.team-verdict{
margin-top:clamp(1.4rem,2.6vw,1.8rem);
border-left:2px solid var(--gold);
padding:clamp(1.1rem,2.4vw,1.4rem) clamp(1.3rem,2.6vw,1.7rem);
background:var(--paper-warm);
}
.team-verdict p{font-size:clamp(1rem,1.25vw,1.1rem);color:var(--ink);margin:0;line-height:1.5}
.team-verdict p b{font-weight:600}
/* choose well */
/* choose well (section 16) — buyer's checklist. numbered warning signs, each with the
question to ask. institutional register, hairline rows, red warning marker. */
.warn-list{margin-top:clamp(1.8rem,3.5vw,2.6rem);border-top:1px solid var(--line-strong)}
.warn{
display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.4vw,1.8rem);
padding:clamp(1.2rem,2.4vw,1.6rem) 0;border-bottom:1px solid var(--line);align-items:start;
}
.warn .wn{
font-family:"Courier New",Courier,monospace;font-size:.84rem;font-weight:600;letter-spacing:.06em;
color:var(--red);font-feature-settings:"tnum" 1;display:flex;align-items:center;gap:.55em;white-space:nowrap;padding-top:.15rem;
}
.warn .wn .xm{
width:17px;height:17px;flex:none;border-radius:50%;border:1.5px solid var(--red);
display:inline-flex;align-items:center;justify-content:center;color:var(--red);font-size:.84rem;
}
.warn .wbody .ws{font-size:clamp(1rem,1.3vw,1.1rem);color:var(--ink);font-weight:600;margin:0 0 .35rem;line-height:1.35}
.warn .wbody .wask{font-size:clamp(.93rem,1.1vw,.99rem);color:var(--ink-soft);margin:0;line-height:1.5;max-width:70ch}
.warn .wbody .wask .ql{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-right:.5em}
/* stakes */
.stakes-inner{max-width:64ch}
.stakes h2 .em{font-style:italic;font-weight:500;color:var(--green-bright)}
/* final cta */
.final{text-align:center;padding:clamp(4rem,8vw,7rem) 0}
.final h2{font-size:clamp(2.2rem,5vw,3.8rem);max-width:18ch;margin:0 auto 1.4rem}
.final .dek{font-size:1.2rem;color:var(--ink-soft);max-width:50ch;margin:0 auto 2.4rem}
.final .cta{font-size:1.15rem;padding:1.2rem 2.2rem}
.final-note{font-family:"Courier New",Courier,monospace;font-size:.9rem;color:var(--ink-faint);margin-top:1.6rem;letter-spacing:.02em}
/* process timeline (section 18) — shows the whole path before they commit.
four connected steps, "you are here" active, lowers activation cost. */
.flow{
max-width:760px;margin:clamp(2.2rem,4vw,3rem) auto clamp(2rem,3.5vw,2.6rem);
display:grid;grid-template-columns:repeat(4,1fr);position:relative;
}
.flow::before{
content:"";position:absolute;top:13px;left:12.5%;right:12.5%;height:2px;
background:var(--line-strong);z-index:0;
}
.flow::after{
content:"";position:absolute;top:13px;left:12.5%;width:0;height:2px;
background:var(--green);z-index:1;
transition:width 1.2s cubic-bezier(.4,0,.2,1);
}
.flow.lit::after{width:37.5%;} /* fills from step 1 through the trigger at step 2 */
.flow-step{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 .4rem;text-decoration:none}
.flow-dot{
width:28px;height:28px;border-radius:50%;background:var(--paper);
border:2px solid var(--line-strong);color:var(--ink-faint);
display:flex;align-items:center;justify-content:center;
font-family:"Courier New",Courier,monospace;font-size:.84rem;font-weight:700;
margin-bottom:.8rem;transition:all .4s ease;
}
/* step 1: you-are-here marker, quiet solid dot */
.flow-step.here .flow-dot{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--white)}
/* step 2: the glowing, pulsing, clickable trigger */
.flow-step.trigger{cursor:pointer}
.flow-step.trigger .flow-dot{
background:var(--green);border-color:var(--green);color:var(--white);
box-shadow:0 0 0 0 rgba(26,111,212,.55);animation:flowPulse 1.9s infinite;
}
.flow-step.trigger .flow-label{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .2s}
.flow-step.trigger:hover .flow-dot{transform:scale(1.12);box-shadow:0 0 0 8px rgba(26,111,212,.18)}
.flow-step.trigger:hover .flow-label{color:var(--green-deep)}
@keyframes flowPulse{0%{box-shadow:0 0 0 0 rgba(26,111,212,.5)}70%{box-shadow:0 0 0 12px rgba(26,111,212,0)}100%{box-shadow:0 0 0 0 rgba(26,111,212,0)}}
.flow-here{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;
margin-bottom:.3rem;height:.9rem;font-weight:700;
}
.flow-step.here .flow-here{color:var(--ink-soft)}
.flow-step.trigger .flow-here{color:var(--green)}
.flow-step:not(.here):not(.trigger) .flow-here{visibility:hidden}
.flow-label{font-size:clamp(.82rem,1.1vw,.95rem);color:var(--ink);font-weight:600;line-height:1.25;margin:0}
.flow-step:not(.here):not(.trigger) .flow-label{color:var(--ink-soft)}
.flow-sub{font-size:clamp(.72rem,.95vw,.82rem);color:var(--ink-soft);margin:.2rem 0 0;line-height:1.3}
/* proof placeholder */
.testi{background:var(--card);border:1px dashed var(--line-strong);border-radius:4px;padding:2rem;margin-top:2.5rem;text-align:center;color:var(--ink-faint);font-size:1rem}
.testi .tnote{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.8rem;color:var(--gold)}
/* footer */
footer{background:var(--footer-bg);color:var(--on-dark-faint);padding:3.5rem 0 3rem;font-size:.9rem;line-height:1.6}
footer .wrap{display:grid;gap:2rem}
footer .disc{max-width:78ch}
footer .disc p{margin:0 0 .8rem;font-size:.9rem;color:var(--on-dark-muted)}
footer .ft-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:1.6rem}
footer .logo{color:var(--paper)}
footer .ft-net{font-family:"Courier New",Courier,monospace;font-size:.84rem;color:var(--on-dark-secondary);letter-spacing:.03em}
footer .ft-net b{color:var(--white);font-weight:500}
/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(max-width:860px){
.hero-grid{grid-template-columns:1fr}
.trio,.mech-grid,.get-grid,.plans,.proof-grid,.fit,.team-grid,.mech-money{grid-template-columns:1fr}
.mech-step{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
.mech-step:last-child{border-bottom:0}
.step{grid-template-columns:auto 1fr;gap:1rem}
.step .stime{grid-column:2;padding-top:0}
}
/* ---------- TEASER ORIGINAL LAYOUT v3 (palette stripped; reskin below overrides colors/fonts) ---------- */
.uo-calc {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--uo-ink);
background: var(--uo-bg);
border: 1px solid var(--uo-border);
border-radius: 12px;
padding: 32px;
max-width: 960px;
margin: 0 auto;
box-sizing: border-box;
}
.uo-calc *,
.uo-calc *::before,
.uo-calc *::after {
box-sizing: border-box;
}
.uo-calc__header {
text-align: center;
margin-bottom: 24px;
}
.uo-calc__eyebrow {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--uo-ink-muted);
margin: 0 0 8px;
}
.uo-calc__title {
font-size: 24px;
font-weight: 700;
color: var(--uo-ink);
margin: 0;
letter-spacing: -0.01em;
}
.uo-calc__inputs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.uo-calc__field {
display: flex;
flex-direction: column;
}
.uo-calc__label {
font-size: 15px;
font-weight: 600;
color: var(--uo-ink-soft);
margin-bottom: 8px;
}
.uo-calc__select {
appearance: none;
-webkit-appearance: none;
width: 100%;
padding: 12px 36px 12px 14px;
font-size: 15px;
font-weight: 500;
color: var(--uo-ink);
background: var(--uo-bg);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
border: 1px solid var(--uo-border);
border-radius: 8px;
cursor: pointer;
transition: border-color 0.15s ease;
font-family: inherit;
}
.uo-calc__select:hover {
border-color: var(--uo-ink-muted);
}
.uo-calc__select:focus {
outline: none;
border-color: var(--uo-accent);
box-shadow: 0 0 0 3px rgba(27, 111, 171, 0.12);
}
.uo-calc__entity-note {
background: var(--uo-bg-soft);
border-radius: 8px;
padding: 14px 18px;
font-size: 14px;
color: var(--uo-ink-soft);
margin-bottom: 24px;
line-height: 1.5;
}
.uo-calc__entity-note strong {
color: var(--uo-ink);
font-weight: 600;
}
.uo-calc__outputs {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.uo-calc__output {
border-radius: 10px;
padding: 20px;
border: 1px solid;
}
.uo-calc__output--alert {
background: var(--uo-alert-bg);
border-color: var(--uo-alert-border);
}
.uo-calc__output--success {
background: var(--uo-success-bg);
border-color: var(--uo-success-border);
padding: 28px 24px;
}
.uo-calc__output--info {
background: var(--uo-info-bg);
border-color: var(--uo-info-border);
}
.uo-calc__output-label {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--uo-ink-muted);
margin: 0 0 8px;
}
.uo-calc__output-number {
font-size: 36px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 6px;
font-variant-numeric: tabular-nums;
}
.uo-calc__output--alert .uo-calc__output-number { color: var(--uo-alert); }
.uo-calc__output--success .uo-calc__output-number {
color: var(--uo-success);
font-size: 50px;
}
.uo-calc__output--info .uo-calc__output-number { color: var(--uo-info); }
.uo-calc__output-meta {
font-size: 15px;
color: var(--uo-ink-muted);
margin: 0;
line-height: 1.4;
}
.uo-calc__cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--uo-accent);
color: white;
text-decoration: none;
font-weight: 600;
font-size: 15px;
padding: 14px 24px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background 0.15s ease;
font-family: inherit;
}
.uo-calc__cta:hover {
background: var(--blue-mid);
}
.uo-calc__cta-row {
text-align: center;
margin-bottom: 16px;
}
.uo-calc__disclaimer {
font-size: 14px;
color: var(--uo-ink-muted);
text-align: center;
line-height: 1.5;
margin: 0;
font-style: italic;
}
/* Mobile */
@media (max-width: 720px) {
.uo-calc {
padding: 24px 20px;
border-radius: 10px;
}
.uo-calc__inputs {
grid-template-columns: 1fr;
gap: 16px;
}
.uo-calc__outputs {
grid-template-columns: 1fr;
gap: 12px;
}
.uo-calc__output--success { order: 1; }
.uo-calc__output--alert { order: 2; }
.uo-calc__output--info { order: 3; }
.uo-calc__output-number { font-size: 30px; }
.uo-calc__output--success .uo-calc__output-number { font-size: 40px; }
.uo-calc__title { font-size: 20px; }
}
.uo-gcalc {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--uo-ink);
background: var(--uo-bg);
border: 1px solid var(--uo-border);
border-radius: 12px;
padding: 32px;
max-width: 960px;
margin: 0 auto;
box-sizing: border-box;
}
.uo-gcalc *,
.uo-gcalc *::before,
.uo-gcalc *::after {
box-sizing: border-box;
}
.uo-gcalc__header {
text-align: center;
margin-bottom: 24px;
}
.uo-gcalc__eyebrow {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--uo-ink-muted);
margin: 0 0 8px;
}
.uo-gcalc__title {
font-size: 24px;
font-weight: 700;
color: var(--uo-ink);
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.uo-gcalc__subtitle {
font-size: 14px;
color: var(--uo-ink-muted);
margin: 0;
}
.uo-gcalc__inputs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.uo-gcalc__field {
display: flex;
flex-direction: column;
}
.uo-gcalc__label {
font-size: 15px;
font-weight: 600;
color: var(--uo-ink-soft);
margin-bottom: 8px;
}
.uo-gcalc__select {
appearance: none;
-webkit-appearance: none;
width: 100%;
padding: 12px 36px 12px 14px;
font-size: 15px;
font-weight: 500;
color: var(--uo-ink);
background: var(--uo-bg);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
border: 1px solid var(--uo-border);
border-radius: 8px;
cursor: pointer;
transition: border-color 0.15s ease;
font-family: inherit;
}
.uo-gcalc__select:hover {
border-color: var(--uo-ink-muted);
}
.uo-gcalc__select:focus {
outline: none;
border-color: var(--uo-accent);
box-shadow: 0 0 0 3px rgba(27, 111, 171, 0.12);
}
.uo-gcalc__plan-note {
background: var(--uo-bg-soft);
border-radius: 8px;
padding: 14px 18px;
font-size: 14px;
color: var(--uo-ink-soft);
margin-bottom: 24px;
line-height: 1.5;
}
.uo-gcalc__plan-note strong {
color: var(--uo-ink);
font-weight: 600;
}
.uo-gcalc__outputs {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
/* When there is no current cost (red card hidden), expand the remaining two */
.uo-gcalc__outputs[data-no-current="true"] {
grid-template-columns: 1.5fr 1fr;
}
.uo-gcalc__output {
border-radius: 10px;
padding: 20px;
border: 1px solid;
transition: opacity 0.2s ease;
}
.uo-gcalc__output--alert {
background: var(--uo-alert-bg);
border-color: var(--uo-alert-border);
}
.uo-gcalc__output--alert.is-hidden {
display: none;
}
.uo-gcalc__output--success {
background: var(--uo-success-bg);
border-color: var(--uo-success-border);
padding: 28px 24px;
}
.uo-gcalc__output--info {
background: var(--uo-info-bg);
border-color: var(--uo-info-border);
}
.uo-gcalc__output-label {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--uo-ink-muted);
margin: 0 0 8px;
}
.uo-gcalc__output-number {
font-size: 36px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 6px;
font-variant-numeric: tabular-nums;
}
.uo-gcalc__output--alert .uo-gcalc__output-number { color: var(--uo-alert); }
.uo-gcalc__output--success .uo-gcalc__output-number {
color: var(--uo-success);
font-size: 50px;
}
.uo-gcalc__output--info .uo-gcalc__output-number { color: var(--uo-info); }
.uo-gcalc__output-meta {
font-size: 15px;
color: var(--uo-ink-muted);
margin: 0;
line-height: 1.4;
}
.uo-gcalc__breakdown {
background: var(--uo-bg-soft);
border-radius: 8px;
padding: 14px 18px;
font-size: 15px;
color: var(--uo-ink-soft);
margin-bottom: 20px;
line-height: 1.6;
}
.uo-gcalc__breakdown-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.uo-gcalc__breakdown-row + .uo-gcalc__breakdown-row {
margin-top: 4px;
}
.uo-gcalc__breakdown-row strong {
color: var(--uo-ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.uo-gcalc__breakdown-divider {
border-top: 1px solid var(--uo-border);
margin: 8px 0;
}
.uo-gcalc__cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--uo-accent);
color: white;
text-decoration: none;
font-weight: 600;
font-size: 15px;
padding: 14px 24px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background 0.15s ease;
font-family: inherit;
}
.uo-gcalc__cta:hover {
background: var(--blue-mid);
}
.uo-gcalc__cta-row {
text-align: center;
margin-bottom: 16px;
}
.uo-gcalc__disclaimer {
font-size: 14px;
color: var(--uo-ink-muted);
text-align: center;
line-height: 1.5;
margin: 0;
font-style: italic;
}
/* Mobile */
@media (max-width: 720px) {
.uo-gcalc {
padding: 24px 20px;
border-radius: 10px;
}
.uo-gcalc__inputs {
grid-template-columns: 1fr;
gap: 16px;
}
.uo-gcalc__outputs,
.uo-gcalc__outputs[data-no-current="true"] {
grid-template-columns: 1fr;
gap: 12px;
}
.uo-gcalc__output--success { order: 1; }
.uo-gcalc__output--alert { order: 2; }
.uo-gcalc__output--info { order: 3; }
.uo-gcalc__output-number { font-size: 30px; }
.uo-gcalc__output--success .uo-gcalc__output-number { font-size: 40px; }
.uo-gcalc__title { font-size: 20px; }
.uo-gcalc__breakdown-row {
flex-direction: row;
flex-wrap: nowrap;
}
}
/* ---------- TEASER CALCULATOR RESKIN (structure unchanged, palette retuned) ---------- */
.uo-calc, .uo-gcalc{
--uo-ink:var(--ink); --uo-ink-soft:var(--ink-soft); --uo-ink-muted:var(--ink-faint);
--uo-bg:var(--card); --uo-bg-soft:var(--paper-warm); --uo-border:var(--line);
--uo-accent:var(--green); --uo-success:var(--green); --uo-success-bg:var(--success-bg);
--uo-success-border:var(--success-border); --uo-alert:var(--red); --uo-alert-bg:var(--alert-bg);
--uo-alert-border:var(--alert-border); --uo-info:var(--green-deep); --uo-info-bg:var(--success-bg); --uo-info-border:var(--on-dark-alt);
font-family:"Inter",sans-serif !important;
border:1px solid var(--line); border-radius:4px; box-shadow:var(--shadow);
background:var(--card); max-width:none; padding:2.2rem 2.2rem 2rem;
}
.uo-calc__title,.uo-gcalc__title{font-family:"Merriweather",serif !important;font-weight:600 !important;letter-spacing:-.01em !important}
.uo-calc__eyebrow,.uo-gcalc__eyebrow{font-family:"Courier New",Courier,monospace !important;color:var(--green) !important;letter-spacing:.16em !important}
.uo-calc__output-number,.uo-gcalc__output-number{font-family:"Merriweather",serif !important;font-weight:600 !important}
.uo-calc__output--success,.uo-gcalc__output--success{background:var(--green-deep) !important;border-color:var(--green) !important}
.uo-calc__output--success .uo-calc__output-label,.uo-gcalc__output--success .uo-gcalc__output-label{color:var(--on-dark-calc-label) !important}
.uo-calc__output--success .uo-calc__output-number,.uo-gcalc__output--success .uo-gcalc__output-number{color:var(--white) !important}
.uo-calc__output--success .uo-calc__output-meta,.uo-gcalc__output--success .uo-gcalc__output-meta{color:var(--on-dark-alt) !important}
.uo-calc__cta,.uo-gcalc__cta{background:var(--green) !important;border-radius:2px !important;font-family:"Inter",sans-serif !important;box-shadow:0 12px 26px -14px rgba(26,111,212,.6) !important}
.uo-calc__cta:hover,.uo-gcalc__cta:hover{background:var(--green-deep) !important}
.uo-calc__select,.uo-gcalc__select{border-radius:3px !important;font-family:"Inter",sans-serif !important}
/* ---------- LOGO STRIPS ---------- */
.logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(1.8rem,4vw,3.4rem)}
.logos img{height:30px;width:auto;opacity:.62;filter:grayscale(1);transition:opacity .25s ease,filter .25s ease}
.logos.dark img{filter:grayscale(1) brightness(0) invert(1);opacity:.7}
.logos img:hover{opacity:1;filter:none}
.logos.dark img:hover{filter:brightness(0) invert(1);opacity:1}
.logos-cap{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);text-align:center;margin-bottom:1.6rem}
.band-dark .logos-cap{color:var(--on-dark-muted)}
/* ---------- NEWS (section 5) — disinterested third-party proof, editorial register.
masthead row of network marks, an anchor stat, a wall of filed reports with datelines.
inherits the dated-bulletin language from section 3's rupture (mono timestamps). ---------- */
/* masthead: the network marks set as a wire-service lineup on hairline rules */
.news-masthead{
margin-top:clamp(2rem,4vw,3rem);
border-top:1px solid rgba(255,255,255,.16);
border-bottom:1px solid rgba(255,255,255,.16);
padding:clamp(1.3rem,2.4vw,1.8rem) 0;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:clamp(1.4rem,3.5vw,3rem);
}
.news-mark{display:flex;align-items:center;justify-content:center}
.news-mark img{
height:clamp(20px,2.4vw,30px);width:auto;display:block;opacity:1;
}
/* anchor stat + framing: one third-party number, attributed, set like a dateline lead */
.news-anchor{
display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
margin-top:clamp(1.8rem,3.5vw,2.6rem);
}
.news-anchor .na-num{
font-family:"Merriweather",Georgia,serif;font-weight:900;line-height:.9;
font-size:clamp(2.6rem,6vw,4rem);color:var(--on-dark-hi);font-feature-settings:"tnum" 1;white-space:nowrap;
}
.news-anchor .na-num .unit{font-size:.42em;font-weight:700;vertical-align:.18em;margin-left:.1em;color:var(--green-bright)}
.news-anchor .na-text{font-size:clamp(1rem,1.4vw,1.18rem);color:var(--on-dark-anchor);margin:0;max-width:46ch}
.news-anchor .na-src{
display:block;margin-top:.5rem;
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-subtle);
}
/* corroboration wall: filed reports. dateline header, poster, click-to-play preserved. */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.4rem);margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.news-card{
position:relative;overflow:hidden;cursor:pointer;
border:1px solid rgba(255,255,255,.14);background:var(--news-card-bg);
display:flex;flex-direction:column;
transition:border-color .2s ease;
}
.news-card:hover{border-color:rgba(91,155,213,.5)}
/* dateline header bar on each filed report */
.news-card .nhead{
display:flex;align-items:center;justify-content:space-between;gap:.6rem;
padding:.6rem .85rem;border-bottom:1px solid rgba(255,255,255,.12);
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--on-dark-label);flex:none;
}
.news-card .nhead .src{color:var(--on-dark-bright);font-weight:500}
.news-card .nhead .dt{color:var(--on-dark-muted)}
.news-card .nmedia{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--news-media-bg);flex:none}
.news-card img.poster{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.news-card:hover img.poster{transform:scale(1.04)}
.news-card .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(6,16,29,.1),rgba(6,16,29,.5))}
.news-card .play .pbtn{width:52px;height:52px;border-radius:50%;background:rgba(244,249,255,.95);display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease;box-shadow:0 10px 28px -10px rgba(0,0,0,.7)}
.news-card:hover .play .pbtn{transform:scale(1.08);background:var(--white)}
.news-card .play .pbtn svg{width:19px;height:19px;margin-left:3px}
.news-card .ncap{
padding:.85rem 1rem;color:var(--on-dark-caption);font-size:.9rem;line-height:1.4;
border-top:0;flex:1;
}
.news-card video{width:100%;height:100%;object-fit:contain;display:block;background:var(--black)}
.news-card.playing .nmedia{aspect-ratio:auto}
.news-cta-row{margin-top:clamp(2rem,4vw,2.8rem);display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap}
.news-note{font-size:.84rem;color:var(--on-dark-dim);margin:0;max-width:60ch;line-height:1.5}
/* ---------- PLAN PDF LINK ---------- */
.plan .pdoc{display:inline-flex;align-items:center;gap:.4em;margin-top:1rem;font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.04em;color:var(--green);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color .18s,color .18s}
.plan .pdoc:hover{color:var(--green-deep);border-color:var(--green)}
.plan.featured .pdoc{color:var(--green)}
/* ---------- TEASER SECTION WRAP ---------- */
.teaser-head{max-width:62ch;margin-bottom:0}
.teaser-bridge{font-size:1rem;color:var(--ink-soft);max-width:64ch;margin:1rem 0 0}
/* calculator instrument container (sections 9 & 10) — frames the widget as a purposeful
tool, not a loose form. mono header strip, hairline border, handoff line below. */
.calc-instrument{
margin-top:clamp(1.8rem,3.5vw,2.6rem);
border:1px solid var(--line-strong);
background:var(--card);
}
.band-warm .calc-instrument{background:var(--card)}
.calc-strip{
display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
padding:.85rem clamp(1.1rem,2.4vw,1.6rem);
border-bottom:1px solid var(--line);
background:var(--paper);
}
.calc-strip .cs-label{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-soft);display:flex;align-items:center;gap:.7em;margin:0;
}
.calc-strip .cs-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
box-shadow:0 0 0 0 rgba(26,111,212,.5);animation:csPulse 2.6s infinite}
@keyframes csPulse{0%{box-shadow:0 0 0 0 rgba(26,111,212,.4)}70%{box-shadow:0 0 0 8px rgba(26,111,212,0)}100%{box-shadow:0 0 0 0 rgba(26,111,212,0)}}
.calc-strip .cs-meta{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-faint);margin:0;
}
.calc-body{padding:clamp(1.2rem,2.6vw,2rem)}
.calc-body .uo-calc,.calc-body .uo-gcalc{border:0;padding:0;max-width:none;margin:0;background:transparent}
.calc-handoff{
display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
padding:1rem clamp(1.1rem,2.4vw,1.6rem);
border-top:1px solid var(--line);background:var(--paper);
}
.calc-handoff .ch-text{font-size:1rem;color:var(--ink-soft);margin:0}
.calc-handoff .ch-text b{color:var(--ink);font-weight:600}
.calc-handoff .ch-link{
font-family:"Inter",sans-serif;font-weight:600;font-size:1rem;color:var(--green);text-decoration:none;white-space:nowrap;
display:inline-flex;align-items:center;gap:.4em;border-bottom:1.5px solid var(--line-strong);padding-bottom:2px;
transition:border-color .18s,color .18s;
}
.calc-handoff .ch-link:hover{color:var(--green-deep);border-color:var(--green)}
/* employer-track variant (section 10): gold accent to match the team track */
[data-audience="employer"] .calc-strip .cs-dot{background:var(--gold);box-shadow:0 0 0 0 rgba(26,95,171,.5);animation:csPulseGold 2.6s infinite}
@keyframes csPulseGold{0%{box-shadow:0 0 0 0 rgba(26,95,171,.4)}70%{box-shadow:0 0 0 8px rgba(26,95,171,0)}100%{box-shadow:0 0 0 0 rgba(26,95,171,0)}}
[data-audience="employer"] .calc-handoff .ch-link{color:var(--gold)}
[data-audience="employer"] .calc-handoff .ch-link:hover{color:var(--green-deep)}
@media(max-width:860px){
.news-grid{grid-template-columns:1fr 1fr}
.news-masthead{justify-content:center;gap:1.6rem 2.2rem}
.news-anchor{grid-template-columns:1fr;gap:.6rem;text-align:left}
.news-anchor .na-text{max-width:none}
.logos img{height:24px}
}
@media(max-width:560px){
.news-grid{grid-template-columns:1fr}
}
/* ===== DUAL-TRACK ADDITIONS ===== */
/* track accent: solo vs employer get a subtle differentiator so the reader feels the split */
[data-track]{position:relative}
.track-tag{display:inline-flex;align-items:center;gap:.5em;font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;padding:.3em .7em;border-radius:2px;margin-bottom:1rem}
.track-tag.solo{background:rgba(26,111,212,.1);color:var(--green)}
.track-tag.employer{background:rgba(26,95,171,.12);color:var(--gold)}
.band-dark .track-tag.solo{background:rgba(91,155,213,.18);color:var(--green-bright)}
.band-dark .track-tag.employer{background:rgba(26,95,171,.22);color:var(--green-bright)}
/* the fork (section 2) — one institutional comparison frame, not floating cards.
reads like a term sheet: hairline rules, mono figures, a center spine, no shadows, no rails. */
.fork-frame{
margin-top:clamp(2rem,4vw,3rem);
border:1px solid var(--line-strong);
background:var(--card);
display:grid;
grid-template-columns:1fr 1fr;
position:relative;
}
/* center spine */
.fork-frame::before{
content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;
background:var(--line-strong);transform:translateX(-.5px);
}
/* the "or" node sits on the spine */
.fork-frame::after{
content:"or";position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--ink-faint);background:var(--card);
border:1px solid var(--line-strong);border-radius:999px;
padding:.45em .9em;line-height:1;
}
.fork-pane{padding:clamp(1.6rem,3vw,2.6rem)}
/* a shared header band across both panes */
.fork-pane .fork-eyebrow{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
margin:0 0 .9rem;display:flex;align-items:center;gap:.6em;
}
.fork-pane .fork-eyebrow .ix{
font-feature-settings:"tnum" 1;font-weight:600;
border:1px solid currentColor;border-radius:2px;padding:.05em .45em;font-size:.92em;
}
.fork-pane.solo .fork-eyebrow{color:var(--green)}
.fork-pane.employer .fork-eyebrow{color:var(--gold)}
.fork-pane h3{font-size:clamp(1.3rem,2.4vw,1.62rem);margin:0 0 .7rem;letter-spacing:-.01em}
.fork-pane p{font-size:clamp(.98rem,1.2vw,1.04rem);color:var(--ink-soft);margin:0 0 1.4rem;max-width:46ch}
.fork-pane .cta-ghost{align-self:flex-start}
/* solo pane: the "group of one" stat, set like a single data point on a statement */
.fork-stat{
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:1.05rem 0;margin:0 0 1.5rem;
display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
}
.fork-stat .fs-num{
font-family:"Merriweather",serif;font-weight:900;
font-size:clamp(2rem,4vw,2.7rem);line-height:.9;color:var(--green);
font-feature-settings:"tnum" 1;
}
.fork-stat .fs-lab{font-size:1rem;color:var(--ink-soft);line-height:1.3}
/* employer pane: the verdict ledger — concede-then-win, inline ruled, term-sheet style */
.fork-ledger{
border-top:1px solid var(--line);
margin:0 0 1.5rem;font-feature-settings:"tnum" 1;
}
.fork-ledger .led-cap{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-faint);padding:.7rem 0 .55rem;border-bottom:1px solid var(--line);
}
.fork-ledger .led-row{
display:grid;grid-template-columns:minmax(0,9rem) 1fr;align-items:baseline;gap:.6rem 1rem;
padding:.62rem 0;border-bottom:1px solid var(--line);
}
.fork-ledger .led-lab{font-size:.9rem;color:var(--ink-faint)}
.fork-ledger .led-val{
font-family:"Courier New",Courier,monospace;font-size:.9rem;letter-spacing:.01em;font-weight:500;line-height:1.4;
}
.fork-ledger .led-row.theirs .led-val{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1px}
.fork-ledger .led-row.ours .led-lab{color:var(--ink);font-weight:600}
.fork-ledger .led-row.ours .led-val{color:var(--gold);font-weight:600}
.fork-ledger .led-row:last-child{border-bottom:0}
/* guide (section 6) — the turn. empathy beat, then authority columns, then a
"how this works" definition panel. warmer than the problem sections, hand extended. */
.guide-empathy{
margin-top:clamp(1.4rem,2.6vw,2rem);
padding:clamp(1.2rem,2.4vw,1.6rem) 0;
border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);
font-family:"Merriweather",Georgia,serif;font-style:italic;font-weight:400;
font-size:clamp(1.12rem,1.8vw,1.4rem);line-height:1.45;color:var(--ink-soft);
max-width:64ch;
}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.2rem);margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.guide-col .gc-tag{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
margin:0 0 .8rem;display:flex;align-items:center;gap:.6em;
}
.guide-col[data-track="solo"] .gc-tag{color:var(--green)}
.guide-col[data-track="employer"] .gc-tag{color:var(--gold)}
.guide-col p{color:var(--ink-soft);font-size:clamp(1rem,1.2vw,1.06rem);margin:0;max-width:48ch}
/* how this works: division of roles set like a term-sheet definition, not a disclaimer */
.guide-works{
margin-top:clamp(2rem,4vw,3rem);
border:1px solid var(--line-strong);
display:grid;grid-template-columns:1fr 1fr;
position:relative;background:var(--card);
}
.guide-works::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line-strong);transform:translateX(-.5px)}
.guide-works .gw-pane{padding:clamp(1.5rem,3vw,2.2rem)}
.guide-works .gw-lab{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
margin:0 0 .9rem;display:flex;align-items:center;gap:.6em;
}
.guide-works .gw-pane.us .gw-lab{color:var(--green)}
.guide-works .gw-pane.peo .gw-lab{color:var(--ink-faint)}
.guide-works .gw-lab .mk{font-weight:600}
.guide-works p{margin:0;font-size:clamp(.96rem,1.15vw,1.02rem);color:var(--ink-soft)}
.guide-works p b{color:var(--ink);font-weight:600}
.guide-foot{
margin-top:clamp(1rem,2vw,1.4rem);
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.04em;line-height:1.6;
color:var(--ink-faint);max-width:78ch;
}
.guide-foot b{color:var(--ink-soft);font-weight:500}
/* what-you-get split intro */
.get-split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:0 0 2.5rem}
.get-col{padding:1.8rem;border-radius:4px;background:var(--card);border:1px solid var(--line)}
.get-col[data-track="solo"]{border-left:3px solid var(--green)}
.get-col[data-track="employer"]{border-left:3px solid var(--gold)}
.get-col h3{font-size:1.15rem;margin-bottom:.6rem}
.get-col p{margin:0;font-size:1rem;color:var(--ink-soft)}
/* pricing grid (reuse plan look) */
/* pricing (section 13) — posted rate, terminal register. two equal tiers, big numbers,
hairline structure, no card chrome. plus the dark-band "fee holds" honest aside. */
.price-grid{
display:grid;grid-template-columns:1fr 1fr;gap:0;
margin-top:clamp(1.8rem,3.5vw,2.6rem);
border:1px solid rgba(255,255,255,.18);position:relative;
}
.price-grid::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.18);transform:translateX(-.5px)}
.price-tier{padding:clamp(1.6rem,3.2vw,2.4rem);display:flex;flex-direction:column}
.price-tier .pt-name{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--on-dark-subtle);margin:0 0 .4rem;display:flex;align-items:center;gap:.7em;
}
.price-tier.full .pt-name{color:var(--green-bright)}
.price-tier .pt-tagline{font-size:1rem;color:var(--on-dark-price-tagline);margin:0 0 1.3rem}
.price-tier .pt-price{
font-family:"Merriweather",Georgia,serif;font-weight:900;line-height:.9;
font-size:clamp(3rem,7vw,4.6rem);color:var(--on-dark-hi);font-feature-settings:"tnum" 1;
}
.price-tier.full .pt-price{color:var(--green-bright)}
.price-tier .pt-unit{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;
color:var(--on-dark-subtle);margin:.5rem 0 1.3rem;
}
.price-tier .pt-inc{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);margin:0 0 .7rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12)}
.price-tier ul{list-style:none;margin:0;padding:0}
.price-tier li{font-size:1rem;color:var(--on-dark-body);padding:.4rem 0;display:flex;gap:.6rem;line-height:1.4}
.price-tier li .lk{color:var(--green-bright);flex:none;font-family:"Courier New",Courier,monospace}
.price-tier .pt-upgrade{font-size:.9rem;color:var(--on-dark-price-tagline);margin:1rem 0 0;font-style:italic}
/* the fee-holds aside (reuses the dark honest-aside language) */
.price-holds{
margin-top:clamp(1.8rem,3.5vw,2.4rem);
border-left:2px solid var(--green-bright);
padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.3rem,2.6vw,1.8rem);
background:rgba(255,255,255,.04);
}
.price-holds .ph-lab{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-bright);margin:0 0 .7rem}
.price-holds p{font-size:clamp(.94rem,1.1vw,1rem);color:var(--on-dark-aside);margin:0;line-height:1.6;max-width:80ch}
.price-holds p b{color:var(--on-dark-bright);font-weight:600}
/* stakes split */
/* stakes (section 17) — cost of inaction as arithmetic, not fear. two-column ledger on
the dark band, each with a recurring "per year you wait" frame. */
.stakes-split{
display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(1.8rem,3.5vw,2.6rem);
border:1px solid rgba(255,255,255,.18);position:relative;
}
.stakes-split::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.18);transform:translateX(-.5px)}
.stakes-col{padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column}
.stakes-col .sk-track{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;
margin:0 0 1rem;display:flex;align-items:center;gap:.6em;
}
.stakes-col[data-track="solo"] .sk-track{color:var(--green-bright)}
.stakes-col[data-track="employer"] .sk-track{color:var(--on-dark-price-tag)}
.stakes-col .sk-track .sk-dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor;
box-shadow:0 0 0 0 currentColor;animation:skPulse 2.6s infinite}
@keyframes skPulse{0%{box-shadow:0 0 0 0 rgba(127,179,230,.4)}70%{box-shadow:0 0 0 7px rgba(127,179,230,0)}100%{box-shadow:0 0 0 0 rgba(127,179,230,0)}}
.stakes-col p{margin:0;color:var(--on-dark-body);font-size:clamp(.97rem,1.15vw,1.04rem);line-height:1.55}
.stakes-col p b{color:var(--on-dark-bright);font-weight:600}
.stakes-col .sk-meter{
margin-top:auto;padding-top:1.2rem;
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--on-dark-dim);display:flex;align-items:center;gap:.6em;
}
.stakes-col .sk-meter .sk-bar{flex:1;height:1px;background:rgba(255,255,255,.16)}
/* growing-cost chart (section 17) — bars climb on scroll, no numbers. shows the shape
of the leak: cost rises and accelerates each year you wait. */
.sk-chart{margin-top:clamp(1.1rem,2.4vw,1.5rem)}
.sk-chart .skc-cap{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--on-dark-dim);margin:0 0 .7rem;display:flex;align-items:center;justify-content:space-between;
}
.sk-bars{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,12px);height:96px}
.sk-bars .skb{
flex:1;border-radius:2px 2px 0 0;align-self:flex-end;
height:6px;transition:height 1.1s cubic-bezier(.34,1.1,.5,1);
}
.stakes-col[data-track="solo"] .sk-bars .skb{background:linear-gradient(180deg,var(--green-bright),var(--chart-red-end))}
.stakes-col[data-track="employer"] .sk-bars .skb{background:linear-gradient(180deg,var(--on-dark-price-tag),var(--chart-blue-end))}
.sk-bars .skb:last-child{background:linear-gradient(180deg,var(--chart-red),var(--red)) !important}
.sk-xaxis{display:flex;gap:clamp(6px,1.4vw,12px);margin-top:.5rem;border-top:1px solid rgba(255,255,255,.14);padding-top:.4rem}
.sk-xaxis span{flex:1;text-align:center;font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.06em;color:var(--on-dark-muted)}
/* tools + subheads */
.section-subhead{margin:3rem 0 1.4rem}
.section-subhead p{font-size:1rem;color:var(--ink-soft);max-width:60ch;margin:.4rem 0 0}
/* what you get (section 12) — whole product in tiers. institutional register, no icons.
split intro, two parallel ledger lists, plan cards, augmented tools tier. */
.wyg-split{
display:grid;grid-template-columns:1fr 1fr;gap:0;
margin-top:clamp(1.6rem,3vw,2.2rem);
border-top:1px solid var(--line-strong);
}
.wyg-split .wyg-intro{padding:clamp(1.3rem,2.6vw,1.8rem) clamp(1.6rem,3vw,2.4rem) clamp(1.3rem,2.6vw,1.8rem) 0}
.wyg-split .wyg-intro:first-child{border-right:1px solid var(--line)}
.wyg-split .wyg-intro:last-child{padding-left:clamp(1.6rem,3vw,2.4rem);padding-right:0}
.wyg-split .wyg-tag{font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .6rem}
.wyg-split .wyg-intro.solo .wyg-tag{color:var(--green)}
.wyg-split .wyg-intro.employer .wyg-tag{color:var(--gold)}
.wyg-split .wyg-intro p{font-size:clamp(.97rem,1.15vw,1.04rem);color:var(--ink-soft);margin:0}
.wyg-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.2rem);margin-top:clamp(2rem,4vw,2.8rem)}
.wyg-list .wyg-lh{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-faint);margin:0 0 .4rem;padding-bottom:.8rem;border-bottom:1px solid var(--line-strong);
display:flex;align-items:center;gap:.6em;
}
.wyg-list .wyg-lh .n{font-weight:600;color:var(--green)}
.wyg-list ul{list-style:none;margin:0;padding:0}
.wyg-list li{
padding:.85rem 0;border-bottom:1px solid var(--line);
font-size:clamp(.96rem,1.1vw,1.02rem);color:var(--ink-soft);line-height:1.5;
}
.wyg-list li:last-child{border-bottom:0}
.wyg-list li b{color:var(--ink);font-weight:600;display:block;margin-bottom:.1rem}
/* multi-carrier qualifier under the provider logos */
.wyg-qualifier{
font-family:"Courier New",Courier,monospace;font-size:.84rem;letter-spacing:.03em;line-height:1.6;
color:var(--ink-faint);text-align:center;margin:1rem auto 0;max-width:74ch;
}
.wyg-qualifier b{color:var(--ink-soft);font-weight:500}
.tools{margin-top:2.5rem;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1.9rem 2rem}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.tools-grid h3{font-size:1.1rem;margin-bottom:.4rem}
.tools-grid p{font-size:1rem;color:var(--ink-soft);margin:0}
.tools .logos{margin-top:1.8rem;justify-content:flex-start;gap:2.4rem}
.tools .logos img{height:22px}
/* proof items checkmark (no SVG dependency in this build) */
.proof-item .tick{flex:none;width:28px;height:28px;border-radius:50%;background:var(--green);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;margin-top:2px}
/* warn list x */
.warn .x{flex:none;color:var(--red);font-family:"Courier New",Courier,monospace;font-weight:600}
/* dual CTA in hero: make the two buttons distinct */
.hero-actions .cta[data-track="employer"]{background:var(--gold)}
.hero-actions .cta[data-track="employer"]:hover{background:var(--green-deep)}
/* reference banner */
.ref-banner{background:var(--hero-panel-bg);color:var(--on-dark-secondary);font-family:"Courier New",Courier,monospace;font-size:.88rem;line-height:1.6;padding:14px 20px;text-align:center;letter-spacing:.02em;border-bottom:2px solid var(--green-bright)}
.ref-banner b{color:var(--hero-accent-dim)}
@media(max-width:860px){
.guide-grid,.get-split,.stakes-split,.tools-grid{grid-template-columns:1fr}
/* section 13 pricing tiers stack; spine becomes a divider */
.price-grid{grid-template-columns:1fr}
.price-grid::before{display:none}
.price-tier.full{border-bottom:1px solid rgba(255,255,255,.18)}
/* section 17 stakes columns stack; spine becomes divider */
.stakes-split{grid-template-columns:1fr}
.stakes-split::before{display:none}
.stakes-col[data-track="solo"]{border-bottom:1px solid rgba(255,255,255,.18)}
.stakes-col .sk-meter{margin-top:1.2rem}
/* section 18 process timeline becomes vertical on mobile */
.flow{grid-template-columns:1fr;max-width:340px;gap:0;text-align:left}
.flow::before{top:0;bottom:0;left:13px;right:auto;width:2px;height:auto}
.flow::after{top:0;left:13px;width:2px !important;height:0;transition:height 1.2s cubic-bezier(.4,0,.2,1)}
.flow.lit::after{height:37.5%}
.flow-step{flex-direction:row;align-items:flex-start;gap:.9rem;text-align:left;padding:.7rem 0}
.flow-dot{margin-bottom:0;flex:none}
.flow-here{position:absolute;left:42px;top:.1rem;margin:0;height:auto}
.flow-step .flow-textwrap{display:flex;flex-direction:column}
.flow-step.here .flow-textwrap,.flow-step.trigger .flow-textwrap{margin-top:.9rem}
/* clarity band stacks */
.clarity-grid{grid-template-columns:1fr}
.clarity-cell{border-right:0;border-bottom:1px solid var(--line)}
.clarity-cell:last-child{border-bottom:0}
/* section 14 fit table: each row becomes a stacked block */
.fit-thead{display:none}
.fit-trow{grid-template-columns:1fr;border-bottom:1px solid var(--line-strong)}
.fit-trow .fc{padding:.7rem 1rem}
.fit-trow .fc.crit{background:var(--paper);font-size:.84rem;padding-bottom:.3rem}
.fit-trow .fc.fits,.fit-trow .fc.nofit{border-left:0}
.fit-trow .fc.fits::before{content:"FITS ";font-family:"Courier New",monospace;font-size:.84rem;letter-spacing:.12em;color:var(--green);margin-right:.4em}
.fit-trow .fc.nofit::before{content:"NOT ";font-family:"Courier New",monospace;font-size:.84rem;letter-spacing:.12em;color:var(--red);margin-right:.4em}
.fit-notes{grid-template-columns:1fr}
/* section 15 team tradeoff stacks; spine becomes divider */
.team-frame{grid-template-columns:1fr}
.team-frame::before{display:none}
.team-opt.cash{border-bottom:1px solid var(--line-strong)}
.team-opt .to-back{margin-top:1rem}
/* section 12 whole product: split intro and ledger cols stack */
.wyg-split{grid-template-columns:1fr}
.wyg-split .wyg-intro:first-child{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
.wyg-split .wyg-intro:last-child{padding-left:0}
.wyg-cols{grid-template-columns:1fr;gap:2rem}
.guide-col p,.guide-empathy{max-width:none}
/* guide "how this works" panel stacks; spine becomes a divider between panes */
.guide-works{grid-template-columns:1fr}
.guide-works::before{display:none}
.guide-works .gw-pane.us{border-bottom:1px solid var(--line-strong)}
/* calculator instrument: strip and handoff stack on narrow screens */
.calc-strip{flex-direction:column;align-items:flex-start;gap:.4rem}
.calc-handoff{flex-direction:column;align-items:flex-start;gap:.7rem}
/* section 11 accreditation block stacks */
.accred{grid-template-columns:1fr;gap:1.2rem}
.accred .accred-text{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.1rem}
.cred-body p{max-width:none}
/* fork frame collapses to one stacked column; divider sits between the two panes */
.fork-frame{grid-template-columns:1fr}
.fork-frame::before{display:none}
.fork-frame::after{display:none}
.fork-pane.solo{border-bottom:1px solid var(--line-strong)}
.fork-pane p{max-width:none}
.fork-ledger .led-row{grid-template-columns:1fr;gap:.1rem}
/* section 3 problem mechanisms stack */
.prob-grid{grid-template-columns:1fr}
.prob-entry:first-child{border-right:0;padding-right:0}
.prob-entry:nth-child(2){padding-left:0}
.prob-rupture{grid-template-columns:1fr;gap:1.4rem}
.prob-rupture .pr-aside{border-left:0;border-top:1px solid rgba(157,196,232,.28);padding-left:0;padding-top:1.4rem}
/* section 4 escalating sequence: keep the rail, tighten gaps */
.esc-step{gap:1rem}
.esc-head{flex-direction:column;gap:.2rem}
.esc-step p,.esc-step .esc-head{max-width:none}
.esc-figure{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:.2rem}
/* section 7 mechanism: flow stacks, arrows rotate down, recon stacks */
.mech7-flow{grid-template-columns:1fr;border-top:0}
.mech7-step{padding:1.3rem 0 !important;border-bottom:1px solid rgba(255,255,255,.12)}
.mech7-step:last-of-type{border-bottom:0}
.mech7-arrow{transform:rotate(90deg);padding:.3rem 0}
.mech7-recon{grid-template-columns:1fr}
.mech7-recon::before{display:none}
.mech7-col.before{border-bottom:1px solid rgba(255,255,255,.16)}
.mech7-big{margin-top:1.2rem}
}
/* ===== RESPONSIVE OVERHAUL ===== */
/* Fix prose max-widths to never exceed 100% on narrow screens */
.hero-lede,.mech-foot,.news-note,.teaser-bridge,.section-subhead p {
max-width: min(62ch, 100%);
}
.section-head{max-width:100%}
.section-head h2{max-width:none}
.section-head .dek{max-width:min(64ch,100%)}
.final .dek { max-width: min(50ch, 100%); }
.step p { max-width: min(62ch, 100%); }
/* Hero grid: two columns on desktop, stacks on mobile */
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
/* Dual receipt cards in hero right column */
.hero-receipts { display: flex; flex-direction: column; gap: 1rem; }
.mini-receipt {
background: var(--card);
border: 1px solid var(--line);
border-radius: 4px;
padding: 1.4rem 1.6rem;
position: relative;
}
.mini-receipt.solo-r { border-top: 3px solid var(--green); }
.mini-receipt.emp-r { border-top: 3px solid var(--gold); }
.mini-receipt .mr-label {
font-family: "Courier New",Courier,monospace, monospace;
font-size: .84rem;
letter-spacing: .16em;
text-transform: uppercase;
margin-bottom: .9rem;
}
.mini-receipt.solo-r .mr-label { color: var(--green); }
.mini-receipt.emp-r .mr-label { color: var(--gold); }
.mini-receipt .mr-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: .4rem 0;
border-bottom: 1px dashed var(--line);
font-size: 1rem;
color: var(--ink-soft);
}
.mini-receipt .mr-row .mv {
font-family: "Inter", sans-serif;
font-weight: 600;
font-feature-settings: "tnum" 1;
}
.mini-receipt .mr-row.strike .mv {
text-decoration: line-through;
color: var(--ink-faint);
}
.mini-receipt .mr-row.keep {
border-bottom: 0;
border-top: 2px solid var(--ink);
margin-top: .4rem;
padding-top: .9rem;
}
.mini-receipt .mr-row.keep .mv {
font-family: "Merriweather",serif;
font-size: 1.5rem;
font-weight: 600;
}
.mini-receipt.solo-r .mr-row.keep .mv { color: var(--green); }
.mini-receipt.emp-r .mr-row.keep .mv { color: var(--gold); }
.mini-receipt .mr-foot {
font-size: .84rem;
color: var(--ink-faint);
margin-top: .8rem;
line-height: 1.4;
}
/* Teaser calculators: override their internal max-width on all screens */
.uo-calc, .uo-gcalc {
max-width: 100% !important;
width: 100% !important;
}
/* Main mobile breakpoint */
@media (max-width: 860px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-receipts { flex-direction: row; }
.mini-receipt { flex: 1; }
}
@media (max-width: 560px) {
/* hero receipts stack on very small screens */
.hero-receipts { flex-direction: column; }
/* nav padding tighter */
.nav-inner { padding: 12px 16px; }
/* wrap padding tighter */
.wrap { padding: 0 16px; }
/* section padding tighter */
section { padding: clamp(2.2rem, 6vw, 4rem) 0; }
}
/* ===================================================================
HERO OVERHAUL — dark editorial, kinetic, financial-grade
=================================================================== */
/* --- hero shell --- */
section#hero {
background: var(--dark-surface);
padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
position: relative;
overflow: hidden;
}
/* animated mesh / depth layer */
section#hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 68% 40%, rgba(26,111,212,.18) 0%, transparent 65%),
radial-gradient(ellipse 55% 45% at 20% 80%, rgba(91,155,213,.10) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 85% 10%, rgba(15,79,160,.14) 0%, transparent 55%);
animation: heroMesh 12s ease-in-out infinite alternate;
pointer-events: none;
z-index: 0;
}
/* fine grain overlay for texture */
section#hero::after {
content: "";
position: absolute;
inset: 0;
opacity: .035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
}
@keyframes heroMesh {
0% { opacity: 1; transform: scale(1) translateY(0); }
100% { opacity: .85; transform: scale(1.04) translateY(-8px); }
}
section#hero .wrap { position: relative; z-index: 2; }
/* --- hero grid --- */
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: center;
}
/* --- eyebrow --- */
.hero .eyebrow {
color: var(--green-bright);
display: flex;
align-items: center;
gap: .8em;
margin-bottom: 1.6rem;
font-size: .84rem;
letter-spacing: .22em;
font-family: "Courier New", Courier, monospace;
font-weight: 500;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.hero .eyebrow::before {
content: "";
display: inline-block;
width: 0;
height: 1px;
background: var(--green-bright);
animation: eyebrowLine .9s .2s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes eyebrowLine {
to { width: 32px; }
}
/* --- h1 --- */
.hero h1 {
font-family: "Merriweather", Georgia, serif;
font-weight: 900;
font-size: clamp(2.6rem, 5.8vw, 5.2rem);
line-height: 1.04;
letter-spacing: -.025em;
color: var(--on-dark-heading);
margin: 0 0 1.6rem;
max-width: 14ch;
}
/* word-by-word reveal */
.hero h1 .hw {
display: inline-block;
opacity: 0;
transform: translateY(22px);
animation: hwIn .65s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes hwIn {
to { opacity: 1; transform: translateY(0); }
}
/* accent word: "large group" in bright blue */
.hero h1 .h-accent {
color: var(--hero-accent);
font-style: italic;
}
/* --- lede --- */
.hero-lede {
font-size: clamp(1rem, 1.6vw, 1.2rem);
color: var(--on-dark-faint2);
max-width: 44ch;
margin-bottom: 2.4rem;
line-height: 1.7;
font-family: "Merriweather", Georgia, serif;
font-weight: 400;
}
/* --- CTAs --- */
.hero-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.8rem;
}
.hero-cta-solo {
display: inline-flex;
align-items: center;
gap: .6em;
background: var(--green);
color: var(--white);
font-family: "Merriweather", Georgia, serif;
font-weight: 700;
font-size: 1rem;
padding: 1rem 1.8rem;
border-radius: 3px;
text-decoration: none;
letter-spacing: .01em;
box-shadow: 0 8px 32px -10px rgba(26,111,212,.7), 0 0 0 0 rgba(26,111,212,.4);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
position: relative;
overflow: hidden;
}
.hero-cta-solo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
}
.hero-cta-solo:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px -10px rgba(26,111,212,.75), 0 0 0 4px rgba(26,111,212,.18);
background: var(--blue-link);
}
.hero-cta-solo .arrow { transition: transform .2s ease; }
.hero-cta-solo:hover .arrow { transform: translateX(4px); }
.hero-cta-team {
display: inline-flex;
align-items: center;
gap: .6em;
background: transparent;
color: var(--on-dark-hero);
font-family: "Merriweather", Georgia, serif;
font-weight: 700;
font-size: 1rem;
padding: 1rem 1.8rem;
border-radius: 3px;
border: 1.5px solid rgba(214,232,250,.35);
text-decoration: none;
letter-spacing: .01em;
transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.hero-cta-team:hover {
border-color: rgba(214,232,250,.7);
background: rgba(214,232,250,.08);
transform: translateY(-2px);
color: var(--white);
}
.hero-cta-team .arrow { transition: transform .2s ease; }
.hero-cta-team:hover .arrow { transform: translateX(4px); }
/* --- trust note --- */
.hero-note {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .4em .55em;
font-family: "Courier New", Courier, monospace;
font-size: .84rem;
color: rgba(142,180,212,.65);
letter-spacing: .06em;
text-transform: uppercase;
max-width: 44ch;
}
.hero-note::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--chart-green);
box-shadow: 0 0 0 0 rgba(34,197,94,.4);
animation: pulse 2.4s ease infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.hero-note b { color: rgba(214,232,250,.85); font-weight: 600; }
/* --- right column: comparison panel --- */
.hero-panel {
position: relative;
}
.hero-panel-inner {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(26,111,212,.2),
0 32px 80px -24px rgba(7,22,41,.8),
inset 0 1px 0 rgba(255,255,255,.08);
position: relative;
}
/* top bar: panel header */
.hero-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: .9rem 1.4rem;
border-bottom: 1px solid rgba(255,255,255,.08);
background: rgba(26,111,212,.12);
}
.hero-panel-title {
font-family: "Courier New", Courier, monospace;
font-size: .84rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--green-bright);
}
.hero-panel-live {
display: flex;
align-items: center;
gap: .5em;
font-family: "Courier New", Courier, monospace;
font-size: .6rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--chart-green);
}
.hero-panel-live::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--chart-green);
animation: pulse 2s ease infinite;
}
/* tabs inside panel */
.hero-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero-tab {
padding: .7rem 1.4rem;
font-family: "Courier New", Courier, monospace;
font-size: .84rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(142,180,212,.5);
cursor: pointer;
border: none;
background: transparent;
text-align: left;
transition: color .2s, background .2s;
border-bottom: 2px solid transparent;
position: relative;
bottom: -1px;
}
.hero-tab.active {
color: var(--on-dark-hero);
background: rgba(255,255,255,.03);
border-bottom-color: var(--green);
}
.hero-tab:not(.active):hover { color: rgba(214,232,250,.7); }
/* panel body */
.hero-panel-body { padding: 1.6rem 1.4rem 1.4rem; }
/* the big savings number — centerpiece */
.hero-big-number {
text-align: center;
padding: 1rem 0 1.4rem;
}
.hero-big-label {
font-family: "Courier New", Courier, monospace;
font-size: .84rem;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(180,212,238,.92);
margin-bottom: .6rem;
}
.hero-big-val {
font-family: "Merriweather", Georgia, serif;
font-weight: 900;
font-size: clamp(2.8rem, 5vw, 4rem);
line-height: 1;
color: var(--hero-accent);
letter-spacing: -.03em;
opacity: 0;
transform: scale(.88);
animation: numIn .8s .7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes numIn {
to { opacity: 1; transform: scale(1); }
}
.hero-big-val .hero-big-unit {
font-size: .45em;
letter-spacing: 0;
color: rgba(79,163,247,.7);
font-weight: 700;
vertical-align: super;
margin-right: .1em;
}
.hero-big-sub {
font-family: "Courier New", Courier, monospace;
font-size: .84rem;
letter-spacing: .08em;
color: rgba(180,212,238,.88);
margin-top: .4rem;
}
/* comparison rows */
.hero-compare { margin-top: .2rem; }
.hero-cmp-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: .6rem 0;
border-bottom: 1px solid rgba(255,255,255,.06);
font-size: .88rem;
}
.hero-cmp-row:last-child { border-bottom: 0; }
.hero-cmp-label { color: rgba(180,212,238,.92); }
.hero-cmp-val {
font-family: "Courier New", Courier, monospace;
font-weight: 600;
font-size: .9rem;
color: var(--on-dark-hero);
font-feature-settings: "tnum" 1;
}
.hero-cmp-val.strike {
text-decoration: line-through;
color: rgba(214,232,250,.58);
text-decoration-thickness: 1.5px;
}
.hero-cmp-val.pos { color: var(--hero-accent); }
/* disclaimer */
.hero-panel-disc {
font-family: "Courier New", Courier, monospace;
font-size: .84rem;
letter-spacing: .06em;
color: rgba(180,212,238,.72);
text-align: center;
margin-top: 1rem;
padding-top: .8rem;
border-top: 1px solid rgba(255,255,255,.1);
}
/* panel tab panels */
.hero-tabpanel { display: none; }
.hero-tabpanel.active { display: block; }
/* panel entrance animation */
.hero-panel-inner {
opacity: 0;
transform: translateY(16px) scale(.98);
animation: panelIn .9s .4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes panelIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* --- floating stat chips above the panel --- */
.hero-stat-chips {
display: flex;
gap: .6rem;
margin-bottom: .9rem;
flex-wrap: wrap;
}
.hero-chip {
display: flex;
align-items: center;
gap: .45em;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 100px;
padding: .32rem .85rem .32rem .5rem;
font-family: "Courier New", Courier, monospace;
font-size: .84rem;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(214,232,250,.92);
}
.hero-chip .chip-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--chart-green);
flex-none;
}
.hero-chip.blue .chip-dot { background: var(--hero-accent); }
.hero-chip.gold .chip-dot { background: var(--orange-warn); }
/* --- responsive --- */
@media (max-width: 860px) {
.hero-grid { grid-template-columns: 1fr; }
.hero h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); max-width: 100%; }
.hero-stat-chips { display: none; }
}
@media (max-width: 560px) {
section#hero { padding: 3rem 0 2.5rem; }
.hero h1 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
.hero-cta-solo, .hero-cta-team { font-size: .9rem; padding: .9rem 1.4rem; }
}