/* yTranslate marketing site — design tokens match the app's own design
   system (app/src/theme.ts) and the analytics dashboard's theme, so all
   three surfaces read as the same product. */
/* Task 15.2c -- self-hosted @font-face declarations, merged in from the
   former fonts.css. Two render-blocking stylesheets cost a full extra
   chain level: the browser can't discover any @font-face until a SEPARATE
   fonts.css finishes downloading and parsing. One file moves font
   discovery one hop earlier. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-cyrillic-ext.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-cyrillic-ext.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-cyrillic-ext.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(/fonts/inter-400-cyrillic.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(/fonts/inter-400-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-greek.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(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-400-cyrillic-ext.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(/fonts/inter-400-cyrillic.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(/fonts/inter-400-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-400-greek.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(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-400-cyrillic-ext.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(/fonts/inter-400-cyrillic.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(/fonts/inter-400-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-400-greek.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(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-400-cyrillic-ext.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: 700;
  font-display: swap;
  src: url(/fonts/inter-400-cyrillic.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: 700;
  font-display: swap;
  src: url(/fonts/inter-400-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-400-greek.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: 700;
  font-display: swap;
  src: url(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-400-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-500-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{
  --void:#07070d;
  --panel:#111119;
  --panel-2:#15151f;
  --blue:#5B8DEF;
  --violet:#9B6BF2;
  --magenta:#F0529C;
  --amber:#F5A25C;
  --mint:#34D399;
  --text:#F6F6FA;
  --text-secondary:#C7C7D4;
  --link:#AFC6FF;
  --border:rgba(255,255,255,0.14);
  --btn-grad:linear-gradient(90deg,#3557C7,#6B3FD1,#C23A78);
  --brand-grad:linear-gradient(90deg,var(--blue),var(--violet),var(--magenta));
  --brand-grad-diag:linear-gradient(135deg,var(--blue),var(--violet),var(--magenta));
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
html, body{ background:#07070d; }
body{
  margin:0;
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  min-height:100vh;
}
h1,h2,h3{ font-family:'Space Grotesk',sans-serif; color:#fff; line-height:1.2; margin:0 0 .5em; }
code, .mono{ font-family:'IBM Plex Mono',monospace; }
p{ color:var(--text-secondary); margin:0 0 1em; }
a{ color:var(--link); text-underline-offset:3px; }
a:not(.btn){ text-decoration:underline; }
a:hover{ opacity:0.85; }
:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:6px;
}
.skip-link{
  position:absolute; left:12px; top:-60px;
  background:#fff; color:#111; padding:12px 18px; border-radius:10px;
  font-weight:700; z-index:100; transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(7,7,13,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-row{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px; }
.brand, .brand:hover{ display:flex; align-items:center; gap:10px; text-decoration:none !important; }
.brand-mark{ width:34px; height:34px; border-radius:10px; background:var(--brand-grad-diag); display:grid; place-items:center; flex:none; }
.brand-name{ color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; }
.nav-right{ display:flex; align-items:center; gap:14px; }
/* Only 4 section links now (see 5d.1) -- more air between them reads
   calmer than the old 7-item packed row. */
