/* ================================================================
 * iOS 26 Design System — colors, type & tokens
 * ----------------------------------------------------------------
 * Inspired by Apple's iOS / iPadOS 26 visual language (Liquid Glass,
 * system colors, vibrancy). Apple's SF Pro is licensed — this system
 * uses Inter as a metric-compatible free substitute. If you have a
 * license to SF Pro, swap the @font-face block for local files.
 * ================================================================ */

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-400-italic-1.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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-400-italic-2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-400-1.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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-serif-400-2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-800-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-800-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-800-3.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-800-4.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-800-5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-800-6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-800-7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-800-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-800-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-800-3.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-800-4.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-800-5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-800-6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-800-7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-800-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-800-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-800-3.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-800-4.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-800-5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-800-6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-800-7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-800-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-800-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-800-3.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-800-4.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-800-5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-800-6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-800-7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/inter-800-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/inter-800-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/inter-800-3.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/inter-800-4.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/inter-800-5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/inter-800-6.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/inter-800-7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-1.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-3.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-5.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-6.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-1.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-3.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-4.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-5.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-500-6.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 {
  /* ———————————————————— System colors (light) ——————————————————— */
  --ios-blue:   #007AFF;
  --ios-green:  #34C759;
  --ios-indigo: #5856D6;
  --ios-orange: #FF9500;
  --ios-pink:   #FF2D55;
  --ios-purple: #AF52DE;
  --ios-red:    #FF3B30;
  --ios-teal:   #30B0C7;
  --ios-yellow: #FFCC00;
  --ios-mint:   #00C7BE;
  --ios-cyan:   #32ADE6;
  --ios-brown:  #A2845E;

  /* ——————————————————————— Grays (light) ——————————————————————— */
  --gray-1: #8E8E93;
  --gray-2: #AEAEB2;
  --gray-3: #C7C7CC;
  --gray-4: #D1D1D6;
  --gray-5: #E5E5EA;
  --gray-6: #F2F2F7;

  /* —————————————————————— Labels (light) ——————————————————————— */
  --label-primary:    rgba(0,0,0,1);
  --label-secondary:  rgba(60,60,67,0.60);
  --label-tertiary:   rgba(60,60,67,0.30);
  --label-quaternary: rgba(60,60,67,0.18);

  /* ——————————————————————— Fills (light) ——————————————————————— */
  --fill-primary:    rgba(120,120,128,0.20);
  --fill-secondary:  rgba(120,120,128,0.16);
  --fill-tertiary:   rgba(118,118,128,0.12);
  --fill-quaternary: rgba(116,116,128,0.08);

  /* ——————————————————— Backgrounds (light) ————————————————————— */
  --bg-primary:           #FFFFFF;
  --bg-secondary:         #F2F2F7;
  --bg-tertiary:          #FFFFFF;
  --bg-grouped-primary:   #F2F2F7;
  --bg-grouped-secondary: #FFFFFF;
  --bg-grouped-tertiary:  #F2F2F7;

  /* ——————————————————— Separators (light) ————————————————————— */
  --separator-opaque:     #C6C6C8;
  --separator-nonopaque:  rgba(60,60,67,0.29);

  /* ——————————————————— Liquid-Glass materials ————————————————— */
  /* Ultra-thin / thin / regular / thick / chrome */
  --material-ultra-thin:   rgba(255,255,255,0.55);
  --material-thin:         rgba(255,255,255,0.70);
  --material-regular:      rgba(245,245,247,0.78);
  --material-thick:        rgba(240,240,243,0.88);
  --material-chrome:       rgba(248,248,250,0.82);
  --material-blur:         28px;
  --material-blur-chrome:  40px;
  --material-saturate:     180%;

  /* ——————————————————— Type scale (iOS text styles) ————————————— */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;

  /* Display / Large Title */
  --t-largetitle-size:    34px;
  --t-largetitle-line:    41px;
  --t-largetitle-weight:  700;
  --t-largetitle-track:   -0.022em;

  /* Title 1 / 2 / 3 */
  --t-title1-size:   28px; --t-title1-line: 34px; --t-title1-weight: 700; --t-title1-track: -0.020em;
  --t-title2-size:   22px; --t-title2-line: 28px; --t-title2-weight: 700; --t-title2-track: -0.018em;
  --t-title3-size:   20px; --t-title3-line: 25px; --t-title3-weight: 600; --t-title3-track: -0.016em;

  /* Headline / Body / Callout */
  --t-headline-size: 17px; --t-headline-line: 22px; --t-headline-weight: 600; --t-headline-track: -0.014em;
  --t-body-size:     17px; --t-body-line:     22px; --t-body-weight:     400; --t-body-track:     -0.014em;
  --t-callout-size:  16px; --t-callout-line:  21px; --t-callout-weight:  400; --t-callout-track:  -0.012em;

  /* Subhead / Footnote / Caption */
  --t-subhead-size:  15px; --t-subhead-line:  20px; --t-subhead-weight:  400; --t-subhead-track:  -0.010em;
  --t-footnote-size: 13px; --t-footnote-line: 18px; --t-footnote-weight: 400; --t-footnote-track:  -0.006em;
  --t-caption1-size: 12px; --t-caption1-line: 16px; --t-caption1-weight: 400; --t-caption1-track:   0;
  --t-caption2-size: 11px; --t-caption2-line: 13px; --t-caption2-weight: 400; --t-caption2-track:   0.004em;

  /* ——————————————————— Geometry tokens ————————————————————————— */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;  /* continuous-ish rect for buttons */
  --r-2xl: 28px;
  --r-3xl: 38px;  /* sheet */
  --r-screen: 55px; /* iPhone corner */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Apple-style elevation (very soft) */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-3: 0 18px 40px rgba(0,0,0,0.10), 0 6px 12px rgba(0,0,0,0.06);
  --shadow-sheet: 0 -12px 48px rgba(0,0,0,0.14);

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.16, 1.1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;

  /* Layout metrics */
  --nav-bar-h:   44px;
  --tab-bar-h:   49px;
  --status-bar-h:54px; /* Dynamic Island-era */
  --safe-bottom: 34px; /* home indicator spacing */

  color-scheme: light dark;
}

