/* Manrope and Space Grotesk, self-hosted.
   Generated by build/fetch-fonts.mjs from https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap
   Do not edit by hand — re-run the script to refresh.
   Both families are licensed under the SIL Open Font License 1.1. */
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --bg:#0E0E12; --bg2:#13131A; --surface:#17171F; --surface2:#1D1D28; --tile:#8E9097;
  --border:rgba(255,255,255,.09); --border2:rgba(255,255,255,.17);
  --text:#F2F0EB; --text2:rgba(235,233,240,.66); --text3:rgba(235,233,240,.52);
  --accent:#FF8362; --accent-strong:#D9390E; --accent-hover:#FF7A57; --accent-soft:#FFB6A2;
  --accent-glow:rgba(255,107,74,.34); --chip-bg:rgba(255,107,74,.14);
  --amber:#E5A44C; --green:#58B98B; --red:#C9695E;
  --header:rgba(14,14,18,.72);
  --shadow:0 24px 70px rgba(0,0,0,.45);
  --glow:radial-gradient(48% 44% at 62% 38%, rgba(110,91,255,.30), transparent 70%);
  --scrim:linear-gradient(180deg, rgba(10,10,16,0) 48%, rgba(10,10,16,.82));
  --grad:linear-gradient(90deg,var(--accent-strong),var(--amber));
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
:root[data-theme="light"]{
  --bg:#F5F2EA; --bg2:#EDE9DD; --surface:#FBF9F3; --surface2:#FFFFFF; --tile:#9A9BA2;
  --border:rgba(30,27,22,.12); --border2:rgba(30,27,22,.22);
  --text:#201D18; --text2:rgba(38,34,28,.72); --text3:rgba(38,34,28,.66);
  --accent:#B93E1D; --accent-strong:#D3421F; --accent-hover:#9E3416; --accent-soft:#F4A88E;
  --accent-glow:rgba(224,80,46,.22); --chip-bg:rgba(224,80,46,.10);
  --amber:#886022; --green:#2C784F; --red:#A54D45;
  --header:rgba(245,242,234,.8);
  --shadow:0 20px 50px rgba(70,58,30,.14);
  --glow:radial-gradient(48% 44% at 62% 38%, rgba(110,91,255,.16), transparent 70%);
}
*{box-sizing:border-box}
*{font-family:var(--sans)!important}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5;transition:background-color .25s ease,color .25s ease;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
/* Links sitting inside running text are underlined so they are distinguishable
   without relying on colour (WCAG 1.4.1). Navigation, buttons, cards and other
   links that are their own block are not inline links and keep their treatment. */