nav.primary ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
nav.primary a{ color:var(--text-secondary); text-decoration:none; font-weight:500; font-size:14px; white-space:nowrap; }
nav.primary a:hover, nav.primary a:focus-visible{ color:#fff; }
/* Mobile-only items (Screenshots, Languages, FAQ, Blog): hidden in the
   desktop 4-link nav, shown in the hamburger dropdown -- see the
   max-width:1023px block below. The header and the mobile menu
   deliberately list different things; this is not a bug. */
.mobile-only{ display:none; }
/* Blog is a page, not an anchor into this one -- it reads as part of the
   action cluster (Blog + language switch + CTA) on desktop, not the
   section table-of-contents. Hidden on mobile: the hamburger's own Blog
   entry (.mobile-only above) covers it there. */
a.nav-blog-link{
  position:relative; color:var(--text-secondary); text-decoration:none; font-weight:500; font-size:14px; white-space:nowrap;
}
.nav-blog-link:hover, .nav-blog-link:focus-visible{ color:#fff; }
/* Blog is a page, not an in-page section, so its "you're here" state is
   computed server-side from which page is being rendered (see
   computed.navBlogAriaCurrent in build.js), not by the scroll-spy in
   main.js -- correct on the blog index and every post even with JS off. */
a.nav-blog-link[aria-current="page"]{ color:#fff; }
a.nav-blog-link[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  border-radius:2px; background:var(--violet);
}
nav.primary li.mobile-only a[aria-current="page"]{ color:#fff; font-weight:600; }
.nav-divider{ width:1px; height:20px; background:rgba(255,255,255,0.14); flex:none; }
/* Active-section highlight (scroll-spy, see main.js) -- quiet: a thin
   underline in the brand accent, not a background fill, and no motion. */
nav.primary a[data-nav-section]{ position:relative; }
nav.primary a[aria-current="true"]{ color:#fff; }
nav.primary a[aria-current="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  border-radius:2px; background:var(--violet);
}
.btn{
  display:inline-block; padding:11px 22px; border-radius:14px; font-weight:700; font-size:14px;
  text-decoration:none; color:#fff; background:var(--btn-grad); border:none; cursor:pointer; white-space:nowrap;
}
.btn-outline{
  background:transparent; border:1px solid var(--border); color:#fff;
}

/* Dropdown language switcher — built to scale to all 20 supported
   languages, not just the two live today. A row of link-pairs (the
   original approach) breaks the header layout well before then. */
.lang-switch{ position:relative; }
/* Task 15.2a -- Inter, not IBM Plex Mono. This is the only above-the-fold
   use of Plex Mono on the page (everything else -- .orbit-chip, .dev-tag,
   .plan .price, .pack-price, .article-byline -- is below the fold), so it
   was gating first render on a ~15KB webfont for two characters ("EN").
   Inter is already preloaded for the hero. Font-family only -- size and
   letter-spacing unchanged, this is a swap, not a redesign. */
.lang-switch-btn{
  display:flex; align-items:center; gap:6px;
  background:transparent; color:var(--text-secondary); cursor:pointer;
  border:1px solid var(--border); border-radius:8px; padding:6px 10px;
  font-family:'Inter',sans-serif; font-size:12.5px; letter-spacing:.02em;
}
.lang-switch-btn:hover, .lang-switch-btn:focus-visible{ color:#fff; }
.lang-switch-btn svg{ transition:transform .15s ease; }
.lang-switch-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }

.lang-switch-menu{
  display:none;
  position:absolute; top:calc(100% + 6px); right:0; z-index:60;
  min-width:170px; max-height:320px; overflow-y:auto;
  background:var(--panel-2); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,0.45);
  list-style:none; margin:0; padding:6px;
}
.lang-switch-menu.open{ display:block; }
.lang-switch-menu a{
  display:block; padding:9px 12px; border-radius:8px; font-size:13.5px;
  color:var(--text-secondary); text-decoration:none;
}
.lang-switch-menu a:hover, .lang-switch-menu a:focus-visible{ background:rgba(255,255,255,0.06); color:#fff; }
.lang-switch-menu a.current{ color:#fff; font-weight:600; }
.lang-switch-menu a.current::after{ content:" ✓"; color:var(--mint); }

.menu-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; flex:none;
  background:transparent; border:1px solid var(--border); color:#fff; cursor:pointer;
}
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-open{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }
.mobile-cta{ display:none; }

/* The horizontal nav needs ~1024px to fit its longest locale (German)
   without overflowing the page -- see the per-locale scrollWidth audit.
   This breakpoint is nav-specific; other rules below have their own
   (600/820/980px etc.) and must not be moved along with this one. */
@media (max-width:1023px){
  nav.primary{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(7,7,13,0.98);
    border-bottom:1px solid var(--border);
    padding:6px 24px 18px;
    max-height:80vh; overflow-y:auto;
  }
  nav.primary.open{ display:block; }
  nav.primary ul{ flex-direction:column; gap:0; }
  nav.primary li{ border-bottom:1px solid var(--border); }
  nav.primary li:last-child{ border-bottom:none; }
  nav.primary a{ display:block; padding:15px 4px; font-size:16px; white-space:normal; }
  nav.primary a[aria-current="true"]::after{ display:none; }
  .mobile-only{ display:block; }
  .nav-blog-link, .nav-divider{ display:none; }
  .nav-right > a.btn{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-cta{ display:block; margin-top:14px; text-align:center; }
}

@media (max-width:600px){
  section{ padding:60px 0; }
  section.tight{ padding:44px 0; }
  .hero{ padding-top:52px; }
  .orbit-demo{ transform:scale(0.82); margin:-14px auto -14px; }
  .pricing-grid{ gap:14px; }
  .legal{ padding:48px 0; }
}

/* decorative background blobs, aria-hidden, never carry text */
.bg-blobs{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0.35; }

section{ position:relative; padding:88px 0; }
section.tight{ padding:56px 0; }

/* Anchor targets need breathing room under the sticky header — without
   this, jumping to e.g. #download or #features lands the target's top
   edge exactly at the viewport top, scrolled directly behind the sticky
   header, hiding it entirely. */
section[id], #download{ scroll-margin-top:84px; }
.eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700;
  color:var(--amber); margin-bottom:12px;
}

/* ---------- Hero ---------- */
.hero{ text-align:center; padding-top:100px; }
.hero h1{ font-size:clamp(34px,6vw,58px); max-width:820px; margin:0 auto 18px; }
.hero .hero-subheadline{
  font-size:clamp(17px,2.4vw,21px); font-weight:600; color:var(--text);
  max-width:680px; margin:0 auto 16px;
}
.hero .lead{ font-size:18px; max-width:600px; margin:0 auto 34px; }
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.hero-note{ font-size:13px; color:var(--text-secondary); margin-bottom:56px; }

.orbit-demo{ position:relative; width:220px; height:220px; margin:0 auto; }
.orbit-ring{ position:absolute; inset:0; animation:spin 28s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.orbit-chip{
  position:absolute; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:11px; font-family:'IBM Plex Mono',monospace;
  border:1px solid rgba(255,255,255,0.3); box-shadow:0 6px 16px rgba(0,0,0,0.4);
}
.orbit-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:78px; height:78px; border-radius:50%; background:var(--brand-grad-diag);
  display:grid; place-items:center; box-shadow:0 14px 34px rgba(155,107,242,0.45);
}

/* ---------- Store badges ---------- */
.store-badges{ display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }
.store-badge-link{ display:inline-flex; line-height:0; border-radius:10px; }
.store-badge-link:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.store-badge-link img{ height:47px; width:auto; display:block; }
/* Apple's and Google's badge guidelines prohibit modifying or animating
   the badge (Apple's, explicitly: "Don't modify, angle, or animate the
   App Store badge") -- the sitewide a:hover{opacity:.85} rule would
   otherwise apply here too, since these are plain <a> links. Pinned back
   to full, unchanging opacity on every interaction state (not just
   :hover), and with no transition ever declared on it, so nothing about
   either badge's rendered appearance changes on interaction. */
.store-badge-link:hover, .store-badge-link:focus, .store-badge-link:active{ opacity:1; }

/* ---------- Section headings ---------- */
h2.section-title{ font-size:clamp(26px,4vw,36px); text-align:center; margin-bottom:14px; }
.section-lead{ text-align:center; max-width:560px; margin:0 auto 48px; font-size:16px; }

/* ---------- Screenshot gallery ---------- */
.screenshot-gallery{
  display:flex; gap:20px; overflow-x:auto; margin-top:36px;
  padding:8px 4px 20px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.screenshot-card{ flex:none; width:200px; scroll-snap-align:start; margin:0; }
.screenshot-card picture, .screenshot-card img{ display:block; width:100%; height:auto; }
.screenshot-card img{ border-radius:16px; border:1px solid var(--border); background:var(--panel); }
.screenshot-card figcaption{
  margin-top:10px; font-size:13.5px; color:var(--text-secondary); text-align:center;
}

.grid{ display:grid; gap:20px; }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr; } }
@media (max-width:560px){ .grid.cols-4{ grid-template-columns:1fr; } }

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px;
}
.card h3{ font-size:17px; margin-bottom:8px; }
/* Task 14.2 -- the post-card title is <h2> now (direct child section of
   the page whose <h1> is "Blog"), not <h3> -- kept as its own selector
   rather than changing .card h3 above, since that rule still applies to
   every OTHER .card (features, use-cases, who-it's-for) whose own <h2>
   section heading already precedes them correctly. */
.post-card h2{ font-size:17px; margin-bottom:8px; }
.card p{ font-size:14.5px; margin:0; }
.icon-badge{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(155,107,242,0.18); border:1px solid var(--border); margin-bottom:14px;
  color:var(--violet);
}
.icon-badge svg{ width:20px; height:20px; }

/* ---------- How it works ---------- */
ol.steps{ counter-reset:step; list-style:none; margin:0; padding:0; display:grid; gap:18px; }
ol.steps li{
  counter-increment:step; display:flex; gap:16px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px;
}
ol.steps li::before{
  content:counter(step); flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--brand-grad-diag); color:#fff; font-weight:700; font-family:'IBM Plex Mono',monospace;
  display:grid; place-items:center; font-size:14px;
}
ol.steps h3{ font-size:16px; margin-bottom:4px; }
ol.steps p{ font-size:14px; margin:0; }

/* ---------- Languages ---------- */
.lang-pills{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:820px; margin:0 auto; }
.lang-pill{
  background:var(--panel); border:1px solid var(--border); border-radius:999px;
  padding:8px 16px; font-size:13.5px; color:var(--text-secondary); display:flex; align-items:center; gap:8px;
}
.dev-tag{
  font-size:10px; font-weight:700; color:var(--amber); border:1px solid rgba(245,162,92,0.4);
  background:rgba(245,162,92,0.12); border-radius:999px; padding:1px 7px; font-family:'IBM Plex Mono',monospace;
  display:inline-block;
}
.lang-legend{ text-align:center; font-size:13px; color:var(--text-secondary); margin-top:20px; }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .pricing-grid{ grid-template-columns:1fr; } }
.plan{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; display:flex; flex-direction:column; gap:10px;
}
.plan.featured{ border-color:rgba(155,107,242,0.6); background:var(--panel-2); }
.plan .badge{
  align-self:flex-start; font-size:11px; font-weight:700; color:var(--amber);
  background:rgba(245,162,92,0.12); border:1px solid rgba(245,162,92,0.4);
  padding:3px 9px; border-radius:999px;
}
.plan .price{ font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:600; color:#fff; }
.plan .price span{ font-size:14px; color:var(--text-secondary); font-family:'Inter',sans-serif; }
.plan ul{ list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--text-secondary); display:grid; gap:6px; }
.plan ul li::before{ content:"✓ "; color:var(--mint); font-weight:700; }
.price-disclaimer{ text-align:center; font-size:12.5px; color:var(--text-secondary); margin-top:18px; }

.wallet-table{
  margin-top:36px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 26px;
}
.wallet-table h3{ font-size:16px; margin-bottom:4px; }
.wallet-table > p{ font-size:14px; margin-bottom:18px; }
.wallet-rows{ display:grid; gap:10px; }
.wallet-row{
  display:grid; grid-template-columns:1fr 120px 90px; align-items:center; gap:12px;
  padding:10px 0; border-top:1px solid var(--border); font-size:14px;
}
.wallet-row:first-child{ border-top:none; }
.wallet-row .pack-name{ color:#fff; font-weight:600; }
.wallet-row .pack-credits{ color:var(--text-secondary); text-align:right; }
.wallet-row .pack-price{ font-family:'IBM Plex Mono',monospace; color:#fff; font-weight:600; text-align:right; }
@media (max-width:480px){
  .wallet-row{ grid-template-columns:1fr auto auto; gap:8px; font-size:13px; }
}

/* ---------- FAQ ---------- */
details.faq{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:4px 20px; margin-bottom:12px;
}
details.faq summary{
  cursor:pointer; padding:16px 0; font-weight:600; color:#fff; font-size:15px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; font-size:22px; color:var(--text-secondary); flex:none; }
details.faq[open] summary::after{ content:"–"; }
details.faq p{ padding-bottom:16px; font-size:14.5px; }

/* ---------- Footer ---------- */
footer.site{
  border-top:1px solid var(--border); padding:44px 0 30px; margin-top:40px;
}
.footer-grid{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-col{ flex:1 1 150px; }
/* Below this width the flex-wrap above naturally packs two columns per
   row (e.g. Brand next to the 5-link Product column) — since each row's
   height follows its tallest item, a short column ends up with a large
   empty gap under it before the next row starts. Stacking to a single
   column sidesteps the row-height mismatch entirely rather than trying
   to rebalance column pairings. */
@media (max-width:640px){
  .footer-grid{ flex-direction:column; gap:32px; }
  /* flex-basis tracks the main axis, which flex-direction:column just
     flipped from width to height — the 150px above (a preferred WIDTH in
     the row layout) would otherwise become a preferred/growable HEIGHT
     per stacked section, stretching the short Brand column to fill space.
     Size purely by content instead. */
  .footer-col{ flex:0 0 auto; }
}
/* Task 14.1 -- these are <h2> now (semantically a top-level page region,
   sibling of the main content sections; see build.js's heading-order
   check), not <h4>. font-family is set explicitly because the h1,h2,h3
   base rule above would otherwise switch these from the body's Inter to
   Space Grotesk -- h4 never picked that up, so without this override the
   tag change would be a visible font change, not just a semantic one. */
.footer-col h2{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; font-family:'Inter',sans-serif; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-col a{ font-size:14px; color:var(--text-secondary); text-decoration:none; }
.footer-col a:hover, .footer-col a:focus-visible{ color:#fff; }
.footer-col button.linklike{
  font-size:14px; color:var(--text-secondary); text-decoration:none; background:none; border:none;
  padding:0; cursor:pointer; font-family:inherit; text-align:left;
}
.footer-col button.linklike:hover, .footer-col button.linklike:focus-visible{ color:#fff; }
.footer-bottom{ margin-top:36px; padding-top:20px; border-top:1px solid var(--border); font-size:13px; color:var(--text-secondary); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Article pages ---------- */
.article{ padding:64px 0 0; }
.article-hero{ padding-bottom:8px; }
.article-hero h1{ font-size:clamp(30px,5vw,46px); max-width:760px; }
.article-byline{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--text-secondary);
  margin-bottom:0;
}
.article-body{ padding:32px 0 64px; }
.article-body h2{ font-size:25px; margin-top:48px; }
.article-body p, .article-body li{ color:var(--text-secondary); font-size:16px; max-width:65ch; }
.article-body strong{ color:#fff; }
.article-body hr{ border:none; border-top:1px solid var(--border); margin:40px 0; }

.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.check-list li{ padding-left:26px; position:relative; max-width:62ch; }
.check-list li::before{
  content:"✓"; position:absolute; left:0; top:1px; color:var(--mint); font-weight:700;
}

.source-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; display:flex; gap:16px; align-items:flex-start; margin:24px 0;
}
.source-card .icon{
  flex:none; width:34px; height:34px; border-radius:9px; background:rgba(52,211,153,0.14);
  color:var(--mint); display:grid; place-items:center; font-family:'IBM Plex Mono',monospace;
  font-weight:700; font-size:15px;
}
.source-card .label{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--mint); margin-bottom:6px;
}
.source-card p{ margin:0; font-size:14.5px; }
.source-card blockquote{
  margin:8px 0 0; padding-left:12px; border-left:2px solid var(--border);
  font-style:italic; color:#fff; font-size:14.5px;
}

.article-legal{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--border);
  font-size:12.5px; color:var(--text-secondary); line-height:1.6;
}

/* Task 9's 9.7 -- a dedicated, consistently-styled block for the
   trademark disclaimer, rendered by a shared partial (see
   src/partials/trademark-disclaimer.html) rather than per-locale content,
   so it can't be missing from a locale again. Deliberately at least as
   large as .article-legal above (14px vs 12.5px) and full-opacity text
   color, not the muted/smaller treatment real fine print gets -- this is
   a legal notice, not a footnote, and needs to read as one. */
.trademark-disclaimer{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--border);
  font-size:14px; color:var(--text-secondary); line-height:1.6;
}

a.post-card{
  display:block; text-decoration:none; color:inherit;
  transition:border-color .15s ease;
}
a.post-card:hover{ opacity:1; border-color:var(--violet); }
.post-card-img{
  width:56px; height:56px; border-radius:14px; object-fit:cover;
  display:block; margin-bottom:16px;
}
.post-card .post-card-date{
  font-size:13px; color:var(--text-secondary); margin:0 0 10px;
}

/* ---------- Legal pages ---------- */
.legal{ padding:64px 0; }
.legal-hero{ padding:56px 0 0; }
/* Task 14.3 -- the page title is <h1> now (these pages had none at all),
   and each section heading moved from <h3> to <h2> to stay one level
   below it -- bumping only the title would have created a fresh h1->h3
   skip. */
.legal h1{ font-size:32px; }
.legal .updated{ color:var(--text-secondary); font-size:13px; margin-bottom:28px; }
.legal h2{ font-size:18px; margin-top:30px; }
.legal p, .legal li{ color:var(--text-secondary); font-size:15px; }
.legal ul{ padding-inline-start:20px; }
.back-to-top{ display:inline-block; margin-top:36px; font-size:13px; }
.disclaimer-box{
  background:rgba(245,162,92,0.08); border:1px solid rgba(245,162,92,0.35);
  border-radius:12px; padding:16px 18px; font-size:13.5px; color:var(--text-secondary); margin-bottom:26px;
}

/* ---------- Cookie consent banner ---------- */
#cookie-consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  max-width:640px; margin:0 auto;
  background:var(--panel-2); border:1px solid var(--border); border-radius:16px;
  padding:20px 22px; box-shadow:0 20px 50px rgba(0,0,0,0.5);
  display:none;
}
#cookie-consent.visible{ display:block; }
#cookie-consent p{ font-size:13.5px; margin:0 0 14px; }
#cookie-consent .consent-actions{ display:flex; gap:10px; flex-wrap:wrap; }
#cookie-consent .btn, #cookie-consent .btn-outline{ padding:9px 18px; font-size:13px; }

/* ---------- Browser-language suggestion banner ---------- */
/* In normal document flow (first child of body), not fixed — it scrolls
   away with the page rather than competing with the sticky header or the
   fixed cookie-consent card for screen space. English-only (see
   lang-suggest.js), so no RTL handling needed here. */
#lang-suggest{
  display:flex; align-items:center; justify-content:center; gap:16px;
  flex-wrap:wrap; text-align:center; position:relative;
  background:var(--panel-2); border-bottom:1px solid var(--border);
  padding:10px 44px 10px 16px; font-size:13.5px;
}
#lang-suggest-text{ color:var(--text-secondary); }
#lang-suggest .lang-suggest-actions{ display:flex; align-items:center; gap:10px; }
#lang-suggest .btn{ padding:7px 16px; font-size:13px; }
#lang-suggest-dismiss{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; border:none; background:transparent;
  color:var(--text-secondary); font-size:18px; line-height:1; cursor:pointer;
}
#lang-suggest-dismiss:hover{ background:rgba(255,255,255,0.08); color:var(--text); }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}