/* ——————————————————————— Dark mode overrides ————————————————————— */
:root[data-theme="dark"], .ios-dark {
  /* Colors shift slightly brighter on black (iOS convention) */
  --ios-blue:   #0A84FF;
  --ios-green:  #30D158;
  --ios-indigo: #5E5CE6;
  --ios-orange: #FF9F0A;
  --ios-pink:   #FF375F;
  --ios-purple: #BF5AF2;
  --ios-red:    #FF453A;
  --ios-teal:   #40C8E0;
  --ios-yellow: #FFD60A;
  --ios-mint:   #66D4CF;
  --ios-cyan:   #64D2FF;
  --ios-brown:  #AC8E68;

  /* Grays (dark) — inverted ramp */
  --gray-1: #8E8E93;
  --gray-2: #636366;
  --gray-3: #48484A;
  --gray-4: #3A3A3C;
  --gray-5: #2C2C2E;
  --gray-6: #1C1C1E;

  --label-primary:    rgba(255,255,255,1);
  --label-secondary:  rgba(235,235,245,0.60);
  --label-tertiary:   rgba(235,235,245,0.30);
  --label-quaternary: rgba(235,235,245,0.16);

  --fill-primary:    rgba(120,120,128,0.36);
  --fill-secondary:  rgba(120,120,128,0.32);
  --fill-tertiary:   rgba(118,118,128,0.24);
  --fill-quaternary: rgba(118,118,128,0.18);

  --bg-primary:           #000000;
  --bg-secondary:         #1C1C1E;
  --bg-tertiary:          #2C2C2E;
  --bg-grouped-primary:   #000000;
  --bg-grouped-secondary: #1C1C1E;
  --bg-grouped-tertiary:  #2C2C2E;

  --separator-opaque:     #38383A;
  --separator-nonopaque:  rgba(84,84,88,0.60);

  --material-ultra-thin:   rgba(30,30,32,0.55);
  --material-thin:         rgba(30,30,32,0.70);
  --material-regular:      rgba(28,28,30,0.80);
  --material-thick:        rgba(22,22,24,0.90);
  --material-chrome:       rgba(18,18,20,0.85);
}