p a,li a,.body a,.sub a,.lead a,.micro a,.legal a,#docCrumb a,#docBody a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
p a.btn,li a.btn,.body a.btn,.sub a.btn,.micro a.btn,p a.tbtn,li a.tbtn,.body a.tbtn,.sub a.tbtn,.micro a.tbtn,.lead a.btn,.lead a.tbtn{text-decoration:none}
::selection{background:rgba(110,91,255,.35)}
input,select,textarea,button{font:inherit;color:inherit}
::placeholder{color:var(--text3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:600}
/* Section headings were <h3> until the outline was corrected to h1 -> h2. Where a
   heading has no container rule or class of its own it fell back to the browser's
   h3 size, so pin that here; .h2, container rules and inline sizes all outrank it. */
h2{font-size:1.17em}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4.5vw,40px)}
.sec{padding:clamp(60px,8vw,100px) 0}
.band{background:var(--bg2)}
.hair{border-top:1px solid var(--border)}
/* ---- wordmark ---- */
.mark{background:none;border:none;padding:6px 0;cursor:pointer;display:inline-flex;align-items:center;gap:9px;color:var(--text);line-height:1}
.mark .lm{width:25px;height:25px;flex:none;display:block}
.mark .wm{font:800 20px/1 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:var(--text)}
/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border-radius:12px;font:700 15px/1 Manrope,sans-serif;padding:15px 24px;border:1px solid transparent;transition:background .18s,transform .18s,box-shadow .18s,border-color .18s,color .18s;white-space:nowrap}
.btn.p{background:var(--accent-strong);color:#fff}
.btn.p:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 10px 28px var(--accent-glow)}
.btn.s{background:transparent;border-color:var(--border2);color:var(--text)}
.btn.s:hover{border-color:var(--accent);color:var(--accent)}
.btn.sm{padding:11px 18px;border-radius:11px;font-size:14px}
.tbtn{background:none;border:none;color:var(--accent);font:700 14.5px/1 Manrope,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 0}
.tbtn:hover{color:var(--accent-hover)}
.tbtn .ar{transition:transform .18s}
.tbtn:hover .ar{transform:translateX(3px)}
/* ---- type ---- */
.ey{font:800 11.5px/1 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);display:inline-block}
.ey::after{content:"";display:block;width:44px;height:2px;border-radius:2px;background:var(--grad);margin-top:9px}
.h1{font-weight:700;font-size:clamp(46px,6.2vw,78px);line-height:1.02;letter-spacing:-.03em}
.ph1{font-weight:700;font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.025em}
.h2{font-weight:600;font-size:clamp(28px,3.2vw,44px);line-height:1.14;letter-spacing:-.02em}
.sub{font:400 clamp(16.5px,1.5vw,19px)/1.62 Manrope,sans-serif;color:var(--text2)}
.body{font:400 15.3px/1.64 Manrope,sans-serif;color:var(--text2)}
.micro{font:500 12.7px/1.5 Manrope,sans-serif;color:var(--text3)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:19px;padding:30px}
.card.lift{transition:transform .22s,border-color .22s,box-shadow .22s}
.card.lift:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.chip{width:42px;height:42px;border-radius:12px;background:var(--chip-bg);display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex:none}
.chip svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.grid{display:grid;gap:19px}
.tile-img{width:100%;height:100%;object-fit:cover;background:var(--tile)}
.rev{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
html.js .rev{opacity:0;transform:translateY(16px)}
html.js .rev.in{opacity:1;transform:none}
/* ---- header ---- */
header.site{position:sticky;top:0;z-index:60;background:var(--header);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
header.site .bar{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,40px);height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px}
nav.main{display:flex;align-items:center;gap:2px}
nav.main a{background:none;border:none;cursor:pointer;font:600 14px/1 Manrope,sans-serif;color:var(--text2);padding:10px 13px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:color .15s}
nav.main a:hover{color:var(--text)}
nav.main a .u{display:block;height:2px;width:22px;border-radius:2px;background:transparent}
nav.main a.on{color:var(--text)}
nav.main a.on .u{background:var(--grad)}
.icobtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border2);background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text2);transition:color .15s,border-color .15s}
.icobtn:hover{color:var(--accent);border-color:var(--accent)}
.icobtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hd-right{display:flex;align-items:center;gap:10px}
.burger{display:none}
/* ---- hero ---- */
.hero{position:relative;padding:clamp(56px,7vw,104px) 0 clamp(60px,8vw,100px)}
.hero .glow{position:absolute;inset:0;background:var(--glow);pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hgrid{display:grid;grid-template-columns:minmax(min(100%,430px),1fr) minmax(min(100%,430px),1fr);gap:clamp(30px,5vw,68px);align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border2);border-radius:999px;padding:8px 15px;font:600 12.7px/1.35 Manrope,sans-serif;color:var(--text2);max-width:100%}
.pill>span:last-child{min-width:0;overflow-wrap:break-word}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.dot.pulse{animation:mcPulse 2.2s ease-in-out infinite}
.checks{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:26px;min-width:0}
.flownode,.gcard,.ccard,.tier,.card,.capshot,.flowchips,.mchips{min-width:0}
.checks span{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 Manrope,sans-serif;color:var(--text2)}
.checks svg{width:16px;height:16px;color:var(--green);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* meeting tile */
.mtile{width:min(100%,440px);aspect-ratio:1/1.04;border-radius:24px;border:1px solid var(--border2);box-shadow:var(--shadow);overflow:hidden;position:relative;margin-inline:auto;animation:mcFloat 8s ease-in-out infinite;background:var(--tile)}
@media (prefers-reduced-motion:reduce){.mtile{animation:none}.dot.pulse{animation:none}.rev{transition:none;opacity:1;transform:none}}
.mtile .disc{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;background:rgba(12,12,18,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);color:#fff;font:600 12px/1 Manrope,sans-serif;padding:8px 13px;border-radius:999px;z-index:2;white-space:nowrap}
.mtile .disc svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.mtile .scr{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 15px;background:var(--scrim);display:flex;align-items:flex-end;justify-content:space-between;z-index:2}
.mtile .who{display:flex;align-items:center;gap:9px;color:#fff}
.mtile .who b{font:700 15px/1 Manrope,sans-serif}
.mtile .who small{font:500 12px/1 Manrope,sans-serif;color:rgba(255,255,255,.72)}
.wave{display:flex;align-items:flex-end;gap:3px;height:20px}
.wave i{width:3px;background:rgba(255,255,255,.85);border-radius:2px;animation:mcWave 1.1s ease-in-out infinite}
.wave i:nth-child(1){height:8px;animation-delay:0s}
.wave i:nth-child(2){height:16px;animation-delay:.15s}
.wave i:nth-child(3){height:11px;animation-delay:.3s}
.wave i:nth-child(4){height:19px;animation-delay:.45s}
.wave i:nth-child(5){height:9px;animation-delay:.6s}
.cap{font:500 12.5px/1.5 Manrope,sans-serif;color:var(--text3);text-align:center;margin-top:16px}
.stackstrip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:44px;padding-top:26px;border-top:1px solid var(--border)}
.stackstrip .lbl{font:700 11px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
.stackstrip .nm{font:600 14px/1 'Space Grotesk',sans-serif;color:var(--text2)}
.stackstrip .sep{width:4px;height:4px;border-radius:50%;background:var(--border2)}
/* how it works */
.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.step .num{font:700 15px/1 'Space Grotesk',sans-serif;color:var(--accent);letter-spacing:.02em}
.step h2:not(.h2){font-size:20px;margin:14px 0 9px;letter-spacing:-.01em}
.avstack{display:flex;margin-top:auto;padding-top:22px}
.avstack .a{width:42px;height:42px;border-radius:50%;overflow:hidden;border:2px solid var(--surface);margin-left:-10px;background:var(--tile)}
.avstack .a:first-child{margin-left:0}
.mchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.mchips span,.mchips a{border:1px solid var(--border2);border-radius:999px;padding:7px 12px;font:600 12px/1 Manrope,sans-serif;color:var(--text2);text-decoration:none;cursor:pointer}
.mchips a:hover{border-color:var(--accent);color:var(--accent)}
.miniroster{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:22px;background:var(--surface2);border-radius:13px;padding:12px 13px;margin-top:22px}
.miniroster .th{width:44px;height:44px;border-radius:10px;overflow:hidden;background:var(--tile);flex:none}
.miniroster b{font:700 13.5px/1.2 Manrope,sans-serif;color:var(--text)}
.miniroster small{font:500 11.5px/1.3 Manrope,sans-serif;color:var(--text3);display:flex;align-items:center;gap:6px;margin-top:3px}
/* pillars */
.pillars{grid-template-columns:repeat(4,1fr)}
  @media(max-width:1000px){.pillars{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.pillars{grid-template-columns:1fr}}
.pillars h2:not(.h2){font-size:19px;margin:16px 0 8px;letter-spacing:-.01em}
/* crew */
.crewscroll{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);padding:6px 2px 4px}
@media(max-width:820px){.crewscroll{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.crewscroll{grid-template-columns:1fr}}
.crewscroll::-webkit-scrollbar{height:8px}
.crewscroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px}
.ccard{background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .22s,border-color .22s,box-shadow .22s;text-align:left}
.ccard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.ccard .imw{aspect-ratio:1/1;background:var(--tile);position:relative;overflow:hidden}
.ccard .meta{padding:13px 14px 16px}
.ccard .meta b{font:700 16px/1.1 'Space Grotesk',sans-serif;color:var(--text)}
.ccard .meta .tg{font:800 10.5px/1 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);display:block;margin-top:7px}
.crewgrid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.crewgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.crewgrid{grid-template-columns:1fr}}
.gcard{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px;cursor:pointer;transition:transform .22s,border-color .22s,box-shadow .22s;text-align:left}
.gcard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.gcard .imw{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--tile);position:relative;margin-bottom:15px}
.gcard b{font:700 17px/1.1 'Space Grotesk',sans-serif;color:var(--text)}
.gcard .tg{font:800 11px/1 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);display:block;margin:8px 0 9px}
.gcard .ol{font:400 13.5px/1.5 Manrope,sans-serif;color:var(--text2)}
/* Corner sash on characters that are on the roadmap but not yet deployable.
   Pinned into the bottom-right corner so it reads as anchored rather than
   floating over the art, and kept low: the card art is a portrait crop, so a
   sash any higher cuts across the face. Both ends run off the tile and are
   clipped by the image well.
   The label is right-aligned, not centred, because the visible window is the
   part of the band before it exits the right edge -- centred text slides out
   of view and reads as "MING SOON". Type is sized so the whole word fits that
   window at each card size.
   White on --accent-strong is 4.6:1 in both themes, so the label carries its
   own contrast whatever the art behind it. */