/* ——————————————————————— Base text styles ————————————————————————— */
.t-largetitle { font-family: var(--font-sans); font-size: var(--t-largetitle-size); line-height: var(--t-largetitle-line); font-weight: var(--t-largetitle-weight); letter-spacing: var(--t-largetitle-track); }
.t-title1     { font-family: var(--font-sans); font-size: var(--t-title1-size);     line-height: var(--t-title1-line);     font-weight: var(--t-title1-weight);     letter-spacing: var(--t-title1-track); }
.t-title2     { font-family: var(--font-sans); font-size: var(--t-title2-size);     line-height: var(--t-title2-line);     font-weight: var(--t-title2-weight);     letter-spacing: var(--t-title2-track); }
.t-title3     { font-family: var(--font-sans); font-size: var(--t-title3-size);     line-height: var(--t-title3-line);     font-weight: var(--t-title3-weight);     letter-spacing: var(--t-title3-track); }
.t-headline   { font-family: var(--font-sans); font-size: var(--t-headline-size);   line-height: var(--t-headline-line);   font-weight: var(--t-headline-weight);   letter-spacing: var(--t-headline-track); }
.t-body       { font-family: var(--font-sans); font-size: var(--t-body-size);       line-height: var(--t-body-line);       font-weight: var(--t-body-weight);       letter-spacing: var(--t-body-track); }
.t-callout    { font-family: var(--font-sans); font-size: var(--t-callout-size);    line-height: var(--t-callout-line);    font-weight: var(--t-callout-weight);    letter-spacing: var(--t-callout-track); }
.t-subhead    { font-family: var(--font-sans); font-size: var(--t-subhead-size);    line-height: var(--t-subhead-line);    font-weight: var(--t-subhead-weight);    letter-spacing: var(--t-subhead-track); }
.t-footnote   { font-family: var(--font-sans); font-size: var(--t-footnote-size);   line-height: var(--t-footnote-line);   font-weight: var(--t-footnote-weight);   letter-spacing: var(--t-footnote-track); }
.t-caption1   { font-family: var(--font-sans); font-size: var(--t-caption1-size);   line-height: var(--t-caption1-line);   font-weight: var(--t-caption1-weight);   letter-spacing: var(--t-caption1-track); }
.t-caption2   { font-family: var(--font-sans); font-size: var(--t-caption2-size);   line-height: var(--t-caption2-line);   font-weight: var(--t-caption2-weight);   letter-spacing: var(--t-caption2-track); }

/* ——————————————————————— Liquid Glass helpers ————————————————————— */
.lg-chrome {
  background: var(--material-chrome);
  backdrop-filter: blur(var(--material-blur-chrome)) saturate(var(--material-saturate));
  -webkit-backdrop-filter: blur(var(--material-blur-chrome)) saturate(var(--material-saturate));
  border: 0.5px solid rgba(255,255,255,0.35);
}
.lg-regular {
  background: var(--material-regular);
  backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
}
.lg-thin {
  background: var(--material-thin);
  backdrop-filter: blur(20px) saturate(var(--material-saturate));
  -webkit-backdrop-filter: blur(20px) saturate(var(--material-saturate));
}
.lg-ultrathin {
  background: var(--material-ultra-thin);
  backdrop-filter: blur(14px) saturate(var(--material-saturate));
  -webkit-backdrop-filter: blur(14px) saturate(var(--material-saturate));
}

/* Base */
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); color: var(--label-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }


body { margin:0; background: var(--bg-primary); color: var(--label-primary); font-family: var(--font-sans); }
a { color: var(--ios-blue); text-decoration: none; }
a:hover { color: #0062CC; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

    @media (max-width: 1100px) {
      /* Nav wraps to a second row instead of squeezing labels mid-phrase */
      .nav-row { flex-wrap: wrap; row-gap: 0 !important; }
      .r-navlinks {
        order: 3; width: 100%;
        justify-content: space-between; gap: 0 !important;
        border-top: 1px solid var(--separator-nonopaque);
        margin-top: 12px;
      }
      .r-navlinks .nav-link { padding: 13px 4px; min-height: 44px; display: inline-flex; align-items: center; }
    }

    @media (max-width: 760px) {
      .r-grid2, .r-grid3 { grid-template-columns: 1fr !important; gap: 32px !important; }
      .r-pad { padding: 32px 24px !important; }
      h1 { font-size: 36px !important; }
      h2 { font-size: 27px !important; }
      .nav-tools { gap: 6px !important; }
      .nav-select { font-size: 13px; padding: 9px 28px 9px 10px; }
    }

    /* Phones: let the nav tools drop to their own full-width row under the logo
       so the language picker, theme toggle and CTA never crowd or overflow. */
    @media (max-width: 560px) {
      .nav-row { gap: 12px !important; padding: 12px 18px !important; }
      .nav-tools {
        order: 2; width: 100%; flex-wrap: wrap;
        justify-content: space-between; gap: 8px !important;
      }
      .r-navlinks { margin-top: 0; }
      .nav-tools .nav-select { flex: 1; min-width: 0; }
      /* Web app + waitlist share a full-width row, always visible */
      .nav-cta { display: flex !important; width: 100%; gap: 8px; }
      .nav-cta > * { flex: 1; white-space: nowrap; }
      .nav-app-link, .nav-waitlist { font-size: 14px !important; padding: 10px 12px !important; }
      .cta-full { display: none !important; }
      .cta-short { display: inline !important; }
      h1 { font-size: 32px !important; }
      h2 { font-size: 25px !important; }
      #calculator { padding: 48px 18px 56px !important; }
      #calculator .r-grid2 { padding: 22px !important; gap: 26px !important; }
      /* Email + CTA stack instead of overflowing */
      .join-row > button { flex: 1 0 100% !important; }
    }

    /* Waitlist input never forces horizontal overflow — it shrinks, the button wraps */
    .join-row { flex-wrap: wrap; }
    .join-row > input { min-width: 0; }
  

/* ================================================================
 * Site styles — accent, interactive states, hover effects
 * ================================================================ */
:root {
  --accent: #007AFF;
  /* Equity — the money that becomes yours. Apple's system green, straight from the
     tokens above, so it shifts correctly in dark mode. */
  --equity: var(--ios-green);
  --equity-fill: var(--ios-green);
}

.nav-link { transition: color .15s ease; white-space: nowrap; }
.nav-link:hover { color: #0062CC !important; }
.nav-link.active { color: var(--accent) !important; }

.role-pill {
  border: none; border-radius: 19px; padding: 8px 18px;
  font-size: 14px; font-weight: 600; font-family: var(--font-sans);
  cursor: pointer; background: transparent; color: var(--label-secondary);
  box-shadow: none; transition: background .15s ease, color .15s ease;
}
.role-pill.active { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); }

.currency-btn { background: transparent; color: var(--label-secondary); box-shadow: none; }
.currency-btn.active { background: var(--bg-primary); color: var(--label-primary); box-shadow: var(--shadow-1); }

.hov-blue-dark:hover { background: #0062CC !important; }
.hov-blue-light:hover { background: #3395FF !important; }
.hov-black:hover { background: #000 !important; }
.hov-text-blue:hover { color: #0062CC !important; }

/* Web-app access point — green, always visible next to the waitlist CTA */
.nav-cta { display: contents; }
.cta-short { display: none; }
.nav-app-link { transition: background .15s ease, color .15s ease; }
.nav-app-link:hover { background: var(--equity); color: #fff !important; }

/* Hero "web preview live" badge is a link to the web app */
.hero-preview-badge { transition: background .15s ease, transform .15s ease; }
.hero-preview-badge:hover { background: rgba(0,122,255,0.18) !important; }
.hero-preview-badge:hover svg { transform: translateX(2px); transition: transform .15s ease; }

/* ———————————————————————— Nav bar & tools —————————————————————— */
.site-nav {
  background: var(--material-chrome);
  backdrop-filter: blur(var(--material-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(180%);
}

.nav-select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--label-primary); background-color: transparent;
  border: 1px solid var(--separator-opaque); border-radius: 22px;
  padding: 9px 32px 9px 14px; min-height: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9.5 L12 15.5 L18 9.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.nav-select:hover { border-color: var(--accent); color: var(--accent); }
.nav-select option { color: #000; }
[dir="rtl"] .nav-select { padding: 9px 14px 9px 32px; background-position: left 12px center; }

.nav-icon-btn {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--separator-opaque); border-radius: 50%;
  color: var(--label-primary); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-icon-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(0,122,255,0.08); }
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }

/* Footer language picker — clickable, current language highlighted */
.footer-lang {
  background: none; border: none; padding: 0; font: inherit; font-family: var(--font-sans);
  color: var(--label-tertiary); cursor: pointer; transition: color .15s ease;
}
.footer-lang:hover { color: var(--accent); }
.footer-lang.active { color: var(--label-primary); font-weight: 700; }

/* Footer appearance toggle (moved out of the nav) */
.footer-theme {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: transparent; border: 1px solid var(--separator-opaque); border-radius: 22px;
  padding: 8px 14px; min-height: 40px; cursor: pointer;
  color: var(--label-primary); font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.footer-theme:hover { color: var(--accent); border-color: var(--accent); background: rgba(0,122,255,0.08); }
.footer-theme-label { line-height: 1; }
.lbl-to-light { display: none; }
:root[data-theme="dark"] .lbl-to-dark { display: none; }
:root[data-theme="dark"] .lbl-to-light { display: inline; }

/* —————————————————— Dark mode, site level ——————————————————— */
/* iOS puts grouped surfaces at pure black; this page layers cards on the page ground,
   so the grouped steps lift one level to stay visible. */
:root[data-theme="dark"] {
  --bg-grouped-primary:   #1C1C1E;
  --bg-grouped-secondary: #2C2C2E;
  --bg-secondary:         #1C1C1E;
}
/* Phone-mockup chrome is drawn in pure black; invert it on a dark screen. */
:root[data-theme="dark"] svg [fill="#000"] { fill: var(--gray-3); }
:root[data-theme="dark"] svg [stroke="#000"] { stroke: var(--gray-3); }
:root[data-theme="dark"] div[style*="background:#000"] { background: var(--gray-3) !important; }

/* ————————————————————————— Arabic / RTL ——————————————————————— */
:root[lang="ar"] body {
  font-family: "Noto Kufi Arabic", "Noto Naskh Arabic", "Geeza Pro", "Tahoma", var(--font-sans);
}
:root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] h3 { letter-spacing: 0 !important; }
[dir="rtl"] .skip-link { left: auto; right: 12px; }
[dir="rtl"] input[type="range"] { direction: ltr; }
/* Phone mockups stand in for app screenshots — keep them LTR under Arabic. */
[dir="rtl"] .phone { direction: ltr; text-align: left; }

/* ——————————————————————— Focus & keyboard access ————————————————— */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
input[type="range"]:focus-visible { outline-offset: 6px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: #fff;
  border-radius: 0 0 12px 12px; padding: 12px 20px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ——————————————————————— FAQ accordion ——————————————————————————— */
.faq-item { background: var(--bg-grouped-primary); border-radius: 18px; }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 26px; font-size: 18px; font-weight: 700;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item .faq-chevron { flex: none; margin-top: 4px; transition: transform .2s var(--ease-standard); stroke: var(--label-secondary); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); stroke: var(--accent); }
.faq-item .faq-answer { margin: 0; padding: 0 26px 24px; font-size: 15px; line-height: 1.6; color: var(--label-secondary); max-width: 60ch; }