.soonband{position:absolute;right:-16%;bottom:2%;width:72%;transform:rotate(-45deg);transform-origin:center;background:var(--accent-strong);color:#fff;font:800 7.5px/1 Manrope,sans-serif;letter-spacing:.05em;text-transform:uppercase;text-align:right;padding:6px 12% 6px 0;z-index:2;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.32)}
.gcard .soonband{font-size:8.5px;letter-spacing:.08em;padding:7px 11% 7px 0}
.flag{position:absolute;top:9px;left:9px;background:rgba(12,12,18,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);color:#fff;font:800 9.5px/1 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:8px;z-index:2}
/* teasers */
.teasers{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
/* trust */
.trustgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.trustgrid h2:not(.h2){font-size:19px;margin:16px 0 9px;letter-spacing:-.01em}
.dashcell{border:1.5px dashed var(--border2);border-radius:19px;padding:30px;display:flex;flex-direction:column;gap:14px;justify-content:center;align-items:flex-start}
.auditstrip{display:flex;flex-wrap:wrap;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px 26px;margin-top:34px}
.auditstrip .ic{width:46px;height:46px;border-radius:13px;background:rgba(88,185,139,.14);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.auditstrip .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auditstrip .txt{flex:1;min-width:220px}
.auditstrip .blocks{display:flex;gap:5px}
.auditstrip .blocks i{width:13px;height:24px;border-radius:3px;background:rgba(88,185,139,.5)}
.flist{display:grid;grid-template-columns:1fr 1fr;gap:18px 34px;margin-top:10px}
.flist .it{display:flex;gap:12px}
.flist .it svg{width:20px;height:20px;color:var(--green);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.flist .it b{font:700 15px/1.35 'Space Grotesk',sans-serif;color:var(--text);display:block;margin-bottom:4px;letter-spacing:-.01em}
.flist .it p{font:400 13.6px/1.55 Manrope,sans-serif;color:var(--text2)}
@media(max-width:760px){.flist{grid-template-columns:1fr;gap:16px}}
.frame{border:1px solid var(--border);border-radius:15px;overflow:hidden;background:var(--surface);box-shadow:0 20px 55px rgba(0,0,0,.34)}
.frame .bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--border);background:var(--tile)}
.frame .bar i{width:10px;height:10px;border-radius:50%;background:var(--border2);display:block}
.frame .bar span{margin-left:10px;font:500 11.5px/1 Manrope,sans-serif;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame>img{display:block;width:100%;height:auto}
.rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.rooms figure{margin:0;border-radius:13px;overflow:hidden;border:1px solid var(--border);background:var(--tile)}
.rooms figure img{display:block;width:100%;height:auto}
.rooms figcaption{font:600 12px/1 Manrope,sans-serif;color:var(--text2);padding:11px 13px;letter-spacing:.01em}
@media(max-width:900px){.rooms{grid-template-columns:repeat(2,1fr)}}
/* pricing */
.pilotbanner{border:1.5px solid var(--accent-strong);border-radius:20px;padding:26px 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 14px 44px var(--accent-glow);background:var(--surface)}
.pilotbanner .big{font:700 30px/1 'Space Grotesk',sans-serif;color:var(--text)}
.tiers{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:stretch}
.tier{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px}
.tier.hot{border-color:var(--accent-strong);box-shadow:0 14px 44px var(--accent-glow)}
.tier .lab{font:800 11px/1 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--text3)}
.tier.hot .lab{color:var(--accent)}
.tier .price{font:700 44px/1 'Space Grotesk',sans-serif;color:var(--text);margin:14px 0 3px}
.tier .price.from{font-size:36px}
.tier .per{font:500 13px/1.4 Manrope,sans-serif;color:var(--text3)}
.tier .save{font:600 12.5px/1 Manrope,sans-serif;color:var(--green);margin-top:10px}
.tier .note{font:500 12.5px/1 Manrope,sans-serif;color:var(--text3);margin-top:10px}
.tier ul{list-style:none;margin:20px 0;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.tier li{display:flex;gap:10px;font:400 13.6px/1.45 Manrope,sans-serif;color:var(--text2)}
.tier li svg{width:16px;height:16px;color:var(--green);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:1px}
.ratebox{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:22px 24px;margin-top:20px}
.ratebox .rl{font:800 11px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:12px}
.ratebox p{font:400 13.6px/1.6 Manrope,sans-serif;color:var(--text2)}
.ratebox b{color:var(--text);font-weight:700}
  /* comparison tables — pricing plan grid + competitors page */
  .cmpwrap{margin-top:24px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
  .cmptbl{width:100%;border-collapse:collapse;min-width:660px;font:400 14px/1.45 Manrope,sans-serif}
  .cmptbl th,.cmptbl td{padding:13px 18px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
  .cmptbl tbody tr:last-child td,.cmptbl tbody tr:last-child th{border-bottom:0}
  .cmptbl thead th{border-bottom:1px solid var(--border2);vertical-align:bottom}
  .cmptbl .feat{color:var(--text2);font-weight:500;width:32%}
  .cmptbl td.v,.cmptbl th.col{text-align:center}
  .cmptbl th.col .cn{font:800 11px/1 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.09em;color:var(--text3)}
  .cmptbl th.col .cp{display:block;font:700 18px/1.05 'Space Grotesk',sans-serif;color:var(--text);margin-top:7px}
  .cmptbl th.col .cu{display:block;font:400 11px/1.35 Manrope,sans-serif;color:var(--text3);margin-top:4px}
  .cmptbl .me{background:rgba(110,91,255,.07)}
  .cmptbl th.col.me .cn{color:var(--accent)}
  .cmptbl .tag{display:inline-block;margin-top:9px;font:800 8.5px/1 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:4px 8px}
  .cmptbl .yes{color:var(--accent);font-weight:800;font-size:16px}
  .cmptbl .no{color:var(--text3);font-size:15px}
  .cmptbl .part{color:#B0791F;font-weight:700;font-size:12px}
  :root[data-theme="dark"] .cmptbl .part{color:#D9A24A}
  .cmpnote{font:400 12px/1.55 Manrope,sans-serif;color:var(--text3);margin-top:14px}
  .whyrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
  @media(max-width:820px){.whyrow{grid-template-columns:1fr}}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:720px){.duo{grid-template-columns:1fr}}
  .cmptbl .yn{color:var(--text2);font-weight:700;font-size:15px}
  .reframe{text-align:center;max-width:20ch;margin:0 auto;font:700 clamp(23px,3.2vw,34px)/1.22 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:var(--text)}
  .reframe .lo{display:block;margin:16px auto 0;font:400 15px/1.6 Manrope,sans-serif;letter-spacing:0;color:var(--text3);max-width:58ch}
  .devsec{max-width:840px}
  .devsec code,.wrap code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.88em;background:var(--surface2);border:1px solid var(--border);padding:1px 5px;border-radius:5px;color:var(--text)}
  .codeblock{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;overflow-x:auto;margin:12px 0}
  .codeblock pre{margin:0;font:400 12.3px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--text2);white-space:pre}
  .codeblock .cmt{color:var(--text3)}
  .apirow{border:1px solid var(--border);border-radius:12px;padding:13px 16px;margin-bottom:9px;background:var(--surface)}
  .apirow .nm{font:700 13.5px/1.3 ui-monospace,Menlo,monospace;color:var(--accent)}
  .apirow .pp{font:400 13.5px/1.55 Manrope,sans-serif;color:var(--text2);margin:5px 0 0}
  .apirow .pm{font:400 11.5px/1.5 ui-monospace,Menlo,monospace;color:var(--text3);margin-top:5px}
  .devtag{display:inline-block;font:700 9px/1 Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);border-radius:5px;padding:3px 6px;vertical-align:middle}
.faq{max-width:820px;margin:0 auto}
.faqi{border-bottom:1px solid var(--border)}
.faqi button{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;text-align:left;color:var(--text);font:600 16.5px/1.35 'Space Grotesk',sans-serif}
.faqi .pm{flex:none;color:var(--accent);font-size:22px;line-height:1;transition:transform .2s}
.faqi.open .pm{transform:rotate(45deg)}
.faqi .ans{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faqi .ans p{padding:0 2px 20px;font:400 14.6px/1.6 Manrope,sans-serif;color:var(--text2)}
/* screenshot placeholder */
.shot{border:1.5px dashed var(--border2);border-radius:14px;aspect-ratio:16/9.6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text3);text-align:center;padding:18px;margin-top:18px}
.shot svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5}
.shot span{font:500 12px/1.4 Manrope,sans-serif;max-width:220px}

  .disc{display:inline-flex;align-items:center;gap:7px;background:rgba(12,12,18,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);color:#fff;font:600 12px/1 Manrope,sans-serif;padding:8px 13px;border-radius:999px;white-space:nowrap}
  .disc svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
  /* No float. The panel used to drift on an 8s mcFloat loop; the reduced-motion rule below already
     pinned it still, so dropping it makes that the only behaviour rather than removing a feature. The
     chat cycling, the speaking ring and the wave bars are independent and unaffected. */
  .meetpanel{width:min(100%,460px);margin-inline:auto;background:var(--surface);border:1px solid var(--border2);border-radius:24px;box-shadow:var(--shadow);padding:14px}
  /* Hero play control. Sits against the stage's left edge and vertically centred: the character is
     framed dead centre, so the left margin is the one region that is reliably empty on every character. */
  .heroplay{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:3;display:inline-flex;
    align-items:center;gap:7px;padding:9px 13px 9px 11px;border:1px solid rgba(255,255,255,.34);
    border-radius:999px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;
    font:800 11px/1 Manrope,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
    backdrop-filter:blur(7px);transition:background .18s ease,transform .18s ease}
  .heroplay::before{content:"";position:absolute;inset:-26px -30px;border-radius:999px;z-index:-1;
    background:radial-gradient(closest-side,rgba(6,6,14,.6),rgba(6,6,14,0))}
  .heroplay:hover{background:rgba(255,255,255,.26);transform:translateY(-50%) scale(1.04)}
  .heroplay:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
  .heroplay svg{width:12px;height:12px;fill:#fff;flex:none}
  @media(prefers-reduced-motion:reduce){.heroplay{transition:none}.heroplay:hover{transform:translateY(-50%)}}
  .meetpanel .stage{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/11;background:var(--tile)}
  .meetpanel .stage>img{width:100%;height:100%;object-fit:cover}
  .speakring{position:absolute;inset:0;border:2px solid transparent;border-radius:16px;transition:border-color .3s;pointer-events:none;z-index:2}
  .meetpanel.speaking .speakring{border-color:var(--accent);box-shadow:inset 0 0 26px var(--accent-glow)}
  .stagebar{position:absolute;left:0;right:0;bottom:0;padding:14px;background:var(--scrim);display:flex;align-items:flex-end;justify-content:space-between;z-index:2}
  .stagebar .who{display:flex;align-items:center;gap:9px;color:#fff}
  .stagebar .who b{font:700 15px/1 Manrope,sans-serif}
  .stagebar .who small{font:500 12px/1 Manrope,sans-serif;color:rgba(255,255,255,.72)}
  .meetpanel .wave i{background:rgba(255,255,255,.5);animation-play-state:paused}
  .meetpanel.speaking .wave i{background:rgba(255,255,255,.95);animation-play-state:running}
  .filmstrip{display:flex;gap:8px;margin-top:10px}
  .ptile{flex:1;aspect-ratio:1/.82;border-radius:11px;background:var(--surface2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:border-color .3s}
  .ptile.active{border-color:var(--accent)}
  .ptile>img{width:100%;height:100%;object-fit:cover}
  .pav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent-soft),var(--accent-strong));color:#fff;display:flex;align-items:center;justify-content:center;font:700 14px/1 'Space Grotesk',sans-serif}
  .ptile .lab{position:absolute;bottom:5px;left:6px;font:600 8.5px/1 Manrope,sans-serif;color:#fff;background:rgba(0,0,0,.62);padding:2px 5px;border-radius:6px;white-space:nowrap;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis}
  .caption{margin-top:11px;background:var(--surface2);border:1px solid var(--border);border-radius:13px;padding:13px 14px;min-height:76px}
  .caption .line{font:500 13.6px/1.5 Manrope,sans-serif;color:var(--text2)}
  .caption .line b{color:var(--text);font-weight:700}
  .caption .ans{color:var(--text)}
  .memchip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:700 10.5px/1 Manrope,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--chip-bg);border-radius:999px;padding:6px 10px;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
  .memchip.show{opacity:1;transform:none}
  .memchip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
  @media(prefers-reduced-motion:reduce){.meetpanel{animation:none}}
  .flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch;margin-top:40px}
  .flownode{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px}
  .flownode.mid{border-color:var(--accent-strong);box-shadow:0 12px 40px var(--accent-glow)}
  .flownode .ttl{font:800 11px/1.3 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:12px}
  .flownode.mid .ttl{color:var(--accent)}
  .flownode h2:not(.h2){font-size:18px;margin-bottom:13px;letter-spacing:-.01em}
  .flowchips{display:flex;flex-wrap:wrap;gap:7px}
  .flowchips span,.flowchips a{border:1px solid var(--border2);border-radius:999px;padding:6px 11px;font:600 12px/1 Manrope,sans-serif;color:var(--text2);text-decoration:none;cursor:pointer}
  .flowchips a:hover{border-color:var(--accent);color:var(--accent)}
  .flownode.mid .flowchips span,.flownode.mid .flowchips a{border-color:var(--accent);color:var(--accent)}
  .flowarrow{display:flex;align-items:center;justify-content:center;color:var(--accent)}
  .flowarrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8}
  @media(max-width:860px){.flow{grid-template-columns:1fr}.flowarrow{transform:rotate(90deg);height:28px}}
  .caprow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center;padding:clamp(32px,5vw,52px) 0;border-top:1px solid var(--border)}
  .caprow:first-child{border-top:none}
  .caprow .kicker{font:800 11px/1 Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .caprow h2:not(.h2){font-size:clamp(22px,2.6vw,30px);margin:13px 0 12px;letter-spacing:-.02em}
  .capshot{border:1.5px dashed var(--border2);border-radius:16px;aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;color:var(--text3);text-align:center;padding:22px;background:var(--surface)}
  .capshot span{font:500 12px/1.45 Manrope,sans-serif;max-width:230px}
  .capframe{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 16px 44px rgba(0,0,0,.28)}
  .capframe img{display:block;width:100%;height:auto}
  /* interactive app demo — inverse-theme cards */
  .appdemo{--ad-bg:#F1EDE3;--ad-card:#FCFAF5;--ad-head:#FFFFFF;--ad-ink:#221F19;--ad-mut:#78756D;--ad-faint:#9A968C;--ad-line:rgba(30,27,22,.10);--ad-line2:rgba(30,27,22,.17);--ad-active:#EBE6D8;
    background:var(--ad-bg);border:1px solid var(--ad-line2);border-radius:16px;overflow:hidden;box-shadow:0 18px 46px rgba(0,0,0,.30);color:var(--ad-ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
  :root[data-theme="light"] .appdemo{--ad-bg:#0F0F14;--ad-card:#17171F;--ad-head:#1D1D28;--ad-ink:#ECECF1;--ad-mut:#9A9AA4;--ad-faint:#6E6E78;--ad-line:rgba(255,255,255,.08);--ad-line2:rgba(255,255,255,.16);--ad-active:#24242F;box-shadow:0 18px 46px rgba(0,0,0,.5)}
  .appdemo .adhead{display:flex;align-items:center;gap:10px;padding:14px 14px 2px}
  .appdemo .adsearch{flex:1;display:flex;align-items:center;gap:9px;background:var(--ad-head);border:1px solid var(--ad-line);border-radius:11px;padding:10px 13px;color:var(--ad-faint);font-size:13.5px;min-width:0}
  .appdemo .adsearch svg{width:15px;height:15px;stroke:var(--ad-faint);fill:none;stroke-width:2;flex:none}
  .appdemo .adsearch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .appdemo .adtoggle{display:flex;border:1px solid var(--ad-line2);border-radius:9px;overflow:hidden;font:600 12px/1 var(--sans);flex:none}
  .appdemo .adtoggle i{padding:8px 11px;color:var(--ad-mut);font-style:normal}
  .appdemo .adtoggle i.on{background:var(--ad-active);color:var(--ad-ink)}
  .appdemo .adtabs{display:flex;gap:3px;flex-wrap:wrap;padding:12px 12px 0}
  .appdemo .adtab{border:0;background:transparent;border-radius:999px;padding:7px 12px;font:600 12.5px/1 var(--sans);color:var(--ad-mut);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}
  .appdemo .adtab:hover{color:var(--ad-ink)}
  .appdemo .adtab.on{background:var(--ad-active);color:var(--ad-ink);box-shadow:inset 0 0 0 1px var(--ad-line2)}
  .appdemo .adcount{padding:12px 16px 4px;font-size:11.5px;color:var(--ad-faint);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .appdemo .adnote{color:#B9822C;background:rgba(192,131,40,.14);border-radius:5px;padding:2px 7px;font-size:10.5px}
  :root[data-theme="light"] .appdemo .adnote{color:#D9A24A}
  .appdemo .adbody{padding:4px 14px 14px;min-height:236px}
  .appdemo .adrow{display:flex;gap:12px;align-items:flex-start;background:var(--ad-card);border:1px solid var(--ad-line);border-radius:12px;padding:12px 14px;margin-bottom:8px;animation:adFade .32s ease both}
  .appdemo .adbadge{flex:none;font:800 9.5px/1.15 Manrope,sans-serif;letter-spacing:.03em;text-transform:uppercase;padding:5px 7px;border-radius:6px;margin-top:1px}
  .appdemo .adrow h3{margin:0 0 5px;font:600 14px/1.35 var(--sans);color:var(--ad-ink)}
  .appdemo .admeta{font-size:11.6px;color:var(--ad-faint);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .appdemo .admeta .dot{opacity:.55}
  .appdemo .adpill{border:1px solid var(--ad-line2);border-radius:999px;padding:2px 8px;font-size:10.5px;color:var(--ad-mut)}
  .appdemo .bd{background:rgba(47,163,107,.15);color:#2C9A64}
  :root[data-theme="light"] .appdemo .bd{color:#4CC98B}
  .appdemo .bq{background:rgba(124,107,240,.16);color:#6E5DE6}
  :root[data-theme="light"] .appdemo .bq{color:#9B8DFF}
  .appdemo .ba{background:rgba(192,131,40,.17);color:#B0791F}
  :root[data-theme="light"] .appdemo .ba{color:#D9A24A}
  .appdemo .bs{background:rgba(120,120,138,.20);color:var(--ad-mut)}
  .appdemo .bt{background:rgba(42,166,166,.16);color:#238F8F}
  :root[data-theme="light"] .appdemo .bt{color:#45C4C4}
  .appdemo table{width:100%;border-collapse:collapse;font-size:12.5px}
  .appdemo thead th{text-align:left;font:700 9.5px/1 Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ad-faint);padding:2px 10px 10px}
  .appdemo tbody td{padding:12px 10px;border-top:1px solid var(--ad-line);color:var(--ad-mut)}
  .appdemo tbody td.nm{color:var(--ad-ink);font-weight:600}
  .appdemo .cfg{background:var(--ad-card);border:1px solid var(--ad-line);border-radius:12px;padding:4px 16px;animation:adFade .32s ease both}
  .appdemo .cfg .crow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--ad-line);font-size:13px}
  .appdemo .cfg .crow:first-child{border-top:0}
  .appdemo .cfg .ck{color:var(--ad-faint);flex:none}
  .appdemo .cfg .cv{color:var(--ad-ink);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
  .appdemo .adstatus{display:flex;align-items:center;gap:9px;margin-top:9px;padding:11px 14px;background:var(--ad-card);border:1px solid var(--ad-line);border-radius:11px;font-size:12.5px;color:var(--ad-mut)}
  .appdemo .adstatus .g{width:8px;height:8px;border-radius:50%;background:#2FA36B;box-shadow:0 0 0 3px rgba(47,163,107,.18);flex:none}
  .appdemo .adcap{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--ad-line);font-size:11px;color:var(--ad-faint);background:var(--ad-head)}
  .appdemo .adcap .dots{display:flex;gap:5px;margin-left:auto}
  .appdemo .adcap .dots b{width:6px;height:6px;border-radius:50%;background:var(--ad-line2);transition:background .2s,width .2s;display:block}
  .appdemo .adcap .dots b.on{background:var(--ad-mut);width:16px;border-radius:3px}
  .appdemo .adcap .hint{margin-left:auto;color:var(--ad-faint)}
  .appdemo .adlink{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font:600 12px/1 var(--sans);text-decoration:none;cursor:pointer}
  .appdemo .adlink:hover{text-decoration:underline}
  .appdemo .adform{padding:2px 0}
  .appdemo .adfield{margin-bottom:11px}
  .appdemo .adfield.hz{display:flex;gap:10px}
  .appdemo .adfield.hz>div{flex:1;min-width:0}
  .appdemo .adfield>label{display:block;font:700 9.5px/1 Manrope,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--ad-faint);margin:0 0 6px}
  .appdemo .adinput{background:var(--ad-card);border:1px solid var(--ad-line2);border-radius:9px;padding:9px 12px;font-size:13.5px;color:var(--ad-ink);display:flex;align-items:center;gap:8px;min-height:38px}
  .appdemo .adinput .cue{width:1.5px;height:15px;background:var(--accent);border-radius:1px;animation:adCaret 1.1s step-end infinite}
  .appdemo .adselect{justify-content:space-between}
  .appdemo .adselect svg{width:14px;height:14px;stroke:var(--ad-faint);fill:none;stroke-width:2;flex:none}
  .appdemo .adchips{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
  .appdemo .adchip{aspect-ratio:1;border-radius:9px;overflow:hidden;border:1.5px solid var(--ad-line2);cursor:pointer;padding:0;background:var(--ad-card);position:relative;transition:transform .16s,box-shadow .16s}
  .appdemo .adchip img{width:100%;height:100%;object-fit:cover;display:block}
  .appdemo .adchip.on{transform:translateY(-2px);box-shadow:0 5px 14px rgba(110,91,255,.45)}
  .appdemo .adchip.on::after{content:"";position:absolute;inset:0;border:2px solid var(--accent);border-radius:8px}
  /* Avatar-creator demo. Deliberately shows the CONTROLS and the rig check, not a
     rendered face — the faces you actually build are yours, and the thing worth
     showing is that every one of them is checked before it can join a meeting. */
  .appdemo .avwrap{display:grid;grid-template-columns:150px 1fr;gap:12px;animation:adFade .32s ease both}
  .appdemo .avstage{background:var(--ad-card);border:1px solid var(--ad-line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:14px 10px;min-height:196px}
  .appdemo .avbust{width:74px;height:74px;border-radius:50%;background:linear-gradient(150deg,var(--ad-active),var(--ad-head));border:1px solid var(--ad-line2);display:flex;align-items:center;justify-content:center}
  .appdemo .avbust svg{width:38px;height:38px;stroke:var(--ad-faint);fill:none;stroke-width:1.6}
  .appdemo .avname{font:700 13px/1.2 'Space Grotesk',sans-serif;color:var(--ad-ink)}
  .appdemo .avsub{font-size:11px;color:var(--ad-faint);text-align:center;line-height:1.4}
  .appdemo .avrail{background:var(--ad-card);border:1px solid var(--ad-line);border-radius:12px;padding:12px 13px}
  .appdemo .avlabel{font:600 10.5px/1 Manrope,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--ad-faint);margin-bottom:9px}
  .appdemo .avtiles{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
  .appdemo .avtile{aspect-ratio:1;border-radius:8px;border:1.5px solid var(--ad-line2);background:var(--ad-head);display:flex;align-items:center;justify-content:center;font:600 10px/1 Manrope,sans-serif;color:var(--ad-faint);position:relative}
  .appdemo .avtile.on{border-color:var(--accent);color:var(--ad-ink);box-shadow:0 0 0 2px rgba(110,91,255,.28)}
  /* One head, one variable per category. Rendered in real skin, hair and fabric
     tones rather than theme greys — a swatch a customer is meant to choose from
     has to look like the thing, and the panel already carries its own palette. */
  .appdemo .avsil{display:block;width:84%;height:84%}
  .appdemo .avdefs{position:absolute;width:0;height:0;overflow:hidden}
  .appdemo .avtile{position:relative;overflow:hidden}
  /* Sits at the top of the tile, clear of the face — at the bottom it landed
     across the jaw and read as part of the artwork. */
  .appdemo .avnone{font-style:normal;position:absolute;top:5px;left:0;right:0;text-align:center;font:700 7.5px/1 Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ad-faint)}
  /* The photo-upload affordance. Shown disabled: the capability is real, but this
     is a mockup, and a control that looks live but isn't is worse than one that
     plainly says it isn't. */
  .appdemo .adstack{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
  .appdemo .adghost{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--ad-line2);border-radius:8px;padding:5px 9px;font:600 10.5px/1 var(--sans);color:var(--ad-faint);white-space:nowrap}
  .appdemo .adghost svg{width:12px;height:12px;stroke:var(--ad-faint);fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;flex:none}
  .appdemo .avdotrow{display:flex;gap:9px;flex-wrap:wrap}
  .appdemo .avdot{width:21px;height:21px;border-radius:50%;border:1px solid var(--ad-line2);display:block;flex:none}
  .appdemo .avdot.on{box-shadow:0 0 0 2px var(--ad-card),0 0 0 3.5px var(--accent)}
  .appdemo .avmeta{margin-top:11px;padding-top:10px;border-top:1px solid var(--ad-line);font-size:11.5px;color:var(--ad-mut);display:flex;justify-content:space-between;gap:10px}
  .appdemo .avcheck{display:flex;flex-direction:column;gap:7px}
  .appdemo .avck{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ad-mut)}
  .appdemo .avck b{color:var(--ad-ink);font-weight:600}
  .appdemo .avck .tick{width:15px;height:15px;flex:none;border-radius:50%;background:rgba(47,163,107,.16);display:flex;align-items:center;justify-content:center}
  .appdemo .avck .tick svg{width:9px;height:9px;stroke:#2FA36B;fill:none;stroke-width:3}
  @media(max-width:560px){.appdemo .avwrap{grid-template-columns:1fr}.appdemo .avstage{min-height:0;flex-direction:row;justify-content:flex-start;gap:12px}.appdemo .avsub{text-align:left}}
  @keyframes adCaret{50%{opacity:0}}
  @keyframes adFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  @media(max-width:820px){.caprow{grid-template-columns:1fr;gap:22px}.caprow.flip .txt{order:-1}}
  .contrast{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
  .contrast .c{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px}
  .contrast .no{font:600 13px/1.4 Manrope,sans-serif;color:var(--text3);text-decoration:line-through;text-decoration-color:var(--red)}
  .contrast .yes{font:700 18px/1.25 'Space Grotesk',sans-serif;color:var(--text);margin-top:7px;letter-spacing:-.01em}
  .contrast .c p{font:400 13.6px/1.55 Manrope,sans-serif;color:var(--text2);margin-top:10px}

/* footer */
footer.site{background:var(--bg2);border-top:1px solid var(--border);margin-top:auto}
footer.site .cols{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));padding:56px 0 36px}
footer.site h2{font:800 11px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin:0 0 15px}
footer.site a{display:block;color:var(--text2);font:500 14px/1 Manrope,sans-serif;padding:7px 0}
footer.site a:hover{color:var(--accent)}
footer.site .fbot{border-top:1px solid var(--border);padding:20px 0 30px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font:500 12.5px/1.5 Manrope,sans-serif;color:var(--text3)}
/* modal + overlay */
.scrim-bg{position:fixed;inset:0;background:rgba(6,6,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;animation:mcFade .2s ease}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:22px;width:min(100%,460px);padding:30px;position:relative;animation:mcIn .25s cubic-bezier(.2,.7,.2,1);max-height:92vh;overflow:auto}
.ovl{background:var(--surface);border:1px solid var(--border2);border-radius:24px;width:min(100%,840px);position:relative;animation:mcIn .25s cubic-bezier(.2,.7,.2,1);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;max-height:92vh}
.ovl .imw{background:var(--tile);min-height:320px}
.ovl .imw img{width:100%;height:100%;object-fit:contain}
.ovl .imw{display:flex;align-items:center;justify-content:center}
.ovl .side{padding:34px;overflow:auto}
/* Intro video. The still and the video share the .imw slot so nothing reflows when the poster is
   swapped for the player. On play the card collapses to a single full-bleed column: the renders are
   900x900 square and the video is a 1280x720 tile, and letterboxing 16:9 into the square slot was
   rejected. At the card's 840px width 16:9 is 840x473, within ~50px of the card's present height, so
   playing grows the card slightly rather than reflowing the page. */
.ovl .imw video{width:100%;height:100%;object-fit:contain;display:block;background:var(--tile)}
.ovl.playing{grid-template-columns:1fr}
.ovl.playing .side{display:none}
.ovl.playing .imw{min-height:0;max-height:none;aspect-ratio:16/9}
.ovl .imw{position:relative}
/* Contrast comes from the darkened patch, not from a heavier glyph — WCAG 1.4.11 wants 3:1 for UI
   components, and a translucent control that passes over Sleek's grey would fail over Bloop's orange.
   The scrim makes the backdrop deterministic so white-on-scrim passes for every character. */
.playscrim{position:absolute;left:50%;top:68%;width:340px;height:190px;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(6,6,14,.74),rgba(6,6,14,.42) 55%,rgba(6,6,14,0));
  pointer-events:none;transition:opacity .18s ease}
.playbtn{position:absolute;left:50%;top:68%;transform:translate(-50%,-50%);display:inline-flex;
  align-items:center;gap:9px;padding:11px 18px 11px 15px;border:1px solid rgba(255,255,255,.34);
  border-radius:999px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  font:800 12.5px/1 Manrope,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  transition:background .18s ease,transform .18s ease}
.playbtn:hover{background:rgba(255,255,255,.24);transform:translate(-50%,-50%) scale(1.04)}
.playbtn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.playbtn svg{width:15px;height:15px;fill:#fff;flex:none}
.ovl.playing .playbtn,.ovl.playing .playscrim{opacity:0;pointer-events:none}
/* The character picker. Spans the full card in BOTH states so switching stays available while a video
   plays — one video watched is one character understood; four watched is the proposition understood,
   which is the thing that is hard to make in copy. */
.ovlgal{grid-column:1/-1;display:flex;gap:8px;padding:12px 14px;overflow-x:auto;overflow-y:hidden;
  border-top:1px solid var(--border2);background:var(--surface);scrollbar-width:thin}
.ovlgal button{flex:none;width:72px;padding:0;border:2px solid transparent;border-radius:12px;
  background:none;cursor:pointer;overflow:hidden;line-height:0;transition:border-color .15s ease,transform .15s ease}
.ovlgal img{width:68px;height:68px;object-fit:cover;border-radius:10px;display:block;background:var(--tile)}
.ovlgal .gnm{display:block;font:800 9.5px/1.4 Manrope,system-ui,sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);padding:4px 0 2px;text-align:center}
.ovlgal button:hover{border-color:var(--border2);transform:translateY(-1px)}
.ovlgal button[aria-current="true"]{border-color:var(--accent)}
.ovlgal button[aria-current="true"] .gnm{color:var(--accent)}
.ovlgal button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.ovlgal button{transition:none}.ovlgal button:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.playbtn{transition:none}.playbtn:hover{transform:translate(-50%,-50%)}}
.xbtn{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;border:1px solid var(--border2);background:var(--surface2);color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;z-index:3}
.xbtn:hover{color:var(--accent);border-color:var(--accent)}
.field{margin-bottom:14px}
.field label{display:block;font:600 12.5px/1 Manrope,sans-serif;color:var(--text2);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:11px;padding:12px 13px;font:400 14.5px/1.4 Manrope,sans-serif;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field textarea{resize:vertical;min-height:74px}
.pchip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 13px;font:700 11.5px/1 Manrope,sans-serif;border:1px solid var(--border2);color:var(--text2)}
.pchip.amber{border-color:var(--amber);color:var(--amber)}
.pchip.acc{border-color:var(--accent);color:var(--accent)}
.pchip.green{border-color:var(--green);color:var(--green)}
.okcircle{width:52px;height:52px;border-radius:50%;background:var(--chip-bg);color:var(--green);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.okcircle svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* drawer */
.drawer{position:fixed;inset:0;z-index:80;display:none}
.drawer .db{position:absolute;inset:0;background:rgba(6,6,10,.5);animation:mcFade .2s ease}
.drawer .dp{position:absolute;top:0;right:0;bottom:0;width:min(86%,330px);background:var(--surface);border-left:1px solid var(--border2);padding:22px;display:flex;flex-direction:column;animation:mcDrawer .25s cubic-bezier(.2,.7,.2,1)}
.drawer .dp nav{display:flex;flex-direction:column;gap:4px;margin-top:20px}
.drawer .dp nav a{font:600 19px/1 'Space Grotesk',sans-serif;color:var(--text);padding:13px 8px;border-radius:10px;cursor:pointer}
.drawer .dp nav a:hover,.drawer .dp nav a.on{background:var(--surface2);color:var(--accent)}
.drawer .dp .foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
@keyframes mcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes mcPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
@keyframes mcWave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@keyframes mcIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mcFade{from{opacity:0}to{opacity:1}}
@keyframes mcDrawer{from{transform:translateX(100%)}to{transform:translateX(0)}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.center{text-align:center;max-width:760px;margin:0 auto}
.center .ctarow{justify-content:center}
.legal{max-width:800px}
.legal h2:not(.h2){font:600 19px/1.35 'Space Grotesk',sans-serif;color:var(--text);margin:18px 0 0;letter-spacing:-.01em}
.legal p{font:400 15.3px/1.68 Manrope,sans-serif;color:var(--text2);margin:9px 0 0}
.legal .lead{font-size:16.5px;color:var(--text2)}
.legal a{color:var(--accent)}
.stbanner{display:flex;align-items:center;gap:15px;border-radius:16px;padding:20px 24px;border:1px solid var(--border);background:var(--surface)}
.stbanner.op{border-color:rgba(88,185,139,.35);background:rgba(88,185,139,.10)}
.stbanner.deg{border-color:rgba(229,164,76,.4);background:rgba(229,164,76,.10)}
.stbanner.down{border-color:rgba(201,105,94,.4);background:rgba(201,105,94,.10)}
.stbanner.mnt{border-color:var(--accent);background:var(--chip-bg)}
.stbanner .bd{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--green);background:rgba(88,185,139,.16)}
.stbanner.deg .bd{color:var(--amber);background:rgba(229,164,76,.16)}
.stbanner.down .bd{color:var(--red);background:rgba(201,105,94,.16)}
.stbanner.mnt .bd{color:var(--accent);background:var(--chip-bg)}
.stbanner .bd svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.stbanner h2{font:700 20px/1.2 var(--sans);color:var(--text);letter-spacing:-.01em}
.stbanner .up{margin-left:auto;text-align:right;font:500 12px/1.5 var(--sans);color:var(--text3)}
.sregions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sregions .r{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:8px 14px;font:600 12.5px/1 var(--sans);color:var(--text2)}
.spill{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--sans);padding:6px 11px;border-radius:999px;white-space:nowrap}
.spill.op{color:var(--green);background:rgba(88,185,139,.13)}
.spill.deg{color:var(--amber);background:rgba(229,164,76,.14)}
.spill.down{color:var(--red);background:rgba(201,105,94,.14)}
.spill.mnt{color:var(--accent);background:var(--chip-bg)}
.scomp{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:16px 18px;margin-top:12px}
.scomp .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.scomp .nm{font:600 15px/1.3 var(--sans);color:var(--text)}
.ubar{display:flex;gap:2px;margin-top:13px;height:26px}
.ubar i{flex:1;border-radius:2px;background:var(--green);min-width:0}
.ubar i.deg{background:var(--amber)}
.ubar i.down{background:var(--red)}
.ubar i.mnt{background:var(--accent)}
.ulegend{display:flex;justify-content:space-between;margin-top:8px;font:500 11px/1 var(--sans);color:var(--text3)}
.ulegend .mid{color:var(--text2)}
.inc{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:18px 20px;margin-top:12px}
.inc .ih{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inc h3{font:700 15.5px/1.3 var(--sans);color:var(--text);letter-spacing:-.01em;margin:1.33em 0}
.inc .idate{font:600 12px/1 var(--sans);color:var(--text3)}
.inc .tl{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.inc .tl .u{display:flex;gap:10px;font:400 13.4px/1.5 var(--sans);color:var(--text2)}
.inc .tl .u b{color:var(--text);font-weight:700;min-width:74px;display:inline-block}
.chrel{border-top:1px solid var(--border);padding:26px 0;display:grid;grid-template-columns:190px 1fr;gap:20px}
.chrel:first-child{border-top:none;padding-top:4px}
.chver{font:700 20px/1 var(--sans);color:var(--text);letter-spacing:-.01em}
.chdate{display:block;margin-top:7px;font:500 12.5px/1 var(--sans);color:var(--text3)}
.chitems{display:flex;flex-direction:column;gap:12px}
.chitem{display:flex;gap:12px;align-items:flex-start;font:400 14.5px/1.55 var(--sans);color:var(--text2)}
.chtag{flex:none;font:800 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;padding:5px 8px;border-radius:6px;margin-top:1px}
.chtag.chnew{color:var(--green);background:rgba(88,185,139,.14)}
.chtag.chimp{color:var(--accent);background:var(--chip-bg)}
.chtag.chfix{color:var(--amber);background:rgba(229,164,76,.14)}
@media(max-width:640px){.chrel{grid-template-columns:1fr;gap:8px}}
.dsearch{width:100%;max-width:520px;background:var(--surface2);border:1px solid var(--border2);border-radius:12px;padding:13px 15px;font:400 15px/1 var(--sans)}
.doclist a{display:block;padding:7px 0;font:500 14px/1.5 var(--sans);color:var(--text2)}
.doclist a:hover{color:var(--accent)}
.big404{font:800 clamp(80px,16vw,150px)/1 var(--sans);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.searchbar{display:flex;align-items:center;gap:12px;width:100%;max-width:640px;background:var(--surface2);border:1px solid var(--border2);border-radius:13px;padding:15px 18px;cursor:text;color:var(--text3);font:400 15.5px/1 var(--sans);text-align:left}
.searchbar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.searchbar .kbd{margin-left:auto;font:600 11px/1 var(--sans);border:1px solid var(--border2);border-radius:6px;padding:4px 7px;color:var(--text3)}
.ptabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px}
.ptab{border:1px solid var(--border2);background:transparent;border-radius:999px;padding:8px 15px;font:600 13px/1 var(--sans);color:var(--text2);cursor:pointer;transition:all .15s}
.ptab:hover{border-color:var(--accent);color:var(--accent)}
.ptab.on{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.searchwrap{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:11vh 20px 20px;background:rgba(6,6,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:mcFade .18s ease}
.searchbox{width:min(100%,640px);background:var(--surface);border:1px solid var(--border2);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);animation:mcIn .22s cubic-bezier(.2,.7,.2,1)}
.searchbox .si{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.searchbox .si svg{width:20px;height:20px;fill:none;stroke:var(--text3);stroke-width:2;flex:none}
.searchbox .si input{flex:1;background:none;border:none;outline:none;font:400 17px/1.2 var(--sans);color:var(--text)}
.sresults{max-height:56vh;overflow:auto;padding:8px}
.sresult{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;cursor:pointer;text-align:left;width:100%;background:none;border:none}
.sresult:hover,.sresult.sel{background:var(--surface2)}
.sresult .st{font:800 9px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--chip-bg);padding:5px 6px;border-radius:6px;flex:none;width:46px;text-align:center}
.sresult .sc{min-width:0}
.sresult .sc b{display:block;font:600 14.5px/1.3 var(--sans);color:var(--text)}
.sresult .sc span{font:400 12.5px/1.4 var(--sans);color:var(--text3);display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snofound{padding:28px;text-align:center;color:var(--text3);font:400 14px/1.5 var(--sans)}
.searchbox .sf{padding:11px 16px;border-top:1px solid var(--border);font:500 11.5px/1 var(--sans);color:var(--text3)}
.page{display:none}
.page.active{display:block}
@media(max-width:920px){
  nav.main,.hd-right .btn{display:none}
  .burger{display:inline-flex}
  .hgrid,.two{grid-template-columns:1fr}
  .ovl{grid-template-columns:1fr;max-height:94vh}
  .ovl .imw{min-height:230px;max-height:34vh}
  /* Already single-column here, so playing is a straight swap — but the 34vh cap would crop the tile,
     so release it and let the 16:9 aspect decide the height. */
  .ovl.playing .imw{max-height:none}
  .playscrim{width:250px;height:150px}
}
@media(max-width:520px){
  .pilotbanner{flex-direction:column;align-items:flex-start}
  .modal{padding:24px}
}

/* --- added by the production build --- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface2);color:var(--text);border:1px solid var(--accent);border-radius:0 0 12px 0;padding:14px 20px;font:700 15px/1 Manrope,sans-serif}
.skip:focus{left:0}
.mc-formerr{margin-top:16px;background:var(--surface2);border:1px solid var(--red);border-radius:12px;padding:14px 16px;color:var(--text);font:400 14px/1.6 var(--sans)}
.mc-formerr b{display:block;font:700 14.5px/1.4 Manrope,sans-serif;margin-bottom:4px}
.mc-formerr summary{cursor:pointer;color:var(--text2);font-size:13px}
.mc-formerr p{margin:8px 0 0;color:var(--text2);font-size:13px}
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}